DEV Community: Svetloslav Novoselski

Understand CSS Specificity

Svetloslav Novoselski — Sun, 08 Nov 2020 10:53:54 +0000

First we will explain what generators are and why do we need them. JavaScript Generators were first introduced in ES6. They are just normal functions with a little bit strange behavior. They can stop their execution in the middle of the function and resume it further from the same point.

How do they differ from normal functions?
In a normal JavaScript function, we expect the code inside will execute until we reach a return statement, an error, or the the end of the function.

With a generator function, we are changing that behaviour with the yield keyword. When we encounter yield in our function we are expressing that we'd like to pause the execution, allowing us to get a value out or into the function.

Syntax

They are declared like a normal function plus one * added to it. Here is the simpliest example. A function that is returning the numbers from 1 ot 5:

function *example() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    return 5;
}
const func = example();

console.log(func.next()); // { value:1, done:false }
console.log(func.next()); // { value:2, done:false }
console.log(func.next()); // { value:3, done:false }
console.log(func.next()); // { value:4, done:false }
console.log(func.next()); // { value:5, done:true }

The most important thing about generators is the yield key word. It is called an yield expression, because when we restart the generator, we will send a value back in, and whatever we send it will be the computed result of that expression. To iterate on the generator we should use the method .next() over it. It actually returns response of type object with two properties: value and done. The value property is the yielded-out value, and done is a bolean that indicates if the generator has completed or not.

Here is an illustration of the same:

What are the advantages?

Memory Efficient

Generators are memory efficient, which means that the only values that are generated are those that are needed. With normal functions, values should be pre-generated and kept to be used later on. Only those data and computaions that are necessary, are used.

Lazy Evaluation

The ecaluation of an expressiong is not calculated until its value is needed. If it is not needed, it won't exist. It is calculated on demand.

Use Cases

You may ask yourself, why do I need that? Well, they are plenty of good practival examples of where and how we can use generators.

Unique ID Generator

First the basic one is a ID Generator. You should want everyone to has an unique id so instead of using closure you can do it with generators.

function* idGenerator() {
    let i = 1;
    while (true) {
        yield i++;
    }
}

const ids = idGenerator();

console.log(ids.next().value); // 1
console.log(ids.next().value); // 2
console.log(ids.next().value); // 3

Using with Promises

Here is an example with promises. The entire structure might look complicated, but if we focus on *main, we can see that we are calling the API and getting result in data as if it was a synchronous call. There is noly addition of the yield in it.

const URL = 'https://someAPI?name=';

function callAPI(name) {
    const url = `${URL}${name}`;
    return new Promise(function(resolve, reject) {
        $.ajax({
            url,
            success: function(data) {
                resolve(data);
            }
        });
    });
}
function* main() {
    try {
        const data = yield callAPI('Svetli');
        console.log('Data: ' + data);
    } catch (err) {
        console.error(err);
    }
}
const it = main();
const res = it.next();
res.value.then(data => it.next(data));

Conclusion

If we want to write great code it should be easily maintained by other developers and generators give us exactly that: clean and understandable structure that is easy to follow.

📩 If you like this post, subscribe and comment what other topics should I write about!

. . .

Understand CSS Specificity

Svetloslav Novoselski — Sun, 18 Oct 2020 08:03:04 +0000

CSS Specificity is the set of rules that decide what styles are applied to elements, the more specific it is, the more weight it has in determining the style of an element.

Why do I need to know that?

You may ask yourself why do I need to understand CSS Specificity, may I just write !important when some styles are not applied.
The answer is NO! By understanding how styles are applied, your code become more clean and easy to read. It is easier to change a particular style if you know exactly which selector to modify and you will no dig into naming architecture and ensuring that selectors won't conflict to each other.

Which selector has bigger weight?

There is a system with four categories which give to each selector weight, the most specific selector that bigger weight it has.

Style Attribute

Inline Style overrides all other styles and has weight 1000

ID Selectors

IDs has weight 100

#headline {
    color: #f1f1f1; 
}

Classes, attributes and pseudo selectors

They all have weight of 10 for each donated element.

.headline {
    color: #f1f1f1; 
}

Elements

Elements have weight of 1.

h1 {
    color: #f1f1f1; 
}

Exceptions

