Essential JavaScript Design Patterns For Beginners

Recurring themes in code and how to optimize them.

Writing your own cross-browser polyfills

HTML5 polyfills without headaches.

The One Web

Don't write for devices, write for people.

Announcing The jQuery Standards Team

A team to give web developers a voice in the standards process.

Move the Web Forward

Wear a beanie today, build the web tomorrow.

Polyfilling The HTML5 Gaps With JavaScript

Leave no feature behind.

jQuery UI Bootstrap

A Bootstrap-themed kickstart for jQuery UI widgets.

JavaScript Style Guides And Beautifiers

Style guides and recommended tools.

Developing Backbone.js Applications

How to structure JavaScript applications.

Writing Fast, Memory-Efficient JavaScript

How engines interpret and optimize your code.

Talks To Help You Become A Better Front-End Engineer In 2013

Take time to develop and think about your craft.

basket.js

Script loader that caches scripts with localStorage.

DevTools: Visually Re-engineering CSS For Faster Paint Times

Small things that can be performance bottlenecks.

DevTools Extensions For Web App Developers

A collection of Chrome DevTools extensions.

Building Apps For Firefox OS, Chrome OS And The Web

App development for multiple browsers.

“Sure flat design is a design trend, but it is good for performance.”

Tools for image optimization

Recommendations for web developers.

Automating Front-end Workflow

Better tooling.

Browser-Sync: Sync Scrolls, Clicks, Forms And Edits In Multiple Browsers For Free

Cross-device testing with Browser-Sync.

grunt-uncss

A grunt task for removing unused CSS.

The Little Book Of Modern Front-end Tooling

Contributions are welcome.

Deal with something once

“If a task can be done in less than two minutes, do it right now.”

Grunt And Gulp Tasks For Performance Optimization

Automation of all the tasks.

Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch

How to build tasks to remove unused CSS.

The Web’s Declarative, Composable Future

“The way that languages in the web platform evolve are in direct response to the pain caused by complexity.”

Components Should Be Focused, Independent, Reusable, Small & Testable (FIRST)

Five things to keep in mind.

Data-binding Revolutions with Object.observe()

Say goodbye to complicated data-binding code.

Detect, Undo And Redo DOM Changes With Mutation Observers

“Mutation Observers are certainly worth familiarising yourself with.”

Automating Web Performance Measurement

Introducing PageSpeed Insights for Node.

Offline Browsing Secrets In Chrome

Work offline with Offline Cache Mode.

Critical

Extract and inline critical-path CSS from HTML.

JavaScript Memory Management Masterclass

How to effectively keep memory usage down.

CSS Performance Tooling

How to keep CSS on the fast path.

Explorations In Automatically Fixing JavaScript Linting-errors

“Linting your code early and often is the best way to avoid issues building up.”

Material Design Icons

750 glyphs (SVG, PNG, spritesheets).

DevTools now highlights DOM updates

Visualize what parts of a node have changed.

JavaScript Application Architecture On The Road To 2015

The state of application architecture in the JavaScript community.

ECMAScript 6 equivalents in ES5

Work in progress, contributions are welcome.

Getting Literal With ES6 Template Strings

Defining strings with domain-specific languages.

DevTools: State Of The Union 2015

The latest features in Chrome DevTools.

Auto-formatting JavaScript Code Style

JSCS can now reformat code, not just validate it.

Totally Tooling Tips: Sublime Text Plugins

How to stay productive with web tooling.

Polymer Starter Kit 1.0.2

Improved starting point for building web applications.

Introducing Material Design Lite

Material look and feel for websites.

Exploring ES2016 Decorators

“The similarities between JavaScript and Python continue to increase over time.”

Totally Tooling Tips: Performance Auditing

Tools for keeping images lean.

DevTools Tips For Sublime Text Users

Tips and tricks.

Console is now second

New tab order in Chrome DevTools.

Instant Loading Web Apps With An Application Shell Architecture

What it is and how it works.

Getting started with Progressive Web Apps

How you can build a modern web app in your favorite framework.

Progressive Web Apps across all frameworks

How you can craft offline, lightning fast web apps.

Accessible UI Components For The Web

Guidance and tooling for inclusive web experiences.

Offline Storage for Progressive Web

“2016 will hopefully be the year we build for network resilience.”

“The web’s success came from working together. Let’s collaborate more.”

JavaScript Start-up Performance

What might slow down rendering and how you can fix it.

Progressive Web App Libraries in Production

Service Worker, Web Push, Analytics libraries, and real-world sites.

Preload, Prefetch And Priorities in Chrome

Loading performance pro-tips.

Essential Image Optimization

Ways to reduce image size through modern compression techniques.

The Cost Of JavaScript

Best practices for making real-world sites load instantly today.

“Be humble, communicate clearly, and respect others. It costs nothing to be kind, but the impact is priceless.”

Speedometer 2.0

A benchmark for modern web app responsiveness.

Web Performance Optimization with webpack

How the bundling tool can help to optimize site resources.

Using JavaScript modules on the web

JavaScript modules are now supported in all major browsers.

Speed is now a landing page factor for Google Search and Ads

What you can do to speed up things.

The Cost Of JavaScript In 2018

Many small changes can lead to big performance gains.

Start Performance Budgeting

Let’s make performance part of project goals from the start.

“Keep code simple. Make it easy to read and maintain by others. Design patterns are great, but use them when it’s clear they add value.”

Rendering on the Web

Where to implement logic and rendering in web apps.

JavaScript Loading Priorities in Chrome

How Chrome schedules and executes scripts.

Native image lazy-loading for the web!

Chrome soon supports the loading attribute.

Speed at Scale: What's new in Web Performance?

New launches from Google I/O 2019.

The cost of JavaScript in 2019

The dominant costs are now download and CPU execution time.

“On projects: Done is better than none. It’s easy to set expectations so high you never finish. Sometimes ‘done’ is enough. Ship then iterate.”

Native lazy-loading for the web

Browser-level native lazy-loading is finally here.

Adaptive Loading

Improving web performance on low-end devices.

Monitoring Performance with the PageSpeed Insights API

A way to automate website performance measurement.

“It’s okay to admit when you don’t know something. One of the most important skills in software is being able to find answers and learn from them.”

“‘If you want to go fast, go alone. If you want to go far, go together.’ You can do so much with a great team.”

“If you want a fast site, test on slow hardware. Regularly.”

Emoji Selectors

Yes, emojis can be used as CSS selectors.

Puppeteer Web Performance testing

Recipes for automating web performance measurement.

Scroll Overflows

How to find out what DOM nodes have an unexpected scrollbar.

Quicklink

A tiny library to speed next-page navigations by prefetching in-viewport links.

Modern Touch-Friendly Design

Steven Hoober’s guidelines for UI designers in a nutshell.

Tools to measure Core Web Vitals

Google‘s tools for web developers now deliver essential UX metrics.

“border: 1px solid red; is the console.log of CSS.”

It's time to lazy-load offscreen iframes

Browser-level native lazy-loading for iframes is here.

Infinite Scroll without Layout Shifts

How to optimize loading long lists for the Core Web Vitals.