What’s the difference between designers and developers?

May 31st, 2011 § 0 comments § permalink

When in the web domain, I find that the sought after skill is connected to what the user sees. Be it graphical elements, css art, user interface design, content strategies, copywriting or mobile adaption, to mention some examples – when looking for help, a buyer tends to view the needs from the perspective of the user.

This is, of course, a necessary and good thing. But it poses some challenges for those of us working as developers.

37Signals advocates that everybody should be writers, and makes sure that the designers are the team leaders. I think this makes sense, especially for a distributed company. You will need to communicate, and the better you do it, the better off you are, and the more you get done. And last but not least, the better you communicate, the better you are at enabling others to get stuff done.

Designers as team leaders are a sensible idea. They are in charge of the communication. They might not always be the ones that are capable of implementing a complex algorithm, but they are the ones that bind together users and developers.

But I digress.

If you look at how the terms are used in everyday-lingo, the separation is even simpler. Developers make software, or web pages. Designers make them look good.

The lines are more blurry that that. Designers often implement their designs, and developers more times than not need to implement designs without support of artists. The skills aren’t mutually exclusive either.

But you’ll need to know what you are looking for. Know that more times than not creating a website is more than a single-person job, if it is to be done well. And, even though most is able to a certain degree to do both, be specific. Do you want a search interface, or the algorithm?

Lessons learned @ Grensesnittet Javascript meetup

May 13th, 2011 § 0 comments § permalink

Two days ago, I attended the “Skriv bedre javascript” meetup in Trondheim.

7 quick lectures, 10 minutes each. One half broken iPhone as a notepad.

  • parseInt has not one, but two parameters. Pass 10, and you’ll avoid silly problems because the passed string is interpreted as the wrong numeric system.
  • If you use (for something in yourarray), you’ll most likely end up with tons more of entries than expected. Better use HasOwnProperty, or a regular for loop.
  • If you skip on the semi colons, the parser will guess what you were trying to say.
  • If you loop strings, string[i] == ‘A’ is…. unstabile. Use string.charAt(i) == ‘A’
  • If your function takes time to complete, setInterval will get you into trouble, queuing calls to your function. Rewrite to use setTimeout at the end of the function instead.
  • eval is evil
  • Be aware of closures
  • Javascript has packages
  • Douglas Crockford knows javascript better than both you and I. No, really!
  • Javascript has global scope and function scope, but not block scope. Srry.
  • Hoisting has some rules about parsing variable declarations. If you run into weirdness problems, that might be the answer. Declare your variables at the top, please.
  • jsLint checks the quality of your code according to some criterias, but isn’t the one-stop solution.
  • Avoid alert and console.log. Both suck in all or some browsers (I’m looking at you, IE). Use a debugger framework, such as log4js, blackbird or Ben Alman javascript debugger.
  • Easy jquery plugins are…. well…. as easy as …. erhm…. let’s just say they are simple to implement.
  • jquery UI Widget Factory structures a way to create plugins. Part of jquery UI.
  • Cool stuff in the HTML5 js library: a few new calls, web storage, offline application cache api, web workers, web sockets, drag/drop, geo location, canvas and audio manipulation.
  • Same origin policy could have been a problem for js-based twitter clients, except for the entry of json-p.
  • Prezi is nice for presentations.
  • Microtemplates, by a guy named John Reisig.

And, at the top of this, some more details about Canvas and some of the stuff named here, that I just decided to Google when I need it. Two hours well spent.

This post is for the technical oriented among us. For the rest of you, sorry – we’ll get back to the regular broadcasting soon enough!

Ta det piano

September 12th, 2010 § 0 comments § permalink

Denne gangen tenkte jeg å kun vise et eksempel på bruk av jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jQuery - ta det piano</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
displayKeys();
});

$(window).resize(function() {
displayKeys();
});

