Carrer Blog

Hand Drawn UI Kit

2012-02-01T12:24:00.001+01:00

I'm fan of Matt Gentile work with various UI Photoshop Kit specially I liked the Modern UI Kit and with Matt permission I decided to Rebound on Dribbble. I took all the elements from the Modern UI Kit and I made Hand Drawn UI Kit for Photoshop. Every element is hand drawn raster layer in Photoshop. I used Bamboo wacom tablets for designing the elements.

Here is the Kit:

You can download Hand Drawn UI Kit .PSD file here ..

I hope you will find this Kit useful.

Some useful scripts for Photoshop Layer Manipulation

2012-01-24T13:13:00.001+01:00

Last mounth I published Hand Drawn Icons it is set of 282 icons made in Photoshop. If you ever worked with large set of layers in Photoshop you will know how difficult is to mange and organize all this layers. I what to share some of scripts that help me perform different tasks in Photoshop. Many designers ignore the possibility of scripting inside Photoshop with languages like JavaScript, but in many cases using scripts in Photoshop can be time and "energy" saving.

The script that in my case was most useful was Export Layers to Files.jsx (that is included into Photoshop) this script saves all separated layers into files. In my case it took Photoshop about 8 hours to complete the task and save all the 280 icons. It is a slow process but you don't have to manually save all 280 files.

Number of Layers. Other useful script was layers count or how many layers (in my case icons) you have. Only condition for this script is you need to ungroup all the groups(folders) in Photoshop.

Save all layer names into one long list. Why is that necessary? Because in that why I can easily find out missed-spelled layer names by simple copy-paste the list into some text editor like TextEdit (Mac) or Word (Win) that will automatically selects all missed-spelled words.

Search duplicate names. When you are making similar icons or other stuff it comes natural to give same name to icons that perform the same function. But layers with the same name are not welcomed in the final version so "there can be only one" file with the same name.

Order Layers Alphabetically A - Z

Note: All the Layers need to be ungrouped before you excite some of the scripts.

How to install this scripts

Download and copy the scripts inside Photoshop > Presets > Scripts [Folder]

Then you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

You may also find my previous Photoshop scripts useful:

- Make Photoshop Guides Grid with JavaScript

- Draw Shapes in Photoshop with JavaScript

2011 summary report

2011-12-30T04:09:00.002+01:00

If I need to define my professional 2011 in two words I would say: JavaScript and Design.

I did some deep dive into JavaScript this year. JavaScript is everywhere. It is cross-platform and cross-program language you can use JavaScript for making scripts inside Windows or using it inside Photoshop or to make server side code with Node.js.
But my main effort was to make JavaScript Framework for building mobile web apps that I hadn't time to publish it this year. Hopefully at the beginning of 2012.

Here are some JavaScript articles and projects from this year:

Design - Like a programmer I always was afraid to "touch" anything related to design. I even convinced myself that I'm not good for that. Today I believe there is not such thing as "you are no good for that", you need to believe in yourself and practice. Photoshop become my best friend I build Photoshop Wireframing Kit , Hand Drawn Icons and I'm currently working on my second pictograms icon set and I'm making some Posters. I spoke about Layout, Typography, Gestalt and the future of ebooks.

CSS - To my collection of CSS Frameworks I added Foxy - CSS Framework and Child Selector System - CSS Framework

HTML - HTML Lorem Ipsum Crash Test

I wanted to do this year, but I didn't. I made four new CSS Framework but I didn't have time to prepare the documentation. I wanted to update The Golden Grid, Malo and Hartija. Two new mobile JavaScript Frameworks. My research on Uni Computer Grid System. About 10 apps for iPhone and iPad and list goes on … The good thing is the code is 85% ready in most cases. So I hope to finish some projects in early 2012.

Plans for 2012. Beside finishing all project from 2011 I wanted to try to make one mobile app (iPhone,Android) per month. 12 mounts 12 apps. That is my big challenge for 2012. But for now I will enjoy my Holidays :)

Happy Holidays Everyone

Hand Drawn Icons

2011-12-12T02:51:00.007+01:00

After few mounts of hard work I'm happy to present my latest project Hand Drawn Icons.
The icon set contains 282 designed icons in 32 x 32 px .png and photoshop .psd (layers) format. All icons are designed in Photoshop with help of Bamboo Drawing Tablet and the raster format is used for preserving the icons authenticity.

Here is how the icons look like:

Currently for the launch until the end of this year this set is available for half price at $ 9.5

I hope you like this icon set

www.handdrawnicons.com

Also some hand designed Christmas Icons are available for free.

Make Photoshop Guides Grid with JavaScript

2011-11-03T05:28:00.001+01:00

Last week I published "Draw Shapes in Photoshop with JavaScript" and I had lot of fun scripting in Photoshop. If you ever made Grid of Guides in Photoshop you know how painful and time costuming it is. I made two scripts that can help you speed up the process of making Guides Grid in Photoshop.

