Обновить
512K+

JavaScript *

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

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

Основы фронтенд-разработки: фреймворки, DOM-дерево, взаимодействие с бэкендом

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

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

Делаем бесконечную рабочую область без Canvas

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

Рабочее пространство в нашем приложении представляет собой бесконечную доску, по которой могут перемещаться ноды. Необходимо реализовать масштабирование этого пространства и перемещение по нему. Все это мы делаем без использования Canvas, так как приложение построено на React, в дизайн-системе используется antd, а ноды могут быть огромными формами. Согласитесь, реализовывать такие интерфейсы было бы гораздо сложнее, не будь у нас доступа к нативным средствам HTML-5.

Читать далее

Встраиваем JS- скрипты в PDF для социальной инженерии — пошаговое руководство

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

Введение

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

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

Мы, Маргарита Белоусова, аналитик аналитического центра и Анастасия Прядко, специалист по анализу защищенности компании УЦСБ написали пошаговую инструкцию, как сделать фишинговый документ: детали и примеры кода. Кроме того, мы кратко рассмотрели структуру PDF-файла, как и куда в него внедрять JavaScript, а также способы маскировки факта внедрения скрипта. Наш опыт пригодится безопасникам, системным администраторам и всем, кто связан с ИБ.

Структура PDF

Организация данных в памяти

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

Читать далее

Node.JS: заменили модуль SSH2 на OpenSSH и снизили задержки eventloop в 15 раз

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

В нашем сервисе мониторинга и анализа PostgreSQL доступ к серверам осуществляется по протоколу SSH. В качестве ssh-клиента мы используем популярный модуль SSH2 , однако при передаче данных большого объема этот модуль вносит существенные задержки в event loop. Как их можно снизить - расскажем в этой статье.

Читать далее

Как создать монорепозиторий с несколькими сервисами, используя Lerna и Yarn?

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

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

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

После освоения туториала разработчик получат полное понимание того, как создавать масштабируемые и поддерживаемые приложения, используя подход монорепозитория. Он также получит знания о необходимых инструментах и знаниях для перехода на новый уровень разработки. Давайте приступим!

Читать далее

Гугл таблица как БД для телеграм бота

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

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

Читать далее

Ethers js — основы

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

В статье рассказываю про опыт изучения 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 мин
Охват и читатели3K

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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, тем вероятнее, что ручная верификация станет неуправляемой.
Читать дальше →