Archive for the ‘Random tips’ Category

CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

The golden rule of CoffeeScript is: “It’s just JavaScript”. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

JavaScript Beautifier

Looking for a code beautifier that supports JavaScripts, jsbeautifier.org is the tool! Just copy and paste a sample script in the script area and click “Beautify JavaScript”.

As you might know, HTML5 introduced many exciting features for Web developers. One of the features is the ability to specify gradients using pure CSS3, without having to create any images and use them as repeating backgrounds for gradient effects.

A powerful Photoshop-like CSS gradient editor created by Alex Sirota “The Ultimate CSS Gradient Editor” has the ability to specify gradients using pure CSS3. The main gradient control panel allows you to ajust the gradient color and stop markers, create transparent css gradients, or add fade-in, fade-out, semi-transparency and similar effects. You can tweak your gradient or create new flavors! . If you like this tool, check out ColorZilla for more advanced tools such as eyedroppers, color pickers, palette editors and website analyzers.

FileZilla Client is a fast and reliable cross-platform FTP, FTPS and SFTP client with lots of useful features and an intuitive graphical user interface.

Among others, some of the features of FileZilla include the following:

  • - Supports FTP, FTP over SSL/TLS (FTPS) and SSH File Transfer Protocol (SFTP)
  • - Cross-platform. Runs on Windows, Linux, *BSD, Mac OS X and more
  • - Available in many languages
  • - Supports resume and transfer of large files >4GB
  • - Drag & drop support
  • - Remote file editing
  • - HTTP/1.1, SOCKS5 and FTP-Proxy support

When working on a blog I found that some of the links on the “Categories” list were breaking the layout and one of the URL’s was too long for the sidebar. A very usefull CSS property to fix it is word-wrap. You can force long text to wrap in a new line by specifying break-word with the word-wrap property. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

.break-word {
word-wrap: break-word;
}

By default IE have a vertical scrollbar on textareas, even if the length of the page does not require a vertical scrollbar. To hide the vertical scrollbar when the scrollbar is disabled just add the following CSS code in your stylesheet.

textarea {
overflow: auto;
}

Standard:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

Individual Corners:

-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;

Shorthand:

-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
-moz-border-radius: 10px 20px 30px 0;

Elliptical Rounding (Firefox 3.5+):

-moz-border-radius-topleft: [horizontal radius] [vertical radius];
-moz-border-radius-topleft: 10px 40px;

Elliptical Rounding Shorthand (Firefox 3.5+):

-moz-border-radius: [horizontal radius] / [vertical radius];
-moz-border-radius: 10px / 40px;
-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;

Above is the same as:

-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;
  • 1) Create an empty text file using a text editor such as notepad and name it .htaccess
  • 2) Edit the contents of the .htaccess file with one of the examples bellow and make sure you replace the examples with your own sites URL
  • 3) By default FTP applications are unable to read or view .htaccess files, so after uploading the file to your root folder of your site in ascii mode rename it without any filename extension (e.g. .thaccess.txt)
  • 4) Since .htaccess is a hidden system file please make sure your FTP client is configured to show hidden files. This is usually an option in the program’s preferences/options.

Examples:
Redirect index.html to a specific subfolder:
# This allows you to redirect index.html to a specific subfolder
Redirect /index.html http://yourdomain.com/newdirectory/

Point an entire site to a different URL, such as yourdomain.net redirected to yourdomain.com:
# This allows you to redirect your entire website to any other domain
Redirect 301 / http://yourdomain.net/

Redirect an old file to a new file path:
# Redirect old file path to new file path
Redirect /olddirectory/oldfile.html http://mt-example.com/newdirectory/newfile.html

Meta refresh is also a method of instructing a web browser to automatically refresh the current webpage, but some browsers and search engine don’t read it properly. This method is deprecated and should not be used.
E.g. <meta http-equiv=”refresh” content=”10; url=http://example.com/”>