Bookmarks

A collection of interesting things that I’ve found relating to the Web and making things for it.

Live Transcript

This site is a fantastic little tool for if you've got no other way of transcribing speech to text. As always, you require an excellent sound source (so no laptop on the other side of the room from the speaker) and one person talking at a time, announcing their names as they talk, as otherwise the transcription is useless to other people!

The web is actually really slow | Go Make Things

a majority of the web’s growth is coming from developing areas, where mobile connections are the primary way to access the web and service is spotty or unreliable.

This perfectly sums up the state of the web for me.

Think about how maddening trying to load some of your favorite websites is on 3g, or even LTE. Now imagine visiting them on 2g. That’s the web for a billion or so people. Slow. Buggy. Unreliable. Barely usable. Not usable.

Most frontend developers will never ever use their sites in the way that actual users do. We need to do better as a profession, because right now we are rubbish at our jobs.

I have resigned as the WordPress accessibility team lead. Here is why. - Rian Rietveld

The codebase of Gutenberg is difficult for all of us, because no one in the wpa11y team is a skilled REACT developer. So it was hard to implement changes and write PRs ourselves. What we could do is test, tell what’s wrong and what it should be and hope a developer would pick it up.

It is so sad to see WordPress descend into inaccessible design and a fragile JS-first mindset.

It's now apparently impossible to build form inputs without a framework. 😭

Introduction - 18F Method Cards

A collection of tools to bring human-centered design into your project.

I love it when organisations publish their methods and tools online. This guide to UXD tools utilised by the US gov's 18F is a wonderful example.

What is Tailwind? - Tailwind CSS

block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0

While I normally pass over atomic class CSS systems, because of their lack of scalability within any kind of non-startup organisation size, the ability to extract atomic-classes into components looks interesting.

Tailwind provides tools for extracting component classes from repeated utility patterns, making it easy to update multiple instances of a component from one place.

I still think it's the wrong choice for anything that isn't disposable, but the component-extraction makes it a bit more flexible and palatable .

What is Modular CSS?

Modular CSS is predictable, maintainable, and performant.

I love this overview of how to create modular CSS in various systems. It reminds me how far we've come with how we wrote our CSS.

How to build a low-tech website

This is possibly the most fun and interesting web project I've seen in years. ♥️

Craft CMS | Focused content management for web professionals

I've been playing with Craft CMS and it has been an absolute pleasure to use. It's perhaps the first CMS in a long time to make me reconsider the static site generator thing.

Compared to dealing with Drupal and Wordpress it was a breeze. 2 minutes to get a full working copy on my local machine.

Adactio: Journal - Preparing a conference talk

I really appreciate this article by Jeremy Keith. It's a real help to people like myself who are starting out with public speaking. Him and [https://abookapart.com/products/demystifying-public-speaking](Lara Hogan) are fantastic for talking about this stuff publicly .

Software disenchantment @ tonsky.me

As a general trend, we’re not getting faster software with more features. We’re getting faster hardware that runs slower software with the same features. Everything works way below the possible speed.

I empathise a lot with this post. Every time I upgrade my laptop, it gets slower. Each new app seems to aim to do more, while somehow doing less.

This trend is especially apparent in frontend web design. We're doing pretty much the same as 10 years ago but with pages that are 100 times larger, and interfaces that are horrifically slow on anything but the latest iPhone and Mac.

We've sacrificed elegance, sleekness, and robustness for the ability to "pivot" and boot up sites and apps quickly in order to appease angel investors.

With this article, and many others,I hope we're seeing the start of a swing back to slowness and simplicity.

Trashy.css - The throwaway CSS library with no class

This is just a silly idea, a CSS "library" that styles tags directly — as opposed to using class names as style hooks — to help people become more familiar with how to use semantic HTML.

This is definitely not a silly idea. Styling base components first and then overriding with classed components is a very useful technique. It's especially useful when combined with graded browser support.

Web Accessibility Laws & Policies | Web Accessibility Initiative (WAI) | W3C

This list of all the laws and policies related to accessibility in the world highlights just how important it is to have accessibility at the core of your development process.

If you're not developing accessibly, you're not developing.

Milestone: Phoenix 0.1 released, first version of Firefox | about:community

16 years ago today the first version of Firefox was released!

How to Meet WCAG 2 (Quickref Reference)

This guide to meeting WCAG 2.0 accessibility standards is packed with useful links and resources.

How To Kill Your Tech Industry

In computing, discrimination is as old as the field itself. And discrimination has shaped the field in ways we are only now coming to understand and admit. The technical labor shortage in the UK was produced by sexism—it did not represent a natural evolution of the field, nor a reflection of women’s talents, goals, or interests.

This article sums up so much of what I fear for our tech industry. By creating tech monocultures and ignoring social issues we're not only setting ourselves up for a grand failure, but we're hurting real people and destroying lives.

Silicon Valley learned that it could actively profit from social inequality. The only catch was it had to be willing to manufacture ever more of it, selling technological “advances” that were actively harmful to a progressive civil society under the guise of technosocial progress.

Salty JavaScript analogy - HankChizlJaw

JavaScript is like salt. If you add just enough salt to a dish, it’ll help make the flavour awesome. Add too much though, and you’ll completely ruin it.

Similarly, if you add just enough JavaScript to your website, it’ll help make it awesome. Add too much though, and you’ll completely ruin it.

Salty, and true!

Favicon Generator for all platforms

Very useful tool for generating favicon sets.

You don't need a complicated build pipeline for something you'll only use once!

Playing with the Indieweb

Front-End Performance Checklist

The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

Why the Future of Data Storage is (Still) Magnetic Tape - IEEE Spectrum

You might expect that if the ability to cram ever more data onto magnetic disks is diminishing, so too must this be true for tape. The surprising reality is that for tape, this scaling up in capacity is showing no signs of slowing. Indeed, it should continue for many more years at its historical rate of about 33 percent per year, meaning that you can expect a doubling in capacity roughly every two to three years. Think of it as a Moore’s Law for magnetic tape.

Oooh, this is very interesting. I like the idea of tape. It slows things down.

Refresh CSS Bookmarklet v2

It’s incredibly elegant in its simplicity. It works everywhere: locally or remotely, on any domain and protocol. No need to set up anything, no need to alter my process in any way, no need to use a specific local server or tool.

Very nice update to the original "Reload CSS" bookmarklet.

Pinboard API (v1) Documentation

Guess who's been spending a lot of time in here lately.

We Need Software to Help Us Slow Down, Not Speed Up

What unifies these experiments is that they encourage deliberation. Why am I buying this? Why am I reporting this “suspicious” incident? Friction engineering ought to be taught in computer-science and design schools everywhere.

I think I hurt my neck nodding at this.

Most of the time coders labor to increase our throughput by reducing friction. Speed often improves life. But the recent techlash has been driven in a fundamental way by the grim side effects of this acceleration. Facebook’s Newsfeed made it frictionlessly easy to spread misinformation; Twitter let trolls engage in coordinated harassment campaigns; Amazon enticed me to buy crap I manifestly don’t need and is helping to denude towns of local businesses.

WCAG 2.1 article series via Knowbility | Web Axe

Choosing The Right JavaScript Arrow Function: A Guide

I tried several of these methods and my programming life has improved by 345%.

The Importance Of Manual Accessibility Testing — Smashing Magazine

CSS dismissal is about exclusion, not technology

"It's become increasingly clear that the 'debate' about CSS is not about technology. It's about gender privilege and exclusion."

As frontend work reaches its zenith, we're seeing the "soft" women-coded roles being increasingly devalued.

The "Developer Experience" Bait-and-Switch | Infrequently Noted

"We need to confront the 'developer experience' bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk".

Everything that @slightlylate says here is 🔥. You NEED to read it.

Design with Difficult Data · An A List Apart Article

I wish every visual designer could read this article. The hardest part of any project is often translating an overly optimistic happy-path comp into real world situations.

Chrome's NOSCRIPT Intervention - TimKadlec.com

More info on Google's <noscript> intervention.

Conversational Semantics · An A List Apart Article

How does your content sound when it is read aloud? @AaronGustafson makes his computer shout out random phrases to discover the answer.

CSS Shape Editors | CSS-Tricks

CSS shapes for beautifully flowing text around images are, dare I say it, shaping up nicely.

I'll show myself out.

Web performance review: TradeMe | Wildly Inaccurate

@joseph_wynn show show to do a classy performance review for a website. (the website in this case is godawfully full of client-side that doesn't need to exist).

Accessibility is not a feature. — Ethan Marcotte

"Accessibility is not a feature".

100% agree with @beep that accessibility is not something that you can just import and automate. The issues surrounding #a11y are way more emergent than that.

Links List for Print Styles | Adrian Roselli

Very useful script to add a list of links to the end of the print version of your page.

Should browsers still allow users to disable JavaScript? - DEV Community 👩‍💻👨‍💻

38.9% of developers don't understand that they're developing for the diverse and beautiful World Wide Web and not some homogenous App Store. 🤷‍♀️

The Ecological Impact of Browser Diversity | CSS-Tricks

It is a childlike wish for all browsers to use the same rendering engine. Diversity is beautiful.

column-gap and row-gap in Flexbox

Oooohh yeah!! gap, row-gap and column-gap for Flexbox in Firefox 63. (via @rachelandrew)

::before vs :before | CSS-Tricks

To double colon, or not double colon in CSS.

A native lazy load for the Web platform

Oh my gosh, native image lazy loading is coming to Chrome. With a polyfill this could pave the way for more performant pages. :D

The Web I Want - DEV Community 👩‍💻👨‍💻

"Most websites are about delivering content. HTML is amazing for this and you DON'T NEED JAVASCRIPT."

I would like to marry this post from @quii. 👰

On Link Underlines | Adrian Roselli

Unpopular opinion: underline your fucking links.

#a11y @aardrian

The power of progressive enhancement

"Progressive enhancement isn’t necessarily more work - it’s a change in how we think about our projects." @hankchizljaw just made me progressively enhanced tears of joy. ❤️

A web of anxiety: accessibility for people with anxiety and panic disorders [Part 1] | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)

Anxiety is an incredibly overlooked accessibility and design consideration! #a11y

Let's serve everyone good-looking content

"Let's serve everyone good-looking content" - @hdv. It's okay for users of non-standards browsers - with no Grid support - to get a linear layout, as long as your content is good!

Securing Web Sites Made Them Less Accessible – Eric’s Archived Thoughts

This post from @meyerweb notes now our drive for HTTPS has pushed inclusivity further away for people in remote and poor-connectivity areas. 😢

‘Never assume anything’: The golden rules for inclusive design

"Never assume anything". 💯 this - you can never ever assume what a user is doing, or what conditions they're in!

The Cost Of JavaScript In 2018 – Addy Osmani – Medium

everyone: omg this article by @addyosmani - we should totally build sites incrementally and make them fast

me [standing at corner of bar with whisky]: kid, lemme tell you about Progressive Enhancement

CSS: A New Kind Of JavaScript

Oh wow, @heydonworks has introduced a new kind of Javascript styling module called Cascading Style Sheets. This thing is gonna be BIG.

ServiceWorker Cookbook

The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites.

BundlePhobia | cost of adding a npm package

