Open in app

Sign In

Write

Sign In

Maya Shavin
Maya Shavin

1.93K Followers

Home

About

Published in

ITNEXT

·May 16

Effortlessly Nuxt navigation: Crafting Dynamic breadcrumbs

Using breadcrumbs can be beneficial for a complex site since it provides users a clear visual understanding of the site hierarchy and a more straightforward approach for a user to retrace their steps, improving their experience and engagement while reducing the bouncing rates for our sites. In this post, we…

Vuejs

8 min read

Effortlessly Nuxt navigation: Crafting Dynamic breadcrumbs
Effortlessly Nuxt navigation: Crafting Dynamic breadcrumbs
Vuejs

8 min read


Published in

ITNEXT

·May 9

Build a product gallery app easily with TailwindCSS and StorefrontUI

Working with a component library to build your custom UI can be complicated, especially when you want to integrate with other tools, such as TailwindCSS. …

Programming

8 min read

Build a product gallery app easily with TailwindCSS and StorefrontUI
Build a product gallery app easily with TailwindCSS and StorefrontUI
Programming

8 min read


Published in

ITNEXT

·Apr 18

Build a custom palette using color-mix() in TailwindCSS

In this post, we will see how to use CSS function `color-mix()` with CSS variables to generate a custom palette for our Nuxt application efficiently with TailwindCSS. Prerequisites It would be best if you had your Nuxt application set up by using the following command: npx nuxi init tailwindcss-color-mix Selecting TailwindCSS…

CSS

8 min read

Build a custom palette using color-mix() in TailwindCSS
Build a custom palette using color-mix() in TailwindCSS
CSS

8 min read


Published in

Frontend Weekly

·Mar 30

Position your element with CSS inset logical property

In this tutorial, we will learn how to position an element using the inset logical property. We will also learn how the inset logical property differs from the physical properties like top, bottom, left, and right. Understanding the position property The browser uses the position property to determine how to position an element in…

CSS

6 min read

Position your element with CSS inset logical property
Position your element with CSS inset logical property
CSS

6 min read


Published in

ITNEXT

·Mar 28

Using TailwindCSS with Nuxt efficiently

In this post, we will see how to use TailwindCSS with the Nuxt application efficiently with the help of the official Nuxt module for TailwindCSS. …

Nuxtjs

8 min read

Using TailwindCSS with Nuxt efficiently
Using TailwindCSS with Nuxt efficiently
Nuxtjs

8 min read


Published in

ITNEXT

·Mar 2

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. — In the previous post, we explored how to build an accessible tooltip component in Vue. However, creating an element for a simple tooltip can be overkill. Hence, in the post, we will explore another approach to enhancing a component with a tooltip, using custom directives and CSS. What is a Vue directive? While a Vue…

Vuejs

7 min read

Build a custom tooltip directive with CSS and Vue
Build a custom tooltip directive with CSS and Vue
Vuejs

7 min read


Published in

ITNEXT

·Feb 23

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. — Tooltip is an informative and short message which appears only when there is user interaction with an element on the UI of an application. As a commonly used feature, it aims to provide hints or additional descriptive information for a particular part. For interactive elements like buttons, especially icon buttons…

Vuejs

12 min read

Build an accessible tooltip component efficiently with CSS and Vue
Build an accessible tooltip component efficiently with CSS and Vue
Vuejs

12 min read


Published in

Better Programming

·Feb 16

Efficiently Using keyof and typeof for Types in TypeScript

Let’s learn to generate complex types with keyof and typeof as an efficient way of coding — In this article, we will learn how to extract and declare constant types by combining the type operators typeof, keyof and enums to benefit your codebase. Prerequisites For a better coding experience, you should install TypeScript in your IDE, such as VSCode. It will provide you with essential features such as…

JavaScript

7 min read

Efficiently Using keyof and typeof for Types in TypeScript
Efficiently Using keyof and typeof for Types in TypeScript
JavaScript

7 min read


Published in

Better Programming

·Feb 7

Testing Vue Components the Right Way

Tips for planning and testing your Vue component with Vitest and Vue Test Utils — This post will explore tips and practices we can use to simplify our Vue component testing with tools like Vitest. Before we start, let’s look at how to quickly set up Vitest for our project. Setting up Vitest Vitest is the fast unit testing framework powered by Vite and for Vite-powered projects. It…

Testing

12 min read

Testing Vue Components the Right Way
Testing Vue Components the Right Way
Testing

12 min read


Published in

Better Programming

·Feb 1

Accessible Text Field Component With React

How to build an accessible text field component in React and TypeScript — Writing accessible components, as many developers believe, is a challenging task. However, with the appropriate structure and component design, you can achieve accessibility quickly, starting from the essential ones. In this article, we are going to implement a TextField component using React and TypeScript, which has the following features:

Accessibility

10 min read

Accessible Text Field Component With React
Accessible Text Field Component With React
Accessibility

10 min read

Maya Shavin

Maya Shavin

1.93K Followers

Senior Software Engineer @Microsoft www.mayashavin.com

Following
  • Fresh Frontend Links

    Fresh Frontend Links

  • Dima Vishnevetsky

    Dima Vishnevetsky

  • tubik

    tubik

  • Nathan Curtis

    Nathan Curtis

  • Ramona

    Ramona

See all (59)

Help

Status

Writers

Blog

Careers

Privacy

Terms

About

Text to speech

Teams