​​Работа над Serverless SSR, новости CSS и партия в DnD — ретроперспектива недели с Сергеем Совой

Запускаем новую рубрику на Tproger. В первом выпуске — Сергей Сова, разработчик, фронтендер и подкастер, делится своими мыслями о Serverless SSR, новостях CSS и мастхев книге.

Айда читать: https://tproger.ru/articles/rabota-nad-serverless-ssr--novostyah-css-i-partiyu-v-dnd--retroperspektiva-nedeli-s-sergeem-sovoj

#фронтенд #советы

Простой путь к публикации Vue3-модуля на NPM с помощью Vite

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

Для веб-разработчика создание собственных модулей и публикация их в open source может казаться сложным процессом. В этой статье показывают один из самых простых и быстрых способов публикации своего модуля на NPM при помощи бандлера Vite.

Этот метод не только облегчит процесс публикации вашего модуля, но также упростит рабочий процесс в целом: https://habr.com/ru/companies/croc/articles/816803/

#javascript

Годных codepen-проектов вам в ленту: Guess the movie.

Это — игра, в которой нужно угадать фильм по фото. Проект реализован с помощью CSS и JavaScript. Исходники: https://codepen.io/ecemgo/pen/eYXVpGp

👍 — годно
🗿 — безделушка

#codepen

​Генератор градиентного фона

Хотите создавать действительно крутой градиент, а не полоски из 2-3 цветов? Тогда присмотритесь к Mesher — инструменту, который позволяет создавать очень сложные комбинации цветов, смешивая их так, как нужно именно вам.

Убедитесь сами:

https://csshero.org/mesher/

#инструменты #фронтенд

можно сделать свой URL длиннее. Нет, ещё длиннее, чем вы подумали!

Тут нашли проект, который удлиняет урлы сайтов. Зачем? А что, сокращатель есть, значит нужен и удлинитель!

Мы уже поигрались, tproger будет выглядеть вот так:

https://loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ong/loooooooooOOoOooooooooooooOOOoOoooooooooooOOOoOoooooooooooOOOoooooooooooooOOOooOOooooooooooOOOoOoooooooooooOoOOOOooooooooooOoOOOOoooooooooOOOoOoooooooooooOOOoooooooooooooOOOooOooooooooooOOoOOOOoooooooooOOooOOOoooooooooOOooOoOoooooooooOOOooOoooooooooooOoOOOooooooooooOOOooOooooooooooOOOoOoOooooooooooOoOOOOng

За другими «удлинёнными» ссылками сюда: https://loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo.ong

@your_tech

​​​JavaScript localStorage: что такое и как использовать?

LocalStorage в JavaScript позволяет хранить пары ключ/значение в браузере. Но в отличие от обычных переменных, всё, что мы запишем в localStorage, останется там после перезагрузки страницы и закрытия браузера.

В статье рассказали, как работает и как использовать localStorage в JS: https://tproger.ru/articles/javascript-localstorage-polnoe-rukovodstvo/

#js

​Regex Previewer: работа регулярки в соседней вкладке VSCode

Расширение позволяет валидировать регулярное выражение на ваших примерах в параллельных вкладках IDE.

Расширение на Visual Studio Marketplace

#инструменты

​​Что нового в React 19?

Видеообзор, в котором можно узнать все о новых интересных функциях, которые появятся в React 19, включая готовые способы обработки действий, оптимистичные обновления, статусы форм, новый API use() и многое другое: https://youtu.be/81uAxzeyL2I

#react

​​​​Сделайте так, чтобы комментарии выглядели как история браузера веб-разработчика, который точно не пройдет собес

#обсуждение

​Джун показывает абсолютно новый фреймворк, который он написал сам:

​​Паттерны для веб-разработчиков

Делимся ресурсом по изучению различных видов паттернов с упором на веб. Есть секции по общему проектированию и секции по фреймворкам: https://www.patterns.dev/

#паттерны #инструменты

​Годных codepen-проектов вам в ленту: Procedural Birb

Генератор птичек, реализованный с помощью CSS и JavaScript. Исходники: https://codepen.io/Bupeldox/pen/wvrLwQg

👍 — полезно
🤔 — бесполезно, но очень мило

#codepen

​​Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

​​Новый китайский владелец популярного проекта Polyfill JS внедрил вредоносное ПО более чем на 100 тысяч сайтов

Polyfill.js - популярная библиотека с открытым исходным кодом для поддержки старых браузеров. Более 100 тыс. сайтов встраивают ее через домен cdn.polyfill.io.

В феврале этого года китайская компания Funnull купила домен и аккаунт на Github. С тех пор этот домен был замечен в внедрении вредоносного ПО на мобильные устройства через вебсайты, использующие cdn.polyfill.io. Любые жалобы быстро удалялись из репозитория Github.

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

Автор оригинального проекта рекомендует не использовать Polyfill, так как он больше не нужен современным браузерам. Тем временем, Fastly и Cloudflare предложили собственные альтернативы пользователям.

Google начал блокировать рекламу для сайтов eCommerce, использующих polyfill.io. Cloudflare реализовала перенаправление в реальном времени с cdn.polyfill.io на свою версию. Позже регистратор Namecheap приостановил действие домена, устранив риск на данный момент.

Этот инцидент является типичным примером атаки на цепочку поставок. Рекомендуется удалить все ссылки на polyfill.io в вашем коде.

Подробнее: https://sansec.io/research/polyfill-supply-chain-attack

#безопасность