Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда
Веб-разработка |
CSS |
Javascript |
Браузеры |
Новости и занимательное |
Веб-разработка
- Сражаясь с БЭМ: 10 основных ошибок и как их избежать
- Эффективное использование Github
- Развертывание с GitHub на сервер
- Продолжение и окончание серии статей Ильи Климова «Frontend Dev: хороший, плохой, злой». Часть 2: Плохой путь, Часть 3: Злой путь
- Подкаст Веб-стандарты, Выпуск №25: Atom, доступность, загрузка шрифтов, промисы, векторные эффекты, Антон Виноградов про код, дизайн и Protein.
- Изучаем и отлаживаем webpack с помощью Chrome Dev Tools (Learn and Debug webpack with Chrome Dev Tools)
- Доступные компоненты пользовательского интерфейса для веба (Accessible UI Components For The Web)
- Создание mobile-first шаблона письма, пошаговое руководство (Coding mobile-first emails)
- Знаете что? Нахрен дропдауны (You Know What? Fuck Drop Downs)
- Service Workers:
- Добавляем сервис-воркер на простой сайт, который хостится на Github pages и Cloudflare (Adding Service Worker to a simple website)
- ServiceWorker: базовое руководство по BackgroundSync
- Жизненный цикл сервис-воркеров (The Service Worker Lifecycle)
- Улучшения стандарта MathML в WebKit
- Настоящий мир HTTP/2: загрузка 400gb изображений в день (Real–world HTTP/2: 400gb of images per day)
- Автостопом по галактике современной фронтенд разработки (The Hitchhiker's guide to the modern front end development workflow)
- Плюсы для производительности при использовании rel=noopener (The performance benefits of rel=noopener)
- Руководства от Microsoft по REST API (Microsoft REST API Guidelines)
- Исчерпывающее руководство по стратегиям загурзки нестандартных шрифтов (A Comprehensive Guide to Font Loading Strategies)
- Насколько Pony Foo перемудрен — и почему это реально круто (How Pony Foo is ridiculously over-engineered— and why that is awesome)
- Поддержка WebP – более широкая чем ты думаешь (WebP Support – It’s More Than You Think)
- Практические примеры использования элемента picture (Practical use cases for the picture element)
- HyperTerm — JS/HTML/CSS терминал (JS/HTML/CSS Terminal)
- Эффектный интерактив для маркера на карте (Simple Interactive Points Effect)
CSS
- Оформление модальных окон. Перевод статьи Considerations for Styling a Modal
- Трюки с псевдоклассом :target. Перевод статьи The :target Trick
- Как линтовать ваш Sass/CSS правильно с помощью Stylelint. Перевод статьи How to lint your Sass/CSS properly with Stylelint
- Как линтить SCSS с помощью stylelint (How to lint SCSS with stylelint)
- Как веб-компоненты изменят архитектуру CSS (How Will Web Components Change CSS Architecture?)
- В поисках святого грааля: как я покончил с Element Queries и как вы можете использовать их сегодня (The Search For The Holy Grail: How I Ended Up With Element Queries, And How You Can Use Them Today)
- 4 способа реализации sticky hover эффекта для мобильных устройств (4 novel ways to deal with sticky :hover effects on mobile devices)
- Год, проведенный с PostCSS (A year with PostCSS)
- Тестирование визуальных регрессий с помощью PhantomCSS (Visual Regression Testing with PhantomCSS)
- Новости и текущее состояние стандрта CSS Grid Layout (CSS Grid updates, changes and state of the browsers)
- БЭМ и Atomic Design: CSS архитектура, которую стоит любить (BEM & Atomic Design: A CSS Architecture Worth Loving)
- Эффекты с CSS фильтрами: размытие, ч/б, яркость и многое другое (CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!)
- Ограничения медиа запроса supports (The limits of supports)
- Работа со строками в Sass (Working With Strings In Sass)
- Создание клевой CSS анимации для улучшения производительности фронтенда (Creating Cool CSS Animations to Improve Frontend Performance)
- Адаптация к полям ввода (Adapting to Input)
- Разбор позиционирование в CSS: мастер-класс с Paul O’Brien (Decoding CSS Positioning: A Master Class with Paul O’Brien)
- Стили для печати с Rachel Andrew (Translating CSS for Paged Media with Rachel Andrew)
- Jets.js — нативный движок CSS поиска (Native CSS search engine)
JavaScript
- JavaScript снова возглавляет список наиболее популярных языков программирования (JavaScript, Once Again, Leads The List Of Top Programming Languages)
- 9 видео с конференции OdessaJS 2016, проходившей 2 — 3 июля
- Прогрессивная загрузка современных веб-приложений через разделение кода (Progressive loading for modern web applications via code splitting)
- Миф о «настоящем JavaScript разработчике» (The myth of the “Real JavaScript Developer” – Brenna O'Brien / Front-Trends 2016)
- Почему литералы объекта в JavaScript — стоящая вещь (Why object literals in JavaScript are cool)
- Настройка кросс-браузерного JS юнит-тестирования (Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing)
- Альтернатива регулярным выражениям: apg-exp (An Alternative to Regular Expressions: apg-exp)
- ES6:
- ES6 по-человечески. Перевод краткого (действительно краткого) руководства по ES6
- Стрелочный ад, или новый круг старой проблемы
- Литералы шаблонов в ES6: техники и инструменты (ES6 Template Literals: Techniques and Tools)
- Const или Let? (Const or Let: Let’s Talk Javascript)
- Детали о свойствах ES2016, о которых вы должны знать (Must know details about ES2016 features)
- 6 вариантов использования ES6 прокси (6 compelling use cases for ES6 proxies)
- Как использовать аргументы и параметры в ECMAScript 6 (How To Use Arguments And Parameters In ECMAScript 6)
- 5 причин, по которым вы должны использовать промисы (5 Reasons Why You Should Be Using Promises)
- Наиболее детальное рассмотрение ES6 Destructuring (The Most In-Depth Yet Understandable ES6 Destructuring Tutorial (complete with Assembled Avengers))
- Чистый код с ES6 параметрами по умолчанию и сокращениями свойств (Clean Code with ES6 Default Parameters & Property Shorthands)
- Использование новых коллекций ES6: Map, Set, WeakMap, WeakSet (Using the New ES6 Collections: Map, Set, WeakMap, WeakSet)
- Использование ES6 генераторов и Yield для реализации асинхронных процессов в JavaScript (Using ES6 Generators And Yield To Implement Asynchronous Workflows In JavaScript)
- JavaScript промисы 101 (JavaScript Promises 101)
- Фреймворки:
- Порталы в React.js
- React.js в паттернах (React.js in patterns)
- Как работать со state в React. Недостающий FAQ. (How to handle state in React. The missing FAQ.)
- Начинаем работать с Redux: введение (Getting Started with Redux: An Intro)
- Техники прогрессивного улучшения с помощью React, ч.1 (Progressive Enhancement Techniques for React Part 1)
- Три простых шага для улучшения React Redux кода (3 simple steps to improve your React Redux code)
- Создание шаблонов для писем с React компонентами (Creating email templates with React components)
- Как работать с элементами форм в Angular 2 (How to Deal with Different Form Controls in Angular 2)
- Мобильные JS приложения: рассвет React Native (Mobile JavaScript Apps: The Dawn of React Native)
- AngularJS vs. Ember.js: какой JavaScript фреймворк будет для вас лучшим?
- Начинаем работать с Vue.js (Getting Started With Vue.js)
- Рассмотрите на VueJS для вашего следующего веб-проекта (Consider VueJS for Your Next Web Project)
- Уроки:
- Бесплатный онлайн-тренинг по Angular 2 16-17го августа
- SPA с AngularJS и WordPress REST API (Single Page Apps Using AngularJS and the WordPress REST API)
- Создание приложения для знакомств на базе компонентов с Angular 1.5 (Writing component based goats dating app with angular 1.5)
- Создание приложения в VueJS 2 (Create an App in VueJS 2)
- Создание приложения для потоковой музыки с Electron, React и ES6 (Build a Music Streaming App with Electron, React & ES6)
- Учимся создавать визуализации данных с D3.js на примере (Learn to Create D3.js Data Visualizations by Example)
- Плагины:
- howlerjs — библиотека для работы с аудио в современном вебе (Audio library for the modern web. howler.js makes working with audio in JavaScript easy and reliable across all platforms.)
- Cleave.js — форматирование контента в поле <input/> при наборе
- allora — промисы, использующие ES6 прокси для каждого JS API (Promisify using es6 Proxies every javascript API with less than 50 lines of code)
- Dio — легковесный (~6kb) фреймворк с Virtual DOM. (Dio is a lightweight (~6kb) Virtual DOM framework.)
- Aquarelle — JS для реализации эффекта растекания акварельной краски (Aquarelle is a watercolor js effect)
Браузеры
- В Firefox 48 начнётся интеграция компонентов на языке Rust
- Firefox переходит к блокировке некоторых видов Flash-контента
- Выпуск web-браузера Chrome 52
- Microsoft рекомендует использовать браузер Microsoft Edge из-за его энергоэффективности
- Что повлечет за собой покупка китайским консорциумом компании Opera Software?
- ChromeLens ChromeLens, расширение Chrome DevTools для имитации цветовой слепоты и устройств чтения с экрана
- Топ 12 инструметов для тестирования браузерной совместимости
- Детали релиза Safari Technology Preview Release 9
- Ōryōki — маленький веб-браузер с тонким интерфейсом, экспериментальный проект в разработке
- Apple планирует внедрять WebP для повышения скорости сайтов
Новости и занимательное
- Stack Overflow запускает самое большое нововведение с момента старта всего проекта — документации
- В Китае запрещают блокировщики рекламы
- В ближайшем крупном обновлении Windows 10 появится режим разработчика
- Google задействовала машинное обучение для удобства чтения комиксов
- Падение продаж Apple Watch потянуло вниз весь рынок «умных» часов
- Капча CloudFlare может применяться для деанонимизации пользователей Tor
- Спрос на технарей упал на 40%, но никто не говорит об этом
- Основой SEO-рынка продолжает оставаться обман
- Бум нейросетей: Кто делает нейронные сети, зачем они нужны и сколько денег могут приносить
- 5 медицинских тенденций будущего
- 108 задач с IT-собеседований с разбором решений
- Десять предсказаний о будущем, которые напугают вас до смерти
- Покемономания: Кто и как зарабатывает на игре Pokémon Go
- Когнитивные искажения. То, что нужно знать всем
- Хватит учиться писать код – лучше учитесь анализировать данные
- 7 законов робототехники Сатья Наделлы
- Где и как задействуют нейронные сети
- План 2026: Марк Цукерберг об основных направлениях развития Facebook на ближайшие 10 лет
- Каждый месяц Facebook Messenger пользуется 1 млрд человек
- Пора искать замену мобильной версии Skype?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: Zfort Group