The performance cost of adding an npm package.

What is the CSS ‘ch’ Unit?

The CSS 'ch' unit isn't what you think it is, says @meyerweb.

Your Body Text Is Too Small

Some excellent reasons why you should be using a body font size of at least 20px!

CSS is Resilient, Declarative, Contextual

"it’s resilient; it’s declarative; and it’s contextual". This examination of the characteristics of CSS by @keithjgrant is worth many reads!

Introducing the GOV.UK Design System

Beautifully simple and utilitarian design system. ❤️

Forget about Clean Code, let’s embrace Compassionate Code » Thinking Inside a Bigger Box

"Your most valuable skill is to know what’s important. Code is not important. Principles are not important. Rules are not important. People are important."

I Don’t Believe in Full-Stack Engineering

I have never met anyone I could truthfully call a "full-stack" dev. It's just not possible to hold all of the modern FE skillset in one head (UX, CSS, JS, a11y, etc), let alone that AND server-side skills.

The Cult of the Complex

"We must rid ourselves of the cult of the complex". This post by @zeldman nails it 100%.

10 Best Sass Mixins for Web Developers

I don't agree with putting vendor prefixes in Sass, but everything else is golden.

What if JavaScript wins?

What if we didn't put all our tech eggs in one basket? What if we respected web designers as much as web engineers? What if we did the minimum amount of code instead of the maximum amount of code? What if?

User Queries

@decadecity makes the case for User Queries and why they're so necessary.

I would be 100% for this!

CSS Terminology

A Codepen showing the definitions of different bits of CSS.

Designing for Inclusion with Media Queries

This talk by @ericwbailey is a fantastic insight into the #a11y and Inclusive Design provisions of CSS.

The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article

One of my fellow Springer Nature FEDs describes how best to support older browsers while still using all the latest fun features.

The Vanilla JS Toolkit

Wonderful collection of vanilla JS snippets, functions, helpers from @ChrisFerdinandi. ❤️

The Illusion of Control in Web Design

"Start simply. Code defensively. User-test. Recognize the chaos. Embrace it." An incredible article from @aarongustafson!

Navigating Gray Areas in Website Accessibility

Excellent guide to utilising @pa11y and Voiceover effectively.

Managing Heading Levels In Design Systems

Excellent stuff from @heydonworks on how to manage headings within a large scale site and design system.

Bonus points for mild mocking of those who say "headings are relics of the pre-app document era".

Funkify Disability simulator

This disability simulator is super useful for building empathy with those people who use your sites in a different way to you. ❤️

How to Design Great Alt Text

How to design great alt text!

Minimal viable service worker

Implementing a minimum viable service worker. Very nice post by @adactio!

You Don't Know JS: A book series

I love this series. ❤️ @YDKJS

HTTP Status Dogs

HTTP Status Dogs. I approve.

Pitfalls of Card UIs - daverupert.com

The pitfalls of using card UIs.

Grid Garden

A delightful little game for learning CSS Grid.

Adactio: Links—Dear Developer, The Web Isn’t About You | sonniesedge.co.uk

This is absolutely brilliant! Forgive my excitement, but this transcript of Charlie’s talk is so, so good—an equal mix of history and practical advice. Once you’ve read it, share it. I want everyone to have the pleasure of reading this inspiring piece!

beaming face

Write clean code and avoid the distractions of emerging technology

"Write clean code and avoid the distractions of shiny new technology".

Solid advise here!

Design Doesn’t Care What You Think Information Looks Like

"Design Doesn’t Care What You Think Information Looks Like"

This piece by @robweychert on design and the underlying HTML is fantastic

Frontend Case Studies

An excellent list of resources for building and maintaining frontend projects at scale. Doing FE effectively on large projects is a very different game from your average tech-driven chaotic startup, because people.

JavaScript vs backward compatibility

"Why are JavaScript developers so opposed to the idea of backward compatibility?" This post by @nikitonsky is the most beautiful thing I've read in months. ♥️

AMP is not the issue, it's Google

As pointed out by @justinavery, it's not fundamentally AMP that's the problem, it's us happily giving so much power to Google.

ismay/metalsmith-in-place: 🏙️ A metalsmith plugin for in-place templating

How we’ve made GOV.UK Elements even more accessible

How the UK's Government Digital Services team made their components even more accessible. #a11y

HTML Source Order and When There’s No CSS

Lovely quick video by @jensimmons on designing for those times when users don't have CSS (yes, it's far, far more often than you think).

Web performance basics

A series of posts on web performance geared towards beginners.

Mobile speed impacts publisher revenue

The state of speed on mobile pages, from Google Doubleclick.

Third party CSS is not safe

Mr @jaffathecake shows how it's not just third party JS that can be a security risk - third-party CSS can hurt your users also!

A robust polyfill for the 'String.prototype.startsWith' method in ES6.

A robust & optimized ES3-compatible polyfill for the String.prototype.startsWith method in ECMAScript 6.

Everything Easy is Hard Again – Frank Chimero

The web industry excitedly says that we should "move fast and break things". But perhaps we should be brave enough to suggest that we "go slow and fix things.” 💖

CSS Basics: Fallback Font Stacks for More Robust Web Typography

I'm going to (very) mildly disagree with @chriscoyier here and suggest that this is in fact classic progressive enhancement of your site's fonts.

Either way, the result is that you have fonts that work, no matter the conditions! #cssbasics

Cross Browser Testing Solutions – The Ultimate Guide

Nice roundup of cross-browser testing solutions.

Google: 53% of mobile users abandon sites that take over 3 seconds to load | Marketing Dive

Summary of research showing that most sites take far longer to load than users are willing to wait.

The Two Faces of AMP

This article by @tkadlec shows how the introduction of AMP Stories is Google deliberately locking people even further into their walled garden.

Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore

A set of interview questions and answers for HTML, CSS and JS. Covers much of modern JS and is therefore a very useful tool for gauging your JS knowledge.

The JavaScript Supply Chain Paradox: SRI, CSP and Trust in Third Party Libraries

Following the recent spate of sites that started running cryptocash miners on users' machines, this article makes a compelling case for enacting a CSP on any scripts that you pull directly into your users browser.

Understanding And Using REST APIs

Excellent introduction and guide to REST APIs.

Modern CSS Explained For Dinosaurs

Excellent, and non-opinionated, overview of the various approaches to organising and building CSS.

Using Media Queries For Responsive Design In 2018

A lovely article by @rachelandrew on using the responsive aspects of Flex and Grid to achieve things that we often assume only Container Queries can do.

bramstein/homebrew-webfonttools: Homebrew formulae for font tools

homebrew-webfonttools - Homebrew formulae for font tools

aria-expanded does not require a fallback

Jest · 🃏 Delightful JavaScript Testing

Polyfill service

Bracket Pair Colorizer - Visual Studio Marketplace

Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

component/type: Type assertions aka less-broken `typeof`

Type assertions aka less-broken typeof

sindresorhus/mem: Memoize functions - an optimization technique used to speed up consecutive function calls by caching the result of calls with identical input

mem - Memoize functions - an optimization technique used to speed up consecutive function calls by caching the result of calls with identical input

Robust Client-Side JavaScript – A Developer’s Guide · molily

Rated zero. — Ethan Marcotte

Native form validation 1: UI and CSS - QuirksBlog

Accessibility Through Semantic HTML ◆ 24 ways

Gordux.js - The redux pattern in vanilla.js

What is Progressive Enhancement and Why Should You Care?

Progressive enhancement is a development approach, not a technology choice.

Performance Calendar » 2017

Web Development Advent Calendars for 2017 | Adrian Roselli

Web Content Accessibility Guidelines—for People Who Haven't Read Them ◆ 24 ways

Accessibility First: Rethinking the Way We Approach Website Design and Development - 24 Accessibility

23 Minutes of Work for Better Font Loading—zachleat.com

Videos from a11yclub: Talks from Heydon Pickering, Laura Kalbag, and Detlev Fischer

Videos from a11yclub: Talks from Heydon Pickering, Laura Kalbag, and Detlev Fischer #webdesign #webdev #a11y

edent/SuperTinyIcons: Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos

Fast, Simple, & Free Open Source Webfont Converter | fontplop

russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

Vox Product Accessibility Guidelines

As journalists, advertisers, producers, and creators, content is at our core at Vox Media. We want to ensure that everyone—regardless of ability, situation, or context—can access it.

a11y.css

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.

This could be very useful!

Introduction · a11y-dialog

Discover The Fatwigoo - otsukare

Simple fix for giant SVGs when CSS is not available.

Falsehoods Programmers Believe About Names | Kalzumeus Software

uiGradients - Beautiful colored gradients

Abstract Away the Performance Faults of querySelectorAll | Ryan Morr

Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog

How to prepare and write a tech conference talk – very much alive.

Accessibility at trivago · trivago techblog

An Overview Of The Most Common UX Design Deliverables – Smashing Magazine

Learn how design deliverables (tangible records of work that has occurred) can help UX designers to communicate design ideas successfully.

A 10 minute primer to JavaScript modules, module formats, module loaders and module bundlers

Using progressive enhancement - Service Manual - GOV.UK

How to building web pages so they work in HTML first: starting with HTML, extra styles and features, using Javascript.

JavaScript Scope and Closures | CSS-Tricks

Scopes and closures are important in JavaScript. But, they were confusing for me when I first started. Here's an explanation of scopes and closures to help.

Lovely explanation and overview of scopes and closures in JS.

Increase your web development skill-set: 150 animated tips on Chrome DevTools

It’s OK to Use Tables | Adrian Roselli

Fall-Back/CSS-Mustard-Cut: Cutting the Mustard without Javascript

Aerotwist - The Anatomy of a Frame

Creating an Accessible Modal Dialog

Modal Dialogs are a tricky thing to make accessible. For visual users navigating with a mouse, creating a dialog is as simple as styling the element to look visually different from the rest of the page. However, users navigating a site via a keyboard and/or screenreader need a lot more.

Inside a super fast CSS engine: Quantum CSS (aka Stylo) ★ Mozilla Hacks – the Web developer blog

Above the fold is a myth.

The simplest reason as to why 'above the fold' is a myth.

UX brutalism

Modern Layouts: Getting Out of Our Ruts by Jen Simmons—An Event Apart video on Vimeo

In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems, we all settled into a handful of patterns and stayed there for over a decade

Optimising the front end for the browser

An introductory overview to optimising front end code for the browser, to improve UX and SEO rankings.

edenspiekermann/a11y-dialog: A very lightweight and flexible accessible modal dialog.

a11y-dialog - A very lightweight and flexible accessible modal dialog.

If you really dislike FOUT, `font-display: optional` might be your jam | CSS-Tricks

:focus-within | CSS-Tricks

The :focus-within pseudo selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any chi

ally.js

Dark Matter

A personal publishing platform for the #indieweb

Webmention

Webmention

Webmention is a simple way to notify any URL when you link to it from your site.

IndieWeb

The IndieWeb is a people-focused alternative to the "corporate web".

Bridgy

IndieWebify.Me - a guide to getting you on the IndieWeb

JSCost.org

[no title]

We need to talk about that tweet. – Cobot

Implementing Webmentions

google webfonts helper

A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!

