DEV Community: Yuriy Markov

Inferring types with TypeScript

Yuriy Markov — Tue, 04 Feb 2020 09:55:51 +0000

TypeScript provides advanced tools for work with types. In this post, I will show you how you can infer the data provided in the base class.

The setup is simple: we will create a base component, a function that will create objects of a given type, and several classes.

Base component

The base component may contain any common logic that you like to share between different classes. This way, you will avoid code replication and will have the ability to enrich your classes by modifying code in a single place.

Let's take a look at the class definition:

/**
 * - this class is providing base functionality for components.
 * - extend components with this class to get basic functionality.
 * - it is strongly advised to provide a type data <R> for this class 
 * to have an ability to provide the strictly typed data 
 * for the derived component before display it.
 */
class BaseComponent<R extends {} = any> {
  /**
   * - the optional external data of extendable type
   */
  data?: R;

  constructor() {}
}

The above example was simplified. But you can add, for example, an ID, name, or any other metadata.

Component interface

Next, we will define an interface that will describe data for the factory. As you can see below, the only mandatory field is the type of component to be created. The component's data is optional. Later on, you can extend this interface to fit your needs.

/**
 * component description
 */
interface IComponent<T extends BaseComponent, R> {
  /** the component class type */
  component: { new (): T };
  /** the user defined extendable optional data */
  data?: R;
}

Please, take a look at the definition of the component. First of all, we explicitly telling TypeScript that it should be derived from the BaseComponent class:

T extends BaseComponent

Next, we instructing TypeScript that the passed value has a constructor:

component: { new (): T };

Component data type

It is impossible to get a type of data directly. But it is possible if we will leverage a helper type. Here it goes:

/**
 * helper type which only meaning is to extract user-provided type from provided component
 */
type ComponentData<W> = W extends BaseComponent<infer R> ? R : W;

To be short, this type tries to infer the user-defined type. If it is not possible when it will return the initial or unknown type. In either case, this will not produce an error.

Factory function

The goal is to create a new instance of the desired component and return it only after the constructor will finish its work. Thus, by wrapping the logic into a promise, we can control what to do next in any situation:

In case if the factory will successfully create the component, we can use it further.
In other cases, we can notify other components of what had happened.

/**
 * create component
 * @param settings component settings
 */
function create<T extends BaseComponent, R extends ComponentData<T>>(settings: IComponent<T, R>): Promise<T> {
  return new Promise<T>(resolve => {
    const result = new settings.component();
    result.data = settings.data;
    resolve(result);
  });
}

The above example is simplified to catch the idea.

Here is how we use the ComponentData type to infer the user-defined type. Firstly, we tell TypeScript that the component extends the BaseComponent class. After, we are giving a clue about where to search the user-defined type.

T extends BaseComponent, R extends ComponentData<T>

Finally, we leverage the IComponent interface to get the proper type of data:

settings: IComponent<T, R>

Now, as all is set, we can create the component, assign the passed data, and return the new instance to the caller.

Example

I'm living in the types-safe world of TypeScript for a pretty long time. So, I'm used to using it for frontend projects as well as backend code. That is why I prefer to describe all of the structures I'm working with via interfaces. And this example is not an exclusion.

Let's use all of that we have created above. To do so, we will create an interface and a class. Here is how they look like:

interface IUser {
  name: string;
  age: number;
}

class User extends BaseComponent<IUser> {
  constructor() {
    super();
  }
}

And use it:

create({ component: User, data: { age: 10, name: 'alice' } }).then(user => console.log(user.data));

TypeScript will check fields that we will pass to the data object. If a set of fields is wrong or types of a provided values mismatch, it will lead to a compilation error.

Playground

Bottom line

TypeScript allows you to infer the type of data from base classes. Thus, it is possible to use and create objects via factories. That, in turn, will add an extra layer of safety to your application. Also, it enables you to reduce code replication by moving common logic into a single place. This approach works for frontend as well as for backend: I'm using it for modal windows, for example.

Keep moving forward!

Yuriy Markov — Fri, 31 Jan 2020 11:13:01 +0000

Once a man told me:
Give me $100, and I will thank you.
Teach me how to earn $100, and I will be your friend.
Share your success with me, and I will support you forever.
So, share your success with your friends to get their support and spread your knowledge everywhere.

