#vuejs — Public Fediverse posts

Как я 8 дней ловил утечку памяти в Nuxt 3 SSR, и несколько раз думал, что починил

Всем привет. Я занимаюсь фронтендом в небольшой команде сервиса бронирования отелей. Хочу как я 8 дней ловил утечку памяти на проде, несколько раз думал, что починил, и каждый раз ошибался. А последний фикс был не в нашем коде, а в патче самого Vue, который через неделю апстрим откатил как регрессионный. У нас в результате осталась одна патч-версия, в которой утечки нет; обычный minor/patch update сейчас для нас не безопасен без повторной проверки heap-снапшотами. Наш стек Nuxt 3.18 + Vue 3.5.x + TypeScript, SSR, Pinia, PM2 cluster, nginx перед Node. Обычный каталог отелей с тысячами SEO-страниц вида /oteli-v-{город}/{подборка}

https://habr.com/ru/articles/1040346/

#memory_leak #утечка_памяти #Vuejs #Nuxtjs #Nodejs #JavaScript #SSR #V8

Как я 8 дней ловил утечку памяти в Nuxt 3 SSR, и несколько раз думал, что починил

Всем привет. Я занимаюсь фронтендом в небольшой команде сервиса бронирования отелей. Хочу как я 8 дней ловил утечку памяти на проде, несколько раз думал, что починил, и каждый раз ошибался. А последний фикс был не в нашем коде, а в патче самого Vue, который через неделю апстрим откатил как регрессионный. У нас в результате осталась одна патч-версия, в которой утечки нет; обычный minor/patch update сейчас для нас не безопасен без повторной проверки heap-снапшотами. Наш стек Nuxt 3.18 + Vue 3.5.x + TypeScript, SSR, Pinia, PM2 cluster, nginx перед Node. Обычный каталог отелей с тысячами SEO-страниц вида /oteli-v-{город}/{подборка}

https://habr.com/ru/articles/1040346/

#memory_leak #утечка_памяти #Vuejs #Nuxtjs #Nodejs #JavaScript #SSR #V8

Как я 8 дней ловил утечку памяти в Nuxt 3 SSR, и несколько раз думал, что починил

Всем привет. Я занимаюсь фронтендом в небольшой команде сервиса бронирования отелей. Хочу как я 8 дней ловил утечку памяти на проде, несколько раз думал, что починил, и каждый раз ошибался. А последний фикс был не в нашем коде, а в патче самого Vue, который через неделю апстрим откатил как регрессионный. У нас в результате осталась одна патч-версия, в которой утечки нет; обычный minor/patch update сейчас для нас не безопасен без повторной проверки heap-снапшотами. Наш стек Nuxt 3.18 + Vue 3.5.x + TypeScript, SSR, Pinia, PM2 cluster, nginx перед Node. Обычный каталог отелей с тысячами SEO-страниц вида /oteli-v-{город}/{подборка}

https://habr.com/ru/articles/1040346/

#memory_leak #утечка_памяти #Vuejs #Nuxtjs #Nodejs #JavaScript #SSR #V8

Как я 8 дней ловил утечку памяти в Nuxt 3 SSR, и несколько раз думал, что починил

Всем привет. Я занимаюсь фронтендом в небольшой команде сервиса бронирования отелей. Хочу как я 8 дней ловил утечку памяти на проде, несколько раз думал, что починил, и каждый раз ошибался. А последний фикс был не в нашем коде, а в патче самого Vue, который через неделю апстрим откатил как регрессионный. У нас в результате осталась одна патч-версия, в которой утечки нет; обычный minor/patch update сейчас для нас не безопасен без повторной проверки heap-снапшотами. Наш стек Nuxt 3.18 + Vue 3.5.x + TypeScript, SSR, Pinia, PM2 cluster, nginx перед Node. Обычный каталог отелей с тысячами SEO-страниц вида /oteli-v-{город}/{подборка}

https://habr.com/ru/articles/1040346/

#memory_leak #утечка_памяти #Vuejs #Nuxtjs #Nodejs #JavaScript #SSR #V8

J'essaie d'arriver à quelque chose comme mon dessin sur le tableau blanc !

#vuejs #dataviz #webdev

J'essaie d'arriver à quelque chose comme mon dessin sur le tableau blanc !

