Как стать автором
Поиск
Написать публикацию
Обновить
519.85

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

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

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

Обновление SPA приложения в браузере пользователя Node/React

Время на прочтение13 мин
Количество просмотров2K

Всем привет. Мне читатели иногда присылают сообщения с одним и тем же вопросом, что ты же Software Engineer и Solution Architect, но почти все твои статьи касаются бизнеса, менеджмента, процессов, управления командами и так далее. Но нет статей технического характера, про разработку и создание разных фич (feature) для проекта. Причина по которой это происходит в том, что весь интернет забит информацией о том, как программировать, но очень мало информации о том, что именно программировать, и о том, что за пределами кодинга огромное количество нерешенных проблем, которые нивелируют весь процесс программирования. Но сегодня я расскажу об одной фиче, которая может оказаться очень полезной для многих.

Читать далее

Snake, альтернатива Slick slider на чистом JavaScript

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров2.2K

Для создания современных сайтов разработчики все чаще стали пользоваться реактивными фреймворками или чистым JavaScript, отказываясь при этом от библиотеки jQuery. Однако остаются плагины, от которых не так просто отказаться. К таким относится Slick slider. Он очень удобен в использовании и сочетает в себе все необходимые для создания каруселей опции.

Читать далее

System Design Interview. Шаблон прохождения собеседования этого этапа

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

Недавно я собеседовался в Амазон и Майкрософт в офисы в Испании (так как я тут живу). Пока готовился много что понял, сейчас поделюсь.

Собеседование на проектирование систем.

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

Читать далее

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

Уровень сложностиПростой
Время на прочтение9 мин
Количество просмотров1.1K



За последние 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.7K

Что вас ждёт

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

Читать далее

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

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


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


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

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

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

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

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

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

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

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

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

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

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

Поехали!

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

Время на прочтение13 мин
Количество просмотров6.5K

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

DI

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

Время на прочтение2 мин
Количество просмотров1.8K

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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


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

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

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

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

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

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

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

Читать далее

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