I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took.

I'm super proud of this achievement; it has been a fantastic journey.

But what's next?

And it took me a while to think about that. Do I want to continue writing daily? Do I want to try out other things? What is the next big thing?

And before answering that, I need to open up about the fact that writing daily is super unique, and I loved it, but it was also quite draining towards the 1000th article.

And then something magical and exciting changed my whole thinking about everything.

We got pregnant! So amazing, and I'm ready to become a dad.

What to expect

So alright, what to expect from me in the future? I will never stop creating content as I enjoy it so much, but I decided to move away from daily content.

There are a couple of aspects I want to try to find the next best thing:

• Youtube videos
• Long-form articles
• Ebooks

Between those, I'll dedicate more time per content piece and might even go deeper into some of the ones I already created.

Besides that, I have a few hobby projects and ideas I want to execute, so keep an eye out for those.

What about the site?

Well, I might drop an article irregularly as I see fit, but the truth is, I'm planning on selling the website.

It's been my baby for almost three years, and it has matured a lot to a point where I'd love to see someone take it over and keep providing unique content for new developers.

If that person is you, please do get in touch 🙏.

Some numbers

Many of you probably came here to see some numbers, right? What do 1000 articles represent?

And here are some of them:

• 528704 words
• 1920 newsletter subscribers
• 160K+ page views every month
• 110+ #1 ranked google queries
• an average of 100K impressions daily
• 5K clicks on search terms alone
• And so much more

I couldn't be happier. In the beginning, I'd never thought that would even be possible, yet I achieved it.

And that's not because of my writing, but because of all you amazing people motivating me and reading the articles.

So from the bottom of my heart:

Thank you for joining me on this journey.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

This shows in my previous explorations of Astro, Medusa, and now Vendure as well.

All these products thrive in a super open, welcoming, and helpful community. To me, this is super amazing as it helps you use the product to the fullest.

Let me sketch some examples of the Vendure community.

Examples of the community

First of all, Vendure has an excellent slack channel where you can pop in and ask any questions. Anyone is super helpful to help you get to solve your issues.

I even got a DM from a core member stating they saw my articles on Vendure and asking why I was looking into their product. I love it when creators like to get feedback on those things.

Secondly, there is a healthy amount of help available online, as in people writing about Vendure, creating examples, and even products.

An excellent example of the latter is Pinelab, where the owner Martijn creates open-source Vendure plugins. Vendure saw this effort and made Pinelab a silver Vendure partner. Small acknowledgments like that show how much they respect their community and how much they want it to be healthy.

Expectations

When it comes to communities, what would you be looking for?

As for me, it's mainly a matter of responsiveness, friendliness, and activeness.

To elaborate a bit on that, if there is no responsiveness, you will get frustrated and eventually give up on trying to solve the issue or question you might have.

The same with snarky comments or people being rude. It will deter you from being active in the community and again give up.

Or, in the last case, if there is nobody active actually to answer questions, it will naturally just die out.

These are my main three elements of a healthy community. My question to you is: What's the most important thing for a community for you?

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

• External database
• Server
• Worker
• Admin UI
• Frontend

While this is amazing, it also brings a bit of complexity when it comes to hosting your Vendure shop.

At the time of writing, I'm still doing some research, and it seems Michael from Vendure is also working on an excellent guide for hosting. (Which I'll add here once it's done).

For my testing purpose, I decided to try out hosting to see what's possible and go with the following setup.

• RailwayApp for the database, server, worker, and admin UI
• Netlify for the storefront

I wouldn't change the front end, as Netlify works fine. However, Vercel or Cloudflare would work equally well.

As for the backend side, Railway works, but it's a bit slow on their free tier. (Still experimenting with a nice setup there).

Setting up the backend

I'll still show you how to host Vendure for free but with limited resources for this guide. You should be able to apply this process to another provider or potentially upgrade the railway subscription.

Create a new Railway account or login into your existing one, creating a new project.

The first thing I added was a PostgreSQL database. I then manually connected to it with TablePlus and imported the database I had locally.

You'll see the database connection string we'll need in a bit on the connection screen, so copy that to a safe spot.

The next thing we need to do is add a new service, a project, from GitHub. (Assuming you pushed your project to GitHub). In Railway, you'll be able to right-click on the canvas and select the new service option.

