TypeScript – Quick view – Pt. 1

What is TypeScript?

  • TypeScript is a syntactic sugar for JavaScript.
  • TypeScript syntax is a superset of ES5 & ES6 syntax.
  • Every valid JavaScript code is also a TypeScript code.
The TypeScript compiler emits JavaScript. The TypeScript compiler performs only file-local transformations on TypeScript programs and does not re-order variables declared in TypeScript. This leads to JavaScript output that closely matches the TypeScript input.
TypeScript does not transform variable names, making tractable the direct debugging of emitted JavaScript. TypeScript optionally provides source maps, enabling source-level debugging. TypeScript tools typically emit JavaScript upon file save, preserving the test, edit, refresh cycle commonly used in JavaScript development.
It can improve your productivity by enabling rich tooling experience. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. 

Why TypeScript?

JavaScript is standardized through the ECMAScript standards. TypeScript supports most of the latest ECMAScript features (the various posts under ECMAScript can be found here). Some of the interesting features of latest ECMAScript like modules, lambda functions, classes, the spread operator, destructuring, template literals are supported in TypeScript.

TypeScript makes JavaScript more and reliable by having following features

  • Optional static typing
  • Supports the latest JavaScript features
  • Supports classes, interfaces, generics
  • More productive than JavaScript

Optional static typing

JavaScript is dynamic type, it does not know type of variable until we initialize it. Typescript provides types support to code. Using static typing we can define the data type of the variable.

var x : string = "Make a smile";

Here we have declared a variable of type string. The popular data types available in TypeScript are Boolean, Number, String, Array, Tuple, Enum, Any, and etc.

We have mentioned TypeScript is optional static typing.

What does it mean?

It means, we don’t have to mention the exact type of variable always. If we don’t wish to mention the type of variable, we can user any type to declare the variables. Once we are initializing the any type variable, it will decide the type of variable based on the values.

example:

var y: any = “Clear Screen”;

Supports the latest JavaScript features

Most features of ECMAScript has been supported by TypeScript.

The latest features of ECMAScript like

  • Arrow functions
  • Classes, Inheritances
  • Destructuring

are supported in TypeScript as well. We can discuss about those topics in upcoming blog posts.

More productive than JavaScript

If the developer is already familiar with any of the Object Oriented Programming, it will be easy for them to adopt to TypeScript. The syntax are similar to Object Oriented language like C#.

As C# developer, in my personal experience I felt learning and understanding the syntax of TypeScript is easy.

IDEs can help you throwing error right away when you are coding itself. So you can focus more on coding and less time at debugging. Enhanced IDEs provides greater support to this language which provides significant productivity compared working with JavaScript.

 

This is just an introductory post, we can discuss more topics under TypeScript in upcoming posts. Please share your thoughts in comments section and follow this site for more updates.

 

Happy Coding!

2018 Books Reading Wish list

I’m currently preparing the list of books which needs to read in 2018.

This is just an initial draft, the post will be updated based on books availability and interests soon.

  • The Innovators: How a Group of Hackers, Geniuses and Geeks Created the Digital Revolution – Walter Isaacson

  • The Shallows: What the Internet is Doing to Our Brains – Nicholas Carr
  • The Phoenix Project: A Novel About IT, DevOps, and Helping Your Business Win – Gene Kim, Kevin Behr, George Spafford

  • Inside Cyber Warfare: Mapping the Cyber Underworld – Jeffrey Carr
  • Computer Science Distilled: Learn the Art of Solving Computational Problems – Wladston Ferreira Filho
  • The 7 Habits of Highly Effective People – Stephen Covey
  • The End of Jobs: Money, Meaning and Freedom Without the 9-to-5 – Taylor Pearson
  • Grit: The power of passion and perseverance – Angela Duckworth

  • The 4-Hour Workweek – Timothy Ferriss
  • What If?: Serious Scientific Answers to Absurd Hypothetical Questions – Randall Munroe

  • Stay Hungry Stay Foolish – Rashmi Bansal
  • The $100 Startup: Reinvent the Way You Make a Living, Do What You Love, and Create a New Future – Chris Guillebeau

  • Rich Dad, Poor Dad – Robert T. Kiyosaki

This is not a checklist or reading challenge list, it’s just a wishlist. Tamizh books details will be added once discussed with my friends 🙂

Please add your favorite books or suggestion list in the comments section.

 

Happy Reading!

 

 

The Art of Planning

“Don’t think about the start of the race, think about the ending” – Usain Bolt

One common question, I’m receiving from most of my friends is

How you are managing your time to do these many things?

Actually, they meant how I’m being active in learning new tools, reading books, making progress in blogging, posting random pieces of stuff at social media and all.

I took this question seriously and planned to answer them all via this blog post.

Planning is the ultimate key to unlock these activities.

 

Why planning?

A couple of years back I too had the same set of questions on how to create an action plan and how to efficiently work on it.

I have started reading some books, watching some YouTube videos, and listening to other people stories on how they are managing time on personal life as well towards their passion.

