Frontend Beer

Не про фронтенд, но полезно знать

⭐️

Как исправить проект в IntelliJ Idea, если директория ".idea" была добавлена в гит и теперь вы хотите ее удалить?

1. Убедитесь, что папка ".idea" добавлена в .gitignore

2. Очистите кэш Git:

 git rm -r --cached .idea

3. Зайдите в раздел "File" -> "Repair IDE". И следуйте инструкциям на плашке IDE Repair

Подробнее тут: Repair IntelliJ IDEA

Read in English 👀

#FrontendBeer #intellijidea #intellij #idea #project #repair (c) Frontend Beer

IntelliJ IDEA Help

Repair IDE | IntelliJ IDEA

👌4

84 viewsedited 18:45

Frontend Beer

Всем привет 👋 И с наступающим Новым Годом 🎄⭐️

Крайним постом в этом году хочу пожелать вам в новом году сохранить оптимизм, набраться энергии и преодолеть любые трудности 🙌

И небольшой подарок под новый год, дроп первого эпизода подкаста, который мы записали с Антоном @anton9408 из солнечного Таиланда & Альбертом @vault_developer из заснеженной Германии🎄

Послушать первый эпизод подкаста можно тут 👉
#1 - Про жизнь в Германии, Кипре и Таиланде

#FrontendBeer #подкаст #7круговфронтенда (c) Frontend Beer

🎉2❤1🔥1

88 viewsedited 16:20

Frontend Beer

С Новым Годом! 🎄

Первым постом в этом году хочу поделиться списком еженедельных рассылок, откуда можно почерпнуть новые знания, инструменты и веяния из мира Web разработки

1. https://frontendfoc.us/ - новости, статьи и руководства по интерфейсу. HTML, CSS, WebGL, Canvas, браузеры и пр.
2. https://javascriptweekly.com/ - статьи по JS, новости и полезные проекты
3. https://nodeweekly.com/ - новости и статьи из мира Node.js
4. https://react.statuscode.com/ - React & React Native
5. https://webtoolsweekly.com/ - всякая всячина из мира Web инструментов и библиотек

А на каких ресурсах узнаете новости вы? :)

Read in English 👀

#FrontendBeer #weeklynews #web #weekly (c) Frontend Beer

👍5❤3

113 viewsedited 17:01

Frontend Beer

Что лучше всего подойдет для отображения юридических документов, инструкций, буклетов и пр. на сайте? Конечно же PDF документы!

Если для пользователя нужно отображать документ как обычную HTML страницу, есть готовый инструмент, например под React: react-pdf-viewer

Отлично встраивается в любой интерфейс. От разработчика только требуется разместить виджет и подставить ссылку на документ

Read in English 👀

#FrontendBeer #weeklynews #pdfviewer #pdf #weekly (c) Frontend Beer

👌7

112 viewsedited 17:59

Frontend Beer

Что там с CSS-in-JS стилизацией? 🎨

Долгое время я работал со styled components, но с появлением RSC я начал посматривать в сторону CSS-modules (привет, повышение производительности и корректное использование RCS). CSS-модули – замечательное решение, но отсутствие качественной "типизации" для классов, CSS переменных и т.д. требует написания большого объема инфраструктурного кода, особенно при создании дизайн-системы

Недавно я открыл для себя Panda CSS & StyleX. Инструменты выглядят как отличное сочетание между CSS-in-JS и CSS-модулями. Вы получаете всю мощь JS/TS, и на выходе чистый атомарный CSS. Конечно, динамичные стили вызывают некоторые вопросы, но это не является большой проблемой

А вы уже пробовали эти инструменты? 🚀✨

Read in English 👀

#FrontendBeer #stylex #pandacss #cssmodules #cssinjs #styled (c) Frontend Beer

👌4

139 viewsedited 20:50

Frontend Beer

Что же, давно тут не было постов, поэтому начнем с маленького :)

Поговорим о пользе GUI в любимой IDE

Классная фича с Changelist'ами в IntelliJ IDEA. Чем классная и удобная?

Например, делаешь какие-то большие изменения в коде и в голову пришла гениальная идея попробовать по другому, зарефакторить или протестировать скрипт генерирующий / меняющий файлы в проекте

Всегда есть вероятность, что захочется вернуться в исходное состояние до крайних правок. И вот тут как раз отдельные ~~чип и дейл~~ changelist'ы спешат на помощь. Создаешь новый и не переживаешь о том, как потом разобрать, что откатывать, а что нет :)

