Etikettarkiv: javascript

Startups att hålla koll på

Det händer en hel del i Startup Sverige och flertalet intressanta projekt smyglanseras.

Tänkte lista några av mina favoriter:

Anton Johansson gör en pivot med Osom samt lanserar snart något på Alltid.se. Petter Palander promotar Malmös Startups via malmostartups.com.

Kristofer Björkman aka dojan har lämnat MyNewsdesk bakom sig för ett tag sedan och kör nu Outdoormap/naturkartan, din digitala friluftskarta. Väntar tills Västerås dyker upp på kartan!

vackertväderVackertväder.se som drivs av Tomas Wennström samt broder visar nu även kvävedioxid- och ozon-halter och först ut är Helsingborg. Och när vi ändå är inne på Helsingborg så har staden lyckats att rekryterat grymma Joakim Jardenberg samt Andreas Krohn.

Att Recepten.se är en besökskanon råder det ignen tvivel om. Susanne Jarl som driver sajten lagar alla recept samt fotograferar. Här hemma blir det bl.a. pannacotta i morgon.

appmagasinetFörutom att skriva en massa bra böcker om WordPress och driva OddAlice så har nu Thord Daniel Hedengren aka TDH även startat AppMagasinet. En tidning som skickas ut via E-post en gång i veckan.

Sist men inte minst så utvecklar Ted Valentin sitt nätverk med Populära Hotell, ny fin graf på Socialanyheter samt boutiquehotel.me som Ted har tillsammans med Jonatan Heyman.

boutique hotelGillar du JavaScript? Du missar väl inte konferensen NordicJS som går av stapeln 18-19 September. Och du har väl sett att HackerNytt har fått nytt utseende?

Google Adsense nu med https-stöd

Google har nu lagt in stöd för https-sajter för de som använder Google Adsense. Rätt minimal förändring som behövs göras för att visa koden:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Denna kodsnutt gäller så klart om du använder asynkron annonskod, vilket jag hoppas att du gör. Denna förändring gör bl.a. att eventuella felmeddelanden i webbläsaren såsom nedan försvinner om du visar annonser på en https-sajt:

https varning

Att lämna ute http eller https i sökvägen och i stället börja med två slash \\ kallas för protokoll-relativa URL:er och är ett bra sätt att ej erhålla en mixad http/https-sida av misstag.

PS: Använd rabattkoden UTVBLG för 100 kr rabatt på SSL-certifikat via min tjänst https.se

Källa: Google

Lär dig JavaScript

Jag har kodat JQuery i många år och har aldrig riktigt skrivit sådär jättemånga rader kod i enbart JavaScript måste jag erkänna. Så tänkte att det nu är dags att tag i JavaScript-kompetensen.

Sökte av marknaden lite efter böcker och införskaffade några stycken som jag skickade in på min läsplatta med hjälp av grymma ReadMill som jag använder för alla mina eBöcker nuförtiden.

Så nu har jag nästan läst klart min första JavaScript-bok och känner att jag har äntligen har mer koll. Testade att göra ett enkelt script som loggar musrörelser på en webbsida och skickar över till servern regelbundet.  Testa mousemove.html här.

Boken som är ett måsteläsning om man vill lära sig JavaScript är följande:

lär dig javascript

Eloquent JavaScript

Stötta gärna den andra upplagan som nu crowdfoundas (första utgåvan av boken är från 2007). Tipstack till Patrik Spathon.

Vad händer?

blogbackupr

En liten statusuppdatering vad jag pysslar med eftersom jag är så dålig på att uppdatera bloggen:

Håller på att sälja av Blogbackupr + Bloggbackup och kommer snart att läggas upp på Flippa.

Har byggt om lite på https.se så det är lättare att beställa SSL-certifikat. Bl.a. möjligheten att välja faktura direkt och använder Billogram. Dock ej deras API ännu, men det kommer nog.

Förbereder sista delarna på en ny startup som kommer att ha release på Internetdagarna.

Underlättar administration av alla mina servrar med Python + Fabric och försöker bli en ninja på JavaScript.

På det mer personliga planet så har jag anmält mig till IRONMAN Kalmar 2014 och tränar en hel del inför tävlingen.

PhantomJS löser mina problem

Ett problem som jag då och då stöter på är problemet med att ladda hem och analysera webbsidor från kommandoraden (CLI) via mina servrar på Amazon EC2 exempelvis. Det går förvisso att köra headless browsing med Xvfb och så men det blir aldrig riktigt bra utan mer ett fulhack.

För några dagar sedan så kom jag i kontakt med PhantomJS som är just precis det som jag söker, en webkit-läsare med JavaScript API och som lirar prefekt från mitt kommandoskal. Det är lätt och enkelt att göra skärmdumpar eller HAR-rapporter (http archive format).

För att exempelvis mäta laddningstiden för en webbsida inklusive samtliga objekt såsom css, javascript så behövs enbart följande kodsnutt:

var page = require('webpage').create(),
t, address;

