Как стать автором
Обновить
208.05

JavaScript *

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

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

Удобства и боли рендеринга с React-pdf: опыт использования

Время на прочтение 8 мин
Количество просмотров 1.8K
Блог компании «Лаборатория Касперского» Информационная безопасность *JavaScript *Анализ и проектирование систем *ReactJS *
Привет, Хабр! Меня зовут Алексей Сингур, я — фронтенд-разработчик в проекте KICS (Kaspersky Industrial CyberSecurity) for Networks «Лаборатории Касперского». Если коротко, то наш продукт защищает промышленные инфраструктуры и сети от киберугроз: анализирует трафик для выявления отклонений и обнаружения признаков сетевых атак, чтобы обеспечивать предприятию непрерывность процессов.

image

Одной из фичей KICS for Networks является генерация отчетов о сканировании инфраструктуры в формате PDF. При разработке этой фичи пришлось погрузиться в вопрос верстки и рендеринга PDF на Node.js. Речь пойдет об использовании для этих целей библиотеки React-pdf (в нашем проекте мы пока используем версию 2.1.1.), которая может показаться весьма экзотичной, если судить по количеству статей и отзывов в Интернете :)

Пост будет полезен веб-разработчикам для расширения кругозора в области инструментов рендеринга PDF, а также заинтересованным в генерации PDF-документов на стороне клиента или сервера.
Читать дальше →
Всего голосов 15: ↑15 и ↓0 +15
Комментарии 6

Новости

Устраняем недостаток микрофронтендов: четыре способа коммуникации между frontend-приложениями

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 1.2K
Блог компании SimbirSoft Разработка веб-сайтов *JavaScript *Программирование *
Туториал

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

Меня зовут Игорь, я frontend-разработчик SimbirSoft. Ранее мы с коллегами рассматривали вопрос построения архитектуры микрофронтендов. А в этой статье я разберу основные способы коммуникации между отдельными приложениями, которые можно применять в коммерческой разработке. Материал будет полезен разработчикам и архитекторам frontend-приложений.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 0

React: революция использования фигурных скобочек

Уровень сложности Простой
Время на прочтение 6 мин
Количество просмотров 3.7K
JavaScript *ReactJS *

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

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

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

Читать далее
Всего голосов 7: ↑7 и ↓0 +7
Комментарии 9

Butterflynet. Обзор приложения с JS на Android

Уровень сложности Средний
Время на прочтение 4 мин
Количество просмотров 1.2K
CSS *JavaScript *HTML *
Из песочницы

Чуть больше года назад у меня появилась идея сделать мобильное приложение, в котором можно будет писать код и смотреть результат прямо «не отходя от кассы». Для реализации такого «механизма» был выбран язык JS и HTML в качестве каркаса для представления. Разработка велась на Xamarin. Давайте посмотрим, что из этого вышло.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 0

Истории

JavaScript для самых маленьких. Часть 2

Время на прочтение 8 мин
Количество просмотров 3K
Блог компании ГК ЛАНИТ JavaScript *Программирование *
Туториал

Не так давно в блоге ЛАНИТ на Хабре мы представили вашему вниманию часть нашей методички по JavaScript. Сегодня же предлагаем ознакомиться с ещё одним блоком, который затрагивает самые базовые и необходимые понятия для тех, кто только начинает свой путь в мире JavaScript. Первую часть можно найти тут ― ну, чтобы всё слилось воедино. Продолжаем?

Читать далее
Всего голосов 39: ↑37 и ↓2 +35
Комментарии 3

Алгоритмы поиска подстроки на JavaScript

Уровень сложности Средний
Время на прочтение 5 мин
Количество просмотров 5.5K
JavaScript *Алгоритмы *
Туториал

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

Как говорит Википедия «Поиск подстроки в строке — одна из простейших задач поиска информации», но это не совсем так, ниже я расскажу про разные алгоритмы решения и покажу примеры их реализации. Начнем!

Читать далее
Всего голосов 9: ↑9 и ↓0 +9
Комментарии 14

Документирование API сервисов с помощью Swagger на примере фреймворков Express.js и Gin

Уровень сложности Средний
Время на прочтение 41 мин
Количество просмотров 3.8K
JavaScript *Node.JS *API *Go *

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

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

Основное внимание в статье будет уделено автоматизации процесса создания документации API сервисов, которые разрабатываются с помощью фреймворков Express.js и Gin, используя подходящий для этой задачи инструмент - Swagger.

Читать далее
Всего голосов 5: ↑3 и ↓2 +1
Комментарии 2

Рендеринг модальных окон с помощью функций на Vue

Уровень сложности Средний
Время на прочтение 6 мин
Количество просмотров 3K
JavaScript *VueJS *TypeScript *
Туториал

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

Вперед под кат
Всего голосов 3: ↑2 и ↓1 +1
Комментарии 5

Вышел Chrome 113

Уровень сложности Простой
Время на прочтение 3 мин
Количество просмотров 8K
CSS *JavaScript *Google Chrome HTML *
Обзор
Перевод

Что вы узнаете:

WebGPU уже здесь, он позволяет использовать высокопроизводительную 3D-графику и параллельные вычисления в вебе.

С помощью инструментов разработчика теперь можно переопределять заголовки ответов сети.

