DEV Community: Sergej Samsonenko

The Rise of Native Web Components

Sergej Samsonenko — Mon, 31 Jan 2022 16:17:20 +0000

Native web components are on the rise. You don't believe it? Here are some statistics to prove otherwise:

According to chromestatus.com as of January 1st, 2022 about 17.5% of web page loads made use of the CustomElementRegistryDefine feature to define custom elements. On the 1st of January 2021, that number was only about 10%.
According to caniuse.com the browser support for the Custom Elements (V1) spec, is at about 93.85%.

Web component flaws

So why isn't everybody switching over to web components? Well, multiple reasons. If you ever googled web components and tried to implement them, you would soon realize working with the barebones web components API is no fun. Plus there are tons of features missing that you are accustomed to from common frameworks like Vue, React or Angular. Additionally, they are overly complex, thus setting the barrier to entry unreasonably high.

There are certainly some other shortcomings but if the developer experience of the system is bad nobody will try to dig deeper.

What I noticed right off the bat is that a lot of people think they are forced to choose between a framework or native web components for their projects. But here in lies the flaw, it's not an either-or.

Thinking outside the box

Everybody had high expectations for native web components but they never lived up to the hype and faded somewhat into the background while React and Vue still remained in the spotlight.

I think that is about to change, but first, we need to reframe how we think about web components. Native web components are not here to replace common frameworks but instead should be used complementary.

The strength of web components is their universality, since they're native you can use them anywhere, which makes them perfectly suitable for design systems.

A Design System is a set of interconnected patterns and shared practices coherently organized.

This means if you are using native web components for your design system you don't have to write the same set of components for every single framework and legacy application that you are using.

After crafting a bunch of web components for multiple projects myself and fiddling with the web components API, I knew another solution would be required to make working with web components a breeze, and thus Minze was born.

Minze

What is Minze? Minze is a dead-simple framework for shareable web components. It provides an intuitive abstraction layer around the web components API for creating encapsulated, reusable, cross-framework web components.

Features

👶 Simple - Dive right in by scaffolding a project or using a CDN link.
⚡ Fast - Tiny footprint ~2KB (minified and compressed).
🚀 Modern - Based on the latest technologies around web components.
📦 Shareable - Build component libraries or design systems. Define once, use everywhere.
🎲 Framework Agnostic - Use Minze with any common framework - React, Vue, Angular ...
🔒 Typed API - Scale your component library with ease by using TypeScript.

Example

Here's what Minze looks like included via npm:

import { MinzeElement } from 'minze'

class MyElement extends MinzeElement {
  html = () => `Hello Minze!`
}

MyElement.define()

<my-element></my-element>

And here's what Minze looks like included via CDN:

<html>
  <head></head>
  <body>
    <my-element></my-element>

    <script src="//unpkg.com/minze@latest" defer></script>
    <script type="module">
      class MyElement extends MinzeElement {
        html = () => `Hello Minze!`
      }

      MyElement.define()
    </script>
  </body>
</html>

Easy, right? Feel free to share your thoughts on the web components topic in the comments below.

Find out more about Minze

Design buttons like a Pro with Tailwind CSS

Sergej Samsonenko — Mon, 11 Oct 2021 14:31:16 +0000

Let's get down to business, today I'll show you some easy steps for creating clean, functional buttons with Tailwind CSS.

1. HTML markup

First, we need some basic HTML markup, all styling will happen through Tailwind classes.

<a href="#" class="...">
  Button
</a>

2. Display and spacing

Now on to adding classes to the class attribute. On mobile our button will be full-width otherwise, it will have some sane spacing defaults. The content is centered vertically as well as horizontally.

flex sm:inline-flex justify-center items-center px-5 py-2

3. Color

Next, we are adding background and text colors.

bg-blue-500 text-white

4. Text

Some simple text styling.

font-semibold text-center

5. Decoration

