Webbdesigner Sundsvall, Andreas Johansson » webbutveckling

PODcasts för webbdesigners

Andreas — Mon, 14 Jun 2010 20:19:06 +0000

Min iPhone går alltid varm när jag är på språng, men oftast inte med Spotify eller annan musik – utan av PODcasts, jag älskar hobbyprogrammen som folk tar sig tid att göra.

Efter ett tag fick jag en liten idé då kvällens uppdrag att leta efter nya och fräscha podcasts om webbdesign gick åt skogen på grund av Apples gränspolis. Mycket kunde alltså inte på ett smidigt sätt hanteras automatiskt via iTunes eftersom de inte var tillgängliga i Sverige. Här kommer då resultatet med de fyra PODcasts som jag tycker om och slaviskt lyssnar på i mina lurar.

Har ni andra bra tips, kör gärna in en kommentar nedan eller e-posta mig.

Vi börjar med webbradion, främst eftersom den är på svenska, som är en webbcast för och av webbutvecklare. Varje vecka drar städar de fram intressanta nyheter och ämnen som bör diskuteras från det stora internet och snackar lite om vad de tycker om det hela. Att de favoriserar Rails kan vi ignorera för denna gången ;)

Missa inte att kolla i deras backlogg av program också, de har alltid en intressant gäst med sig i varje episod.

ITunes

Boagworld är en mycket driven show från den lilla ön i väst vilka är sjukt drivna. Klimatet är snabbt och avslappnat med glöd. En av mina stora favoriter som snurrar i lurarna.

ITunes

ExplicitWeb är en ny cast jag börjat lyssna på, lite sämre kvalité än de andra men fortfarande roande och matnyttig information.

ITunes

CSS-tricks har istället en videocast, jobbigt att glo på medan du går men härlig på bussen. Här tipsas det mer om matnyttig och saker du direkt kan sätta igång att koda i jQuery, CSS med mera. Definitivt värt en titt!

ITunes

DinTur och deras nya webbplats

Andreas — Thu, 10 Jun 2010 10:19:42 +0000

DinTur, det “lokala” bussbolaget här i Sundsvall som har hand om alla stadsbussar, landsortsbussar med mera har tydligen försökt byta layout.Nu antar jag att detta är en pre-release, tidig beta eller misstag som släppts live, varför återkommer jag lite mer till om en stund.

Förr såg den ut som nedan (via waybackmachine), vilket enligt deras historik daterar sig till Oktober 2007 vilket känns ganska logiskt med tanke på upplägg och design, den gjordes säkert tidigare dock.

Idag märkte jag av den nya versionen av DinTur. Bättre – ja, absolut, men det finns en del att önska ändå om man får vara kritisk.

Det första jag gör då någon lanserar en ny sida är att kika lite i källkoden. Detta tog mig i dag tillbaka till 2000 cirka med lite häftiga fynd.

Hur tänkte utvecklaren här? Inte nog med att tabeller ligger och skräpar utan något som helst innehåll, men här hittar du också trotjänaren som hade sin storhetstid då en webbsida kunde göra i Frontpage Express som var en WYSIWYG-editor från 90-talet.

Här ser vi en kvarleva från ett gratis menyscript som kostar nästan $60 att köpa, det ska nog vara ett helt sjukt bra script om inte samma funktionalitet kan slängas ihop på en dryg timme med WordPress, lite HTML och CSS.

Nu till varför det känns som en tidig beta.

Ojoj, vad mycket utvecklaren måste göra. Nu kan nog undersidor anropas, ett mail från Anki som verkar intressant angående priser och sidor är fellänkade.

Jag kikade även lite i deras CSS-mall, men det var inte så häftigt eller nyskapande direkt. Sidan är uppbyggd av tables med hjälpa av och inline-css. Likaså när jag startade validatorn, oftast spelar det ingen som helst roll om det blir lite varningar även om jag som webbdesigner strävar efter perfektion i min kod, men lite saker höjde mina ögonbryn:

…style="margin-left:9px;">

Form i en TR utanför TD?

End tag for element "LI" which is not open

