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

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

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

Январь стал одним из ключевых месяцев для развития веб-разработки, в больше степени из-за прекращения поддержки старых IE 8, 9 и 10. Да, всех разом. На прекращение поддержки незамедлительно среагировали разработчики React, заявив, что React DOM больше не будет поддерживать IE8, начиная с релиза версии 0.15.

Флексбоксы попрощались с экспериментальным статусом и стали кандидатом в рекомендации. На сегодняшний день флексбоксы поддерживают больше 95% браузеров! В том числе больше 80% — без префиксов.

В свежей версии Chrome появилась поддержка ES2015 прокси, очень полезных для “прослушки”, виртуализации объектов и профилирования.

Microsoft открыла свои чакры, выложив в общих доступ ChakraCore — сверхбыстрый JavaScript движок, который используется в браузере Microsoft Edge.

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

CSS

• Voxel.css — библиотека для 3D-рендеринга с помощью свойства transform и CSS анимаций
• Bulma — новый css фреймворк. Сетка на flexbox, очень приятно подобранные цвета, хорошая документация
• CSS эксперименты — подборка различных эффектов, реализованных с помощью CSS: эффект переворачивающейся карточки, аккордеон, пульсирующая кнопка, выпадающие и выдвигающиеся меню и некоторые другие
• 13 полезных советов по CSS
• Solved by Flexbox — сайт, на котором собраны примеры часто возникающих проблем при вёрстке, а также подробный разбор того, как решить их без лишних велосипедов и костылей с помощью Flexbox.
• Эволюция вёрстки, проблемы флексбокса и их решение с помощью Grid Layout
• Создание очень крутого эффекта для текста при наведении
• Практическое руководство по вёрстке с flexbox на примере станицы товаров интернет магазина
• Полное руководство по Flexbox на русском от css-tricks в переводе frontender.info
• Цикл статей по Web Animation API от css-live.ru
• Огромная статья, посвященная адаптивной типографике
• Flexbox Froggy — интерактивный гайд по флексбоксу. На сайте можно пройти 24 урока, которые продемонстрируют все самые крутые возможности флексбокса. Уроки на русском языке.
• Flexbox Playground — небольшой гайд по использованию flexbox. На сайте можно посмотреть, как различные свойства будут влиять на лэйауты.
• CSS Diner — небольшая игра, которая поможет выучить CSS-селекторы
• min-width vs max-width разбор того, какой подход всё-таки лучше
• Коллекция практических советов и заметок по вёрстке
• Все CSS селекторы в одном видео
• Где использовать CSS функцию calc()
• Все что вам нужно знать про вертикальное выравнивание и свойство vertical-align
• Milligram — крошечный CSS фреймфорк, содержащий необходимый минимум для удобного чтения
• Введение в использование flexbox и практика на примере вёрстки главной страницы dribbble

JavaScript

• Подборка трёх репозиториев, которые помогут писать ванильный JavaScript без библиотек: jQuery, jQuery плагины, undescore/lodash
• Почему все постоянно говорят про изоморфный JavaSript и почему это важно
• Видео курс по функциональному программированию в JavaScript
• Аналоговые часы на HTML5 c логикой на JavaScript
• JavaScript — странный… и прекрасный 5 видео о том, почему вы полюбите JavaScript
• 5 малоизвестных фич для работы с объектами
• Хорошие JavaScript привычки В видео рассмотрены распространённые ошибки, которые допускаются при использовании языковых конструкций JavaScript. В примерах показаны best practices, использующиеся при программировании на JavaScript
• Структуры данных в JavaScript — цикл статей, посвященный организации данных. В большей степень статьи рассказывают не о самих структурах, а о способах их организации для правильного и удобного использования.
• 10 советов по использованию JavaScript без jQuery: ожидание готовности документа, выбор элементов, установка и удаление обработчиков событий, получение и установка содержимого элементов, переходы по DOM-дереву и несколько других
• Паттерны создания объектов в JavaScript: factory, constructor, prototype
• Курс по модульному JavaScript\
• JavaScript шаблонизация без библиотек и фреймворков
• JSTips — репозиторий, в котором ежедневно появляются полезные советы по нативному JavaScript, в том числе и ES6
• Подробный обзор паттерна “модуль”
• Самое простое и понятное видео, объясняющее принципы AJAX

ES6

• Блочные области видимости
• Операторы Spread и Reset
• Параметры по умолчанию
• Реструктуризующее присваивание
• Интерполяция
• Стрелочные функции
• Цикл for .. of
• Расширение литерала объектов
• Объектно ориентированный ES6 — глубокое погружение в классы
• Как учить ES6? Большая подборка полезных материалов для простого изучения нового стандарта.
• Асинхронный JavaScript с колбэками, промисами и генераторами
• Генераторы… они изменят всё
• Destructuring. Простое и весёлое объяснение
• ES6 cheatsheet — репозиторий, в котором собрано огромное количество подсказок и сниппетов на ES6
• Awesome promises — репозиторий, в котором собрано всё, что вы захотите знать про промисы. Материалы разделены по уровню вашей подготовки: для новичков и тех, кто уже немного освоился.

React

