News for hackers. Stuff that matters.
Re:Learn CSS Layout the Pedantic Way by lesser_value on Thursday February 29, 2024 @07:40AM (#39548578)
What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.
Re:Learn CSS Layout the Pedantic Way by Vinnl on Thursday February 29, 2024 @08:14AM (#39548857)
> what is actual and what is not

Heh, off-topic, but this is one of my favourite "EU English"-isms: using actual to mean current.

Completely understandable, given how e.g. the Dutch translation of current is actueel (whereas the translation of actual is daadwerkelijk).

Anyway, maybe this is even helpful if a native speaker is confused :)

Re:Learn CSS Layout the Pedantic Way by Tomte on Thursday February 29, 2024 @08:44AM (#39549176)
Yes, first example in https://en.m.wikipedia.org/wiki/Euro_English under Vocabulary.
Re:Learn CSS Layout the Pedantic Way by Vinnl on Thursday February 29, 2024 @03:35PM (#39554687)
Thank you! I've been trying to find [1] again, which I encountered ages ago, and this Wikipedia page got me back there.

[1] https://www.eca.europa.eu/Other%20publications/EN_TERMINOLOG...

Re:Learn CSS Layout the Pedantic Way by dzolob on Thursday February 29, 2024 @09:15AM (#39549531)
In spanish, current translates to actual.
Re:Learn CSS Layout the Pedantic Way by juangacovas on Friday March 01, 2024 @04:23AM (#39560110)
Yep, I acquired the habit to write var names like "cur_thing" for "current thing", you know.
Re:Learn CSS Layout the Pedantic Way by Vinnl on Friday March 01, 2024 @11:59AM (#39563776)
Yeah exactly, looks like it's mostly English that's weird. Translations of "current":

- Danish: aktuel

- Dutch: actueel

- French: actuel

- German: aktuell

- Italian: attuale

- Norwegian: aktuell

- Polish: aktualny

- Portuguese: atual

- Romanian: actual

- Spanish: actual

Even Hungarian has aktuális! So using "actual" to mean "current" is basically just fixing English.

Re:Learn CSS Layout the Pedantic Way by uallo on Thursday February 29, 2024 @08:04AM (#39548747)
What do you mean by "official documentation"? The specification [1]? MDN [2]?

[1] https://drafts.csswg.org/

[2] https://developer.mozilla.org/en-US/docs/Web/CSS

The former is not meant as a learning resource for new web devs. And the latter (which is neither official nor authoritative) usually has information about the "baseline" support ond browser compatibility tables.

Re:Learn CSS Layout the Pedantic Way by lesser_value on Thursday February 29, 2024 @08:32AM (#39549059)
The former, I'm not really new just looking to increase my understanding of some concepts and learning from that has not been too fun. I don't think MDN goes in depth as much as I'd like it to.
Re:Learn CSS Layout the Pedantic Way by farleykr on Thursday February 29, 2024 @08:05AM (#39548765)
I've found the best way is to build things over and over again. That may reflect a certain learning style but actually manipulating styles and layouts really helps hammer home the practical aspects of how it works.

I also approach writing CSS with the goal of writing as little as possible. Not because I don't like it - I tend to think it gets an unfairly bad rap - but because it teaches you how to more effectively style layouts without layering too many declarations.

Re:Learn CSS Layout the Pedantic Way by lesser_value on Thursday February 29, 2024 @08:35AM (#39549090)
I feel like this type of thinking is why 99% of people don't understands css though, when you are just building things you make up rules that don't exist and ignore the ones that do. And its not as straight forward as programming languages are so its very hard to tell when something is "wrong".
Re:Learn CSS Layout the Pedantic Way by farleykr on Thursday February 29, 2024 @08:50AM (#39549252)
Yeah, maybe my suggestion could've been better stated. I'm not suggesting that you can ignore documentation and other forms of writing that explore paradigms and methodologies. I meant there's only so much you can read before actually writing CSS and practicing making layouts becomes a necessary part of learning CSS in depth.

And, to play devil's advocate a little: You can't make up a rule that doesn't exist. Either your CSS will work or it won't. And if it works it's not wrong.

Re:Learn CSS Layout the Pedantic Way by chrisfinazzo on Thursday February 29, 2024 @10:30AM (#39550657)
> You can't make up a rule that doesn't exist. Either your CSS will work or it won't. And if it works it's not wrong.

So much this. Over the course of years, I've gone from writing my CV in Word, TeX, and (finally) straight HTML. Word processors are fairly straightforward -- and yet -- for more complex layouts you will eventually encounter internal sizing constraints that require messing with the global template.

This reality - combined with the fact that MS Office is a gigantic monster which is barely tolerable on macOS, led me to TeX. Plaintext -- more or less -- and good support for integrating with version control systems made it an easy choice.

Fast forward a few years and I'm all HTML + a handful of CSS rules w/ @print at this point. Cryptic error messages and the care and feeding of a BasicTex install just became too much work to bother with. At least in HTML, save for a showstopping error, your document will render something and the errors are usually pretty obvious.

Not so much in TeX...

Modern layout also meant I could ditch floats for nearly everything - flexbox will create reasonable page headers with much less gnashing of teeth.

Re:Learn CSS Layout the Pedantic Way by Our_Benefactors on Thursday February 29, 2024 @07:46AM (#39548618)
Learn flexbox. Learn the box model (especially when to use margin vs padding). Learn how style cascading works (and why we use SCSS and component development to mostly avoid thinking about it). Learn media queries and how to target different screen sizes. Most of all, don't ever feel badly about doing a web search “how to do x in css”, the spec is huge with tons to remember and you won’t memorize everything without using it regularly for an extended period of time.
Re:Learn CSS Layout the Pedantic Way by 0x45696e6172 on Thursday February 29, 2024 @08:33AM (#39549063)
This week I am refreshing my front-end skills, so I did a little market research.

The best resource on CSS basics, I have found, is https://web.dev/learn/css. It includes flexbox and grid.

For design guidelines I recommend Refactoring UI. It is full of actionable advice, which books such as The UX book is lacking.

In my project I use TailwindCSS (by the author of Refacturing UI) with Daisy UI components, so I don't actually write raw CSS. At first TailwindCSS feels like a step backwards to inline CSS, but it is just better than the alternative. I recommend giving it a chance.

Re:Learn CSS Layout the Pedantic Way by ramesh31 on Thursday February 29, 2024 @08:44AM (#39549182)
>What is the best way to learn css in depth? The official documentation is a little wierd about what is actual and what is not.

Don't approach it as a programming language to be "learned" by reading the docs. Just open an inspector and start fiddling.

Re:Learn CSS Layout the Pedantic Way by rchaud on Thursday February 29, 2024 @10:03AM (#39550223)
Best way to learn is to build sites with experimental layouts. You'll get stuck and thats when you'd want to look around the documentation or Stack Overflow. MDN docs are the incredibly dry, so avoid them until absolutely necessary.
Re:Learn CSS Layout the Pedantic Way by maroonblazer on Thursday February 29, 2024 @10:03AM (#39550229)
They're not free, but Jen Kramer's CSS courses on Frontend Masters are very good, and are pretty recent.

https://frontendmasters.com/teachers/jen-kramer/

I attempted CSS back when you had to float anything/everything for positioning and found it extremely confusing. I recently picked it back up, and flexbox and grid make it sooo much easier. I feel like I'm finally getting it.

Re:Learn CSS Layout the Pedantic Way by patternMachine on Thursday February 29, 2024 @07:05PM (#39556913)
Learn page layout and graphic design principles. A lot of CSS is spec'd to support these disciplines and it will make a lot more sense if you are familiar with them. The main reason developers have so much trouble with CSS is that they don't understand the problems it is trying to solve.