Once you add the service, it should automatically add the Postgres variables. Add optional variables you have set in your .env file. You'll need to add the database options here, as Vendure uses an indirect connection.

Then we'll also need to define what command it should run in the settings. And in the case of Vendure, we can set it to yarn run build.

It should then auto-build your application every single time you push new changes.

Note: I sometimes found you need to trigger re-deploy as it would timeout the first deployment manually.

Once it's running, you should already have access to your admin UI!

The URL should be something like this: https://your-name.up.railway.app/admin.

Hosting the storefront

Depending on which storefront option you choose, we have multiple options. I chose Remix, so I found Netlify super easy.

Log in to Netlify and choose the project from your GitHub repos. It will automatically recognize it's a Remix project and set all the configurations for us.

All we need to do here is set an environment variable for the VENDURE_API_URL. This should point to your Railway environment.

Then go ahead and deploy it, and it should be up and running.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

We'll be looking at two different layers of customization for customizing these emails.

1. Globals
2. New email flows

Changing email globals

We'll first have to add the email plugin, which we'll use to modify things.

npm install @vendure/email-plugin

Now we can open our vendure-config.ts file and load the plugin.

export const config: VendureConfig = {
  plugins: [
    EmailPlugin.init({
      handlers: defaultEmailHandlers,
      templatePath: path.join(__dirname, '../static/email/templates'),
      globalTemplateVars: {
        fromAddress: '"example" <noreply@example.com`>',
      },
      transport: {
        type: 'smtp',
        host: 'smtp.example.com',
        port: 587,
        auth: {
          user: 'username',
          pass: 'password',
        },
      },
    }),
  ],
};

From this config, you can change quite a few variables. For a complete list, check out the official documentation.

This config can change almost everything that has to do with the existing templates. You can change the copy and format of each email by modifying them in static/email/templates.

New email flows

At one stage, I needed to support a brand-new email flow. By default, this was the email being sent on payment to give you an order confirmation, but I needed it to be sent pre-payment as payment instructions were manual for this shop.

So to add a new flow, we can create custom email event handlers on specific actions in our system.

This is the example of the order placed handler.

const orderPlacedHandler = new EmailEventListener('order-placed')
    .on(OrderPlacedEvent)
    .loadData(async ({ event, injector }) => {
        transformOrderLineAssetUrls(event.ctx, event.order, injector);
        const shippingLines = await hydrateShippingLines(event.ctx, event.order, injector);
        return { shippingLines };
    })
    .setRecipient(event => event.order.customer!.emailAddress)
    .setSubject(`Order confirmation for #{{ order.code }}`)
    .setFrom(`{{ fromAddress }}`)
    .setTemplateVars(event => ({ order: event.order, shippingLines: event.data.shippingLines }));

And to use it, we return this handler in our config.

EmailPlugin.init({
        ...
    handlers: [orderPlacedHandler],
}),

When creating this new template, ensure that you add a new physical email in your template folder. In this case, static/email/templates/order-placed/body.hbs.

Note: You can also subscribe to your own custom events.

Pretty cool, as it's straightforward to create and customize email flows within Vendure.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

In this article, I'll take a high-level look at some elements we can customize within Vendure.

The cool part is that it mainly works via changing the one vendure-config.ts file.

Customizing models

The first thing one might want to do is add custom fields to any of the existing Entities. I'm surprised by how easy this process is and how slick everything works.

Open your vendure-config.ts file and add or modify the customFields section. In my case, I'll add a custom field to the product entity. You can give it any name you'd like.

export const config: VendureConfig = {
  customFields: {
    Product: [{ name: 'myCustomField', type: 'string' }],
  },
};

Since this will introduce a database change, we'll need to generate a new migration. Don't worry. Vendure will take care of all the heavy lifting.

npm run migration:generate customField

And now, we can run our server, and everything will work. If we visit a product, we should see the custom field.

Customizing the order process

Besides customizing the fields, you might want to add additional steps in the order process.

For instance, you might want to validate some aspects of the order or the customer. This could be customer should be a valid tax-related customer, or an order above a certain weight can't be shipped.

So let's take the first example as the Vendure docs describe this best.

Currently, we would have the following state:

AddingItems > ArrangingPayment

We want it to be:

AddingItems > ValidateCustomer > ArrangingPayment

