Ahmad Shadeed

While I haven’t read his book [0], I always enjoy the articles by Ahmad Shadeed [1][2]. The ones that focus on how big websites like Facebook implemented specific functionality and how he would have tackled it are a great resource in advanced CSS. I would also recommend the “thinking of ways to solve…” gui challenges [3] YouTube videos and web.dev articles by Adam Argyle. Others have mentioned Josh W Comeau who definitely puts out good articles as well. In the end, as with everything programming related it comes down to actually building stuff and getting your hands dirty. CSS is really something you can only get better at by running into real world issues and discovering its quirks. [0] https://debuggingcss.com/ [1] https://www.ishadeed.com [2] https://www.defensivecss.dev [3] https://youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ&a…

Some of my favorites more Frontend leaning: - https://www.joshwcomeau.com/ - https://jhey.dev/writing/ - https://varun.ca/writing - https://ishadeed.com/articles/

Not linear but I recommend: for HTML read chapter 3 & 4 of HTML spec - https://html.spec.whatwg.org/ For CSS I recommend Wes Bos tutorials about flexbox and grid - https://wesbos.com/courses and this blog: https://ishadeed.com/articles/

> I always tell myself that I should use backwards-compatible CSS only. > > I vividly remember IE and many hacks to have css elements properly working in it… The common advice now is to only use CSS that is supported in the last two major versions of each major browser. You can check any css property's support here: https://caniuse.com/ > Imho this is a reason why markdown and other rich-textual formats appeared. Markdown is a superset of html and through it contains css through the style element > Btw is there a some “w3schools” for recent CSS? CSS is constantly changing, I'd recommend the following for how to apply new CSS features: - https://www.youtube.com/@KevinPowell - https://ishadeed.com - https://www.joshwcomeau.com MDN is the best technical reference: https://developer.mozilla.org/en-US/ - You can search any css property in there and it will return all the rulesets for that property. To see how people are using CSS, I'd recommend: - https://codepen.io/ - Mastodon/fediverse - Reason: All other social networks only have webdevs who sip the coolaid of whatever trend is happening at the moment, they're not actually interested in learning what CSS can do. However, the web devs in the fediverse are actually interested in what CSS can do. To see future CSS: - You can see the proposals here: https://github.com/w3c/csswg-drafts/issues - Proposals often require experiments which you can find on mastodon/fediverse. For example:…

> Statistically, we do. Sass won the precprocessor wars and nearly every developer prefer SCSS variables over the var(--oh-god) that is CSS syntax. This isn't about which preprocessor is the most popular; it's about the syntax that's going to be used for CSS that we're going to have to live with for a long time. Look, best practices come and go. Table-based layouts, 960 grid [4], Dreamweaver, special hacks for IE6—we don't do those things any more. With all of the enhancements that have already been added to CSS (CSS Grid, Flexbox, Container Queries, :has() parent selector) and the ones coming—CSS nesting, style queries, conditional, new/better color spaces—using Sass will seem as old-school as including jQuery in every project in a few years. To quote Denzel Washington's character in the movie Training Day: "We don't roll that way any more." [5] If you want to go on using Sass, then nothing changes for you; you can even use custom properties in your Sass files. It's not an all or nothing situation. > How are they more powerful? Does that offset their downside? Seriously? There's no functional downside compared to the alternative. The syntax isn't bad once you understand what's going on, but that's subjective anyway. Even if you don't love the syntax, the functionality they enable for developers more than makes up for that. Sass variables are just static placeholders for values; they're just a step above doing a search and replace in an editor. Very handy when Sass…

This is an inaccurate over-simplification. If you just use HTML and CSS, you can also have really bad Lighthouse scores. For example, vanilla `<img>` will ship the same image to every device, regardless of viewport size. Vanilla `<img>` doesn't enforce setting `width` and `height`, which makes your layouts shift. Slow-loading images and layout shifts are the very things that will downgrade the "100" score he's currently proud of. Frontend performance is basically an iceberg[1]. We tend to look at the top and that's where the fashionable "silver bullet" currently is (whether Rust+wasm or HTML+CSS or a JS framework). Then we find deeper in the iceberg that even a `box-shadow` property[2] can ruin our day, and let alone images, YouTube and Twitter embeds, and all the things that make the web more interesting and powerful than a black page with white text. Oh and it gets even more fun! A Lighthouse score in itself is an over-simplification. There's more to a great experience than the initial impression the site makes, like what happens to FPS when you scroll or click around[2] [1] https://rauchg.com/2020/next-for-vercel#realistic [2] https://ishadeed.com/article/new-facebook-css#using-an-image-for-the-s…

TIL about the dvh units used for the splash. The article even has a video of scrolling down with it. https://ishadeed.com/article/new-viewport-units/ https://caniuse.com/viewport-unit-variants

> - Everything trying to look like a smartphone app, no matter the viewing device. I have a high resolution screen and a high precision pointing device in front of me. Why are half the webpages and many apps presenting buttons the size of texas? You're making a very broad assumption here that everyone is like you. The fact is, they aren't. Big click targets are important for accessibility (if you want to read more, theres a pretty good article on the topic here: https://ishadeed.com/article/clickable-area/)

I feel like this article doesn't explain how `nth-last-child` works clearly. The example uses (n + 3) in a list of five items. Start counting from the 3rd item - ok, the visualization[1] shows us counting from the 3rd-from-last, so now I'm already confused. And then we count "until the end", which actually shows us counting back toward the beginning[2]. And we end up with 3 items. Are they the last 3? The first 3? I can't tell. The author should have chosen a number that didn't sit at the halfway point of the total number of items. The description makes it sound like we start at 5 -> 4 -> 3, then select 3 items, so we select 3 -> 4 -> 5. But that's a tautology. I think what it means is that we start at 1 -> 2 -> 3, and select 3 -> 4 -> 5... is that correct? [1] https://ishadeed.com/assets/css-has-nth-last-child/nth-last-child-2.pn… [2] https://ishadeed.com/assets/css-has-nth-last-child/nth-last-child-3.pn…

Personally I think the most useful 'new' things in CSS that hardly anyone uses yet are the min, max, and Clamp functions. I wrote about them here https://blog.logrocket.com/min-max-clamp-css-functions/ - there are some real embarrassments in that article (probably due to me being busy with other things at the time of writing, and being outside my comfort zone [dealing with design]) - example silly statement: "these functions can accept anything that is a number or a calculable value, like the length of a variable, as an input." length of a variable? WTF did I write that for!?! I could also probably have saved my time because the day after I finished writing it I found this post https://ishadeed.com/article/css-min-max-clamp/ which makes a lot of the same points, less verbosely, and better, with much nicer looking examples because I guess this guy has a design sense. on edit: I mean I am just jealous of the examples he made, I sweated trying to make something up to show the power of the functions and explain their use and I don't think I did a good job of it, didactically, and his examples were really good. Probably he sweated to, but they look effortless.