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