John Dahlström

Förra veckan drog tredje säsongen av Halt and Catch Fire igång! Jag har tidigare skrivit om serien här på bloggen och jag kan fortfarande rekommendera den.

Vissa serier kan som bekant bli sämre med tiden men den här växer fortfarande och ”The Battle For CTRL” är ständigt i rullning mellan de olika huvudkaraktärerna.

Serien sänds på bland annat C MORE.

Med Vue.js kan du skapa komponenter till din webbapplikation och kan jämföras med React och Angular. Till exempel kan du skapa komponenter för modals, grafer eller varför inte bygga en helt komplett Single Page Application.

Det går att bygga komponenterna på olika sätt men jag föredrar ”single file”-approachen där allt som rör komponenten finns i en fil. För mig så känns det som det ger mig mer kontroll. Bilden nedan visar ett sådant exempel:

För att komma igång installerar du Vue.js med NPM eller inkluderar med en CDN. Läs deras installations guide för mer instruktioner. För att se lite exempel på vad som går att göra med Vue.js så kolla på denna sidan där bland annat en Markdown Editor skapas med endast ett par rader kod.

Jag har bara börjat min resa med Vue.js men jag gillar det verkligen för att det var enkelt att komma igång med och det finns välskriven dokumentation. Version 2.0 är redan på väg med mycket nytt och Laravel har nu plockat in Vue.js som standard i sitt ramverk vilket gissningsvis kommer ge Vue.js ett större uppsving i popularitet. Så räkna med att höra mer om Vue.js om det var något helt nytt för dig tills nu.

Ikoner är inte helt enkla att skapa själv och kan vara dyra att köpa. Ett helt gratis alternativ som är enkelt att implementera är Font Awesome Icons som erbjuder över 600 ikoner. Det krävs ingen JavaScript eller något annat heller utan de är helt standalone.

Jag använder dem i nästan alla projekt jag håller på med idag för att snygga till designen och skapa lite mer liv och tydlighet. Till exempel använder jag dem här på bloggen. Jag har alltid kunnat hitta en ikon som passar till ändamålet vilket ofta inte är fallet om man köper ett icon pack som kanske bara innehåller de vanligaste ikonerna.

Enklaste sättet att börja använda Font Awesome är genom en CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

Efter det kan du visa en genom att skriva följande:

<i class="fa fa-thumbs-o-up"></i>

Vad Turbolinks gör är något så enkelt och simpelt att jag undrade varför jag inte testat göra detta på egen hand tidigare. Istället för att ladda hela sidan så hämtar Turbolinks en sida endast genom att plocka ut body-taggen. Med andra ord så läses inte alla resurser och bibliotek in igen varje gång du klickar på en länk vilket gör att varje sidladdning blir väldigt lättviktig. Självklart kan du använda dig av cache för att spara på krafterna men om du både har cache och Turbolinks så får du verkligen en snabb applikation.

Det är väldigt enkelt att implementera Turbolinks. Med NPM kan du dra hem filerna genom följande kommando:

npm install --save turbolinks

Sedan lägger du bara till detta i din applikation:

var Turbolinks = require("turbolinks")
Turbolinks.start()

Nu är allt klart! Turbolinks plockar upp alla klick på ”a href”-länkar och sköter resten åt dig.

Här kommer ett litet tips på ett litet javascript bibliotek som gör det möjligt att busenkelt ladda upp filer med ”drag and drop”.

Börja med att inkludera filerna från en CDN (du kan självklart ladda hem filerna lokalt också):

https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js

Sedan behöver du bara skriva följande:

var Dropzone = require("dropzone");

<form action="/file-upload"
      class="dropzone"
      id="my-awesome-dropzone"></form>

Nu är allt färdigt! Du har nu en liten ”dropzone” som du kan dra filer till som sedan skickas till din form action.

Vill du veta mer så bara gå in på Dropzone.js’s hemsida och så kan du läsa vidare där om eventuella anpassningar.

Jag vet att jag inte är ensam om att inte tycka om att skapa HTML och CSS strukturen på ett mail. Även om det börjar bli lite lättare tack vare bättre och ”snällare” e-postklienter så är det fortfarande en pärs.

Som tur är så finns det verktyg som Mailtrap som gör det lite enklare och du slipper även spamma din egna inkorg med massa testutskick. Enkelt att sätta upp och gratis om du bara testar 2 utskick/sekund och nöjer dig med en inkorg.

Några bonus features du får med Mailtrap är att du kan analysera om ditt mail är klassat som spam eller om det är svartlistat av någon anledning. Hela strukturen på mailet plus headers med mera kan visas och det blir genast mycket enklare att få en korrekt struktur.

Rekommenderas starkt till er som jobbar med mailutskick!

”Night Shift” är något du kan använda på iOS idag men inte på din Mac. Det som händer är att din skärm går från det blåa skenet till ett mer behagligt beige-liknande sken. Snällare mot ögonen helt enkelt.

Att sitta och jobba på kvällarna när det är mörkt runt omkring mig är något jag gör väldigt ofta. Med f.lux får jag ”Night Shift” på min Mac också och det blir genast mer behagligt för ögonen när jag jobbar länge i det skenet.

Ladda ner f.lux här och testa själv!

Ett litet tips jag läste om nyligen var att lägga till parametern testdox när du kör PHPUnit. Detta gör att du ser alla dina test utskriva snyggt och prydligt med en liten checkbox.

phpunit --testdox BankAccountTest
PHPUnit 5.5.0 by Sebastian Bergmann and contributors.

BankAccount
 [x] Balance is initially zero
 [x] Balance cannot become negative

Detta är väldigt specifikt för både Vim och Symfony men jag kände mig lite extra lat och ville ha något enkelt för att generera setters och getters efter jag skapat en ny attribute i min doctrine entity.

Exempel på attribute:

/**
 * @var string
 *
 * @ORM\Column(name="name", type="string", length=255)
 */
 private $name;

 
Den här funktionen plockar ut korrekta namn på bundles och filer för att sen generera en komplett entity åt dig med hjälp av Symfony’s console. Jag valde att inte skapa en backup men du kan enkelt ta bort ”–no-backup” och så får du en backup om du föredrar det. Snabbkommandot jag valde är <leader>ge som står för ”generate entity”. Ta bort eller ändra till det du föredrar.

Lägg in detta i din .vimrc:

map <leader>ge :GenerateSetterAndGetter<CR>
command! GenerateSetterAndGetter call GenerateSetterAndGetter()

function! GenerateSetterAndGetter()
  let path = expand('%:p')
  let matches = matchlist(path, '\(.\+\)\/src\/\(.\+\)\/\(.\+\)\/Entity\/\(.\+\)\.php')
  if len(matches) > 0
    execute(printf('!php app/console doctrine:generate:entities %s%s:%s --no-backup', matches[2], matches[3], matches[4]))
  else
    echo 'This is no entity'
  endif
endfunction

Google Developers har börjat köra en liten serie på Youtube där de ger utvecklare korta tips på lite allt möjligt. De har t.ex kört avsnitt om vilka färgteman de använder, Sublime plugins, DevTools tips och nu sist några genvägar du kan använda dig av i terminalen.

Avsnitten kommer ut en gång i veckan och de är ca 2-5 minuter långa.

Här finner ni hela spellistan: