Доброе утро!

Шпаргалка по CSS. Разделена на логические группы, к каждому свойству есть наглядный пример.
http://cssreference.io/

И вот шпаргалка поменьше, но тоже пригодится
https://adam-marsden.co.uk/css-cheat-sheet

Как всегда хорошая статья от Smashing Magazine. На этот раз пошаговое руководство по созданию своего аплодера файлов.
https://www.smashingmagazine.com/2018/01/drag-drop-file-uploader-vanilla-js/

Исследование на тему размещения текста и картинок на странице. Поучительно. Если лень читать всё, посмотрите раздел “Design Takeaways” в самом конце.
https://www.nngroup.com/articles/zigzag-page-layout/

Хороших выходных, увидимся в понедельник, в 9:00 по Москве.

Доброе утро! Начинаем новую неделю.

Google уже давно проводил разные тесты с ранжированием страниц в зависимости от качества работы. Теперь, официально, с  июля мобильные страницы будут понижаться в выдаче, если работают медленно.
https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Подборка удачных решений в UX. К сожалению, давно не обновлялась, но все равно очень полезно.
http://littlebigdetails.com/

Браузер Samsung Interner поддерживает новый Gamepad API. Честно говоря идея мобильных игр в браузере мне кажется очень странной. Но Samsung явно ставит на рынок VR/AR игр.
https://medium.com/samsung-internet-dev/the-gamepad-reloaded-5ba866770003

Доброе утро!

Пример того как использовать свойство mix-blend-mode в CSS, чтобы подсветить часть элемента. Это можно круто применить ко всяким туториалам на сайте.
https://codepen.io/jaffathecake/pen/jYJmOO?editors=1100

Вот тут описан интересный способ трекать пользователя и его поведение с помощью CSS. Даже при выключенном JS.
https://github.com/jbtronics/CrookedStyleSheets

Application Showcase — список приложений, написанных на NodeJS. У многих есть исходники. Можно смотреть как пример.
https://foundation.nodejs.org/resources/app-showcase

Доброе утро!

Большая статья про атрибут title, его историю, как применять и различные проблемы
https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/

Вот это очень красивый трюк. Если у вас в коде есть CSS, который вроде бы не нужен, но вы не уверены, то можно вставить в него ссылку на картинку и смотреть статистику запросов. Нет запросов — действительно не используется.
https://csswizardry.com/2018/01/finding-dead-css/

На днях у жителей Гавайи была паника: на все телефоны пришло уведомление о ракетной атаке. Казалось бы причем тут фронтенд? Ну вот скриншот интерфейса отправки в котором служащий промахнулся ссылкой.
https://twitter.com/CivilBeat/status/953127542050795520

Доброе утро!

Тут подробности нового подхода к компиляции WebAssembly в Firefox. Если вы не работаете с WA полезного мало, но все равно читать интересно (и картинки там здоровские)
https://hacks.mozilla.org/2018/01/making-webassembly-even-faster-firefoxs-new-streaming-and-tiering-compiler/

Небольшая заметка о том как использовать новый Webpack, который может работать без какого либо конфига.
https://dev.to/valentinogagliardi/webpack-4-tutorial-all-you-need-to-know-from-0-conf-to-production-mode-40bc

Новая версия WebStorm получила улучшенную поддержку CSS и много других вкусностей.
https://blog.jetbrains.com/webstorm/2018/01/webstorm-2018-1-eap/

Cuttlebelle — генератор статичных сайтов из markdown использующий React для рендера. По принципу поход на Jekyll (который на Ruby).
https://cuttlebelle.com/

Доброе утро!

Различные способы получить копию объекта со сравнением скорости. Некоторые довольно экзотичные.
https://dassur.ma/things/deep-copy/

Скоро релиз Safari 11.1 в котором будут Service Workers. Это довольно большое событие, учитывая как долго команда разработки говорила, что воркеров не будет.
https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html

Большая подборка стрелочек сделанных на CSS. Можно утащить к себе или смотреть как сделано.
https://freebiesupply.com/blog/css-arrows/

Доброе утро!

