Skip to content

A Comprehensive CSS Development Guide For Beginners & Experts

January 18, 2010

I have been lately exploring CSS & JavaScript techniques which can add value to the frontend development, I have compiled a decent kick-start-list for the CSS techniques which are must know for frontend developers.

Before we begin, I would like to bring CSS Zen Garden to everyone’s notice, it is a very popular site for CSS developers, but, yet … only half of the people know that this site is a reference point of the capabilities CSS has, that is, here people go and upload their sample website built with CSS, which gives a ready reckoner for other to go and see a showcase of CSS capabilities and also quickly adopt a CSS closest to their requirement. Other than that, CssGlobe and scriptandstyle are great resource for latest news / tips & tricks article published in multiple of the places, and this place has some PSD to XHTML tutorial video’s. Codecake and noupe article talks about some advance topics such as classes, cross browser tags, image replacement, mobile style sheets, CSS Overflow, fluid grids etc, and this talks about some SEO Tips for CSS developers. Also check out WebDesignerDepot and Smashing Magazine, they both churn out some CSS tips occasionally.

Cutting short on all the jargon; here is the quickest list of tutorials, libraries I found on the net which can work as a one stop reference point for CSS developers;

To start with, here is a quick guide to do some most common things in CSS… and here is the quickest CSS code for most common layout types. CSS Sandbox is a good place if you are a beginner, it shows a comprehensive list of text styling properties and combination upfront to try it out and download. Also, if you prefer to code from scratch, this, this, this and this seems like good articles to clear your basics. Here are some very basic guidelines for writing a decent CSS code. I like this article for some expert advices on CSS Shorthand Techniques.

When it comes to stylizing forms, this seems like a good article. Also, check this as an alternative source and this article with JavaScript styles.

If you are working with lists, check this link, it looks like a good comprehensive list of lists CSS examples.

Check this nice ready to use classes for the Comment section of your blog or website, and a ready to use Message Box CSS.

Spiffy Corner gives you a wizard to quick build your corner box CSS.

For those who are looking for Facebook like image tagging, this is a nice elaborated article from ccplay.co.uk. Also check this alternative tutorial.

For animated progress bar via CSS, download ready to use code here.

CSS Menu Maker is a good place to kickstart your CSS Navigation Menu’s, also check this simplest example for pure CSS menus.

This article demonstrates 9 techniques for CSS image replacement, and gives a report card too for the browser support.

This small code snippet demonstrates how to do image rollover on mouse over without using JavaScript. And here is one advance post on the CSS technique used, i.e., CSS Sprites.

You may want to grab this code for showing file extension icons.

Font Tester is a must check for every CSS lover, it’s a simplistic tool for generating your font style CSS code without coding it. I loved the character map here, but would have loved it more if we could upload our fonts for it to generate image replacement codes for sIFR or EOT files for it. Never mind, you can use sIFR Generator to do the same. Also check out image caption class out here.

And if you are working with CSS Tabs, check this good reference point .

For Shadows, check this ready to use examples & codes.

This place gives whole list of cursors you can use with CSS.

Here is a place where you can learn how to create graphs using CSS.

If you are looking for CSS Bubble Tool Tip, grab it here, and here.

And I like this RSS Coloring Technique as well .. its kinda cool.

And, if you are thinking of customizing your wordpress theme, this seems like a good kick start guide.

Above all, don’t forget to Validate Your CSS. And if you are not using Dreamweaver, grab your copy of this free software which will help you code CSS in a better way.

And finally check out what others are doing at bestwebgallery.

Sigh, I need to breathe, enough of this-this-this kinda list … guess my this post was breathless, but hope it’s useful. :)

wordle.net – create colorful tag cloud for your blog

January 13, 2010

Found this cool service which allows you to create cool colorful tag cloud from various sources …

deCode10 Tag Cloud Generated From Wordle.net

deCode10 Tag Cloud Generated From Wordle.net

Create your own at http://www.wordle.net

Hot Searches : A list of web sites providing Hottest Trends

January 11, 2010

So what we should do to find the latest trends?

We’ve probably heard of them before, from AOL, to Digg, to Reddit, to Many More. I am keeping this post short (promise!) to spur some inquisitive bugs in you to find the latest, the quickest.

Before we start, there are two things you can think of while searching hot trends, first, search for the trends you know already, and find their weight/popularity, second is to know what you don’t know that you know, for that we browse through couple of websites, most of the sites below will assist you in both ways.

