Here’s a very simple date/time picker for those who are using Twitter Bootstrap. This  is based on the work of Stefan Petre, with contributions taken from Andrew Rowls and jdewit.

You may find the Bootstrap Date/Time Picker here.

I was looking for a jQuery Plugin to add star ratings for the project I’m working pertaining to Travel. What I found very useful and easy is jQuery Raty

jQuery Raty

A Star Rating Plugin

The popularity of Responsive Web Design (RWD) makes designers think creatively on how to design with grids. Here’s a toold that helps you generate grids. 

Gridpak - The Responsive Grid Generator by Erskine Design

With Gridpak, you can easily add no. of columns, column padding, gutter width and add break points.

My goal is to learn Ruby on Rails. But for a start, I need to learn Ruby language or get familiarize with the Ruby language first before I start learning the Rails framework.

A quick background on what is Ruby:

A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.

What I often read about Ruby is that “Ruby is a programming language from Japan and the beauty behind Ruby is its simplicity and power.”  

Where to start learning Ruby?

As a start, I tried understanding Ruby using TryRuby, created by CodeSchool. It is an interactive Ruby tutorial where you can code in a browser. It’s a fun way to get to know Ruby language. 

Other Ruby resources I used to understand Ruby are the following:

RubyMonk - An interactive Ruby tutorial wherein you can try solving Ruby problems in a browser.

Codeacademy - I also learned the Ruby fundamentals in Codeacademy.

What I learned?

Basically, I learned the syntax of Ruby though not really completely know everything. However, starting to learn the Ruby language helped me understand better when I started learning Rails. 

Tip

It’s fine if you don’t understand everything. You’ll only understand those things once you start working on your test app. In the meantime, just familiarize Ruby and for sure, you’ll reference back and forth to some Ruby resources. 

Next blog would be how to get started learning Rails.

Run this to start your Posgres Server:

pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start

Responsivepx is a tool that helps pinpoint pixel values when responsive layout breaks. Thus, pretty useful when you want to check out how your website looks like in specific widths and heights.

Here’s an example when I access Codetoki using Responsivepx.

You can see that I specified 1024px as width.

You can see here I specified 360px as width.

So that’s how you can check out your site using Responsivepx.

How to easily check if a website is responsive without using different devices? (or especially you don’t own the devices needed to check). Well, the easy way is to use Responsive.is.

So what is Responsive.is?

Resizes a website in-browser to typical preset device sizes and orientations. 

How to easily resize a website in different device sizes and orientation? Just click on the different devices icons on the top center.

Tablet size (landscape orientation)

Tablet size (portrait orientation)

Mobile size (landscape orientation)

Mobile size (portrait orientation)

So easy to use and pretty helpful in building you responsive website. 

Responsive web design (also known as RWD) is very popular with the popularity of different devices in which screen sizes differs. Take for example if you access a website on your tablet, iPad, your iPhone or your PC. These devices have different screen sizes thus, if your website is not responsive, it would look not good on the other devices.

So, fluid layout is an essential in responsive web design. Thus, instead of pixels, we set widths and heights using percentages. 

Here’s the formula in doing flexible layouts:

Target / Context = Result.

Good thing that we can now easily calculate the percentage using Flexible Math by Dan Denney. 

Here, you will just input the context width (see left). On the right, you input the pixel sizes of width or height. At the right of the boxes, you see percentages. 

Really easy and convenient right? Have fun working on your responsive website! :)