What is the end of the line (a couple of notes on newlines)

Handling newlines

When working with text files between different systems, line changes (also known as newlines) can be problematic. This is because different systems use different character codes (or combinations) to present newlines.

The basic codes used are the following:

LF (Line feed)	‘\n’	^J	0×0A	10 (decimal)
CR (Carriage return)	‘\r’	^M	0×0D	13 (decimal)

The basic cases for the typical systems are:

LF	Unix-like systems (including GNU/Linux & OS X, for example)
CR+LF	Windows & DOS, textual Internet protocols typically (see below)
CR	Mac OS before OS X

How about the (textual) Internet protocols? In general they use CR+LF on the protocol level, even though usually recommend applications to accept also plain LF. In textual mode, FTP transforms the newlines between CR+LF and system’s encoding (but not when in binary mode).

How to convert them

A typical example case is having a file in Unix/Linux/OS X that has Windows newlines. In this case, an extra ^M (CR) is found at the end of each line.

There are many ways to convert files between different newline formats (see Wikipedia). One utility for this for is flip (note to be a bit careful, since the tool updates the file straight)

Current file type can be determined with

$ flip -t file

File can be converted with -u (to Unix) or -d (to DOS/Windows), like

flip -u file_with_windows_newlines

Also tr can be used, like the following:

tr '\r' '\n' < macfile.txt > unixfile.txt
tr '\n' '\r' < unixfile.txt > macfile.txt

Links

• Newline article in Wikipedia
• EOL story
• ASCII control code chart (Control-M ^M & Control-J ^J)

Float elements and parent container width (CSS stuff)

While doing some CSS stuff I encountered a new CSS thing to know with float-based layouting that I thought to share. A container (e.g. div) containing float elements doesn’t grow up around the floats (which causes some problems with borders & backgrounds, for example).

UPDATE: Nicolas Gallagher's Micro clearfix hack is probably the best solution nowadays (available as CSS for .clearfix for Bootstrap, for example)

(DEPRECATED: Some previous solutions in short)

• overflow: hidden OR overflow: auto
• create an extra element with clear: both

Some links with more details & demos:

• All about floats (css-tricks.com)
• Stack overflow answer with alternatives
• http://www.quirksmode.org/css/clearing.html

Async Javascript (notes for a great book)

Martin Fowler recommended Trevor Burnham’s Async JavaScript: Build More Responsive Apps with Less Code. I was interested on the topic and picked the book and I was pretty satisfied with the book. Async JS concepts were opened in a clear way at a proper level for me.

Bunch of notes (mostly for myself) follow:

Understanding Javascript Events

• Javascript thread & event model : single thread & Event Queue
  • Note that JS was selected for Node.js because JS being a great fit for nonblocking I/O
• Event sources : I/O & timing functions
• Async function : A function that can cause another function (callback) to run later from the event queue
  • Note that in some cases a function is async only sometimes
• Misc advices:
  • Async recursion considered as an anti-pattern.
  • Never define a potentially synchronous function that returns a value that could be useful for the callback.
  • Read the source code for the functions you use.
  • Avoid nesting many levels of callbacks.

Distributing Events

• PubSub : distributed events (single incident might cause reactions through the whole application)
  • jQuery: on, also $.Callbacks
  • Node: EventMitter
• Evented Models (Backbone, Ember.js)
• Note that PubSub isn’t inherently async in itself

Promises/Deferreds

In brief : A Promise is an object that represents a task with two possible results (success & failure) and holds callbacks when one or other outcome has occurred

• Pros :
  • encapsulation
  • possibility to pass a promise around
  • possibility to derive new promises from existing ones
• Two major alternatives
  • jQuery promises (from 1.5)
  • CommonJS Promises/A
  • Incompatible vocabulary, idea pretty much the same
• Deferred : superset of Promise with addition : one can trigger a Deferred straight
• Promise combinations etc
  • $.when : “logical AND“
  • piping
• jQuery callbacks : done, fail, always, progress
• More and more JS libraries will probably start to return promises. Until then, one can easily convert async functions to Promise generator

Node-style promise generation from a callback:

var reading = $.Deferred();
fs.readFile(filename, 'utf8', function(err) {
  if(err) {
    reading.reject(err);
  } else {
    reading.resolve(Array.prototype.slice.call(arguments, 1);
  }
}

Flow control with Async.js

• Similarly as Underscore.js can help synchronous iterative code, a flow control library (as Async.js) can help async code.
• Collection methods:
  • async.filter, async.forEach (parallel)
  • async.filterSeries, async.forEachSeries (sequentially)
  • also other “main functional iteration methods”
• Task organization:
  • async.series (one task at the same time)
  • async.parallel (all tasks at the same time)
  • async.queue (n tasks at the same time)
• Lightweight alternative Step

Workers

• JavaScript is single-thread by nature
• Web Workers “part of HTML5“, one can run code in multiple threads
  • Inter-process communication with events
    • through Event Queue
    • data copied & “serialized+deserialized”
  • Not supported with all major browsers (yet)
• Node Workers with cluster

Async script loading

• script tag is blocking
  • browser will continue to read the document and download resources but won’t evaluate them until the script has been downloaded and run
  • script in the head → nothing shown before script is downloaded and run
  • thus scripts often moved to end of body, unless
    • script might be called from inlin
    • browser-enhancing script like Modernizr
    • script affecting how rendered page looks like
• defer
  • “start loading the script right away but don’t run it before document is ready and previous defer scripts are run
• async
  • “load & run scripts as soon as possible”
  • for independent scripts only
• Programmatic loading
  • yepnope : very lightweight way
  • Require.js & AMD : for applications with complex script dependencies

Misc links:

• Captain Obvious on JavaScript (Basic functional idioms)
• Javascript Garden

Ääkköset, merkistöt ja Mac OS X:n komentorivityökaluja

Eiväthän ääkköset enää ole ongelma

Muistiinpanoja sen varalta jos kuitenkin ovat, lähinnä Mac OS X:n komentorivin ja suomenkielisen tekstin yhteydessä.

Oleelliset merkistöt suomenkielisessä ympäristössä

• UTF-8 : Unicoden vaihtelevanpituinen koodaustapa (1-4 tavua per merkki)
• ISO 8859-1 (aka. Latin1) : 8-bittinen, eli 8 bittiä (1 tavu) per merkki -> 256 merkkipaikkaa

Tekstitiedoston merkistön tunnistaminen

Lähtökohtaisesti merkistöä ei voi päätellä tekstistä, vaan merkistön tulee olla sovittuna / etukäteen tiedossa. Kun tuntemattomalla merkistöllä koodattu tiedosto kuitenkin tulee vastaan, voidaan (varsinkin jos kielikonteksti on tuttu) tehdä erilaisia akateemisia arvauksia.

Tiedoston tavujen tarkastelu heksadumpista

Tiedostosta voidaan ottaa heksadumppi (jolloin nähdään tiedoston kukin tavu)

$ hexdump -C aeaekkoset-utf8.txt
00000000  c3 84 c3 a4 6b 6b c3 b6  73 74 65 73 74 69 0a     |....kk..stesti.|
0000000f

Olettaen että sana on "Ääkköstesti", on kyse UTF-8:stä. Sama sisältö Latin1-koodauksella:

$ hexdump -C aeaekkoset-latin1.txt
00000000  c4 e4 6b 6b f6 73 74 65  73 74 69 0a              |..kk.stesti.|
0000000c

Oleelliset ääkköset

Kirjain	UTF-8	Latin-1
ä	c3 a4	e4 (228)
ö	c3 b6	f6 (246)
Ä	c3 84	c4 (196)
Ö	c3 96	d6 (214)

Automaattinen päättely (file-komento)

Hyvän akateemisen arvauksen saa myös komennolla file

$ file aeaekkoset-utf8.txt 
aeaekkoset-utf8.txt: UTF-8 Unicode text

Ja

$ file aeaekkoset-latin1.txt 
aeaekkoset-latin1.txt: ISO-8859 text

Merkistön vaihtaminen

Tekstitiedoston merkistön vaihtaminen onnistuu komennolla iconv.

Latin-1 -> UTF-8

$ iconv -f LATIN1 -t UTF-8 input_file > output_file

UTF-8 -> Latin-1

$ iconv -f UTF-8 -t LATIN1 input_file > output_file

Linkkejä

• Joel on Software : The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
• OS X Terminaalin asetuksia (kts. kohta UTF-8 MERKISTÖ)
• UTF-8-Codetabelle mit Unicode-Zeichen

Misc. notes related to "CSS : Missing Manual"

Recently, I read CSS : The Missing Manual and I got to say that I was pretty satisfied. The book walks through the basics of CSS with examples. The book isn't very deep but covers well the basics.

Misc notes (mostly for myself):

Valid & good HTML & CSS:

• Remember the basic "official things"
• Right doctype for the HTML
• Validate HTML (for example with W3C HTML validator)
• Validate also CSS (W3C CSS Validator)
• Other important things
• Do not mix HTML & styles (no fonts etc)
• HTML is for structure & semantics, CSS is for the layout etc
• Maintainability : CSS class names preferably for content, not for the layout/presentation, for example:
• use "alert" instead of "red-highlight"
• use "news" instead of "left-side-bar"

Misc CSS/HTML notes:

• Block-level vs inline boxes
• Block-level (div, p, ...) : break before and after element
• Inline elements (strong, a, ...) : no break

Position

• absolute : one can define the position him/herself
• relative to its absolutely positioned parent (tag with absolute, relative or fixed positioning)
• in other words : positioned with respect to its containing block
• absolute positioned element is removed from the HTML flow, the space is freed
• relative : relative to elements "right place" at the HTML flow
• fixed : fixed position at the window
• static (the default) : element's box is generated as normal

SASS vs SCSS vs LESS ... et Compass

Notes on various CSS preprocessors / stylesheet languages

• SASS (Syntactically Awesome Stylesheets)
• .sass : the original format (intended syntax, similar to haml)
• .scss : "sassy css", superset of CSS3
• LESS

At another level:

• Compass (CSS Authoring Framework)
• Uses SASS

Notes from "Javascript: The Good Parts"

Some time ago I read JavaScript: The Good Parts, a nice book on Javascript, the lingua franca of the web. Book concentrates on the nice features of Javascript and warns of the not-so-nice features.

My experience with web frontend technologies isn't too strong so I was pretty happy with the book.


This post is a short summary of things that I wasn't too familiar with, mostly in order I encountered them:

Misc things:

• Javascript has only one numeric type, the same as Java's Double
• Which means that 1 ends up being 1.0, no separate integers
• Floating point with computers effects checking of equality, 0.1+0.2==0.3 ends up as false 
• Javascript has function scope (no block scope)
• Javascript objects are class-free mutable keyed collections
• Inheritance : Javascript is a prototypal language
• Objects inherit straight from other objects
• prototype objects (e.g. Cat.prototype)
• Note that this prototype relationship is dynamic.
• Important widely used convention : constructions functions with capital letter, others with minor
• A bonus one (not from the book) : For some time I wondered why some variables are started with $ and some not. Seems to be convention to name variables holding jQuery objects to start with a $. See for example Why would a javascript variable start with a dollar sign (at Stack overflow)

The invocation patterns (a.k.a what is 'this')

Method invocation pattern

• When the function is a property of an object, it is called a method. When the function is called as a method of an object, this points to the object.

Function invocation pattern

• When the function isn't called as an method, it is invoked as a function -> this points to the global object
• A mistake in the language design.
• Causes problems with inner function inside an outer function (inner function doesn't share this of the outer function
• A common workaround is to save this of outer function to a variable named that.

Constructor invocation pattern

• According to the writer of the book, "worst of two world" (classical vs. prototypal inheritance)
• If a function is invoked with the new prefix, a new object will be created with a prototype link and this points to that new object.
• Functions intended to be called with new are called constructors. They should be given a capitalized name!

Apply invocation pattern

• Functions can have methods; apply method of a function lets us to choose the value of this, before the arguments.

For those interested, Yehuda Katz has a good summary of these : Understanding Javascript function invocation.