Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №:94 WSD в Москве, KharkivFrontend, Node.js 8 LTS, типографика и CSS, интервенции Chrome, дизайн в Деньгах.
•
Подкаст «Frontend Weekend» #27 – Денис Радин обо всей правде жизни разработчика за границей
•
Подкаст «devschacht»: Ночной фронтенд #10?—?Тесты, отладка и сложный мёрдж в XCode
•
Подкаст «Фронтенд Юность (18+)» #26 Во всём виноват Джейк Арчибальд
•
Подкаст «Веб-стандарты», Выпуск №:93 WSD, YGLF, проблемная ReactiveConf, графика и цвет, фокус и курсоры, React и Kotlin, украинский фронтенд.
•
Подкаст «Drinkcast», #16 — «К нам зашел бекенд...»
•
«ALL YOUR HTML» #22: «Анимация «Мандала» или как рисовать синусами и вдохновляться»
•
3 видео с moscowcss_5
•
16 видео с FrontTalks 2017
•
Как учиться веб-разработке? Вадим Макеев в гостях у LoftBlog
•
Веб пора спасать?
•
Знакомство с WebAssembly
• БЭМ для дизайнеров, или Прототипирование на продакшн-технологиях
•
Подходы Right-To-Left в разработке и дизайне мобильных сайтов
•
Использование SVG в качестве плейсхолдеров — еще больше техник загрузки изображений
•
Пирамида тестирования фронтенда: как пересмотреть свой взгляд на тестирование
•
Советы и scripts в npm
•
Серия ответов на вопросы (AMA) с разработчиками npm
•
Awesome Speakers — пополняющаяся подборка из популярных спикеров, выступающих на митипах и конференциях, посвященных фронтенду
•
Очерки истории CSS
•
Нормальныи? сброс. Про ресеты и нормалайзы, что лучше использовать?
• Простая сетка на гридах с фолбэками с помощью @supports
•
Гладкие скругленные углы с помощью CSS Houdini
•
CSS код с запашком
•
Практическое использование соотношений сторон в медиа запросах
•
Области в гридах и элементы, которые их занимают, не обязательно имеют одиновый размер
•
Все что вам нужно знать о CSS-in-JS
•
Дискуссия на GitHub на тему: Должны ли мы перестать использовать сервис Google Fonts и хостить шрифты самостоятельно?. Вопрос был поднят после очередного изменения значения Weight в популярном шрифте montserrat
•
Почему Atomizer (acss.io) не использует более читаемые имена?
• Google: найденные в JavaScript ссылки полностью передают PageRank
• Mozilla выпустила небольшой обучающий курс по отладке JavaScript с помощью debugger
•
Привет из мезозоя
•
Просто о D3.js
•
Что такое RxJS и почему о нём полезно знать
•
Каково это изучать JavaScript в 2018
•
5 руководств по стилю JavaScript — включая AirBnB, GitHub и Google
•
Правильная обработка ошибок в JavaScript
•
Адаптация JavaScript-абстракций со временем
•
Стэк GraphQL: как все сочетается друг с другом
•
Первая практика GraphQL First в Quri
•
Жив ли Meteorjs
•
В Firefox 57 появятся средства для блокирования отслеживания перемещений
•
В Chrome появится защита от открытия рекламных страниц без ведома пользователя
• Выпуск web-браузера Opera 49
• Майнингом через браузеры посетителей занимаются почти 2500 интернет-магазинов
•
Async Pan/Zoom (APZ) приходит в Firefox Quantum
• Intel объединяется с AMD: встречаем процессор Core с графикой Radeon
• Проблемы больших компаний
• «Теневые профили»: Как Facebook вычисляет всех, кого вы когда-либо знали
• Бог есть технология: Как диджитализм стал религией Долины
• Пользователь случайно удалил немного кода на популярной криптоплатформе. И заблокировал эфира на $280 млн
• Flightradar24 — как это работает?
• Как развивается противостояние Bitcoin и Bitcoin Cash и кто за этим стоит
< Дайджест за прошлую неделю
Материал подготовили 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)
•
![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)
•
![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)
• БЭМ для дизайнеров, или Прототипирование на продакшн-технологиях
•
![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)
- Производительность:
•«HTTP/2 — это легко, просто включите его», -говорят нам ребята из BBC. Рост производительности — от 3% до 34%
•Уменьшаем вес изображений с помощью техники конвертации контраста CSS фильтрами
•6 шагов к улучшению производительности вашего веб-приложения
•Измерение веб-производительности – анализируем, что имеет наибольшее значение
•Руководство для разработчиков по оптимизации производительности
•Лучшие практики использования иконок в мире HTTP/2. Краткий обзор нюансов и анализ нескольких популярных сайтов
•О создании новой быстрой версии сайта BMW: улучшение TTFB, версия AMP, SVG и новые брейкпоинты
- Accessibility:
•Руководство по alt-text от слабовидящего веб-разработчика
•Отрывок “Planning for Accessibility" из третьей главы книги новой книги Laura Kalbag «Accessibility for Everyone»
•ARIA — это шпаклевка, а не арматура, — если проводить аналогии создания сайтов со строительством зданий
- Анимация:
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #61
•Web Animation API — используем мощь CSS keyframes в JavaScript
•chromeography — эффектное перетекание одного изображения в другое в виде частиц, с помощью three.js
•Создание анимации с превращением свезды в сердце, с помощью SVG и Vanilla JavaScript
•Анимация раскрывающихся сеток
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Простая сетка на гридах с фолбэками с помощью @supports
•
![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)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![Github](https://habrastorage.org/web/090/49e/c0e/09049ec0e7d3404e8b0c6e369b826001.png)
JavaScript
• Google: найденные в JavaScript ссылки полностью передают PageRank
• Mozilla выпустила небольшой обучающий курс по отладке JavaScript с помощью debugger
•
![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)
•
![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)
React:
•Отладка React-приложений в VS Code
•Использование React 16 Portal для создания чего-нибудь крутого
•Настройки производительности React-приложения на примере реального проекта
•Клиент Ethereum Light на React
Angular:
•Angular 5
•Впечатления от Angular Connect 2017
• Общий функционал и Lazy-модули
•Что нового в Angular v5: анимации
•Топ 5 вопросов на собеседовании по AngularJS
•Как не страдать с Angular — подробное руководство
VueJS:
•Vue.js tutorial: от jQuery к Vue.js
•Как GitLab работает с Vue: спустя год
•Состояние Vue.js — Основные выводы из ежегодного отчета
•Зачем тестировать приложения на Vue ?
- Libs & Plugins:
•Emergence.js — JS плагин для определения видимости элементов во вьюпорте
•js2flowchart — библиотека для визуализации, конвертирует любой JavaScript код в красивую SVG диаграмму
Браузеры
•
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
•
![Chrome](https://habrastorage.org/web/7a5/e0c/2da/7a5e0c2da5a6439eafd2f18a6be6c55f.png)
• Выпуск web-браузера Opera 49
• Майнингом через браузеры посетителей занимаются почти 2500 интернет-магазинов
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
![Firefox](https://habrastorage.org/web/658/e68/375/658e68375138497db4e8be50a3c603e8.png)
Занимательное
• Intel объединяется с AMD: встречаем процессор Core с графикой Radeon
• Проблемы больших компаний
• «Теневые профили»: Как Facebook вычисляет всех, кого вы когда-либо знали
• Бог есть технология: Как диджитализм стал религией Долины
• Пользователь случайно удалил немного кода на популярной криптоплатформе. И заблокировал эфира на $280 млн
• Flightradar24 — как это работает?
• Как развивается противостояние Bitcoin и Bitcoin Cash и кто за этим стоит
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
< Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
ht-pro
Спасибо!