Why GitHub Actions Became the Heart of My Publishing Pipeline
Learn which orchestration options I considered, why GitHub Actions was the right choice, and how I split my publishing pipeline into two final workflows.
· 6 min read
Continue reading
All articles
Building My Publishing Pipeline With AI
How I built an automated publishing pipeline with Notion, GitHub Actions, and Cloudinary, and what I learned using AI to implement it.
· 8 min readContinue reading
How To Create An Artistic And Personal Intro Video With ChatGPT And Nano Banana
The process I used to create my 10-second intro video, from generating a personal sketch with ChatGPT to building a storyboard and producing the final animation with Nano Banana.
· 13 min readContinue reading
What would I do without AI?
A senior engineer’s practical take on using AI at work—covering productivity, onboarding, code analysis, writing, and why AI feels more like a companion than a threat.
· 7 min readContinue reading
Making a custom input counter component accessible
Learn how to resolve accessibility problems caused by overlapping interactive elements in input counter components. By switching from absolute positioning to CSS Flexbox, you'll achieve better accessibility, cleaner code, and built-in RTL/LTR language support.
· 4 min readContinue reading
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.
· 9 min readContinue reading
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.
· 5 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.
· 5 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.
· 5 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.
· 10 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.
· 4 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.
· 9 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.
· 7 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.
· 7 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.
· 10 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
· 5 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.
· 8 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
· 7 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.
· 8 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
· 5 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
· 7 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.
· 7 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!
· 7 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
· 7 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
· 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
· 6 min readContinue reading
React component testing with Vitest efficiently
Tips for planning and testing your React component with Vitest and React Testing Library.
· 8 min readContinue reading
Test your React hooks with Vitest efficiently
Tips for planning and testing custom React hooks with Vitest and React Testing Library.
· 8 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!
· 11 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.
· 9 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
· 9 min readContinue reading
Using TailwindCSS with Nuxt efficiently
How to build Nuxt application with TailwindCSS and its tools.
· 9 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.
· 7 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.
· 9 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.
· 16 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.
· 9 min readContinue reading
Testing Vue components the right way
Tips for planning and testing your Vue component with Vitest and Vue Test Utils
· 16 min readContinue reading
Build an accessible text field component with React
How to build an accessible text field component in React and TypeScript
· 12 min readContinue reading
Build a dialog manager with XState
Learn how to design a dialog manager with XState, model modal states clearly, and coordinate dynamic dialogs with predictable state machine logic.
· 21 min readContinue reading
Exploring the HTML Dialog element
How to build an accessible dialog component using the native HTML dialog element
· 10 min readContinue reading
The must-have modules for a Nuxt site (p.2)
Explore Nuxt modules for SEO, localization, robots, sitemaps, analytics, and performance so your Nuxt site is easier to crawl and optimize.
· 16 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
· 9 min readContinue reading
Deployment with GitHub Actions for Nuxt projects
How to enable auto deployment to Vercel/Netlify with Git submodule in Nuxt projects.
· 20 min readContinue reading
Headless CMS with Nuxt and Git submodules
Explore how to use Nuxt Content as a Git-based headless CMS with submodules, keeping content separate while preserving a smooth developer workflow.
· 17 min readContinue reading
Images optimization with Cloudinary in Nuxt apps
Learn how to optimize images in Nuxt with Cloudinary, configure the module, transform assets, and improve frontend performance with less manual work.
· 12 min readContinue reading
Dark/Light theme with TailwindCSS and Nuxt
Learn how to build a customizable dark and light theme in Nuxt with TailwindCSS, color mode setup, generated variants, and reusable styling patterns.
· 18 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. 🚀
· 15 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?
· 8 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. 🚀
· 10 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.
· 12 min readContinue reading
