Getting started with learning a Front End Framework – IONIC 3 for dummies

I’m pretty much starting my 2018 (the new year spirit!)  a little late, well, atleast for my blogging. Many aspiring web developers would have already gone through this awesome link, a developers roadmapwhich clearly shows what developers need to learn to sharpen their skills in this year (or for many). Also a good place to get started for newbies. For the next few weeks, I’ve chosen myself to sharpen my skills in at least in one Front End Framework and the one is IONIC 3. So, I’ll be writing this IONIC 3 for dummies tutorials which will slowly catch up from basic to advanced. We will also cover the things required for knowing IONIC 3.

But before learning a IONIC 3 framework, devs who hasn’t got experience from any UI Framework or devs who uses Framework without knowing its pros and cons (like myself), we are going through a short introduction for learning a UI Framework first.

Importance of Learning a Front End Framework!

Last couple of years are ruled with tons of frameworks, especially JavaScript Frameworks. I started out my job career in PHP, but then I shifted to JavaScript works couple of years ago since the popularity of JS is ruling upwards compared to PHP.

Of course its not right to compare PHP with JS, as JS is a front end application. But the point is, long back ago, before Angular 1, there wasn’t much hype about UI Frameworks, most UI tasks can just be accomplished using jQuery, views can be easily created using PHP Frameworks like CakePHP, Codeigniter, etc., itself. You can put whole logic in view using PHP itself (much simpler I say.) Life was fine!

But as time goes by, the idea of breaking the MVC chain to MVVM type came and along with the idea of making the application more of a service kind, a RESTful service. Because of tying a knot on view with application logic, it  not only slowed the down work, but, it’s not right itself! Why should a view should be generated by backend logic as HTML belongs to the Frontend?  Every request made to server will be regenerated into a HTML from PHP (like framework templates). This seemed wrong!

Another reason is, the birth of mobile application and support of websites in mobile devices became a huge deal due to smartphones like Android and iPhone. Of course, we can do those stuffs in PHP Frameworks, but, It will only make our code messy! So, Yea, another great idea of taking the view out of backends codes.

And Finally, creating a view resuable for multiple service is not possible using single service, since view is tied closely to the controller/service in MVC. If we could break down the view from the MVC logic, we can easily resuse it.

Pros of Front End Frameworks:

  • Easy plugin and play
  • Core codes are well tested and can get help from frameworks community!
  • Hides the complex parts and makes develop much fast
  • Overall, time will greatly reducing when developing something

Of Course, there are n numbers of reason of getting to know a Front End Frameworks, but, above are few of my points which made learn one or two frameworks in Front End.

Difficulties in Learning a Framework

As I was saying, there are tons of Front End framework and trying to learn every one of them is not even possible, also know that, before completing one Framework, it will be updated to new framework (yep!) which is totally different from what you have learnt (Ex. Angular 1 and 2).

I worked on a Angular 1 project long back ago, at the time Angular is so popular, but at the time of completion of my project using Angular 1, Angular 2 was released. The difficult part is migrating from Angular 1 to Angular 2. It was seriously so difficult and I have abandoned the idea of migrating and stuck with Angular 1. (Another reason is, I took lot of time working on Angular 1)

Cons of Front End Frameworks:

  • You have to spent lot of time learning a new framework (even though you know vanilla JS)
  • Have to learn any additional dependencies comes along!
  • Chances are, you won’t need lot of codes you get from the Framework for what you want to accomplish
  • You don’t control the core framework codes.

How to Decide On Choosing a Awesome Framework

Considering this Pros and Cons of using a Framework, its upto you to decide whether to use one or not, which depends on number of reasons.

  • Know what you want to accomplish – There are full MVC Frameworks like CakePHP and MVVC – AngularJS, Micro Frameworks like Slim Framework etc.
    • Once you understand what you need, you easily pick from the best out there.
    • For Ex: If use both AngularJS and CakePHP, view part from CakePHP will be completely unnecessary since it will be handled my Angular. Its best to choose a microframework.
  • Analysis the pros & cons of each frameworks. As we already know, we have megatons of frameworks out there,you have value each framework before picking one.
  • Know the future support of that Framework, you don’t want to end of using a abandon Framework!