P.S.
Конечно можно коммитить или стешить, но зачем платить больше?

Read in English 👀

#FrontendBeer #intellij #idea #changelist (c) Frontend Beer

👏3👍2

136 viewsedited 20:02

Frontend Beer

Hey! 👋

Новая статья “Vite, Nginx and environment variables for a static website at runtime” о внедрении переменных окружения в статические веб-приложения с помощью Vite и Nginx.

В этой статье я расскажу о методе внедрения переменных окружения в статические веб-приложения с использованием Vite и Nginx. Вы узнаете, как автоматизировать этот процесс с помощью контейнера Docker и инструмента envsubst для замены переменных во время выполнения

Каждый шаг от создания проекта до развертывания контейнера подробно описан и проиллюстрирован примерами кода и ссылкой на репозиторий 🔗

Бегом читать 🙂

Read in English 👀

#FrontendBeer #vite #nginx #environmentvariables (c) Frontend Beer

Medium

Vite, Nginx and environment variables for a static website at runtime

Learn how to pass environment variables to a statically built website using the Vite build tool in conjunction with the Nginx web server.

🔥4

132 viewsedited 08:53

Frontend Beer

REST API меняется, а форма ломается? Не беда

Вы сделали форму, всё работает, а потом… обновилось API и начался хаос:
❌ надо разобраться, что поменяли на бэке и руками обновляете типы
❌ если не было общей обвязки типами, найти все места в коде, которые требуют обновления

✅ Есть способ проще
Генерировать типы прямо из OpenAPI, использовать их в запросах и React Hook Form и валидировать с Yup. Без боли, надежно и быстро 💯

Как это настроить - читать «Fully typed forms based on API schema with react-hook-form, openapi-typescript and yup validation»

#FrontendBeer #reacthookform #yup #typescript #openapi #codegen (c) Frontend Beer

Medium

Fully typed forms based on API schema with react-hook-form, openapi-typescript and yup validation

Creating fully typed forms in React applications using react-hook-form, openapi-typescript and the yup validation

👏3😢1

64 views17:22

Frontend Beer

Альтернативные инструменты к посту выше, которые не только типы, но и хэндлеры запросов сгенерят по API схеме

https://heyapi.dev - пока в бете, активно разрабатывается и выглядит многообещающе. Финальная генерация кода лаконичная. В целом, понятная документация и конфигурация 👍

https://orval.dev &
https://kubb.deve чем-то похожие инструменты - последний генерирует более чистый и не многословный код. Но много вещей скрыто под капотом. Документация на мой взгляд не интуитивно понятная и конфигурация требует экспериментов, чтобы получить желаемое 🤔

Я пока предпочитаю https://openapi-ts.dev/, да приходится писать хэндлеры в ручную, но зато просто, гибко и понятно в конфигурации ✅

#FrontendBeer #typescript #openapi #codegen #tanstackquery #fetch #axios (c) Frontend Beer

❤1👍1

71 viewsedited 17:35

Frontend Beer

TypeScript переписан

на Go! Обещают 10 кратное увеличение производительности 🚀 Читай подробнее в официальном блоге 🔗

Осталось только дождаться 7 версии

#FrontendBeer #typescript (c) Frontend Beer

Microsoft News

A 10x Faster TypeScript

Embarking on a native port of the existing TypeScript compiler and toolset to achieve a 10x performance speed-up.

😱3⚡2

63 viewsedited 20:21

Frontend Beer

В параллель с этим развивается нативная поддержка TS в Node.js

На мой взгляд это хороший двигатель прогресса, на фоне Deno

Интересно понаблюдать, как когда-то за гонкой менеджеров пакетов

#FrontendBeer #typescript #deno (c) Frontend Beer

nodejs.org

Node.js — Node v22.6.0 (Current)

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

69 viewsedited 20:32

Frontend Beer

Кстати, попробовать новую версию TS можно используя этот репозиторий

#FrontendBeer #typescript (c) Frontend Beer

GitHub

GitHub - microsoft/typescript-go: Staging repo for development of native port of TypeScript

Staging repo for development of native port of TypeScript - microsoft/typescript-go

76 viewsedited 20:37

Frontend Beer

EOL / EOS: что это и почему важно?

Каждая библиотека или программа, проходит через жизненный цикл: разработка новой версии, активная поддержка, затем постепенное завершение разработки и поддержки выпущенной версии. И так по кругу 🔄