The first script makes Unit Grid with vertical and horizontal units, you can also set the gutter. Example if you want to set 80px grid system with 20px gutter size. You can do MakeGuidesGrid(80,20,80,20); this will set the vertical and horizontal gutters, naturally you can set just vertical guides MakeGuidesGrid(80,20,0,0);

The Script on GitHub
Direct Download of this script

The second script doesn't use units but number of guides. So you can set number of vertical and horizontal guides and the gutter. Lets say you need 12 vertical guides and 10 horizontal guides with gutter of 15px. The function is MakeGuidesGrid(12,15,10,15);

The Script on GitHub
Direct Download of this script

How to use this script.

Download and copy the scripts GuidesUnitGrid.js and NumberGuidesGrid.js inside Photoshop > Presets > Scripts [Folder]

Then you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

Dialog box will popup asking the info about the unit size or number of guides or gutter size you need to put just the your numbers inside. And that is it.

Works only in Photoshop CS5 and later. Make sure that the guides are checked View > Show > Guides. To delete the Guides you do View > Clear Guides .

If you have any questions let me know in the comments.

Draw Shapes in Photoshop with JavaScript

2011-10-24T01:14:00.000+02:00

I was working on the Photoshop Wireframing Kit update and I wanted to optimize the drawing of some photoshop vector shapes. Few designers know that JavaScript, VBS and AppleScript can be used to optimize the Photoshop workflow. The cool thing about JavaScript in Photoshop is that will run on both PC and MAC.

I was googling and searching for solution for my scripting problem when I stumbled upon this forum post (look for Mike Hale answer) http://www.ps-scripts.com/bb/viewtopic.php?f=14&t=1802&start=15 . I did some small changes in the code - making it function that will accept multiple parameters (coordinates). All the credits for this code goes to Mike Hale he is the author of the code.

What this script does?

Basically what this script does is draws pixel precise shapes in Photoshop with the help of JavaScript.

You need to put Photoshop coordinates in clockwise order and Photoshop will draw the shape.

Example of Square:

// [X,Y], [X,Y] coordinates in clockwise order

DrawShape([100, 100], [100, 200], [200, 200], [200, 100]); // Square

DrawShape([512, 128], [600, 256], [684, 320], [600, 386], [686, 514], [512, 450],[340,512],[428,386],[340,320],[428,256]); // Star

Result in Photoshop:

You can also set the background color inside the script.

The script:

Gist on GitHub

Direct Download

For installing this script you need to download DrawShape.js script copy the script inside Photoshop > Presets > Scripts - Folder

For running this script you need to go to open Photoshop and than File > Scripts > Browse find the script (where you previously copied it) and click Open.

Change the coordinates inside DrawShape(); to personalize the script.

I only did some tests in Photoshop CS5 but should probably run in some previous versions.

Any comments?

Initiative - provide JSON and JSONP RSS Feeds

2011-10-10T04:33:00.002+02:00

JSON has won against XML. Because is lighter and simpler.

Many web services are giving priority to JSON over XML. But the all the blogs are still stuck with XML RSS.

So why give JSON and JSONP RSS support?

- JSON is Fat-Free Alternative to XML (save some bandwidth).
- JSON has been chosen like primary format in almost all major public web services.
- JSONP is easiest and fastest way to directly connect the browser with the web service.
- Growing need of building native web apps who can connect directly with the data source.
.. and probably many other reasons.

This initiative comes from my personal frustration … every time I want to build some web app who needs to talk with RSS and JavaScript I need to use some public proxy like YQL or some other server side XML to JSON solution. JavaScript and the browsers had grown much in the last couple of years, we could start using the browser JavaScript engine speed for some heavy lifting. Implementing JSON and JSONP like an alternative to XML(RSS) is very easy process.

I think if some of the major blog players like Blogger, Tumblr, WordPress, Posterous provide JSON RSS support everyone else will follow.

That doesn't mean that we should kill XML RSS it means just providing alternative JSON support.

If you agree with me help me spread the word. Thanks!

Photoshop Wireframing Kit

2011-09-26T02:32:00.003+02:00

Photoshop Wireframing Kit is a vector tool for wireframing and prototyping in photoshop. It is using the Photoshop Custom shapes to produce vector shapes for web site wireframing.

Why I build this tool?

Many web designers use Photoshop like their primary tool for designing web sites. So why not use the same tool(Photoshop) for wireframing?

I think that this tool can be very handy for many web designers that are using Photoshop like preferred graphical program. They can avoid using third party tools for wireframing and do everything in photoshop.

This tool can easily extendible with the native photoshop features. For now there are around 100 shapes, but I'm planing to extend the Kit in the future.

The road to from the the idea to launch.

