Bygg med npm

Jag har äntligen insett att man kan bygga sina projekt med npm istället för Gulp eller Grunt. Jag tycker att Gulp och Javascript känns onödigt komplicerat, och vill hellre använda GNU Make och bash-skript, men npm kanske är ett bra mellanting?

Istället för att jag berättar hur man gör, läs här:

Här kommer ändå ett väldigt enkelt exempel på en package.json som jag satte ihop, med enbart de relevanta delarna:

{
  "devDependencies": {
    "npm-run-all": "^4.1.1", 
    "node-sass": "^4.5.3",
    "typescript": "^2.4.2"
  },
  "scripts": {
    "clean": "rm -rf dist/*",
    "build": "npm-run-all -p build:*",
    "watch": "npm-run-all -p watch:*",
    "build:styles": "node-sass src/styles -o dist/styles",
    "watch:styles": "node-sass --watch src/styles -o dist/styles",
    "build:scripts": "tsc",
    "watch:scripts": "tsc --watch"
  }
}

Du bygger med kommandot npm run build och kompilerar vid varje förändring med npm run watch.

Det utgår från att Javascript/Typescript ligger i src/scripts och SCSS/CSS ligger i src/styles. Output hamnar sedan i mappen dist.

Utöver detta krävs en tsconfig.json med information till Typescript-kompilatorn:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "commonjs",
        "allowJs": true,
        "outDir": "dist/scripts"
    },
    "include": [
        "src/scripts/*.ts",
        "src/scripts/*.js"
    ]
}

Påminnelse: du kanske inte behöver jQuery ”för det där”

You Might Not Need jQuery är en bra påminnelse om att jQuery visserligen är smidigt och behändigt, men att ”vanlig” Javascript har utvecklats mycket sedan jQuery lanserades 2006.

I många fall är jQuery onödigt, och You Might Not Need jQuery visar mängder med exempel på hur man implementerar motsvarande funktion i ren Javascript.

5 tips för snabbare utveckling av WordPress-tema

När jag utvecklar en webbplats i WordPress står temat (eng. theme, även kallat ”mall”) i centrum, eftersom allt i WordPress kretsar kring temat. Det är oftast också det som tar längst tid — ett komplett tema är väldigt omfattande.

Den senaste tiden har jag utvecklat flera WordPress-teman och har lärt mig ett par knep som spar mycket tid. Självklart är alla projekt olika, men …

Utgå från Underscores (_s)

Det här är det viktigaste tipset, som kommer bespara dig många timmar eller dagars arbete och frustration:

Utveckla aldrig mer ett WordPress-tema från grunden! Det finns många grundstommar som du kan använda för att spara flera arbetsdagar och få ett mer komplett och professionellt tema. Nu menar jag inte parent themes eller ramverk, utan ett ”färdigt” tema som är gjort för att vidareutveckla och snygga till precis hur som helst.

Jag har flera gånger använd Underscores, som är framtaget av Automattic och därför förmodligen är det bästa alternativet. Så här förklarar de själva hur fantastiskt det är:

It incorporates code and tough lessons learned from the best WordPress themes: Kubrick, The Sandbox, Thematic, Twenty Ten, Toolbox, Twenty Eleven … As each new default theme is released, _s will be reviewed and updated. … Likewise with every theme the WordPress.com Theme Team builds using _s. As we come up with new best practices and learn new lessons in our themes, all that code makes its way back to _s.

Jag hoppas att du blivit övertygad.

Färdigt innehåll för testning

Det är omöjligt att utveckla ett tema utan något innehåll på webbplatsen, men att skapa fejkade menyer, widgets, kategorier, etiketter och alla tänkbara varianter av innehåll tar lång tid. Som tur är finns det färdigt innehåll som du kan importera!

WP Test är en XML-fil med (nästan) allt innehåll som du behöver för att utveckla och testa dina teman! Du kommer förmodligen utbrista ”oj, ja, det hade jag inte tänkt på” flera gånger när du granskar ditt tema.

Generator för Custom Post Types

Om du utvecklar ett WordPress-tema som inte bara ska vara en blogg, kommer du förmodligen behöva skapa en eller flera custom post types. Det är inte alls krångligt om du använder en generator som skapar PHP-koden åt dig, exempelvis den här eller den här.

Duger det med ett child theme?

Ett ännu enklare sätt att utveckla ett tema på än att använda en grundmall som Underscores, är att skapa ett child theme. Då skapar du ett nytt tema som ärver utseende och funktioner från ett annat (kallat parent theme). Du blir förstås mer begränsad och bör välja ditt parent theme med omsorg, men det kan löna sig!

