DEV Community: Behnam Azimi

7 Newborn Open Source Repositories

Behnam Azimi — Sat, 16 Jul 2022 20:07:11 +0000

We all knew that what we have now as popular open-source repositories or well-known tools that we use every day started with an idea and developed for personal usage and then published as a result of high satisfaction of owner/developer.

In this post, I’m gonna share 7 open-source repositories/tools of mine that I have developed to serve some personal intentions first but published later.

Definitely, without your likes and shares, and contributions, these repositories will not be seen and will perhaps disappear over time. so please react to this post and share your comments with me.

1. Practical Front-End Projects with Pure Javascript, CSS, and HTML

The repository contains some front-end projects developed by pure Javascript, HTML, and CSS without any third-party libraries and packages.

Some of the projects you can find in the repo:

Web Chat App (WhatsApp clone)
Custom Video Player
Note Manager App
Othello Board Game
Quiz App
Escape Loading Animation (Complicated CSS animation)

2. Merriam-Webster's Dictionary Browser Extension

With this extension, you would be able to look up and get the English-to-English definition of any word or phrase in the content of a website, simply and effortlessly. Or you can use its simple search box to type and get the definition right away, without losing your focus on the content!

I used Merriam-Webster's free services in this extension.

You can install it on all Chromium base browsers, like Opera, Edge, Brave, Torch, Vivaldi. (How to?)

3. YouTube Subtitle Delay Browser Extension

Mini tool to delay subtitles on the YouTube official website which is handy when you are learning a new language.

You can also install it on all Chromium base browsers, like Opera, Edge, Brave, Torch, Vivaldi.

Additionally, there is another extension with the same functionality to delay Netflix subtitles.

4. Twitter Following Track Bot

This one is a twitter bot developed with NodeJs. Using this bot you can track if any twitter account started following others. It's easy to use and you only need a Twitter developer account to start monitoring.

5. Keyboard Shortcuts for Websites Browser Extension

This one is also a browser extension, using this extension you can have custom keyboard shortcuts for certain actions of websites you use frequently. It's one of my favorite repositories because I use it every day :)

You can also install it on all Chromium base browsers, like Opera, Edge, Brave, Torch, Vivaldi.

6. Curly HTML Elements

This one is a mini tool to arranging HTML elements along ellipse subset shapes. Using curly-html-elements you can layout child items of an element along a circle, semicircle, ellipse or any subset shape of it without encounter math formula and complex concepts.

7. JS Service Wrapper

This one is a promise based collective service wrapper with queue support which totally works in browser and/or Node.js environment.

Sometimes you need to pass your service functions throughout a shared pipe and do some manipulation or parsing with them. Or you might want to add all of your services to a queue that supports parallel and pending tasks. It's the case this library swoops in.

I also have a fun game, The Boom Box. You can reach that out and spend some fun time while blasting some boxes. Its code is also available on Github

I’d appreciate any kind of contribution to these projects and it would be my honor.

Source bhnmzm.com

Arranging HTML items in particular shape — ellipsis-html

Behnam Azimi — Sat, 22 Aug 2020 11:19:14 +0000

As a front-end developer sometimes you need to layout HTML elements is a particular layout by each other. The difficulty of this depends on the imagination of your UI designer but in general, the layouting items in HTML without knowing the concepts and tricks is plenty challenging.

You can read the updated version on bhnmzm.com

Figure1: example arch arranging made with ellipsis-html

The most common unusual layout that I dealt with in my projects and I have seen it in many UI designs is arranging items on an arch. For example, laying in the border of a semicircle or a full circle, or arranging in the border of a semi-ellipse. To make these you need to encounter math formula and complex concepts.

The good news is that I developed a mini tool exactly for this purpose, I mean for the arranging HTML elements along ellipse subset shapes. I named it ellipsis-html.

Using ellipsis-html you can layout child items of an element along a circle, semicircle, ellipse or any subset shape of it. You can see samples made with ellipsis-html in the below figure.

Figure2: ellipsis-html sample layouts

It’s only 2KB and easy to use. I explained what you need in the GitHub readme, so you could read the readme too.

Check demo here 😎

You can arrange your elements in any subset shape of an ellipse with changing the options and put it in any position of your parent element.

Here is the code was written to make the result that you saw in Figure 1:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ellipsis-html Sample with avatars</title>

    <!-- adding library -->
    <script src="http://unpkg.com/ellipsis-html/lib/ellipsis-html.min.js"></script>

    <style>
      body {
        background-color: #efefef;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        margin-top: 5rem;
      }
      .title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }
      .title h1 {
        margin-bottom: 0;
      }
      .title p {
        font-size: 16px;
        opacity: 0.7;
        margin-top: 0.5rem;
      }
      #avatars {
        width: 80%;
        margin: 0 auto;
        height: 80px;
        max-width: 700px;
      }
      #avatars img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 1px 1px 7px 4px rgb(0 0 0 / 0.16);
      }
    </style>
  </head>
  <body>
    <div class="title">
      <h1>My Friends</h1>
      <p>with ellipsis-html</p>
    </div>
    <div id="avatars">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" />
      <img src="https://randomuser.me/api/portraits/men/6.jpg" />
      <img src="https://randomuser.me/api/portraits/women/12.jpg" />
      <img src="https://randomuser.me/api/portraits/women/5.jpg" />
      <img src="https://randomuser.me/api/portraits/women/60.jpg" />
      <img src="https://randomuser.me/api/portraits/men/11.jpg" />
      <img src="https://randomuser.me/api/portraits/women/50.jpg" />
    </div>

    <script>
      const elm = document.getElementById("avatars");
      const options = {
        type: "equal",
        size: 0.5,
        reflection: 1.5,
        rotateY: 157,
        reverse: true,
        shiftX: 0,
        shiftY: 0
      };
      const htmlArc = new EllipsisHTML(elm, options);
    </script>
  </body>
