How to begin on Front End Development

A friend of mine asked me today how could he begin on front-end development without knowing anything at all of programming and bellow is what I have pointed out to him. These links should get anyone started with basic concepts of front-end development and learning should be easier after that.

Some links to get you started on HTML, CSS and JQuery (Javascript)

• http://www.html5rocks.com/en/
• http://twitter.github.com/bootstrap/ (use as reference – they do everything very well)
• http://www.css3.com/
• http://jquery.com/

Med-advanced

• http://lesscss.org/
• http://sass-lang.com/
• http://backbonetutorials.com/

Get used to concepts like Responsive CSS (it’s great) and for those you can use test tools like: http://screenqueri.es/ to check if everything is ok.

Get into Twitter and Google+ and  follow me on those (you can get the links at www.mcloide.com) and you will see that there is a bunch of people that I follow that are in regards of CSS, HTML and Javascript. There is always a bunch of new things that you can learn from developers that work with front-end in a daily basis.

You can also check hubs like Coderwall and Geekli.st where you can find info, tutorials and tips on HTML, CSS and Javascript.

As tips remember this:

•  IE sucks -> it will break your design / css / html / etc so if it works on IE it works on everything else
• Google is your best bud -> there is always someone with the same problem or a similar problem as the one you are having
• in backend programming we use the concept of DRY (don’t repeat yourself). In HTML you might not be able to use it, but for both CSS and Javascript you can use it.
• You can use JS Lints (http://www.jslint.com/) to check if your code is pristine
• You can use Fiddles to test some stuff on the fly (http://jsfiddle.net/)
• Use either Chrome or Firefox while developing, the Firebug and Chrome Inspector are excellent tools to check on javascript errors, small inline css changes, etc
• The best way to practice and start, build a site, publish it and ask for a review on it from other dev’s / people – it will give you ideas of UX and if you need to improve your code.

I’m not a front-end developer, but these are the steps that I usually take when I need to code something for front-end. Either way is a good start for anyone that haven’t coded anything in front-end or is simply considering on starting on web-development altogether.

Improve performance: Save the Request and Use Signed Cookies

These are 2 ideas that I have just heard on a presentation. To gain performance with your application, save the requests (dont worry much with pageload) and use a signed cookie to autenticate uses instead of checking the sessions.

The save the requests concept is pretty simple: If you browser already cached something, unless you really need to reload that file, save that request and let it cached. For example, don’t change an image name or add an identifier to a css file unless strictly needed. That will save a request, therefore gaining performance.

The signed cookie is an interesting concept. If you take a look, the read time to the database (or cache mechanism) to check if the use is authenticated is greater than your application checking for a signed cookie. Read the cookie and if is there, authenticate the user.

I really did like these 2 ideas and probably will start using them on my apps. Anyway, sharing the tip.

Form Crib Sheet

Got this on my Google+ today and though about sharing it: http://petelepage.com/downloads/v1-Form-design-crib-sheet1.png

Pretty cool.

CSS and JS bootstrap

Everybody knows that creating a CSS and JS from the scratch is a pain in the neck and making them UI friendly is even more annoying. A couple of weeks ago I came across this project that make’s any developer life a bit better.

http://twitter.github.com/bootstrap/

I has a bootstrap file for CSS and the default JQuery plugins necessary for UI. It is definetly a great resource and can speed up the development of the the UI of the site a ton more.

Give it a check.

100 Exceedingly Useful CSS Tips and Tricks

Great post, check it out

http://sixrevisions.com/css/100-exceedingly-useful-css-tips-and-tricks

How to troubleshoot old browsers

Ultimate Geek Tool

Yesterday Rob, a co-worker and friend, had one of these great ideas that helped us to solve a issue of visualization of content on a user agent. Just imagine you trying to see an error of CSS how it supposed to be without a virtualbox or a Windows XP for IE 6. It’s a hard deal to work it out, but there is a solution that might help any developer no matter what is the web-language that he programs on.

The principle is simple, use cURL to request the url that you are having issues and print the output. It is a very simple concept that will help more than a ton.

Here is the piece of code that you will need to do the request:

<?php

$url              = ‘http://mcloide.wordpress.com/‘;
$userAgent = ‘Mozilla/5.0 (Windows; U; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)’;

$browser     = curl_init($url);

curl_setopt($browser, CURLOPT_HEADER, true);
curl_setopt($browser, CURLOPT_RETURNTRANSFER, true);
curl_setopt($browser, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($browser, CURLOPT_USERAGENT, $userAgent);

$output = curl_exec($browser);

echo $output;

?>

This little piece of code will help you on getting weird bugs worked out.

It’s Friday, have fun.

CSS site list

No matter if you design a lot or only messes with CSS one time or another, you will be always checking for more info about CSS.
Here you can find a huge list of CSS related websites: http://csssubmiter.com/the_list – check it out.

Simple Clearing of Floats

Cool tip:

Got this from a friend of mine today. Is very simple and it does work on most of browsers.

” When you have two floated elements inside a container element, instead of adding a clearing DIV before the closing of the container element, you can try adding the following two CSS properties to the container:

display:  inline-block;
overflow: auto;

Tested this and it worked on IE 6, IE 7, Firefox and Safari.

Source of tip: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ (display: inline-block is not mentioned here, but I found it is needed for IE 6). “

Direction:rtl;

It might seem unusual to work a site around to read from the right to the left, but if you are considering to have your site in a world scale, you better know what kind of enviroment you will face. Culture knowledge, what to do , what not to and mostly usability where our challenges in the last 2 weeks.

I’m working with Goal.com and just this week we have released the Persian version of the site. Making the default site become a RTL version site, in a way that anyone that reads from the right to left could easily read and access, have become a major experience.

CSS changes, small functions adaptations, mirrored words and parenthesis, all of this made part on the changes that we made for that site. The site would look just like the current one, but inversed and all of that with the same usability that we already have for the site. It was a lot of work and lot of fun.

After the site was launched, we got feedback from all over the world thanking us for making that possible and now I do truly realize why it is so important to have correct usability on the site, reading format and culture on a site.

Different users, different rules, different scenario and tons of hard work. The best of all, on the end, you can truly see that it is all worth the time.

If you are wondering what you would be facing, on a CSS matter, for this kind of changes, take a look at the W3 Org Internationalization Article.

By the way, if you follow soccer (I’m a braziliam so…), check out the Goal.com site, is trully good and fan oriented.

Iphone it

How about you create a version of your WordPress website for Iphone, well here is a small tutorial of how to do it.

All the coding is using the Zend Framework Database Handler, so if you are using one of my classes or anything else, change it to work for you.

The first thing you will need is to download the IUI framework. It have a series of scripts, css, and some other things that are going to be used when you are checking the site with your Iphone.

Now create a PHP script page with this html header. It’s the same one that is being used at the samples of the framework.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>McLoide.com Iphone Version</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
<!--
<script type="application/x-javascript" src="http://10.0.1.2:1840/ibug.js"></script>
-->
</head>
<body onclick="console.log('action', event.target);">

Now you have to create the following structure:

• Toolbar – will be displayed at top with a back button and the stats (battery, etc) button
• Home – will be the first thing loaded when the Iphone load the page, so this should have a list of the contents of the website
• Summary – This will display a small summary of what’s about the the content that is about to be displayed and a back button
• Display – This will display the full content of the item

Imagine this as a site tree that is being build dinamicaly and every click displays one of the tree branches.

So, how your body will be built? It’s simplier to display the code than explain, so, here’s the rest of the code:

<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a href="stats.php" class="button">Stats</a>
</div>
<ul id="home" title="Posts" selected="true">
<?php
$stmt = "select * from wp_posts where post_status = 'publish' group by post_title order by ID asc";
$data = $GLOBALS['db']->fetchAll($stmt); # This is using Zend Framework Db Hanlder
foreach($data as $key => $contents) {
?><li><a href="#summary<?php echo $contents['ID'] ?>"><?php echo strip_tags($contents['post_title']); ?></a></li><?php
}
# retrieving all info of your posts
?>
<li><a href="stats.php">Stats</a></li>
</ul>
<?php
#building the summary list
foreach($data as $key => $contents) { ?>
<ul id="summary<?php echo $contents['ID'] ?>" title="<?php echo strip_tags($contents['post_title']); ?>">
<li><a href="#display<?php echo $contents['ID'] ?>"><?php echo count_words(strip_tags($contents['post_content']),20); ?></a></li>
<li><a href="#home">Back</a></li>
</ul>
<?php } ?>
<?php
#building the display blocks
foreach($data as $key => $contents) { ?>
<div id="display<?php echo $contents['ID'] ?>" class="panel" title="<?php echo $contents['post_title']; ?>">
<h2><?php echo $contents['post_title']; ?></h2>
<p><?php
echo $contents['post_content'];
?></p>
</div>
<?php }

#note count_words is just a small function to get an string and correctly break into a smaller string without breaking the words

?>

With this in place all you need to do now is test it and for that you can test it in the Iphone tester. It’s not 100% accurate but it will give you a great idea of how things will work in the real Iphone and you can always access it by your computer browser.

Off course this is a simple example and there is much more you could do to work with this. Imagine a full application only to work out with Iphones.

If you want to see this example working, you can see a demo from in http://www.mcloide.com/iphone/

Have fun.