Firefox 58. Из интересного: Promise.finally, изменили поведение таймеров на фоновых вкладках, ускорили WebAssembly (была ссылка с подробностями на той неделе), вынесли отрисовку игр в отдельный поток, что должно ускорить игры и прочие визуально тяжелые приложения.
http://tanalin.com/blog/2018/01/firefox-58/

Сборник большого количества примеров на d3 с поиском. Полезно иметь в закладках.
https://d3-discovery.net/

Гайд на тему “как стать разработчиком React Native”. Не то, чтобы гайд сильно интересный, но неплохая стартовая точка, плюс там много полезных ссылок.
https://hackernoon.com/how-to-become-a-react-native-developer-in-2018-d9bc85e1d91f

Доброе утро!

Chrome 64 много полезных новшеств для пользователя: блокировщик рекламы, блокировка автовоспроизведения видео со звуком, window.alert теперь не переключает на вкладку где был вызван и другое.
Для разработчиков тоже много всего: ускорение различных API, Resize Observer, управление кешем запросов. Релиз отличный, смотрите остальные изменения.
http://www.opennet.ru/opennews/art.shtml?num=47904

Годный туториал об использовании веб-компонентов.
https://medium.com/samsung-internet-dev/lessons-learned-making-our-app-with-web-components-bf55379cfcda

Библиотека для выкидывания асинхронной функции в отдельный поток (Web worker). Посмотрите исходный код — там 60 строк. очень элегантный способ быстро выкинуть сложные расчеты из основного потока.
https://github.com/developit/greenlet

Доброе утро! Сегодня отличная подборка.

Меня довольно часто спрашивают: куда развиваться во фронтенде, особенно начинающему. Ведь вокруг много всего, надо и в дизайн уметь и в UX, и бэкенд понимать и особенности JS. А тут вот отличный сайт, описывающий все смежные области с ссылками на книги и статьи. Очень круто!!!
https://bespoyasov.ru/front-not-pain/

Перевод статьи про тестирование React компонентов. Там есть несколько довольно полезных советов.
https://habr.ru/p/345236

Небольшая заметка, объясняющая почему Container Queries (те, которые позволяют менять стили в зависимости от размеров родителя, а не окна) это ни разу не просто и не производительно.
https://github.com/WICG/cq-usecases/wiki/Circularity-and-Container-Queries

Доброе утро!

Небольшая, но качественная библиотека с простыми анимациями. Вполне подойдет, чтоб оживить статический сайт.
https://webkul.github.io/micron/

Статья, где описан способ сделать мейлы более интерактивными, с помощью SVG. Если вы делаете мейлы, то такая техника может быть неплохим маркетинговым инструментом.
http://stylecampaign.com/blog/2018/01/interactive-email-using-svg-and-smil/

Несколько простых изменений, который сделают сайт более доступным. Об этом много раз уже говорилось, но все же.
https://css-tricks.com/small-tweaks-can-make-huge-impact-websites-accessibility/

Доброе утро!

Тут довольно популярная статья, мол хватит использовать localStorage. Статья спорная. Действительно верное то, что нельзя хранить чувствительные данные в LS. Остальные доводы так себе.
https://www.rdegges.com/2018/please-stop-using-local-storage/

Ещё один CSS фреймворк. Выглядит симпатично. Но зачем — непонятно.
https://bulma.io/

Компонент, позволяющий создавать таблицы как в Excel. Даже формулы есть.
https://nadbm.github.io/react-datasheet/

Завтра я буду на WSD в Москве. Если тоже там будете, то пишите — пообщаемся. Хороших выходных!

Доброе утро! Вчера пропустил новости, но по уважительной причине: из-за непогоды задержали мой рейс.

Сегодня хочу разобрать доклады с прошедшей WSD.
https://wsd.events/2018/02/03/

“За кулисами W3C”
Не содержим практичной информации, а проводит через историю развития W3C и процесса создания спецификаций.

“Насколько важно следовать стандартам?”
В продолжение темы о спецификациях. Рассказали о разнице WHATWG и W3C, а так же о том как можно предлагать свои изменения для внесения в спецификации.

“CSS глазами машин”
Доклад о парсинге CSS и трудностях, которые возникают при этом. Можно было бы озаглавить как “Вы не знаете CSS”.

