Forem: Amit Merchant

Using GitHub as a Content Delivery Network

Amit Merchant — Tue, 17 Sep 2019 12:01:44 +0000

This is a quick write up on how I've started utilizing GitHub as a Content Delivery Network(sort of) and how you can do the same.

Usually, CDNs are used to have a content delivered on your website in a fast manner and to save some space on your server from resources such as images, documents etc. I've tried to use GitHub as a CDN for somewhat similar reasons. I'm running this blog on GitHub pages and as you might know GitHub only allows contents under 1 GB per repository. I didn't wanted to utlize my GitHub page's site's storage to store images that I end up using on the blog. So, I've figured out a way.

Repository as a CDN (RaaC) [?]

I thought of creating and using an another GitHub repository where I would store all the image resources and which can act as a mean to deliver content on my blog whenever requested. I created a repository named cdn which is actually a bare bone repository. I would add images and resources in here.

Now, as I've configured my GtHub pages site to work with my custom domain, I can easily access any content on this site using URL https://www.amitmerchant.com/cdn/<resource name in the repos>. For instance, There's an image called bulb-min.jpg exists in the repository which I can access using the following URL: https://www.amitmerchant.com/cdn/bulb-min.jpg

And there you have it! Your free and instantly available CDN ready to use in few clicks. Easy-peasy!

This way I can save up the space on my original GitHub pages site which I don't want to get exhauted under 1 GB of limit and in case if the "cdn" repository also gets exhasuted, I can always create an another repository named "cdn2" or something like that. ;)

In closing

I'm sure many here will find this funny but trust me it's highly functional and one can surely use it as a CDN alternative which they can spin up in minutes. I hope this would be useful for someone who is looking for a quick CDN service. :)

Until next time!

Originally published at https://www.amitmerchant.com/using-github-as-content-delivery-network/

How to pick topics for tech blogging

Amit Merchant — Thu, 05 Sep 2019 11:18:59 +0000

If you're a tech blogger(or any blogger in general) you must have faced this issue where you find yourself in a situation when you don't have anything to write about. You feel like a blank slate and got demotivated. This situation is called as a Writer's block.

Writer's block is a condition, primarily associated with writing, in which an author loses the ability to produce new work, or experiences a creative slowdown.

I've been blogging for three years now and I admit I've been to this situation many a times during this period. I wanted to write an article but I just didn't have a subject to write about. But then slowly, over the time, I've found some tricks using which I was able to find topics and once when I've a subject in hand, it's only a matter of researching on that topic and write about it. I'm going to list down those techniques in this article. Hope someone will find them useful.

Look into your day-to-day work

I'm a software engineer and I work mostly with PHP, JavaScript and things around these languages. So, the other day I was working on a feature and there came a situation where I needed to use PHP generators. This was the first time that I was using this feature. I've fixed the issue in my application using generators. But I wanted to learn more about it. So, I've researched more about it and the idea strikes! I got a subject to write about. I've written a whole article about generators. Basically, my thoughts, my take-on the subject.

You can find topics/subjects similarly. Just have a closer look at the work you do every day and you might just find the next subject for your article.

Go through the documentations

The other way that I'm following to bring ideas for my blog is to go through the documentation of things I work on. For instance, I work with Laravel a lot. I try to go to the Laravel's documentation, pick a certain topic from it and play around with it at least once a day. The benefit of this exercise is that I got to know more about Laravel and its features which I even didn't get chance to use in my work and in turn ideas to write articles. This applies to even language documentations as well. Who knows you might find a gem of a feature buried deep down into the documentation?

StackOverflow is your friend

You might have only visited StackOverflow.com looking for the answers that you'd only find there. But you might get surprised to know you can pluck some great ideas this Question-Answer site as well. What I do here is I go to StackOverflow.com, search for the topic that I'm interested in, let's say for instance "PHP", and apply the filter "Most Voted". This will enlist all the frequently voted questions of all time for that particular topic. For, instance here are few most is what I get when I search for "php".

As you can see, there are some really great questions from which you can pick one for your next article and give your take on.

Follow other developers' blogs

Finally, there's this formula. If you want to produce more, consume more. This fits perfectly with blogging as well. The more you read about other people's articles who writes in your niche, the more you'll get to know about the technologies around you, latest trends and what not? And in turn, you'll find some inspiration to write new articles for your blog.

If you want to produce more, consume more.

To get updated with the articles of my favourite bloggers, I use RSS Readers and subscribe to their RSS feeds. This way I don't misses out on their new article and also I get to read them as per my convenience.

In closing

I hope you'll find this tricks useful in finding your next article idea and let me know in the comments if you've some other tricks you use to get writing inspiration. Until then happy blogging!

Originally posted on https://www.amitmerchant.com/how-to-pick-topics-for-tech-blogging/

Introducing Reverie - A ridiculously elegant Jekyll theme for blogging

Amit Merchant — Wed, 13 Feb 2019 09:50:54 +0000

Reverie is a Jekyll-powered theme which is simple and opinionated. It's actually a fork of jekyll-now with some additional features and personal touches which I've implemented to suit my needs for my blog.

Theme demo

This is a plug-and-play Jekyll theme which you can use on GitHub Pages without even setting up a local environment.

Features

Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
Fully responsive and mobile optimized base theme (Theme Demo)
Sass/Coffeescript support using Jekyll 2.0
Free hosting on your GitHub Pages user site
Markdown blogging
Elegant typography
- Futura PT fonts (The same fonts which has been used on https://pixar.com)
Syntax highlighting using Pygments
- Dracula syntax theme included
Disqus commenting
Google Analytics integration
Categorize posts out-of-the box
A home widget to show recent GitHub commit
RSS Feed

Using Reverie on GitHub Pages

Step 1) Fork Reverie to your User Repository

Fork this repo, then rename the repository to yourgithubusername.github.io.

Your Jekyll blog will often be viewable immediately at https://yourgithubusername.github.io (if it's not, you can often force it to build by completing step 2)

Step 2) Customize and view your site

Enter your site name, description, avatar and many other options by editing the _config.yml file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at https://yourgithubusername.github.io - if not, give it ten minutes as GitHub suggests and it'll appear soon.

Step 3) Publish your first blog post

Create a new file called /_posts/2019-2-13-Hello-World.md to publish your first blog post. That's all you need to do to publish your first blog post! This Markdown Cheatsheet might come in handy while writing the posts.

You can add additional posts in the browser on GitHub.com too! Just hit the Create new file button in /_posts/ to create new content. Just make sure to include the front-matter block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md

Using Categories in Reverie

You can categorize your content based on categories in Reverie. For this, you just need to add categories in front matter like below:

For adding single category:

categories: JavaScript

For adding multiple categories:

categories: [PHP, Laravel]

The contegorized content can be shown over this URL: https://yourgithubusername.github.io/categories/

RSS

The generated RSS feed of your blog can be found at https://yourgithubusername.github.io/feed. You can see the example RSS feed over here.

Sitemap

The generated sitemap of your blog can be found at https://yourgithubusername.github.io/sitemap.

License

The theme comes with a MIT license.

Packages to make your Laravel development experience awesome.

Amit Merchant — Tue, 12 Feb 2019 12:07:27 +0000

While developing applications(not necessarily with Laravel), you come across the situation where you need to implement certain functionality. In such cases you shouldn't want to reinvent the wheel if the functionality is been implemented by someone as a package, accepted well by the community and is ready to be consumed. It's a no-brainer. I use to follow the same approach and today in this article, I'm going to list out some of my favorite Laravel packages which have made my experience with development in Laravel delicious.

laravel-backup

This Laravel package creates a backup of your application. The backup is a zip file that contains all files in the directories you specify along with a dump of your database. The backup can be stored on any of the filesystems you have configured in Laravel 5.

Once installed, taking a backup of your files and databases is very easy. You just need to issue this artisan command:

php artisan backup:run

This package requires PHP 7 and Laravel 5.7 or higher.

laravel-mailbox

The package is useful in handling incoming emails in your Laravel application. It features a fluent API that allows you to define custom mailboxes to catch incoming emails.

Here's an example on how you can do the same:

Mailbox::from('{username}@gmail.com', function (InboundEmail $email, $username) {
    // Access email attributes and content
    $subject = $email->subject();

    $email->reply(new ReplyMailable);
});

You can install the package via composer:

composer require beyondcode/laravel-mailbox

laravel-sitemap

This package can generate a sitemap without you having to add urls to it manually. This works by crawling your entire site.

use Spatie\Sitemap\SitemapGenerator;

SitemapGenerator::create('https://example.com')->writeToFile($path);

You can also create your sitemap manually:

use Carbon\Carbon;
use Spatie\Sitemap\Sitemap;
use Spatie\Sitemap\Tags\Url;

Sitemap::create()

    ->add(Url::create('/home')
        ->setLastModificationDate(Carbon::yesterday())
        ->setChangeFrequency(Url::CHANGE_FREQUENCY_YEARLY)
        ->setPriority(0.1))

   ->add(...)

   ->writeToFile($path);

For more advanced usage, check out the documentation here.

You can install the package via composer:

composer require spatie/laravel-sitemap

laravel-opcache

PHP OPCache can make your Laravel app Fly. This package, by Appstract, contains some useful Artisan commands to work with PHP OPcache. The package requires Laravel 5.5 or newer. For older Laravel versions (5.1 or newer), you can use version 1.3.0 of this package.

To use this package, you need to login to your server/vm and run one of the commands.

Clear OPcache:

php artisan opcache:clear

Show OPcache config:

php artisan opcache:config

Show OPcache status:

php artisan opcache:status

Pre-compile your application code:

php artisan opcache:optimize

Use the pacakge programatically:

use Appstract\Opcache\OpcacheFacade as OPcache;

...

OPcache::clear();

You can install the package via Composer:

composer require appstract/laravel-opcache

laravel-mediable

Laravel-Mediable is a package for easily uploading and attaching media files to models with Laravel 5.

It has following features:

Filesystem-driven approach is easily configurable to allow any number of upload directories with different accessibility.
Many-to-many polymorphic relationships allow any number of media to be assigned to any number of other models without any need to modify the schema.
Attach media to models with tags, to set and retrieve media for specific purposes, such as 'thumbnail', 'featured image', 'gallery' or 'download'.
Easily query media and restrict uploads by MIME type, extension and/or aggregate type (e.g. image for jpeg, png or gif).

