Webbdesigner Sundsvall, Andreas Johansson

Overflow hidden och position absolute

Andreas — Thu, 11 Mar 2010 08:00:09 +0000

Tänkte ta upp en liten fallgrop jag råkade ut för ett tag sedan när det handlar om CSS och elementen overflow kombinerat med position absolute.

Scenariot är att jag skulle i en sandlåda med css-regeln overflow: hidden; och position: relative; sätta ut ett element utanför sandlådan med hjälp av position: absolute;.

Scenariot är ganska logiskt egentligen om man tänker efter, en wrapper med overflow: hidden; kommer aldrig visa något utanför dess gränser – även om man använder position absolute och försöker manipulera dess gränser. Speciellt då de flesta block-element i många ramverk och rekommendationer är satta med position: relative;

Koden ovan fungerar som det är tänkt i mitt case med att den inre diven flyter utanför den övre. Koden nedan är dock satt med position: relative; och producerar ett helt annat resultat.

En liten tanke krävs alltså innan du som css-knackare sätter regeln div { position: relative; }, det kan komma tillbaka och bita dig i baken senare.

Edit: en vän påpekade att jag borde addera att z-index inte spelar någon roll i det nedre fallet, utgången blir fortfarande det samma.

Små tips för att förbättra hastigheten på din webbplats

Andreas — Mon, 08 Mar 2010 13:08:41 +0000

Det är alltid trevligt med webbplatser som är riktigt snabba och när det verkligen känns att vi tagit oss ur tidsåldern där 512kbit ADSL och modem utgjorde de största farthindarna på webben. Även att mobila lösningar som än en gång är slöa så kan man göra mycket för att optimera hastigheten och ändå behålla funktionerna på webbplatsen.

Hastigheten Nov -09 mot nuvarande hastigheten

I Google Webmasterstool finns det för det första en riktigt schyst labb-funktion för att mäta hastigheten, för Googles spindlar det vill säga, men det ger ändå en rätt bra överblick hur snabb eller långsam din sida är. Det finns även lite små tips på botten av sidan som kan ge dig en liten susning om vad som kan optimeras och vad som tar tid att ladda.

Det är bättre att ladda hem Firebug och Googles Page Speed till Firefox. Med tillägget får du genast svar om exakt vad du kan göra för att släppa på lite mer kräm till din webbsida. Det kan handla om allt som att förminska antalet DNS-lookups till att förminska och definiera storlekar på bilder som används.

För just bilder finns det en ypperlig tjänst som heter Smush.it som rensar bilden på onödig information, till exempel EXIF-info, och bearbetar bilden med lite programmerings-magi. Oftast kan man spara upp till 10% av storleken genom metoden vilket är ganska mycket på en bildtät webbplats. Det finns ett Wordpress-tillägg till funktionen, men för mig fungerar det mindre bra, om alls, så jag kommer inte prata mer om det här.

Kör du Wordpress så finns det, minst, två tillägg som jag varmt rekommenderar. WP-minify komprimerar och sätter ihop JavaScript- och CSS-filer. WP-Super-Cache rekommenderas lite överallt, men det är ett sjukt bra tillägg som serverar en statisk html-sida och därmed förbättrar svarstider och laddningstider.

Det finns också en hel del du kan göra med din CSS-kod. Till exempel att använda shorthands, att använda en viss struktur i ditt kodande, att försöka, om det går, undvika vissa syntax och att använda CSS-sprites. Detta kommer bli ett helt eget inlägg senare då det finns en hel del att ta upp.

Det finns fler sätt, men jag valde att prata lite om de jag brukar använda. Som alltid gäller mantrat – optimera med ansvar, det vill säga att du kan dra din egna slutsats över vad som kan optimeras och vad som inte kan optimeras i just ditt fall.

Plugga vidare, även om du redan har pluggat vidare

Andreas — Sun, 07 Mar 2010 23:02:57 +0000

Du har studerat, skaffat dig en utbildning och senare kanske jobb. Vad ska du gör nu? Är du nöjd med din kunskap eller är du som jag och kräver lite mer inom det mesta? Det går att plugga vid sidan av utan allt för mycket ansträngning.

De flesta universiteten, högskolorna med mera har idag utbildningar via distans på 25% (20 veckor) eller 50% (10 veckor). Det finns en uppsjö av kurser, både nybörjarkurser och mer avancerade, och det finns troligen något som passar alla.