“Распечатай мне курсач. На CSS”
А этот я бы переименовал в “Вы совсем не знаете CSS”. Очень много информации о стилях для печати, о селекторах и свойствах, которые я никогда не видел и не использовал. И сейчас вспоминаю задачи, в которых бы они пригодились. У автора есть репозиторий, где можно посмотреть код https://github.com/mefody/print-css

“Давайте добавим правила! или Погружение в мир типизации”
Сравнение TypeScript и Flow. Я не очень проникся докладом. Для меня оба языка +- одинаковы. Если перед вами стоит выбор что взять на проект, просто напишите две маленьких тудушки и посмотрите где инструментарий вокруг языка подходит для вас больше.

“Через каскадные таблицы стилей в облака”
Это доклад я пропустил, так как с докером я работаю давно. Могу сказать только одно: в индустрии знать как развертывать контейнеры крайне полезно.

“Прототипирование на продакшен-технологиях”
Обалденный доклад про дизайн-системы. Позволяет понять как устроена (или как должно быть устроена) разработка со стороны дизайнеров.

Последние два доклада я пропустил, они мне не так были интересны. Если вы найдете их познавательными, то напишите мне — тоже ознакомлюсь.

ps. передаю привет всем, с кем встретился на конференции

Доброе утро!

Движуха вокруг PWA набрала обороты. Вот уже и в Windows обещают поддержку. В целом неудивительно. Софт на электроне уже везде, так почему бы со стороны браузеров не зайти в область десктопного ПО.
https://blogs.windows.com/msedgedev/2018/02/06/welcoming-progressive-web-apps-edge-windows-10/

Одна из будущих фич JS — разделители в числах. Можно будет писать 10_000, а для парсера это будет 10000. Честно говоря ценность так себе. Но если вам интересно, то вот детальные подробности.
http://2ality.com/2018/02/numeric-separators.html

TypeScript 2.7. Теперь лучшая поддержка символов, дополнительные проверки, разделители в числах, кортежи. При этом синтаксис становится запутанней и запутанней.
https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/

Список из десяти наиболее встречаемых ошибок JavaScript. Ожидаемо, что большая часть из них — обращение к null или undefined.
Важно: для решения одной из проблем в статье предлагают выставляться заголовку Access-Control-Allow-Origin значение *.
Не надо так делать!
https://habr.ru/p/348422/

Доброе утро!

Когда то Winamp был (а может и остается) лучшим музыкальным плеером. А вот его копия в вебе. Это отличное доказательство того, что история вокруг PWA не просто очередной шум о победе веба над десктопом.
Репозиторий же — пример отличного использования React
https://jordaneldredge.com/projects/winamp2-js/

Подборка SVG картинок, которые можно использовать как фот для сайтов. Преимущество перед растром в очень маленьком размере и можно легко модифицировать под свои нужды.
https://www.svgbackgrounds.com/

Большая и очень хорошая статья о том как на сайт Российской Газеты добавляли поддержку оффлайна. Рекомендую к прочтению. Особенно удивительно такое отношение к новым фичам, учитывая, что газета по сути государственная.
https://habrahabr.ru/company/oleg-bunin/blog/348150/

Доброе утро!

Chrome уже сейчас помечает HTTP страницы, содержащие форму для пароля как небезопасные. В этот раз похоже решение окончательное: начиная с 68й версии Chrome (выйдет в июле) _все_ HTTP будет помечены как небезопасные. Я уверен, что в течении нескольких лет такие сайты вообще перестанут открываться в хроме. Если у вас такие остались, то срочно нужно решать эту проблему.
https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html

Rekit Studio — IDE для React, работает как браузерное приложение. Думаю со временем завернут в электрон. По сути — это то как должна выглядеть любая IDE, когда отходим от работы с файлами к работе с “сущностями” (компонентами, экшенами, редьюсерами). То есть работать в контексте текущего стека.
https://medium.com/@nate_wang/introducing-rekit-studio-a-real-ide-for-react-and-redux-development-baf0c99cb542