Начинает распространяться First Party Sets, часть Privacy Sandbox, которая позволяет организациям объявлять связанные сайты.

И многое другое.

Читать далее
Всего голосов 7: ↑6 и ↓1 +5
Комментарии 8

Расширенные концепции JavaScript для написания качественного, поддерживаемого кода

Уровень сложности Простой
Время на прочтение 15 мин
Количество просмотров 5.3K
JavaScript *Программирование *
FAQ
Перевод

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

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

Читать далее
Всего голосов 7: ↑5 и ↓2 +3
Комментарии 5

Как я написал удобную оболочку над электронным дневником

Уровень сложности Простой
Время на прочтение 4 мин
Количество просмотров 12K
Разработка веб-сайтов *CSS *Python *JavaScript *HTML *
Из песочницы

Статья о том, как я в 15 лет облегчил работу с электронным дневником, представленным Кировской области в 2022 году.

Что получилось сделать и как это было реализовано.

Читать далее
Всего голосов 65: ↑65 и ↓0 +65
Комментарии 17

Пишем свой хук для отслеживания изменений в LocalStorage

Уровень сложности Простой
Время на прочтение 2 мин
Количество просмотров 6.5K
JavaScript *ReactJS *
Из песочницы

В рамках своей работы, я не раз сталкивался с проблемой, что нужно отслеживать изменение в LocalStorage в совершенно независимых компонентах.

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

Читать далее
Всего голосов 12: ↑8 и ↓4 +4
Комментарии 5

Я хотел улучшить React

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 7.5K
JavaScript *Angular *ReactJS *VueJS *TypeScript *
Из песочницы

Я давно пишу код, а React использую более пяти лет.

За это время у меня возникло несколько идей о том, как можно было бы улучшить React.

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

А о том, что из этого вышло, я бы хотел рассказать в этой статье.

Читать далее
Всего голосов 8: ↑6 и ↓2 +4
Комментарии 30

Загрузчик файлов для React

Уровень сложности Сложный
Время на прочтение 13 мин
Количество просмотров 2.6K
Разработка веб-сайтов *JavaScript *ReactJS *TypeScript *
Туториал

Пишем drag-and-drop загрузчик файлов для React приложения.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Комментарии 0

Валидация форм без зависимостей

Уровень сложности Средний
Время на прочтение 13 мин
Количество просмотров 3.1K
JavaScript *ReactJS *TypeScript *
Туториал

Пишем систему валидации форм для React приложений

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Комментарии 8

Интересные трюки HTML, CSS и JS

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 12K
Блог компании RUVDS.com CSS *JavaScript *HTML *Браузеры
Туториал

Здесь вы найдёте небольшую подборку нестандартных вариантов использования HTML/CSS/JS. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления.

Примечание. Некоторые трюки основаны на открытых уязвимостях браузеров и поисковой системы Google и др. Поэтому могут перестать работать в ближайшее время (или продолжат, если разработчики не признают баги и не захотят их исправлять). Другие функции работают только начиная с конкретных версий Chrome, Firefox и т. д.
Читать дальше →
Всего голосов 55: ↑52 и ↓3 +49
Комментарии 17

Переключение цветовых тем в React приложении

Уровень сложности Средний
Время на прочтение 8 мин
Количество просмотров 3.9K
CSS *JavaScript *ReactJS *
Из песочницы

Данный гайд описывает один из возможных подходов к организации фичи темизации приложения.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Комментарии 3

Тестирование данных Excel файла с помощью Cypress

Время на прочтение 6 мин
Количество просмотров 1.7K
Тестирование IT-систем *JavaScript *Node.JS *Тестирование веб-сервисов *TypeScript *
Кейс

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

Несколько дней назад в одном из обсуждений в сообществе Cypress на Discord мельком был затронут вопрос о том, как проверить данные из файла Excel с помощью Cypress. Это подтолкнуло меня сделать несколько полезных заметок, ставших основой для данной статьи.

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

Оригинал статьи на английском языке был включен в 136th Coding Jag от LambdaTest, а также в Issue #82 Software Testing Notes.

Читать далее
Рейтинг 0
Комментарии 8

Как я сделал SPA в два раза быстрее

Уровень сложности Средний
Время на прочтение 10 мин
Количество просмотров 16K
Разработка веб-сайтов *JavaScript *Программирование *Клиентская оптимизация *VueJS *
Из песочницы

Существует огромное множество статей про оптимизацию загрузки веб-сайтов, но часто они обходятся лишь общими советами или абстрактными примерами. В этой статье я хочу поделиться своим опытом комплексной оптимизации реального проекта с конкретными примерами, в данном случае SPA, написанном на Vue 3 с использованием Vuetify для части UI компонентов и Firebase для авторизации.

Немного контекста: я работаю frontend-разработчиком в компании, которая в основном занимается разработкой MVP (Minimum Viable Product), но так же и разработкой и поддержкой долгоживущих продуктов. Как раз у MVP бывает много проблем, потому что минимум времени уделяется под рефакторинг и оптимизацию, а проблемы между проектами повторяются, потому что часто используется один стартовый шаблон.

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

Читать далее
Всего голосов 33: ↑32 и ↓1 +31
Комментарии 24

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

Работа