In the past I made several free tools for wireframing and prototyping like: Sketchbook for web designers, Fireworks Mini Web Wireframing Kit, iPhone Wireframe Kit - Google Docs, iPhone Grid System but I still wasn't happy and I needed complete wireframing tool, that can be easily to learn and preferably be a part of Photoshop (my preferred graphical tool).

The problem with Photoshop that is not meant to be vector tool, the main purpose of photoshop is photo editing not vector manipulation.
There are probably better programs that can be used for Wireframing, like Illustrator and Fireworks but I'm used to do everything in Photoshop so I decided to decided to extend photoshop using its Custom Shapes.

Here are some initial shapes on paper:

Then some photoshop custom shape icons:

And some examples:

Some slides about the concept:.

Photoshop Wireframing Kit

View more presentations from vladocar

The surprise for me was it seems so simple thing to build when I started, but there are so many details to be done before the finish. I was super enthusiastic in the beginning, realistic in the middle and I hatted the project when 90% was done. When I finally published the project I felt relieved. I hope that someone will find this project useful and that will help you to do better wireframes and web site prototypes.

I'm happy to present:

www.photoshopwireframingkit.com/

Let me know what do you think about this project? I will appreciate your feedback. Thanks

Using JavaScript Objects for storing data

2011-09-14T02:53:00.006+02:00

Few weeks ago I made "o - JS Library for Object Manipulation" and the next step was to build simple To Do app. The purpose this app was storing data into JavaScript object.

Why storing data into JS Objects?

Here are few motives:

- JavaScript objects have JSON like (key,value) structure that is perfect for storing data. You can store numbers, strings, arrays, other objects inside the Object value.

- Parsing the JavaScript Object is very fast in the new browsers.

- With JavaScript you can easily add, remove, extend and do other useful operation to the Object.

- The Object can be easily converted to JSON and vice versa.

- Via AJAX(AJAJ) you can send and receive JSON calls from the server.

- Native node.js support.

- Easy NoSql integration.

- Easy integration with the browser localStorage.

- We can change the browser application building logic by showing first the results to the user and then sending the data to the server(database). That will improve the User Experience and save some traffic because we will be sending/receiving just the JSON data of the actual change. Naturally this will bring new concerns like security, data synchronization and potential data loss.

I think we are not fully using the new browsers JavaScript engines. We can explore new ways and do the heavy lifting in the browser using the server just like permanent data storage.

Here is my simple To Do App that is using "o -library" for the object manipulation and jQuery for the DOM.The data are written only in the JS Object (for now). I used guid/uuid to generate random JavaScript object keys. I wrote a render function that will "render" all the values in the object. It is no so smart to render all the object values for any change made in the object but I'm doing it for purpose of this demo.

This technique is not new, with this post I don't want to reinventing the wheel just to simply point out the advantages of using Objects like data containers. I think many web application can use this approach that can save some serious web traffic.

To Do Link

The object will have this kind of structure:



var Obj = {

89fa0b75-ccc3-7491-df08-906088052575: "Buy milk",

3989d3db-40a5-5c58-4147-42a3cead4c94: "Make 30 Push Ups",

bc0e002e-09a7-d36b-ec6a-24462ea9486a: "Buy ice cream"

}

What do you think? I love to here your opinion.

o - JS Library for Object Manipulation

2011-08-23T03:25:00.000+02:00

o - is simple lightweight JavaScript library for basic object manipulation. Compressed and gzipped weights around 0,5 kb. It should work on IE 5.5 and latter. Also there is lite version that doesn't make hasOwnProperty check that will run faster and with less code.

Lately I was having fun making some JavaScript projects like Object Auto Documentation https://github.com/vladocar/AutoObjectDocumentation and Multiple object extend pattern in JavaScript http://www.vcarrer.com/2011/06/multiple-object-extend-pattern-in.html that are both object related.

When I was working on Object Auto Documentation I realized that can be handy if I had small library for dealing exclusively with JS objects.

That is how the idea for this library was born. Basically this library is nothing new or glamorous is just the tool I needed. The library contains methods like adding, removing values in the object, extracting object keys and values, object extending and cloning, transforming the object to JSON and JSON to object and many more..

The goal of this JavaScript is to make fast object interrogation without many error and property checking. From the primary tests I made this library should work even in IE 5.5. If you are using toJSON and toObject methods you should also include Douglas Crockford JSON.js file.

I also included the lite version that is basically the same code only without hasOwnProperty verification for speed gain.

One thing that surprised me is the native Object.keys method for extracting values is slower than for in loop method. Here are some speed tests that I find on jsperf.com http://jsperf.com/object-keys-iteration/3 and http://jsperf.com/object-keys-vs-for-in-for-values/2 .

I decided to implement the native Object.keys method for modern browsers and for in loop method for older browsers, in many browsers the native method is slower then for in method but probably the Object.keys will get some speed optimization in the future browsers. If you are using o-lite.js you will experience the pure velocity of .keys and .values method.

