Website Optimization Best Practices, speed up your website load
Once i have performance issue in a website project i am working at, and i have wasted hours of my time to fix it up both in the server-side and client-side, for future checklist i searched on web and found great list of best practices to speed up our web page load at yahoo developer network.
Below are the summary:
Read the rest →
Typeface.js embed custom fonts with javascript
We have already known about the limitation of using custom fonts in our web design, and also there already some techniques to jump over the limitation. SIFR which is using flash font embed technique and Facelift Image Replacement (FLIR) using PHP GD dynamic image capability may the most famous among them, but now Typeface.js comes with different solution.
Typeface.js uses browsers’s drawing capabilites to draw text in HTML documents (Firefox, Safari, and Opera support the element (as well as SVG), and IE supports VML).
The Typeface.js project has two components: the perl module for converting fonts, and the javascript library for drawing in the browser. The perl module extracts glyph outline information from truetype fonts and writes that data in JSON format. The javascript library then traverses the HTML document and renders text using or VML to draw the glyphs.
Centering layout using CSS positioning & negative margin
Most developers using auto margin technique to create horizontally center CSS layout, by using this technique we simply specify the width of the content container and add CSS auto margin, and set the CSS text alignment of the parent element to center, but sometimes this technique does not come in handy.
Read the rest →
Jquery Vertical Slide (Dropdown) Navigation
I have sometimes today to play around with jquery horizontal slide navigation (horizontal accordion navigation) (demo), I want to make it slide vertically, and here is what i have made.
Tested in FF3, Opera 9, IE 6, Safari 3. Dependencies: Jquery & Optional Jquery Easing Plugin.
Horizontal Slide Nav Using Jquery & CSS
Once i want to create icon based navigation with few lines text on it, but rather than to use tooltips i prefer to have show/hide effects, to hide the text and show it on mouse hover, and here is the result, like the effects? well just copy paste the snipet below, and you could customize it to match your taste and needs.
Read the rest →
