1,512 articles on Frontend.
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
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.
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc().
JavaScript has a (newish) feature called optional chaining. Say I have code like:
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
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.
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.
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
In 2018, Rachel Nabors made the point that browser diversity is similar to biological ecosystem diversity. There are literal advantages to more diversity.
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.
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.
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!
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.
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.
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.
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.
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:
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
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.
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 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
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
Whenever I think of stroked text on the web I think: nope.
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
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
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
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
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
As a web developer, there is an interesting bit of back and forth that always comes along with setting up a new application. Even using a full stack web
The best way to learn is to build. Let’s learn about this hot new buzzword, Jamstack, by building a site with React, Netlify (Serverless) Functions, and
MobX is a battle-tested library that makes state management simple and scalable by transparently applying functional reactive programming. It treats your application like a spreadsheet, and it’s one of the many state management tools available to React developers. In this tutorial, Fortune Ikechi is going to show you how to use MobX to manage state in React Native applications by building a React
WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too.
We’re talking about Next.js. What is it, and where might it fit into our web development workflow? Drew McLellan talks to co-creator Guillermo Rauch to find out.
Update: The leading-trim property was renamed to text-box-trim and is starting to gain browser support. You can read more about text-box-trim (as well as the
I just stumbled across Plyr from Sam Potts, a JavaScript library for styled video players. What struck me about it is that you can list YouTube videos as the
You know we do video screencasts, right? It's not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing
Props and PropTypes are an important mechanism for passing information between React components, and we’re going to look into them in great detail here. This tutorial will introduce you to the details about props, passing and accessing props, and passing information to any component using props. However, it’s always a good practice to validate the data we are getting through props by using PropTyp
Hey gang! I've been fortunate enough to be a guest in a variety of different here, so I thought it was time for another Chronicle post. You know, those
I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to
Splitting colors into three levels (palette, functional, and component) can help you be more adaptive to changes and new requirements while working on a project. In this article, Artur Basak introduces a modern approach on how to set up CSS Custom Properties that respond to the application colors. The idea of dividing colors into three levels can be quite useful: a palette (or scheme), functional
Some more CSS comics
You can get by in NodeJS without properly handling errors but due to the asynchronous nature of NodeJS, improper handling or errors can cause you pain soon enough. This article is for JavaScript and NodeJS developers who want to improve error-handling in their applications. Kelvin Omereshone explains the `error` class pattern and how to use it for a better, more efficient way of handling errors ac
You can make a typical CSS border dashed or dotted. For example:
When using percentage values in CSS like this...
Let's say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I'd say. What HTML do
Unless you’ve been hiding under a rock the last several years (and let’s face it, hiding under a rock sometimes feels like the right thing to do), you’ve
From Nicholas Zakas' newsletter, on how he avoids JavaScript fatigue:
Showcasing new product features to users or familiarizing them with some UI functionality in a web app can get tedious, especially when you want users to see a lot of things. In the following guide, BLessing Krofegha will show you how to proactively use product tours to onboard users into a new and complex UX, and how to familiarize them with UI functionality without boring them, using a typical R
The warping is certainly the cool part here. Some fancy math literally transforms the path data to do the warping. But the UX detail work here is just as
Browser DevTools are indispensable for us front end developers. In this article, we'll take a look at the Computed tab, a small corner of the DevTools panel
What it is: A Python-based command-line interface tool that can be used to display, filter, and export information about Peripheral Component Interconnect (PCI) or PCI Express (PCIe) buses and devices, as well as PCI topology. We built pcicrawler to diagnose and debug PCIe issues at scale and help with automation. What it does: Pcicrawler provides […]
Animation is one of the trickier things to get right with React. In this post, I’ll try to provide the introduction to react-spring I wish I had when I first
Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks:
Redux is a robust state-management library for single-page JavaScript apps. It is described on the official documentation as a predictable state container for Javascript applications and it’s fairly simple to learn the concepts and implement Redux in a simple app. Going from a simple counter app to a real-world app, however, can be quite the jump.
We recently shared the work we did to rebuild our tech stack to support the redesigned Facebook.com. When that project began, we saw an opportunity to integrate greater accessibility into the site and build it into the foundation in a way we couldn’t have done without this rebuild. The previous site had been built upon […]
Using TypeScript enabled our ever-growing Admin teams to leverage TypeScript’s compiler to catch potential bugs and errors well before they ship.
Ever tried interacting with a GraphQL server in a client-side application and felt like giving up even before getting anywhere? Ever declined an invitation to join a code base that requires working with GraphQL API because you had no idea? Ever felt like the only front-end engineer who hasn’t learned how to consume GraphQL APIs? If you answered yes to any of these questions, then this tutorial is
A friend of mine recently asked me to teach her to code. She was an absolute beginner, having no idea what coding really involves. I decided to start where I
This is a neat interactive page by Ville V. Vanninen to reference the names of things in the CSS syntax. I feel like the easy ones to remember are "selector,"
With Angular Material and ng2-charts, you can take advantage of schematics to cut down the effort and time you may spend building a dashboard. Schematics in Angular 9 are code generators that can create components and patterns in projects using predetermined templates and layouts. In this article, Zara Cooper explains how to take advantage of schematics in Angular Material and ng2-charts to substa
