Знакомство с Redux

Отличный плейлист из 9 коротеньких видео, который полностью объяснит вам всю суть Redux.

👉 Вы самостоятельно создадите хранилище и изолированное от внешних воздействий состояние приложения.

👉 Научитесь изменять состояние с помощью действий разных типов. Поймете, зачем нужны action creators (динамически создавать параметризованные действия).

👉 Напишете редьюсер - единственный узел системы, который будет модифицировать состояние.

👉 Даже установите первничную связку вашего личного redux с приложением на React.

Когда сам пишешь что-то с нуля, разобраться гораздо проще - и запоминается намного лучше.

Смотреть: https://prglb.ru/5k126

#video #tools #redux

Что объединяет фотохостинг Pinterest и приложение для планирования Trello? Оба они написаны на JavaScript.
Если английский — это основной язык современного мира, то JS — это основной язык современного интернета, на нем написано большинство сайтов, на которые вы заходите каждый день.

Для тех, кто хочет погрузиться в разработку визуальной части веб-приложений, в SkillFactory стартует курс «Frontend-разработчик». За 6 месяцев обучения вы освоите HTML, CSS, кроссбраузерную и адаптивную верстку, JavaScript и React и добавите в своё портфолио 6 проектов + дополнительный модуль про soft skills поможет подготовиться к собеседованиям.

Узнайте подробнее о программе курса: https://clc.to/EiTo5Q

Hammer.js для обработки жестов

Крошечная dependency-free библиотека, которая умеет распознавать жесты пользователя (тапы, свайпы, повороты и т. д.)

Можно достаточно тонко настраивать имеющиеся события и даже создавать на их основе собственные.

Взять себе: https://prglb.ru/6yrs

#tools #library

Доступность сайта: 6 быстрых проверок

Автоматизированное тестирование доступности (Lighthouse) - отличная вещь, но не проверяет все, что должно быть проверено. Кое-что придется доделывать руками.

Вот вам маленький список обязательных тестов:

‼️ Наличие альтернативных описаний у изображений и их соответствие картинке
‼️ Адекватное и понятное отображение страницы БЕЗ стилей
‼️ Валидность HTML-кода
‼️ Логичная структура документа (уровни заголовков, семантические элементы)
‼️ Проверка в монохромном режиме - цвет не должен быть единственным носителем важной информации
‼️ Полная доступность с клавиатуры

Источник: https://prglb.ru/11vnl

#interface #accessibility

Большое руководство по Svelte

Svelte - фреймворк с уникальным подходом к сборке веб-приложений. Даже если вы никогда про него не слышали, руководство вам все подробно расскажет.

Читать: https://prglb.ru/2t9a1

#tools #frameworks #svelte

Современное тестирование фронтенда с Cypress

Cypress - фреймворк для автоматизации тестирования в браузере. С его помощью можно проводить сложные интеграционные и сквозные тесты по сценарию.

Понятная документация: https://prglb.ru/1bf4f

Читать статью: https://prglb.ru/17wh5

#tools #testing

Помогаем строить карьеры в IT. Наша цель - твое трудоустройство Front-End разработчиком через 7 месяцев. Это единственная программа в РФ, где выпускники платят за подготовку только после трудоустройства. Если не найдешь работу, то ты ничего не должен. Необходимо пройти отбор.

Получить тестовое задание можно тут 🙋‍♂️👉 https://clck.ru/MQ5i5

Мы будем вести тебя до первого рабочего дня и даже больше. Мы оказываем карьерную поддержку после трудоустройства еще 2 года.
Каждый наш выпускник получает около 5 предложений о работе. А средняя зарплата уже в первый год после выпуска, примерно, 120 000 рублей.
За свою работу мы попросим 17% процентов от зарплаты разработчика. У нас нет скрытых условий или кредитов. Мы научим тебя Веб-разработке и ты заплатишь только за результат.
От тебя мы ждем возможность уделять учебе минимум 25 часов в неделю и проживание или готовность к переезду в Москву для трудоустройства.

TDD с React, Jest и Enzyme

Полное руководство по модульному тестированию React-приложения.

