Обновить
454.97

Веб-разработка *

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Публикация пакета npm с ESM и TypeScript

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели842



За последние 2 года поддержка ESM в TypeScript, Node.js и браузерах сильно улучшилась. В этой статье я объясню мою современную настройку, которая является относительно простой по сравнению с тем, что нам приходилось делать раньше:


  • она предназначена для пакетов, которые могут пренебречь обратной совместимостью. Настройка хорошо работает для меня некоторое время — начиная с TS 4.7 (24.05.2022)
    • помогает то, что Node.js теперь поддерживает require(esm) — запрос библиотек ESM из модулей CommonJS
  • я использую только tsc, но упоминаю поддержку других инструментов в разделе "Компиляция TS с помощью других инструментов"

Обратная связь приветствуется: что вы делаете по-другому? Что может быть улучшено?


Пример пакета: в @rauschma/helpers используется настройка, описываемая в этой статье.

Читать дальше →

LitestarCatsCV. Тренируемся на кошках. Реализация API и работа с данными. Часть 2

Уровень сложностиПростой
Время на прочтение17 мин
Охват и читатели1.3K

Что вас ждёт

Если в первой части мы заложили фундамент проекта (выбор инструментов, настройка окружения и структура), то здесь мы превратим этот каркас в полноценное API для управления резюме кошек (или людей — как вам ближе). Мы подключим базу данных, добавим тесты, настроим миграции и даже проверим всё в действии. К концу статьи у вас будет рабочее API, которое можно потрогать руками (или лапками 🐾). Полный код доступен на GitHub — ссылка в конце!

Читать далее

Магия CSS на практике: советы по вёрстке от гика. Часть 6

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели4K


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


Сегодня мы рассмотрим:

  • мой подход к написанию стилей для динамической сетки без использования БЭМ-модификаторов;
  • как я перестал писать свойство text-decoration со значением none для элемента <button>;
  • способ для вычисления значения свойства width в зависимости от контента элемента;
  • почему вам стоит удалить все стили с использованием псевдо-класса :focus.

Давайте посмотрим, что я вам подготовил.

Читать дальше →

Уехал на Чукотку, чтобы попасть во фронтенд. Вот что из этого вышло

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели1.4K

Как фокус только на обучении повлиял на результат и стоит ли сейчас идти во фронтенд? Вот моя честная история пути в IT. Она похожа на восхождение на вершину без акклиматизации.

Узнай мой кейс

Делаем авторизацию в Telegram Mini Apps правильно

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели14K

Если вас заинтересовала тема авторизации, подразумеваю, что вы уже итак знаете что такое Telegram Mini Apps. Поэтому не буду долго размусоливать вступление и перейду сразу к делу.

Поехали!

Читать далее

Разворачиваем микрофронты на Next.js

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели6.4K

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

Читать далее

Паттерны «Банды четырех»: примеры применения в реальном проекте

Уровень сложностиСредний
Время на прочтение16 мин
Охват и читатели9.7K

Как-то мне выпало написать небольшой микросервис, код которого практически полностью состоял их одних реализаций паттернов "Банды четырех". В этой статье я хочу рассказать о том, как последовательное решение поставленной задачи приводило к использованию все новых паттернов, и как эти паттерны взаимодействовали между собой.

Будет много схем и кода, демонстрирующих практические примеры применения паттернов Композит, Билдер, Визитер, Цепочка обязанностей и Декоратор. Не смотря на то, что примеры кода написаны на PHP, статья может оказаться интересной и для разработчиков, использующих другие языки.

Читать далее

Как я создавал Observability для своих pet-проектов. Часть 2

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели3.4K

В первой части мы развернули базовый стек для сбора метрик, логов и трейсов и интегрировали его с приложением на Laravel. Теперь покажу настройку Observability на примере простого Golang-приложения — настроим в нём структурированные логи, распределённый трейсинг и метрики, а также интегрируем с нашим стеком.

Читать далее

Особенности разработки и тестирования Telegram mini apps: от инициализации до запуска

Время на прочтение13 мин
Охват и читатели5.9K

В этой статье мы поделимся своим опытом разработки приложений в Телеграм и подробно остановимся на следующих вопросах:

‭• Что представляют из себя Telegram mini apps?
‭• Чем они отличаются от других платформ?
‭• Какие перспективы развития у Telegram mini apps?
‭• Как правильно тестировать Telegram mini apps с учетом особенностей платформы
‭• Как настроить окружение для будущего приложения и инициализировать telegram-apps sdk?
‭• Какие нюансы существуют при разработке Telegram mini apps?

Читать далее

Заводить ли личный блог или сайт? Часть II. Конифгурация сервера с помощью Ansible

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели686

Пришло время продолжить цикл статей о запуске личного блога. На очереди конфигурация сервера с помощью Ansible.

На очереди конфигурация сервера с помощью Ansible. Данная статья будет разделена на три блока: несколько слов о результатах первой статьи, блок о самом инструменте Ansible и блок о конфигурации сервера с помощью него. 

Читать далее

Запилил 100 проектов на Go и вот что скажу

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели18K

Когда начинаешь новый проект, то надо какое то время потратить чтобы подобрать подходящие библиотеки, подготовить структуру проекта, связать все воедино. Это занимает прилично времени. Целый день вполне может уйти. А экономить на этом шаге не стоит. Это ведь как фундамент. И вот, 5 лет назад я опубликовал каркас, который собрал для себя, чтобы делать с ним проекты на Go.

С тех пор мне обращались люди и с вопросами и с советами. Я менял компоненты, смотрел что получалось. Благо проектов было предостаточно. Вот и давайте подведем некий итог, что в заложенной структуре хорошо, а что не очень.

DI

По теме DI ко мне в чаще всего обращались с критикой, в том числе и коллеги. Поэтому с этого и начнем. В основном предлагали 2 идеи

Читать далее

Управление bluetooth из js или как я реверсинжинирил умный чайник

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели3.2K

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

Читать далее

Локаторы. Стратегии поиска веб-элементов

Уровень сложностиСредний
Время на прочтение15 мин
Охват и читатели4.9K

Какой бы инструмент вы ни выбрали для автоматизации тестирования, все они будут искать элементы с помощью локаторов, и обычно это означает, что вы, как тестировщик, должны их создавать используя селекторы. Какие бывают локаторы, как они выглядят, чем отличаются, какие лучше использовать, а какие избегать и почему, ответы прочтете здесь. Примеры скриптов на Playwright и Cypress.

Читать далее

Ближайшие события

Обсуждаем изменения в Go 1.24, мьютексы и пакет unsafe — открытие сезона митапов для гоферов в Москве

Время на прочтение2 мин
Охват и читатели1K

С приходом весны из-под сугробов снова начинают прорастать полезные митапы. На первой в сезоне Go-сходке от YADRO предлагаем присоединиться к обсуждению изменений Go 1.24. Эксперты из AvitoTech, Yandex и YADRO подискутируют, как обновления повлияют на код разработчиков. Также вы узнаете, как обеспечить высокопроизводительную конкурентность в Go и с умом применять пакет unsafe. 

Офлайн-участников ждет демозона с оборудованием для ЦОД и телеком-операторов, технические интерактивы и подарки. Регистрация открыта!

Читать далее

Полезные ресурсы по Python, которые я собрал

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели31K

Примерно два года назад я начал изучать Python и Django. В течение этого времени сохранял ссылки, которые считал полезными. Недавно решил структурировать их. Также стало интересно, а какие ресурсы считают полезными другие разработчики. В данной статье я собрал разнообразные ссылки по Python, которые сохранял, либо которые меня заинтересовали (внимание больше на web). Буду благодарен, если в комментариях поделитесь своими полезными ссылками.

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

Читать далее

Serverless-трекер поездов метро

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели2.4K

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

График поездов метро Нью-Йорка можно посмотреть на mta-trmnl.pages.dev. Исходный код моего проекта выложен на GitHub: фронтенд, бэкенд.

▍ Я безголовый


Просыпаясь утром, я каждый раз смотрю погоду и график метро, а затем иду в душ и сразу забываю эту информацию. Выхожу из душа, проверяю её снова, но пока одеваюсь, снова всё забываю. Ищу телефон, разблокирую его, обновляю виджет погоды и виджет метро так часто, что телефон отключает Face ID и заставляет меня ввести пароль. Ко времени, когда я надеваю обувь, я уже опаздываю, а когда спускаюсь по лестнице, до следующего поезда остаётся десять минут. Это очень раздражает.

Мне показалось, что идеально было бы, чтобы эта информация была видна всегда, находилась в одном и том же месте (посередине квартиры), чтобы на разблокировку и забывание тратилось меньше времени и внимания.
Читать дальше →

tabs-broadcast — библиотека для синхронизации вкладок

Уровень сложностиСредний
Время на прочтение18 мин
Охват и читатели1.5K

tabs-broadcast — это открытая библиотека JavaScript, предназначенная для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей. С помощью этой библиотеки разработчики могут организовать обмен сообщениями между вкладками так, будто это единое приложение, обеспечивая согласованность данных и оптимизируя нагрузку.

Какие задачи помогает решить tabs‑broadcast? В современных веб-приложениях пользователь нередко открывает одну и ту же страницу в нескольких вкладках. Без координации эти вкладки работают изолированно: могут дублировать дорогостоящие операции (например, загрузку одних и тех же данных), создавать конфликты состояний (например, разные вкладки по-разному отображают авторизацию или настройки) и увеличивать нагрузку на сервер (несколько соединений от одного пользователя). Библиотека tabs-broadcast предоставляет механизм единого центра управления для таких случаев. Она позволяет одной «главной» вкладке выполнять критичные задачи (синхронизация с сервером, получение обновлений, запись в хранилище и т.п.), а другим вкладкам — получать результаты и уведомления от неё. Для разработчиков это означает более простой код для синхронизации вкладок и избавление от ручного использования низкоуровневых API.

Почему это полезно? Во-первых, улучшение UX: пользователь всегда видит актуальное состояние во всех открытых окнах приложения. Во-вторых, оптимизация ресурсов: за счет того, что тяжелые операции выполняются только в одном экземпляре, снижается нагрузка на браузер (меньше потоков, соединений, таймеров) и на сервер (меньше дублирующих запросов). В-третьих, упрощается разработка функционала, требующего взаимодействия между вкладками (не нужно изобретать собственный велосипед на базе localStorage или postMessage). Библиотека предоставляет готовые инструменты для регистрации обработчиков событий и широковещательной рассылки сообщений, позволяя фокусироваться на логике приложения, а не на тонкостях межвкладочного взаимодействия.

Читать далее

«Идти в программисты сегодня — большая ошибка»: откровения техноблогера Михаила Ларченко

Уровень сложностиПростой
Время на прочтение18 мин
Охват и читатели73K

Что общего между космонавтом и программистом? Скоро эти профессии станут в равной степени бессмысленным выбором для карьеры. В интервью Youtube-каналу Ai4dev автор одного из самых интеллектуальных IT-каналов на YouTube, Fullstack-разработчик Михаил Ларченко рассказал, как искусственный интеллект уже переворачивает индустрию с ног на голову, почему европейские модели могут оказаться лучше американских, и что делать разработчику, чтобы не оказаться выброшенным на обочину технологического прогресса. 

Читать далее

Ramda.js — библиотека, которая избавит вас от reduce и map-каши

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели3.6K

Привет, Хабр!

Если вас когда-либо раздражало, что Array.prototype.map нельзя использовать для объектов или reduce постоянно требует передавать начальное значение, Ramda.js решает эти проблемы, делая код чище, декларативнее и удобнее.

Ramda — это библиотека для функционального программирования в JavaScript, которая по умолчанию не мутирует данные и поддерживает каррирование. В отличие от Lodash, где функциональность чаще заточена под удобство, Ramda больше ориентирована на чистоту кода и прогнозируемость работы функций.

Читать далее

Web 3 как замена Web 2 в стандартных задачах и есть ли в этом смысл

Время на прочтение3 мин
Охват и читатели1.7K

В этой статье я не буду говорить про NFT, про Ethereum и т.п. Я сосредоточусь на возможности и смысле перенести все доступное нам сейчас с Web 2 на Web 3.

Читать далее

Вклад авторов