poline is lightweight, dependency free and fast JavaScript function written in TypeScript. It draws lines between anchors over polar coordinates to generate pleasing color palettes.

Infinite scrolling minimizes interaction costs and increases user engagement, but it isn’t a good fit for every website. For some, pagination or a Load More button will be a better solution.

Learn JavaScript design and performance patterns for building more powerful web applications.

Exploring when and how you would use style queries in your day-to-day work.

I’ve been thinking a lot recently about Single-Page Apps (SPAs) and Multi-Page Apps (MPAs). I’ve been thinking about how MPAs have improved over the years, and where SPAs still have an …

Crazed developer attempts real ecommerce without front-end JavaScript to prove that y’all playin’

SVGs are scalable, flexible, and, most importantly, lightweight. And, well, they have even more to offer than you might think. Smart SVG techniques, from generative SVG grids to SVG paths with masks, grainy SVG gradients, cut-out effects and fractional SVG stars. Let’s look at some magical SVG techniques that you can use right away.

Take your frontend skills to the next level by recreating real websites from real companies.

Hand-crafted custom elements for any occasion.

Let’s look at some more technical and non-obvious aspects of optimising Largest Contentful Paint

Images are a common source of performance bottlenecks for web applications and a key focus area for optimization. This document explains how the Aurora team at Google designed a powerful image component in Next.js that is built-in with a number of optimizations using a developer-friendly interface. This post discusses how the component was designed and the lessons we learned along the way.

At Vercel, our mission is to enable developers to build and publish wonderful, high-performant apps and websites. Learn more about Vercel here.

The 7GUIs tasks written in vanilla HTML, CSS & JS.

I got together with Tim Kadlec from over at WebPageTest the other day to use do a bit of performance testing on CSS-Tricks. Essentially use the tool, poke

Last week I gave a talk at AlpineDay entitled "From Vue to Alpine: How & Why". I put up my slides from my AlpineDay talk, "From Vue to Alpine: How & Why":https://t.co/xTzIl0FGunAnd also the files I used to test performance:https://t.co/tB5EThfEEJ pic.twitter.com/Jv8P7iDBcv— Matt Stauffer (@stauffermatt) June 10, 2021 In the talk I shared a few situations in which I've moved applications that were previously using Vue to use Alpine instead, for the sake of Google's Core Web Vitals. These sites were using Vue for light enhancements on top of a server-rendered app, and I found that Alpine is lighter to load and parse in these cases. I still stand by everything I said in the talk. However, a large swath of the Internet discovered my slides, hadn't heard the talk, and assumed I was badmouthing Vue. So, I wanted to write a post about how we can optimize our usage of Vue for this same scenario! How do we minimize Vue's impact on the Core Web Vitals? When Vue is too heavy In my talk, I described working on the Tighten website to improve its Core Web Vitals scores. For that particular site, we were using Vue for some very small components, and the combination of Vue's loading time and the components' initial processing time in the browser led to a significant delay for loading the page. I discovered I could solve our problem by replacing those components with Alpine components, and realized — and then gave a talk about this idea — that Alpine is an ideal fit, even for a Vue-loving agency like ours, for enhancements above vanilla JavaScript and below heavy dashboards and SPAs. Gimme my Vue! However, many of our sites — and likely yours, if you're reading this — are ideal for Vue, so we're not just going to drop it. Instead, let's look: can we optimize our page load speeds? There's a whole group of answers that have to do with code splitting and async loading, which you can find a link to down at the bottom of this post. But there are two strategies that are very similar to what I talked about in my talk, so they're the ones I'm going to cover in this talk. Making Vue load faster If you define your Vue components inline in your HTML (rather than in single-file components), it turns out this requires a heavier (larger file download) and slower (more processing power spent) version of Vue. This version has an in-browser compiler, which causes the impact to load size and processing time. I talked briefly with Evan You, the creator of Vue, who taught me that the "runtime-only" version (meaning, with no compiler) of Vue is 2/3rd the download size of the full Vue. He also gave me two ideas for how we can shrink Vue's load size and processing time. 1. Pre-compile your templates and use the "runtime" Vue build As I mentioned above, if Vue is going to have to compile Vue component definitions from your HTML, it has to include an in-browser compiler, which makes the script file larger and the proces

Step by step instructions to start gathering your own detailed Core Web Vitals data and use it to generate advanced reports.

Making GitHub’s new homepage fast and performant — Tobias Ahlin describes how the scrolling effects are done more performantly thanks to IntersectionObserver

Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy Osmani's new book (also, check a free PDF preview). We’re happy and honored to have teamed up with Addy to publish a dedicated book on image optimization, and the book is now finally here!

This is Jess B Peck's personal website. SEO, Analytics, big data, small data, and the web.

Learn how to identify and fix layout shifts.

Using Search Console and Lighthouse to monitor Core Web Vitals, they discovered opportunities for optimizing CLS score by 0.2 which led to 15% increase in page views per session, 13% longer session duration, and 1.72 percentage point decrease in bounce rate.

The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to use this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.

If that’s the case, there’s a decent chance that your API is secured somehow. Maybe you’re making authentication and authorization happen with JSON Web Tokens. If so, there’s also a decent chance…

A VitePress powered post about Vite 2 and the importance of the instant feedback loop that it enables

Learning the lay of the land

Trends trends trends!

DANA Home Shopping is one of the key features that DANA provides to make us more convenience to buy stuff we want from our home without going anywhere. We can order via Whatsapp and pay it using QRIS…

Developing a working piece of software is difficult. Just like building an airplane, it requires talented people, working components, and a testing framework. No plane leaves the hangar before everyth

While state machines used to be an obscure model for the front-end world, it has gained quite some traction lately, mostly thanks to XState.

Make your client-side apps load fast and provide a good user experience.

Let’s make 2021... fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.

A site for cataloging the many technical musing of Andy Desmarais

Introduction Whatever you do, it's always beneficial to have the right tools at your dispo...

Read this page on the Filament Group website

Frontend designers create the HTML, CSS, and presentational JavaScript code that powers web products' user interfaces. I see frontend design as helpful mortar that bridges the gap between design and development. Of course "frontend designer" may or may not be the right title for it. Some others t

A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.

This is a post by JSConf EU Organiser Malte Ubl. The clickbait headline got you here, so let’s make this worth your while! I have no idea whether this is the fastest conference website in the world but I also don’t know that it isn’t; and I’ve spent a...

NHS.UK frontend contains the code you need to start building user interfaces for NHS websites and services. - nhsuk/nhsuk-frontend

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer?

🎮 The only Front-End Performance Checklist that runs faster than the others - thedaviddias/Front-End-Performance-Checklist

Creating a fast web application involves many cycles of measuring where time is wasted, understanding why it’s happening, and applying potential solutions. Unfortunately, there’s never just one quick…

Forget building and maintaining your own custom docs platform. With GitBook you get beautiful documentation for your users, and a branch-based Git workflow your team will love.