Tutorials

06 Apr

30 Useful Google Chrome Extensions

By Nguyễn Bình Vĩ

Although Google Chrome is just a few years old, it has become the browser of choice for most web developers and designers. Chrome’s browsing speed and the huge list of free ad-ons and extensions available make it hard to beat. Today’s collection focuses on Free Extensions powered and offered by Google Chrome, which are highly helpful for web developers. Please have a look and leave a comment if you know any other useful extension we are missing here.

1. Web Developer



Adds a toolbar button with various web developer tools. The official port of the Web Developer extension for Firefox.


2. PHP Code Editor



PHP Code Editor is a web based interface to edit your code.


3. FlashBlock



The extension automatically blocks flash content on webpages. Each flash element is being replaced with a placeholder that allows you to load only selected elements on a given page.


4. Image Cropper



This extension help you to crop any images on the fly. It’s especially useful when you need to crop your online album photo for IM thumbnail.


5. Speed Tracer



Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs.


6. MeasureIt!



Draw out a ruler that will help you get the pixel width and height of any elements on a webpage.


7. Eye Dropper



Eye Dropper is open source extension which allows you to pick colors from web pages, color picker and your personal color history.


8. csscan



This Chrome extension allows you to easily scan an element’s basic CSS properties without having to delve into the inspector window.


9. JavaScript Console



A JavaScript console for Chrome. Allows you to do simple JS prototyping on any web page. Especially handy for development.


10. SeoQuake



Displays the Google PageRank, Alexa rank and other SEO parameters of any webpage, highlights nofollow links, text density, check and compare urls.


11. Alexa Traffic Rank



Alexa Traffic Rank is Alexa Internet’s free extension for Chrome, and is the only extension that includes you in Alexa’s traffic panel. The Alexa extension accompanies you as you surf, providing you with Alexa data about the sites you visit without interrupting your browsing.


12. Personalized Web



A powerful tool to personalize web pages on the fly. Can inject custom HTML, JavaScript and CSS to a given web page while it is being loaded by the browser. Very effective as an AdBlocker tool.


13. Fiabee



Fiabee for Chrome is an app that lets you intuitively manage all your files distributed across your many devices, directly from the web. You can specifically select which files you want to synchronize from your devices and store onto the others.


14. Write Space



Write Space is a customizable full-screen text-editor that lives in your web-browser. It is designed to minimize the distractions that come between you and your writing.


15. PlainClothes



This extension styles — or rather “unstyles” — the web. Just imagine: text is black, backgrounds are white, unread links are blue, visited links are purple, all links are underlined. Or any other colors you like.


16. Ibrii



Ibrii allows users to snip every type of content found on the internet no matter if it is simple text, a photo, a video or even an embedded object, like streaming audio.


17. Inline Code Finder



Inline Code Finder is a tool to traverse through all elements in a web page, and when it finds a HTML element with any of these, it will highlight them: Inline JavaScript events, Inline style, javascript: links


18. Chrome Flags



The extension displays a country flag indicating the physical location of the websites you’re visiting. The extension also provides access to detailed information regarding the website’s servers, owners, traffic and trustworthiness.


19. IE Tab Classic



Some websites are still not compatible with standard browsers. Others, such as outlook web access and sharepoint are relying on IE proprietary technology. With this extension you can use those websites directly from Chrome.


20. Aviary



Edit any photo on the web without leaving the page with our simple image editor, Feather! Just right-click and select “Edit image in Aviary” for one-click editing.


21. View Selection Source



View selection source in resizable popup. Drag the bottom right corner to resize. Simple, but very useful for web developers.


22. Create Link



Copy current page URL to clipboard in various formats. Make HTML link tag easily like Firefox addon Make Link.


23. Notifier for Stack Exchange websites



Get notified of changes in reputation, responses, revisions, badges & moderator messages, on any StackExchange site


24. Chrome SEO



The Google Chrome SEO Extension provides easy access to Search Engine Optimization Tools that can help you with Competitive Analysis, Keyword Research, Backlink Checks, PageRank Checks and other daily SEO tasks.


25. CSS Reloader



CSS Reloader is a browser extension that allows you to reload CSS without reloading the page itself.You are able to customize the keyboard shortcut under the extensions settings page.


26. Validity



Validity can be used to quickly validate your HTML documents from the address bar. Just click the icon in the address bar to validate the current document without leaving the page. The number of validation errors can be seen in the tool tip and the detail can be seen in the Javascript console.


27. Window Resizer



This extension resizes the browser’s window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.


28. Pixlr Grabber



Create screen capture of visible part, selected area or whole page then you can edit them in pixlr editor or share them to public imm.io. You also get a context menu for pulling down images to pixlr editor.


29. Pendule



Extended web developer tools for Chrome. Use this extension in addition to the built-in Developer Tools


30. Weebly – Website Builder



Weebly is the easiest way to create a free website, blog, or online store. Using a simple drag & drop interface, build your website in minutes and choose from hundreds of professional designs.

Source: Web Design Ledger

23 Mar

34 Fantastic New jQuery Plugins

By Nguyễn Bình Vĩ

With jQuery now being used in over 40% of all web sites, the demand for up-to-date and feature-rich plugins has never been greater. Thankfully, the jQuery community has always met its popularity head on by offering a constant influx of new plugins that constantly push the boundaries of functionality ever-further.

Yeah, we really do love jQuery :)

We haven’t actually had a good look at jQuery plugins in quite a while, so today, we thought we would bring you up-to-date with some of the latest and greatest.

1. CodeExplorer

codeexplorer

CodeExplorer is an enitrely unique code formatting plugin that will not only format the code with colors and spacing, but will also display it in an entire folder structure.

CodeExplorer


2. Subway Map Visualization Plugin

subway

The amazing Subway Map Visualization plugin allows you create, interactive subway map visualizations with HTML. Its style has been based on Londons Underground maps, with smooth curves & interchange connectors and 45-degree diagonals. The map size, line width and colors can all be customizable and the markup is also search engine friendly.

Subway Map Visualization Plugin Demo


3. Website Tour with jQuery

subway

Website Tour with jQuery allows you to, as its name clearly states, create a tour on a website with jQuery. This can be very useful if you want to explain your users the functioning of your web application in an interactive way.
The idea is to add certain class to elements that you want to guide the user through and explain exactly what they do. The user is guided by a little tooltip to show what the current tour point is about, and a navigation that will allow the user to go back and forth between each point.

Website Tour with jQuery | Demo


4. jQuery Embedded Help System

embedded system

jQuery E-Help is plugin for procedural(“How to …”) web user interface help and it’s easy to integrate into any web interface that supports jQuery. Useful for all web applications, CMS and E-commerce systems.

jQuery Embedded Help System | Demo


5. The jQuewy Project – Lightweight Loader for Javascript Functions

loghtweight

jQuewy is a simple, efficient, and lightweight loader for Javascript functions, with a powerful CDN-ready backend. Have you ever wanted to quickly prototype an idea in Javascript, and wanted to get it down as quickly as possible? Have you noticed how a large portion of your setup time can include downloading and setting up libraries to work with? jQuewy solves this problem, because now you can summon any script, and it’ll be inserted into your head tag automatically.

The jQuewy Project | Demo


6. Flurid – The Fluid CSS Grid

fluid CSS grid

Flurid is a fluid width grid system optimized for flexibility (fluidity). It comes with a companion jQuery plugin to help make developing with the framework easier. Along with some additional features like equal height columns, the jQuery plugin can also automatically append alternating “odd” and “even” classes to rows and columns and apply the “last” class where needed to fix things for Internet Explorer 7 and below.

Flurid – The Fluid CSS Grid


7. jQuery Runloop Plugin

runloop

With jQuery Runloop, you can create your own small runloop with keyframes at your own choosing, each with code to execute. You can put whatever code you want in each keyframe, rearrange keyframes easily, and use reusable maps of code and/or animations to share between runloops.
It was created to have more power, more control and less hassle than dealing with jQuery .animate() callbacks. It hooks into jQuery’s Effects Queue by design, to avoid timing conflicts in the case of doing many multiple .animate() calls.