Hrmm, en extra LI? Kan inte det förstöra layouten i värsta fall?

Resterande sidor håller ungefär samma tempo, Vänliga URLs saknas, H1 som rubrik men som underrubrik?

Vad jag i stort antar är att detta fortfarande är samma system som användes förr, vad jag kommer ihåg så används inte .asp längre utan .aspx vid .NET-utveckling. Sen att vid sökning av en resa öppnas en popup där jag igen får välja vart jag ska är lite löjligt, men det handlar mer om frustration och användbarhet än kodmässigt.

Nåväl, dags för mig att sluta gnälla och återgå till att koda vänliga, moderna och häftiga lösningar på mitt sätt.

Sökes: intressanta flöden att följa om webbdesign, internet med mera

Andreas — Fri, 28 May 2010 13:24:02 +0000

Det är dags att uppdatera sig lite, jag vill ha många tips på bra bloggar att följa som handlar om Webbdesign, Internet eller mittimellan. Vad det är för ämne är ganska kravlöst – nyckelordet heter webb.

Det är inte så att ni som jag följer är tråkiga, det är bara så att någon gång ibland måste man skrika till och försöka vidga sina vyer lite mer.

Känner du en som bloggar, eller följer du själv någon extremt bra blogg, som handlar om webbdesign, webbutveckling, media, internet, entreprenörskap, marknadsföring eller rent av bara nörderier – släng upp länken nedan så jag får kolla in det hela.

Tack på förhand.

Coda eller TextMate, nästan ett dött lopp

Andreas — Wed, 19 May 2010 16:29:33 +0000

Det är snart 5 månader sedan jag bytte min kära ASUS till en MacBook Pro och därmed lämnade livet som slav under de enda vettiga kod-applikationerna på system, Notepad++ på Windows och BlueFish på Linux (ja, vi snackar webbdesign och webbutveckling, ingenting annat).

Livet som en mac-(ab)user är inte alltid lätt eftersom jag helt plötsligt har två väldigt bra alternativ till mitt förfogande, Coda och TextMate. Båda har sina fördelar och jag hade helst sett en fin symbios mellan dem.

Vi börjar med Coda

Ett relativt enkelt program som via ett sjukt snyggt och lättarbetat grafiskt gränssnitt gör arbetet väldigt trevligt. Site-funktionen är riktigt trevlig och så också är funktionerna för FTP och Subversion. Kort och gott – dessa funktioner är faktiskt guld värda.

Det jag inte gillar är att jag saknar en del från TextMate, till exempel snyggare syntax-highlight och bundles (tillägg, kommer till det senare). Själva applikationen känns också tyngre än TextMate även om tidsåtgången för att starta inte är något att ens lägga in i beräkning.

TextMate, perfekt med bundles

Ännu enklare gränssnitt än Coda, visar filerna som används och en drawer, som du kan dölja. Thats it. TextMate visar först sin storhet när du börjar upptäcka alla bundles som finns att lägga till i programmet. Bundles fungerar som tillägg som adderar funktionalitet och hjälper dig auto-komplettera (till exempel) 400 gången du ska skriva en funktions namn i ett WordPress-tema. Tips vad jag använder är WordPress, zen-coding (css/html). Notera att Zen-coding finns för Coda också.

Den stora nackdelen är interaktionen med FTP/SSH/SubVersion. Den är obefintlig och bundles som finns att ladda hem är ganska fattiga i funktion och utförande. TextMate har visserligen en Projekt-funktion, med presentationen och utformningen är inte ens i närheten så fin som i Coda.

Kombinationen Coda och TextMate

Tänk TextMate och dess UI, enkelheten med bundles och snygga teman kombinerat med Coda och dess funktioner som Sites, FTP och Subversionstöd. Där har vi min dröm, och nej – skriv nu inte att Aptana finns eftersom det var så segt att sirap kändes rappare. Känslan kommer nog före funktion, TextMate vinner på grund av att det är så snyggt men det är på målsnöret.

Vad kör du? Självklarheten Notepad++ på Windows eller Coda/TextMate på Macen?

“Behöver inte kunna PHP, jag har WordPress”