The first thing we need to do is define a new state. This is a physical text and doesn't do anything yet.

Let's create a new file to separate things: validate-customer.ts.

import { CustomOrderProcess } from '@vendure/core';

export const validateCustomer: CustomOrderProcess<'ValidateCustomer'> = {
  transitions: {
    AddingItems: {
      to: ['ValidateCustomer'],
      merge strategy: 'replace',
    },
    ValidateCustomer: {
      to: ['ArrangingPayment', 'AddingItems'],
    },
  },
};

As you can see, this tells what transitions are valid to make. We can then open our vendure-config.ts and load our new process.

export const config: VendureConfig = {
  orderOptions: {
    process: [validateCustomer],
  },
};

Now let's make sure this intercepts something. Go back to the validate-customer.ts file and add the following function.

export const validateCustomer: CustomOrderProcess<'ValidateCustomer'> = {
  // Transitions go here

  // The logic for enforcing our validation goes here
  async onTransitionStart(fromState, toState, data) {
    if (fromState === 'ValidateCustomer' && toState === 'ArrangingPayment') {
      const isValid = await validateTheActualCustomer(data.order.customer);
      if (!isValid) {
        // Returning a string is interpreted as an error message.
        // The state transition will fail.
        return `The customer is not valid`;
      }
    }
  },
};

This is simply a mockup, and you should create the actual validation function to evaluate the customer on specific fields. If we return a string, it's handled as an error state, and the transition won't happen.

Generic modifiers

The above two are very common modifiers, but Vendure comes packed with more.

For instance, I needed to modify the stock level output in one of my shops. By default, it only shows things as "low stock" and never the actual number. On my webshop, it was needed to show the exact stock at hand.

To achieve that, we can open the vendure-config.ts and create a new function.

export class MyStockDisplayStrategy implements StockDisplayStrategy {
  getStockLevel(
    ctx: RequestContext,
    productVariant: ProductVariant,
    saleableStockLevel: number
  ): string {
    return saleableStockLevel.toString();
  }
}

This is a function to extend the default stock display strategy. In my case, I return the physical stock level as a string. To ensure Vendure uses this value, we can modify the config to load that.

export const config: VendureConfig = {
  catalogOptions: {
    stockDisplayStrategy: new MyStockDisplayStrategy(),
  },
};

And now, the stock levels on the site will show the exact amount you have left in stock.

This is just one example, Vendure comes packed with small little hooks that we can use to customize our webshop and system. I love that they made it easy and hassle-free to adjust the system to your needs.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

In this article, I'll show you how you can connect and leverage an S3 bucket as your asset storage.

Setting up Amazon

The first thing you'll need is an AWS account, which can be tedious. (Mainly quite long)

Head over to AWS and create your account.

Create AWS account

Once you are set up and ready to go, it's time to create a new bucket. The steps for creating a bucket are extensive and might change over time, so it's best to follow Amazon's docs on this.

Eventually, your bucket should be ready like this:

You'll also need to add new access credentials. Head to AWS's IAM section and create a new user.

You can give it a name that represents the tool you will use and also choose to make it an Access key.

On the next screen, you'll need to attach the permissions. In our case, we can choose to connect them manually. Search for AmazonS3FullAccess.

You can press next until you get to the actual keys in the next couple of steps. Copy the key and secret to a secure place.

Setting the bucket as storage

Now it's time to add some code. First of all, we need to install the aws-sdk package.

npm install aws-sdk

I save my secrets in a .ENV file for maximum protection, so go ahead and add the following two keys.

AWS_ACCESS_KEY_ID={YOUR_KEY}
AWS_SECRET_ACCESS_KEY={YOUR_SECRET}

Next, we need to modify the vendure-config.ts file to use a new asset plugin.

Start by importing the S3 one.

import {
  AssetServerPlugin,
  configureS3AssetStorage,
} from '@vendure/asset-server-plugin';

And inside the config, add a new plugin.

export const config: VendureConfig = {
    # Your other config here
    plugins: [
        AssetServerPlugin.init({
            route: 'assets',
            storageStrategyFactory: configureS3AssetStorage({
                bucket: 'vendure',
                credentials: {
                    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
                    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
                },
            }),
        }),
    ],
};

It's essential to change the bucket name to your bucket.