This library is inspired by underscore.js with the main focus on JavaScript Objects. The speed in this library is achieved by simply not doing any kind of error check. That means that you should do all the error checks outside of the library or modify the library (it is very easy because there are few lines of code) or be aware what this library does and how it’s made.

Here are the list of all the methods with examples.

The structure of the library (Auto Documentation)

Download the library on GitHub

Fell free to suggest code and speed improvements and also to suggest new methods for exploring the JavaScript Object.

Few words about CSS LINT

2011-07-12T05:25:00.001+02:00

CSS Lint is product of Nicole Sullivan and Nicholas Zakas.

CSS Lint hurt the feelings of many web designers in this couple of weeks. Many designers are confused what is CSS Lint.

I want try to explain some of the concepts behind CSS Lint.

CSS Lint is philosophy or method how you should create CSS. It is NOT just a tool that validate CSS.

Is CSS Lint right or wrong?

Or better question: Can sometimes CSSLint be better solution to my problem?

Answer: Yes, sometimes CSSLint philosophy can be better solution to your problem.

I want to elaborate about some of CSS Lint solution starting from my personal experience. I'm author of many CSS Frameworks mainly because of my obsession always to experiment with different things. One of the biggest challenges when you write CSS is the layout. CSS in the beginning was not projected for building layouts. The same goes for HTML.
So every layout on the web is some sort of hack.

In the beginning we use HTML Tables like hack, then we decided to separate the layout from presentation by using CSS. Basically with CSS2 we are doing floats or positioning. In most of the cases we use floats. Floats with combination of elements, ID's and Classes are the basic construct of many web sites. We can use various construct combination for achieving the same goal.

Back in 2008 I wanted to build CSS framework that will be lightweight, flexible and resizable. And that was the challenge to resolve some CSS architectural problems.
Many CSS frameworks then had div.grid1 names in my opinion it was more logical to use just .grid1 to style not just the div but any element. That is one of the things that CSS Lint is telling you use .class that is not bound with any specific element.

Other thing that CSSLint is telling you is: Don't use ID's like selectors.

I think that was the main reason why people didn't like CSS Lint. 99% of all CSS sites are using ID's so suddenly everybody is wrong. And this is how the people react when they are told that are wrong?

But what really CSSLint is trying to say is: "In some cases it is smarter to use classes".

And what case would that be?

And what case would that be?

If you have things that are repeating over and over and over again, optimize and use class.

IMHO CSSLint should seriously consider changing their error log message system:

Before: Don't use IDs in selectors.

After: In some cases consider to use Classes instead of ID's in selectors. Classes are more flexible.

I will try to write two examples one with ID the other with class.

The example with the classical use of ID (open the source code)

The example with use of class (open the source code)

With the class example we have just one of code and with the ID example much more CSS. This is maybe not a perfect example but I think you get the picture.

Many people point out that ID are faster then Class. According to this test class are faster or there is not significant difference with ID's. So the speed is not an issue.

CSSLint is also telling you: "Too many floats... Consider using a grid system instead."

I will add consider building your grid system. You can build 16 column system with just one line of CSS imagine what you can do with 2 lines of CSS. So if you have 20-30 floats I think you can optimize that by making your personal grid system.

Back to the real life use. When to use or not to use CSSLint philosophy.