Temat som den här bloggen använder är ett (egenutvecklat) child theme till Twenty Twelve.

Instant WordPress (endast Windows)

Instant WordPress är ett fristående program som startar en webb- och databasserver med förinstallerat WordPress på din Windows-dator. Du får alltså en lokal utvecklingsserver väldigt enkelt och behöver inte ladda upp dina filer via ftp eller liknande för att testa. Mycket smidigt!

Avslutande tips

Utöver detta bör du förstås ta en titt i manualen och kanske läsa en uppdaterad bok om WordPress-utveckling. WordPress förändras ganska snabbt, och om du inte har utvecklat med det på länge, rekommenderar jag att du tar en titt på nymodigheterna som kan förenkla för dig.

Hur fungerar det här med teckenkodning egentligen?

Det här inlägget publicerades ursprungligen på bloggen Entreprenörd 29 januari 2010.

Något som jag själv och väldigt många andra har svårt att förstå fullt ut är hur teckenkodning fungerar. Du vet det här med ASCII, UTF-8, ISO 8859-1 och så vidare… Vad är det egentligen? Och när man ser en text med ö istället för våra svenska tecken – vad är det som har hänt?

Fortsätt läsa Hur fungerar det här med teckenkodning egentligen?

Twitter släpper två bra bibliotek: Bootstrap och Hogan.js

I augusti släppte Twitter  Bootstrap, ”a front-end toolkit for rapidly developing web applications”. Det är ett paket med HTML, CSS och Javascript som gör det busenkelt att skapa snygga webbapplikationer. Utseendet kommer förstås påminna väldigt mycket om Twitter, vilket inte borde avskräcka alltför mycket…

Idag släppte de också Hogan.js, ett templating-ramverk för Javascript. Jag har inte tittat närmare på det, men eftersom det kommer från Twitter, utgår jag från att det är bra grejer.

Kolla in och testa genast!

Introduktion till Git

En bra video för dig som vill lära dig versionshanteringssystemet Git:

 

För att sedan kolla upp detaljer, kan du använda ”boken” Pro Git som finns gratis på nätet.

Jag har tidigare skrivit om Subversion, men numera skulle jag nog rekommendera Git eller Mercurial. (Läs Git is like MacGyver, Mercurial is like James Bond om du vill veta skillnaderna på ett övergripande plan.)

Använd inte MD5 eller SHA-1

Det är egentligen ganska enkelt: använd inte md5 eller sha-1 för att hasha dina användares lösenord. Inte ens om du använder salt.

United States Computer Emergency Readiness Team skrev 2008:

Software developers, Certification Authorities, website owners, and users should avoid using the MD5 algorithm in any capacity. As previous research has demonstrated, it should be considered cryptographically broken and unsuitable for further use.

Computer Security Division vid NIST skrev 2006:

Federal agencies should stop using SHA-1 for digital signatures, digital time stamping and other applications that require collision resistance as soon as practical, and must use the SHA-2 family of hash functions for these applications after 2010.

Säkerhetsgurun Ron Rivest skrev 2005: ”… now that md5 and sha1 are both clearly broken (in terms of collision-resistance).”

Förutom att algoritmerna har påvisade säkerhetsbrister går det väldigt snabbt att skapa uppslagstabeller för att ta reda på vilket lösenord som döljer sig bakom ett hash.

Med optimerade algoritmer och genom att använda grafikkort för att beräkna hashsummorna (de är snabbare än vanliga processorer på detta), har man kommit upp i 700 miljoner hashar per sekund för SHA-1. Mina tester visar att MD5 går ännu snabbare.

Det betyder att ditt ”säkra” lösenord på 8 tecken (ex. ”LvZ49l3U”, ”ibOQ3sjL”, ”LwL5opHp”) knäcks på en vecka. Om du är som de flesta och har lösenord på max 6 tecken, är det knäckt på under en halvtimme.

(Det finns också färdiga sådana uppslagstabeller som kallas rainbow tables som man kan använda för att blixtsnabbt knäcka alla tänkbara lösenord.)

Jag skrev tidigare en kort introduktion till hur man lagrar lösenord säkert, men sedan dess har jag lärt mig mer och kan sammanfatta det så här:

Använd SHA-256 med key stretching och dynamiskt salt för varje användare eller bcrypt med Blowfish (PHP-kodare bör använda PHPass). Då klarar du dig rätt bra.

Introduktion till Node.js

Vad är Node.js?