if (phantom.args.length === 0) {
 console.log('Usage: loadspeed.js <some URL>');
 phantom.exit();
} else {
 t = Date.now();
 address = phantom.args[0];
 page.open(address, function (status) {
 if (status !== 'success') {
  console.log('FAIL to load the address');
 } else {
  t = Date.now() - t;
  console.log('Loading time ' + t + ' msec');
 }
 phantom.exit();
 });
}
Och sen körs sedan med:
$ phantomjs loadspeed.js http://www.google.com
Ladda hem PhantomJS från PhantomJS.org och kolla även in forken CasperJS.
Uppdatering: Ett problem som tyvärr PhantomJS är DNS-timings i HAR-output. Se här.

Så kommer du igång med Node.js

Först och främst så kanske jag ska skriva lite om vad Node.js är för något. Som du ser av filändelsen så är det ett JavaScript-språk och används på serversidan för att kommunicera med exempelvis en webbklient (webbläsare).

Node.js är eventbaserat, litet och lätt till skillnad mot exempelvis Apache. Dock är det värt att notera att Node.js inte är är skapat för att lösa alla problem utan har uppstått från realtidswebbens behov av snabb, skalbar och minnessnål.

Prestandamässigt så kan Node.js jämföras med Nginx (när enbart webbsidor levereras). Bland användare av Node.js så kan Yammer och Plurk nämnas.

— Installation —

Ladda hem källkoden som tar.gz eller zip från Github: https://github.com/joyent/node eller med kommandot:

$ git clone git://github.com/ry/node.git

Gå sedan in i katalogen som skapats och skriv ./configure och då skall det varna om något saknas, sen är det bara skriva make. Ta en kopp kaffe och vänta några minuter. Bland annat så byggs Googles V8 JavaScript-motor.

Om du som jag använder FreeBSD så kommer din byggprocess att misslyckas på två ställen, först och främst så måste du använda gmake istället för make och sedan så måste du lägga på den patch som återfinnes här.

'build' finished successfully (2m10.790s)
$ ./node -v
v0.5.0-pre

För att lättare komma åt node-binären samt dess verktyg så glöm inte att skriva gmake install (eller make install).

— Hello world med Node.JS —

Nu är det dags att skriva vårt första script samt se till att Node hanterar detta program korrekt. Scriptet helloworld.js ser ut enligt följande:

var sys = require("sys");
var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(80);

console.log('Server running at port 80');

Sedan för att se till att node exekverar och levererar ovan på TCP port 80 så skriver vi enligt följande:

$ sudo node helloworld.js
Server running at port 80

Observera att du måste köra detta med root-behörighet eftersom vi lyssnar på port 80. Många väljer att använda port 8080 eller liknande men det är inget jag rekommenderar eftersom många brandväggar ej släpper igenom denna port. Läs denna guide hur du undviker att köra som root men ändå kan använda port 80. Att köra program som root är något som du vill undvika i största mån då detta kan innebära en säkerhetsrisk.

Koden ovan är tämligen självförklarande. Om du vill använda Nginx + PHP på samma server så kan du binda till olika IP-nummer genom att ändra .listen(80); till .listen(80, ”1.2.3.4”); eller det IP-nummer du vill binda till. Du måste även binda Nginx till det andra IP-nummret.

Node.JS i bakgrunden

Om du vill ha möjligheten att lägga program i bakgrunden vilket är troligt i en skarp miljö så måste du göra enligt följande förfarande då det saknas en modul vid namn daemon.node.

  1. Ladda hem koden från https://github.com/Slashed/daemon.node
  2. Kompilera med hjälp av verktyget node-waf (följer med Node.JS) på följande sätt: node-waf configure build
  3. Lägg den binär med sökväg build/default/daemon.node i samma mapp som helloworld.js
  4. Byt ut koden mot nedan där två rader är tillagda:
var sys = require("sys");
var daemon = require("./daemon");
var http = require('http');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(80);

console.log('Server running at port 80');
daemon.start();

Startar du helloworld.js nu så läggs tjänsten i bakgrunden.

Trevligt! Hör av dig om du har några frågor. Nästa gång så går jag in på hur du kan kommunicera lätt mellan Redis och webbläsaren med hjälp av Node.JS

Sökmotoroptimering

Link Popularity vs. PageRank vs. Yoda

Jag tänkte försöka mig på att förklara vad sökmotoroptimering är för mig och vad jag brukar göra för att underlätta för sökmotorer och människor att ta del av den information som återfinnes på de tjänster eller webbplatser jag utvecklar.

Sökmotoroptimering för mig handlar i grund och botten om god webbsidehygien, vilket kan sammanfattas i ungefär dessa punkter:

  1. Se till att titlar och h1-rubrik matchar innehållet. Inte för lång och inte för kort och så beskrivande som möjligt
  2. Undvik tricks i JavaScript som gör det svårt för Googlebot att hitta länkar
  3. Visa populära inlägg, sökningar eller senaste kommentarer
  4. Sajten måste vara snabb, hitta flaskhalsar med hjälp av Xdebug (läs även min MySQL guide)
  5. Se hur prestandan ser ut i Google Webmaster tools
  6. Se till att 404-sidor verkligen returnerar 404 och att sidor som finnes returnerar HTTP kod 200 (annars indexeras inget)
  7. Använd site: domaännamn.se på Google för att se hur sidorna ser ut hos Google
  8. Skapa sitemap
  9. Använd verktyg såsom AddThis för att underlätta delning till sociala medier
  10. Om möjligt, använd mikrodata
  11. Se till att URL-struktur är fin, ungefär: /detta-ar-en-sida/
  12. Titlar på sidorna skall komma först, sedan namnet på webbtjänsten. Så unika som möjligt
  13. Tagga innehåll eller lägg på annan typ av metadata som underlättar urval
  14. Breadcrumbs