Andreas — Thu, 25 Feb 2010 19:44:04 +0000

Ett citat som jag fick för någon dag sedan som jag har funderat en del över. Tar verkligen WordPress kål på behovet att kunna programmera PHP? Tvärtom skulle jag vilja påstå.

För det första så behöver du PHP för att kunna sätta ihop ett någorlunda bra tema till WordPress, även om du kan klara det helt utan någon kunskap om språket i övrigt. Många säger ändå att “Jag talar WordPress, inte PHP”, men steget mellan dem är inte stora. PHP är språket som används i WordPress, även i dess teman, om ändå på ett ibland ganska lustigt och kanske inte helt optimerat sätt.

Mitt svar på frågan är alltid att vad som kommer hända den dagen de får en förfrågan om en funktion som inte finns eller att ett tillägg inte existerar till det. Ska de ignorera eller använda en slags mellanlösning där de tar en hel kod från en guide och inte vet exakt vad den gör?

Problemet jag har är att jag vill inte alltid lita på tillgängligheten av tillägg, de kan helt plötsligt slutas stödjas i WordPress kärna eller helt enkelt läggas ner och sluta utvecklas. Att göra en funktion själv är alltid hundra gånger bättre än att förlita sig på tredje-part när det gäller WordPress, speciellt om det handlar om klienters webbsidor som de kan strula till själv.

Att utveckla sig inom PHP, och speciellt dess integrering och möjligheter inom WordPress, är något man bör behärska speciellt då systemet uppdateras och utvecklas i hög takt och innovationen absolut inte står still.

Lär dig PHP alltså, även om du klarar dig med kunskaperna inom WordPress du har idag – det kommer alla tjäna på i längden.

Att använda the_post_thumbnail() i WordPress 2.9

Andreas — Thu, 07 Jan 2010 11:58:09 +0000

WordPress släpptes för en stund sedan i version 2.9 och med släppet följde en efterlängtad funktion med för de som utvecklar teman, nämligen the_post_thumbnail(). WordPress Codex är dock ganska sena med en bra Wiki-artikel på ämnet så jag tänkte skriva ihop en liten bas-guide till hur den nya funktionen kan användas.

Vad som inte berättas utan krävdes en del sökande för min del är att funktionen först måste aktiveras från functions.php (filen ligger i samma mapp som ditt tema finns i) för att fungera. Anledningen vad jag gissar på är bakåt-kompatibilitet så att funktionen inte används där det inte stöds.

add_theme_support( 'post-thumbnails' );

Lägg in raden i functions.php. Stäng dock inte filen än, vi måste också definiera storleken på miniatyr-bilderna. Detta görs med funktionen set_post_thumbnail_size(). Funktionen tar ett par argument int width, int height, bool hardcrop.

set_post_thumbnail_size( 250, 150, true );

Använder mig personligen av raden ovan, här sätts höjd och bredd till 250×150 och hardcrop till sant. Hardcrop är dock för mig ett frågetecken än så länge då det inte verkar göra till eller från det jag har testat. Dess egentligen funktion är att beskära bilden snarare än att förändra storleken på den, vilket ger fler valmöjligheter i fråga om höjd/bredd på bilderna man laddar upp än om vi bara skulle förändra dess storlek.

När du experimenterar med storlekarna så rekommenderas det att du installerar tillägget Regenerate thumbnails så du slipper editera om alla miniatyrer i varje inlägg.

För att hämta din miniatyr så måste du först definiera den i en bloggpost, efter att du sparat functions.php och går in i editorn så märker du en ny ruta som heter Post Thumbnail, definiera din miniatyr i den.

Nu är det dags att hämta bilden i vår loop. Jag rekommenderar att du kontrollerar så att inlägget har en minityr först och främst.

if ( has_post_thumbnail() ) { the_post_thumbnail(); }

Nu är det dags att utforska the_post_thumbnail(). Funktionen tar en mindre uppsjö med argument, för det första kan du definiera din miniatyr med ett namn: thumbnail, medium, large där thumbnail är standardvärdet i funktionen.

Exempel:

the_post_thumbnail(‘medium’); hämtar och skriver ut mediumstorleken av bilden.

