Hot Proton

Leave a comment

Lets do some magic with Git Bash : Visual Studio Code : Sublime Text

Git Bash : Visual Studio Code : Sublime Text with Git + Git Gutter Plugins

Wanted to check out how well is the Git integration with various code editors.

1. Installed Git Bash , Visual Studio Code, Sublime Text 3 with Git Gutter.
2. Create a Github Repo called test
3. Created a folder “C:\Sanket\Projects\GitHub” fired up Git Bash and did a clone of my “test” repo.
#git clone

4. Now time to test the Git integration with both code editors
5. open your git test folders in both code editors

For Visual Studio Code
code .

For Sublime Text
subl .

6. Now we have both editors ready for comparison

7. Lets make some changes in Sublime and VS Code and see how its reflected

VS Code gives us that familiar green stripe where ever changes are observed
Sublime Text with Git Gutter gives us those small + symbols.
Pretty useful right to track code changes.

These changes are tracked live from Git Hub.

8. On saving the file in VS Code the Git Icon lights up so that we can commit the file to Github. Lets peform a commit and push this file to Github.


9. Lets check out GitHub Page to see if the changes are reflected.

And this looks great.

10. Lets check it with sublime text.


Thats it hope you enjoyed it 🙂

Thats some really cool Git Magic.



Leave a comment

Rapid Coding with Emmet

What is Emmet?
Emmet previously Zen-coding is a super fast way of coding. There is a bit of learning curve but once you get a hang of it then you will never write code the old way. So lets get started with exploring whats this new way of writing code the rapid way or the emmet way.

Install Guides for various editors
Sublime Text 2
TextMate 1.x
Coda 1.6 and 2.x
Chocolat (available via the “Install Mixin” dialog)

Now if you have finished installing emmet for your favourite code editor lets get started !!!!

Type This

div#header>h1.logo>a{site Name}

Expands to This

<div id="header">
<h1 class="logo"><a>site Name</a></h1>

Emmet in Action

Read More
Emmet — the essential toolkit for web-developers
Emmet Abbreviations Syntax

Emmet Tutorials with loads of samples
High-Speed Coding — Goodbye, Zen Coding. Hello, Emmet! | Smashing Coding
Faster Workflow: Mastering Emmet, Part 1
Faster Workflow: Mastering Emmet, Part 2
Faster Workflow: Mastering Emmet, Part 3
Faster Workflow: Mastering Emmet, Part 4

Emmet Cheat Sheet
Emmet Cheat Sheet
Cheat Sheet – Emmet-Cheat-Sheet.pdf