Maya Shavin π·βοΈπ‘ articles - 35 total
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.
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.
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.
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.
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.
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.
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.
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 and pixel-to-pixel comparison and their limitations. Perfect for developers aiming to enhance testing quality in dynamic web applications.
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.
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.
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.
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
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
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.
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.
Component Testing in Vue: Using routing for states
A step-by-step guide on how to test a component using routing with Playwright
Exploring Component Testing in Vue with Playwright
A step-by-step guide on how to test a component with the preview Playwright's component testing feature
Build a beautiful 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.
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!
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
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
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
React component testing with Vitest efficiently
Tips for planning and testing your React component with Vitest and React Testing Library.
Test your React hooks with Vitest efficiently
Tips for planning and testing custom React hooks with Vitest and React Testing Library.
Making dialog with HTML Dialog element
How to build an accessible dialog component using the native HTML dialog element
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!
Build a product gallery app easily with TailwindCSS and StorefrontUI
How to develop a product gallery Nuxt application with StorefrontUI and TailwindCSS.
Build a custom palette using color-mix() in TailwindCSS
How to generate color palette using CSS color-mix() function and for your TailwindCSS application
Using TailwindCSS with Nuxt efficiently
How to build Nuxt application with TailwindCSS and the modules for it.
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.