</html>

If you encounter any problem, bring it up as an issue or contribute to the project and fix it yourself.

Do not forget to star the repo. Like other developers, star motivates me too. 🙃😉

Escape Loading Animation - Feeling Good Because of CSS

Behnam Azimi — Sun, 03 May 2020 09:45:11 +0000

Hi there, I hope you all are in a good mood.
Today when I was surfing in Dribbble, I faced a cool loading animation, a fantastic loop animation. it drew my attention, and I could not ignore it. as far as I remember I was just gazing at it's GIF for 10-12 minutes and that gave me good feelings.

The design belongs to Vitaly Silkin, and he shared this on his Dribble profile about 2 years ago.

You can read the main version on bhnmzm.com

Anyway, I decided to code it. It took almost 3 hours and 30 minutes but was genuinely enjoyable and be worth it. I was code with pure CSS then added it to the practical front-end projects collection as a new cool member.

You can see the demo here. Also, you can customize the source on Codepen too.

When it's done, I wrote an email to Mr. Silkin and I thanked him because of his beautiful design. Also, I wrote to him that I hope he doesn't be mad at me for doing it without permission. and I closed the email with this: Your potential friend, Behnam ;)

Sometimes a simple design, a short sentence, or a short story can make us happy so much more than we expected. especially in these difficult days and in the middle of that much works.

Comment your feelings and make me happy more ;)

HTML Canvas Wallpaper; Only A Love Song Is Missing

Behnam Azimi — Wed, 08 Apr 2020 21:26:41 +0000

In the new project of the practical front-end projects series, I went over to the HTML Canvas and I tried to make a beautiful animated wallpaper. The result was satisfying for me and when I staring at it, I hear a slow love song in the background. xD. You can see the demo here.

Actually the project is very simple and I'm sure reviewing its code will be so useful. I tried my best to make a fully documented and easy to read code. But you can also ask me detailed questions or open issues on Github.

This is a practical canvas tutorial, an animated wallpaper with circles that moves on it. The main goal was focusing on the canvas methods, but next to it, you can find some useful coding strategies and mathematical operations in code.

I hope it will be useful for you. I will be looking forward to your comments.

major version on bhnmzm.com

Collection of Simple Web Projects

Behnam Azimi — Tue, 24 Mar 2020 07:49:00 +0000

A few months ago, I decided to work on a collection of simple and practical projects to educate in my courses, and share it publicly. Then I started and the result came up as a Github repo, named Simple Web Projects.

As the name implies, a collection of simple web projects developed for enthusiasts and beginners. The main purpose is education and all the codes are open for everyone that needs it.

You can read updated version on bhnmzm.com

Notes:

Webpack, gulp or another bundler was not used.
Third-party libraries were not used.
Codes only supported by modern browsers.
Projects just are for educational purposes.

Projects

There are 6 developed projects that you can review now.

Web Chat App
Custom Video Player
Lovely Movies
Note App
Othello Board Game
Quiz App
Simple Range Slider

Web Chat App (View Online)

This project is a real messaging app that developed with pure javascript without third-party libs. We focused on the Web Components in this project and give it a real component structure. All chats, messages, data are fake and generated with a data-factory. I hope It would be useful.

Special topics covered:

Web Components
Object-Oriented Programming
Event handling
DOM controlling
CSS flex

Custom Video Player (View Online)

In this project, I customized the video controls and designed them manually. Focus on handling the video node and how to implement custom behavior for it.

Special topics covered:

Video node controls
Fullscreen handling
CSS variables

Lovely Movies (View Online)

A simple movie search website

Special topics covered:

Promises and Fetch data with API
Control DOM behaviors and events
Usage of position: static; in CSS
Using CSS variables

Note App (View Online)

A practical note web app to handle categorized notes. There are notes that can have a category for. you can search in notes and edit or remove those.

Special topics covered:

Object-Oriented Programming (OOP)
Creating DOM elements
Layouting with CSS grid system
localStorage usage

Othello Board Game (View Online)

Famous strategy game Othello, known as Reversi, implemented in pure Javascript.

Special topics covered:

Object-Oriented Programming (OOP)
Othello game strategy
Creating DOM elements
Event handling
Error handling

Quiz App (View Online)

Simulating a quiz in a web app.

Special topics covered:

Object-Oriented Programming (OOP)
Creating and handling DOM elements
CSS animation

Simple Range Slider (View Online)

A simple implementation of a small range slider with pure Javascript.

Special topics covered:

Prototypal Object-Oriented Programming
DOM events handling
CSS variables

Running locally

It's so simple. Clone or download the repository, open project directory and click index.html. As I mentioned above, there is not any bundler and all scripts have been injected in the HTML.

New projects are being prepared

I try to make this repo very useful. So, I really looking forward to your help and your criticism.