Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
» Дайджест за прошлую неделю.
» Материал подготовили dersmoll и alekskorovin.
| Веб-разработка |
| CSS |
| Javascript |
| Браузеры |
| Новости и занимательное |
Веб-разработка
10 особенностей Webpack- Пособие по webpack
- Доступность «кастомных html-контролов для незрячих пользователей
- Frontend: Разработка и поддержка
- Будущее сайтов: автоматическая сборка на базе ИИ и не только
- Подкаст Веб-стандарты, Выпуск №32 : Safari 10 скоро, Chrome 53 уже, кастомные элементы, border-image, font-display, Лия Веру и HTML, вомбаты в носках и npm.
- Подборка видео по оптимизации HTML/JavaScript
- Поддержка Bootstrap 3 прекращена, хотя четвертая версия всё ещё находится в стадии «альфы»
Какие элементы в HTML5 уже устарели? (What is obsolete in HTML5?)- Дизайнерское руководство по оптимизации веб-производительности (Designers Guide to Web Performance Optimization)
- Руководство по браузерной скролл-анимации (A Guide to Browser Scroll Animations)
- 10k Apart:
- Советы по созданию сайта для конкурса 10k (Building in 10k: Markup for Accessibility, Clarity, and Affordance)
- Советы для более быстрой загрузки страницы в контексте конкурса 10к (10k Tips for a Lighter Page Load)
- Еще один вариант реализации проекта для конкурса 10к — с webp, сервис-воркерами и другими плюшками (Image Beast — My 10 K Apart Entry)
- Как выглядит звук? Искусство веб-аудио (What Does a Sound Look Like? Web Audio Art!)
- Строительные блоки прогрессивных веб-приложений (The Building Blocks Of Progressive Web Apps)
- 10 золотых правил отзывчивых SVG (10 golden rules for responsive SVGs)
- BroadcastChannel API: передача сообщений для веба (BroadcastChannel API: a message bus for the web)
- Использование SVG для прозрачных растровых изображений (Using SVG's for Transparent, Raster Images)
- Washington Post анонсирует ‘молниеносный’ мобильный сайт, который будет работать на технологии прогрессивных веб-приложений и использовать AMP (Washington Post Unveils ‘Lightning-Fast’ Mobile Website)
- Релиз текстового веб-редактора Quill 1.0 (Announcing Quill 1.0)
- Роботы и вы: руководство по Robots.txt (Robots and You: A Guide to Robots.txt)
- Руководство по оптимизации изображений для SEO (Your Guide to Optimizing Images for SEO)
- Ох, твою мать, git!
CSS
- Разработка расширяемых компонентов на HTML и CSS
- Оформление строчных блоков кода
- Несколько способов изменить порядок следования элементов с помощью CSS (A Few Different CSS Methods for Changing Display Order)
- Переводим всё на Flexbox (Going all-in on Flexbox)
- Создание масштабируемых компонентов с помощью относительных CSS-единиц (Building Resizeable Components with Relative CSS Units)
- Автопрефиксы, с помощью CSS переменных! (Autoprefixing, with CSS variables!)
- На каком этапе находится рабочий черновик по CSS Grid Layout (Where Things Are at in the CSS Grid Layout Working Draft)
- Simple CSS Media Queries — сборник медиа-выражений для устройств
- CSS is !important
- CSS в trivago — часть 1: Структура и ITCSS
- Как давать названия цветовым переменным в Sass (How to name Sass color variables)
- Интервью с Harry Roberts перед Webexpo Prague: о рефакторинге CSS и ITCSS
- Начинаем работать со счетчиками в CSS (Getting Started with CSS Counters)
- Перебор в Sass с помощью директив контроля (Loop Through Sass Code Using Control Directives)
- nth-child vs nth-of-type
- radiobox.css — набор анимаций для радио-кнопок (radiobox.css — Tiny set of CSS3 animations meant for your radio inputs.)
- Курсор-мутант, с svg и анимациями (Mutant Cursor)
- «Веб-шрифты на прериях» — рассуждения о текущем состоянии веб-шрифтов от Richard Fink на alistapart (Webfonts on the Prairie)
-
Rachel Andrew: CSS Grid Demo — Multiple Image Hero Layout
JavaScript
- 4 вида утечек памяти в JavaScript и как с ними бороться
- Строим свой full-stack на JavaScript: Основы
- Samsung добавляет JavaScript в Интернет «вещей» (Samsung brings JavaScript to the Internet of Things)
- Прощание с Node.js v5, подготовка к v7 (Farewell to Node.js v5, Preparing for v7)
- Отладка JavaScript на продакшене (Debugging Production JavaScript)
- Меры против document.write() (Intervening against document.write())
- Введение в стрелочные функции JavaScript (JavaScript Arrow Functions Introduction)
- Моя новая любимая ES6 игрушка: деструктурированные объекты как параметры (My New Favorite ES6 Toy: Destructured Objects as Parameters)
- JavaScript: массивы против объектов (JavaScript: Arrays vs Objects)
- Объявление var умерло? Что же я должен использовать? (Is var Dead? What should I use?)
- Готовимся к собеседованию по JavaScript: что такое композиция функций? (Master the JavaScript Interview: What is Function Composition?)
- Нативная бесконечная прокрутка с IntersectionObserver API (Native Infinite Scrolling with the IntersectionObserver API)
- Лучшие практики по работе с Node.js (Node.js Best Practices)
- Введение в Chart.js 2.0 — шесть простых примеров (An Introduction to Chart.js 2.0 — Six Simple Examples)
- Уроки:
- Help с HyperDev — бесплатный интерактивный курс по Node для начинающих (Learn Node.js — a free interactive course for Node beginners)
- Урок: как собирать JavaScript с Rollup (Tutorial: How to Bundle JavaScript With Rollup)
- Начало работы с PouchDB, клиентской JavaScript базой-данных (Getting Started with PouchDB Client-Side JavaScript Database)
- Руководство: как использовать Vue.js с jQuery-плагинами (Guide: How to use Vue.js with jQuery Plugins)
- Фреймворки:
- JavaScript фреймворки: распределенные каналы для хороших идей (JavaScript Frameworks: Distribution Channels for Good Ideas)
- Анимация элементов React с помощью BoxArt (Animating React Elements with BoxArt)
- Создание амбициозного веб-приложения с помощью Ember.js (Building Ambitious Web Applications with Ember.js)
- react-fake-component — компонент для визуальной симуляции загрузки контента
- React Native Elements — кроссплатформенный UI инструментарий
- Как масштабировать React приложения (How To Scale React Applications)
- Роутинг в React приложениях: полное руководство (Routing React Apps: The Complete Guide)
- Как использовать модуль react-redux (How to Use the react-redux Package)
- Создание форм с React и Redux (Creating Forms with React and Redux)
- Angular 1.6 — убрана песочница выражений (Angular 1.6 — Expression Sandbox Removal)
- От ngAnimate к Angular 2 animate (From ngAnimate to Angular 2 animate)
- Плагины:
- awesome-grid — курируемый список библиотек и ресурсов по динамическим таблицам (гридам) для разработчиков
- appmetrics.js — небольшая (1.1Кб) библиотека для измерений параметров производительности веб-страницы и отправки результата в Google Analytics.
- timeago.js — преобразует дату в понятное представление «3 часа назад»
- cookies.js — для работы с cookies в браузере
- Fuse.js — библиотека для реализации нечёткого поиска (запрос может содержать ошибки)
- granim.js — плагин для создания интерактивных анимированных цветовых градиентов
Браузеры
- Устанавливать расширения в десктопный Chrome теперь можно прямо с Android
- Chrome начнёт помечать небезопасными страницы, открытые по HTTP
- Выпуск web-браузера Vivaldi 1.4
- Mozilla: многопроцессная версия Firefox на 400%-700% отзывчивее обычной
- Google существенно оптимизировала производительность и энергопотребление Chrome 53
- Firefox 49 для разработчиков
- DevTools Digest, September 2016
Новости и занимательное
- Презентация Apple: часы для пловцов, iPhone без миниджека, Марио
- Конференции Apple и Sony (7 сентября 2016)
- Презентация Sony: анонсы PlayStation 4 Pro и нового дизайна консоли
- Microsoft готовится представить конкурента популярному корпоративному мессенджеру Slack
- Новый формат изображений HVIF позволяет создавать красивые иконки весом в 500 байт
- Крупнейшая IT-сделка в истории Европы завершена: ARM стал частью SoftBank
- Baidu открыл наработки в области машинного обучения
- OpenOffice умер, да здравствует LibreOffice!
- Новая статистика Steam показывает, что пользователи больше не покупают гарнитуры виртуальной реальности HTC Vive и Oculus Rift
- История проекта Stack Overflow — экспертные ответы на ваши вопросы
- История Project Ara: почему Google не удалось создать модульный смартфон
- Новостной ленте Facebook исполнилось 10 лет
- Исследование SWIFT: биткоин — спекулятивный актив, который не способен вытеснить классические валюты
- Зачем процессору нейроны?
- Как работает лента новостей в Facebook
- В Bank of America допустили, что человечество существует в матрице
- Особенные люди в коллективе: почему западные ИТ-компании высоко ценят сотрудников c аутизмом
- Как извлечь из посещения конференций реальную пользу, а не просто просрать день своей жизни
- «Японский Билл Гейтс»: биография основателя SoftBank Масайоши Сана
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
» Дайджест за прошлую неделю.
» Материал подготовили dersmoll и alekskorovin.
