A collection of interesting things that I’ve found relating to the Web and making things for it.
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!
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.
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. 😭
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.
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 .
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.
This is possibly the most fun and interesting web project I've seen in years. ♥️
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.
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 .
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.
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.
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.
16 years ago today the first version of Firefox was released!
This guide to meeting WCAG 2.0 accessibility standards is packed with useful links and resources.
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, and true!
Very useful tool for generating favicon sets.
You don't need a complicated build pipeline for something you'll only use once!
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).
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.
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.
Guess who's been spending a lot of time in here lately.
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.
I tried several of these methods and my programming life has improved by 345%.
"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.
"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.
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.
More info on Google's
How does your content sound when it is read aloud? @AaronGustafson makes his computer shout out random phrases to discover the answer.
CSS shapes for beautifully flowing text around images are, dare I say it, shaping up nicely.
I'll show myself out.
@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".
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.
Very useful script to add a list of links to the end of the print version of your page.
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. 🤷♀️
It is a childlike wish for all browsers to use the same rendering engine. Diversity is beautiful.
Oooohh yeah!! gap, row-gap and column-gap for Flexbox in Firefox 63. (via @rachelandrew)
To double colon, or not double colon in CSS.
Oh my gosh, native image lazy loading is coming to Chrome. With a polyfill this could pave the way for more performant pages. :D
I would like to marry this post from @quii. 👰
Unpopular opinion: underline your fucking links.
"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" - @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!
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". 💯 this - you can never ever assume what a user is doing, or what conditions they're in!
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
The Service Worker Cookbook is a collection of working, practical examples of using service workers in modern web sites.
The performance cost of adding an npm package.
The CSS 'ch' unit isn't what you think it is, says @meyerweb.
Some excellent reasons why you should be using a body font size of at least 20px!
"it’s resilient; it’s declarative; and it’s contextual". This examination of the characteristics of CSS by @keithjgrant is worth many reads!
Beautifully simple and utilitarian design system. ❤️
"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 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.
"We must rid ourselves of the cult of the complex". This post by @zeldman nails it 100%.
I don't agree with putting vendor prefixes in Sass, but everything else is golden.
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?
@decadecity makes the case for User Queries and why they're so necessary.
I would be 100% for this!
A Codepen showing the definitions of different bits of CSS.
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.
Wonderful collection of vanilla JS snippets, functions, helpers from @ChrisFerdinandi. ❤️
"Start simply. Code defensively. User-test. Recognize the chaos. Embrace it." An incredible article from @aarongustafson!
Excellent guide to utilising @pa11y and Voiceover effectively.
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".
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!
Implementing a minimum viable service worker. Very nice post by @adactio!
I love this series. ❤️ @YDKJS
HTTP Status Dogs. I approve.
The pitfalls of using card UIs.
A delightful little game for learning CSS Grid.
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!
"Write clean code and avoid the distractions of shiny new technology".
Solid advise here!
"Design Doesn’t Care What You Think Information Looks Like"
This piece by @robweychert on design and the underlying HTML is fantastic
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.
As pointed out by @justinavery, it's not fundamentally AMP that's the problem, it's us happily giving so much power to Google.
How the UK's Government Digital Services team made their components even more accessible. #a11y
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).
A series of posts on web performance geared towards beginners.
The state of speed on mobile pages, from Google Doubleclick.
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 & optimized ES3-compatible polyfill for the
String.prototype.startsWith method in ECMAScript 6.
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.” 💖
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
Nice roundup of cross-browser testing solutions.
Summary of research showing that most sites take far longer to load than users are willing to wait.
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.
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.
Excellent introduction and guide to REST APIs.
Excellent, and non-opinionated, overview of the various approaches to organising and building CSS.
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.
homebrew-webfonttools - Homebrew formulae for font tools
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets
Type assertions aka less-broken
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
Progressive enhancement is a development approach, not a technology choice.
Videos from a11yclub: Talks from Heydon Pickering, Laura Kalbag, and Detlev Fischer #webdesign #webdev #a11y
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.
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!
Simple fix for giant SVGs when CSS is not available.
Learn how design deliverables (tangible records of work that has occurred) can help UX designers to communicate design ideas successfully.
Lovely explanation and overview of scopes and closures in JS.
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.
The simplest reason as to why 'above the fold' is a myth.
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
An introductory overview to optimising front end code for the browser, to improve UX and SEO rankings.
a11y-dialog - A very lightweight and flexible accessible modal dialog.
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
A personal publishing platform for the #indieweb
Webmention is a simple way to notify any URL when you link to it from your site.
The IndieWeb is a people-focused alternative to the "corporate web".
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!
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.
How to subset web fonts and host them yourself.
A list of everything that could go in theof your document
“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? […]
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.
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…
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.
Sure they do. Sure they do.
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.
A beginner's guide to web accessibilityMake sure you compare every project you do against this!
Beautiful recipes for accessible components
How to simulate various network conditions using Mac OS X 10.7 Lion.
Vital overview of how a web page is rendered.
accessible-typeahead - A typeahead component, built to be accessible.
Okay, I am ready to start coding now.
Excellent analysis of JS usage and security implications.
Public-APIs - 📚 A public list of APIs from round the web.
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.
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
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.
Webpack is a powerful tool that bundles your app source code efficiently and loads that code from a server into a browser.
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…
Beautiful introduction to CSS, HTML and JS.
A curated list of APIs from around the web.
Filament Group helps companies design and build super-fast responsive sites and web apps that are simple to use and accessible to everyone
About the technology behind GDS digital products.
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...
It's easy and worth the effort.
From Basics to Expanded Concepts to Apply Space with Intent
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.
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.
The original talk about how to do progressive enhancement.
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…
Your website is awesome. It looks awesome, it works well and everything is going great. But can it be better?
What's new in ES2015 / ES6
Last week we updated the styles for radio buttons and checkboxes on GOV.UK. This post explains why we’ve done this.
Service to converts RSS feeds to JSON.
crossorigin.me - A CORS proxy replacement for everyone.
BEM-resources - Just a repo full of BEM resources
Hopefully this article has given you a good grounding in the main accessibility problems you might encounter, and how to test and overcome them.
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.
Managing responsive typographic rhythm isn’t easy. Jonathan Suh shows how Sass maps make responsive typography much more manageable.
A collection of CSS snippets to create fast, complex image effects for websites
Amazing tool to visually see the effect of a CSS property.
Wonderful tool to match styles between a local font and a web font, minimising reflows and visual jumps.
Exercises to do with the team to get everyone on the same page at the beginning of the project.
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.
HeadlessBrowsers - A list of (almost) all headless web browsers in existence
Use WebBloatScore.com to calculate the Bloat Score of any website by comparing page size with optimized page screenshot size.
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
This is for everyone: documenting how we're rebuilding inclusive digital services across the UK Government.
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?
Go into the details of linear-gradients in web browsers. Learn about the gradient box, the gradient line, the angle and the color stops
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.
I’d be telling you the obvious if I said that grids are important in web design. You already knew that.
Mimics command line spinners and loading animations. Gives a nice command-line retro feel to an interface.
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).
An extremely nice overview of how to use CSS utility classes effectively.
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...
A good summary of issues arising from input field localisation.
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
I don't agree with all of these. Some of them are very definitely "hack" territory. But there are some that are beautifully lovely.
Modern front-end web development is a busy place. The industry shuffle is exponentially rapid, and when you’re heads down working on a…
Filament Group helps companies design and build super-fast responsive sites and web apps that are simple to use and accessible to everyone
Where exactly do utility classes fit in to a scalable CSS system? Why, when, and how should they be used?
Somebody wants to read your article somewhere where they don't have an internet connection. Now what? Provide a print stylesheet, I'd say.
The history of all the languages which almost became CSS.
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 free browser for web developers. Blisk is a toolbox for development, debugging and testing: emulation, sync, analytics, and screenshots.
I'm a fucking webmaster
Your code isn't as self-explanatory as you think it is.
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
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.
Tim Baxter encourages us to move beyond the “measles of markup” to write rich, semantic HTML and CSS. Only habit is stopping us.
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.
New things and writing about learning, technology, and art
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.
Jam API is a service that allows you to turn any site into a JSON accessible api using CSS selectors.
A compilation of CSS frameworks.
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.
An overview of the various data types available to developers in Sass, including numbers, booleans, strings, maps, lists and more.
A lightweight CLI tool for visual regression testing: Argus Eyes captures screenshots for components over time and identifies visual differences with diff images
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.
Snook.ca - Web Design, Development and Consulting Services
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.
Random thoughts on web development
Who bridges the gap between the design systems and the engineering team? I call these enablers: “Design Systems Ops”
public-apis - A collective list of public JSON APIs for use in web development.
In both print design and web design, typography plays an important role. After all, content is king, and text content is prevalent in...
The exact same bootstrap page everyone else makes.
A CSS grid framework using Flexbox.
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 ...
EditorConfig is a file format and collection of text editor plugins for maintaining consistent coding styles between different editors and IDEs.
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
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
Tasty CSS-animated Hamburgers
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.
The magic of using auto margins in conjunction with Flexbox.
This tool converts any TTF and OTF fonts to css @font-face formats with CSS and HTML sample files.
A frontend designer lives in a sort of purgatory between worlds.
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.
Pretty Nice Placeholders™
An example HTML5 document
Bulma is a CSS framework based on Flexbox and built with Sass
A new open source tool for finding responsive image breakpoints and generating and srcset-markup for responsive images.
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.
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.
An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.
Hey there! Today we are going to talk about some useful tricks in CSS. Let's begin with...
For web and UI/UX designers, this icon is all too familiar: three horizontal lines that stand for a menu. At Mic, we use…
This small web app helps you to choose cursor type from the showcase for use in your application.
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.
SVG Icons - Ready to use SVG Icons for the web.
Split.js - Lightweight, unopinionated utility for adjustable split views
<%= description %>
Tobias Ahlin | Designer and developer
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.
It’s a fair question. To the uninitiated, front end development must seem like a breeze. But if this is the case, why ar…
SVG icons for popular brands.
Expose - A simple static site generator for photoessays
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.
Really useful CSS selectors.
A collection of CSS things.
RAIL is a model for breaking down UX into key actions; it provides concrete performance goals and a structure for thinking about performance strategically.
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!
Did You Know: @CodePen has a really nice collection of design patterns here:
How to build awesome flat animated shapes with PaperJS
A beautiful rant by Allen Pike.
react-howto - Your guide to the (sometimes overwhelming!) React ecosystem.
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…
convert a HTML table to JSON
While you’re enjoying that slide deck, I recommend following it up how @filamentgroup makes @RWD “load fast as heck”:
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…
react-training - Mini React Training Course
segmentio/metalsmith-collections: A Metalsmith plugin that groups files together into collections, which it adds to the global metadata.
npm install metalsmith-collections
npm install metalsmith-permalinks
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.
Startup interviewing is fucked:
Automatic Table of Contents
Jeremy Keith with be speaking at the Generate Conference, 26 September 2014. For more information visit http://www.generateconf.com. Generate Conference spea...
Original jquery source code.
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.
I'm very impressed by the quality of the HTML5/CSS3 templates at #webdev
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…
I've never actually read this before, but it's one of the golden must-reads.
A continuously expanded list of framework/libraries and tools.
"You should start using Browsersync today."
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.
Learn more about the next generation Web Font Format and convert TTF to WOFF2 over command line without setup.
Add metadata to a HTML5 video. Timecodes, bounding boxes, etc.
Chrome now has "image-rendering: pixelated" available.
In-depth overview of Sass and guidelines for using it correctly.
The ever-evolving book by Brad Frost
Intersting explnation on how Facebook deals with pseudo-comet long-polling.
Shape CC: Free Adobe app that turns photos into vectors:
A list of incompatibilities between different Sass engines.
How to name things in HTML & CSS.
Do you make your image captions accessible for keyboard users as well? @scottohara has a set of examples
Lovely online app to aid in writing clearly.
RT @DrTomCrick: “What colour is it?” <— The time in hex colour values:
Oldie but goldie
Search by selector inside elements panel.
Primed and Ready to Go
Another oldie but goldie
Somehow I have never bookmarked this major post.
A markdown based documentation system for style guides.
A showcase of the best typefaces from the Google web fonts directory.
A high level wrapper for PhantomJS that lets you automate browser tasks.
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.
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
This tool will help you compute CSS that has a consistent vertical rhythm.
Critical 0.4.0 is out! Extract & Inline Critical-path CSS in HTML ~ also now has a Grunt task
Sass users beware - "I think selector nesting has done more harm than good."
A Compendium of SVG Information
The Principles of Adaptive Design
CasperJS is the answer to the prayers you would have prayed if you weren’t too lazy and impatient to bother.
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.
Grunt task for casperjs
Build Web Layouts Easily with Susy
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.
more on performance budgets
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
Time-saving synchronised browser testing.
A poor man’s style guide by @BryanEBraun:
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.
A useful list of must-watch videos about CSS.
Stylesheet analysis tool.
High-level advice and guidelines for writing sane, manageable, scalable CSS
Load that critical CSS first and defer the loading of the rest of the CSS until later.
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
××× 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.
Oldie, but goldie. How to fix floating footers on short pages.
Collection of articles on eliminating jank from your pages.
A CLI utility that tests your css files for trigger. Based on http://csstriggers.com/
Lovely fonts for using in your favourite IDE.
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.
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.
Front-end architecture of large sites:
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.
Something that's been bugging me for ages.
Front-end architecture of large sites:
git clone firstname.lastname@example.org:jquery/jquery.git
Load non-critical CSS asynchronously.
HTTPie is a command line HTTP client, a user-friendly cURL replacement.
Show if a server is dev/stage/prod via the favicon
has been updated. Domain registration is now one click away! @gandibar @iwantmyname @101domain
Don't try this at work
Inlining the HTML5Shiv like a mofo since @AndyDavies @Port80Events workshop last year…
THIS. An amazing response to @github's statement. by @aworkinglibrary
Refills, basically a Bootstrap alternative: . Built on top of Bourbon + Bitters + Neat. It looks, well, neat.
Responsive Design Man! My new favorite super hero» (hint: resize your window)
Nice! , "a curated list of frustrating HTML and CSS quandaries, miscues, and dilemmas", by @mdo
HTML is almost 100% responsive out of the box. These 115 bytes of css fix the 'almost' part.
New Shorter, simpler .uk domain names will be available for the first time From 10 June 2014.
List of minimalist frameworks much minimalism, so amaze, wow.
#renio interesting! Facebook did A/B testing to determine that users blamed FB on left, iOS on right, for slowness.
VINTAGE PHOTOS FROM THE PUBLIC ARCHIVES FREE OF KNOWN COPYRIGHT RESTRICTIONS.
The Guardian has open-sourced its responsive website code
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.
- 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.
Tweaking Chrome dev-tools tabs with media queries by @dayjo ~ what a great idea! #css #rwd #chrome #devtools
Put together wireframes quickly
Class helper functions
Something I wish I'd had for years.
Trunk-js - A Responsive Web Solution
Found the link thanks to @andydavies, it was @bjankord's style guide boilerplate I was thinking of:
How to develop a responsive workflow
Responsively Retrofitting An Existing Site With RWD Retrofit
Allow live audience participation at a conference or talk
RT @CoSkills: Does Your Home Page Pass The Simplicity Test? via @SteamFeedcom
Beautiful example of a HTML multimedia story
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.
On swearing and UX antipatterns, aka I Don’t Want Your Fucking App.
This is going into my next commercial project. (via @marxjohnson)
First ever website has been put back at its original URL. More info at:
A beautiful flexbox-enabled layout template. No more clearfix hacks, no more floats. #webtech (via @brucel)
CSSCSS — a CSS redundancy analyzer that analyzes redundancy:
tar.gz (76.9 KB)
Microsoft is now offering free VMs for every Internet Explorer version from 6-10 to aid developers in testing. Awesome!
Webdev checklist. Useful!
duration : 3250
Google discontinuing support for Internet Explorer 8. Thank fuckburgers.
RT @glynmoody: Chrome poised to overtake IE as most popular browser in the UK; Safari rising worldwide - #microsoft ...
You've used this far too much
@stavvers Oh god, if only. I want to install this on our client site, but they get all uppity about it.
This is my day.
RT @maccman: Priceless - a guy complaining about the deprecation of -moz-opacity:
Check out the new Spark release, featuring inline editing + wysiwyg, responsive layout builder, and more!
Light Table - a new IDE concept - successfully funded on #kickstarter; "core of Light Table be open sourced" #devs
Re-run of my #standardsnext talk, the responsive problem explained, solutions inspected, future spec discussed: