Author Archives: Frontend Insights

Improve the Feng Shui of CSS Files

Procssor

http://procssor.com/

Clean code is happy code.  There is something serene about opening up a file to edit and having everything laid out nicely with consistant spacing, bracketing, grouping styles and comments. Today I happened across a nice little generator that cleans up your css files for you.  Procssor will take CSS input and apply specified options in generating a visually appealing, consistent block of CSS output.

Processor boasts multiple methods of CSS input including: Direct Input, URL and File upload.

The options panel provides image tool tips of CSS code on hover giving the end user a little visual hint at how the CSS will be handled.   There are a couple of really good options available for formatting including alphabetizing your properties and columnizing your code.

The result is a consistent and nicely styled CSS file available to copy and paste or download as a file.

Turn Tabular Data into Tubular Data with jQuery

Flexigrid

http://flexigrid.info/

The table tag in HTML has a bit of a sordid past.  Once tasked with laying out websites the table tag has been dragged through an identity crisis.  As the sun set on web 1.0 – the over reaction was to remove all instances of tables.  But I would argue that tables have their place.  The fact of the matter is that tables are good for displaying tabular data – that was their intended purpose.

Flexigrid is making it even easier to feel comfortable with the table tag again.   Flixigrid is a jQuery plugin that, in its most basic example, converts an HTML table into an interactive spreadsheet in the browser with expandable columns, alternating row treatments and a resizable frame.   It takes the table tag with all of the trs and tds therein and converts them into divs – so if you are still on the fence about using tables, you can feel good about the fact that this plugin only uses it only to read the data and removes it from the DOM.

Flexigrid AdvancedWhat I like about Flixigrid is the breadth of usage.  As mentioned above Flixigrid in its simplest form is easy to implement.  However the very same plugin can blow the lid off the tabular data with  by offering the ability to display paginated rows with a pagination toolbar pulling from an XML feed via JSON.

If tabular data is on the menu in the feast of HTML you are serving up than there is no doubt that Flixigrid is sure to enhance your user’s experience.

5 jQuery Resources for Select Tags in HTML

The select tag in HTML has been getting a lot of over-due code love.    Perhaps all of this attention comes from being a vital tag used in so many forms but natively lacks flexibility and consistency across browsers.   Whatever the reason – there are now a myriad of tools available to help make select boxes work and look the way you want them to.  Here are a few resources that stand out from the crowd when it comes to working with those select tags.

jQuery UI Selectmenu

jQuery UI Selectmenu

http://jquerystyle.com/2009/08/24/jquery-ui-selectmenu

Built on jQuery UI this plugin converts your select elements into pure eye candy.  jQuery U Selectmenu DemoThe select tags are replaced in the DOM with more cross browser friendly tags and the result is theme based elements for your forms which provide the basic operations of a select tag as well as icon inclusion, multi-line support, max-height (with scrollbar thereafter), and the option to drop down or pop up as well as optgroups.

Key presses are partially supported.  Tab and escape Key work.  Up and down arrow keys do not.  You can download selectmenu from github.

jQuery SelectBox Plugin

jQuery Select Box

http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

The jQuery SelectBox Plugin offers a solid base with lots of native support.    As the name suggests this plugin is specific to the select boxes.   jQuery Select Box DemoThis plugin also replicates the select object in the DOM with alternative tags which open the doors to greater styling and consistency across browsers.  A few of the key strengths about this plugin are the key press supports including esc, tab and arrow keys.

The plugin comes with one default look and feel.  There is no theme selection.  Customization would require the modification of the included CSS file.

 JavaScript Image Combobox

jQuery Image Dropdown

http://www.marghoobsuleman.com/jquery-image-dropdown

The JavaScript Image Combobox is a slick plugin that easily adds icon support to dropdowns menus while maintaining a lot of the native functionality that select tags bring to the browser window.   jquery-image-dropdown-demoThis jQuery plugin works by parsing the select box tag and, once again, replacing the objects in the DOM with tags that more more flexible and consistent.

There are no themes provided other than the default, but the CSS is readily available for custom styling.   You can download this plugin from gtihub.

 Dropkick.js

dropkick.js

http://jamielottering.github.com/DropKick/

We featured dropkick.js on July 6 in our post Kick Your Dropdowns Up a Notch with ‘DropKick’.  As we are reviewing the best options out there for managing select tags we would be remiss if we failed to include dropkick.js. As with the other plugins dropkick replaces the select tag with more flexible code and provides a themed approach for excellent out of the box support.

 Chosen

Chosen

http://harvesthq.github.com/chosen/

Chosen is another plugin we featured recently and feel it should be listed here as we cover the general scope of tools available to work with select tags.   The feature that stands out about Chosen is the way it handles the multi-select drop downs.  The result is a smooth system that feels more like an ajax controlled tagging system.  It really brings the intuitiveness that a default multi-select box lacks.

Get a Closer Look with jqZoom – a jQuery Plugin

Want to show off all the detail of a large picture without taking up the entire browser? The jqZoom plugin allows users to easily explore large photos in a controlled area.

jQuery Zoom