And now, any assets you upload via the admin UI or the import will be stored in the S3 bucket!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Many people might have the exact needs as they often already have a webshop or system to keep track of these things.

In this article, we'll look at how we can use the data import feature of Vendure.

Importing products

When importing products, Vendure accepts a flat .csv format, and it can hold products, assets, variants, and even custom fields. These elements will be created during the import, which is excellent.

You can find an example of the CSV format on the Vendure docs

The are multiple ways of doing the import, and I decided I wanted to be able to run it manually, so I created my script for it.

I called the script populate-server.ts. It's important to note that this uses the Vendure core populate function, which takes two parameters, the first being the initial data and the second your import.

My complete file looks like this.

// populate-server.ts
import { bootstrap } from '@vendure/core';
import { populate } from '@vendure/core/cli';
import path from 'path';

import { config } from './src/vendure-config';
import { initialData } from './my-initial-data';

const productsCsvFile = path.join(__dirname, 'import.csv');

populate(() => bootstrap(config), initialData, productsCsvFile)
  .then((app) => {
    return app.close();
  })
  .then(
    () => process.exit(0),
    (err) => {
      console.log(err);
      process.exit(1);
    }
  );

Let's go ahead and also create this my-initial-data.ts file. This file can be used to set up the admin section of your Vendure server.

In my case, I limited quite a bit of the setup, and my file looks like this.

import { InitialData, LanguageCode } from '@vendure/core';

export const initialData: InitialData = {
  paymentMethods: [],
  defaultLanguage: LanguageCode.en,
  countries: [],
  defaultZone: 'SA',
  taxRates: [],
  shippingMethods: [],
  collections: [],
};

You can find the complete object you can construct on the Vendure docs.

Note: Every time you run your import, these will be executed, so running it more than once will result in duplicates.

To run the actual import, we can use the following command:

yarn ts-node populate-server.ts

Depending on the number of products, it can take some time to finish.

I often ran the script for testing purposes to get the proper import set. You might have to play around with your CSV format if importing many custom fields this way.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

In the case of Vendure, we are open to creating our own, but luckily for us, they have some fantastic starters already set up.

At the time of writing, they have official starters for:

• Remix
• Vue Storefront
• Next.js
• Angular

Since I started a series on Remix, I have been eager to try that.

Installing the Remix Storefront

To install the Storefront, we can clone the Git repo and install it.

git clone git@github.com:vendure-ecommerce/storefront-remix-starter.git

cd storefront-remix-starter

npm install

Then, create a .env file in the root and point it to our local Vendure server.

VENDURE_API_URL=http://localhost:3001/shop-api

Now go ahead and run the Storefront with: npm run dev.

Note: Make sure your Vendure server is running.

And visit the Storefront on http://localhost:3000/.

Play around with it and try to order some products. You'll see it's blazing fast!

Other options

As mentioned, you can use some other supported Storefronts, which you can find on the Vendure website.

And if you want to use something together, you can take inspiration from any of the existing integrations and create your own new integration.

Since, in the end, they query the API and have no concrete direct implementations in place.

I'm super stoked to see this freedom of front-end in a (headless) commerce system being so well demoed out.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

In this article, we'll get started and see how easy it is to set up.

Note: For these articles, I mainly use Vendure's documentation, which is comprehensive.

Vendure quick start

The easiest way to start with Vendure is to run their create command. This will set up everything you need to get started.

Out of the box, we get:

• Admin GraphQL API
• Shop GraphQL API
• Admin UI

All you need to have is node (with npx) npm 5.2 and higher installed. With that, you can run the following command.

npx @vendure/create my-app

Where my-app is the actual name of your application.

In the installation process, you'll be asked which type of database you want to proceed with. You can pick whichever one works best for your system. It will also give you the option to populate with sample data.

To get started quickly, the SQLite option is very nice to get started with.

Once the script is done, you can navigate to your folder and run the application.

cd my-app
yarn dev

It will spool up all your available resources. Once healthy, you should see the following in your terminal.

Exploring the APIs

As mentioned, we get access to the Vendure APIs, split into two categories.

An admin API and a Shop API. Administrators can use the admin API to manage products, orders, and more. The shop API is public-facing and can be used for our eventual storefront, mobile app, etc.

