Webbutveckling

Please use inputmode in forms

Almost every webpage or app uses form in any form or another. And more and more people are uses theirs mobiles as primary device for it so please do everyone a favor and start using inputmode on your input for a better experience for all of us.

For example if the user is suppose to fill in number in an input use inputmode="numeric" and the use will get prompt with correct keyboard layout directly for numeric input.

Another example is inputmode="email" and the user once again gets a correct keyboard put also can gets correct suggestions directly from the phone which is a nice UX.

Read more about it on a good article over on CSS-TRICKS – Everything You Ever Wanted to Know About inputmode

(Yes I see I have no styling for code-block (and now I realised I how now support for emojis here in WordPress) *shame-bell*. But new site and style is in progress)

Nytt sidoprojekt: snittränta.se

Det var länge sedan jag pysslade med något sidoprojekt värt att dela. Men under senaste tiden har jag pysslat med en ny lite tjänst som ska hjälpa konsumenter att välja bank, men främst använda vid förhandlingar av sina lån hos sin bank. Därför föddes snittränta.se.

Jag hade själv missat helt vad snittränta var och att alla banker enligt lag (sedan 2015) var tvungna att presentera detta. Detta för att just göra det enklare för konsumenter att kunna jämföra banker sins emellan.

Snitträntan är snittet på alla nya eller omförhandlade lånen som banken har gett ut senaste månaden med viss bindningstid. Det ingår en viss viktning i lånen också dvs att små lån gör mindre utslag än ett större för att ge en mer korrekt bild.

Så mycket för min egen skulle, men även för att hjälpa andra att på enkelt och smidigt sätt kunna jämföra snitträntor mellan banker så har jag gjort en smidig sammanställning månadsvis. Man kan även klicka in och se historik per bank.

Har du frågor, funderingar eller tips för förbättringar så kommentera gärna.

Dev stack: GatsbyJS, Tailwind CSS och lite Tailwind UI

Öppna iPhone-simulatorn utan att öppna xCode

När man sitter och utvecklar responsiv design och önskar att kolla ändringarna i iPhone-simulatorn / iOS-simulatorn så kan jag irritera mig på att man måste öppna xCode för att komma åt den.

Så kom jag på idag att jag kunde ska ett alias för den och enkelt öppna den via terminalen istället.

# Skriv in följande i terminalen (om du har xCode installerat)
sudo nano ~/.bash_profile

# Sedan sist i .bash_profile lägger du in detta
alias simulator='open /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app'

# Spara med CTRL+O och sedan CTRL+X

# Sen öppnar du bara simulatorn med
simulator

Mycket simpelt men användbart.

Om du inte har samma fix idé som jag har så kan du öppna xCode och sedan öppna simulatorn och sedan nåla fast iOS-simulatorn.

Eller så skapar du en genväg till skrivbordet genom terminalen.

# Skapa symlink/genväg till skrivbordet
ln -s /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app ~/Desktop

WebReady Sweden AB fyller två år

Som rubriken lyder så fyllde företaget två år i fredags den 13 september. Ja eller som aktiebolag om man ska vara helt korrekt. För bolaget i sig, från ursprungs bildningen som enskild firma, fyller faktiskt hela fem år nu när vi går in oktober vilket är betydligt mer och längre än vad jag någonsin hade trott och hoppats på.

Vad har hänt från år ett till två?

Under året som har gått har det hänt en hel del. Vi har bland annat utökat våra samarbeten med reklam-, design- och kommunikationsbyråer vilket har varit ett mycket lyckat beslut som har gett mycket bra och spännande jobb i varierande storlekar. Jobb som vi troligtvis inte hade kunnat få utan våra goda samarbetspartners. Det mesta jobben har varit i form av webbplatser byggda i WordPress som jag numera kan säga att vi är experter på.

Vi har även fått in en del jobb där vi ”bara” har byggt plugin till WordPress där det inte funnits tillräckligt bra för de ändamål som efterfrågats på marknaden. Där bland en skrapare som importerat befintliga webbplatser sidor, kunder, kommenterar och bilder och fått in det på ett mycket snyggt och enkelt sätt i WordPress som gör att kunderna sluppit sitta i veckor för att flytta över allt material. Ett plugin för att styra produktpresentationer och priser beroende på vilket land den registrerade användaren tillhörde och samtidigt smidigt beställa och få historik som återförsäljare till butiken i frågan.
Vi har även byggt ett plugin mot Boolis API som gör det möjligt att presentera lediga bostäder och lägenheter för specfika områden som man enkelt kan presentera på vilken sida man vill med hjälp av shortcodes.
Men även andra specialbyggda plugin för att passa perfekt till just dess ändamål. Mycket spännande och givande jobb har det varit.