Support plays a great role in our social lives. It can be a support of any kind: you can share your knowledge, you can teach people, you can take part in someone's life.

The number of ways you can support others is innumerable.

I'm living in a world of IT, and I can share about how you can support others:

You can contribute to the OSS projects. Each contribution matters.
You can share your insights, productivity hacks, newly obtained knowledge.
You can make your project an OSS. Thus, you will help others to save their time.
You can blog about new features, frameworks, libraries, approaches, etc. Spreading the knowledge will help you to solidify your skills.
You can become an advocate in your area of expertise.
You can help by promoting tools/projects which you like and use daily.
You can run a podcast, stream your knowledge using a platform of your choice.
You can create/edit documentation for OSS projects. This work is very important and done very poor often.

Moreover, any of the listed types of support will be to your benefit. By supporting others, you will create your portfolio and your legacy that will help you to get a job or to start your project!

In the age of the remote revolution, your online profile is one of the best assets you can create.

And that is awesome! You will achieve these goals by keeping your online profile outstanding and crisp:

You will obtain new knowledge. The more you know, the more freedom you have.
You will meet new people. You never know who of your peers can boost your career.
You can earn by supporting others. An explosive combination: learn and earn!
You will build the world you want to live in. "There's no fate but what we make" (c) The Terminator.

I hope that this post will help people to keep their heads up high and keep on going to their dreams, goals, whatever.

Who knows? Maybe your dream is also a dream of someone else. And by turning dreams into reality, you will support other people as well!

Thank you!

Start your blog in 10 minutes!

Yuriy Markov — Mon, 27 Jan 2020 07:18:22 +0000

Recently I discovered that it is possible to build a blog from posts on the dev.to.

Isn't it awesome?

To make it happen, you need to have an account at GitHub.

Once you create an account, you can sign in to the dev.to.

Next, you need to go to Settings - Integrations and tap Create New Stackbit Site.

Once you on the Stackbit's start page, it takes four steps to create your blog:

select a theme
choose a site generator
connect to your dev.to account
deploy your blog

If you don't have a Netlify account, then it will take several minutes to sign up using the Github account.

As a result, you will have a new repository in your Github account.

Next, you need to correct the default data from the start page.

To do so, go to your Github repository then navigate to src/pages/index.md.

Once you are where click the edit button and let your fantasy fly a bit around to write something about yourself!

That's it! Happy blogging!

Can you improve your creativity?

Yuriy Markov — Thu, 23 Jan 2020 11:33:34 +0000

Definition

People are different - that's the fact.

Some of us are super creative since birth.

Others (falsely) believe that they are not able to be creative.

But first things first.

Let's have a look at the definition:

Creativity is a phenomenon whereby something new and somehow valuable is formed. The created item may be intangible (such as an idea, a scientific theory, a musical composition, or a joke) or a physical object (such as an invention, a literary work, or a painting).

Experiment

Now ask yourself - are you able to create something new?

The answer is obvious - yes!

If you don't agree with me, then take a pen and paper (or something similar, even sand and a stick is a good option). Now draw a line.

Voila! You have created something new! And it was simple.

But you can contr argue: wasn't that too simple? what about something sophisticated? something beautiful? something highly technological?

Let's have a look at the line we have drawn recently.

Now imagine any painted masterpiece you like.

Initially, it was the line just like yours! So, anything that looks impossible for you is starting like this - from something incredibly simple!

Big things have small beginnings

Recipe

Now I hope that you agreed with me, and let's understand how creativity can be trained.

Here is my recipe:

be persistent
don't set goals, create habits
always learn
don't be afraid of failures

As a side note, I want to mention that all of these points are connected. And even are parts of each other.

Be persistent

To be persistent means for me to keep doing some activity. So, if you've tried something once and failed, it doesn't mean that you should stop.

In my case, it took about 7 years before I've created my first solo project. It was an interface for the Set-top box. It was interesting: the user had nothing but the remote control. But the users were able to see tv guides, horoscopes, weather forecasts, play games, record shows, schedule time to turn on or off the TV, check their balance, etc.

Don't set goals, create habits

Pretty early in my life, I've discovered that it is hard to follow multiple goals. But it is very easy to create habits which will lead you to your goals.

There were times when I wanted:

a car
an apartment
travel the world
become a developer
lead a healthy way of life
learn to speak English
a countryside house
get married
etc.

