A (more) Modern CSS Reset - Andy Bell
A solid update to Andy’s four-years old CSS reset. Best of all, every single line comes with an explanation. So if you don’t like the reasoning, don’t use that line.
Link tags: development
2343
Tailwind, and the death of web craftsmanship
CSS is better now. It’s not perfect, but it’s better than its ever been, and it’s better than tailwind. Give it another try. Don’t reach for big globs of libraries to paper over the issues you think it has.
This is why it’s so important to re-evaluate technology decisions.
I’ve seen people, lead and principal engineers, who refuse to learn modern JS, insisting that since it was bad in 2006 its bad today. Worse still is some of these people have used their leadership positions to prevent the use of modern JS.
We’re still not innovating with AI-generated UI.
It looks like it will be a great tool for prototyping. A tool to help developers that don’t have experience with CSS and layout to have a starting point. As someone who spent some time building smoke and mirrors prototypes for UX research, I welcome tools like this.
What concerns me is the assertion that this is production-grade code when it simply is not.
CSS { In Real Life } | Cool Tools
I knew of most of these front-end development tools (like Utopia, obviously), but some were new to me.
Educational Sensational Inspirational Foundational
A historical record of foundational web development blog posts.
Every one of these 42 articles are gold!
It warms my heart to see Resilient Web Design included in this list.
Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four
A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
Things you forgot (or never knew) because of React - Josh Collinsworth blog
I don’t think most people using React on a regular basis realize quite how much it’s fallen behind.
Following on from Josh’s earlier post where he said “React isn’t great at anything except being popular”, here are the details.
Every decision React’s made since its inception circa 2013 is another layer of tech debt—one that its newer contemporaries aren’t constrained by.
This is particularly damning:
No other modern frontend framework is as stubbornly incompatible with the platform as React is.
The good news:
React is a bit like a git branch that’s fallen well behind
main. You might not realize it, if React is the star your galaxy orbits around, but…well, frontend has moved on. The ecosystem has taken those ideas and run with them to make things that are even better.
A Blog Post With Every HTML Element by Patrick Weaver
I enjoyed this self-documenting journey of exploration.
Just normal web things.
A plea to let users do web things on websites. In other words, stop over-complicating everything with buckets of JavaScript.
Honestly, this isn’t wishlist isn’t asking for much, and it’s a damning indictment of “modern” frontend development that we’ve come to this:
- Let me copy text so I can paste it.
- If something navigates like a link, let me do link things.
- …
The Cost Of JavaScript - 2023 - YouTube
A great talk from Addy on just how damaging client-side JavaScript can be to the user experience …and what you can do about it.
XML is the future - by Nobody has time for Python
I learned that geeks think they are rational beings, while they are completely influenced by buzz, marketing, and their emotions. Even more so than the average person, because they believe they are less susceptible to it than normies, so they have a blind spot.
The New CSS · Matthias Ott – User Experience Designer
CSS is now the most powerful design tool for the Web.
I think this is now true. It’ll be interesting to see how this will affect tools and processes:
What I expect to see overall is that the perception and thus the role of CSS in the design process will change from being mainly a presentational styling tool at the end of the waterfall to a tool that is being used at the heart of making design decisions early on.
Aaron Gustafson
Progressive enhancement begins with constructing a robust and universally accessible foundation, designed to cater to all users, regardless of individual or technological circumstances. From here, advanced features can be strategically layered to enhance the user experience wherever feasible. Even as these enhancements roll out, guided by the capacities of different devices, the quality of network connections, or the availability of specific APIs, the core functionalities should remain steadfast and accessible to all.
CSS { In Real Life } | Thoughts From CSS Day
It’s clear that companies don’t value CSS skills in the same way as, say Javascript — which is reflected in pay disparity, bootcamp priorities, and the lack of visibility in job descriptions. It’s not uncommon to see front end job specifications listing React, Redux, Typescript and more, with barely a passing mention of HTML and CSS, despite being core web technologies. New developers are encouraged to learn just enough CSS to get by, rather than cultivate a deep knowledge and appreciation for the language, and that’s reflected in the messy, convoluted code, riddled with bad practices, that many of us have to clear up afterwards.
Web Developer Ground Hog Day | Go Make Things
JavaScript is great. I love using it, and it does amazing things. But maybe it’s time we stop repeating these same patterns of development over and over again. Maybe we can use JavaScript more responsibly, and focus more effort on HTML and CSS.
The continuing tragedy of CSS: thoughts from CSS Day 2023 · Paul Robert Lloyd
With new or expanded modules for layout, typography, animation, audio (though sadly not speech) and more, it’s possible to specialise in a subset of CSS. Yet when aspects of frontend development not involving JavaScript are seen as ignorable by employers, few will get this opportunity.
Paul shares his big-picture thoughts after CSS Day:
But one CSS conference isn’t enough. This language is now so broad and deep, its implementation across browsers never more stable and complete, that opportunities to grow the community abound.
Modern CSS in Real Life - Chris Coyier
This is a terrrific presentation by Chris, going through some practical implementations of modern CSS: logical properties, viewport units, grid, subgrid, container queries, cascade layers, new colour spaces, and view transitions.
Watch Transitions in Slow Motion in Chrome’s DevTools - Jim Nielsen’s Blog
This is a very handy tip if you’re adding view transitions to your website!
Jack Franklin – Abstractions, complexities and off-ramps – All Day Hey! 2023 - YouTube
This is a terrific talk by Jack on how to deal with the tooling involved in modern front-end development:
- Maintaining control,
- Dependency awareness,
- Lean on browser primitives,
- Have an exit strategy.
