JavaScript *

Всем привет! Меня зовут Андрей Яковенко и я являюсь руководителем группы FE-разработки. Сегодня хочу рассказать о способе позволяющем автоматизировать и, что немаловажно, упростить разработку виджетов для CMS посредством использования webpack.

Но сперва хотел бы немного оговориться, данная статья будет полезна тем, кто планирует внедрить фреймворки в CMS или имеет уже какой-то настроенный пайплайн для сборки виджетов и видит в нем ряд проблем и готов рассмотреть альтернативные варианты.

Кому интересно, добро пожаловать под кат.

Базовая настройка webpack 5 + настройка для разработки на React (вкл. React Hot Reloading).

Что, зачем и почему?

Что? Webpack - сборщик модулей для JavaScript. Является одним из мощнейших инструментов современной веб-разработки.

Зачем? Webpack позволяет комфортно создавать приложения по модульной структуре, он собирает все модули в один бандл и минифицирует его. Но это лишь поверхностное описание возможностей этого инструмента, на деле вебпак имеет значительно больше возможностей.

Почему? Вам теперь больше нет необходимости беспокоится о сборке проекта, один раз настроил webpack и он все будет делать за вас!
P.S. Ну, или не один раз.
P.S.S. Ладно, точно не один раз.

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

Fuite: инструмент для поиска утечек памяти в веб-приложениях

Добро пожаловать  на 1-й день челленджа #30DaysOfPlaywright!

Сегодня наша  цель – изучить руководство по началу работы с фреймворком, которое должно помочь настроить средство запуска Playwright Test в локальной среде разработки и подготовить его для  выполнения первого тестового прогона.

Привет, друзья!

В этой статье я хочу поговорить с вами об управлении состоянием и повторном рендеринге в React.js.

Что такое состояние и зачем им управлять?

Состояние/state можно определить как любые данные, которые влияют на рендеринг/rendering компонентов. Состояние хранится в реактивных переменных/reactive variables ](в терминологии RxJS).

Управление состоянием/state management — это механизм, позволяющий создавать реактивные переменные, фиксировать изменения их значений и уведомлять об этом "заинтересованные" компоненты. Как правило, такой механизм реализуется с помощью паттерна Издатель-Подписчик/Publisher-Subscriber/Pub-Sub.

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

Всем привет! Меня зовут Вадим, я занимаюсь тестированием безопасности приложений. С недавнего времени увлекся разработкой на фреймворке Angular. Я решил объединить свое новое увлечение со своей основной работой и показать результаты своего исследования в данной статье.

В данной статье описано как можно получить полезные данные Angular приложения, почему это важно и как от этого защититься.

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

Присоединяйтесь к #30DaysOfPlaywright. Давайте изучим инструменты, API и лучшие практики, по одному сценарию тестирования за раз!

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

Рад поделиться своим опытом участия в мероприятии в качестве капитана команды "чай СБЕРгамотом".

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

"Разработчик – это человек, который переводит мысли заказчика на язык машины"
@mikita_du

Идея статьи появилась год назад, думал назвать «Вёрстка в 2021», но как-то затянулось… Весной 2021 года Microsoft объявила, что с 15 июня 2022 года прекращается поддержка IE11 (да, не для всех версий Win 10, но всё же), а значит, к выходу статьи уже останется менее полугода до знаменательного события, когда не придётся верстать под IE.

Для меня же это значит, что можно будет по полной использовать новые стандарты браузеров, в частности – css-variables, grid layout.

Хабр! Добро пожаловать снова.

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

С первой статьей, где мы занимаемся разработкой расширения, вы можете ознакомиться здесь. Также найти весь исходный код на GitHub и само расширение в Chrome Web Store.

В этой статье я расскажу, как опубликовать расширение в Chrome Web Store.

С наступающим Фрилансер. Будь сильней, быстрей, выше.