Using this package is simple. Upload a file to the server, and place it in a directory on the filesystem disk named "uploads". This will create a Media record that can be used to refer to the file.

$media = MediaUploader::fromSource($request->file('thumb'))
    ->toDestination('uploads', 'blog/thumbnails')
    ->upload();

Attach the Media to another eloquent model with one or more tags defining their relationship.

$post = Post::create($this->request->input());
$post->attachMedia($media, ['thumbnail']);

Retrieve the media from the model by its tag(s).

$post->getMedia('thumbnail')->first()->getUrl();

Install the package using Composer:

composer require plank/laravel-mediable

laravel-menu

This package provides a fluent interface to build menus of any size in your Laravel application.

All classes provide a human readable, fluent interface (no array configuration). Additionally, you can opt for a more verbose and flexible syntax, or for convenience methods that cover most use cases.

Menu::new()
    ->add(Link::to('/', 'Home'))
    ->add(Link::to('/about', 'About'))
    ->add(Link::to('/contact', 'Contact'))
    ->add(Html::empty())
    ->render();

// Or just...
Menu::new()
    ->link('/', 'Home')
    ->link('/about', 'About')
    ->link('/contact', 'Contact')
    ->empty()

Above will output following HTML:

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
    <li></li>
</ul>

You can install the package via composer:

$ composer require spatie/laravel-menu

The in-depth documentation for this package can be found here: https://docs.spatie.be/menu.

Conclusion

I'm sincerly grateful to developers to come up with such packages and making my life easier and I hope it will be helpful to you as well. I'll add more such awesome pacakges here in this article time-to-time whenever I come across one. Until next time, stay tuned!

Originally written at https://www.amitmerchant.com/make-laravel-development-experience-awesome-with-this-packages/

How my simple notepad app went from zero to 10k users monthly

Amit Merchant — Mon, 26 Nov 2018 13:08:22 +0000

This is the story of how my simple looking(but functional) Notepad app went from zero users to almost 10k monthly users without any sort of marketing and advertising. I'll mention various aspects which have helped in increasing the growth of this app and some other things in between.

In year 2016, the progressive web apps had raised many eyebrows in the web development world. So, to dive into the PWA world I've started working on this very simple Notepad app. I wanted to learn the concepts behind a PWA and I didn't want any complexities in just setting up the app. That's the main reason I chose such a simple idea and even a simpler implementation. I've quickly created a simple Notepad using HTML, a littlebit of JavaScript, jQuery and of course ServiceWorker. I've created a respository for the same and did my first commit which you can see here and hosted it on GitHub pages here. I've also posted it on the "Show HN" section of Hacker News which obviously didn't get a warm response.

