Spikes are bad, and the general trend should be towards higher specificity later in the stylesheet.

Этот канал в «Медиуме» начался два года назад с текста про нашу редакционную систему «Монитор» — с тех пор ни один другой пост не обошел его по популярности. Но за это время «Монитор» сильно изменился: из двух отчетных лет мы целый год потратили на полную переделку системы.

A responsive screenshot comparison tool

A collection of usage examples for the CSS Grid Layout specification.

NOWNESS is a movement for creative excellence in storytelling celebrating the extraordinary of every day. Launched in 2010, NOWNESS’ unique programming strategy has established it as the go to source of inspiration and influence across art, design, fashion, beauty, music, food, and travel. Our curatorial expertise and award-winning approach to storytelling is unparalleled. We work with exceptional talent, and both established and emerging filmmakers which connect our audience to emotional and sensorial stories designed to provoke inspiration and debate.

When you post/share a URL on Facebook, it automatically scrapes the site to determine what picture or video, page title and page description to show. It does this by looking at the Open Graph (OG meta tag) data on the site and then caches that information for further use. However, if you change information on the site such as images, titles and descriptions, this will not be reflected when you post the URL on Facebook, as they will use the old, incorrect cached information.

For information on how to accessibly implement the components I’m working on, I often refer to WAI-ARIA Authoring Practices specification. One thing this spec sometimes recommends, is to trap focus in an element, for example in a modal dialog while it is open. In this post I will show how to implement this.

As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over.

WordPress 4.4 will add native responsive image support by including srcset and sizes attributes to the image markup it generates.

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.

Which static map API do you want to use?

Modern tools to empower people in media

GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

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.

The city and town name generator uses a database of over five million names across more than 100 countries. If you are looking for a random city or town name to spark a location for a book, game, or a script, millions of possibilities are at your finger tips. How you use the city or town name is up to you. All results may be freely used in any work.

Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web. Imagine a world where developers know everything there is to know about accessibility. You design it and they build it… perfectly. In this world, only the design itself can cause people with disabilities to have trouble using a product.
These guidelines will cover the major things you need to know in order for your products to be “design-ready” to meet the minimum of standards in Section 508 and the Web Content Accessibility Guidelines 2.0. The rest will be up to development and quality testing.

Web accessibility doesn’t only extend to color blind users, but dyslexic users too. Dyslexia is a learning disability that impairs a person’s fluency or accuracy in being able to read, write, and spell.

Explore the deepest secrets of the ocean with some of Firefox Developer Edition 44’s newest tools, designed to take the pain out of CSS animation.

Введение в SVG-анимацию, фрагмент книги Сары Дрэснер, которая выйдет в O’Reilly весной 2017 —… https://t.co/hIZ36nIj8T

Bytesize is a passion project I started to help learn the SVG spec, particularly SVG Paths and how they are drawn within code.

Each icon is hand-coded along a 32x32 grid, and uses SVG stroke allowing for maximum style flexibility; meaning you can adjust the weight, color, size, and if you want the edges to be round or square.

While designing and coding these icons, I tried to place as few points as possible to keep the shapes simple but also to reduce on file size. All 84 icons measure in at 9KB minified (2KB in SVGZ, or Gzipped).