Дайджест свежих материалов из мира фронтенда за последнюю неделю №300 ( 29 января — 4 февраля 2018)05.02.2018 02:18

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

    Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Занимательное

Медиа

• Подкаст «Frontend Weekend» #38 — Владимир Гриненко про БЭМ и работу в Симферополе
• Подкаст «devschacht»: Ночной фронтенд #20 — Немного новостей и инверсия контроля
• Подкаст «Фронтенд Юность (18+)» #36 Жалкая попытка Webpack догнать Parcel
• Подкаст «Drinkcast», #24 — «Знай свой Джаваскрипт»
• «ALL YOUR HTML» #34: «GPU анимация 400к частиц»
• Итоги январского PiterJS №21: слайды, видео, комментарии

Веб-разработка

• Чеклист фронтенд-разработчика
• Как мы запустили offline-версию сайта RG.RU
• Фронтенд — это не больно!. Пособие для разработчиков и сочувствующих
• «О хороших вакансиях верстальщиков» — статья Игоря Адаменко, а также ответ на нее: «Мысли по мотивам хороших вакансий верстальщиков»
• 8 вещей, которые должен изучить разработчик фронтенда
• О повышающейся сложности фронтенда
• Автоматическое браузерное тестирование с помощью WebDriver API
• Руководство по API для кодеров
• Введение в прогрессивные веб-приложения (PWA)
• Прогрессивные веб-приложения — следующий шаг в разработке приложений для веба
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #68

• Безопасность:
  • Рассказ о том, как не дать мне украсть номера кредиток и пароли у посетителей ваших сайтов
  • Отслеживаем действия пользователя с помощью CSS
  • Создаем CSS кейлоггер
  • Темные паттерны использования HTML 5.2
  в Chrome для веселья и выгоды
  

• Производительность:
  • Как мы сделали загрузку наших страниц еще быстрее
  • Глубокое погружение в GTmetrix Speed Test Tool
  • Как использовать webpagetest.org для тестирования скорости загрузки страниц
  

• Инструменты:
  • Вашему вниманию — Webpack 4
  • webpack-demos — коллекция простых демок для Webpack
  • Localer — инструмент для автоматического определения недостающих I18n переводов
  

• Accessibility:
  • Телефонные номера и доступность
  • WCAG 2.1 изменил статус на Candidate Recommendation
  • Обновления Accessibility: что нового в WCAG 2.1
  

CSS

• Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных
• Let«s make multi-colored icons with SVG symbols and CSS variables
• Гриды 2 уровня не за горами!
• Новые спецификации CSS-селекторов
• PostCSS — после Autoprefixer
• Один файт, много опций: использование вариативных шрифтов в вебе
• Как воссоздать статью Medium с помощью CSS Grid
• Как создать полностью отзывчивую навигационную панель с помощью Flexbox
• Bulma: CSS фреймворк, на который вам следует обратить внимание в 2018
• Как использовать вариативные шрифты в реальном мире
• CSS Scroll Snap: что это такое и для чего нам это надо?
• Дешевый параллакс, всего в ~6 строк кода
• Boilerform — небольшой HTML/CSS бойлерплейт, облегчающий боль при работе с формами

JavaScript

• Я ненавидел Javascript. А теперь он мне нравится
• React Native — от нуля до App Store
• JS WTF с помощью математики
• Учебник по GraphQL: Почему мы нуждаемся в новом типе API (Часть 1), Эволюция API Design (Часть 2)
• Введение в GraphQL
• JavaScript: что нового в ECMAScript 2018 (ES2018)?
• Как работает JavaScript: создание блоков Web Workers + 5 примеров, как их использовать
• Отладка JavaScript с помощью дебаггера, о котором вы не знали, что он у вас уже есть
• Почему бы вам не использовать TypeScript?
• 25 дней с ReasonML
• EasyTimer.js — простая в использовании библиотека для работы с таймерами/хронометром/счетчиком, совместимая с AMD и NodeJS

• VueJS:
  • Почему 43% фронтенд-разработчиков хотят изучить Vue.js
  • Введение в Webpack без жаргона для пользователей VueJS
  • Эффективный анализ кода и форматрование (для Vue.js) с помощью ESLint и Prettier
  • 10 вещей, которые я люблю во Vue
  

• React:
  • Вникаем в механизмы Redux, делая своё хранилище (Store)
  • Руководство для новичков по React
  • Железобетонные основы по React.js: введение для новичков
  • Вложенные маршруты с помощью React Router v4
  • Создание слайдера изображений с помощью React, Superagent и Instagram API
  • Условный рендеринг в React с использованием тернаров и логических AND
  • Создание библиотеки SVG иконок для приложений на React
  • Быстрое руководство по Redux для новичков
  • ReasonReact: функциональное программирование для JavaScript разработчиков
  

• Angular:
  • Angular 5 — создание нового компонента
  • Angular провайдеры: как встроить третьестороннюю библиотеку?
  

Занимательное

• Навыки, инструменты, требования — масштабное исследование HackerRank о рынке разработчиков 2018
• Обновление Google Speed Update не повлияет на индексацию
• Facebook запретила рекламу криптовалют и ICO
• Удаленная работа для программиста: результаты исследования от Stack Overflow
• Intel уступила Samsung звание крупнейшего производителя микрочипов
• Хронология: как развивалась биометрия
• Junior, Middle, Senior, Lead — в чем разница и куда дальше?
• Windows 10 Redstone 4 принесёт целый ворох новшеств
• Мнение: почему нам нужен Web 3.0 и каким он будет


Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.

© Habrahabr.ru