Node.js (kallas oftast ”Node”, rätt och slätt) är i grunden ett program som kan köra din Javascript-kod från kommandoraden – utan en webbläsare. Node.js gör det också möjligt att använda nätverket och filsystemet från Javascript mycket bättre än vad som är möjligt i dagens webbläsare.

I praktiken används Node.js mest som en webbserver, men det är egentligen bara ett av många möjliga användningsområden (men också det som Node.js-folket själva framhåller mest).

Ett av målen med Node.js är att det ska vara skalbart och alltså kunna hantera väldigt många samtidiga besökare på exempelvis en webbtjänst (men det är kanske inte riktigt så enkelt som att Node.js löser alla problem med skalbarhet).

Något som kan vara värt att tänka på är att med Node.js kommer du närmare hårdvaran än med exempelvis PHP på Apache. Node.js är alltså inte en högre abstraktionsnivå utan en lägre – vilket ger större flexibilitet men också mer komplexitet.

Installation

Du kan installera Node.js på flera olika sätt, men det enklaste är via en pakethanterare. I Ubuntu kan du använda apt för att installera Node.js:

$ sudo apt-get install python-software-properties
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs

npm

Node Package Manager (förkortas npm) är en pakethanterare för Node.js, ungefär som PEAR för PHP, RubyGems för Ruby eller pip för Python. Npm gör det enkelt att installera moduler som du behöver.

Det enkla sättet att installera npm på:

$ curl http://npmjs.org/install.sh | sudo sh

”Hello, world!”

Skapa en fil helloworld.js och skriv in denna kodrad:

console.log('Hello, world!');

Kör det sedan från kommandoraden med detta kommando:

$ node helloworld

Enkelt!

Webbserver

En introduktion till Node.js måste förstås inkludera en enkel webbserver också. För att göra det enkelt för oss använder vi modulen Express istället för att använda den råa, inbyggda http-modulen.

$ npm install express

Skapa sedan en textfil, exempelvis webserver.js och skriv lite kod:

var app = require('express').createServer();

app.get('/', function(req, res){
    res.send('Hello, world!');
});

app.listen(3000);

Funktionen require() läser in modulen och createServer() skapar ett server-objekt som vi kallar ”app”. Genom att anropa metoder såsom get() och post() på app, talar vi om för objektet vad som ska hända när en viss URL på servern anropas. Det blir alltså ett slags router eller front controller.

Argumenten req och res står för request och response. req innehåller allt du behöver veta om anropet, och res är objektet som ska returneras till webbläsaren när du är färdig.

Metoden listen() säger sedan åt Node.js att vi vill lyssna på port 3000 och hantera alla http-anrop som kommer in där. Servern kommer fortsätta att lyssna tills du stänger av Node.js (ex. med Ctrl+C) eller tills något undantag eller fel inträffar.

Testkör servern exempelvis så här:

$ node webserver &
$ curl localhost:3000
$ killall node

Läs mer

Jag hoppas att du har lärt dig grunderna i Node.js, men naturligtvis finns det massor att upptäcka och lära sig:

Tips på artiklar om programmering

Riktigt bra artiklar som jag har lärt mig mycket från:

  1. The M in MVC: Why Models are Misunderstood and Unappreciated. ”Controllers must define application behaviour only in the sense that they map user input onto calls in Models, but beyond that role it should be clear all other application logic is contained within the Model.”
  2. ORM is an anti-pattern. ”OO design cannot represent relational data in an efficient way; this is a fundamental limitation of OO design that ORM cannot fix.”
  3. Understanding typeof, instanceof and constructor in JavaScript. ”They say in JavaScript “everything is an object”. They’re wrong. Some types in JavaScript are so-called “primitive types”, and they don’t act like objects.”
  4. One of the Best Bits of Programming Advice I ever Got. ”… And that giving it a better name would tend to make the design more encapsulated, less spaghetti code, in short more object oriented.”
  5. Nobody Understands REST or HTTP. ”Let’s talk about a few cases where either REST or HTTP (which is clearly RESTful in its design) solves a common web development problem.”

jQuery-events och ”return false”

Douglas Neiner på Fuel Your Coding skriver en bra artikel om varför du kanske inte borde avsluta alla jQuery-event-callbacks med ”return false” (för att undvika standardbeteendet). Rekommenderas om du vill lära dig mer om hur events propagerar.

In most situations where you would use return false what you really want is e.preventDefault(). … This does everything we want without prohibiting parent elements from receiving these events as well. The fewer restrictions you place on your code the more flexible it will be to maintain.