Honestly, This was just a hobby project and I didn't have plans to market it but I kept working upon it and tried to improve the functionality and look and feel of it while keeping it as minimal as possible. I've also worked upon one aspect of this app(which I didn't know would be very useful a couple years later). I've kept the app responsive, have put all the meta tags which helps in increase SEO ranking.
A year later, I've got the domain name called notepad.js.org from the good guys at js.org. This gave this little project a URL that is search engine friendly and the one people can remember. This also made the site secure by enabling https over it which is an important aspect for getting any site getting up in the search ranking.

As you can see the image above from Google Analytics, the webapp have very less users back in 2017. i.e. the period between Aug 2016 to Aug 2017 because it has just launched and the search rank of the site was pretty low. But then one day magic happened.

You see that spike? It was around 11th April, 2018. I'm still not sure what has sparked that much of traffic onto my site but it was huge. It had attracted around 1.2k users in a single day. And that has greatly benefitted the app go up in ranking across search engines. From this point onwards, the webapp has started getting a significant amount of traffic everyday.

The above screenshot is of July-2018's analytics. As you can see, the traffic has started from 80-100 users per day to as much as 350 users per day towards the end of the month. This is all thanks to the SEO that have been optimized over couple of years and it was all organic.

As I've observed from the Google Analytics, people were end up visting my site by searching keywords such as Notepad, offline notepad, notepad pwa and so on. Another interesting thing I noticed from the analytics is that the users from Phillipines region is using the app more than the rest of the world. I'm not sure why.

The above screenshot is of October 2018 where as you can see the website has achieved 10k monthly users. Yay!

Conclusion

In a nutshell, it was nothing but game of SEO, some useful improvements in functionality and pinch of patience altogether which has helped this little app gain so much of usership over the years and I hope it will continue getting such love in future as well. I hope you learned something from this article and in case if you want to know some more insights, let me know in the comments below.

Originally written at https://www.amitmerchant.com/How-My-Simple-Notepad-App-Went-From-Zero-To-10k-Users-Monthly/

How software projects got their name

Amit Merchant — Sun, 08 Oct 2017 18:47:25 +0000

Sometimes, it's kind of interesting to know the origins of the products/projects we love. Here's a collection of such products/projects and the stories of how they got their name.

JavaScript (Programming language)

From an interview made to its creator Brendan Eich:

InfoWorld: As I understand it, JavaScript started out as Mocha, then became LiveScript and then became JavaScript when Netscape and Sun got together. But it actually has nothing to do with Java or not much to do with it, correct?

Eich: That’s right. It was all within six months from May till December (1995) that it was Mocha and then LiveScript. And then in early December, Netscape and Sun did a license agreement and it became JavaScript. And the idea was to make it a complementary scripting language to go with Java, with the compiled language.

MySQL (Database management system)

Michael "Monty" Widenius is one of the founder of MySQL and one of his daughter's name is My(after whom MySQL was named).

Git (Version control system)

Linus Torvalds (Developer of Git) has quipped about the name git, which is British English slang for a stupid or unpleasant person. Torvalds said: "I'm an egotistical bastard, and I name all my projects after myself. First 'Linux', now 'git'.The man page describes git as "the stupid content tracker".

Ubuntu (Operating system)

The OS was named after the Southern African philosophy of ubuntu (literally, 'human-ness'), which Canonical Ltd. suggests can be loosely translated as "humanity to others" or "I am what I am because of who we all are".

Java (Programming language)

The language was initially called Oak after an oak tree that stood outside James Gosling(Developer of Java)'s office. Later the project went by the name Green and was finally renamed Java, from Java coffee.

Python (Programming language)

In Van Rossum(Developer of Python)'s own words:

"In December 1989, I was looking for a "hobby" programming project that would keep me occupied during the week around Christmas. My office ... would be closed, but I had a home computer, and not much else on my hands. I decided to write an interpreter for the new scripting language I had been thinking about lately: a descendant of ABC that would appeal to Unix/C hackers. I chose Python as a working title for the project, being in a slightly irreverent mood (and a big fan of Monty Python's Flying Circus)."

Ruby (Programming language)

The name "Ruby" originated during an online chat session between Yukihiro Matsumoto (Developer of Ruby) and Keiju Ishitsuka on February 24, 1993, before any code had been written for the language. Initially two names were proposed: "Coral" and "Ruby". Matsumoto chose the latter in a later e-mail to Ishitsuka. Matsumoto later noted a factor in choosing the name "Ruby" – it was the birthstone of one of his colleagues.

Translated chat when name was decided and email they've shared. The original conversation was in Japanese.

Scala (Programming language)

The name Scala is a portmanteau of scalable and language, signifying that it is designed to grow with the demands of its users.

Django (Python frmaework)

The framework was named after guitarist Django Reinhardt.

Chrome (Browser)

An answer from Glen Murphy, Design Lead, Google Chrome on asking "How Chrome gets its name?". In his words,

"We had a ‘pick a codename’ vote early in the development cycle – the names that came of that competition were so terrible that we were all pretty happy when one of the leads overrode it and declared that the codename would be ‘Chrome’, presumably because he likes fast cars."

Mozilla (Company)

The history of the name Mozilla goes all the way back to the internal codename for the original 1994 Netscape Navigator browser, with the name meaning "Mosaic killer" and aiming to some similarity with the building-crushing Godzilla, as the company's goal was to displace NCSA Mosaic as the world's number one web browser. The name Mozilla was revived as the 1998 open sourcing spinoff organization from Netscape.

Firefox (Browser)

The name "Firefox" (a reference to the red panda) was chosen by Mozilla for its similarity to "Firebird" (which was the former name of Firefox), but also for its uniqueness in the computing industry.

Laravel (PHP Framework)

"When trying to think of names, I thought about the geography of Tolkien's Middle Earth and C.S. Lewis' Narnia. In Narnia, Cair Paravel is the name of the castle where the kings and queens of Narnia live. Laravel rhymes with Paravel. I thought the name had a classy and sophisticated ring to it." — Taylor Otwell (Creator of Laravel)

Hadoop (Open source big data software)

The name Hadoop is not an acronym; it’s a made-up name. The project’s creator, Doug Cutting, explains how the name came about:

The name my kid gave a stuffed yellow elephant. Short, relatively easy to spell and pronounce, meaningless, and not used elsewhere: those are my naming criteria. Kids are good at generating such. Googol is a kid’s term.

Skype (Instant messaging app)

The name for the software is derived from "Sky peer-to-peer", which was then abbreviated to "Skyper". However, some of the domain names associated with "Skyper" were already taken. Dropping the final "r" left the current title "Skype", for which domain names were available.

Adobe (Company)

The name Adobe was derived from Adobe Creek, a river or creek that ran behind the house of John Warnock, one of the founders. But where is Adobe Creek? It's located in Los Altos, California.

Apache (Software foundation)

According to the FAQ in the Apache project website, the name Apache was chosen out of respect to the Native American tribe Apache and their superior skills in warfare and strategy. The name was widely believed to be a pun on 'A Patchy Server' (since it was a set of software patches).

Edit (4th Nov, 2017)

Microsoft (Company)

Coined by Bill Gates to represent the company that was devoted to microcomputer software.

Zend Technologies (Organisation)

The word "Zend" has been derived from the names of Zeev Suraski and Andi Gutmans, the two founders of the organisation.

Xerox (Company)

It has been derived from xerography, a word derived from the Greek xeros (dry) and graphos (writing).

Leave such stories in the comment section if you know about one.

Explain Inversion of Control like I'm five

Amit Merchant — Tue, 03 Oct 2017 04:48:04 +0000

I always find it difficult to understand the topic of inversion of control. Can anyone here explain it in simple terms?

Essential Vanilla JavaScript Functions

Amit Merchant — Fri, 22 Sep 2017 10:49:50 +0000

Essential Vanilla JavaScript Functions

Some of the missing functions in JavaScript in vanilla form (inspired by PHP). You can just try it as a programming practice.

Array Functions

`array_unique()`

Remove duplicates from an array

function array_unique(arr){
    var seen = {};
    var ret_arr = [];
    var key;
    var i;

    function keyify(obj){
        var ret = "";
        var j;

        if (Object.prototype.toString.call(obj) === "[object Object]" || Object.prototype.toString.call(obj) === "[object Array]"){
            for (j in obj){
                ret += "~" + j + "^" + keyify(obj[j]) + "%";
            }
            return ret;
        }else{
          return obj;
        }
    }

    for(i = 0; i < arr.length; i++){
        key = keyify(arr[i]);
        if(!(key in seen)){
            ret_arr.push(arr[i]);
            seen[key] = true;
        }
    }

    return ret_arr;
}

array_unique([4,5,4,6,7,8,2,6]);
// [4, 5, 6, 7, 8, 2]
array_unique([{a: 'val'}, {b: 'val', c: 'val'}, 'a', 'b', [1,2,3,4], {a: 'val'}, [1,2,3,4], [{a: 'val'}, {b: 'val'}], [{a: 'val'}, {b: 'val'}]]);
// [{a: 'val'}, {b: 'val', c: 'val'}, 'a', 'b', [1,2,3,4], [{a: 'val'}, {b: 'val'}]]

`array_merge()`

Merge two arrays

function array_merge(arr1, arr2){
    for(var i=0; i<arr2.length; i++){
        arr1.push(arr2[i]);
    }

    return arr1;
}

array_merge([1, 2, 3], [4, 5]);
// [1, 2, 3, 4, 5]

`array_chunk()`

Splits an array into chunks of arrays

function array_chunk(arr, count){
    var temp_arr = [];

    for(var i=0; i<arr.length;){
        var chunk_arr = [];
        for(var j=0; j<count; j++){
            if(!arr[i])
                break;
            chunk_arr.push(arr[i]);
            i++;
        }
        temp_arr.push(chunk_arr);
    }

    return temp_arr;
}

array_chunk([1,2,3,4,5,6,7,8,9], 4);
// [ [ 1, 2, 3, 4 ], [ 5, 6, 7, 8 ], [ 9 ] ]

`array_collapse()`

Collapses a collection of arrays into a single, flat array


function array_collapse(...arrays){
    var collapse_arr = [];

    for(var i=0; i<arrays.length;i++){
        for(var j=0; j<arrays[i].length; j++){
            collapse_arr.push(arrays[i][j]);
        }
    }

    return collapse_arr;
}

array_collapse([1, 2, 3, 4], [5, 6], ["hello", "world"]);
// [ 1, 2, 3, 4, 5, 6, 'hello', 'world' ]

`array_diff()`

Returns the values in the arr1 that are not present in arr2

function array_diff(arr1, arr2){
    var temp_arr = [];

    for(var i=0; i<arr1.length; i++){
        if(arr2.indexOf(arr1[i]) == -1){  
            temp_arr.push(arr1[i]);
        }
    }

    return temp_arr;
}

array_diff([4,5,6,7, "unicorn"], [5, 6, 7]);
// [ 4, 'unicorn' ]

`array_intersect()`

Returns the values common in the two supplied arrays

function array_intersect(arr1, arr2){
    var temp_arr = [];

    for(var i=0; i<arr1.length; i++){
        if(arr2.indexOf(arr1[i]) != -1){  
            temp_arr.push(arr1[i]);
        }
    }

    return temp_arr;
}

array_intersect([4,5,6,7, "unicorn"], [5, 6, 7, 8]);
// [ 5, 6, 7 ]

`array_map()`

Sends each value of an array to a user-made function, which returns new values

function array_map(arr, func){
    var temp_arr = [];

    if(typeof func !== "function")
        throw "Second parameter should be a function";

    for(var i=0; i<arr.length; i++){
        temp_arr.push(func(arr[i]));
    }

    return temp_arr;
}

array_map([1, 2, 3, 4, 5], function (value) {
    return value * 2;
});
// [ 2, 4, 6, 8, 10 ]

`array_reject()`

Filters the array using the given callback. The callback should return true if the item should be removed from the resulting array

function array_reject(arr, func){
    var temp_arr = [];

    if(typeof func !== "function")
        throw "Second parameter should be a function";

    for(var i=0; i<arr.length; i++){
        if(func(arr[i]))
            temp_arr.push(arr[i]);
    }

    return temp_arr;
}

array_reject([1, 2, 3, 4, 5], function (value) {
    return value > 3;
});
// [ 4, 5 ]

`array_split()`

Breaks an array into the given number of groups

function array_split(arr, count){
    var temp_arr = [];
    var arr_length = arr.length;

    var chunk = Math.floor(arr_length/count);

    for(var i=0; i<arr.length;){
        var chunk_arr = [];

        if(temp_arr.length == (count-1))
            chunk = chunk + (arr_length-i);

        for(var j=0; j<chunk; j++){
            if(!arr[i])
                break;
            chunk_arr.push(arr[i]);
            i++;
        }

        temp_arr.push(chunk_arr);
    }

    return temp_arr;
}

array_split([1,2,3,4,5,6,7,8,9], 4);
// [ [ 1, 2 ], [ 3, 4 ], [ 5, 6 ], [ 7, 8, 9 ] ]

`array_take()`

Returns a new array with the specified number of items

function array_take(arr, count){
    var temp_arr = [];

    if(count<0){
        count = Math.abs(count);
        for(var i=(arr.length-count); i<arr.length; i++){
            temp_arr.push(arr[i]);
        }
    }else{
        for(var i=0; i<count; i++){
            temp_arr.push(arr[i]);
        }
    }

    return temp_arr;
}

array_take([1,2,3,4,5,6,7,8,9], 4);
// [ 1, 2, 3, 4 ]

You may also pass a negative integer to take the specified amount of items from the end of the array:

array_take([1,2,3,4,5,6,7,8,9], -3);
// [ 7, 8, 9 ]

`array_pad()`

Inserts a specified number of items, with a specified value, to an array


function array_pad(arr, size, value){
    for(var i=0; i<size; i++){
        arr.push(value);
    }
    return arr;
}

array_pad([1,2,3,4], 2, "unicorn");
// [ 1, 2, 3, 4, 'unicorn', 'unicorn' ]

`range()`

Creates an array containing a range of elements

function range(start, end){
    var temp_arr = [];

    for(var i=start; i<=end; i++){
        temp_arr.push(i);
    }

    return temp_arr;
}

range(5, 11);
// [ 5, 6, 7, 8, 9, 10, 11 ]

String Functions

`chunk_split()`

Splits a string into a series of smaller parts

function chunk_split(string, length, end){
    var temp_string = '';

    for(var i=0; i<string.length; i++){
        temp_string += string[i];
        if((i+1)%length==0)
            temp_string += end;
    }

    return temp_string;
}

console.log(chunk_split("Hello", 1 , "."));
// H.e.l.l.o.
console.log(chunk_split("Hello", 1 , ".."));
// H..e..l..l..o..

`str_pad()`

Pads a string to a new length

function str_pad(string, size, value){
    for(var i=0; i<size; i++){
        string += value;
    }

    return string;
}

str_pad("unicorn", 5 , ".");
// unicorn.....

`strrev()`

Reverses a string

function strrev(string){
    var temp_string = '';

    for(var i=string.length-1; i>=0; i--){
        temp_string += string[i];
    }

    return temp_string;
}

strrev("unicorn");
// nrocinu

`similar_text()`

Calculates the similarity between two strings

function similar_text(string1, string2){
    var seen = {};
    var similar_count = 0;

    for(var i=0; i<string1.length; i++){
        if((string2.indexOf(string1[i]) !== -1 && !(string1[i] in seen)) 
                || string1[i]==' ')
        {
            similar_count++;
            if(string1[i]!='')
                seen[string1[i]] = true;
        }
    }

    return similar_count;
}

similar_text("Hello World","Hello Peter");
// 6

Originally published at amitmerchant1990/essential-vanilla-javascript-functions.

I'm a software developer who works on frontend and backend, Ask me anything!

Amit Merchant — Thu, 21 Sep 2017 09:25:20 +0000

Ask me anything and everything!

Getting started with Ionic 2 by building a Markdown App

Amit Merchant — Wed, 21 Jun 2017 09:50:21 +0000

Hello readers! Today we’re going to dig a little bit into (or in this case). We'll learn about by building a simple Markdown App which can give user preview of Markdown text on-the-go on their mobile device. We’ll build this app keeping Android platform in mind.

So, first of all “What is Ionic?” you ask.

From its official website, “Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.” With Ionic, you can build mobile apps using the technologies you already know. That’s right! It’s all HTML, CSS and JavaScript.

Yes yes, I hear you asking “why do we need Ionic when we already have frameworks like Phonegap?” The answer is, frameworks like Phonegap are build systems using Cordova(they’re fairly synonymous), whereas Ionic is an AngularJS based app development platform with Google’s Material Design UI that uses Cordova to package itself for mobile platforms. Apart from using AngularJS in it’s core, Ionic also facilitates..

Features to build the progressive web apps
Live Reload which compile and redeploy your app at every step of development is for chumps
AoT Compiling which makes an ionic app loads lightning fast

In this tutorial, we are going to make our Markdown App using Ionic 2 which is using Angular 2 in its core. To build an Ionic app locally, all you need is recent version of Node.jsinstalled on your computer, a latest browser(preferably Chrome) and a text editor of your choice. Sounds exciting? Let’s get started with it.

Installing Ionic

Ionic 2 apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build and deploy as a native app. This means we need to install a few utilities to get developing.

Ionic CLI and Cordova

To create Ionic 2 apps, you’ll need to install the latest version of the Ionic
CLI and Cordova. Install the Ionic CLI and Cordova for native app development:

    $ npm install -g ionic cordova

This will take some time to be installed and ready to use.

You may need to add “sudo” in front of these commands to install the utilities globally or in case of Windows, you need to open Command Prompt in Administrator mode. You may get error while installing Ionic in flaky networks but hold onto it and you'll surely end up installing it.

Once both ionic and cordova installed, we can generate a basic Ionic app using following command:

    $ ionic start ionic-markdownify --v2

Notice here that we have added – v2 because we want to build our app using Ionic 2. In case, you want to build app using Ionic 1, omit – v2.

This will generate a folder called with following folder structure:

.
+-- hooks
+-- node_modules
+-- plugins
+-- resources
|   +-- android
|   +-- ios
|   +-- wp8
+-- src
|   +-- app
|   +-- assets
|   +-- pages
|       +-- about
|       +-- contact
|       +-- home
|       +-- tabs
|   +-- theme
+-- www
+-- .editorconfig
+-- .gitignore
+-- .io-config.json
+-- config.xml
+-- ionic.config.json
+-- package.json
+-- tsconfig.json
+-- tslint.json

pages dir contains all the pages that our app is going to use. In our app, we’ll only deal with home dir.

To run our app, cd into the directory that was created and then run the ionic serve command to test your app right in the browser!

    $ cd ionic-markdownify 
    $ ionic serve

This will start our app and we can see our app in action over http://localhost:8100. It’s a basic Tab based application and would look like below:

Next, In order to make our Markdown app, we will first modify our file src/pages/home/home.html. We will replace the content within <ion-content></ion-content> to following:

<h2>Welcome to Markdownify!</h2>
<ion-item>
  <ion-textarea rows="6" [(ngModel)]="plainText" placeholder="Strat writing your markdown below..."></ion-textarea>
</ion-item>

Notice, we have used Ionic's inbuilt textarea component <ion-textarea> which gives the native touch to the textarea in specific OS environment(in our case it's Android). We have also bind the ion-textarea using [(ngModel)]="plainText" which will help us getting it's value in class HomePage in src/pages/home/home.ts

Next, we’ll add a toggle button which we’ll use to toggle between Textarea and
Markdown Preview. Let’s add it.

<h2>Welcome to Markdownify!</h2>
<ion-item>
  <ion-label>Convert to Markdown</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>
<ion-item>
    <ion-textarea rows="6" placeholder="Strat writing your markdown below..."></ion-textarea>
</ion-item>

After this, we will add another <ion-content></ion-content> after the existing one which we'll use to hold the HTML preview of the Markdown. We'll add [hidden]="!toggleVal" in this component in order to show only in case if state of the toggle changes. We have done same with <ion-item> in which <ion-textarea> lies. After wiring down all these src/pages/home/home.html will look like this:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Markdownify!</h2>
  <ion-item>
    <ion-label>Convert to Markdown</ion-label>
    <ion-toggle color="secondary"></ion-toggle>
  </ion-item>

  <ion-item [hidden]="toggleVal">
    <ion-textarea rows="6" placeholder="Strat writing your markdown below..."></ion-textarea>
  </ion-item>
  <ion-content [hidden]="!toggleVal">
    <div [innerHtml]="content"></div>
  </ion-content>
</ion-content>

To make our <ion-textarea> full height we will add following piece of CSS in src/pages/home/home.scss:

textarea {
  max-width: 100%;
  width: 100%;
  height: 100vh;
}

