3 ms·

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and

I find articles like this daunting, even when it predates CSS Grid which has made CSS Layouting even more complex. I have been a web developer for 10 years, and I still feel out of depth about CSS. How it all works, obscure edge cases, internals, and the sheer number of features in there. I wrote about it recently [1] > I hadn’t even completely caught up with the intricacies of Grid Layouting, when subgrid and container queries were shipped. Several of the newly added properties handle cases so specific that I hardly believe I would ever use them (hanging-punctuation and font-palette, for example). > Here’s more: there are at least three properties related to hyphenating paragraphs. You might have used the filter property, but did you know that it supports an entirely different class of filters using SVG? Or that you can tweak the image scaling algorithm? Or border-radius support elliptical corners? Of course, you can say that about any technology, but CSS is different. It handles too many things, in too many ways, and changes too much, too fast. [1]: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/ https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

paulddraper 3y ago
Could be worse. Could be LaTeX.
moi2388 3y ago
Same. I just start using grids everywhere and that works. But then again I just write plain css and generally don’t have global stylesheets, which helps a lot
philsnow 3y ago
My perennial problem with frontend work is that all the articles are written for an audience of people who have been keeping up with the state of the art for the last 15 years. The first time I wrote actual frontend things in exchange for USD, I was generating "DHTML" (my fingers stumbled over even typing the abbreviation because it's flushed so far out of my muscle memory cache) directly from perl. I know frontend stuff like a six year old knows calculus, and I feel like there's no way for me to catch up now.
- dragonwriter 3y ago
  There's a whole lot of frontend content written for complete newbies, as well as stuff written for people who have been keeping up; if you are an experienced programmer who hasn't been keeping up with frontend stuff, you'll probably need to use a mix of stuff written for people with less programming experience than you have and stuff written for people with more frontend experience, but catching up isn't making up for the intervening time you weren't engaged, because while a tiny fraction of the knowledge of frameworks that has come and gone went into shaping context for the "always current" people learning the new stuff, a large fraction of it is just knowledge that is no longer relevant.
- mixmastamyk 3y ago
  Search for the blog posts “X for Dinosaurs.” Already getting old but will get you up to 2018.
- SJC_Hacker 3y ago
  The big shift has been to Single Page Applications (SPA) either indirectly using a framekwork like React, or Angular or using the Javascript fetch() directly. So this also means that links (within your website/application) go away. This avoids page reloads, and it feels more like a desktop application. The foundation is modern Javascript, another big new concept is async/await, combined with the fetch() calls so the entire screen doesn't lock up while your'e waiting for it to return The other big shift is using CSS framekworks. Big ones now are Bootstrap and Tailwind. I'm actually working on making a video with a live coding experiment making a small social networking site with some modern practices. But some people still persist in doing the old way - e.g. Wikipedia. And Hacker News isn't an SPA from what I understand Also, the "old way" has started to make a comeback with Server Side Rendering, as the compiled Javascript files using frameworks can get up to several megabytes and its taking too long to load the site.
- nsinreal 3y ago
  There are so much changes for the last 15 years. You don't need to learn all that path. You need to learn modern web development from scratch, ignoring history. Right now, modern web development is: - Yarn/PNPM as package manager - TypeScript as a programming language - React as UI framework/library - React Router for navigating multiple pages - UI kit (I personally have good experience with React Material UI - https://mui.com/ https://mui.com/; there is also https://tanstack.com/ https://tanstack.com/) - Something to deal with fetching data (tanstack query client is cool, provides caching out of the box) - Something to deal with forms if you have that - Maybe a store for managing data when it's too complex (see https://redux-toolkit.js.org/api/createSlice https://redux-toolkit.js.org/api/createSlice) - And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/ https://create-react-app.dev/; maybe https://vitejs.dev/ https://vitejs.dev/) - google for templates. I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.
Trufa 3y ago
> I have been a web developer for 10 years, and I still feel out of depth about CSS. What do you mean by this? I've been dealing with CSS for even more years than that and can't for the life of me remember if its align-items or justify-content cause I won't even try to. As soon as I do flexbox I open https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid I remember even less! But I still don't feel out of depth because I can get it to do what I want easily enough with a couple of scoffs and WTFs here and there. I've heard this about CSS so many times, but honestly, I find it kind of easy to do get the layout I want without too much effort most of the times, I just don't remember CSS in the same way I remember how to do JS.
nicoburns 3y ago
If you're interested in CSS layouting, consider learning Flexbox and then CSS Grid first. These are both relatively straightforward with good documentation and relatively few quirks (esp. grid). You don't really need flow layout at all these days. And you can certainly skip floats and table layouts entirely (use them only for their originally intended purpose of floated images within textual content and literal tables).

paulddraper 3y ago

Could be worse. Could be LaTeX.

moi2388 3y ago

Same. I just start using grids everywhere and that works. But then again I just write plain css and generally don’t have global stylesheets, which helps a lot

philsnow 3y ago

My perennial problem with frontend work is that all the articles are written for an audience of people who have been keeping up with the state of the art for the last 15 years. The first time I wrote actual frontend things in exchange for USD, I was generating "DHTML" (my fingers stumbled over even typing the abbreviation because it's flushed so far out of my muscle memory cache) directly from perl. I know frontend stuff like a six year old knows calculus, and I feel like there's no way for me to catch up now.

dragonwriter 3y ago
There's a whole lot of frontend content written for complete newbies, as well as stuff written for people who have been keeping up; if you are an experienced programmer who hasn't been keeping up with frontend stuff, you'll probably need to use a mix of stuff written for people with less programming experience than you have and stuff written for people with more frontend experience, but catching up isn't making up for the intervening time you weren't engaged, because while a tiny fraction of the knowledge of frameworks that has come and gone went into shaping context for the "always current" people learning the new stuff, a large fraction of it is just knowledge that is no longer relevant.
mixmastamyk 3y ago
Search for the blog posts “X for Dinosaurs.” Already getting old but will get you up to 2018.
SJC_Hacker 3y ago
The big shift has been to Single Page Applications (SPA) either indirectly using a framekwork like React, or Angular or using the Javascript fetch() directly. So this also means that links (within your website/application) go away. This avoids page reloads, and it feels more like a desktop application. The foundation is modern Javascript, another big new concept is async/await, combined with the fetch() calls so the entire screen doesn't lock up while your'e waiting for it to return The other big shift is using CSS framekworks. Big ones now are Bootstrap and Tailwind. I'm actually working on making a video with a live coding experiment making a small social networking site with some modern practices. But some people still persist in doing the old way - e.g. Wikipedia. And Hacker News isn't an SPA from what I understand Also, the "old way" has started to make a comeback with Server Side Rendering, as the compiled Javascript files using frameworks can get up to several megabytes and its taking too long to load the site.
nsinreal 3y ago
There are so much changes for the last 15 years. You don't need to learn all that path. You need to learn modern web development from scratch, ignoring history. Right now, modern web development is: - Yarn/PNPM as package manager - TypeScript as a programming language - React as UI framework/library - React Router for navigating multiple pages - UI kit (I personally have good experience with React Material UI - https://mui.com/ https://mui.com/; there is also https://tanstack.com/ https://tanstack.com/) - Something to deal with fetching data (tanstack query client is cool, provides caching out of the box) - Something to deal with forms if you have that - Maybe a store for managing data when it's too complex (see https://redux-toolkit.js.org/api/createSlice https://redux-toolkit.js.org/api/createSlice) - And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/ https://create-react-app.dev/; maybe https://vitejs.dev/ https://vitejs.dev/) - google for templates. I recommend finding some friend with modern experience or at least some youtube tutorials or at least some learning course. That would help you to catch up on the best way to bootstrap your first project. Then you can practice.

Trufa 3y ago

> I have been a web developer for 10 years, and I still feel out of depth about CSS. What do you mean by this? I've been dealing with CSS for even more years than that and can't for the life of me remember if its align-items or justify-content cause I won't even try to. As soon as I do flexbox I open https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid I remember even less! But I still don't feel out of depth because I can get it to do what I want easily enough with a couple of scoffs and WTFs here and there. I've heard this about CSS so many times, but honestly, I find it kind of easy to do get the layout I want without too much effort most of the times, I just don't remember CSS in the same way I remember how to do JS.

nicoburns 3y ago

If you're interested in CSS layouting, consider learning Flexbox and then CSS Grid first. These are both relatively straightforward with good documentation and relatively few quirks (esp. grid). You don't really need flow layout at all these days. And you can certainly skip floats and table layouts entirely (use them only for their originally intended purpose of floated images within textual content and literal tables).