Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №83: Браузер без головы, многопоточный JS, новинки Edge, оптимизация загрузки, фавиконки в Шортах, на все руки веб-мастер.
•
Подкаст «Пятиминутка Angular» #3: Meetups, CodeDojo MEAN, Angular 5 beta6, Cli bazel, PWA
•
Подкаст «Frontend Weekend» FW #17 – Вадим Макеев про HTML Academy, Opera, конфликты и сексизм
•
Подкаст «Пятиминутка React» #33: Кирилл Мокевнин, Hexlet.io
•
Подкаст «devschacht»: Ночной фронтенд #2
•
Подкаст «Фронтенд Юность (18+)» #17: Как прокачиваться на работе: Новинки DevTools, Quantum CSS, Code Retreat, Безголовые браузеры и многое другое
•
Подкаст «Drinkcast», Выпуск #6: «Тим Маринин и мышки на тёрке»
•
«ALL YOUR HTML» #13: «Анимируем SVG в 3D с помощью Three.js»
•
HTML Шорты: Какие нужны фавиконки,
текстовая версия
•
Прототип проекта стоимостью $86 миллионов в 57 строках кода
•
Ссылки вокруг блоков. Можно ли оборачивать ссылкой блочные элементы?
•
Мобильные браузеры и их пушистые лапки. Про отладку сайта в мобильных браузерах
• Быстрый старт: начало работы с безголовым Chrome в Node.js
•
Организация работы фронтенд-инфраструктуры и развития команд. Разработчик из AdRoll делится опытом
•
Сравнение Bootstrap 4 и Foundation 6.4?. Часть №1 — Гриды
•
Внутри супер-быстрого CSS-движка: Quantum CSS (aka Stylo)
•
Проверяем браузер на поддержку определённого CSS свойства
•
Решаем проблему специфичности с помощью CSS модулей
•
Как я интегрирую Bootstrap 4 и структуру моего SCSS в маленькие и средние проекты
•
Создание «Skeleton Screens» с помощью пользовательских свойств CSS
•
cssgrid.cc — подробнейшее руководство от CoffeeCup по построению лейаутов с помощью CSS Grid
•
Библиотека чекбоксов на CSS
•
Пятничный JS: reqyire.js и очепятко-ориентированное программирование
• Microsoft анонсировала обновление TypeScript 2.5
•
Изучаем JavaScript: 9 основных ошибок, которые вас тормозят
•
BackboneJS: Getting Started. Как быстро начать создавать приложения на BackboneJS.
•
Официальный блог JS движка V8: быстрые свойства в V8
•
Лучшие JS фреймворки для фронтенда
•
Angular vs. React vs. Vue: сравнение в 2017
•
JavaScript — от коллбеков до async/await
•
Метод идентификации через определение дополнений, установленных в Chrome и Firefox
•
Что нового в DevTools (Chrome 62)
•
Новые возможности Microsoft Edge: Event Listeners, CSS object-fit/object-position, position: sticky и многое другое
• 18 SEO-мифов, о которых нужно забыть
• История разрушения SoundCloud: рассказ инсайдеров компании
• Обнаружена очередная атака на веб-браузеры, заражающая компьютеры при установке шрифтов
• YouTube представил новый дизайн и логотип
• Google ARCore – новая платформа дополненной реальности поискового гиганта для Android-устройств, Project Tango уходит в прошлое
• В чат Skype внедрили редактор кода для проведения собеседований
• Microsoft и Amazon договорились о совместной работе голосовых помощников Cortana и Alexa
• Microsoft и Red Hat объявили о расширении сотрудничества
• Криптовалютный трейдер Тони Вейс — о «пузыре» вокруг биткоина, плохих ICO и переоценённости блокчейна
• Как братья-миллиардеры хотят создать более дешевого конкурента Slack
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•

•

•

•

•

•

•


Веб-разработка
•

•

•

• Быстрый старт: начало работы с безголовым Chrome в Node.js
•

•

