Обновить
243.89

JavaScript *

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

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

Внутри Mailion: как устроен фронтенд почты на миллион пользователей

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

Недавно мы представили защищенную корпоративную почтовую систему «Mailion. Сертифицированный» — единственную на российском рынке с действующим сертификатом ФСТЭК России. Продукт предназначен для работы с конфиденциальной информацией в крупных коммерческих и государственных организациях.

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

Под катом — наш рассказ об устройстве пользовательской части Mailion. Говорим об архитектуре фронтенда и о том, как и почему менялся его стек с начала разработки в 2017 году.

Читать далее

Как фронтендер подписывать CSR учился

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

В статье рассказываю про опыт изучения Certificate Signing Request (CSR) формата. О том, что такое PEM, DER, какова структура самого CSR файла и как последний подписывается. А также поделюсь, с какими сложностями в процессе изучения я столкнулся.

Читать далее

Бесплатный мультиязычный чат для сайта на Tawk + Notion + Telegram + chatGPT + GPT-Index

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

Вы хотите общаться с посетителями сайта на всех языках и при этом чтобы вам помогал обученный на вашей базе знаний chatGPT?

Я следил за различными видами использования chatGPT с момента его выхода. Предлагаемое в статье решение я еще не встречал и поэтому думаю оно будет кому-то полезным.

Читать далее

Возможности JavaScript и TypeScript последних лет. Часть 1

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


Hello, world!


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


В первой части мы поговорим о возможностях JS, во второй — о возможностях TS.


Это первая часть.


Вот ссылка на вторую часть.


Обратите внимание: название почти каждой возможности — это также ссылка на соответствующий раздел MDN.


Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, а также Блог по веб-разработке.

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

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)

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

Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue. Первые 3 принципа я опубликовала вчера. Здесь еще 3.

Читать далее

Снова про ARIS. Коллекция «велосипедов» для разработчика

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

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

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

Читать далее

Код: маленький и ненужный

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

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

Читать далее

Правильно ли вы используете useSelector в Redux?

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

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

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

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

Читать далее

Учимся тестированию с помощью Bootstrap

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

Ознакомительное руководство по использованию Bootstrap для создания веб-страниц и тестирования. Здесь вы узнаете, из чего состоит фреймворк Bootstrap, какие есть варианты его установки и использования, а также как именно с его помощью можно создавать веб-страницы и тестировать их.
Читать дальше →

Веб-скрейпинг с помощью JavaScript и Node.js — исчерпывающее руководство

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

JavaScript сегодня стал одним из наиболее предпочтительных языков для веб-скрейпинга (web scraping). Его способность извлекать данные из SPA (Single Page Application) [одностраничное приложение] повышает его популярность. Разработчики могут с легкостью автоматизировать свои задачи при помощи таких библиотек, как Puppeteer и Cheerio, которые доступны в JavaScript.

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

Читать далее

Очередной этап сделайсама: микроконтроллеры + JS

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

Привет, Хабр! Сегодня мы поговорим о том, как сделать систему управления отоплением в загородном доме своими руками, используя легкодоступные микроконтроллеры и свободное ПО…причем сделать её так, чтобы можно было запрограммировать работу нужных устройств при помощи моего любимого JavaScript. Под катом — разбор трех вариантов решения этой задачи (включая тот самый, который я выбрал), а также масса рассуждений о преимуществах и недостатках данного подхода. Всех любителей сделайсамов и очумелых ручек приглашаю под кат.

Читать далее

Встраивание WebGL в HTML-страницу с помощью Three.JS

Уровень сложностиСложный
Время на прочтение15 мин
Охват и читатели8.8K

demo, github

Приветствую! Я Алексей, frontend‑разработчик в SimbirSoft. Вы, возможно, видели потрясающие веб‑сайты, представленные на www.awwwards.com. Это онлайн‑каталог лучших веб‑сайтов, который оценивает и награждает творческие и инновационные работы веб‑дизайнеров и разработчиков. На этом сайте можно найти множество примеров креативного веб‑дизайна, анимаций и визуальных эффектов. Такие удивительные анимации обычно разрабатываются с использованием WebGL. Эта технология позволяет более свободно и творчески подходить к созданию впечатляющих визуальных эффектов без ущерба для производительности. Для работы с WebGL используются такие библиотеки, как Three.js, PIXIJS или BABYLON, которые также популярны при создании игр.