It is always good practice to use less floats. Try to find the elements that are constantly repeating and optimize that. CSS Lint is just trying to force good old DRY(Don't repeat yourself) into CSS.

If you have small site with the same structure like same header, footer, sidebar, navigation. Is perfectly fine and very logical to use just ID's. You will gain no big improvements with CSS Lint philosophy.

But if you have a site that have to handle multiple layouts and has complex layout consider using Classes and maybe building your own CSS Framework.

Using Classes doesn't necessary means that you have to build CSS Framework It means that you should optimize the repeating parts.

One of the biggest complains about the public CSS Frameworks is ugly non semantic Class names. Absolutely true. Because the general CSS Framework have to serve the general purpose they have general names.
But in your site specific project you can use your specific naming system and build your semantic(meaningful) system with Classes.

My advice is try to understand the CSS Lint dogma. Try to group the repeating parts.

Don't forget: "De gustibus non est disputandum". - “There is no arguing about taste.”

There are many philosophies how should develop your site, be aware of various opinions and options and choose what is best for you and your project.

Foxy - CSS Framework

2011-06-29T05:33:00.001+02:00

One of the coolest new stuff in CSS3 is the calc function. Calc() is a dream come true for the people who like to mix various units like(px, em, %) with the goal to have more flexible layout system.

With calc you can have something like width: calc(280px - 2em + 2%*1px ….)

When I first heard about calc() my first thought was I can finally implement margins on my CSS Framework Malo.

If you have some .class { width:25% } that will make 4 columns grid (25% + 25% +25% + 25%). The problem is that you can't have precision px margins (gutter). So in the past you had nested divs or .something-like-this{width:24%; margin-left:1%}

With calc() that problem is solved now we can have .class{width:calc(25%-10px); margin-left:10px} . And with that we can have the flexibility of the % and the px precision.

Unfortunately calc is only implemented on Firefox 4 or later. Some documentation indicate that works even on IE9 but my test show differently.

To show the power of CSS3 calc I decided to build one simple CSS Framework. Clearly this framework has no piratical value today because only work on Firefox 4 or later. I build it to show how cool calc() is and to indicate how calc() can be used in the future.

The logic behind this framework:

It is one to twelve column framework.
The margin(gutter) is 10px you can change it if you like.
You can put px, em, % in the default container(like 960px or 73% or 50em)

Let's take one part of the Framework:

.d5{ width:calc(100%/5 - 10px); margin-left:10px} Meaning we have 100%/5 = 20% column with 10px margin or you can build 5 columns inside 100%.

.dx5{calc(100% - 100%/5 - 10px); margin-left:10px} is the second part of the d5 meaning you have 100% - 20% = 80% with 10px margin.

Very simple rule to remember .d5 + .dx5 = 100% or .d7 + dx7 = 100%

Here is example of some grid combination (Firefox only).

Demo1

Demo2

And some cats.

Download this project on GitHub

Multiple object extend pattern in JavaScript

2011-06-21T03:11:00.002+02:00

I've was doing some research about JavaScript Inheritance patterns realizing there are many different approaches and divided opinions which pattern or method is better. There is no widely accepted bulletproof pattern that will cover every possible scenario, probably because It all depends what you trying to achieve.

I needed a pattern that can accept and extend multiple objects. Usually is very common to see one object that extends another object extend(object1, object2) but I needed pattern that accepts multiple objects like extend(object1, object2, object3). So I decided to make one.

I used Douglas Crockford - Prototypal Inheritance logic, temporally function -> Object.prototype -> new object plus looping inside every object to copy all the methods.

The first pattern accepts only objects:

I also made the second pattern in case you want to use function for storing methods.It is highly unlikely that you will use the function just for storing methods, but anyway here is the pattern.

From the preliminary tests, this pattern should work even in IE 5.5.

Sometimes it can be handy to merge objects or to divide one object in smaller units to increase modularity. Many modern JS Frameworks have one object that holds everything, dividing that object into smaller logical components(objects) can be helpful.

Two months ago I made picoCSS small JS framework for making webkit apps. I will rewrite the picoCSS to demonstrate the functionality of this pattern. Many JS framework have modules like: selector engine, css, animation, other DOM methods, ajax, events … The intention behind this pattern is to merge just the objects(modules) that we need.

Here is picoCSS original and viewed with Object Auto Documentation. Everything is stored inside the object p. The goal is to brake picoCSS several objects like selector, events, animation …

And picoCSS after:

Now we can rebuild picoCSS like this: var p = extend(selector, css, loop, events);

The working demo.

In this way we loaded just the objects and methods that we need. This particular case dividing the object has little sense because we have super small library. But in other bigger projects dividing the logic can be very useful not just for increasing modularity but also for decreasing the memory consummation. We can even make different files for every object and load only the files that we use. Naturally we should be careful not to make to many HTTP requests.

Here are some I tests I made

Your comments and suggestions about improving this pattern are welcomed.

Object Auto Documentation - JavaScript

2011-06-13T04:51:00.003+02:00

One particular thing that I like about backbone.js is how elegant and well organized is the documentation. Other project that caught my attention few days ago was selfDoc.js I liked the idea of self documentation.

That trigger me to build simple function that will display all methods inside object (backbone style). Important thing was to potentiate code readability and clearness.

The object methods names are listed in alphabetical order on the left and the methods and the code on the right.

The logic that extracts the methods from the object is based on Object.keys. The object methods code formatting are not changed from the original code.

Basically how all this works is you download and put docJS.js and style.css and then include the library or object you want to auto document example docJS(jQuery,"jQuery");

Here is demo using jQuery object

You additionally use the browser console for further profiling. Example: open the previous demo and inside browser console write docJS(jQuery.prototype,"optional")

I build this project for auto document some of my JS libraries but surprise me how cool this tool can be for learning and disassembling other JS libraries.

Here are ten objects from ten different JS projects:

jQuery
dojo
Ext
fuse
Modernizr2
mootools
prototype.js
swfobject
webfont Google
YUI
Zepto

I think this demos show how easy you can profile and object anywhere on the web. Also you can use this tool for learning from other JavaScript libraries. Works in Safari, Chrome and FF4.

Download Watch Fork this project on GitHub

HTML Lorem Ipsum Crash Test

2011-06-01T04:40:00.002+02:00

About two years ago I need HTML template for testing my CSS Typography Framework - Azbuka.

The idea was to have natural float of HTML elements for better CSS projecting and for more authentic HTML elements interaction.

So I build HTML Lorem Ipsum Crash Test and strangely become more popular than my it's original project Azbuka.

Lorem Ipsum Crash Test was partially used in:

I decided to make separate page on GitHub so people can use it to test their CSS.

HTML Lorem Ipsum Crash Test unites parts from:

Demo Lorem Ipsum Crash Test

Download the project on GitHub

Write modern CSS - use class

2011-05-31T04:05:00.001+02:00

Lately CSS community is focused on the new CSS3 tricks and more essential topics like CSS Layouts are left in the dark.

Many thing changed but we still using ID's for direct styling. Meaning we have #header, #footer, #navigation, #main … and we apply styling on that Id.

What is wrong with this code and approach? There is nothing wrong with HTML it is perfectly semantic and logical. The problem is the CSS.

You all have seen CSS like this:

and HTML

Example ID

We are directly using the ID for layout. But we forget that ID can be used once and only once.

That is not flexible!!

For every building block (DIV) we must write different ID. If we have 1000 blocks we must write 1000 different ID.

Why don't we start using class, write it once use it multiple times.

Here is the second example with the same HTML but different CSS. Note that this model supports semantic coding. We are using ID to give logical and semantic areas to HTML bit we are using the class for all the styling.

And the HTML:

Example with class

But this system really shines when we have one block that repeats many times.

Let's build Photo Gallery Example.

Image Gallery using ID's

Image Gallery using class

View the source code of the last two examples.

And we have 2 lines of code for the layout using class v.s 9 lines of CSS using id's.

I think that is more then obvious that with the class we can write less code.

Why don't we try to extend the second example and build extend layout system.

And the we have our own CSS Framework.

The Example CSS Framework.

Someone will ask: What about the speed of the execution.

According to this tests class perform better than ID on most modern browsers. Unfortunately I'm getting inconsistent results for every measure. So I will be happy is someone can confirm my statement.

Final thoughts:

The point of this article is that the class is more flexible than id. Effectively you can write less code with class-es. You can always use semantical HTML and ID with the combination with class if you like.

And the final thing there is no wright or wrong coding method. The wright method is the one that works for you. This is the method that I prefer.

Your comments and thoughts will be appreciated.

Event Delegation - JavaScript

2011-05-23T01:50:00.003+02:00

I'm making a small JS library for building mobile apps that should work on webkit browsers Safari, Chrome. One of the problems to solve was how to implement event delegation.

What is event delegation? I think that very good explanation has David Walsh on his blog post about event delegation and the explanation how various libraries implement event delegation.

So if you are using jQuery you probably know .delegate() and .live() method. Basically what you trying to achieve is to have just one addEventListener that covers big area like the body, table or other portion of your code and avoid to have multiple addEventListener's. I think the .live() method in jQuery have one addEventListener positioned on the body HTML element.

My intention was to build simple yet flexible solution that will work on all modern browsers.

The basic code is:

And the final function:

The trick is to check if the selected("event.target") element matches the selection array($("something")) by using the indexOf .

In order this solution to work you need to remember to select the deepest HTML elements: Example <div id="some"><span><a href="">Click Me</a></span></div> you should indicate in the SelectorChild $("#someid>span>a");

All of this is possible because is the modern browsers we can querySelectorAll and actually the SelectorEngine can be just one line of code.

See working example of first and second example:

FirstExample
SecondExample

I did tests on Firefox4, Safari5, Chrome13, Opera11 and mobile Safari on IOS4.3 .

I think that many heads are better than one. Help me improve the code. Just one condition it should work on Safari and Chrome.

The code can be found on GitHub:

https://gist.github.com/985999
https://gist.github.com/986000

Thanks.

Baseline Grid patterns for Photoshop and CSS

2011-05-11T05:34:00.002+02:00

Few days ago I stubbled upon on Extensible baseline grids by Mike Precious via @adactio.

I've used the same technique several times for building .PSD Golden Grid Template and for web typography parts of Emastic, Better Readability Project, Azbuka and others project that all use complete or partial Baseline Grid.

I thought that can be handy to build Photoshop .pat pattern file for my future baseline grid projects. Also I made .png images that can be used with CSS (HTML) for building and testing the baseline grid.
I think that this can be useful to someone so I am sharing my Photoshop and .png files.

The patterns are from 14px to 26px feel free to extend the project and add more patterns.

Download the patterns (baseline.pat and .png files)

To install the Photoshop patterns you need to copy the baseline.pat file to the folder Photoshop>Presets>Patterns and then restart Photoshop.

For HTML(CSS) patterns open index.html file with any browser.

Cheers!

picoCSS - really small JavaScript Framework

2011-04-28T03:07:00.003+02:00

I've had some extra time during the Easter holidays and I did some JavaScript experiments. The result of that experiment is super small JavaScript library for basic CSS manipulation mainly for building iPhone, iPad and Android web apps.

This project has one objective DOM CSS manipulation with JavaScript that is optimized for webkit browsers(Safari, Chrome) and it will work in (Firefox, Opera) without the part of animation.

With this library you can do just three things insert inline CSS or manipulate CSS with changing the id and the class name of the HTML element. Also webkit CSS3 animation are supported. I've used Svetlo like selector engine.

The coding syntax looks like this:

p.select("#a").css("background-color : green; color: #fff;");

or

p.select("#b").animate('0.5', '1','360','1','1','1','1', '0','0');

or

p.select("#main").att("class","bumm");

And here are some examples (Safari/Chrome):

Example 1
Example 2
Example 3
Example 4

>> Download & Watch the library on GitHub

This Framework is not meant to be complete JS Framework like jQuery. It is just CSS helper library.

If you need small but complete framework for mobile development I suggest you check:

Zepto.js
Ender.js
jQuery Mobile

All comments and suggestions are appreciated!

Svetlo - One Line JavaScript Selector Engine

2011-04-12T03:28:00.002+02:00

I'm working on one new mini JavaScript Framework for building mobile apps.

Probably the most critical part of any JavaScript Framework is the selector engine. Naturally the faster is the selector engine the faster will be all the Framework.

Most of the modern selector engines are build upon querySelectorAll because it gives the best flexibility. Little problem with querySelectorAll is the speed.

Traditionally getElementById is much faster then querySelectorAll, but things are changing. Opera 11 has super optimized querySelectorAll and probably all the browsers in the future will try to speed optimize querySelectorAll.

For my (not yet published) JavaScript Framework I've used this code for the selector engine (codename Svetlo).

// Svetlo :

function $(selector){return Array.prototype.slice.call(document.querySelectorAll(selector))}

What this code does is putting the querySelectorAll results "toArray" and that helps the speed optimization. The code is not new I think the first time I saw it on John Resig blog.

I'm not even sure that this line of code can be called selector engine, but I think that it can be helpful to someone and is good baseline for writing JS applications that doesn't need to run in IE. Hint: Web apps for iPhone and Android.

I did some performance test.

The test are based on this principle http://jsperf.com/nodelist-vs-array-iteration

http://jsperf.com/svetlo-class

http://jsperf.com/svetlo-id/3

http://jsperf.com/svetlo/3

If my testing logic is correct result show that this selector engine is faster then the native querySelectorAll and equal like native getElementById method.

If my testing logic is correct result show that this selector engine is faster then the native querySelectorAll and equal like native getElementById method.

This solution will run on of Safari, Chrome, Firefox, Opera and doesn't support IE.
My intention was to build JS Framework for mobile webkit browsers(iOS, Android).
So if you building web app for iPhone, iPad, Android this selector engine can help you, if you need to support IE this selector engine is completely useless.

Other super small selectors:

Ben Alman QSA library
Dan Heberden Quewery
Dustin Diaz Qwery

All comments and suggestion about this small selector will be appreciated!

Child Selector System - CSS Framework

2011-03-01T03:06:00.003+01:00

I love to make experiments with CSS Layouts. It is become my obsession to build CSS Frameworks and other CSS Architectural solutions. My latest experiment is the use of child selectors for building css layout systems.

Here is the code:

div{float:left;width:100%}
.right>div{float: right}
.one>div{ width:100%}
.two>div{ width:50%}
.three>div{ width:33.33%}
.four>div{ width:25%}
.five>div{ width:20%}
.six>div{ width:16.60%}
.seven>div{ width:14.28%}
.eight>div{ width:12.5%}
.nine>div{ width:11.11%}
.ten>div{ width:10%}
.twelve>div{ width:8.33%}

And the HTML will look something like this:


<div class="two">
<div>...</div>
<div>...</div>
</div>

Note: I build this framework just for teaching purposes. This is just experimental framework. There are many more elegant CSS Frameworks and CSS Systems.

How this system works?

Every div is "float:left" every class for one to twelve is used like container to contain the "child" divs. For example the .five div will hold 5 child divs. The system is simple and easy to use. This system will not work in IE6 and it will have pixel rounding issues in both IE6 and IE7. That is why I made parallel system for IE6/7.

That is something like this:
.five div{ width:20%} so we are not using the child selector ( > ).
For the pixel rounding problems I added margin-right:-1px;:
div{float:left; margin-right:-1px; width:100%}

So with IE fix and IE conditional comments the system can work even in IE 5.5.

Advantages of this system is that the CSS file is very small about 0.35 kb and also generates very small HTML output file. Also the framework supports nested div elements.

Disadvantages are you can't do something like 75% - 25% or 80% -20% columns. The Framework will just have one to twelve equal columns.

With just one line of CSS .four>div{width:25%; float:left;} from this Framework you will have four columns grid system and you can make for example image gallery or something.

Here are more examples:

The System
Example1
Example2

The project is hosted on Google Code Hosting

Download the Code

About Repaint and Reflow in JavaScript

2011-02-08T00:45:00.007+01:00

Recently I stumbled at this Google Documentation - REST from JavaScript realizing how little web developers are aware about JavaScript performance. I heard about Repaint and Reflow mainly from the work of Stoyan Stefanov and Nicholas Zakas, so I’m writing this short article to help raise the awareness about Repaint and Reflow and JavaScript performance in general.

So what is Reflow?

A picture is worth a thousand words and probably the video is worth a thousand pictures :)

