JavaScript *

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

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

В этой статье показано, как получить полный функционал Midjourney с помощью АПИ

Для этой задачи вам понадобится учетная запись Discord с активной подпиской Midjourney, подойдет базовый план за 10 долларов.

В этой статье мы поговорим о том, что можно проверить у локатора (элемента) и какие вообще есть возможности проверок. Более того, в этой статье я описал упражнения, которые вы можете выполнить и отработать в качестве практики.
Обычно мои статьи были холиварными, а не техническими. Но в этот раз решила выложить что-то действительно техническое и полезное. Тестировщики, налетай! Очень хочу, чтобы опытные ребята, которые с playwright работают давно, поделиться своим мнением о примерах в тексте статьи. Достаточно ли они информативны.

Проверки локаторов

Это могут быть как интерактивные элементы (кнопки, поля ввода, чек-боксы, ...), так и статика (картинки, текст, иконки и т.д.).

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

С другой стороны, иногда нам нужно, все же, уметь получать свойства элементов для промежуточных действий. Например, мы хотим посмотреть, сколько сейчас строк в таблице, удалить одну и проверить, что строк стало меньше на одну. Для того, чтобы организовать такую проверку, нам нужно вычислить, сколько всего строк было до того, как мы удалили последнюю строчку. Если в таблице было X строк, то, после нажатия, должно быть X-1. Найдите икс, получается? И вот тут нам нужна "ручка", которую мы дернем и получим число, без всяких assert'ов.

В апреле мы проведём конференцию HolyJS — о чём будут её доклады? Что вообще должны говорить на JS-конференции? Спорить, какой фреймворк лучше?

Бессмысленные холивары мы не любим. А вот полезную информацию по тем же фреймворкам — вполне. Так что будут доклады с темами вроде «Angular Platforms» и «Vue.js Renderer» (так сказать, разберём всё «от Ангуляра до вьЮ»).

В мире фронтенда бывает лучше один раз увидеть, чем сто раз прочитать: когда речь об анимациях и прочих красотах. А лучше всего — и увидеть красоту в презентации доклада, и услышать от спикера о том, как её правильно наводить. И такое будет: скажем, о работе с 3D сразу два доклада.

В основном конференция суровая техническая. Но для тех, кого волнуют вопросы вроде карьерных, есть и блок из нескольких докладов «Мягкая сила». Знаете ли вы, сколько и как можно заработать на HTML5-играх?

Будет и многое другое, вплоть до докладов, связанных с биотехом. При чём тут вообще JS-разработка? Ответ можно узнать из описаний докладов под катом.

А вы знаете, как остановить локальный сервер? Какое сочетание клавиш использовать?

После этой статьи вы точно будете знать и уметь его правильно останавливать

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

Всем привет!

Хочу представить вам подход к определению типов, позволяющий сделать ваш код чище и понятнее. Я называю это "Воплощённые типы"("Embodied types").

Воплощённый тип - тип, для которого определена переменная с одинаковым именем и в которой содержится объект с утилитами для этого типа.

Это вторая часть roadmap frontend разработчика, Если вы не читали первую часть, то настоятельно рекомендую ознакомится, Первая часть. В этой статье я продолжу вам рассказывать про мое представление современной карты развития frontend разработчика.

Приветствую всех новичков и гуру фронтенда, а также всех, кто работает с интерфейсами. Я Никита Борцов, создаю красоту на фронте первой в России FinOps-платформы для управления облачными затратами “Инферит Клаудмастер”.

В этой статье вы узнаете о:

• факторах, сформировавших тренд на уход фронтенд-разработки от монолита к микрофронтенду,
• процессах со стороны команды разработки при переходе на микрофронтенд,
• кейсе платформы “Инферит Кладумастер”: почему для нашей команды микрофронтенд с плагином Module Federation стал полезным решением,
• признаках того, что пора переходить на микрофронтенд.

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

В нашей статье мы сделаем акцент на фреймворках, поддерживающих запуск service workers на серверной стороне и современный стандарт Fetch API, поскольку это позволяет им работать в бессерверных и Edge-окружениях, таких как Cloudflare Workers. Это, к слову, и причина, почему Fastify не будет рассматриваться в нашей статье, несмотря на эксперимент fastify-edge, который продолжался два года (кстати, была написана интересная статья о переходе от Node к средам рабочих процессов, с которой я рекомендую ознакомиться).

Worker Runtimes воплощают первоначальное обещание NodeJS: использование одного языка и возможность обмена кодом между клиентом и сервером. Однако на практике это не осуществилось, и API Node и браузеров пошли по разным путям. Worker Runtimes вновь объединяют эти возможности. Больше информации здесь.

Hono, H3, HatTip и Elysia - это современные фреймворки HTTP-серверов, также известные как промежуточные программы веб-сервера нового поколения. Они работают везде, на любом JS-рантайме, включая бессерверные и Edge-среды выполнения. Это означает, что они могут быть использованы не только на серверах Node.js. Кроме того, все они поддерживают TypeScript.

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

Все они поддерживают Web Fetch API (объекты Request/Response), но здесь я покажу их API, наиболее похожие на Express, чтобы было проще ориентироваться.

Эта статья посвящена React Spring — библиотеке анимации на основе JavaScript. Мы рассмотрим её фичи, включая различные хуки и компоненты, и то, как использовать их в приложениях.

В этой статье мы сосредоточимся на ключевых элементах асинхронного программирования в Java Script: Event Loop, Event Bus, промисы и синтаксический сахар async/await. Разберемся, как эти концепции взаимодействуют между собой и как их использование помогает нам создавать более эффективные и отзывчивые веб-приложения.

Мы начнем с изучения роли Event Loop - механизма, ответственного за управление выполнением асинхронного кода. Затем мы перейдем к рассмотрению Event Bus, который обеспечивает коммуникацию между различными компонентами приложения. После этого мы ознакомимся с промисами и синтаксическим сахаром async/await, которые значительно упрощают работу с асинхронным кодом и делают его более читаемым и понятным.

В 13 версии команда next.js представила новый подход к проектированию приложения - так называемый App Router. В 14 версии его сделали стабильным и основным для новых приложений.

App Router значительно расширяет функционал next.js - частичный пререндеринг, шаблоны, параллельные и перехватываемые роуты, серверные компоненты и многое другое. Однако, даже несмотря на все эти улучшения - далеко не все решили перейти на App Router. И на это есть свои причины.

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

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

Гибкое API у UI kit компонентов является преимуществом. Однако возможность повлиять на стили ваших компонентов в конкретном месте является большим искушением. Разработчику выгодно внести изменение здесь и сейчас, а не думать на перспективу. Такое поведение постепенно разрушает вашу систему переиспользования.

Создаем TypeScript библиотеку для валидации данных. Поэтапно добавляем основной функционал и типизацию. Делаем основую упор на простоту кода и проиводительность. Как протитип используем yup и zod.

В статье рассмотрены три инструмента мемоизации в React: useMemo, useCallback, memo. Главный источник информации: документация React. Не всем комфортно работать напрямую с документацией, так что если вы постоянно откладываете погружение в документацию React - я сделал это за вас, постарался выделить самое важное, и дать ссылки для углубленного погружения.  

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

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

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

Сегодня мы расскажем об общем технологическом устройстве редакторов МойОфис, с акцентом на их центральный элемент: ядро, написанное на C++. Именно ядро обеспечивает основную функциональность приложений и даёт нам возможность эффективно унифицировать её для разных платформ.

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

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

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

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

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

WebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные. Установить WebRTC соединение можно разными способами. В статье описано как WebRTC соединение устанавливается между пользователями редактора схем dgrm.net.