JavaScript *

Иногда я живу один и ставлю с вечера кашу в мультиварке, чтобы она приготовилась к времени моего завтрака. 

И раньше я постоянно путался - какую отсрочку старта поставить вечером, чтобы каша была готова к определенному времени утром? 

В итоге составил табличку с формулами и написал код Google Apps Script, чтобы знать какое точное время отсрочки старта готовки задавать на старой мультиварке.

Здравствуйте, товарищи! Меня зовут Валик и в этой статье мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы.

Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сравним их с моим изобретением - mlut. Разберем проблемы известных инструментов и посмотрим, как я решил их в своем. Будут интересные архитектурные решения, технические детали и немного хардкора.

Те, кто занимается версткой, смогут по-другому взглянуть на Atomic CSS и, возможно, взять в работу новый инструмент. А те, кто пишет системный код и тулинг - получить вдохновение и перенять нестандартный опыт.

Иногда я делаю сразу несколько похожих подпроектов в одном проекте, например, набор статичных лендингов для сбора заявок и блог на AstroJS. Подпроекты отличаются контентом и темой оформления, но используют общие блоки. При этом публиковать общие блоки в публичном пространстве не хочется.

В этом случае полезно иметь монорепу, и я это сделаю без внешних зависимостей только с помощью npm workspaces.

Мы в Val Town выполняем ваш код в процессах Deno. Недавно мы заметили, что под нагрузкой отдельно взятый Node-сервер Val Town не может породить более 40 процессов. На протяжении 30% процессорного времени главный поток остаётся заблокирован вызовами к spawn. Почему так медленно? Можно ли как-нибудь ускорить эту работу?

В последнее время на Хабре я опубликовал более десяти крупных статей на тему разработки собственного API с использованием FastAPI. Однако, в основном, эти статьи были теоретическими. Сегодня я решил создать чисто практическую статью, в которой мы с нуля и максимально быстро разработаем полноценный веб-сервис с фронтендом и бэкендом.

После этого мы выполним деплой этого приложения, чтобы любой пользователь мог им воспользоваться.

В данной статье мы будем воспроизводить звук в браузере на примере небольшого проекта под названием Punk riff generator.

В проекте заложена нехитрая идея: дать возможность генерировать и воспроизводить в браузере 4 случайных аккорда, которые можно было бы в последствии использовать как основу для очередной панк-песни. Ну не здорово ли?

На Хабре я часто вижу статьи о реализации тех или иных фич на Python-фреймворках. Я объединил все эти фичи в реальный проект с открытым исходным кодом, чтобы у вас сложилась целостная картина. Мы с вами создадим UX/UI на Figma, напишем фронтенд на HTML, CSS, SASS, Bootstrap и JavaScript, создадим ER-диаграмму в MySQL Workbench, напишем бекэнд на Flask, создадим регистрацию через социальные сети OAuth 2.0 в один клик, используем брокер сообщений и асинхронную очередь Celery для отправки писем на электронную почту, сделаем WYSIWYG-редактор, реализуем полнотекстовый поиск Elasticsearch, закешируем Redis, покроем тестами pytest и запустим в Docker-контейнерах, поговорим о многопроцессности для WSGI-шлюза Gunicorn.

Привет, Хабр! Сегодня рассмотрим как автоматизировать тестирование React-приложений с инструментом Cypress.

В начале 90-х интернет был очень базовым и простым для понимания. По сути, это были два компонента: веб-сервер и браузер.

На локальном компьютере вы устанавливали браузер, который, получив URL, отправлял HTTP GET-запрос на сервер, на котором запрашиваемый ресурс. Затем этот сервер отвечал текстом, но не просто текстом. HTTP означает протокол передачи гипертекста, и этот гипертекст может быть, например, HTML-документом. Проще говоря, это текстовый файл с HTML-кодом, а браузер - это программа, которая интерпретирует этот код и отображает для вас приятный интерфейс веб-сайта.

Но настоящая сила заключается в возможности связывать ресурсы вместе с помощью тегов link. Вы можете ссылаться на другие документы и другие веб-сайты.

⚛️ Адаптивная верстка на React Native

При разработке веб-приложений на React, браузер Chrome тратит много оперативной памяти. Это связано с тем, что для эффективного обхода Virtual Dom, используется JIT компилятор, наслаивающий более эффективные реализации скомпилированных JavaScript функций поверх интерпретируемой реализации. Это создает высокую сложность по памяти: нагрузка на GC возрастает кратно.

Избежать просадки производительности может использование движка Hermes из React Native. Однако, React Native не умеет работать с адаптивной версткой: из коробки есть Yoga Layout, реализующий только Flexbox.

Описание проблем, возникших при портировании классического React приложения в React Native можно прочитать в этой статье. Речь идет о поддержке различных форм факторов устройств, в том числе, Galaxy Fold

Эта статья для тех, кто знает, что такое “внедрение зависимостей” и имеет практический опыт его использования. Меня зовут Алекс Гусев и я являюсь автором библиотеки “@teqfw/di”. Цель моей библиотеки - дать возможность использовать функционал “внедрение зависимостей через конструктор” в проектах на JS (фронт и бэк) и TS (бэк). Минимальной единицей внедрения является отдельный экспорт es6-модуля. Поэтому библиотека не может использоваться с модулями CJS или UMD.

В основу внедрения зависимостей заложена идея о том, что вместо статического связывания исходного кода на этапе написания (через import) применяется динамическое связывание объектов программы в режиме выполнения. В моей библиотеке это достигается за счёт размещения в коде конструкторов (или фабричных функций) инструкций по созданию нужных им зависимостей, которые интерпретируются Контейнером Объектов при работе программы и на основании которых загружаются нужные исходники и создаются нужные зависимости.

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

Я люблю box-тени.

Четыре года назад я выяснил, что мой процессор M1 может рендерить безумное количество таких теней, поэтому решил извлечь из них максимум, и мне это удалось. Если вам интересно, как пользоваться box-тенями, чтобы создать современный стиль UX, то вы не по адресу. Но если вам нравятся творчество и эксперименты, то продолжайте чтение.

Я хочу поделиться худшими примерами того, что можно сделать при помощи box-теней в одном div. Примерами, которые не должны работать, однако почему-то работают. Но прежде чем приступить, нужно ответить на вопрос: что же такое box-тень?

Angular 17 представляет собой мощный инструмент для создания современных веб-приложений. С каждым новым релизом команда разработчиков добавляет новые возможности, и одним из самых интересных нововведений в Angular 17 является поддержка Signal. В этой статье мы рассмотрим, что такое Signal, как его использовать в Angular, и приведем примеры реального использования.

Привет. Меня зовут Дмитрий, я фронтенд-разработчик в компании «Цифровая индустриальная платформа». В своей работе мне часто приходится использовать Dependency Injection (DI) в Angular. Это мощный и популярный инструмент, который упрощает работу с зависимостями в наших приложениях. Он позволяет легко интегрировать необходимые сущности в компоненты, упрощает процесс тестирования и поддерживает принцип инверсии зависимостей. Однако часто мы не используем все возможности DI, потому что не знаем, как он работает под капотом. Давайте разберемся, как функционирует DI, что такое иерархия инжекторов и какие изменения принесла версия Angular 14.

Статья о том, как легко делать графические кнопки для панелей инструментов, не таская за приложением гору бинарных ресурсов с картинками. Этот метод платформонезависимый и может быть использован в различных языках и средах, позволяющих работать с графикой и растровыми изображениями. Ниже приводятся примеры для C# (WinForms / WPF), JavaScript, Python.

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

Тогда возникла идея - рисовать одноцветные изображения, кодировать их в строку и хранить прямо в свойствах объекта (например - кнопки). Самый простой вид кодировки - когда шесть точек изображения превращаются в шестибитный код, соответствующий некоторому символу из ASCII таблицы с заданным базовым смещением...

Привет, друзья!

В этой небольшой заметке я хочу рассказать вам об одной интересной особенности порталов в React, которую я долгое время упускал из виду, но которая на днях привела к любопытному багу. Речь идет о том, что структурно дерево React не всегда соответствует DOM.

Полагаю, статья будет интересна всем разработчикам React, а также тем, кто любит разбираться с тонкостями работы JavaScript и браузерных API.

Предполагается, что вы имеете некоторый опыт работы с React, и вам не надо объяснять, что такое порталы и для чего они нужны.

Данная статья будет полезна разработчикам браузерных (SPA) приложений, которые хотят настроить аутентификацию пользователей. Для аутентификации будет использоваться OAuth2/OIDC протокол c PKCE. В качестве сервера аутентификации будет использоваться сервер управления аутентификации с открытым исходным кодом OpenAM.

Привет, Хабр! Наткнулся на интересный и, как по мне, революционный проект WebSim AI. Покопался в нем несколько дней и сейчас, как вы уже поняли, решил с вами поделиться информацией о нем.

Проект WebSim AI представляет собой мощный инструмент для создания веб-страниц с минимальными усилиями, что может значительно ускорить процесс разработки как для новичков, так и для опытных специалистов.