DEV Community: Eduard Pochtar 👨‍💻

DevObserver - App You Should Have!

Eduard Pochtar 👨‍💻 — Mon, 03 Jan 2022 16:05:59 +0000

DevObserver is the app I was working on for a while and finally it has been released on the AppStore.

DevObserver is a mobile app for developers where anyone can stay tuned with the latest news, articles, tutorial, etc. Currently it's available on the iPhone, but iPad and Android version are also coming.

I also plan to share my experience of developing mobile app and it's backend. So a lot of interesting is yet to come.

Download it today, it's free! AppStore

P.S. enjoy!

Utility first CSS class names hell. Is there any solution?

Eduard Pochtar 👨‍💻 — Tue, 25 May 2021 08:20:42 +0000

Utility first CSS is very powerful and flexible but it has one downside that I personally don't like - long long
long class attributes:

div(class="bg-gray-900 flex flex-col gap-24 absolute top-1/2 left-1/2 transform -translat-x-1/2 -translat-y-1/2 
text-center")

and this one is not the longest one, but it's enough to understand that it's not so good.

The problem with this approach is that it's hard to read the code especially when there are so many complex elements.
It's possible to solve this problem with mixins and use one or several classNames but this can make your css file
very big and it will be hard to optimize it in the future.

Or you can use wrap elements with additional ones to distribute class names but this will bloat html with
unnecessary elements.

There is another way how to solve this problem put your class name to variables for example something like i18n does.
But I would like to share less complex method using simple variables this can work in almost any modern framework or
almost any template language. In this short article I will use pug for demonstration.

So instead of writing all class names into class attribute you can use variable in pug:

- var myComponent = "bg-gray-900 flex flex-col gap-24 absolute top-1/2 left-1/2 transform -translat-x-1/2 
-translat-y-1/2 text-center"

div(class=myComponent)

But wait a minute what if I need some kind of modifier? Well there is also solution for that. You can split your
variables into different kind of levels so you could mix them too:

- var myComponentBase=" bg-gray-900 flex flex-col gap-24 absolute top-1/2 left-1/2 transform -translat-x-1/2 
-translat-y-1/2 text-center "
- var myComponentText1=" font-24 leading-32 font-800 "
- var myComponentText2=" font-18 leading-32 font-400 "


div(class=myComponentBase + myComponentText1)
div(class=myComponentBase + myComponentText2)

// or
div(class=myComponentBase + " font-18 leading-32 font-400")

Variables can be global, you can put them into separate file include them where ever you need them. You can also
have separate file per component. As you can see there are a lot of possibilities with this approach everything
depends on your imagination!

There is one thing to keep in mind. Each approach has it's own downsides. The problem with this one is that if you
would like to debug something in a browser than to search for something in the code that it will be a little bit
tricky to dao that if your code is not organized well for example if your class name variables are somewhere far
away from your components that it will take more time to find them.

As for frameworks everything works very similar you put all your class names into variables and then use them where ever you want to use them. Additionally you can implement something like i18n but for utility first css.

In the end of the day you should decide which approach would you like to use, which downsides are acceptable for you!

Go. A Frontend Developer Review.

Eduard Pochtar 👨‍💻 — Sun, 12 Apr 2020 18:06:15 +0000

It's been few months since I've started to learn Go and I already have something to share. This is a small review of Go from a frontend developer point of view. I'll describe things I liked and things I didn't like.

Why did I started to learn Go?

I believe that exploring new things helps to bring new ideas, inspiration, be more creative, solve some problems in a different way.
I'm a frontend developer for 10 years and I didn't learn any other programming language besides HTML, CSS, JavaScript. So I thought It's time to learn something new. I was thinking about some other programming languages but Go seemed to me more attractive. Maybe in the future I'll learn some else programming language.

What is Go?

Go is a statically typed, compiled programming language developed by Google. It has similar to C syntax but has some extra features like memory safety, garbage collection, structural typing and CSP style concurrency. The Go goal is to help building simple, reliable and efficient software. And it's open source.

The Bad Side.

Let's start with the bad things. As for novice in Go the hardest problem for me is community it's small compared to frontend and some times it's really hard to find some solution to some problem, lack of best practices. But this can be changed in the future.

One of the things I like about frontend or related open source projects is that developers, not just write good documentation, they make everything to make their projects more attractive. As for Go open source projects, of course there are some projects with good documentation, but there are still a lot of projects that miss documentation which is very critical to newcomers. Very often I was turning away just because didn't understand what it was about or how to use it.

The Good Side.

Performance.

One of the biggest advantages of Go is performance. Go is very efficient programing language, of course it depends on a lot of things and there is always opportunity to make things go wrong. But by default Go requires very small amount of resources. For example I have some side project built with Node.js, while it's running it requires about 120mb of memory and as for Go it's about 10mb of memory for almost the same amount of features. It's a big difference.

Go is also multi threaded. This give a huge performance boost compared to Node.js which is single threaded. This limitation of Node.js makes it impossible to create super efficient and faster tools (build, task runners, etc) for developers. And here is great example of this Battle for the Bundling time: esbuild — a JavaScript bundler and minifier written on Golang
Of course it's not hard to understand that for frontend developers it's much easier to develop tools in the programming language they work everyday.

Simplicity.

Go has some new paradigms I had to change despite this Go I very simple programming language. As I mentioned before Go is statically typed but you don't have to define each time. You can define types dynamically with :=.

One of the first question I had when I've started to learn Go was "What about object?", "Does Go has objects?". Well yes and no. Go has kind of objects - structs:

struct {
    x, y int
    u float32
    _ float32  // padding
    A *[]int
    F func()
}

I can't deny or confirm that this makes Go simpler, it's just another kind of paradigm you'll have to learn.

Pointers - another paradigm I had to learn. It's maybe similar to references in JavaScript, but you have to define that you would like to use a pointer:

b := 255
var a *int = &b

You can also to return multiple values in functions:

func myFunc(num int) (input int, calculated int) {
    calculated := num + ...

    return input, calculated
}

Packages.

I really like package system in Go. Exporting and importing variables and functions is super easy. Package can contain multiple source files but there is no need to import each file individually. It would be enough just to import the package and use required of code. Every name of function, variable that starts with capital letter can be imported from another package.

Build.

If you where working with Node.js you may already know that you don't have to build a Node.js app, it would be enough to start it and it will run. But in most cases you probably will use some packages and this will require you to install them. And the problem is that you can't install those packages and them copy or deploy them to some other machine or server. All the packages should be installed on the system where the Node.js app will run. This makes CI/CD of Node.js apps a little bit more complex. Another thing to keep in mind that node_modules very often has additional files like documentation, images, audio, video files, whatever which can require a lot of space. In some cases it can be very critical and you will have to handle this on your own.

As for Go, in most cases you will build Go app in one executable file or few executable files for different OSs. Yes, you can build Go app on one OS for another OS. And deploying one or few executable files is much easier than dealing with node_modules.

Conclusion

Compared to frontend programing languages like JavaScript Go has some new paradigms, but that doesn't mean that Go is worse it's just a little bit different. It's very efficient, it's simple enough, it has great package system, it's perfect fit for build tools and task runners. It's a great alternative to Node.js. You can build Go app for multiple platforms which makes it easy to deploy it.

If you would like to learn some other programming language you definitely should try Go.

Vue.js, CSS Modules, Functional CSS. How to?

Eduard Pochtar 👨‍💻 — Sun, 03 Feb 2019 12:59:17 +0000

Not So long ago I wrote small article - PostCSS Functional CSS Plugin. Generate Functional CSS with ease..

This plugin is aimed to help generate functional css with ease.

I used it for a while and it worked very well. Until I had to use it with css modules. The main problem was a class names. If you familiar with css modules I may know that it's a little bit easier to use camel case class names. Unfortunately PostCSS Functional CSS Plugin couldn't generate camel case class names until now.

Recently I've update the plugin and I also added some new css features and "CSS Modules Mode".

Splitting

One more new feature was added - is ability to generate features separately. To do so just add a comment that contains feature name to specific file (margin.pcss):

/* postcss-functional-css-margin */

CSS Modules Mode

By default PostCSS Functional CSS plugins generate class names like this:

margin-top-20
margin-left-20
md-margin-left-20 So the class name contains css property name and value. If class is declared inside some media query it will have extra prefix defined in the config. And this is fine when you use it with vanilla html.

When it comes to CSS modules you probably would like to use it for example like this:

<div :class="[
    margin.top20, 
    margin.mdTop40, 
    margin.bottom20, 
    margin.mdBottom40
]">
    ...
