Дайджест лучших материалов за февраль

Дайджест лучших материалов из группы за второй месяц 2016 года.

В центре внимания

• Перебирающие методы массивов — статья, которую должен прочитать любой начинающий JavaScript разработчик. В статье рассматриваются способы использования всех перебирающих методов массивов: forEach, map, reduce, filter, some и every. Для каждого метода написана функция, которая делает всё то же самое — подобный подход важен для понимания принципов работы данных методов.
• Скринкаст по Gulp от Ильи Кантора. 14 уроков по продвинотому использованию Gulp.js.
• Google выпустил огромный гайд по созданию прогрессивных веб-приложений, то есть тех, которые работают на любом устройстве и в любом браузере, обязательно адаптивные и похожи на нативные приложения.
• Введение в обектно-ориентированный JavaScript:
  • Что такое объект, или почему утверждение: “Всё в JavaScript является объектом” неверное
  • Основы работы с объектами: чтение и запись свойств, цикл for .. in, как перебрать объект с помощью Object.keys() и методов массивов
  • Функции конструкторы и ключевое слово this
  • Наследование объектами свойств и методов с помощью прототипов
  • Объектно-ориентированный JavaScript в действии: пример создания библиотеки для валидации данных с возможностями последующего расширения функционала и встроенным строковым шаблонизатором
• Самый адекватный гид по функциональному программированию от профессора Фрисби — книга о функциональном программирование вообще и его использовании с JavaScript в частности

Немного новостей

В этом месяце хром многому научился: появилась поддержка фичи под названием URLSearchParams, позволяющей обрабатывать URL и извлекать отдельные параметры — мелочь, а приятно. Была добалена плавная прокрутка страниц, так что если вы используете сторонние библиотеки для её реализации, то пора уже их отключить. И последнее, самое приятное и значительное, обновление получили инструменты разработчика: умный автокомплит при работе в консоле, быстрое редактирование CSS анимаций, поддержка кастомных CSS свойств и тёмные темы.

Вышел ESLint версии 2.0.0 c большим количеством обратно несовместимых изменений.

React переходит на новую систему версионирования. Следующий релиз состоится под версией 15.0.0. Подобная схема поможет обозначить стабильность и надёжность.

Много интересных ссылок

CSS

• Checkbox.css — очень приятная на вид библиотека для стилизации чекбоксов и радио кнопок. Только CSS никакого JavaScript.
• Новое свойство display: contents
• Принципы создания анимаций для чекбоксов и радио-кнопок
• Свежий вгляд на адаптивные таблицы
• Подробный гайд по использованию свойства background-clip
• Learn CSS Layout — the pedantic way — учебник полностью посвященный CSS лэйаутам. Всё разложено по полочкам и описано максимально доступно, есть Flexbox, а в последней главе рассказывают про крутые малоизвестные трюки
• Подробное руководство по использованию Grid Layout и способах размещения элементов
• Адаптивные изображения с умной автоматической обрезкой
• 5 вещей, которые вы возможно не знали про позиционирование в CSS
• Где и когда использовать calc()
• Техники создания полосатых фонов с помощью CSS
• Flexbox Patterns — сайт, на котором можно посмотреть хорошие примеры использования flexbox
• Очень подробный учебник по CSS транформациям: содержит много отличных примеров использования для каждой главы
• Подборка современных CSS фич, которые можно безболезненно внедрять в свои проекты уже сейчас: фильтры, анимации, 3D-трансформации, новые селекторы
• Флексбокс за 5 минут: интерактивный гайд
• Эффект нарисованных от руки кнопок с помощью свойства border-radius

Sass

• Эстетичный Sass — cерия статей на русском о том, как писать хороший Sass код
• Цикл статьей про модульный CSS c Sass
• Наиболее удобный способ использования медиа запросов в Sass
• Небольшая подборка полезных утилит для Sass
• Сортировка пузырьком с Sass
• Создание ромбовидных сеток с Sass
• Организация кода для адаптивной типографики
• Использование Объектно-ориентированного CSS (OOCSS) вместе с Sass
• Несколько советов по написанию хорошо читаемого Sass кода

JavaScript

