builder.io·3yThe React Ecosystem in 2023
The React Ecosystem celebrates its 10th anniversary in 2023 as the ecosystem continues to flourish. For those who are new to React, getting started can be a daunting task. With a vast array of tools and libraries available within the React ecosystem, choosing the right combination for your project can be challenging.
Community Picks·3yWhy we're bad at CSS
CSS is more like putting their hand in the pain box from Dune while some product manager has a gom jabbar to their neck, daring them to pull their hand out. Despite the latest advancements in CSS, many are still stuck in this kind of BEM mindset, trying to encapsulate everything.
freeCodeCamp·3yFull Stack Engineer – Career Guide
Full Stack engineering roles have been growing in popularity over the last decade. But what exactly are full-stack engineers? What do they do on a day-to-day basis? And how can you become a full- Stack engineer yourself? In this article, I will go over the definition of full- stack engineering.
Community Picks·3ySmolCSS
SmolCSS create an intrinsically responsive grid layout, optionally using a CSS custom property to extend to variable contexts. Each column will resize at the same rate, and items will begin to break to a new row if the width reaches the --min value. The smol stacked layout is a grid feature that can often replace older techniques that relied on absolute positioning.
Chrome Developers·3yWhat's new in CSS and UI: I/O 2023 Edition
What's new in CSS and UI: I/O 2023 Edition - Chrome Developers. What’s new inCSS andUI: I-O 20 23 Edition. The past few months have ushered in a golden era for web UI. New platform features let you build logical interfaces with components that own their responsive styling information.
Community Picks·3yThe Complete Guide to Becoming a Web Developer: Part 1
The Power of Semantic HTML is the use of HTML markup to reinforce the semantics or meaning of the content. CSS allows you to set colors, fonts, layouts, and even create animations! We'll dive deeper into these topics and explore JavaScript, Bootstrap, and other tools that will allow you to create dynamic, interactive websites.
DEV·3yDark Mode in 3 Lines of CSS and Other Adventures
Dark Mode is a design trend that reduces eye strain, conserves battery life, and creates a sleek and modern aesthetic. This post explores different approaches to implementing Dark Mode using CSS features, System Colors, and prefers-color-scheme media queries.
Community Picks·3yBuilding a modern design system in layers
Building a modern design system in layers is a good way to evolve it well, and to make it so good that developers are happy with it even if they don’t like the rigid choices that were made. Modern CSS can do so much these days. Start building out as much of the design system as possible with HTML and CSS.
Community Picks·3yCrafting the Next.js Website
Crafting the Next.js website involved implementing grid lines, a blinking switchboard animation, consistent focus states, serif quote marks, explicit accessibility labeling, styling data attributes, fluid typography, and gradient tracing. The project was a collaborative effort.
Community Picks·3yRearrange / Animate CSS Grid Layouts with the View Transition API
As new items get added or change size, they animate. Today I revisited its flagship demo, switching it over to use the View Transition API. If you take a close look at the reworked version, you’ll find some of the finer details – such as a tiny delay per transitioned element – are missing.
freeCodeCamp·3yHow to Build a Beginner-Friendly JavaScript Application
JavaScript is a popular programming language for building web, mobile, and desktop applications. If you plan to start learning JavaScript, some of them are worth learning as well. We will build a beginner-friendly JavaScript application that will teach you the basics of creating HTML structure, working with CSS, and finally adding dynamic behaviour using JavaScript.
Medium·3yHTML Tags Uncovered: Prefetch vs. Preload
Prefetch vs. Preload is a technique used to reduce the perceived load time of a web page by fetching resources in advance before they are needed. It enables browsers to download and cache external resources, such as CSS files, JavaScript files, images, or fonts, ahead of time.
Community Picks·3yGetting Started with Tailwind
Tailwind is a utility-first CSS framework for building modern web designs. It offers many benefits, including easy creation of complex layouts, elimination of custom CSS, pre-defined utility classes, high customization, and enhanced accessibility. To set up Tailwind, you need to initialize the directory as a Node.js project, install the required packages, create a configuration file, add paths to template files, and start the server.
ITNEXT·3yLayout Composition Using Styled Components Without CSS-in-JS
Using Styled Components Without CSS-in-JS is an emerging pattern that allows us to build truly reusable components that can adapt to various use cases that diverge so often in an evolving product design. There is a new generation of libraries, such as Radix UI, that finally allow us to use the tools functionally.