And that's only the top of the list!

By looking at that list, you can easily separate it in two categories:

exact result (e.g., an apartment)
vague result (e.g., become a developer)

In the case of exact results, you can say when the goal is achieved: I have documents that tell that I'm the owner now.

But what about my dream about becoming a developer?

Ok. I wrote 10 lines of code, and they are even working! Am I a developer already?

So, it is much easier to create habits:
Want to buy something expensive? Set aside 10% of your income.
Want to be a developer? Find a junior position.
Want to learn English? Practice every day for one hour.

This way, you'll keep on going to your dreams with ease.

Always learn

You will never know what knowledge may become handy in the future. The answer is simple - always learn.

The real-life example. Steve Jobs followed a class in calligraphy. It inspired him to add beautiful typography to the first Mac.

But remember - be persistent. Dive deeper than: "I read about this topic a few years ago". To solidify your knowledge, start to use it.

Don't be afraid of failures

The failure is your friend. And it is so: you should use your failures as a source of knowledge.

Another personal example: I've passed the exam and obtained a driver's license only from the third attempt!

Yes, I've failed two times in a row. But every time I've failed, I've returned to the driver's school and trained again. Today I am a driver with more than ten years of experience.

Outcomes

At this point in my story, my oldest son asked: "That's cool! But how will this help me improve my creativity?".

Well, creativity is a skill as any other skill that you have.

So, to improve creativity - start to create things!

Yes, it's all that simple. And all of the above will help you in your efforts:

be persistent in your efforts
create habits that will lead you to your goals
always learn new stuff: the more you know, the more freedom you have
don't be afraid to fail, be afraid to not to try

How many hours a day do you think you work?

Yuriy Markov — Wed, 22 Jan 2020 09:18:19 +0000

People usually think that they are working some exact number of time.

But that is not how our brain works.

Once the brain has a task, it will keep allocating part of its computing time to find the solution until it will complete the job.

Though it is also not the end of the story: after the brain will find the solution, it will spend some time to memorize the results.

Now, let's take a look at this simple timeline:

9 am - new task, complexity - inhuman!
10 am - meetup
11 am - read emails, etc.
Noon - hey it's lunchtime!
1 pm - concentrating on a task
2 pm - help request from your colleagues
3 pm - your boss wants to see you
4 pm - concentrating on a task
5 pm - coffee time!
6 pm - oops! time to go home!
7 pm - traffic jams
8 pm - dinner
9 pm - family time
10 pm - time to sleep
11 pm - the solution!

Note that the above timeline is very simplified to catch the idea.

So, why the brain finds the solution even if you are busy with some different tasks?

The answer is simple - the brain was solving the problem all this time. But your higher level of consciousness was not aware of this work.

How is this possible?

Let's think about the brain as of the superset of neural networks. Every part of this superset is also a set of neural networks.

Can you imagine the complexity of this structure? Also, it is a genuine miracle that this superstructure is placed inside our skull!

Moreover, this super network always works. When you eat, walk, entertain, sleep, even if you are unconsciousness.

Another noticeable thing that all these networks are working independently. And that allows our brain to be a true multitasker!

Having all of the above in mind, can you imagine the overall computing power of our brain?

The general simplified scheme of working of our built-in neural network looks like this:

get the task
divide the task into the chunks
assign each chunk to some part of the network
memorize the result after all of the assigned networks report back
after the result is memorized start notifying higher-level network
wait for a time-slot to report that the task is finished

Thanks to this approach, all of us have those "a-ha" moments.
So, it is wrong to think that you are only working when you are in the workplace.

Depending on your overall experience and the complexity of a task, your brain will allocate as much time as it needs to find the solution.

So, the right answer is that your brain is always working, and so do you.

Is it practical to use blockchain to track resource distribution? #discussion

Yuriy Markov — Wed, 22 Jan 2020 07:23:08 +0000

Is it practical to use blockchain to track resource distribution?
For example. The city provides the water to different consumers and tracks how much water was consumed by each consumer via IoT using the blockchain.
I'm exploring a new area of knowledge and have lots of dumb questions.
I know that the IT and financial worlds are leveraging the blockchain technology to their benefits.
But what about other areas of human activities?
It would be great to know your opinion.

Why we should be a better version of ourselves