I have written all good ideas I have collected from the various medium in a notepad.

Later, I have clearly picked up the items which suit me.

On most time management & goal settings stories, I have found one common habit or ground rule.

It’s PLANNING!

 

How I have prepared my action plan?

Then, I have come up with an idea to create an action plan. I have started listing all things I wished or dreamed to complete in next few weeks or months or years.

Once I have listed all the items I wish to do. It looks like a large list, kind of watching a horror movie at midnight.

Instead of making progress in all the items at the same time, I have come up with idea of

  • prioritizing
  • categorizing

I have started to prioritize the list based on Career growth and Personal growth from most to least important. (Kind of bubble sort, decided which bubbles I need to burst first)

After prioritizing, Its time for categorizing.

In my case, I have decided to Categorize my action plan based on what time frame I have to achieve it.

So, the categories will look like this

  • Long-term
  • Short term
  • Daily
  • Today

The long-term goal is something I planned to achieve in few years. Short term goal is the items I wish to cover in minimum one year. Daily goals are like checklist I should follow on daily basis. Today board is to plan for the day ahead.

Ultimately, my planning board looks like following

planning

I shall create a separate post on how I plan for the day ahead.

I used to keep this list on my desktop screen always using sticky notes options on my windows laptop.

Basically, I’m a sticky note lover. And below is my monitor screen filled with sticky notes 🙂

sticky_notes_overused

 

Next big step

We have planned everything, whats the next big step?

Executing

Yes! A very organized plan will help you to make consistent progress to reach your goal.

 

Hope you have like this post, please follow this blog to receive more updates.

And also Please comment your thoughts or share your ideas on planning in the comment section.

 

Happy planning!

 

 

Origin of Hello World

When we start learning some programming languages or watching some tutorials, the very first code example we will come across is displaying a greeting message. Most probably message will be

“Hello World” or “Hello World!”

* ignore the case

If we can see this two words in our output, we believe that we achieve something and everything loads, or works as expected. It’s a test, signifying a start to a program. Over the past several decades, it’s grown to become a time-honored tradition. Once the Hello World is displayed in the Output window, internally in our mind we appreciate ourselves like Yeah! we did it. (beginner stage of programmer life; of course, someone still has the enthusiasm after years & years of experience).

The following is my first hello world program I have used in my attempt at learning programming like everyone else

#include <stdio.h>
main()
{
        printf("hello, world\n");
}

Where did it come from?

The tradition of using the phrase “Hello world!” as a test message was influenced by an example program in the seminal book The C Programming Language. The example program from that book prints “hello, world” (without capital letters or exclamation mark), and was inherited from a 1974 Bell Laboratories internal memorandum by Brian Kernighan, Programming in C: A Tutorial, which contains the first known version:

 main() {
        printf("hello, world");
 }

The first known instance of the usage of the words “hello” and “world” together in computer literature occurred earlier, in Kernighan’s 1972 Tutorial Introduction to the Language, with the following code:

main( ) {
  extrn a, b, c;
  putchar(a); putchar(b); putchar(c); putchar('!*n');
}
a 'hell';
b 'o, w';
c 'orld';

 

After that people started using the same greeting message in books, demos, and tutorials for lots of programming language like Java, C#, etc.

That’s it.

So, Hello World!

Happy Coding!

 

A techie newbie?

Wow! Welcome to the tech field where you have lots of computers, servers, rolling chairs, ACs, etc. It may be a very hard task to transition from college to a job -a software developer. In spite the myths about this job, claiming to be the most paid job, most stressful job, most hair-fall job, most whatever job, it has its own pros and cons. Yet many of the myths are true, the hair-thing for example 🙂 Just kidding!

When you first step into this field, everything seems a little off and people keep on speaking, attending meetings, tapping the keyboard, etc and you don’t understand what they speak or why 😦 For two months you will be left alone, I mean you would struggle to make friends and acquaintances. People would stare at you as if you are from Kepler-1229b (an exoplanet) but as days go by, you begin to get along with the people around you. (i.e) You start to code.

When this process begins, you discover new languages, frameworks, and most importantly you will realize that StackOverflow is the greatest treasure you can have. And every time you try to stay cool, some bug would rise up from the code you wrote yesterday and dance before the QA Team. Your bad 😦

Even I’m new to this field. I have consolidated few tips that would make you feel better as a fresher in this job -the most paid job 🙂 Again kidding!!
This post is a bit lengthy, if you want a quick read, just skim through the bold letters.

Mistakes are OK:
Yup! You heard it. No one is perfect. A famous proverb says “Rome was not built in a day”. Perfection comes with practice and experience and they come with mistakes. When you commit a mistake, learn from it and try hard not to repeat it again. One of my favorite quotes -“I never fail, I learn”. Learn from the mistakes of your seniors as well.

Ask questions:
Being new to this field, everything will seem strange and weird. Open your mouth and ask questions if you are not clear about anything. People in the software field are kind. They will surely help you. Do not hesitate to ask a question that has knocked your throat. Just open your mouth and let it out.