There are also some exceptions to these rules and we will analyze them in this section.
The universal selectors (*, +, -, >, ~) have value of 0.
The !important value overrides absolutely everything and has value of 10000, but we should avoid using it , just in case.
The pseudo-class :not() has no specificity either. ## Example Let's get these two selectors and see which one will be applied.

ul.ul > li:nth-child(2):hover {
    color: blue;
}

ul#ul > li:hover {
   color: green;
}

The second selector is more specific and has bigger weight, so it's style will be applied.
The weight of the first one is 32 and the second is 112.

What we have learned?

All css selectors have weight, the more specific it is, the more weight it has. Avoid using !important. Always look a way to use specificity before considering !important.

📩 If you like this post, subscribe and comment what other topics should I write about!

Techniques to increase performance of web applications

Svetloslav Novoselski — Wed, 19 Aug 2020 19:45:09 +0000

Аt some point all applications encounters performance problem and you will have to think about scaling techniques. The focus here will be on increasing the performance on the backend. We will give examples with performance of a NodeJS application, but principles are similar in all languages.

So first we should explain what application performance is. In simple words it is the measurement of the application abilities. For example how much time it will take to the server to give a response to the client. The 2 main factors we should have in mind are as we mentioned the response time that the server needs to complete a specific amount of operations such as login a user or searching data. The second involves measurements of what resources are consumed by the application for doing these tasks. Here are some things that can improve the performance if they are done the correct way.

Caching

Caching is the first thing that comes to mind when we talk about improving the response time. The process is simple, we store the data in a temporary storage called cache which is with smaller size and faster access time. The application logic first checks in the cache before hitting the database. If the data is there, it is returned to the client, if not the application reads it from the database and then saves a copy of it in the cache. Caching can be done at different levels. We can use Application Caching which are basically in-memory stores like Redis. Web servers can also cache requests and returning response without second contact to the application server. In order to cache static files such as images, images, html, css files we can use CDN caching. Databases and ORMs by default includes some level of caching in order to boost the performance.

Load balancing

If our application handles large amount of incoming requests we may want to distribute the traffic to balance the connections. This approach is called Load Balancing. For example for a NodeJS app, if we want to scale it we can use the built-in cluster module which spawns new processed called workers that run simultaneously and connect to a master process. In that way, the server behaves like one multithreaded server.

Asynchronous and Parallel programming

If our app requires a lot of internal calls which do not depend on each other you can group them and run them parallel. This will increasing the response time a lot. Most of the time we should avoid writing synchronous code, there are a lot of components that can potentially lock up our application. We should always use asynchronous APIs, especially in performance-critical functions.

HTTP Request

We should try to decrease the number of HTTP request we may. The solution here is to group some requests in one and cache the response in order to use it later.

Optimized queries

A bad query will make the process of responding data very slow. So we should always try to write maximum optimized queries without unnecessary information. The problem here will be when there are millions rows of data and without indexing querying through this database will be extremely slow.

WebSockets

They are an alternative to HTTP communication in the web. WebSockets provides long-lived channel between the client and the server. Once the connection is open, it is kept alive, offering quick and persistent connection. This approach is great for real-time and long-lived communications.

Conclusion

To sum up, there are a lot of things we can do to increase the performance of our app. We have to choose depending on the specific case, and where exactly is the bottleneck in the application.

What are ES6 Proxies and how to use them?

Svetloslav Novoselski — Wed, 27 May 2020 07:55:29 +0000

First we should understand what proxies are actually. Using JavaScript proxies you can wrap an existing object and intercept access to its attributes or methods, even if they don't exist. You can also redefine fundamental operations for that object.

Syntax

There are 2 main terms in using Proxy.

Target - is the original object you want to wrap. It can be everything, also function.
Handler - is an object which define methods that intercept operations. These methods are also called "traps".

Basic Example

Here is the simplest example of Proxy. We have a dictionary with english and bulgarian translation of a few words. So what we want to do is get the bulgarian translation. We can see that everything is working as normal and when we want a word that is not included in the dictionary we get undefined.

const dictionary = {
    apple: 'Ябълка',
    peach: 'Праскова',
    orange: 'Портокал'
};

const proxy = new Proxy(dictionary, {});

console.log(proxy['peach']); // Праскова
console.log(proxy['grapes']); // undefined

What about instead of this we want to return an appropriate message. More, we can add validations on setters. Here is an example:

