Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Занимательное
•
Подкаст «Frontend Weekend» #38 – Владимир Гриненко про БЭМ и работу в Симферополе
•
Подкаст «Веб-стандарты», Выпуск №106: Возвращение из Америки, фронтенд и боль, цикличность в CSS, история флексов, PWA в Safari, как случился Edge.
•
Подкаст «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
•
Делаем разноцветные иконки с помощью SVG-символов и CSS-переменных
• Гриды 2 уровня не за горами!
• Новые спецификации CSS-селекторов
•
PostCSS?—?после Autoprefixer
•
Один сайт, много опций: использование вариативных шрифтов в вебе
•
Как воссоздать статью Medium с помощью CSS Grid
•
Как создать полностью отзывчивую навигационную панель с помощью Flexbox
•
Bulma: CSS фреймворк, на который вам следует обратить внимание в 2018
•
Как использовать вариативные шрифты в реальном мире
•
CSS Scroll Snap: что это такое и для чего нам это надо?
•
Дешевый параллакс, всего в ~6 строк кода
•
Boilerform — небольшой HTML/CSS бойлерплейт, облегчающий боль при работе с формами
•
Я ненавидел 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
•
Навыки, инструменты, требования — масштабное исследование HackerRank о рынке разработчиков 2018
• Обновление Google Speed Update не повлияет на индексацию
• Facebook запретила рекламу криптовалют и ICO
• Удаленная работа для программиста: результаты исследования от Stack Overflow
• Intel уступила Samsung звание крупнейшего производителя микрочипов
• Хронология: как развивалась биометрия
• Junior, Middle, Senior, Lead — в чем разница и куда дальше?
• Windows 10 Redstone 4 принесёт целый ворох новшеств
• Мнение: почему нам нужен Web 3.0 и каким он будет
?
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | Javascript | Занимательное
Медиа
•

•

•

•

•

•

•

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

•

• Фронтенд — это не больно!. Пособие для разработчиков и сочувствующих
• «О хороших вакансиях верстальщиков» — статья Игоря Адаменко, а также ответ на нее: «Мысли по мотивам хороших вакансий верстальщиков»
•

•

•

•

•


•


• Еженедельная подборка красивых эффектов на CSS/SVG/JS #68
- Безопасность:
•Рассказ о том, как не дать мне украсть номера кредиток и пароли у посетителей ваших сайтов
•Отслеживаем действия пользователя с помощью CSS
•Создаем CSS кейлоггер
•Темные паттерны использования HTML 5.2 <dialog> в 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
•

• Гриды 2 уровня не за горами!
• Новые спецификации CSS-селекторов
•

•

•

•

•

•

•

•

•

JavaScript
•

• React Native?—?от нуля до App Store
•

•

•

•

•

•

•

•

•

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 провайдеры: как встроить третьестороннюю библиотеку?
Занимательное
•

• Обновление Google Speed Update не повлияет на индексацию
• Facebook запретила рекламу криптовалют и ICO
• Удаленная работа для программиста: результаты исследования от Stack Overflow
• Intel уступила Samsung звание крупнейшего производителя микрочипов
• Хронология: как развивалась биометрия
• Junior, Middle, Senior, Lead — в чем разница и куда дальше?
• Windows 10 Redstone 4 принесёт целый ворох новшеств
• Мнение: почему нам нужен Web 3.0 и каким он будет
?
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
sutarmin
С юбилеем :) Большое спасибо за этот дайджест!
alexzfort Автор
Благодарю, спасибо что читаете :)