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

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

Пример:
"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

Почему я выбрал Vue.js для фриланса

Автор рассказывает о своём опыте использования frontend-фреймворков во фрилансе, а также объясняет, почему отдал предпочтение Vue.js.

От себя добавлю, что тоже имею положительный опыт использования Vue.js(в частности Nuxt.js) во фрилансе: всё работает из коробки без лишних настроек.

#статья
@frontend_html_css_js

Всем привет!

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

Послушаем вас, поможем советом.

Залетайте)

👉🏻https://t.me/amaz_front_dev_chat

Tunnel travel using CSS perspective

Довольно интересный эффект, как из одной статичной картинки со звёздами, автор сделал пространственный туннель как в фильмах про космос.

#codepen
@frontend_html_css_js