• 50 лучших JavaScript библиотек, релиз которых состоялся в 2015 году
• JSONP на пальцах
• Видео курс с подробным обзором всех способов создания эффекта параллакса на веб-страницах
• Полный список фич, которые будут добавлены в ES2016 (ES7)
• JavaScript модули — руководство для начинающих
• Хардкорный JavaScript: что можно сделать за 30 строчек кода
• JS Patterns — коллекция JavaScript паттернов с примерами их использования. На каждый паттерн приводится код и в комментариях автор рассказывает, как это все работает, как влияет на оптимизацию и зачем это вообще нужно.
• Создание таймера обратного отсчета в 18 строк нативного JavaScript
• Medium Editor — текстовый редактор для встраивания на сайт, за идею взят редактор с сайта Medium
• Введение в использование async/await: промисы, генераторы, обработка ошибок
• Gridifier — библиотека для создания самых разнообразных сеток. Присутствует Drag’n’drop и сортировка с приятными анимациями
• JS by Examples — репозиторий, в котором собрано огромное количество примеров, на которых можно изучить тонкости JavaScript.
• ES6 в деталях: символы
• Создание головоломки наподобие игры “пятнашки” с искусственным интеллектом на JavaScript
• 5 вопросов, на которые стоит знать ответ любому JavaScript разработчику: замыкания, области видимости переменных, создание нативных методов, как работает ключевое слово this и использование методов функций call и apply
• ToProgress — библиотека для создания прогрессбара в верхней части страницы
• Две видео-шпаргалки про ES6:всё самое крутое из нового стандарта за полчаса
• Headroom.js — библиотека для реализации ненавязчивой навигации. Скроллите вниз навигация плавно уходит за пределы страница и не мешает читать. Скроллите вверх навигация снова появляется. Никаких зависимостей.
• Шаблоны объектно-ориентированного подхода в языке JavaScript
• Репозиторий, в котором собраны примеры использования ES6, отлично подойдёт, чтобы ознакомиться с новым стандартом на примерах
• Подробный разбор способов работы с методом строк replace
• Замыкания — это не магия. Подробное объяснение того, как всё работает
• Добавление полноценных CSS правил (не инлайновых) с помощью JavaScript
• Основы разработки API в JavaScript
• Minigrid — библиотека для создания адаптивных masonry-сеток, написанная на чистом JavaScript
• Mousetrap — библиотека, дающая возможность задать действия для сочетания клавиш
• Введение в события DOM
• PhotoSwipe — htbox плагин на чистом JavaScript. Работает быстро, UX не портит, поддерживает свайпы и прочие жесты. В общем, лучшее решение из тех, что существуют сейчас
• 10 вопросов, на которые должен знать ответ каждый JavaScript разработчик
• JavaScript F.A.Q в двух частях на Хабре. Заковыристые вопросы с подробным объяснением
• Подробный разбор новых методов массивов в ES6

jQuery

• 17 базовых вещей, которые каждый разработчик должен уметь делать с помощью jQuery: кнопка наверх, предзагрузка изображений, как находить DOM-элементы по содержащемуся в них тексту, автоматическая замена изображений, которые не были получены браузером, и многое другое.
• Основы jQuery за одно видео
• Mini-preview — jQuery плагин для предпросмотра ссылок
• Заменяем jQuery на D3

React

• React + Meteor = real-time чат за 40 минут
• 10 причин, по которым каждый разработчик должен выучить React
• Стартовый шаблон для работы с react, react-router, postcss, cssnext и webpack + автоматическая перезагрузка
• Причины, по которым вы не захотите использовать MVC на клиенте, или почему React наилучшее решение
• React Designer — набор компонентов для работы с векторной графикой, даёт огромные возможности для создания всяких онлайн редакторов. Разумеется всё на лету можно экспортировать в SVG
• Использование React с канвасом: подборка и сравнение плагинов
• Способы ускорить сервер-сайд рендеринг приложения на React
• How to ReactJS — статья на русском языке, раскрывающая тайны экосистемы React приложений. В статье освещается неоднозначные вопросы, которые могут возникнуть у новичка — ES6, роутинг, Flux, инлайновые стили, Immutable.js и рендеринг на стороне сервера
• Видео курс: React для всех
• Первая часть видео курса от LearnCode Academy про React
• 9 вещей, которые должен знать каждый разработчик, начинающий изучать React
• Прощай MEAN, здравствуй MERN!

Angular

• Создание директивы для бесконечной прокрутки с Angular 2
• Angular 2 компоненты и провайдеры: классы, фабрики и значения
• Создание многопользовательских игр с Angular

Ember

• 10 шагов для того чтобы быстро понять и начать использовать Ember.js
• Введение в использование Ember с Webpack
• Лучшие ресурсы для изучения Ember.js в 2016 году

Инструменты

