Wat!? HTML is now an application framework? I'm calling bullshit!

You wish it was bullshit, but no. HTML, since HTML5 has provided full-blown component-oriented solutions. Stuff like the Shadow DOM specs, media-queries, validation and error handling are just the tip of this iceburg. New stuff is being added to HTML everyday.

A good example I can give is the way how text (or code) completion is done in HTML5 - let's say a "browser" list textbox. The old way of doing this would be a choke-full of JavaScript. We can use a datalist tag element instead.

<input type="text" name="browserSelect" 
    list="browserList"/> 

<datalist id="browserList">  
   <option value="IE">  
   <option value="Firefox">  
   <option value="Chrome">  
   <option value="Opera">  
   <option value="Safari">  
</datalist>  

Of course, you could further refined this with a dash of JavaScript like say Angular or Knockout.

Now if only companies drop IE6 or IE8. zzzzzz.

A web developer's stake in the Battle of the frontends

It use to be easy as pie being a frontend dev or engineer. You either roll your own frontend framework that doesn't use tables for layouts or pick something with a grid like 960.gs and you're good. That was like 4-5 years ago. Now there's a long list of front-end frameworks to choose and all of them have fanboys. It's a mess.

For me, there are four choices that really make sense. It makes sense because I've used them in one form or another. Also, all these frameworks are responsive by default so they support mobile development also not just standard web.

• Material Design Lite - If your going Google then this is framework for you. The thing with this is that it doesn't rely on any JavaScript. This is the "truest" implementation of Material Design if you're making the argument for say, Material Bootstrap.
  
• MetroUI (and Office-UI-Fabric) - This is for those who like tiles (MetroUI). Fabric for web apps that look like Office365 apps. You don't have to be knee deep in building Window apps for web and phone to be using this - ie. You don't need Visual Studio or have a pricey WinDev account. It's open-sourced - Surprise! Surprise! It's built using Less; Curious though, no Typescript.
  
• Foundation by Zurb - Foundation is staple for those rabid SaSS fans and unlike the first two, this framework comes with everything even the kitchen sink. Heck, you can even make your own plugins. The strength of Foundation is its more malleable than Material or Metro but that's offset by the fact it's also has more moving parts. Testing much?
  
• Bootstrap - Twitter Bootstrap, the preferred frontend framework for the design impaired developer. Popular (maybe) and easy-to-use (arguable) it's  not bad looking even if you're just using the base CSS. Sure, you can customize it with your choice of SaSS or Less but if your in a hackathon you just don't care and use a theme from one of many websites making free bootstrap themes like this one. 

For us web devs, we treat these 4 frameworks as the same thing, 4 different libraries that do the same thing. But we won't tell the UX guys that, they'd go ape shit.

Poor man's responsive web testing

Websites use to be easy to make and test but with the rise of mobile devices has slightly complicated things. This is the whole responsive web design thing.

Now I bet you've typed "browser responsive testing" into Google and found Browser Stack. And I bet you found out they are not exactly cheap. So we do the next best thing and setup Matt Kersley's solution.

Matt also has a github repo for this with instructions to have it installed locally. You can do this by either setting up a XAMPP install or local apache.

Not exactly pixel perfect but close enough.

Happy testing!

You're a lazy bastard making a website and you need image placeholders

Yes, you read the title right.

How many times I have needed image placeholder while building website then get hit by lazy. I don't want to be creating image placeholders in Photoshop or Fireworks.

So, Google the Internet to find a service and it did not disappoint: http://placehold.it/

I hope this site stays online. I'm too lazy to find another one.

Timed redirect without the php, javascript fuzz

Having worked on a few MVC projects in different languages like PHP, C# and Java, there always that "thank you" or "success" page you show after successful operation like an insert or update. Often these pages are automatically redirected to some URL after a set amount of time, normally 10 - 15 seconds. Normally, I use javascript; Something like this:

 <script type="text/JavaScript">  
 <!--  
 setTimeout("location.href = 'http://google.com';",1000);  
 -->  
 </script>  