1 часть: https://prglb.ru/1m2wt
2 часть: https://prglb.ru/338uu

#tools #testing

Когда использовать новое Composition API во Vue (а когда нет)

Новое Composition API вызвало немало споров, когда оно было впервые анонсировано командой Vue. Но теперь, когда пыль осела и у нас появилась возможность его попробовать, большинство из нас может увидеть, что у нее огромный потенциал.

Подробнее: https://prglb.ru/46p2a

#tools #frameworks #vue

​Скринкаст по Pug

Введение в шаблонизатор pug

Смотреть: https://prglb.ru/1une

#video #html #tools

awesome-react

Огромная коллекция ссылок на первоклассные материалы по React-экосистеме. Туториалы, инструменты, обсуждения - все, что вам может понадобиться.

Смотреть: https://prglb.ru/18zv

#react #digest

​Список вопросов для JavaScript-интервью

Огромный список вопросов с фильтрами по уровню (джун, миддл, сеньор) и типу (теоретические, практические)

Изучить: https://prglb.ru/2yuyp

#javascript

Сюрреализм на JavaScript

Книга о разработке игр и приложений на JavaScript. Уже довольно старенькая (2014 год), но основные концепции и идеи никуда не деваются 😉

Читать онлайн: https://www.bakhirev.biz/book/

#books #javascript #gamedev

Адаптивная комикс-панель с CSS Clip-Path

Верстаем симпатичный блок с нестандартным дизайном с помощью SVG и CSS Clip-Path.

Смотреть: https://prglb.ru/wm0e

#css #svg #snippets

Front-end developer

Требования:
— React + Redux; JS
— СSS3, HTML5, опыт responsive/adaptive вёрстки
— Умение работать с SASS/SCSS/Styled Components
— ES5/6, опыт работы с Webpack и Babel
— Знание английского на уровне, как минимум, чтения документации

Условия:
— Белая зп, официальное трудоустройство, больничные, отпуска, ДМС (со стоматологией)
— Оплата 50% стоимости посещений профессиональных форумов
— Регулярная обратная связь и аттестации
— Геймификация процессов и несколько раз в год релокейты поработать в другую страну

Подробнее о вакансии

Маленькие хитрости кастомных свойств (CSS-переменных)

👉 Дефолтные значения
👉 Контекст переменной
👉 Обход специфичности селекторов

Читать: https://prglb.ru/bqdv

#css

Придумай концепцию любого IT-решения для сельского хозяйства и получи шанс выиграть 50 000 рублей. Тебе не обязательно быть программистом: предложить свою идею могут маркетологи, дизайнеры, продакт-менеджеры или команды студентов. Прием заявок — до 24 марта на сайте:
https://prglb.ru/i7jn

Генеральный спонсор — Россельхозбанк.

Очень приятная анимация формы для ввода данных карты

Смотреть: https://prglb.ru/1z3gu

#code #snippets #interface #animation

Диагональные лейауты в 2020

Диагональные линии делают макеты динамичными и нестандартными. Но чтобы реализовать их в верстке, приходится прибегать к массе ухищрений.

Существует как минимум три подхода к заострению углов:

👉 SVG
👉 CSS Clip Path
👉 CSS Transforms

Статья подробно расскажет именно о последнем.

Читать: https://www.cat-in-web.ru/diagonal-layouts/
А здесь краткий конспект: https://prglb.ru/2th1d

#css #layout

​Задачи верстки, которые можно решить псевдоэлементами

Псевдоэлементы - очень классная штука, которая позволяет делать сложные вещи без добавления лишнего HTML-кода.

➡️ Проверьте, используете ли вы их на полную мощность

✔️ Эффекты при наведении на родительский элемент
(Включая классный эффект со ссылками)
✔️ Увеличение зоны взаимодействия с элементом интерфейса
✔️ Эффекты наложения слоев
✔️ Сложные тени
✔️ Иконки для ссылок на файлы с разным расширением
✔️ Разделитель в тексте

Проверить: https://prglb.ru/5rnfn

#css

Что такое Генераторы в JavaScript

Теоретическое введение в функции, выполнение которых можно прервать.

Читать: https://prglb.ru/2xibi

#core