Är du inte nöjd med standardvärdet av storleken på bilden eller behöver lägga in en css-klass? Funktionen tar även arrays med olika argument.

Ett exempel är:

the_post_thumbnail( array(300, 300), array('class' => 'min-class-ett min-class-tva') );

Som du ser så gör jag om miniatyren till en storlek av 300×300 och ger den två klass-attribut, min-klass-ett och min-klass-tva. Du kan även lägga in andra värden som rel, title, alt med mera för större kontroll.

Cache och att uppdatera bilder med jQuery

Andreas — Thu, 17 Dec 2009 15:20:09 +0000

Tänk dig att du har ska fixa bildeditering på sidan du utvecklar. Tänk att du vill att användaren ska kunna förändra små delar av bilden i webbläsaren och för att få det att gå så smidigt som möjligt så vill du uppdatera bilden utan att webbläsaren laddar om.

Problem: Webbläsarens cache sparar bilden och hämtar den gamla, det går tyvärr inte ens att lita på no-cache/no-store meta-taggarna.

Lösningen: Uppdatera bilden med en query-sträng.

Tänk dig att du har följande HTML:

Du vill nu att bilden ska uppdateras så fort någon trycker på knappen. För enkelhetens skull så använder vi jQuery.

$('#update').click( function () {
	$('#image').attr('src', 'bild.jpg');
});

Javascriptkoden ovan ska enligt reglerna byta ut bild.jpg mot bild.jpg, det vill säga uppdatera bilden från servern igen. Det är vid detta momentet cache-funktionen spökar.

Vad vi gör då är att vi lägger till en querysträng i slutet av bilden.

$('#update').click( function () {
	var timestamp = new Date().getTime();
	$('#image').attr('src', 'bild.jpg?t='+timestamp);
});

Vi lägger alltså till en tidsstämpel som sätts till epoch/unixtid och lägger till den som en sträng efter bilden. Bilden kommer alltså hämtas som bild.jpg?t=123445345 där siffrorna alltid ändras och aldrig är unika.

Vad detta innebär i praktiken är att webbläsaren luras att tro att bilden som hämtas alltid är unik och inte är samma som redans finns lagrad – det vill säga att bilden kommer alltid att förnyas, oavsett cache.

Web Hack Night Sundsvall

Andreas — Mon, 30 Nov 2009 19:02:36 +0000

Som student i Sundsvall med ganska lågt pengaflöde är det ganska enerverande att se vad som pågår nere i de större städerna (okey, bältet mellan Sthlm och Gbg verkar vara extra aktivt) med diverse WP-fika, Webb-kaffe, allmänna webb-nörd konferenser/möten.

Jag fick då en idé som jag föreslog en blivande webbnörd Jansson, varför inte någon gång i månaden eller varannan månad köra ett Webbhack. Folk som är intresserade kan träffas över någon kaffe eller fyra med laptopsen i knäet och hacka till något kul antingen till träffen eller under träffen. Möjligheterna är enorma med olika teman varje kväll eller bara att brainstorma.

Min tanke att köra kvällen mellan förslagsvis 19.00 fram till 00.00 eller så länge som möjligheten finns. Platsen bör vara någonstans med WiFi, beanbags och möjlighet till kaffeapparat.

Tänkte gå ut med detta bland studenter först och främst då mitt kontaktnät är störst där, men gillar du idén och är från Sundsvalls-området så tveka inte att hojta till. Träffen är värdelös utan folk som vill komma!

Det vore helt perfekt att kunna träffa likasinnade och umgås lite i staden som enbart inhyser statliga myndigheter, och allt tråkigt och stelt som kommer med definitionen.

Idéer, frågetecken eller vill du se detta hända? Skrik till i kommentarerna eller kontakta mig.

Två sajter jag vill utveckla nu men inte hinner

Andreas — Wed, 11 Nov 2009 21:33:22 +0000

Just nu finns det två saker jag skulle vilja ta mig tid att fixa till och fixa upp. För det första är CSS:ART vilket är tänkt mer som en upplevelse, kul grej och inspirationssajt. Det som i så fall skulle ingå är en slumpgenerator, en jävla massa blockelement och CSS-regler. Som det ser ut i huvudet är det coolt, snyggt och väldigt onödigt.