Det som är bra med en distanskurs på 25% är att du har tid för det. Grovt beräknat så behöver du cirka en dag i veckan för att studera, göra uppgifter och fördjupa dig under hela kursens gång. Inga problem att kombinera med ditt arbete alltså, givetvis beroende på dina arbetstider och arbetsförhållanden.

En annan sida som erbjuder IT utbildning, förutom de vanliga universiteten/högskolorna, är Informator, där kan man lära sig mer och gå kortare kurser i många olika inriktningar, även inom grafisk design och webb. Som privatperson så bör man kolla lite extra på vad de innehåller eftersom de kan kostar en del pengar, men kurser är kul och ger alltid det där lilla extra.

Fördelarna med kurser istället för att lära sig själv över nätet är oftast många. Du får betyg, det vill säga en dokumentation över deltagande och något att visa upp, struktur över inlärningen och bra hjälp på vägen med dina uppifter och var du senare ska fortsätta för att lära dig mer.

Feedly – en lite bättre version av Google Reader

Andreas — Thu, 04 Mar 2010 17:11:12 +0000

Om du som jag använder Google Reader för att plöja igenom det som skrivs i sfären så kan det stela och något tråkiga utseendet störa en aning efter ett tag. Det är inte alltid lika lätt att åt sig av vad som skrivs om det ser för djävligt ut runt omkring.

Hittade via Jardenbergs feed (vilken alltid är fullproppad av godis för övrigt), ett tips om Feedly, vilket bäst kan beskrivas som en wrapper till Google Reader.

Vad det hela gör, efter du loggat in med ditt Google-konto, är att den tar alla olästa poster och organiserar allt på ett väldigt trevligt och inbjudande sätt. Det blir helt enkelt trevligare att plöja igenom sina flöden och, om det behövs, rensa bort sådant som inte är intressant.

Något som är ett stort plus är att tjänsten erbjuder flera olika versioner av sorteringar av flödena, antingen via cover, vilket är allt som du prenumererar på, eller via grupper och popularitet eller helt enkelt det senaste som kommit in. Något som också är intressant är att det integrerar fin-fint med Buzz, Twitter med mera vilket är pricken över i.

Jag är helt såld på lösningen och kommer nog enbart gå tillbaka till original versionen i nödfall.

Phisingförsök mot Telenor-användare på gång

Andreas — Thu, 04 Mar 2010 10:35:55 +0000

Det damp ner ett mail idag till “användare” från Telenor, som jag aldrig haft, och bad mig bifoga mina användaruppgifter.

Som vanligt så ber aldrig företag dig att bifoga lösenord, eller personliga uppgifter heller för den delen, via mail eller liknande. Så se upp vad du svara på, och analysera dina mail noga, om du använder Telenor just nu!

Sen brukar den bristfälliga och knackliga svenskan vara ett tips på att allt kanske inte står rätt till.

Driva folk till engagemang med hjälp av nätets möjligheter

Andreas — Mon, 01 Mar 2010 18:13:42 +0000

Jag är ordförande och drivande person bakom en förening som existerar inom studentlivet i Sundsvall. Vi kör på och satsar på värden som öppenhet, alla får vara med och alla får göra de som de tycker behövs.

Problemet jag har upplevt som person är att vi, förutom våra återkommande möten en gång i månaden och ytterligare möten då det behövs, stannar av med aktiviteten vid våra aktiva kanaler som vi använder för kommunikation. Föreningen fungerar som så att det finns en styrelse i mitten för att sätta några som har den där lilla extra tiden för att spendera på att leda och fixa evenemang och föreningen runt om som kommer med förslag och stödjer i den mån de vill och kan.

Vi kan säga att vi har Facebook som ensam kanal för att prata ihop oss, snacka om idéer och slänga upp snabba beslut. Detta fungerar inte.

Första möjligheten via Facebook är forumet i gruppen som finns, aktiviteten där blir alltid ganska låg och folk läser utan att titta eller missar helt och hållet, främst på bristen av notifikationer och möjligheter till mobilt användande, sen att grupperna lätt försvinner ner i nyhetsflödets hierarki. Den andra grejen vi drog igång är ett delat mail som alla kan svara på, inte heller det här fungerar särskilt bra då informationen lätt försvinner.

Facebook fungerar helt enkelt inte som en bra kanal vilka personer kan statusrapportera, diskutera (forum-stil med längre utläggningar) eller på ett bra sätt vara aktiva.

Vad jag tänkte var att bygga ett system som främjar kommunikation, istället för att motverka den. Men frågan är fortfarande hur och om det verkligen kommer fungera med personer som kanske inte är så aktiva på nätet eller så intresserade av dess möjligheter.

