Planning for Accessibility, by @laurakalbaghttps://alistapart.com/article/planning-for-accessibility
“Accessibility isn’t a line item in an estimate or a budget—it’s an underlying practice that affects every aspect of a project.” This article is an excerpt from @laurakalbag’s new book, Accessibility for Everyone.
Sketching Interfaces Generating code from low fidelity wireframes.https://airbnb.design/sketching-interfaces/
The @Airbnb design team has built a prototype that renders hand-drawn wireframes into working UI components
HEAD – A free guide to <head> elementshttps://gethead.info/
Essential Image Optimization – An eBook by @addyosmanihttps://images.guide/
In 2017, image optimization should be automated. Addy Osmani looks at ways to reduce image size through modern compression techniques with minimal impact to quality.
How to Run a Good Workshophttp://scottberkun.com/2013/run-a-good-workshop/
Scott Berkun shares his 10 rules of running a good workshop. Rule #1: A 3 hour lecture is not a workshop.
A11Y Style Guide, by @cariefisherhttp://a11y-style-guide.com/style-guide/
The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive.
Fiber – a free, interactive UI Kit by Framerhttps://framer.com/
“Every artboard in the Fiber UI Kit features customizable elements, all hooked up to interactions in Code. Customize text, images and animation values to create your own social prototype. Or pull apart native scroll, swipe and slider components for separate projects.”
GitPoint – feature-rich unofficial GitHub clienthttps://gitpoint.co/
View repository and user information, control your notifications and even manage your issues and pull requests. Built with React Native, GitPoint is the most feature-rich unofficial GitHub client that is 100% free.
Smooth Scrolling and Accessibility, by @_hmighttps://css-tricks.com/smooth-scrolling-accessibility/
Regardless of how you implement smooth scrolling, there are a few accessibility issues that should be addressed: focus management and animation.
Matthew Butterick’s Practical Typography – A web-based bookhttp://practicaltypography.com/
“Typography is the visual component of the written word. And being a publisher of the written word necessarily means being a typographer. This book will make you a better typographer.”
Accessible Tooltips & Toggletips | Inclusive Components by @heydonworkshttps://inclusive-components.design/tooltips-toggletips/
In this article, Heydon Pickering looks at situations which might call for a tooltip or else a toggletip, and formulates inclusive implementations for each.
The Sky Digital Toolkithttps://www.sky.com/toolkit
The Sky Digital Toolkit is the central resource for designers and developers to understand how to design and build digital products for Sky.
A Collection of Interesting Facts about #CSS Grid Layout, by @mmatuzohttps://css-tricks.com/collection-interesting-facts-css-grid-layout/
Manuel Matuzović shares some of the lesser known features of CSS Grid.
The web accessibility basics, by @MarcoZehehttps://www.marcozehe.de/2015/12/14/the-web-accessibility-basics/
Marco Zehe's list of absolute web accessibility basics every web developer should know.
Design Principles, collected by Jeremy Keith (@adactio)https://principles.adactio.com/
A huge collection of design principles from various disciplines.
Space in Design Systems, by @nathanacurtishttps://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
From Basics to Expanded Concepts to Apply Space with Intent
Basecamp Employee Handbookhttps://github.com/basecamp/handbook/
“So, this is where we’ll try to share what’s worth knowing about Basecamp the company, our culture, our process, and our history.”
Practical CSS Grid: Adding Grid to an Existing Design, by @meyerwebhttps://alistapart.com/article/practical-grid
“It’s been decades since CSS first emerged, but it’s never contained a system anything like this.” – Eric Meyer on CSS grid and the process of progressively enhancing his site to use grid.
Getting started with variable fonts, by @clagnuthttp://clagnut.com/blog/2389/
Richard Rutter explains the basics of variable fonts and the new values coming with CSS4.
A Practical Guide to SVG on the Web, by @jakegiltsoffhttps://svgontheweb.com/
The guide aims to give a practical overview of how you can use SVGs on your websites — with some tips and tricks along the way to get the most out of them.
Understanding Flexbox: Everything you need to know, by @OhansEmmanuelhttps://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af#.jcypy2fbj
A concise and complete introduction to CSS Flexbox.
Get the Balance Right: Responsive Display Text, by @clagnut ◆ 24 wayshttps://24ways.org/2016/responsive-display-text/
Richard Rutter (Clearleft) shows how to use
vmin and a hybrid method of sizing text using CSS
calc() to achieve balanced font-sizes for different viewports.
cssreference – a free visual guide to CSS, by @jgthmshttp://cssreference.io
Learn by example cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
“Who Will Command The Robot Armies?” – a talk by @baconmeteor about accountability in automated systemshttp://idlewords.com/talks/robot_armies.htm
It’s a rant by Maciej Cegłowski about chatbots, machine learning, and the issues of accountability and power that go with automation.
Designing for the Web, by Mark Boultonhttp://designingfortheweb.co.uk/index.php
Modern web design is a discipline that spans a huge range of skills. In his book, Mark Boulton masterfully guides you through things like process and workflow, research, typography, colour, layout, and much more.
Using WebP Images – a great introduction by @malchatahttps://css-tricks.com/using-webp-images/
If you want to fight large images and save bandwidth with WebP, a file format created by Google that provides superior lossless and lossy compression, then this article is a really helpful introduction.
Fractal – build and document web component libraries & styleguideshttp://fractal.build/
Fractal by @allmarkedup, frontend dev @clearleft, lets you build and document web component libraries and styleguides, and then integrate them into your projects. It is flexible, data-driven, and can be seamlessly integrated into your site.
The Web’s Grain – A view on designing for the webhttp://www.frankchimero.com/writing/the-webs-grain/
One of the best articles on designing for the web, by @frank_chimero. As wonderful as important. Required reading.
Making And Maintaining Atomic Design Systems With Pattern Lab 2 Byhttps://www.smashingmagazine.com/2016/07/building-maintaining-atomic-design-systems-pattern-lab/
Pattern Lab 2 is an open-source suite of tools to help you and your team create and maintain thoughtful UI design systems. At its core, it’s a static site generator that stitches together patterns and allows you to design with dynamic data.
How Will Web Components Change CSS Architecture?https://snook.ca/archives/html_and_css/will-web-components-change-css
Impressively comprehensive article by @_hmig about creating accessible SVGs in order to ensure a great user experience for everyone.
Astrum – A lightweight pattern library for any web projecthttp://astrum.nodividestudio.com/
Astrum is a lightweight pattern library designed to be included with any web project. It's non-opinionated and doesn't expect you to write your markup or code in any particular way.
A #cheatsheet of the A-Z of #typography jargon, by Fontsmithhttp://www.itsnicethat.com/news/fontsmith-typography-jargon-dictionary-300616
London foundry Fontsmith has produced an in-depth glossary of typography jargon in infographic format.
As We May Think. Vannevar Bush's visionary essay from 1945, anticipating the information societyhttp://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/
“Dr. Vannevar Bush […] calls for a new relationship between thinking man and the sum of our knowledge.” – The Editor
Just turned 6: Responsive Web Design, by @beephttp://alistapart.com/article/responsive-web-design
“Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
Why everybody who talks about the importance of semantics is both right and wrong at the same time.
Regressive Web Appshttps://adactio.com/journal/10708
“What does it profit a website to gain app-like features if it loses its soul?” – a must-read by @adactio about how progressive web apps undermine some of the web's greatest features (like URL's) and about some dangerous assumptions been made.
The New Web Typographyhttps://robinrendle.com/essays/new-web-typography/
A wonderful piece by @robinrendle about the aesthetics, the quirks, the flexibility, and the fragility of web typography.
Developing Dependency Awarenesshttps://www.smashingmagazine.com/2016/05/developing-dependency-awareness/
Progressive enhancement once more is on a roll: Great(!) article by @AaronGustafson about reducing dependencies
Design systems and Postel’s lawhttp://markboulton.co.uk/journal/design-systems-and-postels-law
Postel’s law – “Be conservative in what you do, be liberal in what you accept from others” – applied to design systems and their origination process. What a wonderful thought by @markboulton!
Creating A Living Style Guide: A Case Studyhttps://www.smashingmagazine.com/2016/05/creating-a-living-style-guide-case-study/
One of the most elaborate case studies on living style guides I've read so far. By @StevenKLambert
Responsive Images: Use Cases and Documented Code Snippets to Get You Startedhttps://dev.opera.com/articles/responsive-images/
Nicely sums up of different ways to use responsive images.
Empowering designers with beautiful and accessible color palettes based onWCAG Guidelines of text and background contrast ratios.
Grid Style Sheets 2.0https://gridstylesheets.org/
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout.
Custom underlines with CSS background gradientshttp://dabblet.com/gist/58f3d67d5bb0f8338776
A dabblet by Lea Verou, this technique is also covered in her very good book CSS Secrets.
Inline SVG with Grunticon Fallbackhttps://css-tricks.com/inline-svg-grunticon-fallback/
@chriscoyier shows you how to build an SVG icon system.
A guide to getting you on the IndieWeb
It's about time to learn CSS Flexbox. And this ingenious game lets you get your head around the relevant CSS properties in no time. Wonderful work.
Designing for Performance – Weighing Aesthetics and Speedhttp://designingforperformance.com/
The (free) online version of @lara_hogan's great book on web performance.
Style Guide Resourceshttp://styleguides.io/
This site lists lots of useful resources to help you learn about and create your own Front-End Style Guides and Pattern Libraries.Contributions by @maban, @bradfrost and many, many more.
Oil Change & Pizzahttp://danielmall.com/articles/oil-change-pizza/
Great advice from Daniel Mall for agencies (and freelancers alike): What makes a great agency are the things they don’t do.
An opinionated styleguide for writing sane, maintainable and scalable Sass.