Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Frontend Weekend» FW #30 – Евгений Родионов о том, как из верстальщика стать директором по продуктам
•
Подкаст «Веб-стандарты», Выпуск №97: Edge и Chrome, Firefox и веб-компоненты, CSS-волшебники, подкаст, форматы, поддержка
•
Подкаст «devschacht»: Ночной фронтенд #13— Дарт, Полимер и велосипеды
•
Подкаст «Фронтенд Юность (18+)» #28 React разрывает пуканы
•
Подкаст «Drinkcast», #19 — «Пресвятой JavaScript»
•
«ALL YOUR HTML» #25: «ALL YOUR HTML, Рисуем фото линиями в 3d, three.js»
•
Введение в тестирование фронтенда
•
Баги на продакшене — грязная дюжина самых популярных
•
Как начать работать со статическими сайтами — обзор генераторов
•
Чеклист фронтенда — это только инструмент… все зависит от вас
•
Лучшие подкасты о веб-дизайне и веб-разработке
•
Учим CSS Grid за 5 минут
•
О логике построения типографики и пропорций в V6
•
Современная асинхронная загрузка CSS
•
Инструменты для инлайнинга CSS, которые пригодятся при создании Email шаблона
•
Использование feature queries (@supports) для каскада в веб-разработке
•
Как я воссоздал эффект хлопка на Medium, и что я понял из этого эксперимента
•
Генерация вайрфреймов с контурами и диагоналями при помощи CSS и HTML
•
Гибкий контроль переполнения контейнеров с помощью флексов
•
Шрифтастическая производительность веба — доклад Monica Dinculescu на SmashingConf Barcelona 2017, а также небольшое пояснение свойства font-display для доклада
•
Как работает JS: особенности и сфера применения WebAssembly
• Создание библиотеки компонентов с использованием Storybook
•
Путешествие в Fantasy-land. Егор Трубников-Панов рассказывает о функциональном стиле программирования на JavaScript и спецификации Fantasy-land.
•
JSRobot — изучайте JavaScript, играя в игру
•
Введение в спекулятивную оптимизацию в V8
•
JavaScript хаки для ES6 хипстеров
•
Полный справочник по собеседованию Javascript разработчика
•
Реализация решета Эратосфена в JavaScript
•
MobX vs Redux с React: вопросы и сравнение для новичка
•
Участие в ECMAScript: инструкция
•
В Firefox 58 будет запрещён прямой переход на URL «data:»
•
Chrome 63 — что нового в DevTools
•
Chrome 64 — что нового в DevTools
•
Мобильный браузер Microsoft Edge стал доступен всем пользователям Android и iOS
•
Новый и улучшеный инспектор событий и CSS в Microsoft Edge DevTools
• Проект Mozilla выпустил открытую систему распознавания речи
• Объяснения по обновлениям алгоритмов Google
• 24 Pull Requests: ежегодное мероприятие GitHub по развитию открытых проектов
• HDMI 2.1: новый стандарт, новый кабель
• Квантовые компьютеры и квантовый интернет сегодня и завтра
• Резкие взлёты и падения популярности технологий на Stack Overflow
• Photoshop будет использовать ИИ для быстрого выделения объектов
• Эрик Шмидт: медицина и наука – основные отрасли, где будет использоваться ИИ в ближайшем будущем
• Власть имиджбордов: Как 4chan стал рассадником насилия
•
Scripting Cyrillic. О внедрении кириллицы в Google Docs и Slides
•
OWASP Top 10 — 2017 — десять наиболее критичных уязвимостей веб приложений
Дайджест за прошлую неделю.
Материал подготовили 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)
Веб-разработка
•
![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)
- Производительность:
•Производительность как восприятие: восприятие времени
• Google не использует метрику TTFB в ранжировании
•Лучший запрос — это отсутствие запросов. Пересмотр стратегии оптимизации под HTTP/2
•23 инструмента для повышения производительности веб-сайтов
•Советы по оптимизации производительности JavaScript
•Прогрессивная загрузка изображений с помощью Intersection Observer и SQIP Progressive
•HTTP/2 PUSH или HTTP Preload
- AMP/PWA:
•Анализ экономического влияния AMP на издателей и e-commerce
•Разработка для безбраузерного веба (в контексте PWA)
•Addy Osmani подробно о создании PWA для Pinterest и о существенном повышении производительности в связи с этим
- Tools:
•Как (и зачем) использовать eslint на вашем проекте
•WebStorm 2017.3: улучшенная поддержка Vue.js, рефакторинг, новый REST клиент и прочее
- Accessibility:
•Что нужно знать о 2018-м: грядущие дедлайны соблюдения стандартов и этапы
•Сначала доступность: переосмысление того, как мы подходим к дизайну и разработке сайтов
•Руководство по доступности веб-контента для людей, которые не читали об этом раньше
•funkify — расширение для Хрома, позволяющее эмулировать многие расстройства зрения, моторики, а также некоторые когнитивные
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #64
•Анимация лейаутов с помощью техники FLIP
•Декоративный фон на WebGL
•infinitown — WebGL эксперимент с процедурально создаваемым городом
•GLSL: Voronoi octave
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Создание библиотеки компонентов с использованием Storybook
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![Github](https://habrastorage.org/web/090/49e/c0e/09049ec0e7d3404e8b0c6e369b826001.png)
VueJS:
•Приложение реального времени на Vue.js
•madewithvuejs — коллекция проектов, сделанных с помощью vue.js
•Как понять Scoped slots во Vue.js
•vuetron — инструмент для тестирования и отладки ваших приложений на Vue + Vuex
React:
•Отладка производительности React с помощью React 16 и Chrome Devtools.
•Введение в React VR
•GiraffQL — инструмент для интерактивного погружения в GraphQL, написанный на React
•Представление React Food Truck — курируемый набор расширений для VS Code
•reactopt — Инструмент для оптимизации React приложений, идентифицирует определенные события, которые могут вызывать ненужный повторный рендеринг
Angular:
•Использование нового HTTP клиента в Angular v4
•telemachy — визуальное подсказки в виде интерактивного тура по сайту для приложений Angular
•История ngUpgrade: миграция AngularJS приложения с версии 1.6 на Angular 4
- Libs & Plugins:
•Classily.js — небольшой плагин для тогглинга классов: простое решение для не всегда простых задач
•rapid.js — подобный ORM интерфейс и роутер для API запросов
•superstruct — простой и компонуемый способ валидации данных в Javascript
Браузеры
•
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![Chrome](https://habrastorage.org/web/7a5/e0c/2da/7a5e0c2da5a6439eafd2f18a6be6c55f.png)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![IE](https://habrastorage.org/web/46d/4ab/086/46d4ab086f8d4d0093653f539db4d177.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![IE](https://habrastorage.org/web/46d/4ab/086/46d4ab086f8d4d0093653f539db4d177.png)
Занимательное
• Проект Mozilla выпустил открытую систему распознавания речи
• Объяснения по обновлениям алгоритмов Google
• 24 Pull Requests: ежегодное мероприятие GitHub по развитию открытых проектов
• HDMI 2.1: новый стандарт, новый кабель
• Квантовые компьютеры и квантовый интернет сегодня и завтра
• Резкие взлёты и падения популярности технологий на Stack Overflow
• Photoshop будет использовать ИИ для быстрого выделения объектов
• Эрик Шмидт: медицина и наука – основные отрасли, где будет использоваться ИИ в ближайшем будущем
• Власть имиджбордов: Как 4chan стал рассадником насилия
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.