Den andra delen är lite mer seriös. WP-functions.com köptes för ett antal månader sedan in på fyllan. Idén är en slags databas och registrering för funktioner inom WordPress-communityn för att hantera (och dess främsta mål undvika) kollisioner. Jag har efter dess fått svårt att bestämma vilken riktning sidan ska ta, så idéer finns – men definitionen och målet saknas.

Dygnet bör utökas till 48timmar är mitt förslag. Alternativt att forskare kommer på ett sätt att radera vårt behov av sömn. Sömlöst viloläge någon? När någon del inte används så sover den?

Använd taggar som ditt arkiv i WordPress

Andreas — Sun, 25 Oct 2009 16:24:48 +0000

De flesta som bloggar eller driver en sida med några slags nyheter har ett arkiv med gamla inlägg. Ett arkiv i sin traditionella mening blir snabbt fullt och oöverskådligt då man listar alla inlägg som någonsin postats. Alla inlägg är även sorterade i kategorier som också blir fulla av inlägg, osorterat och överblicken försvinner.

Min idé är lite annorlunda

Istället för att prompt använda kategorier är min plan att använda taggar som arkiv istället. Istället för att lista alla inlägg på samma sida så visar jag ett tagg-moln vilket dynamiskt visar de ledord jag främst använder på mina inlägg. Fördelarna med detta är många:

Du hjälper besökaren med överblicken av sidan. Vad som är störst är det som nämns och används mest.
Du sprider och fördelar din länkjuice bättre, mer länkar = mindre kraft för varje enskild länk (typ SILO).
En statisk kategori är oftast för generell och trubbig, taggen har en spets som är individuell för varje inlägg.
Du undviker duplicate content om det används rätt.
Taggarna är alltid up-to-date.

Arkiv med taggar i praktiken

Först och främst måste du ha All in One SEO installerat på din WordPress-blogg. Markera Use noindex for Categories för att se till att Google m.f inte indexerar dina kategorier längre. Notera att du fortfarande kan ha kvar dina kategorier, se bara till att de “försvinner” från Googles ögon då de kan utgöra en risk för att innehåll kan förekomma flera gånger.

Öppna temafilen archive.php med din favoriteditor, hitta the_loop och ändra the_content() till the_excerpt(). Vad vi gör att istället för att skriva ut hela inlägget i arkivet så skrivs ett utdrag från inlägget ut. Fortfarande så handlar det om risken för dubbla innehåll på sidan.

Öppna file archives.php (Märk skillnaden från ovan). i den här filen kan du ta bort det du känner för, det viktigaste är att infoga till tagg-moln någonstans. Funktionen som kommer användas är wordpress egna, wp_tag_cloud(), vilken är tillräckligt kompetent för det vi ska åstadkomma.

$args = array(
    'smallest'  => 8,
    'largest'   => 36,
    'unit'      => 'pt',
    'number'    => 75,
    'format'    => 'flat',
    'separator' => '\n',
    'orderby'   => 'name',
    'order'     => 'ASC',
    'link'      => 'view',
    'taxonomy'  => 'post_tag',
    'echo'      => true
);
wp_tag_cloud( $args);

Vad de olika parametrarna gör förklaras mer i länken ovan.

För att fixa till problemet med att alla taggar får samma meta beskrivning så editerar vi header.php, Hittar och byter ut mot:

		" />

Detta bör fixa så att Google Webmasters Tool inte klagar för mycket.

Nu bör du ha ett bättre fungerande arkiv. Givetvis bör du komplettera med din populäraste poster, poster som kanske behöver lite extra exponering och en sökfunktion.

Resultatet kan ses live på min Arkivsida eller via skärmdump nedan.

Fortsättning på detta? Kanske ta bort kategorierna helt och enbart använda dem internt och fortsätta optimera så det som är relevant, enkelt och bäst ur de flesta synpunkter (användarsynpunkt/SEO/hantering) kommer fram.

Tips, idéer eller invändningar?