megacolorboy

Abdush Shakoor's Weblog

Writings, experiments & ideas.

Using IIFE in JavaScript

IIFE a.k.a Immediately-Invoked Function Expression — is a way to execute functions as soon as the function is created.

Using IIFE, you can easily isolate declared variables away from the global scope.

This is how the syntax would look like:

// ES5 Standard
let foo = (function(){
    let message = "Hello world"
    console.log(message);
})();

They can be defined with arrow functions as well:

// ES6 Standard
let foo = (() => {
    let message = "Hello world"
    console.log(message);
})();

According to MDN Docs, it's a design pattern a.k.a Self-Executing Anonymous Function. There are two parts to this:

  1. The function that's enclosed within the Grouping Operator (), which would prevent it from polluting the global space and access to the variables within it's scope.

  2. The (); will create the Immediately Invoked Function Expression on-the-fly.

When to use it?

There are many interesting cases such as if you are following the Module Pattern especially if you want to avoid polluting the global namespace or just that you don't want your code to interfere with other code thus ensures code safety.

Readings

9th August 2022 — Blogmarks

7th August 2022 — Blogmarks

  • ImHex — A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.
  • Bisqwit — Found this cool programmer on YouTube who writes game emulators and 3D renderers from scratch. Inspiring guy!
  • Web Browser Engineering — I came across this site recently and it was quite intriguing. I really wanted to get my hands-on this tutorial and learn more about Web Browsers. Thank you Pavel Panchekha for this!

25th July 2022 — Blogmarks

  • Beej's Network Guide — Beej has updated the classic Linux Network Programming Guide. Used to read back in my university days. Time to read it again 🤔
  • Qubes OS — A free open-source, security-oriented operating system. Quite interesting. I guess, it's targeted towards the paranoid 🤫
  • Every line of code is written without a reason, maintained out of weakness, and deleted by chance. — Jean-Paul Sartre's Programming in ANSI C

Built a new generative art pattern generator

Thought of giving a colorful touch to the site.

Ten days ago, I launched a new makeover for the blog and I felt that it needed a little bit of a colorful yet unique touch.

Recently, I started playing around with the concept of Generative Art and have been studying a lot of about various patterns like:

  • Bauhaus
  • Truchet Tiles
  • Piet Mondrian

So, I thought of writing a new pattern generator using CSS and JavaScript that would assign each article a unique, colorful pattern. Though, it's not yet quite complete, I would consider it to be an experimental feature to see if it goes well with the site.

What do you think about it? Does it look good? What kind of patterns should I add to my generator?

Interested on how it's implemented? Have a look at the source code.

Hope you found this article to be inspiring!

Download a webpage along with it's assets using wget

I wanted to download a webpage along with it's assets and scripts, I tried using Chrome's Save as... option but it wasn't working as expected.

I did a little googling and thought of using wget to do the job and it worked. Here's the command I used:

wget -p -k -H --nd https://www.example.com

Let's see what do those flags mean:

  • -p: Downloads all the necessary files to properly display the downloaded HTML page.
  • -k: After the download is complete, it converts the links in the document to make them suitable for local viewing.
  • -H: This would download files that spans different hosts.
  • --nd: While retrieving files recursively, it will not create a hierarchy of directories and downloads the files into a single directory instead.

If you open index.html directly on the browser, the assets might be broken as the -k flag doesn't seem to make the assets relative to the root directory. In order to view it, you can view it on a localhost server like WAMP, XAMPP or if you are using Python, you can type python -m http.server and view your downloaded file.

Might be a bit messy but gets the job done.

16th July 2022 — Blogmarks

  • Bear Blog — A privacy-first, no-nonsense, super-fast blogging platform. Not really needed for me but quite an interesting platform.
  • Becoming a good engineer is about collecting experience. Each project, even small ones, is a chance to add new techniques and tools to your toolbox. Where this delivers even more value is when you can solve problems by pairing techniques learned on one project with tools learned working on another. It all adds up. — Addy Osmani
  • Interactive Mechanical Contraption in pure CSS — Believe it or not, it's unreal. It doesn't even look like it's done using CSS. Love it! ❤️
  • Defensive CSS — I came across this site two days ago. I like how Ahmad Shadeed describes different CSS patterns in detail.

A new makeover for 2022

Function over fashion. Minimal. Scraped out the redundant and added some new features.

I have been reading a lot of articles and blogs than writing these days, thanks to my hectic schedule, I barely get the time to work on my blog.

Initially, I thought of porting my blog to Django or Hugo but I decided to tune up my blog engine by adding new features like Tags/Categories and Archives, optimizing the time-taken to convert Markdown to HTML files and making it more flexible for the future.

Also, I revamped the entire blog's layout by writing a new theme and making it a bit more responsive than it previously was. However, I retained the colors and the fonts used. Thank you Rasmus for the amazing Inter font ❤.

Still got some work to do

Yes, new layout and all but there's still few left in pending and hopefully, I'd complete it by the end of July 2022. But here's what's left:

  • Thanks to Simon Willison's Blog, I took the idea of Blogmarks and it's basically a collection of articles and quotes that I find interesting and would share it here.
  • Planning to move all project/widget based posts to a section called "Projects", which would also have a different layout.
  • Book reviews and a new resume template
  • Dark theme with a better color palette (I wasn't happy with the color scheme that I wrote previously.)

Wait, where's megacolorboy?

For the time being, I thought of removing my username "megacolorboy" from the Masthead for the sake of professionalism and hey, I ain't a kid no more, so time to grow up, you know?

I'd like to thank my beautiful wife for letting me work on my passion even though it might annoy her at times, I love her for that ❤!

Hope you like the new makeover!