Forem: Artem

Finite-state machine example in JavaScript

Artem — Tue, 02 Jul 2024 21:08:16 +0000

What is Finite-state machine?

Context

FSM refers to classes of automata

The finite state machine (FSM) is a software design pattern where a given model transitions to other behavioral states through external input.

Example using if else

Let's say we have a simple task where we check, for example, a traffic light and perform actions depending on the current state.

function trafficLightAction(color) {
  if (color === 'green') {
    console.log('Go');
  } else if (color === 'yellow') {
    console.log('Slow down');
  } else if (color === 'red') {
    console.log('Stop');
  } else {
    console.log('Invalid color');
  }
}

// Function call examples
trafficLightAction('green');  // Return: Go
trafficLightAction('yellow'); // Return: Slow down
trafficLightAction('red');    // Return: Stop
trafficLightAction('blue');   // Return: Invalid color

Example with using Finite-state machine (FSM)

Now let's implement the same functionality using a state machine. A state machine will be an object where each key (state) is associated with a specific action.

const trafficLightFSM = {
  green: () => console.log('Go'),
  yellow: () => console.log('Slow down'),
  red: () => console.log('Stop'),
  invalid: () => console.log('Invalid color'),
};

function trafficLightActionFSM(color) {
  const action = trafficLightFSM[color] || trafficLightFSM['invalid'];
  action();
}

// Function call examples
trafficLightActionFSM('green');  // Return: Go
trafficLightActionFSM('yellow'); // Return: Slow down
trafficLightActionFSM('red');    // Return: Stop
trafficLightActionFSM('blue');   // Return: Invalid color

Now, our traffic light will works well.

Disclaimer:
Several levels of additional tests would not hurt here, and perhaps another programming language ;)

Finite-state machine example in JavaScript

Artem — Tue, 02 Jul 2024 21:08:16 +0000

What is Finite-state machine?

Context

FSM refers to classes of automata

The finite state machine (FSM) is a software design pattern where a given model transitions to other behavioral states through external input.

Example using if else

Let's say we have a simple task where we check, for example, a traffic light and perform actions depending on the current state.

function trafficLightAction(color) {
  if (color === 'green') {
    console.log('Go');
  } else if (color === 'yellow') {
    console.log('Slow down');
  } else if (color === 'red') {
    console.log('Stop');
  } else {
    console.log('Invalid color');
  }
}

// Function call examples
trafficLightAction('green');  // Return: Go
trafficLightAction('yellow'); // Return: Slow down
trafficLightAction('red');    // Return: Stop
trafficLightAction('blue');   // Return: Invalid color

Example with using Finite-state machine (FSM)

Now let's implement the same functionality using a state machine. A state machine will be an object where each key (state) is associated with a specific action.

const trafficLightFSM = {
  green: () => console.log('Go'),
  yellow: () => console.log('Slow down'),
  red: () => console.log('Stop'),
  invalid: () => console.log('Invalid color'),
};

function trafficLightActionFSM(color) {
  const action = trafficLightFSM[color] || trafficLightFSM['invalid'];
  action();
}

// Function call examples
trafficLightActionFSM('green');  // Return: Go
trafficLightActionFSM('yellow'); // Return: Slow down
trafficLightActionFSM('red');    // Return: Stop
trafficLightActionFSM('blue');   // Return: Invalid color

Now, our traffic light will works well.

Disclaimer:
Several levels of additional tests would not hurt here, and perhaps another programming language ;)

var, let, const in JavaScript - summary of differences between them

Artem — Tue, 18 Jun 2024 21:49:26 +0000

Summary of Differences.
If you, like me, are tired of this interview question.

Scope:

var: Function or global scope.

let: Block scope.

const: Block scope.

Hoisting:

var: Hoisted and initialized with undefined.

let: Hoisted but not initialized (temporal dead zone).

const: Hoisted but not initialized (temporal dead zone).

Re-declaration:

var: Can be re-declared within the same scope.

let: Cannot be re-declared within the same scope.

const: Cannot be re-declared within the same scope.

Immutability:

var and let: Mutable references.

const: Immutable reference (the reference cannot change, but the value can if it's an object).

Examples

var

function varExample() {
    console.log(x); // undefined (due to hoisting)
    var x = 10;
    if (true) {
        var x = 20; // Same variable, function-scoped
        console.log(x); // 20
    }
    console.log(x); // 20 (same variable as above)
}

varExample();

let

function letExample() {
    // console.log(y); // ReferenceError (temporal dead zone)
    let y = 10;
    if (true) {
        let y = 20; // Different variable, block-scoped
        console.log(y); // 20
    }
    console.log(y); // 10 (original variable)
}

letExample();

const

function constExample() {
    // console.log(z); // ReferenceError (temporal dead zone)
    const z = 10;
    if (true) {
        const z = 20; // Different variable, block-scoped
        console.log(z); // 20
    }
    console.log(z); // 10 (original variable)

    const obj = { name: "Alice" };
    obj.name = "Bob"; // Allowed (the object itself is mutable)
    console.log(obj.name); // Bob

    // obj = { name: "Charlie" }; // TypeError (can't reassign const)
}

constExample();

Singleton Design Pattern, TypeScript example

Artem — Wed, 12 Jun 2024 21:13:07 +0000

What is Singleton?

Context: Singleton is one of the Creational design patterns

The Singleton Pattern is a design pattern used in programming to ensure that a class has only one instance and provides a global point of access to that instance. This is useful when exactly one object is needed to coordinate actions across a system.

The pattern typically involves:

Private Constructor: Prevents direct instantiation of the class from outside.
Static Instance: Holds the single instance of the class.
Static Method: Provides a way to access the instance, creating it if it doesn't already exist.

This ensures that no matter how many times you request the instance, you always get the same object.

Good Use Cases for the Singleton Pattern

1. Configuration Settings:

Applications often need a single, centralized place to manage configuration settings. A singleton ensures that all parts of the application access the same configuration.

2. Logging:

A logging system should be centralized so that all parts of an application write to the same log. Using a singleton ensures that there is only one instance of the logger.

3. Database Connection:

Managing a single database connection instance ensures efficient use of resources and avoids the overhead of opening and closing connections repeatedly.

4. Caching:

A cache should be globally accessible and consistent across the application. Using a singleton ensures there is a single cache instance.

Example of Singleton Pattern in TypeScript

Here is the code to implement a simple singleton:

class Singleton {

    private static instance: Singleton;

    private constructor() { }

    public static getInstance(): Singleton {
        if (!Singleton.instance) {
            Singleton.instance = new Singleton();
        }

        return Singleton.instance;
    }

    public doAction() {
        console.log("action");
    }

}

Here is how to use this class:

const singleton1 = Singleton.getInstance();
const singleton2 = Singleton.getInstance();

// Outputs: true
console.log(singleton1 === singleton2);

// Outputs: 'action'
singleton1.doAction();

Explanation:

Static getInstance Method: This static method is the key to controlling the access to the Singleton instance. If the instance doesn't already exist, it creates one. If it does exist, it returns the existing instance.
Private Constructor: The constructor is designed to throw an error if it is called directly after the instance is created. This ensures that the Singleton instance is created only through the getInstance method.
Instance Variable: The static property Singleton.instance is used to store the singleton instance. This variable is checked and modified only within the getInstance method.
Usage: When Singleton.getInstance() is called, it either creates a new instance or returns the existing one. Attempting to directly instantiate the class using new Singleton() will throw an error, enforcing the Singleton pattern.

Criticism, or what are drawbacks of singleton pattern?

1. Global State. They are generally used as a global instance, why is that so bad? Because you hide the dependencies of your application in your code, instead of exposing them through the interfaces. It's making the system less transparent.

2. They violate the single responsibility principle: by virtue of the fact that they control their own creation and lifecycle.

3. Can lead to tighter coupling. Singletons hide dependencies within the class itself, making the system less transparent. This can lead to tighter coupling between classes and reduce modularity. They inherently cause code to be tightly coupled. This makes faking them out under test rather difficult in many cases.

4. Hard testing. Singletons can make unit testing more difficult. Since they control their instantiation, it can be hard to substitute them with mock objects or to reset their state between tests, leading to inter-test dependencies.

5. In multi-threaded applications, singletons can cause concurrency issues if not implemented correctly, as multiple threads might access and modify the singleton instance simultaneously.

6. Inflexibility: Once a singleton is implemented, changing its behavior or replacing it with a different implementation can be difficult. This inflexibility can hinder future development and adaptation.

Conclusion:

While the Singleton pattern can be useful in specific scenarios where a single instance is truly necessary, it should be used cautiously. Alternatives such as dependency injection can often provide more flexible and testable designs. When considering the Singleton pattern, weigh the pros and cons carefully to determine if it is the best fit for your specific use case.

And here is a meme that perfectly explains my evolution while gather this article :D

2 UX tips for self-typing text effect

Artem — Thu, 18 Apr 2024 19:33:55 +0000

Self-typing text effect in interfaces is mainstream, especially after AI bots are becoming more and more popular... |

However, developers can ignore at least two problems that can degrade the user experience.

I give these two tips when implementing this effect:

✍️ 1) If it's fake real-time, add the ability to skip the effect. In 99% cases, a text which should be displayed is already loaded in users browsers before showing. Waiting while the effect will finish can be time-consuming and nerve-wracking. A text should be able to be available immediately, if possible.

