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! 






Thursday, August 14, 2014

First App Released! MUFC Legends



http://www.windowsphone.com/en-gb/store/app/mufc-legends/3922e47c-faaa-4a4b-a917-a0eff105b075

Here is the link to my first application.
Based it on Manchester United FC as I am a huge die-hard supporter of Manchester United and could not think of anything else.
Please download and rate. Thanks :) It's totally free.

Monday, August 4, 2014

A funny button issue I encountered today

Today, when I added a button through Expression Blend ( It's basically Blend for Visual Studio 2013, but I have a bad habit of calling it Expression Blend :D ) I was having a huge dilemma: The background of my button turned light blue whenever I pressed upon it.
I was stuck upon this issue for at least half hour, before figuring out the solution. I suppose this might also be frustrating for my fellow amateur windows app developers.

So, here is the solution.
-> Drag the Button control from the top left of the Expression Blend screen as shown, and drop it onto the mobile phone screen in the middle.
                                                                                                                                                                    
-> After you are done with drag and drop, Right click on the button as shown and then select Edit Template Edit a copy as shown in the figure
-> Ok, now after you are done with this step, Rename the Template in the newly opened dialog box, Select the scope of the template whether you want it to be applicable in the whole application, or keep that style confined to only one page and click on OK.



-> Now,
a) Select States tab
b) Click on the small circle besides Pressed. 
c) Select Button Background. The Background of the button will glow red.
d) In the properties tab on the right, change the background attribute to TransparentBrush.

The result is,
No more irritating flashes of the button upon each click.

Happy Development!





Monday, July 7, 2014

Combine Tools in Blend for Visual Studio

Blend for Visual Studio 2013 gives us the facility of five combine tools. These are:

Union: 
Combines all shapes and paths into one single object.

Intersect:
Retains only the overlapping part of objects and discards all the other remaining portions

Divide:
Combines two images, but creates an outline on the borders of the region of intersection.

Subtract:
Just like set theory in mathematics, all the portion of the object created first is removed, that overlaps with the object created later.

Exclude Overlap:
Removes the overlapping portion of objects and retains all other portions



Sunday, July 6, 2014

Canvas XAML Basics

The Canvas is the most basic layout panel in WPF. It's child elements are positioned by explicit coordinates.
It basically defines an area within which you can explicitly position child elements by using coordinates that are relative to the Canvas area.
It is more useful than a grid in some situations, such as when you have to position different elements at random positions, you do not have to calculate that at which
row and column of the grid you have to place the object.

Canvas Property used for Absolute Positioning are

Canvas.Top  - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.
Canvas.Left - Gets or sets a value that represents the distance between the left side of an element and the left side of its parent Canvas.
Canvas.Right  - Gets or sets a value that represents the distance between the right side of an element and the right side of its parent Canvas.
Canvas.Bottom  - Gets or sets a value that represents the distance between the top of an element and the top of its parent Canvas.



Application of a canvas in your project:

~ After creating a Windows Phone Silverlight 8.1 project in your Visual Studio 2013, Click on "Toolbar" in the extreme left of your screen.

~Either double click or drag the Canvas onto the XAML code.

~All those objects that you want to appear in the scope of the canvas are to be coded inside the Canvas opening and closing tags.




Thursday, July 3, 2014

Incorporating RSS Feeds in your app: Let's create a mini news network app through Microsoft Blend.

Incorporating/Including RSS Feeds in your app




Result

Attention is not given towards quality interface. Sorry for that.
First Video ever uploaded so please bear with the quality.
Pakistani users need to use proxy software to view the videos.

Entering a new age of smartphones: The novel features of Windows Phone 8.1

On 14th April, 2014, Microsoft entered a new avenue in its path of windows phone development, as Windows Phone 8.1 OS was released on that day.
This OS is one of its kind and has many new features. Following are some significant features of the new OS that differentiate it from the older features.

1. Cortana: A brand new virtual companion like Apple's Siri

2. Images can be used as tile backgrounds.



3. Support for HTML5 videos for YouTube app.

4. WordFlow: Microsoft's record-breaking answer to Swype

5. Internet Explorer 11

6. Wifi Sense: Connect to non-encrypted wifi sources 
automatically

7. Burst Mode in Camera: Accuracy realized!

8. Further Optimization and personalization in Windows Store: 
No need to search for what you prefer!

9. Audio/Video playback behind lock screen

10. Quiet Hours: Restrict your access to only a few important ones in the hours of diligence and pressure.

Playing with XAML : Quite a Grim Application

Hello Everyone!
Today we shall be discussing the fundamentals of XAML. XAML, short form for Extended Application Markup Language is just like HTML in essence, used to create beautiful interfaces for the applications we use in our daily routine on Windows platform, whether it is a smartphone or a desktop PC.

Requirements for Development:
-> Visual Studio 2013 Update 2
-> Blend for Visual Studio 2013

Step 1:

After creating a windows phone 8.1 project ( SilverLight enabled) , you create a grid. Grid is a container control and all other controls come into it. A grid consists of rows and columns as you can see in the picture.
Add buttons or any other control from the toolbox on extreme left of the above picture. In solution explorer, Right Click on the project name PhoneApp1 and click on Open in Blend in the dropdown menu.
Our step 2 starts.

Step 2:

To change background color, click on [Grid] in Objects and Timeline tab on left and change the Background color in Properties tab on right, similarly you can change and add other features through blend. To add a Textblock to add text, Click on the second tab out of the five on top left and double click textbox and place it as on the mobile phone screen in the middle.

Step 3: Changing the properties of buttons while keeping them all identical
Follow the steps as shown in the pictures and you'll get a template style of a button that can be applied to any other button either of this application or any other apps if you choose the style to be a part of the resource dictionary.





Final Result: Grimness all over your phone!
Change any property you want from the right and add any button you want from the left tabs. When you are done with it, build and run your hard work either on an emulator, or deploy it directly on your windows phone.


Voila! Too much grimness on one XAML page. Isn't it?
Powered by Blogger.