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.

Design work sample

How to Estimate Design Work

Design is an iterative process and you don’t know at the beginning of a new project how many design iterations you need to go through, justify, negotiate and test until you arrive at an acceptable solution. In this article, we explore some of the pitfalls of cost estimations for digital product and service design.

Read it ➡️

When To Say No To Freelance Projects Article Card

When To Say No To Freelance Projects

For hungry freelancers, it can be hard to turn work away. But in the long run, saying no to a project that’s a bad fit will make you a better freelancer. This article will help freelancers and consultants think critically about when to decline an opportunity or request and how to do so assertively but kindly.

Read it ➡️

Slack VS Code Extension

Slack extension for Visual Studio Code

Send your messages and files to Slack without leaving VS Code! Check out this project by Alper Gokcehan.

Check it out ➡️

Optimizing WordPress for Google PageSpeed Insights

Optimizing WordPress for Google PageSpeed Insights

Speed is important. Users expect fast loading websites, and Google considers page performance as a ranking factor. Google Pagespeed or Lighthouse insights have received more attention over the years, especially now that Google has identified what they call “Core Web Vitals” as a future ranking signal.

Read it ➡️

Worst Website Awards 2021

21 tips for winning the 2021 Worst Site Award

There are 1.8 billion websites worldwide and you still have a chance to design the worst site ever!

Read it ➡️

Circle Colors

How to Play and Pause CSS Animations with CSS Custom Properties

There is a CSS property specifically for controlling @keyframes animations, which can be controlled with JavaScript. This article shows you how to set it up! Hint: it involves CSS custom properties.

Read it ➡️

Alpine.js Logo

Lightweight Form Validation with Alpine.js and Iodine.js

Alpine.js and Iodine.js are two minimal JavaScript libraries we can use to create highly interactive forms with little technical debt and a negligible hit to our page-load time. Let's see how!

Read it ➡️

Atomic CSS

On Auto-Generated Atomic CSS

A neat exploration of the idea of turning CSS into "Atomic" classes.

Read it ➡️

Web Design Trends 2021: The Report

Web Design Trends 2021: The Report

2020 was anything but normal. Consumers had their lives shaken up and many businesses experienced new challenges as well as opportunities thanks to the novel events of the year.

Read it ➡️

Flexible Components Example

Building Flexible Components With Transparency

Paul Hebert shows us that adding a touch of transparency, we can design components that automatically adapt to their backgrounds.

Read it ➡️

Svelte and Spring Logos

Svelte and Spring Animations

Spring animations are a wonderful way to make UI interactions come to life. Rather than merely changing a property at a constant rate over a period of time, springs allow us to move things using spring physics, which gives the impression of a real thing moving, and can appear more natural to users. Let's see how to integrate Spring with Svelte!

Read it ➡️

How To Make More Money Selling Shopify Apps In 2021

How To Make More Money Selling Shopify Apps In 2021

Developing a Shopify app and being able to sell it are two different things. If you want to give merchants a reason to install and use your Shopify app, here are four things you need to do.

Read it ➡️

Animating with Lottie

Animating with Lottie

This article introduces the concept of rendering Adobe After Effects animation on the web with Lottie, which can make more advanced animations achievable.

Read it ➡️

React and styled-components

Theming and Theme Switching with React and styled-components

A brilliant guide from Tapas Adhikary on building a theming system with React and styled-components.

Read it ➡️

Shopify Theme Lab

Shopify Theme Lab

A Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪

Read it ➡️

Hasura Logo

Creating Arrays in Hasura

Hasura has a wonderful developer experience to set up quick and easy-to-use GraphQL APIs. This article serves as a great primer for setting up arrays when using Hasura.

Read it ➡️