General

How to run multiple node versions in a computer?

Solution is to use Node Version Manager (nvm) which helps manage multiple version of node versions.

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash

To see the list of all available nvm versions,
$ nvm ls-remote

Currently, Node v6.11.1 has the long term support (Latest LTS: Boron). We will setup that first version

$ nvm install 6.11

The above command will install Node.js version 6.11.x (where x will be the last available version number)

To find where the node version is installed, type
$ nvm which 6.11

As of this writing, the latest version available is v8.1.4

$ nvm install 8.1.4

When nvm installs the corresponding npm package also gets installed.

You can switch between different versions of the node by typing

$ nvm use 6.11.1

or

$ nvm use 8.1.4

To list all the available versions of installed node versions, type

$ nvm ls

Share

How to open a file in Atom editor from a Mac terminal?

When atom installs, it sets up a symbolic link to the location where it is installed. You can open a file or folder in atom by using the following commands

a) Open the editor

$ atom

b) Open a file

$ atom index.html

c) Open atom in the current folder

$ atom .

Share

Git: Reset local branch to make it the same as remote branch master

Go to your local repository in bash

$ git fetch origin

$ git reset –hard origin/master

To clean and remove untracked files and directories

$ git clean -fdx

Share

Git: How to reset Develop branch to be in sync with Master branch?

First checkout Develop branch

$ git checkout dev

Then, reset it to Master branch
$ git reset –hard master

Make sure to push the changes by force to make origin/dev to be the same as origin/master
$ git push –force origin develop

Share

Git error: src refspec master does not match any

Point 1) Check if you have followed the below sequence of steps when setting up git in your local workstation

$ git init

$ git add .

$ git commit -am “name of the commit”

$ git remote add origin https://github.com/username/repository.git

$ git push -u origin master

Point 2) Check if .git/config file has the following parameters in it

[branch “master”]

remote = origin

merge = refs/heads/master

Share

Python PIP install: Insecure platform warning

Normally, installing a python module and its dependencies is done via Pip. If HTTPS is blocked in private networks, then things might get tricky and you get the following message.

InsecurePlatformWarning: A true SSLContext object is not available. This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fail.

To bypass this, you can issue the below command to trust pypi.python.org

$ pip install –trusted-host pypi.python.org Flask

To make sure that the needed module is installed, check it by

$ pip freeze

Share

Wireframesketcher – Tool for prototyping

Wireframing is one of the most valuable phase of any application development process. Understanding requirements from customers is the key step to project success. When this process is done with a right wireframing tools such as WireframeSketcher, PowerMockUp, Gliffy (some of the tools that I experimented this year) it helps designers produce quintessential designs in short span of time and developers understand finer details of the design elements.

As a startup, I was using paper-and-pencil model for wireframe creation to take down requirements, visually portray design concepts and straighten project objectives for creating web applications. Going with the traditional method of prototyping had its own drawbacks and the four major ones are
a) flexibility to change or tweak the prototypes built in short duration
b) re-usability of the prototypes built in the past to save time
c) option to develop prototypes in online and offline mode
d) easy options to save, export prototypes in digital formats
Continue Reading…

Share

YEOMAN – Yo, Grunt, Bower – Power tools for front-end developers

Yeoman is a tool for modern workflow to aid front-end web application development. Yeoman consists of three tools to manage this workflow and has generators available for Angular, Backbone and a collection of over 100+ other projects

+ Grunt – It is the builder and utility component that helps automate repitive tasks, script minification, javascript task compiler, compiling sass, coffee script
+ Yo – It is the code generator component that helps in scaffolding, writing boilerplate code, install some grunt tasks
+ Bower – It is the package manager for web and it helps fetch javascript library and/or javascript/css frameworks and its dependencies. This is similar to Maven for java.
Share

Firefox: Responsive design testing for Mobile devices

Follow the below steps to set the preset value for responsive design testing on mobile devices

i) Go to the address bar in firefox and type “about.config

ii) You will get a warning message stating “This might void your warranty … Changing these advanced settings can be harmful to the stability …..”. Click the button “I’ll be careful, I promise!’

iii) In the search bar, type “presets” and look through the filter values for “devtools.responsiveUI.presets“. Double click on the preference name “devtools.responsiveUI.presets” and enter the values

[{“key”:”320×480″,”name”:”iPhone 3g/3gs”,”width”:320,”height”:480},{“key”:”360×640″,”name”:”Nokia E7, n90″,”width”:360,”height”:640},{“key”:”640×960″,”name”:”iPhone4/4s”,”width”:640,”height”:960},{“key”:”640×1136″,”name”:”iPhone5/5c/5s”,”width”:640,”height”:1136},{“key”:”768×1024″,”name”:”ipad1/2″,”width”:768,”height”:1024},{“key”:”800×480″,”name”:”Android-WVGA”,”width”:800,”height”:480},{“key”:”800×1280″,”name”:”KindleFireHD8.9″,”width”:800,”height”:1280},{“key”:”2048×1536″,”name”:”Retina display”,”width”:2048,”height”:1536},{“key”:”600×800″,”name”:”KindleFire/Galaxy/Nexus”,”width”:600,”height”:800}]

Once the values are entered, you can open a new instance of the browser and click ctrl + shift + m to open up the responsive web view

Share

Responsive web page testing tools available online

QuirktoolsScreenfly

Interesting site to test mobile web pages of various screen sizes (kindle fire, samsung galaxy tab, google nexus 7, apple ipad 1 – 3 mini, kindle fire HD,  motorola razr v3m, motorola razr v8, blackberry 8300, apple iphone 3 & 4, LG optimus S, Samsung galaxy S2, ASUS galaxy 7, apple iphone 5, samsung galaxy s3/s4)

Also this tool offers landscape and portrait modes in addition to scroll & retina effect.

StudiopressResponsive testing

Responsive test from responsivetest.net

Another interesting tool available online to check web page responsiveness on mobile phones, tablets, laptops and desktops. The web tool has resolutions for testing categorized by devices Apple, Blackberry (Bold 9930, Q10, Torch 9810, Torch 9850, Z10), Samsung, HTC, LG

Other tools

Browser resizing – http://resizemybrowser.com/

Responsive pixel – http://responsivepx.com/

Demonstrating responsive design – http://www.jamus.co.uk/demos/rwd-demonstrations/

Refer Wikipedia for the display of devices by pixel density http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Share
Kurinchi Calendar
August 2018
M T W T F S S
« Oct    
 12345
6789101112
13141516171819
20212223242526
2728293031