В данной статье мы рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js. Работа с ней во многом схожа с работой 3D‑редактора (3ds Max, Maya, Blender и т. д.). Для получения результата в виде картинки или анимации необходимо создать сцену, поместить в нее камеру, создать примитив (геометрию или 3D‑модель), создать источник освещения и запустить процесс рендеринга.

Эта статья будет полезна middle и senior фронтенд‑разработчикам, которые хотят ознакомиться с Three. В статье очень мало теории и вводных материалов, акцент сделан на практической части. Если вы совсем не знаете, как работает Three.js и шейдеры, рекомендую вначале ознакомиться с этой технологией, а после вернуться к статье.

Читать далее

Тестирование UI в JavaScript – наилучшие практики

Время на прочтение9 мин
Охват и читатели11K
image
Это руководство по наилучшим практикам в тестировании UI на JavaScript, от разработки через поведение (BDD) до соглашений об именовании и до того, какие именно операции браузер должен выполнять в рамках тестов.

От качества UI (пользовательского интерфейса) зависит, состоится приложение или развалится. Для вас принципиально, какое первое впечатление пользователь получит от приложения, так как второго шанса у вас может и не быть. Поэтому важность тестирования UI при разработке приложений только растёт. В процессе тестирования UI проверяются те аспекты работы программы, с которыми придётся непосредственно иметь дело пользователю. Но какими методами и приёмами нужно пользоваться, чтобы добиться максимальной эффективности тестирования? В этой статье мы поговорим именно о таких инструментах, использовать которые можно прямо с сегодняшнего дня. Начнём.

Если вы автоматизируете тесты UI при помощи тестировочного инструмента, то можете:
  • Убедиться, что элементы UI не схлёстываются и не смещены,
  • Проверить, нет ли ошибок в правописании, капитализации или пунктуации,
  • Гарантировать, что шрифт чёткий и хорошо читается, подобрать цвет и кегль шрифта,
  • Проверить выравнивание изображений,
  • Убедиться, что в браузере правильно выводятся сообщения об ошибках,
  • Проверить положение элементов UI при разных разрешениях экрана.

Но, если эти тесты не автоматические, то такой процесс может быть обременителен. Ручное тестирование – сильный метод, и он бывает эффективен, если в программе предусмотрено не так много элементов UI или находится на ранней стадии разработки. Однако, чем больше фич подхватывается в программу, и чем больше элементов добавляется в UI, тем вероятнее, что ручная верификация станет неуправляемой.
Читать дальше →

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

Playwright и Puppeteer в 2023 году: что выбрать

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

Дебаты по поводу выбора между Playwright и Puppeteer — это большая дискуссия, поскольку они обе являются фантастическими библиотеками Node.js для автоматизации браузера. Хотя эти библиотеки делают практически одно и то же, между Puppeteer и Playwright есть несколько заметных различий.

Читать далее

React и Typescript: Создание динамического компонента на примере кнопки

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

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

Читать далее

Генерируем рецепты блюд на JS и цепях Маркова

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели3.6K


Когда-то меня очень радовал один паблик в соцсети ВК. По заявлениям администрации нейросеть генерировала рецепты, которые и составляли 99% контента. Вероятно, действительно это была простенькая нейросеть вроде RNN или LSTM. К сожалению, последний пост в паблике датирован 2019 годом, а моя тяга к изысканным блюдам не угасла, поэтому было решено сделать генератор рецептов на JS и цепях Маркова. Почему не повторить эксперимент с более продвинутой доступной нейросетью вроде GPT-2? Потому что для ее обучения требуется достаточно много времени, ресурсов и данных.

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

Переходите на микрофронтовую архитектуру

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

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

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

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

Полезная ссылка с подробным объяснением концепции микрофронтенда.

Читать далее

Типизируй с нами, типизируй, как мы…

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

Сказ о том, как я каррирование типизировал

Читать далее

Что нового в Chrome 111?

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

Давайте погрузимся внутрь и посмотрим, что нового ждет разработчиков в Chrome 111.

Читать далее

Кастомная стратегия виртуального скроллинга для просмотра pdf

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

Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. В данной статье мы рассмотрим как построить такую стратегию для pdf-документов.

Читать далее

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