Character Entities Cheat Sheet for HTML, CSS and Javascript

I always had to fiddle and look around multiple sources to get the correct Character Entity with their named or numeric entity for HTML, the unicode entity for CSS, or the Octal-encoded character for Javascript.

For instance, in CSS, to add → in the content of :before, you can write –

.more:before {
	content: "\2192";
	margin-right: 1em;
}

So, I decided to go ahead, spend some time and made a nice, clean, easy-to-navigate one page site to display, literally, all Character Entity for HTML, CSS and Javascript.

Bookmark the page → Character Entities (HTML, CSS & Javascript).
Let me know of bugs, issues – the source is on Github.

[nsfw-ish] Responsive b**bs, err, responsive content with html/css

Working on a website that needs to be responsive.

Client: Can we get the boobs of the images of those females be responsive. Make them bigger in desktop browsers, subtle in tablets and “ok” in Smartphones. Perhaps extra large on very big monitors.

Me: Hmmmm, sure, why not. I can even do a “boobs.js” to do a 3D canvas resizing to make it more realistic. It can fall back to Flash for IE.

So, I went ahead and started styling the pages. Here is the code snippet for the responsive boobs.

I know, that’s a scary nightmare, right!
Today morning, I woke up totally sweating with those codes haunting and hurting my brain.

Stop torturing yourself with plain CSS, code with a CSS pre-processor

First, let me tell you, I’m pretty good with CSS. However, I’ve always hated writing CSS. Writing CSS is like using dried woods, leaves and rocks to lit a fire everything you need to cook something. You may become very good with it, but it’s an unforgiving task and you’ve to do the rigorous feat every time you need the fire. CSS is bland, dumb, linear and it’s utter lack of intelligence is derogatory even to the most novice coder.

Many designers and developers have urged the need for variables, constants or at-least some rudimentary intelligence. But it is unlikely, a far-fetched dream and is not happening anytime soon. And, there is the often dreaded math you have to do every time you write CSS grids/columns.

Continue reading

Startup Research, CSS text-overflow and why should you keep things simple

One of the early topics in the Founder Institute curriculum is “Startup Research”. Here is a video and slides of a Startup Research lesson to the Silicon Valley program by Adeo Ressi, Founder of the Founder Institute.

The talk provides an overview of how the character of different markets affects the reality of operation, how good research is critical to helping a founder understand both the journey and the destination, and how founders cannot escape the realities of the market that they are in. It is a very informative lesson and provides many practical tips for performing diligent market research before diving into a market. Follow @founding to keep yourself updated. Continue reading

Dynamic CSS and DataURI to the rescue

Paisa

Paisa Consumer Finance Redefined.

Source Files available at Github – DataURI and Dynamic CSS (Download)

How it all started?

We at Paisa are developing a financial Web Application, trying to make it easier for users to invest their money. We, in fact, have a rather nifty way of allowing users to browse through Stocks without the overhead complexity of trying to calculate the figures and stats.

The Situation

We wanted to have an identifying logo for each and every company. Well, that is about 3000+ companies. The logos themselves are small – 24 × 24 pixels each.

The Problem

The size of each logo is rather negligible. So, that’s not the problem. The problem is the number of HTTP calls we’ll have to do fetch these logos. Atop that, we’ve no clue what the user will pull and push the filter criteria to view her results. So, we have a problem of displaying 3000+ images and we’ve no clue when and where they’ll appear.

The Solution (Not)

Initially, I was thinking of doing a rather complex matrix of Image Sprites by combining them in pre-defined groups based on — BSE-100, BSE-200, Alphabetical, etc. However, this introduces useless image downloads (bigger size now due to the combined sprite) and not really that re-usable at multiple places. So, CSS-Image-Sprite was NOT the solution.

The Better Solution

One fine evening, an article popped up on HackerNewsData URIs make CSS sprites obsolete. Then, I knew this is something I can pursue to accomplish what we wanted.

In our situation, as each and every company is accompanied by their BSE Code, we inserted that in a class “bse_xxxxxx” (via Python in our case). We do have a default class, “stock_logo” that keeps a default logo ready just in case we don’t have the logo of the company or is being changed or it simply does not exist. This default class also defines how the logo will be displayed, what will be the padding style etc. The class “bse_xxxxxx” is used only to insert the actual logo as a background-image.

