Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «Веб-стандарты», Выпуск №130: Неудобные классы и всякий JS, манифест на лету, гриды с ошибками, плохой лэндинг хорошей ШРИ, Выпуск №129: Вирус в npm, зачем Feature Policy, случай в Atom, мёртвый код, разделение ответственности, стрелка или пальчик
•
Подкаст «Frontend Weekend»: #62 – Андрей Ситник о переезде в Нью-Йорк, путешествиях и порно в Твиттере , #61 – Андрей Мелихов о работе в Яндекс.Деньгах, Ночном фронтенде и захвате власти в devSchacht
•
Подкаст «Девшахта/Ночной фронтенд»: #42 — Автоматизация CI/CD, #41 — В поисках хорошего code review
•
Подкаст «Фронтенд Юность (18+)» #56 Токсичное сообщество
•
Подкаст «CSSSR» Новости 512 — Выпуск №15 (16.07 — 22.07)
•
О чем должен помнить веб-разработчик, чтобы сделать всё по SEO-феншую
• Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень
•
Веб-компоненты в 2018
•
Святой грааль переиспользуемых компонентов: Custom Elements, Shadow DOM и NPM
•
Подробности создания веб-интерфейса Google Photos
•
Анатомия вредоносных скриптов: как веб-сайт может завладеть вашим браузером
•
Доступность для команд — быстрое руководство по внедрению практик доступности и инклюзивности в процесс разработки вашей команды
•
Будущее WebAssembly — взгляд на планируемые функциональности и предложения
•
Анимация SVG с помощью SVGator
•
Справа налево. Как перевернуть интерфейс сайта под RTL
•
API CSS Paint
• CSS: новый вид JavaScript
• Химия CSS-гридов
•
Полное иллюстрированное руководство по Flexbox
•
9 самых больших ошибок с CSS Grid
•
DSS — финальный релиз первой беты Deterministic Style Sheets, аналога CSS модулей с автоматической компиляцией в атомарные CSS классы для маленьких бандлов
•
Странные штуки, которые могут делать вариативные шрифты
•
Как исправить проблемы CSS лейаутов?
•
Полезные штуки, которые вы можете делать с CSS pointer events
•
Стоит ли мне использовать IE версию Grid Layout в 2018?
•
Я попробовал функциональный CSS и он типа отстой
•
Как стать лучше в написании CSS
•
Сравнение JS-фреймворков: React, Vue и Hyperapp, Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»
•
JavaScript ES6: слабые стороны
•
Метапрограммирование в JavaScript
•
15 HTML-методов элементов, о которых вы, вероятно, никогда не слышали
• Матрица компетенций Fullstack JS разработчика
•
Введение в JavaScript MutationObserver API
•
Javascript ES6 — на самом деле вам не нужно изучать генераторы
•
Анонс TypeScript 3.0 RC
• В ночные сборки Firefox добавлен WebRender, использующий GPU для отрисовки web-страниц
• В рамках проекта Browsh развивается консольный браузер на базе Firefox
• Началось формирование ASan-сборок Firefox для выявления проблем при работе с памятью
•
Три новые удобные функции в Chrome DevTools
• Так много знаний, так мало времени
• Быть многопрофильным специалистом, но рекламировать себя как специалиста в одной области
• Быстрота Linux на Windows 10. Ода bash-терминалу в Windows Subsystem for Linux.
• 6 подходов к приоритизации задач. Опыт Readdle, MacPaw, Grammarly и EduNav
• Google, Microsoft, Twitter и Facebook основали проект по обеспечению переносимости данных
• В популярный NPM-модуль внедрено вредоносное ПО, копирующее параметры аутентификации
• Алгоритмы спасают людей: как алгоритм подбора пар сохраняет жизни
• Intel рассказала о 10 своих главных достижениях за 50 лет
• Check Point представил обзор киберугроз за первое полугодие 2018 года: двойной рост криптомайнеров и смена вектора атак на облака
• AMD, Microsoft, NVIDIA, Oculus и Valve разрабатывают стандарт VirtualLink, который позволит подключать VR-шлемы к ПК с помощью одного USB-C кабеля
• Тёмный паттерн: как веб-сервисы заставляют пользователей ошибаться в своих действиях
•
Как незрячий пользуется iPhone, MacBook и Apple Watch
Дайджест за прошлую неделю
Материал подготовили 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)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень
•
![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)
- Производительность:
•Измерение производительности с моделью RAIL от Google, цели и руководства для создания быстрых страниц (обновлено в 2018)
•Создание культуры производительности в вашей команде
•Что такое Service Workers и как они могут улучшить производительность
•Как оптимизация изображений снизила вес страницы на 62%
•Чеклист производительности фронтенда
- PWA/AMP:
•PWACompat: Web App Manifest для всех браузеров
•Pinterest: ретроспектива PWA за год
•Отслеживание разработки AMP в новом дашборде AMP Roadmap с фильтрами и категориями
•PWA для WordPress, официальный плагин
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• CSS: новый вид JavaScript
• Химия 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)
•
![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)
• Матрица компетенций Fullstack 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)
VueJS:
• Как создавать Vue-компоненты, словно профи
• Vue-UI — первый взгляд
•Любовное письмо ко Vue
•Бесплатный курс для изучения Vue.js
•Создание “Renderless” Vue компонента
•Лучшее объяснение JS реактивности
React:
• Путь к изучению React. Ваше путешествие по освоению обычного, но прагматичного React. Перевод популярной книги на русский язык
•Основы JavaScript перед изучением React
•Стилизация React компонентов
•Простое создание сложной UI анимации в React
•Насколько быстро ты можешь изучить React?
Angular:
•Что нового в Akita для Angular: мы добавили самые востребованные функции
•Улучшаем производительность Angular приложений с помощью Local Change Detection
•Вы не знаете Angular — руководство по Angular Projection
- Libs & Plugins:
•Как создать современную панель управления на NVD3.js
•coolHue — инструмент для подбора градиентов и создания своих палитр
•draxt — NodeList-like/jQuery-like package для File System (node.js)
•Popbox.js — небольшой плагин для создания наслаивающихся модальных окон. Плагин без зависимостей и полностью настраивается
•Pushbar.js — небольшой плагин для создания выезжающих панелей в веб-приложениях.
Браузеры
• В ночные сборки Firefox добавлен WebRender, использующий GPU для отрисовки web-страниц
• В рамках проекта Browsh развивается консольный браузер на базе Firefox
• Началось формирование ASan-сборок Firefox для выявления проблем при работе с памятью
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Занимательное
• Так много знаний, так мало времени
• Быть многопрофильным специалистом, но рекламировать себя как специалиста в одной области
• Быстрота Linux на Windows 10. Ода bash-терминалу в Windows Subsystem for Linux.
• 6 подходов к приоритизации задач. Опыт Readdle, MacPaw, Grammarly и EduNav
• Google, Microsoft, Twitter и Facebook основали проект по обеспечению переносимости данных
• В популярный NPM-модуль внедрено вредоносное ПО, копирующее параметры аутентификации
• Алгоритмы спасают людей: как алгоритм подбора пар сохраняет жизни
• Intel рассказала о 10 своих главных достижениях за 50 лет
• Check Point представил обзор киберугроз за первое полугодие 2018 года: двойной рост криптомайнеров и смена вектора атак на облака
• AMD, Microsoft, NVIDIA, Oculus и Valve разрабатывают стандарт VirtualLink, который позволит подключать VR-шлемы к ПК с помощью одного USB-C кабеля
• Тёмный паттерн: как веб-сервисы заставляют пользователей ошибаться в своих действиях
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin