All posts by Ramesh Jha

Skeleton – A lightweight CSS framework for your next side project

Skeleton is a lightweight CSS framework that provides a nice boilerplate to kickstart the development process. I like the minimal design approach. Plus, I can easily add more CSS on the top if required. The grid and some basic styles are more than enough to get started.

Simple Responsive grid

Simple, easy and human friendly grid-naming conventions. Just add a div element with class ‘row’ (with child columns) inside a container and you’re good to go (12 column grid – kind of similar to bootstrap and foundation).

Basic styles for Standard elements

Skeleton comes with basic styles for standard HTML elements such as Headings (h1/h2/h3 etc), basic form elements (input, buttons etc), tables and some utility classes (for left/right alignment, clearing floats etc). Here is how a simple ‘sign in’ form with Skeleton.

Lightweight, fast and easy to override

The Skeleton along with Normalize CSS is less than 10KB when minified. So, it’s a great choice for smaller web projects, side projects, mobile websites, landing pages for your mobile apps etc.

You can download the latest version from the official website : http://getskeleton.com (Current version : 2.0.4). Sass and LESS versions are also available to help you add Skeleton in your preferred development setup.

Also check out my last weekend project – Mobile Number Tracker (India) – I created using Skeleton.

Email Checker – Free online tool for verifying an email address

Do you often send email to new people and sometimes you’re not sure whether that mailbox actually exists or not ? Then you should use some email verification tool, it will help you avoid wasting time on dealing with invalid email addresses.

Check out : https://email-checker.net

email checkerIt started out as a fun side project just like my other weekend projects (like this port checker tool and another one on creating signatures) but now I’m thinking to add some more features in next release and also launch an API for bulk email verification stuff and so on. (based on some recent feedbacks from the users)

How does it work ?

It involves four simple steps :

  • First, the regex check where it simply checks the syntax of the email (something@validdomain format).
  • Next comes the domain validation. If the domain is invalid (doesn’t exist) then there is no point in going any further.
  • Third step involves extracting MX records from the DNS query result.
  • In final step, it connects to the SMTP server and tries to simulate sending a message. Most of the servers (e.g gmail) responds with appropriate response depending on whether the mailbox exists or not.

Example : When user enters a non-existent email address name@example.com, the response is :

No mail server for name@example.com

Update! The premium plan without any limit and few extra features (list verification etc) are also available here => https://bulk.email-checker.net/

Taskwarrior – Terminal based TODO Application

Taskwarrior is a command line app for managing your todo list. It’s lightweight, simple and fast. If you spend lot of time on terminal (as a developer or system administrator) then constantly switching to a web app or another GUI based todo app may not be very productive thing to do. In that case, you may want to try a simple command line application instead.

Taskwarrior

Taskwarrior has human-friendly natural command line syntax. You will also like its simplicity. I like how it doesn’t reinforce any particular methodology (whether you prefer GTD or something else, it doesn’t matter). Here is a simple command for adding a task :

task add Write an article about task due:tomorrow

Installing Taskwarrior in Ubuntu/Linux

If you’re using a GNU/Linux distribution such as Ubuntu, then it’s already there in your package repository (I’ve tested on Ubuntu 14.40 LTS) under the name ‘task‘.

sudo apt-get install task

For older version or other distributions you may want to download it from official site.

Few important commands you should know

  • task add sample task (adding a task, you could specify other things like priority or due date etc)
  • task list (it lists all the pending task with their ids and other details)
  • task 5 done (marks the task with the id 5 completed)
  • task 4 delete (deletes the task with id 4)
  • task all (displays all the pending and completed tasks)

If you want to know more about the features read the man pages (man task) or read some tutorials on official website.

A Simple PC Builder Site for Indian Users

AssembleYourPC is my side project, I started last year (March 2013) when I couldn’t find any PC builder tool for Indian users. It’s a simple tool and you may find it useful while building a custom rig. The component prices are fetched from various sites (online) but it’s quite closer to the actual market price.

Current Status

  • Monthly users : ~25k
  • Number of rigs assembled so far : ~74k

Check out the website here : http://assembleyourpc.net

Simple and easy PC builder

Most of the components are handpicked, selected based on their performance reviews and ratings, so users can choose parts without any worry. (It also supports USD now!)

pc builder tool
Selecting a Component [Processor Page]

Compatibility Check

For now, it checks for socket compatibility between processor and motherboard, I’m planning to add compatibility options for other components (Cabinet, Power Supply etc) as well.

pc-builder-compatibility-check
Showing Compatible Motherboards

Showing Final Rig

Users can either buy parts online (Flipkart, Amazon or Snapdeal) or download & print the pdf to buy it offline.

final rig
Displaying the details of a Rig

Next set of features, I’m working on

  • Make the website mobile friendly (responsive design and speed improvement)
  • More details for each components (description, reviews etc)
  • Allow users to buy their custom rig online (requires tie-up with some vendors and online payment gateway stuff etc)
  • Feel free to suggest some new features (you can comment below or email me here : ramesh at rameshjha.com )

Thanks And Credits

  • Lots of enthusiastic users for their feedback/suggestions over the last one and half year
  • Reddit India (/r/india) users for their feedback here

Deploying Sinatra Applications to VPS with Passenger/Nginx [Ubuntu 14.04]

Sinatra is a lightweight web development framework (a.k.a micro framework) written in Ruby. It’s a MVC framework (just like Rails) but more suitable for simple and small web projects or APIs (otherwise, you’d probably end up writing too much code, which could be done more easily in Rails, in case of complex web applications).

If you’re new to web development and you’ve just learned ruby then then you should start with sinatra. It’s much easier to learn and you can start creating something (ideally something useful) within hours. Create a simple web app and deploy to Heroku or your VPS using passenger. This article is all about deploying your Sinatra app to VPS.

Why passenger ?

For simple lightweight web applications (sinatra apps), I prefer passenger. You can easily run multiple applications on a single server without any extra configuration (good for small side projects). Later, you can move to unicorn (probably faster response cycle) or puma (lightweight, optimized for concurrency) or something else, if you really need to.

Getting a VPS

Before going through the steps, I assume you’ve already selected a VPS company, if not I would recommend Digital Ocean. (That’s a referral link and you’ll receive $10 credit – worth two months of free hosting) They’ve great plans starting at just $5 per month, well suitable for fun/side projects. For server operating system, select Ubuntu 14.04 LTS, otherwise, you may need to adjust few commands a little, depending on the Linux distribution. For memory and other requirements, 512 MB plan may be enough for a starting out, as you can always upgrade later if required.

Step 1. Server setup

Login into the server (with default root user) :

ssh root@SERVER_IP_ADDRESS

Update existing packages and install nano (a lightweight text editor)

apt-get update && apt-get upgrade
apt-get -y install python-software-properties nano

Creating a user

adduser username --ingroup sudo

Now, upload your ssh key (public key) from development machine. (local)

ssh-copy-id username@IP_ADDRESS

Now ssh into the server, and make sure ssh keys are setup as as expected. Additionally, you can turn off password authentication for additional security, type sudo nano /etc/ssh/sshd_config and disable password authentication by changing the value from yes to no. (PasswordAuthentication no)

Note : If you haven’t created any ssh key before (on your local computer), then run ssh-keygen to generate one.

Step 2. Install Ruby

install curl, git and other dependencies

sudo apt-get install git-core curl zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev

installing rbenv

git clone git://github.com/sstephenson/rbenv.git .rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL

Install ruby 2 and set it as the default

git clone git://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
echo 'export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"' >> ~/.bashrc
exec $SHELL
rbenv install 2.1.5
rbenv global 2.1.5

Now check if it’s installed correctly

ruby -v

Update gemrc and Install Bundler

echo "gem: --no-ri --no-rdoc" > ~/.gemrc
gem install bundler
rbenv rehash

Step 3. Install nginx and passenger

Adding the passenger repository (official)

sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 561F9B9CAC40B2F7
sudo apt-get install apt-transport-https ca-certificates
sudo sh -c "echo 'deb https://oss-binaries.phusionpassenger.com/apt/passenger trusty main' >> /etc/apt/sources.list.d/passenger.list"
sudo chown root: /etc/apt/sources.list.d/passenger.list
sudo chmod 600 /etc/apt/sources.list.d/passenger.list
sudo apt-get update

Install nginx (with extras) and passenger

sudo apt-get install nginx-extras passenger

Step 4. Deployment setup

Setting up nginx and passenger is fairly easy. Just make sure the ruby path is setup correctly in your nginx config. Type  which ruby to get the ruby version and make sure that’s correctly specified at /etc/nginx/nginx.conf. (just lookout for the lines that says passenger_ruby)

/etc/nginx/nginx.conf file (make sure it looks like this)

passenger_ruby /home/rkjha/.rbenv/shims/ruby;

Server config for nginx/passenger

sudo nano /etc/nginx/sites-available/example.com

Here is a sample config you can use. Replace example.com and username accordingly. (it also creates a 301 redirect for www version of your domain, you can change that if you want).

Now create a symlink for that config and reload the server to apply the new config.

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com
sudo service nginx reload

Setting up git/bitbucket Add your project to git (if you’ve not done that already), create an account at bitbucket.org And create a repository (private unless you want the source code of your app to be available open/freely) there. You may need to upload the public key (server), go to repo’s settings and Add Deployment key there.

git init
git add --all
git commit -am "first release"
git remote add origin git@bitbucket.org:USERNAME/YOUR-REPO-NAME.git  
git push origin master

If you’ve not used git before then check out some free tutorials listed here and comeback later. Deploy using custom rake task You can use some deployment tools like Capistrano (probably overkill for a Sinatra app) or mina (a lightweight deployment tool). But here, I’ll keep things simple and just use a simple rake task to deploy the code.

Step 5. Deploy

To deploy the app simply type : (you may need to add bundle exec before rake command)

rake deploy:setup
rake deploy

You may also need to run bundle install on server, as the rake task is only fetching the latest files from bitbucket repo. Or you can add few lines there (Rakefile) to do that for you. I’ve tried to keep things as simple as possible or I’ll add that later.

If the deployment is successful you can add a DNS entry for your domain. (Make sure you also add an entry for www, so, the www.example.com will be redirected to example.com, without creating any confusion or duplicate issue in Search Engines)

Note : If you’ve any problem or I missed something, let me know (via comments).

References