</div>

So in CSS Modules mode property name won't be added. It would be important to import css/pcss file with a css property name:

<template>
    <div :class="[margin.bottom20, margin.mdBottom40, margin.lgBottom60]">
        ...
    </div>
</template>

<script>
...
</script>

<style src="./margin.pcss" lang="pcss" module="margin"></style>
<style src="./padding.pcss" lang="pcss" module="padding"></style>

This will help to keep code inside a project semantic and avoid selectors like margin.marginBottom20.

Links

PostCSS Functional CSS Plugin

PostCSS Functional CSS Plugin. Generate Functional CSS with ease.

Eduard Pochtar 👨‍💻 — Wed, 23 Jan 2019 09:27:26 +0000

If you like functional css, if you would like to generate it with ease, if you would like to control the output, then this plugin is for you.

Why?

Writing functional css is not the best work to do. There are a lot of repeating tasks, which may cause some bug and even can make it harder to update. It's much easier to generate functional css.

Of course it's possible to generate functional css with less, sass, stylus, etc. But in that case source css will be limited to the technology you prefer. With PostCSS there are no such limits.

PostCSS Functional CSS plugin helps to control the output of generated css. It gives ability to enable or disable features (like font-size, line-height, margin, padding, etc.). It gives ability to customise class names so you can use those class names you prefer. It gives ability to generate responsive css with ease.