const dictionary = {
    apple: 'Ябълка',
    peach: 'Праскова',
    orange: 'Портокал'
};
const handler = {
    get: (target, prop) => {
        return target[prop] || 'The word is not translated yet'
    },
    set: (target, prop, val) => {
        if (typeof val === 'string') {
            target[prop] = val;
        }
    }
};
const proxy = new Proxy(dictionary, handler);

console.log(proxy['peach']); // Праскова
console.log(proxy['grapes']); // The word is not translated yet
proxy['grapes'] = 5;
console.log(proxy['grapes']); // The word is not translated yet
proxy['grapes'] = 'Грозде';
console.log(proxy['grapes']); //Грозде

Dynamic API Example

We saw a basic example of using Proxy and how to redefine operations. But let's see something a bit more interesting. Let's create an API that can intercept method calls that don't exist. For example we want to call an API with method that can include value or body represented as query and the proxy should return dynamically implement its functionality in runtime.

const {METHODS} = require('http');

const handler = {
    get: (target, propName) => {
        const method = METHODS.find(method => (propName.toLowerCase()).startsWith(method.toLowerCase()));
        let propNameCopy = propName.slice(method.length + 1);
        let index = propName.indexOf(propNameCopy.match(/[A-Z]/));
        let path = index !== -1 ?
            `/${propName.substring(method.length, index)}/${propName.substring(index)}`
            :
            `/${propName.substring(method.length)}`;
        return (...args) => {
            let queryOrBody = '';
            if (args.length) {
                const firstVal = args.shift();
                typeof firstVal !== 'object' ? path += `/${firstVal}` : args.unshift(firstVal);
                queryOrBody = args.shift() || {};
                if (Object.keys(queryOrBody).length && method === 'GET') {
                    path += '?';
                    for (let key of Object.keys(queryOrBody)) {
                        path += `${key}=${queryOrBody[key]}&`;
                    }
                    path = path.slice(0, -1);
                }
            }
            console.log(`Method: ${method} Path: ${path.toLowerCase()} ${method === 'POST' ? ('Body:' + JSON.stringify(queryOrBody)) : ''}`);
        }
    }
};
const api = new Proxy({}, handler);

api.getUsers();                                             // Method: GET Path: /users
api.getUserLikes('98');                                     // Method: GET Path: /user/likes/98
api.getUserPosts('98', {page: 2, name: 'JavaScript'});      // Method: GET Path: /user/posts/98?page=2&name=javascript
api.postArticle({name: 'Title', description: 'Some text'}); // Method: POST Path: /article Body:{"name":"Title","description":"Some text"}

Let me explain what the code is doing. First we are getting the type of the method which can be GET, POST, PATCH, DELETE. Then we want to get the endpoint of the method. After that we check if the method is GET and have query parameters, we add them to the endpoint if not, we check if there is body of the request. Finally we display the API call result.

To summarize a proxy can be used wherever an object is expected, and the complex functionality that proxies provide with just a few lines of code makes it an ideal feature for metaprogramming.

📩 Feel free to comment whatever you want.

How to build Sidebar for your next React Project with react-sidebar-ui

Svetloslav Novoselski — Fri, 22 May 2020 12:42:03 +0000

I was wondering to add a sidebar to one of my project so first I searched if there are any already built components and I did't find any that I liked. So I decided to build one and after that I published it like a npm package in order other people to contribute and use it.
Here I will explain how to use it and I will be thankful if you give a star in github. There is a link to the repo at the bottom of the page.

Install

npm install --save react-sidebar-ui

Usage

import React from 'react'
import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'
import 'react-sidebar-ui/dist/index.css';

const App = () => {
  return (
    <div>
      <Sidebar bgColor='black' isCollapsed={false}>
        <Logo
          image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'
          imageName='react logo'/>
        <LogoText>React Sidebar UI</LogoText>
        <DropdownItem
          values={['First', 'Second', 'Third']}
          bgColor={'black'}>
          Menu
        </DropdownItem>

        <Item bgColor='black'>
          <Icon><i className="fas fa-home"/></Icon>
          Home
        </Item>
        <Item bgColor='black'>
          <Icon><i className="fas fa-info"/></Icon>
          About
        </Item>
        <Item bgColor='black'>
          <Icon><i className="fas fa-sitemap"/></Icon>
          My Website
        </Item>
        <Item bgColor='black'>
          <Icon><i className="far fa-address-book"/></Icon>
          Contacts
        </Item>
        <Item bgColor='black'>
          <Icon><i className="fas fa-rss-square"/></Icon>
          Blog
        </Item>
        <InputItem type='text' placeholder={'Search...'}/>
      </Sidebar>
    </div>
  )
};

