Category: Web Development


VS Code Setup Guide

In the past few year, I have used Sublime Text as the text editor of my choice for Front End Web Dev work (and to draft these blog posts). I wanted to try a different text editor (FOMO, next cool thing, need more fun … whatever) and decided to try Visual Studio Code or VS Code. This post is my VS Code setup guide.

VS Code is made by the makers of OneNote (which I adore), and it has good reviews from other dev folks. It is also free and has an extensive extensions market. In addition to the installation, in this guide, I list some of the many extensions to improve productivity from the get go and to try to replicate some features I loved in Sublime Text.

Here is the set of links I followed for setup, configuration and customization.

Installation

  1. Installation Link
  2. On Mac only: setup the command prompt for command line invocation.

Customize the Look and Feel

  1. Nomo Dark icon theme: Icons in your explorer window to identify the files types / folders easily.After installing, enable the extension by going to File > Preferences > File Icon Theme > VSCode Icons. (On OSX it is Code > Preferences > File Icon Theme > VSCode Icons.)
  2. Kary Foundation Theme Light theme: I pretty much use light themes. I like the color scheme and the recommended typography. Out of the box, the fonts and text color in this theme isnt’t that great. You absolutely need need to install the recommended Hasklig font, and then it becomes really good.After installing, enable the theme by going to File > Preferences > Color Theme and select “Kary Foundation Theme – Light”
  3. Hasklig Font: A code font by Adobe Systems with monospaced ligatures, recommended for use with the Kary Foundation Theme. After installing the theme on your OS, enable the font. Then go to File > Preferences > Settings and update your settings with the following:
    {  
      "workbench.iconTheme": "vs-nomo-dark", 
      "workbench.colorTheme": "Kary Foundation - Light", 
      "editor.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",  "editor.fontWeight": "500", 
      "editor.fontWeight": "normal",
      "editor.fontSize": 15,
      "editor.fontLigatures": true,
      "terminal.integrated.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
      "terminal.integrated.fontLigatures": true
    }  

Set up the editor conveniences

  1. Path Intellisense Visual Studio Code: Plugin that autocompletes filenames.
  2. NPM Intellisense Visual Studio Code: Plugin that autocompletes npm modules in import statements.
  3. Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
  4. Auto Rename Tag: Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
  5. Expand Selection To Scope: This extension introduces a command that incrementally expands the selection to the nearest outer scope (delimited by bracket pairs).
  6. Paste and Indent: Paste some code with “correct” indentation.
  7. AB HTML Formatter: This tool is formatting / reindenting HTML code.
  8. Rainbow Brackets: Provides rainbow colors for the round brackets, the square brackets and the squiggly brackets.
  9. Guides:Guides is simply an extension that add various indentation guide lines.
  10. Color Highlight: Highlight web colors in your editor.
  11. Color Picker: Helper with GUI to generate color codes such as CSS color notations.

Set up the development conveniences

  1. ES Lint: ESLint Integrates ESLint into VS Code. You need to have installed ESLint first.
    npm install eslint
    
  2. CSS Auto Prefix: Auto-prefixes certain attributes in CSS.
  3. Style Lint: Modern CSS/SCSS/Less linter.Enable the linter, while disabling the built-in CSS and SCSS linter. Go to File > Preferences > Settings and add the following to settings.json:
    { 
      "stylelint.enable": true,
      "css.validate": false, 
      "scss.validate": false 
    }
    
  4. HTML CSS Support: CSS support for HTML documents.
  5. HTML Snippets: Full HTML tags including HTML5 Snippets.
  6. HTML Boilerplate: A basic HTML5 boilerplate snippet generator.
  7. Gulp Snippets: Gulp JS Snippets for Visual Studio Code.

