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. :)
Found this cool service which allows you to create cool colorful tag cloud from various sources …
deCode10 Tag Cloud Generated From Wordle.net
Create your own at http://www.wordle.net
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 … :)
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!
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.
If 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 …
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 Thomas, Dave Winer, Seth Godin, Brian Lam, Steve Rubel, John C. Dvorak, Leo 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.com, deli.cio.us, sphere, technorati blog finder, bloglines popular feeds, Ask.com blog search and most importantly Blog Search by Google.
Imagine days when we used to type documents on a typewriter, mail or fax hard copy of it, marking a CC and BCC to everyone in an actual carbon copy… all seems now a history except few places like court rooms still following the tradition … life has changed a lot since then, today information flows with the click of a button.
Compiled here some of the great collaboration tools I’ve come across which can really make office work easier and take the office collaboration to the next level.
Life Ray has everything you would need in an intranet environment, it lets you create communities around your office and then share knowledge streams across, which includes document sharing, blog, wiki, calendar, etc. You will have to download and install Life Ray into your own machine / server, but in case your are looking for something online and to kick start check out Google Apps and Social Wok, I love them both for its simplicity and no hassle online solution. Social Wok uses google’s free accounts to collaborate your documents and calendar, I loved the idea of getting instantly starting with it without downloading and installing anything … or even registering. Expect integration of Google Wave as well in social wok soon. There are other document sharing tools too, these are , OpenGoo,Google Docs and Stixy. Stixy is the new one in the list, it looks incredibly cool … but looks like this is for the houses who wants to keep their culture kicking, i.e., creative & alive … I like it for its name. Also check out Smartsheet, Central Desktop, and CreativePro Office.
Drop Box is also the document sharing tool, but with the twist… easiest when you need to sync docs between office and home or even with friends and family. It’s downloadable tools is fantastic and it seamlessly do the job without wasting your time on asking you to click on any button to sync your documents between 2 computers. Also check out drop.io, it has dead simple rich web-presentation functionality. no registration, no downloads, no installs. You can upload your presentation files (documents, pictures, video, audio, and more) and can give live demo or walkthrough in seconds … it has a free conference call line and rich chat functionality. Also check out Scribd a very popular social document sharing service.
When it comes to project management, I have tried several tools, Out of all I liked Clocking It, specially for the reason it is hosted and free, Active Collab which is downloadable with a fee but looks worth it if you want the environment in your own machine, BaseCamp by 37Signals is one of the leader in such service. There are several others, you may want to try them out, 5pm, clarizen, comindwork, projectoffice, planningforce, Less Time Spent, Klok, Collabtive, ProjectPier, dotproject, projectinsight, OnStage, deskaway, assembla, vcsonline, pmphq, nokahuna, liquidplanner, Thymer, TeamworkPM, Project360, Nozbe, Eclipse, Genius Project, Tenrox, Redmine, targetprocess and for some strange reason I loved Todoist too, maybe because its very simple. For agile project management methodologies, check out agilebuddy, which goes to extra mile for Creating, Estimating, Planning and Tracking your software projects, and Mingle, which looks extremely good (though i have not had enough time to explore its agile PM functionalities).
For simple time tracking, have a look at LiveTimer, fourteenDayz, and Klok.
If you need billing integrated, try Cashboard for billing and time tracking both, Simply Invoices which integrates with Basecamp, and easy to use Less Accounting.
I love 37Signals for its variety and its clean interfaces. Also check out ZohoOffice, who gives variety on online collaboration tools.
For those who use wireframing technique in their project management, iplotz has it all, from wireframing to project management to collaboration. In the similar genre, you also have mindmeister, excellent for those who love pencils instead of keyboards.
For sharing presentations, you may want to look at slideshare, DimDim, and Vyew.
Twitter addict offices should try out yammer, exact replica of twitter for offices and much more.
If you have a team of developers looking to merge their codes remotely, check out SpringLoops and workspace.
A smallest organizer in our life is our to do lists … there are many tools available for this, to name few, TaDa Lists, Remember the milk, which uses Google Gears to store your data offline,
Also check out Campfire which is an instant messaging solution for the teams working remotely.
If you are looking for a bug tracking software, check out flyspray, webissues, eTraxis, Bugzilla, Trac, Mantis Bug Tracker, BugNET, The Bug Genie, Issue Tracker By ASP.NET, 16bugs, JIRA(looks cool), FogBugs and Eventum built by the MySQL team. Also check out something very unique .. i.e., Notable, it helps your team collaborate through visual feedback on screenshots.
Apart from these I have also stumbled upon github, it is worth checking … it is a fast, efficient, distributed version control system ideal for the collaborative development of software.
Also check out AroundMe, an open source collaboration server which helps you create multiple collaborative group, webspace, community or social networking websites.
Hope this helps, pls add if you have come across something interesting in the same genre in the comment area!
HTML5 Canvas Experiment
Stumbled upon this awesome HTML5 Experiment, built on an opensource processing.js.
p.s .. keep your speakers on .. I loved the music.
p.p.s. geeks can check some books on processing.
