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.
Unit Testing In React Native Applications — Smashing Magazine
Unit testing has become an integral part of the software development process. It is the level of testing at which the components of the software are tested. In this article, Fortune Ikechi will show you the core principles of testing, explore various libraries for testing an application, and see how to test units (or components) of a React Native application. By working with a React Native applica
The Flavors of Object-Oriented Programming (in JavaScript)
In my research, I've found there are four approaches to Object-Oriented Programming in JavaScript. Which methods should I use? Which one is "the best" way? Here I'll present my findings along with information that may help you decide which is right for you.
Linearly Scale font-size with CSS clamp() Based on the Viewport
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc().
Web Technologies and Syntax
JavaScript has a (newish) feature called optional chaining. Say I have code like:
Accessible Web Animation: The WCAG on Animation Explained
It’s true, web animation can be accessible! Sometimes it just takes a little extra effort to make sure that it is. There are strategic things we can do to
A CSS Grid Framework For Shopify Collection Pages — Smashing Magazine
All pages of a Shopify online store can adopt CSS Grid, but one obvious touchpoint of any e-commerce site that can benefit from a robust and clean grid layout is the collection page. In this article, Liam Griffin will be looking at how to set up a grid layout for products on your collection pages, and how to use Shopify’s section settings to create customizable options in the online store editor.
A Friendly Introduction to Spring Physics
Of all the little tips and techniques I've picked up over the years about animation, spring physics remains one of the most powerful and flexible. In this tutorial, we'll learn how to harness their power to build fluid, organic transitions.
Comparing Styling Methods In Next.js — Smashing Magazine
Among others, [Next.js](https://nextjs.org) has dubbed itself: *The React Framework for Static Websites*. But just like every other framework whose goal is to help you build what matters by abstracting common, redundant tasks, you’re often required to learn something new and opinionated. With Next.js, one of the things you need to know is how to integrate different CSS methods with its API, and th
What is the Value of Browser Diversity?
In 2018, Rachel Nabors made the point that browser diversity is similar to biological ecosystem diversity. There are literal advantages to more diversity.
Interaction Media Features and Their Potential (for Incorrect Assumptions)
The Media Queries Level 4 Interaction Media Features — pointer, hover, any-pointer and any-hover — are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user’s input device.
Animating React Components With GreenSock — Smashing Magazine
GreenSock Animation Platform (GSAP) is a set JavaScript functions that let you tween a value/attribute/CSS property over time and insert these tweens into a timeline for more complex animations. In this article, Blessing explains how GSAP plays well with the React library by integrating its functions into a React component in building an example landing page with a variety of animations.
Migrating cdnjs to serverless with Workers KV
Cloudflare powers cdnjs, an open-source project that delivers popular JavaScript libraries to over 11% of websites. Today, we are excited to announce its migration to a serverless infrastructure using Cloudflare Workers and its distributed key-value store Workers KV!
Modifying Specific Letters with CSS and JavaScript
Changing specific characters can be a challenge in CSS. In this article, we'll explore several ways to modify specific letters using CSS and JavaScript.
Tophatting in React Native - Shopify
To provide a more convenient and painless experience, we built a tool enabling React Native developers to quickly load their peer’s work within seconds.
How To Build A Blog With Next And MDX — Smashing Magazine
In this guide, Ibrahima Ndaw will be looking at Next.js, a popular React framework that offers a great developer experience and ships with all of the features you need for production. We will also build a blog, step by step, using Next.js and MDX. Finally, we’ll cover why you would opt for Next.js instead of “vanilla” React and alternatives such as Gatsby.
Smashing Podcast Episode 24 With Cassie Evans: What Is SVG Animation? — Smashing Magazine
We’re talking about SVG Animation. How can vector images, JavaScript and CSS all work together to provide engaging motion graphics? Drew McLellan talks to SVG expert Cassie Evans to find out.
Working with JavaScript Media Queries
What’s the first thing that comes to mind when you think of media queries? Maybe something in a CSS file that looks like this:
All the Ways to Make a Web Component
This is a neat page that compares a ton of different libraries with web components. One of the things I learned after posting "A Bit on Web Components
Import Non-ESM libraries in ES Modules, with Client-Side Vanilla JS
We're living through a weird era where there are tons of JavaScript libraries that were meant to be used as <script> tags that expose available globals.
How To Automate API Testing With Postman — Smashing Magazine
Postman allows you to manually test your APIs in both its desktop and web-based applications. However, it also has the ability for you to automate these tests by writing JavaScript assertions on your API endpoints. In this article, Kelvin Omereshone will learn how to write automated tests on web APIs with Postman. In order to follow along to this tutorial, you’ll need at least a fair amount of fam
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to
Building A Component Library With React And Emotion — Smashing Magazine
A component library helps to keep a design consistent across multiple projects. It ensures consistency because any changes made will propagate across the projects that make use of it. In this tutorial, Ademola Adegbuyi will show you how to build a component library, using Emotion in React to resolve inconsistencies. At the end of this piece, you should be able to create a component library that fi
Stroke Text CSS: The Definitive Guide
Whenever I think of stroked text on the web I think: nope.
How to Simplify SVG Code Using Basic Shapes
There are different ways to work with icons, but the best solution always includes SVG, whether it’s implemented inline or linked up as an image file. That’s
5 Ways to Improve Your React Native Styling Workflow - Shopify
In April, we announced Shop, our digital shopping assistant that brings together the best features of Arrive and Shop Pay. The Shop app started from our React Native codebase for our previous package tracking app Arrive, with every screen receiving a complete visual overhaul to fit the new branding. While our product designers worked on introducing a whole new design system that would decide the l
Everything Developers Need To Know About Figma — Smashing Magazine
Figma is a design tool that is rapidly gaining popularity and becoming more common in companies around the world. Unlike most design software, Figma is free and browser-based so developers can easily access the full design files making the developer handoff process significantly smoother. With article, Jurn van Wissen teaches developers who have nothing but a basic understanding of design tools ev
How to Make a Media Query-less responsive Card Component
Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very useful
Building React Apps With Storybook — Smashing Magazine
In this article, Abdulazeez Adeshina will show you what storybook is about and how to use it to build and test React components by building a simple application. He’ll start with a basic example that shows how to work with storybook, then will go ahead to create a storybook for a Table component which will hold students’ data. You should have basic knowledge of React and the use of NPM before proc