Let's take a quick look at how we can reach them. For the following examples, I'm using Insomnia, but any API tool will work.

Let's start with the shop API. To access it, we can use the following URL http://localhost:3000/shop-api.

The API uses GraphQL as its layer of communication. For instance, we can use the following graphQL query to get a list of products.

query products {
  products {
    items {
      name
    }
  }
}

Which results in a list of all our product names:

Another fantastic element of Vendure is that it gets shipped with a GraphQL explorer built in, so we can visit the API URL and query from there. Visit http://localhost:3000/shop-api and execute your queries.

The same goes for the admin API. However, we should use the following URL http://localhost:3000/admin-api.

Exploring the admin UI

Besides these fantastic APIs, we also get access to a default admin UI. Visit the following URL: http://localhost:3000/admin/, and you can explore the admin interface.

It's an excellent place to start exploring how things are linked together. If you choose the population of data, you'll even be able to see some advanced linking and facets.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

At first, the website was a little bit of a letdown, and Medusa seemed to do a more appealing job at marketing itself. However, I quickly came back to this after giving it a try.

A big shoutout to the Vendure team, as they have been super helpful with all my requests and taking the time to help me set up.

In a couple of articles, we'll be looking at Vendure and how we can set up a headless commerce system and link it to some storefronts.

What exactly is headless commerce?

You might be wondering, what is this headless commerce system?

It's an e-commerce system, but it's not tied to any specific frontend solution. In the case of Vendure, it's focused on developers who love the modern web, and we see familiar names such as TypeScript, GraphQL, and NodeJS.

We get an out-of-the-box solid system that we can extend and modify to work with our other systems.

This benefit is that a developer can choose whatever frontend stack they want to work in, giving a lot of freedom. We can quickly hook up multiple solutions and languages to work with, even on the admin side.

What makes Vendure so great?

I started looking at Vendure because of how flexible their setup was. We get a lot of hooks we can use and a pretty large open-source community that is super helpful.

One of my main selling points was that they provide product variants with facets. I was particularly struggling with this on Medusa, and it worked great out of the box from Vendure.

The other real benefit was the number of storefronts we could hook into. I liked the Remix storefront a lot as I was exploring Remix in general (so this is very biased).

It also comes with many great options that need little to no modifications to make things change, and more in future articles.

What to expect

You might be interested in this process, so let's discuss what to expect from the following articles.

• We'll set up the system with the admin interface
• We'll create a storefront
• Importing data
• Setting up products and facets
• Attaching a CDN
• Customizing Vendure
• Deploying

If you are keen on any of the above topics, subscribe to my newsletter and get the latest articles as they are launched.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Sometimes we might have a generic element, a specific component that renders inside a modal. When a specific flag is set, the component should get a parent wrapper to display it in a different variant.

We could use an if...else statement, but it looks messy.

Conditional wrapping in React

Let's say we got specific service cards to make it a bit easier to follow. In some cases, they explain a service, but in others, they need to link to a detail page.

The component might look like this.

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      <h2>{title}</h2>
      <p>{description}</p>
      <img src={image} alt={title} />
    </section>
  );
};

As mentioned, what happens if we need to wrap this whole thing in a link element when the URL exists? We could use the if...else loop.

const ServiceCard = ({ title, description, image, url }) => {
  return (
    <section>
      {url ? (
        <a href={url}>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </a>
      ) : (
        <>
          <h2>{title}</h2>
          <p>{description}</p>
          <img src={image} alt={title} />
        </>
      )}
    </section>
  );
};

But this shows duplicate code, so it's a bit silly. If we need to style each element, we must modify it in two places.

So how can we better wrap this conditionally?

We can create a generic component that handles this for us, the component will be named ConditionalWrapper, and it will take a condition, the wrapper, and the children it should wrap.

const ConditionalWrapper = ({ condition, wrapper, children }) =>
  condition ? wrapper(children) : children;

With that in place, we can use it on our existing component to clean it up.

const ServiceCard = ({title, description, image, url}) => {
    return (
        <section>
            <ConditionalWrapper
                condition={url}
                wrapper={children => <a href={url}>{children}</a>}
            >
                <>
                    <h2>{title}</h2>
                    <p>{description}</p>
                    <img src={image} alt={title} />
                </a>
            </ConditionalWrapper>
        </section>
    )
}