So here comes a rapid list; Alexa URL Rank Search / Compare, and Alexa Hot URL Search are from a popular service Alexa, Microsoft’s bing has bing’s celebrity xrank which gives search ranking on celebrities, Twitter Trend Search, and twitter based Trendistic gives twitter trends and graphical representation of the same, Facebook Lexicon, analyze the facebook user’s wall posts to digg current Facebook trends, and there are others from AOL to Google to Digg to Yahoo… these are AOL Hot Search, Google Hot Trends, digg trends, Yahoo Buzz Hot Trendz. Also check out Hit Wiss Data Center, which give data on general & industry specific internet usage.

That’s it for now! Since I promised to keep it short I kept it short, hope this was short but useful … :)

Comprehensive List of JavaScript Libraries

January 5, 2010

Couple of years ago when Ajax made a big noise, these JavaScript libraries came into the existence, or it may be other way round, that because of these JavaScript libraries AJAX made  noise .. both are possible, but one thing is for sure that because of these libraries, we today have a massive list of useful websites & web based services which add onto the growth of our personal & entrepreneur spirits.

Though the javascript libraries have advanced to next level of graphics with HTML5/SVG coming into the picture, (covered earlier, there are new SVG / Canvas / HTML5 based graphical libraries catching up such as processing.js), but there seems plenty time for it to be a regular thing on web as they are not supported by older browsers and there is time for HTML5 to launch (not until 2012). So, compiled here a list of our must check JavaScript libraries which have been in trend from quite some time for a ready reference.

To start with, I became a huge fan of ptototype.js couple of years ago when I first checked it out (perhaps 2007), why I love it is because I am a coder, parallel framework was Script.aculo.us, it looked good too. Lately, Yahoo UI also has created lots of buzz.

But those extensively working with frontend development and are looking to add just the appealing frontend techniques do not have to code much, they can look for mootools & jquery, which are highly popular for their library of frontend widgets.

Dojo Tool Kit, offers both, coding level libraries and ready to use widgets.

In the similar genre, check out light weight AJS built on mochikit,

There something recently has caught my attention and that is OAT Framework, it has nice Tabular Grids / Pivot Table / Tree Control / Timeline / SVG Based RDF Graph, to such extent that I am fully impressed being a database guy.

Qooxdoo has some nice ready to use examples including twitter and HTML Editor.

If you are building complex dashboard like applications, recommend you check out extjs (paid).

Rico, has nice weather widget which you may want to check it out.

cross-browser has some nice cross browser animation examples, for more visual effects check out Script.aculo.us, MooFX, Bytefx, Prototype Windows, Lightbox, Lytebox, Leightbox, GreyBox, Behaviour, Curvy Corners, Nifty Corners, jsScrolling

For graph charts etc., recommend you to check out google graphs, Plotkit, Plotr, EJSChart, TimePlot, Ajax-MGraph

There are plenty other in the list, most of them are pretty much the same … These are picked up from JavaScript libraries, seems like a good referral point for JavaScript enthusiasts.

These are the frameworks which built for comprehensive AJAX developments from scratch Bajax, SACK, Plex, Taconite, Sajax, jx, libXmlRequest, Spry (Adobe),  fork (for ruby on rails)

For your cryptography / mathematical requirements, look for Sylvester, JavaScrypt, MD5, RSA

Also check out some other tools for your development / optimization, JSlibs, DOJO shrinksafe – compression, JSmin – compression, JS flash version detector, Open JSAN, MiniAJAX, Google trends of the major players, Smooth Gallery, Slideshow, Flickrshow

Some tools for specific requirements XML.ObjTree XML parser, jsvalidate, Form validation, Store json data in cookies, Livepipe Tabs, BSN AutoSuggest, BarelyFitz Tabs, overLIB Tooltips, Kryogenix Sortable tables, FD Sortable tables, JDV Sortable tables, TableKit

Hope this will help us build the next generation apps for the generation now and generation ahead!

Creative Coding With OpenFrameworks.cc

December 29, 2009

OpenFramework - The Creative Coding ... Openframeworks is a c++ library designed to assist the creative process by providing a simple and intuitive framework for experimentation.

The library is designed to work as a general purpose glue, and wraps together several commonly used libraries under a tidy interface: openGL for graphics, rtAudio for audio input and output, freeType for fonts,freeImage for image input and output, quicktime for video playing and sequence grabbing.