Get Help from seniors:
Don’t feel shy to speak with them, they are also fellow human beings with an experience level greater than you. They would always be ready to help you out. Think them as your StackOverflow but do not disturb them often. This might lead them to avoid you, move to another cabin, find another job, etc. Who knows!! Just don’t disturb them with silly questions like “What is 1&&-1 ?”, “Visual Studio is not working, can you help me?”, you could Google it instead 🙂

Learn/Read/Practice:
I heard people in college say, “All this studying stuff, examinations, semesters will get over within the college, Once into a job, we are free, no exams, no learning, nothing”. My friend, this is not true and you know it. You have to keep on learning as the world moves fast, so does the technological advancement. Frameworks, languages they all mutate every day, make sure that you read a lot and keep your technology stack up-to-date.

Improve writing skills:
Don’t write stories in the comment/work-log. Be straight to the point you wanted to say. Did some changes to the code?? Commit message – “updated bug that was not fixed today”. This type of writing doesn’t help you. In this field, you will have to write a lot of comments, reply to emails, skype with people. Poor writing skills do not help.

Be precise/short and firm in words:
Speak right to the point and use the correct words. Once I was asked by my team lead at the beginning of my career -“What is AJAX ?” I had no idea what it was back then. I knew “A” was for asynchronous so I started with Asynchronous… JQuery… He said “Don’t bluff” 🙂 All I wanted to make clear is that, if you don’t know something –Don’t bluff 🙂

Be wise while you code:
Read about OOPS and try to implement them and make the code modular. Use efficient algorithms and do a thorough analysis before you get your hands dirty on the code. Understand why and how the code works and then begin your task.

Keep your passion along with you:
Not everyone has the same passion -coding. Each and everyone may have different hobbies and passion. Do not leave them untamed. Follow your passion. Coding is your profession, passion may be something else. When you feel bored or stressed, ignite your passion and feel the stress relieved.

And finally, Smile always 🙂
“Face is the index of mind”, radiate joy and confidence to the people whom you meet and talk with. A simple smile can brighten your day.

This is a field where you can develop your logical thinking, programming skills, ability to solve problems, communication skills, comprehending skills, etc. Make use of it. It may be hard in the beginning but as you get involved you will be drawn towards it and stress will stay away from you. For more posts on life skills, visit samuellawrentzz.wordpress.com

Happy coding!!

Emmet in VS Code

VS Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

VS Code is one of my favorite code editor. I love the various features like embedded Git Control, Code completion, snippets, code refactoring etc.

I’m a full stack web developer (I used to call myself with that name), I have been using the vs code from its earlier release. I use to follow the release notes of VS Code on every release.

I always used to share the details of VS Code new features with friends, colleagues and all. Some of the features I have excited about was integrated terminal, Side by Side editing, Command palette, Markdown preview and list goes on.

Today, in this post I would like to share one of the interesting feature of VS Code which is involved with Code completion.

It’s Emmet!

So the next big question is,

What is Emmet?

Wiki says,

Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.

Me:

To be short, it helps to code completion, add snippets, etc.

And next big question is, even some text editor also doing this fair job nowadays. Why Emmet?

Yes, nowadays all the editors comes up with code completion or syntax suggestion intellisense.

However, Emmet got some cool features like syntax abbreviation, improves HTML, CSS workflow. Using Emmet we can quickly write a bunch of code, wrap code wit new tags.

Your favorite may be Atom, Sublime, Brackets or something else. Emmet supports most of your favorite editors.

Check this link on how to integrate Emmet with your editor.

https://emmet.io/download/

It’s a plugin, you can install or integrate with your code editors.

 

Emmet in VS Code

The one good news is that we don’t have to download & install the Emmet in VS Code.

Emmet is built in with VS Code, no extension in required. OK, that’s the base story; now let’s start with how to use the features.

 

How to expand Emmet abbreviations?

Emmet abbreviation and snippets are enabled by default for html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

Mostly, Tab key is used to complete the code abbreviation. We have to type the syntax and click tab key to expand the abbreviations.

We expand the single html tag or even expand the hierarchy of html tag at the same time by clicking tab key.

emmet-gif-01

 

An important change is that the Tab key is no longer the default way to expand Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

We can quickly view the Emmet abbreviation by clicking the info icon next to list shown. By typing text next to hash (#) will be taken as id and text next to period(.) will be considered as class name. Emmet basically works related to CSS selectors.

emmet-gif-02

And also we can create multiple list of same syntax with unique id as well.

emmet-gif-03

 

We can generate lorem ipsum text with default number of words or certain number of text by mentioning the word count.

emmet-gif-04

 

Let’s see some CSS abbreviation example as well

emmet-gif-05

 

To experience more html & css short code check this out link https://docs.emmet.io/cheat-sheet/

The complete cheat sheet for html and css.

Try out and let me know your thoughts on the comment section.

Happy Coding! 🙂