• Какими плагинами и настройками для Sublime пользуются разработчики из Google
• DevDocs.io — сайт на котором собрано огромное количество документаций к разным frontend и backend технологиям и фреймворкам.
• GridLover — инструмент для подборки идеального вертикального ритма
• Введение в тестирование с Mocha и Chai
• Подробный разбор настройки вашего workflow для работы с Gulp, Browserify и Babel
• Настройка Sublime Text для работы с Wordpress темами и плагинами
• 10 самых необходимых JavaScript разработчику плагинов для Sublime Text
• Продвинутая автоматизация фронтенда с npm скриптами
• TestMyCSS — инструмент, позволяющий проанализировать ваш CSS код. Просто киньте ссылку на ваш CSS файл, а сервис скажет, где вы сплоховали.
• Создание пятизвёздочной системы рейтинга с Flexbox и jQuery
• Способы генерации SVG-спрайтов на примере библиотеки svg-sprite
• Отладка Node.js в Chrome DevTools
• 33 самых крутых и полезных плагинов для Sublime Text
• Самый быстрый способ настроить live reload для любого редактора кода и любого браузера
• Как создать свой блог на Jekyll и бесплатно хостить его на гитхабе
• BrowserSync по-русски: автоматическая перезагрузка страниц с любым редактором кода и любым браузером + интеграция с Gulp
• Jade для начинающих: введение в использование одного из самых популярных шаблонизаторов для nodejs, который, разумеется, можно использовать и вне ноды для ускорения вёрстки
• Как написать свой первый модуль для node.js, дополнить всё документацией и опубликовать его

Разное

• div, section, article — где использовать каждый тег
• Различия между ссылкой (<a>), кнопкой (<button>) и инпутом (<input type="button">)
• 18 советов по оптимизации производительности сайтов
• Создаем блог используя Jekyll и GitHub Pages
• Большое руководство по использованию SVG иконок
• Повысьте уровень вашего JavaScript кода за несколько простых шагов
• Тема для Wordpress за 60 секунд
• Создаём свой браузер с node.js, HTML и CSS
• Подборка видео про тестирование JavaScript кода
• Подробное руководство по выбору фронтенд фреймворка для вашего проекта
• Минималистичный чат Express + Socket.io + ванильный JavaScript
• Исрользование SVG-масок
• Всё о вёрстке писем: подборка из 60 полезных ресурсов, руководств, уроков и исследований
• HTML5 Elements — сайт на котором используются все HTML5 элементы. Причем используются правильно. Каждый раздел на сайте подписан: какой тег используется и что в него вложено. Посмотрите, если ещё не овладели искусством создания семантической разметки
• Bones артовая тема для wordpress, которая в разы ускорит разработку, хорошая альтернатива Underscores
• Развёртывание node.js приложения на хостинге
• Front-end Handbook — бесплатная книга, которая расскажет абсолютно про все аспекты современной frontend разработки. В книге не так много внимания уделено написанию кода, как различным инструментам, таким как git, nodejs, requirejs. Также в книге хорошо освещается социальная сторона разработки - работа в команде, поиск работы, зарплаты, вопросы с интервью. Каждая глава представляет собой небольшое описание от авторов и набор ссылок, по которым вы сможете найти все, что необходимо знать по данной теме.
• Отправление писем с помощью node.js и express
• Список всех свойств, приводящих к перерисовке страницы
• FreeCodeCamp — сайт на котором вы сможете отточить свои навыки программирования на реальных и полезных проектах
• Готовимся к HTTP/2: всё, что вы знали ранее про оптимизацию — ложь

Немного дизайна из группы Freebies Truck

• 11 лучших UX книг, которые стоит прочитать в 2016 году
• 5 неожиданных мест на вашем сайте, где можно проявить свою оригинальность
• Введение в UX дизайн за 14 простых шагов
• 5 фактов о UX, которые должен знать каждый дизайнер
• 50 самых популярных бесплатных кириллических шрифтов 2015 года
• Пункты договора на разработку, которые стоит заранее обговорить, чтобы сэкономить время и нервы и избежать конфликтных ситуаций
• Подборка из 14 самых крутых ресурсов для подбора бесплатных фотографий
• Wireframe’ы для адаптивного дизайна
• Подборка полезных ресурсов для дизайнеров: бесплатные инструменты, фотостоки, иконки, сервисы, цветовые схемы и ресурсы для вдохновения и презентации своих работ.
• Разбор типичных ошибок в UX дизайне
• Почему понятие Mobile First устарело
• Новый интерфейс — отсутствие интерфейса
• 24 ошибки дизайна и юзабилити сайта: каталог антипаттернов дизайна и UX сайтов с примерами «хорошо-плохо» и советами, как исправить
• Как эффективно использовать пустое место в веб-дизайне
• Переход с Photoshop на Sketch