Removing jQuery from GitHub.com frontend

In this post, we will explain a bit of history of how we started depending on jQuery in the first place, how we realized when it was no longer needed, and point out that—instead of replacing it with another library or framework—we were able to achieve everything that we needed using standard browser APIs.

Läs

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.

Mer om Git

För länge sedan skrev jag kort om hur man kommer igång med Git. Nu tänkte jag tipsa om några fler, och nyare, resurser för ett bra användande.

GitHubs interaktiva Git Tutorial är bra för nybörjaren.

För en förklaring till vad exempelvis indexet i Git egentligen är bra för (en mycket bra fråga!), kan du läsa My Git Workflow.

git-transportEtt arbetsflöde som jag tror har blivit väldigt populärt kommer från denna artikel: A successful Git branching model.

git-model

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.

Appar på Världsbokdagen

Imorgon är det Världsbokdagen 2013, en dag som vill uppmärksamma läsandet (och även upphovsrätten). Jag gillar böcker och vill lyfta fram några bok-appar som jag gillar.

Alla appar finns till både Android och iPhone. Du kan enkelt söka på namnet i App Store eller Google Play för att installera dem.

Goodreads

Jag har testat flera sociala bokappar och communities på webben, och Goodreads är den jag gillar bäst. Tyvärr känner jag knappt någon annan som är aktiv där, men jag kan ändå läsa andra människors recensioner, se och skapa listor som grupperar böcker inom samma ämne, gå med i grupper och få rekommendationer på böcker som passar mig.

Tack vare de 10 miljoner medlemmarna som betygsätter och recenserar böcker är det en guldgruva för att se om en bok kan vara intressant innan jag börjar läsa den.

Det är en engelsk app, men väldigt många svenska böcker finns med.

Amazon Kindle och Dito

De e-boksläsare som jag har fastnat för är Amazon Kindle (för engelska böcker) och Akademibokhandelns Dito (för svenska böcker). De är båda mycket bra appar och har ett stort utbud av böcker.

Apparna är gratis, men böckerna köper du i webbutikerna hos Amazon eller på Dito.se. De skickas sedan automatiskt till alla enheter där du har loggat in i deras respektive appar. Du kan börja läsa direkt.

En fördel med e-böcker är att du själv kan förstora eller förminska textstorleken för att passa dina ögon. En telefon eller surfplatta med riktigt bra skärm rekommenderas, men jag har läst ”tjocka” böcker på billiga, svartvita handdatorer långt innan iPhone uppfanns.

Audible och Storytel

Om du hellre lyssnar till böcker än läser dem, kan jag rekommendera Audible (för engelska böcker) och Storytel (för svenska böcker). Som tillbehör rekommenderas ett par bekväma hörlurar, men du kan också använda telefonens eller surfplattans högtalare.

Båda tjänsterna har ett prenumerationsbaserat system, där du betalar per månad, vilket skiljer sig från e-boksläsarna ovan. Själva apparna är dock gratis.

Hos Storytel betalar du för att få lyssna på böckerna som hos Spotify. Du äger alltså inte böckerna, och du kan inte lyssna på dem igen efter att du har avslutat ditt abonnemang.

Hos Audible ingår en eller två böcker per månad och kan lyssna till dem även om du avslutar ditt abonnemang.

En annan skillnad är att Storytel strömmar böckerna successivt när du lyssnar, men Audible kräver att du laddar ned hela boken över trådlöst nätverk innan du kan börja lyssna.

Läser eller lyssnar du till böcker på din telefon eller surfplatta? Dela gärna med dig av tips i kommentarsfältet.

Vad är Cross-Site Scripting och hur hindrar jag det?

Det här inlägget publicerades ursprungligen på bloggen Entreprenörd 15 december 2009.

Cross-Site Scripting (förkortas XSS) är ett säkerhetshål som tillåter en hacker att injicera Javascript på din webbplats och därigenom komma över andra användares känsliga uppgifter, exempelvis lösenord.

I Wikipedias artikel om Cross-Site Scripting kan vi läsa att XSS har blivit det vanligaste säkerhetshålet över huvud taget för programvara, och att vissa forskare hävdar att 68% av alla webbplatser är öppna för XSS-attacker. Historiskt har både Google (sökmotorn), GMail, Facebook och Wikipedia haft problem med XSS.

Fortsätt läsa ”Vad är Cross-Site Scripting och hur hindrar jag det?”

Hur lagrar man användarnas lösenord säkert?

Det här inlägget publicerades ursprungligen på bloggen Entreprenörd 9 mars 2009.

Det skrivs ibland om webbtjänster som blir hackade och lösenord som läcker ut. Då är det en fördel om lösenorden är skyddade på något sätt, men så är det inte alltid. Hur kan man då göra för att säkra lösenorden för den händelse att ens tjänst skulle bli hackad? Jag har definierat tre säkerhetsnivåer nedan.

Fortsätt läsa ”Hur lagrar man användarnas lösenord säkert?”

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?”