Проблемы безопасности в вебе давно известны, но я до сих пор вижу, что многие забывают про стандартные меры защиты. Вот статья, в которой автор рассказывает про самые азы, которые стоит знать если вы делаете веб-сайт.
https://nemethgergely.com/building-secure-javascript-applications/

Доброе утро!

Оперу опять откопали. Говорят, что быстрее ФФ. Но внутри всё тот же Chrome.
https://tproger.ru/news/opera-51/

Подборка актуальных инструментов для тестирования. Автор подошел к делу основательно: инструменты разбиты по категориями, есть описания и даже примеры. Пойдет, чтобы понять какие инструменты существуют.
https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3

Если вам интересно покопаться в WebAssembly, то вот онлайн песочница. Есть поддержка Си, Rust и TypeScript.
https://webassembly.studio/

Доброе утро!

Впервые увидел действительно годное применение Proxy в JavaScript. Небольшая библиотека, которая реализует стейт для React. Часть про React не самая интересная, а вот то как оно работает — магия. Если кратко: то оно трекает все обращения к стейту внутри рендера. Поглядите в код: всё просто и элегантно.
https://blog.risingstack.com/introducing-react-easy-state/

Довольно объемная статья про оптимизацию React компонентов. В целом ничего нового. Совет простой: используйте чистые (pure) компоненты и будет счастье. Сложности скрыты только в способе передачи свойств таким компонентам.
https://habr.ru/p/348584/

Начиная с Chrome 64 атрибут pattern в теге INPUT работает с модификатором “u”. Что это значит на практике: вы можете сделать паттерн, который будет работать с нелатинскими символами. Мне очень нравится тенденция того, что всё больше вещей можно сделать не прибегая к JS. Вот теперь и валидацию.
https://mathiasbynens.be/demo/pattern-u-property-escapes

Доброе утро!

Одно из отличительных особенностей jQuery было то, что им легко оживлять готовую вёрстку, просто добавив на страницу и написав пару скриптов. А вот статья, которая показывает, как похожим образом использовать Vue. Меня очень заинтересовал подход, теперь даже хочу разобраться в Vue, чтоб использовать для прототипов.
https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/

Очередная попытка выстроить жесткие правила по поводу применения ссылок и кнопок в современных интерфейсах. В целом правило простое: меняешь URL значит ссылка.
http://css-live.ru/articles/ssylki-protiv-knopok-v-sovremennyx-veb-prilozheniyax.html

Рейтинг популярности NPM пакетов. Само собой lodash на первом месте с большим отрывом. А следом занимает идет request. И это грустно, что на первых местах библиотеки, которых там не было бы, если бы JavaScript имел нормальную стандартную библиотеку, а NodeJS человеческий API для запросов.
https://gist.github.com/anvaka/8e8fa57c7ee1350e3491

Доброе утро!

Список тегов, которые можно использовать внутри HEAD. Очень полезная шпаргалка.
https://gethead.info/

Очень хороший туториал про изготовление SVG иконок руками. Мне кажется хороший навык, который стоит иметь.
https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368

Небольшая статья рассказывающая на начальном уровне, что такое потоки и буферы в Nodejs. Примеров нет, только теория.
https://habr.ru/p/348970/

Хорошая статья про меди выражения в мейлах, со списком поддерживаемых клиентов.
https://litmus.com/blog/understanding-media-queries-in-html-email

Доброе утро!

Blotter — библиотека для создания разных эффектов для текста. Использует canvas и шейдеры. Отличный вариант для создания эффектов на промо сайтах.
https://blotter.js.org

Подборка из 12 принципов работы с авторизацией и аутентификацией. По хорошему это можно называть правилами, ведь это необходимые вещи. Хотя многие сайты этим пренебрегают.
https://cloudplatform.googleblog.com/2018/01/12-best-practices-for-user-account.html

Библиотека для связи Redux и RESP API. Похоже на тот подход, что был в Angular1 (и подход был крайне удобный).
http://mgcrea.github.io/redux-rest-resource/

Вы скорее всего уже видели эту ссылку, но я все равно не могу не поделиться: таблица с сортировкой колонок на чистом CSS.
http://kizu.ru/en/blog/variable-order/