Credit Card Form – Vue.js

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

#codepen
@frontend_html_css_js

Вышел новый выпуск подкаста "Фронтенд юность"

Поболтали о том:
- как работается в Microsoft
- Почему нет в PR’a нет дерева файлов
- Что такое code scanning в github
- Как больше зарабатывать
- Дискриминация
- Девушки в программировании
https://m.soundcloud.com/frontend_u/e205

#podcast
@frontend_html_css_js

Generative MacOS Big Sur Waves 🌊

Генератор картинок в стиле обоев MacOS Big Sur. Почти всегда выдаёт рандомные изображения, так что можно использовать в качестве генератора фона, плейсхолдеров, обложек. Реализовано с помощью библиотеки GSAP.

#codepen
@frontend_html_css_js

Привет!

Рады видеть тебя на канале 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