Обновить
128K+

JavaScript *

Прототипно-ориентированный язык программирования

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

Изи-пизи автотесты на JavaScript

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

Автоматизация всё ещё остаётся сложным и затратным процессом. Часто на это уходит много времени QA-автоматизаторов и нередко самих разработчиков на проекте. Но все эти расходы можно сократить, если подойти к внедрению автотестов с умом.

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

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

Читать далее

React-three-fiber: повышаем производительность приложений

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

Бывает так, что ваше приложение обрабатывает графику и нуждается в высокой производительности – например, если это сервис для бронирования мест в зале, который мы показали в одной из прошлых статей. При этом зачастую нужны плавный зум или скроллинг элементов, а также поддержка различных библиотек. Рассмотрим, как сохранить производительность и скорость, на примере работы с библиотекой react-three-fiber.

Читать далее

Docker: заметки веб-разработчика. Итерация первая

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


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


Хочу поделиться с вами заметками о Docker.


Заметки состоят из 4 частей: 2 теоретических и 2 практических.


Если быть более конкретным:


  • эта часть посвящена самому Docker, Docker CLI и Dockerfile;
  • в второй части рассказывается о Docker Compose;
  • в третьей части мы разработаем приложение, состоящее из 3 сервисов (клиента, админки и API) и базы данных (PostgreSQL);
  • в четвертой части мы это приложение "контейнеризуем".

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

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

Отладка React для самых маленьких

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

Эта статья для тех, кто только начинает свой путь в написании больших React приложений, но все еще использует только console.log для их дебага. Мы с вами рассмотрим работу с расширением для браузера "React Developer Tools" на простом примере, который в дальнейшем вы сможете применить в своих проектах. Это расширение дает возможность просмотра дерева компонентов, их props, состояния и контекста. Также достаточно просто отловить неэффективные компоненты, которые подвергаются повторному рендерингу, посмотреть сколько на это уходит времени и построить графики для визуализации эффективности компонентов. Благодаря этой информации вы не только сможете оптимизировать ваше приложение, но и более глубоко изучить React и понять все тонкости работы с ним.

Читать далее

Делаем черный фон прозрачным без Photoshop и наложения screen

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

Преобразуем картинку с черным фоном в прозрачный фон без хитрых наложений слоёв в Photoshop'е и сохраним в прозрачный PNG. Пример кода на JavaScript.

Кодим далее

Использование Golang для разработки Node.js приложений (Node.js: In Go We Trust)

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

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

Как известно, Node.js хорошо справляется с I/O intensive задачами. А вот для решения CPU bound мы имеем несколько вариантов – child processes/cluster, worker threads. Также есть возможность использовать другой язык программирования (C, C++, Rust, Golang) в качестве отдельного сервиса/микросервиса или через WebAssembly скрипты.

В данной обзорной статье будут описаны подходы к использованию Golang в разработке Node.js приложений для запуска некоторых CPU intensive задач (простой суммы чисел, последовательности Фибоначчи, а также для таких хеш-функций как md5 и sha256).

Какие у нас есть варианты?

1. Попытаться решить CPU bound задачи только с помощью Node.js

2. Создать отдельный сервис, написанный на Golang и "общаться" с нашим приложением с помощью запросов/брокера сообщений и т.д. (в данной статье будут использованы обычные http запросы)

3. Использовать Golang для создания wasm файла, что позволит использовать дополнительные методы в Node.js

Читать далее

Как оптимизировать размер бандла SPA и ускорить загрузку приложения в несколько раз

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

Меня зовут Михаил Сахнюк и я разрабатываю фронтенд уже более шести лет. Сейчас я фронтенд разработчик в Miro. 

В статье рассмотрим:

• как оптимизировать веб-приложение и ускорить его загрузку;

• почему это важно;

• какие инструменты помогут в работе над оптимизацией, замерами и контролем результатов;

• преимущества работы с загружаемыми модулями в приложениях.

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

Статья — конспект моего доклада на конференции Mergeconf 2021 в Иннополисе. 

Читать далее

Обзор прошедших конференций JUG Ru Group и анонс весенних: Heisenbug, DotNext, HolyJS, JPoint, Mobius, C++ Russia, Hydra

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

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

— поделиться с Хабром видеозаписями общедоступной части (суммарно по всем конференциям это более ста часов видео!)

— анонсировать наш следующий конференционный сезон: уже можно и подавать заявки на доклады, и приобретать билеты

Расписали всё это про каждую конференцию отдельно: выбирайте в оглавлении интересную вам, чтобы увидеть и ссылку на её записи, и дату её следующего проведения.

Читать далее

Пример использования WebAssembly-модуля, скомпилированного из Rust, в React-приложении

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


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


На днях прочитал интересную статью, в которой демонстрируется возможность использования WebAssembly-модулей (далее — Wasm), скомпилированных из Rust, в React-приложении.


Так вот, статья интересная, но автор толком ничего не объясняет, видимо, исходя из предположения, что читатели, как и он, владеют обоими языками программирования (JavaScript и Rust).


Поскольку я не отношусь к этой категории (пока не знаю Rust), но люблю как следует разбираться в интересующих меня вещах, представляю вашему вниманию собственную версию.


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


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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №497 (6 — 12 декабря 2021)

Время на прочтение3 мин
Охват и читатели7.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Прогрессивный Petite-vue

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

Привет ?, это статья про progressive enchancement с помощью petite-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).

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

В общем (и целом), всё круто ?

Прогрессировать

Анимации в библиотеке компонентов: виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection

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

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

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

Читать далее

Деструктуризация массивов и объектов в JavaScript — в чем разница?

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

Деструктурирующее присваивание в JavaScript — это изящный способ извлечения значений из массивов и объектов, при котором в полной мере реализуется принцип DRY (англ. Don’t repeat yourself — «Не повторяйся»).

Цель этой статьи — продемонстрировать, как именно работают деструктурирующие присваивания массивов и объектов в JavaScript.

Поэтому без лишних слов предлагаю приступить к деструктуризации массивов.

Читать далее

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

Переход с Puppeteer на Playwright

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

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

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

Читать далее

Node.js: документирование и визуализация API с помощью Swagger

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



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


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


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


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


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





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


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

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

Добавление пользовательской темы для фронтэнд-приложений

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

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

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

С развитием интернета всё больше приложений перебираются на мобильные устройства и в браузер. Сегодня мы рассмотрим именно последний способ создания приложений – в виде сайтов – при этом учтем как современные приложения, так и enterprise-приложения, которые должны работать со старыми версиями браузеров. 

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

Читать далее

Разбор вступительных заданий в Школу Программистов hh.ru 2021

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

Привет! Подошел к концу двенадцатый набор в Школу Программистов hh.ru. Самое время рассказать, как Петр Васильевич раздавал премии менеджерам, кто вышел победителем из "Релиза до выходных" благодаря ролевому помощнику, и как впервые в истории Школы нам пришлось облегчить условия вступительного задания прямо во время набора. 

В этой статье будет подробный разбор заданий свежего набора в Школу Программистов hh.ru.

Поехали разбираться

HTTP/1 и HTTP/2 сервера на nodejs

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

Экспериментальная поддержка HTTP/3 уже встроена в основные браузеры и начинает потихоньку пробираться на сервера. А это значит, что уже можно полностью отказаться от использования в своих nodejs-приложениях от http-библиотеки и переключиться на http2. Насколько же отличается реализация http2-сервера от обычного http-сервера?

Под катом пример простого web-приложения, выполняющего типовые задачи (получение статики GET'ом, upload файлов, POST-запросы, server sent events) на серверах HTTP/1 и HTTP/2. HTTP/2 Server Push в данном примере не затрагивался. Приложение не использует внешних зависимостей (npm-пакетов), всё сделано при помощи собственного функционала nodejs.

Читать далее

Как мы переходили на Node.JS v16, или История о сломанном GC

Время на прочтение3 мин
Охват и читатели7.9K
26 октября 2021 года вышел новый релиз Node.JS 16.13.0 который стал Active LTS.

Как мы переводили на него наш сервис мониторинга и анализа логов PostgreSQL и с какими проблемами столкнулись — в статье ниже.

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

Торговый бот на Node.js и Tinkoff API (Часть 2) Кластеры

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

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

Читать далее