Gillar du detta inlägg? Då rekommenderar jag även att du läser min checklista som jag använder innan lansering som delvis överlappar med denna lista.

Har du något tips som jag missat här?

Uppdatering: Bästa SEO-guiden ever (jpg). Via SSBD

Att tänka på innan lansering

CC BY-NC-SA http://www.flickr.com/photos/adesigna/4090782772/Innan jag lanserar en ny webbsajt så är det några saker jag brukar gå igenom som en ren hygienåtgärd. Dessa kan vara bra att använda som en checklista. Fungerar för WordPress, egenutvecklade sajter etc:

  • Titta efter eventuella 404 (not found) i webbserverloggarna. Exempel: En favicon som pekats ut med meta-tagg i header var felpekad
  • Titta efter felmeddelanden i errorloggen. Exempel: Nu senast så såg jag att minnesinställningarna för PHP var ställda för lågt, fick öka till 256MB
  • Se till att HTML, CSS samt RSS-feed är korrekt med hjälp av W3C html validator, CSS validator och Feed validator
  • Använd Firebug för att hitta eventuella 404:or som är offsite. Kanske anropas bilder i en widget eller dylikt
  • Prestandatest med Firebug + Google Pagespeed. Kanske även med LoadImpact eller Apache Bench.
  • Se till att korrekt HTTP-statuskoder skickas tillbaka, ta stickprov. Exempel: Har varit med om att sidor returnerat 404:or vilket inte märks vid vanlig webbsurf men Google kommer inte att indexera
  • Lägg till Google Analytics kod samt lägg upp sajten i Google Webmaster tools
  • Testa att allt ser korrekt ut med IE, Chrome, FF och Safari (på Mac + Win om möjligt)
  • Se till att sitemap finnes, är genererad och innehåller sidor
  • Ta backup!
  • Verifiera att kontaktuppgifter eller kontaktforumlär finnes och fungerar
  • Gå igenom CSS, JavaScript och HTML-kod och ta bort sådant som kan vara överflödigt
  • Minifiera CSS
  • Uppdatering: Se till att sajten/servern övervakas av Pingdom
  • Uppdatering 2: Se att sökmotorhygienen är bra. Titel, url och h1 matchar exempelvis
  • Uppdatering 3: Informera om cookies samt se till att det framgår vilket företag eller person som står bakom sajten
  • Uppdatering 4: Titta efter eventuella JavaScript-fel i javascript-konsollen i din webbläsare
  • Uppdatering 5: Hur ser sajten ut på mobiltelefon?

Lämna gärna en kommentar med fler förslag!

Google Instant Preview

Jag har funderat lite på Google Instant Preview och vad det kan innebära för oss som skapar webbtjänster. Google kan inte sedantidigare indexera JavaScript men kan i viss utsträckning följa länkar som återfinns i JavaScript-kod.

Att Google nu gör tumnaglar på webbsidor innebär att de använder Google Chrome i såkallat ”headless mode” under Xvfb exempelvis och sparar sedan ned skärmdumpar av sidor.

Detta får till följd att Google exekverar JavaScript-kod på sidorna och kan indexera JavaScript-kod som exekveras vid sidbesök och de kommer således kunna indexera fler webbsidor. Yay!

Kommer du på några fler saker som kan påverkas? Skriv gärna en kommentar och berätta vad du tror.

JavaScript och säkerhet

Säkerheten är inte starkare än den svagaste länken sägs det ju. Och i mitt utvecklingsarbete när det gäller analys av webbsidor som bl.a DomainTool delvis använder sig av så har jag insett att det inte är helt lätt att göra rätt när JavaScript är med i leken.

Ta SwedBank som exempel:

SwedBanks förstasida laddar in ett JavaScript från pix04.revsci.net som verkar tillhöra AudienceScience. Det intressanta i detta är ju att DynDNS används som namnservrar för revsci.net. Och om någon kommer ihåg så var det just DynDNS som användes i attacken för att peka om twitter.com för någon vecka sedan.

Så vad innebär detta då: Jo om någon kan modifiera trafiken, sökvägen, namnservrar eller JavaScriptet som laddas in så kan denne även ändra på SwedBanks förstasida. Och för att exempelvis komma åt Internetbanken hos Swedbank så måste man gå via förstasidan.

Inte nog med det, så obfuskeras detta JavaScript som laddas in från Revenue Science samt laddar in ännu mer JavaScript.

Var laddar du in JavaScript från?

Se även här när jag har undersökt externa anrop på några populära Svenska webbsidor.