Forem: Matt Tarasov

How to pass custom module from JS to C++

Matt Tarasov — Wed, 20 Jul 2022 08:07:00 +0000

Passing custom module from JS to C++ code with Emscripten is the easier task than it seems!
I created a tiny example to show how to pass module from JS to C++ using Emscripten and val::global()

First of all we need to write a C++ function for the loading. It looks like this:

int loadCustomModule (std::string globalModuleName) {
  val ModuleClass = val::global(globalModuleName.c_str());
    if (!ModuleClass.as<bool>()) {
    std::cout << "No global module " << globalModuleName;
  }
  return 0;
}

Then we need to pass this function to JS using EMSCRIPTEN_BINDINGS:

EMSCRIPTEN_BINDINGS(module) {
  function("loadCustomModule", &loadCustomModule);
}

Yeah, that's all! Now, we can use our loadCustomModule function in JS.

class HelloWorldCustomModule {
    helloWorld() {
        console.log('Hello, World!')
    }
}
var Module = {
    onRuntimeInitialized: function () {
        window.HelloWorldCustomModule = HelloWorldCustomModule;
        Module.loadCustomModule('HelloWorldCustomModule')
    }
};

And the last step is using our HelloWorldCustomModule in C++

int loadCustomModule (std::string globalModuleName) {
  // ... first part is above
  val module = ModuleClass.new_();
  module.call<val>("helloWorld");
  return 0;
}

Compilation

em++ -lembind -o passCustomModule.js passCustomModule.cpp -s ERROR_ON_UNDEFINED_SYMBOLS=0 -Wall --bind

The full example with HTML you can find there

CSS variables for React developers

Matt Tarasov — Sun, 05 Jun 2022 17:54:18 +0000

Everyone has met a case when we need to customize React components for special design, right? Maybe you even have a UI-kit, but the designer thinks that this is a special case and you have to make this button bigger and brighter? So, I have a simple way to solve it. Say "No" to your designer. That's all. Bye.
It's a joke. I think the work of a software engineer is related to finding tradeoffs and sometimes we must do something a designer wants. Well, I want to talk about an easy way to customize components in React.

Naive way

Assume you have a button.

export const Button = ({ text, onClick }) => {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
};

With this css:

.button {
  padding: 12px 26px;
  background-color: skyblue;
  color: #ffffff;
  font-size: 1rem;
}

And now you need to increase padding and change color:

What is the simplest way to do it? Throw additional class name to props and use it:

export const Button = ({ text, onClick, className }) => {
  return (
    <button className={cn('button', className)} onClick={onClick}>
      {text}
    </button>
  );
};

I've used this library to concatenate the className with the .button class

Well, we have a new class:

.secondary-button {
  padding: 20px 32px;
  color: #000000;
}

Usage:

<Button text="Press me" className="secondary-button" />

It's okay, but recently your colleague has changed main button:

export const Button = ({ text, additionalText, onClick, className }) => {
  return (
    <button className={cn("button", className)} onClick={onClick}>
      <span className="button__text">{text}</span>
      <span>{additionalText}</span>
    </button>
  );
};

And css:

.button {
  background-color: skyblue;
  font-size: 1rem;
}
.button__text {
  display: inline-block;
  color: #ffffff;
  padding: 12px 26px;
}

And what happened with your button? Your styles have broken because your selector isn't so strong as new for text. So, you have a bug.
Yes, you can just pass a new class only for text and everything will be working well, but how long?
I have a more safe and more powerful way to customize your components.

CSS variables