Here is the video:

Reflow is the process by which the geometry of the layout engine’s formatting object are computed – Chris Waterson, Mozilla

"Repaint - also known as redraw - is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. An example would be when adding an outline to an element, changing the background color, or changing the visibility style. Repaint is expensive in terms of performance, as it requires the engine to search through all elements to determine what is visible, and what should be displayed." – Opera

Basically Reflow is layout change and Reflow color change.

So you get the picture Repaint and Reflow are highly expensive operation for the browser. So you need to minimize the number of the Repaints and Reflows when you do DOM manipulations.

Let’s take the example that I mentioned previously:

So every time we use insert HTML into the DOM structure we probably triggers reflow. Maybe this isn’t the best example that shows pure resizing of the layout, but we can avoid accessing the DOM multi times.
// before


function hndlr(response) {
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i];
        // in production code, item.htmlTitle should have the HTML entities escaped.
        document.getElementById("content").innerHTML += "<br>" + item.htmlTitle;
      }
    }

// after – calling innerHTML just once


function hndlr(response) {
 var html = " ";
 var  y = response.items.length;
      for (var i = 0; i < y;  i++) {
        var item = response.items[i];
        html += "<br>" + item.htmlTitle;
      }
   // making just one Reflow
   document.getElementById("content").innerHTML = html
    }

