Прототипно-ориентированный язык программирования
Поделюсь с вами успешным опытом разработки рендера в браузере большой, постоянно расширяющейся анимационной сцены, состоящей из множества мелких двигающихся объектов, зацикленных в 5 секунд.
Привет, Хабр! Меня зовут Алексей Охрименко, я TechLead вертикали Ai/Voices онлайн-кинотеатра KION в МТС Digital, автор русскоязычной документации по Angular и популярного плагина для рефакторинга Angular-компонентов.
Мой коллега Алексей Мельников уже рассказывал про фичу пропуска титров в KION, про ее бизнес- и tech-составляющие. Я же остановлюсь на том, какие у нас проблемы возникли в процессе реализации фичи и как мы их решили с помощью Computed Properties в Angular*. Добро пожаловать под кат!
Привет, друзья!
Представляю вашем вниманию адаптированный и дополненный перевод этой замечательной статьи.
AbortController и AbortSignal предоставляют возможность применения некоторых интересных паттернов, рассмотрению которых и посвящена данная статья.
Однако давайте начнем с типичного примера использования AbortController.
SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги <img>, <object> и даже <iframe>. Можно подключать SVG через data-url, css-backgrounds, css-filters и еще множеством способов. Но чтобы полноценно использовать всю суперсилу SVG, необходимо вставлять SVG-изображения непосредственно в html-разметку. Хотя на самом деле есть еще один способ. И он удобный.
Для начала, давайте вспомним, а как вообще ловят ошибки в js, будь то браузер или сервер. В js есть конструкция try...catch. Это общепринятая конструкция и в большинстве языков она есть. Однако, тут есть проблема, и как окажется дальше - не единственная...
Ничто не бодрит с утра лучше, чем большая техническая конференция по JavaScript. Восьмого июня в 11:40 стартовала онлайн-часть HolyJS. Получилось огненно (во всех смыслах), весело и познавательно. И тяжелое утро с HolyJS вышло совсем не тяжелым.
На третий день конференции мы провели Community Day — это когда поучаствовать может любой желающий, нужно только зарегистрироваться. Видеозаписи докладов с Community Day уже открыты для всех (а вот дискуссии после них не записывались).
Сейчас мы готовимся к офлайн-дню 23 июня (и ещё не поздно решить поучаствовать в нём). А пока что поделимся ссылками на видеозаписи Community Day, расскажем о некоторых ярких докладах онлайн-части и озвучим дальнейшие планы.
Рынок разработчиков прагматичен и суров. Он лишён сентиментальности и далёк от благотворительности. Иначе как объяснить, что он требует от фронтенд-разработчика знать и С, и последние фреймворки? Хорошо это или плохо? Всегда ли так было? Так ли сильно отличается современный фронтендер от себя же в прошлом? Давайте разбираться.
Машины Руба Голдберга «работают». А еще они неэффективные, хрупкие, их сложно изготовить и поддерживать. Поэтому написать код, который «просто работает» — очень низкая планка.
Многие не осознают, что написание кода во многом напоминает написание эссе или книги. Насколько же я был уверен, что умение писать эссе мне «в жизни не пригодится» - но позже я узнал, что писать эссе – значит гораздо больше, чем укладываться в число слов и соответствовать критериям оценки.
Дайджест новостей и полезных статей из мира фронтенд-разработки c 13 по 19 июня.
Главное на 20 июня
Замените CAPTCHA на Private Access Tokens
Исследователи: мы изучили 1 000 000 сайтов и видим, что jQuery самый популярный, а вы говорите, что не используете его.
В Figma появились вариативные шрифты
Другие новости о доступности, спецификациях, вёрстке, JavaScript и Node.js внутри дайджеста.
Интерактивное дерево комиксов с связями и обложками, написанное на d3.js 6.
Данные берутся динамически по API Marvel.
Иконки в проекте часто становятся причиной проблем разбухания размера бандла. Все из-за того что svg-иконки могут быть достаточно объемными.
Если мы загружаем только те иконки, что мы реально используем то это не самый плохой вариант. Все становится намного хуже когда мы устанавливаем готовые пакеты иконок, но используем только их малую часть, так произошло и со мной.
Мое приложение состоящее из 2х элементов весит 722kb. Но почему?
История про конкурс разработки торговых роботов, ожидания и реальность участников, про важность фидбека и даже тема психологии по касательной прошла. Завариваем чаек, усаживаемся и обо всем по порядку.
Недавно я решил создать свой сайт, и мне понадобилось выбрать парсер Markdown для отрисовки статей в блоге.
То, что начиналось как: «Окей, гугл, какой парсер выбрать?», – вылилось в полноценное исследование существующих реализаций парсеров.
О том, какие открытия меня ждали на этом пути, и будет данная статья.
Недавно я поехал в Техас и купил трехрядный диатонический баян. Диатонические аккордеоны популярны для множества различных типов народной музыки, которую обычно учат на слух. Это хорошо для меня, потому что я все равно не умею читать ноты.
Аккордеон имеет 34 кнопки со стороны высоких частот и 12 кнопок со стороны басов. В отличие от фортепианного аккордеона, который имеет такое же логическое хроматическое расположение, как и фортепиано, у диатонического аккордеона просто набор кнопок, и я действительно не знал, с чего начать. Кроме того, каждая нота отличается независимо от того, вытягиваете ли вы меха или вталкиваете их, поэтому на самом деле на стороне высоких частот 68 нот (хотя некоторые из них повторяются). Кроме того, как я думаю, вы знаете, аккордеоны громкие. Очень громкие. Чтобы сильно не злить соседей, и узнать, как работает компоновка этой коробки, я решил сделать маленькое веб-приложение.
Перед нами часто возникает задача, сделать текст отзывчивым в зависимости от размера экрана устройства. Казалось бы, задача вполне тривиальна, и сходу можно назвать несколько вариантов её решения, не ломая голову, но всегда есть дополнительные условия, которые усложняют выполнение простых задач. В данной статье мы будем рассматривать решение небольшой задачи: как сделать максимально возможный размер шрифта динамического текста в его родительском контейнере. Или же, как впихнуть невпихуемое.
Всем привет :) Хотел бы здесь рассказать о использовании RTK Query + Redux Toolkit в больших проектах, а также ускорить вашу разработку и добавление новых страничек путем избавления от ненужных дублирований кода.
Если ты frontend-разработчик на react, то думаю тебе не впервой сталкиваться с использованием RTK Query вместе с Redux Toolkit, но даже если это так, то думаю мне есть что тебе показать новое ;) А если ты ни разу не сталкивался, то возможно после этой статьи задумаешься об использовании этих библиотечек.
При чтении лучше заглядывать в код проекта, поэтому ссылка. Установка зависимостей: yarn install. Запуск по команде: yarn dev.
Привет, друзья!
В этой заметке я хочу рассказать о двух вещах:
Обе технологии используются браузером для повышения скорости загрузки веб-приложений.
Теоретическая часть представляет собой адаптированный и дополненный перевод этой статьи. Практическая часть — это небольшой эксперимент по применению новых свойств CSS, о которых рассказывается в этой статье (перевод).
Если вам это интересно, прошу под кат.
На первый взгляд, синтаксис JS прост и интуитивно понятен, что подкупает. Однако это не мешает допускать ошибки всем, кто делает первые (или не первые) шаги в изучении языка. Мы попытались осветить некоторые промахи начинающих разработчиков.
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 6–12 июня.
А вот главные новости:
HTTP/3 опубликован в качестве предлагаемого стандарта
History API мёртв, да здравствует Navigation API
WebContainers (способ запуска Node.js в браузере) официально поддерживаются в Firefox.
https://fakt309.github.io/thisisthewall/
В языках программирования строки сравниваются очень просто, если строка отличается хотя бы на один символ, то возвращает false.
Но вот что если мы хотим не просто получать дискретное значение (true / false), а дифференцированное, например в процентах. Ведь согласитесь строки test и testing гораздо ближе к друг другу, чем test и abcd. Для данной проблемы существует множество решений, мы поговорим о самый популярных алгоритмах (также об их модификациях):
Расстояние Хэмминга
Расстояние Левенштейна
Сходство Джаро — Винклера
Коэффициент Сёренсена