A Comprehensive Guide to Font Loading Strategies—zachleat.com

Fontie — webfont converter, @font-face generator

Fontie converts your desktop fonts into web fonts that work everywhere and puts them along with the CSS in one fine @font-face package. Various options give you the possibilty to fix and optimize your webfonts.

Subset and Self-Host Web Fonts | brettklamer.com

How to subset web fonts and host them yourself.

Deconstructing the Google Analytics tracking script

<head> Cheat Sheet

A list of everything that could go in the of your document

10 Basic Principles of Visual Design – Prototyping: From UX to Front End

Inclusive Design 24 (#ID24) 9 June 2017 organized by The Paciello Group

Accessibility according to actual people with disabilities - Axess Lab

“If you have a disability, what’s the hardest thing about browsing the web?” The answers to Safia Abdalla’s tweet are truly eye-opening and shows us what web accessibility should really be about. The tweet that started it all i'm curious to know: if you have a disability, what's the hardest thing about browsing the web? […]

Inclusive Design Principles

These Inclusive Design Principles are about putting people first. It's about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.

The web sucks if you have a slow connection | Hacker News

A day without JavaScript | Hacker News

Implementing system fonts on Booking.com — A lesson learned.

For a very long time we had been serving a pretty standard font-stack — Helvetica, Arial, Sans-serif — safe in the knowledge that this selection would give us a trouble-free, albeit uninspired, font…

Accessibility and the self-organizing team

We Reward the Wrong Things | Adrian Roselli

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement — SitePoint

User Facing State | CSS-Tricks

medium.com

Some Extremely Handy `:nth-child` Recipes as Sass Mixins | CSS-Tricks

50 Useful Command Line Tools Developers Will Love: Productivity, Development, Utility, and More

“Why We Didn’t Use A Framework” (Case Study) – Smashing Magazine

Find out why the team at MeetSpace decided to build their app without a front-end framework, and what the pros and cons of a frameworkless back end are.

JSON Feed: Version 1

Everyone has JavaScript, right?

Sure they do. Sure they do.

Using ARIA to enhance SVG accessibility | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)

Quantum Up Close: What is a browser engine? ★ Mozilla Hacks – the Web developer blog

The Browser Accessibility Tree | The Paciello Group – Your Accessibility Partner (WCAG 2.0/508 audits, VPAT, usability and accessible user experience)

The accessibility tree is a subset of the DOM tree. It includes the user interface objects of the user agent and the objects of the document. Accessible objects are created in the accessibility tree for every DOM element that should be exposed to an assistive technology.

Sigh, JavaScript

ethanmarcotte.com

Space in Design Systems – EightShapes – Medium

GitHub - edent/SuperTinySocialIcons: Under 1KB each! Super Tiny Social Icons are miniscule SVG versions of your favourite logos

Debugging Tips and Tricks | CSS-Tricks

Web Accessibility Checklist - The A11Y Project

A beginner's guide to web accessibility
Make sure you compare every project you do against this!

URL-encoder for SVG

A11Y Style Guide

Beautiful recipes for accessible components

a11ywins.tumblr.com

Network Link Conditioner in Lion - Matt Gemmell

How to simulate various network conditions using Mac OS X 10.7 Lion.

The Most Exciting Design Systems Are Boring | Big Medium

madebymike.com.au

Vital overview of how a web page is rendered.

alphagov/accessible-typeahead: A typeahead component, built to be accessible.

accessible-typeahead - A typeahead component, built to be accessible.

Building a CSS Grid Overlay | CSS-Tricks

Modern JavaScript for Ancient Web Developers

Okay, I am ready to start coding now.

verekia/js-stack-from-scratch: 🎉 V2 release! 🎉 — Step-by-step tutorial to build a modern JavaScript stack.

js-stack-from-scratch - 🎉 V2 release! 🎉 — Step-by-step tutorial to build a modern JavaScript stack.

nystudio107 | Implementing Critical CSS on your website

HTML Reference - A free guide to all HTML elements and attributes.

Linting HTML using CSS

AMP and the Web

Thou shalt not depend on me: analysing the use of outdated JavaScript libraries on the web – the morning paper

Excellent analysis of JS usage and security implications.

Accessibility and Performance | MarcySutton.com

abhishekbanthia/Public-APIs: 📚 A public list of APIs from round the web.

Public-APIs - 📚 A public list of APIs from round the web.

The math of CSS locks

A Complete Guide to CSS Grid | Codrops CSS Reference

Learn everything about the CSS Grid Module in this illustrated guide with practical examples and demos. A Codrops CSS Reference entry by Hui Jing Chen.

rollup.js

Rollup is a module bundler for JavaScript which compiles small pieces of code into a something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.

Learn CSS Grid | Jen Simmons

GitHub - BafS/Gutenberg: Modern framework to print the web correctly.

Squeezy Stretchy Flexbox Nav

What we found when we tested tools on the world’s least-accessible webpage | Accessibility

Using @font-face | CSS-Tricks

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from whe

Media Queries Level 4

Media Queries Level 4

The Dress Code | Zalando

Dress Code is a style guide and pattern library for building websites rapidly, designed for maintainability and modularity. It was initially conceived as a styleguide for Zalando's Brand Solutions applications.

Component organization is based on atomic design. The style is written in SASS, class naming follows BEM, and properties are ordered according to SMACSS.

CSS and progressive enhancement | justmarkup

A Detailed Introduction To Webpack – Smashing Magazine

Webpack is a powerful tool that bundles your app source code efficiently and loads that code from a server into a browser.

A Better Way to Make Buttons in Sketch – UX Power Tools – Medium

Sketch symbols are great because they provide one central place to manage components. Buttons are some of the easiest components to create, but like text fields, they have a lot of different states…

GitHub As A Workflow

dhilipsiva/webapp-checklist: Technical details that a programmer of a web application should consider before making the site public.

HTML & CSS Is Hard | A friendly web development tutorial

Beautiful introduction to CSS, HTML and JS.

Tiny Trends #1: Non-Rectangular Headers – UX Power Tools – Medium

3 New CSS Features to Learn in 2017

Most of the web really sucks if you have a slow connection

Building an offline page for theguardian.com | Info | The Guardian

Rules for Using ARIA in HTML

Let them paste passwords - NCSC Site

abhishekbanthia/Awesome-API

A curated list of APIs from around the web.

Modernizing our Progressive Enhancement Delivery | Filament Group, Inc., Boston, MA

Filament Group helps companies design and build super-fast responsive sites and web apps that are simple to use and accessible to everyone

Why we use progressive enhancement to build GOV.UK | Technology at GDS

About the technology behind GDS digital products.

Practical ARIA Examples

l.goodbits.io

Mastering Bash and Terminal | blockloop.io

3 JavaScript Libraries to Keep an Eye on in 2017

OpenAjax Accessibility: OpenAjax Examples

Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes - Tantek

I go back to this post from @t at least once a week - - Why you should say CSS class selectors...

2017 Trendy Google Fonts Combinations

Pattern patter. — Ethan Marcotte

Does Google execute JavaScript? | Stephan Boyer

Markdown.css - make HTML look like plain-text

Seven rules for perfect Japanese typography - AQ

It's easy and worth the effort.

Space in Design Systems – EightShapes – Medium

From Basics to Expanded Concepts to Apply Space with Intent

hackernoon.com

Block Reveal Effects | Codrops

Ideas for block reveal effects in a schematic box look as seen around the Web lately. The idea is to uncover elements on load, on scroll or on some action.

Learning from Lego: A Step Forward in Modular Web Design · An A List Apart Article

Web design and development articles and tutorials for advent ◆ 24 ways

calendar.perfplanet.com

Front-End Performance Checklist 2017 (PDF, Apple Pages) – Smashing Magazine

A performance checklist with all the obscure issues you might need to consider in 2017 to ensure that your response times are fast and your website smooth.

Solving the OPTIONS performance issue with single page apps | SOASTA

Hijax: Progressive Enhancement with Ajax

The original talk about how to do progressive enhancement.

10 things your website might be missing – Etch – Medium

Your website is awesome. It looks awesome, it works well and everything is going great. But can it be better? HTML is great, but it was designed for text documents and doesn’t cover all the things we…

10 things your website might be missing – Etch – Medium

Your website is awesome. It looks awesome, it works well and everything is going great. But can it be better?

What's New In A Spec

What's new in ES2015 / ES6

designnotes.blog.gov.uk

Last week we updated the styles for radio buttons and checkboxes on GOV.UK. This post explains why we’ve done this.

RSS to JSON Converter online - rss2json.com

Service to converts RSS feeds to JSON.

technoboy10/crossorigin.me: A CORS proxy replacement for everyone.

crossorigin.me - A CORS proxy replacement for everyone.

sturobson/BEM-resources: Just a repo full of BEM resources

BEM-resources - Just a repo full of BEM resources

Regex Hub - Useful Regex Patterns

A community driven collection of regular expressions to solve everyday tasks. An easy way to find JavaSCript regex for anything from validating users to matching dates or HTML tags.

PX, EM or REM Media Queries? | Zell Liew

Handling common accessibility problems - Learn web development | MDN

Hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome them.

WAI-ARIA basics - Learn web development | MDN

This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.

Responsive Typography with Sass Maps

Managing responsive typographic rhythm isn’t easy. Jonathan Suh shows how Sass maps make responsive typography much more manageable.

How to Target Internet Explorer 10 and 11 in CSS - Philip Newcomer

Image Effects with CSS

A collection of CSS snippets to create fast, complex image effects for websites

SVG Line Animation for the Uninitiated | Bitmatica

From Sketch App to CSS Web Animations | Axosoft

CSS Reference - A free visual guide to the most popular CSS properties.

Amazing tool to visually see the effect of a CSS property.

Font style matcher

Wonderful tool to match styles between a local font and a web font, minimising reflows and visual jumps.

Cutting the Mustard with CSS Media Queries

Cutting the Mustard using Media Queries instead of Javascript, making detection faster. These detected features are then passed on to Javascript.

Frontend Guidelines Exercise | bradfrost.com

Exercises to do with the team to get everyone on the same page at the beginning of the project.

CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends – Smashing Magazine

Heydon Pickering explains how to write less code by using CSS Inheritance. If you take a closer look, It’s remarkably good at letting you do a lot with a little.

design.canonical.com

medium.com

dhamaniasad/HeadlessBrowsers: A list of (almost) all headless web browsers in existence

HeadlessBrowsers - A list of (almost) all headless web browsers in existence

Paletton - The Color Scheme Designer

Web Bloat Score Calculator

Use WebBloatScore.com to calculate the Bloat Score of any website by comparing page size with optimized page screenshot size.

Signs You May Be A Designer, Not Just A Coder | HeydonWorks

reflex - a lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills

reflex is a responsive flexbox grid with inline-block legacy support

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Dos and don'ts on designing for accessibility | Accessibility

This is for everyone: documenting how we're rebuilding inclusive digital services across the UK Government.

Responsive Images in CSS | CSS-Tricks

The term "responsive images" has come to mean "responsive images in HTML", in other words, the srcset and sizes attribute for and the element. But how do the capabilities that these things provide map to CSS?

Do you really understand CSS linear-gradients?