• 5 шагов к успешному изучению React
• React — лучшие практики в 2016 году
• Создание модульных адаптивных компонентов с помощью React Container Query
• Введение в React для тех, кто знает jQuery
• Создание чата с помощью React и WebRTC
• Убедительные причины начать использовать React
• Интеграция библиотеки D3 в приложение на React
• Интеграция React c Gulp: конвертирование jsx в js, линтинг с помощью ESLint и автоматическая компиляция jsx при сохранении файлов
• React для глупых людей (нас вычислили)
• 5 практических примеров использования React: таймер, навигация, подгрузка изображений с помощью AJAX, мгновенный поиск и форма заказа. Отлично подойдет для изучения React на примерах
• Создание галереи изображений с помощью React
• OverReact — инструмент для создания wireframe’ов компонента для React. Компонент экспортируется и у вас есть готовые файлы для самого компонента, сервера, Webpack/Gulp/Grunt. Поддерживается ES6 формат.
• Awesome React — гигантский, постоянно пополняющийся список статей, туториалов, интсрументов, компонентов и вообще всего, что связано с React.

Angular 2

• Лучшие ресурсы для изучения второй версии Angular с нуля
• Angular 2 fundamentals — серия скринкастов, посвященных второй версии AngularJS
• Angular 2 vs React: будет много крови
• Быстрый старт за 5 минут с Angular 2
• Видео курс Angular 2 Getting Started

Инструменты

• Основы Gulp.js. Рассматриваются все базовые вещи, которые должен уметь делать любой фронтенд разработчик: конкатенация и минифицирование css и js файлов, компилирование sass, использование BrowserSync, Live Reload и многое другое
• WPGulp — стартовый проект для тем на Wordpress. Содержит всё, что вы только захотите получить от Gulp — компилирование Sass, конкатенация и сжатие CSS и JavaScript файлов и библиотек, source maps, autoprefixer, BrowserSync и оптимизация изображений
• CMS.js — генератор статических сайтов написанный на JavaScript.
• Nativefier — утилита для конвертирования любого сайта в десктопное приложение.
• 19 советов по повседневной работе с Git
• Kickup — стартовый набор для современного веб-приложения. Gulp, BrowserSync, Autoprefixer, Sass, Browserify, Babel, ESLint — всё уже настроено за вас.
• Введение в Browserify — инструмент, позволяющий использовать require(‘ваш-модуль’) в клиентском JavaScript.
• 40 самых полезных npm модулей
• Самое простое и понятное объяснение принципов работы с Require.js
• BrowserSync за 7 минут
• Пакуем как боги — введение в Webpack на русском от frontender.info
• Font Face Ninja — расширение для Chrome и Safari, позволяющее узнать, какие шрифты используются на странице

Разное

• The elements of HTML — занятный сайт, на котором собраны все HTML теги. В таблице показывается их отмирание или, наоборот, добавление в стандарт
• Website Performance Tutorials — небольшой видео курс, в котором расскажут всё о производительности веб-страниц — как использовать google pagespeed, chrome dev tools, оптимизировать изображения и делать меньше запросов к серверу.
• Небольшой видео курс на русском языке про маленькую, но очень функциональную библиотеку Riot
• 20 лучших jQuery плагинов для создания анимации элементов сайта при прокрутке страницы
• Введение в Undescore/Lodash
• LightGallery — самый крутой jQuery плагин для создания лайтбоксов
• Создание клона твиттера на node.js за 15 минут
• Основы разработки продвинутых игр с HTML5
• 18 неожиданностей при чтении исходного кода jQuery
• Создание контактной формы с помощью PHP, AJAX и Bootstrap
• 30 самых необходимых регулярных выражений для веб-разработчика
• FullPage — библиотека для реализации посекционного скрола старницы.
• Подробный разбор того, как работает jQuery
• StickyStack — jQuery плагин для создания эффекта перекрытия при скролле
• Learn All The Nodes — серия скринкастов для изучения node.js с нуля
• Jade за одно видео
• Создание игры на HTML5 за 5 минут
• RegexOne — сайт для изучения регулярных выражений. Всего на сайте 25 уроков, прохождение которых позволит вам написать регулярное выражение практически для любой проверки. После каждого урока предлагается решить интерактивный пример.

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

• Как сделать так, чтобы пользователи наслаждались загрузкой сайта
• Урок по созданию постера в стиле омерзительной восьмёрки
• 3 совета о том, как создавать хорошие wirefram’ы
• Как НЕ надо разрабатывать логотипы
• Что нужно изучить, чтобы стать проектировщиком интерфейсов?
• Call To Idea — сайт, на котором собраны самые интересные UI элементы и UX идеи
• Как создать сильное портфолио
• 10 UX секретов, которые я украл у людей, которые умнее меня
• Пошаговый курс по созданию продающего Landing Page c нуля
• Coverr — сайт с подборкой бесплатных видео, которые можно использовать в качестве фона на сайте
• Как сделать свой первый набор векторных иконок
• Урок по рисованию хипстерских персонажей в иллюстраторе
• Несколько простых способов улучшить ваши дизайнерские навыки
• Преимущества и недостатки меню “гамбургера”
• Подборка ссылок на материалы, развивающие умение писать хорошие тексты
• Подробный разбор процесса создания дествительно хорошего лэндинга
• GetCover — онлайн-сервис для вставки изображений в мокапы.
• Собеседование на UX дизайнера: решение тестового задания