This can be done by clicking on the text area or on a special button.

✍️ 2) Not correct auto-translation of such text. Check that a browser translator works correctly, and what code ends up pasted in the HTML? Even ChatGPT can throw an error if you translate the page into a language other than English while printing text.

To solve this problem, you can replace the DOM node after all the text has been shown. Or better customize your tool and printing technique for each character and text.

I solved these problems on my site. You can take a look (actual on April 2024). https://artemshar.space

As for tools, I think there are many ready-made solutions, but I used the https://www.npmjs.com/package/typewriter-effect, which is good and deserves a star.

Music for focusing and coding - Part #1

Artem — Wed, 25 Jan 2023 11:48:52 +0000

Generative FM, my favorite music created by the algorithm, ambient textures and great minimalistic design. It's free.

🔗 https://play.generative.fm/browse

My ambient playlist with 150+ tracks on Spotify

🔗 https://open.spotify.com/playlist/2kIoUajgPhfxOZfh3Yc5L4?si=2e61092d023c4cbe

Too boring? Let's add more expressive and engineering inspiration! 🔩🔥 There are you'll find tons and tons my lovelyyyyy music: drum and bass, techstep, techno, breakbeat and experimental electronic:

NOISIA (archive) radio

🔗 https://www.noisia.nl/radio

VISION radio (fresh project!)

🔗 https://www.visionrecordings.nl/radio

Need more dreams, inspiration in the spirit of travel and long roads, night cities? Please, enjoy with Shoegaze and Indie Rock

DKFM Shoegaze Radio 🎸

🔗 https://decayfm.com/

And, a special playlist that name "Saint-Petersburg atmosphere" ⚓. My personally associations from each track with my hometown, which I will miss for a long time and love from a distance.

🔗 https://open.spotify.com/playlist/6GK4ByhiZTykOEr1RtpUGj?si=61e7f2863bd947ae

What is the difference between SSR, ISR, SSS 👀

Artem — Tue, 03 Jan 2023 19:54:54 +0000

SSR (Server-Side Rendering), ISR (Incremental Server-Side Rendering), and server-side streaming are all techniques for rendering and serving content to a client in a web application. Here is a brief overview of the differences between these three approaches:

SSR (Server-Side Rendering):

SSR involves rendering the content of a web page on the server and sending the fully rendered HTML to the client.
This can improve the performance and SEO of a web application, as the client does not have to wait for the JavaScript to execute before the page is displayed.
However, SSR requires more resources on the server, as the server has to do the rendering work.

ISR (Incremental Server-Side Rendering):

ISR is a variant of SSR in which the server sends the initial HTML content to the client, and then the client renders the rest of the content using JavaScript.
This can improve the performance and SEO of a web application, as the initial content is displayed faster and the server does not have to do as much rendering work.
However, ISR requires the client to have JavaScript enabled, as the client is responsible for rendering the rest of the content.

Server-Side Streaming:

Server-side streaming involves sending a stream of data from the server to the client in real-time, without waiting for the entire response to be generated.
This can be used to implement real-time features such as live updates or chat applications.
Server-side streaming requires the use of a special HTTP header, Transfer-Encoding: chunked, which tells the client to expect a stream of data rather than a single response.

How I made SVG-logo for my site (spoiler: like a nerd, lol)

Artem — Mon, 09 Mar 2020 01:06:32 +0000

Hello

My name is Artem Shar (Sharyukov), I'm Web/Fron-End developer since 2016. In the end of 2019 I decided it was time to make a new personal website with a blog like as usual... The new site is not ready yet. But to make process more interesting and faster, I want to share my experience of logo creating, because this thing was really done. Now it looks like this and I like it.

This logo, made by using SVG and CSS without tools.


