Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Frontend Weekend» #29 – Александра Ермоленко про то, как должны взаимодействовать дизайнеры и разработчики
• Подкаст «Веб-стандарты», Выпуск №96 – Firefox 58 и совместимость браузеров, JS-модули, React + BEM, карьера, For Web, паблики и Smashing Magazine
• Подкаст «devschacht»: Ночной фронтенд #12 — Деньги не мотивация
• Подкаст «Фронтенд Юность (18+)» : JavaScript — лучший язык для бездумного копирования чужих велосипедов
• Подкаст «Drinkcast», Выпуск #18 — «Ребята, давайте жить дружно»
•
Пятиминутка Angular #6 — Angular Kiev/MSK/Camp, 5.1.0 beta 2, Angular Elements, Animation Movie
• «ALL YOUR HTML» #24: «Кастомный скролл и css свойство clip»
• Новый выпуск DevShow на канале loftblog: Андрей Ситник — О сексе, алкоголе и Logux
•
Адаптивная вёрстка. В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?
• Что за lit-html? lit-html — конкурент react или просто другой вид Handlebars
•
Progressive Web Apps: подробное введение в PWA
• Локализация и перевод в вебе
• Общие проблемы безопасности в веб-приложениях, часть 1
• Всё, что вам нужно знать о CSS-in-JS
• Логические сетки в CSS Grid Layout, статья Эрика Мейера на alistapart
• Искусство решения проблем с помощью CSS
• CSS для комманд
• Обновите свой проект с помощью CSS-селекторов и пользовательских атрибутов
• О растущей популярности Atomic CSS
• Оптимизация CSS: тонкая настройка производительной анимации с помощью DevTools
• История о том, Зак Лизерман потратил 23 минуты на существенное улучшение времени загрузки шрифта
• Сколько стоит JavaScript? Перевод «The Cost Of JavaScript» Эдди Османи.
• 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек
• Знакомство с JS-шаблоном года или как обрабатывать async как босс
• PlainJS — множество утилит и плагинов на ванильном JS для решения распространненых задач фронтенда, с демками и примерами
• Введение в регулярные выражения (Regex) в JavaScript
• Как работает JavaScript: сравнение с WebAssembly + почему в некоторых случаях лучше использовать его вместо JavaScript
• Почему мы отказались от использования дефолтных экспортов в Javascript и почему вы должны сделать то же самое
• Имплементация JavaScript Functor и монад
•
Улучшение отладчика и расширение WebExtensions API: что нового для разработчиков в Firefox 58
• В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов
• Хотите получать новости первым? О том, как заблокировать раздражающие push notifications в разных браузерах
• Ваш первый (Web)extension для Firefox, написанный на Kotlin
• Сравнение скорости загрузки страниц в браузере: введение в методологию
• Анализ степени дублирования кода на GitHub
• GitHub получил функцию командных обсуждений
• Quartz: Google собирает данные о местоположении пользователей Android
• Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план
• 11 оптических иллюзий в интерфейсах
• Где найти последние места без интернета
• Программисты на пути к очередному пузырю?
• Миф о взаимозаменямости разработчиков
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•
Подкаст «Frontend Weekend» #29 – Александра Ермоленко про то, как должны взаимодействовать дизайнеры и разработчики•
Подкаст «Веб-стандарты», Выпуск №96 – Firefox 58 и совместимость браузеров, JS-модули, React + BEM, карьера, For Web, паблики и Smashing Magazine•
Подкаст «devschacht»: Ночной фронтенд #12 — Деньги не мотивация•
Подкаст «Фронтенд Юность (18+)» : JavaScript — лучший язык для бездумного копирования чужих велосипедов•
Подкаст «Drinkcast», Выпуск #18 — «Ребята, давайте жить дружно»•
Пятиминутка Angular #6 — Angular Kiev/MSK/Camp, 5.1.0 beta 2, Angular Elements, Animation Movie •
«ALL YOUR HTML» #24: «Кастомный скролл и css свойство clip» •
Новый выпуск DevShow на канале loftblog: Андрей Ситник — О сексе, алкоголе и Logux
Веб-разработка
•
Адаптивная вёрстка. В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?• Что за lit-html? lit-html — конкурент react или просто другой вид Handlebars
•
Progressive Web Apps: подробное введение в PWA•
Локализация и перевод в вебе•
Общие проблемы безопасности в веб-приложениях, часть 1- Производительность:
• Использование SVG в качестве Placeholder’a
• Оптимизация скорости визуализации веб-страниц
• «Яндекс» запустил в поиске «турбо-страницы» — аналог Google AMP и Instant Articles
• Новый монитор производительности (Performance monitor) в Chrome DevTools. Теперь вы можете наблюдать множество метрик производительности в реальном времени
• Объяснение понятия First Contentful Paint (FCP) в блоге GTmetrix
• Что такое HEIF и заменит ли этот формат JPEG?
- Инструменты:
• Внутреннее устройство и оптимизация бандла webpack
• Jest и Puppeteer: автоматизация тестирования веб-интерфейсов
• stacks-cli — наглядный анализ стэка сайта из терминала
• Clean-mark — конвертор статей в markdown текст
- Accessibility:
• Подробный разбор создания доступного слайдер контента
• Шаблоны HTML писем и доступность
• Пропаганда доступного дизайна интерфейсов
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #63
• Shredder Redux — реализация Shredder Polygon с использованием инстансов, на three.js, Maf.js и dat.gui
• Креативная анимация чекбоксов в Todo списке на CSS
CSS
• Всё, что вам нужно знать о CSS-in-JS
•
Логические сетки в CSS Grid Layout, статья Эрика Мейера на alistapart•
Искусство решения проблем с помощью CSS•
CSS для комманд•
Обновите свой проект с помощью CSS-селекторов и пользовательских атрибутов•
О растущей популярности Atomic CSS•
Оптимизация CSS: тонкая настройка производительной анимации с помощью DevTools•
История о том, Зак Лизерман потратил 23 минуты на существенное улучшение времени загрузки шрифта
JavaScript
• Сколько стоит JavaScript? Перевод «The Cost Of JavaScript» Эдди Османи.
• 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек
•
Знакомство с JS-шаблоном года или как обрабатывать async как босс•
PlainJS — множество утилит и плагинов на ванильном JS для решения распространненых задач фронтенда, с демками и примерами•
Введение в регулярные выражения (Regex) в JavaScript•
Как работает JavaScript: сравнение с WebAssembly + почему в некоторых случаях лучше использовать его вместо JavaScript•
Почему мы отказались от использования дефолтных экспортов в Javascript и почему вы должны сделать то же самое•
Имплементация JavaScript Functor и монад- Фреймоврки:
• Серия публикаций из 11-ти статей со сравнением Aurelia, Ember, Dojo, Vue, React и Angular, с выводами и приведенными плюсами/минусами каждого из них
• JavaScript фреймворки в цифрах по состоянию на осень 2017
• Современные фронтенд фреймворки должны быть меньше о “frame” и больше о “work”
• Angular vs React: сравнение в контексте популярности
- Теория:
• Чем отличаются JavaScript и ECMAScript?
• Основы троттлинга событий в JavaScript
• Типы в JavaScript: почему вы должны заботиться о них
• Нестандартное объяснение JavaScript области видимости переменных на примере уровней в парламенте
• Как сделать жизнь проще с помощью использования функционального программирования в TypeScript
• Изучите, как обрабатывать ошибки в JavaScript с помощью Try, Throw, Catch, & Finally
VueJS:
• Прогрессивная миграция с AngularJS на Vue.js в Unbabel
• Прогрессивное веб-приложение с помощью Vue JS, Webpack & Material Design
• Как я начал использовать Vue
VueJS:
React:
• Основы React: всё, что нужно знать для начала работы
• Бесплатные лекции по продвинутому React.js
• Как значительно улучшить производительность приложения на React
• bemto-components. Умные компоненты для использования методологии BEM с React. Лучше всего заходит со styled-components.
• Издержки производительности при серверном рендеринге React на Node.js
React:
Angular:
• Использование Angular компонентов со сторонними библиотеками
• Взгляд на Angular через призму Vue — знакомый код
• Как сделать компонент загрузки приложения Angular с помощью Angular CLI
• Angular 5 Service Worker
• “React лучше, чем Angular” и другой бред
Angular:- Libs & Plugins:
• Scrollama — JS библиотека для реализации сторителлинга с помощью IntersectionObserver в пользу событий прокрутки.
• Chartkick — создание красивых графиков с помощью одной строки на React
• imaskjs — маскирование данных по заданным параметрам в текстовом поле ввода, без зависимостей
• raspchat — сервер с чатом, который можно запускать на Raspberry Pi
• z — нативный паттерн сравнения для Javascript
• AWS Amplify — декларативная библиотека для разработки приложений, использущих Cloud сервисы с JS
Браузеры
•
Улучшение отладчика и расширение WebExtensions API: что нового для разработчиков в Firefox 58• В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов
• Хотите получать новости первым? О том, как заблокировать раздражающие push notifications в разных браузерах
•
Ваш первый (Web)extension для Firefox, написанный на Kotlin•
Сравнение скорости загрузки страниц в браузере: введение в методологию
Занимательное
• Анализ степени дублирования кода на GitHub
• GitHub получил функцию командных обсуждений
• Quartz: Google собирает данные о местоположении пользователей Android
• Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план
• 11 оптических иллюзий в интерфейсах
• Где найти последние места без интернета
•
Программисты на пути к очередному пузырю? •
Миф о взаимозаменямости разработчиковПросим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
