Tuesday, August 11, 2015

Having Fun with Rails Routes

So, being a newbie in Rails, all I used to do in routes.rb was

resources :users  (you can replace users with any model name in plural)

resource :user

resources :users do
      resources :photos
end

A friend of mine asked me to checkout these four commands, I am just writing what will happen in detail.

Created a new project using

rails _3.2.3_ new testapp -d mysql

Set your current directory to the project directory
cd testapp

Generate Scaffold
rails g scaffold users name:string

Create MySQL databases
rake db:create

Run the migrations that have not been run yet (In short, your users table will be created in testapp_development database)
rake db:migrate

Then I did the messing with config/routes.rb and checked out the routes available on terminal, using rake routes | grep user command

1. resources :users
                     
Nothing new. Creates your 7 routes that you already know how to use if you have ever generated scaffold in rails.

2. resource :user
                    Index page route will not be created. User will be treated as a singular resource. Total 6 routes will be generated as follows. Accessed through URL by using /user/

POST   /user(.:format)      users#create
GET    /user/new(.:format)  users#new
GET    /user/edit(.:format) users#edit
GET    /user(.:format)      users#show
PUT    /user(.:format)      users#update
DELETE /user(.:format)      users#destroy

3. resources :user
                   Now this one is a bit problematic. The routes are created as follows:
GET    /user(.:format)          user#index
POST   /user(.:format)          user#create
GET    /user/new(.:format)      user#new
GET    /user/:id/edit(.:format) user#edit
GET    /user/:id(.:format)      user#show
PUT    /user/:id(.:format)      user#update
DELETE /user/:id(.:format)      user#destroy

But what happens is that we are looking for the actions in the UserController, but the convention is that the controller name is in plural, ie UsersController. So we'll get an uninitialized constant error if we try to access through /user/ in URL.

4. resource :users
                 Creates your usual singular resources, that will be accessed by /users/ instead of /user/ in URL.

POST   /users(.:format)      users#create
GET    /users/new(.:format)  users#new
GET    /users/edit(.:format) users#edit
GET    /users(.:format)      users#show
PUT    /users(.:format)      users#update
DELETE /users(.:format)      users#destroy


Monday, May 4, 2015

Handy CSS Manual

A small manual for commonly used CSS properties

APPLYING PROPERTIES IN DIFFERENT BROWSERS:
-moz-border-radius: 10px; ( Curve Borders in Firefox)
-webkit-border-radius: 10px; (Curve Borders in Chrome/Safari)



MARGIN AND PADDING:
padding
padding-top
padding-bottom
padding-right
padding-left
margin
margin-top
margin-bottom
margin-right
margin-left


TEXT:
Change font: font-family
Change font size: font-size
Make text bold: font-weight
Make text italic: font-style
Small Caps: font-variant
upper/lowercase or make all first letter caps: text-transform
Underline/Overline/Line through text/Blink Text: text-decoration

IMAGES:
Using images as border:         border-image
Wrap text around image:         float
using image as background:         background-image
not to repeat the background image: background-repeat
repeat image horizontally/vertically: background-repeat
fixing background image:         background-attachment
make a scrolling background image: background-attachment

