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

JavaScript *

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

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

taichi.js: Программируем на WebGPU без боли

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

Привет, Хабр! Сегодня хочу предложить вашему вниманию перевод на русский язык статьи моего коллеги и хорошего приятеля Dunfan Lu. Он создал taichi.js - open-source фреймворк для программирования графики на WebGPU, и написал подробный туториал как его использовать на примере знаменитой "Игры жизни". Уверен, эта сложная и красивая работа на стыке технологий рендеринга и компиляции не оставит вас равнодушными. - пр. переводчика.

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

Архитектура и реактивное программирование

Уровень сложности Средний
Время на прочтение 9 мин
Количество просмотров 23K
reactivity as a pattern for low models coupling

Что такое реактивное программирование? Не Rx. И даже не Excel. Это архитектурный паттерн, позволяющий абсолютно иначе писать код. В статье мы устаканим фундаментальные знания, утвердимся в том, что React.js всё же является реактивным, и подумаем о том, как и когда нужно, а когда не нужно применять паттерны реактивного программирования.
Читать дальше →
Всего голосов 48: ↑47 и ↓1 +46
Комментарии 46

Как мы решили проблему общения микрофронтендов в приложении

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

Всем доброго дня! Меня зовут Семен, в команде я отвечаю за работу с Angular.

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

Внедряя МФ, разработчики сталкиваются с новыми проблемами. Один из таких челленджей возникает при разработке: как грамотно организовать передачу данных между микрофронтендами? Расскажу о нашем опыте и поделюсь решением для их общения. 

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

Обеспечение безопасности Frontend приложений

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

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

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

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

Истории

Рендеринг на сервере и HTMX — это будущее

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

Современная ситуация с разработкой веб-приложений


Сегодня пользователи ожидают от веб-приложений плавной работы без перезагрузок страниц. К сожалению, эти ожидания обычно реализуются в виде одностраничных приложений (single-page application, SPA), использующих библиотеки и фреймворки наподобие React и Angular. Эти фреймворки очень специализированы и с ними может быть трудно работать.

Новый подход заключается в том, чтобы вернуть возможность реализации этого UX в руки инженеров, разрабатывавших веб-сайты до возникновения безумия SPA, используя готовые наборы инструментов и знания. HTMX — лучший пример такого подхода из тех, что я видел.
Читать дальше →
Всего голосов 81: ↑72 и ↓9 +63
Комментарии 146

Из лягушек в автоматизаторы — мое решение

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

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

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

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

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

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

Карта, золото, «Герои»: продолжаем разбираться в технико-исторической части HeroWO.js — браузерного клона культовой игры

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

TL;DR для тех, кому некогда читать™:




День пятый
Всего голосов 43: ↑42 и ↓1 +41
Комментарии 10

Учимся писать сложные Typescript типы на примере роутинга в React

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

Вы используете TypeScript, но впадаете в ступор перед, когда видите типы в сторонних библиотеках? Generics, generic constraint, infer, rest infer, conditional и recursive types, satisfies вызывают головную боль? Мы постараемся снизить градус сложности и напишем типы для роутинга в React приложении. Данный материал будет полезен как фронтендерам, так и бекендерам.

Хочу писать типы как профессионал
Всего голосов 15: ↑15 и ↓0 +15
Комментарии 0

Как yarn v3 и философия Zero Installs помогли нам сократить длительность ci/cd пайплайна в 3 раза

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

Всем привет, меня зовут Фёдор — я руководитель фронтенд-разработки на проекте Smartbot Pro в компании KTS

Наш проект — конструктор ботов для социальных сетей, в котором алгоритм бота представлен в виде визуального графа. Конструктор включает большое количество интеграций. Недавно на проекте остро встал вопрос оптимизации наших ci/cd пайплайнов, потому что релиз мог занимать от 4 до 18 минут.

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

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

Представляем вам Vue 3.3

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

Сегодня мы рады объявить о релизе Vue 3.3 "Rurouni Kenshin"!

Этот выпуск сосредоточен на улучшении опыта разработки - в частности, на использовании SFC <script setup> с TypeScript. Вместе с релизом 1.6 Vue Language Tools (ранее известного как Volar) мы решили многие давние проблемы при использовании Vue с TypeScript.

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

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

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

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

image

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

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

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

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

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

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

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

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

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

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

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

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн

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

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

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

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

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

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

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

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

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

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

Исправляем грамматику с помощью GPT-4 API

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

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

Однако, при использовании веб-версии ChatGPT возникают некоторые проблемы:

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

2. Не используется вся мощь API, в котором есть возможности для более тонкой настройки бота: можно задать системное сообщение, в котором объяснить ассистенту смысл его существования; few-shot learning: можно предоставить набор примеров коррекции сообщений

3. Неудобство: нужно вставлять свой текст в веб-версию, затем набирать свой промт для его улучшения (который может быть разным в зависимости от типа коррекции). Хотелось бы иметь Web UI, где нужно просто вставить текст и выбрать тип коррекции - а далее текст будет обрабатываться оптимизированным промтом

Данный проект призван устранить эти недостатки. Потыкать приложение можно здесь (для использования нужен OpenAI API-ключ).

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

AbortController: Варианты применения для эффективного управления асинхронными операциями

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

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

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

XSS атакует! Не краткий обзор где и как искать уязвимости

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

Казалось бы, XSS уязвимостям уже 100 лет в обед: написано огромное количество материала на эту тему, браузеры и инструменты которые мы используем тоже развиваются и добавляются новые уровни защиты. Но тема не перестает быть актуальной, ведь в новой версии Top 10 Web Application Security Risks (правда двухлетней давности) XSS уязвимости по-прежнему входят в ТОП 10 самых опасных и распространенных уязвимостей (хоть и включены теперь в группу injection), и 21% всех уязвимостей, найденных в web-приложениях были именно XSS. 

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

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

Что JS-разработчики смогут узнать на HolyJS 2023 Spring

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

Впервые за годы у конференции HolyJS будут два офлайн-дня, так что 21 и 22 мая JavaScript-разработчики смогут встретиться в Москве и вдоволь наобщаться. Но и любители онлайна не забыты: к московской части можно будет подключиться удалённо, а ещё будут два полностью онлайновых дня.

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

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

Расширение для скачивания видео с VK в один клик. Теперь и для desktop-а

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

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

На тот момент всё ограничилось возможностью скачивания лишь с мобильной версии сайта, так как из неё проще всего вытащить прямые ссылки на .mp4 файлы. Вчера у меня всё же дошли руки до того, чтобы заставить расширение работать и на полной версии сайта. И вот как я это сделал.

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

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

Работа