After this, we will add [(ngModel)]="toggleVal" to the <ion-toggle> to track the value of the same and will also add (ionChange)="convert()" to track the changes of the toggle.

At this point our app’s Home tab would look like below:

We will then add convert() function into home.ts as follows:

convert(this) {
    if(this.toggleVal==true){
      if(this.plainText && this.plainText!=''){
        let plainText = this.plainText

        this.markdownText = marked(plainText.toString())
        this.content = this.markdownText
      }else{
        this.toggleVal=false
      }
    }
}

Notice this function will check the toggle’s current state and based on that it
will convert the Markdown to relevant HTML. Also notice that we have maintained
the state of the toggle based on the textarea’s value.

To convert Markdown to HTML, we’ll use marked library. To install it fire the below command in CLI:

    $ npm install marked --save

This will install marked into our project. To use it in our app, let's add now the following line on top of the src/pages/home/home.ts

import marked from 'marked';

Apart from this, to use the reference of the <div [innerHtml]="content"></div> we'll add Angular's ViewChild from @angular/core

import { Component, ViewChild, Input } from '@angular/core';

And will add it class HomePage as follows:


    @ViewChild(Content) content: Content;

After adding all these our src/pages/home/home.ts would look like below at this point:

import { Component, ViewChild  } from '@angular/core';
import { Content } from 'ionic-angular';