Next, Javascript picks up the IDs of the actual logos to be displayed (in our example, from the special attribute `imgID`) and then constructs a link to a handler which generates a CSS file with Data-URIs embedded in it so that we can download all the required images with a single HTTP call and insert them seamlessly into an HTML file.

Example:

Say the markup is like this –

<li class="img img_500" imgID="500">Foo</li>
<li class="img img_600" imgID="600">Bar</li>

The JS code extracts the “imgID” from the li and constructs a query like the one below and inserts it into the DOM inside a link tag –

stylesheets/logos.css?i=500|600

Then, the special handler generates a CSS file by reading the actual images and base64 encoding them. The CSS file is loaded into the DOM and the new images show up instantly.

Use Cases

The use cases look rather rare and might not be something you can use out of the box. However, we hope this will help someone who needs something similar and hope that this will inspire them in solving their own problem. We’ve use Python for our codes but this can be done in any Server Side Programming Language. We used Closure JS Framework with our Javascript but jQuery, a more common framework, was used in this example.

Thanks

Special thanks to @BGhose who stitched all the solutions together in a deployable and usable form. I had to write only a few Stylesheet sample codes for just few companies to show them how it can be done and @Prajwalit easily threw in some Javascript magic and Sidhant completed the Server Side code. Now, we’re just throwing in the logos in our bucket without caring for anything else except to name them against the BSE Codes for the companies. It will just continue to work like a charm.

Browser Support and the obvious Internet Explorer

The article by Nicholas refers to his CSSEmbed solution which uses MHTML mode to make IE6 and IE7 compatible stylesheets that use internal images similar to data URIs. So, you can use a conditional HTML comment to import IE specific styles.

This is our first cut to the solution, we’ll always be on the look-out to improve the solution (think Caching). If you’ve questions, or just want to say something, feel free to comment.

Source Files available at Github – DataURI and Dynamic CSS (Download)

Finding love in Sass and Susy with a Compass

I’ve dabbled, played and tinkered with HTML/CSS for quite sometime but never took it seriously. Neither did I enjoyed doing them that much to relish the awesomeness of CSS. Of late, I’ve involved knee deep in some serious and heavy duty CSS. For some odd reason, I liked the way things worked out and am intrigued enough that I want to know more and go deeper, improvise and do it more better, and efficiently.

Today, let me chronicle some of the tools, utilities I stumbled upon and I hope that it will be useful to other web developer/designers. Our team embraced semantic and well marked-up HTML long back and HTML5 is proving to be a boon for us. But for this article, let’s keep HTML5 for another sunny day and let me just talk CSS.

Many people have many concerns with CSS, some of the glaring ones being the lack of variables, inability to nest styles, etc. Many CSS gurus and advanced users are smart enough to twist around this and write smart CSS and still remain sane about it. However, for the normal and not-that-advanced CSS developers and designers, I feel there is a real need for them. That’s where many of these CSS pre-processor comes in as a savior.

Let’s play.

I’ll talk about

  • Sass
  • Compass
  • a little bit of Susy
  • How to get Started (Installation and Usage)
  • Few introductory Best Practices
  • A working Live Demo

I won’t even talk about their integration with other major Application Servers like Merb, Jekyll, Ruby on Rails, etc. I’ll assume a standalone CSS-Project to make it easier for you to start off. Integration is the much easier part.

Sass

Sass

Before going ahead, let me say that I like Nathan Borror’s article — Sass isn’t for me and the reasoning behind it. Fortunately, Sass is for me and will be for most of you. Of course, i’ll tell you how we manage 3000+ lines of CSS codes with Sass without having to scroll much and without having to wait for compass to compile those ‘ballooning’ 10,000+ lines Sass codes.

Simply put, Sass helps you write CSS in a different syntax, cascade your way through the styles, and use variables, mixins and nested rules.

Let’s look at a simple example (excerpt from the Sass website)


Which means you can use that “table-scaffolding” mixin again and again wherever you need it. Sass is easy to start and the best place to would be to visit the Sass Tutorial. Read below for Sass installation and usage.

Compass

For me, the need for Compass was just to supplement Sass compilation without my intervention. I was ready to jump into Sass without any gears or tools or frameworks. However, Compass was a pleasant surprise for me and I’m loving every bit of it now.

