Want to know how to make it on your own? Read the article below!

If you're a UI/UX developer, you've probably heard about Stripe.com and their uses of motion and design with their targeted audience in mind.

As I was exploring their website, I discovered their customers page and instantly, I was intrigued by their smooth scrolling bubble header and the concept was interesting enought that it caught my attention.

In this article, I'll explain on how I had attempted to recreate their scrolling bubble header.

Analysis

The mechanics are pretty simple to understand, these are the following:

• The bubbles are randomly generated and placed on page load
• Smooth animation of the up and down movements
• Infinite animation loop

A trivial problem, isn't it? Time to see if we can recreate it!

Step 1: Create the bubble

Let's write the CSS to create a simple bubble with a width and height of 150px and by giving it a border-radius of 50%.

.stripe-bubble {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

As for the logo, I inspected their code and figured out that Stripe combined all of their customer logos into a single image, also known as, CSS Spritesheet.

Performance-wise, it's a clever technique used to reduce the number of HTTP requests that your internet browser has to make on every page request.

Let's give the CSS spritesheet as a background-image property and adjust it enough to fit the size of one bubble.

.stripe-bubble {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: url('https://www.stripe.com/img/v3/customers/logos/header-logos.png');
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
    background-size: 1076px 1076px;
}

There are about 43 logos, which means you'll have to create different logos by adjusting the background position property.

.logo-1 {
    background-position: 0 0;
}

.logo-2 {
    background-position: 0 -154px;
}

.logo-3 {
    background-position: 0 -308px;
}

In the next step, using JavaScript, we'll create the classes for the bubbles and the header.

Step 2: Create a class for Bubble

Before we get in deep, let's create the foundation for our code, so that it'll make things neat and tidy and easier on the go. Below, I have created two classes: one is for the bubble and the other is for the bubble wrapper (no puns):

class Bubble {
    constructor(){}
    update(){}
}

class BubbleMarquee {
    constructor(){}
    update(){}
}

Great, you have created the classes, we can now use these to generate the bubbles dynamically in the next step.

Step 3: Bubble's scale and position

As you see in the image above, the logos are randomly placed and scaled. It's clear that there has to be some sort of a pattern, so I decided to take a look into their code:

Aha! I discovered that the positioning and scaling of the bubbles are hard-coded and then the logos order are randomly shuffled. I won't be adding a randomizer but for now, let's add the bubbles with it's specifications and respective logos.

const bubbleSettings = [
    {cssClass:'logo-imgAffirm', s: .6, x: 77, y: 1134 }, 
    {cssClass:'logo-imgAllianz', s: .6, x: 271, y: 1620 }, 
    {cssClass:'logo-imgAmazon ', s: .6, x: 372, y: 1761 }, 
    {cssClass:'logo-imgBookingCom', s: .6, x: 79, y: 2499 }, 
    {cssClass:'logo-imgCatawiki', s: .6, x: 334, y: 2704 }, 
    {cssClass:'logo-imgCityofBoston', s: .6, x: 356, y: 2271 }, 
    {cssClass:'logo-imgDeliveroo', s: .6, x: 226, y: 795 }, 
    {cssClass:'logo-imgDoordash', s: .6, x: 256, y: 276 }, 
    {cssClass:'logo-imgExpedia', s: .6, x: 365, y: 1210 }, 
    {cssClass:'logo-imgFitbit', s: .6, x: 193, y: 444 }, 
    {cssClass:'logo-imgGoogle', s: .6, x: 387, y: 2545 }, 
    {cssClass:'logo-imgIndiegogo', s: .7, x: 193, y: 1303 }, 
    {cssClass:'logo-imgInstacart', s: .7, x: 88, y: 907 }, 
    {cssClass:'logo-imgKickstarter', s: .7, x: 320, y: 633 }, 
    {cssClass:'logo-imgLyft', s: .7, x: 76, y: 323 }, 
    {cssClass:'logo-imgNasdaq', s: .7, x: 357, y: 129 }, 
    {cssClass:'logo-imgNat-Geo ', s: .7, x: 342, y: 1440 }, 
    {cssClass:'logo-imgRackspace', s: .7, x: 293, y: 1929 }, 
    {cssClass:'logo-imgReddit', s: .7, x: 198, y: 2135 }, 
    {cssClass:'logo-imgSalesforce', s: .7, x: 82, y: 2276 }, 
    {cssClass:'logo-imgShopify', s: .7, x: 182, y: 2654 }, 
    {cssClass:'logo-imgSlack', s: .7, x: 75, y: 2783 }, 
    {cssClass:'logo-imgSpotify', s: .7, x: 118, y: 1519 }, 
    {cssClass:'logo-imgSquarespace', s: .7, x: 233, y: 1071 }, 
    {cssClass:'logo-imgTarget', s: .7, x: 148, y: 1773 }, 
    {cssClass:'logo-imgTed', s: .7, x: 385, y: 2098 }, 
    {cssClass:'logo-imgTheGuardian', s: .7, x: 244, y: 2423 }, 
    {cssClass:'logo-imgTwitch', s: .7, x: 385, y: 901 }, 
    {cssClass:'logo-imgUber', s: .7, x: 111, y: 624 }, 
    {cssClass:'logo-imgWeTransfer', s: .7, x: 103, y: 145 }, 
    {cssClass:'logo-imgWish', s: .7, x: 367, y: 413 }, 
    {cssClass:'logo-imgXero', s: .7, x: 251, y: 2805 }, 
    {cssClass:'logo-imgYelp', s: .7, x: 75, y: 1990 }
];

class Bubble {
    constructor(index, {cssClass, x, y, s=.9}){
        this.index = index;
        this.x = x;
        this.y = y;
        this.scale = s;
        this.cssClass = cssClass;

        this.el = document.createElement("div");
        this.el.className = `stripe-bubble ${this.cssClass}`;

        marqueeEl.appendChild(this.el);
    }

    update(){}
}

class BubbleMarquee{
    constructor(settings){
        this.bubbles = [];

        settings.forEach((setting, index) =>{
            this.bubbles.push(new Bubble(index, setting));
        });
    }
    update(){}
}

Okay, now off to animating the bubbles!

Step 4: Animation

You could use absolute positioning properties like top and left but it'd be really expensive in terms of calculations, instead of that, you could use transform to move the elements.

this.el.style.transform = `translate(${this.x}px, ${this.y}px) scale(${this.scale})`;

As for the animation, you could use setInterval but don't do that, stop here and read about requestAnimationFrame.

constructor(settings){
    this.bubbles = [];

    settings.forEach((setting, index) =>{
        this.bubbles.push(new Bubble(index, setting));
    });

    requestAnimationFrame(this.update.bind(this));
}

update(){
    this.bubbles.forEach(bubble => bubble.update());
    this.raf = requestAnimationFrame(this.update.bind(this));
}

Alright, you've done it! It's animating and looks cool but hey, did you notice that there animation doesn't look stale but is more organic-like? That's because they have added some random movement to each bubble.

I took another peek at their code, I found out that they were using Perlin noise to smoothen the animation movements. Unlike, Math.random(), I got to know that it's an algorithm used to generate a sequence of randomness that has some order, which helps create a smooth, organic movement.

I didn't implement the algorithm instead I made use of an existing implementation written by Seph Gentle found on GitHub.

This is how your update() method should look like after adding the Perlin Noise:

update(){
    this.noiseSeedX += noise_speed;
    this.noiseSeedY += noise_speed;

    var randomXPos = noise.simplex2(this.noiseSeedX, 0);
    var randomYPos = noise.simplex2(this.noiseSeedY, 0);

    this.y -= scrollingSpeed;

    this.xNoisePos = this.x + (randomXPos * noise_amnt); 
    this.yNoisePos = this.y + (randomYPos * noise_amnt); 

    if(this.y < -500)
    {
        this.y = canvas_width;
    }

    this.el.style.transform = `translate(${this.xNoisePos}px, ${this.yNoisePos}px) scale(${this.scale})`;
}

After adding that, you have finally achieved what you wanted! Oh, you can find the source code for this project on my GitHub repository.

Conclusion

I hope you enjoyed reading this blog article and learnt something new. If you have questions, please send me your thoughts and I would be happy to help you out!

Thank you for reading!

Stay tuned for more!

I've never played Poker and don't think I ever will because I'm not a fan of gambling and placing bets. However, I ran into an interesting problem on Project Euler that led me to write a poker hand analyser to determine the rank of each hand.

Before writing this article, I didn't know anything about cards or Poker, I had to do some research on Wikipedia about it. So, forgive me if there's any information that's not accurate in the article.

Poker Hands

From what I had understood, a hand is a set of five cards and each card has a rank, which is in the order shown below:

Cards are valued in the order of lowest to highest (Left to Right):
2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King, Ace

Based on the card pattern formed in each hand, the ranking category is determined and it's ranked within it's category based on the ranks of it's cards.

Hand Ranking Categories

In Poker, there are about 10 ranking categories from lowest to highest:

• High Card
• One Pair
• Two Pairs
• Three of a Kind
• Straight
• Flush
• Full House
• Four of a Kind
• Straight Flush
• Royal Flush

Before diving into the code snippets, I wrote a library named poker_lib.py which contains all the methods used in the code snippets.

To make things simple, I created a class named Card that has two attributes, face and suit, with namedtuple() as it's datatype.

High Card

This hand contains no pairs and it doesn't fall into any other category.

def high_card(hand):
    # collect all faces from each card
    allfaces = [f for f,s in hand]

    #sort the faces and show the highest card
    return "high_card", sorted(allfaces, key=lambda f: allfaces.index(f), reverse=True)[0]

One Pair

This hand contains two cards of one rank and three cards of three other ranks.

def one_pair(hand):
    allfaces = [f for f,s in hand]
    allftypes = set(allfaces)

    # collect pairs
    pairs = [f for f in allftypes if allfaces.count(f) == 2]

    # if there's more than one pair
    if len(pairs) != 1:
        return False

    allftypes.remove(pairs[0])
    return 'one-pair', pairs + sorted(allftypes, key=lambda f: face.index(f), reverse=True)

Two Pairs

This hand contains two cards of one rank, two cards of a second rank and one card of a third rank.

def two_pair(hand):
    allfaces = [f for f,s in hand]
    allftypes = set(allfaces)

    # collect pairs
    pairs = [f for f in allftypes if allfaces.count(f) == 2]

    # if there are more than two pairs
    if len(pairs) != 2:
        return False

    p1, p2 = pairs
    # get the difference using sets
    other_cards = [(allftypes - set(pairs)).pop()]
    return 'two-pair', pairs + other_cards if(face.index(p1) > face.index(p2)) else pairs[::-1] + other_cards

Three of a Kind

This hand, also known as trips or a set, contains three cards of one rank and two cards of two other ranks.

def three_of_a_kind(hand):
    allfaces = [f for f,s in hand]

    uniqueRanks = set(allfaces)

    if len(uniqueRanks) != 3:
        return False

    for f in uniqueRanks:
        if allfaces.count(f) == 3:
            uniqueRanks.remove(f)
            return "three-of-a-kind", f

    return False;

Straight

This hand contains five cards arranged in a sequential order but not all of them have same suits.

def straight(hand):
    ordered = sorted(hand, key=lambda card: (faces.index(card.face), card.suit))
    if ''.join(card.face for card in ordered) in ''.join(face):
        return 'straight', ordered[-1].face
    return False;

Flush

This hand contains five cards of the same suit and not necessarily arranged in sequential order.

def flush(hand):
    allfaces = [f for f,s in hand]

    first_card = hand[0]
    other_cards = hand[1:]

    if all(first_card.suit == card.suit for card in other_cards):
        return 'flush', sorted(allfaces, key=lambda f: face.index(f), reverse=True)

    return False

Full House

This hand, also known as full boat or a boat, contains three cards of one rank and two cards of another rank.

def full_house(hand):
    allfaces = [f for f,s in hand]

    rankFrequency = pe_lib.character_frequency(allfaces)

    # if there are 2 types of ranks and there's a card with 1 pair and 3 of a kind
    if len(rankFrequency) == 2 and (rankFrequency.values()[0] == 2 and rankFrequency.values()[1] == 3):
        return 'full-house'

    return False

Four of a Kind

This hand, also known as quads, contains four cards of one rank and one card of another rank.

def four_of_a_kind(hand):
    allfaces = [f for f,s in hand]

    # create a unique set of ranks
    uniqueRanks = set(allfaces)

    # if there are more than 2 ranks, it's not four of a kind
    if len(uniqueRanks) != 2:
        return False

    for f in uniqueRanks:
        # if there are 4 faces, it is four of a kind
        if allfaces.count(f) == 4:
            uniqueRanks.remove(f)
            return "four-of-a-kind", f

    return False

Straight Flush

This hand contains five cards arranged in a sequential order with all cards having the same suit.

def straight_flush(hand):
    # sort the cards based on the face rank of each card
    ordered = sorted(hand, key=lambda card: (faces.index(card.face), card.suit))

    first_card = ordered[0]
    other_cards = ordered[1:]

    # check if all are of the same suit
    if all(first_card.suit == card.suit for card in other_cards):
        # check if they are in sequential order
        # compare the ordered faces substring with the face list (which is converted to string)
        if ''.join(card.face for card in ordered) in ''.join(face):
            return 'straight-flush', ordered[-1].face
    return False

Royal Flush

This hand contains the royal ranks in sequential order in the same suit.

def royal_flush(hand):
    royalface = "TJQKA"
    # sort the cards based on the face rank of each card
    ordered = sorted(hand, key=lambda card: (faces.index(card.face), card.suit))

    first_card = ordered[0]
    other_cards = ordered[1:]

    # check if all are of the same suit
    if all(first_card.suit == card.suit for card in other_cards):
        # check if they are in sequential order
        # compare the ordered faces substring with the face list (which is converted to string)
        if ''.join(card.face for card in ordered) in royalface:
            return 'royal-flush', ordered[-1].face
    return False

Conclusion

It was a fun project to work on and I learnt new styles of array and string manipulation techniques using Python.

Inspired by this, I'm planning to create an interactive version of this project using Javascript and talk about it on another article.

The code for this program can be found in my GitHub repository.

Hope you liked reading this article!

Stay tuned for more!

In order to get good at anything, not only at programming, it would require a good amount of practice. Three years ago, I started out solving Project Euler problems on C++ and Java for fun, which taught me how to write good code in short of amount of time.

However, you'll notice that I have written the solutions using Python as I wanted to improve my Python coding skills and yes, just to code for fun!

This blog article will have all the links available to everyone to learn from and understand the solutions and you can access it on my GitHub repository.

Solution code

In addition, I have created a math library module named pe_lib.py, which contains all the mathematical functions that are used in every problem. I find it pretty useful as it allows me to re-use some of the functions instead of re-writing it for each solution.

Hope you'll find these solutions to be useful!

Stay tuned for more!

I don't really read fiction books a lot but this is one of my favorites. I finished reading this book last week and it had inspired me and made me feel positive towards the goals that I wanted to chase in my life.

Why did I choose to read it?

On one fine evening, I was going through my endless list of bookmarks and I stumbled upon a link, which had a collection of book recommendations on what are most influencial books for software engineers to read and I found this in the list of recommendations. So, I thought of trying it out on my new Amazon Kindle Paperwhite too.

About the story

The book is written by Paulo Coelho. As mentioned in the description, it's about a young shepherd named Santiago who starts a journey after having dreams about finding treasure in the Pyramids of Egypt. Without spoiling a lot, he meets several people such as an old man who claims to be a king, a woman of the desert that he falls in love with and an alchemist who wants to learn the technique of converting lead to gold.

In the first few pages, the quotes said by the characters really stuck into my head:

Whoever you are, or whatever it is that you do, when you really want something, it's because that desire originated in the soul of the universe. It's your mission on earth.

Funny but when I relate myself to the story, I'm currently on my own Personal Legend. Just like the shepherd himself, I started my journey with a vision and a willingness to pursue it. I didn't have the faintest clue on how to achieve my goals but I knew that I can and had to do it.

Everything is clear and everything is possible!

Santiago learns different lessons throughout his journey. One of the first lessons is when he had a conversation with a mysterious king. The king told the boy that everyone used to tell him, when everyone is young, they know what their Personal Legend is and as he quotes:

At that point in their lives, everything is clear and everything is possible. They are not afraid to dream, and to yearn for everything they would like to see happen to them in their lives. But as time passes, a mysterious force begins to convince them that it will be impossible for them to realize their Personal Legend.

It relates a lot to the real world scenario because I see a lot of people who want to settle in their life. Safe place to live, marriage, kids, comfortable job, $401K plans and then off to retirement. But what happens after that? Settled in life? Yes, but did they achieve their dreams? Now, that's a question not everyone can answer, can they?

Listen to your heart and soul

In some parts of the book it states that once you stop listening to your heart and soul telling you to chase your dreams, it will, spontaneously, appear again for the next year or so and then, your heart and soul will stop talking to you and the dream fades away.

Conclusion

It's a simple story that has got elements of economy, love, war and pursuit of dreams. We all have our own highs and lows in life and I would recommend this book as a must-read for anyone who's currently trying to figure out their actual purpose in life. As you read the book, you'll relate yourself to Santiago and you'll start recommending this book to your friends too!

Hope you liked reading this article!

Stay tuned for more!

In our daily life, the tools we use do matter a lot, they help us solve problems, learn new things and complete our tasks. I usually read blogs of other programmers as well, by doing so, I get to learn about the different technologies and products they use and ultimately, it has helped me take inspiration to change myself too.

I thought of writing an article about the tools that I use on a regular basis, so here we go!

Hardware

• iPhone 5s
• Dell XPS 13 9360
• Apple earphones

iPhone 5s

I used to have a Samsung Galaxy Pocket, it was a really slow phone that made me hate Android OS. When I got the iPhone 5s, I never turned back. Not that I'm an Apple fanboy (Well, yes I am) but I believe it is one of Apple's best iPhones till date. The build quality is great. It's still one of those iPhones that has a headphone jack and also, it has a really nice form factor.

Dell XPS 13 9360

Before purchasing this laptop, I was going to buy a 13" MacBook Pro 2017 but the internet convinced me that it might not be the right choice as it had a lot of flaws like the unresponsive butterfly keyboard, less ports and in terms of specs, it was a bit outdated.

So I thought of going for my next choice with the following specs:

• Intel i7 @ 2.4Ghz 7th Generation
• 256GB Solid State Drive
• 8GB RAM
• 13.3" Inch FHD Display

It came with a bloated Windows 10 and then later, I replaced it with Ubuntu 18.04 LTS, you can read about it here.

The laptop is very lightweight and portable. It has a really, really good display that is equivalent to the infamous Apple's Retina Display. Thanks to the specs, it runs really fast and I use it primarily for developing software.

If you are planning on getting one, I do recommend it!

Apple earphones

I got these earphones with my iPhone 5s, the sound quality is pretty decent and yes, it portable enough for me to listen to my favorite soundtracks on the go.

Software

• Ubuntu 18.04 LTS
• Sublime Text 3
• VIM
• Terminal
• Spotify
• XAMPP Control Panel
• Google Chrome
• Git
• Adobe Illustrator
• Figma

Ubuntu 18.04 LTS

I don't hate Windows, in fact, I do use it at work and for graphic design and entertainment purposes but I personally like using Linux as my development environment.

I chose Ubuntu because it has a strong community and compared to other distributions, it has good support for Dell XPS hardware.

Apart from that I've got three more things to say: Open source. Secure and Developer-Friendly.

Sublime Text 3

I have been using Sublime Text since my university days, it's still one of my favorite text editors that I use at home and work. It has really good features such as:

• Powerful keyboard shortcuts
• Lightweight
• Fast startup
• Good selection of themes and configurable
• Able to edit multiple lines at the same time

Oh, I wrote this article on Sublime Text!

VIM

I read a lot of people talking about it and I thought giving it a shot to explore VIM and I must say, it's really a game changer.

Although, it's not an IDE like Emacs but it's quite a powerful text editor. It has really powerful keyboard shortcuts, it's configurable and it's quite handy if you wanted to edit any file on the terminal.

Terminal

Ahh, the terminal. The application that people instantly assumes that it's used for hacking. Well no, it's not only used for hacking.

Yes, it's cool to use and know the command-line but I use it to automate my tasks using Bash, SSH, updates and upgrades using apt-get, downloading packages and software, editing text using VIM and much more.

Spotify

Spotify wasn't available in the United Arab Emirates until November 2018. I use it during my coding sessions to stay focused. I'm a free user but I get to listen to all my favorite tracks. The AI recommended playlists are pretty cool too!

XAMPP Control Panel

Whenever I'm developing a PHP + MySQL web application, I use this as it comes with the Apache server. If you're using it on Linux, you might have to spend some time configuring the user access permissions.

Google Chrome

My preferred browser and I use it everyday. I love using the Inspect tool to debug JavaScript and CSS code.

It has good extensions for daily use:

• Adblock
• Postman
• React Developer Tools
• Amino: Live CSS Editor

And yes, it does have a huge appetite for your RAM!

Git

I have heard of a lot of systems but using Git for code versioning and source control is pretty helpful especially if you want to host your projects or maintain your code portfolio on GitHub.

Adobe Illustrator

I have been using it since I was 15 years old, I remember that one of first vector art was a gas mask and from there, I taught myself how to use different tools like the Pen Tool, the Shape Builder and much more. I don't think that there can be anyone that can top Illustrator in the Digital Design industry.

Figma

When I was worried that Sketch is not available on Linux or Windows, I discovered Figma. It's one of the best UI tools that I have ever used. It helped me build my UI/UX skills really quick and I felt really comfortable designing user interfaces and components before actually coding it.

Conclusion

Just to make a note, these are my essential tools and this article is not intended to change your mind, your mileage can vary.

Hope you guys liked reading this article!

Stay tuned for more!

Hello, 2019!

Uhh, I guess it's a bit too late, but better late than never!

Lately, the concept of using a static site generator has become the new rage. This blog that you are seeing now is powered by a custom-built static site generator written on Python and trust me, I love it!

Why shift from a dynamic to static website?

It took me some time to make a decision on why I would need to make a shift from a dynamic website to a website that serves static files, here are some of my reasons:

• Edit posts using Markdown
• Increased speed
• Eliminates the use of CMS and Databases
• Pre-generated and will be served on request without any delay
• Lightweight
• Ease of Maintenance
• More secure

Apart from that, I wanted to understand the concept of Static Site Generators, so I thought of writing a static site generator using Python.

Sure, there are many static site generators available online but I always like to be the curious cat!

How it works

Nothing complicated, the concept is pretty simple. All you have to do is write down your articles in Markdown and when you execute your static site generator, it will compile all your posts from your directory into individual static files using a template, which can then be served to your visitors.

For example, let's say you have a markdown file named hello-world.md and you wrote your content:

title: Hello World
date: 2019-03-01 20:00

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut sollicitudin dui, 
pulvinar vulputate nibh. Cras eu nunc mauris. Vestibulum quis diam at diam feugiat semper vitae at sem. 
Mauris in orci iaculis mauris semper gravida at nec augue. Phasellus luctus accumsan velit, 
in molestie odio luctus at. Curabitur neque erat, pretium vitae condimentum placerat, sodales eu 
nisi. Cras pretium nulla ac est interdum, vitae tempor mauris ornare. 
Nullam tortor nisi, scelerisque vel purus id, dictum finibus erat. Nulla tincidunt egestas 
sodales. Sed sit amet elit placerat, pellentesque est in, bibendum enim. Nam dolor lorem, venenatis sit 
amet sem at, sagittis feugiat risus. Fusce turpis felis, sodales a tortor vitae, volutpat semper 
justo. Donec porta id mi non porttitor. Fusce id est sit amet leo consectetur consequat.

Also, this is your template:

<html>
    <head>
        <title>{{ title }}</title>
    </head>
    <body>
    <div>Published on: {{ date }}</div>
    {{ content }}
    </body>
</html>

And when you execute the application, this is what happens:

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
    <div>Published on: 2019-03-01 20:00</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut sollicitudin dui, 
    pulvinar vulputate nibh. Cras eu nunc mauris. Vestibulum quis diam at diam feugiat semper vitae at sem. 
    Mauris in orci iaculis mauris semper gravida at nec augue. Phasellus luctus accumsan velit, 
    in molestie odio luctus at. Curabitur neque erat, pretium vitae condimentum placerat, sodales eu 
    nisi. Cras pretium nulla ac est interdum, vitae tempor mauris ornare. 
    Nullam tortor nisi, scelerisque vel purus id, dictum finibus erat. Nulla tincidunt egestas 
    sodales. Sed sit amet elit placerat, pellentesque est in, bibendum enim. Nam dolor lorem, venenatis sit 
    amet sem at, sagittis feugiat risus. Fusce turpis felis, sodales a tortor vitae, volutpat semper 
    justo. Donec porta id mi non porttitor. Fusce id est sit amet leo consectetur consequat.
    </body>
</html>

The generator just parsed your article on Markdown and put the details on the template and tada, the article is generated. Easy peasy!

The next step is to deploy it, I wrote a bash script to deploy all static files via FTP onto my server.

It's a simple but powerful idea and gives me a lot of flexibility to create my future blog posts with each having a different look (not always, but sometimes).

Refreshed look, Creative energy

Although, the old one was good and minimal, something felt empty about it and I decided to change it.

I experimented with different fonts and chose Fira Sans as the blog's primary font. As for colors, I took inspiration from Dropbox's recent change in branding and they combined various colors to create dynamic elements to their brand.

So, I wrote a pattern generator on Javascript that would create a background image for every blog post and make it look colorful (See above).

Also, I have been exploring the concept of Generative Art, I found it really interesting especially it's creative and mathematical aspect. I have plans on replacing these colorful patterns with the random generative artworks, after all, I don't aim to make it look boring.

Discovery and Experimentation

I have been working on some side projects like Pac-Man clone, a text-editor based on C and a terminal-based to-do list application on Linux, learning and customizing VIM, tinkering with Vagrant boxes, Capture-The-Flags challenges, experiments with UI frameworks like ReactJS and so much more.

Hang in there, it's not over!

It's a work-in-progress and I'm trying to make my blog to be more creative, interactive and colorful.

I will be hosting a separate section called "Projects", which is currently under the works, it will contain all of my projects, UI/UX components to play around with, games and much more. I hope it will be the coolest section of this blog.

Hope you liked reading this article and the new changes!

Peace Out!

Ah, it's been a long time since I had posted anything on my blog. In today's article, I will be talking about my switch from Windows 10 to Ubuntu 18.04 LTS.

Why did I make the switch?

I grew up using different versions of Windows OS and my favorite one is Windows 7. I use Windows 8.1 at work and macOS High Sierra on my mid-2010 MacBook Pro at home.

Recently, I bought myself a Dell XPS 9360 for serious development. Below are the specs:

• Intel Core i7 @ 2.4Ghz 7th Generation
• 256GB SSD
• 8GB RAM
• 13.3" Inch Full-HD Display

However, I did have an issue with it, it came pre-installed with a bloated Windows 10.

I tried giving Windows 10 a shot even after reading several blog posts on how Microsoft collects data, forces updates that users can't opt out of and so on.

Then one fine day, I left my laptop to download some files and then Windows decides to update without asking for my permission. My download got disrupted and I finally decided to make the switch.

Besides that, I wanted to have a good environment that's secure, programmer friendly and wanted to use the Terminal, which is a programmer's sweet spot for automation, executing scripts and accessing remote machines and so on.

Choosing a Linux distribution

At first, I wanted to try out Arch Linux for it's strong community and amazing configurations but I thought of taking a safe side by trying out Ubuntu.

I downloaded the latest distribution from the official website and created a bootable USB drive. Later, I changed my laptop's BIOS configuration to Legacy mode from it's UEFI Secure Boot mode, which was a bit annoying.

After everything was done, I plugged in the bootable USB drive and voila, Ubuntu's loaded on my screen.

Check for Hardware Compatibility

If you've read some articles, you might find some people writing out comments that when you install Linux on your computer, you might face some hardware compatibility issues. You can be detect it beforehand by trying it out on a bootable USB drive.

Luckily, thanks to Dell's hardware support for Linux, it detected all of my laptop's hardware without any issues.

I decided to go with a minimal installation as I don't want to have any bloatware on my computer.

Hello Ubuntu!

Ubuntu's new user interface looks really clean and minimal and it looked really vibrant in my laptop's Full HD Display.

The boot time was fast and it took a mere few seconds to display the login screen. As soon as I logged in, I installed the necessary development tools such as gcc, python, perl, git, node.js, npm package manager, Emacs text editor and more.

Conclusion

Well, every operating system has it's own pros and cons, likewise, Linux has a few cons such as that I won't be able to use Adobe applications like Photoshop and Illustrator but that's not a big deal for me as my focus is purely on development.

If you're a programmer and serious about development, I would strongly recommend you to try it out and you'll never want to return back to Windows again.

Hope you liked reading this article!

Adios Amigo!

It's something that I had in my mind for a long time but never got the time to execute it but finally, I decided to get out of my comfort zone to learn new concepts and techniques that would enable me to solve new problems. Hence, I chose to study Artificial Intelligence.

I did some online research and found out a really good book named Artificial Intelligence, A Modern Approach (3rd Edition) by the Stuart Russell and one of my favorite computer scientists, Peter Norvig (Director of Research at Google) to learn about it's concepts and techniques. The book has 1000+ pages and it's a book used for undergraduate and graduate level courses in university.

My current knowledge of Artificial Intelligence is pretty basic (e.g: write game AI) and I want to learn more about it and be able absorb any information related to it and build toy AI projects.

I've completed the first chapter of the book, so let's dive in because this going to be a long read.

What is Artificial Intelligence?

We read about it in the news, it's being deployed in our mobile applications that we use everyday such as Facebook, Instagram, Twitter, Reddit and so on to filter out graphic content, fake information and insensitive political content. It's also being used in games such as chess, scientific research, diagnosis of several diseases and self-driving cars.

But do we know what is it? According to Google Search, it means:

The theory and development of computer systems able to perform tasks normally requiring human intelligence such as visual perception, speech recognition, decision-making and translation between languages. 

It encompasses a huge number of fields and sub-fields and AI is already the next big thing that it's shaping our everyday life.

Approaches towards AI

The book states that there are four types of approaches when it comes to creating an AI:

Acting Humanly

Proposed by British computer scientist Alan Turing, the Turing Test approach was designed to provide a functional definition of Artificial Intelligence. The test is proved positive only when a human is unable to tell the difference between the results of a computer or a human. In order to think like a human, it should possess the following capabilities:

• Natural Language Processing to enable communication in any language with the human
• Knowledge Representation to store what it knows or hears
• Automated Reasoning to make conclusions based on the repository of information to answer questions
• Machine Learning to learn and adapt to new patterns and extrapolations

It is to be noted that the test deliberately avoided interaction with the human because physical interaction with the human wasn't necessary for intelligence.

Then came another test called Total Turing Test, this was made to test the computer's ability of visual perception. The computer passes this test when it's possess the following abilities:

• Computer Vision to be able to perceive and identify objects
• Robotics to be able to manipulate physical objects

The abilities mentioned above, composes most of what modern AI is today and Turing deserves a huge credit for designing this test that still remains relevant for more than 60+ years.

Thinking Humanly

Do we know how humans think? Maybe, but for us to be able to determine that, we would need to achieve a deep understanding of the human mind works. There are a few ways such as:

• Introspection by catching our own thoughts as they pass by
• Psychological experiments by observing the actions or behavior of a human
• Brain imaging by observing the brain in action

Once we have sufficient information, it's possible to theorize that a computer program behaves like a human. Cognitive Science enables you to combine both computational models of an AI and psychological experimentation techniques to provide testable theories as to how the human mind works.

Thinking Rationally

Greek Philosopher Aristotle attempted to arrange information based on irrefutable evidence based on the process of reasoning. His rules of inference a.k.a syllogisms (a form of reasoning in which conclusions are drawn from various propositions or a set of premises) provided patterns that yielded correct conclusions from correct premises. For example: "Socrates is a man; All men are mortal; therefore, Socrates is a mortal being". These laws of thought initiated the study of logic, which gave hope to 19th century logicians to help create intelligent systems.

However, there are two main obstacles to this logical approach. Firstly, it's difficult to convert informal information into formal terms required by logical notations especially when the information isn't 100% certain. Secondly, being able to solve a problem in theory vs. solving a problem in practice are two different things. You can have a computer that can solve a problem with a few hundred facts yet use up all of it's resources.

Acting Rationally

This is focused on creating intelligent agents that can perform various tasks like being able to operate autonomously, perceive objects, adapt to change, create new goals and pursue them. A rational agent is an agent that acts to achieve the best expected outcome.

Making the right conclusions based on evidences i.e. correct inferences is part of a rational agent because to act rationally, an agent must be able to reason with logic to reach to a conclusion for a given action to achieve one's goals.

However, it doesn't necessarily that it's always "correct", sometimes, it has there's no such thing as the "right" thing to do but something must be done.

The skills needed for a Turing Test allows an agent to act rationally especially on making good decisions using Knowledge Representation and Automated Reasoning, generating intelligible sentences using Natural Language Processing for a complex society, adapting to change and generating effective behavior using Machine Learning.

But, there are some advantages to this approach. Firstly, it's more general in terms of the logical approach (mentioned in Thinking Rationally). Secondly, it's more open to scientific development compared to human behavior (mentioned in Acting Humanly) and human thought (mentioned in Thinking Humanly). The standard rationality of an agent is purely mathematically defined and completely general whereas human behavior adapts to a specific environment.

Later, the book states that it's focus is going to be based on the general principles of rational agents and on components for constructing them.

Is AI a science, or is it engineering?

As I was reading the book, it was fascinating to see how various disciplines have contributed ideas, techniques and viewpoints to the field of Artificial Intelligence. The following disciplines are:

• Philosophy
• Neuroscience
• Mathematics
• Economics
• Linguistics
• Psychology
• Computer engineering
• Control theory and cybernetics

Each disciplines had thoughtful questions like How does a human brain work? How are valid conclusions drawn from formal rules? How can we build an efficient computer? How to think and communicate in one's language? How does the brain process large amounts of information? How do humans and other living things think and act? How does language relate to thought?

This part of the book is really long but it was a good way to understand about it's early foundations.

How is it useful today?

Well, that's not very easy to answer because it's being used in multiple fields and sub-fields. There are so many applications such as:

• Self Driving Cars
• Speech Recognition
• Facial Recognition
• Fighting Malware and Spam bots
• Filtering graphic content and fake information from social media
• Game playing AIs for different board games like Checkers, Go and Chess

All of this used to be science fiction but thanks to the advancements of Mathematics, Science and Engineering, it's become a reality in today's era.

Conclusion

Well, I don't know if this is one of the longest articles I have ever written but I really did enjoy writing this because this made me read the chapter again and gained a better understanding of the concepts.

I will be writing more articles about it, write algorithms and build toy  implementations of Artificial Intelligence applications.

In fact, I wrote this article to answer all, if not, most of the questions from the exercises section of this chapter.

Hope you liked reading this article!

Stay tuned for more!

Extras

• Computing Machinery and Intelligence by Alan Turing