And now, if we use our component, depending on whether we pass the URL. It will render with or without the href. And the best part is that we have no duplication in our elements.

For example, the following use case:

<ServiceCard title='test' description='foo bar' img='img1.jpg' />

It would return the following HTML output:

<section>
  <h2>test</h2>
  <p>foo bar</p>
  <img src="img1.jpg" alt="test" />
</section>

We will get the following output if we put the URL in the element.

<section>
  <a href="url">
    <h2>test</h2>
    <p>foo bar</p>
    <img src="img1.jpg" alt="test" />
  </a>
</section>

Pretty cool, right?

The main magic, of course, happens in the ConditionalWrapper component and, to be precise, the wrapper argument.

Since we pass the children (which is a React default prop), we can see that the use case of our function as in wrapper={children => <a href={url}>{children}</a>} states.

• If the condition is met
• Wrap the children in this specific element

There will only be a handful of times when you might need this function, but it can be a huge lifesaver.

Note: big thanks to Olivier for the original idea!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

We can modify the CSS path! (only supported in Chromium browsers).

Let's check this out and see how it works.

Modifying SVG path with CSS

To start, we'll need an essential SVG element again. I started with this curved line.

<svg viewBox="0 0 7 9">
  <path d="M1,3 C1,6 6,6 6,3" />
</svg>

Which would result in something like this:

So how can we modify the path now? And you'll be surprised, but it's accessible with CSS like this.

svg:hover path {
  d: path('M1,6 C1,3 6,3 6,6');
}

It looks familiar, right? We can modify the path there. In my instance, I changed it to become the opposite angle of the curve, so it turned upside down.

I also added a transition effect on the path so it will animate smoothly.

svg path {
  fill: transparent;
  stroke: indigo;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s;
}

And now we're able to hover it and see the path change! This blew my mind and is so cool.

You can see its effect here.

Or if you are on Chromium, check it out on this CodePen.

Let's hope this gets better browser support, as it's fantastic to have this ability.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

It turns out it's pretty easy to create this with CSS, so let's see how it's done.

Animating an SVG path with CSS

The first part was to create an SVG line, and I used sketch to draw a triangle-looking element. You can draw anything you want or even use online free tools.

Once your shape is complete, add it to your HTML. For reference, here is my one.

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="291px"
  height="260px"
  viewBox="0 0 291 260"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <title>Path</title>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <path
      d="M273.097656,120.507813 C201.899566,163.577543 130.777516,213.94793 50.8398438,240.160156 C36.9248074,244.723012 17.4914196,262.184399 8.2265625,250.84375 C-1.53762975,238.89189 20.198756,222.272258 24.0078125,207.316406 C27.3670238,194.126823 28.5689142,180.441602 29.6132812,166.871094 C30.9603726,149.366986 31.1766739,131.782428 31.171875,114.226563 C31.1623478,79.3735161 8.15793288,37.1795952 29.5703125,9.6796875 C43.1473611,-7.75730878 67.7544299,32.013528 87.5742187,41.7890625 C105.639606,50.6992894 124.365537,58.2317755 143.085938,65.6679688 C150.003672,68.4158594 157.202901,70.4330349 164.40625,72.3085938 C177.173796,75.6329203 190.335014,77.4306133 202.960938,81.2578125 C220.824973,86.6728004 237.747783,94.999359 255.734375,99.9921875 C266.927708,103.099302 278.679688,103.638021 290.152344,105.460938"
      id="Path"
      stroke="#979797"
      stroke-width="10"
    ></path>
  </g>
</svg>

Now we can move to animate it, and since I'm only using one SVG, I added the code to the main SVG element.

The first thing we want to do is set the stroke dash array, and its offset.

svg {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  pointer-events: none;
}

The dash array refers to the width of the dash and the offset to the starting point. 1000 is bigger than our actual line so it will be split into 1000 pieces.

Then we want to add an animation that removes the offset over time.

svg {
  animation: animateDash 2s linear forwards infinite;
}

Then we can create the animation to remove the offset, as mentioned.

@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}

And that's it. Our animation will now run to show the drawing of the line.

You can even play with this and change the array and offset sizes, which will impact how your animation runs, and you can even make it appear as a dashed border animation.

For reference, you can see the result in this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

However, we can also use them to style some aspects with specific attribute sets.