Men det har även gjort annat som bland annat kampanjsajter och mobilanpassningar.

Utöver att hjälpa till med våra goda kunskaper inom WordPress har vi jobbat en del som underkonsulter till större system och applikationer där vi främst har jobbat PHP och olika ramverk. Är det något som ni skulle vara intresserade av så tveka inte på att höra av så berättar jag gärna mer.

Två har blivit tre

Som jag skrev i posten innan så har vi fått en ny medarbetare i form av Andreas Eriksson. Ett mycket bra tillskott och det får gärna fortsätta att komma till en medarbetare per år framöver också. För nu har vi ju även nya lokaler från och med december som kan fyllas upp.

Sist med för mig personligen inte minst. Tog ett första steg utanför comfort zone och hade min första presentation om företaget och företagande.

Så får du Jetpack-pluginet att fungera på localhost

Använder du dig att pluginet Jetpack från grundarna av WordPress, Automattic så har det varit problem med att få det att lira lokalt.
Men i och med uppdateringen 2.2.1 av pluginet så kan du nu komma förbi att du måste vara uppkopplad för att få det att fungera som förväntat och testa din webbplats fullt ut lokalt.

Du kommer förbi detta genom att att lägga till följande rad i wp-config.php

define('JETPACK_DEV_DEBUG', true);

Menyikon med HTML entity

På senare tid eller möjligtvis längre tid har man börjat använda en ikon som metafor på meny och detta särskilt på mindre skärmar i repsonsiva designer. Jag har själv det här i detta temat när skärmen bli tillräckligt liten. Detta har jag gjort med ett symbol fonts fast idag snubblade jag över hur man kan göra det med HTML och HTML entity.

// Menu icon HTML entity
☰

Resultat:

Symbolen heter Trigram for heaven och du kan läsa mer om den via länken.

Vi ska på WordPress-meetup i Norrköping

Den 26 april är det WordPress-meetup på Elite Grand Hotel i Norrköping och självklart kommer vi från webbyrån WebReady att vara där för att träffa folk i branschen och likasinnade som älskar WordPress lika mycket som vi.

Det ska bli riktigt roligt och spännande då jag själv aldrig varit iväg på något meetup av detta slaget innan. Så jag hoppas på mycket spännande, bra, lärofyllda och roliga sessioner där man kommer få med sig ny kunskap och ny infallsvinklar på problemlösningar man ställs inför i sitt dagliga arbete.

Vi har kollat upp fler liknande evenemang i år och även hittat DrupalCamp i Göteborg i mitten av maj. Det är väl att svära lite i kyrkan att ta upp detta här. Men jag kan känna att ibland är inte WordPress inte alltid optimalt fast i det allra flesta lägen fungerar men även WordPress har sina brister så vi/jag är sugna på att bredda kunskapen och även kolla in Drupal och se om det mognat tillräckligt mycket. Så kanske det blir att vi även beger oss till Göteborg för att se om Drupal-folket kan övertyga oss att ge det chansen.

Knackar du i Drupal och har något att säga om detta och ställa det mot i WordPress så får du gärna skrivan en kommentar nedan.
Eller är det rent av så att du också ska till meetupen i Norrköping?

WordPress 3.6 beta 1 är här

Den 4 april släpptes den första beta versionen av kommande version av WordPress, 3.6 Beta 1.

Man fick bland annat se hur Twenty Thirteen, det nya standardtema komma att se ut. Personligen tycker jag väl inte det är supersnyggt utan kännas ganska klumpigt och stort istället för stilrent och avskalat. Vilket jag faktiskt tyckte man gav användarna i Twenty Twelve.

Nytt UI för posttyper

En annan av nyheterna som man som vanlig användare kan se är att man ny har skapat eget utseende på varje posttyp vilket gör det enklare att förstå sig på hur man ska använda dom och även för utvecklare. Det går mer åt Tumblr hållet tycker jag och absolut inget fel utan helt rätt.

Om man nu innan har haft posttypen ”Länk” men sedan inte gett användare möjlighet att skriva in vad som är länk och liknande kan jag tycka vara ganska uselt och klumpigt. Men det löser man nu istället på ett snyggt sätt.