COLORS:
change color:                                           color
change background color:                       background-color
change border color:                               border-color
setting color values:                                [by name], [#hexcode], [rgb(x,y,z)]
                                                                {x,y,z are in range 0-255} {x,y,z can also be percentages}
transparent colors:                                   rgba(x,y,z, transparency level)

BORDERS:
add border:         border (width), (type), (color)
change border width: border-width
change border type/style: border-style
change border color: border-color
changing width of portions: border-top-width
                border-bottom-width
                border-right-width
                border-left-width
changing color of portions: border-top-color
                border-bottom-color
                border-right-color
                border-left-color
curve the corners:         border-radius
create drop shadow: box-shadow (right), (bottom), (blur radius), color
transformations:
1. Rotation        transform:rotate(degrees)
2. Slant                transform: skew(xdegrees, ydegrees)

CSS PSEUDO-CLASSES:
:link : properties of link
:hover : when mouse is over the element
:visited    : when a link has been visited
:active : when an object is active


LISTS:
getting rid of bullets: list-style: none;
to show a list horizontally: display:block;



CLEARING FLOATING ELEMENTS:
clear: both ( no floating elements allowed on both sides of an element )

Saturday, January 31, 2015

Graphic Designing - Slicing a Photoshop Design (PSD) and then removing background, to obtain a logo.


Here is my screencast showing how to slice a photoshop design and then remove background from a slice as well.
This technique is particularly useful in order to separate a logo from a PSD.
It is quite handy for Front-End Developers, so that they can separate images and manipulate them in their HTML/CSS code.

Slicing a PSD & Removing Background from Zohaib on Vimeo.

NOTE: The Layers submenu in the video appears by pressing F7.

Thursday, January 29, 2015

Web Scraping using HTML Agility Pack - Part 1

Many of you might be familiar with the idea of JSON Parsing and using APIs to get data from a specific webpage or a web service. But sometimes, the API is not available or it is not free. Moreover, JSON Parsing takes a lot of development/coding time as well for beginners.

Therefore, an easy, but less powerful substitute of Parsing through a document is Screen Scraping.

Screen Scraping:

In this process, we basically just reach our desired tag in HTML Document and read its contents.
XPath is used in order to reach a certain node.

XPath Syntax:

I'll be just giving a basic idea of Xpath in order to understand how the HTML Agility Pack will work.
A more detailed documentation is available at http://www.w3schools.com/xpath/
Following are the various basic path expressions to reach a certain node in XML             

nodename ( Select all the nodes having the name 'nodename' )
/nodename ( Select all nodename only from the root node )
//nodename ( Select all nodename from anywhere in the document )
@attribute ( Select attribute from a node) 
/nodename//childnode ( Select all nodename only from root node, then select all childnode from anywhere inside the nodename )                                          
Similarly, you can make a combination using different operators to make a path expression according to your needs.

How to get HTML Agility Pack?

After creating your Windows Phone/ Windows Store/ ASP.NET Web Application/ Windows Forms
Project successfully in Visual Studio, click on Manage NuGet Packages in the Project drop down menu in the Menu Bar.

Now a new window opens up. Search for HTML Agility Pack in it and install it.
The Pack will be successfully installed for your application.

Using HTML Agility Pack:

For the ease of testing, I created a Web Application, but the Package can be used on Windows Phone as well.

After adding a Web Form having .aspx as extension in your project, and add a button Extract Data, that will prompt the application to extract data and display it on the application when it is clicked.
To achieve that purpose, we will simply, write the code in the OnClick method of our button in the aspx.cs file of our webform.

Note: Include the header file in Webpage.aspx.cs through writing " using HtmlAgilityPack; " alongwith all the other header files included at the start of the Webpage.aspx.cs file.

Now you are ready to go inside the world of screen scraping.

Selecting a single node:


For our example, I am taking this website. 
URL is http://www.cs.colorado.edu/~main/bgi/doc/getmouseclick.html. Suppose, I want to get the heading from this site.

I will first right click anywhere on the page and Inspect Element. In this side bar, I can detect in which tag is the text getmouseclick located.
In this example, it is located inside the h2 tag.

I have to look only for the h2 tag anywhere in the document, therefore, my Xpath regular expression will be //h2.

Now coming towards the code.

Front End: (.aspx file)

When the ExtractData button is clicked, it will always call the ExtractData_Click function written in the WebPage1.aspx.cs file.

Back End: (.aspx.cs file)


Output:



Point to note:

This technique is preferred to be used in Windows Phone, as it gives the facility of acquiring the data from the required website asynchronously. That is to say that while we are loading the required website, the phone application is able to do other tasks and does not hang while loading.

I'll be discussing the variations of HTML Agility Pack, such as Xpath with attributes and Selecting Multiple Nodes later.

Happy Development! 






Powered by Blogger.