- AMP/PWA:
•Android Oreo откусывает кусочек от PWA
•Да, ваш проект должен быть PWA
•Создаем Progressive Web App с помощью React
•Создаем Progressive Web Apps с помощью Angular?
•iOS 11 Safari превратит ссылки Google AMP в обычные при шаринге
- Производительность:
•Лекция Виталия Харисова «10k» про лёгкую версию поиска для медленных соединений и способы оптимизации кода, позволяющие уложиться в 10 килобайт.
• Гонка за скоростью. Ускоряем загрузку сайтов в эпоху смартфонов
•20 практических советов по улучшению производительности работы JavaScript
•Состояние интернета. Руководство по эффективному улучшению производительности от Karolina Szczur
•Почему задержка (latency) имеет значение: основы веб-производительности. Нюансы и факторы, влияющие на скорость соединения на канале Front End Center
- Accessibility:
• Инклюзивность в веб-разработке: как обеспечить доступность контента каждому пользователю
•Лучший способ программного масштабирования веб-приложения
•Способы создания доступного пользовательского интерфейса, часть I
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #51
•Усиливаем анимацию суперспособностями с помощью requestAnimationFrame
•Vivify — небольшая CSS-библиотека для анимации
CSS
•

•

•

•

•

•

•

- Шрифты:
•Adobe Typekit: теперь шрифты можно подключать без JavaScript (по аналогу с Google Fonts), шрифты готовы к Google AMP
•Подробное руководство по веб-шрифтам от litmus (+ о веб-шрифтах в шаблонах писем)
•Пользовательские интрефейсы для вариативных шрифтов
- CSS & JS:
•Как изображения на чистом CSS помогли мне понять компоненты React
•Доступ и модификация CSS переменных с помощью Javascript (и почему они лучше, чем переменные в SASS)
•Как можно безопасно использовать CSS-in-JS?
JavaScript
•

• Microsoft анонсировала обновление TypeScript 2.5
•

•

•

•

•

•

VueJS:
• Реактивность Vue.js. Реактивность фреймворка Vue.js и использование метода Vue.set
•Почему мы перешли с Angular 2 на Vue.js (и почему мы не выбрали React)
•Переход с Angular на Vue.js
•AT-UI — свежий UI-Kit от китайцев для создания десктопных веб-приложений на Vue.js 2.0
•Используем TypeScript для разработки веб-приложений на Vue.js. Бесплатный курс на egghead.io
•Async в Vue.js — часть 1
•Быстрое введение в Vue.js на примере Super Mario Pixel Art
React:
•semiotic — фреймворк для визуализации данных в React (React & D3)
•Перетаскиваемые элементы с помощью RxJS
•План миграции с экосистемы React из-за вопросов с патентом
Angular:
•Шпаргалка по Angular 4
•Введение в роутинг компонентов с помощью Angular Router
•Все про AngularJS, Angular 2 и Angular 4
•Процесс router-навигации в Angular за 7 шагов
•12 полезных бойлерплейтов для AngularJS
•Angular 4 и взаимодействие соседних компонентов
- Libs & Plugins:
•easter-egg-collection — js библиотека, включающая в себя набор пасхальных яиц
•Quokka? — ?живой JavaScript Scratchpad теперь и для редактора Atom
•lozad.js — продвинутый производительный Lazy Loader, использующий Intersection Observer API
•jest-in-case — утилита для jest для создания вариаций одного теста
Браузеры
•


•

•


Занимательное
• 18 SEO-мифов, о которых нужно забыть
• История разрушения SoundCloud: рассказ инсайдеров компании
• Обнаружена очередная атака на веб-браузеры, заражающая компьютеры при установке шрифтов
• YouTube представил новый дизайн и логотип
• Google ARCore – новая платформа дополненной реальности поискового гиганта для Android-устройств, Project Tango уходит в прошлое
• В чат Skype внедрили редактор кода для проведения собеседований
• Microsoft и Amazon договорились о совместной работе голосовых помощников Cortana и Alexa
• Microsoft и Red Hat объявили о расширении сотрудничества
• Криптовалютный трейдер Тони Вейс — о «пузыре» вокруг биткоина, плохих ICO и переоценённости блокчейна
• Как братья-миллиардеры хотят создать более дешевого конкурента Slack
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
aliev
Angular теряет популярность?
alexzfort Автор
Не буду говорить о глобальной тенденции, но свежих материалов по react и vue последнее время мелькает больше, чем по angular