JavaScript *

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

Продолжаю делиться с вами заметками о Docker.

Заметки состоят из 4 частей: 2 теоретических и 2 практических.

Если быть более конкретным:

• первая часть посвящена самому Docker, Docker CLI и Dockerfile;
• в этой части рассказывается о Docker Compose;
• в третьей части мы разработаем приложение, состоящее из 3 сервисов (клиента, админки и API) и базы данных (PostgreSQL);
• в четвертой части мы это приложение "контейнеризуем".

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

Модельная разработка - это метод разработки мобильных приложений, при котором мы изначально ставим задачу в виде типизируемой модели(схемы) TypeScript и GraphQL, на уровне создания тикета в таск-менеджере.

Початково рыцер Еди, под вплывем Дартха Сидиоуса прешедл на цемна стронэ Моцы и прыял тытул „Дартх Вадер”.

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

Всем привет! Меня зовут Андрей Яковенко и я являюсь руководителем группы 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 (и еще кое-что), фактический стандарт современной веб-разработки.

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

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