📌 EOL (End of Life) — момент, когда продукт перестает получать какие-либо обновления от разработчиков
📌 EOS (End of Support) — момент, когда прекращается не только разработка, но и техническая поддержка (включая исправление уязвимостей)

Что это значит? Использование таких технологий становится небезопасным, так как в них могут обнаруживаться новые уязвимости, но исправлять их уже никто не будет

В недавней email рассылке касательно Node.js, натолкнулся на интересный инструмент endoflife.date.
Он позволяет следить за жизненным циклом используемых инструментов в разработке и поддержке ПО.
Можно просто иногда обращаться к текстовой версии, на самом сайте. А если хотите сделать свой дэшборд - можно воспользоваться API.
Нет нужного инструмента в списке? Всегда можно законтрибьютить 📝

#FrontendBeer #eol #eos #endoflife #date (c) Frontend Beer

endoflife.date

Home

Check end-of-life, support schedule, and release timelines for more than 380+ products at one place.

👍1🔥1

61 viewsedited 18:55

Frontend Beer

💡 Styled-components официально переходит в режим поддержки

Evan Jacobs объявил о завершении активной разработки styled-components. В своем заявлении он поблагодарил сообщество за вклад и поддержку, отметив, что многие идеи библиотеки стали стандартом в экосистеме CSS-in-JS.

Если вы всё ещё используете styled-components, сейчас самое время подумать о миграции на другие альтернативы: CSS modules / Tailwind / и пр.

#FrontendBeer #styledcomponents #css-in-js (c) Frontend Beer

Opencollective

Thank you - styled-components

First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...

👌2🔥1😢1

64 viewsedited 15:20

Frontend Beer

Хотел написать сегодня пост про Mutation Observer и как его можно применять, на примере компонента табов… но пока готовил пост и репу с кодом понял, что сегодня не успею 😀

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

Взял я значит шаблон для сборки проекта на Vite с уже подключенным React & Mantine. Далее подготовил код и пушнул в репу вместе со всеми коммитами автора шаблона 🥶

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


git checkout --orphan new-branch # Cоздаем новую ветку без истории изменений

git add -A
git commit -m "TEXT OF YOUR LAST COMMIT"

git branch -D main  # Удаляем старую ветку
git branch -m main  # Переименовываем нашу новую ветку new-branch обратно в main

git push --force origin main # ну и затираем старые изменения

Вот и все 🙂

А про Mutation Observer уже завтра расскажу

#FrontendBeer #git #articlenotes #заметки (c) Frontend Beer

Frontend Beer

Обсудим фронтенд под кружку крафтового

EN version: https://yangx.top/frontendbeer_en

Автор / Author: @dipiash

👍3🔥1👏1😁1🎉1

71 viewsedited 19:44

Frontend Beer

🚀 Как и обещал в предыдущем посте, добрался описать опыт разработки компонента вкладок с поддержкой прокрутки

В статье я разобрал:
- Как сделать скроллящийся контейнер с вкладками
- Как подскролливать к активной вкладке
- Как адаптировать компонент под изменения размеров окна

Mutation Observer, scrollIntoView, requestAnimationFrame и вот это вот все ✅

Cтатья тут 👉 Tabs component with scrolling support со ссылкой на пример с кодом

Demo 📜: https://dipiash.github.io/mantine-scrollable-tabs/

#FrontendBeer #mutationobserver #react #typescript #mantine #tabs (c) Frontend Beer

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥2❤1👍1

65 viewsedited 10:30

Frontend Beer

🚀 Dokploy. Удобный деплой без лишних движений

Задумал очередной пет-проект (парсинг слотов на визу), навайбкодил, всё отладил. Пора деплоить на сервер

Классика: настроить сервер, закинуть SSH ключи, накатить Docker, прикрутить CI, прописать env и пр. Делал это уже миллион раз через консоль. Но в этот раз захотелось чуть проще. Как на Vercel, только без serverless-ограничений

Решил попробовать Dokploy

Интерфейс простой:
1. ставим через bash-скрипт
2. регаем пользователя
3. подключаем GitHub репу
4. указываем путь к docker-compose для проекта
5. добавляем пару env переменных

И всё. Проект деплоится. На каждый пуш - автообновление. Никакой CI писать не нужно

Когда понимаешь, как всё работает под капотом, особенно приятно найти инструмент, который делает часть вещей за тебя