<div class="logo-wrap">
  <svg class="logo-svg" viewBox="0 0 200 200" width="50px" height="50px">
     <circle cx="100" cy="100" r="100" fill="#313131"></circle>
     <circle cx="100" cy="100" r="75" fill="#ccc"></circle>
     <circle cx="100" cy="100" r="50" fill="#fff"></circle>
  </svg>
</div>

.logo-wrap {
  --color-glow-1: #080808;
  --color-glow-2: #D9FBFF;
  ...
}
.logo-wrap:after {
  ...
  box-shadow: 8px 10px 30px var(--color-glow-1), 5px 5px 20px var(--color-glow-2);
}
.logo-wrap:before {
  ...
  box-shadow: 8px 7px 20px var(--color-glow-1), 7px 7px 15px var(--color-glow-2);
}

That's simple and controlled, if I want to add some interactive behaviour or change colors or play with shadows, etc.

Rewind the tape a bit back. Before this version, I have something similar, but without shadows. If remove CSS-code, it will looks like this. I lived with this logo for a while, putting them on avatars of some social networks. And I didn't want to delete it.

Now let's rewind the tape to the beginning, a 4 of months ago (october of 2019).

First steps

The first thing I started with was a simple pen and paper. Because I didn't want to be limited to any digital tool. And I just experimented during about one week. The first thing that occurred to me was to play with the letters of my first and last name. Also, I was inspired by the Zeit company design. Their style is clear, simple and strong. But I didn't want to create something too strong or sharp. Lot of times I tried to use the triangle - in the end I dropped it. I thought about something, that contain my character: nature, forever favorite things, maybe roots. It was sun, sea, because I grew up near Gulf of Finland, sunrises and sunsets and something modest, clear, dark. Also, I wrote to my friend asked for help me with ideas with letters A and S, and she threw something. That's what came out of it. Sorry for the poor quality.

Inkscape SVG + React App

Next stage I've took Inkscape - the good free tool for creating vector-graphics. And I started trying to repeat something I'd drawn with a pen.

And they looked so bad... then I realized that I should try to use the tool's features. After all, the pen is also a somewhat limited tool. It wasn't easy, I started playing around fonts, forms and shadows, In general, it looks dilatant, but I liked some of them, here are some good examples.

Here you can see the first version of my "sun circles" :)

I made a lot of variants in Inkskape. Make clear filenames - no, it is immpossible :D

And I settled on that. I really liked this translucent glass, the color of which I played when I inserted it on the site.

After a time, I stopped like it, because I feel instability and uncertainty with it. I've back to circles. I did animated colors on my page, because I couldn't choose just two colors.

The next thing that I did, I turned these circles into a theme switch on the site, which is like sunset or sunrise.

Recently, I realized again that I was playing too much, that I was stuck in all this and I'm not move to my goal - to make a simple, static site. This project with theme switcher was stopped, because I complicated it. I've took HTML, CSS and I made current SVG logo by hands. And I'm happy with this simple and volume result.

Maybe I'll do something interesting with shadows later, but that's less important.

I continue do my site, next step is blog part, where I'm goint to put this article and smth else, for start.

The conclusion

Don't limited to design tools, but start with paper and pen for generate ideas
When you are your own customer, design process is can be too long (in my case, about 4 of month in free time with breaks). Rememeber your goal
Listen to your feelings about the forms, colors and design process. E.g. it seems, circles I likes more than triangles :D

Feel free to fix my English.
Thanks for your attention! Have a nice coding and design!

Forem: Artem

Finite-state machine example in JavaScript

What is Finite-state machine?

Context

Example using if else

Example with using Finite-state machine (FSM)

Finite-state machine example in JavaScript

What is Finite-state machine?

Context

Example using if else

Example with using Finite-state machine (FSM)

var, let, const in JavaScript - summary of differences between them

Scope:

Hoisting:

Re-declaration:

Immutability:

Examples

var

let

const

Singleton Design Pattern, TypeScript example

What is Singleton?

Good Use Cases for the Singleton Pattern

Example of Singleton Pattern in TypeScript

Criticism, or what are drawbacks of singleton pattern?

Conclusion:

Links

2 UX tips for self-typing text effect

Music for focusing and coding - Part #1

What is the difference between SSR, ISR, SSS 👀

How I made SVG-logo for my site (spoiler: like a nerd, lol)

Hello

First steps

Inkscape SVG + React App

The conclusion