Here are more case studies and other examples:

Rendering: repaint, reflow/relayout, restyle

The new game show: "Will it reflow?"

Writing Efficient JavaScript

When does JavaScript trigger reflows and rendering?

Repaint and reflow

Better Readability Project - Free Tumblr Theme

2011-01-10T02:13:00.006+01:00

Almost two years ago I created Better Web Readability Project - CSS Typographical Framework.

In order to promote this typographical framework I created free theme for the Tumblr Blog. The Theme was made with CSS from Better Web Readability Project and called with the same name. The Theme was officially approved by Tumblr and can be downloaded here.

The Demo

This theme is best suited for text oriented blogs.

Enjoy

CSS3 Chat Bubbles

2010-12-20T02:51:00.009+01:00

Few day ago I saw on Hacker News the link Creating Triangles in CSS from Jon Rohan(kudos to JON) and was specially interesting for the chat bubbles. Mainly because I was building one mini app for Twitter who should run on iPhone/iPad (webkit browser) so I needed simple solution for the chat bubbles.

Jon uses this HTML :
<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

I wanted to use just one div to create the same effect and make CSS to do all the heavy lifting:

<div class="chat-bubble"></div>

After some CSS hacking here is the result:

Example
Example1
Example2
Example3
Example4

From the examples you can see that everything is done with CSS and no images are used for making Chat Bubbles and also the HTML is super simple just one div and one class (<div class="chat-bubble"></div>).