#docker #deployment #devops #github #dokploy #FrontendBeer

Dokploy

Dokploy - Simplify Your DevOps

Deploy applications and manage databases with ease using Dokploy. Learn how our platform can elevate your infrastructure management.

👍5🔥3

77 views16:23

Frontend Beer

Please open Telegram to view this post

VIEW IN TELEGRAM

20:05

Frontend Beer

🤐

Зависает установка node_modules на npm ci? Разбираемся, что делать и как искать причину

Есть у меня репозиторий с boilerplate проектом в котором я давно не обновлял зависимости. Что же пришла пора

Обновив ключевые зависимости пушнул ветку, завел PR на который закрутились Github Action... и action завис на этапе установки node_modules через npm ci
Дальше этих строчек лог установки не идет


...
npm warn deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.

Что можно сделать с этим?

1. Для начала включить полный лог, через параметр --verbose:


npm ci --prefer-offline --verbose

Что же видим лог, что все модули скачиваются => сетевых проблем нет, но лог пополнился информацию о том, что выполняются postinstall скрипты в некоторых модулях. Опять дальше этих строк ничего не идет:


...
npm info run @swc/[email protected] postinstall node_modules/@swc/core node postinstall.js
npm info run [email protected] postinstall node_modules/core-js node -e "try{require('./postinstall')}catch(e){}"
npm info run [email protected] postinstall node_modules/core-js-pure node -e "try{require('./postinstall')}catch(e){}"
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/esbuild node install.js
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/nx node ./bin/post-install
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/unrs-resolver napi-postinstall unrs-resolver 1.10.1 check
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/@modern-js/node-bundle-require/node_modules/esbuild node install.js
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run @swc/[email protected] postinstall { code: 0, signal: null }

2. Включаем лог для postinstall скриптов
С npm v7+, скрипты postinstall, preinstall, и другие lifecycle-скрипты выполняются в фоне. И чтобы увидеть логи, нужно добавить опцию --foreground-scripts:


npm ci --prefer-offline --verbose --foreground-scripts

Здорово, теперь в логах можно увидеть:


npm info run @swc/[email protected] postinstall node_modules/@swc/core node postinstall.js
> @swc/[email protected] postinstall
> node postinstall.js
Error: Failed to load native binding
    ...
    Error: Cannot find module './swc.linux-x64-gnu.node'
    ...
    @swc/core was not able to resolve native bindings installation. It'll try to use @swc/wasm as fallback instead.
npm info run @swc/[email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/core-js node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall
> node -e "try{require('./postinstall')}catch(e){}"
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/core-js-pure node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall
> node -e "try{require('./postinstall')}catch(e){}"
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/esbuild node install.js
> [email protected] postinstall
> node install.js
npm info run [email protected] postinstall { code: 0, signal: null }
npm info run [email protected] postinstall node_modules/nx node ./bin/post-install
> [email protected] postinstall

Тут видно, что не хватает нативных платформенных зависимостей - именно для CI. Это решается довольно просто, докинем в установку:


npm add @swc/core-linux-x64-gnu @esbuild/linux-x64 @rollup/rollup-linux-x64-gnu

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥3❤1👍1

30 views17:38

Frontend Beer

Окей, CIка крутится - ошибки ушли для всех postinstall скриптов, но все равно установка не происходит до конца

3. Какие варианты? Только смотреть на зависимости и их changelog, чтобы понять где проблема
Ну и строки в логах c NX не дают покая:


npm info run [email protected] postinstall node_modules/nx node ./bin/post-install
> [email protected] postinstall

Пробую отключить postinstall скрипты через флаг --ignore-scripts - но это снова не помогает, хоть установка и проходит, но перестали работать команды NX - тоже сатил зависать. Все-таки чего-то не хватает.

Можно было полезть в сорсы и начать дебажить, а что там происходит, но мне хотелось сначала найти рабочее решение. И тут можно воспользоваться подходом похожим на git-bisect и просто найти рабочую версию NX, максимально близку к последней. Что я собственно и сделал

В последней итерации попробовал обновить NX до бета версии: 21.3.0-beta.0 и там тоже Github Actions завелись ⭐️️ Теперь можно в спокойной обстановке покопаться в сорцах NX и понять, чтоже там поменяли

#frontops #npm #actions #github_actions #nx #FrontendBeer

👍3🔥2

26 views17:38

About

Blog

Apps

Platform