Yuriy Markov — Tue, 21 Jan 2020 08:58:01 +0000

After years of thinking, experimentation, and observation, I came to some conclusions.

Here is one of them:

Any human activity is a way to express yourself.

But on the other hand:

Any human activity can be described as a process. And any process can be improved.

Now let's combine these two ideas:

Any human activity is a process of expressing yourself that can be continuously improved.

So, the point is that we are changing the world by expressing ourselves, and that can be improved.

At this point, my interlocutor usually asks:

Why should I improve myself?
Why should I change the ways I'm expressing myself?
Why do you think that I'm changing the world?

Or something similar.

And, again, here is my point of view:

For me, one of the ways of self-expression is to write code.
If I'm good at expressing myself, I also have these perks:
I'm producing fast a high-quality code
I have a bigger salary
I can afford whatever I want

I hope that this will help to improve somebody's world.

Why the distributed company is a viable option?

Yuriy Markov — Mon, 20 Jan 2020 11:23:32 +0000

Remotely managed companies nowadays have benefits.

As an employer:

you don't need an office
you don't need hardware for your employees
you don't have to select employees only from the local area
your employees are already equipped with hardware
you don't need to pay for bandwidth enough for comfortable work of many people
you don't need to buy fancy stuff for an office, e.g. ping-pong table, watercooler, etc.
you need less money to start your business
you can afford to run several businesses
you can travel and keep growing your business
you can decrease your carbon footprint to zero!

As an employee:

you can work with any company in the world
you don't need to spend time to commute
you can organize your workspace to your needs
you can benefit from online services such as codesandbox.io to start working at no cost
you do not need to bother about dress-code
you can spend more time with your relatives and beloved
you will eat healthy food of your choice
you can work out as many times a day as you want
you choose the time to work - no more 9 to 5 schedule
you can attend conferences and keep working
no problem with scheduling a visit to a doctor, advocate, etc.
you can decrease your carbon footprint to zero!

These are the benefits of remote working.

The only thing that you should choose wisely the software stack that will allow you to achieve all of these advantages!

And which advantages in remote lifestyle do you know/fond of?

The lifestyle of the digital nomad

Yuriy Markov — Mon, 20 Jan 2020 07:49:04 +0000

Among many perks of a remote lifestyle, there is one that fits many - you can be a digital nomad.

If you are a part of a distributed team and have a dream to explore the world, then it is an awesome combination!

This set of opportunities will allow you to:

Seek inspiration.
Meet new people.
Learn new languages.
Attend conferences.
Explore the world!

And it doesn't matter which is your role in the team: chief, developer, public relations, designer, representative of any kind, etc.

If your activities are bound to some sophisticated set of equipment that you're unable to carry around, you still can spend part of your time as a nomad.

And it also will include everything from the above list.

The important thing is that your time is under your control.

Explore the world - express yourself!

The 2020s is the decade of remote transformation

Yuriy Markov — Mon, 20 Jan 2020 06:44:35 +0000

The current decade is a time of explosive growth of a remote lifestyle.

Why?

These changes are upcoming thanks to world-wide-web that has reached every corner of our home planet and stretches to the orbit of the Moon.

Even Mars is nowadays is a part of the global web, though it is not yet publicly accessible.

The trick is that the web is not only the way to communicate.

It also allows you to share your goods, service, or content and to transfer money.

It is also important that it is irrelevant what kind of values are you offering - real-world or digital.

The modern logistics is a wonder of speed and quality.

Let's sum it up:

you can reach any person on this planet
you can deliver whatever you able to produce
you can receive money as a reward to your efforts

Doesn't it sound very attractive?

For me, it sounds very promising!

What is your opinion?

Having fun with TypeScript!

Yuriy Markov — Wed, 15 Jan 2020 16:16:17 +0000

Conventions
Button types
Discriminated unions
Intermediate interfaces
Working types
Example
Code sandbox
Conclusion

TypeScript makes developers' life easier.

In this article, we will walk through the creation of a set of types and interfaces.

The playground for this example is attached at the end of this article.

Conventions

In my practice, I prefer to use types to define unions. The role of interfaces is to describe an object structure.

Why?

Thus, it is easier to distinguish types and interfaces.

Here is an example:

/** a function that returns a generic type */
type GenericFunction<T> = () => T;
/**
 * a type that can be a generic value or
 * a function that returns a generic value
 */
