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

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

👉 линтинг 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

ПЕРВЫЙ ОНЛАЙН-КУРС В РУНЕТЕ, по Flutter в мобильной разработке.

Перспективной технологии, которую уже используют Google, Alibaba, eBay, BMW и другие мировые бизнес-империи!🔥

Курс предлагает изучение мультиплатформенной разработки на языке Dart. Вы научитесь создавать эффектный Frontend и максимально отзывчивый UI с потрясающей анимацией и стабильными 60 FPS.

• Длительность курса 3,5 месяца
• Более 40 часов лекций и 100 часов практики
• Code Review вашего проекта
• Cистема автоматической проверки заданий

❗️Результатом обучения станет реально выполненный проект – созданное вами мобильное приложение на Flutter, и сертификат, подтверждающий полученные навыки.
⠀
Узнай больше о новом курсе по Flutter-разработке от Skill-Branch.🚀
Перейти на сайт
===========================
🗣Приобщайся к сообществу в чате, посвящённом Flutter-разработке
👉🏼 @Flutter_Mobile_Dev

Внутренние размеры в CSS

Что такое min-content, max-content, fit-content и как ими пользоваться?

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

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

#css

Все, что вам нужно для начала работы с VueJS

Небольшое вводное руководство, в котором вы найдете целых 4! способа создания первого приложения на Vue. Бонусом - много полезных ссылок и советов.

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

#frameworks #vue

Небезопасные промисы

Обычные промисы могут быть небезопасны для вашего продакшн-кода, к тому же их полноценная обработка выглядит довольно громоздкой. Нужно следить за ошибками запроса, отображать загрузку в интерфейсе, да еще и отменить их толком нельзя.

Подробнее о проблеме и ее решении: https://prglb.ru/2z3uz

#javascript #advanced

​Подборка библиотек для создания анимаций и эффектов

Выбирайте 🤗

CSS

Простые эффекты:

👉 CSS WAND
Очень маленькая copy-past библиотечка с симпатичными эффектами наведения и загрузки

👉 CSShake
Забавные shake-эффекты

👉 Three Dots
Классические анимации загрузки с тремя точками

Коллекции популярных анимаций появления-исчезновения (bounce, slide и т.д.):

👉 Vov.css
👉 Tuesday
👉 Animation library
👉 Animate.css (очень большой набор эффектов)
👉 Magic (много нестандартных анимаций)
👉 Woah.css (эксцентричные анимации)

JS

👉 Scene.js
Мощный инструмент с поддержкой CSS, JS и SVG-анимаций

👉 Micron.js
Контролируемые микроанимации

👉 Popmotion Pure
Анимации и эффекты на любой вкус, гибкая настройка

Графика:

👉 Granim.js
Красивые анимированные градиенты

👉 Curtains.js
Невероятные WebGL-эффекты для изображений и видео

Скролл-анимации:

👉 AOS
👉 Sal.js
👉 ScrollReveal

Анимация частиц:

👉 Particles.js

#tools #library #animation