Elevator Saga

Никогда не задумывались по какому алгоритму работает лифт в вашем подъезде? В игре Elevator Saga вы сами можете написать такой алгоритм.

0️⃣ Изучите API лифта
1️⃣ Напишите программу на JavaScript
2️⃣ Возите людей по этажам
3️⃣ Выполняйте челленджи
4️⃣ Чувствуйте себя крутым инженером

Играть: https://prglb.ru/2q5eo

#games #javascript

Стилизуем кнопки правильно

Кнопки есть практически в любом приложении. В их роли могут выступать самые разные элементы — собственно кнопки, ссылки и даже простые спаны. В любом случае важно правильно их оформить. В этом руководстве мы займемся созданием CSS-компонента кнопки.

Вы узнаете:

👉 Как правильно сбросить стили элемента button
👉 Как написать класс, который одинаково хорошо будет смотреться и на кнопке, и на ссылке
👉 Как грамотно стилизовать различные состояния кнопки

Читать: https://prglb.ru/50xlc

#css #interface

Дом света (Lighthouse)

Доклад Сергея Попова (HTML Academy) на Я❤️Frontend

Доступность, валидность, базовые принципы оптимизации — это чеклист, без которого нельзя запускать ни один сайт. Раньше приходилось собирать информацию по крупицам, использовать сложные решения для тестирования. А сейчас всё это собрано в одном инструменте Lighthouse, который встроен непосредственно в браузер! Как после этого вообще можно совершать ошибки? Мы либо не умеем использовать инструмент, либо не хотим его использовать. Этот доклад для первых.

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

#performance #seo #tools #video

SVG Filter Effects

Серия статей, посвященных использованию SVG-фильтров: от общего описания до конкретных примеров.

👉 SVG Filters 101
Что представляют из себя SVG-фильтры и как ими пользоваться.

👉 Outline Text with feMorphology
Морфинг объектов с примитивом feMorphology.

👉 Poster Image Effect with feComponentTransfer
👉 Duotone Images with feComponentTransfer
Контроль над цветовыми каналами с примитивом feComponentTransfer.

👉 Conforming Text to Surface Texture with feDisplacementMap
Смещение контента с примитивом feDisplacementMap.

👉 Creating Texture with feTurbulence
Генерация шума Перлина (облака, дым, мрамор) с примитивом feTurbulence.

👉 Moving Forward
Полезные ресурсы и примеры использования SVG-фильтров

#svg

Разрушаем миф: React и доступность

Есть мнение, что React не позволяет создавать по-настоящему доступные веб-страницы.

☹️ не меняется title документа при переходе на другой роут
☹️ дополнительные обертки нарушают семантическую структуру
☹️ затруднено управление с клавиатуры

На самом деле это не так. Проблема заключается только в недостаточном знании особенностей React и его инфраструктуры.

В статье - несколько несложных и достаточно очевидных советов по сохранению доступности React-проектов.

Читать: https://www.deque.com/blog/debunking-the-myth-accessibility-and-react/

#frameworks #react #accessibility

Введение в тестирование фронтенда

Общее введение в тестирование. Разбирается, что вообще можно тестировать и какие инструменты для этого существуют.

👉 линтинг js и css: ESLint, Stylelint
👉 доступность: pa11y
👉 визуальное регрессионное тестирование: BackstopJS
👉 сквозное тестирование (end-to-end): Cypress

Для каждого инструмента есть небольшой пример настройки.

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

#testing

Алгоритмы и структуры данных на JavaScript

Репозиторий с реализацией большинства популярных структур и алгоритмов на JavaScript: от связного списка до графа и от пузырьковой сортировки до пермутаций и комбинаций.

Отличный справочник на любой случай.

Изучать: https://prglb.ru/3f6jn

#algorithms

Порог входа в профессию для JavaScript-разработчика минимален. При этом фронтенд-разработчик является одной из самых востребованных позиций и интерес к ней только растет.

В SkillFactory стартует целая специализация «Фронтенд-разработчик», где вы изучите HTML, CSS и JS с основ и до реальных рабочих задач.
Каждый новый инструмент вы закрепите проектом на практике. Всего реализуете 12 проектов для портфолио.
Здесь же вы уже сможете применять свои знания HTML, CSS в реальных проектах, освоите JS и фреймворки, научитесь работать с бэкендом. В рамках курса вы соберете по частям полноценный сквозной проект.

Плюс в SkillFactory разработали систему персонального менторства с созвонами и консультациями. По каждому инструменты в чате слака предусмотрена поддержка, которая поможет разобраться с техническими трудностями.

Узнайте больше о возможностях: https://clc.to/r5LIVA

​7 новых и интересных функций TypeScript

Обзор нововведений версий 3.5, 3.6 и 3.7, на которые вы обязательно должны обратить внимание:

👉 Optional Chaining
👉 Nullish Coalescing
👉 Алиасы рекурсивных типов
👉 Assert Signatures
👉 Улучшенный фидбек для ошибочного применения промисов
👉 Идентификаторы Unicode
👉 Инкрементальная компиляция

