Native CSS Masonry Layout In CSS Grid
Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already
Lots of Ways to Use Math.random() in JavaScript
Math.random() is an API in JavaScript. It is a function that gives you a random number. The number returned will be between 0 (inclusive, as in, it’s possible
A Complete State Machine Made With HTML Checkboxes and CSS
State machines are typically expressed on the web in JavaScript and often through the popular XState library. But the concept of a state machine is adaptable
Considerations for Making a CSS Framework
Lessons learned from building a framework (Halfmoon) using CSS variables, and the future of customizability and user personalization on the web.
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy
A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they
Testing Vue Applications With The Vue Testing Library — Smashing Magazine
The Vue Testing library can help you to test your applications by mirroring the way that a user would interact with them. Here’s everything you need to know if you want to get started right away. In this article, Kelvin Omereshone will look at testing Vue applications using the Vue Testing Library — a lightweight library that emphasizes testing your front-end application from the user’s perspectiv
Creating UI Components in SVG
I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a
Graphery SVG
I've compared SVG and Canvas before. If you're trying to decide between them, read that. I'd say the #1 difference between them is vector (SVG) versus raster
Boop!
An in-depth tutorial that teaches how to create one of the most adorable interactions I've ever created. We'll learn how to use React components and hooks to abstract behaviours, and see how to design the perfect API. Even if you're not into animations, I think you'll find it interesting!
A Comparison Of async/await Versus then/catch — Smashing Magazine
In JavaScript, there are two main ways to handle asynchronous code: then/catch (ES6) and async/await (ES7). These syntaxes give us the same underlying functionality, but they affect readability and scope in different ways. In this article, Bret Cameron will show you how one syntax lends itself to maintainable code, while the other puts us on the road to callback hell!
New zine: Hell Yes! CSS!
New zine: Hell Yes! CSS!
A Dynamically-Sized Sticky Sidebar with HTML and CSS
Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a
A Thoughtful Way To Use React’s useRef() Hook — Smashing Magazine
In a React component, `useState` and `useReducer` can cause your component to re-render each time there is a call to the update functions. In this article, you will find out how to use the `useRef()` hook to keep track of variables without causing re-renders, and how to enforce the re-rendering of React Components.
Thinking Outside the Box with CSS Grid
Great tutorial from Alex Trost (based on some demos, like this one, from Andy Barefoot) showcasing how, while CSS grid has straight grid lines across and
Standardizing Select And Beyond: The Past, Present And Future Of Native HTML Form Controls — Smashing Magazine
Working with native HTML Form Controls has been such a pain point for web developers, from styling to extending them, the limitations are so great that countless dev hours have been spent recreating them. But why are form controls so difficult to work with? In this article, Stephanie dives into the past by going back to the beginning of HTML and tracing the evolution of form controls through to th
Copyediting with Semantic HTML
Tracking changes is a quintessential copyediting feature for comparing versions of content. While we’re used to tracking changes in a word processing
Jetpack Backup
It's no secret that CSS-Tricks is a WordPress site. And as such, we like to keep things WordPress-y, like enabling the block editor and creating some custom
Making Sense Of TypeScript, In 50 Lessons — Smashing Magazine
Meet our new practical guide on everything you need to know about TypeScript, its type system, and all its benefits in 50 lessons. Jump to table of contents and get the book right away.
What’s New In Vue 3? — Smashing Magazine
Vue 3 comes with a lot of interesting new features and changes to some of the existing ones that are aimed at making development with the framework a lot easier and maintainable. In this article, we’re going to take a look at some of these new features and how to get started with them. We’re also going be taking a look at some of the changes done to the existing features.
How Film School Helped Me Make Better User Experiences
Recently, I finished a sixty-day sprint where I posted hand-coded zombie themed CSS animation every day. I learned a lot, but it also took me back to film
Libraries for SVG Drawing Animations
In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it’s drawing itself. It’s 2020 now, and the trick is still popular.
The Raven Technique: One Step Closer to Container Queries
For the millionth time: We need container queries in CSS! And guess what, it looks like we're heading in that direction.
ARIA in CSS
Jeremey reacting to Sara's tweet, about using selectors instead of classes when the styling you are applying is directly related to the ARIA state.
How to Detect When a Sticky Element Gets Pinned
Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.
JavaScript Operator Lookup
Okay, this is extremely neat: Josh Comeau made this great site called Operator Lookup that explains how JavaScript operators work. There are some code
A Dive Into React And Three.js Using react-three-fiber — Smashing Magazine
`react-three-fiber` is a powerful Three.js renderer that helps render 3D models and animations for React and its native applications. Today, Fortune Ikechi is going to show you how to configure and use react-three-fiber for building and displaying 3D models and animations in React and React Native applications. By building our 3D ludo dice box, you’ll learn about the basics of Three.js alongside i
How to Create a Commenting Engine with Next.js and Sanity
One of the arguments against the Jamstack approach for building websites is that developing features gets complex and often requires a number of other
Quick LocalStorage Usage in Vue
localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I've personally
This page is a truly naked, brutalist html quine.
Here's a fun page coming from secretGeek.net. You don't normally think "fun" with brutalist minimalism but the CSS trickery that makes it work on this page is
Native CSS Masonry Layout In CSS Grid — Smashing Magazine
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew will explain the draft spec, with examples that you can try out in Firefox Nightly. While this is a feature you won’t be able to use in production right now, your feedback would be valuable to help make sure it serves the requirements that you have for this kind of layout. So
How To Build A GraphQL Server Using Next.js API Routes — Smashing Magazine
With this guide, Ibrahima Ndaw will teach you the basics of Next.js API Routes. He will start by explaining what they are and why API Routes are useful compared to REST or GraphQL APIs. Then, he will guide you through a step by step tutorial on how to build your very first GraphQL server with Next.js and the Github API. If you want to extend your React or Next.js skills to the server-side and be a
Super Simple Start to css variables
How to get started using css variables
Anima 4.0: Go Straight From Design to React in the Design Handoff
Imagine this scenario: You get an email from the design team. It contains a link to a high-fidelity prototype of a React app they want you to build. You click
Introducing Framer Motion — Smashing Magazine
Animations, when done right, are powerful. However, creating eye-catching animations with CSS can be tricky. In comes Framer Motion. With Framer Motion, you don’t need to be a CSS expert to make beautiful animations. Framer Motion provides us with production-ready animations and a low-level API we can interact with to integrate these animations into our applications.
Introducing the npm public roadmap and a new feedback process
npm is the world’s largest package registry, powering the world’s largest development community—JavaScript. Without them, npm would not be where it is today, and we know that maintaining open lines…
Getting Started With Next.js — Smashing Magazine
Next.js is a React framework that is bound to ease your life as a React developer by abstracting away the common and redundant tasks (such as routing) into relatively simpler and powerful APIs. That way, you can focus on writing your apps instead of reinventing the wheel. This tutorial will be beneficial to developers who are looking to get started with Next.js or have already begun but need to fi
How Facebook is bringing QUIC to billions
We are replacing the de facto protocol the internet has used for decades with QUIC, the latest and most radical step we’ve taken to optimize our network protocols to create a better experience for people on our services. Today, more than 75 percent of our internet traffic uses QUIC and HTTP/3 (we refer to QUIC […]
Smashing Giveaway: Join Smashing Newsletter and Win Smashing Prizes — Smashing Magazine
We’re running a lil’ giveaway among our dear Smashing newsletter subscribers, and if you subscribe, you join in the raffle, too! With online workshop tickets, books and an entire collection of 100 Smashing cats in SVG format! We’ll announce the winners in the upcoming issue on Oct. 27, 2020. Meow, join in and good luck!
Smarter Ways to Generate a Deep Nested HTML Structure
A look at using HTML preprocessors to generate HTML, particularly deeply nested HTML, which is useful for a variety of interesting browser art and experimentation.
Announcing the 2020 State of CSS Survey
Last year's State of CSS Survey yielded interesting results. There's the quick adoption of features, like calc() and CSS custom properties. There's also the
Smashing Podcast Episode 27 With Stefan Baumgartner: What Is TypeScript? — Smashing Magazine
We’re talking about TypeScript. What is it, and how can it help us write better JavaScript? Drew McLellan talks to expert Stefan Baumgartner to find out.
Comparing Styling Methods in 2020
Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It's in the context of Next.js, which is somewhat important as Next.js has some
Supercharge Testing React Applications With Wallaby.js — Smashing Magazine
Ever had to switch your focus from your editor and to your terminal to see the results of your tests? This article will introduce you to Wallaby.js — a JavaScript productivity tool that supercharges your IDE by allowing you to get real-time feedback on your JavaScript tests in your code editor even before saving the file. You will also learn how to use Wallaby.js for testing React applications. No
Introducing Cloudflare Browser Isolation beta
Today, we’re excited to open up a beta of a third approach to keeping web browsing safe with Cloudflare Browser Isolation.
Layoutit Grid: Learning CSS Grid Visually With a Generator
Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add
Managing Long-Running Tasks In A React App With Web Workers — Smashing Magazine
In this tutorial, Chidi Orji is going to show you how to use the [Web Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) to manage time-consuming and UI-blocking tasks in a JavaScript app by building a sample web app that leverages Web Workers. Finally, we’ll end the article by transferring everything to a React application. If you need more insights into this topic, Chi
Build And Deploy An Angular Form With Netlify Forms And Edge — Smashing Magazine
Netlify Forms is a form handling feature that receives submissions from HTML forms automatically. In this article, Zara Cooper will explain how you could use an Angular reactive form with Netlify Forms. Since Netlify Forms only work when deployed on Netlify, she’ll also illustrate how to deploy your app on Netlify Edge.
React Form Validation With Formik And Yup — Smashing Magazine
Forms are an integral part of how users interact with our websites and web applications. Validating the data the user passes through the form is a critical aspect of our jobs as web developers. However, it doesn’t have to be a pain-staking process. In this article, Nefe Emadamerho-Atori will show you how Formik handles the state of the form data, validates the data, and handles form submission.
Top 10 games from the JS13K 2020 competition 🕹
The ninth annual js13kGames competition wrapped up last weekend with over 220 games submitted. All created in a month and in less than 13kB of JavaScript. For anyone not in…
Using WebXR With Babylon.js — Smashing Magazine
In this overview of WebXR technologies and the Babylon.js framework, we’ll embark on a journey through the past, present, and future of mixed reality both on the web and on immersive headsets. We’ll inspect the underpinnings of WebXR and the most important aspects of the WebXR Device API before turning our attention to Babylon.js, a framework for building immersive applications in JavaScript for w
Balancing on a Pivot with Flexbox
Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question
Images as Code: Representing Localized and Evolving Products on Marketing Pages - Shopify
A deep dive into a JavaScript-based module to scale HTML content like an image would inside of its container and a look at why it was developed.
Master TypeScript In 50 Short Lessons — Smashing Magazine
Meet our new book, “TypeScript in 50 Lessons”, a deep-dive to understand what TypeScript is, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. 464 pages. Jump to table of contents and get the book right away.
Smashing Podcast Episode 26 With Natalia Tepluhina: What’s New In Vue 3.0? — Smashing Magazine
We’re talking all about VueJS. What’s new in the 3.0 release, and how hard will it be to migrate? Drew McLellan talks to core team member Natalia Tepluhina to find out.
Full-Bleed Layout Using CSS Grid
Certain layouts are surprisingly dastardly. On the modern web, one of the most common layouts is also one of the trickiest. In this tutorial, I break down how to build the "full-bleed" layout using CSS Grid.
Useful Tools In Vue.js Web Development — Smashing Magazine
There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier. Today, Timi Omoyeni is going to show you a few of these libraries, what they do, and how to use them during development. This tutorial is aimed at beginners that either just started learning about Vue or alr
CSS Media Queries Guide
CSS Media queries are a way to target browser by certain characteristics, features, and user preferences, then apply styles based on those things.
Parsel: A tiny, permissive CSS selector parser
If you've ever thought to yourself, gosh, self, I wish I could have an Abstract Syntax Tree (AST) of this CSS selector, Lea has your back.
How To Use Face Motion To Interact With Typography — Smashing Magazine
In this article, Edoardo Cavazza will show you how to use face recognition with Tensorflow in order to extract some information from the camera, such as the distance between the screen and user’s face or the amount of people reading the page. Then, we will pass those data to CSS in order to adapt typography and to adjust the page layout.
Understanding TypeScript Generics — Smashing Magazine
An introduction to the utilization of Generics in TypeScript with examples grounded in real-world use cases, such as collections, approaches to error handling, the Repository Pattern, and so on. With this article, Jamie Corkhill hopes to provide an intuitive understanding of the notion of software abstraction through Generics.