type GenericMixedValue<T> = T | GenericFunction<T>;

/** description of an element */
interface IElement {
  /** disabled state is of type GenericMixedValue */
  disabled: GenericMixedValue<boolean>;
}

/** a function that randomly disables an element :) */
const disabled: GenericFunction<boolean> = (): boolean => {
  return Math.random() > 0.5 ? true : false;
};

/** declaration of an element */
const element: IElement = {
  disabled
};

In the above example, all types and interfaces are declared in CamelCase, but interfaces are prefixed with capital letter i.

This way, you will always know that the declaration refers to an interface:

const element: IElement;

On the other hand, you will perfectly see when the type is referred:

const disabled: GenericFunction<boolean> = (): boolean;

Button types

In our example, we will define a flexible button description with the help of TypeScript.

A button can be of any type from this set: positive, negative, neutral, and custom.

Here is the definition:

/** positive button type */
const buttonTypePositive = "positive";
/** negative button type */
const buttonTypeNegative = "negative";
/** neutral button type */
const buttonTypeNeutral = "neutral";
/** custom button type */
const buttonTypeCustom = "custom";

Next, let's define two types: ButtonTypeMain and ButtonType.

/** main button types */
type ButtonTypeMain = typeof buttonTypePositive | typeof buttonTypeNegative;

/** all button types */
type ButtonType =
  | typeof buttonTypeNeutral
  | typeof buttonTypeCustom
  | ButtonTypeMain;

The ButtonTypeMain will be used later to define a union type.

The ButtonTypeMain set includes a positive and negative type of button, while the ButtonTypeMain combines all of the types.

Discriminated unions

Discriminated unions are the wonder of typing!

With the help of such unions, you can gain flexibility via TypeScript!

Let's look further at our example.

Firstly, let's define a base interface IButton:

/** base button interface */
interface IButton {
  type: ButtonType;
  title?: string;
  disabled?: boolean;
  style?: string;
  action?: () => void;
}

Please note that all of the interface parameters are optional except for the type. Another important moment is that the type parameter can accept only values from ButtonType.

Next, we will use the type parameter to declare the interfaces of exact button types.

/** positive button interface */
interface IButtonPositive extends IButton {
  type: typeof buttonTypePositive;
  handleEnterKey?: boolean;
}

Ok, let's take a look at what has happened here a bit more thoroughly:

This interface extends and thus inherits properties of the IButton.
This interface sets the type property to buttonTypePositive.
This interface adds new optional field handleEnterKey.

So, we have created the first discriminated interface.

Next, let's add a discriminated interface for the negative button as follows:

/** negative button interface */
interface IButtonNegative extends IButton {
  type: typeof buttonTypeNegative;
  handleEscapeKey?: boolean;
}

Its declaration looks similar to the declaration of the IButtonPositive interface with two major differences:

This interface sets the type property to buttonTypeNegative.
This interface adds new optional field handleEscapeKey.

To catch the difference by hands, let's create a union type that will make the discrimination work:

/** test union button type */
type ButtonUnion = IButtonPositive | IButtonNegative;

Now let's try to define a positive button. Take a look at the screenshot:

TypeScript allows us to define the handleEnterKey field.

But if we will change the value to "negative":

TypeScript will allow defining the handleEscapeKey field!

Moreover, if we will try to set a not appropriate field we will get an error:

Conclusion: the discriminative types allow having a single flexible interface with the exact set of properties selected by the value of a field.

Intermediate interfaces

Interfaces can be extended. But what if at some level you have to derive several interfaces that have a lot in common?

In this case, we can leverage an intermediate interface.

Let's take a look at the example below:

interface IElement<T> {
  type: string;
  value: T;
}

interface IInput<T> extends IElement<T> {
  placeholder?: string;
  tooltip?: string;
}

interface IStringInput extends IInput<string> {
  type: "string";
}

interface INumberInput extends IInput<number> {
  type: "number";
  min?: number;
  max?: number;
  step?: number;
}

In the above example, IElement is a base interface that declares a generic value and property type to build discriminant interfaces.

Next, we declare the IInput, which acts as an intermediate interface. This interface adds a set of optional fields: placeholder and tooltip.

Lastly, we use the IInput to build two data type-specific interfaces: INumberInput and IStringInput.

