Недавно мы переделали наши внутренние инструменты, визуализирующие компиляцию JavaScript и WebAssembly. При работе оптимизирующего компилятора Ion мы теперь можем генерировать интерактивные графы, демонстрирующие, как конкретно обрабатываются и оптимизируются функции.Вы можете сами поэкспериментировать с этими графами в оригинале статьи. Просто введите какой-нибудь код на JavaScript в функцию test, и наблюдайте за созданием графа. Также там можно щёлкать и перетаскивать граф, менять масштаб при…
Я построил полноценную образовательную платформу для изучения иврита — с интерактивными тренажерами, умным словарем на 4000+ слов и системой подписок. В статье рассказываю о нетривиальных технических решениях, архитектурных выборах и ошибках, которые пришлось исправлять по ходу.Демо: hebrewglot.com Стек: Next.js 15, TypeScript, PostgreSQL + SQLite, Stripe, NextAuth🎯 Предыстория: почему вообще это началосьЯ начал учить иврит и быстро столкнулся с проблемой: хороших онлайн-ресурсов на русском язы…
Часть 1. Создаем роутер и настраиваем webpack для поддержки ленивой загрузки страниц и их стилей.Часть 2. Создание реактивного хранилища.В этой статье мы рассмотрим основные подходы борьбы со сложностью с помощью веб-компонентов. Статья рассчитана на более-менее подготовленных читателей, знакомых с данной технологией - на тех, кто хотя бы читал соответствующие главы вот этого учебника , либо статьи на MDN. Ну или на тех, кто их собирается прочитать. Учебник Ильи я буду далее называть просто …
Пару недель назад, когда я писал пост The Hidden Cost of URL Design, мне нужно было добавить подсветку синтаксиса SQL. Я направился на веб-сайт PrismJS, пытаясь вспомнить, можно ли добавить его в качестве плагина. Меня утомило количество вариантов на странице скачивания, поэтому я вернулся к своему коду. Поискав в файле PrismJS, я нашёл в его начале комментарий, содержащий URL:/* https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+bash+css-extras+markdown+sc…
Привет, Хабр! Я — Александр Дудукало, автор одноименного YouTube-канала. В прошлой статье мы разобрали ссылочный тип данных, который хранит не само значение, а ссылку на него в памяти. Сегодня используем полученные знания на практике и познакомимся с одной из самых важных концепций в JavaScript — callback-функциями. Подробности — под катом! Особенности функцийПрежде чем дать определение, хочу поделиться двумя важными фактами о функциях в JavaScript. С их помощью вы сможете лучше усвоить новую т…
Компонентно-ориентированный подход уже давно зарекомендовал себя как отличная практика разработки. Его массовая популярность пришла вместе с такими библиотеками, как React и Vue. Создавая компоненты, мы чётко разграничиваем логику, формируем зоны ответственности и эффективно боремся с дублированием кода. Обычно компонент отвечает за рендеринг HTML-разметки и динамически обновляет её в зависимости от своего состояния. Кроме того, ключевую роль играют механизмы контроля жизненного цикла, например…
3 платформы - 1 приложениеЯ не буду сильно морализировать на тему того, почему Electron.js в разработке приложений для ПК это плохо или хорошо, где взять деньги в open-source и т.п. Скажем так: он есть и широко используется, и является таким же инструментом как ножовка, может быть, не самой острой, сделанной из плотного картона, но со встроенным mp3 плеером!Ниже я приведу примеры, как пустить пыль в глаза юзерам можно улучшить ситуацию с ощущением чужеродности приложения среди других, написанны…
На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта.Блокирующие скриптыЧасто на сайтах подключают скрипты из заблокированных соцсетей и сайтов. Это может быть:Один из самых частых случаев блокировки загрузки страницы, это вот такой виджет facebook (соцсеть принадлежит компании Meta, признанной экстремистской в РФ).Виджет соцсети, отображающий участников группы.Подключение скрипта библиотеки для интеграции кнопки "Поделиться", который, в св…
Мне часто доводится вести странные споры с фанатами фреймворков о том, действительно ли <div> «столь же хорош», как и <button>.Спойлер: нет. И давайте выясним, почему.ПроблемаВ среде разработчиков на React, а также у тех, кому нравится HTMX, я часто вижу такое…<div onclick="showSignIn()"> Open Modal </div>function showSignIn () { // Код для отображения модального окна входа. // Подробности реализации зависят от стека. }Что здесь не так?Этот элемент не сообщает…