I och med det nya utseende för varje posttyp kan man nu ladda upp filer och filmer på posten utan att vara beroende av tredjepartstjänst så som Youtube eller Vimeo vilket är en bra lösning. Jag antar att man implementerar någon sorts mediaspelare och troligtvis i HTML5 eller liknande.

Tumme upp för detta!

Andra nyheter

Auto-save – Man har nu byggt om autosave-funktionalitet vilket göra det mycket svårare att förlora poster och arbete om server eller webbläsare går ner.

Post locking – Se när något editerar en post och samtidigt kunna sparka ut den från posten om dom somnar :)

Menyer – Har gjorts om och ska vara enklare att jobba med.

Revisioner – Får nytt utseende och ska vara enklare att jämföra.

 

Nyheten och original posten från WordPress hittar ni på wordpress.org

Lär dig jQuery like a boss

Idag snubblade jag över en ny sida som heter Code School som hjälper att komma igång och lära dig programmeringsspråk och webbutvecklingsspråk på ett snyggt, smart och pedagogiskt sätt.

Jag hittade sidan genom att att ramlade över Try jQuery vilket är en gratis kurs med alla de viktigaste grunderna i jQuery och lite till och är ett samarbete mellan teamet på jQuery och Code School. Det är precis allting du behöver för att komma igång med jQuery men även för att ta det till nästa nivå på ett sätt som är lätt att förstå.

Kursen består av fem stycken delar med tillhörande föreläsningen inför varje steg och dom säger att det ska ta ungefär tre timmar att ta sig igenom kursen. Efter varje steg så är det ett antal uppgifter som man måste klara för att ta sig vidare och bygga på sina kunskaper. Fastnar du så hittar du enkelt länkar till det du jobbar med just nu till jquery.com där du kan läsa mer om det och sedan finns det lite hints varje uppgift om man fastnar och behöver att någon pekar dig i rätt riktning.

Det är smart byggt där man verkligen tar det från det enklaste till att inkludera javascript filer i DOMen och sedan går igenom och visa olika sätt att navigera sig i DOM-strukturen och sedan förklara vilket man borde använda för bäst prestanda, men att du samtidigt får förståelse för båda.

Själv har jag har betat av ungefär 55 % vid skrivande stund efter att ha hoppat lite och för att testa, men jag kommer nog avsluta den ändå för att fräscha upp minnet och se om det är några olater och sedan har jag även startat kursen med grunderna i Git.

Utbudet vid skrivande stund är kurser inom Ruby, Javascript, HTML/CSS, iOS och Electives och vad det verkar som verkar det vara mer på ingång. Ska bli spännande att följa utvecklingen av sidan och se vad det kan bli av den.

Ta en kik för det är absolut värt och lär dig jQuery like a boss.

Tillhandahåll vektorbaserad logotyp till användare med <link> & jQuery

Snubblade över sidan rel=”logo” som enkelt föreslår att man borde att länka i en .svg-fil i headern med hjälp av link-taggen och på så sätt tillhandahålla vektorbaserad bilder och logotyper till de som är ute efter det. Inget mer att man bara snor en lågupplöst logo eller behöver jaga rätt på vektorfiler för logotypen. Utan att man försöker sätta detta som standard och att man kan hämta ut det snabbt, snyggt och enkelt.

Detta är ju verkligen ett jättesmart förslag, men det är kanske mer än webbnördar som en annan som läser källkod som nattlektyr. Hur skulle man då enkelt kunna hjälpa användare att hitta eller leda dom till rätt val?
Jag gjorde därför ett litet jQuery-plugin för detta som ska hjälpa folk som ska högerklicka och ladda ner en logotypen att dom då får upp en lite ruta som automatiskt har hämtat ut de <link>-taggar som finns i header och med hjälp av en data-title-taggen sätter vi länktexten.


Kom gärna med förslag på hur det kan göras bättre eller om ni hittar buggar.

Check out the code on github
Demo

Vidareutveckling

Det finns en del att önska kanske med det, men jag är av typen att bygga släppa och sen förfina och gärna med hjälp av andra. Man utvecklas mer av släppa saker och inte vara för perfektionist. Men nu till vad jag skulle vilja göra med det framöver.

  • Lägg till placering till vänster och ovanför
  • Valmöjlighet att lägga till en ribbon eller ikon på sidan som förtydliga att material finns
  • Alternativ presentation av downloadruta, med inladdade thumbnails och info om t ex storlek