DEV Community: Aemie Jariwala

Illuminating Unnoticed Efficiency Pitfalls with AtomicLongMap

Aemie Jariwala — Sat, 13 Apr 2024 12:52:22 +0000

Benchmark testing for AtomicLongMap

Why am I doing this benchmark test?

It's important to verify if a particular change for a package, in this case Google Guava performs in an optimized manner within a multi-threaded environment and doesn't trigger a thread contention state. Well, I came across one such change in the implementation for AtomicLongMap which suffers from thread contention with the new releases.

Which method within AtomicLongMap is suffering from thread contention?

The underlying method - addAndGet(K key, int delta)

When was a new implementation introduced for `addAndGet` method in Google Guava?

Google Guava - v21.0

Why was this change introduced?

According to the release notes:

AtomicLongMap: added a number of methods such as accumulateAndGet(K, LongBinaryOperator) that take advantage of new Java functional types.

How did I notice it?

I bumped my java package to use GoogleGuava - v32.0.0 from GoogleGuava - v20.0 and my package blew up on load-testing. It took me a bit of digging through profiling and monitoring and was able to pinpoint that the trigger for the issue is none other than AtomicLongMap! This sparked the curiousity into understanding why did a new release start suffering from thread contention and that's the reason for the benchmark testing.

Enough story time, let's dig into the implementation difference

via Giphy

Google Guava 20.0 Implementation Flow [Psuedo]

Link to code: AtomicLongMap.java

addAndGet(K key, int delta) ---> atomic = map.putIfAbsent(key, delta) 
---> if  atomic.get() == 0 : 
       map.replace(atomic.get(), atomic, delta) 
       return delta
---> else: 
        val = atomic.get()
        atomic.compareAndSet(val, val + delta)
        return val + delta

Google Guava 32.0.0 Implementation Flow [Psuedo]

Note: Upon back-tracking, the below implementation flow was introduced in Google Guava v21.0 so this degradation is existing since v21.0 : https://github.com/google/guava/wiki/Release21 however the benchmark testing is carried out using Google Guava v32.0.0

Link to code: AtomicLongMap.java

addAndGet(K key, int delta) ---> accumulateAndGet(key, delta, Long::sum as aFunc) ---> 
updateAndGet(key, o -> aFunc.applyAsLong(o, delta) as uFunc) --->
map.compute(key, (k, x) -> uFunc.applyAsLong(x == null ? 0 : x.longValue()))

What's the possible difference in their behavior within a multi-threaded environment?

It is use of the specific underlying method of ConcurrentMap that is being utilised and the impact in their performance is majorly driven by how well it behaves in highly contended environment.

In case of Google Guava 20.0, putIfAbsent is utilised and when using putIfAbsent, the operation succeeds only if the key is not already present in the map. If the key is present, the operation does not perform any update and returns the existing value associated with the key. This behavior helps reduce contention because it avoids the need for complex coordination between threads when updating values. This is followed by using compareAndSet which is another atomic operation which may offer better performance in a multi-threaded environment compared to the compute method, especially when you're dealing with atomic updates on a single shared variable. This is because compareAndSet operates directly on a single atomic variable and doesn't involve the overhead of interacting with a concurrent data structure like a map.

In case of Google Guava 32.0.0, compute method is utilized and using compute method
with an accumulator function involves a more complex operation. It requires reading the current value associated with the key, applying the accumulatorfunction to compute a new value based on the old value (if any) and the input,
and then updating the map with the new value. In highly contended scenarios, multiple threads attempting to perform such operations concurrently may lead to increased contention and synchronization overhead, potentially affecting performance.

LET'S GET INTO TESTING !!

via Giphy

Note: Setup of the testing is present in the End of the blog

Case 1 : NumThreads = 2

Who won the battle? Google Guava v20.0
What's the difference in performance? 78.6%

Version = 20.0

Trial	Time to Execute (s)
1	14
2	14
3	14
4	14
5	14
Average	14

Version = 32.0.0

Trial	Time to Execute (s)
1	25
2	25
3	25
4	25
5	25
Average	25

Case 2 : NumThreads = 10

Who won the battle? Google Guava v20.0
What's the difference in performance? 73.2%

Version = 20.0

Trial	Time to Execute (s)
1	73
2	73
3	73
4	74
5	73
Average	73.2

Version = 32.0.0

Trial	Time to Execute (s)
1	126
2	126
3	127
4	127
5	128
Average	126.8

Case 3 : NumThreads = 32

Who won the battle? Google Guava v20.0
What's the difference in performance? 72.5%

Version = 20.0

Trial	Time to Execute (s)
1	236
2	235
3	234
4	234
5	235
Average	234.8

Version = 32.0.0

Trial	Time to Execute (s)
1	403
2	405
3	401
4	410
5	406
Average	405

Case 4 : NumThreads = 64

Who won the battle? Google Guava v20.0
What's the difference in performance? 70.7%

Version = 20.0

Trial	Time to Execute (s)
1	474
2	474
3	473
4	473
5	472
Average	473.2

Version = 32.0.0

Trial	Time to Execute (s)
1	804
2	811
3	809
4	809
5	805
Average	807.6

Conclusion

via Giphy

Google Guava v20.0 has a simplified implementation which performs 70% better than the later releases for AtomicLongMap.java. Will love to hear other people's opinion on the same and why do you think the new implementation of AtomicLongMap is suffering from thread contention!

Setup of the test

It is a simple benchmark test to test the performance of the 2 GoogleGuava releases addAndGet() method defined within the AtomicLongMap class in a multi-threaded environment

Main.java

import java.time.Clock;
import main.java.com.benchmark.Benchmark;

import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;

public class Main {
    private static Clock clock = Clock.systemDefaultZone();
    private static Benchmark benchmark = new Benchmark();
    private static final long NUM_CALLS = 1000000000;
    private static final int NUM_THREADS = 1;

    public static void main(String[] args) {
        long current = clock.millis();
        System.out.println("Current time : " + current);

        ExecutorService executor = Executors.newFixedThreadPool(NUM_THREADS);
        IncrementTask task = new IncrementTask(benchmark, NUM_CALLS);

        for (int threadPool = 0; threadPool < NUM_THREADS * 2; ++threadPool) {
            executor.submit(task);
        }

        executor.shutdown();

        try {
            executor.awaitTermination(Long.MAX_VALUE, TimeUnit.MILLISECONDS);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        long completed = clock.millis();
        long difference = completed - current;
        System.out.println("Completed time: " + completed);
        System.out.println("Time difference for Google Guava: " + difference/1000 + " seconds.");
    }
}

class IncrementTask implements Runnable {

    private Benchmark benchmark;
    private long numCalls;

    public IncrementTask(Benchmark benchmark, long numCalls) {
        this.benchmark = benchmark;
        this.numCalls = numCalls;
    }

    @Override
    public void run() {
        long threadId = Thread.currentThread().getId();
        String threadName = Thread.currentThread().getName();
        System.out.println("Task executed by Thread " + threadId + " (" + threadName + ")");

        synchronized (benchmark) {
            for (int trial = 0; trial < numCalls ; ++trial) {
                benchmark.increment(1);
            }
        }
    }
}

Benchmark.java

public class Benchmark {

    private final AtomicLongMap<String> counters =  AtomicLongMap.create();
    private final String KEY = "Key";