http://www.mind-projects.it/projects/jqzoom/

The user interface it generates is smooth and intuitive.  As one might expect – the plugin requires that you supply both the scaled down and large versions of the picture.

jqZoom comes with some great features and extras.  There are several zoom styles you can choose from which control how the zoom box looks and acts on the picture.   In addition you can create a gallery view with multiple pictures.

With the zoom capabilities you are able to share more information about specific pictures that the pictures themselves, because of their size, would not have allowed.

The applications in which this plugin can be used are numerous and the elegant way in which it handles the pictures will bring a touch of style with the additional functionality.

Increase Usability and Likability of Select Tags

Chosen

http://harvesthq.github.com/chosen/

Chosen is a sweet little JavaScript plugin that converts your select boxes into a rich user experience. 

One of the coolest features of Chosen is the way it converts multiple selects into an intuitive and auto-completing element which mimics the tagging functionality that users have become increasingly comfortable with.

Just as we discussed about dropkick.js – Chosen replaces the actual SELECT and OPTION tags from the DOM and replicates the functionality with DIVs and ULs.  The result is beautifully styled method for handling selects of all types which are cross browser compatible.

  • Chosen is available for multiple libraries including jQuery, prototype.
  • Available for forking on GitHub – Notable forks being Chosen for MooTools and Chosen Dripal7 Module.
  • The way the multiple select boxes are handled is really slick.
  • Incorporation is easy – so easy in fact that the third step is “Disco” with a link to the Pulp Fiction’s Preacher Man Scene on You Tube.   Gotta love it.

CSS3 support in IE 6-8

http://css3pie.com/

The future is bright and full of endless possibilities.  Some day the world wide web will be awash in beautiful and compliant CSS3.   Developers everywhere will be forgetting how to make rounded corners with images and cutting 1 pixel wide gradient backgrounds. But that is the future.  Today many of us are still stuck supporting IE.  If your work targets Asia than chances are good you are even supporting IE6.  Backwards support for IE will be upon us long into the days of CSS3 friendly IE9.

For the most part CSS3 effects are simply cosmetic niceties that are not vital to the functionality of a site.  I have seen, for the most part, a general attitude of not providing CSS3 effectual support to browsers that do not support it.   It has been treated more as a reward to those technically savvy folks who updated their browser.

Screen Shot of CSS3 Effects in IE6

Enter CSS3 PIE.  The site that is trying to provide a more “Progressive Internet Explorer”.   CSS3 PIE has decided to fight the unpopular fight of taking CSS3 support back into dark abyss of previous IE versions.   Even IE 6 – which is no longer supported by Microsoft – can display fancy CSS3 code.  The screen shot on the right was taken using IE6.

CSS3PIE is helping to bring a little style and class back to the browsing experience.  It’s easy to use and initially looks promising.

 

Avert Image Blockers – Convert your Images into HTML

http://www.imgtocss.com/

Email clients, like Outlook, unapologetically treat all images the same. After years of scams, viruses and malware injections email clients have largely put image display second to security by default. Wouldn’t it be great if you could easily embed an image of high importance right in the code – and display an image without an image file? With Img to CSS you can convert your images into straight HTML and place the code in the email.
Img to CSS is a basic site with a single purpose – to easily convert images into HTML.

How does it work?

In Dream Weaver

The HTML in Dreamweaver's Design view

The HTML code that is generated consists of a single table tag with several tiny cells.  Each cell has a background color and act as pixels in displaying the image.   For very complex images you can almost expect one cell for every single pixel in the image.

The obvious down side to converting your image into a huge table is the amount of HTML code needed.   In the example above the .jpg file on the left is only 5kb while the HTML code required to create the same image amounts to 125kb!   The converter does try to manage ballooning code by merging neighboring like colored cells – thereby reducing the code somewhat.   But the ballooning code is the bottleneck here.

And, as with all code, the environment into which it is placed can greatly effect the code display.   It is possible that pre-existing CSS could destroy the image.  Case-in-point: I had to override some theme CSS in this very post to get the above image to display correctly.

The Value is in the Emails

The strength of Img to CSS is the ability to convert your image into something that is not an image for email delivery.   With a tool like this you could easily convert a company logo or icons into HTML and email along with full confidence that they will arrive intact.  Obviously you are going to want to stick with small images and icons as the code size will balloon exponentially relative to the dimensions of the image.

Img to CSS offers 3 free conversions to try out their package.   Conversions are $.50 each thereafter.  They also offer a monthly subscription ($30) for unlimited conversions.  In addition they offer an API for developers to plugin to their service.

 

A Grid System for CSS that’s Simple and Light

Grid CSS

http://brajeshwar.com/2011/grid-a-minimal-css-grid-utility/

If you are looking for a lightweight and simple CSS Grid system than Grid – a minimal CSS Grid Utility‘ might be a useful option for you.   Grid is a small collection of classes that conveniently floats elements with an appropriate amount of width.   In addition to being incredibly light and straightforward the Grid works well in a fluid layout.

Fluid Grid

Fluid Layout of the Demo

