JavaScript *

В 2020 году автор оригинальной статьи решил написать более эффективную библиотеку PJAX, похожую на проект Rezo Zero — Starting Blocks, но так, чтобы легко работать с barbajs. Он понимал, что Starting Blocks легче расширить с помощью настраиваемых функций и их можно сделать более плавными, быстрыми и простыми в использовании. Со временем намерения автора изменились, и он начал замечать, как часто сайты с awwwards.com используют PJAX, но также часто мешают естественному восприятию сайта и браузера.

Многие сайты на первый взгляд выглядели круто, но если вы работали с ними долго, то это была другая история — полосы прокрутки часто переопределялись, предварительное извлечение часто было слишком активным и не оптимизированным для людей без мощного подключения к Интернету, ЦП и/или графических процессоров. К старту курса о Fullstack-разработке на Python делимся переводом обзора библиотеки @okikio/animate от её автора. На КДПВ вы видите первый кадр любопытной анимации из демо к библиотеке, эта анимация работает в закреплённой шапке сайта.

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

Функции provide и inject во Vue 3 как по мне предлагают интересный подход к реализации паттерна Dependency Injection, однако принцип их работы недостаточно хорошо описан в документации. Они похожи на большой чёрный ящик с магией Vue, хотя на самом деле работают довольно просто. Я во всем разобрался, и хочу рассказать вам.

Вы когда-нибудь слышали об XSS-атаках, связанных с внедрением (инъекцией) вредоносного кода в DOM (далее — DOM XSS)? Если не слышали, то

DOM XSS — это тип атаки на веб-приложение, когда хакер использует полезную нагрузку (payload), которая выполняется как результат модификации DOM в браузере.

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

Язык JavaScript появился больше 20 лет назад и до сих пор остается самым распространенным языком. Это единственный язык программирования, который работает на самой популярной платформе (в Интернете). На нем все чаще разрабатываются нативные (Visual Studio Code, Discord и Slack) и популярные мобильные приложения (Facebook, Skype, Tesla). Но знаете ли вы, в чем секрет его популярности? Программы Bug Bounty и обнаружение уязвимостей, которые приносят живые деньги.

В любом фильме про хакеров вы обязательно увидите сцену, где кто-то сидит перед компьютером и набирает загадочные команды на черном экране терминала (если только это не 3D-интерфейс UNIX из «Парка Юрского периода»).

Из цикла "Микросервисы или смерть"

Решаемая проблема: монолитное приложение на Node.js раньше, в развернутом состоянии, занимало 0.2 Гб всего. Теперь же, разбитое на 33 микросервиса, занимает 33 * 0.1 = 3.3 Гб. Можно ли избежать подобной издержки? -- можно! В статье мы избавимся от лишнего веса.

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

© Платон «Государство», книга 7: Миф О Пещере

Еще недавно разработка классических приложений считалась сложной задачей — для этого приходилось учить специальный язык программирования, например Java или C++. К счастью, сейчас веб-разработчики могут создавать прекрасные классические приложения, конвертируя код JavaScript в полноценные программы. Давайте разберемся, что для этого нужно.

В прошлой статье меня упрекнули, что я при живом Vue 3 пишу про "устаревший" Vue 2. Отговорившись тем, что Vue 3 еще не production-ready, я понемногу начал его смотреть и изучать. И поскольку я заядлый любитель типизации и различных фичей с сахарком, то рассматривать Vue 3 с его новеньким CompositionAPI в статье именно с этой точки зрения. А заодно поэкспериментируем и попробуем написать свой типизированный store, организовать компоненты в стиле <script setup> и подружить его с typescript и eslint, а также напишем небольшой компонент на TSX в качестве еще одного эксперимента.

Редакс - Single-store стейт-менеджер, в котором к тому же принято группировать данные по объектам. Примерно так же, как в стейте классовых компонентов в реакте.

То есть, это совершенная противоположность атомарного подхода, которому, к примеру, следуют многие хуки реакта или Multi-store стейт-менеджеры (например Effector, где селекторы не нужны по определению - достаточно сторов).

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

В общем, раз в редаксе нет возможностей ни эффектора, ни MobX, нам лишь остается напрямую обращаться к данным, начиная с самого верха. Это превращается в нечто вроде state.foo.bar.baz. А если перед этим еще нужно произвести какие-то вычисления с участием других значений из стора?

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

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

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

Автор оригинальной статьи собрал репозитории, которые, по его словам, должны быть в закладках у каждого разработчика ПО. Подборка начинается с репозитория бесплатных книг по программированию, в том числе на русском языке, включает репозиторий с большим количеством сжатых, информативных шпаргалок по различным языкам и технологиям, шаблоны файлов .gitignore, а также посвящённые конкретным языкам репозитории, репозиторий о дизайне для разработчиков и ещё несколько хранилищ кода, которые могут быть интересны и полезны читателям Хабра. Переводом этой статьи мы решили поделиться к старту курса о Frontend-разработке.

Как пришел я к тому чтобы вообще начать учить JS?

В 2019 году, 1 сентября, в дождливый осенний день, я решил навсегда завязать с прошлым. Последние 5 лет работы менеджером не приносили удовольствия и не несли перспектив. Увольняюсь с должности менеджера вино-торговой компании, подумал я. И погружаюсь в программирование!

Три месяца до декабря я упорно изучал HTML + CSS и верил, что легко попаду в разработчики, стоит мне только захотеть! Каким же большим было моё разочарование, когда я понял что в этом мире не все так просто...

Что такое Workbox?

Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).

Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:

• Service Worker API — MDN
• Service Workers: an Introduction — Web Fundamentals
• Визуализация работы сервис-воркеров — Хабр
• Рецепты по приготовлению офлайн-приложений — Хабр

WB предоставляет следующие возможности:

• предварительное кэширование
• кэширование во время выполнения
• стратегии (кэширования)
• обработка (перехват сетевых) запросов
• фоновая синхронизация
• помощь в отладке

Это вторая часть руководства. Вот ссылка на первую часть.

Модули, предоставляемые WB