Coding Dojo Show me the Code!

28Feb/10Off

Javascript, HTML and CSS playground

I have just come across a very interesting website that just simply blew my mind away. It's called JsFiddle it's a virtual playground for Web Dev's to try out snippets of code.

JsFiddle comes with a variety of preloaded Javascript libraries for every taste, it also come with an Ajax echo backend so you can dive right into hacking code.  You can also check out some very cool pre loaded examples.

It has a very slick and intuitive interface, thre distinct boxes for js, Css and HTML code to be placed and a fourth box where the results of the executed code will be displayed.

And something this handy wouldn't be complete if it didn't count with a very cool sharing and embed options to share your hacks with your programming peers.

Happy coding and enjoy!

28Feb/10Off

Resetting your CSS Styles

All HTML elements are treated differently among browsers and have default predetermined CSS styling applied to them. These predefined styles are among the most common culprits when it comes to cross browser styling issues.

So it's a very practical and recommended practice to reset these styles to prevent obscure quirks to appear in our designs. Applying this technique will remove and neutralize the inconsistent default styling among A-grade Browsers providing a solid foundation on which to create great web designs.

When it comes to resetting your CSS styles I've come across things of this nature:

* {
padding: 0;
margin: 0;
border: 0;
}

I don't recommend using this technique it's to aggressive and breaks many default properties on some HTML elements.

The technique I use to reset my CSS styles is based on the Eric's Meyer technique which he also based from YUI's reset.css.

So enough said lets dive into the code:

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}

It's almost a copy of the same rules used by Eric but with 2 small changes, I removed the property of font-size:100% which I find conflicts with the default behavior when using the Header HTML tags ( <h1> ..<h6>) and also removed the styling rules for block quotes which I have found doesn't work quite right with multilingual website designs.

Enjoy.

18Feb/10Off

Installing Eaccelerator

PHP is an interpreted language. This means that each time a PHP generated page is requested, the server must read in the various files needed and "compile" them into something the machine can understand (opcode).

Opcode cache mechanisms preserve this generated code in cache so that it only needs to be generated a single time to serve hundreds or millions of subsequent requests.

Enabling opcode cache will reduce the time it takes to generate a page by up to 90%. After enabling opcode cache on my own server, I saw page loads drop from about 1.5 seconds to as low as 300ms.

Opcode Cache Solutions

After a bit of research and a lot of asking around, I concluded that Eaccelerator was the best choice for me. It's compatible with PHP5, is arguably the most popular of its kind, and is successfully used on sites getting far more traffic than you or I are ever likely to see. Also its worth noting that Eaccelerator works wonderfull with Zend Framework.

Implementing eAccelerator

Implementing opcode cache is far easier than you might imagine. The only thing you'll need is admin (root) access to your server. If you're in a shared hosting environment, ask your service provider about implementing this feature if it is not in place already. These instructions apply to *nix environments only.

Installation Steps:

  • Step 1. Compiling Eaccelerator

Go to the source directory were eAccelerator is located, and in the parent folder run the following commands:

phpize
./configure
make
  • Step 2. Installing

Now for the installation process run the following command:

make install
  • Step 3.  Configuration

For configuring your recent install of eAccelerator access your php.ini configuration file, at the end add the following lines:

extension="eaccelerator.so"
eaccelerator.shm_size="16"
eaccelerator.cache_dir="/tmp/eaccelerator"
eaccelerator.enable="1"
eaccelerator.optimizer="1"
eaccelerator.check_mtime="1"
eaccelerator.debug="0"
eaccelerator.filter=""
eaccelerator.shm_max="0"
eaccelerator.shm_ttl="0"
eaccelerator.shm_prune_period="0"
eaccelerator.shm_only="0"
eaccelerator.compress="1"
eaccelerator.compress_level="9"
  • Step 4. Create Cache Directory

Last but not least all you have to do is create a cache directory, if we follow the above example the cache directory should be created using the following commands:

mkdir /tmp/eaccelerator
chmod 0777 /tmp/eaccelerator

Well their you have it that all you need to start serving blazing fast PHP pages. If you want to
configure the admin panel for eAccelerator all you have to do is copy the "control.php" file located inside
eAccelerators source folder into a web enabled folder which you could access via a web browser.
After copying the file edit the "control.php" file and add a username and password.

Example from Control.php file:

/*** CONFIG ***/
$auth = true; // Set to false to disable authentication
$user = "username";
$pw = "password";

piz

ompiling eAccelerator

17Feb/10Off

Design Tools for the Web Developer

OK in my last post I talked about some common tools and web apps that help me on a day to day basis as a developer.  So taking into account that am a developer and I write code for a living, lets just say my creative side is not fully developed and from time to time a need a quick and nice way to solve design issues without the need to rely on a web Designer or a Graphics Designer.

So here are some nice online web apps that have helped me in the past and I found that are pretty useful:

17Feb/10Off

Basic Tools For Web Developers

Well to keep up with a sort of introduction kind of posts, I decided to show case some of the tools I use on a day to day basis when it comes to developing web applications.

Let me just state before I continue that my de facto browser for development purposes is and will ever be Mozillas Firefox.

Having said that lets dive into the plugins I use:

  • Firebug : Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • fireRainbow : Javascript syntax highlighting for Firebug
  • WebDeveloperToolbar : he Web Developer extension adds a menu and a toolbar with various web developer tools.
  • Yslow : YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites.
  • Live HTTP headers : View HTTP headers of a page and while browsing.
  • FirePHP : FirePHP enables you to log to your Firebug Console using a simple PHP method call.
  • showIp : Show the IP address(es) of the current page in the status bar. It also allows querying custom information services by IP (right mouse button) and hostname (left mouse button), like whois, netcraft,etc.
  • colorzilla : Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  • Screen Grab : Screengrab! saves webpages as images. It will capture what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images - either to a file, or to the clipboard.
  • x-ray : See the tags on a page without viewing the sourcecode.

Also some very cool web apps that I commonly use:

  • Jslint : The Javascript Code Quality Tool, created by Douglas Crockfor.
  • JsonLint : A handy Json Validator.
  • CSS selector gadget : A point and click CSS selector, works as a bookmarklet, very handy tool.

That would be it any questions or comments feel free to do so.

Happy coding! :D