To see the fluid-ness in action on their demo you will have to change the body tag width from 960px; to 100%.   This can be done easily be done using the FireBug extension in Firefox.

Grid Fluid Brick Wall

Grid Fluid Brick Wall

The strength of the utility is the simplicity and no learning curve.  After reading the through the CSS code once I was able to generate a fluid brick wall in about 45 seconds.

The basis of developing the columns comes from applying a class “gXofY” – Where X is how many to take up and Y is the total number.   So if there are two equal columns you want apply the class of “g1of2″ to both.

This Grid system, out of the box, is limited to a maximum of 5 columns.  If you you require additional columns for your project you can easily add more as you simply need to do the math to come up with each class.   For instance  g1of9 would be width: 11.111111 %.

The only other issue I had when creating my brick wall example was that there was no ’2of4′ class.  Knowing I want the block to be 50%  I simply applied the 1of2 – but now that row contains the following columns in this order: 1of4, 1of2, 1of4.  In dealing with the row I would rather it could have read 1of4, 2of4, 1of4.   In addition there is no 1of1 class (100% width).   But as mentioned before this is a good starting block for setting up a simple Grid system that works for you.

Grid is a simple and useful utility authored by Brajeshwar that will aide in the rapid development of simple CSS layouts.

 

3 Great Resources for Planning and Discovering Your Next Interactive Project

The planning and discovery phase of project development lights the path to a successful launch.  It is the process through which foundational decisions are made and the project begins to take shape, if in no other way, than by pencil and paper.  Luckily pencil and paper have gone the way of scan-trons and now we can use programs to plan programs.

Here are 3 great resources, all completely free, to aid you as you plan out your next project.

IA – Wire Framing

There are a plethora of wire framing tools available out there.  One good option from this list is Lumzy.  Lumzy is a completely free flash-based application used to generate wireframes and prototypes.

Lumzy

http://lumzy.com/

Lumzy has all of the basic features you would expect to have including:

  • Exporting and sharing
  • Strong visual design stage with drag-and-drop, z-index control and multiple select.
  • A decent library of content elements categorized for easy finding

The thing I really like about Lumzy is the Theming option.  Once you have placed all of your content elements on the stage as you would like you can theme the wire frames including

  • Hand drawn  
  • Macintosh
  • PC

Once a theme is selected all elements that would normally be styled by the browser (input fields, buttons, browser windows) take the visual representation of the theme selected.

Color Palette

Ever wondered what a good complementary color would be for the color olive?  Enter the Color Scheme Designer.

Color Scheme Designer

http://colorschemedesigner.com/

This site takes color and makes matching colors as simple as math.   It couldn’t be easier or more intuitive.  This web-based color matching tool makes finding a palette easy and, dare I say, fun!    Start with a hexadecimal color value as your base and start tooling around on the site.

This site brings a lot of great features to the table including:

  • The ability to save and export in multiple formats including HTML and CSS or  even a Photoshop palette file!
  • Light and dark ‘page previews’
  • Hue, saturation and contrast customization

 

Lorem Ipsum – Mock up content

Generating dummy HTML content for mock-ups can be a tedious process.  Up until yesterday it involved going to a Lorem Ipsum generator site and manually placing it into HTML tags.

Blind Text Generator

http://www.blindtextgenerator.com/snippets

I am exhilarated to report that is no longer the case. Featured this month in webdsignerdepot.com’s What’s new for web designers article is a great looking lorem ipsum generator called Blind Text Generator – snippets.  This site is slick with its drag and drop capabilities and click to copy.  With the pre-built HTML elements and the ability to build out a custom page by dragging into the ‘kitchen sink’ is so simple and so smart.

There are a couple of ways I can see this site improving including more HTML elements such as ‘div’ and allowing the end user to add their own elements for specific-common use.  That aside the mock-up code will definitely get you going down the right road and make generating mock up faster and easier.

 

Put your Code in a Test Tube and Collaborate

JSFiddle

http://jsfiddle.net/

JSFiddle is more than just a sandbox for front end coders.  With JSFiddle any coder can easily segment out JavaScript, HTML and CSS into a customized environment which can be run, saved and shared – paving the way for collaboration.

The JSFiddle environment can be loaded with one of 11 different libraries with support for different versions of each.  For example in jQuery you can load version edge, 1.2.6, 1.3.2, 1.4.4, 1.5.2, 1.6.1 or 1.6.2.   For each version of jQuery you have the option of also loading the corresponding version of jQuery UI  and jQuery Lint if available.  In addition additional resources can be added to the environment using the Manage Resources section on the left.

JSFiddle Tweets Example

JSFiddle can Also Account for Ajax and Custom Plugins via the Additional Resource Management.

The true power of JSFiddle is the ability to put code into an all inclusive collaborative environment.  A lot of front end developers have used JSFiddle to troubleshoot their code, give examples of how code should be used and create simple proof of concepts.  JSFiddle is a favorite of front end developers for sharing the code relating to their questions and answers on code discussion sites like Stack Overflow.

With the consistent support of ever changing libraries and the ability to quickly and easily share an environment JSFiddle is a great resource for any front end developer.