Читать: https://prglb.ru/4z8hr

#typescript

Snowpack

Инструмент для супербыстрой сборки веб-приложений:

👍 Практически не требует конфигурации
👍 Моментально обновляет проект в браузере
👍 Поддерживает Babel и Typescript из коробки

☹️ Работает только с JS, не поддерживает импорт CSS или изображений

Попробовать: https://www.snowpack.dev/

#tools

​​Нет времени объяснять! Пишем таймер обратного отсчёта на чистом CSS

Многие вещи в принципе невозможно сделать на CSS. Ещё больше вещей делать на CSS нерационально. Мы занимаемся этим только из болезненного любопытства и стремления познать все скрытые возможности инструмента.

https://proglib.io/sh/5ERUnBSxoW

​Object.assign() против spread-оператора

Разбираемся, если ли разница между применением метода Object.assing и деструктуризацией объекта с помощью spread-оператора.

Спойлер: есть небольшая разница. Попробуйте угадать, что произойдет при выполнении этого фрагмента кода:

Object.defineProperty(Object.prototype, 'myProp', {
  set: () => console.log('Setter called');
});

const obj = { myProp: 42 };

Object.assign({}, obj); 

const newObj = { ..obj }; 

Подробнее: https://prglb.ru/77ie

#javascript #core

Разыскивается frontend-разработчик для доработки нашего движка proglib.io

Подробности тють: https://teletype.in/@theasder1337/nZNeuvWe

​JavaScript-однострочники

Несколько полезных приемов на JS, укладывающихся в одну строчку кода:

Удаление дубликатов из массива

const deDupe = [...new Set(myArray)];

Изменение значений двух переменных

[varA, varB] = [varB, varA];

Установка свойства по условию

const myObject = { ...myProperty && { propName: myProperty } };

Форматирование JSON-строки

const formatted = JSON.stringify(myObj, null, 2);

Создание массива, заполненного числами

const numArray = Array.from(new Array(52), (x, i) => i);

Перемешивание массива

myArray.sort(() => { return Math.random() - 0.5});

Глубокое клонирование

const myClone = JSON.parse(JSON.stringify(originalObject));

Источник: https://prglb.ru/5ximt

#code #snippets #javascript

Полная настройка Webpack 4

7 полезных видео уроков:

🖍 Настройка Webpack 4 шаблона. Установка Babel 7 и webpack dev server. Настройка js на примере vue
🖍 Полная настройка Webpack 4 препроцессоров. Sass, настройка post css плагинов, минификация стилей.
🖍 Самое важное по WEBPACK 4 - обработка картинок и html. Webpack-merge. Обработка статических файлов
🖍 Подключение VUE и VUEX, забываем jQuery. Использование vuejs в верстке.
🖍 Ускоряем загрузку JS в 3-4 раза. Code Splitting и vendors.js
🖍 Лучший способ подключения и обработки шрифтов.
🖍 Полная настройка шаблонизатора pug. Использование в верстке и не только

Смотреть и настраивать: https://www.youtube.com/playlist?list=PLkCrmfIT6LBQWN02hNj6r1daz7965GxsV

#webpack #tools #video

Чему меня научил год изучения и преподавания доступности

Сара Суайдан очень убедительно объясняет, зачем нужна доступность в вебе и что мешает делать по-настоящему доступные интерфейсы.

❗️Семантика - это важно!
❕Там, где не хватает семантики, помогут ARIA-атрибуты
❗️Не бойтесь использовать JavaScript
❕Прогрессивное улучшение - основа разработки
❗️Реализация не должна зависеть от дизайна

Читать: https://prglb.ru/464v0

#accessibility

Dependency Injection и Инверсия зависимостей

Плейлист (5 видео) от Ильи Климова (JavaScript ninja), посвященный паттернам Внедрение и инверсия зависимостей.

🤔 Зачем это вообще нужно
🤔 Зачем это нужно в JavaScript
🤔 Почему недостаточно обычных импортов
🤔 Как работает InversifyJS

Смотреть: https://www.youtube.com/playlist?list=PLvTBThJr861xKTf1x6P49MwN6yoN4v69k

#video #javascript #bestpractices

По каким материалам вы предпочитаете изучать фронтенд-разработку?
anonymous poll

Статьи на русском языке – 405
👍👍👍👍👍👍👍 53%

Статьи на английском языке – 194
👍👍👍 25%

Видео на русском языке – 112
👍👍 15%

Видео на английском языке – 56
👍 7%

👥 767 people voted so far.

​Веб в 2020 году: расширяемость и совместимость

В 2020 году основными трендами сообщества веб-разработчиков вполне предсказуемо станут расширяемость и совместимость.

* CSS Houdini
* Вариативные шрифты
* Кастомные свойства
* Веб-компоненты
* Логические свойства
* Учет пользовательских предпочтений
и еще много интересного

Читать: https://prglb.ru/156nl

#css