Frontend News aims to keep you updated with what's happening in the world of web dev! With the latest news and resources from the design & development community.

Browser Diversity Article Screenshot

What is the Value of Browser Diversity?

An interesting read from Dave Rupert, positing the value of browser diversity, with chromium taking over & all the recent drama surrounding Mozilla Firefox.

Read it ➡️

SVG Shapes

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 because they’re “drawn” in code, making them flexible, adaptable, and scalable in any context.

Read it ➡️

React And Emotion Component Chart

Building A Component Library With React And Emotion

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, we’ll learn how to build a component library, using Emotion in React to resolve inconsistencies.

Read it ➡️

Figma Export Screen

Everything Developers Need To Know About Figma

This article teaches developers who have nothing but a basic understanding of design tools everything they need to know to work with Figma!

Read it ➡️

Sticky Head Illustration

How to Use CSS Grid for Sticky Headers and Footers

CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers.

Read it ➡️

Recipe Card

How to Make a Media Query-less responsive Card Component

A fun look at how we can go about creating responsive environments without using CSS media queries. Using concepts such as intrinsic web design.

Read it ➡️

Announcing TypeScript 4.0

Announcing TypeScript 4.0

With TypeScript 4.0, there are no major breaking changes. In fact, if you’re new to the language, now is the best time to start using it. The community is already here and growing, with working code and great new resources to learn.

Read it ➡️

Responsive Design Comparison

Comparing Browsers for Responsive Design

A review of several different tools we can use to compare our responsive designs across different browsers.

Read it ➡️

Storybook in React

Building React Apps With Storybook

In this article, you will learn how to build and test react components in isolation using Storybook. You will also learn how to use the knobs addon to modify data directly from the storybook explorer.

Read it ➡️

Vue Router Logo

How To Do More With Vue Router

In this tutorial, we’re going to learn about some amazing features the Vue Router has and how we can make use of them in our apps.

Read it ➡️

Shoptalk Logo

This is 40, Code Health, Firefox Follow Up, Accessible Text Labels, and Minifying your Project

We're reflecting on turning 40, code health and integration testing, Mozilla Firefox conversations, the best way to provide an accessible text label to a button, and finding an application that minifies JavaScript and images files.

Listen up ➡️

Animation Products

Ground Rules for Web Animations

In this article, we’ll discuss about adding animations into product websites. Let’s dig into that a bit and lay down some ground rules for working with them. Not so much a manifesto, but more like a baseline we can reference and sort of rally around.

Read it ➡️

Previous Issue: