DEV Community: Michał Kuncio

A collection of FREE Vue.js, Nuxt and Vite tips is OUT!

Michał Kuncio — Thu, 07 Mar 2024 18:07:47 +0000

Hello everyone,
For some time, I have been sharing Vue and Nuxt-related tips on my Twitter profile. I have received great feedback and thought I should organize all the tips, making them searchable and discoverable for people without an Twitter account. I wanted to give something back to this awesome community I'm a part of by sharing some tips I've learned over the years.

Check out the website here:

https://vuejstips.com

Thank you! 💚

Looking for your first easy open-source contribution? 🤔 Contribute to Frontend History! 📕

Michał Kuncio — Wed, 24 Jan 2024 18:47:19 +0000

Many people would like to make their first contributions to open source, but sometimes it's not easy to find a repository that matches their skill level with current issues 🤔.

If you would like to help open source and make your first ever contributions, I would love to see your pull requests on my new project Frontend History.

How can you help? Frontend History is a calendar showcasing the most important events in the history of frontend development. It's not that easy to keep track of everything happening now and document everything from the past. I would really appreciate it if you could add some new events! 🙏🏻

Please visit the GitHub repository page and see how you can contribute! 🎉

Please stop using reactive() in Vue 3 Composition API 🙏🏻

Michał Kuncio — Thu, 28 Dec 2023 19:38:47 +0000

Intro

When Vue 3 introduced the Composition API, I was really excited about this new way of building components in my favorite framework. And then I was even more excited when script setup came out. I love how reactivity works in Vue 3, and in my opinion, it's the simplest and most elegant approach out of all major frameworks. But there is this one thing that we see very often: "Should I use ref or reactive?", "When should I use ref or reactive?", etc. These questions come from people with varying levels of experience, and there are some battles over the internet where people are trying to create "rules of thumb" for which scenario you should use ref() or reactive(). I've seen some statements like "ref for primitives, reactive for objects and arrays," and let's put it mildly, I don't agree 😀. Why overcomplicate something that should be so damn easy? It's easy.

Just always use ref()

Why? Because ref() can do everything that reactive() can, but reactive() can't do anything that ref() can. So the first question is, why would you mix these different reactivity functions?

<script setup lang="ts">
import { ref, reactive } from 'vue';

const searchPhrase = ref('')

const searchOptions = ref({
    matchCaseSensivity: false,
    includeIgnoredItems: false
})

const showAdvancedSearch = ref(false)
</script>

then

<script setup lang="ts">
import { ref, reactive } from 'vue';

const searchPhrase = ref('')

const searchOptions = reactive({
    matchCaseSensivity: false,
    includeIgnoredItems: false
})

const showAdvancedSearch = ref(false)
</script>

If you create artificial rules like "ref for primitives, reactive for objects and arrays," you introduce unnecessary mental overhead by having to make that decision every time. However, you might ask, "If I can use ref for everything, why does reactive exist?" That's a good question. When using ref(), you have to access the value through the .value property.

<script setup lang="ts">
import {ref} from 'vue';

const searchPhrase = ref('')

function clearSearchPhrase() {
    searchPhrase.value = ''
}
</script>

same with objects and arrays:

<script setup lang="ts">
import {ref} from 'vue';

const newItemName = ref('')
const items = ref([])

function addItem() {
    items.value.push(newItemName.value)
}
</script>

And if you would like to use reactive():

<script setup lang="ts">
import {ref, reactive} from 'vue';

const newItemName = ref('')
const items = reactive([])

function addItem() {
    items.push(newItemName.value)
}
</script>

With Reactive, you don't have to use '.value' to access the value of a reactive variable. Someone might say, "Oh, so it's better than ref! I don't want to add .value every time." I can sort of understand that, but take a look at the example above one more time. Can you see the problem? Sometimes it's ref(), sometimes it's reactive(). Sometimes it's '.value', sometimes not. In large codebases, it can be confusing.

I think the necessity of using .value makes you more aware of when you are using reactive variables or not. It's easy to search the codebase. Trust me, I saw a lot of bugs produced by forgotten '.value' or '.value' being present where it should be because someone used reactive().

Keeping it short: ref is more universal, and you can create the whole project with ref() only to make your code consistent. When you decide to use reactive(), you will also have to use ref(), and your codebase will be mixed with different approaches, which can cause a lot of bugs.

Another limitation of Reactive is the fact that it can't replace the entire object, while Ref can.

let state = reactive({ count: 0 })

// the above reference ({ count: 0 }) is no longer being tracked
// (reactivity connection is lost!)
state = reactive({ count: 1 })

If you are still not convinced, let's check if maybe the Vue docs are saying something about the preferred way.

Oh yes!, the official docs statement is:

"In Composition API, the recommended way to declare reactive state is using the ref() function"

And one last thing: I understand that there might be super rare edge cases, especially for library authors, where reactive might be a better choice. If you think that, in a particular scenario, reactive is the better option and you are really confident about it, then go for it! My point is that ref should be your default choice, and if somehow you end up with this super rare edge case, you can go with reactive`. Let's make it easy and not overthink this, making it easier for other people working on the same project. 🙏🏻

⭐ If you like my posts, please follow me on Twitter:
https://twitter.com/michalkuncio

You can help write down the history of frontend! Contributions are welcomed 🎉

Michał Kuncio — Sat, 16 Dec 2023 12:48:09 +0000

Intro

I just released my new side project called Frontend History. It's open source and contributions are warmly welcomed! 🎉 Here is the link to the repository.

Motivation

The frontend changes rapidly, with new libraries being released daily, and some features achieving full browser support. Likewise, some libraries and browsers become deprecated. What if we had something like a calendar that cataloged all significant events in the frontend world? This would allow us to stay informed about recent news and explore the distant history of frontend. It would be great to have a single comprehensive repository detailing the entire history of frontend development.

FAQ

I want to contribute and add some new items. Which items will be accepted?

If you think it's important to the frontend community, go ahead and add it. Adding JS libraries can be a tad trickier because if we were to include every single JS package in this calendar, it'd be way too big. I think we should only list the relevant packages here, so you got to decide for yourself if a library is worth adding.

What stack is used here?

Nuxt

Why not Astro, Tailwind, HTMX, HTML, XYZ?

I love those tools but I feel the most comfortable with Vue and Nuxt

Contributions

This is a long-term community project that will be as valuable as its contributions. Anyone can contribute and help write down the history of Frontend.

How to contribute?

Create a separate branch originating from main
Create a pull request from your branch to main
For new history entries, please add [History items] at the end of the PR title
For other issues or improvements, don't you don't have to add any label in the PR title
For new history entries, navigate to the appropriate year inside /data directory
data should follow chronological order, there is no additional sorting
It should follow the the following structure:

export default {
    year: 2004,
    items: [
        {
            date: '2004-11-09',
            title: 'First version of Firefox released',
            link: 'https://en.wikipedia.org/wiki/Firefox',
            icon: 'firefox'
        }
    ]
};

If you are adding a new type of history item, you can also add the SVG icon to components/icons
Please note that new history items without the link with date confirmation won't be accepted
Add the repository owner as a reviewer.

The Ultimate Guide to Raycast Productivity for Developers

Michał Kuncio — Wed, 13 Dec 2023 18:58:06 +0000

What is Raycast?

Raycast is an awesome productivity launcher for macOS, and I have to say, it has completely transformed my daily workflow. I won't copy and paste any fancy marketing stuff here because Raycast's landing page already does a fantastic job of explaining it. But let me tell you, there are tons of cool articles about Raycast out there. Personally, I've noticed that I use some of its features in "chains" and I've developed a strong muscle memory for them. So, I wanted to share a few of my favorite workflows for development and content creation. To me, a workflow is a set of Raycast commands that I use every single day, from the moment I start my computer to the very end of the process.

Let's start! 💪🏻

Development workflow

Lately, I've been working on my personal project frontendhistory.com and I will explain most of my development workflow based on this project.

Open / switch projects in Visual Studio Code 🧑🏻‍💻

I enjoy having multiple projects open in the same VS Code window and using project tabs. Whether I'm outside of VS Code or already have it open, it's easier to switch or open projects using the Visual Studio Code extension for Raycast. Simply use the "Search Recent Projects" command to search and navigate directly to the desired project from Raycast!

Window management 🪟

Because I prefer to use a single display for development, I like to split the screen between the browser and code editor. Raycast has built-in window management commands, and you can easily position your windows. I'm simply focusing on my browser and using the "Left half" command.

You can notice that I'm using the "lh" shortcut.

The same applies if you want to position the window to the right half of the screen.

Linear tasks management ✅

Even for small personal projects, I like to use project management software to keep things organized. I'm using Linear, and luckily for me, there is an extension for that! Let's type "Linear" and see some commands.

Let's check assigned issues:

You can see that I have one task assigned, and I can basically do everything without using Raycast. This includes editing tasks, changing status, or reassigning them.

Set pomodoro focus time 🍅

Okay, it's time to start working! I like to work in 25-minute focus blocks using the Pomodoro technique. You can control the timers thanks to the Pomodoro extension.

Tailwind docs 💨

There are some Tailwind classes that I just can't remember no matter how hard I will try. That's why the Tailwind extension is so handy. You can search through classes, colors and components.

Can I use ✅❌

Checking browser compatibility is an indispensable part of a frontend developer's life. I love how easy it is to verify if a feature you want to use is supported across all major browsers.

Search SVG icons 🔍

In my side project frontendhistory.com, I am using a lot of open-source icons. The Iconify extension has dramatically improved my workflow and made searching for specific icons really easy!

PX to REM conversion ↔️

Want to convert pixels (PX) to rems (REM) or vice versa? You don't even need an extension for that. Just type "20px to rem" into the Raycast field, and it's working out of the box. Feels like magic!

Vue JS docs 💚

There is no secret that I love Vue. That's why I appreciate the Vue.js extension, from which I can search the official docs.

Clipboard history 📜

This one is pretty self-explanatory. Please forgive me for not showing you my clipboard history, but trust me, you need it because it works great!

Quick AI (Pro) ✨

Quick AI is a part of the Pro plan. It's absolutely worth it, given the fact that you basically have an AI assistant integrated into your OS. Just open Raycast, type your prompt, hit the TAB key, and you will see the results. No need to open any extension; it works straight away! Quick AI is not only limited to 2021, so you will receive almost real-time results.

AI Chat (Pro) 💬

Same as Quick AI, AI Chat is also a part of the Pro plan. Sometimes it's more convenient to have a ChatGPT-like conversation with more context, and that's why AI Chat is here!

Content creation workflow

To say that I am a professional content creator is a bit of an exaggeration, but I try to regularly publish content on my blog and X. Because of that, my content creation workflow is pretty simple, but thanks to Raycast, it's so much easier.

Create beautiful code snippets 🤩

I really like to share code snippets on Twitter. Thanks to the ray.so extension, I can do it simply by copying some code to the clipboard and using the "Generate image" command.

Emoji picker 💪🏻

I'm not a big fan of the native macOS emoji picker, and that's why I'm using the emoji picker from Raycast. It's faster, can recommend the most frequently used emojis, and the whole UI is much more practical. Just type "Search Emoji and Symbols" – it's built-in!

Fix spelling and grammmar 🙊

This might be my most used command. I'm not a native English writer, and it's normal to make some grammar or spelling mistakes from time to time. It's incredibly easy to fix those errors in Raycast. Just select the text in any app (could be anything) and use the Fix spelling and grammar command. You will have your text fixed, and what's even more awesome is that you can directly paste and replace your own selection!

Pro version invitations

Some features described in this article are available in the Pro version only. If you sign up using one of my links, you will get a free month of Raycast Pro, and so will I!

Register and get one month for free! 🎉

https://raycast.com/hey/00215c8f

https://raycast.com/hey/41efb76c

https://raycast.com/hey/4fc18d46

https://raycast.com/hey/582a7995

https://raycast.com/hey/808e78a3

What is the NuxtIsland component? 🏝️

Michał Kuncio — Sat, 28 Oct 2023 16:37:59 +0000

Nuxt Island is a cool yet experimental feature of Nuxt 3. It's a special built-in component that lets you render the component fully on the server which means zero client-side JavaScript served to the browser. Even if you are using SSR and the HTML content is rendered on the server, client-side JS is still served and used during hydration. With the NuxtIsland component, there is no hydration at all.

When it will come in handy? For example, when we don't need our component to be interactive but we still need some JavaScript logic to make it work.

Let's take a look at some examples:

using syntax highlighting library: most of these libraries are quite heavy and we don't need any client-side interactivity when the component is rendered. We might want to get colored syntax from the server and not need any further action regarding syntax highlighting.
using heavy date utility library: libraries like moment.js (and yes, I know that it's heavy and not maintained anymore) are also quite heavy. When we need to parse some date, calculate differences, or check timezones we usually want to make it once and serve it to the user.
using utility libraries like lodash: with that kind of libraries, we are usually using some utility function like for example converting from snake_case to camelCase and maybe it's not necessary to ship this function to the production bundle?

These are great examples of when it may be a good idea to run some JS code on a server, calculate or render something and return it to the browser without any JS. Of course there are some use cases when you may want these libraries used on the client but we will focus on the case when we don't need any interactivity.

Let's see how we can make it with NuxtIsland component!

How to use the NuxtIsland component?

NuxtIsland component is a part of the experimental server components feature of Nuxt 3. If you want to use server components, you have to enable it in nuxt.config:

// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    componentIslands: true
  }
})

Let's test how it works! To better understand how server components work, we will try to use some heavy library to make the difference more visible. Let's install moment.js which is perfect for that regarding the size of this library.

npm install moment --save

To make the test, let's create the component called 'Hello.vue':

<!-- components/Hello.vue -->
<template>
    <div>
        <h1>Hello</h1>
        {{ date }}
    <div>
</template>

<script setup lang="ts">
import moment from 'moment';
const date = moment().format('MMMM Do YYYY, h:mm:ss a');
</script>

As you can see, we are importing the moment.js library and using it to format the current date. Let's use it as a normal component and show it in the app.vue. Please note that we don't have to import the **Hello.vue* component, because of Nuxt auto-imports.

<!-- app.vue -->
<template>
    <Hello />
</template>

Let's run the project. The rendered component should look like this:

When we examine our network requests, we can see that the component-related client-side script is downloaded by the browser.

Although 4kb is not something to be afraid of, we might ask the question "Ok, but this component isn't interactive at all. Why do I even need JS for that?".

Let's fix it with NuxtIsland! 🏝️

Remember our previously created Hello.vue component? Let's move it from /components to /components/islands directory. Now inside the app.vue, instead of using the Hello.vue component directly, we will make use of the NuxtIsland component.

<!-- app.vue -->
<template>
    <NuxtIsland name="Hello" />
</template>

The NuxtIsland component accepts a prop called "name" which is the name of a component inside /components/islands directory.

Now, when we examine network requests again we can see something interesting:

See? No JS at all for this component! 🔥🚀 But all these tests were run on the dev server. What about production build?

Production build - classic component:

Production build - NuxtIsland component:

What?! We saved 45 kB of data thanks to the NuxtIsland component! 🥳

Summary

All Nuxt features around server components are for now experimental but I'm really excited about the Nuxt and server componens future. You can read more about NuxtIsland and Nuxt server components here:
https://nuxt.com/docs/api/components/nuxt-island
https://nuxt.com/docs/guide/directory-structure/components

⭐ If you like my posts, please follow me on Twitter:
https://twitter.com/michalkuncio

How to create a Sitemap in Nuxt Content

Michał Kuncio — Wed, 11 Oct 2023 17:22:57 +0000

Nuxt Content is an amazing tool that makes working with markdown content on Nuxt projects a breeze. Thanks to the power of Nuxt server routes, it's really easy to create a sitemap of our pages.

Let's take a look at the code.

import { SitemapStream, streamToPromise } from 'sitemap';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
    const docs = await serverQueryContent(event).find();

    const staticSites = [
        {
            _path: '/'
        },
        {
            _path: '/about'
        },
        {
            _path: '/open-source'
        }
    ];

    const sitemapElements = [...staticSites, ...docs];

    const sitemap = new SitemapStream({
        hostname: import.meta.env.VITE_BASE_URL as string
    });

    for (const doc of sitemapElements) {
        sitemap.write({
            url: doc._path,
            changefreq: 'monthly'
        });
    }

    sitemap.end();
    return streamToPromise(sitemap);
});

First of all, let's create a new API route inside api/routes directory by creating a new file called 'sitemap.ts'. Thanks to that, the RRS feed will be available on your-domain.com/sitemap.xml.

Next, inside our defineEventHandler, we have to fetch all articles by using serverQyeryContent:

const docs = await serverQueryContent(event).find();

If you have any other static pages like for example contact or about, you can create an array with those pages:

const staticSites = [
        {
            _path: '/'
        },
        {
            _path: '/about'
        },
        {
            _path: '/open-source'
        }
    ];

And now, we can combine our articles with static pages:

const sitemapElements = [...staticSites, ...docs];

Next up, let's create a sitemap stream by using the utility function from the 'sitemap' package:

const sitemap = new SitemapStream({
    hostname: import.meta.env.VITE_BASE_URL as string
});

Now when we have a sitemap stream, we can iterate over our sitemap elements and write them to the sitemap stream:

for (const doc of sitemapElements) {
    sitemap.write({
        url: doc._path,
        changefreq: 'monthly'
    });
}

Next, we have to fetch all the documents we want to include inside our RRS feed. We can make use of the serverQueryContent function from '#content/server':

const docs = await serverQueryContent(event)
    .sort({ date: -1 })
    .where({ _partial: false })
    .find();

Next up, we have to iterate over our docs and put every one of them to our previously created feed object:

for (const doc of docs) {
    feed.item({
        title: doc.title ?? '-',
        url: `${BASE_URL}${doc._path}`,
        date: doc.date,
        description: doc.description
    });
}

Finally, we have to end the stream and return our sitemap stream as a Promise by using the streamToPromise function from the 'sitemap' package.

sitemap.end();
return streamToPromise(sitemap);

Alternatively, if you would like to prerender the sitemap all you have to do is to specify prerender routes in nuxt config:

export default defineNuxtConfig({
    // ...
    nitro: {
        prerender: {
            routes: ['/sitemap.xml']
        }
    },
});

And that's all! I love how simple this solution is thanks to Nuxt server routes and nitro prerendering.

How to create an RRS feed in Nuxt Content

Michał Kuncio — Tue, 03 Oct 2023 19:17:00 +0000

Nuxt Content is an amazing tool that makes working with markdown content on Nuxt projects a breeze. Thanks to the power of Nuxt server routes, it's really easy to create an RRS feed.

Let's take a look at the code.

import RSS from 'rss';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
    const BASE_URL = 'https://michalkuncio.com';

    const feed = new RSS({
        title: 'Blog | Michał Kuncio - Modern webdev - the cool parts',
        site_url: BASE_URL,
        feed_url: `${BASE_URL}/rss.xml`
    });

    const docs = await serverQueryContent(event)
        .sort({ date: -1 })
        .where({ _partial: false })
        .find();

    for (const doc of docs) {
        feed.item({
            title: doc.title ?? '-',
            url: `${BASE_URL}${doc._path}`,
            date: doc.date,
            description: doc.description
        });
    }

    const feedString = feed.xml({ indent: true });

    setHeader(event, 'content-type', 'text/xml');

    return feedString;
});

First of all, let's create a new API route inside api/routes directory by creating a new file called 'rrs.ts'. Thanks to that, the RRS feed will be available on your-domain.com/rrs.xml.

Next, inside our defineEventHandler, we will create a new feed by using the RRS library. Thanks to that library, it will be a little bit easier to parse the RRS feed.

    const feed = new RSS({
        title: 'Blog | Michał Kuncio - Modern webdev - the cool parts',
        site_url: BASE_URL,
        feed_url: `${BASE_URL}/rss.xml`
    });

Next, we have to fetch all the documents we want to include inside our RRS feed. We can make use of serverQueryContent function from '#content/server':

const docs = await serverQueryContent(event)
        .sort({ date: -1 })
        .where({ _partial: false })
        .find();

Next up, we have to iterate over our docs and put every one of them to our previously created feed object:

for (const doc of docs) {
        feed.item({
            title: doc.title ?? '-',
            url: `${BASE_URL}${doc._path}`,
            date: doc.date,
            description: doc.description
        });
}

Then, we need an RRS feed string, let's use feed.xml() function for that:

const feedString = feed.xml({ indent: true });

And finally, we have to set the correct response headers for browsers to correctly detect xml file and return our feed string:

setHeader(event, 'content-type', 'text/xml');

return feedString;

And that's it! I love how easy and clean this solution is. Working with Nuxt Content is really an amazing experience.

Create stunning product tours with driver.js 🚖

Michał Kuncio — Tue, 26 Sep 2023 18:02:17 +0000

Product tours

Sometimes, when you are rolling new features to your customers, it's nice to make a quick showcase of where these new features are located in the UI and how to unlock their full potential. There are many ways of announcing new features like changelogs, dedicated pages or special icons but for me, one of the best solutions is to guide users through these new UI changes so it will be really clear and intuitive. Also by leveraging analytics tools, you can monitor how many users see these features. This technique is called "product tour" and in basic version it can look like this:

Okay, but which library should I use for that?

Driver.js

There are many libraries for creating product tours but in my opinion, Driver.js stands out. Why?

it's the most simple solutions
it's super intuitive
it has no external depenencies depencencies
it has full TS support
it's 100% customizable

The API is so good, that you can add multi-step product tours in a few lines of code. Let's see how we can make it in Vue.js (the framework here doesn't matter, the implementations should be identical in other frameworks or pure JS).

Adding product tour to our page

First of all, we have to install driver.js:

npm install driver.js

Now, let's create some product tour steps for my website. On my homepage, I have a theme switcher at the top right corner:

This element has a class named .theme-switcher.

Also, I have a searchbar where you can filter the articles on the homepage:

This element has a class named .search-input.

Now I want to create a two-step product tour that will highlight those two elements and show some useful descriptions.

Because all those elements are on a single page (homepage) we can add driver.js-related logic to our homepage component. Let's import the driver js script as well as the CSS file:

// pages/index.vue
<script setup lang=ts>
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
</script>

Now we have to find a place where we can initialize driver.js. OnMounted hook would be perfect for that:

// pages/index.vue
<script setup lang=ts>
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

function driverJsInit () {
    // ...
}

onMounted(() => {
    driverJsInit();
});
</script>

We have created a new function driverJsInit and called it from inside of onMounted hook. Now let's see how easy it is to add product tours for the 2 elements mentioned above:

// pages/index.vue
<script setup lang=ts>
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';

function driverJsInit () {
    const driverObj = driver({
        showProgress: true,
        steps: [
            {
                element: '.theme-switcher',
                popover: {
                    title: 'Theme switcher',
                    description: 'Here you can toggle between dark and light mode',
                    side: 'left',
                    align: 'start'
                }
            },
            {
                element: '.search-input',
                popover: {
                    title: 'Searchbar',
                    description: 'Here you can search for interesting article',
                    side: 'left',
                    align: 'start'
                }
            }
        ],
    });

    driverObj.drive();
}

onMounted(() => {
    driverJsInit();
});
</script>

Even if the API is pretty self-explanatory let's take a look at how it works. First of all, you have to pass a config object to a driver.js function:

// pages/index.vue
<script setup lang=ts>
function driverJsInit () {
    const driverObj = driver({
        // config
    });

    driverObj.drive();
}
</script>

and run the tour by calling drive() on the driver object.

You can find more about the configuration here.

Inside the configuration object, we have to set up our steps. The structure looks like this:

steps: [
    {
        element: '.theme-switcher',
        popover: {
            title: 'Theme switcher',
            description: 'Here you can toggle between dark and light mode',
            side: 'left',
            align: 'start'
        }
    },
    {
        element: '.search-input',
        popover: {
            title: 'Searchbar',
            description: 'Here you can search for interesting article',
            side: 'left',
            align: 'start'
        }
    }
]

So it's an array of steps where each step has to be connected to a single dom element. We can target this element by using the element property by assigning a selector in the form of a string. I want to target elements with classes .theme-switcher and .search-input. Next, inside popover property, you can set everything connected with the popover like title, description, side and align.

Also, there are more global settings like showProgress which let you decide if you want to show tour progress inside the popover.

Let's refresh the page and see what it looks like:

Cool! As you can see there is a nice popover with the title and description we previously set and you can navigate to another step by using the next button.

Showing product tour only once

Great, we have our product tour up and running. But if you refresh the page you will see it every single time and that's something we don't want. The simplest solution would be setting some localStorage info storing information about the fact that user have seen the full product tour. How do we know about that? There is a special event provided by driver.js called onDestroyed. We just have to add it to our configuration object and set a flag in localStorage:

onDestroyed: () => {
    localStorage.setItem('product_tour_seen', 'true');
}

and before initializing our driver js we can check if it's necessary to show the product tour:

const productTourSeen = localStorage.getItem('product_tour_seen') === 'true';

if (productTourSeen) { return; }

Full code:

<script setup lang="ts">
import { driver } from 'driver.js';
import 'driver.js/dist/driver.css';
useHead({
    title: 'Blog'
});

onMounted(() => {
    driverJsInit();
});

function driverJsInit () {
    const productTourSeen = localStorage.getItem('product_tour_seen') === 'true';

    if (productTourSeen) { return; }

    const driverObj = driver({
        showProgress: true,
        steps: [
            {
                element: '.theme-switcher',
                popover: {
                    title: 'Theme switcher',
                    description: 'Here you can toggle between dark and light mode',
                    side: 'left',
                    align: 'start'
                }
            },
            {
                element: '.search-input',
                popover: {
                    title: 'Searchbar',
                    description: 'Here you can search for interesting article',
                    side: 'left',
                    align: 'start'
                }
            }
        ],
        onDestroyed: () => {
            localStorage.setItem('product_tour_seen', 'true');
        }
    });

    driverObj.drive();
}
</script>

Summary

Driver.js is a cool library. I love how simple it is. You look at docs, spend a few minutes and know exactly how should you use this library. And it has no dependencies! It will definitely become my go-to solution for product tours.

⭐ If you like my posts, please follow me on Twitter:
https://twitter.com/michalkuncio

Vue is still the only framework capable of this

Michał Kuncio — Thu, 21 Sep 2023 08:41:07 +0000

Mutating objects in Javascript

If you want to add a new item in pure Javascript all you have to do is:

const items = ['🍕', '🍟']
items.push('🍔')

when you inspect the value of the items array you will see that the original array is mutated and the value is:

['🍕', '🍟', '🍔']

Okay, but how does that kind of mutation work in reactive frameworks like React or Svelte?

Adding a new item to an array in React/Svelte

In React or Svelte the above solution won't work. That's because of how reactivity works in these frameworks. You can't directly mutate arrays by using native Array.prototype.push(). In both situations, you have to create a new copy of the current array, add the new item to that copy and then reassign the current array to the new copy:

React:

setFood([
    ...food,
    newFood
]);

Svelte:

food = [...food, newFood]

So, every time you want to mutate an array, you have to create a new copy and make a reassignment. These are really simple examples but it can quickly become cumbersome if you have nested arrays and objects.

Adding a new item to an array in Vue

In Vue, the native JS engine behavior just works as expected:

food.value.push(newFood.value);

Maybe it doesn't look like a dealbreaker, but for me, this way is way more convenient and natural and the greater difference will be visible in the case of more complicated operations with a lot of updates, especially on nested arrays and objects. I love how clever the reactivity model in Vue is.

⭐ If you like my posts, please follow me on Twitter:
https://twitter.com/michalkuncio

The best feature of Bun is not performance-related

Michał Kuncio — Tue, 12 Sep 2023 08:30:31 +0000

What is Bun?

Oh, you know what it is 😉 Let's skip this SEO filler and get straight to the point. The best feature of Bun is how it handles...

Module resolution

Anyone who has tried using Node.js with ESM or Typescript surely knows what I'm talking about.

should I use JS or MJS extension?
if so should I use type: module inside package.json?
should I use node --experimental-modules flag while running the app?
ok but what about TypeScript? We have compilerOptions.module there...
and what If I want to mix ESM and CJS?

The list goes on and on...

In Bun, you can forget about that madness.

Want to use ESM? Bun handles it
Want to use CJS? Bun handles it
Want to use JSX/TSX out of the box? Bun handles it

⭐️ And the most important thing:

You can mix ESM and CJS imports inside a single file! 🤯

import StuffESM from "./some-esm-module";
const StuffCJS = require("./some-cjs-module.cjs");

This can be really handy while using some non-ESM node/express packages.

Summary

I'm excited about the future of Bun. It has many great features that are widely discussed in the tech space right now. I'm happy that we have 3 serious runtimes (Node, Deno, Bun) because the competition between them should be beneficial to everyone. Don't want to make a switch to Bun/Deno? Thanks to that competition, Node will probably be much better in the next versions and you won't have to switch. Exciting times ahead!

⭐ If you like my posts, please follow me on Twitter:
https://twitter.com/michalkuncio

Nuxt UI is one of the best UI libraries out there

Michał Kuncio — Thu, 07 Sep 2023 22:45:37 +0000

Intro

I probably say this too often, but I'm fascinated by how much the Vue ecosystem has been thriving lately. Recent releases of such awesome libraries like FormKit or Radix Vue are great examples of how well the Vue ecosystem has matured lately.

If you would like to read more about them, I encourage you to read the articles I have recently published:\
It's insane how good FormKit is! \
Radix for Vue is finally available!

Vue ecosystem has many great options to choose from when you are looking for a good UI library. One of the most notable ones are:

They are all great but Vuetify and Quasar have always seemed too opinionated for me. In my opinion, from the list above, PrimeVue is the most universal and flexible solution. But there's a shiny new library I want to talk about today.

Nuxt UI

Nuxt UI is a quite new open-source library maintained mostly by Nuxt Labs. It was recently rebranded from NuxtLabs UI to Nuxt UI and the repo is now under the Nuxt org on GitHub. It's also the first UI library created specifically for Nuxt. From the very beginning, it has become my favorite UI library. Let me tell you why.

1) Components are beautiful

The general feeling of default styles is great. The components look fresh, light and elegant at the same time and it's quite hard to do. I'm not a big fan of material UI or bootstrap style and the Nuxt UI feeling hits the perfect spot. Take a look at some components in the docs and you will see what I'm talking about.

2) Elegant and simple API

Sometimes you take a look at docs, scroll through some components, see at some props and you just know if it fits your style. I love how simple, yet flexible the API for Nuxt UI is. There is no bloat, unnecessary props or tons of ugly wrappers. All you need is there. And the props are so obvious that I can almost guess them without taking a look at the docs.

3) Full flexibility in styling

Some libraries are super difficult to customize. You have to overwrite some default styling and sometimes it's a pain in the ass and causing a lot of problems. Nuxt UI is using Tailwind and you have full control over the theming. You can change your theme color in the config file, through CSS variables or directly through component props. Also, there is a special prop "ui" that lets you customize virtually everything. It's using tailwind-merge under the hood.

4) Fully typed

Nuxt UI is fully typed which means that we have full IDE support with autocomplete and error detection. It's really handy and sometimes you don't have to look at docs because of great intellisense.

5) Amazing docs

The docs are well-structured and the components are well-described. Visually it's great but man... Take a look at the homepage. How beautiful is that!

Summary

If you are looking for a component library that feels fresh, modern, elegant and doesn't force you to use an opinionated project structure, Nuxt UI would be the perfect addition to any Nuxt project. With tons of useful components and full flexibility over styling, I think it's the best option right now. I'm pretty sure it's just the beginning of this awesome library and we will see many new components and features in the future.

⭐ If you like my posts, please follow me on Twitter:
https://twitter.com/michalkuncio