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

В гостях Кирилл Мокевнин (twitter.com/mokevnin) из школы обучения IT hexlet.io
Обсуждают проблемы обучения в IT сфере
Видео-версия: www.youtube.com/watch?v=oylJcKEuNRw

#podcast
@frontend_html_css_js

Мысли и методы

Еще один подскаст Рахима Давлеткалиева про мысли о программировании, математике, вселенной и вычислимости.
https://podcasts.google.com/feed/aHR0cHM6Ly9wY3IuYXBwbGUuY29tL2lkMTE2MjY3MzA3MAe

#podcast
@frontend_html_css_js

Глобальный поиск в Chrome

Иногда нужно найти кусок кода но не понятно в каком из файлов он находится. В Chrome есть возможность глобального поиска по всем загруженным файлам.
- Открываем Dev Tools (Option + ⌘ + J(на macOS), или Shift + CTRL + J(on Windows/Linux));
- В левом верхнем углу нажимает кнопку в виде трёх точек и выбираем Search;
- Снизу откроется панель с полем ввода;
- Profit!

#chrome #советы
@frontend_html_css_js

Voyager Slider

Full-screen слайдер с плавной 3D анимацией. Реализовано с помощью библиотеки GSAP. Отлично подойдёт для landing-page.

https://codepen.io/dev_loop/pen/MWKbJmO

#codepen
@frontend_html_css_js

Совет по HTML💡

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

#советы
@frontend_html_css_js

Найди пропущенную букву

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

Вы всегда будете получать валидный массив. И всегда будет отсутствовать ровно одна буква. Длина массива всегда будет не меньше 2. В массиве все буквы только в одном регистре.

Пример:

["a","b","c","d","f"] -> "e"
["O","Q","R","S"] -> "P"

#codewars #задача
@frontend_html_css_js

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