The code is written to be both cross platform (PC, Mac, Linux, iPhone) and cross compiler. The API is designed to be minimal and easy to grasp. There are very few classes, and inside of those classes, there are very few functions. The code has been implemented so that within the classes there are minimal cross-referening, making it quite easy to rip out and reuse, if you need, or to extend.

Arduino.cc – A Geek's Play Thing!

December 29, 2009

ArduinoIf you are a true geek you may want to check Arduino out … It is an open-source electronics prototyping platform based on flexible, easy-to-use hardware and software. It’s intended for artists, designers, hobbyists, and anyone interested in creating interactive objects or environments.

Arduino can sense the environment by receiving input from a variety of sensors and can affect its surroundings by controlling lights, motors, and other actuators. The microcontroller on the board is programmed using the Arduino programming language(based on Wiring) and the Arduino development environment (based on Processing). Arduino projects can be stand-alone or they can communicate with software on running on a computer (e.g. Flash, Processing, MaxMSP).

Visit Arduino!

The list of successful bloggers & interesting blogs – Focus: Tech, Design & Web Trends …

December 23, 2009

This is a revised version of my earlier post ‘Internet Heroes!’  I have transformed it to compilation of my favourite tech centric bloggers, sources and news sites which can help us gain information related to technology trends.  Though If I do it all it would be a massive list to compile, I am starting small and will keep adding to through a series of post … best way to keep a watch on subsequent posts to come is to subscribe through RSS or through email. (for those who are new to RSS, must check beginner’s guide to essential web technologies.)

“Legends are legends … they inspire us, set trends, break barriers, redefine rules, change the dimensions in which we live, give us new hopes & aspirations and much more …”

Sharing here the list of bloggers / & blogs I find interesting to follow …

Blogs For Designers …

If you are a frontend developer or a designer, you would be in absolutely in love with Smashing Magazine and Web Designer Depot, they often come up with very interesting compilations useful for frontend developers and CSS techniques and designer’s compilations. These are my personal favourites. Another interesting one which seems to be focusing on tutorial compilation for designers is hongkiat.com, very interesting compilation of tutorials and topics. And another very interesting blog I have come across in this genre is Carsonified’s Think Vitamin.

Blogs For Businesses & Technoworkers

Read Write Web is a must follow legendary blog for the tech resources and news. It is a professionally managed blog named after the changing trends of Web 2.o‘s one of the main theme reading, writing and re-writing, keeps track of the changes happening around web tools and services.

Social networking is the buzz …and has taken trends to the next big level with twitter like platforms, one entity who built a platfom to keep a watch on such trends is Mashable, started by Pete Cashmore when he was 19 to make him an Internet Celebrity.

Techcrunch reviews tech companies, startups, profiles etc. This helps you find a right tech company where you can outsource, invest, connect … and have a profitable life afterwords… Started by Michael Arrington, his reviews are highly influential, so much that people feel disrespected or ignored when he fail to give them importance.

Guy Kawasaki, is the most influential guy on twitter, and has a high visibility among tech start ups due to him being a venture capitalist and author. He was part of the original team when Apple launched its first Macintosh in 1984. He has recently introduced a new news engine called AllTop.

Boing Boing, founded by Cory Doctorow and Mark Frauenfelder, is a very popular blog about technology, culture and politics. Cory Doctorow is an activist for digital rights, and also a science fiction novelist who gives away his novels for free. Frauenfelder is editor-in-chief for an extremely highly popular do-it-yourself magazine called Make, and every geek just loves this magazine.

Another tech blog focusing on tech news which is highly popular is GigaOm.com, owned by tech journalist Om Malik, who writes for Business 2.0, Red Herring, and The Wall Street Journal.

Also check out other tech bloggers Jason Calacanis who owns Mahalo.com a human moderated search engine, andRobert Scoble who mostly blog about tech events. Other powerful bloggers worth checking in tech domain are, Owen ThomasDave WinerSeth GodinBrian LamSteve RubelJohn C. DvorakLeo Laporte.

Build Your Own List of Blogs to follow …

To build your own list of blogs you must know services like digg, reddit.com, stumbleupon.comdeli.cio.us, sphere, technorati blog finder, bloglines popular feedsAsk.com blog search and most importantly Blog Search by Google.

Follow

Get every new post delivered to your Inbox.