Now, let's use that knowledge to finish building interfaces for the button.

Firstly, the intermediate interface:

/** extender interface for the neutral and custom buttons */
interface IButtonCustomized extends IButton {
  title: string;
  action: () => void;
  handleKey?: string;
}

The IButtonCustomized extends IButton interface and adds a common optional property: handleKey.

The important moment here is that this interface makes fields title and action mandatory.

Next, let's define the remaining interfaces:

/** neutral button interface */
interface IButtonNeutral extends IButtonCustomized {
  type: typeof buttonTypeNeutral;
}

/** custom button interface */
interface IButtonCustom extends IButtonCustomized {
  type: typeof buttonTypeCustom;
  style: ButtonStyle;
}

Working types

To start using everything that we build let's define a union type:

/** union button type */
type ButtonUnion =
  | ButtonTypeMain
  | IButtonPositive
  | IButtonNegative
  | IButtonNeutral
  | IButtonCustom;

And then export the type that will be used by end-users:

/** button type */
export type Button = GenericValueOrArray<ButtonUnion>;

Another side note: don't export intermediate and helping types/interfaces because they will confuse the users.

Example

Take a look at the example below:

import { Button } from "./types";

// defining the buttons
const buttons: Button = [
  "positive",
  { type: "negative" },
  {
    type: "neutral",
    title: "I won't do anything!",
    action: () => console.log("neutral hit")
  },
  {
    type: "custom",
    title: "Hit me!",
    action: () => console.log("custom hit"),
    style: "custom"
  }
];

Feel free to use the embedded playground at the bottom of the article to see the results.

From the above declaration, you can figure out several things:

Buttons list can be declared as a string, an object, or an array of strings/objects.
Predefined button types positive and negative can be declared as a string (later on, the parser will add default values if something is missing).
The value of the type property modifies the list of available fields.
TypeScript will throw an error if the user will try to define a field that is not defined in the respective interface.

Isn't that lovely?

Here goes a simplified example of the parser:

import { Button } from "./types";

/**
 * create the button
 * @param type button type
 * @param className button style
 * @param caption button title
 * @param action button action
 */
function create(
  type: string,
  className?: string,
  caption?: string,
  action?: ButtonAction
): HTMLButtonElement {
  const button = document.createElement("button");

  // implement your logic here

  return button;
}

/**
 * parse buttons list and create elements
 * @param buttons buttons list
 */
export function parse(buttons: Button): HTMLButtonElement[] {
  const result: HTMLButtonElement[] = [];
  if (typeof buttons === "string") {
    result.push(create(buttons));
  } else if (buttons instanceof Array) {
    buttons.forEach(button => {
      if (typeof button === "string") {
        result.push(create(button));
      }
      if (typeof button === "object" && button.type) {
        result.push(
          create(button.type, button.style, button.title, button.action)
        );
      }
    });
  } else if (typeof buttons === "object" && buttons.type) {
    result.push(
      create(buttons.type, buttons.style, buttons.title, buttons.action)
    );
  }
  return result;
}

Please, refer to the embedded code sandbox at the bottom of the post for a more solid example.

The parse function checks the type of the passed data:

If this is a string, then we try to create a button with default settings.
Otherwise, we iterate the array of strings/objects.
Lastly, we received an object that has a type field.

All the rest data will be skipped to avoid potential errors.

If data fits any conditions listed above, then we try to create a button and push it into the resulting array.

Code sandbox

Conclusion

TypeScript extends your abilities to define data structure, as well as to manipulate them.

Effectively combining the union types with sets of interfaces, we can forge the discriminated types that will add one more level of flexibility to your projects.

Moreover, this will also improve the user experience of other fellow developers who will benefit via time-saving and productivity-boosting.

The interactive gear-shaped object made with CSS and JavaScript.

Yuriy Markov — Thu, 09 Jan 2020 20:23:15 +0000

A gear or cogwheel is a rotating machine part having cut teeth or, in the case of a cogwheel, inserted teeth (called cogs), which mesh with another toothed part to transmit torque.

In this article, I will show how to build an interactive gear-shaped object.

To catch the idea, let's consider the gear as a circularly placed set of teeth.

Each tooth has its characteristics, such as shape and height.

Having the above data in mind, let's build such an object.

HTML

