Community Picks·3yPatterns
A collection of animation techniques built using CSS or JavaScript with considerations for accessibility and user preferences. You can use the code in these examples to help ensure your projects stay on the right track. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores.
Community Picks·3yThe modern way of serving images
The HTTPArchive found at least 70% of all websites have an image as the most prominent element, yet only 34% of the web uses to create responsive & performant images. To change this, the following article will guide you through responsive image techniques, and introduce a novel technique that aims to make tags work (almost) like tags.
Community Picks·3yMastering CSS Grid
A series of concise lectures and hands-on exercises will guide you through everything you need to know about creating responsive layouts for all of your web applications. You'll learn how to enable grid, define basic layouts, and use DevTools overlays to help plan and debug grid lines and areas.
builder.io·3yCSS: The Good Parts
CSS is like a Swiss army knife for web design. It's got the power to animate, transform, and adapt layouts with and. making it all responsive and cool. It's not just about simple styling anymore, it's about bringing your whole web game to life. Let's dive into how CSS got to where it is today.
CSS {IRL}·3yReducing Complexity in Front End Development
The prevalence of third-party libraries to solve everyday coding problems is both a blessing and a curse. A quick look in our Node modules folder quickly exposes the web of complexity within. A single point of failure can bring down the entire stack, like the well-worn ‘house of cards’ metaphor.
Community Picks·3yFuture CSS: State Container Queries
Chromium team is experimenting with a new type of query, which is called State Query. Last year, size container queries got supported in all major browsers. Adding on that, we now have Style queries, which let us query a container. This is still in Chrome Canary only for now.
ITNEXT·3yBasic CSS resets to apply in every app
Basic CSS resets to apply in every app to every app. By default, almost all elements in html have their default and properties. By default our website looks good, but when we try to change it a little, we get to know the fact that we should go to MDN and check the actual sizings. This is really cumbersome.
Community Picks·3yWhat’s new in CSS
What’s new in CSS - WWDC23 - Videos - Apple Developer Streaming is available in most browsers, and in the WWDC app. Learn techniques and best practices for working with wide-gamut color, creating gorgeous typography. We'll also peer into the future and preview upcoming layout and typography features.
Amplication·3y5 Different Tools to Bundle Node.js Apps
Bundling combines multiple files or modules into a single file or a set of files. This process allows developers to efficiently manage dependencies and simplify the deployments while improving the overall performance of their applications. This article will explore 5 tools and techniques to help you bundle your Node.js application effectively.
asayer·3yRemoving unused CSS with PurgeCSS
Unused CSS is one of the most common problems that can negatively impact website performance. This article will introduce you to PurgeCSS, a tool that can minimize the CSS sent to the browser. Let’s learn what Purge CSS is, how it works, and how to configure it in a Next.js app.
Modern CSS Solutions·3yModern CSS For Dynamic Component-Based Architecture
CSS has had an explosion of new features and improvements in the last few years. Since the early days of CSS, a convention to tame cross-browser styling inconsistencies has been the CSS reset. Here are a few handy rules I now place in my reset to take advantage of modern CSS features.
David Heinemeier Hansson·3yDesign for the web without Figma
Design for the web without Figma is an intermediary abstraction, like Photoshop before it. This is perhaps the biggest, open secret to the productivity and viability of software companies. Designers should treat improving their skills with HTML, CSS, JavaScript, and perhaps even the backend language as a key plank.
freeCodeCamp·3yCSS Transform Handbook – Complete Guide to CSS Transform Functions and Properties
CSS Transform Handbook allows you to translate, rotate, skew, scale, or add perspective effects to HTML elements. This tutorial discusses everything you need to know to transform HTML elements like a pro. The CSS property specifies the transformational effect you wish to apply to an HTML element.
asayer·3yCSS Refactoring Techniques
The right techniques can transform tangled stylesheets into well-organized, modular, and easily maintainable code. Steve Jobs, co-founder of Apple, Inc. This comprehensive guide to mastering CSS refactoring techniques will equip you with the knowledge and tools necessary to refactor your CSS code.
Community Picks·3yBlur Vignette effect in CSS
Blur Vignette effect in CSS is an overlay with backdrop-filter: blur() and a mask-image that creates the vignette. The mask is a combination of 6 gradients - 4 radial gradients for each corner and 2 linear gradients. The black areas mark the parts of our overlay that will be visible.
Community Picks·3yMinimal, modern CSS framework
Spruce CSS is a minimalistic, low-level, lightweight and modern CSS design system. It uses just a few helper classes; most components are drop-ins. Using modern CSS to handle a dark theme or support a different writing direction is more manageable. For a simple compile setup, check out our related blog post.
Community Picks·3yGuide to CSS logical properties
Logical properties provide a powerful solution for web developers to create flexible and maintainable layouts that cater to different languages and writing directions. This article will delve into the world of CSS logical properties, discuss their unique characteristics compared to physical properties, and explore how they can be seamlessly integrated into existing projects.
Community Picks·3yMastering CSS Blend Modes
Mix blend modes allow you to overlay images, text, and elements in general, applying various blending techniques such as multiply, screen, overlay, and more. The modes offer similar capabilities to photo editing software such as Photoshop for manipulating the appearance of elements. Even if you are not using Tailwind, you can still benefit from CSS blending.
Community Picks·3yTeleportation in React: Positioning, Stacking Context, and Portals
React: Positioning, Stacking Context, and Portals are all available in React. We need Portals to escape the "clipping" of content when rendering elements inside elements with. The real thing is not yet available, so let's just teleport components in the DOM for now.
CodePen·3yChris’ Corner: Little Useful Websites
CSS-Pattern Temani Afif’s pattern site has some pretty sophisticated backgrounds that are done just with CSS backgrounds. The site provides SVG, HTML, and CSS for you to copy out, which, I’m sure you're aware, plunking over to CodePen to play with is a snap.
Community Picks·3yHow To Speed Up Page Load With Responsive Images
Responsive images are images that are optimized for the user’s screen size. This means that the image will be downloaded at the correct size and quality. This will significantly reduce the amount of data that is transferred to the user and will speed up your page load times. The solution to this problem is to use responsive images.
freeCodeCamp·3yHow to Build an Image Carousel Component with TypeScript and Styled-Components
In this tutorial, I’ll guide you through the process of creating an image carousel component that looks just like the ones you see on many OTT platforms. We'll start by creating atomic components, such as,, and so on that will display various information about each movie title. Then, we'll stitch these components together.
