Last night derby game was excellent. United able to maintain their winning streak by overpowering City. United now can concentrate aiming for Top 2 while City need to fight for Top 4. Considering that City lost 6 in their last 8 games, City really really need to get their things right immediately.

I must admit, United started last night game slightly nervous. It was City who came close first. At 5″, Demichelis clearance set free Jesus Navas. Navas racing alone with Daley Blind helplessly chasing him. Great positioning by David De Gea as Navas’ shot went straight to De Gea legs.

City went up at 8″. United’s defence was asleep allowing David Silva unmarked inside the box. Silva squared the ball for simple tap by Sergio Aguero. My heart immediately sank thinking that going down within the first 10 minutes will dent United’s confidence.

Luckily, United didn’t easily bow down to City. United levelled at 14″. It was started from a sloppy back-pass from Phil Jones. The ball was not fast enough with Navas blazingly closing down. Thank God De Gea managed to frantically clear the ball before Aguero get a touch. The ball was hoofed far in City’s area before bouncing off Marouane Fellaini into Ander Herrera’s feet. Herrera then crossed the ball into the box. Gael Clichy slid trying to clear, but the ball fell nicely in front of in-mid-rotation Ashley Young. Young able to balance himself before smashing the ball into the net. The whole Old Trafford breathed a sigh of relief!

With the scores level, United switched into controlling mode while City fell apart. At 26″ United take lead courtesy of Fellaini’s header. A nice teamwork on the left between Blind and Young take the focus from City’s defence leaving Fellaini relatively unmarked on the right. Young then crossed the ball to the unmarked Fellaini. Fellaini then headed the ball into the net. It was poor awareness for Clichy. He is supposed to guard Fellaini was too late to realize it. Then again, he is definitely will not win against Fellaini in air battle.

Three minutes before the break Vincent Kompany lunged at Blind. The referee gave him yellow card with United fans all booing him thinking that it should have been red. City was lucky to still play with 11 players.

The second half start with Eliaquim Mangala came into the pitch replacing the limping Kompany. Can Mangala marshall City’s defence and prevent more goals conceded?

Apparently not. In a quick counter-attack, Fellaini wins back the ball, then pass it to Blind. Blind quickly pass to Rooney. Rooney then sets free a possibly offside Juan Mata. Mata kept on running one-on-one against Joe Hart. He then coolly slot the ball between Hart’s legs. GOALLL!! United lead by 3 to 1. On the replay, it was clear that Mata was offside, even-though the flag stays down.

What a defending mess from City. Seven minutes after the last goal, United increased the tally. Youngs’s free kick from the left met with Chris Smalling’s powerful header. It looks like another case of offside. But upon closer examination, it was Mangala who kept United players on-side.

It’s really game over for City. Although Aguero scored another goal at 89″, they didn’t celebrate as they know they can’t save the sinking ship.

Glory Glory Man United. Bring it on, Chelsea 😀

Whenever I tinkered with this blog, I always view the result through Google Chrome’s Developer Tools Console to see any errors. Today I realized I found one error.

And this is the offending line (prettified into multiple lines):

<link 
	rel='stylesheet' 
	id='open-sans-css'  
	href='//fonts.googleapis.com/css' 
	type='text/css' 
	media='all' 
/>

Problem is, the url is invalid. If we open the url //fonts.googleapis.com/css, Google will serve an error page.

My first reaction to this was view my WordPress theme’s source code. Nothing. The next suspect would be my WordPress plugins. I used Notepad++ to help me scouring my WordPress local copy.

It found nothing. If it’s not my theme, or my plugins, then I should be WordPress itself that added the offending line. To prove it, I searched it in my website’s root directory.

grep --include=\*.php -rnw . -e "open-sans-css"

Still found nothing. Then out of curiosity, I viewed the source code in Firefox. Surprise! The offending line is not there! It was Google Chrome itself who added the offending line. FYI, I’m using the latest Chrome version.

Now that we know the culprit, the next question is why. Why would Chrome added this line? I kinda think that Google wants to add a standardized web-font, making sure that any website that use open-sans font will have the same look in all Chrome browser.

What do you think?

PS: I’ve reported this issue to Google.

Few weeks back I received an email from Google’s Webmaster Tools regarding mobile usability issue in this blog.

Since today I have the time to actually look into it. This blog used to be non-mobile-friendly. As you can see, it is now displayed wonderfully on any mobile devices. Please read on if you wish to convert your non-mobile-friendly WordPress blog into a mobile-friendly one.

So according to Google, there are four issues with this blog pertaining mobile usability:

1. Viewport not configured
2. Small font size
3. Touch element too close
4. Flash usage

Alright, let’s tackle them one-by-one.

Set the Viewport

Without defining the viewport, mobile browsers will have difficulty in controlling the page dimension and scaling. Here the summary from Google’s guide:

1. Use meta viewport tag to control the width and scaling of the browsers viewport.
2. Include width=device-width to match the screen’s width in device independent pixels.
3. Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels.
4. Ensure your page is accessible by not disabling user scaling.

In short, add the following line at the page’s header section:

<meta 
    name="viewport" 
    content="width=device-width, initial-scale=1"
>

Small font size

By default, this blog content is using 13px font-size. As Google said, the recommended font-size for the main-content is 16px. Below is how implement it in this blog.

div#main div.post div.entry {
	font-size: 16px;
	overflow: hidden;
	padding: 10px 20px 0;
}

By setting viewport and have a larger font, it will automatically also resolve issue no 3. Bigger font means wider space between each characters. So hyperlinks which previously shown very narrowly spaced, it will now shown with proper spacing.

Flash Usage

Unfortunately, I can’t do much for this. In this blog, I used Flash only in two pages. So I on that two pages, I just put a suggestion to Android and Apple users to download Dolphin Browser. Dolphin browser is the only browser I know which supports Flash and available in many platforms.

Make the Blog Layout Responsive

Responsive layout means the layout will change to accommodate the device screen accordingly. To make a responsive layout, we must add the media selector in CSS.
In this blog, I made the changes so the layout able to cater devices with:

• Screen width maximum 680 pixels (compromise between 600 pixels and 768 pixels)
• Screen width maximum 959 pixels (the maximum width of this blog)
• Screen width 960 pixels and beyond

Here’s how they get implemented in CSS:

/* Default style: Any screen with screen width 960 pixels and beyond */

/*
 .... Blah
 .... Blah
 .... Blah
*/

@media all and (max-width: 959px) {
	/*
	 .... style changes to cater device
	 .... which has screen width at 
	 .... most 959 pixels
	*/
}

@media all and (max-width: 680px) {
	/*
	 .... style changes to cater device
	 .... which has screen width at 
	 .... most 680 pixels
	*/
}

With these amendments, I managed to make this blog mobile-friendly. Hopefully, you can too. Drop comments if these steps are still unable to help you 😀