Можете представить Новый год без мандаринов, елки и подарков? А что насчет фильма «Один дома»? Каждый год мы наблюдаем за судьбой мальчика, который забаррикадировался дома и обороняет его от двух бандитов. Эта история стала неотъемлемой частью каждого Нового года, и предстоящий праздник не будет исключением. А что, если мы предложим вам помочь Кевину в обороне дома?

Мы решили написать небольшую игру в жанре Interactive Fiction на базе телеграм-бота. Целевой аудиторией стали разработчики. Участники игры будут две недели общаться с Кевином и помогать ему программировать устройства в умном доме, чтобы разрушить планы грабителей. Для работы выбрали NestJS. Расскажу подробнее, что из этого получилось.

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

Год назад команда реакта представила серверные компоненты (не путать с SSR). Если вкратце, то суть в том, что компонент создается на сервере, сериализуется в хитрый json, отправляется клиенту по http, а клиент десериализует и рендерит его как обычный реакт компонент (тут-то и самое заметное отличие от SSR, который клиенту передает уже готовый html код). Вообще штука прикольная, но как мне кажется не получила особого внимания со стороны сообщества, может отчасти из-за сырого состояние (на то это и демка), а может из-за сложности в реализации и внедрения в проект (ИМХО)

Но как бы там ни было я заинтересовался и подумал, если можно передавать по HTTP, значит можно и по WebSocket. Действительно, почему бы нет, да и работать будет намного быстрее. Попытка переписать их демку на веб-сокеты потерпела поражения, уж очень много там странного и непонятного для меня кода, да и не охота было сильно углубляться в то обилие зависимостей, которые требуются, чтобы все это дело заработало.

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

Привет, друзья!

В этой статье я хочу показать вам, как создать шаблон React.js + Express.js + TypeScript приложения.

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

• React — далеко не идеальный, но лучший на сегодняшний день фреймворк для фронтенда (или, согласно официальной документации, "для создания пользовательских интерфейсов");
• Express — несмотря на наличие большого количества альтернативных решений, по-прежнему лучший Node.js-фреймворк для разработки веб-серверов;
• TypeScript — система типов для JavaScript (и еще кое-что), фактический стандарт современной веб-разработки.

Исходный код проекта.

Если вам это интересно, прошу под кат.

Вот уже несколько лет React Native является горячей темой в мире мобильной разработки. Неудивительно – он взял мир технологий штурмом, предложив способ разработки мобильных приложений как для iOS, так и для Android одновременно.

React Native - единый фреймворк, чтобы управлять ими всеми.​

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

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

Каковы его главные преимущества и самые большие недостатки? Чем он отличается от других платформ кросс-разработки? И последнее, но не менее важное: о чем должны знать ваши разработчики, прежде чем они отправятся в путешествие по React Native?

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

Хабр! Добро пожаловать снова.

Сегодня я расскажу о том как писатели хабра теряют свои статьи из за ошибок в работе редактора Хабра. Мне бы очень хотелось чтобы разработчики Habr или Chromium услышали меня и исправили эту проблему как можно скорее.

Привет, я Антон, преподаватель JavaScript в Elbrus Bootcamp. Недавно Институт образования НИУ ВШЭ выяснил, что 94% поступающих к нам не имели опыта программирования, и при этом 93% устраиваются разработчиками в течение 3-х месяцев после обучения. Но разве реально всего за 12 недель научить кого-то разработке? 

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

Statoscope — это инструмент для анализа webpack-бандлов, а я его автор и мейнтейнер. Он зародился в далеком 2016 году как эксперимент, а теперь это полноценный тулкит для просмотра, анализа и валидации сборки.

В ноябре на конференции HolyJS я выступил с докладом о Statoscope и провёл воркшоп по его использованию. Зрителям понравилось, так что мы с организаторами HolyJS решили, что доклад может пригодиться и читателям Хабра — поэтому сделали текстовую версию. Видеозапись тоже прилагаем.