Everyone knows how to initialize css vars in :root (it's just an alias for <html> but more specific):

:root {
  --main-color: #ffffff;
}

We also can use css vars within other selectors, like a class:

.some-class {
    --main-color: gray;
}

And these variables also use inheritance like CSS properties.
So, are you thinking the same thing as me? We can use it to customize your component!

.button {
  --button-padding: 12px 26px;
  --button-color: #ffffff;

  padding: var(--button-padding);
  color: var(--button-color);
  background-color: skyblue;
  font-size: 1rem;
}

Well, look at the code above. We declare variables and use them in our first button version. Now, if you want to change padding or color, you have to write something like that:

.secondary-button {
  --button-padding: 20px 32px;
  --button-color: #000000;
}

When someone wants to change inner css code of that button, you can be calm - everything will be working well:

.button {
  --button-padding: 12px 26px;
  --button-color: #ffffff;
  background-color: skyblue;
}

.button__text {
  display: inline-block;
  padding: var(--button-padding);
  color: var(--button-color);
}

So, we write a low-coupled CSS code, with fewer bugs, and more reusability!

We can use css vars with containers, like this:

 export const Button = ({ text }) => {
  return (
    <button className="button">{text}</button>
  );
};

.button {
  display: inline-block;
  /* Using default values var(--name, <default value>) */
  background-color: var(--button-bg-color, skyblue);
  color: var(--button-color, #ffffff);
}

Now we can initialize variables --button-bg-color and --button-color in the Button's parent component and that's it!
Let's create a card class and wrap button in:

.card {
  --button-color: #000;
  --button-bg-color: peachpuff;
}

    <div>
      <Button text="Default button"/>
      <div className="card">
        <Button text="Button into card"/>
      </div>      
    </div>

Conclusion

CSS variables can help you to create reusable components and reduce bugs not only with React, but with other frameworks or without them! Anyway, I hope this article was interesting and you will start to use CSS variables in your work!

Useful tools for programmers

Matt Tarasov — Fri, 27 May 2022 14:33:09 +0000

Yes, I know, it's too straightforward title, but I'm going to write about tools to make your coding life easier.

Scratch files

Have you ever created a temp file for logs or for sample of code? You have to choose path for save while you just want to run it. Or maybe occasionally you have committed test.json file? Stop it!
Scratch files! That is a mechanism provided by your IDE (or plugins for it) to help you manage temporary files.

I use free extension for VS code:

And simple example. If you want to create a scratch file, you just have to press cmd + shift + p and then input:

Now you can create your temporary file and choose a type:

After that you will see an empty file with a chosen extension.
Also you can run executable scratch file, open it or delete.
And no more test.json

Bookmarks

A month ago I came to a huge project (above 500k lines of code). And the most difficult things for me is a navigation through the code. There are decades similar modules and components, same names of services, etc. I've found a simple and useful tool to solve it - Bookmarks.
Also VS code example:

Then you have to just pick a line and choose bookmark label:

You can create bookmarks with labels and without them. After creation you can find your bookmarks at the sidebar:

Stash

Imagine, you are thinking up a solution for problem, fixing a horrible bug or making a feature of your dreams... brilliant. But your manager wants you to fix a small bug. You have to switch your git to master, create new branch and so on. Time to commit WIP (work in progress)! Wait a minute... Maybe there is a more simple and beautiful way to save your work and switch branch? Yes!
This simple command saves your changes on current branch:

$ git stash -u
Saved working directory and index state WIP on main: 5002d47 our new homepage
HEAD is now at 5002d47 our new homepage

-u - is a flag to save untracked changes
To get list of stashes:

$ git stash list
stash@{0}: WIP on main: 5002d47 our new homepage
stash@{1}: WIP on main: 5002d47 our new homepage
stash@{2}: WIP on main: 5002d47 our new homepage

For Jetbrains IDE adepts

If you use some of Jetbrains IDE, tools like bookmarks and scratch are exist in you IDE by default and you don't need any extensions.

Conclusion

I've known about these tools accidentally and I hope they will help you.

Dependency Injection in Golang

Matt Tarasov — Thu, 20 Jan 2022 19:27:30 +0000

Today I am going to talk about Dependency Injection in Golang.

What is it?

DI (Dependency Injection) is a technique when your modules receive dependency indirectly. They don’t know about the implementation of dependency, only about the interface.

Why do we need it?

DI can help us to write low coupling code. It means that you would be able to exchange your code whenever you want, and it helps to reuse some of their parts.

Example

We have a tiny project: main.go and two services - logger and cache

├───cmd
│       └───main.go
└───services
        ├───logger
        │       └───logger.go
        └───cache
                └───cache.go

How do they work? We have cache service which can be used if you want to store something in a fast storage like redis.

package cache

// interface of the logger service which will be injected
// and a good tone to write it in lowercase to hide export
type logger interface {
    Error(error)
    Info(string)
}

type Cache struct {
    logger logger
}

// constructor of our service which recieve interfaces of 
// services which will be injected (we can inject a few services) and
// return struct (instance of cache)
func NewCache(logger logger) *Cache {
    return &Cache{
        logger: logger,
    }
}

// some methods
func (r *Cache) Get(key string) (*string, error) {
    // ...
}

func (r *Cache) Set(key string, data []byte) error {
    // ...
}

How may you see, Cache service know nothing about logger except the method that Cache need. We don't import anything, just describe interface with two methods, Error(error) and Info(string).

Look at the Logger:

package logger

// sentry client interface for service wich to be injected
type sentryClient interface {
    // only one method for the all client (with maybe tens methods)
    // because we need only one and the logger know only about one
    sendMessage(interface{})
}

type Logger struct {
    sentry sentryClient 
}

// constructor
func NewLogger(sentryClient sentryClient)* Logger{
    return &Logger{
        sentry: sentryClient,
    }
}

// we can see four methods, but Cache know only about two
func (l *Logger) Error(e error) {}
func (l *Logger) Info(msg string) {}
func (l *Logger) Debug(e error) {}
func (l *Logger) Log(e error) {}

So, now we have to use it all together in main.go:

package main
import logger "gopath/project/logger"
import cache "gopath/project/cache"

func main() {
    // register services
    sentryService := NewSomeSentryService()
    loggerService := logger.NewLogger(sentryService)
    authService := cache.NewCache(loggerService)

    // ... init some other handlers and services
}

Let's summarize

We create two low couple services which can work with any other Loggers and SentryClients, for example we can use logger for test which write to file or stdout.

Bonus

If you want to write tests, DI also can help you! Sometimes you need mocks for tests (to be independent of some modules like logger in tests), you have to generate it! There is an amazing tool for this task in go - GoMock. When you describe only needed methods in DI interface, the GoMock generate mocks just for those methods - it is faster and more readable in practice, than hundreds methods in mocks.

Apologies

It's my first article and I'm not native English speaker. It's very hard for me to learn English, but I try to be better than I was yesterday!