Вёрстка

Если вы помните, давным давно я писал про srcset и sizes для картинок. Эти атрибуты позволяют подсказать браузеру, какие картинки лучше грузить (работают для тэгов img и picture).

А сегодня увидел твит, который одной картинкой поясняет принципы работы. И решил напомнить вам эту тему.

Для тех, кто пользуется Visual Studio Code, может быть полезным попробовать webhint. Можете прочитать о нём в статье Getting hints from Visual Studio Code. А установить из маркетплейса. Краткое описание далее.

Martijn Cuppens опубликовал простой CSS, который заставляет div выглядеть ну очень по-разному в разных браузерах. Что могу сказать — ещё одна хорошая иллюстрация для принципа “CSS IS AWESOME” :)

Оригинальный твит:

Сегодня хочу поделиться ссылкой на презентацию SVG can do THAT?!

Красиво сделано. Познавательно.

Ещё у меня накопилось несколько ссылок на статьи про SVG. Возможно, кого-то заинтересует.

Недавно обнаружил cssstats.com — сайт для визуализации статистики по CSS. Как оказалось, ему уже несколько лет. Рекомендаций они не дают, просто дают информацию к размышлению.

В статье “Understanding CSS Stats: How to Make the Most of the Numbers”, предложено несколько способов анализа этой информации.

Сегодня несколько новостей из мира web-разработки.

• Chrome без chrome.
• Node.js 8.0 задерживается.
• Postal — open source аналог MailChimp.
• node-compiler — open source компилятор для Node.js.
• Prepack.io – интеллектуальная минимизация JavaScript.

Сегодня несколько интересных статей от css-tricks, csswizardry и uxdesign.cc.

• background-repeat;
• Проблемы с производительностью base64 для картинок;
• Краткая запись CSS как антипаттерн;
• О стилях для печати.

Сегодня небольшая подборка информации для тех, кому интересна тема тестирования и отладки вёрстки. Disclaimer: некоторые статьи читал давно (возможно что-то устарело), не всеми советами пользовался, однако статьи, безусловно, полезные.

Сегодня расскажу про два сравнительно простых способа как сделать ваших пользователей ещё счастливее.

Как вы уже знаете, мне нравятся быстрые сайты. Летом я уже делился набором инструментов для оптимизации сайтов. Однако, есть пара несложных приёмов, первый из которых эти инструменты вряд ли когда-нибудь догадаются посоветовать.

Начнём с самого простого в реализации способа. Его внедрение, правда, может отнять у вас много времени на этапе согласования в компании или с участниками вашей команды.

Сегодняшний выпуск чуть более чем полностью посвящён ссылкам. Сначала — небольшое знакомство с broken-link-checker (инструментом для поиска битых ссылок). Затем — методы правильной работы с target=”_blank”.

Ранее я уже немного упоминал UnCSS, а сегодня расскажу о нем подробнее. Напомню, он, с помощью PhantomJS, рендерит страницы и выполняет JavaScript, ищет используемые классы и удаляет остальные.

Лично мне удобнее всего использовать его вместе с PostCSS. При желании, можно подключить его к Grunt, Broccoli или Gulp. Также можно использовать его API из Node.js или вызывать из командной строки. Подробности есть на странице проекта.

Сегодня немного интересностей про CSS. В фокусе !important, PostCSS и UnCss.

• Так ли страшен important, как его малюют?
• PostCSS.
• UnCSS.