import { NavController } from 'ionic-angular';
import marked from 'marked';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;

  constructor(public navCtrl: NavController) {
    //console.log(marked('I am using __markdown__.'));
  }

  convert(this) {
    if(this.toggleVal==true){
      if(this.plainText && this.plainText!=''){
        let plainText = this.plainText
        this.markdownText = marked(plainText.toString())
        this.content = this.markdownText
      }else{
        this.toggleVal=false
      }
    }
  }
}

This basically sums up our whole app. Now, head towards the http://localhost:8100 in your browser and you’ll see our pretty little app in action!

You can also check the whole codebase of this app over here.

The whole idea of this tutorial is to get you up and running with Ionic 2 by building a real world app and to understand some of the concepts of Ionic 2. You can improve this particular app. Some improvements as..

Implementing swipe gesture to get rid of toggle so that user just need to swipe left in order to get preview.
Implementing Markdown’s editing tools such as bold, italic, underline, code and so forth.
Implementing a text editor in place of textarea.

You can also package your newly created app for any platform(Android, iOS, Windows Phone OS) of your like using Ionic Package and distribute the same.

For more information upon Ionic 2 you can follow this documentation and tweak your way through a whole lot of Ionic 2 components.

Thanks for reading.

Build a full-fledge Markdown app with Electron

