Comment by shubhamjain | Hacker News Reader

Comment by shubhamjain | Hacker News Reader

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/

> 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/

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.

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).

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.

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.

Search for the blog posts “X for Dinosaurs.” Already getting old but will get you up to 2018.

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.

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/; there is also 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)

- And ofc, there are some templates/frameworks that bring something of that together (https://create-react-app.dev/; maybe 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.

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

Could be worse.

Could be LaTeX.

Reply on news.ycombinator.com