Unwrongest

Textareas with a 100% width and no overflow

Jan Jarfalk — Sat, 19 Mar 2011 14:42:11 +0000

After a poke-around in the Facebook source code a colleague of mine found this awesome little technique to get textareas with a width of 100% to behave exactly as you want them to.

If you just slam { width:100% } on the textarea you usually end up with a textarea that overflows its container. That since the textarea’s width will be 100% + padding + borders. You need to counter the padding and borders.

The absolute easiest way to do that is to add padding to the wrapping element.

doctype html>
<html lang="en">
<head>
<style>
label { padding: 0; marign: 0; display: block; }
textarea { width: 100%; border: 1px solid #333; padding: 4px; }
.the-fix { padding-right: 10px; }
style>
head>
<body>
<label class="the-fix">
A good-looking textarea with a 100% width
<textarea>textarea>
label>
body>
html>

The width of the input is 100% of its container + 1px + 1px (borders) + 4px + 4px (padding). In other words the width is 100% + 10px; Therefore we give the fix class an extra 10px padding to the right.

Speed up FTP transfers with zip and ssh

Jan Jarfalk — Mon, 10 Jan 2011 10:24:19 +0000

Uploading many small files using FTP usually takes longer than one big. It’s often a good idea to upload a compressed zip archive and then unzip the whole package directly on the server.

Unzipping zip files on the server is something you often can do if you have SSH access. All you need to do is to upload a compressed archive using FTP, open up a Terminal and then do something like this:

// Connect with SSH
ssh yourdomain.com -l yourusername
// Locate the directory with the zip file
cd /domains/yourdomain/html
// Unzip
unzip html.zip

Simple as that! Another couple of minutes saved.

How to break Javascript strings into multiple lines

Jan Jarfalk — Thu, 23 Sep 2010 16:36:58 +0000

There are two ways to break up a Javascript string into multiple lines: Backslashing and string concatenation.

String concatenation is often easier on your eyes, but slower and more memory intensive. If speed and performance is a goal than you should always delimit your JavaScript strings with backslashes and not plus signs.

Delimiting with backslashes

var text = "Lorem ipsum dolor sit amet,\
consectetur adipisicing elit,\
sed do eiusmod tempor incididunt\
ut labore et dolore magna aliqua.";

Delimiting with string concatenation

var text = "Lorem ipsum dolor sit amet,"
+ "consectetur adipisicing elit,"
+ "sed do eiusmod tempor incididunt"
+ "ut labore et dolore magna aliqua.";

How to decompress javascript

Jan Jarfalk — Thu, 05 Mar 2009 21:47:10 +0000

The online beautifier is a javascript decompression tool. It takes a compressed javascript and inserts indents, new lines and makes it readable. You find the online beautifier at http://elfz.laacz.lv/beautify/.

When I am finished with a javascript component, like Elastic, Tabify or Accordion, I always create a compressed version of the source code using a javascript compressor like YUI Compressor or Dean Edwards Packer. The compressor shortens long internal variable names and removes unnecessary white spaces making the code lighter.

Developers often only provide these compressed versions of the code, which makes the code hard to read, understand and modify. The online beautifier is a javascript decompressor. It doesn’t get back the original variable names but it does create indentations and new lines. Below is an example of what the online beautifier does with the compressed code of my Jquery plugin Accordion.

This is the compressed and minified version of the jquery plugin Accordion. The whole source code is on one line and all white spaces are removed.

(function($){$.fn.extend({accordion:function(){return this.each(function(){if($(this).data('accordiated'))return false;$.each($(this).find('ul, li>div'),function(){$(this).data('accordiated',true);$(this).hide()});$.each($(this).find('a'),function(){$(this).click(function(e){$(e.target).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');$(e.target).siblings('ul, div').slideToggle('fast');return void(0)})})})}})})(jQuery);

This is exactly the same code after the online beautifier is done with it. The tabs and new lines it has inserted has made the code a lot more readable.

(function($) {
$.fn.extend({
accordion: function() {
return this.each(function() {
if ($(this).data('accordiated')) return false;
$.each($(this).find('ul, li>div'),
function() {
$(this).data('accordiated', true);
$(this).hide()
});
$.each($(this).find('a'),
function() {
$(this).click(function(e) {
$(e.target).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
$(e.target).siblings('ul, div').slideToggle('fast');
return void(0)
})
})
})
}
})
})(jQuery);

The tool is not perfect, and it can’t decompress everything, e.g. it can’t decompress a file which have been Base62 encoded – But I like it and think you should give it a go at http://elfz.laacz.lv/beautify/.