Projects and versioning

  1. Git Extension Pack: Popular Visual Studio Code extensions for Git. Contains the following extensions:
    1. Git History: View git log, file or line History.
    2. Project Manager: Easily switch between projects.
    3. Git Lens: Provides Git CodeLens information (most recent commit, # of authors), on-demand inline blame annotations, status bar blame
      information, file & blame history explorers, and commands to compare changes.
    4. gitignore: Language support for .gitignore files. Lets you pull .gitignore files from the https://github.com/github/gitignore repository.
    5. Open in GitHub / Bitbucket / VisualStudio.com: Jump to a source code line in Github / Bitbucket / VisualStudio.com.

Measuring (for the dataphiles)

  1. Wakatime: Metrics, insights, and time tracking automatically generated from your programming activity.

Debuggers

  1. Debugger for chrome: Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
  2. Debugger
    for firefox
    : Debug your web application or browser extension in Firefox

Polymer Specific

These extensions are specific to Polymer – a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable
apps.

  1. Polymer IDE: Provides linting, autocompletion, and more for web components.
  2. Polymer Syntax: Polymer syntax highlighting for Atom & VS Code!
  3. Polymer Snippets: Sublime snippets for Polymer and Web Components

Additional Settings

These are additional changes to the editor settings to make life easier. Go to File > Preferences > Settings and add the following lines to your settings.json file

  1. Change tab size from 4 spaces (default) to 2 spaces.
    {
      "editor.tabSize": 2
    }
    
  2. Enable word-wrap – if you are crazy like me.
    {
      "editor.wordWrap": "on"
    }
    
  3. Enable the minimap to quickly navigate long files.
    {
      "editor.minimap.enabled": true
    }
    
  4. Show white spaces outside words
    {
      "editor.renderWhitespace": "boundary"
    }
    
  5. Enable formatting on typing and pasting.
    {
      "editor.formatOnType": true,
      "editor.formatOnPaste": true
    }
    
  6. Enable copying the current line when Ctrl+C is pressed without any selection. – Enabled by default!
  7. Enable Files Auto-Save
    {
      "files.autoSave": "afterDelay",
      "files.autoSaveDelay": 8000
    }
    
  8. Enable Polymer to analyze the whole package, though it’s slower:
    {
      "polymer-ide.analyzeWholePackage": true
    }
    

The settings.json file now looks like


// Place your settings in this file to overwrite the default settings
{
    "workbench.iconTheme": "vs-nomo-dark",
    "workbench.colorTheme": "Kary Foundation - Light",
    "editor.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontWeight": "500",
    "editor.fontSize": 15,
    "editor.fontLigatures": true,
    "terminal.integrated.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.renderWhitespace": "boundary",
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "terminal.integrated.fontFamily": "Hasklig, Menlo, Monaco, 'Courier New', monospace",
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 8000,
    "polymer-ide.analyzeWholePackage": true
}


Introducing LittleReads – The most awesome book tracking app in the universe

This is a side project I’ve been working on since November 2016. Here is the grand reveal. I’ll blog technical about the making of Littlereads over the next few weeks. Meanwhile, here is the introduction.

LittleReads LogoLittleReads

The most awesome book tracking app in the universe


Superhero couple image

Do you have a child under 6?

Do you read books to your child?

Are you participating in the 1000 books before kindergarten challenge?

Do you want your child to be a super-duper-reader?

Do you want an easy way to track books you read to your child?

Yes? Join us at littlereads.us

Littlereads is modern. LittleReads works on iPhones, Android devices, desktops, laptops,
LittleReads even works offline!
(Told you … it’s awesome! Better than sliced bread even…)

My Story

I have a superpower. I go places.
kids reading imagination image

Utopias, dystopias, future time, past time, alternate time, dungeons with dragons, androids and superworms, new galaxies, universes, multiverses. All are just a book away.

I want to pass this superpower to my daughter. So I read to her.

We go to the library, hang out there, color there, read books there. And bring home a lot of books.

I even signed up for the 1000 books before 6 challenge. I tried the book provided to track read books, but wanted a more convenient digital option. And I have forgotten the books she loved (and I loved to read) when she was 1,2,3…
So I went looking in the wild, for a way to track books. I found a few – but none of them catered to the young ones… you could not track when and how many times you read the same book.

So I decided to scratch my own itch and develop a rash. I mean, an app which is simple, colorful, easy to use, which can track the books I read to her and show me that data in pretty charts. So after about 6 months of development, here is LittleReads.

So please tell me…

What do you think about LittleReads?

Can you use it and tell me what you think? Any bugs, issues? What features you would like to see? Something not working the way you like?

You can email or Tweet @suprada with feedback. Waiting eagerly to hear what you have to say.

Happy reading (and tracking),
Suprada


Share LittleReads with the world:

  • Tweet: Parents, check out #LittleReads - most awesome book tracking app in the universe for your little ones!
  • … or Just forward this email


A history of website development of sofobomo.com Part II

Note: Part I here

Part II : Setting up a development environment for sofobomo.com

The question is, as a one-person team of sofobmo.com (until 2016 – when Matt joined me … Hi Matt!), how did I set up www.sofobomo.com, and how have I managed, updated, made changes to SoFoBoMo till now? Why, by myself of course. The site is live on a webhost. Any changes I need to make, I make it directly on the site itself – the production environment, so to speak? Are you cringing, shuddering reading this? You should be….

Crazily, until I started my job as a front end engineer, I never realized the magnitude of my mistake. No development environment, no version control, none of these safeties for my baby! (Shudder…)

Back in July, when SoFoBoMo 2016 started, I vowed to myself this would change. Because Matt joined Sofobomo, and it doesn’t help a team when one person makes random changes on the website – just to try things out. And also because of the massive UI changes we need to make to the website for Sofobomo 2017 – make the site responsive, add Facebook integration, add beautiful forums, some voting scheme and other features.

So I spent some time in September, setting up a development environment on my Macbook. I had, in the past tried to use the MAMP stack, but never actually got it completely functioning – mostly because I was not as motivated. This time however, I was as highly motivated as can be, and was commited to a development environment. As of writing this, the Drupal official site seems to recommend using Virtual Box and a pre-made Vagrant setup. I decided to try this out and use Drupal-VM.

The setup was super easy – following the instructions in the quick start guide. I downloaded my production site files, downloaded the current database from the production site using the Backup and Migrate module. I then downloaded and installed Virtual Box, Vagrant and Ansible. As per the instructions, I made a copy and updated the config.yml file to point to my downloaded codebase (Drupal files) (and disabled installing a fresh Drupal instance). I also updated the config file with the downloaded database details, and enabled Adminer as one of the development dependencies. Then a “vagrant up” on the command line and waiting for everything to be installed. And finally adding the VM IP address to my hosts file and I was ready to go. Simple, easy. In fact, much easier than what I was expecting. Now, if only my shared web hosting provider would enable Drush so I can just push updates via the command line!

And so, that’s how I have a development environment for www.sofobomo.com. Pair it with version control with Git and backup the files in bitbucket or github, and I am ready to start making changes for SoFoBoMo 2017!


A history of website development of sofobomo.com Part I 1

Part I :A History of sofobomo.com (the second SoFoBoMo that is…)

For as long as I have been running SoFoBoMo 2.0… That’s not a good way to start this post is it? Let me try again…

I made the decision to restart SoFoBoMo (or start SoFoBoMo 2.0) back in mid-2013 after obsessing about it for about 8-9 months. The first and most immediate thing I needed was a website – which I decided to build by myself.

Sometime in September 2013 or so, I built a plain HTML+CSS kind of website – and realized I needed something with more features, something a little more complex like authentication and user profiles and some such.

I then spent the next 5 months building a Ruby on Rails version of the SoFoBoMo website – this without ever having understood or learnt MVC or any other software architectural patterns. Indeed, I didn’t know of such a thing as a software architectural pattern. Now that I do this for a living, I appreciate how ignorant I was, and how brave I was in my ignorance. It’s funny how you always realize how ignorant you were in the past…, and how the more you learn, the more there is to learn…

I actually had a completed RoR website by March 2014– but I rightly realized that with my limited understanding and expertise, maintenance would become a huge issue and decided to abandon it. I did learn a lot with that iteration of the website- how much I didn’t know, how much my learning methodology needed tweaking and how eager I was to learn new things. There are good things to learn about oneself, if you ask me…

At this point, I was a little panicky as I needed a website by at least October to run SoFoBoMo 2014. Actually I needed it a little earlier – to add content, to reach out to the previous SoFoBoMo participants and to add their books to this new website I was building, start a mailing list etc. So I decided to fall-back to the easiest option – to use a Content Management System.

But which one? Word Press? Joomla? Drupal? Something else? Doing some research, I had to choose between Word Press and Drupal. This choice was easy. Since I had used Word Press for various self hosted blogs and such, I picked up Drupal. One always chooses the complete unknown over something one has tried and tested before, right?

And so today’s SoFoBoMo site is in Drupal 7. (I did manage to curb my enthusiasm for the unknown and chose 7 over 8).

And that is the short history of www.sofobomo.com – at least when it comes to web development.