Go into the details of linear-gradients in web browsers. Learn about the gradient box, the gradient line, the angle and the color stops

Form elements — GOV.UK elements

Center and crop thumbnails with CSS - Jonathan Nicol

Here is a handy CSS centering technique I first noticed in the WordPress media library, where it is used to centre and crop irregularly sized thumbnails within a square container.

You know a site has its shit together when…

Designing Grids

I’d be telling you the obvious if I said that grids are important in web design. You already knew that.

text-spinners – tawian

Mimics command line spinners and loading animations. Gives a nice command-line retro feel to an interface.

The New System Font Stack?

Battle of the architectures

A look at two popular approaches to CSS, and why I think they are not good enough.

A lovely article about just using CSS sensibly. No "use all Atomic" or "use all components". Just sensibleness (that's a word).

CSS Utility Classes: How To Use Them Effectively 🔥

An extremely nice overview of how to use CSS utility classes effectively.

How to Build a Responsive Form With Flexbox

In this tutorial, we’ll learn how to take advantage of flexbox to create a responsive form. What’s interesting (and exciting at the same time) is that flexbox allows us to build our form without...

The State of HTML5 Input Elements

A good summary of issues arising from input field localisation.

Moment.js

Useful library to parse, validate, manipulate, and display dates in JavaScript.

salesforce-ux/sass-deprecate: Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers

Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers

A Maintainable Style Guide - Ian Feather

A Maintainable Style Guide

youmightnotneedjs.com

I don't agree with all of these. Some of them are very definitely "hack" territory. But there are some that are beautifully lovely.

What about CSS? Progressive Enhancement & CSS // Speaker Deck

CSS at BBC Sport (Part 1) – Medium

Handy Advanced Sass | 12 Devs is back!

Map Magic presentation

Styleguide & Boilerplate Patterns - Google Sheets

Making Sass talk to JavaScript with JSON | CSS-Tricks

the new code – MinMaxing: Understanding vMin and vMax in CSS

A Case Study on Boosting Front-End Performance | CSS-Tricks

Useful Pens for Everyday Front End Development - a Collection by Sarah Drasner on CodePen

MaintainableCSS - an approach to writing modular, scalable and maintainable CSS | By Adam Silver

The Front-End Spectrum – Medium

Modern front-end web development is a busy place. The industry shuffle is exponentially rapid, and when you’re heads down working on a…

I Wanted To Type a Number | Filament Group, Inc., Boston, MA

Filament Group helps companies design and build super-fast responsive sites and web apps that are simple to use and accessible to everyone

Best Motherfucking Website

placeskull.com - a svg placeholder graphics service

http://placeskull.com/170/170

The New Rules of Form Design | UX Booth

The Role of Utility Classes in Scalable CSS | David Clark Develops the Web

Where exactly do utility classes fit in to a scalable CSS system? Why, when, and how should they be used?

CSS: The Perfect Print Stylesheet | NOUPE

Somebody wants to read your article somewhere where they don't have an internet connection. Now what? Provide a print stylesheet, I'd say.

GitHub - unpoly/unpoly: Progressive enhancement Javascript framework

unpoly - Progressive enhancement Javascript framework

The Languages Which Almost Became CSS - Eager Blog

The history of all the languages which almost became CSS.

anime.js

Javascript animation engine

The Typekit Blog | Combining Typefaces: Free guide to great typography

medium.com

www.supremo.tv

The real responsive design challenge? RSS.

Considerations for styling the < pre > tag - The Media Temple Blog

The box-shadow Property

Debugging CSS – Ben Frain

CSS Purge - Saving the web 1kb at a time.

The Skeptic’s Guide To Low-Fidelity Prototyping – Smashing Magazine

Laura Bursche shows you the practice behind integrating low-fidelity prototypes in design, covering graphic, web and UX design, business and service design.

Download Blisk - a browser for web developers

Download Blisk - a free browser for web developers. Blisk is a toolbox for development, debugging and testing: emulation, sync, analytics, and screenshots.

I'm a fucking webmaster

I'm a fucking webmaster

Let's Write Beautiful CSS Comments | Sparkbox | Web Design and Development

Your code isn't as self-explanatory as you think it is.

Optimizing for Large-Scale Displays | CSS-Tricks

The following is a guest post by Jon Yablonski. Jon told me he recently worked on a project where there was a lot of emphasis placed on giant screens. Jon

How fast should your UI animations be? | Val Head - Designer & UI Animation Consultant

If You Know Sass, You Know ES2015

WAIT! Animate

WAIT! Animate provides an easy way to calculate the keyframe percentages so that you can insert a delay between each animation iteration.

The Importance of !important: Forcing Immutability in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Articles on CSS, OOCSS, front-end architecture, scalability and performance.

The Marvel Styleguide - Marvel

Meaningful CSS: Style Like You Mean It · An A List Apart Article

Tim Baxter encourages us to move beyond the “measles of markup” to write rich, semantic HTML and CSS. Only habit is stopping us.

Animated Heat Distortion Effects with WebGL | Codrops

A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.

This page weighs 15kb - macwright.org

New things and writing about learning, technology, and art

The current state of web forms by Kevin Suttle on CodePen

A Comparison of Animation Technologies | CSS-Tricks

The question I am asked most frequently: what animation tool do you recommend? Having worked with a slew of them, I can tell you there is no right answer.

An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements – Smashing Magazine

Jam API

Jam API is a service that allows you to turn any site into a JSON accessible api using CSS selectors.

You (probably) don't need a JavaScript framework | Slack

JavaScript Testing: Unit vs Functional vs Integration Tests

Eric Elliott takes JavaScript testing under the microscope, examining the kinds of tests available and demonstrating how they enhance software stability.

CSS Frameworks - ByPeople

A compilation of CSS frameworks.

Flexbox Patterns

Better Motherfucking Website

Motherfucking Website

Efficient Responsive Design Process – Smashing Magazine

What's your responsive design process? Insights on how to keep a design process efficient and successful — with a few warning signs to watch out for.

Apple is bad news for the future of the Web — Medium

How Etsy Formats Currency - Code as Craft

Data Types in Sass

An overview of the various data types available to developers in Sass, including numbers, booleans, strings, maps, lists and more.

Argus Eyes

A lightweight CLI tool for visual regression testing: Argus Eyes captures screenshots for components over time and identifies visual differences with diff images

Brutalist Websites

Don’t design like a programmer « User Experience Design Training & Consulting–UX Design Edge

I say a UI looks like it was "designed by a programmer” to describe mistakes that programmers often make. Read this post to learn how to spot and correct them.

Almost complete guide to flexbox (without flexbox) | Kenan Yusuf

Web Font Loading Patterns - Bram Stein

Visual CSS flexbox builder | Webflow

Use cases for container queries | justmarkup

Stop Feeling Dumb About Pairing Fonts

Building and shipping functional CSS

Layout Demos by Jen Simmons

Introducing iframify

Are you Single? - Snook.ca

Snook.ca - Web Design, Development and Consulting Services

jogwheel - Take control of your CSS keyframe animations

include-media: Simple, elegant and maintainable media queries in Sass

Paletton - The Color Scheme Designer

Our Justified Layout Goes Open Source | code.flickr.com

Popper.js

Debouncing and Throttling Explained Through Examples | CSS-Tricks

Aligning text smartly in CSS

Have you ever thought of aligning text smartly in CSS? You must try now. No there is no CSS property text-align:smart or smartly but can achieved by CSS easily.

Practical Developer on Twitter: "The only correct way to write JavaScript is whatever you were not doing last week. https://t.co/p48RgucO3x"

Expounder

The Sad State of Web Development — Medium

Random thoughts on web development

The anatomy of responsive images - JakeArchibald.com

How to work with SVG icons

Introducing Design Systems Ops — Medium

Who bridges the gap between the design systems and the engineering team? I call these enablers: “Design Systems Ops”

toddmotto/public-apis: A collective list of public JSON APIs for use in web development.

public-apis - A collective list of public JSON APIs for use in web development.

The Veil of Ignorance

PX, EM or REM Media Queries? | Zell Liew's blog about web design and development

Aesthetic Sass 3: Typography and Vertical Rhythm | Scotch

In both print design and web design, typography plays an important role. After all, content is king, and text content is prevalent in...

ECSS: Preface

ECSS

Every Fucking Bootstrap Website Ever

The exact same bootstrap page everyone else makes.

Grd - A CSS grid framework using Flexbox

A CSS grid framework using Flexbox.

Tools And Resources For A More Meaningful Web Typography – Smashing Magazine

10 things to need to know about CSS

CSS may look as a simple language. In fact it can be simple only to use, but definitely not simple to maintain.Everybody who used to work on a large-scale projects knows how hard it can be to keep constantly growing CSS sources readable and consistent, styles reusable and loosely coupled. Moreover while going responsive web design (RWD) we also deal with increasing cyclomatic complexity. Learning from own experience I collected 10 vital principles that help turning your styles into ...

Styling Broken Images

Printable device sketch sheet templates for UX

EditorConfig

EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.

Maybe we could tone down the JavaScript / fuzzy notepad

(500) https://css-tricks.com/class-up-templates-not-content/

A distinction about HTML that I think should be more clear.

What you do in templates != what you do in content

Why is Vertical Rhythm an Important Typography Practice? | Zell Liew's blog about web design and development

You probably heard of the term Vertical Rhythm if you researched

The New Web Typography › Robin Rendle

How should we go about making typographic laws, rules and guidelines for the web?

React.js Fundamentals: The best place to become familiar with React.js and the React.js Ecosystem | ReactJS Program

The React.js Fundamentals course is the best place to start learning React.js and the React.js ecosystem

Flexbox Defense

Disleyxa

Hamburgers by Jonathan Suh

Tasty CSS-animated Hamburgers

Learn Sketch 3 - Design+Code

BEM modifiers: multiple classes vs @extend

6 Reasons to Start Using Flexbox

caniuse.bitsofco.de

The (Unofficial) CanIUse Embed

TACHYONS - CSS Toolkit

mo · js - Motion Graphics For The Web

mnater/Hyphenator: Javascript that implements client-side hyphenation of HTML-Documents

Hyphenator - Javascript that implements client-side hyphenation of HTML-Documents

Managing Typography on Large Apps – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Articles on CSS, OOCSS, front-end architecture, scalability and performance.

Flexbox’s Best-Kept Secret — Medium

The magic of using auto margins in conjunction with Flexbox.

Transfonter — online @font-face generator

This tool converts any TTF and OTF fonts to css @font-face formats with CSS and HTML sample files.

Frontend Design | Brad Frost

A frontend designer lives in a sort of purgatory between worlds.

Bricks.js

Spirit

The future of loading CSS - JakeArchibald.com

Snap.svg - Home

Web Animation at Work · An A List Apart Article

We use HTML to tell stories and communicate vast amounts of information—and animation helps us do both better. Just as hierarchy guides users through content, animation guides them through interactions by helping them understand relationships, structure, cause, and effect. Rachel Nabors explains her fascination with CSS3 animations, Canvas, SVG, the web audio API, webGL, and all the rest, and explains why we need web animation—and web animators.

Placemat

Pretty Nice Placeholders™

MJML - The Responsive Email Framework

⚡️✨ gold on Twitter: "which one of the two possible websites are you currently designing? https://t.co/ZD0uRGTqqm"

Hint.css - A tooltip library in CSS

Critical Web Fonts—zachleat.com

HTML5 Elements

An example HTML5 document

CSS Best Practices

Bulma: a modern CSS framework

Bulma is a CSS framework based on Flexbox and built with Sass

Get HTTPS for free!

Learn CSS Layout The Pedantic Way

Responsive Image Breakpoints Generator, A New Open Source Tool – Smashing Magazine

A new open source tool for finding responsive image breakpoints and generating and srcset-markup for responsive images.

voxel.css

Milligram | A minimalist CSS framework.

Milligram provides a minimal setup of styles for a fast and clean starting point. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

edX Pattern Library · The Visual, UI, and Front End styleguide for edX's applications

The Visual, UI, and Front End styleguide for edX's applications

endel/generator-modern-frontend: Scaffold out a modern front-end web app using your CSS pre-processor of choice, Gulp, Bower, Autoprefixer and Browserify.

generator-modern-frontend - Scaffold out a modern front-end web app using your CSS pre-processor of choice, Gulp, Bower, Autoprefixer and Browserify.

Styling SVG <use> Content with CSS | Codrops

An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.

22 Essential CSS Recipes

Hey there! Today we are going to talk about some useful tricks in CSS. Let's begin with...

Is the Hamburger Menu a Problem? — README . MIC — Medium

For web and UI/UX designers, this icon is all too familiar: three horizontal lines that stand for a menu. At Mic, we use…

The Website Obesity Crisis

internet.org

CSS Cursor

This small web app helps you to choose cursor type from the showcase for use in your application.

Colorify.js

The State of UX in 2016 — uxdesign.cc

We have seen enough content this year to be able to start identifying patterns and trends across what’s being published in the amazing world of UX Design. Here’s our take on looking at the past, understanding the present, and anticipating what the future holds for UX in 2016.

Reimagining Single-Page Applications With Progressive Enhancement – Smashing Magazine

the Codepen

SVG Icons - Ready to use SVG Icons for the web.

SVG Icons - Ready to use SVG Icons for the web.

nathancahill/Split.js · GitHub

Split.js - Lightweight, unopinionated utility for adjustable split views

How to Do a UX Review ◆ 24 ways

WTF is Solid?- Solid

<%= description %>

Jump.js

Must See JavaScript Dev Tools That Put Other Dev Tools to Shame — JavaScript Scene — Medium

“JavaScript sucks for large apps because it can’t even identify the type of a variable, and it sucks for refactoring.” ~…

» Seriously, Don’t Use Icon Fonts Cloud Four Blog

How to animate "box-shadow" with silky smooth performance | Tobias Ahlin

Tobias Ahlin | Designer and developer

Tips for Creating and Exporting Better SVGs for the Web

ally.js

Aerotwist - The Cost of Frameworks

Basic Patterns for Mobile Navigation

Mobile navigation must be discoverable, accessible, and take little screen space. Exposing the navigation and hiding it in a hamburger both have pros and cons.

Why is it so hard to find a front end developer? — The Creative Business — Medium

It’s a fair question. To the uninitiated, front end development must seem like a breeze. But if this is the case, why ar…

How Our CSS Framework Helps Enforce Accessibility | eBay Tech Blog

the HTML/CSS Workmanship Guide

React For Beginners — Learn with Video Tutorials

Simple Icons

SVG icons for popular brands.

Reverse Text Color Based on Background Color Automatically in CSS | CSS-Tricks

Jack000/Expose

Expose - A simple static site generator for photoessays

Designing for Performance by Lara Callender Hogan

This practical introduction to performance from a designer and front-end developer perspective helps you approach projects with page speed in mind, showing you how to test and benchmark which design choices are most critical.

AllThingsSmitty/css-protips

Really useful CSS selectors.

Corpus. A collection of CSS things.

A collection of CSS things.

Introducing RAIL: A User-Centric Model For Performance – Smashing Magazine

RAIL is a model for breaking down UX into key actions; it provides concrete performance goals and a structure for thinking about performance strategically.

Next generation graphics: SVG | DrupalCon

Drupal 8 theming | DrupalCon

What's your type? | DrupalCon

Component Driven Design and Development | DrupalCon

Inclusive Design: an Introduction to Accessibility Whys and Hows | DrupalCon

Drupal 8 The Backend of Frontend | DrupalCon

Prototypes and Drupal: from designing in-browser to implementing custom templates | DrupalCon

Trophy Winning Teams | DrupalCon

Visual Regression Testing | DrupalCon

Building the Front End with Angular.js | DrupalCon

Drupal-generated markup is not your friend -- use a styleguide! | DrupalCon

Fundamentals of Front-End Ops | DrupalCon

Flexbox Cheatsheet Cheatsheet

The @font-face dilemma | Viget

peachananr/purejs-onepage-scroll

HTML Color Codes

bgpatterns.com

CSS 3D Clouds

BreakpointTester | Test Your Responsive Design By Breakpoints, Not By Device Width

The Web Platform: Browser technologies

Addy Osmani on Twitter: "$ npm install -g perfschool Web performance workshop in your command-line. Image optimisation, WebPageTest & more! http://t.co/8Hs7CPveKP"

$ npm install -g perfschool

Web performance workshop in your command-line. Image optimisation, WebPageTest & more!

isisAnchalee/Frustrated.js

LukeW | Dropdowns Should be the UI of Last Resort

Web Design - The First 100 Years

12 Little-Known CSS Facts (The Sequel)

The Boring Front-end Developer by Adam Silver

Design Patterns on CodePen

Did You Know: @CodePen has a really nice collection of design patterns here:

Bootcards - Cards-based UI built with Bootstrap

‎eloudesign.com/the-empathy-paradox/

Write Better User Interfaces by Asking “Who Else is in the Room?"

GoodUI

The Easy Paper.js Tutorial, building flat animated shapes with @PaperJS

How to build awesome flat animated shapes with PaperJS

The Accessibility Cheatsheet - bitsofco.de

tota11y – an a11y visualization toolkit

‎www.css-spinners.com

Manage large-scale web projects with new CSS architecture ITCSS | Web design | Page 2 | Creative Bloq

After Dark in CSS

The PLAY button is not optical alignment — Medium

Web Font Load: Install All Google Web Fonts at Once

Browser Rendering Optimization - Udacity

aFarkas/lazysizes

lazysizes - High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

Sassline

What’s the design process at GDS? | Government Digital Service

GOV.UK – GDS design principles

The Dribbblisation of Design — Medium

COPE: Create Once, Publish Everywhere | ProgrammableWeb

Making a difference with performance | Jaime Caballero, front-end architect based in London - OOCSS, Sass, BEM,

You Might Not Need jQuery

Fuck Off As A Service (FOAAS)

Parallax.js | Simple Parallax Scrolling Effect with jQuery

Material icons - Google Design

Vibrant.js - Extract prominent colors from an image.

Beyond Media Queries — It’s Time to Get Elemental

WebAIM: Using VoiceOver to Evaluate Web Accessibility

Buffer's loading animation - CSS Animation

How to ask for design feedback

The 10 Commandments of Good Form Design on the Web – Mono

Solved By Flexbox — Cleaner, hack-free CSS

Makerbook - The best free resources for creatives.

Data visualization, Part 1: Visualize browsing metrics with SVG and D3

plainJS - The Vanilla JavaScript Repository

How to use Jekyll with Gulp

madgex/lazy-ads

Organizing CSS: OOCSS, SMACSS, and BEM - MattStauffer.co

HTML Symbol Codes and Entities — HTML Arrows

Frank Chimero - The Web’s Grain

A JS framework on every table

A beautiful rant by Allen Pike.

Sass Burger

petehunt/react-howto: Your guide to the (sometimes overwhelming!) React ecosystem.

react-howto - Your guide to the (sometimes overwhelming!) React ecosystem.

How I Got My Attention Back

There are a thousand beautiful ways to start the day that don’t begin with looking at your phone. And yet so few of us choose to do so. For twenty-eight days this winter I lived on the grounds of an…

parseTable.js - convert HTML table to array of objects

convert a HTML table to JSON

How we make RWD sites load fast as heck | Filament Group, Inc., Boston, MA

While you’re enjoying that slide deck, I recommend following it up how @filamentgroup makes @RWD “load fast as heck”:

Intro to Webpack – Medium

Webpack is essentially a code bundler. It takes your code, transforms and bundles it, then returns a new ‘compiled’ version. If you’re thinking why do I need to do this, maybe learning Webpack isn’t…

ryanflorence/react-training: Mini React Training Course

react-training - Mini React Training Course

My Workflow To Design And Develop A Modern Portfolio Website

segmentio/metalsmith-collections: A Metalsmith plugin that groups files together into collections, which it adds to the global metadata.

npm install metalsmith-collections

A Unified Styling Language – SEEK blog – Medium

Four Steps to Google, Without a Degree — This Happened to Me — Medium

User Journeys - The Beginner's Guide | The UX Review

Unsplash It

Blotter.js

A JavaScript API for drawing unconventional text effects on the web.

How to build and deploy static websites using Metalsmith – Node Web Apps

ismay/metalsmith-layouts: 🌼 A metalsmith plugin for layouts

segmentio/metalsmith-permalinks: A Metalsmith plugin for permalinks.

npm install metalsmith-permalinks

Free Font Roboto by Google Android | Font Squirrel

h5bp/Front-end-Developer-Interview-Questions: A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

Front-end-Developer-Interview-Questions - A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore.

Simple jQuery Gallery | Papermashup.com

56 Experts reveal 3 beloved front-end development tools | PSDtoWP.net

Loading webfonts with high performance on responsive websites

Startup Interviewing is Fucked

Startup interviewing is fucked:

Aerobatic - NPM scripts for building and deploying Hugo sites

www.cutestrap.com

D3 Tutorials, Screencasts and a Newsletter | DashingD3js.com

CSSGram

Using the theme layer (Drupal 7.x) | Drupal.org

Stop using CSS in JavaScript for web development – Hacker Noon

Appcache Conditional | Drupal.org

UX Apprentice

CSS: The bad bits (and how to avoid them) - Joe Forshaw

React: CSS in JS // Speaker Deck

css - Prevent content from expanding grid items - Stack Overflow

Mastering the Cascade :: Amber Weinberg - Freelance HTML, CSS, JS & WordPress Developer

css-modules/css-modules: Documentation about css-modules

On writing real CSS (again)

Punkchip | Web standards, accessibility, usability and some Javascript

Why is not using the CSS cascade a problem? - QuirksBlog

CSS global scope and JavaScripters: what’s the problem?

Automatic Table of Contents

Automatic Table of Contents

Using Layout Grids Effectively | Designers Insights

(7) Jeremy Keith on progressive enhancement - YouTube

Jeremy Keith with be speaking at the Generate Conference, 26 September 2014. For more information visit http://www.generateconf.com. Generate Conference spea...

TestPyramid

tlk.io / f28093

Genius | Annotate the world

Original jquery source code.

React.js Introduction For People Who Know Just Enough jQuery To Get By · React for Designers

Myth of JS

Zube | Powerful project management for GitHub Issues

Zube has an Agile kanban / scrum board that's designed for developers, a powerful issue manager for team leads, tickets that let you group GitHub issues together, and sprint analytics.

Recompile SASS upon Deployment Using Git Hooks | Steve Grunwell

Representational state transfer - Wikipedia, the free encyclopedia

Honest Diversity in Tech Report

How Javascript Loading Works - DOMContentLoaded and OnLoad

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

I'm very impressed by the quality of the HTML5/CSS3 templates at #webdev

Why you learned the grid layout system all wrong | Webdesigner Depot

The Easy Way to Writing Good User Stories

CSS-IN-JS

Use CSS to Specify the Aspect Ratio of a Fluid...

Career Opportunities: Senior Frontend Developer - CSS/Design focus (m/f) (20098)

CSS is Fine, It’s Just Really Hard – Jordan Scales – Medium

Everyone’s upset about CSS again. Now’s the time where I would sit firmly on my high horse and write some satire to make myself feel better, but instead here are some hot takes. My name is Jordan and…

SVG Icons in react

IndieWebCamp UK 2015-07-11

The Next Big Thing In Responsive Design | Co.Design | business + design

Learn React By Itself -- no JSX, no Flux, no ES6, no Webpack.

A Dao of Web Design · An A List Apart Article

I've never actually read this before, but it's one of the golden must-reads.

How to Center in CSS

Basscss

Using Sketch For Responsive Web Design (A Case Study) - Smashing Magazine

Stop toggling classes with JS, use behaviour driven DOM manipulation with data-states

Starting a Refactor with CSS Dig | CSS-Tricks

Dan McKinley :: Choose Boring Technology

Designing Pattern Flexibility

Frontend stuff

A continuously expanded list of framework/libraries and tools.

Beyond Blue Links: Making Clickable Elements Recognizable

Why libsass is important to the community | Roughdraft.io

You should start using Browsersync today. | Donny Wals

"You should start using Browsersync today."

Chainable BEM modifiers - We build Envato

BEVM and in particular 'chainable modifiers' are an extension to a popular CSS syntax (BEM) and provide us with the ability to quickly and concisely configure a module in HTML.

Animating pseudo-elements

Bouncy Navigation in CSS and jQuery | CodyHouse

The Fold Manifesto: Why the Page Fold Still Matters

Accessible toggle-style checkbox

Flexbox Grid

Breaking News at 1000ms with Patrick Hamann - YouTube

WOFF 2.0 primer

Learn more about the next generation Web Font Format and convert TTF to WOFF2 over command line without setup.

israelidanny/ie8linter

SmashingConf Whistler — Marcy Sutton on A Web for Everybody on Vimeo

Making Maps: The Role of Frontend Infrastructure at Etsy

Transitioning to SCSS at Scale - Code as Craft

YouTube Engineering and Developers Blog: YouTube now defaults to HTML5 video

Center and crop images with a single line of CSS — Medium

Tour of a Performant and Responsive CSS Only Site | CSS-Tricks

Inside Microsoft’s New Rendering Engine For The "Project Spartan" - Smashing Magazine

Flash of Faux Text—still more on Font Loading—zachleat.com

Flickity · beta

PubCSS: Formatting Academic Publications in HTML & CSS | Thomas Park

CSS Pagination | CodyHouse

C is Manly, Python is for “n00bs”: How False Stereotypes Turn Into Technical “Truths”

Style Guide Podcast

Typesettings.css | Minimal Type Boilerplate

amalia.js - Metadata enriched HTML5 video player

Add metadata to a HTML5 video. Timecodes, bounding boxes, etc.

image-rendering: pixelated

Chrome now has "image-rendering: pixelated" available.

A Vision for Our Sass

Some Ideas for Checkout Effects

Why we can’t do real responsive images with CSS or JavaScript

jspm.io - Frictionless Browser Package Management

JavaScript in 2015

What the Virtual Viewport?

Zero element loading animations · MadebyMike

A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 | HttpWatch Blog

Using Motion For User Experience On Apps And Websites - Smashing Magazine

LibSass, Grunt, and Node NPM: Do You Feel the Need For Speed?

Sass Guidelines

In-depth overview of Sass and guidelines for using it correctly.

Quick Left | Reports on Internet Performance

Atomic Design by Brad Frost

The ever-evolving book by Brad Frost

The problem with Angular

Performance Calendar » Hardware Accelerated CSS: The Nice vs The Naughty

Normalizing Cross-browser Flexbox Bugs — Philip Walton

How we use web fonts responsibly, or, avoiding a @font-face-palm

Quick tip: conditional form fields with CSS

Chartist - Simple responsive charts

A Plain English Guide to JavaScript Prototypes - Sebastian's Blog

Overview of the weirdness of javascript prototypes

A Good Front-End Architecture

comet - How does facebook, gmail send the real time notification? - Stack Overflow

Intersting explnation on how Facebook deals with pseudo-comet long-polling.

Archive: A Drip of JavaScript · Design Pepper

Useful lessons on fundamental javascript

Saving Bandwidth on Slow Connections with Saveba.js

Understanding RequireJS for Effective JavaScript Module Loading

Loading JSON-formatted data with Ajax and xhr.responseType='json' · Mathias Bynens

Capture images and convert raster to vector | Adobe Shape CC

Shape CC: Free Adobe app that turns photos into vectors:

How to set up stress-free SSL on an OS X development machine

Sass-Compatibility

A list of incompatibilities between different Sass engines.

Write Better Markup with HTML Inspector

Naming Things

How to name things in HTML & CSS.

Using Object-Oriented CSS with Sass

Responsive web design presentations at Fluent and State of the Browser

Chris Wright - Experiment: Flexbox Adventures

Revealing Captions for Everyone | scottohara.me

Do you make your image captions accessible for keyboard users as well? @scottohara has a set of examples

#a11y

Style Guide Best Practices

JavaScript Application Architecture On The Road To 2015

Semantic UI

Hemingway

Lovely online app to aid in writing clearly.

Using Object-Oriented CSS with Sass

Build Pipeline: CSS Testing : guides

Performance Budget Metrics - TimKadlec.com

Planning for Performance

What colour is it?

RT @DrTomCrick: “What colour is it?” <— The time in hex colour values:

Front-End Ops

Oldie but goldie

kwaledesign/FrontEnd-Ops

enhance/enhance.js at master · filamentgroup/enhance

3D Rotating Navigation in CSS and jQuery | CodyHouse

JSON Generator – Tool for generating random data

Continuous deployment, Drupal style | Dcycle

Theming and Front End Development with Drupal | Drupal.org

Automate Drupal site updates with a deployment module | BeFused

theme_enable(array('garland'));

Drupal 7 on a 60Kb budget | konstantin tovstiadi

Search by selector inside elements panel.

Search by selector inside elements panel.

IndieWebify.Me

IndieWebify.Me

Primed and Ready to Go

Primed and Ready to Go

Coolors - The super fast color palettes generator!

video - Animated gif to avi on linux - Stack Overflow

Building Responsive Visualizations with D3.js - Safari Blog

addyosmani/tmi

SoundKit

davidhund/jekyll-styleguide

The “Other” Interface: Atomic Design With Sass | Smashing Magazine

Another oldie but goldie

Atomic Design | Brad Frost

Somehow I have never bookmarked this major post.

colintoh.com

trulia/hologram

A markdown based documentation system for style guides.

Critical CSS using Sass and Jekyll

Using Sass to Build a Custom Type Scale with Vertical Rhythm

Modular Scale

Optimizing Performance — Web Fundamentals

Preventing the Performance Hit from Custom Fonts | CSS-Tricks

A counter statement: Putting the CSS in the head — Medium

Asynchronous CSS delivery for fault tolerance | Blog | Decade City

Style Guide Boilerplate

Tools: CSS Testing : tools

Sassy Rhythm: Vertical Rhythm with Sass

Beautiful web type — the best typefaces from the Google web fonts directory

A showcase of the best typefaces from the Google web fonts directory.

Nightmare

A high level wrapper for PhantomJS that lets you automate browser tasks.

The Elements of Typographic Style Applied to the Web – a practical guide to web typography

Accessible HTML video as a background | Punkchip

More Meaningful Typography · An A List Apart Article

Designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales work with—not against—responsive design and grids, provide a sensible alternative to basing our compositions on viewport limitations du jour, and help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers. Tim Brown shows us how.

Typeplate » A typographic starter kit encouraging great type on the Web

A typographic starter kit for Web developers and designers, where we don’t make too many design choices, but we do set out patterns for proper markup and “pre-designed” styles for great Web typography.

Designing an Effective Donate Form

Designing an Effective Donate Form

Basehold.it - quick, painless, javascript-free baseline overlays

CSS with vertical rhythm | drewish

This tool will help you compute CSS that has a consistent vertical rhythm.

addyosmani/critical · GitHub

Critical 0.4.0 is out! Extract & Inline Critical-path CSS in HTML ~ also now has a Grunt task

Midnight.js - Switch fixed headers on the fly

Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan (Video)

Detecting critical above-the-fold CSS - Tales of a Developer Advocate

Setup Ruby On Rails on Mac OS X 10.9 Mavericks - GoRails

Don’t use <picture> (most of the time) Cloud Four Blog

Beware of Selector Nesting in Sass

Sass users beware - "I think selector nesting has done more harm than good."

Reconsidering modernizr.js performance defaults

sindresorhus/awesome-nodejs · GitHub

@leggetter

How I improved my workflow with SMACSS & Sass - Bram Smulders

Performance Calendar » Who’s Afraid of the Big Bad Preloader?

Cuzillion

A Compendium of SVG Information

A Compendium of SVG Information

The Principles of Adaptive Design

The Principles of Adaptive Design

grunt-pagespeed

KSS · Knyle Style Sheets

jay mabazza : Using Rsync to deploy a website. Easy one liner command

Front-end Testing for the Lazy Developer with CasperJS

CasperJS is the answer to the prayers you would have prayed if you weren’t too lazy and impatient to bother.

Simpler UI Testing with CasperJS

We’re always looking for newer, simpler (and sometimes ‘cooler’) ways to do what we do. So recently I’ve started to learn a promising new technology: PhantomJS.

ronaldlokers/grunt-casperjs

Grunt task for casperjs

Build Web Layouts Easily with Susy

Build Web Layouts Easily with Susy

Yes We Jekyll

Automating Web Performance Measurement - HTML5Rocks Updates

Setting a performance budget - TimKadlec.com

Jason Grigsby once quipped that “We’ve remade the Internet in our image….obese.” He was right, of course. Average page weight and number of connections has been increasing at a rather alarming rate.

grunt-perfbudget

more on performance budgets

Render-tree construction, Layout, and Paint — Web Fundamentals

Subtle Live-Reloading With Grunt & Compass | Drafting Code – Zachary Kain. Diving the deep waters of the web and the mysteries of code: a dev blog.

theo

Sass: Team Sass Design

CSS and the Critical Path - CSSConfEU September 2014 // Speaker Deck

Grid by Example

PageSpeed Module - Make the Web Faster — Google Developers

Grunt And Gulp Tasks For Performance Optimization | Yeoman

475891 – (unicode-range) implement unicode-range support in user font set

http://jakearchibald.com/2014/minimising-font-downloads/

State of Web Type

Shu Uesugi on Twitter: "To use GPU acceleration, just use a null 3D transform #cssconfeu http://t.co/iSww4a375Z"

To use GPU acceleration, just use a null 3D transform #cssconfeu

Improving Smashing Magazine's Performance: A Case Study | Smashing Magazine

Great Responsive Web Design is a Matter of Process — Medium

One Step Ahead: Improving Performance with Prebrowsing

Managing Responsive Breakpoints with Sass

BrowserSync

Time-saving synchronised browser testing.

Pexels · Find Free High Quality Photos

Frontend automation with Grunt, Sass + BrowserSync. - JH

Poor Man's Styleguide | A frontend styleguide for the pragmatic

A poor man’s style guide by @BryanEBraun:

A Single Div

Slaying the Dragon: Refactoring CSS for Maintainability – Alicia Liu at Front-Trends 2014 on Vimeo

Medium’s CSS is actually pretty f***ing good. — Medium

Enduring CSS: writing style sheets for rapidly changing, long-lived projects - Author and responsive web developer Ben Frain

This post describes the most advantageous practices and approaches when authoring CSS for a rapidly changing, large scale web project.

CSS `do-*`

Add a do- prefix to any CSS class that is implemented solely for the sake of JavaScript functionality

What do you do when your design pattern breaks down?

AllThingsSmitty/must-watch-css · GitHub

A useful list of must-watch videos about CSS.

Making ubuntu.com responsive: our Sass architecture (12) | Ubuntu Design Blog

RWD Bloat - daverupert.com

Guide to Responsive-Friendly CSS Columns

katiefenn/parker

Stylesheet analysis tool.

Minimising font downloads - JakeArchibald.com

CSS Guidelines

High-level advice and guidelines for writing sane, manageable, scalable CSS

Authoring Critical Above-the-Fold CSS | CSS-Tricks

Load that critical CSS first and defer the loading of the rest of the CSS until later.

Pure CSS parallax scrolling websites | Keith Clark

This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.

Ten CSS One-Liners to Replace Native Apps

Ten CSS One-Liners to Replace Native Apps

Twitter / wesbos: ××× Protip: use &times; ...

××× Protip: use × HTML entity for close buttons rather than the letter X for a perfectly angled ×

Designing for Performance with Lara Swanson on the Hanselminutes Technology Podcast: Fresh Air for Developers

Lara Swanson is the Engineering Manager of Performance at Etsy. She explains how to design for page load time, including optimisations to images, fonts, markup, and more.

New CSS Sticky Footer - 2010 - HTML for Bottom of Page Footer

Oldie, but goldie. How to fix floating footers on short pages.

Jank Free: Let's Make the Web Silky Smooth!

Collection of articles on eliminating jank from your pages.

lafikl/CSS-triggers-cli · GitHub

A CLI utility that tests your css files for trigger. Based on http://csstriggers.com/

Input: Fonts for Code

Lovely fonts for using in your favourite IDE.

CSS-colorguard

CSS Colorguard helps you maintain the color set that you want, and warns you when colors you've added are too similar to ones that already exist.

Getting touchy - an introduction to touch and pointer events by Patrick H. Lauke - Web Rebels Conference

The basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to examples of full multitouch, gesture-enabled elements.

Aerotwist - Pixels are expensive

How pixels get onto your users' screens is something you should know about. Not for the sake of knowing, but because in order to be effective as a modern web developer you're going to need to optimize for it.

CodePen's CSS by Chris Coyier on CodePen

Front-end architecture of large sites:

CodePen

GitHub

Lonely Planet

Reducing Complexity With a Component API - YouTube

A large part of a Front End Ops Engineer's role is to focus away from feature development so that others can create features faster, more robustly and with less risk to the rest of the site. Lonelyplanet.com is driven by huge expectation, a rapid delivery cycle and never enough developers -- ordinarily a recipe for bug-ridden code. I plan to talk about how we de-risked UI development through the creation of a Component API and how we changed our development methodology in order to reduce the inherent complexity of maintaining a big site.

CSS and the critical path - CSSConf May 2014 // Speaker Deck

Absolute urls, relative urls, and...? - Stack Overflow

Something that's been bugging me for ages.

CSS at Lonely Planet - Ian Feather

GitHub's CSS · @mdo

Front-end architecture of large sites:

CodePen

GitHub

Lonely Planet

Ask DN: What are your little SASS/LESS time savers? - Designer News

Designing Mobile First — Design with Sketch — Medium

The Messy Art Of UX Sketching | Smashing Magazine

A Pocket Guide to Master Every Day’s Typographic Adventures

Gumby - A Flexible, Responsive CSS Framework - Powered by Sass

Notification Styles Inspiration | Codrops

Weather Icons - 123 Icon Font inspired by Font Awesome and designed for Bootstrap

The Subtle Magic Behind Why the Bootstrap 3 Grid Works | Experience Design at Hello Erik

A P R I L Z E R O

What Every Frontend Developer Should Know About Webpage Rendering — Frontend Babel

Beautiful web type — the best typefaces from the Google web fonts directory

A Simple Responsive Grid, Made Even Better With Sass - Tuts+ Web Design Tutorial

Trimming Down jQuery With Grunt | Telerik Developer NetworkTelerik Developer Network

git clone git@github.com:jquery/jquery.git

Giving Animations Life — Tictail Makers — Medium

Hover Effect Ideas

filamentgroup/loadCSS

Load non-critical CSS asynchronously.

jakubroztocil/httpie

HTTPie is a command line HTTP client, a user-friendly cURL replacement.

Twitter / pamelafox: Awesome idea from @soprano: ...

Show if a server is dev/stage/prod via the favicon

SiteEffect.io

Bounce.js

Hipster Domain Finder

has been updated. Domain registration is now one click away! @gandibar @iwantmyname @101domain

Twitter / CommitStrip: Don't try this at work ...

Don't try this at work

How to Use Google DFP and Adsense on a Responsive Website

Pragmatic, simple tooltip - JSFiddle

Morphing Buttons Concept | Demo 1

Single Element CSS Spinners

Improving Sass code quality on theguardian.com | Info | The Guardian

WTF, forms?

StyleStats - Useful tool to collect CSS statistics

Docs on Performance Considerations · Issue #878 · Modernizr/Modernizr · GitHub

Inlining the HTML5Shiv like a mofo since @AndyDavies @Port80Events workshop last year…

Google Web Fundamentals

Velocity.js

Response JS: mobile-first responsive design in HTML5.

Legalese | A Working Library

THIS. An amazing response to @github's statement. by @aworkinglibrary

refills.bourbon.io

Refills, basically a Bootstrap alternative: . Built on top of Bourbon + Bitters + Neat. It looks, well, neat.

Responsive Man

Responsive Design Man! My new favorite super hero» (hint: resize your window)

Parsley - The ultimate javascript form validation library

Progress Button Styles

Superhero.js

Comic Neue: the Comic Sans font made lovely. comicneue.com

Responsive Email Patterns

Brand identity style guides from around the world | Logo Design Love

WTF, HTML and CSS?

Nice! , "a curated list of frustrating HTML and CSS quandaries, miscues, and dilemmas", by @mdo

Atomic Design | Brad Frost Web

Code for America Style Guide

Future Friendly Style Guides // Speaker Deck

Dynamic Dummy Image Generator - DummyImage.com

Fluidity

HTML is almost 100% responsive out of the box. These 115 bytes of css fix the 'almost' part.

Device-Agnostic | Trent Walton

Documentation - Bootflat

Code rant: Coconut Headphones: Why Agile Has Failed

Front-end Style Guides ◆ 24 ways

Styleguide — Paul Robert Lloyd

Gimme Bar : Front end styleguides and pattern libraries

Code Guide by @mdo

CSS Shake

Workflow examples

Front End Ops - Ian Feather

Colors

Wintersmith

Automating The Development, Build, and Deployment Process with Grunt - David Tucker

UX Crash Course: 31 Fundamentals | The Hipper Element

A re-introduction to JavaScript (JS Tutorial) - JavaScript | MDN

Understanding placeholder selectors

What Nobody Told You About Sass's @extend

bjankord/CSS-Components-Modifiers-And-Subcomponents-Collection

Stubbornella » Blog Archive » The media object saves hundreds of lines of code

Methodology/BEM

Methods for Modifying Objects in OOCSS (@extend: A Fool’s Gold) – Oliver Joseph Ash

Pears

git - the simple guide - no deep shit!

What’s more effective: Long or short landing pages?

CSS Architecture — Philip Walton

Objects in Space — Objects in Space — Medium

ftlabs/fruitmachine

Generating Documentation for CSS Components

Royalty Free HD Video Clip Backgrounds, Stock Footage clips - YouTube

Grid

UK Hub

New Shorter, simpler .uk domain names will be available for the first time From 10 June 2014.

HTML5 Placeholder Input Fields Fixed with jQuery

neiesc/ListOfMinimalistFrameworks · GitHub

List of minimalist frameworks much minimalism, so amaze, wow.

Twitter / deeje: #renio interesting! Facebook ...

#renio interesting! Facebook did A/B testing to determine that users blamed FB on left, iOS on right, for slowness.

How to structure a Sass project

A More Modern Scale for Web Typography | Design in the browser with web fonts and real content — Typecast

Superfamous - Folkert Gorter

Huddle/PhantomCSS

How to keep up to date on Front-End Technologies - The Recipe

Hide your header on scroll - Headroom.js

CSS Regression Testing

Where the best designers go to find photos and graphics | Blog

New Old Stock

VINTAGE PHOTOS FROM THE PUBLIC ARCHIVES FREE OF KNOWN COPYRIGHT RESTRICTIONS.

scottjehl/Respond

Bulletproof Accessible Icon Fonts

Z63 | Vertical align anything with just 3 lines of CSS |

Where the best designers go to find photos and graphics

Super Famous

Myth - CSS the way it was imagined.

SpinKit | Simple CSS Spinners

A jQuery plugin for extracting dominant colors from images and applying it to its parent

wIMG screenshot grabber

guardian/frontend · GitHub

The Guardian has open-sourced its responsive website code

csswizardry/inuit.css

ResponsiveAds | Ad Formats & Showcase

CSSDB: A Database Of CSS Libraries

LukeW | An Event Apart: Rolling Up Our Responsive Sleeves

Pure

High Performance Animations - HTML5 Rocks

Pattern Library | MailChimp

Ink: A Responsive Email Framework from ZURB

CSS px is an Angular Measurement

Favicon Generator - Generate favicon pictures and HTML

Automating Front-end Workflow

Writing a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year.

What if however, you could automate a lot of this? This talk introduces you to a new workflow of tools to keep you productive on the front-end.

Learn about:

  • Yeoman, Grunt and Bower
  • Brand new features in Chrome DevTools
  • Alfred workflows
  • Tools for live editing and debugging CSS/JS/HTML with Chrome
  • Productivity tools for Sublime
  • Tools for synchronised cross-device mobile testing
  • Network throttling tools
  • Visual regression testing tools and much more.

CSS 101: Block Formatting Contexts - YUI Blog

Interview Questions and Exercises About CSS | CSS-Tricks

Off Canvas layout pattern

Lukew.com

CSS Systems - writing maintainable CSS

Dribbble - blog-ui.png by Riki Tanone

Flat UI and Forms · An A List Apart Article

Responsive HTML Emails: a Different Strategy - Fog Creek Blog

Make Chrome DevTools responsive with media queries | dayjo.org

Tweaking Chrome dev-tools tabs with media queries by @dayjo ~ what a great idea! #css #rwd #chrome #devtools

Part Two — Optimizing The Design Workflow With Fireworks Extensions | Smashing Fireworks

Lullabot/tractor

Put together wireframes quickly

rupl/frontend-ops

gruntjs/grunt-contrib-watch

snaptortoise/jekyll-rss-feeds

desandro/classie

Class helper functions

Focus transition

Responsive Web Design with Sass+Compass

Easing Functions Cheat Sheet

Responsive Elements - Helps you build better responsive websites

CSS3 cheat sheet

jQuery Learning Center

Facebox: Stock Avatars for User Interface and Presentations

Something I wish I'd had for years.

Trunk-js | A Responsive Web Solution

Trunk-js - A Responsive Web Solution

Delivering 60 FPS in the browser - Crash course on web performance (Fluent 2013) - YouTube

animo.js • Labs by Big Room Studios

Why cards are the future of the web | Inside Intercom

Prinzhorn/skrollr

So, You Want to Be a Front-End Engineer?

A Modern Web Designer's Workflow

favico.js - Make a use of your favicon

Masonry

Sassaparilla – Start your Responsive Web Design Projects the fast way

Learn AngularJS With These 5 Practical Examples | Tutorialzine

Learn AngularJS in 5 steps - revolunet blog

Sidebar Transitions

PNG optimization? Here you go, two useful online tools: TinyPNG (tinypng.org), CompressPNG (compresspng.com)

60 free resources you really must try

Using Remote Image Files When You Develop Locally

FlowType.JS — Responsive web typography at its finest: font-size and line-height based on element width.

Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development

NProgress: slim progress bars in JavaScript

CSS Quick Tip: CSS Arrows and Shapes Without Markup - YUI Blog

Content Choreography

Flat design casts a long shadow

ImageField Focus | drupal.org

How to animate media queries

Universal Internet Explorer 6 CSS — Stuff & Nonsense, And All That Malarkey

JSbooks - free javascript books

How to turn your icons into a web font

15 inspirational approaches to CSS

Getting started with Edge Animate

Fixing the IE7 <Button> Submit Value « Rommel Santor's Clog

Michel Fortin – Multi-Safari

Style Guide Boilerplate

Found the link thanks to @andydavies, it was @bjankord's style guide boilerplate I was thinking of:

dypsilon/frontend-dev-bookmarks

A badass list of frontend development resources I collected over time.

ScrollToFixed Plugin Demo

magic css3 animations

Meet dpi.lv: More than you probably wanted to know about screen DPI

How to develop a responsive workflow

How to develop a responsive workflow

Responsively Retrofitting An Existing Site With RWD Retrofit

Responsively Retrofitting An Existing Site With RWD Retrofit

TodaysMeet

Allow live audience participation at a conference or talk

Ladda

spin.js

BARREL | Text-align: Justify and RWD

Does Your Home Page Pass The Simplicity Test?

RT @CoSkills: Does Your Home Page Pass The Simplicity Test? via @SteamFeedcom

Adrian Roselli: IE10, Metro, and Media Queries

Ghost: a crowd-funded blogging platform, launching soon

LukeW | An Event Apart: 10 Commandments of Web Design

Flat UI Kit (free download!)

low quality images

Building The New Financial Times Web App: A Case Study

Firestorm: The story of the bushfire at Dunalley | World news | guardian.co.uk

Beautiful example of a HTML multimedia story

Superfish as dropdown drawer

Responsive Web Design just got Easier with the Responsive Grid System

Red Pen

Showing a CSS Based Loading Animation While Your Site Loads

Code smells in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

How to tell if your CSS smells. hands up Totally guilty of some of these.

FAQ | Edge Reflow CC (Preview) | Edge Tools & Services | Adobe & HTML

On Swearing and UX Antipaterns | Terence Eden has a Blog

On swearing and UX antipatterns, aka I Don’t Want Your Fucking App.

Two.js

fartscroll.js by theonion

This is going into my next commercial project. (via @marxjohnson)

CSS Background Animations

Magnific Popup: Responsive jQuery Lightbox Plugin

The Project

First ever website has been put back at its original URL. More info at:

Dan Wellman » Fixing jQuery Click Events for the iPad

How to stay up-to-date

Making it Work: Flat Design and Color Trends - Designmodo

FlatUIColors.com

Flat UI Colors

Usability checklist | Userium | Catch common usability problems before user testing.

javascript - Listening to mousedown AND touchstart on devices that use touch and a mouse (e.g. Surface) - Stack Overflow

internet explorer - Simulating :active with jQuery - Stack Overflow

Chardin.js

LayoutIt! - Interface Builder for Bootstrap

“Right click and save as” needs to go away

Gridset | Features

ptb/flexgrid: a flexbox-based CSS grid in 3.6k - ptb2.me

A beautiful flexbox-enabled layout template. No more clearfix hacks, no more floats. #webtech (via @brucel)

Fashionably flexible website design by Stuff & Nonsense

CSS3 Transitions Without Using :hover | Impressive Webs

Facebook Style Slide Out Menu in jQuery Mobile | A Blog for Aldo Lugo a Front-end Developer & Designer from Dallas, Texas

html - Why does a button element's height not match that of a sibling input element with same height properties? - Stack Overflow

csscss by zmoazeni

CSSCSS — a CSS redundancy analyzer that analyzes redundancy:

Initializr - Start an HTML5 Boilerplate project in 15 seconds!

HTML5 Video Player | Video.js

IcoMoon App - Icon Font Generator

Superhero.js

Pull Quotes with HTML5 and CSS — miekd

The Responsinator - www.aat.org.uk

Government Digital Service

small-screen navigation patterns

How to lose weight (in the browser)

Best Collection of Pixel Icons for Web and UI Design

Breaking down Amazon’s mega dropdown - Ben Kamens

Responsive Mobile Navigation Menu - Methods and Solutions | Queness

Batch • 300+ Icons for Web & User Interface Design

Twitter Engineering: Twitter Typeahead.js: You Autocomplete Me

Adding Pointers to jQuery UI Tooltips - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development

Creating fancy CSS3 Fade in / animation on page load using keyframes

balupton/history.js · GitHub

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

Backstretch: a simple jQuery plugin that allows you to add a dynamically-resized background image to any page

chadselph/jquery-typewriter · GitHub

mothership | drupal.org

How To Use Media Queries For Device Targeting - Vanseo Design

Style Stripper | drupal.org

Responsive Web Design · An A List Apart Article

The Main Tap › PatternTap

Creating A Pattern Library With Evernote And Fireworks | Smashing Fireworks

Style Guide | drupal.org

tar.gz (76.9 KB)

Favrik: Bash shell script to setup a web project development environment

BBC - GEL (Global Experience Language)

"Stop designing pages!" Session by Tom Bamford at Drupal Camp NW 2012 on Vimeo

Style Tiles

modern.IE: Testing made easier in Internet Explorer | modern.IE | Microsoft

Microsoft is now offering free VMs for every Internet Explorer version from 6-10 to aid developers in testing. Awesome!

Media queries & Drupal | Millwood Online

jQuery Mobile Docs - Navbar

Caching Tutorial for Web Authors and Webmasters

cameronmcefee/plax · GitHub

Pure CSS speech bubbles – Nicolas Gallagher

Native HTML5 Number Picker and jQuery UI's Spinner - Which to Use? - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development

jquery/globalize · GitHub

jQuery UI Widget Factory

Backbone.js

Backbone.js intro

Web Developer Checklist

Webdev checklist. Useful!

ie7-js - A JavaScript library to make MSIE behave like a standards-compliant browser. - Google Project Hosting

Animate.css - a bunch of plug-and-play CSS animations

All You Need to Know About CSS Transitions

Ceaser - CSS Easing Animation Tool - Matthew Lein

Separate Mobile Website Vs. Responsive Website | Smashing Mobile

three.js - JavaScript 3D library

CSS3 PIE: CSS3 decorations for IE

Pens picked by the Editors of CodePen

Fontello - icon fonts generator

Viewport resizer

yepnope.js | A Conditional Loader For Your Polyfills!

Home - Scalable and Modular Architecture for CSS

Using JQuery to Warn Users About Losing Data When Navigating Away from Form

A new micro clearfix hack – Nicolas Gallagher

logging - Get svn log for whole day for specific user - Stack Overflow

Fixing IE z-index | CSS-Tricks

element

Javascript: How to remove characters from end of string? - Stack Overflow

Open Dyslexic - Dyslexia Fonts

jQuery.pulse.js by jsoverson

duration : 3250

Choosing a WYSIWYG Editor for Drupal | Chapter Three

Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!

Google Apps update alerts: Supporting modern browsers: Internet Explorer 8 support discontinued

Google discontinuing support for Internet Explorer 8. Thank fuckburgers.

The Joys Of Preprocessing | Drupaler

gauge.js

Continuum Javascript Ratio Calculator

Testing sites with Browser Mode vs. Doc Mode - IEBlog - Site Home - MSDN Blogs

theme_form_element | form.inc | Drupal 7 | Drupal API

jQuery.dotdotdot, advanced cross-browser ellipsis for multiple line content.

Chrome, Safari See Browser Market Share Increase Worldwide

RT @glynmoody: Chrome poised to overtake IE as most popular browser in the UK; Safari rising worldwide - #microsoft ...

Module Monday: Fences | Lullabot

Adaptive Image | drupal.org

Plugins/Validation/validate - jQuery JavaScript Library

You've used this far too much

Let's Do Something About Drupal's Theme System - jacine

TinyNav.js · Convert navigation to a select dropdown on small screen

Subtle Patterns | Free textures for your next web project

Add (+/-) Button Number Incrementers | CSS-Tricks

IE Destroyer | drupal.org

@stavvers Oh god, if only. I want to install this on our client site, but they get all uppity about it.

Untitled (http://i.imgur.com/vkAjo.jpg)

This is my day.

765645 – Millions of web pages use the -moz-opacity:0.7 tag and in javascript. It's broken now since FF 13.01. Please can you "alias" it back into your main browser code. Thanks.

RT @maccman: Priceless - a guy complaining about the deprecation of -moz-opacity:

Spark | drupal.org

Check out the new Spark release, featuring inline editing + wysiwyg, responsive layout builder, and more!

Light Table by Chris Granger — Kickstarter

Light Table - a new IDE concept - successfully funded on #kickstarter; "core of Light Table be open sourced" #devs

Adaptive Images on Vimeo

Re-run of my #standardsnext talk, the responsive problem explained, solutions inspected, future spec discussed:

Feedback

This page has found 15 mentions of itself on the glorious World Wide Web!

There's probably a lot more, but this site relies on brid.gy to discover webmentions from social media. Retreiving these social media replies/likes/reposts is still unreliable (due to the social media giants' APIs) and many mentions of a page get missed!

Likes