Gedit Clientside plugin

Clientside is a Gedit plugin for those who work with CSS and Javascrip which can be used to minify and format/beautify Javascript and CSS. Further more, the plugin also includes jsLint and an option to Gzip the current file.

Read more »

Reducisaurus is a web service for minifying and serving CSS and JS files, based on Yahoo! YUI Compressor. Sure, there are lots of way of minifying javascript and CSS, but Reducisaurus is probably the easiest to use.


In case you don't know:

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab).

Read more »

I've had many issues with Firefox, in both Windows and Linux. The scroll is sometimes slow or choppy, some elements appear to be floating, etc. This always seems fixed at some point, but then the scrolling issues return for an unknown reason. Also, I realize I could easily 'fix' this by simply switching to another browser, but that's not a choice for me.


I recently told you the issues have been fixed for me, starting with Firefox 3.6 beta, but I am sure this will return, like it did over and over again in the past. However, I have found a permanent fix: using a Greasemonkey userscript created by BinnyVA.

To use it, firstly make sure you have Greasemonkey Firefox add-on installed, then install the script by clicking on THIS link.

No more slow scrolling or floating page elements after using this script. Finally!

If you own a website, you can tweak your CSS so that the scroll will behave properly in Firefox, by replacing any occurrence of:

background-attachment:fixed;

in you CSS, with:

background-attachment:scroll;

Stylizer

Stylizer is an application which allows you to work with CSS in a much more comfortable way: the changes you make to a website can be previews in real time.

The application is for Windows only, but it works on Linux too, through Wine. The basic version is free and while some more advanced features are missing compared to the Ultimate version, it should be enough to really improve your workflow and allows you to actually see any changes you make to a website. You can see the difference between the two versions, HERE.

Also, a Mac OSX version is on it's way, so if you really like Stylizer, be sure to enter your email to be notified when it will become available.

Download Stylizer

[via linwind]

Creating a fluid width (extensible) banner is quite easy but using one that has images is a bit tricky. In this article, I am going to explain how to create a fluid width image banner.

Fluid width means the banner must keep it's aspect, no matter the browser / screen width (more or less). For instance, if we have a banner with an image on the right side and some text on the left, it's not that easy making the banner expand / shrink so that it looks the same on any screen resolution. But with some CSS, this can be done in just a few minutes.

Go to the DEMO PAGE and change the size of your browser's width. The banner will look the same, even if you shrink or enlarge the window (sure, if you shrink it too much, It won't look good anymore, but that's because I used 2 quite large images for the left and right parts of the banner; I guess I could have made them smaller but it's all the same in the end...).

You can look at the source code of that page. You'll notice that the whole banner is not just one image, but actually three.

Read more »

To load some CSS files based on the screen resolution of the visitor, basically you just have to use some JavaScript like this:

<script type="text/JavaScript">
var screenwidth = screen.width;
if (screenwidth < 750){
document.write('<link rel="stylesheet" href="http://path.to/750px.css" type="text/css" media="screen" />');
}
if ((screenwidth >= 750) && (screenwidth <= 950)){
document.write('<link rel="stylesheet" href="http://path.to/750px.css" type="text/css" media="screen" />');
}
if (screenwidth => 1024) {
document.write('<link rel="stylesheet" href="http://path.to/1024px.css" type="text/css" media="screen" />');
else {
document.write('<link rel="stylesheet" href="http://path.to/verylarge.css" type="text/css" media="screen" />');
}
</script>

Read more »

1. The HTML 5 Visual Cheat Sheet - was created by Wook and it's a great way to see the new HTML 5 elements in action:

This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

You can get it by heading over to Wook (download available as high quality JPEG or PDF, in 2 versions: white or black background).

Read more »

You can create such CSS sprites automatically, for free, by using http://css-sprit.es/. All you have to do is select a bunch of different images, the effect (it supports 6 different effects) - in my example I have used "Desaturate" - and that's it. You will instantly receive the image, the CSS and HTML code ready to be used into your website.