You should import FontAwesome in order to use the icons.

Props

Common props you may want to specify include:

Sidebar

bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
isCollapsed - add start position of the sidebar if it will be collapsed or not
classes - add your custom classes if you want to add custom style to the component

DropdownItem

bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
values - items that will be displayed
classes - add your custom classes if you want to add custom style to the component

Item

bgColor - change the color of the sidebar it can be black, light, blue, purple, aqua, peach
classes - add your custom classes if you want to add custom style to the component

Logo

image - url to the image
imageText - alt tag of the image
classes - add your custom classes if you want to add custom style to the component

InputItem

type - type of the input field
placeholder - placeholder of the input field
classes - add your custom classes if you want to add custom style to the component

Contribute

Contributions are always welcome! Any moderation, feature/pull requests are welcome if you want to contribute!

Svetloslav15 / react-sidebar-ui

⚛️ The Sidebar Component for React.js

react-sidebar-ui

Sidebar component for React projects with customizable design

Install

npm install --save react-sidebar-ui

Usage

import React from 'react'
import {Sidebar, InputItem, DropdownItem, Icon, Item, Logo, LogoText} from 'react-sidebar-ui'
import 'react-sidebar-ui/dist/index.css'
const App = () => {
  return (
    <div&gt
      <Sidebar bgColor='black' isCollapsed={false}&gt
        <Logo
          image='https://media2.giphy.com/media/eNAsjO55tPbgaor7ma/source.gif'
          imageName='react logo'/&gt
        <LogoText>React Sidebar UI</LogoText>
        <DropdownItem
          values={['First', 'Second', 'Third']}
          bgColor={'black'}>
          Menu
        </DropdownItem>

        <Item bgColor='black'>
          <Icon><i className="fas fa-home"/></Icon>
          Home
        </Item>
        <Item bgColor

…

View on GitHub

How to do 8 hours of work in 4?

Svetloslav Novoselski — Sat, 16 May 2020 21:10:32 +0000

We all have read about productivity, some tips and tricks that will help us do an 8h work in 4h. I wanted to write this article for a long time, but first I wanted to try these habits by myself and see are they true. So, I try out a lot of things, some worked, others not. Here are the keys that worked for me. First one is…

Concentration

For me the most important tip is concentration. You should be focused in what you are doing, if you wanted to complete it in less time with same or better quality. You should find a way to get into the zone and try to stay there as much as you can. The easiest way is to create your own ritual that you will do before working. Doing it regularly, your subconscious will realize that after it your brain should stay concentrated because there is work to be done.

In order to stay there for a longer time you should isolate all distractions. Put your phone somewhere where it won't disturb you, clean your desk from anything that will distract you, try not to open social medias on the computer either.

Planning

Another crucial tip is planning. You can't do much work without a plan. That's why before starting to do anything you should always make a plan if you want to achieve great results. There are different ways to do it, you can make a simple todo list for the week, check list or you can just put your tasks into a table. You should find what works for you and just do it.

Task arrangement

You should try to sort your tasks by difficulty, starting from the hardest one. As Mark Twen said "If it’s your job to eat a frog, it’s best to do it first thing in the morning. And if it’s your job to eat two frogs, it’s best to eat the biggest one first." By doing the toughest task first, the rest of the day will be an easier ride for you, else you are more likely to procrastinate it and never do it.

Sleeping

You can't do anything valuable without a good sleep. You endure without sleeping for a few day, but your productivity is decreasing because we are humans and we need recharging as everything else in order to do the job well.

These are the key tips and trick that are helping me doing more work in less time. Remember: - "Starting is the hardest thing".

What are your habits to stay concentrated, comment bellow?

Why to use async & await instead of the Promise class?

Svetloslav Novoselski — Sat, 09 May 2020 20:13:10 +0000

In order to answer this question we should first say what are actually promises and what they do.

What are promises

Promises are a way to write asynchronous code, which means that a function will return some data in a certain time in the future and the code will continue to execute. For example let's say we want to make a burger because we are hungry. So what we do, we can put the meat on the stove, and in parallel with this we can cut the vegetables. When the meat is ready we remove it from the hot plate and put it in the burger, then we put the vegetables and we are ready. Cooking the meat is the Promise and when it is ready we do something with it, this is what we call asynchronous programming.

Usage

Here a simple function that get some data load some data. These are the two ways to do it with the Promise class which has 2 methods .then when the promise has ended and .catch when there is an error.

const makeRequest = () => {
    getUserData
        .then(user => {
            console.log(user);
        });
}

const makeRequest = async () => {
   console.log(await getUserData());
}

What we see is that using async & await we write less code but in this way when there is 1 function it doesn't matter if you use await or promise class. But what will happen if there are 2 or more functions that depend on each other. For example, first we want to get a user and then we want to get all clubs that a user has joined. Here are the 2 implementations.

const makeRequest = () => {
    getUserData
        .then(user => {
            getClubsForUser(user.id)
                .then(clubs => {
                    console.log(clubs);
                }).catch(err => {
                console.log(err.message);
            })
        }).catch(err => {
        console.log(err.message);
    })
};

const makeRequest = async () => {
    try {
        let user = await getUserData();
        let clubs = await getClubsForUser(user.id);
        console.log(clubs);
    }
    catch(err) {
        console.log(err.message);
    }
};

When looking at the first example it gives you a headache. It’s easy to get lost in that nesting, braces. You can see in the second example that the code with async & await is more clean and easy to read. And also what we deal with is the callback hell. Async & await is a syntactical sugar for writing asynchronous code. It makes the code look and behave a little more like synchronous code but it remains to be asynchronous.

Conclusion

Some people may say that using async & await can make the asynchronous code less obvious. But C# had this feature for years and people who are familiar with it know it’s worth this minor, temporary inconvenience.

How to build Enterprise Architecture for your next project?

Svetloslav Novoselski — Sat, 09 May 2020 20:02:14 +0000

Last a few weeks, I was thinking how can I build an enterprise architecture for my project so I searched a lot about it. There are many ways you can structure your app in effective way. You might have heard about All-in-one architecture, N-Layer Architecture, Microservices and so on. All of them are good in a certain situation but the architecture that I liked most is Clean Architecture. This pattern is proposed by Uncle Bob in his book as a way of building flexible and maintainable software solutions. So I decided to use and extend this template. The solution template consists of 5 layers. I will show you a C# implementation for ASP Net Core applications. You can find a link to the source code at the bottom of the page.

Core Layer
The Application Core holds the business model, which includes entities, services, and interfaces. These interfaces include abstractions for operations that will be performed using Infrastructure, such as data access, file system access, network calls, etc. Sometimes services or interfaces defined at this layer will need to work with non-entity types that have no dependencies on UI or Infrastructure. These can be defined as simple Data Transfer Objects (DTOs).

Infrastructure Layer
It typically includes data access implementations. In a typical ASP.NET Core web application, these implementations include the Entity Framework (EF) DbContext, any EF Core Migration objects that have been defined, and data access implementation classes. The most common way to abstract data access implementation code is through the use of the Repository design pattern.

Web Layer
The web layer in an ASP.NET Core MVC application is the entry point for the application. This project should reference the Application Core project, and it's types should interact with Infrastructure strictly through interfaces defined in Application Core. No direct instantiation of or static calls to the Infrastructure layer types should be allowed in this layer.

Tests Layer
This layer is for testing. Here you can test all others layers by writing both Unit Tests and Integrational tests. In this way you guarantee that your project has lower chance of bugs.

Common Layer
This layer is for global constants or files that are used in others layers.

If you want to see the source code of the template you can find it here:

Svetloslav15 / ASP.NetCore-Template

💻 Template for building ASP Net Core MVC apps.

💻 Extended Clean Architecture Solution Template

Template for building ASP Net Core MVC apps. This is a solution template for creating Enterprise projects with ASP.NET Core

If you like this template, give me a star ⭐.

Overview

Core

The Application Core holds the business model, which includes entities, services, and interfaces. These interfaces include abstractions for operations that will be performed using Infrastructure, such as data access, file system access, network calls, etc. Sometimes services or interfaces defined at this layer will need to work with non-entity types that have no dependencies on UI or Infrastructure. These can be defined as simple Data Transfer Objects (DTOs).

Infrastructure

The Infrastructure project typically includes data access implementations. In a typical ASP.NET Core web application, these implementations include the Entity Framework (EF) DbContext, any EF Core Migration objects that have been defined, and data access implementation classes. The most common way to…

View on GitHub

If you like it, please consider giving me a star. Thank you!