function displayKeys() {
$("body").html('');

// Piano layout coped from the following image: http://en.wikipedia.org/wiki/File:D274.jpg,
// through the follwing article: http://en.wikipedia.org/wiki/Musical_keyboard

// Set up the keyboard container, which should hold all the keys
$("body").append('<div id="pianocontainer"></div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
for(var i=1; i<=7;i++) {
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
$("#pianocontainer").append('<div>&nbsp;</div>');
}
$("#pianocontainer").append('<div>&nbsp;</div>');

// Style the container and the keys. This should be done through regular css in most of the cases,
// but we're using jquery, since this is what the tutorial is all about

// Doing static css assignments first, so these can be used in the calculations later
$("#pianocontainer").css('border', '1px solid gray');
$("div.pianokey").not("div.minorkey").css('float', 'left');
$("div.pianokey").not("div.minorkey").css('border', '1px solid lightgray');
$("div.minorkey").css('background-color', 'black');
$("div.minorkey").css('position', 'absolute');
$("#pianocontainer, div.pianokey").css('height', Math.min(200, $(document).height() * 2 / 3));

// Setting the width of each of the piano keys
$("div.pianokey").not("div.minorkey").css('width', ($("#pianocontainer").width() - 2) / $("div.pianokey").not("div.minorkey").length - 2 * $("div.pianokey").css('border').substring(0, $("div.pianokey").css('border').indexOf("px"))); // Requires the border to be specified in format of ("border: Xpx ..."), where X is the border width. Subtracting the left and right border in the width calculation

// Height and width of the minor keys
$("div.minorkey").css('height', $("#pianocontainer").height() * (2 / 3));                    // 2/3 of regular height
$("div.minorkey").css('width', $("div.pianokey").not("div.minorkey").width() * (2 / 3));    // 2/3 of regular width

// Each minor key is absolutely positioned - need to set left attribute based on their siblings
$.each($("div.minorkey"), function(key, element) {
$(element).css('left', $(element).next().position().left - $(element).width() / 2);
});
}
</script>
</head>
<body></body>
</html>

Kopier koden over til et html-dokument, og vis det i nettleseren din. Du skal da få se et piano. Foreløpig gjør dette pianoet ikke spesielt mye, det skal vi prøve å få til etter hvert.

$(“kaffe eller te”): Om å velge elementer med jQuery

September 9th, 2010 § 0 comments § permalink

En av de viktigste… Den viktigste tingen du kan lære deg hvis du skal jobbe med jQuery – den viktigste tingen du må lære deg – er å bruke såkalte selectors. Det er ikke i nærheten av å være så skummelt som det kan høres ut – selectors er egentlig bare jQuery-språk for et uttrykk som bestemmer hvilke html-element du vil jobbe med.

Jeg var såvidt innom selectors i forrige ukes introduksjonspost, men det er et så viktig tema at det fortjener en egen uke. Hvis vi tar koden vi lagde sist:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Å begynne med jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("body").css('background-color', 'yellow');
});
</script>
</head>
<body>
<p>Denne teksten skal bli grønn.</p>
</body>
</html>

I dette eksempelet bruker vi to selectors. document er den første, og “body” er den andre. document står, sammen med window, litt i særstilling – de fleste selectors skal stå i anførselstegn.

De gode nyhetene er at hvis du har drevet litt med css, så kjenner du tegningen allerede – jQuery har gjort en veldig god innsats for å bruke samme måte for å la oss velge et eller flere element som det css har.

De viktigste tingene å huske på:

  • $(“.klassenavn”): Hvis du skal velge elementer med en gitt klasse, så velger du klassenavnet med et punktum foran.
  • $(“#id”): Hvis du skal velge et element med en gitt id, så velg med en skigard (#) foran. Men husk på at hvis du bruker id-er, og det gjør du fort, så må det bare være en av hver id i dokumentet ditt. Hvis ikke blir den første valgt, og du blir forvirret :)
  • Skal du velge et barn, for eksempel et p-element inni et div-element, begge med gitt id, så kan du gjøre slik: $(“#div-element > #p-element”)
  • Hvis du ville velge begge to, så fungerer “(#div-element, #p-element”)
  • Du kan gjøre vanvittig mye, til og med en del ting du ikke kan i css – jQuery Selectors-dokumentasjonen har mye snadder du kan lese deg opp på.

Så da modifiserer vi litt på forrige ukes kode, så skal du få et eksempel å teste deg på – det kan godt hende du vil trenger dokumentasjonen for å finne svaret.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Å begynne med jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Sett inn koden din her
});
</script>
</head>
<body>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
<p>Denne teksten skal bli grønn.</p>
<p>Denne teksten skal bli blå.</p>
</body>
</html>

Kan du – uten å endre på selve html-koden – sørge for at de forskjellige tekstavsnittene får de fargene de skal, og ikke blir stående ufargelagt og flau. Det er flere måter å løse dette på.

Hvis du har lyst til å prøve deg, så post gjerne svar eller spørsmål i kommentarfeltet.

TechTips: Roundcube Webmail

April 5th, 2010 § 0 comments § permalink

Et enkelt tips til deg som kjører din egen mailserver – særlig på Windows. Jeg har gjort dette et års tid nå, og lurer egnetlig på hvorfor jeg har brukt så lang tid på å sette opp webmail, sånn at det er mulig å sjekke mail uansett om jeg er ved min egen datamaskin eller ikke.

RoundCube er en enkel, men veldig elegant webmailløsning. Installasjonen består av å dumpe filene på rett plass, konfigurere databasetilkoblingen, kjøre noen ferdiglagde databasespørringer og en 3-trinns enkel installasjon hvor stort sett alt går ut på å sjekke at man har de påkrevde php-modulene.

En av grunnene for at jeg valgte Roundcube var det enkle oppsettet – spesialdesignet for hMailServer som jeg kjører. I utgangspunktet så jeg på både Horde og SquirrelMail, men begge har oppsett som – kort oppsummert – er veldig mye mer klønete når jeg utvikler på Mac og kjører en Windows server.  Når jeg i tillegg ikke har spesielt store behov utover å kunne sjekke og svare på mail, var den ajax-baserte Roundcube et valg som falt naturlig.

Når det er sagt, dette er et førsteinntrykksomtale – jeg har hatt Roundcube installert i ca 1 døgn. Hvis jeg – mot formodning – skulle forandre mening så skal jeg selvfølgelig omtale dette senere.