14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день.
Присоединяйтесь: @FrontendPortal
Вжух — и каналу шесть лет! 6️⃣
Я на такое не рассчитывал, когда менял uppercase hex на lowercase :)
То сообщение имеет номер два. Не уверен, что было в первом.
Спасибо, котаны, за поддержку! Я знаю, тут есть те, кто чуть ли не с самого начала.
Всем хорошего лета, впереди ещё много всего!
А давайте продолжим тематику багов дня. Вот хороший баг, но кыргызам так не показалось.
P. S. не уверен, что вам нужен был ещё один пост про Docker в РФ ...
#баг дня
Вроде мы все с вами знаем, что CSS — отвечает за представление контента, никак его не модифицируя. И это подтверждается спецификацией во многих местах.
Вот только если ты пойдёшь и скопируешь в Chrome текст, на который наложен text-transfrorm: uppercase, скопируются заглавные буквы!
Но это неправильно: спека.
В общем, в Chrome 127, благодаря разработчикам из Microsoft, это будет исправлено.
Мне нравится путь, которым разрабы Edge выбрали пиар своего браузера: исправление старых багов и работа на девтулзами.
Ну и ссылка на баг: https://chromium-review.googlesource.com/c/chromium/src/+/5399744
Такой же баг присутствует в Safari, Firefox же отрабатывает ок. Думаю, код этой части CSS в Blink довольно старый, потому можно ожидать, что в Safari и WebKit будет бэкпорт.
#bug #chrome #css
#фишка дня
Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).
Зачем оно надо? Ну, исходя из названия, чтобы сделать использование временной шкалы дискретным, за равные промежутки. Кадры, короче говоря.
Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.
Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv
Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.
И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ
Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.
Никаких рантаймов, красота.
#css #sprite #animation #бородач
#codepen дня
Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?
И таки да, можно.
Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?
И таки да, можно.
Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?
Да!
https://codepen.io/paulnoble/pen/bGyNRNE
JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.
Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...
#css #filters #scroll
Про сравнение двух подходов к решению задачи запутывания кода. Что лучше — протектор или LLVM-обфускатор?
Команда Guardant обеспечивает защиту своих библиотек под разные операционные системы и разные ARM-архитектуры, используя разные подходы по обфускации:
🌦для x86/x64 применяет свою разработку — протектор Guardant Armor
🌦в случае ARM-архитектуры — открытые обфускаторы на базе LLVM для их модификации и защиты своих продуктов
🔑О плюсах и минусах каждого подхода читайте на Хабре и подписывайтесь на ✈️канал Guardant — там всё о защите, лицензировании и управлении продажами ПО.
Базовый вес
Правильно выставленная система отсчета помогает принимать правильные решения. Вопрос размера бандла веб-приложения холиварный, но я постоянно вижу одну и ту же ошибку: "Какая разница 50кБ React или 5кБ Preact, если из node_modules тащится еще пол мегабайта?". Даже если не учитывать, что вопрос поставлен неправильно (в каждом приложении набор либ и их размер разный), ответ очень простой: базовые примитивы загружаются всегда и замедляют каждую страницу, а отдельные тяжелые пакеты для разных страниц догружаются лениво и могут вообще не влиять на перф приложения в общем.
Например: либы для графиков, интерактивных анимаций, карт, аналитики и тп могут подгружаться лениво на соответствующих страницах и на их размер можно меньше обращаться внимание. Но библиотеки для: роутинга, фетчинга данных, отрисовки дома, форм и валидации используются на каждой странице и должны быть в кор бандле, их тришейкать смысла нет. За их размером и нужно следить.
Есть прекрасная аналогия как это разботает в мире туризма. Если вы заменяете какой-то тяжелый котелок титановой кружкой, то в общем весе вы разницу не почувствуете, только получите головняк от того что еда начнет пригорать. Но если вы немного заморочитесь и выстроите слаженную систему: сублиматы, кружка и горелка под нее, вы уже уменьшете походный вес кухни и еды в 2-3 раза. Если то же самое сделать с рюкзаком, укрытием, спальной системой - весь вес можно сократить в 2-3 раза. И для этого не обязателньо тратить больше денег, достаточно немного заморочиться, разобраться в вопросе и существующих альтернативах. Но уменьшив вес на плечах даже в полтора - два раза, можно почувствовать радикальную разницу в качестве и комфорте похода!
В легкоходном туризме есть понятие “базового веса” - это вес минимально необходимого снаряжения для похода: рюкзак, спальная система, кухня. Обычно, это 5кг. Конечно, в каждом походе есть необходимость брать больше или меньше еды или какое-то специфическое снаряжение, но это уже за базовый вес не считается. Это, типа, динамические импорты, если выстраивать аналогию.
Если фокусировать свой выбор снаряжения (библиотек) на цифре базового веса - можно получить гарантированный профит для того кто эту ношу несет. Туристы тащат поклажу на своем горбу и хорошо понимают стоимость каждого килограмма на любом подъеме и курумнике. А разработчики приложений тестируют свои сборки сидя на кресле под кондиционером (за мощным компом в локальной сети с сервером), понимаете проблему? 🙂
Есть ли у вас лимиты базового веса для какой-нибудь страницы логина и следите ли вы за ним?
#инструмент дня
Я сегодня решил написать пост, не отходя из кассы.
Итак, преамбула: проект развивается 10 лет, с 2014 года. Стек: Google AppsScript, JavaScript, TypeScript, jQuery, React, RSPack.
Когда я пришёл в 2019 году в компанию, основной JS-файл представлял из себя монстра на 40 000 строк. Да-да, монолитный файл, в котором люди ворочали селекторы с помощью jQuery!
И это только фронтенд-часть.
Сказать, что я офигел, устроившись на работу, это ничего не сказать. Но что делать.
Дождался Рождества, когда все разъеъхались и не мешали, а мне толком некуда было, и распилил монолит. Потом начали переводить какие-то части на React, собирать и рендерить их по-отдельности, внедрять feature-флаги для разделения пользователей, экспериментировать... весёлый хаос.
С последним редизайном проект окончательно перешёл на React в смысле рендера (не бизнес-логики и контроля, но это поправимо).
Поскольку, переход произошёл довольно таки радикально, с созданием новой точки входа (entrypoint), естественно, образовалась куча мёртвых экспортов, от которых даже WebStorm-у немного стало плохо.
И сегодня я, наконец, разрулил эту проблему инструментом Knip: https://knip.dev/
Отображает все мёртвые (неиспользуемые) файлы, мёртвые экспорты, зависимости. Легко конфигурируется, хотя прекрасно работает и без этого (конфигурация заключается в настройке точек входа, если у вас дефолтные — не парьтесь).
Итог — минус 10000 строк и 30 неиспользуемых файлов. Считаю, отличный результат. Стало легче ориентироваться.
Ну и по пути нашёл файл, который так-то стоило бы вернуть в оборот... 🫠
В общем, естественно, рекомендую, котаны!
#js #ts #cleanup #unused
#инструмент дня
Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…
Не та ветка, не туда закоммитили, не те файлы, случайно грохнули ветку, зря запушили, не то сообщение, забыли вернуть работу из stash…
Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!
Ссылка: https://github.com/Bhupesh-V/ugit
КДПВ говорит сама за себя.
#git #бородач
Платные курсы больше не нужны
Вот каналы, чтобы освоить Frontend разработку с нуля 👇
📌Senior Frontend - JS, HTML и CSS
📌Frontend Interview - как проходить собеседования
📌Frontender Libs - библиотеки для фронтендеров
📌Web Craft - только Web-разработка
С таким набором легко зайдешь в IT💪
#библиотека дня
Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.
Если вы не знаете, что это — это комбинация клавиш, которая вызывает некое поле ввода, куда можно вводить названия пунктов меню, расширений, каких-то скрытых действий или настроек.
Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.
Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk
Буду у себя внедрять, задолбало мышевозить и придумывать на каждый чих по горячей клавише.
#command #lib #ui #ux #бородач
#тип дня
Что делать если вам нужно создать тип, параметры которого служат для передачи в библиотечную функцию? Aka тип аргументов не торчит наружу?
Не делайте это ручками, используйте служебный тип Parameters!
const createPerson = ({
firstName,
lastName
}: {
firstName: string,
lastName: string
}) => ({
firstName,
lastName
})
type CreatePersonParams = Parameters<typeof createPerson>[0];
const params: CreatePersonParams = {
firstName: 'John',
lastName: 'Doe'
};
IT-гиганты набирают начинающих разработчиков.
В 2024 компаниям важен не просто опыт, а подготовленный специалист, который сможет закрыть задачу. Начинающие разработчики уже устраиваются в Сбербанк, Тинькофф, Яндекс и Вконтакте.
– Крупные компании берут людей по специальным критериям. Есть 10 навыков, без которых классных заказчиков можно не ждать.
– 5 простых шагов, чтобы обойти конкурентов в нише и устроиться в хорошую компанию, даже будучи начинающим.
– Какие проекты и фичи разрабатывать, чтобы впечатлить рекрутеров.
Об этом, а также о том, какие ключевые hard и soft skills качать в первую очередь, как искать лучшие вакансии в IT, сделать портфолио идеальным для работодателя и получить желанный оффер от 100 000 рублей, узнаете на онлайн-эфире от FAANG School.
Мастер-класс проведет разработчик из BigTech-компании с многолетним опытом.
Переходите, полезные подарки уже ждут:
- Подробный гайд «Как найти работу в IT»
- Пошаговый Roadmap по Java
- Шпаргалка «Hotkey JetBrains IDE»
- Шпаргалка по Rest API
#фишка дня
Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.
Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.
Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ
Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!
Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.
Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.
А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.
#html #button #label #бородач
#заметка дня
Когда Ахмад Шадид выступал у нас с Defensive CSS, возникла забавная проблема.
Он выбрал для примеров в презентации акварельные тона. Очень нежные, успокаивающие. И все бы было хорошо, если бы презентация не транслировалась по Google Meet.
Алгоритмы видео Google Meet сильно режут контраст. В итоге разницы между акварельным голубым и акварельным розовым вообще не было заметно. А это были ключевые моменты примеров.
Думайте об этом выбирая цветовую гамму проекта. Ведь бывают и просто плохие дисплеи.
Вспомнил я про эту особенность потому что мне на глаза попалось огромное количество статей о неоморфизме. История циклична.
А неоморфизм он весь состоит из мягких теней, формирующих объём. Их точно так же не видно при плохом контрасте.
Хорошо, что некоторые статьи об этом все же упоминают: https://refine.dev/blog/neumorphic-css/
Так что не жалейте контраста. Оставьте акварель художникам.
#бородач
Кыргызы против Intl.NumberFormat
Когда лучшее враг хорошего.
Недавно к нам в команду web platform в aviasales пришли из техподдержки со странным багом у пользователя: в Arc браузере сломано отображение символа валюты кыргызских сомов, вместо него выводится непонятный символ. Проще всего конечно было ответить, что браузер не поддерживается, но стоп, разве арк не на хромиуме, чем он такой особенный?
Начал разбираться
Действительно, в обычном хроме сомы показываются как KGS, а в арке как символ, и символ явно ошибочный.
Для отображения валют мы используем стандартный Intl.NumberFormat и в арке он действительно выдаёт другой символ. Начало проясняться. Возможно, арк использует новую версию хромиума и поэтому показал проблемы раньше? И действительно, Chrome Canary получил точно такой же баг. Получается, совсем скоро, валюта сломается у всех, вообще у всех сайтов и пользователей страны, и отсчёт времени уже пошёл 🫠
Куда отправлять баг? У хромиума есть свой баг трекер, но работа с ним оставляет желать лучшего, выглядит он мягко говоря антично. Никогда не заполнял баги для браузера, но видимо этот час настал. В процессе подготовки репорта вспомнил, что вообще говоря, локализациями занимается не хромиум а отдельная библиотека ICU, то есть проблема ещё глубже, чем просто баг браузерного движка. А, казалось бы, невинная проблема
Описываю свои приключения коллегам, один замечает, что это первый раз, когда мы нашли баг не в самом лучшем браузере safari а в хроме, теперь счёт багов 4:1 в пользу первого. А действительно, а как себя ведёт в таких условиях сафари? Открываю. Встречаю тот же баг 🫡
Очевидно, проблема на уровне операционной системы.
Решил присмотреться к символу внимательнее, это просто мусорный вывод или он имеет какую-то семантику?
Символ который выдаётся на macos выглядит так: ⃀, если вы читаете с macos то почти наверняка ничего не увидите (в первом комментарии скриншот как это рендерилось в реальности). В базах данных по юникоду описание: Unicode Character 'SOM SIGN'. Бинго. Это не баг, это настоящий символ валюты, но в стандартных шрифтах macos его нет, на windows всё отображается нормально
В итоге получается ситуация: раньше вместо символа валюты выдавалась аббревиатура, библиотека ICU исправила эту проблему чем ухудшила вывод на девайсах apple
Это многое говорит о нашем обществе
Issue в багтрекере хрома или ICU открывать не стал. Очевидно они всё сделали правильно; парадоксальная ситуация в которой никто толком не виноват. Ну, точнее, можно конечно попинать apple чтобы добавляли символ, но это всё равно что орать на баобаб
Оценив диспозицию, решил что надёжнее всего будет просто сделать .replace для проблемного символа на старый вариант.
Мимоходом заметил, что в некоторых других условиях у нас на сайте кыргызская валюта отображается нормально. Оказалось, что вместо официального символа используется юникод-комбинация c + нижнее подчеркивание под символом: c̲. Как говорится c̲мекалочка ок. Но чтобы я не сильно радовался, оказалось, что в том самом стандартном шрифте apple этот символ тоже отображается криво, проще заменить обратно на KGS, как это было раньше и всех устраивало
Когда я заходил на эту пятничную задачу последнее чего я ожидал это изучения багтрекера браузеров. А вот проблемы с apple наоборот вполне были в рамках! Разумеется это ценно, что у движка chromium есть конкурент который не живёт на пособиях гугла, но нельзя не признать, что девайсы apple и веб разработка это головная боль. Всегда.
Пока писался этот пост, «улучшающий» апдейт хрома был раскатан на всех пользователей. Кыргызский интернет оказался уже сломан, сломан для всех
Frontend Developer — это первоисточник всего, что происходит во Frontend-сообществе
Здесь опытный Senior-разработчик ежедневно публикует материалы, которые накопил за 9 лет Frontend-разработки:
➤ Шаблоны с готовым кодом для твоих проектов
➤ Вопросы с собеседований, задачи и викторины
➤ Шпаргалки по JavaScript, HTML и CSS
P.S. Даже онлайн-школы берут материалы с этого канала🤫
#новость дня
В этот день 11 лет назад React стал публичным открытым проектом.
С чем нас всех и поздравляю.
Делитесь, кто когда начал с ним работать. Я — аж летом 2018, написал на нем проект для Oreo.
Это было приложение для вКонтакте на 64 экрана, включающее в себя работу с веб-камерой и загрузкой видео. Вот это был вход так вход, без жалости.
А до того — Ember был единственной любовью.
У вас как?
Проджекту вкатиться в айти не легче, чем разработчику. Нужно понимать процесс и детали, защищать решения перед клиентом и находить общий язык с командой.
Марина Заботина, аккаунт-директор Далее, провела большой опрос о том, какой именно уровень технических знаний должен быть у ПМа. Результатами опроса и собственным опытом 一 а Марина прошла все эти дебри 一 она поделилась в новой статье.
Читайте статью на Хабре или на vc.ru и делитесь в комментах, как обстоят дела с техническим бэкграундом у вас 🤝
#статья дня
Казалось бы, что может быть проще 100%? Но это не совсем так.
От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.
В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents
Красиво, удобно, понятно.
#css #percent #width #height #position #бородач
#codepen дня
Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).
Давайте исправим положение и сделаем что-то насущное.
Например, сымитируем табло в аэропорту… С его задержками смены линий при смене языка.
Поехали: https://codepen.io/alinaki/pen/ZEaOdKq
Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.
#css #grid #animation #scss #бородач
Мне кажется, Артём выстроил шикарную аналогию размера бандла с весом туристического снаряжения и отлично показал проблему затрат в целом. Читаем!
Читать полностью…
Хотите стать ассистентом преподавателя?
Участвуйте в конкурсе Яндекс Образования и попробуйте себя в новой роли. Ассистент — правая рука преподавателя: он готовит материалы к занятиям, помогает во время сессии, отвечает на вопросы студентов и даёт им развёрнутый фидбек.
Если вы хотите познакомиться с лучшими практиками преподавания IT-дисциплин, стать сильным ментором и изучить основы педагогики, подайте заявку до 31 мая 2024 года.
Участвовать в конкурсе могут студенты и аспиранты IT-специальностей. Победители конкурса пройдут обучение и получат финансовую поддержку, а ещё доступ к сервисам и обучающим материалам Yandex Cloud.
[Узнать детали]
#статья дня
Даже не одна статья, а целая серия из пяти. Автор — Артём Сапегин.
И серия статей эта — о тестировании в React. От лучших практик и ответа на вопрос, зачем тестировать вообще (кстати, зачем?), до описания работы с Jest, Enzyme, React Testing Library (ныне уже стандартный способ), Cypress и Playwright.
Ссылка на первую статью цикла: https://sapegin.me/blog/react-testing-1-best-practices/
Надо отметить, что начало цикла — это 2020 год (камень в огород Артёма: это было весьма сложно вычислить, нужны даты), но каждая из статей была не раз обновлена.
Ну и с тех пор Enzyme практически перестали использовать, во всяком случае в моём кругу. Если у вас иная информация — поделитесь.
В любом случае, труд масштабный, монументальный даже, и стоит ознакомления.
#react #testing
#фишка дня
Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!
Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)
Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.
#devtools #chrome #performance
Бесплатный практический вебинар для всех возрастов: Профессия «Frontend-разработчик».
⏰ Когда: уже 23 мая в 19:00 по мск.
Вы узнаете о типичных рабочих задачах программиста и напишете мини-игру, которая работает прямо в браузере. Под капотом немного HTML+CSS и базовые конструкции JS.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
🎁 Всем, кто зарегистрировался — Карта компетенций начинающего Frontend-разработчика, а каждому участнику — Гайд «Как заговорить на сленге IT-специалистов».
#заметка дня
Сегодня у моего коллеги случился aha moment. Ближайший перевод на русский... кто-то говорит "Эврика", но это не совсем то.
Короче, до него наконец-то дошло, почему я просил его не включать элементы-обёртки в компоненты. Аж "спасибо" написал и пожаловался на коллег в новой команде, куда его временно перевели.
Под элементами-обёртками я имею в виду, например, различные виды карточек.
Тут могла бы быть ссылка на компонент Card из Chakra UI, но это не совсем то.
В общем, карточка, Card, в неком UI представляет из себя контейнер, который имеет заголовок, границу и поля. Всё, что внутри — тело компонента, полезная нагрузка.
Что делают разработчики? Правильно, делают Card частью компонента, упихивая и полезную нагрузку и обёртку в одно целое.
Что делают разработчики когда им требуется использовать полезную нагрузку в другом месте?
Правильно, переопределяют стили Card! Кто кастомным классом, кто через css-проперти.
Я понимаю, дамы и господа, что сейчас скажу очевидную вещь, но я почему-то не вижу, что ей пользуются: обёртка не должна быть частью полезной нагрузки!
Тем более, стандартная обёртка из UI-кита.
Тем более, если эта обёртка каким-то образом влияет на положение элемента в пространстве: внешние отступы, позиционирование, прилепляемость.
И пример, конечно, вот так вот — не надо:
const CustomField = () => (
<Box mb={2}>
<input />
</Box>
<CustomField />
const CustomField = () => <input />
<Box mb={2}>
<CustomField />
</Box>
#статья дня
Если кто-то из вас ещё не знаком с комик-стрипами xkcd, я настоятельно рекомендую проникнуться.
Ещё можно пойти и проникнуться классическим Flash-мемом из 2005 года Blue Ball Machine (осторожно, звук).
А теперь к делу. Народу из xkcd показалось забавным на 1 апреля 2024 года выпустить нечто подобное, но помасштабней.
Виральности проекта хватило на то, чтобы буквально просто интегрировать интерактивную сумасшедшую машину в стандартную сетку комиксов: The Machine.
Так вот, авторы выпустили статью, описывающую создание машины начиная от прототипа и базовых решений до отладки: https://chromakode.com/post/xkcd-machine/
Естественно, уже никакого Flash :) Всем заправляет физический движок Rapier, написанный на Rust и собранный в WASM. Данные из движка транслируются в контекст React и, как можно догадаться, всё остальное приложение написано на React.
Да, всё, что вы можете увидеть в машине — это элементы DOM!
Им просто хотелось понять лимиты DOM. Не нащупали.
И самое крутое — проект открытый, можно посмотреть исходники, почерпнуть полезности и собрать: https://github.com/xkcd/incredible
В общем, моё почтение.
#machine #xkcd #react #rust
Мидл-специалист отличается от джуниор-разработчика не только опытом и уровнем владения технологиями, но и софт-скилами. На курсе Практикума вы сможете прокачать все необходимые навыки и построить новую карьеру.
На курсе мы поможем вам:
— освоить новые навыки и извлекать больше пользы из своих софт-скилов;
— углубить знания в алгоритмах, DevOps, бэкенд‑разработке и смежных сферах;
— сделать с нуля 2 проекта — до работающих приложений.
Если вы не уверены, подойдёт ли вам профессия, — пройдите бесплатную часть и тест в конце. Если понравится, платите за остальную часть как удобно: в рассрочку или целиком.
→ Начать курс бесплатно