Att bygga runt Wordpress

Idén med ett system runt Wordpress är inte direkt främmande, att bygga upp en forum/webbplats runt omkring föreningen där alla i lugn och ro kan snacka av sig och komma med förslag och kritik. Men frågan är hur det skulle användas, kommer det bli som idag så kommer själva projektet innebära mycket arbete till något som kanske inte direkt används.

Slänger man in Facebook Connect i leken så blir plattformen med kopplad till ett inlogg som de känner igen sig hos. Inloggning blir inte det där jobbiga med ett nytt lösenord att komma ihåg eller nya uppgifter att slänga ur sig, det kan hjälpa till med aktiviteten.

Min idé är ett liknande forumsystem med mail-notifikationer cirka två gånger i veckan som aktivt påminner en användare att något har hänt. Styrelsen borde iallafall kunna samlas och se, läsa, svara och tycka utan att det stör eller försvinner i mängden av information som på Facebook.

Men frågan är fortfarande densamma, hur får jag personerna att aktivera sig mer runt ett nytt system? Kommer jag någonsin kunna få upp aktiviteten hos personer som uttalat inte är lika cutting-edge när det gäller webben som till exempel jag själv är?

Notera att allt är inte dåligt, jag försöker enbart se lite nya vägar för ökad aktivitet och kreativitet. Facebook enligt mig är inte den plattformen…

Fredagsbild: Webdesign to hell

Andreas — Fri, 26 Feb 2010 20:51:27 +0000

Kvällens bild bjuder Google på, auto-suggest kan vara mycket underhållande många gånger. Webdesign(er) from hell har man hört talas om men ..

“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.

Fem typsnitt för att använda med font-face

Andreas — Wed, 24 Feb 2010 17:09:16 +0000

För något år sedan var det lite oklart vilka licenser som kunde användas med inbäddade typsnitt på webben, nu har jag inte riktigt hängt med 100% i utvecklingen men ett par sidor har ploppat upp som listar typsnitt som kan användas.

Kommer dela med mig av fem favoriter av både vanliga, och en del ovanliga, typsnitt som jag brukar snegla på och använda i olika projekt med font-face. Fler kan hittas hos FontSquirrel där du enkelt kan filtrera vilka typsnitt som får användas fritt och bäddas in i din webbdesign.

1. Walkway

2. Sovereign Regular

3. Chinease Rocks

4. Otari

5. Grov Condensed

Har du andra rekommenderade typsnitt som är lite mer ovanliga? Tipsa gärna om dem!

GoSquare eller FourWalla eller något annat?

Andreas — Tue, 23 Feb 2010 11:54:12 +0000

Gowalla var “först”, sen kom Foursquare. Vad kommer snart? GoSquare eller FourWalla som ett tredje alternativ? GPS-spelen används mångt och mycket men jag känner mig lite delad av vad man ska använda, det hade funkat med att alla nöjde sig med en tjänst. Missförstå mig rätt, jag älskar konkurrens men ibland vill man bara använda en sak som alla andra använder.

Vad ska man då välja? Det verkar som att många på till exempel Twitter börjar använda Foursquare medan vänner som inte är lika stora early adopters sätter sig ner med Gowalla.

För att ta det lite lugnt, så finns det plus och minus med båda tjänsterna.

Gowalla-plus mot Foursquare

Snyggt interface
Kul att hitta grejer och reta kompisen som inte fick något

Foursquare-plus mot Gowalla

Roligare med en ranking
Tävlingsinriktat

På minus sidan via båda applikationerna är att det är ganska kul tråkigt att se att det hackas till höger och vänster, men det är något som jag inte kommer bry mig om så mycket.

Gowalla är dock sjukt mycket snyggare än Foursquare, foursquares UI på iPhone och Web är, ärligt talat, väldigt tråkig och ger inget bestående intryck. Däremot gillar jag Gowallas lekstugedesign väldigt mycket. Men på den andra sidan är det roligare att tävla med kompisar än att i sin ensamhet samla på saker…

Jag är delad av tanken på vad jag ska leka med när jag vandrar runt på staden eller söker mig till en destination. Än så länge kommer jag nog hålla mig med det som sker i min personliga umgängeskrets.

Gissar jag rätt så kommer det inom någon månad komma ytterligare en tjänst som vill tävla om användarna i detta lukrativa men sjukt roliga område. Vad ska man då välja med tre bra val?