Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | 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 | Браузеры | Занимательное
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Что за lit-html? lit-html — конкурент react или просто другой вид Handlebars
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![pwa](https://habrastorage.org/web/dc5/696/b7f/dc5696b7fbef409eb5e2921500a26c3d.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Производительность:
•Использование 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
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
• Сколько стоит JavaScript? Перевод «The Cost Of JavaScript» Эдди Османи.
• 77% из 433 тысяч изученных сайтов используют уязвимые версии JavaScript-библиотек
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Фреймоврки:
•Серия публикаций из 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
React:
•Основы React: всё, что нужно знать для начала работы
•Бесплатные лекции по продвинутому React.js
•Как значительно улучшить производительность приложения на React
•bemto-components. Умные компоненты для использования методологии BEM с React. Лучше всего заходит со styled-components.
•Издержки производительности при серверном рендеринге React на Node.js
Angular:
•Использование Angular компонентов со сторонними библиотеками
•Взгляд на Angular через призму Vue — знакомый код
•Как сделать компонент загрузки приложения Angular с помощью Angular CLI
•Angular 5 Service Worker
•“React лучше, чем Angular” и другой бред
- Libs & Plugins:
•Scrollama — JS библиотека для реализации сторителлинга с помощью IntersectionObserver в пользу событий прокрутки.
•Chartkick — создание красивых графиков с помощью одной строки на React
•imaskjs — маскирование данных по заданным параметрам в текстовом поле ввода, без зависимостей
•raspchat — сервер с чатом, который можно запускать на Raspberry Pi
•z — нативный паттерн сравнения для Javascript
•AWS Amplify — декларативная библиотека для разработки приложений, использущих Cloud сервисы с JS
Браузеры
•
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
• В Firefox планируют выводить предупреждение при посещении ранее взломанных сайтов
• Хотите получать новости первым? О том, как заблокировать раздражающие push notifications в разных браузерах
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Занимательное
• Анализ степени дублирования кода на GitHub
• GitHub получил функцию командных обсуждений
• Quartz: Google собирает данные о местоположении пользователей Android
• Бывший глава китайского подразделения Google: работа, требующая социальных навыков, в будущем выйдет на первый план
• 11 оптических иллюзий в интерфейсах
• Где найти последние места без интернета
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.