The static part of the layout is simple. We will only define the container which we will set up and fill with objects.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Gear</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

The dynamic part will contain tooth:

<div
  class="tooth"
  style="height: 5vmin; width: 14.5vmin; transform: rotateZ(315deg) translateX(15vmin);"
></div>

And a cover of the central part:

<div class="cover"></div>

Part of teeth parameters is calculated by JavaScript, while the rest of the settings are defined by CSS.

CSS

First of all, we will define basic settings, to have an ability to adjust our object by altering data in a single place.

:root {
  --smokey: #f5f5f5;
  --darky: #262625;
  --thickness: 0.1vmin;
  --half: 50%;
  --border: var(--thickness) solid var(--smokey);
  --border-radius: var(--half);
}

Container

The container not only contains teeth but also acts as an outer fringe of the gear's main body.

#container {
  position: relative;
  display: flex;
  border: var(--border);
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius);
}

To form a circular shape of the container, we will set the border-radius to 50%. Also, we will apply the border rule.

Cover

The cover helps us to create a single gear outline. To get the idea, let's take a look at the layout layer by layer.

The first layer is a container with the border.

The next layer contains a set of teeth. The inner half of each tooth is placed inside the container. Thus, creating a single outline.

The last layer contains the cover element, which hides the inner part of the teeth.

So, by placing objects in corresponding layers, and by setting the correct background-color, we are creating a single outline via hiding unnecessary parts.

Since the gear is rebuilt anew after any of the parameters alterations, it is worth to mention that the cover element requires to be set of the proper z-index value.

Let's wrap it up:

#container .cover {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--darky);
  border-radius: var(--border-radius);
  z-index: 1;
}

It is assumed that gear must be mounted on a shaft.

So, next, we will add the landing hole.

To keep the layout simple let's use a pseudo-element before of the cover element:

#container .cover::before {
  width: var(--half);
  height: var(--half);
  border-radius: var(--border-radius);
  content: "";
  border: var(--border);
}

To center our landing hole we use the flex properties of the cover element.

Tooth

Last but not least element of our shape is a tooth.

While most of the set up is happening in the JavaScript part, there still are some CSS rules.

First of all, the tooth element has an absolute position. Secondly, we leverage the box-sizing CSS rule to not to break the layout.

#container .tooth {
  position: absolute;
  box-sizing: border-box;
}

Just for fun, I've added three types of shapes of teeth: square, circle, and triangle.

Each type of shape is built via the before pseudo-element.

Square

This is the default type, so it doesn't have a separate class name.

This is a bordered square with an absolute position:

#container .tooth::before {
  position: absolute;
  width: 100%;
  height: 100%;
  border: var(--border);
  content: "";
  background: var(--darky);
}

Circle

In the case of the circle, we will apply a border-radius trick:

#container .tooth.circle::before {
  border-radius: var(--border-radius);
}

Triangle

To turn the square into the triangle let's just rotate it 45 degrees:

#container .tooth.triangle::before {
  transform: rotateZ(45deg);
}

JavaScript

The core variables are stored globally. They are defining all of the parameters of our object: DOM reference to the container, the radius of the gear, number of teeth, height and shape of a tooth, outline thickness, and the angle of the gear rotation.

The API consists of the set of functions. Some of them are very basic and aimed to handle user input: setTeeth, setHeight, setShape, and setAngle. Here is an example of such function:

/**
 * set modifier for tooth height
 * @param {number} value tooth height modifier
 */
function setHeight(value) {
  height = value;
  update();
}

It is worth to mention the setThickness function because it alters the value of the CSS variable --thickness:

/**
 * set thickness
 * @param {number} value thickness value
 */
function setThickness(value) {
  document.documentElement.style.setProperty(
    "--thickness",
    `${value / 10}vmin`
  );
}

The heavy-duty function that builds the gear has name update.

We will break it into steps to understand what happens.

Before actions, we will calculate the base settings.

Firstly, we need to know the dimensions of the container. Next, we will find out the values of the teeth' basic parameters.

// calculate the container dimensions
const size = `${radius * 3}vmin`;
// calculate the angle between teeth
const step = 360 / teeth;
// calculate the base dimension of the tooth
const side = (2 * Math.PI * radius) / (teeth * (Math.PI / 2));
// calculate the tooth displacement
const displacement = radius * 1.5;
// calculate the height multiplier
const multiplier = (height - 1) / 10;