Once Compass is installed, it comes built-in with the following frameworks ready for you:

  • Core Compass Styles/Framework
  • Blueprint CSS
  • YUI Grid
  • 960.gs

And here are some of the popular Compass-Plugins you can add:

  • 960.gs
  • Baseline
  • Compass Colors
  • Drupal Zen
  • Fancy Buttons
  • GraphPaper
  • Grid Coordinates
  • Slickmap
  • Susy

Note: Compass might add more in future.

While I’m working on Sass, I simply turn on Compass to watch my folder and forget about it — compass --watch. Jump to the end of the article for Installation and usage of Compass.

Susy

Honestly, it was the name that strike me and I’m not complaining my choice of this particular Compass Plugin. Susy is a grid and utility plugin for Compass. Susy helps you do away with some of the calculations you always do when you deal with the CSS Box Model (understand it better with the interactive CSS Box Model).

However, if you’re already comfortable with the other available plugins, it would be wise to start off Sass with that plugin/framework.

How to get Started (Installation and Usage)

We’ll have to accomplish two important steps (a) Install Compass and (b) Install Sass and of course, make them working. Both Compass and Sass require you to have Ruby installed. Make sure you have rubygems version 1.3 or greater by running “gem -v” in your Terminal (or Command Line). I’m on Mac OS X but the commands should be same for Linux users and eventually hope Windows users can do the same.

INSTALL Compass

$ gem sources --add http://gems.github.com/
$ sudo gem install chriseppstein-compass

Update: Read the comment from the author of Compass for an update on Compass Installation.

You have successfully installed compass if you can perform this command

$ compass -v

and get something like
Compass 0.8.17 [2465bab]
Copyright © 2008-2009 Chris Eppstein
Released under the MIT License.

In future, you can update Compass by this command

$ sudo gem update chriseppstein-compas

How to use Compass

You can start a new Compass Project in a folder of your choice by typing this command

$ compass --sass-dir=sass .

or with added options

$ compass --sass-dir=sass --css-dir=css --images-dir=i .

or start a plugin enabled Compass project (let’s take Susy in our case)

$ compass -r susy -f susy <projectname>

Now, to actually use (or run) compass while you’re working on Sass. You’ll have to ask Compass to watch over your Sass folder or you can compile them to CSS manually. I love the watch and forget thingy — compass --watch.

Run compass

From within your project directory:

$ compass

From any directory:

compass -u path/to/project

To monitor your project for changes and automatically recompile:

compass --watch [path/to/project]

INSTALL Sass

Well, if you just finished the above steps of installing Compass, then Sass was already installed! Isn’t that nice? It comes with two command-line tools for you to use right away.

A sass translator for your existing css files

$ css2sass my-styles.css my-styles.sass

A sass compiler for single files that emits css

$ sass my-styles.sass my-styles.css

Nonetheless, if you need to install Sass, then here we go.

sudo gem install haml

Ah! that’s because Sass is part of Haml Project.

Few introductory Best Practices

We always want to know how to get things started ASAP and with anything new, we want a primer, guidelines, demos, working examples. I would suggest reading on the Tutorials, examples and documentations a bit on Compass and Sass.

One things I learnt during CSS and applied in Sass that proved useful is to separate the modules as much as you can. Keep separate Sass files that does separate stuffs and ‘sass import’ them in a single sass file which will eventually be compiled to a single CSS. That way, I won’t have to scroll through one single ‘screen.sass’ with 10,000+ lines of sass codes.

Here is an example;

Set the following sass files

  • _reset.sass
  • _base.sass
  • screen.sass
  • _othersass.sass
  • _anothersass.sass
  • _yetanothersassmodule.sass

and in the screen.sass file (which actually compiles to your single compressed screen.css) import your other sass files:

@import reset.sass
@import base.sass
@import othersass.sass
so on and so forth

Btw, that ‘underscore’ in the sass filenames denote that they should be expanded inside the screen.sass and not act like a CSS import (which will add another HTTP request by your website).

A working Live Demo

At Infinitely Beta, the UI of one of our weekend project I’m not Spacy was done in Compass and Sass. (Susy was not part of this project). The UI of our much bigger Application — Paisa is entirely on Compass + Sass + Susy.

Download Sample

You can download some sample Sass files which were cherry picked from some of the files I wrote recently. The files are just indicative samples and might not work out-of-the-box.