#vuejs #dataviz #webdev

J'essaie d'arriver à quelque chose comme mon dessin sur le tableau blanc !

#vuejs #dataviz #webdev

J'essaie d'arriver à quelque chose comme mon dessin sur le tableau blanc !

#vuejs #dataviz #webdev

Frontend Status: свежий дайджест фронтенда и AI — 25.05.2026

Привет! Это 16 выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 Если Next.js кажется слишком «магическим»: интервью с создателем TanStack — про client-first, type inference и честный выбор стека без маркетингового тумана. 🤖 Когда ИИ уже в проде, а контроля нет: от джунов без Copilot до паттерна «архитектор + разработчик», ревью агентских PR, «В поисках Мемо» (одна таблица в ClickHouse вместо Qdrant и Chroma) и on-premise на 4× RTX 4090 с водянкой — чтобы внедрять AI дисциплинированно. 🛡️ Один пропуск в npm — и секреты в CI утекают: атака на 84 пакета @tanstack , чеклист безопасности React (XSS, HttpOnly, CSP, Zod) и инициатива Mozilla WAICT — чтобы не узнавать об инциденте из новостей. 🎨 CSS и анимации без лишнего JS: safe-area-inset на реальных устройствах, забытые HTML/CSS-фичи, scrollytelling на scroll-state queries и портфолио на GSAP + шейдерах — чтобы интерфейс выглядел дороже, а код оставался прозрачным. ⚡ JavaScript и Node.js 26 без сюрпризов при миграции: orval из OpenAPI, когда цепочки .filter().map() вредят читаемости, Temporal и ломающие изменения в релизе от 5 мая — чтобы меньше гадать и быстрее обновлять рантайм. ⚛️ React-стек 2026 без ставки вслепую: патчи Next.js, local-first как data architecture, карта 60+ библиотек, Ant Design 6.4 и whisper.rn on-device — чтобы выбрать инструменты осознанно, а не по инерции. 🅰️ Angular и инфраструктура вокруг него: Taiga UI MCP для агентов. 📦 GitHub в России, интерактивная карта HistoryPrint на 13 000 событий, критика FSD, Safari TP 243, дизайн-система в DESIGN.md без дизайнера и сводка апдейтов Deno, Vite, Next.js, Vue и Tailwind — …и многое другое.

https://habr.com/ru/articles/1039126/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Je travaille depuis peu pour #dezrann un outil #openSource d’analyse musicale développé par l’université de #Lille.

Et dans ce cadre on travail pour faire des #webComponents pour simplement afficher des partitions dans des pages web.

C’est encore brut de décoffrage mais ça marche, vous pouvez voir la demo sur http://ala.algomus.net/dev/dev-20260520/embed/

#analyseMusicale #vueJs #webDev

Je travaille depuis peu pour #dezrann un outil #openSource d’analyse musicale développé par l’université de #Lille.

Et dans ce cadre on travail pour faire des #webComponents pour simplement afficher des partitions dans des pages web.

C’est encore brut de décoffrage mais ça marche, vous pouvez voir la demo sur http://ala.algomus.net/dev/dev-20260520/embed/

#analyseMusicale #vueJs #webDev

Je travaille depuis peu pour #dezrann un outil #openSource d’analyse musicale développé par l’université de #Lille.

Et dans ce cadre on travail pour faire des #webComponents pour simplement afficher des partitions dans des pages web.

C’est encore brut de décoffrage mais ça marche, vous pouvez voir la demo sur http://ala.algomus.net/dev/dev-20260520/embed/

#analyseMusicale #vueJs #webDev

Je travaille depuis peu pour #dezrann un outil #openSource d’analyse musicale développé par l’université de #Lille.

Et dans ce cadre on travail pour faire des #webComponents pour simplement afficher des partitions dans des pages web.

C’est encore brut de décoffrage mais ça marche, vous pouvez voir la demo sur http://ala.algomus.net/dev/dev-20260520/embed/

#analyseMusicale #vueJs #webDev

🚀 Excited to share our latest ThemeForest product — Turbine – Multipurpose Admin Dashboard Template 🎉

🔥 Turbine Includes:
✔ 310+ Ready Pages
✔ 18+ Dashboard Variations
✔ 13+ Multi-Language Support
✔ 18+ Technology Versions

💻 Available 18+ Technologies

🔗 Check it out on ThemeForest:
https://lnkd.in/dngbWvV9

Would love your feedback and support 🙌

#ThemeForest #AdminDashboard #ReactJS #Laravel #VueJS #Angular #TailwindCSS #ASPNet #DashboardTemplate #WebDevelopment #SaaS #CRM #UIUX #Developer

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

How to use wa-combobox with Vue

Previously, we used wa-dropdown to build a state, city, and zip dropdown set, and two years ago, we looked at implementing autocomplete with Vue. Today, we are going to look at how to use Web Awesome’s Combobox component to combine the two. This demo uses the same dataset that I used for the dropdown demos. It also obviously uses the same CodePen 2.0 style that we used previously.

As before, App.vue is the core of our application. There is a ComboBox.vue file that creates the ComboBox using the wa-combobox component. Feel free to fork the pen, experiment with the code, and see how easily you can adapt it for your own Vue projects. Happy coding!

Example: https://grand-block-gar.codepen.app

Everyone claims to build modern front-end apps.

But who actually delivers scalable, high-performance UI/UX in 2026? ⚡

We reviewed top front-end development companies helping startups and enterprises build faster with React, Angular, and Vue.

👉 Watch here:
https://youtu.be/vmOgCJqEXeU?si=oRdTu8lmivkpftNg

#FrontendDevelopment #HireDevelopers #ReactJS #Angular #VueJS #WebDevelopment #SaaSDevelopment #AcquaintSofttech

Everyone claims to build modern front-end apps.

But who actually delivers scalable, high-performance UI/UX in 2026? ⚡

We reviewed top front-end development companies helping startups and enterprises build faster with React, Angular, and Vue.

👉 Watch here:
https://youtu.be/vmOgCJqEXeU?si=oRdTu8lmivkpftNg

#FrontendDevelopment #HireDevelopers #ReactJS #Angular #VueJS #WebDevelopment #SaaSDevelopment #AcquaintSofttech

𝗩𝘂𝗲 𝗨𝗻𝗶𝗰𝗼𝗻𝘀:

#Vuejs #Components #Icons #SVG #VueUnicons

https://thewhale.cc/posts/vue-unicons

1000+ Pixel-perfect svg unicons for your next project as Vue components.

𝗩𝘂𝗲 𝗨𝗻𝗶𝗰𝗼𝗻𝘀:

#Vuejs #Components #Icons #SVG #VueUnicons

https://thewhale.cc/posts/vue-unicons

1000+ Pixel-perfect svg unicons for your next project as Vue components.

𝗩𝘂𝗲 𝗨𝗻𝗶𝗰𝗼𝗻𝘀:

#Vuejs #Components #Icons #SVG #VueUnicons

https://thewhale.cc/posts/vue-unicons

1000+ Pixel-perfect svg unicons for your next project as Vue components.

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Frontend Status: свежий дайджест фронтенда и AI — 06.05.2026

Привет! Это 15-й выпуск Frontend Status — дайджеста по фронтенд-разработке. В этом выпуске: 📺 MoscowJS 70 про инженерную культуру в действии: доклады и круглый стол показывают, как командам быстрее синхронизироваться и принимать сильные технические решения. ⚛️ React Server Components и кеширование страниц: разбираем partial page caching, чтобы ускорять загрузку и снижать стоимость рендеринга без потери актуальности контента. 🤖 AI из «вау-демо» переходит в дисциплину: разбираем рабочие промпт-пайплайны и практики Claude Code, которые дают предсказуемый результат, а не случайный успех. 🛡️ Безопасность больше не факультатив: кейс критической уязвимости в GitHub и массовый багхант в Firefox напоминают, как быстро один пропуск превращается в инцидент. 🎨 CSS и анимации взрослеют: от scroll-driven подходов до нативной случайности и новых API, которые делают интерфейсы богаче без тяжёлого JS. ⚡ JavaScript и React на новом витке: ES2025/ES2026, типизированные контракты, React Compiler, TanStack Form и useHotkeys как база для масштабируемой фронтенд-разработки. 🌐 Стандарты и платформа двигаются вперёд: Baseline, Long Animation Frames, CBOR-LD и апдейты WebGPU меняют практику производительности и межплатформенной разработки. …и многое другое.

https://habr.com/ru/articles/1032276/

#javascript #typescript #css #react #angular #vuejs #css3 #браузеры #nodejs

Evan You—State of Vue 2026, by @evanyou.me (@vuejsamsterdam.bsky.social):

https://www.youtube.com/watch?v=a9_Ud5MFTjU

#videos #vuejs #vite

Evan You—State of Vue 2026, by @evanyou.me (@vuejsamsterdam.bsky.social):

https://www.youtube.com/watch?v=a9_Ud5MFTjU

#videos #vuejs #vite

Evan You—State of Vue 2026, by @evanyou.me (@vuejsamsterdam.bsky.social):

https://www.youtube.com/watch?v=a9_Ud5MFTjU

#videos #vuejs #vite

Evan You—State of Vue 2026, by @evanyou.me (@vuejsamsterdam.bsky.social):

https://www.youtube.com/watch?v=a9_Ud5MFTjU

#videos #vuejs #vite

Evan You—State of Vue 2026, by @evanyou.me (@vuejsamsterdam.bsky.social):

https://www.youtube.com/watch?v=a9_Ud5MFTjU

#videos #vuejs #vite

Мы увязли в Feature-Sliced Design

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья —продолжение предыдущей: Мой справочник по Feature-Sliced Design . На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

https://habr.com/ru/companies/T1Holding/articles/1028836/

#react #reactjs #vue #vuejs #javascript #typescript #featuresliced_design #fsd #frontend #вебразработка

Мы увязли в Feature-Sliced Design

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья —продолжение предыдущей: Мой справочник по Feature-Sliced Design . На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

https://habr.com/ru/companies/T1Holding/articles/1028836/

#react #reactjs #vue #vuejs #javascript #typescript #featuresliced_design #fsd #frontend #вебразработка

Мы увязли в Feature-Sliced Design

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья —продолжение предыдущей: Мой справочник по Feature-Sliced Design . На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

https://habr.com/ru/companies/T1Holding/articles/1028836/

#react #reactjs #vue #vuejs #javascript #typescript #featuresliced_design #fsd #frontend #вебразработка

Мы увязли в Feature-Sliced Design

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья —продолжение предыдущей: Мой справочник по Feature-Sliced Design . На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

https://habr.com/ru/companies/T1Holding/articles/1028836/

#react #reactjs #vue #vuejs #javascript #typescript #featuresliced_design #fsd #frontend #вебразработка

Testing Vue Components in the Browser, by @b0rk:

https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/

#vuejs #components #testing #browsers

Testing Vue Components in the Browser, by @b0rk:

https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/

#vuejs #components #testing #browsers

Testing Vue Components in the Browser, by @b0rk:

https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/

#vuejs #components #testing #browsers

Testing Vue Components in the Browser, by @b0rk:

https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/

#vuejs #components #testing #browsers

Testing Vue Components in the Browser, by @b0rk:

https://jvns.ca/blog/2026/05/02/testing-vue-components-in-the-browser/

#vuejs #components #testing #browsers

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app

Trying to figure out the CodePen 2.0 editor

Recently, CodePen introduced CodePen 2.0, and since then, I have been trying to figure out how to modify my workflow for this blog to use it. I have been using CodePen to host my code demos for over six years now, and it feels weird to change, but it seems like a positive development. Lately, I have been writing a lot of posts about how to use Vue.js with Web Awesome. Let’s start with something that we can use to demonstrate basic functionality with Vue.js, Web Awesome, and Font Awesome.

So, what’s going on here? In previous demos (like the one for More Web Awesome Dropdowns), there were three files for each pen (the markup, CSS, and JavaScript). For 2.0 pens, you can have many more (and it uses Vite). In the demo above, App.vue handles the application layout, Header.vue handles the header, and CounterButton.vue handles the button’s behavior. I have done A LOT of experimentation since the 2.0 editor dropped, and I can’t get a few things (like Vue Router) to work, but I am hoping that will come with time. Since I can add more files, I added the social meta tags and a manifest.json. It means that the result should be more shareable on its own. I also added a light-mode/dark-mode toggle, a link to view the files, and a link to the blog post.

I think that, moving forward, I will keep using the same header. I hope that you appreciate the result.

Example: https://strange-scene-malamute.codepen.app