Amit Merchant — Mon, 12 Jun 2017 06:16:06 +0000

Have you ever wanted to develop desktop apps while being a true web developer without even caring about the native architecture or the language most of the applications build for different platforms likes of Windows, macOS or Linux? Or you just wanted to get started with building desktop apps? Isn't it great if you are able to build desktop apps using the technologies you already knows i.e. HTML, JavaScript and CSS? I was in the same urge to dive into world of desktop apps. So, I have been stuck on to GitHub's Electron lately.

What is Electron?

From official Electron's site, "Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application."

Sweet. Isn't it? You may be wondering which hard parts?! Electron basically makes it easy to implement automatic updates, native menus and APIs, App Crash Reporting, Debugging of your app a lot easier which you won't find in many similar solutions available in the market. Such as nw.js And when any project is backed by GitHub, you can use it with your eyes closed.

Getting started with building the app

My philosophy to learn a new technology is to take a real world idea and try to implement it with that particular technology. In this case, I have decided to build a simple Markdown Editor app which can do following:

Show live preview of Markdown while writing the same
Show the relevant HTML for Markdown
Basic Markdown editing
Support for GitHub Flavored Markdown

So, taking above requirements into account, I have started building it by first cloning the Quick Start repository

$ git clone https://github.com/electron/electron-quick-start

$ ren electron-quick-start electron-markdownify

$ cd electron-markdownify

$ npm install && npm start

This gave me the very basic structure of Electron and all the necessary node dependencies installed including the electron-prebuilt which is the heart of any electron app and the starts the very app itself!

The app's folder structure contains a main.js file, an HTML file and package.json.

Electron basically runs two processes when running it : 1) Main Process 2) Renderer Process.

In a nutshell, Electron provides a runtime to build desktop applications with pure JavaScript. The way it works is — Electron takes a main file defined in your package.json file and executes it. This main file (usually named main.js) then creates application windows which contain rendered web pages with the added power of interacting with the native GUI (graphical user interface) of your operating system.

Render process involves the core JavaScript we write within the HTML to drive frontend functioning of the app.

Next, to make it convenient to user to write Markdowns, I have used CodeMirror which is a web based code editor. This made writing Markdown easy and beautiful.

Further, as my app is a Markdown editor, I needed a Markdown parser which can convert the plain Markdown in to the HTML which can be previewed. So, I have used this awesome Markdown parser named marked. It has all the things I needed including GFM.

Combining all bits and pieces, I have been finally done with my original prototype i.e a Markdown app. You can see the end product over here and take a look into working of it yourself as it is not feasible to include everyting in a single post.

This is how the end product looks like..

Final words

Throughout this journey, I have explored many new things about desktop app development such as packaging and distributing the app, handling exceptions for different operating systems, communicating with native resources and so on.

The app is still work in progress and I'm still learning Electron as I try to add more features into this very app. The more I know about Electron, the more I fell in love with it. It sure is a future of desktop apps.

That's all folks!

TIL - Using "Box Model" of Chrome Dev Tools

Amit Merchant — Thu, 23 Mar 2017 07:27:31 +0000

We all know how good is Chrome Dev Tools when it comes to the web debugging capabilities. There are number of features in the Dev Tools which are very useful but we are unaware of.

One such feature which I've discovered today is "Box Model". So, what is it exactly?

"It's a feature provided by Chrome Dev Tools which show us the visual representation of an element on the HTML page including margins, paddings and borders relative to the other elements."

You probably have seen this many times during your daily debugging but did not give it a try cause maybe you were not fully aware about it or just skipped it as it was.

Basically it shows us the following things about the particular element:

As shown in the figure, it shows us the relative margins, paddings, borders through colors. So, everything is represented in different color. The main element being in blue, padding in green, border in brown color and so forth. It also shows the amount of padding/margins in terms of a number at everyside. i.e Top, Bottom, Left and right.

In above image, as you can see, an element have 5px padding at every side, 1px of border and no margin on either side. One interesting thing about this Box Model is, you can actually modify any of the number right in it and can see the changes accordingly.

This comes really handy when we want to see the actual behaviour of paddings and margins across the elements rather than just changing them in the CSS randomly. But it's unfortunate that it's very less used tool amongst others even though it gives us more precise representation of elements. So, let's try to use it more from now on.

Thanks for reading! This post was originally published on my website here.