JavaScript *

Прикручиваем react-dnd за 5 минут

Пишем систему валидации форм для React приложений

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

Привет, Хабр!

Несколько дней назад в одном из обсуждений в сообществе Cypress на Discord мельком был затронут вопрос о том, как проверить данные из файла Excel с помощью Cypress. Это подтолкнуло меня сделать несколько полезных заметок, ставших основой для данной статьи.

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

Оригинал статьи на английском языке был включен в 136th Coding Jag от LambdaTest, а также в Issue #82 Software Testing Notes.

Статья о JWT-авторизации и создании приватных страничек сайта для авторизованных пользователей. Простым и понятным языком. Даже твой кот сможет написать эту фичу по этому туториалу :)

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

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

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

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

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

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

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

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

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

И снова всем привет! Судя по реакциям и количеству закладок к переводу первой части книги Patterns.dev, этот материал оказался для вас полезен. Поэтому я решил поделиться переводом второй части.

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

Напомню, что авторы Patterns.dev:
Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.
Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React‑разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend‑разработкой. Это ознакомительная часть перевода учебника https://www.patterns.dev/. Перевод всей второй части учебника можно найти здесь.

P. S.: На данный момент выложено в виде pdf, в дальнейшем планируется полноценная публикация на github для удобства изучения.

P. P. S.: Вторая часть взята из книги: https://www.patterns.dev/, переведена на русский язык. Книга находится под лицензией CC BY-NC 4.0

Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

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

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

Привет, Хабр!

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

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

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

Привет, Хабр! Мы на курсе Практикума по веб-разработке постоянно смотрим, что новенького появилось в сети для самостоятельного обучения веб-технологиям. И ресурсов в доступе довольно много. Они разнообразны и обучают современным технологиям в разных форматах: видео, учебники, интерактивные курсы, гайды и доклады. Если вы учитесь на курсах или уже работаете во фронтенде, эти материалы помогут улучшить навыки и избавиться от белых пятен. Делимся найденными сокровищами.

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

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

Сегодня мы рады рассказать вам о многочисленных дополнениях к WebKit, которые включены в Safari 16.4. Этот выпуск содержит 135 новых веб-функций и более 280 обновлений. Давайте посмотрим.

Привет, Хабр!

За последние несколько лет работы с командами тестировщиков ПО в России и США мне довелось столкнуться с различными подходами к организации тестирования, разнообразными паттернами построения тестовых сценариев и разработки автоматических тестов. При этом нередко случалось, что приходя на проект и анализируя имеющуюся тестовую базу выяснялось, что существующие автотесты нуждались в серьезной доработке или вовсе переработке в целях обеспечения их надежности и сокращения времени на их выполнение. Преимущественно это касалось этапа сквозного (e2e) тестирования, и по моим наблюдениям очень часто причиной тому было не столько незнание тестировщиками встроенных команд тестового фреймворка, сколько неумение применить в тестах базовые возможности используемого языка программирования.

Это подтолкнуло меня к написанию пары статей, в которых я делюсь некоторыми наработками по оптимизации автотестов Cypress, основываясь на простых и в основном известных возможностях JavaScript. Изначально статьи были опубликованы на английском языке в моем блоге "Testing with Cypress" на Medium.

Представляем результаты ежегодного опроса, данные и скрипты обработки можно найти на GitHub.

В конце статьи будет локальный опрос пользователей Хабр.

Все мы не любим писать много однообразного кода и хотим писать больше интересного кода) Давайте рассмотрим очень удобный инструмент для работы с API - RTK Query.