Supported Features

display
float
font-size
font-weight
line-height
margin (top, right, bottom, left)
object-fit
opacity
padding (top, right, bottom, left)
position
text-alignment
text-size (combination of font-size and line-height)
visibility
z-indez

More features are yet to come.

Getting Started.

Install:

npm i postcss postcss-functional-css

Configure:

postcss([
  require('postcss-functional-css')({
    mediaQueries: [
      {
        prefix: 'sm',
        prefixSeparator: '-',
        params: '(min-width: 640px)'
      }
    ],
    globalStyles: true,
    features: {
      display: true,
      float: true,
      fontSize: {
        className: 'fs',
        values: [12, 14, 16, 18, 24, 32, 48],
        unit: 'px'
      },
      fontWeight: {
        className: 'fw',
        values: [400, 500, 600, 700]
      },
      lineHeight: {
        className: 'ln',
        values: [16, 18, 20, 22, 28, 36, 52],
        unit: 'px'
      },
      margin: {
        top: {
          className: 'mt',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        right: {
          className: 'mr',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        bottom: {
          className: 'mb',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        left: {
          className: 'ml',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        }
      },
      objectFit: true,
      opacity: {
        className: 'o',
        increment: 10
      },
      padding: {
        top: {
          className: 'pt',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        right: {
          className: 'pr',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        bottom: {
          className: 'pb',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        },
        left: {
          className: 'pl',
          values: [4, 8, 12, 16, 20, 24, 28, 36, 48, 72, 96, 120],
          unit: 'px'
        }
      },
      position: true,
      textAlignment: true,
      textSize: {
        className: 'ts',
        fontSizeUnit: 'px',
        lineHeightUnit: 'px',
        values: [
          {
            fontSize: 14,
            lineHeight: 20
          },
          {
            fontSize: 18,
            lineHeight: 24
          }
        ]
      },
      visibility: true,
      zIndex: {
        className: 'z',
        increment: 1,
        limit: 10
      }
    }
  })
])

Add comment to your css file:

/* postcss-functional-css */

Comment will prevent from duplicated css in some bundlers like Parcel or Webpack. CSS will be ONLY appended if comment exists.

Feel free to contribute or propose new features.

Links

PostCSS Functional CSS

A better way to check big amount of data against database in Node.js

Eduard Pochtar 👨‍💻 — Thu, 17 Jan 2019 15:25:15 +0000

While working on some projects there might be some obvious performance optimisation tasks and not so obvious as well. Sometimes it's even hard to find a good solution especially when a lot of sources all over the internet look like copy paste.

Unfortunately I couldn't find good solution for this issue all over internet. Fortunately I've got help from my colleague and would like to share it with you.

So how is it possible to check if some data already exists in database? The solution is very simple we just need to know some unique identifier which we will use to query data from database:

const pool = ... // Database connection pool
const product = {
    id: 1,
    title: "Best Product Ever",
    ...
}

pool.product.find({where: {title: product.title}}).then(result => {
    // do something...
});

As you can see nothing complex. But what if we need to check if multiple products exist in our database? We can use loop:

const pool = ... // Database connection pool
const products = [{
    id: 1,
    title: "Best Product Ever",
    ...
}, {
    ...
}]

products.forEach(product =>{ 
    pool.product.find({where: {title: product.title}}).then(result => {
        // Do something...
    });
})

This also doesn't look so complex. As you may already know one of the good practices of connecting to database is using pools. This gives ability to connect to database multiple times without need to close the connection.
If we take a closer look at our loop it wouldn't be hard to understand that as many items we have in array as many connections we might have. It might not sound like a problem when there are 5 or 6 items we have to check for existence in our database. But it can be a big performance issue when we would like to check hundreds, thousands or even hundreds of thousand of records.

Solution

So how can we solve this issue? Instead of one by one connecting to database and checking if the record exists it's possible to query based on data we have compare queried data with our income data.

const pool = ... // Database connection pool
const products = [
    {
        title: 'Some Product Title'...
        ...
    },
    {...},
    {...}
]

const productTitles = products.map(product => item.title)
const query = {
    where: {
        title: productTitles
    },
    attributes: ['title']
}

pool.product.find(query).then(result => {
    const resultTitles = result.map(item => item.title);

    const newProducts = products.filter(product => resultTitles.indexOf(product.title) === -1);
    // Do something...
});

In the above code I've made a query based on list of products, selected all products form database based on query. If there is some title in my query that doesn't exist in database it just won't select it. Then I compared to lists with help of .map and .filter methods. As a result I've got new products in 'newProducts' variable.
In this case we will only one connection pool. Depending on project requirements there might be more connection pools for example one more connection pool to save the data little bit later.
This is useful when you would like to process only the data that doesn't exists in your database and save to database only after few additional process steps.

I hope this small trick will help you to make your project a little bit better.

CSS Border Length

Eduard Pochtar 👨‍💻 — Thu, 29 Nov 2018 08:51:13 +0000

CSS is great, it's simple and it's really easy to understand it. Of course despite it's awesome, it still has some missing features like for example scope. But in this small article I would like to propose to solve a little bit smaller problem.

I think many of us have faced the case when the border had to be much shorter than it's parent element itself. And unfortunately it's impossible to solve this with border which, in my opinion, could be much easier and better. Currently the only way to solve this just by using some other help elements (hr, span, div, etc.) or pseudo elements:

.title {
    font-size: 24px;
    margin: 0 0 10px;
    padding: 0 0 10px;
    position: relative;
}

.title::after {
    background-color: #efefef; 
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%,0);
    width: 50px;
}

As you can see this is not the worst solution, but not the best.

I think for this case there can be a better solution - border-length.
What if it would be possible to do like so:

.title {
    border-bottom-length: 50px;
    border-bottom-color: #efefef;    
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-size: 24px;
    margin: 0 0 10px;
    padding: 0 0 10px;
}

As for me this solution looks much more cleaner. And of course shorthands...

What do you think?

Poco — project orchestration. Introduction.

Eduard Pochtar 👨‍💻 — Wed, 14 Nov 2018 09:31:51 +0000

Recently I've wrote article Poco — project orchestration. Introduction.. It's about an open source tool we've built to help our developers in everyday development's routine.

Poco - Docker extension

Eduard Pochtar 👨‍💻 — Tue, 08 May 2018 07:38:53 +0000

Working in a big team with a large amount of projects requires a lot of time of local environment configuration. It's really hard to predict how much time it can take to configure local env for particular project.

Docker is a tool that can help with that. It will isolate environments and automate local env configuration which can reduce amount time and problems of local env configuration.

Docker is a great tool, however we thought that we can improve our daily routines. So we decided to create a tool called Poco.

Poco will help to initialise and run any project of any complexity with simple command line interface. Developers who doesn't familiar with docker will be able to start any project without any problem.

Benefits:

simple command line interface. Even managers will be able to use Poco.
create your own project catalogs/registries or use GitHub Gitlab integration so there will be no need to use other tool to list and clone your projects.
create multiple environments for production, development, demo purposes or custom.
split configuration files to keep them small, reusable and easy maintainable.
Poco supports Docker-Compose, Kubernetes, Helm, Git, SVN.

More information about Poco you can find here - https://getpoco.io.

And one more thing. Poco is an open source project.