The trick is using :before and :after pseudo-elements with combination of content: " " and absolute, relative positioning. In this case both :after and :before work in the same way because there are absolute positioned. This technique work in all modern CSS3 supported browsers.

If you have any questions please let me know in the comments.

All the examples are also on github for download.

[Update] Today Nicolas Gallagher point to me that he came to this technique 8 months ago Pure CSS speech bubbles . Unfortunately I didn't know about his post and I was careless not to check about other CSS chat bubble solution. And the worst thing is I have no prove beside my gentleman's word that I didn't copy his technique. Sorry Nicolas!

Line length and Font Size relation in design

2010-12-09T01:45:00.004+01:00

There are many studies that are claiming that 60 characters per line is optimal reading size.

Optimal is not necessarily fastest reading line length but is the size preferred by the users.

In the past I used that information for building Better Web Readability Project - CSS Typography Framework.

I stumbled to Christian Holst article "Readability: the Optimal Line Length" realizing that we came to the same conclusion about the proportion of the font size and line length.

Christian is using 17px font size and 520px column size.

I’m using 16px font size and 480px column size(for better readability project)

If you divide 480/16 = 30 or 520/17 = about 30

So the formula is:

Main Font Size X 30 = Optimal Columns Reading size

Font Size	x 30	Column Size
12	30	360
13	30	390
14	30	420
15	30	450
16	30	480
17	30	510
18	30	540
19	30	570
20	30	600
21	30	630

I stopped at 21 px for the main font size because at some point the text will become too big and not serve its purpose.

Naturally you can’t just take 12px text and put it in 360px column and hope that everything will look great. The real design process is far more complex but is interesting when patterns emerge like in this case.

Here is demo.

Any thoughts?