CSS attributes in CSS

To paint a simple picture, let's create elements that hold a specific value like this.

<div data-rating="1">Rating</div>
<div data-rating="5">Rating</div>

As you can see, our rating is only set as the custom attribute.

Let's first look at how we can style this object, which is very easy by simply using its name.

[data-rating] {
  color: indigo;
}

With this, the rating text will be purple.

We can also make it more specific and add styling for particular values.

[data-rating='1'] {
  color: red;
}
[data-rating='5'] {
  color: indigo;
}

And to top it off, we can inject the value with CSS!

[data-rating]::after {
  content: attr(data-rating);
}

Which would result in the rating being added after our text.

You can play with these data attributes on the following CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

I don't like to niche down or restrict myself to one specific topic. This might be because of my ADD nature or simply because I enjoy exploring all the different topics.

But today, I was deciding on what to write about. And from my list of open topics, I felt like there was too much to pick from. Did I want to pick yet another completely new topic?

But then again, the topics I already wrote about seemed worn out. I touched on all the most important topics. Going into detail would mean writing long-form articles.

(This is something I'd love to do, but I don't have the energy for now)

The power of broadcasting

I'm a big believer in broadcasting. It's something I've enjoyed throughout my life.

When I was young, I couldn't stick to one sport, I wanted to try them all out, and my parent was happy enough to let me.

Sometimes I would stick to a sport for a year or longer, but often I didn't enjoy them as much as hoped.

I think this was the nature of my personality. Just not someone who can do things for an extended period with no genuine interest in that particular thing.

And for me, this came with a fast amount of power. By always broadcasting my interest, I got to experience things I loved, but maybe more importantly, find the things I didn't like.

How this can apply to you

So you might be wondering, ok, incredible life story, but what is it to me?

And as mentioned, I'm a firm believer in finding one's passion and genuinely experiencing what you enjoy most, so if you are reading this and unsure if you are doing the thing you love the most. Perhaps you should try to experience some other aspects of that thing.

Don't drop everything at once, but on the weekend, try out an alternative language, try out accessibility if you never did, try out data-science, or even backend development.

You might enjoy that even more than what you're doing now.

I hope this article will inspire some people to at least give it a think and perhaps experience to find the thing they love the most.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

So what exactly are these CSS counters? We can look at them as variables maintained by CSS. CSS rules can increase the values, which will track how many times they are used.

Using CSS counters

To use these counters, we must first create them with the counter-reset function. Wherever you call this reset from, it will reset the count for that counter (identified by its name).

Let's set up a counter on our body and count for each p element.

body {
  counter-reset: paragraph;
}

p::before {
  counter-increment: paragraph;
  content: 'Paragraph ' counter(paragraph) ': ';
}

If we now create the following HTML:

<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>

We end up with this result.

We can define these counters as we wish and reset them as we go.

Custom reset

Let's take a look at custom resets. For instance, we have h2 elements as our main counter, and for each paragraph, inside of it, we want to showcase a different counter. For the demo, we'll even combine the counter output.

Let's take the following HTML structure.

<h2>First heading</h2>
<p>Some text</p>
<p>Some text</p>
<p>Some text</p>
<h2>Second heading</h2>
<p>Some text</p>
<p>Some text</p>

We could then easily create an index for each section like this.

body {
  counter-reset: heading;
}
h2 {
  counter-reset: paragraph;
}
h2::before {
  counter-increment: heading;
  content: 'Section ' counter(heading) ': ';
}
p::before {
  counter-increment: paragraph;
  content: counter(heading) '.' counter(paragraph) ' ';
}

Which would result in the following:

Pretty cool, right, It might be for sporadic use cases, but one day, you might need CSS counters.

You can also check them out on this CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

HSL stands for hue, saturation, and lightness, where the following values can be used.

• hue: is 360 degrees on the color wheel, so it goes from 0 to 360.
• saturation: is a percentage from 0% to 100% where 100 equals the full color.
• lightness: is also a percentage where 0% is black, and 100% is white.

Using HSL colors in CSS

We can write the following syntax to use this color variant in CSS.

body {
  background-color: hsl(120, 50%, 50%);
}

Which will give us a green background.

A compelling element to using HSL is that it's super easy to use the same level of tints across the board.

