Managing Multi-Step Forms in Vue with XState
Learn how to use XState to manage a multi-step sign-up form in Vue.js, ensuring predictable state transitions, async submissions, and better maintainability.
Feb 12, 2025 · 8 min read
Continue reading
All articles
My Top 5 VSCode Extensions to Supercharge Your Markdown Writing
Discover the top 5 VSCode extensions to enhance your Markdown writing workflow. From linting to TOC generation, these tools will boost your productivity and your content creation process.
Jan 29, 2025 · 4 min readContinue reading
Mastering Flexible Layouts: CSS Flexbox VS Grid for Responsive Design
Discover the different approaches using CSS Flexbox and Grid for creating responsive, adaptive display and automatic distribution of cards in a gallery container.
Jan 21, 2025 · 4 min readContinue reading
Resolving Auto-Scroll issues for overflow container in a Nuxt app
Learn how to fix auto-scroll issues in a Nuxt 3 project, caused by non-scrollable body elements with overflow containers. This guide covers the root causes and provides solutions like removing conflicting styles or using scrollTo.
Jan 15, 2025 · 4 min readContinue reading
Building Social Media Automation: LinkedIn Sharing with Serverless Function
Explore how to use the LinkedIn JavaScript API Client and Netlify serverless functions to build an API for efficient article sharing. This step-by-step tutorial covers permissions setup, OAuth 2.0 configuration, serverless function creation, and deployment to streamline social media promotion for blog posts after publishing.
Jan 08, 2025 · 8 min readContinue reading
Efficient Blog Cover Image Generation with CoCover for VS Code
Learn how CoCover, a GitHub Copilot extension for VS Code, integrate AI-powered tools to simplify cover image generation process for blog posts, without leaving your editor. Ideal for developers seeking a faster, more seamless way to create engaging technical content efficiently.
Nov 04, 2024 · 3 min readContinue reading
Effective Visual Regression Testing for Developers: Vitest vs Playwright
Learn how to implement visual regression testing in Vue applications using Vitest and Playwright, including snapshot, pixel-to-pixel comparison and their limitations. Perfect for developers aiming to enhance testing quality in dynamic web applications.
Oct 30, 2024 · 7 min readContinue reading
Reliable Component Testing with Vitest's Browser Mode and Playwright
Learn how to enhance reliability in Vue component testing by using Vitest's browser mode with Playwright. This post walks you through setting up browser testing, writing your first test, and managing configurations to validate your components in real browser environments, beyond unit testing.
Oct 08, 2024 · 6 min readContinue reading
Seamless Contact Form experience with Netlify Form in Nuxt 3
Learn how to use Netlify Form with Nuxt SSR pre-rendering to create a seamless contact form experience for your static site.
Aug 06, 2024 · 6 min readContinue reading
Build a smart product data generator from image with GPT-4o and Langchain
How to create an AI tool to generate essential product's info based on an image with Langchain and OpenAI GPT-4o in Python.
Jun 25, 2024 · 8 min readContinue reading
Find the last matched element - the bad, the good, and the better
Learn how to find the last matched element in an array using different approaches in JavaScript, from syntactic sugar to performance-efficient solutions
May 07, 2024 · 4 min readContinue reading
Build a Nuxt app with Azure serverless REST API
Learn how to add serverless APIs to a Nuxt app using Azure Functions and its tools.
Mar 12, 2024 · 6 min readContinue reading
Module and environment variable stubbing for efficient testing in Vitest
Learn how to mock a module and stub an environment variable in functional testing with Vitest
Mar 12, 2024 · 6 min readContinue reading
Two shades of mocking a function in Vitest
How to mock a dependency for your unit tests in Vitest using vi.fn() and vi.spyOn() APIs, and when to use which.
Feb 20, 2024 · 7 min readContinue reading
Playwright Component Testing in Vue: Using routing for states
A step-by-step guide on how to test a component using routing with Playwright
Feb 06, 2024 · 4 min readContinue reading
Exploring Component Testing in Vue with Playwright: The basics
A step-by-step guide on how to test a component with the preview Playwright's component testing feature
Jan 30, 2024 · 5 min readContinue reading
Build Kitty's hero banner with CSS background and linear-gradient
Let's explore how to build a hero banner component with an image background using CSS HTML and alternatives.
Dec 19, 2023 · 6 min readContinue reading
Enhancing focus visibility - focus-within or has(:focus)?
Discover how to use the :focus-within & :has() pseudo-classes in CSS to style parent elements based on a child's focus state!
Aug 08, 2023 · 5 min readContinue reading
Focus or focus visible? A guide to make your focus state accessible
How to use CSS focus pseudo classes for styling your elements on different kinds of navigation
Aug 01, 2023 · 6 min readContinue reading
How to extract public id from a Cloudinary URL easily
Explore how we can extract Cloudinary public id and build new URL using the cloudinary-build-url package
Jul 25, 2023 · 4 min readContinue reading
Compose image thumbnail with Cloudinary and Vue
How to build a composable and create a optimized thumbnail for an image with Cloudinary in Vue app
Jul 18, 2023 · 5 min readContinue reading
React component testing with Vitest efficiently
Tips for planning and testing your React component with Vitest and React Testing Library.
Jun 21, 2023 · 7 min readContinue reading
Test your React hooks with Vitest efficiently
Tips for planning and testing custom React hooks with Vitest and React Testing Library.
Jun 13, 2023 · 7 min readContinue reading
Effortlessly Nuxt navigation: Crafting Dynamic breadcrumbs with Storefront UI
Explore our step-by-step tutorial on crafting dynamic breadcrumbs using the powerful SfLink component from Storefront UI. Enhance user experience and make every click count!
May 05, 2023 · 9 min readContinue reading
Build a product gallery app easily with TailwindCSS and StorefrontUI
How to develop a product gallery Nuxt application with StorefrontUI and TailwindCSS.
Apr 28, 2023 · 8 min readContinue reading
Build a custom palette using color-mix() in TailwindCSS
How to generate color palette using CSS color-mix() function and for your TailwindCSS application
Apr 19, 2023 · 8 min readContinue reading
Using TailwindCSS with Nuxt efficiently
How to build Nuxt application with TailwindCSS and its tools.
Mar 23, 2023 · 8 min readContinue reading
Position your element with CSS inset logical property
A guide on how to position an absolute element using CSS logical properties with the prefix inset.
Mar 09, 2023 · 6 min readContinue reading
Build a custom tooltip directive with CSS and Vue
Let's explore how we can add a tooltip to your Vue component using directive and CSS.
Mar 02, 2023 · 8 min readContinue reading
Build an accessible tooltip component efficiently with CSS and Vue
Let's explore how we can build a fully accessible Vue component to display a tooltip from scratch using CSS.
Feb 22, 2023 · 13 min readContinue reading
Using keyof and typeof for types efficiently in TypeScript
Let's learn to generate complex types with keyof and typeof as an efficient way of coding.
Feb 15, 2023 · 7 min readContinue reading
Testing Vue components the right way
Tips for planning and testing your Vue component with Vitest and Vue Test Utils
Feb 06, 2023 · 14 min readContinue reading
Build an accessible text field component with React
How to build an accessible text field component in React and TypeScript
Feb 01, 2023 · 11 min readContinue reading
Build a dialog manager with XState
How to use state machines to create a manageable dialog machine.
Jun 20, 2022 · 18 min readContinue reading
Exploring the HTML Dialog element
How to build an accessible dialog component using the native HTML dialog element
May 20, 2022 · 8 min readContinue reading
The must-have modules for a Nuxt site (p.2)
Let's explore some useful Nuxt.js modules for building a fast and SEO friendly Nuxt.js project
Sep 13, 2021 · 13 min readContinue reading
The must-have modules for a Nuxt site (P.1)
Let's explore some useful Nuxt.js modules for building a fast, beautiful, and SEO friendly Nuxt.js project
Sep 10, 2021 · 7 min readContinue reading
Deployment with GitHub Actions for Nuxt projects
How to enable auto deployment to Vercel/Netlify with Git submodule in Nuxt projects.
Nov 12, 2020 · 17 min readContinue reading
Headless CMS with Nuxt and Git submodules
How to use Nuxt Content as Headless CMS with Git submodules
Sep 22, 2020 · 15 min readContinue reading
Images optimization with Cloudinary in Nuxt apps
How to optimize images efficiently with Cloudinary module for Nuxt.
Aug 11, 2020 · 10 min readContinue reading
Dark/Light theme with TailwindCSS and Nuxt
How to enable customized dark/light theme easily with TailwindCSS and Nuxt Color mode.
Aug 04, 2020 · 15 min readContinue reading
Power up your (Jam)stack with the new Nuxt
The latest Nuxt version — v2.14 may be just what you are looking for to build Jamstack (static) apps. 🚀
Jul 29, 2020 · 13 min readContinue reading
Color for SVG icons and elements with currentColor
Making reusable SVG icons and consistent color theme for components while keeping the style sheets short is now achievable with currentColor - a CSS Module 3 variable. What’s exactly is currentColor?
Jul 27, 2020 · 7 min readContinue reading
Dynamic theme with CSS Variables
Theming a web application is always a challenge, and it can easily lead to performance issues. CSS pre-processor variables are good, but not enough for dynamic theming. Luckily, CSS variables can help to solve this challenge efficiently. 🚀
Jul 15, 2020 · 9 min readContinue reading
ES6 - This I Promise you
What exactly is Promise API, and why is it considered a significant improvement to JavaScript? We are going to find out in this post.
Apr 29, 2020 · 10 min readContinue reading
