Привет!

Рады видеть тебя на канале WebStream.
Мы три web-разработчика – у нас более 15 лет опыта на троих, и мы работали как в стартапах, так и в крупных международных компаниях. Поэтому мы разбираемся не только в том, как создать форму регистрации, но и можем поговорить про красивый и качественный код.

У нас ты узнаешь:
· Как решать нетривиальные задачи – #советы
· Что реализуют продвинутые разработчики – #codepen
· Что происходит во Frontend-тусовке - #новости #podcast
· А также найдешь много полезных материалов – #meme #статья #qa

Думаешь, много теории? Будет и практика – также мы выкладываем задачки #задача, чтобы ты смог сразу отработать новые знания.

Подписывайся, чтобы весь опыт нашей команды был у тебя под рукой.

Front-End QA

Что если тебе нужно оценить качество своего фронта? Или ты QA тестер без опыта работы фронтенд-девелопером?

В статье ниже описываются критерии качественного фронтенда.

#qa #статья
@frontend_html_css_js

Авто-отписка от Observable в Angular

У нас в проекте большое количество подписок на Observable и имеются места, где может произойти потенциальная утечка памяти. Было принято решение использовать хранение объектов типа Subscription и отписываться от них в хуке ngOnDestroy. Такой вариант порождает большое количество бойлерплейт-кода и мы начали думать об автоматизации этого флоу. Сошлись на том, что лучше всего использовать TypeScript Decorators(так как в Angular многое на них построено).

Пример использования:

@Component(…)
export class MyComponent implements AutoUnsubscribe {
@AutoSubscribe()
public myMethod(): Observable<any> {…}

public ngOnDestroy(): void {}
}

Полный процесс построения решения можно найти в статье.

#советы
@frontend_html_css_js

Перевод строки в число

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

Пример:
"one" => 1
"twenty" => 20
"two hundred forty-six" => 246
"seven hundred eighty-three thousand nine hundred and nineteen" => 783919

Минимальное число - 0
Максимальное - миллион.

#codewars #задача
@frontend_html_css_js

Новая библиотека для анимаций – Motion one

Новая библиотека для анимации, основанная на Web Animations API для меньшего размера файла и максимальной производительности. Создатели обещают высокую производительность внутри 3.1КБ.

Отлично подойдёт для сложных анимаций в дизайнерских страничках.

Также создатели библиотеки написали целый раздел о тонкостях рендеринга веб-страницы, и объяснили когда и какие свойства анимировать.

#новости
@frontend_html_css_js

Apple TV Word Rotation

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

#codepen
@frontend_html_css_js

вот это хорошо :)

Remote debug Android devices

Иногда при адаптации сайта к смартфонам эмулятора недостаточно: нельзя дебажить, нет возможности быстро посмотреть что происходит c запросами и cookies.
Для андроид смартфонов есть решение: Remote debugging.

Нужен лишь андроид телефон, компьютер и usb-кабель.
Подробнее на сайте с документацией.

#статья
@frontend_html_css_js

Typescript Decorators in Examples

Отличная статья на тему декораторов в TypeScript. Подробно расписывается создание декораторов для функций, классов, свойств и методов. Также бонусом идёт работа с reflect-metadata. Рекомендую к прочтению.

Также готовлю статью с практическим примененем декораторов в кастомном state-менеджере(опрос выше запустил не просто так🙂).

#статья
@frontend_html_css_js

Pure CSS “Eye”

Эффект фокусировки глаза и сам кибернетический глаз на чистом CSS + SVG. Можно использовать как лоадер в тематическом сайте.

#codepen
@frontend_html_css_js

#шок дня

Просто чтоб вы понимали: jQuery достиг своего пика на самых популярных ресурсах только в 2020 году. И пик этот — 80% из 100 000 сайтов.

Всем бы так “умирать”.

Ну и на самом деле, конечно же, он не умирает. Просто посмотрите статистику для 10 000 000 веб-сайтов: https://w3techs.com/technologies/history_overview/javascript_library/all

#jquery #js

Онлайн-собеседование Junior верстальщика

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

#podcast
@frontend_html_css_js

Impossible Checkbox

Checkbox, который невозможно включить, т.к. его постоянно отключает злой медведь. Реализован с помощью React и GSAP.js.

#checkbox #react #gsap

Angular – Custom RxJS State Manager

Написал статью на тему кастомного стейт менеджера в Angular с использованием RxJS.
В проекте появилась практическая нужда в реактивных моделях, а использовать NGRX или другой стейт-менеджер было дорого: много бойлерплейт кода, много траты времени. Было решено написать свой простой реактивный менеджер.

Подробнее по ссылке.

#статья
@frontend_html_css_js

Folding Ticket Detail

Макет приложения продажи авиабилетов. Особенность в том, что стиль и анимация раскрытия билетов сделаны в виде сгибаемого бумажного билета. Идею можно легко адаптировать под другие бумажные билеты, например кинотеатра.

#codepen
@frontend_html_css_js

Как тестировать фронтенд?

Выше была статья на англ. языке о тестировании проектов с фронтендом.
Не всегда есть время переводить и читать, поэтому лучше повторить на русском.
По ссылке ниже статья на vc.ru из раздела "Разработка" о том, как свои продукты тестируют в компании, занимающейся дизайном и разработкой технически сложных веб-проектов.

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

#qa #статья
@frontend_html_css_js

3 идеи, которые помогут Вам прокачать ваш доход

Очень познавательная статья про то, как риски влияют на будущий успех. Автор рассматривает подход “Anti-Fragile” и рассказывает как это работает. Рекомендуется к прочтению, если вы боитесь начать проект или низко себя оцениваете.

#статья
@frontend_html_css_js

#122 in 2021 / JavaScript Canvas

Эффект “неработающего телевизора” на JS + чистый canvas. Я бы использовал эту анимацию как фон header’а landing-страницы. Так же можно использовать как заглушку, во время загрузки видео.

#codepen
@frontend_html_css_js

О кроссбраузерности

Когда ты объясняешь заказчику о совместимости сайта с разными браузерами - бесполезно говорить о движках, фреймворках и других технических деталях.
Проще показать работы Дианы Смит - художницы-программиста, создающей портреты при помощи кодов CSS и HTML.

@frontend_html_css_js