It works but then I found out there's an easier way to do this via a HTML meta tag. Wikipedia explains it here. This one just automatically redirects you to google.com after 10 seconds.

<meta http-equiv="refresh" content="10;URL='http://google.com/'">  

It does have drawbacks but it works and I don't have to really concern myself if the browser's javascript is on or off.

Multiple hyperlinks on an area (or image)

slicing + absolute positioning

I was working on a website which had a front banner that looked like a spice cup board and the owners wanted when you click on a certain "jar" it takes you to a certain page in the site. But they already had someone working on this before me and decided to use image slices + absolute positioning.

I'm not saying its a bad solution, I just don't like dealing with multiple images and other penalties (ie. maintenance) associated with it. I would rather go with a single large image and define regions in it that's clickable. That's where image maps come in.

Image maps enable me to define multiple links within a single image. It's clean and doesn't involve any JavaScript or CSS just plain HTML5 markup.

You start off by declaring the image:

<img scr="bigbanner.jpg" alt="frontpage banner" border=0 usemap="#hotspots"/>  

The new thing here is the usemap attribute. The value of the usemap attribute must be the same with the map id. The map element acts as a container for specifications regarding the map's active areas (ie. hotspots), where are define as area elements within the map.

 The matching map markup would be:

<map name="hotspots">  
      <area shape="rect" coords="20,20,170,170" href="somepage2.html"/>  
      <area shape="circle" coords="250,175,50" href="somepage3.html"/>  
      <area shape="poly" coords="117,241,277,312,84,370" href="somepage4.html"/>  
 </map>  

The shape of the area element is influenced by the *duh* shape attribute. Rectangles and circles are fairly easy to use but watch out for with poly. Its the most flexible and most tricky to use. In the example, I'm creating a "triangle"; the first 2 values in the coords form the first point, the second 2, form the second point and the third pair gives use the third (end) point. Given enough coords information, I can make the "poly" area follow the outline of any item on any image.

As for the coordinate values, I just have to remember that the top left corner of the image is 0,0. Also, map is a non-visual element so I can put it anywhere on the page markup.

Make up your mind! - How an error made me "ang amp @#$@#!"

I admit that I don't really use Microsoft software but that doesn't say they don't put out some fantastic stuff. So I decided to check out Microsoft's Expression Web 4. EW4 is for web design, also lucky for me the university that I am working for had an academic alliance license for it. Woohoo!

It should have been a straight-forward procedure installing EW4. But it had me to jump a couple of hoops.

First, I had to download the .NET 4 framework. Fine. OK. No problem. So, I got the web installer and ran it. Being a web installer, I had to wait for it to download the whole thing.

I also got Silverlight. What fun would I have with I couldn't run all those cool demos from EW4 without Silverlight. BTW, getting Silverlight should be pie if you are running Windows 7.

With everything set, ran the app and I then ran into this error:

I don't know about you but the error confused me. Take a closer look: "is either not designed to run on Windows..." Not designed to run on Windows? Are you sure?

Anyway, I did fix this error...eventually.

Web design color schemes

You don't know this, but I suck at coming up with original web designs. I usually just rip one off from the oswd.org or somewhere. But somehow you got to evolve to become better at what you love to do and I happen to love the web.

So I started playing around trying to understand Color until I stumbled across this pretty neat piece of software that allows me to play with color schemes. Its called ColorSchemer Studio. They also have it as a Windows sofware. It's pretty cool. You get to play around with various color schemes for various projects.

For example, I have a new project and my clients inspiration for color is from a piece of abstract art.

Hey, I don't really undestand it myself. But its the clients money so....

Move on to ColorSchemer. You see ColorSchemer has this nifty little feature that can create color schemes from a picture. In this case, it was scan, digitized and saved as a high-resolution JPG file.

Here is a screenshot of the artwork inside ColorSchemer. Notice that you get to pick colors that are already in the picture.

Here, I am trying out the color schemes at various elements on a dummy web layout also within ColorSchemer.