Прототипно-ориентированный язык программирования
Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue. Первые 3 принципа я опубликовала вчера. Здесь еще 3.
Нестандартные подходы к написанию скриптов, разработка собственных библиотек и другая полезная информация для разработчиков скриптов ARIS.
Если Вы уже знаете что такое ARIS, то добро пожаловать. Если нет, то можете прочитать вот эту статью.
В данной статье речь пойдет о некоторых трюках для сокращения кода для JavaScript на конкретном примере. Надеюсь, название сразу говорит за себя, и никто не будет использовать приемы отсюда для написания кода в реальной разработке. Все, что происходит здесь, стоит воспринимать не более чем игрой-головоломкой ради развлечения и проверки знаний в некоторых тонкостях языка.
Всем привет, данная статья направлена на то, чтобы добавить понимания при использовании хука useSelector в разработке. Надеюсь, у меня получилось ниже раскрыть какую-то часть информации, которая поможет разработчикам, которые раньше не знали данной информации.
Все, кто использует Redux в React так или иначе знают, что useSelector является одним из основных хуков для получения данных из стора Redux в компонентах и кастомных хуках React. При этом часть разработчиков даже не подозревает о возможных проблемах, которые могут возникать в работе, если не обдумывать некоторые моменты разработки, используя данный хук.
Речь пойдет о проблемах, которые могут возникать при деструктуризации данных из стора с использованием useSelector.
Веб‑скрейпинг давно перестал быть задачей только для Python: в экосистеме JavaScript есть достаточно инструментов, чтобы собирать данные со статичных страниц, работать с динамическим контентом и автоматизировать браузерные сценарии.
В статье разбираем, чем отличаются Axios, Cheerio, Puppeteer, Playwright и другие библиотеки для скрейпинга на Node.js — и в каких случаях их стоит использовать.
Привет, Хабр! Сегодня мы поговорим о том, как сделать систему управления отоплением в загородном доме своими руками, используя легкодоступные микроконтроллеры и свободное ПО…причем сделать её так, чтобы можно было запрограммировать работу нужных устройств при помощи моего любимого JavaScript. Под катом — разбор трех вариантов решения этой задачи (включая тот самый, который я выбрал), а также масса рассуждений о преимуществах и недостатках данного подхода. Всех любителей сделайсамов и очумелых ручек приглашаю под кат.
Приветствую! Я Алексей, 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 и шейдеры, рекомендую вначале ознакомиться с этой технологией, а после вернуться к статье.
Дебаты по поводу выбора между Playwright и Puppeteer — это большая дискуссия, поскольку они обе являются фантастическими библиотеками Node.js для автоматизации браузера. Хотя эти библиотеки делают практически одно и то же, между Puppeteer и Playwright есть несколько заметных различий.
React и Typescript являются очень мощными инструментами для создания динамичных пользовательских интерфейсов. Создание универсального компонента, который может использоваться в различных ситуациях, является одной из ключевых задач при разработке веб-приложений. В этой статье мы рассмотрим создание такого компонента на примере кнопки, разберемся как использовать типизацию для создания динамических компонентов с использованием React и Typescript.
Микрофронтенд-архитектура - это подход к созданию приложений, в котором каждая часть приложения, отвечающая за определенную функциональность, представлена отдельным фронтенд-приложением. Такой подход позволяет достичь более высокой гибкости и масштабируемости приложения, так как каждый микрофронтенд может быть разработан и развернут независимо от остальных.
Как правило, микрофронтенды используются в комбинации с микросервисной архитектурой, в которой приложение состоит из набора независимых микросервисов, каждый из которых выполняет свою функцию. Микрофронтенды позволяют разработчикам разрабатывать интерфейсы для каждого микросервиса отдельно и объединять их в единое приложение, что облегчает поддержку, масштабирование и развертывание приложения.
Одним из ключевых преимуществ микрофронтендов является возможность быстрой разработки и доставки изменений пользовательского интерфейса без необходимости изменения всего приложения. Кроме того, микрофронтенды могут помочь упростить процесс разработки, улучшить переиспользуемость кода и уменьшить зависимость между различными частями фронтенд-приложения.
Полезная ссылка с подробным объяснением концепции микрофронтенда.
Angular CDK имеет широкие возможности для скроллинга плоского списка. Если размер каждого элемента одинаков, то можно воспользоваться FixedSizeVirtualScrollStrategy: всего лишь нужно прокинуть размер элемента в пикселях, проитерироваться по данным и виртуальный скроллинг готов. Но что делать, если размер элементов разный? Данную проблему можно решить кастомной стратегией виртуального скроллинга. В данной статье мы рассмотрим как построить такую стратегию для pdf-документов.
В данной статье рассмотрим создание расширения google chrome для записи экрана и камеры. Оно может записывать целый экран, отдельное окно или вкладку. В режиме записи экрана можно вставлять окно с фронтальной камерой внутрь страницы на которой активен плагин, либо вне браузера. Также можно включить запись микрофона или звук системы. Ну и дополнительно можно осуществлять запись только с камеры.
Когда вы только начинаете изучать веб-разработку, перед вами не стоит проблема сборщиков кода, но как только ваши приложения начинают разрастаться и разделяться на модули, встает вопрос о сборке кода. Любой разработчик знаком с Webpack, потому что на данный момент это номер один инструмент по популярности для сборки проектов, а с Rollup знакомы далеко не все.
Статья для тех, кто только начинает разбираться в тестировании и путается в терминах: unit, интеграционные, функциональные, регрессионные, нагрузочные, performance и автотесты. Разберём, чем отличаются основные виды тестирования, какие задачи они решают, кто обычно пишет такие тесты и какие инструменты используются на практике.
Привет, друзья!
В этой серии статей я продолжаю рассказывать о Remix — новом фреймворке для создания клиент-серверных веб-приложений на JavaScript (React) со встроенной поддержкой TypeScript.
Remix позволяет разрабатывать так называемые PESPA (Progressive Enhancement Single Page Apps — одностраничные приложения с возможностью прогрессивного улучшения). Это означает следующее:
Подробнее о PESPA и других архитектурах веб-приложений можно почитать здесь.
Очевидно, что разработчики Remix вдохновлялись Next.js и Svelte.
К слову, здесь вы найдете полное руководство по Next.js.
В первой части мы прошлись по руководствам из официальной документации, во второй — более подробно рассмотрим возможности, предоставляемые Remix.
Это часть номер два.
Взгляд на популярную Testing Library с Nightwatch
Мы создадим подробный пример проекта React с Vite, а затем воспользуемся Nightwatch и Testing Library для тестирования этих компонентов. Мы используем Complex example, доступный в документах React Testing Library, написанный с помощью Jest.
