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

Привет👋 В последние годы среди фронтенд разработчиков Typescript используется практически везде по умолчанию, начиная небольшими пет-проектами и заканчивая огромнейшими веб-приложениями. Однако, до сих пор на некоторых проектах можно встретить кучу any и Function. Давайте разберемся используете ли вы этот невероятно мощный инструмент правильно?

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

Меня зовут Илья, я frontend-разработчик SimbirSoft. Долгое время вопрос изучения алгоритмов был холиварным. Со я временем убедился, что ни одно современное собеседование в крупную компанию не обходится без вопросов про алгоритмы, и в последний год их всё больше.

Даже если ты frontend-разработчик и решаешь прикладные задачи, тебе в любом случае придётся знать алгоритмы хотя бы на базовом уровне. Но статей на русском с объяснением алгоритмов и тем, как их реализовать на JavaScript, крайне мало. Поэтому хочу поделиться некоторыми алгоритмами сортировки и поиска, и немного рассказать про структуры данных. Знание алгоритмов и структур данных поможет вам в оптимизации приложений.

Статья будет полезна разработчикам любых направлений, которые начали свой путь к крепкому уровню middle.

• Цикл событий
  　Задачи, тики и Web API
  　Очередь задач
  　16,6 миллисекунды на задачу
  　Обработка больших задач
  　Микрозадачи
  　requestAnimationFrame
  　requestIdleCallback
  　Сравнение очередей
  　Цикл событий в Node.js
• Функции обратного вызова
  　Ад обратных вызовов
  　Не выпускайте Залго
  　Жёсткая сцепленность
  　Проблема доверия
• Обещания
  　Цепочки обещаний и проброс отказа
  　Неявное поведение
  　　Возвращение нового обещания
  　　Спрятанный try/catch
  　Thenable-объекты
  　Статические методы
  　　Promise.all
  　　Promise.race
  　　Promise.any
  　　Promise.allSettled
  　Промисификация
  　Обещания или функции обратного вызова?
  　Корутины
• Async/await
  　Верхнеуровневый await и асинхронные модули
  　Обработка ошибок
  　Не все await одинаково полезны
• Заключение

Привет, Хабр. Меня зовут Денис Былинин, я архитектор в компании Сравни. 

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

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

Кратко расписал об основных методах для работы с телеграм-ботами на NodeJS: текстовые сообщения, видео, фото и аудио-сообщения, контакты, геолокация, платежная система и проверка подписки на канал.

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

Представляю вашему вниманию перевод этой замечательной статьи.

Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!

Преимущества изучения TS могут быть сведены к следующему:

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

Эта статья представляет собой минимальное введение по использованию TS в React.

Антигероем нашей истории будет Пэт — очень неприятный технический директор.

Привет, Хабр! Меня зовут Алексей Гмитрон, я наставник на курсе «Веб-разработчик» Практикума, а также работаю фулстек-разработчиком. 

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

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

Эта статья предназначена для тех, кто только недавно научился писать свои первые программы на JavaScript и испытывает трудности при поиске багов. Статья не столько, не про конкретные инструменты и вкладки в DevTools, сколько про то, о чём думать и куда смотреть при отладке.

Пишем минималистичный кастомный select компонент для React приложения. Покрываем всё тестами на Jest.

В этой статье я поделюсь своим кратким обзором внедрения стейт-менеджера Effector в продуктовый проект на стеке React + TypeScript, а также покажу на примере, как легко это можно сделать.

Асинхронное программирование в однопоточных средах JavaScript

Оглавление

1. Введение в асинхронное программирование

По мере того как ваше приложение развивается и растёт, увеличивается и время его сборки — от нескольких минут при пересборке в development-режиме до десятков минут при «холодной» production-сборке. Это совершенно неприемлемо. Мы, разработчики, не любим переключать контекст в ожидании готовности бандла и хотим получать фидбек от приложения как можно раньше — в идеале за то время, пока переключаемся с IDE на браузер.

Как этого достичь? Что мы можем сделать, чтобы оптимизировать время сборки?

Эта статья — обзор существующих в экосистеме webpack инструментов для ускорения сборки, опыт их применения и советы.