Next, let's set up the container:

// setup container
container.style.width = size;
container.style.height = size;
container.style.margin = `${radius * 2}vmin`;
container.style.transform = `rotate(${angle}deg)`;
container.innerHTML = null;

Now we will draw teeth:

create the element.
apply proper class names.
set the width and height following the current shape.
rotate the tooth and place it on the rim.
add tooth to the container.

// create tooth
const tooth = document.createElement("div");
tooth.className = `tooth ${shape}`;
// set size for the triangle-shaped tooth
if (shape === "triangle") {
  const length = `${(side / 2) * multiplier}vmin`;
  tooth.style.height = length;
  tooth.style.width = length;
} else {
  // set size for the square and circle-shaped teeth
  tooth.style.height = `${side}vmin`;
  tooth.style.width = `${side * multiplier}vmin`;
}
// place the tooth
tooth.style.transform = `rotateZ(${i *
  step}deg) translateX(${displacement}vmin)`;
// append tooth to the container
container.appendChild(tooth);

When we set up the width and height of a tooth, we rely on the side constant. The point here is to draw teeth in strict proportion to their count to avoid overlay. So, the more teeth you have, the smaller they are. Another point is that this calculation is also lead to the proportional reduction of the tooth height to keep it's looking more balanced.

Finally, add the cover element:

// restore cover
const cover = document.createElement("div");
cover.className = "cover";
container.appendChild(cover);

Let's wrap it up:

/**
 * update the gear
 */
function update() {
  if (container) {
    // calculate the container dimensions
    const size = `${radius * 3}vmin`;
    // calculate the angle between teeth
    const step = 360 / teeth;
    // calculate the base dimension of the tooth
    const side = (2 * Math.PI * radius) / (teeth * (Math.PI / 2));
    // calculate the tooth displacement
    const displacement = radius * 1.5;
    // calculate the height multiplier
    const multiplier = (height - 1) / 10;
    // setup container
    container.style.width = size;
    container.style.height = size;
    container.style.margin = `${radius * 2}vmin`;
    container.style.transform = `rotate(${angle}deg)`;
    container.innerHTML = null;
    // draw teeth
    for (var i = 0; i < teeth; i++) {
      // create tooth
      const tooth = document.createElement("div");
      tooth.className = `tooth ${shape}`;
      // set size for the triangle-shaped tooth
      if (shape === "triangle") {
        const length = `${(side / 2) * multiplier}vmin`;
        tooth.style.height = length;
        tooth.style.width = length;
      } else {
        // set size for the square and circle-shaped teeth
        tooth.style.height = `${side}vmin`;
        tooth.style.width = `${side * multiplier}vmin`;
      }
      // place the tooth
      tooth.style.transform = `rotateZ(${i *
        step}deg) translateX(${displacement}vmin)`;
      // append tooth to the container
      container.appendChild(tooth);
    }
    // restore cover
    const cover = document.createElement("div");
    cover.className = "cover";
    container.appendChild(cover);
  }
}

CodePen

Conclusion

Now you know how to build a gear-shaped object.

Though I did not cover the controls in this article, you can use an API to dynamically modify the number of teeth, the rotation angle of the object, set the height of the tooth, choose from three shapes of the tooth, and set up the thickness of the outline.

DEV Community: Yuriy Markov

Inferring types with TypeScript

Base component

Component interface

Component data type

Factory function

Example

Playground

Bottom line

Keep moving forward!

Start your blog in 10 minutes!

Can you improve your creativity?

Definition

Experiment

Recipe

Be persistent

Don't set goals, create habits

Always learn

Don't be afraid of failures

Outcomes

How many hours a day do you think you work?

Is it practical to use blockchain to track resource distribution? #discussion

Why we should be a better version of ourselves

Why the distributed company is a viable option?

The lifestyle of the digital nomad

The 2020s is the decade of remote transformation

Having fun with TypeScript!

Table Of Contents

Conventions

Button types

Discriminated unions

Intermediate interfaces

Working types

Example

Code sandbox

Conclusion

The interactive gear-shaped object made with CSS and JavaScript.

HTML

CSS

Container

Cover

Tooth

Square

Circle

Triangle

JavaScript

CodePen

Conclusion