We are adding rounded borders and removing the default outline for a more polished look.

rounded-md outline-none

6. States

Don't forget to add states. Hover, active plus focus. These are important to give the user proper feedback.

hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300

7. Transition

Finally adding a transition between the different states. Faster transition times usually work better for buttons (50ms to 150ms).

transition duration-100

Final result

<div class="bg-gray-100 py-16">
  <div class="flex flex-wrap justify-center gap-4 p-4">
    <a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-indigo-500 to-purple-400 hover:from-indigo-600 hover:to-purple-500 active:from-indigo-700 active:to-purple-600 focus-visible:ring ring-indigo-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 1
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-gradient-to-tr from-pink-500 to-red-400 hover:from-pink-600 hover:to-red-500 active:from-pink-700 active:to-red-600 focus-visible:ring ring-pink-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 2
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-blue-500 hover:bg-blue-600 active:bg-blue-700 focus-visible:ring ring-blue-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 3
    </a>

    <a href="#" class="flex sm:inline-flex justify-center items-center bg-green-500 hover:bg-green-600 active:bg-green-700 focus-visible:ring ring-green-300 text-white font-semibold text-center rounded-md outline-none transition duration-100 px-5 py-2">
      Button 4
    </a>
  </div>
</div>

More

👉 If you want to see more Tailwind CSS components and examples head over to Flowrift. It's a library full of beautifully designed Tailwind CSS UI blocks.

Flowrift - Tailwind CSS UI blocks

Sergej Samsonenko — Wed, 29 Sep 2021 17:02:18 +0000

Introducing Flowrift, an assistant library made of beautifully designed Tailwind CSS UI blocks. All blocks are vanilla HTML and work with Tailwind CSS' default configuration. Go big or go small: Stack blocks on top of each other to build full-page layouts, or selectively copy small code snippets. Your imagination is the only limit.

All blocks are well organized inside a highly performant app. Just view, copy & customize.

Are you Busy?
Missing a section in your design?
Lacking inspiration?

We got you covered.

Some highlights:
⭐ Growing Library
⭐ Responsive Preview
⭐ Code View
⭐ Keyboard Shortcuts
⭐ Randomizer

👉 Go to the Flowrift App
👉 More about Flowrift

Top 3 free icon packs for your next project

Sergej Samsonenko — Mon, 15 Feb 2021 22:33:00 +0000

Who doesn't like some free resources? 😎 Here are my top 3 high-quality icon collections I use in almost every project.

Unicons

Unicons contain 1000+ Pixel-perfect vector icons.

Heroicons

Heroicons are beautiful hand-crafted SVG icons.

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Now build something awesome. 💪

Modern Shopify theme development

Sergej Samsonenko — Wed, 27 Jan 2021 23:23:23 +0000

If you ever tried to develop a Shopify theme you know how ridiculously neglected the official Shopify tooling is. I'm not exaggerating here. I spent countless hours searching for a way to set up a development environment, navigating through abandoned or deprecated Shopify projects, and reading comments from fed up devs.

In the end, I said: "Fine, I'll do it myself". That's pretty much how the Shopify Theme Lab project started. Of course, the road to the finished product was a little bit more complicated, but that's another story.

The Framework

So what exactly is Shopify Theme Lab? It can be summed up in one sentence:

It's a highly customizable Shopify theme development environment, with great developer-experience and modern tooling.

Once you use Shopify Theme Lab you'll see how incredibly simple and enjoyable the process of developing themes can be.

What can it do?

First and foremost it's probably the easiest way to get up and running with Shopify theme development. And that's the most difficult part.

Some other notable features include:

It's highly customizable
You have modern tooling at your disposal. Out of the box, it comes with Vue and Tailwind CSS
Remote reloading during development
Preprocessor support for SASS/SCSS, LESS and Stylus

Get to work

Head over to the Shopify Theme Lab repo on GitHub and build something awesome 💪🏻