Оптимизации размера бандла и производительности самого приложения в этой статье не рассматриваются.

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

Вам когда-нибудь хотелось узнать, как под капотом работают пакетные менеджеры (Package Manager, PM) — интерфейсы командной строки (Command Line Interface, CLI) для установки зависимостей проектов наподобие npm или yarn? Если хотелось, тогда эта статья для вас.

В данном туториале мы разработаем простой пакетный менеджер на Node.js и TypeScript. В качестве образца для подражания мы будем использовать yarn. Если вы не знакомы с TS, советую взглянуть на эту карманную книгу.

Наш CLI будет называться my-yarn. В качестве lock-файла (yarn.lock, package-lock.json) он будет использовать файл my-yarn.yml.

Источник вдохновения.

Код проекта.

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

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

• TypeScript — статический типизатор;
• NestJS — сервер;
• Socket.IO — библиотека для работы в веб-сокетами;
• React — клиент;
• TailwindCSS — библиотека для стилизации;
• PostgreSQL — база данных (далее — БД);
• Prisma — ORM;
• Docker — платформа для разработки, доставки и запуска приложений в изолированной среде — контейнере.

Функционал чата будет таким:

• фейковая регистрация пользователей:
  
  • хранение имен пользователей в памяти (объекте) на сервере;
  • хранение имен и идентификаторов пользователей в localStorage на клиенте;
• регистрация подключений и отключений пользователей на сервере и передача этой информации подключенным клиентам;
• запись, обновление и удаление сообщений из БД в реальном времени на сервере и передача этой информации клиентам.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

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

На днях прочитал эту интересную статью, посвященную различным вариантам хранения токена доступа (access token) на клиенте. Мое внимание привлек вариант с использованием сервис-воркера (service worker) (см. "Подход 4. Использование service worker"), поскольку я даже не задумывался о таком способе применения этого интерфейса.

СВ — это посредник между клиентом и сервером (своего рода прокси-сервер), который позволяет перехватывать запросы и ответы и модифицировать их тем или иным образом. Он запускается в отдельном контексте, работает в отдельном потоке и не имеет доступа к DOM. Клиент также не имеет доступа к СВ и хранимым в нем данным. Как правило, СВ используется для обеспечения работы приложения в режиме офлайн посредством кэширования критически важных для работы приложения ресурсов.

В этой статье я покажу, как реализовать простой сервис аутентификации на основе JSONWebToken и HTTP Cookie с хранением токена доступа в сервис-воркере.

Для тех, кого интересует только код, вот ссылка на соответствующий репозиторий.

Интересно? Тогда прошу под кат.

В связи с быстро меняющимися технологиями разработчикам предоставляются невероятные инструменты и технологии.

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

Давайте взглянем на некоторые полезные веб-API, которые могут помочь вам поднять ваш сайт до небес! (ну или около того)

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

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

Статья состоит из 2 частей: теоретической и практической. В теоретической части мы кратко рассмотрим возможности, предоставляемые Internationalization API. В практической — создадим пример локализованного приложения с помощью разработанной мной утилиты.

Первое мое знакомство с Mobx началось с удивления. Я не понимал всю магию библиотеки и задавал себе вопрос: “А как это возможно?”. Кажется, в ней используются какие-то подкапотные возможности JS или Mobx вообще написан на другом языке. 

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

В этой статье мы создадим свой Mobx с нуля, а так же свяжем его с React, через собственно написанный HOC observer. В конце у вас будет общее понимание реактивности, которое поможет в самостоятельном осмыслении не только Mobx, но и других реактивных библиотек и фреймворков.

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

В этой небольшой заметке я расскажу вам о том, как генерировать и визуализировать документацию к API с помощью Swagger.

Мы разработаем простой Express-сервер, способный обрабатывать стандартные CRUD-запросы, с фиктивной базой данных, реализованной с помощью lowdb.

Затем мы подробно опишем наше API, сгенерируем JSON-файл с описанием и визуализируем его.

Так, например, будет выглядеть описание POST-запроса к нашему API:

Исходный код проекта.

Если вам это интересно, прошу под кат.