    public void increment(int delta) {
        counters.addAndGet(KEY, delta);
    }
}

The essential pillar stones to become a software engineer

Aemie Jariwala — Tue, 15 Feb 2022 08:05:42 +0000

A software engineer is curious to come up with an efficient and scalable solution depending upon the problem. Let's say you're a software engineer who has basic knowledge and hence can come up with a simple solution. That is cool but what about a scalable solution! With more clients, you need to scale up. To come up with that, software engineers should familiarize themselves with the pillar stones of software engineering.

Don't get scared by hearing the term essential pillar stones, they just help in simplifying the concepts that would once seem complex. As an additional bonus, these pillars will help you in your interviews for sure. Without any further chit-chat, we will dig into the pillars!

Let's disclose the name of the pillars now! The pillars are Operating Systems, Network and Web Security, Database Engineering, System Design, and last being data structure and algorithms. I will be only focusing on the first 4 and at the end of the blog, I will provide a small piece of information on how I try to improve my DSA skills. Operation System and Network and Web Security create the basic foundation and understanding the concepts for those two pillars will further help in understanding the concepts of the other 2 pillars.

1. Operation System

We all have heard of windows, Linux, Apple macOS. They're the existing operating system that manages hardware and software resources. Did you ever wonder how the multiple huge processes fit into the main memory and how the CPU schedules the various tasks? Understanding CPU scheduling tasks, pagination, and segmentation, the concepts of virtual memory will blow your mind! It will provide you with an idea of how your processes and various applications function so efficiently on your devices.

In my opinion, you can certainly dig real deep as you want but as a software engineer, a few concepts are essential to know and thus I have curated a playlist with all the OS concepts for a software engineer - https://www.youtube.com/playlist?list=PLOU7PAjLVz8omogw4JDw5eeQEVfHOmHTu

The playlist covers the following topics -
➡️ Process v/s Threads
➡️ Multi-processing and Multi-threading
➡️ Virtual Memory
➡️ Paging
➡️ Translation Lookaside Buffer
➡️ Deadlocks, Semaphores & Mutex
➡️ CPU Scheduling (Preemptive & Non-preemptive)

2. Network and Web Security

This is one of the most interesting topics for me. I am not a network engineer of course hence as a software engineer I try to understand the concepts at a good surface-level which can further help me with understanding complex system design theory.

Now under this section, I believe it is extremely essential for understanding TCP and UDP protocols, the classic OSI model, TLS, DNS, and endless protocols that help in understanding how the connection of the client to server happens even (I am fangirling but it's all so exciting). Thus, within my playlist there also includes a video on what happens when you enter google.com in the browser (super interesting) - https://youtube.com/playlist?list=PLOU7PAjLVz8qfmiqTYxHED-kCXW7eYtVx

The playlist covers the following topics -
➡️ OSI Model (The famous classic)
➡️ TCP, TCP 3-way handshake, TCP slow start, UDP
➡️ Hypertext Transfer Protocol (HTTP)
➡️ Transfer Layer Security (TLS)
➡️ Server Name Indication (relative to TLS)
➡️ Network Address Translation (NAT)
➡️ Address Resolution Protocol (ARP)
➡️ Virtual Private Network (VPN)

3. Database Engineering

This is my favorite pillar (not going to deny it). I have always found backend engineering interesting but at the start, it was all about using a single database (SQL or NoSQL) based on my interest and not taking scaling into account. SUCH A WRONG APPROACH

When you want to learn database engineering which is so useful for backend engineering, you need to be able to understand the ACID transactions. There is also a clear difference between SQL and NoSQL and it is very essential to understand it to choose based on a project. Apart from this, scaling a database is advanced and there are so many methods including indexing, partitioning, and sharding (too important concepts). Not scaring you off but with the playlist, I have curated, I am certain the concepts will become easy for you - https://youtube.com/playlist?list=PLOU7PAjLVz8qwdYWCd6qi4IeUTypQKqyZ

The playlist covers the following topics -
➡️ ACID Properties
➡️ Conflict and view serializability
➡️ Database Indexing
➡️ BTree, B+Tree, Log-Structured Merge (LSM) Tree
➡️ Bloom Filters
➡️ Database Replication
➡️ Storing tables on disk
➡️ Long Polling
➡️ Database Partition
➡️ Column v/s Row Oriented Database
➡️ SQL v/s NoSQL, SQL Joins, SQL Injection Attack
➡️ Concurrency Control, MVCC
➡️ Keys in DBMS, Normalization
➡️ Database Sharding
➡️ Connection polling
➡️ Web Sockets
➡️ Redis

4. System Design

We've come down to the last pillar! System design comes in plenty of interviews along with OS but the concepts of system design are so extremely important for any job you enter 'cause you need to build a scalable and either a highly consistent or highly available product.

You might have heard of the term load balancing and don't know what exactly it is and so many algorithms attached to it. Within the playlist, it sequentially covers proxy, reverse proxy, load balancing, rate limiting and so many fancy terms you will hear definitely when building a scalable product. Thus, my curated list will help you certainly and it also involves a few system design interview videos which I found very helpful - https://youtube.com/playlist?list=PLOU7PAjLVz8rFA-Atn-mEQ2IGaMWVitu7

The playlist covers the following topics -
➡️ Proxy v/s Reverse Proxy
➡️ Sidecar Proxy, HTTP Proxy, service mesh proxy
➡️ Load Balancing, Consistent Hashing
➡️ Layer 4 v/s layer 7 load balancing
➡️ Rate Limiting
➡️ Fail-over and high-availability
➡️ Active-active and active-passive cluster
➡️ Pub-Sub, Two generals' problem, Message Queue
➡️ CAP Theorem
➡️ Distributed Caching
➡️ Content Delivery Networks (CDN)
➡️ Cross-Origin Resource Sharing (CORS)
➡️ Distributed locks, distributed consensus, PAXOS algorithm
➡️ Protocol Buffers
➡️ Remote Procedure Call (RPC)

This covers the 4 major pillars of software engineering and the playlist will be helpful as it will reduce your search time and you can focus on broadening your knowledge (a bit easy peasy). Also, this playlist will continue to update as I find more concepts to learn so I will just keep adding and updating (so save the playlist!). If you think I have missed out on a topic, please mention it within the comments as well.

Coming to the last pillar i.e Data Structures and algorithms, for this well, I focus on data types such as Linked List, Hash Map, Trie, BST, and sorting algorithms. Every week you could practice easy to medium Leetcode questions and when you feel confident try out a hard one. Also, there is no shame in checking out the solution or the hints after you have given 15-20 minutes of your time on solving the problem. Learn and grow, that's what the motto of any software engineer should be. Adios 👋🏼

Top 10 Chrome Extensions I can't live without

Aemie Jariwala — Thu, 01 Apr 2021 14:03:27 +0000

Chrome extensions are simple extension tools that help with coordinating one's work. I have been a growing developer and for me, a productive chrome extension that helps me improvise my understanding of website and API, enhancing productivity is really important to me.

In this blog, I will be including the top 10 chrome extensions that I make use of as a developer frequently and I believe every developer must make use of those as well. I will also provide you the reason why you should continue reading:

A detailed understanding of how and when the extension can be made use of
Personal rating for each along with the reasoning

In short, a brief review of each of my top 10 extensions.

1. Reader Mode

Reader Mode is an extension that helps in removing any redundant/unnecessary sections from the webpage such as overflowing advertisements. Reader Mode gives in layman terms, a kindle-reading-like experience. Besides, it provides various features and to list a few:

Custom Theme Styles
Removes any redundant section from the webpage such as advertisements - This is convenient as advertisements block parts of the webpage and you can't give 100% focus to reading. With this feature, you can give 100% of your focus.
Text to Speech - This is my personal favorite as when I am tired I would love to just have an audiobook-like feeling.
You can save the articles you've edited in the reader mode and go to the dashboard to view them later as well - Just like a personal library, easy to manage, and plenty easy to re-read your saved articles.

Where & when can I use Reader Mode?

I have a habit of reading plenty of blogs and articles for understanding different concepts. Let's take, for instance, geeks for geeks is a website overflowing with advertisements and I want a seamless reading experience without the navbar or the advertisements or any useless sections of the webpage.

In such cases, I have the reader mode extension and I just click on it and voila, I have a neat paper view that provides a seamless reading experience.

Original View

ReaderMode View

From the picture comparison, it makes it quite clear whether you want to read directly from the website or use the Reader Mode extension to do so!

Link For Extension - https://bit.ly/3u7wcDY
Personal Rating - 4/5

The only thing is most features are premium however even with the free features you can have an amazing experience. ✨

2. Talend API Tester

Talend Cloud API Tester allows you to interact with REST services. In simpler words, it provides functionality similar to postman however Talend API tester exists as a chrome extension tool on the web.

In my experience, it can work well on small-scale projects and is the best alternative for me over postman in a few scenarios. It was really easy for me to set up and start working with it. To list the few basic features of Talend API tester, it includes:

Create environments based on your project
Import a JSON file and get all the API endpoints in hand - I find this an amazing feature and also, you can edit and test as you want
Create API endpoints, include your team, and export the endpoints as a JSON file as well

From the figure, it does give a feel as that of the postman itself and helps with working with API endpoints through the web directly. The reason I would use Talend API over postman could be during scenarios when I want to make use of the web directly instead of opening separate applications.

Link - https://bit.ly/3diaTJ5
Personal Rating - 3.5/5

Even if it does provide flexibility and easy working with API endpoints through the web, it doesn't match up to the flexibility provided by the postman.

3. Redux DevTools

Redux is a JavaScript library for managing application state. One majorly uses it along with React JS or AngularJS. When you want to explore how the state is being managed, you don't want to continuously do console.log it gets frustrating. An alternate approach and a more desirable one is to see visually how the state changes on user interaction with the application.

This visualization is possible with the Redux DevTools extension. After this extension is installed in your browser, you add a one liner configuration when creating your store in your codebase. In case of ReactJS, you do the following:

const store = createStore(
   reducer, /* preloadedState, */
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

When you run your application either using yarn start or npm run start along with your default dev tools you will observe one for Redux as well. The features that this extension provides:

Inspector to track which state is changing from one value to another
The individual state's list is also provided where you can see the current state of each in the application
A diff section to showcase the difference in the state

Link - https://bit.ly/2Oc6qPS
Personal Rating - 4.5/5

4. ColorZilla

Colors are really important in a website as they need to be of the proper amount of contrast based on the rules defined and along with it, you need to choose a combination of colors that will act as a unique color palette for your website. ColorZilla is an amazing chrome extension that provides an amazing set of features, to list a few:

Picks the entire color palette from the current web page
Provides a color gradient generator and the code to include it directly on our website
Pick any color from the page - My favorite feature

The way I use ColorZilla mainly is the color picker feature. Sometimes, choosing a color palette is not enough for your website, it may/may not fit the contrast rule. Thus, I believe that the colors are related to the logo of the website, and in a logo lies a variety of colors. With ColorZilla, I can easily pick the color I want! It just doesn't stop there, of course, you can make use of ColorZilla in numerous useful ways including the method I use it for.

In the figure, I have just shown the proper for analyzing the colors of the webpage, one of its amazing features.

Link - https://bit.ly/39sjiIW
Personal Rating - 4.5/5

I can't provide it 5 for the only reason that I would like it to have the additional features:

It analyses the color palette of the webpage and generates a similar palette as well
Based on the color picked from the webpage, generate a palette combination for the same

5. CSS Peeper

A chrome extension tool that analyses the CSS of the complete webpage. It is an amazing chrome extension and the major reason is that when you're analyzing the webpage you need to go to dev tools and under elements, hover over a component, and then get its CSS property and assets all by YOURSELF!

This extension does the entire work for you. It provides the following:

All the font-family used in the webpage
The entire color palette of the webpage and the ability to copy each color separately
Each asset image is generated from the webpage - Love this feature as it is such one-click access to all the images of the webpage
Access property of the components in the website by hovering over the individual components

In the figure, you can see how the property of the selected component is given, one of the best features of CSS Peeper. Similarly, move to the webpage you want to directly inspect and click on the extension, you can then experience the amazing features.

Link - https://bit.ly/3wmzjdo
Personal Rating - 5/5

I simply find all the features highly useful for analyzing the CSS of the webpage. Just simply neat and amazing ✨

6. Web Developer Checklist

Checklists are very efficient in my opinion. For any important task, I make sure to create a checklist and keep track of all the tasks I am performing based on it. This applies to my daily life tasks but I also require a checklist when I create a website as a developer to keep my website score up. That's when this extension comes in handy!

When one creates the website, one checks the Audits in the dev tools provided to check the score for accessibility, SEO, and such and edit the website to improve it continuously.

The web developer checklist helps in majorly analyzing the violations of any best practices in terms of the web application. Few of the items it performs a check on includes:

SEO
Usability including friendly URLs and HTML Validation
Accessibility

The method I use is for a website I create, I run this extension against it and check for any specific errors or tasks I might have missed out on regarding the best practices. After I am done with the checklist, I run it once against my Audit to check the score. (it increases!)

From the figure, it's observable that despite creating a neat website, I missed out on a few aspects while creating the DSC, NIT Surat website. It's simple to make changes as per that and maintain a good audit score as well!

Link - https://bit.ly/3frpKUd
Personal Rating - 4/5

7. CheckMyLinks

Let's paint a scenario where you understand the importance of this extension. Let's say you are responsible for maintaining a highly documented website such as the camel website or the bootstrap website. In the case of the camel website, there exists several versions and based on it, documentation for each. It is important to check if there are any broken links on the webpage as older version docs wouldn't be highly maintained or checked. Thus, to validate all the links on your webpage, the extension comes into major use.

This feature can certainly be used for your website as well because it is always better to cross-check with the extension for any broken links! Let's list the features of this extension:

Checks all the links on the webpage for validity
For any warning, it provides the warning in the console
It checks thoroughly for any broken links on the webpage and provides the option to copy all the broken links altogether from the console
When it identifies a broken link on the webpage, it marks it red and along with it shows its respective status code

From the figure, it is observable that a link is invalid and the extension easily caught it. When you check your console in dev tools, it prints the invalid URL as well.

Link - https://bit.ly/39uRPGr
Personal Rating - 4/5

The one thing I dislike about this extension is that once, I have checked my webpage for the links and I close the extension, the highlighted links remain (I don't like it). Due to this, I need to refresh my page which is not an ideal option if I am way down the webpage.

8. Enhanced Github

I am just going to put it into the plate even if not related to the extension, I am an active Github user and I love GitHub. Github is an amazing platform however there are some features it doesn't provide and that's when the amazing GitHub-related extension makes me happy and satisfied with Github.

Let's layout the features provided by the extension on top of the Github platform:

Displays repo size - this is beneficial in my case, as I like to understand the amount of storage required by a repo beforehand itself
Displays the size of each file in a branch
Provides feature to either download a file or copy the entire file to clipboard - I just love this feature cause I come across a file in a repo let's say a competitive repo and I want a solution reference. With this extension, I can easily just copy the file to the clipboard with 1 click instead of clicking on raw and then copy-pasting (it's a drag for me, honestly)

To enable the extension as seen in the figure, you do the following:

Add the chrome extension to your browser & then click the extension
On clicking, you will be asked to give the access token
For providing the access token, you create the access token for the extension through this link and generate a new token for the same
Use this new token and give it to the extension

With this, you have the extension working on any of your repos! Voila ✨

Link - https://bit.ly/2QV5b8D
Personal Rating - 3.5/5

This is certainly a useful extension however I think it could be included with more amount of features. To include a few, according to my opinion:

Provide the starting date on which the first commit was made and the latest commit date to understand the period of the project
When I am looking through the repo list of a user, it should show the total size info along with the number of stars and forks

9. daily.dev

I am going to say it one more time, I love reading blogs and articles that are interesting enough or closely related to the domains I love. I mostly use dev.to for finding out and reading software-related blogs but I also prefer reading technology-related and sometimes it's just hard to find the right blog for you.

That's why I make use of this amazing extension. It has such a clean UI design and gives a library-like feeling and it's as if when I open the extension which furthers redirects to a new page makes it feel like those are tiny flashcards with interesting topics and I just want to read a few. I manage to read at least 2 blogs every morning varying domain-wise or just specifically related to open-source news or technology news.

daily.dev is indeed the easiest way to stay updated on the latest programming news and I recommend it if you like reading. 🖖🏻

Link - https://bit.ly/2QKDWNS
Personal Rating - 4.5/5

10. Momentum

Momentum is a productivity extension tool and honestly, among productivity my second most favorite tool after ReaderMode. This extension takes into account the idea that inspiration and soothing images sets the user on a proper path (wanting to work!) and provides encouragement and will to work continuously and complete your to-dos.

Apart from soothing images and quotes, the extension provides other features as well which includes:

Weather & forecast
To-Dos - I love a soothing application that provides to-dos, gives me the feeling to work more!
Search & Linking feature
Option to add your widgets as well to the momentum webpage

Link - https://bit.ly/3sEIHqv
Personal Rating - 5/5

I am not much positive person but I also want to be motivated to work most of the time without being distracted and this extension helps plenty! ✨

These 10 are my favorite extensions I love to make use of however there will be bonus +2 extensions as well! Those 2 are:

Github Gloc - This extension creates a badge indicating the number of lines for each visible repository on Github for the user
Wakatime - Tracks the amount of time I spend on applications such as VS Code, XCode, and chrome. It helps me keep track of the amount of time I spend on different projects

I hope this was informative enough to understand the use case of each extension. Which one is your favorite extension and how is it useful for you? 🤔

Save your favorite dev.to posts offline!

Aemie Jariwala — Fri, 22 Jan 2021 14:00:22 +0000

It takes too much time to copy-paste & then edit the blog I like on devto
~ Me to Myself

As a developer, I love reading plenty of blogs on dev.to but prefer to save it on my machine. This has its perks which I will list down for you.

When I read a blog, I want to edit some of the content as per my wish without affecting the original content on the same page itself. This edited content I prefer to save on my local machine so I can view it later.
When I have no network connection, I can read the blogs on my machine easily.

The best thing, this will be super productive for you to save the content the way you like and read it when you want.

To make you believe how useful and easy it's let's see the small demo before moving further:

I have pretty good knowledge of javascript and DOM. With that knowledge, I just came up with a method to go to the particular blog which I enjoyed reading and focus on editing the blog while removing other elements such as navbar, footer, and others.

It's quite simple you just need to edit the CSS properties of the elements using DOM. You can certainly do this on your own as well however I have made that job easier for you by collecting all the tags within the HTML whose CSS properties we want to change!

Prerequisities

Just open your console in your favorite browser and simply copy-paste the javascript DOM code. It's this easy!

Let's remove the surrounding elements of the blog! ⚒️

It's time to get to work, thus we will first remove the surrounding elements around the blog that you enjoyed reading and want to save on your machine!

By surrounding elements, I mean user profile, navbar, footer, comment section, the moderator badge, and every other element which doesn't involve the contents of the blog.

let tags = [
    'header', 
    'div.crayons-article-actions',
    'div.spec__tags',
    'div.crayons-article__subheader',
    'section#comments',
    'section.crayons-card',
    'aside.crayons-layout__sidebar-right',
    'footer.crayons-footer',
];

let moderatorTag = '.mod-actions-menu-btn'; 
if (document.querySelector(moderatorTag) !== undefined) {
    tags.push(moderatorTag);
}

These are the only list of tags that come under surrounding elements for the blog! Now after you have included this code in your console, just include 3 more lines to remove all of them!

tags.forEach((tag) => {
    document.querySelector(tag).style.display = 'none';
});

Voila! All the surrounding elements have disappeared. 💨

Let's edit the content as per our liking! ✍🏻

This is the main part where you get the power to edit the content of the blog without affecting the original blog. In this, you just have to include one line in your console then you can edit the content on the page as you wish.

document.querySelector('body').setAttribute('contenteditable', 'true')

Time to save the contents on our machine 💽

After you've completed editing the blog content, you want to save it as a pdf on your local machine. We can do this with a simple window.print() however this might clip off some content.

We want to save our content in the most accurate way possible thus we got to edit further properties of the body tag. For this, include in your console the following code:

document.querySelector('body').style.width = 'auto'
document.querySelector('body').style.border = '0'
document.querySelector('body').style.padding = '0'
document.querySelector('body').style.float = 'none'
document.querySelector('body').style.position = 'static'
document.querySelector('body').style.overflow = 'visible'
document.querySelector('body').style.margin = '0px 5%'

After you've added this, you just got to add window.print() & save it as a pdf on your local machine.

One more query would arise that I have to always copy-paste the code and the answer to that is obviously a big NO! Just create a simple function as shown here, add it to your local storage as shown.

function cleanAndEdit() {
    let tags = [
        'header',
        'div.crayons-article-actions',
        'div.spec__tags',
        'div.crayons-article__subheader',
        'section#comments',
        'section.crayons-card',
        'aside.crayons-layout__sidebar-right',
        'footer.crayons-footer',
    ];

    let moderatorTag = '.mod-actions-menu-btn';
    if (document.querySelector(moderatorTag) !== undefined) {
        tags.push(moderatorTag);
    }

    tags.forEach((tag) => {
        document.querySelector(tag).style.display = 'none';
    });

    // editing content on the page
    document.querySelector('body').setAttribute('contenteditable', 'true')

    // for printing content accurately
    document.querySelector('body').style.width = 'auto'
    document.querySelector('body').style.border = '0'
    document.querySelector('body').style.padding = '0'
    document.querySelector('body').style.float = 'none'
    document.querySelector('body').style.position = 'static'
    document.querySelector('body').style.overflow = 'visible'
    document.querySelector('body').style.margin = '0px 5%'

}

localStorage.setItem('editable-dev', cleanAndEdit)

Once you've done this within the console, you can re-use this function any time you want by doing as followed in the console:

let func = localStorage.getItem('editable-dev');
eval(func);
cleanAndEdit();

After this, you can edit the content and save it with the method already discussed!

I hope you enjoyed saving your most loved blog content on your machine based on your edits! You can refer to this code on Github as well. Till then enjoy reading and continue learning. ✨

A simplified notion on Image Processing

Aemie Jariwala — Thu, 21 Jan 2021 13:34:32 +0000

Digital image processing is the use of a digital computer to process digital images through an algorithm.
~ Definition right off the page from Wikipedia

Let's begin by simplifying the understanding of Image Processing and moving on further with Image algorithms and different processes followed by implementing them using the PIL library (quite a popular package of Python!).

GIF Credits: Google

Image processing is just a simple way to look at a digital image, be it grey scaled or colored or any different mode and performing various operations/processes like image scaling/resizing, rotation, cropping and adjusting contrast, and many such familiar operations/processes.

🏃‍♀️ Table of Contents 🏃‍♂️

Providing the entire content table so you're free to choose which topic you want to read! Enjoy reading. 😁

Prerequistes
About the PIL
Image Respresentation & its modes
1. PIL Implementation
Image Processing Principles
1. Nearest Neighbor
2. Bilinear Interpolation
3. Bicubic Interpolation
4. Convolution Method
Transformation with PIL
1. Resizing Image
2. Rotating Image

Before starting anything, do this!

In this tutorial to perform different image processing on various images, we're using the PIL python library. Now certainly PIL is not just pre-installed on your machine. Thus we got to install python, pip and last and the most important, PIL.

If you have anaconda installed on your machine, you don't have to do any of the steps mentioned below.

When you download python, PIP is installed along with it.

For installing PIL, we will install Pillow (Pillow is a maintained fork of PIL):



$ pip install Pillow

If you want to code side by side along with this blog, I would suggest doing the following in your terminal:



$ mkdir pil-image-processing && cd pil-image-processing
$ mkdir images

We will be writing the programs within the pil-image-processing directory. You can use any code editor however I will make use of vim.

Also, if you want to use the same images as I have in this blog, you can download the youtube icon and sunset picture and place them in your images folder.

PIL Library

I will give a brief on what the PIL library is and what we'll cover with it.

PIL library is quite a popular package provided by Python that handles all the image processing and functions that I mentioned earlier. It's in short called Pillow also(I don't know why!).

Pillow is the “friendly” PIL fork by Alex Clark and Contributors.
~ As mentioned in the documentation

Image Representation & its modes

Pixel is the smallest & the most important component of an image. A collection of pixels makes an image altogether. A pixel value always ranges from 0-255.

Picture Credits: Google

An image always has a width (w) and height (h) and can be understood by its comparison through a matrix with w rows and h columns.

We'll move on a step further to understand the different modes of images. Earlier I mentioned an image can be represented through a matrix. A matrix is 2-dimensional and this single matrix forms a single channel of the image. That's a new term alert!

When we fill the matrix in the single-channel with values ranging from 0-255, it will form a greyscale image. Great so now we reached a level where we created a greyscale image. Greyscale image size is simply represented with width x height format.

Picture Credits: Google

Let's move on to form the colored digital images observed these days.

For understanding the colored images, we'll go to legos. In legos, we build a tower by placing one lego over another. In this manner, each lego is like a single-channel. In RGB/colored images, we've 3 channels that are placed on top of each other to create a single image.

In RGB, we have got the Red, Green, and Blue channels. Each of these channels is filled with values ranging from 0-255. Together, when these channels are together placed, we get a colored image. It's as simple as that theoretically. In practice, we know that an image has a width (w) represented as rows and height (h) represented as columns but in an RGB image, we also need to mention the channels (c).

The RGB image size is represented as width x height x channels.

Picture Credits: Google

There are various other modes apart from RGB & greyscale such as CYMK and RGBA (and so many others).

RGBA => RGB + Alpha lchannel (handles opacity of the image)

PIL Implementation for different modes

In PIL, there are several shortcodes for modes in their documentation with which we will refer and perform simple operations.

1. Convert any image format to greyscale format



from PIL import Image
img = Image.open('images/image.png').convert('LA')
img.save('images/greyscale.png')

Now, this just converted our colored image to greyscale, damn! I will explain what this code does:

Import the Image package from the PIL library to use the in-built functions.
We open the image apply the LA mode to convert to greyscale and assign it to the variable img.
We save this new image by specifying the path.

LA is not Los Angeles guys but a mode specified by PIL in their documentation.



L -  (8-bit pixels, black, and white)
LA (L with alpha)

Picture taken from Google, updated by myself

2. Splitting colored image to their respective channel

Here, a colored image has 3 layers as mentioned before: Red, Green & Blue. What we'll do is extract each channel separately from the image and save those individual channels. Simple!!



from PIL import Image
img = Image.open('images/sunset.png')
data = img.getdata()

Picture Credits: Google

Here, we open the image and assign it to variable img. After that, we're extracting the data of a colored image. We also mentioned before that a channel of an image is formed through a matrix that encompasses the pixel values ranging from 0-255.

Now for one channel, we've one matrix filled with pixel values. But in a colored image, we've 3 channels (red, green & blue) so we've three matrixes filled with a pixel value.

Again, a matrix is represented in a 2-D array with rows and columns. Now we've to include the values of 3 matrixes so we do it using a 3-D array and it comes in this format.



[[
  [r(0,0), g(0,0), b(0,0)], [r(0,1), g(0,1), b(0,1)]], 
  [[r(1,0), g(1,0), b(1,0)], [r(1,1), g(1,1), b(1,1)]
]]

This format is better understood diagrammatically as shown:

Thus, the data we extract from the image will be of the format:



[[[202 112 104]
 [202 112 104]
 [202 112 104]
 ...
 [200 111 105]
 [200 111 105]
 [199 110 104]]

 [[202 112 104]
 [202 112 104]
 [202 112 104]
 ...
 [200 111 103]
 [200 111 103]
 [199 110 102]]]

Let's use this data and split this data so we can get the r pixel values for the red channel, g pixel values for the green channel, and b pixel values for the blue channel.



red = [(pixel[0], 0, 0) for pixel in data]
green = [(0, pixel[1], 0) for pixel in data]
blue = [(0, 0, pixel[2]) for pixel in data]

As we have seen the data is of 3-D array format, thus let's focus on extracting only the red matrix for now. In the 3-D array, the internal array is of the format [r, g, b] and we need to take the first value of this array to get the red pixel values. We do this similarly for creating the green matrix and blue matrix.

Let's use these 3 matrixes and save them. We can then see the separate red, green, and blue channels of the original image.



img.putdata(red)
img.save('images/red_sunset.png')
img.putdata(blue)
img.save('images/blue_sunset.png')
img.putdata(green)
img.save('images/green_sunset.png')

Here, we use the putdata() in-built function to copy the matrix content into the original image and then saving it.

Image Processing - Behind The Scene Principles

For image processing techniques such as rescaling/resizing and rotation are formed based on principals of - nearest neighbor, bilinear transformation & other principles I will explain in detail.

Let's start with the simplest principle and climb up with more complex ones. Just note that all these principles I will be explaining theoretically in the simplest form and not mathematically.

1. Nearest Neighbor Principle

In this principle, we have an original image(A) and we apply an image processing technique to convert it to a modified image(B).

I will explain this by resizing an image from A (3x3) to B (9x9). The first step to do is take the coordinates of the A image, multiple it by 3, then we will get a coordinate in the B image. This new coordinate of image B will have the same pixel value as the original coordinate in image A had.



A(0, 0) => 110
A(0, 1) => 120  
>>> x3 <<<
B(0, 0) => 110
B(0, 3) => 120

Now, we need to find the pixel value B(0, 1), and to do that we do as followed:



B(0, 1) => ? 
>>> /3 <<< 
A(0, 1/3) => no such coordinate exists, right?

You're right no such coordinate exists but the nearest neighbor asks that is A(0, 1/3) closer to A(0, 0) or A(0, 1). Here, it is closer to A(0, 1) thus the pixel value of B(0, 1) will be the same as A(0, 0). Similarly, other coordinates are calculated as well! This is not so efficient, certainly!

2. Bilinear Interpolation

As you would have understood if we use the nearest neighbor principle to resize or rotate an image, it won't produce an accurate output and will be pixelated. Thus, we use another principle - Bilinear Transformation.

Let's take the sample example of resizing an image A(3x3) to image B(9x9).

Before we understand bilinear transformation, we need to understand linear transformation. We'll take the same example as we did in the nearest neighbor. So we need to find B(0, 1) and the way we do it is found A(0, 1/3) and the manner we do it is:

We have the pixel value A(0, 0) and A(0, 1) so first we find 1/3 * value @ A(0, 1) and 2/3 * value @ A(0, 0). Add those up and round it, you got the pixel value for A(0, 1/3) and that's your value for B(0, 1).

We use this method to find any coordinate between 2 given coordinates. In bilinear, we make use of 4 consecutive coordinates in the original image A. With these coordinates, we calculate an ideal coordinate in image A and scale it to a coordinate in image B.

We have pixel values of A(0, 0), A(0, 1), A(1, 0), and A(1, 1). First, we find the coordinates of the square blocks between the 2 coordinates of image A using the linear interpolation method.
With the coordinates of the 2 square blocks, we can interpolate and find the coordinate of the triangle block(the chosen one!).

Once we find the coordinate of the triangle block, we just map it to image B.

So that's the basic idea of how bilinear works. In this manner, we can find any coordinate between 2 coordinates in our image B. With this principle, we can get much accurate pixel values and a smoother modified image.

3. Bicubic Interpolation

In bicubic interpolation, we make use of a cubic equation. However, as I have mentioned before we'll focus on the theoretical rather than the mathematical understanding of the principle.

Let's look back at linear/bilinear interpolation to transform from image A to image B.

The below diagram in the 2-D plane shows that b/w any 2 given coordinate is just a line and you can find any coordinate between those 2 using the linear interpolation method:

However, this linear interpolation doesn't always provide a highly accurate or smooth result. Thus, we make use of bicubic.

From this diagram, if I use the bicubic method, what it implies is if there are 2 given coordinates and there is the line joining those 2, then we will use the tangent/derivative at those 2 coordinates and make the curve and find any coordinate between those 2.

How are we calculating the derivatives at the coordinates?

For calculating the tangent at those 2 given coordinates, we need the neighboring coordinates of those 2 as well! So easy, right?

We use the linear interpolation method to calculate the ideal coordinate in bilinear interpolation using 4 coordinates.

If we want to find the ideal coordinate between those 4 using bicubic, we'll need to use the extension as shown in the diagram.

For bicubic, we'll do as followed:

For each row, we will find the coordinate (square blocks) between 2 given coordinates and we need to find the tangent at those 2 given coordinates using the neighbor of the given 2.
Once the coordinates of the square blocks are calculated, we use the same method in 1 and get the ideal coordinate of the triangle block.

The coordinate of the triangle block is scaled to the coordinate in image B. This gives a much smoother transformation as compared to bicubic interpolation.

Let's cover our last principle before we jump to implementation using PIL.

4. Convolution method

This is an important principle! It's important 'cause today principles like bi-cubic, bilinear is based upon the convolution principle itself.

Let's begin by understanding convolution. In convolution let's say we have an image I(7x7) and what we'll do here is slide a kernel window K(3x3) over the image I such that we'll get a new image J(5x5) = I(7x7) * K(3x3)

Picture Credits: Google

In the diagram, we see that the kernel K slides over image I.
Then when the kernel K is over a section of image I, it multiplies the pixel values of K and I and then adds them all up in the section, and we get a convoluted image pixel value. I know this sounds confusing so we'll understand this with an example.

In that image, we have a section of image I and we've our kernel K. From the diagram, it's understandable how the 9-pixel values result in a 1 convoluted pixel value. In this manner, we continue to slide the kernel K over the entire image I and get a convoluted image J (I * K).

This is a heavy process, don't let anyone tell you different!

Before moving further, I would like to clarify that these methods that I specified are used as filters to perform the transformation in images.

Implementing transformation with a simple PIL

According to the documentation of PIL:

Image resizing methods resize() and thumbnail() take a resample argument, which tells which filter should be used for resampling. Possible values are PIL.Image.NEAREST, PIL.Image.BILINEAR, PIL.Image.BICUBIC and PIL.Image.ANTIALIAS.

The upscaling performance of the LANCZOS filter has remained the same. For the BILINEAR filter, it has improved by 1.5 times and for BICUBIC by four times.

From those 2 contexts from documentation, we know what Nearest, Bilinear, and Bicubic are, so that's cool! Now, what's Antialias and Lanczos?
Antialias is a high-quality filter based on convolutions (we learned this!). Now Antilias filter is just an alias of Lanczos. So Lanczos and antialias are based on convolution.

Let's implement resizing using these filters with PIL.

In the documentation, for using the filters while resizing and rotation we can use their names explicitly or the number assigned for them.



NEAREST = NONE = 0
BILINEAR = LINEAR = 2
BICUBIC = CUBIC = 3
LANCZOS = ANTIALIAS = 1

1. Resizing an image using different filters

We're going to re-use the sunset image that we did while splitting the image into different channels. Let's get coding!



from PIL import Image
img = Image.open('images/sunset.png')
size = (350, 550)
nearest_resize = img.resize(size, 0)
lanczos_resize = img.resize(size, 1)
bilinear_resize = img.resize(size, 2)
bicubic_resize = img.resize(size, 3)

nearest_resize.save('images/nearest_sunset.png')
lanczos_resize.save('images/lanczos_sunset.png')
bilinear_resize.save('images/bilinear_sunset.png')
bicubic_resize.save('images/bicubic_sunset.png')

Here, we're resizing the original image using different filters. With the current image, you may not be able to see much difference as shown.

However, this particular image provides a good difference between resizing between different filters. I would suggest looking at the filters that have been used by us in this blog and observe the difference.

2. Rotating an image using different filters

We'll be using the filters to rotate an image by any degree we wish to. However, there is a problem when rotation happens to let's say 30 or 45 degrees, the edges get clipped off. If we don't want that we'll be setting expand=true which will prevent that!

In resizing, we used numbers to depict what kind of filter we want to use over the image while resizing. Here, we'll explicitly type their names out and again use the same sunset image.



from PIL import Image
img = Image.open('images/sunset.png')

nearest_rotate = img.rotate(45, resample=Image.NEAREST, expand=True)
bilinear_rotate = img.rotate(45, resample=Image.BILINEAR, expand=True)
bicubic_rotate = img.rotate(45, resample=Image.BICUBIC, expand=True)

nearest_rotate.save('images/nearest_rotate_sunset.png')
bilinear_rotate.save('images/bilinear_rotate_sunset.png')
bicubic_rotate.save('images/bicubic_rotate_sunset.png')

Here, the Lanczos filter can't be used for rotation as it is not implemented by PIL itself and quite a heavy process so doesn't hold any advantage over bicubic for now.

PIL is not limited to just resizing, rotation, splitting images but it can do so much more. Everything you perform on photo editing tools such as crop, copy-pasting, merging 2 images can be achieved through PIL just through few lines of code. In this, I have only used the Image module but there are many modules for PIL itself.

For any additional resources for PIL, just look through their documentation, and certainly if stuck, stack overflow always provides every answer. PIL is an effective library and I have covered the 2 most commonly used operations and the principles that reside behind the transformation.

The sources for each code is present on Github as well, so you can refer from there and code side by side too!

If any questions arise regarding PIL or anything mentioned in the article, feel free to mention it in the comments! Till then, goodbye. 👋

Nginx concepts I wish I knew years ago

Aemie Jariwala — Mon, 11 Jan 2021 13:58:03 +0000

Nginx is a web server that is used as a reverse proxy, load balancer, mail proxy, and HTTP cache and follows the Master-Slave Architecture.

Woah! A complicated term and a confusing definition filled with big confusing words, right? Don't worry, I can help out with first understanding the basic barebones of the architectures & terms in Nginx. Then we'll move on to installing and creating Nginx configurations.

To keep things easy, just remember: Nginx is an amazing web server.

Web server, in simple terms, is like a middleman. Let's say for instance you want to go to dev.to so you type the address https://dev.to, your browser finds out the address of a webserver for https://dev.to and then direct it to a backend server which will give back the response to the client.

Proxy v/s Reverse Proxy

The underlying feature of Nginx is proxies. So it's required to understand what is proxy and reverse proxy now.

Proxy

Alright, so we have clients (>= 1), an intermediate web server(in this case, we call it proxy), and a server. The main thing that happens in this is that the server doesn't know which client is requesting. Bit confusing? Let me explain with a diagrammatic sketch.

In this, let client1 & client2 send requests request1 & request2 to the server through the Proxy server. Now the backend server will not know whether request1 is sent by client1 or client2 but performs the operation.

Reverse Proxy

In simplest terms, a reverse proxy is a reverse of what a proxy does. Here, we will have let's say a single client, an intermediate web server, and several backend servers (>=1). Let's do this with a diagrammatic sketch as well!

In this, a client will send a request through the webserver. Now the webserver will direct to any of the many servers through an algorithm, one being round-robin (the cutest one!), and send back the response through the webserver to the client. So here, the client isn't aware which backend server it is interacting with.

Load Balancing

Damn another new term but this term is simpler to understand as it is one instance application of reverse proxy itself.

Let's go with the basic difference. In load balancing, you must have 2 or more backend servers but in reverse proxy setup, that's not a necessity. It can work with even 1 backend server.

Let's look at it from behind the scene, if we have a lot of requests from the clients this load balancer checks the status of each backend server and distributes the load of the requests, and sends a response faster to the client.

Stateful v/s Stateless Applications

Okay, guys, I promise I am real close to starting with the Nginx code. Let's get all the barebones clear!

Stateful Applications

This application store an additional variable for saving the information that can work for a single instance of a server only.

What I mean is if for a backend server server1 some information is stored it won't be stored for the server server2 thus the client (here Bob) interacting may/may not get the desired result as it could be interacting with server1 or server2. In this case, server1 will allow Bob to view the profile but server2 won't. Thus, even if it prevents many API calls with the database and is faster, it can lead to this problem across different servers.

Stateless Applications

Now stateless is more API calls with the database but fewer problems exist when it comes to the interaction of the client with different backend servers.

I know you didn't get what I mean. It's simple if I send a request from a client to let's say backend server server1 through web server it will provide a token back to the client to use to access any further requests. The client can use the token and send a request to the webserver. This web server will send the request along with the token to any of the backend servers and each will provide the same desired output.

What is Nginx?

Nginx is the web server and I have been using the term web server in the entire blog till now. It's like a middleman honestly.

The diagram isn't confusing, it's just a combination of all the concepts I have explained till now. In this, we have 3 backend servers running at port 3001, 3002, 3003 and all these backend servers use the same database running at port 5432.

Now when a client sends a requests GET /employees on https://localhost (by default on port 443), it will pass this requests to any of the backend server based on the algorithm and take the information from the database and send the JSON back to the Nginx web server and sent back to the client.

If we're to use an algorithm such as round-robin, what it'll do is let's say client 2 has sent a request to https://localhost then the Nginx server will pass the request first to port 3000 and send the response back to the client. For another request, Nginx will pass the request to 3002 and so on.

Too much information right! But by this point, you have a clear understanding of what Nginx is and the terms used with Nginx. Now we'll move on the understanding the installation and configuration techniques.

Installation Process

We're here at last! I am so proud if you've understood the concept to reach the coding part of Nginx at last.

Okay, let me just tell you the installation process is super duper easy on any system just one-liner honestly. I am a Mac OSX user, so will be writing the commands based on it. But it will be done similarly for ubuntu and windows and other Linux distros.

$ brew install Nginx

This is only required and you have Nginx on your system now! Amazing I am sure!

So easy to run! 😛

To run this and check if Nginx is working on your system, it's again way too simple.

$ nginx 
# OR 
$ sudo nginx

After this, go on your favorite browser and check out http://localhost:8080/ and you'll get the below-observed screen!

Basic Configuration Setup & Example

Okay, we will be doing an example and seeing the magic of Nginx.
First, create the directory structure in the local machine as follows:

.
├── nginx-demo
│  ├── content
│  │  ├── first.txt
│  │  ├── index.html
│  │  └── index.md
│  └── main
│    └── index.html
└── temp-nginx
  └── outsider
    └── index.html

Also, include basic context within the html and md files.

What we're trying to achieve?

Here, we have two separate folders nginx-demo and temp-nginx, each containing static HTML files. We're going to focus on running both these folders on a common port and set rules that we like.

Coming back on track now. For making any changes to the Nginx default configuration, we will make a change in the nginx.conf that is located in the usr/local/etc/nginx path. Also, I have vim in my system so I make changes using vim but you're free to use your editor of choice.

$ cd /usr/local/etc/nginx
$ vim nginx.conf

This will open a file with the default nginx configuration which I really don't want to use. Thus, the way I normally do is make a copy of this configuration file and then make changes to the main file. We'll be doing the same as well.

$ cp nginx.conf copy-nginx.conf
$ rm nginx.conf && vim nginx.conf

This will now open an empty file and we'll be adding our configuration for it.

Add a basic setup of configuration. It is a must requirement to add the events {} as it is generally used to mention the number of workers for Nginx architecture. We are using http here to tell Nginx that we'll be working at layer 7 of the OSI model.

In this, we've told nginx to listen on port 5000 and to point to the static file mentioned within the main folder.
```
  http {

     server {
       listen 5000;
       root /path/to/nginx-demo/main/; 
      }

  }

  events {}
```
We'll add additional rules next for the /content and /outsider URL where outsider will be pointing to a directory outside the root directory mentioned in the 1st step.

Here location /content signifies that whichever root I define in the leaf directory for this, the content sub URL will be added to the end of the root URL defined. Thus, here when I specify root as root /path/to/nginx-demo/ it simply means that I am telling Nginx at http://localhost:5000/path/to/nginx-demo/content/ show me the content of the static files within the folder.
```
  http {

    server {
        listen 5000;
        root /path/to/nginx-demo/main/; 

        location /content {
            root /path/to/nginx-demo/;
        }   

        location /outsider {
           root /path/temp-nginx/;
        }
   }

  }

  events {}
```
Pretty cool! Now Nginx is not only limited to defining URL roots but also to set rules such that I can block the client from accessing certain files.
We're going to write an additional rule within our main server defined to block any .md files from being accessed. We can use regex in Nginx so we'll define the rule as follows:
```
   location ~ .md {
        return 403;
   }
```
Let's end this by learning the popular command proxy_pass. Now we've learned what a proxy and reverse proxy is so here we'll begin by defining another backend server running at port 8888. So now we've got 2 backend servers running at port 5000 and 8888.

What we'll do is that when the client accesses port 8888 through Nginx we'll pass this request to port 5000 & send the response back to the client!
```
   server {
       listen 8888;

       location / {
           proxy_pass http://localhost:5000/;
       }

       location /new {
           proxy_pass http://localhost:5000/outsider/;
       }
  }
```

Let's see the final complete code altogether! 😁

   http {

        server {
            listen 5000;
            root /path/to/nginx-demo/main/; 

            location /content {
                root /path/to/nginx-demo/;
            }   

            location /outsider {
               root /path/temp-nginx/;
            }

                    location ~ .md {
              return 403;
            }
       }

         server {
           listen 8888;

           location / {
               proxy_pass http://localhost:5000/;
           }

           location /new {
               proxy_pass http://localhost:5000/outsider/;
           }
      }

   }

   events {}

Run this code using sudo nginx.

Extra Nginx Commands!

To start an Nginx web server for the first time.
```
  $ nginx 
  #OR 
  $ sudo nginx
```

To reload a running Nginx web server.

  $ nginx -s reload
  #OR 
  $ sudo nginx -s reload

To stop a running Nginx web server.

  $ nginx -s stop
  #OR 
  $ sudo nginx -s stop

To know which processes of Nginx are running on your system.
```
  $ ps -ef | grep Nginx
```

The 4th command is important when by any chance the first 3 commands lead to some error, what you can normally do is find all running Nginx processes using the 4th command and kill the processes, and start it again.

To kill a process, you need the PID and then kill it using:

$ kill -9 <PID>
#OR 
$ sudo kill -9 <PID>

Before ending this post, I've used diagrams and visuals from google images and couple of youtube tutorials by Hussein Nasser.

We've come to an end with the basic understanding of Nginx and its configuration. If you're interested in the advanced configuration of Nginx, do let me know through comments. Till then enjoy coding and explore the magic of Nginx! 👋

Dockerizing my way through graphics

Aemie Jariwala — Tue, 05 Jan 2021 17:58:08 +0000

Docker is hard and so weird and complicated and doesn't have plenty of resources to learn from even! ~ my very first thoughts when I wanted to step into the Docker world to try something new.

Now, Docker seems like a complicated term and makes you wonder, where and why, and what should I even use Docker for ?! I am not going to answer all these questions, these are the beginner steps for which I landed across an amazing video on youtube and I will be putting the link for the same as well.

Best Docker 101 (60 min) video - https://bit.ly/3bfhh4v

What am I going to cover in this blog?

I will explain in layman's terms or try my best. Docker is great when it comes to dealing with building images, running them as containers, and managing the virtual packages/services created but what if I want to run a program that requires the use of GUI? In normal cases, it will run the docker image but in the terminal and that gives an undesired output! So the blog aims to connect the docker image with a GUI.

From where did I land on this topic? 😅

This is going to sound silly but just going to give a tiny background story on how I landed on the topic. Well, being an undergrad at NIT Surat, currently reached my 6th semester (phew!), we have a subject Computer Graphics for which they required us to use an outdated library that only worked on ubuntu and using code blocks (out of the question even) on Windows.

Now the only OS I've are Fedora, Mac OSX, and Windows and I am neither going to install Ubuntu nor use code blocks just for this. So my only left choices were using a ubuntu docker image or using a VM. I felt to make use of docker image as it seemed a better alternative use to avoid heat load up and slowing down my CPU. Now, this is all new to me, docker and such but still managed to connect my docker image with GUI and figured out it can be done for any docker images. For now, I could do a successful setup for only Mac OSX and Linux Distros.

Enough of storytelling, let's get on track with how to connect Docker Images with GUI.

Connecting libgraph with GUI using the ubuntu docker image

Libgraph is an implementation of the TurboC graphics API (graphics. h) on GNU/Linux using SDL. Let me warn you, this is quite old! It was hard to find working solutions on the net for this 🙁

I have created a docker image named compgraphics and pushed it to the docker hub which encompasses all the initial setup to install sudo and libgraph on your system.

Step 1: Create a docker file to use one of the C files to produce the image

FROM aemiej/compgraphics:latest 

LABEL maintainer="Aemie Jariwala"

WORKDIR "/libgraph-1.0.2"

RUN gcc -o sample sample.c -lgraph

CMD ["./sample"]

Step 2: Specifically for MAC OSX Users

For Mac, you require additional applications for the GUI to work. They are socat and Xquartz.

$ brew install socat
$ brew install xquartz

Remember to restart your PC after this, it's a must else it won't work.

Open two terminals, where on one your socat will continue to run and others you will containerize your docker images.

Socat allows for bidirectional data transfers from one location to another. It listens to the docker image running and then displays the image in Xquartz, a GUI application

Terminal 1

$ socat TCP-LISTEN:6000,reuseaddr,fork UNIX-CLIENT:\"$DISPLAY\"

Terminal 2

$ open -a Xquartz # within preferences => security, tick both checkboxes 

$ git clone https://github.com/AemieJ/ubuntu-docker-libgraph.git

$ cd ubuntu-docker-libgraph

$ docker build --pull --rm -f "Dockerfile" -t ubuntudockerlibgraph:latest "."

$ docker run -d -e DISPLAY=192.168.1.11:0 ubuntudockerlibgraph

Here, DISPLAY=192.168.1.11 will vary for each user and can be found from ifconfig en0 & you'll get inet X netmask similar to this where X address will replace the value with DISPLAY key.

After this, an application will open with the output (pretty cute!).

Similar to this, you can run any docker images that are pre-built such as firefox, chrome, Spotify, Skype, and just way too many 👻. All these images can be found from the git repository - https://github.com/jessfraz/dockerfiles

Tiny example on how to open Spotify GUI using docker:

$ docker run -d -e DISPLAY=192.168.1.11:0 jess/spotify

Similarly, you can do the same for other images as well!

Step 2: Specifically for any Linux Distro

The steps for this are relatively easier than for Mac OSX. The requirement of a single terminal and an additional package only required to be installed.

$ git clone https://github.com/AemieJ/ubuntu-docker-libgraph.git
$ cd ubuntu-docker-libgraph

Update the Dockerfile by adding EXPOSE 8887 before the CMD ["./sample"] line.

$ sudo docker build --name ubuntudockerlibgraph --pull --rm -f "Dockerfile" -t ubuntudockerlibgraph:latest "."
$ sudo apt-get -y install xauth
$ xauth list

On running xauth list, you get an output of the following username/unix:0 MIT-MAGIC-COOKIE-1 8fe8efc75454dbf178bbe00442689406

$ sudo docker run -ti --net=host -e DISPLAY -v /tmp/.X11-unix ubuntudockerlibgraph bash
$ xauth add username/unix:0 MIT-MAGIC-COOKIE-1 8fe8efc75454dbf178bbe00442689406
# you'll receive an error => `./Xauthority file doesn't exist` => disregard it
$ /sample

Damn! We're done with the instructions for the Linux distros as well. 😄
The output of this will be the same as shown within the instructions of dockerizing through graphics in Mac OSX.

This is the end of this long article but I hope you found it useful and continue to dockerize your way through everything!

The Best Web Development Courses

Aemie Jariwala — Wed, 30 Dec 2020 08:59:54 +0000

When you want to develop a new website, you need to make sure of the frameworks you'll use for making the front-end and back-end of the application. The requirement for making a choice is based on knowledge of the frameworks and implementing them accurately.

Let's begin this blog with a brief on the importance of web development.

Importance of Web Development for a developer

All the applications, developed to date began with a train of thoughts and logic. The logic could be incorporated within the application directly through lines of codes. However, this application is understandable by the respective developers themselves but not the users. Hence, to make it a flexible application for everyone, the concept of user interface crawls in. So the equation for creating a web development is simple.

USER INTERFACE + FRAMEWORKS = FRONT-END

LOGIC + FRAMEWORKS = BACK-END

FRONT-END + BACK-END = WEB APPLICATION

Now the basic understanding of web development is done hence let's move forward with the courses that I went through to familiarize myself with web development.

The Corey Schafer Flask & Django Tutorial

My first baby steps into the web development portal were to start with the back-end frameworks to incorporate the business/app logic. In the beginning, I had a real good grip with the python language and thus I decided to learn Flask and Django.

Certainly, I went through plenty of tutorials on youtube before I could end up on real good and satisfying one and it was the playlist by Corey Schafer. In this playlist for both flask and Django, he takes on by creating a project using both the frameworks step by step and in the end, he also explains the deployment of this web application using Linode, etc.

In my opinion, I will suggest first learn flask and then Django. The reason being that the flask is easier to get a grip on and can be used to create a simple application. After you're done creating a project using this playlist, I suggest you try to create another project of your own to get familiarized.

Playlist link for Flask - https://bit.ly/3rAXy54
Playlist link for Django - https://bit.ly/34V5kNt

The Javascript Web Frameworks & Libraries

Frankly, after I learned flask & Django, I became confident in using them however it didn't seem easy to configure with front-end libraries like ReactJs. So I decided to learn a new back-end framework Node & ExpressJS. It seemed much easier to integrate with the front-end but I had to decide on a different database such as MySQL or NoSQL (the cliche). In the beginning, I learned NodeJS with MongoDB (NoSQL database) through documentation and a video by Derek Banas on youtube.

After this, I moved on to using firebase with Node due to its easy use and integration. For this, I made no use of any video but solely dependent on the documentation and stack overflow for any queries. The documentation for firebase is well explained and doesn't require any external videos for understanding.

Let's move on to ReactJS and Redux. ReactJS is a front-end library that provides beautiful UI components. It doesn't use as much space as AngularJS and it provides extensive features. Redux is the state management used in the front-end along with ReactJS. To learn the beginner course on React and Redux, I went through Mosh Hamedani's video and, for further understanding, I went through the documentation and created personal projects. I haven't done a course on AngularJS yet so can't give my opinion on it (sorry about that, you can provide your source if any in the comments).

The recent course I did was on Typescript, an udemy course I found. Deno is known to replace Node however I haven't explored that yet as well so on exploration, I can provide further suggestions/courses on it in the future.

The youtube & documentation links to start with!

NodeJS With MongoDB - https://bit.ly/38GMydM
NodeJS With MySQL - https://www.mysqltutorial.org/mysql-nodejs/
NodeJS With Firebase & Firestore - https://bit.ly/3hpZHvQ
ReactJS - https://bit.ly/3pxAiDd
Redux - https://bit.ly/2JuO765
Understanding Typescript - https://bit.ly/3aSz4hD

On an ending note, if any additional course suggestion is required, please ask so. For now, ending this long blog and hope you enjoyed reading it and it was useful to you!

Sound-Muter extension

Aemie Jariwala — Mon, 07 Sep 2020 14:21:37 +0000

The need.

Let me describe the need for this through an instance. Let's say you've multiple events to attend through online mode and these have collided at the same time. You've to focus on prioritizing one but be present for each. What will you do now? The answer is pretty simple for the particular timestamp mute one tab while listening to the other.

The birth of the idea.

Well, with the hopes that I could concentrate on my development while attending online classes. A few classes are uninteresting for me and I want to explore a development topic at the same time. So I would mute the Google meet tab and focus on hearing the other YouTube videos.

The usage of the browser extension.

An extension is easily accessible and it continues to run within the background and keep track of the tabs that have been selected to toggle with the extension. There was no usage of any external database just simple communication.

Code time. Best time.

Prerequisites

The knowledge of basic components required within a chrome extension is required. Please read the docs to get the basic idea for the code I am going to show you.

manifest.json

This file, in simple words, is responsible for stating the rules for the chrome extension you'll add to the browser.

{
    "name": "Mute Tab & Record",
    "version": "1.0",
    "description": "Mute individual tabs, keep the record of tabs and also availability to record the audio from the particular tab",
    "permissions": ["cookies", "contextMenus", "storage", "declarativeContent", "activeTab", "tabs"],
    "browser_action": {},
    "background": {
        "scripts": ["src/background.js"],
        "persistent": false
    },
    "content_scripts": [{
        "matches": [
          "https://*/*",
          "http://*/*"
        ],
        "js": ["src/content.js"],
        "run_at": "document_end"
      }],
      "icons": {
        "16": "icons/volume.png",
        "48": "icons/volume.png",
        "128": "icons/volume.png"

      },
    "manifest_version": 2
  }

Backbone of the code - background & content

The background is the script that will run as long as the extension is enabled and each time you're using the browser.

While the content is the script that only allows operations that are focused on the messaging with the browser.

In this code, there is continuous communication between the background and content. Let's describe how this communication takes place before jumping into code.

When the extension is clicked from a tab, a message from background to content is sent regarding the tab Id and a click count.

Here, click count keeps track of whether to mute or unmute a tab.

 background.js
 let clickCount = 0, filePath;
 chrome.runtime.onInstalled.addListener(() => {
   chrome.browserAction.onClicked.addListener(tab => {
     chrome.tabs.sendMessage(tab.id, {message: "clicked", 
     tab: tab.id, count: clickCount++ });  
   });
 });

After the content receives the message from the background, it a chrome storage history is accessed. This history keeps the detail of whether the tab is mute or not state and the tab id.

 content.js

 chrome.runtime.onMessage.addListener((req, sender, 
 sendResponse) => {
   if (req.message === "clicked") {
     if (req.count === 0) chrome.storage.sync.set({ 
     history: [] });
     chrome.storage.sync.get(["history"], result => {
        if (!result.history.length) {
            result.history[0] = { isMute: true, tabId: 
            req.tab };   
            chrome.storage.sync.set({ history: 
            result.history });
        } else {
            if (tabIdExist(result.history, req.tab)) {
                let arr = toggleMute(result.history, 
                req.tab);
                chrome.storage.sync.set({ history: arr 
                });
            } else {
                result.history.push({ isMute: true, 
                tabId: req.tab });
                chrome.storage.sync.set({ history: 
                result.history });
            }
        }

        console.log(result.history);
        let detailsTab = 
        fetchParticularTab(result.history, req.tab);
        chrome.runtime.sendMessage(detailsTab);
        });
      }
 });

After this history is updated, the content sends a message to the background stating it is updated. Based on this data, for the recent tab you're on, if its state is mute, the code will run a script to unmute the tab and if its state is not mute, the code will run a script to mute the tab.
```
 background.js
 chrome.runtime.onMessage.addListener((req, sender, 
 sendResponse) => {
   if (req.isMute) filePath = "src/scripts/mute.js";
   if (!req.isMute) filePath = "src/scripts/unmute.js";

   chrome.tabs.executeScript(req.tabId, {
    file:  filePath
  });
 });  
```
Additional scripts and functions are trivial and can be accomplished if you've got the basic logic understanding and are capable of writing code in javascript.

Drawbacks & alternatives.

Problem: You require the information on the coverage of video for each tab even if it's muted.

Alternative: An additional feature using javascript can be included to record the contents of the video even if it's muted.
Problem: Your presence has been called by the organizer of the call to speak. With the mute tab, you would be unaware of whether your name has been called.

Alternative: As the recording of the message will be included, we can use it to alter the user when their name is used in the context along with a summarized context using a keyboard before the user's name came up within the online meeting which had been muted.

Conclusion

In conclusion, this extension can be useful in certain cases. With the additional features, it could be an amazing extension as a whole. What're your thoughts on it?

The entire codebase is present on my github profile. It includes the additional DOM scripts that mute and unmute a tab.

Use Github Real-Time Status to Improve Your Profile

Aemie Jariwala — Sat, 08 Aug 2020 06:46:08 +0000

On your personal portfolio or the secret feature of profile on Github, publicizing ( in other words, showing-off ) your GitHub real-time status will create an impact. Also, in addition, you can be proud of yourself or get the motivation to work more, it is a win-win for you itself.

What will be included in the real-time status?

Well, it will include the languages you mostly make use for, and other than that, showcase the number of stars on your repos, PR, and issue creation, and the number of open-source contributions will be displayed too. The open-source contribution is the best thing about Github, so you can start exploring Github to improve your status of course.

Below is my real-time status, I am proud of it but I am going to make it better. In addition to it, I have included in my Github Profile as well!

Want to create your own real-time status by using the API?

This amazing feature can be found through another public repo on Github. You can use their personal API however once the number of requests crosses a certain limit, it would stop working ( personal-experience ) so we will create our own domain to use this API so there will be a rare chance it would ever stop functioning.

Method to create a personal domain for using API

Fork the repo.
Create an account on vercel using your Github account. This will be the platform used to deploy the API and create a personal domain.
Import the forked repo on vercel. Direct deployment link can be accessed as https://vercel.com/import/git?s=https%3A%2F%2Fgithub.com%2F<github-username>%2Fgithub-readme-stats&c=1.

Here, <github-username> is filled with your Github Username. My direct deployment link can be accessed from here.
Once you have reached the page of Import repository as shown in step 3, the following box will appear:

Click Continue to proceed to the next step!
A dashboard will appear where you have to just add the Environment variable, name it as PAT_1 and its value can be generated from github. After this, just click deploy and your work is done and you can use your personal domain to use the API.

Demo Purpose

I am currently posting my link down here for demo purposes. Here, you can check the status of your profile by changing the username in the link & the language following the same change in username.

Give it a try amigos! It's good to show off sometimes.

Git Rebase Is Not The Devil

Aemie Jariwala — Fri, 12 Jun 2020 19:09:17 +0000

Alerting the readers from before, this blog will share my personal experience and provide professional tips on git rebase, so if you want to advance yourself with the knowledge in the git, I recommend giving it a read.

First comes the experience now. I love the idea of open source and love indulging myself in contributing to the organizations on Github. Currently, I am an outreachy intern in Apache, and the past week, I worked on an issue that required learning of new concepts, and in the way, my mentor kept advising me to rebase my branch to avoid merge conflicts. But guess what, rebase scares the hell out of me only 'cause when I did try rebasing I lost all my commits for the issues and that freaked me out and I decided to just avoid it. Of course, I can't just give up so I tried it one more time carefully and voila, it happened perfectly and I understood the concept at last.

Now the tips, half of you know what rebasing might be and still be afraid to use it. I am going to define it just for those who don't know it yet. So rebasing helps you to put the commits of one branch on top of another branch to avoid any merge conflicts, that's its major use. The image will give a straightforward explanation.

Beginning the journey to guide you, let's use a rebase for what it's mostly used. Creating the scenario, we have forked the example repo from Twelfth-Hour organization and we've got the feature branch for our example repo. After committing to it, it's no longer in par the master branch from the example repo on the Twelfth-Hour org, and from the image, we know what's the merge base i.e the intersecting commit for the two branches. Now giving you the step by step guide so that your feature is in par with the master branch of the main repo without losing your commits -

git checkout feature
This is the branch that we need to add the new commits of the master to.
git remote add example https://github.com/Twelfth-Hour/example.git
Here, we create a remote from the main repo that we have forked for this scenario.
git fetch example
This will fetch the entire codebase with all its branches from the example repo on Twelfth-Hour org.
git rebase example/master
Now it will do its process to get your branch in par with the main branch. However, there could be conflicts so it might abort in middle, don't freak out, just resolve those conflicts and continue the process of rebasing.

This might be the end of the blog but not the end to what rebase is capable of doing.

Decentralized WebNet

Aemie Jariwala — Thu, 09 Jan 2020 08:36:57 +0000

Blockchain : The mind behind the project

The project focuses on using the idea of blockchain to create a social website network where the client has the ability to create , view and tip any post on the ethereum network . Blockchain is a trending topic and the idea of how it provides a secure way to store the personalized information using sha256 and other encryption algorithms and proof of work algorithms all combined together , it's just amazing . This project however doesn't work on the main ethereum network but on the ropsten test network in metamask . Wondering now what Metamask is ? You sure should .

Metamask , Truffle , Infura and Ganache CLI

The Ethereum site provides certain frameworks to work with so that the transactions that actually happens are easily kept tracked of in the blockchain . To begin with , I have used truffle which does the necessary setup to write contracts , migrations and test for your blockchain to work with . It creates your project using truffle init . The truffle migrations are used to compile and deploy the contracts written . The test have been written in javascript using chai & mocha . The test in truffle works asynchronously , hence makes use of async & await. Moving to metamask , it is a chrome extension that connects your blockchain to the frontend and allows the client to perform transaction , you can import accounts by providing the private key . Metamask also offers the option of various test network and provides the feature to add your personal local network . This local network can be used for testing purpose and it is the done using Ganache-CLI .

Now new term Ganache !! Well , Ganache provides you a quickstart that gives you 10 free accounts with 100 ether in each , this is fake ether and not real ether , you can't use it in the main ethereum network. Last but not the least , what is Infura !! Infura was used in this project so that I was able to deploy the blockchain created to the ropsten network . It can be used to connect to the other test network and the main ethereum network as well.

Web3 and React

Web3 and React were majorily used to connect the blockchain to the front-end to provide an easy manner for the client/user to interact with the blockchain . Web3 is majorily used to loadBlockchainData and access the functions within the contract.

Heroku

Heroku was used in this project to deploy the entire project .

Links

Even though there are a minor issues within the project , I will love to know your review on it .

DEV Community: Aemie Jariwala

Illuminating Unnoticed Efficiency Pitfalls with AtomicLongMap

Benchmark testing for AtomicLongMap

Why am I doing this benchmark test?

Which method within AtomicLongMap is suffering from thread contention?

When was a new implementation introduced for addAndGet method in Google Guava?

Why was this change introduced?

How did I notice it?

Enough story time, let's dig into the implementation difference

Google Guava 20.0 Implementation Flow [Psuedo]

Google Guava 32.0.0 Implementation Flow [Psuedo]

What's the possible difference in their behavior within a multi-threaded environment?

LET'S GET INTO TESTING !!

Case 1 : NumThreads = 2

Case 2 : NumThreads = 10

Case 3 : NumThreads = 32

Case 4 : NumThreads = 64

Conclusion

Setup of the test

The essential pillar stones to become a software engineer

1. Operation System

2. Network and Web Security

3. Database Engineering

4. System Design

Top 10 Chrome Extensions I can't live without

1. Reader Mode

Where & when can I use Reader Mode?

Original View

ReaderMode View

2. Talend API Tester

3. Redux DevTools

4. ColorZilla

5. CSS Peeper

6. Web Developer Checklist

7. CheckMyLinks

8. Enhanced Github

9. daily.dev

10. Momentum

Save your favorite dev.to posts offline!

Prerequisities

Let's remove the surrounding elements of the blog! ⚒️

Let's edit the content as per our liking! ✍🏻

Time to save the contents on our machine 💽

A simplified notion on Image Processing

🏃‍♀️ Table of Contents 🏃‍♂️

Before starting anything, do this!

PIL Library

Image Representation & its modes

RGBA => RGB + Alpha lchannel (handles opacity of the image)

PIL Implementation for different modes

1. Convert any image format to greyscale format

2. Splitting colored image to their respective channel

Image Processing - Behind The Scene Principles

1. Nearest Neighbor Principle

2. Bilinear Interpolation

3. Bicubic Interpolation

How are we calculating the derivatives at the coordinates?

4. Convolution method

Implementing transformation with a simple PIL

1. Resizing an image using different filters

2. Rotating an image using different filters

Nginx concepts I wish I knew years ago

Proxy v/s Reverse Proxy

Proxy

Reverse Proxy

Load Balancing

Stateful v/s Stateless Applications

Stateful Applications

Stateless Applications

What is Nginx?

Installation Process

So easy to run! 😛

Basic Configuration Setup & Example

What we're trying to achieve?

Let's see the final complete code altogether! 😁

Extra Nginx Commands!

Dockerizing my way through graphics

What am I going to cover in this blog?

From where did I land on this topic? 😅

Connecting libgraph with GUI using the ubuntu docker image

When was a new implementation introduced for `addAndGet` method in Google Guava?