Some CSS comics
Some CSS comics
How To Use Styled-Components In React — Smashing Magazine
Styled components are “visual primitives for components”, and their goal is to give us a flexible way to style components. The result is a tight coupling between components and their styles. While the component-driven approach has ushered in a new frontier in the way we build web applications, it isn’t without its imperfections — one being its usability and scalability with CSS. This has given bir
Modern CSS Techniques To Improve Legibility — Smashing Magazine
Which aspects should we take into consideration when designing and developing for reading? How can we create accessible, comfortable, inclusive experiences for all readers, including the most challenged and those affected by dyslexia? In this article, Edoardo Cavazza will cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and p
Application State Management with React
How React is all you need to manage your application state
Building Desktop Apps With Electron And Vue — Smashing Magazine
Electron is an open-source software framework developed and maintained by GitHub. It allows for the development of desktop GUI applications using web technologies. In this tutorial, Timi Omoyeni explains what you need to keep in mind when building a desktop application with Vue.js using the [Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/).
Translating Design Wireframes Into Accessible HTML/CSS — Smashing Magazine
The most efficient way to build accessible websites and apps is to “shift left” by incorporating accessibility testing into the earliest stages of your development and design process. In this article, Harris Schneiderman will walk you through the process of analyzing a wireframe from an accessibility perspective and making coding decisions to optimize for accessibility in both design and developme
Use react-error-boundary to handle errors in React
How to simplify your React apps by handling React errors effectively with react-error-boundary
How To Build An Accessible Front-End Application With Chakra UI And Nuxt.js — Smashing Magazine
In this article, Kelvin Omereshone is going to be looking at how to use Chakra UI and NuxtJS in building accessible front-end applications. In order to follow along, you should be familiar with using the progressive front-end framework Vue.js with Nuxt. If not, see the Vue.js and NuxtJS docs to get started. In order to make the web more accessible, there are a couple of best practices and standard
CSS Painting Order
Usually, when I see terms like "painting order" or "stacking context" my brain will start to shut off and my eyes will gloss over. Not that my brain doesn't
How to Italicize Text
HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.
Backdrop Filter effect with CSS
I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a
JavaScript to Know for React
What JavaScript features you should be familiar with when learning and using React
An Introduction To Stimulus.js — Smashing Magazine
In this article, Mike Rogers will introduce you to Stimulus, a modest JavaScript framework that complements your existing HTML. It allowed him to build applications in a way that feels reusable and approachable. While he doesn’t think Stimulus will take over the web like React and Vue have, he thinks it is a worthwhile tool to learn. By the end, you’ll have an understanding of the premise of Stimu
Crowdfunding Web Platform Features With Open Prioritization — Smashing Magazine
In this article, Rachel Andrew takes a look at a new effort to crowdfund the costs of implementing browser features. She encourage developers to use, talk about, and raise implementation bugs with browsers to try to get features implemented, however, what if there was a more direct way to do so? What if web developers could get together and fund the development of these features? This article is b
How To Create A Custom React Hook To Fetch And Cache Data — Smashing Magazine
There is a high possibility that a lot of components in your React application will have to make calls to an API to retrieve data that will be displayed to your users. It’s already possible to do that using the `componentDidMount()` lifecycle method, but with the introduction of Hooks, you can build a custom hook which will fetch and cache the data for you. That’s what Ademola Adegbuyi will cover
CSS Transitions In Vuejs And Nuxtjs — Smashing Magazine
Transitions are a nice way to remove, change, or update data in an application because their occurrence adds a nice effect and is good for the user experience. In this tutorial, Timi Omoyeni will look at the different ways to apply transitions in both Vue.js and Nuxt.js applications. Using these transitions in your applications and websites create a better visual experience and sometimes draws and
Frontity is React for WordPress
Some developers just prefer working in React. I don't blame them really, because I like React too. Maybe that's what they learned first. I've been using it
Next.js: Server-side Rendering vs. Static Generation
How to use Static Generation, Incremental Static Generation, and Client-side Fetching with Next.js.
A little bit of plain Javascript can do a lot
Julia Evans:
How to Make a List Component with Emotion
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and
Displaying the Current Step with CSS Counters
Say you have five buttons. Each button is a step. If you click on the fourth button, you're on step 4 of 5, and you want to display that.
Improving Chromium's browser compatibility in 2020
This is exactly what I love to hear from any browser vendor:
CSS News July 2020 — Smashing Magazine
If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead! However, if you like to know what is on the way and read more about the things you can play with in a beta version of a browser, read on! Today, Rachel Andrew takes a look at some of the interesting CSS features that
How To Test Your React Apps With The React Testing Library — Smashing Magazine
Testing gives confidence in written code. In the context of this article, ‘testing’ means ‘automated testing’. Without automated testing, it is significantly harder to ensure the quality of a web application of significant complexity. Fails caused by automated testing may lead to more bugs in production. In this article, Chidi Orji is going to show you how React developers can quickly start testin
A First Look at Reanimated 2 - Shopify
With Reanimated 2, the team at Software Mansion asked: “How would it look if there were no constraints when writing gestures and animations in React Native?” and started from there.
Differences Between Static Generated Sites And Server-Side Rendered Apps — Smashing Magazine
Statically generated sites or pre-rendering and server-side rendered applications are two modern ways to build front-end applications using JavaScript frameworks. These two modes, yet different, are often mixed up as the same thing and in this tutorial, Timi Omoyeni is going to show you the differences between them. You’ll learn what a server-side-rendered application is, as well as learn about fr
Smashing Podcast Episode 19 With Andy Bell: What Is CUBE CSS? — Smashing Magazine
We’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? Drew McLellan talks to its creator, Andy Bell, to find out.
When Sass and New CSS Features Collide
Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can
Styling Layout Wrappers In CSS
Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most
Firebase Push Notifications In React — Smashing Magazine
In this tutorial, Chidi Orji will show you how to work with Firebase push notifications in the backend and frontend. We’ll set up the notifications system with an Express back-end server. Afterwards, you’ll listen for the notifications in a React front-end app. You will implement the backend first, then move on to the frontend. In that way, you can use whichever section appeals more to you. So let
Quick Tips for High Contrast Mode
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
The Return of the 90s Web
One of my forever-lessons here on CSS-Tricks is that having your own website and blogging on it is a good idea. It's probably one of the best decisions I've
Line-Animated Hamburger Menu
This kind of SVG + CSS animation trickery is catnip to me. Mikael Ainalem shares how to draw a hamburger icon (the "three lines" thing you're well familiar
Dropbox dives into CoffeeScript
During July's Hackweek, the three of us rewrote Dropbox's full browser-side codebase to use CoffeeScript instead of JavaScript, and we've been really happy with how it's been going so far. This is a controversial subject, so we thought we'd start by explaining why...
The Mad Magazine Fold-In Effect in CSS
This was always my favorite thing in Mad magazine. One page (the inside of the back cover, I think) was covered in a zany illustration. You folded that page
A Practical Guide To Testing React Applications With Jest — Smashing Magazine
Building a well-functioning application requires good testing; otherwise, knowing whether your application works as expected would be a matter of guesswork and luck. Jest is one of the best tools available for testing React applications. In this article, Adeneye David Abiodun will show you everything you need to create a solid test for your React components and application.
Let's Make a Multi-Thumb Slider That Calculates The Width Between Thumbs
HTML has an <input type="range">, which is, you could argue, the simplest type of proportion slider. Wherever the thumb of that slider ends up could
Using Custom Property "Stacks" to Tame the Cascade
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we've had
Rough Notation
This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are
An Introduction To SWR: React Hooks For Remote Data Fetching — Smashing Magazine
In this article, we’ll be looking at a new way of retrieving data in React Apps named SWR. This is a set of hooks for remote data fetching that makes things easier, such as caching, pagination, and so on.
Easing Animations in Canvas
The <canvas> element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A
Everything You Need to Know About FLIP Animations in React
With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE). Here’s a handy Pen
Better Reducers With Immer — Smashing Magazine
In this article, we’re going to learn how to use Immer to write reducers. When working with React, we maintain a lot of state. To make updates to our state, we need to write a lot of reducers. Manually writing reducers results in bloated code where we have to touch almost every part of our state. This is tedious and error-prone. In this article, Chidi Orjil going to see how Immer brings more simpl
Smashing Podcast Episode 18 With Mina Markham: How Can I Learn React? — Smashing Magazine
In this episode of the Smashing Podcast, we’re talking about learning React. What’s React like to work with, and how can experienced developers get started? Drew McLellan chats to Mina Markham to find out.
Internationalization In Vue With The Vue I18n Plugin — Smashing Magazine
Adding Internationalization to your Vue.js application has a lot of use cases and in this tutorial, we’re going to learn how to do this with the Vue I18n plugin and how to set it up in our application.
On Adding IDs to Headings
Here's a two-second review. If an element has an ID, you can link to it with natural browser behavior. It's great if headings have them, because it's often
CUBE CSS
A CSS methodology from Andy Bell:
How to Reverse CSS Custom Counters
I needed a numbered list of blog posts to be listed with the last/high first and going down from there. Like this:
Building A Facial Recognition Web Application With React — Smashing Magazine
In this article, Adeneye David Abiodun explains how to build a facial recognition web app with React by using the Face Recognition API, as well as the Face Detection model and Predict API. The app built in this article is similar to the face detection box on a pop-up camera in a mobile phone — it’s able to detect a human face in any image fetched from the Internet. Please note that you will need t
Creative Background Patterns Using Gradients, CSS Shapes, and Even Emojis
You can create stripes in CSS. That’s all I thought about in terms of CSS background patterns for a long time. There’s nothing wrong with stripes; stripes are
CSS :is() and :where() are coming to browsers
Šime Vidas with the lowdown on what these pseudo-selectors are and why they will be useful:
Cool Little CSS Grid Tricks for Your Blog
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more
The Trickery it Takes to Create eBook-Like Text Columns
There's some interesting CSS trickery in Jason Pamental's latest Web Fonts & Typography News. Jason wanted to bring swipeable columns to his digital book
How to Get All Custom Properties on a Page in JavaScript
We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with
Higher-Order Components In React — Smashing Magazine
In this tutorial, Shedrack Akintayo is going to learn about higher-order components, the syntax of higher-order components, as well as use cases for them. In the process, you will build a higher-order component from an existing React component. By the end of this tutorial, you will understand the basics of higher-order components and how to build them.
Consuming REST APIs In React With Fetch And Axios — Smashing Magazine
If you’re a React developer who’d like to learn how you can start consuming APIs in your React applications, then this article is for you. Consuming REST APIs in a React Application can be done in various ways, but in this tutorial, Shedrack Akintayo will be discussing how we can consume REST APIs using two of the most popular methods known as Axios and Fetch API. You will learn what a REST API is
A New Way to Delay Keyframes Animations
If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you’ve probably been frustrated to find there’s no built-in way
Overlapping Header with CSS Grid
Snook shows off a classic design with an oversized header up top, and a content area that is "pulled up" into that header area. My mind goes to the same place:
Rotated Table Column Headers… Now With Fewer Magic Numbers!
Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping
React Error Handling And Reporting With Error Boundary And Sentry — Smashing Magazine
In this article, Chidi Orji will explore the concept of error boundaries in a React application. You’ll work through an example app to see how we can use error boundaries to deliver a better app experience. Finally, you’ll integrate Sentry into our error boundary for realtime error reporting. The only prerequisite is that you have some familiarity with React class components. Let’s dig in!