Обзор видеоплееров для веба. Алексей Авдеев делится списком бесплатных веб-плееров с открытым и закрытым исходным кодом на Хабре — https://habr.com/p/493674/
Size: a a a
2020 March 30
Выпуск №223: Safari, третьи куки и ваши хранилища, Prettier, быстрые картинки, старые трюки, auto в CSS. Слушайте на Ютубе https://youtu.be/tGyF6Ro8_Pw, читайте на Медиуме https://medium.com/p/c6c4e4ff7c8f
Переполнение в CSS. Ахмад Шадид разбирает работу свойства overflow и как бороться с переполнением в частых случаях — https://ishadeed.com/article/overflow-css/
Создание таблиц с сортировкой на React. Кристофер Гилтведт Сельбекк пишет переиспользуемый хук для производительной сортировки таблиц по колонкам — https://www.smashingmagazine.com/2020/03/sortable-tables-react/
Картинки как коробки — что внутри? Расшифровка доклада Полины Гуртовой про внутреннее устройство популярных форматов изображений и способы их оптимизации на Хабре — https://habr.com/p/493616/
2020 March 31
Стилизация скроллбаров на CSS. Уильям Ли показывает, как изменить внешний вид скроллбара на сайте в современных браузерах — https://alligator.io/css/css-scrollbars/
Инклюзивные инпуты. Оскар Браунерт рассказывает, как сделать доступные формы для пользователей скринридеров на HTML и CSS с минимумом JavaScript-кода — https://www.ovl.design/text/inclusive-inputs/
Tema. Юлия Бухвалова собрала настраиваемый генератор цветовых тем из заданных переменных в CSS, SCSS и Less для проектов без фиксированного дизайна — https://yoksel.github.io/tema/
2020 April 01
CSS Houdini: практическое руководство. Адриан Бис рассказывает о текущем статусе спецификаций CSS Houdini и показывает, как и где их можно применять сейчас, в переводе на Хабре — https://habr.com/p/494660/
Плейлист с обучающими видео по TypeScript: от настройки окружения до ООП и типов данных — https://www.youtube.com/playlist?list=PLu6MFGxDdilhKzUePH96oqhedQXROTNmg
Четыре свойства и одно значение в CSS Grid для большей части ваших нужд в вёрстке. Анна Пренцель верстает различные адаптивные макеты на гридах минимумом кода — https://css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs/
Почему цикл for…of в JavaScript — золото. Дмитрий Павлутин разбирает особенности итерации в различных типах данных — https://dmitripavlutin.com/javascript-for-of/
2020 April 02
Размещение текста по заданной траектории с помощью CSS. Мишель Баркер экспериментирует с CSS Motion Path и анимациями, в переводе Дмитрия Гордиенко — http://odinokun.com/2020-03-31-razmeshenie-teksta-po-zadannoj-traektorii-s-pomoshyu-css.html
Улучшаем цифровые стайлгайды для доступности: шрифты, цвета, картинки. 40-минутный курс Татьяны Мак для дизайнеров и верстальщиков — https://youtu.be/tvpstrkDgeM
Как дизайнерам учить код? Пол Ханаока помогает разобраться с самым важным:
Часть 1: Терминал и текстовые редакторы https://www.smashingmagazine.com/2020/03/designers-code-terminal-text-editors-part-1/
Часть 2: Git, HTML, CSS и инеженерные принципы https://www.smashingmagazine.com/2020/03/designers-code-git-hmtl-css-engineering-principles/
Часть 1: Терминал и текстовые редакторы https://www.smashingmagazine.com/2020/03/designers-code-terminal-text-editors-part-1/
Часть 2: Git, HTML, CSS и инеженерные принципы https://www.smashingmagazine.com/2020/03/designers-code-git-hmtl-css-engineering-principles/
2020 April 03
Интерактивная SVG-диаграмма. Саша Смыгина пошагово собирает злободневный интерактивный пай-чарт: ручной SVG и stroke-dasharray, немного математики и JS.
Подробности https://htmlacademy.ru/blog/boost/frontend/svg-chart
Демо на CodePen https://codepen.io/sasha-sm/pen/WNvKNmR
Подробности https://htmlacademy.ru/blog/boost/frontend/svg-chart
Демо на CodePen https://codepen.io/sasha-sm/pen/WNvKNmR
ECMAScript 2020. Аксель Раушмайер с финальным списком новинок спецификации:
— String.prototype.matchAll
— import()
— import.meta
— BigInt
— Promise.allSettled
— globalThis
— for-in
— Optional chaining
— Nullish coalescing
— export * as ns from "mod"
https://2ality.com/2019/12/ecmascript-2020.html
— String.prototype.matchAll
— import()
— import.meta
— BigInt
— Promise.allSettled
— globalThis
— for-in
— Optional chaining
— Nullish coalescing
— export * as ns from "mod"
https://2ality.com/2019/12/ecmascript-2020.html
Поток выполнения в JavaScript. Пол Райан визуально объясняет, как работает контекст выполнения и стек вызовов на простом примере — https://alligator.io/js/thread-of-execution/