Let's say you are developing a theme with full-color versions and a lighter tint for secondary elements.

With HSL you can ensure that you use the same tints no matter which color you pick.

For example, let's set up a header with a secondary body.

<header class="primary">
  <div class="secondary logo"></div>
  <nav>
    <ul>
      <li class="secondary"></li>
      <li class="secondary"></li>
      <li class="secondary"></li>
    </ul>
  </nav>
</header>
<main class="secondary">
  <nav>
    <ul>
      <li class="primary"></li>
      <li class="primary"></li>
      <li class="primary"></l>
    </ul>
  </nav>
</main>

This would give us an actual example. Let's start by making all the primary elements black and the secondary white. We would end up with the following layout.

.primary {
  background-color: black;
}
.secondary {
  background-color: white;
}

However, we don't want it just black and white and want a theme switched even. It will become challenging to get all the available themes in the right shades, right?

Well, not with HSL!

Let's define some HSL variables we can easily reuse.

:root {
  --primary-h: 4;
  --primary-s: 73%;
}

I've decided to make the hue and saturation the same, and it will be the lightness we play with to make the variants of the color.

In the above example, we use four as the hue, which is a red color.

Now we can add it to our primary and secondary colors to see what happens.

.primary {
  --primary-l: 54%;
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
.secondary {
  --primary-l: 93%;
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

As you can see, the primary is about as true to the color, whereas the secondary is more to the white side.

It will result in the following image.

And what's cool is that we can change the root --primary-h value to adjust the theme.

Let's try and set it to 304.

:root {
  --primary-h: 304;
}

And now, let's see what our app would look like.

As you can see, the vibe of the theme is the same, we just swapped the hue, so it still feels familiar.

You can also play with this example on this CodePen.

Testing HSL out

Let's create a super quick demo to try out all HSL variants.

I've created three sliders in HTML, respective of the values for the HSL. Then I've added these as variables in our CSS like this.

:root {
  --primary-h: 4;
  --primary-s: 50%;
  --primary-l: 50%;
}
body {
  background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

And added some magic CSS to listen to all the changes on the sliders so we can adjust the values.

const hue = document.querySelector('#hue');
const saturation = document.querySelector('#saturation');
const lightness = document.querySelector('#lightness');

hue.addEventListener('input', function () {
  document.documentElement.style.setProperty('--primary-h', this.value);
});
saturation.addEventListener('input', function () {
  document.documentElement.style.setProperty('--primary-s', `${this.value}%`);
});
lightness.addEventListener('input', function () {
  document.documentElement.style.setProperty('--primary-l', `${this.value}%`);
});

With this in place, you'll be able to play around with the values to see what happens.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

At first, I tried to re-configure the HTML so that the button would be part of the form element. However, that quickly became an HTML soup.

So I decided to research other options and learned (after many years of being a developer) that you can place submit buttons outside a form!

Let's take a look at that.

Submit button outside a form

To achieve this, we should use the following markup.

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

As you can see, the button is not part of the form, yet this will work.

This is because we used the form attribute on our button. In it, we define which form this button belongs to.

You can also try it out in this CodePen.

Note: You will see a "Not Found" page, as our form doesn't go anywhere.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

The idea is that we get a string and have to return the string without the letters aeiou.

JavaScript remove all vowels

Let's dive right into the solution.

const input = 'daily dev tips';

const removeVowels = input.replace(/[aeiou]/gi, '');

console.log(removeVowels);

// 'dly dv tps'

It works! And yep that's all the code we need, but let's take a closer look at how it works.

The first part is to use the JavaScript replace function to replace a specific match. The first part is the match, for which we'll use a regular expression. And the second part is the replacement.

We could, say, replace the letter i with an empty string like this.

const removeVowels = input.replace('i', '');

console.log(removeVowels);

// 'daly dev tips'

However, you'll notice it only replaced the first occurrence. And, of course, we can only target one letter at a time. So this is where our regular expression comes in.

We start the regular expression by wrapping it in the / / backslashes. Then we open a pattern matcher with the [] brackets. And in between, we specify which letters should be matched. The last part is to use gi at the end, which stands for global ignore.

• global meaning to apply it to each occurrence, not just the first one
• ignore means to perform a case-insensitive search

And that's it. I hope you learned something about removing vowels with JavaScript.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter