HTML & CSS for a One-Time Password Input

#почитать

You know those One Time Password inputs? The UI is typically 4 or 6 numbers with individual inputs. Just from today…

⏱Читать статью

Предзагрузка отзывчивых изображений

#почитать

Отзывчивые изображения и предзагрузка не очень хорошо сочетаются друг с другом. Когда используются отзывчивые изображения, браузер принимает разумные решения о том, какое изображение загрузить, основываясь на характеристиках устройства. Но перед тем, как эти решения будут приняты, должна произойти предварительная загрузка. Давайте узнаем, как сделать так, чтобы они работали вместе.

⏱Читать

Понимая реактивные системы: производные, эффекты и оптимизация

#почитать

С этой статьи я начну цикл материалов, посвященных базовым концепциям реактивности, основанных на идеях и примерах, которые подробно изложил автор SolidJS, Райан Карниато (Ryan Carniato), в своем блоге. Наша цель — разобрать фундаментальные принципы, лежащие в основе реактивных систем, и показать их применимость в различных контекстах.

⏱Читать статью

Дзен и публикация картинок

#почитать

Я - фуллстек-разработчик, который специализируется на проектах, со значительным уклоном в R&D. Мне часто бывает нужно публиковать побочные артефакты своей работы, такие как веб-страницы с документацией, техническими статьями, интерактивные демо, прототипы и эксперименты, какие-то промо-страницы и так далее. Естественно, все это должно быть проиллюстрировано скриншотами интерфейсов, диаграммами, различными примерами рендеров и прочими фотками котиков.
При этом, я предпочитаю подходы и практики, которые минимизируют переключения контекстов и разрастание количества сущностей, с которыми приходится взаимодействовать. Это позволяет мне быть более эффективным. Доки и статьи я пишу прямо в IDE, в формате markdown, храню их в git. Сборка и публикация в веб, происходит автоматически, через git-хуки и экшены. Это делает совместную работу с коллегами-технарями комфортной, а наши общие бизнес-процессы - более легковесными. В идеале, я хочу, чтобы картинки тоже были частью такого дзена. Но...

⏱Читать статью

Глубокое погружение в работу с таймерами в React

#почитать

При реализации таймеров в React важно учитывать:

Очистку ресурсов при размонтировании компонента
Корректную работу с замыканиями
Обработку изменений состояния компонента

⏱Читать статью

Fast & Smooth Third-Party Web Fonts

#почитать

If you're loading fonts from a popular third party provider like Google Fonts or Typekit, the stylesheet link-based loading snippets they offer are not great from a performance perspective. Like any ordinary stylesheet, they block page rendering while they are loading, and for all that delay, the CSS you get merely contains font-face definitions for fonts that may be subsequently downloaded if they're used in that page. These steps add up and can make it hard to keep sites rendering quickly.

⏱Читать статью

15 полезных JavaScript сниппетов на все случаи жизни

#почитать

Начинающим разработчикам часто приходится искать быстрые решения для типичных задач, таких как копирование текста в буфер обмена, обработка URL-параметров или управление элементами DOM. В этой статье мы собрали 15 полезных JavaScript сниппетов, которые помогут значительно упростить работу и ускорить разработку: эти небольшие, но эффективные фрагменты кода пригодятся почти в любом проекте.

⏱Читать статью

Эксперимент: Автоматическое включение View Transitions с MutationObserver

#почитать

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

⏱Читать

navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

#почитать

Копирование и вставка текста, изображений и файлов с помощью нового API navigator.clipboard

⏱Читать

HTML элемент <details>: Встроенный аккордеон, который вы не используете

#почитать

HTML элемент <details>, возможно, один из самых недооценённых встроенных элементов. Меня постоянно удивляет, как много разработчиков прибегают к использованию JavaScript, когда им нужно показать/скрыть содержимое, совершенно не обращая внимания на эту встроенную возможность.

⏱Читать статью

Чеклист для tsconfig.json

#почитать

В этой статье я расскажу о настройках TypeScript, определяемых в файле tsconfig.json, которых я использую в своих проектах.

⏱Читать статью

Deeplink в React Native: Полное руководство

#почитать

Deeplinking — технология, которая позволяет открывать конкретные экраны или контент внутри мобильного приложения через URL-ссылки. Она особенно полезна для прямых переходов из уведомлений, ссылок с веб-сайтов, поделённых ссылок через социальные сети и интеграций с маркетинговыми кампаниями. В этой статье мы подробно рассмотрим, как настроить и использовать deeplinks в React Native.

⏱Читать статью

Облачные IDE: тестируем лучшие онлайн-редакторы кода

#почитать

Полезные сервисы: Replit, CodeSandbox, GitHub Codespaces, JetBrains Fleet, StackBlitz. Обзор возможностей, плюсы и минусы, какие задачи лучше решать в каждой среде.

⏱Читать статью

Работа с JavaScript Scheduler API

#почитать

Откройте для себя возможности управления приоритетами и контроля выполнения задач в JavaScript с помощью нового Scheduler API. Новый подход поможет вам стать более продуктивными и эффективными в своей работе.

⏱Читать

Модернизация с Web-платформой: производительность изображений

#почитать

Демонстрация того, как современная Web-платформа может радикально упростить и обогатить старую кодовую базу.

⏱Читать

Несколько интересных вещей о @counter-style

#почитать

Недавно читал статью Хуана в Almanac, посвящённую at-правилу @counter-style, и готов поклясться, что он раскрыл и разобрал некоторые чрезвычайно интересные вещи, которые можно сделать для стилизации списков, в частности, маркер списка. Вы, вероятно, уже знаете о псевдоэлементе ::marker. Возможно, вам доводилось работать с кастомными счётчиками, использующими counter-reset и counter-increment. А может быть, вы предпочитаете удалять list-style (будьте осторожны!) и вручную добавлять маркер в псевдоэлемент ::before элемента списка.

⏱Читать статью

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

#почитать

Создание адаптивных версий интерфейса это боль многих дизайнеров и, как следствие, разработчиков. Разные экраны, хаос в макетах, непонимание между специалистами… Но есть способ сделать адаптацию проще, предсказуемее и удобнее для всех. В этой статье я предложу вам подход, который сократит количество макетов и сделает интерфейс аккуратным на любом устройстве. Готовы взглянуть на адаптацию под новым углом?

⏱Читать статью

NEST.js — уродливый монстр или мощный энтерпрайз?

#почитать

Если, когда вы смотрите на NEST.js вас гнетёт необъяснимая тоска. Если вы не можете понять воодушевления и радости от использования декораторов. Если рассмотрение очередного NEST-инструмента вызывает лёгкое недоумение — не стесняйтесь, вы не одиноки.

⏱Читать статью

Вебсокеты на FastAPI: реализация простого чата с комнатами за 20 минут

#почитать

Хотите освоить WebSocket и создать собственный чат с комнатами? В этой статье мы разберем:
• В чем разница между WebSocket и классическим HTTP
• Как реализовать сервер на FastAPI с поддержкой WebSocket
• Как создать простой FullStack-чат для мгновенного обмена сообщениями
• Как всего за пару минут развернуть готовое приложение на облачном сервисе
Статья написана с учетом новичков, но и опытные разработчики найдут здесь полезные инсайты.

⏱Читать статью

Особенности национальной верстки: PWA

#почитать

В этой статье мы не будем в очередной раз размышлять о том, почему бизнес и пользователи все чаще начинают отдавать предпочтение PWA вместо мобильных приложений, какие у них есть плюсы, минусы и так далее.
Сегодня мы сосредоточимся на проблемах (а точнее на одной конкретной), с которой вы можете столкнуться, решив сделать свое веб-приложение прогрессивным.
Забегая вперед, сразу скажу, кому статья может быть полезна. Не столько важно, являетесь вы владельцем продукта или разработчиком. Если вы создаете PWA-приложение, в котором планируется реализовать открытие ссылок на сторонние ресурсы в браузере, вы можете столкнуться с неочевидной проблемой в верстке.

⏱Читать статью

Изучение Символов JavaScript

#почитать

Symbol отличается от других примитивов JavaScript тем, что они гарантированно уникальны.
Когда создаёте символ с помощью Symbol('description'), вы получаете нечто, что никогда не будет равно ни одному другому символу, даже созданному с тем же description. Эта уникальность и делает их мощными для определённых случаев использования.

⏱Читать статью