jQuery Runloop Plugin | Demo


8. arbor.js – A Graph Visualization Library

graph visual

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

arbor.js – A Graph Visualization Library


9. Isotope

isotope

Isotope Docs & Downloads


10. jMenu – Horizontal Navigation with Unlimited Sub-Menus

jMenu

jMenu is a plugin that can create horizontal navigations with unlimited sub-menus. The look and feel of the menu is set in a CSS file, so you can update it without ever having to touch the JS code.
Besides jQuery, it also requires jQuery UI and does support all of the effects from the library (like fadeIn or slideDown).

jMenu – Horizontal Navigation with Unlimited Sub-Menus | Demo


11. 960 Grid on jQuery-Mobile

mobile

960 Grid on jQuery-Mobile is a port of 960 Grid to jQuery mobile. It combines the flexibility of 960.gs with the ease of jQuery mobile, with the purpose of making jQuery mobile more flexible and easier to use on mobile and touch-screen devices.

960 Grid on jQuery-Mobile | Demo


12. MobilyMap

map

MobilyMap is a lightweight plugin (7KB) that can create a Google Maps-like, draggable interface from any image. You can add markers, display captions, display HTML content when markers are clicked and the plugin has callback functions including onMarkerClick, onPopupClose and onMapLoad to better interact on every level.

MobilyMap | Demo


13. Slides – A Slideshow Plugin for jQuery

slideshow

Slides is a smooth and simple slideshow plugin for jQuery that features looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.

Slides | Demo


14. jTag – Plugin to Tag Pictures & More

tag

jTag – Plugin to Tag Pictures & More | Demo


15. Galleria – JavaScript Image Gallery Framework

gallery

Galleria is a JavaScript image gallery framework, built upon jQuery, that simplifies the process of creating professional image galleries for websites and web/mobile apps. The framework has a large number of options such as transition effects, cropping methods and interaction details that you can use to customize your gallery. In addition to the generic options, each Galleria theme has some theme-specific options.

Galleria | Demo


16. liteAccordion – A Horizontal Accordion Plugin for jQuery

accordion

liteAccordion is an easy-to-use content slider/accordion that only weighs 4.5kb (if you minify and gzip the JS, you can get the file size down to 1.2kb!). It supports pretty much anything and comes with two themes – ‘basic’ and ‘dark’.

liteAccordion


17. jShowOff – A jQuery Content Rotator

content rotator

jShowOff is a jQuery plugin for creating a rotating content module. It works by creating ‘slides’ from the child elements (eg.

  • ) inside a specified wrapper element (eg.
      ) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more.

      jShowOff


      18. Zoomy – E-Magnification

      e-magnification

      Zoomy is a quick and easy plugin that will zoom into a picture. You only need two copies of one image, first the display image and then thelarger zoom image. Just link the zoom picture on the display picture, and tell the plugin to use that link when zooming.

      Zoomy – E-Magnification


      19. jQuery Waypoints

      waypoints

      Waypoints is a small plugin that makes it easy to execute a function whenever you scroll to an element. The plugin makes a solid base for modern UI patterns that depend on a user’s scroll position on the page.

      jQuery Waypoints | Demo


      20. Easy Paginate – Plugin for Pagination

      pagination

      Easy Paginate is a lightweight and easy to use plugin that allows you to browse easily through the list of items with pagination controls. It takes a list of items, calculates a number of child elements of a certain object, divides it by step parameter (which can be easily adjusted) and generates “control buttons”. Controls are inserted immediately after the selected object in a form of ordered list.

      Easy Paginate – Plugin for Pagination | Demo


      21. QapTcha – Draggable Captcha System with jQuery UI

      captcha

      QapTcha, built using jQuery UI, is an innovative captcha plugin. It is a simple idea, yet very effective: To unlock a QapTcha form, the user has to drag a slider from the left to the right – something that bots are not able to do.


      QapTcha – Draggable Captcha System with jQuery UI
      | Demo


      22. jFormer – jQuery Form Framework

      framework

      jFormer is a form framework written on top of jQuery that allows you to quickly generate beautiful, standards compliant forms. Leveraging the latest techniques in web design, jFormer helps you create web forms that: Validate client-side, Validate server-side and Process without changing pages (using AJAX).

      jFormer – jQuery Form Framework | Demo


      23. bvalidator – Client Side Form Validation

      validation

      bValidator is a jQuery plug-in for client side form validation. It supports fully customized error messages defined with template and CSS, many validation functions (actions) like date, email, URL, IP address, validation of dynamic forms, customized validation functions and more.

      bvalidator – Client Side Form Validation | Demo


      24. jQuery.validVal

      validal

      The jQuery.validVal is a plugin designed to simplify form validation. It is highly customizable, feature-rich and can easily be dropped on any type of HTML-form (even AJAX- and HTML5-forms) with ease.

      jQuery.validVal | Demo


      25. SheepIt! – Form Cloning jQuery Plugin

      cloning

      SheepIt is a jQuery plugin that allows you to clone form elements dynamically. It is very useful to develop advanced forms that require the same type of load data multiple times.

      SheepIt! – Form Cloning jQuery Plugin | Demo


      26. Reveal – jQuery Modal Plugin

      modal

      Reveal is a lightning-fast, lightweight (1,75kb), easy to implement and cross-browser compatible jQuery Modal window plugin.

      Reveal – jQuery Modal Plugin


      27. jNotify jQuery Plugin

      The jQuery jNotify plug-in is an unobtrusive notification system for web-based applications. You can use it to inform users when specific actions have completed on your site–such as when an AJAX operation is complete. It has been designed to replace code where you may have previously used the JavaScript alert() function to provide feedback to the user.

      jNotify jQuery Plugin | Demo


      28. Signature Pad

      pad

      The Signature Pad plugin aids in the creation of an HTML5 canvas based signature pad that will record the drawn signature in JSON for later regeneration. It has two modes: TypeIt and DrawIt. In TypeIt mode the user’s signature is automatically generated as HTML text, styled with @font-face, from the input field where they type their name. In DrawIt mode the user is able to draw their signature on the canvas element.

      Signature Pad | Demo


      29. jQuery Splatter Plugin

      splatter

      Splatter applies a random position, size, and color to elements on a page. The most basic implementation adds randomly colored and positioned asterisks to the element, it also has lots of optional configuration options, but the most of them are pretty simple and none of them are required.

      jQuery Splatter Plugin | Demo


      30. ToastMessage Plugin

      toastmessage

      jQuery-ToastMessage-plugin is a jQuery plugin that offers Android-like notification messages and comes withfour different predefined types of toasts: notice, success, warning and error.

      ToastMessage Plugin | Demo


      31. jLabel – A jQuery Label Plugin

      jLabel is a plugin that formats text input fields with unobtrusive labels featuring interactive suggestions. This allows input fields to be labelled clearly and presented with minimal interface obstruction.

      jLabel – A jQuery Label Plugin


      32. jRating – Ajaxed Star Rating System

      ajaxed ratting system

      jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail from ‘the number of the stars’ to ‘if the stars can represent decimals or not’.
      Although the plugin can be used with any scripting language, a PHP file that handles the requests is included in the download package.

      jRating – Ajaxed Star Rating System | Demo


      33. jQuery Memory Game

      memory game

      jQuery Memory Game | Demo


      34. jQuery Application Architecture – The Printable Chart

      printed chart

      This a handy chart that will help decide the architecture of your apps, like structuring client-side MVC apps, templating, unit and BDD testing, debouncing and much more.

      jQuery Application Architecture Chart


      Source: SpeckyBoy Design Magazine

  • 07 Mar

    10 Essential Guides, Resources and Tools for Getting Started with HTML5

    By Nguyễn Bình Vĩ

    HTML5 is an effective language for web developers and designers to use to structure and present content on the web. It’s increasingly used more and more, whether to make websites more functional and user-friendly, deliver video faster, or build desktop-level web apps.
    No doubt you want to jump in and join the fun. But where to start, you might ask? Or you could be looking for some resources and tools while developing and designing with HTML5, perhaps? Well, today’s your lucky day. Here are 10 essential HTML5 getting started guides, resources and tools:


    1. Getting Started with HTML5 Tutorial by Dave Woods

    1

    A simple tutorial for getting started with HTML5. It holds your hand through starting using HTML5 for your website and web app. It goes through adding the HTML5 doctype, the head and body sections, the header and nav elements, the article, section and hgroup elements, the aside element, and the footer element. Code snippets are included.

    Getting Started with HTML5 Tutorial by Dave Woods


    2. Getting Started with HTML5 Tutorial by Devlounge (Part 1, 2 and 3)

    2

    Another tutorial for getting started with HTML5 – a simple and useful 3-part tutorial. It provides you with code snippets while holding your hand through through adding and using the HTML5 elements: doctype, script, style, header, nav, article, section, aside, and footer. Includes explanations for all of the elements.

    Getting Started with HTML5 Tutorial Part 1 | Part 2 | Part 3


    3. Getting Started with HTML5 Video

    3

    A Think Vitamin tutorial that answers the question of why use HTML5 video—especially when Flash video is so prominent—and then gets into how to use HTML5 video on your website. It gives you code snippets for you to insert to make the job easier.

    Getting Started with HTML5 Video


    4. Fun with HTML5 Forms

    10

    A Think Vitamin tutorial that shows you how to build useful and sexy web forms step-by-step. It uses an email opt-in form as an example, illustrates every step, and gives you sample code. After showing how to create functional side, it then dives in and shows you how to make your forms pretty.

    Fun with HTML5 Forms

    5. Web Developer’s Guide to HTML5

    4

    The official W3C (World Wide Web Consortium – the fancy-sounding organization) guide to HTML5. More specifically, it shows how to write simple and practical HTML5 documents and web applications. It also offers in-depth information for the advanced folks out there who are into that kind of stuff.

    Web Developer’s Guide to HTML5


    6. Vocabulary and Associated APIs for HTML5

    5

    The official W3C HTML5 spec webpage. Definitely not for reading, but if you need anything and everything for looking up the particulars of HTML5, some aspect of it, how to use it, and so forth, this the really long better-use-that-web-browser-search-engine guide for you.

    Vocabulary and Associated APIs for HTML5


    7. HTML5 on Wikipedia

    6

    Ol’ Wikipedia gathers up handy info for quick HTML5 reference, including what the new markup is, what the new APIs are, the differences between HTML5 and HTML 4 and XHTML, and information on error handling.

    HTML5 on Wikipedia


    8. Initializr

    7

    Initializr is an HTML5 templates generator that helps you get started with your HTML5 project. It does that by generating a clean customizable template with just what you need to start. Initializr is based on the HTML5 Boilerplate template.

    Initializr


    9. SproutCore

    8

    SproutCore is an HTML5 application framework which lets you simply create desktop-level applications for modern web browsers. Plus you don’t have to rely on any plugins when building your web applicaton using SproutCore.

    SproutCore


    10. Modernizr

    9

    Modernizr lets you target specific browser functionality in your stylesheet by adding classes to your element. What’s easy is you don’t need to actually write any Javascript code to use this.

    Modernizr


    Source: SpeckyBoy Design Magazine

    25 Feb

    33 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials

    By Nguyễn Bình Vĩ

    3

    jQuery has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers. One of these uses that I’m referring to is the image slider. Implementing this feature in your site will definitely count as a big plus so don’t waste your time and download the available jQuery plugins in this 30 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials.

    You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user.Content sliders are a great way to show large amount of content or images on a smaller area in a website or blog. They are commonly used in portfolio sites, corporate sites or blogs. You may probably heard that jQuery isn’t very hard to learn. If you are interested in implementing a content slider in your website please check our jQuery tutorials and plugins collection.


    1. Minimalistic Slideshow Gallery



    In this tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will slide out from the top and allow the user to navigate through a set of thumbnails.

    Slider Details
    Download Script


    2. Advanced jQuery background image slideshow



    With the use of transparent PNG’s, some HTML, pretty nifty CSS and jQuery, we can make this technique work. Read the rest of this article to learn how to create a beautiful advanced jQuery background image slideshow.

    Slider Details & Download


    3. Fancy transitions effects



    Main idea was to build some ’strip curtain’ effect and I start from that. But, while I was building this some other effects just pop up and I decided to adjust code and include some of those effects. Now, there are ‘wave’, ‘zipper’ and ‘curtain’ effect, plus options that can be used for custom effect.

    Slider Details
    Slider Demo
    Download Script


    4. jQuery Blinds



    jQuery Blinds Slideshow using CSS Sprites.

    Slider Demo
    Download Script


    5. Making a Mosaic Slideshow With jQuery & CSS



    When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem.

    Slider Details
    Slider Demo
    Download Script


    6. The Lof JSiderNews Plugin



    Base on the Jquery Framework and the Easing Plugin, The JSiderNews Plugin is a slideshow plugin that displaying images or type of content and support favious navigation to previous|next items.

    Slider Details
    Slider Demo
    Download Script


    7. Blinds-effect Slideshow



    There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.

    Slider Details
    Slider Demo
    Download Script


    8. Slideshow plugin for the Tabs



    Here you can see a slideshow plugin in action. Click on the arrow buttons, navigator or the content area to navigate through the slides. You can also enable the automatic slideshow by pressing the “play” button below the slides.

    Slider Details & Demo & Download


    9. Slideshow plugin for the Tabs



    We learn how to fade list of images through each other in continuous loop. We will also add captions and tooltips to make it more usable. This simple effect is ideal for portfolio websites, galleries or magazines where images need to be seen.

    Slider Details
    Slider Demo
    Download Script


    10. loopedCarousel



    Slider Details
    Slider Demo
    Download Script


    11. Supersized 2.0



    Slider Details
    Slider Demo
    Download Script


    12. jQuery Carousel



    Slider Details
    Slider Demo
    Download Script


    13. Create a jQuery Carousel with WordPress Posts



    Slider Details
    Slider Demo
    Download Script


    14. Create a Simple Infinite Carousel with jQuery



    This tutorial will show you how to create a infinite carousel script with jQuery. It also have a simple autorotate script that will rotate items in the carousel.

    Slider Details
    Slider Demo
    Download Script


    15. jQuery Infinite Carousel-version 2



    Slider Details
    Slider Demo
    Download Script


    16. Agile Carousel



    Agile Carousel is a JQuery Plugin. The JQuery AJAX function is used to deliver settings to the included PHP script “make_slides.php”, which you do not need to modify. The PHP script uses the requested settings to custom-build an image carousel. The carousel html is then placed to the html document within the container you specify.

    Slider Details
    Slider Demo
    Download Script


    17. jQuery Multimedia Portfolio



    This plugin for jQuery will automatically detect the extension of each media and apply the adapted player.

    Slider Details
    Slider Demo
    Download Script


    18. Ajax Search – Carousel



    Slider Details
    Slider Demo
    Download Script


    19. Create a Simple Slideshow using Mootools / JQuery



    In this post i’ll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

    Slider Details
    Slider Demo
    Download Script


    20. Lateral Slider



    Slider – The easiest known way to showcase your images and photos on the web in style.

    Slider Details
    Slider Demo
    Download Script


    21. Horinaja



    Horinaja is a slide-show ready-to-use for scriptaculous/prototype or jQuery.

    Slider Details
    Slider Demo
    Download Script


    22. Gradually



    Gradually offers API, a slide show, and a thumbnail gallery using ImageDrawer.

    Slider Details
    Slider Demo
    Download Script


    23. Simple jQuery slideshow bubble messages



    Slider Details & Demo & Download


    24. Sexy Slider



    SexySlider is a JQuery plugin that lets you easily create powerful javascript Sliders with very nice transition effects. Enhance your website by adding a unique and attractive slider!

    Slider Details
    Slider Demo
    Download Script


    25. siteFeature



    SiteFeature is an unobtrusive jQuery plugin that simplifies the creation of an interactive “Featured Items” widget.

    Slider Details
    Slider Demo
    Download Script


    26. DDSlider – 10 Transitions – Inline Content Support



    DDSlider introduces a new easy-to-go slider with 9 different unique transitions (+fading & random—11 total) that support Inline Content. You can also have multiple sliders in the same page

    Slider Details
    Slider Demo
    Download Script


    27. AviaSlider – jQuery Slideshow



    AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.

    Slider Details
    Slider Demo
    Download Script


    28. jQuery Banner Rotator / Slideshow



    This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.

    Slider Details
    Slider Demo
    Download Script


    29. TinySlider



    This super lightweight (1.5 KB) sliding Javascript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without Javascript support.

    Slider Details
    Slider Demo
    Download Script


    30. Slideshow 2



    Slideshow 2! is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. This page features some examples of how Slideshow might be used to enhance the presentation of images on your website. Please view the source of this page for usage information.

    Slider Details
    Slider Demo
    Download Script


    31. BlogSlideShow



    BlogSlideShow is a free open-code JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

    Slider Details & Demo & Download


    32. PictureSlides



    PictureSlides is a plugin for jQuery, and it is a highly customizable JavaScript-based way to easily turn your images into a collection viewable as a slideshow, and with fading effects, if desired.

    Slider Details
    Slider Demo
    Download Script


    33. CSS3 enhanced zoom-in zoom out slideshow



    This free copy and paste script adds a stylish CSS3 effect to your slideshow. Simply by setting the style attributes you can apply corners to any or all four image-corners, furthermore you can apply shadows.

    Slider Details & Demo & Downlad

    Source:

    ThemeFlash

    21 Feb

    12 Useful and Free Downloadable Web Design Books

    By Nguyễn Bình Vĩ

    There are a multitude of books (whether in digital format or print) that cover every possible aspect of web design, each one is unique and offers a personalized opportunity for the author to both educate, inspire, and guide the reader through there knowledge.
    In this post rather than offer all of my favorite web design books, I have listed 12 books that I have either downloaded and read (or at least scanned through), or I have bookmarked with the whole-hearted intention of eventually reading it (Ruby Best Practices), and the best thing of all? All of these books are completely FREE, in digital format anyway (PDF or HTML).

    I have not offered a critique of each book, as I feel that would not be fair on the author. If someone spends so much of there valuable time (in some cases months and months) and writes an entire book on web design, in my eyes they deserve only praise and appreciation.
    I hope you find these books useful.


    1. The Elements of Typographic Style Applied to the Web (HTML)



    Author(s): Richard Rutter.
    About the Book: For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.
    In order to allay some of the myths surrounding typography on the web, this website/book has been structured to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
    The Elements of Typographic Style: Full HTML version »
    The Elements of Typographic Style: Chapters »


    2. Integrating Accessibility Throughout Design (HTML)



    Author(s): Shawn Lawton Henry.
    About the Book: The Web is providing unprecedented access to information and interaction for people with disabilities. It provides opportunities to participate in society in ways otherwise not available. With accessible websites, people with disabilities can do ordinary things: children can learn, teenagers can flirt, adults can make a living, seniors can read about their grandchildren, and so on.
    With the Web, people with disabilities can do more things themselves, without having to rely on others. People who are blind can read the newspaper (through screen readers that read aloud text from the computer), and so can people with cognitive disabilities who have trouble processing written information. People who are deaf can get up-to-the-minute news that was previously available only to those who could hear radio or TV, and so can people who are blind and deaf (through dynamic Braille displays). Web accessibility is about removing those barriers so that people with disabilities can use and contribute to the Web.
    This book helps you improve your products—websites, software, hardware, and consumer products—to remove accessibility barriers and avoid adding new barriers. One guiding principle is: just ask people with disabilities.
    Integrating Accessibility Throughout Design: HTML version »
    Integrating Accessibility Throughout Design: Table of Contents »


    3. Getting Real: The Book by 37signals (HTML)



    Author(s): 37Signals Team.
    About the Book: Want to build a successful web app? Then it’s time to Get Real. Getting Real is a smaller, faster, better way to build software.
    Getting Real delivers better results because it forces you to deal with the actual problems you’re trying to solve instead of your ideas about those problems. It forces you to deal with reality.
    Getting Real foregoes functional specs and other transitory documentation in favor of building real screens. A functional spec is make-believe, an illusion of agreement, while an actual web page is reality. That’s what your customers are going to see and use. That’s what matters. Getting Real gets you there faster. And that means you’re making software decisions based on the real thing instead of abstract notions.
    Finally, Getting Real is an approach ideally suited to web-based software. The old school model of shipping software in a box and then waiting a year or two to deliver an update is fading away. Unlike installed software, web apps can constantly evolve on a day-to-day basis. Getting Real leverages this advantage for all its worth.
    Getting Real: HTML Version »
    Getting Real: Chapters »


    4. Access by Design Online (HTML)



    Author(s): Sarah Horton.
    About the Book: We design Web sites so people can use them. People doesn’t mean “some people” or “certain people.” With universal usability, our goal is to design Web sites that accommodate the diversity of people and the Web browsing devices that they use. To design Web sites that people can use, we must work within the flexible framework that the Web provides.
    To this end, we must begin our process with a solid understanding of how the Web works. When we know its nature, we can make intelligent design decisions that uphold rather than impede its functionality. Whenever we face a decision that may impact function, we must look for other options.
    Access by Design Online: HTML Version »
    Access by Design Online: Table of Contents »


    5. Research-Based Web Design & Usability Guidelines (PDF)



    About the Book: The Research-Based Web Design & Usability Guidelines (Guidelines) were developed by the U.S. Department of Health and Human Services (HHS), in partnership with the U.S. General Services Administration.
    The Guidelines were developed to assist those involved in the creation of Web sites to base their decisions on the most current and best available evidence. The Guidelines are particularly relevant to the design of information-oriented sites, but can be applied across the wide spectrum of Web sites.
    Research-Based Web Design & Usability Guidelines: Download Entire Book (PDF) »
    Research-Based Web Design & Usability Guidelines: Chapters »


    6. Search User Interfaces (HTML)



    Author(s): Mart A. Hearst.
    About the Book: This book outlines the human side of the information seeking process, and focuses on the aspects of this process that can best be supported by the user interface. It describes the methods behind user interface design generally, and search interface design in particular, with an emphasis on how best to evaluate search interfaces. It discusses research results and current practices surrounding user interfaces for query specification, display of retrieval results, grouping retrieval results, navigation of information collections, query reformulation, search personalization, and the broader tasks of sensemaking and text analysis. Much of the discussion pertains to Web search engines, but the book also covers the special considerations surrounding search of other information collections.
    Search User Interfaces: HTML Version »
    Search User Interfaces: Table of Contents »


    7. Dive Into Accessibility (HTML & PDF)



    Author(s): Mark Pilgrim.
    About the Book: This book is entitled “Dive Into Accessibility: 30 days to a more accessible web site”, and it will answer two questions. The first question is “Why should I make my web site more accessible?” If you do not have a web site, this book is not for you. The second question is “How can I make my web site more accessible?” If you are not convinced by the first answer, you will not be interested in the second.
    To answer the second question,the book presents 25 tips that you can immediately apply to your own web site to make it more accessible. Although these concepts apply to all web sites, the focus is on implementation using popular weblogging tools. If you use some other publishing tool or template system, you will need to determine how to implement the tips in your tool of choice.
    Dive Into Accessibility: HTML Version »
    Dive Into Accessibility: PDF Version »
    Dive Into Accessibility: Chapters »


    8. Web Style Guide: Basic Design Principles for Creating Web Sites – 3rd Edition (HTML)



    Author(s): Patrick J. Lynch and Sarah Horton.
    About the Book: Written by Patrick J. Lynch and Sarah Horton for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
    Web Style Guide 3rd Edition: HTML Version »
    Web Style Guide 3rd Edition: Chapters »


    9. The Woork Handbook (PDF)



    Author(s): Antonio Lupetti.
    About the Book: The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.
    This book is a miscellanea of articles written by Antonio Lupetti on his web design blogr. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and has received a lot of requests to distribute a printable version of its contents.
    The Woork Handbook: PDF Version »


    10. Web Designers Success Guide (PDF)



    Author(s):
    About the Book: Web Designer’s Success Guide is the definitive guide to starting your own freelance Web design business. In this book, Kevin Airgid gives designers a step-by-step instructions on how to achieve the following: Transition from full-time to self-employment, Freelance on the side to make additional income, Find new clients and keep them coming back for more, Market your freelance business, Manage your projects professionally and how to Price your services appropriately.
    Web Designers Success Guide: PDF Version »


    11. Eloquent JavaScript (HTML)



    Author(s): Marijn Haverbeke.
    About the Book: Eloquent JavaScript is a digital book providing a comprehensive introduction (tutorial) to the JavaScript programming language. Apart from a bookful of text, it contains plenty of example programs, and an environment to try them out and play with them.
    The book is aimed at the beginning programmer ― people with prior programming experience might also get something out of it, but they should not read chapters 2 to 5 too closely, because most of the concepts discussed there will probably be nothing new to them. Do make sure you read the end of the first chapter, which has some essential information about the book itself.
    Eloquent JavaScript: HTML Version »
    Eloquent JavaScript: Chapters »


    12. Ruby Best Practices (PDF)



    Author(s): Gregory Brown.
    About the Book: In 1993, when Ruby was born, Ruby had nothing. No user base except for Gregory and a few close friends. No tradition. No idioms except for a few inherited from Perl.
    But the language forms the community. The community nourishes the culture. In the last decade, users increased—hundreds of thousands of programmers fell in love with Ruby. They put great effort into the language and its community. Projects were born. Idioms tailored for Ruby were invented and introduced. Ruby was influenced by Lisp and other functional programming languages. Ruby formed relationships between technologies and methodologies such as test-driven development and duck typing.
    This book introduces a map of best practices of the language as of 2009.
    Ruby Best Practices: PDF Version »

    Source: Speckyboy Design Magazine

    16 Feb

    31 CSS Code Snippets To Make You A Better Coder

    By Nguyễn Bình Vĩ

    1
    It is almost impossible to gather in an article all the CSS code snippets that could help you in the future but here are some of the ones that you would need more often than others. Don’t get scared by the length of some of these CSS hacks’s code cause they’re all easy to implement and where is the case, they’re well documented. Besides the ones that solve common and annoying problems there are also some that solve new issues brought by the new technologies.


    1. Comprehensive List of Browser-Specific CSS Hacks

    Cross browser coding can be sometimes tricky but these browser specific css hacks can help you with your problems. With them cross browser compatibility comes to you served on a plate.

    /***** Selector Hacks ******/
    /* IE6 and below */
    * html #uno  { color: red }
    /* IE7 */
    *:first-child+html #dos { color: red }
    /* IE7, FF, Saf, Opera  */
    html>body #tres { color: red }
    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }
    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }
    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho {  color: red }
    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
     #diez  { color: red  }
    }
    /* iPhone / mobile webkit */
    @media screen and (max-device-width: 480px) {
     #veintiseis { color: red  }
    }
    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece  { color: red  }
    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red  }
    /* Everything but IE6-8 */
    :root *> #quince { color: red  }
    /* IE7 */
    *+html #dieciocho {  color: red }
    /* Firefox only. 1+ */
    #veinticuatro,  x:-moz-any-link  { color: red }
    /* Firefox 3.0+ */
    #veinticinco,  x:-moz-any-link, x:default  { color: red  }
    /***** Attribute Hacks ******/
    /* IE6 */
    #once { _color: blue }
    /* IE6, IE7 */
    #doce { *color: blue; /* or #color: blue */ }
    /* Everything but IE6 */
    #diecisiete { color/**/: blue }
    /* IE6, IE7, IE8 */
    #diecinueve { color: blue\9; }
    /* IE7, IE8 */
    #veinte { color/*\**/: blue\9; }
    /* IE6, IE7 -- acts as an !important */
    #veintesiete { color: blue !ie; } /* string after ! can be anything */{/code}
    

    2. Cross Browser Vertically and Horizontally Centered Images in CSS without Tables

    This centers an image of unknown size vertically and horizontally within a box. The wrapper box has an explicit width and height. The is a hack for internet explorer

    
    
    .logo {
      display: block;
      text-align: center;
      display: block;
      text-align: center;
      vertical-align: middle;
      border: 4px solid #dddddd;
      padding: 4px;
      height: 74px;
      width: 74px; }
      .logo * {
        display: inline-block;
        height: 100%;
        vertical-align: middle; }
        .logo .photo {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 100%; }
    

    3. Cross-Browser Transparency via CSS

    You can quickly and easily apply transparency to any supportive element by adding the following CSS code your stylesheet:

    selector {
        filter: alpha(opacity=50); /* internet explorer */
        -khtml-opacity: 0.5;      /* khtml, old safari */
        -moz-opacity: 0.5;       /* mozilla, netscape */
        opacity: 0.5;           /* fx, safari, opera */
        }
    

    4. CSS Box Shadow

    Overdoing it may result in looking weird but using it with style can add a certain classy look to your divs without using any images to do so. The box shadow property is one of the new things that CSS 3 brings us and one of the most wanted.

    Outer shadow

    .shadow {
      -moz-box-shadow: 5px 5px 5px #ccc;
      -webkit-box-shadow: 5px 5px 5px #ccc;
      box-shadow: 5px 5px 5px #ccc;
    }
    

    Inner shadow

    .shadow {
       -moz-box-shadow:inset 0 0 10px #000000;
       -webkit-box-shadow:inset 0 0 10px #000000;
       box-shadow:inset 0 0 10px #000000;
    }
    

    You can see a demo at Design Resource Box


    5.Cross-Browser Min Height

    The CSS min-height is one of the most requested css snippets to solve the annoying min-height problems in IE.

    #div {
       min-height: 500px;
       height:auto !important;
       height: 500px;
    }
    

    6. 3 Ways to Preload Images with CSS, JavaScript, or Ajax

    Reloading images is a great way to improve the user experience. When images are preloaded in the browser, the visitor can surf around your site and enjoy extremely faster loading times. This is especially beneficial for photo galleries and other image-heavy sites where you want to deliver the goods as quickly and seamlessly as possible. Preloading images definitely helps users without broadband enjoy a better experience when viewing your content. In this article, we’ll explore three different preloading techniques to enhance the performance and usability of your site.


    7. CSS Fixed Footer

    Making your footer sticky with CSS is a must do. You don’t want it to come after the header on small content pages like a kid comes after candy. It is simply wrong.

    #footer {
       position:fixed;
       left:0px;
       bottom:0px;
       height:30px;
       width:100%;
       background:#999;
    }
    /* IE 6 */
    * html #footer {
       position:absolute;
       top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
    }
    

    8. Clearfix CSS Hack

    Putting everything together and combining these lessons learned with the original (correct) version of the Easy Clear Method, we fashion the following, fully functional, flaw-fixing CSS clearfix formula:

    /* slightly enhanced, universal clearfix hack */
    .clearfix:after {
         visibility: hidden;
         display: block;
         font-size: 0;
         content: " ";
         clear: both;
         height: 0;
         }
    .clearfix { display: inline-block; }
    /* start commented backslash hack \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* close commented backslash hack */
    

    9. 8 Definitive Web Font Stacks

    The idea behind creating recommended font stacks is simple: since most web designers don’t know a great deal about font selection and typography for the Web, and have far too much on their plates to spend the time needed to learn, they need a one-stop shop of font stacks that provides a wide variety for all platforms—Windows, Mac and Linux.

    Additionally, those designers who do understand enough about typography may feel like their creativity is limited by the restrictions of the standard “web safe” set of fonts. Using font stacks is one possible way of increasing a designer’s options.

    The font stacks listed here are grouped together by the universal font that forms the base of that stack. A designer can therefore decide on a typographical look for their site, grab the appropriate font stack, and tweak it to suit their needs.

    /* The Times New Roman-based serif stack: */
    font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
    /* A modern Georgia-based serif stack:*/
    font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
    /*A more traditional Garamond-based serif stack:*/
    font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
    /*The Helvetica/Arial-based sans serif stack:*/
    font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*The Verdana-based sans serif stack:*/
    font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    /*The Trebuchet-based sans serif stack:*/
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    /*The heavier “Impact” sans serif stack:*/
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    /*The monospace stack:*/
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    

    10. Give Clickable Elements a Pointer Cursor

    Some elements that are clickable mysteriously don’t trigger a pointer cursor in browsers. This fixes that, and provides a default class “pointer” for applying it to other clickable things as needed.

    a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
           cursor: pointer;
    }
    

    11. iPad Orientation CSS (Revised)

    It doesn’t take much foresight to anticipate that with the rise of Natural User Interfaces (NUIs) like the iPhone and iPad, UI designers will have a greater responsibility to optimize for orientation-based contexts. As such, it’s quite prescient that today, the folks at Cloud Four demonstrated how to serve up stylesheets based on device orientation.

    
    @media only screen and (max-device-width: 1024px) and (orientation:portrait) {
        .landscape { display: none; }
    }
    @media only screen and (max-device-width: 1024px) and (orientation:landscape) {
        .portrait { display: none; }
    }
    
    

    Your device orientation is "portrait"

    Your device orientation is "landscape"


    12. Wrapping Text Inside Pre Tags

    height: 120px;
    overflow: auto;
    font-family: “Consolas”,monospace;
    font-size: 9pt;
    text-align:left;
    background-color: #FCF7EC;
    overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    margin: 0px 0px 0px 0px;
    padding:5px 5px 3px 5px;
    white-space : normal; /* crucial for IE 6, maybe 7? */
    

    13. Hardboiled CSS3 Media Queries

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }
    /* Smartphones (landscape) ----------- */
    @media only screen
    and (min-width : 321px) {
    /* Styles */
    }
    /* Smartphones (portrait) ----------- */
    @media only screen
    and (max-width : 320px) {
    /* Styles */
    }
    /* iPads (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    /* Styles */
    }
    /* iPads (landscape) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : landscape) {
    /* Styles */
    }
    /* iPads (portrait) ----------- */
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (orientation : portrait) {
    /* Styles */
    }
    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    /* Styles */
    }
    /* Large screens ----------- */
    @media only screen
    and (min-width : 1824px) {
    /* Styles */
    }
    /* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    }
    

    14. Eric Meyer’s Reset Reloaded

    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,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }
    /* remember to define focus styles! */
    :focus {
        outline: 0;
    }
    body {
        line-height: 1;
        color: black;
        background: white;
    }
    ol, ul {
        list-style: none;
    }
    /* tables still need 'cellspacing="0"' in the markup */
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    caption, th, td {
        text-align: left;
        font-weight: normal;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: "";
    }
    blockquote, q {
        quotes: "" "";
    }
    

    15. Multiple borders

    An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements.

    #borders {
       position:relative;
       z-index:1;
       padding:30px;
       border:5px solid #f00;
       background:#ff9600;
    }
    

    The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want.

    #borders:before {
       content:"";
       position:absolute;
       z-index:-1;
       top:5px;
       left:5px;
       right:5px;
       bottom:5px;
       border:5px solid #ffea00;
       background:#4aa929;
    }
    #borders:after {
       content:"";
       position:absolute;
       z-index:-1;
       top:15px;
       left:15px;
       right:15px;
       bottom:15px;
       border:5px solid #00b4ff;
       background:#fff;
    }
    

    16. Pure CSS3 box-shadow page curl effect

    HTML

    CSS

    ul.box {
    margin: 0;
    padding: 0;
    clear: both;
    overflow: hidden; }
    
    ul.box li {
    list-style-type: none;
    margin: 0 30px 30px 0;
    padding: 0;
    width: 250px;
    height: 150px;
    border: 1px solid #efefef;
    position: relative;
    float: left;
    background: #ffffff; /* old browsers */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
    
    ul.box li:after {
    z-index: -1;
    position: absolute;
    background: transparent;
    width: 70%;
    height: 55%;
    content: '';
    right: 10px;
    bottom: 10px;
    transform: skew(15deg) rotate(6deg);
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
    
    ul.box li:before {
    z-index: -2;
    position: absolute;
    background: transparent;
    width: 70%;
    height: 55%;
    content: '';
    left: 10px;
    bottom: 10px;
    transform: skew(-15deg) rotate(-6deg);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }
    

    17. Stop Superscripts from Breaking Line-Heights Once and for All

    So you’ve noticed it too? Your superscript and subscript tags are breaking your nice clean line-heights, aren’t they? It’s something that has bothered me for quite some time too, but for some reason I didn’t think to fix it until today when someone asked me about it.
    Just insert the following CSS declarations to your style sheet and you’re good to go:

    sup, sub {
        vertical-align: baseline;
        position: relative;
        top: -0.4em;
    }
    sub { top: 0.4em; }
    

    18. Remove Scrollbar from Textarea in IE

    It makes you wonder why do textareas have in IE a scrollbar even when they’re empty. Nobody knows for sure but here’s the solution.

    textarea { overflow: auto; }
    

    19. CSS: border-radius and -moz-border-radius

    One of the most keenly-anticipated CSS3 properties is border-radius. Web designers will no longer have to resort to complex table structures using custom-made corner graphics or including arcane JavaScript files in order to produce designs with rounded corners.

    While Internet Explorer doesn’t support many (or any) advanced CSS properties, you can get started using Firefox and any of the ‘Mozilla’ family of browsers. Apple’s WebKit web browser engine also supports rounded corners making them available in the Safari and Chrome web browsers, the iPhone and other devices running WebKit.


    20. Simple and Nice Blockquote Styling

    blockquote {
    background:#f9f9f9;
    border-left:10px solid #ccc;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    }
    blockquote:before {
    color:#ccc;
    content:open-quote;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
    }
    blockquote p {
    display:inline;
    }
    

    21. :-moz-placeholder

    :-moz-placeholder matches form elements displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you’ve changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color.

    
    
    
    
    
    
    
    
    
    
    

    22. Sticky Footer

    I’ve shown you one way of making the footer stay sticky, now here’s another one:

    * { margin:0; padding:0; }
    html, body, #wrap { height: 100%; }
    body > #wrap {height: auto; min-height: 100%;}
    #main { padding-bottom: 150px; }  /* must be same height as the footer */
    #footer {
            position: relative;
            margin-top: -150px; /* negative value of footer height */
            height: 150px;
            clear:both;}
    /* CLEAR FIX*/
    .clearfix:after {content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    

    23. 21 Awesome @font-face Embeddable Typefaces

    While @font-face may not work in all browsers, I think it’s still one of the best solution available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and check out some typefaces you can use with @font-face

    Before you can start using those typefaces on your site you need to declare the font file(s) in your CSS file along with the font-weight and font-style if available. Like this:

    @font-face {
    font-family: GraublauWeb;
    src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
    }
    @font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
    }
    

    Then you can call the font via the font-familly property. Don’t forget to put some other (web-safe) fonts there as a fallback option. Like this:

    h1 {
    font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
    }
    

    Typefaces you can use with @font-face:

    Graublau Sans Web, Fertigo Pro Regular , Tallys, Diavlo, Fontin, Fontin Sans, M+ Outline Fonts, Pykes Peak Zero, Vollkorn, Delicious, Junction, Days, Sniglet, Chunk, Blackout, Gentium, Anivers, CA BND Bold WEB, Axel, Kaffeesatz, Tagesschrift.


    24. Text Rotation with CSS

    Thankfully, many of the popular browsers of today support the ability to rotate HTML elements. Even better? We can make it work in Internet Explorer (back to version 5.5 even). How you might ask? Okay, let’s look at the HTML.

    31 July 2009

    For Webkit and Firefox (as of 3.5), you can take advantage of the proposed transform property to handle the rotation. Each browser requires its property prefix for now.

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    

    In order to perform a transformation, the element has to be set to display:block. In this case, just add the declaration to the span that you want to rotate.
    When it comes to effects in Internet Explorer, there is a surprising amount of power (and untapped at that, I’d say) in using filters. Although misleading, there is a filter called BasicImage that offers up the ability to rotate any element that has layout.

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    

    25. Background transparency

    Being able to set the transparency of the background without affecting the transparency of the foreground (the text) is quite handy. That’s why there’s rgba() in CSS (red, green, blue, alpha). IE is not yet supporting it, but we can use the gradient filter which does support transparency. In this case we don’t need the actual gradient so we set start and end color to the same thing. Also the background: transparent is needed for the whole thing to work in IE:

    .rgba {
      background-color: transparent;
      background-color: rgba(200,200,200,0.8);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd)";
    }
    

    26. Centering a DIV of Unknown Width

    You can easily center a DIV by using margin:auto; property when you have mentioned its width in your CSS. But in case you wanted to center a DIV with unknown width, here is the code to do so :

    .content {
        margin: 0 auto 8px;
        display: table;
        }
    .content div {
        display: table-cell;
        }
    
    

    27. Styling Links by File Type

    You can easily style specific URLs by using icons. This works only with CSS3 compatible browsers and degrades nicely with non-compatible browsers. Make sure to change the icon image paths.

    /* external links */
    a[href^="http://"]
    {
    padding-right: 13px;
    background: url(external.gif) no-repeat center right;
    }
    /* emails */
    a[href^="mailto:"]
    {
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
    }
    /* pdfs */
    a[href$=".pdf"]
    {
    padding-right: 18px;
    background: url(acrobat.png) no-repeat center right;
    }
    

    28. Fix IE6/7 double margin/padding bug

    This problem appears when a left/right floated elements has a margin/padding value defined. To fix that just target these browsers as you earlier learned in this article and add “display: inline” declaration.

    ul li
    {
      float: right;
      margin-right: 10px;
      *display: inline; /*Target IE7 and bellow*/
      _display: inline; /*Target IE6 and bellow*/
    }
    /* This example fixes the double right margin bug */
    

    29. Change text selection style

    ::selection
    {
    color: white;
    background-color: red;
    }
    ::-moz-selection  /* Firefox needs an extra attention for this */
    {
    color: white;
    background-color: red;
    }
    

    30. Drop cap

    Drop cap is not an option only for books and newspapers, you can now use it in web designs also and it’s pretty easy to implement.

    p:first-letter{
            display:block;
            margin:5px 0 0 5px;
            float:left;
            color:#FF3366;
            font-size:60px;
            font-family:Georgia;
        }
    

    31. Style links depending on file format

    Wanna learn UX. Start with this one. This css code snippet adds icons next to specific links so that the user knows where the link will take him to.

    /* external links */
        a[href^="http://"]{
            padding-right: 20px;
            background: url(external.gif) no-repeat center right;
        }
        /* emails */
        a[href^="mailto:"]{
            padding-right: 20px;
            background: url(email.png) no-repeat center right;
        }
        /* pdfs */
        a[href$=".pdf"]{
            padding-right: 20px;
            background: url(pdf.png) no-repeat center right;
        }
    

    Source: Design your way

    15 Feb

    20 Useful Free iPhone and iPad Apps for Designers and Developers

    By Nguyễn Bình Vĩ

    Big shocking news of the day: iPhones and iPads are increasingly popular and widespread and are being used by more and more people. But what’s interesting is this also includes web developers ie. you. And the following list will feature 20 free iPhone and iPad apps for web developers.

    While iPhones and iPads appear to be more consumer-driven devices, there are apps on there that can assist in your web development and make your development and design life much easier. Think of it as having sketchbooks, notepads, calculators, communications devices, and more – all in one device. Of course, there are paid apps that provide much more robust development tools, but these free apps will be more than enough to get you started using your iPhone and/or iPad as a web development aid.


    Without further ado, here are 20 free iPhone and iPad apps for web developers:


    File Accessing, Managing, and Syncing

    Dropbox

    dropbox

    DropBox lets you sync and share files across computers and your iPhone and iPad.


    SugarSync

    sugarsync

    SugarSync is in case you want an alternative to Dropbox. Sync and access files from your other devices and computers.


    2X Client

    2xclient

    2X Client lets you remotely connect to and work on your Windows computer.


    LiveView

    Liveview

    LiveView is a remote screen viewing app that can help you design quick simulations and demos and try out prototypes of your designs. Also useful for designing for mobile apps or web apps for use on mobile devices.


    Design Sketching

    Adobe Ideas

    adobe_ideas

    Adobe Ideas is a digital vector-based sketchbook for drawing and capturing design ideas – which you can then send for further working on to Photoshop and Illustrator.


    Doodle Buddy

    doodle_buddy

    Doodle Buddy is a doodling app which can let you quickly sketch out design ideas and anything else with your fingers. Colors included.


    Note-taking and Task Lists

    Evernote

    evernote

    Evernote lets you capture and store design and development notes, ideas, snapshots, recordings, and anything else for easy finding later on. Paid in-app upgrades if you need more features.


    Note Hub

    note_hub

    Note Hub is a note-taking app that lets you create projects and add notes, to do lists, drawings, and whatever else.


    TaskPad HD

    taskpadHD

    TaskPad HD is a task manager that lets you sync tasks across all of your devices as well as manage your tasks via a web browser.


    Communicating With Clients and Collaborators

    Twitter

    twitter

    The official Twitter app for when you need to talk to clients and collaborators via Twitter.


    Twitterrific

    twitterrific

    Twitterrific is for those who prefer a different interface for using Twitter to stay connected with clients and collaborators – choice is good.


    Skype

    skype

    Skype on your iPhone or iPad – need more be said? Really useful for talking to clients and collaborators, especially when they’re in different parts of the world. It’s free to call if you’re both using Skype, otherwise affordable rates let you call landlines and cell phones.


    Fring

    fring

    Fringe is an alternative to Skype. Text chat with people via Skype and other instant messenger accounts and get free calls if you’re both using Fring.


    Creating and Managing Web Content

    WordPress

    wordpress

    WordPress has an iPhone and iPad app that lets you create and edit posts and pages, moderate comments, and other tasks for your WordPress.com blog or WordPress-powered website.


    Adobe Photoshop Express

    photoshop_express

    Adobe Photoshop Express is a super-slimmed down version of Photoshop for when you need to quickly edit and upload photos and images on your iPhone or iPad.


    Working on and Testing Projects

    PCalc Lite Calculator

    pcalc_lite_caculator

    PCalc Lite Calculator is a scientific calculator for when you need exact measurements and calculations for your web development projects and designs. This is the free fully-functional lite version of the paid full calculator app.


    MedCommons Prototyper

    medcommons_prototyper

    MedCommons Prototyper helps build SplitView layouts for easy presenting of web content on an iPad by letting you test your HTML5 and Ajax designs for things like rotation and resizing.


    Finding Work and Useful People

    Craigsphone

    craigsphone

    Craigsphone is Craigslist for iPad – ’nuff said. For when you need to find clients or work, people to outsource to, and anything else related to your web development and design work.


    Design Inspiration and Ideas

    FontShuffle

    fontshuffle

    FontShuffle is useful for finding the right font for your project or just browsing for typography inspiration – hundreds of font families are sorted by similarity.


    SkyGrid

    skygrid

    SkyGrid is a better RSS feed reader – an easy way to browse relevant design and development information and articles.

    Source: Speckyboy Design Magazine

    24 Dec

    Creating User-Sensitive Website Layouts

    By Nguyễn Bình Vĩ

    Web designers are largely responsible for curating new trends in layouts and graphic design for the web. This part of the job description is often masked behind a thin veil of secret tasks, but requirements are always the same. When it comes to creating website layouts it’s important to keep true to certain design theories.

    User experience is a key issue and one which shouldn’t be blatantly disregarded during the layout design process. As designers we must focus a lot of energy creating and building new structures which will enhance the overall website experience. I’ll be going over a few ideas regarding design and the needs of individual users.

    Construct a Template Definition

    We won’t be defining any new terms here or require a dictionary. Instead this is a monumental first step towards a very intuitive design system. Create a small design sketch before even attacking any digital graphics to figure out just how you want things to look.

    This sketch goes by many names – prototype, wireframe, mockup, or even simply website sketch. Actually you’re taking a mental snapshot of the “bare-bones” architecture your layout will hold and drawing it out for a visual image. This will help during the early stages in figuring out content placement and how much room is needed for a site.

    Layouts at this stage shouldn’t require much detailed work. User experience isn’t going to sharply decline varying from a 2 to 3 column layout. A rough sketch or semi-formed idea is more than enough to get the ball rolling.

    Keep It Simple Stupid (KISS)

    This is a phrase shared amongst motivated entrepreneurs and holds especially true in creating websites. A website’s design is only as useful as how many users can figure out how to use it.

    Developing for simplicity greatly drops the chances for confusion amongst your site visitors. The modern web is full of Internet users with very little or no patience to wait around. They expect to fly through your site to find or do whatever it is they want.

    Sensitivity towards this issue may show a few prominent ideas. Expandable layouts for mobile and wide-screen users is always a big plus. You may also consider which page elements are the most necessary and see how different users interact with your pages. Analytics data can show a lot about a current website’s design – although this isn’t particularly helpful until after launch.

    Allow Room to Scale

    Websites which allow for fluid layouts are the most brilliant when speaking in terms of scalability. By “fluid” I mean defining a containing wrapper to hold a certain percentage of the page’s total space, regardless of monitor resolution.

    When CSS first started to grow in popularity this was how many layouts were built. Currently we still see designers using percents to manage spacing and page size, although min and max width properties have allowed for much richer customizations.

    This layout style works best without loads of graphics and fancy page techniques. You shouldn’t expect to create a blank white page with static text, either. But working to expand on the user experience means leaving white space for the site to breathe and expand comfortably.

    You may also consider using ems as a unit of measurement. Using this technique you can create elastic layouts which expand based on the size of your text and how it’s rendered in the current browser. When implemented correctly these layouts will be much more user friendly than plain percentages.

    There are plenty of resources online to read and further study up on different units of digital measurement. Pixels are of course the most commonly known amongst designers, but a pixel-perfect layout only renders well in situations which are tailored to those exact measurements.

    Not Everything Will Trace Perfection

    Unless you are willing to spend many sleepless nights up coding and testing for bugs week after week it’s highly unlikely you’ll develop the perfect website layout. Designers must adapt to changing trends and although the current web holds standards compliance in high regard, it’s not everything.

    The best way to build user-sensitive layouts is to play with tests and functions. Check out some ideas for other websites which scale naturally. CSS and HTML code is all frontend and all websites display this directly. Use this to your advantage to figure out what pieces will fit well into your layout puzzle.

    Odds are, though, that you’ll never find the perfect solution. This is probably because no such product exists. There will always be a few users running Internet Explorer 6 or browsing from an ancient Windows Mobile phone. Test and iterate layout fixes for the majority of visitors and you’ll kill off most, if not all of your major bugs.

    Layout design is truly an art in itself. The initial stage of creation is powerful and takes a lot of energy to work with. Once you’ve obtained a solid idea it takes a while to code it out and build a strong foundation on which to fit your website.

    One of the best ways to keep yourself in the know is by setting up a small contact or report page. Allowing your visitors to send you design suggestions or bug reports will help solve many problems without requiring a large amount of running around. Hold your users’ opinions to the highest caliber and you’re sure to implement scalable, UX-rich web layouts.

    Source:  SpeckyBoy Magazine

    24 Oct

    How to install wamp server and config virtual host

    By Huỳnh Kiên Trung

    How to install wamp server ? How to config virtual host on your local?

    1. Install wamp server:

    • Step 1:
    • After download complete, go to step 2
    • Step 2:
    • - Open file install wamp server from your download location and install it
    • - Choose your location you want to store wamp server ( I think keep default setting :D )

    • - Click next and next to continue and finish to complete install. ( should keep all default setting )
    • Step 3:
    • - When finish install, you’ll see icon of wamp on your taskbar like below image

    • - You can open wamp from Start -> All program -> Wamp Server -> start wamp server
    • - To test install working correctly, open your browser and type http://localhost/, if you see home page of wamp server, you installed success, else: return to step 1 :D Config virtual host
    • Step 1:
    • - Right click to icon wamp server on your taskbar, choose Apache -> click httpd.conf

    • - Enable mod rewrite and mod vhost
      #LoadModule rewrite_module modules/mod_rewrite.so
      replace to
      LoadModule rewrite_module modules/mod_rewrite.so
    • - Find
      #LoadModule vhost_alias_module modules/mod_vhost_alias.so
      replace to
      LoadModule vhost_alias_module modules/mod_vhost_alias.so
    • - Find
      #Include conf/extra/httpd-userdir.conf
      replace t
      Include conf/extra/httpd-userdir.conf
    • - Find
      #Include conf/extra/httpd-vhosts.conf
      replace t
      Include conf/extra/httpd-vhosts.conf
    • - Save all change
    • Step 2: Config path of virtual host
    • - Open folder store conf in <wamp location>\bin\apache\Apache2.2.11\conf\extra ( ex: C:\wamp\bin\apache\Apache2.2.11\conf\extra )
    • - Open file httpd-userdir.conf ( store website location )
    • - Add all line below to end of file
      <Directory "C:/Documents and Settings/*/My Documents/My Website">
      AllowOverride FileInfo AuthConfig Limit Indexes
      Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
      <Limit GET POST OPTIONS>
      Order allow,deny
      Allow from all
      </Limit>
      <LimitExcept GET POST OPTIONS>
      Order deny,allow
      Deny from all
      </LimitExcept>
      </Directory>
    • Change
    • <Directory "C:/Documents and Settings/*/My Documents/My Website"> to <Directory "your website location">
    • Ex: <Directory "D:\Trung\MyProjects\silverstripe">, if you have many website in folder MyProjects like me, you can config Directory is D:\Trung\MyProjects, it’ll apply config for all sub folders of MyProjects
    • Step 3:
    • - Open file httpd-vhosts.conf ( config name of virtual host )
    • - Ctrl+ A and remove all content
    • - Add this content to config your localhost
    • NameVirtualHost *:80
    • <VirtualHost *:80>
    • ServerAdmin webmaster@dummy-host.localhost
    • DocumentRoot "C:\wamp\www"
    • ServerName localhost
    • </VirtualHost>
    • -  If you not install wamp on C, you must change DocumentRoot to <your wamp>\www
    • - Next, to config your new local URL, just copy all lines from <VirtualHost >….</VirtualHost >
    • - Change DocumentRoot to your website location ( ex: DocumentRoot "D:\Trung\MyProjects\silverstripe" )
    • - Change ServerName to your website name ( ex:  ServerName silverstripe.dev)
    • Step 4:
    • - Open window host file ( can find in C:\Windows\System32\drivers\etc )
    • - Add your website name like this ( 127.0.0.1    silverstripe.dev )
    • - Right click icon wamp server on taskbar and click restart
    • - When wamp server done, you can open browser and run your website with new domain

    I hope this tutorial can help you install wamp server and config virtual host success :D

    11 Oct

    JavaScript Optimization

    By Vũ Trung Văn

    Some basic techniques to optimize your JavaScript. Even thought that the tutorials is quite old but it’s still useful even till today. Since JavaScript is used in most of the web pages.

    http://home.earthlink.net/~kendrasg/info/js_opt/