Notes

  • CSS Box Model — The modern solution for supported browsers is to use CSS3′s box-sizing set to border-box (the default is “content-box”)
  • LessCSS — I’ve heard good reviews about LessCSS, another CSS-Preprocessor like Sass. It’s just that I’ve never tried it seriously.

CSS Variables

CSS Variables can define stylesheet-wide values identified by a token and usable in all CSS declarations. A recurring value, like colors or background-color in a stylesheet, will be way easier to update across the stylesheet if a developer has to modify at just one single place or value instead of modifying all style rules applying the property:value pair.

CSS Variables, once implemented, will allow authors to define variables that are reusable as property values anywhere in a stylesheet and queryable/modifiable through an extension of the CSS Object Model.

Majority of the Web Designers and Developers has been requesting a way of defining CSS Variables since its early release. Nonetheless, some are of the opinion that it is not needed and will complicate matters.

Why variables in CSS?

Many a times, any CSS developer would have felt that s/he is using repeated property values in a CSS stylesheet, for instance to make sure semantically different elements in a web page have a similar rendering and user experience. CSS does offer a way to group styles using groups of selectors, but we tend to neglect it more because of the fact that it’s difficult to maintain, decreases readability and of course semantically distinct elements rarely share all style rules.

CSS Variables Note names David Hyatt of Apple as one of the author, the other is Daniel Glazman of Disruptive Innovations. We might see a early implementation of CSS Variables in a future version of Safari!

The CSS Variables Definition

CSS Variables should be defined in an @variables at-rule. An @variable at-rule is composed of the ‘@’ character followed by the ‘variables’ identifier, optional target media types (separated by commas) and a block of variable definitions. The definition of a variable must precede all style rules contained or imported in the stylesheet.

Each variable definition contained in the block of variables is a declaration composed as CSS style declarations of an identifier, a semi-colon and one value. As in CSS declarations, optional whitespaces and comments are allowed anywhere.

The definition of variables crosses @import boundaries. That means that the definition of a variable contained in a Stylesheet B imported from a Stylesheet A applies to all rules directly contained or imported into Stylesheet A.

Usage Example

Using the value of a variable as the value or one of the values of a property in a CSS declaration should be achieved using the new functional notation var(). This function takes only one argument being the identifier being the name of the variable. The declaration becomes invalid if the variable does not exist.

@variables {
	oColor: #fefedb;
	oBgColor: #ccc;
	oMargin: 1em;
	oPadding: 1em;
}
@variables print { /* applies only to print */
	oColor: #000;
	oBgColor: #fff;
	oMargin: 2em;
	oPdding: 2em;
}
div#post div.entry {
	border: 1px solid #666;
	font: normal normal normal 1em/1.6em "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: var(oMargin);
	padding: var(oPadding);
	color: var(oColor);
	background-color: var(oBgColor);
}

The above shows that we’ve styled the div#post div.entry with color, background-color, padding and margin which have been defined earlier in @variables for screen medium by default and we can override the same same for “print” medium through the @variables print.

More advanced details of CSS Variables — Grammar, Interfaces like CSSRule, CSSVariablesRule, CSSVariablesDeclaration, CSSValue, CSSVariable, etc — are discussed in details at the CSS Variables Note.

Ok, so what if I want to start using CSS Variables now?

There are many hacked solutions available at the moment, though restricted to PHP environment, to inject variables inside your CSS. Some of them like CSS-PHP Variable and Variables in your CSS via PHP treats CSS like PHP and thus able to inject PHP variables rendering them inside your CSS codes.

The near perfect way in the line of the above CSS Variables initiative is luckily available at Shaun Inman’s website — CSS Server-side Constants.

CSS-SSC

CSS-SSV hijacks the syntax of @rules to isolate variable definitions. Variable names and their values are defined like any other CSS property. The goal was to make this as easy-to-use and native-looking as possible:

@server variables {
	variableName: variableValue;
}

This is how variables are embeded in the CSS:

selector {
	property: variableName;
}

Here is an example from Shaun’s own CSS-SSV:

@server variables {
	primaryLinkColor: #AB6666;
}

a {
	color: primaryLinkColor;
}

If you wish to try out Shaun’s method, it is available through his CSS-SSV Page. Otherwise, let’s hope that CSS Variables are implemented quick enough so we can reap the benefit, optimize and save our time writing Stylesheets.