Больно, дорого, стрессово, но порой необходимо. Миграция на новый стек (язык или фреймворк) — событие, которое всегда интересно пообсуждать, особенно, если происходит оно не в твоем продукте. 13 июля в 19:00 (Мск) мы соберем подискутировать всех, кто пережил или переживает перевод фронтенда на новые технологии. «А я вам говорил» и другие комментарии зрителей — приветствуются!
В процессе моей работы в geoalert.io я не раз сталкивался с проблемой управления состоянием приложения на React со встроенной картой mapbox-gl.
Я планирую посвятить теме цикл из трех статей, включая эту:
1. Управление состоянием mapbox-gl в React
2. Встраивание mapbox-gl в React
3. Управление состоянием React приложения сmapbox-gl с использованием XState
Прошло уже почти 2 недели с момента презентации next 11. К сожалению, эта новость обошла хабр стороной и пора бы это исправить. Сперва немного о презентации. Восьмого числа, узнав про ивент, не теряя ни минуты, я пошел на него регистрироваться. Это был сайт, на котором странным образом были видны цветные курсоры и время от времени рядом с ними печатался текст. Немного поразмышляв и прочитав первые комментарии стало понятно, что передо мной такие же участники этого события. Неплохое и многообещающее интро. Однако, это был, пожалуй, единственный намек на то, чего стоит ждать от презентации. Веб-серфинг не принес никаких результатов и не удалось найти ни единого слова. Конечно же, используя next последние несколько лет можно было примерно представлять, какие технологии должны вот-вот появиться с полноценной поддержкой, понять, кто будет помогать в их реализации и какие цели будет преследовать компания, но все же, vercel умеет удивлять.
Пару слов о технологии, если кто-то умудрился обойти ее стороной. Next – backend-фреймворк для… Инкрементальной сборки, Серверного рендеринга, статической генерации или гибридного варианта приложений, построенных на react. Созданием занималась компания zeit, имеющей к 2016г. утилиту now. Затем, в 2020 году, после инвестиций в 21 млн$, компания была переименована в vercel, а утилита now (переименованная также в vercel) переросла в веб-сервис с дополнительным функционалом для выкладки приложений, в первую очередь, построенных на next, но также nuxt, Gatsby, angular и многих других популярных инструментов.
В начале мая, Misko Hevery, создатель фреймворка Angular, объявил о своем уходе из Google и команды Angular - в компанию builder.io.
Всего через полтора месяца, на его странице в Medium, появился Анонс нового фреймворка - Qwik.
Я решил разобраться, что он из себя представляет и зачем нужен.
Qwik сейчас на стадии proof of concept, и неясно, выстрелит он или нет, но уже понятны основные идеи, и можно потрогать код.
Давайте посмотрим, что интересного он нам принесет, и придется ли нам учить новый фреймворк.
Привет! Меня зовут Андрей, я Backend Node.JS разработчик в одной из зарубежных компаний, занимающихся разработкой системы для администрирования офисов. Наше приложение и его веб-версия предоставляют арендодателям возможность отслеживать заполненность офиса, обеспечивать подключение IoT-устройств для отслеживания, например, количества еды в холодильниках или остатка воды в кулерах, выдавать пропуски для сотрудников в своё здание и много чего другого. Одним из важнейших узлов в этой системе является API как для внутренних пользователей, использующих приложение или веб-сайт, так и для клиентов, использующих наше Whitelabel решение. Всего в нашей системе зарегистрировано более двух сотен API эндпоинтов, для построения которых мы использовали фреймворк NestJS. Если вы по какой-то причины ещё не слышали про Nest, то я настоятельно рекомендую ознакомиться со статьёй NestJS - тот самый, настоящий бэкенд на nodejs. Одной из основных и наиболее значимых особенностей NestJS является нативная поддержка декораторов, что в свою очередь позволяет создавать эндпоинты декларативно.
Библиотека React Intl предоставляет механизм для перевода текста на другие языки.
В данном "туториале" мы используем названную библиотеку для реализации интернационализации в проекте, написанном на React. Мы создадим простое приложение, позволяющее пользователю выбирать язык приложения.
Мы также реализуем возможность сохранения выбранного языка в локальном хранилище браузера для обеспечения его доступности после перезагрузки страницы и последующих визитах пользователя.
NestJS - фреймворк, вобравший в себя преимущества TypeScript, IoC/DI и структуру Angular, стремительно развивается, приобретая популярность.
Множество методик и практик описано в официальной документации.
Вдохновившись публикацией John Biundo - Build a NestJS Module for Knex.js, написал свой собственный модуль для Mailchimp Transaction API.
В 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 в полноценные программы. Давайте разберемся, что для этого нужно.
