Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №126: Как нас слушать, Web Animations API, вариативные шрифты, Keyframes.app, ARIA: Hidden или None, плохой placeholder, доступный React и код картинкой.
•
Подкаст «Frontend Weekend» #58 – Марина Миранович о жизни в Лос-Анджелесе и работе в EPAM
•
Подкаст «devschacht»: Ночной фронтенд #38 — Airbnb отказались от React Native
•
Подкаст «CSSSR»: Новости 512 — Выпуск №11 (18.06 — 24.06)
•
«ALL YOUR HTML» #54: «Полет в тоннеле»
•
ШРИ в Москве 2018, 9 видео
•
Могут ли PWA (Progressive Web Apps) образца 2018 года составить достойную конкуренцию нативным приложениям?
•
Исчезающие фреймворки
• Mozilla представила A-Terrain, картографические данные для веб-разработки
•
БЭМ для начинающих: почему вам нужен БЭМ
•
Новые релизы: ESLint v5.0.0, Electron 3.0.0-beta.1, V8 release v6.8, Node v10.5.0 (Current),
•
Анализ проблем, зафиксированных в наиболее популярных фреймворках на GitHub
•
Jake Archibald: Я обнаружил ошибку браузера
• Вариативные шрифты
•
Не следует просто копировать код @font-face с Google Fonts URLs
•
keyframes.app — простой способ создавать CSS анимации
•
По поводу инструментов, определяющих «неиспользуемый CSS»
•
Центрирование в CSS: новый клевый способ vs. старый клевый способ
•
8-Point Grid: Типографика в вебе
•
Использование кастомных шрифтов с SVG в теге Img
•
Псевдо-элементы CSS и трансформации: мои любимые инструменты CSS
•
Оптимизация CSS: ID селекторы и другие мифы
•
Новшества объектных литералов в JavaScript ES6
•
Конструкция async/await в JavaScript: сильные стороны, подводные камни и особенности использования
•
Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста
•
Quantum Mechanics of Calculations in JS
• Знакомство с разработкой через тестирование в JavaScript
•
Новый выпуск ".getInstance": Итераторы в JavaScript
•
Использование JavaScript модулей в вебе
•
Быстрое и полное руководство по типам в TypeScript
•
MobX 5: сага продолжается…
•
Введение в шаблон Single Element
•
Гляди ма, без рук! JS, управляемый мозгом — Charlie Gerard на JSConf EU 2018
• Мулленвег анонсировал дорожную карту для Gutenberg
• Учимся программировать с помощью задач с числами
• Apple, Samsung и автопроизводители утвердили первую версию стандарта электронного ключа для автомобилей
• Google, Lyft, Uber создают коалицию, чтобы развеять страхи по поводу робомобилей
• Семь игр, которые научат программировать
• Что такое VR, AR и смешанная реальность — сайты, приложения и статьи, которые помогут разобраться
• В Instagram уже более 1 млрд пользователей. Соцсеть запускает новый сервис IGTV для вертикальных видео длительностью до часа
• Как Маск, Безос, Брэнсон, Цукерберг, Брин, Гейтс и Тиль видят будущее
• «GitHub — платформа для великих приложений». От любительского проекта до сделки с Microsoft: история сервиса для совместной разработки стоимостью в $7,5 млрд.
Дайджест за прошлую неделю.
Материал подготовили 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)
•
![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)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Mozilla представила A-Terrain, картографические данные для веб-разработки
•
![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)
- Производительность:
•«Performance» — Иван Карев, Андрей Морозов, Михаил Мокрушин, Андрей Роенко, Тамерлан Локьяев на ШРИ 2018
•Оптимизация скорости сайта с помощью Chrome DevTools
•Улучшаем восприятие скорости загрузки за счет примитивного арта
- Инструменты:
•Встречайте Teleport: инструмент для горячей перезагрузки и отладки PWA️
•Как использовать Visual Studio Code
•Введение в tronic — webpack с разумными значениями по умолчанию
•VS Code может делать так?! Подборка лучших советов для Visual Studio Code, о которых никто не позаботился вам рассказать
- Accessibility:
•Не используй атрибут placeholder
•stylelint-a11y — Плагин для stylelint с правилами a11y
•WCAG 2.1 — Изучение жестов указателя
- Анимация:
•Анимированная каллиграфия с SVG
•Лоадер на SVG в виде анимированной капли
•Voronoi Airports WebGL
CSS
• Вариативные шрифты
•
![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)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Знакомство с разработкой через тестирование в JavaScript
•
![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)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
VueJS:
• Vue.js — соображения и трюки
• Использование vue-template-loader с Vue.js для компиляции шаблонов HTML
• Написание абстрактных компонентов во Vue.js
• От нуля до деплоя: разработка системы документации с помощью Vue и VuePress
•vue-translations — поддержка мультиязычности в ваших vuejs проектах
•Создание RSS Viewer на Vue: Часть 1, Часть 2
•Vue.js: хороший, «ни о чем», ужасный
•Галерея в стиле Instagram на Vue.js и CSS Grid
•Топ 21 Vue.js UI библиотек для ваших приложений
React:
•React Native в Airbnb. AirBnb уходит от использования React Native. Узнайте интересные подробности разработки за последние два года
•Настройка React Hot Loader за 10 минут
•Гитхабовские звёзды !== использование: React всё ещё более распространён, чем Vue и Angular
Angular:
•Визуализация данных при помощи Angular и D3
•Компоненты Angular: советы и трюки
•Как создавать динамические компоненты в Angular 6
Занимательное
• Мулленвег анонсировал дорожную карту для Gutenberg
• Учимся программировать с помощью задач с числами
• Apple, Samsung и автопроизводители утвердили первую версию стандарта электронного ключа для автомобилей
• Google, Lyft, Uber создают коалицию, чтобы развеять страхи по поводу робомобилей
• Семь игр, которые научат программировать
• Что такое VR, AR и смешанная реальность — сайты, приложения и статьи, которые помогут разобраться
• В Instagram уже более 1 млрд пользователей. Соцсеть запускает новый сервис IGTV для вертикальных видео длительностью до часа
• Как Маск, Безос, Брэнсон, Цукерберг, Брин, Гейтс и Тиль видят будущее
• «GitHub — платформа для великих приложений». От любительского проекта до сделки с Microsoft: история сервиса для совместной разработки стоимостью в $7,5 млрд.
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.