IONIC 3 Framework – Starting an Awesome Framework!

Which framework is best is 2018, well there is Vue.js, React and Angular JS 5 ofcourse. But, there is also IONIC Framework.

Why IONIC Framework?

IONIC Framework provides an easy way to build hybrid mobile apps using Web technologies like CSS, HTML5. Its build on using AngularJS and underneath it uses Apache Cordova (Previously PhoneGap) in order to run as a native app. The sweet thing about IONIC which i love is the mix of different wonderful things it puts together

AngularJS is the most popular framework in Front End for long while and if you search for job opportunities in Front End Framework, It will be AngularJS in the top!


Next one is Apache Cordova, provides a easy way to build mobile applications. It turns your native HTML, CSS and JavaScript to Mobile supported format by providing a wrapper which acrosses all platform.

apache cordova

Third one is, Typescript – the whole IONIC 3 code needs to written in typescript. Typescript provides When your code base is huge, and more than one person works on the project, a type system can help you avoid a lot of common errors,  cool ES6 syntax and converts them just like Babel does and more. Though it might feel pain the beginning who doesn’t want to use anything except pure JavaScript. Besides, It will only be hard for a month or so, but the benefit using Type Script is a lot! (To know more about


And finally, NodeJS, IONIC 3 provides easy build system, livereload

Problem in Learning IONIC 3 Framework

So far the problems I’ve faced is the documentation.

Run a CLI, You gotta all the pages and download this and tada, you gotta cool like mobile form!

Well, It does good for people who just want to develop something without knowing what. But, sooner or later, you will need to now how it actually it works without too much automation which hides the step by step approach. It couldn’t find resource anywhere to have clear understanding of who things goes. Also, since IONIC depends on Angular and Type Script, lot of syntax explanation seems to skipped assuming people knows them. Well, actually I don’t.

Next Blog… Getting Started with IONIC 3 Framework

Most of this session seems very theory rather than code, I promise to be less theory as most of them don’t like it!:D

From next sessions onward, its going to be equal explanations and code. We will be learning some few

  1. ES6 functions like import, export, classes etc.
  2. Basic Type Script along the way.
  3. Then AngularJS @component commands. (We are not going to cover entire AngularJS, since tons of tutorials exists for that already) and
  4. Then a basic installation of IONIC 3. A Re-Introduction to IONIC 3 for beginners.



VS Code – The Best Code Editor

Sublime Text is an awesome editor, using it for almost like 4 years are so. Its lighting fast and tons of useful plugins which easies the work. There are lot of great editors out there like Sublime Text, Atom, Brackets, Notepad++, but they are not even close to Sublime Text or I thought so until I heard about VS Code. It’s really an amazing editor and so far considering as the best code editor. It does great number of features and speed isn’t that slow too. But the features and intelligence VS Code provides is the most highlighting one. So let’s see what VS Code has to offer which makes it an best code editor.

VS Code – The Best Code Editor


VS Code is made by Microsoft and no doubt why it is best (and free).
Installation is very simple and compatible for Windows, Linux and Mac. I’ve already tried in Linux, so I’m installing VS Code Editor in Windows 10.

Getting Started

The welcome page is very neat, it shows all required things which is necessary when you install an editor, something which is not in Sublime Text.

code like a poem - best code editor

1. Importing Keymap From Sublime Text With Ease!

With just a click, all keymap from Sublime Text 3 will be setting to VS Code. Amazing, you can still feel the Sublime Text with the new editor. Thats a very thoughtful feature of this new editor. You can do the same import from ATOM, or VIM, etc.

code like a poem - best code editor

2. Neater Workspaces

The workspace is very neat, it has all the required things all around.
Ability to add multiple workspaces, the same shortcut you use in Sublime Text ctrl + p to search all files within the workspace.
The speed is not great compared to Sublime Text, which is much much faster

code like a poem - best code editor

3. Extensions

Installing extensions is very easy, its already there in your left side. You don’t need to search for it in Google and you will get an instant preview all the extension in the editor itself. Pretty mazing!
VS Code will by default shows you the recommended extensions which required for your project.
If you are using Javascript project, it will ask to install ESLint and on seeing a Docker file, it will recommended to use Docker extension.

code like a peom - best code editor

4. In-built GIT Access

Another inbuilt extension which come along with VS Code is the GIT. Once you open a GIT repository project, you can just do all the GIT commands in the Editor itself.

code like a poem - best code editor

You don’t anymore use of a separate GIT GUI!
Not only that, resolving conflict and merging is way more neater

code like a poem - best code editor

5. In-built Terminal!

Wow, doing ‘ctrl+ `’ opens the terminal! Incase for windows, PowerShell! Its like VS Code has almost everything required to start a project!

code like a poem - best code editor

6. Docker Explorer

One of the amazing extension which is the Docker explorer. You could control the whole Docker stuff in the editor itself!
Easy to start the container, inspect or execute the container without leaving the Editor

code like a poem - best code editor

7. Color Themes!

Of Course, color and themes, a feature every editor has and VS Code does it more easier by showing preview in the editor itself, unlike Sublime Text which you got no preview from the editor.

code like a poem - best code editor

8. Beautify those Ugly Files!

With the beautify extension, you can easily prettify a file like HTML, JSON, XML, CSS. Somewhat important extension which i couldn’t find in Sublime Text. Especially an XML file beautifier.

code like a poem - best code editor

code like a poem - best code editor

9. Easy syntax styling & color copying

Many gonna love this feature, just copy the code from VS Code and paste in email or docs, you will get the whole syntax and style color used from the theme, you don’t need to install anything for this default lovely feature. This one definitely beats Sublime Text copy-paste.

code like a poem - best code editor

Well, there are still more features like Debugging, running tasks, etc, which we will see in separately. So far, these features are really great and neat! Some features I didn’t see in any other editor. Lets see how VS Code does in long run, but so far, this is the best editor I have seen and so does Sublime Text! Both are amazing editors, but I gonna try VS Code for a while and see which one tops!

Learn JavaScript – 3 Cool Browser API’s You See Everyday (Which You Gotta Know)

Have you ever wondered how food delivery or call taxi sites/app gets your location from mobile? Browser notifies you that your facebook friend just liked your profile picture? Yep, these are all Browser API’s and they are becoming cooler and cooler by the minute and it’s kinda hard to catch up. There are lots of browser API’s here we are going to see about some of the most useful API’s along with examples.

3 Gotta Know Browser API’s

  1. Geolocation API
  2. Page Visibility API
  3. Web Notification API

1. Geolocation API

One of the coolest API is the Geolocation API

  • Users visiting your website/App location is the best way to track analytics.
  • Websites like shopping cart, delivery item, taxi can use this information to know the user physical location instead of asking them to provide address like the olden days.

How Geolocation API Works?

  • Using GPS and location information like IP address, Wireless connections, Cell tower information, Latitude and longitude are available in JavaScript.
  • Mobile phones usually works by first triangulating the user location with mobile network and use GPS to pinpoint the location for high accuracy

Steps to Get Latitude and Longitude

  • Privacy is a huge concern since we are actually trying to retrieve user location.
  • So, in order to obtain lat and long to use with JavaScript, the user has to first share his location

web apis

  • Once the user allows, you can easily fetch the lat and long from the below functions.

Once you fetched the coordinates successfully, its up to you decide how to use this information whether to show in maps or fetch address (Google maps can help with these)

Browser Compatability:

web apis location api


2. Page Visibility API

Have you wondered how a website playing a video pauses when user switches to different tab? Well, Page Visibility API does the trick. We can even use this concept to great extend our application functionality when user is not active by saving resource.

How to use?

Page Visibility API provides 2 methods to use it,

  • document.hidden – provides a boolean whether the page is hidden or not
  • document.visibilityState – using visibilitychange event, triggers when state of the page window changes

Using this simple concept, you can turn off any unwanted process in your UI when user is not active in the website.

Browser Compatability:

web apis page visibility api


  2. Cool example:

Web Notification API

Notifications are important in letting users know any information from the application

  • Whether to tell them they are idle for a while
  • or think of a simple chat whether needs to informed whether user pings them even when they are idle or in some other tab.
  • Reminding user to perform certain tasks like ToDo application.

The Web Notification API lets these notification from web application or app to send information.

web apis notification api



How to use Web Notification API

  • Similarly like Location API, first users has to allow permission to allow. Else, these can become another SPAM dump.
  • Once granted, you can send notification message easily.
  • It’s even possible to set close notification, add handlers etc.

web apis notification api

Browser Compatability:web apis notification api



Well, thats it for now. Still there are tons of Web APIs like Web Workers, MediaDevices.getUserMedia, Battery API etc., checkout in

Learn Docker — 8 Docker Tips You Oughta Know

By now, most of the avid programmers would have known or used Docker, a container technology provides a self-contained execution environments that share the kernel of the host operating system, which provide an ease way to move to different environment. There are tons of sites to get started (the official site is a great way to learn more or for windows user). Here we will see about 8 Docker tips to make daily life with it ease. It’s not just about shortcut keys but using existing commands in which didn’t use.

8 Awesome Docker Tips

1. Using ‘Docker Compose’

Do you create a ‘shell’ and run each morning when starting your pc?
Do still running multiple containers one by one in the proper order?

Well there is something called ‘Docker Compose’ – It can run multiple containers, choose which one to start first and lot more in just a single YAML file. Every morning, all you need to do is run docker-compose start thats it! Lets ease the life!
Following is an example for running 2 containers, apache and mysql, by starting mysql container first.


Save this as ‘mywebapp.yml’ and just do ‘docker-compose up’ to start it.
Learn more about Docker Compose from

2) Use Docker Hub

There is an Docker image for most of things already there in Docker hub. Instead of recreating everything from scratch, all we can do is to run ‘docker pull…’ command. But my preference is always to use an Official Docker image so that it can be trusted for my projects.

Need mysql 5.7 and 5.5 version? just do ‘docker pull mysql:5.7’ and ‘docker pull mysql:5.5’ you will now have both images installed very easily in your machine. Now, all you need to is to mention the image name along with version in your docker-compose file to switch over. (one of the many uses of having Docker)
Some of the useful Docker images from hub”


3. Switching to Alpine

Even though the size of the Docker images are not huge compared to virtual machine which we use before (like Vagrant), sometimes, its still high. A Ubuntu base image can be around 200MB which is quite high. The problem with huge size is the docker build will be slow. The solution for this to choose an Alpine version of Docker – A minimal Docker image based on Alpine Linux with a complete package index and only 5 MB in size!

docker alpine
docker alpine

4. Restart Policy

Docker containers, once started will run until the process/command mentioned in the containers are completed and eventually will be stopped and status will be in ‘Exited’. What if you have to restart containers automatically on every exit? or restart only if there is an error? or restart n number of times? There are lot of solution like using Supervisord to handle this. But much more easier (but limited) way is to use the Docker –restart policy.

docker restart policy
docker restart policy

5. Clean Up

If you are using Docker for several months, chances are your system will be left with lot of junks. It can be dangling images, or unused memory, more like garbage collections. It can actually reduce few MB’s.

The reason for these dumps can happen whenever building images are abruptly stopped due to an error or containers are killed without stopping properly.

To solve this, there is ‘Docker Prune’

  • Allows cleaning by unused dangling images. (not all images)

  • It will remove all stopped containers (in case you have forgotten to give –rm when running)

  • Allows cleaning by unused dangling images

  • All networks not used by at least one container.

  • Does everything from 1 – 4

6. Filtering

Another effective use of Docker is using Filters. There are tons of filters provided by Docker (Checkout the reference section). Few of the useful filters are

  • Lists all container which are exited status
    • Other status filters values: created, restarting, running, removing, paused, exited and dead.

  • Lists all containers that use the latest ubuntu image
    • Other ancestor filters values, tags, image id

  • Lists all containers that mount a specific volume or have a volume mounted in a specific path

7. Docker Stats

Once you get your Docker build application to production, you outta know more about metrics like resource usages like memory etc. For this we have ‘docker stats’.

The above format is a customised one which will neatly display how much memory docker container is used. (running and stopped)

docker stats
docker stats

8. Docker Tips : Command Line

Few of the awesome command line tricks:

  • Remove stop containers

  • Remove dangling images

(or you can use docker prune) latest version

  • Get Docker container IP

  • Export & Import



Well, these covers most of them and I really hope these docker tips are useful to developers who are new and still learning about Docker. There are really tons of tips still out there and best place to learn more about these docker tips to start with Docker reference site.


The Bad and The Worse – JavaScript Scoping Issues

Hope you all gone through how amazing JavaScript worker is. Today, we learn something core to JavaScript. Every language has its bad sides or “How not to use/write code” like that. Lately, I wrote JavaScript more than 3 years now and felt I using it well. But, every time looks back and read see my code a couple of months back, it looked awful. Over the times, I kept on learning and improving thanks to my mentor and colleagues. I started using Linters and learned what are the ways to write and ways not. So this about the bad side of JavaScript and especially Javascript scoping issues, which is the pillar in understanding this language for proper use.

JavaScript Scoping Issues

To know the JavaScript scope issues, first, we have to understand about global variables how it works and what is the scope.

Understanding Global Variables

Global variables or variables belonging to window are the great aid to newbies, Just assign a value in a global it can be used anywhere. Its pretty helpful, but, you don’t how bad it is until you are code starts getting bigger and bigger till you end up not knowing where the variables it declared.

Take this simple code,

As you can see thisIsGlobal is declared outside the function which automatically becomes a global level variable, it can be used anywhere. Can anyone see the problem here?

In the function foo I’m just directly using a thisIsGlobal. If the function foo becomes big, you will have no idea where this variable come from.


This example shows the badest way to use a variable. The variable ‘poem’ becomes global, function getPoem becomes global. Based on the order of usage in index.html, they are overwritten.

Solving This:
Never use a variable outside the function or put a function directly in a file. Better way to do this wrapping it like this,

The Scope & JavaScript Scoping Issues

What is scope? It is nothing but,

A block of statements wrapped in a curly braces. The one we seen previously is called ‘Global Scope’. And there is, Local/Functional Scope and Block scope (Recent JavaScript version)

Okay, the bad stuff here, when compared to other languages like PHP, is, if you forgot to var inside the function getPoem, it will automatically become a global variable.

Solving This

Always use var keyword inside a function in the very first line it starts.
Avoid global usage even intentionally

And Block Scope
The let is something new, its only supported in few browsers which support block level scope

Hope it makes it clearer about how scoping works in JavaScript and how it won’t show any errors or warning. Understanding how scope works and its usage and flaws are must for any developers.


Understanding Web Workers

Before getting to Web Workers, let us understanding the purpose for its need and how JavaScript works.

everything is single“,

  1. JavaScript will execute everything in a single thread.
  2. Each statement is added to a stack and will execute one-by-one.

The good thing is, our code will execute in a synchronous way. But the bad side is, rest of the statement in the stack has to wait if the current process takes a lot of time.

Performing heavy ‘client to server side’ task or huge data processing like JSON or complex calculations which going to taking a lot of time.

Eventually when we run this code, either it might freeze and become unresponsive or ends by blocking rest of the process (or both).


To solve this problem, we are going to use something called ‘Web Workers‘, which runs independently of any user interface. All the statements/code mentioned in ‘Web workers‘ will run in the background. Well, let’s get started.

  1. Need for Web Worker!
  2. What is Web Worker
  3. How it works
    • Creating a Worker
    • Web Worker Communication
    • Importing External Files
  4. Web Workers Example
  5. Stopping a Web Workers
  6. Handling Errors
  7. Security Concerns
  8. How to use & When to use
  9. Browser Compatibility

Consider the following example,

Not only it will take a lot of time to print the statement ‘end’… our browser freeze and hangs and you might end up killing the process.
Let’s see how the above code runs in Web Worker. To create a worker


Now, if you run this you won’t see any freezes at all! That’s the magic of the Web Worker.

So, What is Web Worker?

Web Worker provides a way to run the task in the background and independently of any user interface. We can put any long running tasks in workers which will not interrupt keyboard or mouse click events.

  • It enables to offload expensive operations
  • It includes separate message queue, event loop, and memory.

How it works

Creating Worker

Web Worker are created using the object Worker()

The new Worker('javascript_file.js') will look for a file named ‘javascript_file.js’ which will run independent thread from our actual code.

Web Worker Communication

To communicate to and fro from our worker we’ll use window.postMessage to pass messages.

Import External Files

Using importScripts you can import JavaScript files inside workers.

Let’s see an example, to understand all this stuff.

Web Workers example – Creating a simple Web Worker to poll for contents.

In this example, we will randomly fetch contents from Wikipedia periodically from workers in a nonblocking way.

First, let’s build the worker part and then create our index.html to link the worker. See the code below for explanation

Stopping Web Workers

Once our Web Worker is created, it will continue to listen for any changes using the event listeners, when it’s time to stop use the terminate command.

Handling Errors

The onerror event listeners we will attach the Web Workers for capturing any errors.

or simply

Security Concerns

Since Web workers use postMessage for communication, the origin needs to be checked on receiving the message.

Web Workers Limitations

Though awesome it seems there are some limitations with Web Workers.

  • You cannot access the DOM from web workers (I.e, No document, getElementById)
  • Cannot access global objects or functions on the main page
  • Workers have high start-up performance cost and high per-instance memory cost. So it’s best to use minimal amount of Web Workers
  • Communication to our application only be carried our using postMessage

Overall Web Worker is must use any high processing tasks, from web polling high data processing, it does’em all. But, know when to use Web worker and when not to. You don’t need to use it all the time. And finally, there are other types of Workers which will see it soon.




Bashing your Way — Learn Bash Skills – 1

As with art, learning the foundations of skills can improve the productive over time. No matter what programming language like PHP, Node or Python you know, the very basic skill with Linux is shell programming. Shell programming is an essential skill many lacks. Here we learn bash skills.

Part 1 – Basic Bash

Bash – is the standard shell on Linux, also a superset of the Bourne shell such that, commands that work in sh, will work in bash also.

In Part 1, we learn some basic stuff to get started for anyone.

The Shebang!

All file to be written in bash starts with shebang which is #!/bin/bash. Below explains a simple file

Creating a File & Folder

Setting Permission

chmod – change file mode bits. The + operator used to add file mode bits and – to remove the file mode.

The combination of letters controls the user access

u is for a user,
g is for group,
and o is for others.

r is for reading permission,
w is for write permission,
x is for execute permission.


Note there shouldn’t be any space between = or bash will throw error which only wizards can understand 😛 and semicolon is not required at the end

Mathematical Operations

Mathematical operations are done using the $[]


Conditional & Comparison Statements

Following is the simple skeleton for if statement.

and else statement




File operation

Reading From Users

Reading from bash is very simple using read


This takes care of part 1 of learning bash skills. In Part 2 we will make a big jump to advanced stuffs like sed, functions, signals & jobs.


My Secret Love For Atom — Going From Sublime Text to ATOM

One of the best sidekick for awesome programmer is the tool he/she chooses. I know that relying completely on a tool can slow us down but some tools are very important which defines a programmer. One of them is the editor he chooses. Long long back ago, one of my favourite was (sometimes still) is notepad++ when I’m working in Windows. I never could find a better, fast, easy editor like notepad++. Every since I moved on to linux for development, notepad++ was missing! It was a great lose to me in the beginning. I tried lot of editors like gedit, eclipse and etc. All of them are, well… okay to some extent but it never made me feel like “its the one“. Then i meet Sublime Text which I fell in love instantly and using it for more than 3 years now! But, after this long while and I fell in love again… for ATOM text editor.

My Blossoming Love With Sublime Text 2 & 3

Never I could find such a finer editor in my life, it is the best I could say which exist! Its perfect in all the way, It is smooth, lighting fast, tons of themes and dozens of packages. Below are the few reasons which makes a Sublime Text an awesome editor.

  • Like i said, smooth, lighting fast!
  • Based on Python and all settings are in JSON files (easy customizing)
  • Ease to install packages and themes
  • ctrl+p the life saver! Easy switch to files.
  • Tons of key bindings and shortcuts and easy way to customize them
  • Supports in Windows, Linux and OS X
  • Its free!!!

And here are the some of the finest packages/themes provided by Sublime Text

One Loves that Fades… Another Blossoms!

As times goes by (its like 3 years with Sublime Text), it started to feel little bored and I couldn’t see any huge difference in Sublime Text 2 to 3. Lot of packages and themes still growing and ofcourse, its still fastest when i met! But, there isn’t much huge change or cool updates.

Lately, I took resolution to study Python this year and found this book useful “learn python the hard way” (and its free online). The installation suggest to try something new called atom– yet another editor! I remember trying ATOM text editor long time ago and went off as it looks same as sublime and my love of sublime was more then! Today I tried again to give it a whirl (why not!). But I’m pretty much in awe after installating it! Its somewhat more grand and smooth! Its like falling in love at first sight! (not the first ofcourse). Some of the stuffs which got me loving this Atom text editor are

First impression, Best impression!

As soon as double click the ATOM icon, the first page look awesome! It was neat! Great start page. Its like Sublime but in a neater way!

ATOM welcome page
ATOM welcome page

Look at the above screenshot, neat 2 column layout with one introduction and right has everything you need to get started! Where as in Sublime Text, introduction will printed as text and no! information about how to get things started with themes and packages. We gotta install the package manager separately and start installing. This small but finer and clear information about these installation in the way beginning highly impressed me! (So I continued further…)

Theming – much easier to install!

Installing the theme is just a click way. I feel like Windows! Everything done snappy in click button.

ATOM settings page
ATOM settings page

As you can see, instead of Sublime Text everything is like HTML inputs, checkbox, color picker. There are lots of options to mess around. And yea, it also has the Google material theme.

ATOM Google UI
ATOM Google UI

But I’m lost the love of Android to Apple last year, so yea… I love the default ‘One Light’ UI and Syntax which is simple and elegant.

Looks – Smoothier and More Appealing!

Interface (sidebar + syntax area) is smooth similar to Sublime Text. The theme ‘One Light’ makes a milky look to the editor. It has the default ‘bracket matcher’, markdown preview, Git diff, able to add snippets.

ATOM package menu
ATOM package menu

It also has the variety of selections like select word, multiple word selection similar to pressing ctrl + d like in sublime text. There is a extra one which i found is the ‘select inside brackets’ which is seriously help for me as I work with huge unprettified XML & HTML files, its easy for me to select a chunk of a node. There is a shortcut of the same in Sublime Text or was it using an ‘add on’? Not sure. But its not clear as it is ATOM text editor.

Even the ctrl + shift + p is appealing in ATOM text editor.

ATOM smooth looks
ATOM smooth looks

Overall ATOM text editor is as good as Sublime Text but I’m starting to feel its much more than Sublime Text. But, I’m still going to use Sublime as my editor as i cannot replace with ATOM text editor just by using it in one day. So, I’m going to use partially for a week and then lets see. Both are great editors and best out there! So gonna for either one of them!

Keeping Promises using JavaScript – Part 1

Promises using JavaScript is not something new, it has been introduced years back, but we are not using because of not all the browsers didn’t support Promises at the time.

Before using Promises one should have clear idea about why need to use promises, as there any alternate apporaches to it etc. I seen lot of blog just giving a example to get started on promises before even explaning about basic asynchronous concept or even callbacks, which are related to JavaScript Promises. Below we are going to cover almost all concept involving around promises.

Life in Synchronous & Asynchronous Way!

Synchronous are things which are aligned over time, i.e one has response to the other and so on. For example, conversation is synchronous, dancing like that.

JavaScript, by default holds to things and do it one by one which we id this a “synchronous” (Except for few things like AJAX calls). Because JavaScript is single threaded and code will run one after an another.

Eventhough the working of ‘Synchronous’ can be useful for debugging; but it limits the thought of doing things multiple.

The problem with handling multiple things at the same time is “how to handle” the response? However, there are lot of other options to try.

Living with Callbacks!

Callbacks are nice way to acheive “asynchronous” way! Just a create a function, wrap the environment and pass it on, so it can be triggered somewhere else.

Example: simple callback

This is just a simple example, we can create even more complex callbacks. But there comes a problem with callbacks which are difficult to solve.

Example: Deep nesting A.K.A callback hell

{ function OnSuccess() { function DoThat() { …. } } function OnFailure() { function CallThis() { } } }

– Deep nesting
– Inconsistent callback behaviour
– Handling Errors
– Chaining

you read more about issues on callback from []

What about Events?

Similary like callback, events are great way to attach multiple times on a same object. Managing success and failure is still tricky!

Writing as Human Brain’s – Promises!

Promises – an asynchronous operation which provides great way to handle simulationous requests with precesion. They provide callbacks like functionality for each indiviual requests with more control both success and error data.

Promises exist to represent something that will be available in the future

Promises are very Promising because…

  • Code looks clean and more readable
  • Catching errors
  • Chaining
  • Multiple API calls &checking it simultaneously.

Solving the callback hell using Promises!

even better, chaining,

also, simultaneously run!

With JavaScript Promises, you can acheive the asynchorous way with ease and have more control over the data. In the part 2, we will some examples in action and also we need to know when to use Promises and when not to use it. Thats it for today! Enjoy!

Promises ain’t Callbacks; Its better!

  3. (for the image)

Ubuntu Budgie — The Newest Ubuntu Flavour

Ubuntu Budgie is the newest and coolest of the Ubuntu version which just landed! It digs some awesome looks LightDMArc GTK and Faba Icons. It has really smooth interface (feels like mac) and tons of update!


So what is Ubuntu Budgie!?!

  1. This a version of the operating system which uses the relatively new Budgie environment.
  2. Budgie Remix 16.04 is based on Ubuntu 16.04 LTS
  3. It includes the latest Budgie Desktop 10.2.5. Budgie Desktop
  4. Budgie Remix 16.04 includes Nautilus 3.18

Budgie is the flagship desktop of Solus and is a Solus project. It focuses on simplicity and elegance

Installing Ubuntu Budgie

or download directly from

Check it few screenshots