Scrobbla film frame-by-frame med piltangenter

Ska kompletteras. Men här är lite jQuery-kod.

(function($) {

   var frameLength = 1/24, // Framerate
       activeFrame = 0;

   $(function($) {

       video = $('video')[0];

       $(document).bind('mousewheel', scroller);
       $(document).bind('keydown', keypress);

   });

   function updateMovie() {

       video.currentTime = (activeFrame * frameLength);

   }

   function scroller(e) {

       if (e.originalEvent.wheelDelta < 0)
           activeFrame++;
       else
           activeFrame--;

       activeFrame = (activeFrame < 0) ? 0 : activeFrame;

       updateMovie();

   }

   function keypress(e) {

       var key = e.which;

       if (key == 37)
           activeFrame--;
       else if (key == 39)
           activeFrame++;

       activeFrame = (activeFrame < 0) ? 0 : activeFrame;

       updateMovie();

   }

})(jQuery);

 

Vertical align anything

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Notering: Opera har aldrig kört prefix på transforms och Firefox stödjer oprefixat sen v.16 (alltså behövs inget -moz- egentligen). Från IE9 och uppåt. Läs mer på ZeroSixThree.

Lägga på odd/even-klasser med PHP

<?php $var = 4; ?>
<div class="var-<?php echo ($var++ % 2); ?>">adds class 0 if $var is even, otherwise 1</div>

Or with an if statement for adding custom class names (for loop for demonstration purpose):

<?php for ($var = 0; $var <= 10; $var++) : ?>
<div class="<?php if ($var % 2 == 0) : echo 'even'; else : echo 'odd'; endif; ?>">snel hest <?php echo $var; ?></div>
<?php endfor; ?>

Croppa bilder istället för att skala i WordPress

// Standard Size Thumbnail
if(false === get_option("thumbnail_crop")) {
     add_option("thumbnail_crop", "1"); }
     else {
          update_option("thumbnail_crop", "1");
     }

// Medium Size Thumbnail
if(false === get_option("medium_crop")) {
     add_option("medium_crop", "1"); }
     else {
          update_option("medium_crop", "1");
     }

// Large Size Thumbnail
if(false === get_option("large_crop")) {
     add_option("large_crop", "1"); }
     else {
          update_option("large_crop", "1");
      }

 

Tillåt fler filtyper i WordPress mediauppladdare

Så här gör du om du vill utöka WPs Mediauppladdare att ta emot fler filtyper än standard (t.ex. .eps).

add_filter('upload_mimes', 'custom_upload_mimes');
function custom_upload_mimes ( $existing_mimes=array() ) {

// Lägg till .eps
$existing_mimes['eps'] = 'application/postscript';

return $existing_mimes;
}

Mimetypen är viktig att få rätt. Osäker? Kolla efter här: http://www.webmaster-toolkit.com/mime-types.shtml

Sätt alla element till box-sizing:border-box

Det är så sjukt gött med box-sizing:border-box. Det möjliggör att att CSSen räknar in padding och border till totalbredden. Man slipper att hålla koll på width – padding = width osv. Läs mer om box-modellen på CSS-Tricks. TL;DR; Gör så här:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

 

Ersätt submitknapp med ikon i WordPress sök

Ibland vill man visa en ikon istället för en submitknapp vid sökfältet i ditt WordPress-tema. Förr kunde man till exempel dölja texten och sätta ett förstoringsglas eller liknande som bakgrundsbild på Submit. Men nu vill vi vara moderna och försöka lösa det med en ikon istället. Det gör ju så att vi enkelt kan justera storlek (med font-size), färg (med color) och så vidare – precis som med vanlig text. Och så får man fördelarna med retina och allt det där.

I exemplet nedan så använder vi oss av en Font Awesome-ikon och HTML5-modellen för hur man skriver WordPress-söken i searchform.php – som du lägger i ditt tema. Notera att du skriver till support för detta genom nedeanstående i functions.php:

// Switches default core markup for search form to output valid HTML5
add_theme_support( 'html5', 'search-form' );

Sedan jobbar vi efter Micke Claessons leetz0rerade sätt att skriva jQuery. Vi startar alla funktioner i main.js och funktionerna i sig lägger vi i plugins.js. Det skulle kunna se ut så här:

searchform.php

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text">Sök på:</span>
		<input type="search" class="search-field" placeholder="Sök…" value="" name="s" title="Sök på:" />
	</label>
	<input type="submit" class="search-submit" value="Search" />
	<i class="fa fa-search search-submit"></i>
</form>

style.css

.search-submit {
    display: none;
}

main.js

(function($) {

	$(function() {
		// Trigger search click	
		$('body').searchClick();
	});

})(jQuery);

plugins.js

(function($) {

	$.fn.searchClick = function() {

		init();

		function init() {
			$('i.search-submit').click(function() {
				$(this).prev().trigger('click');
			});
		}
	}

})(jQuery);

 

Enklare design lyfter innehållet

Bort med skuggor, tuffa 3D-ikoner och avancerade texturer. Full fart framåt med nättare typsnitt, 2D och en enklare färgpalett!

I branschen pratas mycket om ”flat design” (plan, platt på svenska). Något som är snarlikt och kan sägas går hand i hand med ett minimalistisk designtänk överlag.

Windows 8 metroSedan Microsoft släppte Windows 8 så har fler och fler gått åt samma håll. Nu lär det väl verkligen ta fäste när dessutom Apple visar upp sitt nya iOS i samma anda.

ios7-interface

Apple har tidigare levt gott på sin skeuomorfism men väljer nu alltså att leka ”följa-John” och hoppa på trenden i och med nya iOS. Facebook går från ganska platt till ännu mer och rullat ut förändringar sedan tidig vår. Google/YouTube/Google Plus är mer eller mindre redan där.

Varför vi vill konsumera sajter och mjukvara med ett utseende åt det här hållet har jag svårt att svara riktigt bra på. En tanke vriden åt samhälle och sociala aspekter kan landa i lågkonjunktur och enklare leverne i stort. En teknisk tes i varför det har blivit så här kan till stor del ha att göra med den explosion av smartphone- och läsplatteanpassade webbplatser.

Under några år och parallellt med den minimalistiska och platta trenden har uttryck som ”responsive design” legat och kokat. I samband med en allmän rekordfartsutveckling av vad man kan göra online så har nya tekniker som just anpassning av webbplatser med hjälp av responsivitet nått ytan.

Kort sammanfattat kan vi säga att det som gäller just nu är att koda sajter på ett sådant sätt att innehållet skalas, flyttas om och ändras beroende på webbläsarens upplösning. Om det så är en smart telefon, platta, gammal sliten CRT-skärm, TV eller en splitter ny monsterdator med en 27-tumsskärm så ska webbplatsen se schysst ut. Med den generella fördelen att allt serveras från samma kodbas (du behöver alltså inte skriva presentationsfiler för samma data flera gånger beroende på enheter).

Här har användandet av smarta telefoner (och andra mindre, portabla, enheter) verkligen haft ett stort inflytande. Du vill kunna surfa från bussen, förfesten eller en tråkig föreläsning. Samtidigt så vill du som användare ofta komma åt samma information som du kan med en vanlig dator (desktopvarianten alltså). Detta leder till, i takt med att tekniken utvecklas, att man i många fall (och numera nästan alltid) bygger sajter som anpassar sig och försöker ge dig samma innehåll.

Men det finns vissa fallgropar längs vägen som vi utvecklare försöker fixa till. Dels ska det vara lätt att läsa och navigera – detta löser vi ofta med till exempel större textstorlek och innovativa menylösningar. Dels är det viktigt att hålla nere laddningstider.

Man talar om att snittpersonen bara orkar vänta i max två-tre sekunder för en webbsida att ladda i telefonen. Dessutom kanske de surfar på ett GSM- eller 3G-nät och då kan även även datamängden som laddas ned kosta per byte. Som ett resultat av detta ser vi en trend i att mer avskalad och enkel design träder fram. Bilder som används är till stor del ofta direkt sammanhörande med texten du läser. Utsmyckningar och grafiska designelement görs oftast direkt med kod (då det är avsevärt mycket billigare i både tid och pengar att ladda – och ofta enklare att justera).

Bilder från hardwarecanucks.com, apple.com och triplagent.com. Tidigare publicerad på ipmulricehamn.se

Vi testar Chromecast!

Idag fick vi möjlighet att testa nya Chromecast. En liten HDMI-sticka från Google som är tänkt att utmana Apple TV för en tredjedel av priset (35 dollar).

Just nu saluförs inte enheten i Sverige utan vi har testat med en amerikanskt variant. I grund och botten så får vi möjligheten att spegla över valfri Chrome-tab till TVn via dator och när vi testade med iOS-appen så fick vi Youtube och Netflix-apparna som alternativ att strömma från. På Android fanns även Google Play med i listan.

Det är alltså inte riktigt lika stort utbud som för Apple TV i dagsläget men troligtvis lär det komma mer och mer inom kort. Just nu ser vi Netflix, Youtube, Hulu, Google Play och Chrome-tabbar som alternativ. Men Swedroid skriver t.ex. att tredjepartsutvecklare redan nu har börjat att utveckla appar. Bland annat för att kunna köra lokala filer på telefoner och plattor på TVn.

När Michael och undertecknad som bäst satt och testade vad stickan gick för kom vår gode kollega Magnus förbi och pratade om nya konsumtionsvanor. Visst är det så att svetten rinner lite extra snabbt utmed skjortkragarna bland TV-husen. Att slaviskt följa programtider som någon annan har satt är snart ett minne blott. Fredagsmyset kan nu fortlöpa helt utan stressen av att hinna äta upp alla tacos innan Robinson. Dessutom riskerar fenomenet ”förfest” att förändras i sitt grundutförande en aning när möjlighet ges till alla gäster med smartphone att skicka upp sin egna favoritvideo på YouTube till TV-skärmen.

Visserligen har möjligheten att streama bild och ljud, skärmspeglingar och smarta TV-apparater funnits ett tag nu. Men med prylar som Apple TV och Chromecast på marknaden så slås säkert ytterligare en och annan 4-tumsspik i kistan.

Läs gärna en utförligare och mer bildrik artikel på Swedroid.

Ursprungligen publicerad på ipmulricehamn.se

Mer på Slut som artist

Själv är jag osäker på om den i dagsläget ger mig en rikare vardag. Jag är ganska van att plugga in laptopen via HDMI, vilket ger mig fler möjligheter. Dock är det ju ruggigt smidigt med en cast om man knarkar Netflix osv.

Dessutom, eftersom casten är direkt kopplad mot WIFI, så streamas ingenting från din handenhet (smartphone, padda etc) utan den fungerar mer som en fjärrkontroll. Vilket är bra för batteritid etc.

En bra grej med tab-castningen är helt klart att det är en specifik tab som streamas. Vilket innebär att du med fördel kan skicka ut film med Plex i en tab och surfa som vanligt i övriga. Allt som går att öppna i en Chromeflik (även musik, film) ska gå att castas.

Ladda hem iOS-appen (1.1.0) som ännu inte finns tillgänglig i AppStore Sverige.
Ladda hem Android-appen som ännu inte finns tillgänglig i AppStore Sverige.

WordPress – mer än bara blogg

Vad har Usain Bolt, The Rolling Stones, TechCruch, Filippa K, Sony Mobile, Samsung Newsroom, Katy Perry, Elle, Des Moines University, Carl Bildt, Russel Brand, .SE, Jay-Z, Guldbaggen, Eastern Institue of Technology, Café, Lollapalooza, Staffanstorps kommun, Glitter, The University of Maine, Spotify, Paris Hilton, GB Glace, University of Melbourne, Mötley Crüe, MSNBC och Variety gemensamt med IPM Ulricehamn? Jo, samtliga ovanstående använder publiceringsverktyget WordPress på något sätt för att stärka sin onlineupplevelse.

Nästan 70 miljoner sajter drivs av WordPress i augusti 2013. Andelen WordPresssajter bland världens topp 10 miljoner sajter är 18.9%. Populärt, ja visst. Så även om listan ovan känns onödigt lång, kan den göras bra mycket längre. Ibland får man höra att ”WordPress, det är minsann bara för små bloggar. Det är ingenting för min verksamhet…” och ja det stämmer visserligen att det började som en bloggplattform samt att det fortfarande är den populäraste plattformen för att blogga. Men det kan användas till så mycket annat. Själv har jag jobbat dagligen med WordPress sedan 2009 och nästan alla nya sajter som jag har varit inblandad i sedan dess har på något vis byggts med hjälp av WordPress. Många sajter du besöker körs med verktyget. Ofta utan att det ”syns”. Precis detta är vad jag gillar. Vi tar vara på styrkorna – som lättheten att skapa och publicera innehåll – samtidigt som vi kan bygga i princip vad som helst utåt för att presentera detta.

Utöver ovanstående är det också smidigt att skräddarsy lösningar med hjälp av tillägg (plugins) för att tillfredsställa alla möjliga behov. Det kan vara allt från deltagarlistor och personalhantering till fotoalbum. Många större system finns representerade. Ett svenskt exempel är Västerbottens-Kuriren som publicerar alla sina nyheter online med hjälp av WordPress. Ett enkelt verktyg för redaktörerna. Texter blir skrivna. Nyheter blir publicerade.

WordPress går mer och mer mot att bli ett CMS och en App-plattform att räkna med. I senaste versionen, 3.6, förfinades mycket som har med innehållsskapande att göra. Som exempelvis versionshantering och autosparande. Men i kommande versioner (3.7 och 3.8, släpps senare i höst) är det just WordPress som CMS och App-plattform som står i fokus allra mest.

Spännande helt klart!

Ursprungligen publicerad på ipmulricehamn.se

Ett besök på WordCamp STHLM

Jag begav mig till huvudstaden för att hänga lite på WordCamp Stockholm. Med andra ord en heldag med WordPress och WordPress-gurus. Rätt gött!

Vid nio började Waterfront fyllas med förväntansfulla WordPressmänniskor från hela Sverige med omnejd. Solen sken, kaffet var serverat och namnbrickor hängdes runt hals.

Efter inledande mingel slog klockan tio och så var det dags för Thord Daniel Hedengren (aka TDH) att inleda dagen. Under devisen “WordPress i Sverige” gav han en dagsrapport om hur det ser ut i landet, vad vi behöver göra för att lyfta WordPress mer och saker som att “communityt” måste hjälpas åt och prata mer med varandra. Med orden “En idé kan fortfarande vara bra även om man inte kan genomföra den själv” (ungefärligt citerat) menade TDH att vi också behöver hålla en vänligare ton mot varandra för att inte tappa några på vägen och i slutändan därmed göra saker ännu bättre helt enkelt.

Efter inledningen satt jag kvar i samma sal då Christoffer Larsson från VK.se berättade roligt och intressant om hur deras nyhetswebbar förvandlades från E-drum till WordPress-sajter. Med lite tricksande och specialbyggda plugins visade Västerbottens-Kuriren att det faktiskt är fullt möjligt att ha en fullständig nyhetssajt byggd med WordPress. Även om det rör sig om över 200 000 unika besökare per vecka och tiotusentals poster. Christoffer berättade även lite snabbt om deras plugin Arlima som de utvecklade för att kunna ha manuella flöden och kunna styra nyhetspuffar, precis så som tidningssajter brukar vara uppbyggda.

Dags för en snabb lunch och sedan bänkade jag mig framför Erik Eng som är lite av en personlig idol. Erik pratade om varianter och möjligheter för att få en bättre sökfunktion på sin sajt. Som vi vet så är den inbyggda söken inte helt hundra och Erik gav tips på plugins och tjänster för att söken exempelvis ska hitta träffar på relevans istället för datum.

Efter detta lyssnade jag till Jonathan Sulo som pratade optimering. Mycket av det Sulo nämnde är saker som vi redan är bekanta med sedan tidigare men det var ändå bra att få nya perspektiv på att göra sajterna snabbare och att säkra upp.

Kristian Erendi fick avsluta mina föreläsningspass med en dragning om ajax i plugins. Det var väldigt passande eftersom jag senast i fredags bråkade lite med just detta. Kristian visade exempel från en egen plugin och förklarade bra hur varje steg gick till samt hur man skulle bära sig åt för att göra det säkert för injections med mera.

Som avslutning på dagen agerade TDH moderator för en panel med kända WP-människor. Ett trevligt inslag, där bland annat diskussioner om “vart är brudarna?”/nytt blod och serviceavtal togs upp.

Kolla in föreläsningarna här på Bambuser.

Länkar till dragningarna:
* Christoffer Larsson – “Västerbottens-Kuriren och WordPress – en kärlekshistoria”
* Erik Bernskiöld – “Nyckeln till ett bra admingränssnitt för kunderna”
* Jesper Bylund – “Tänk på det här när du bygger för mobilen”
* Erik Eng – “Bättre WordPress-sök”
* Eva Fadeel, Christina Lingdén, Henrik Löwenhamn m.fl. – “Riksantivarieämbetet + intranät = WordPress”
* Andreas Ek – “Leverera WordPressprojekt med högre kvalitét”
* Jonas Lejon – “Prestanda och stora sajter”
* Jonathan Sulo – “WordPress-optimering för Dummies”
* Jimmy Rosén, Sammy Nordström & Mattias Stahre – “Webbapplikationer i WordPress – Will it blend?”
* Johan Edlund – “WordPress för den ovana webbredaktören”
* Kristian Erendi – “Lär dig ajaxifiera dina tillägg med jQuery”

Ursprungligen publicerad på avtramp.se

Gör tabell med CSS

Jag har stött på flera varianter på där man använder sig av HTML-elementet <table> för att skapa tabeller. I bland kan det kanske lämpa sig bättre med denna teknik men kan man så tycker jag att det är roligare att rita upp sina tabeller med CSS.

Så jag tänkte visa lite snabbt och enkelt hur man gör en tabell med hjälp av CSS-attributet “display”. Dock är detta inget som fungerar i IE7 men kan man hitta på en bra work-around (alternativt om man bestämmer sig för att låta IE7-användare inte få en lika snygg upplevelse) så kanske det är värt att lägga <table> åt sidan.

table-med-css

Jag bygger tabellen med hjälp av <ul> (unordered list) och <li> (list items). På listan sätter jag display:table, mina rader får display:table-row och mina celler får display:table-cell. Nu har vi byggt oss en enkel tabell.

Det finns givetvis en mängd olika varianter på hur man kan göra men jag brukar göra något i stil med det här och det har fungerat utan klagomål hittills =). Om du har tips på något ännu bättre sätt eller om jag borde göra något annorlunda, skriv gärna en rad nedan.

HTML för min tabell:

<ul>
<li>
<div>Kolumn 1</div>
<div>Kolumn 2</div>
<div>Kolumn 3</div>
</li>
<li>
<div>Värde 1</div>
<div>Värde 2</div>
<div>Värde 3</div>
</li>
<li>
<div>Värde 4</div>
<div>Värde 5</div>
<div>Värde 6</div>
</li>
<li>
<div>Värde 7</div>
<div>Värde 8</div>
<div>Värde 9</div></li>
</ul>

 

CSS för min tabell:

ul.table {
border: 1px solid #ddd;
display: table;
margin: 0;
padding: 0;
}
ul.table li.column-row, ul.table li.row {
display: table-row;
padding: 4px;
}
ul.table div.column, ul.table div.cell {
display: table-cell;
padding: 4px;
}
ul.table div.cell {
vertical-align: middle;
}
/* Bakgrundsfärg på raderna*/
ul.table li.column-row {
background-color: #e1e1fa;
}
ul.table li.row:nth-child(even) {
background-color: #f1f1f1;
}
/* Fet text på kolumnrubrikerna */
ul.table div.column {
font-weight: 900;
}

Ursprungligen publicerad på avtramp.se

Dagens tips: The Oatmeal.com

Matthew Inman är mannen bakom theoatmeal.com. En sajt som med roliga seriestrippar beskriver allt möjligt som folk tänker på men som man kanske inte vågar fråga om, även infographics och små berättelser ur vardagen.

En sajt som jag regelbundet brukar kolla av för ett gott skratt är The Oatmeal. Det är en webbdesigner/webbutvecklare vid namn Matthew Inman från Seattle, Washington som står bakom denna lysande webbsida med mängder av egna seriestrippar. Han blandar framgångsrikt strippar om branschen med berättelser om allt från jordens undergång och tupperware till saker han stör sig på med sociala medier. Allt detta med en stor dos humor och finurliga illustrationer. Ett tecken på hur populär Matthews sida är att han har runt fem miljoner unika sidvisningar i månaden. Helt okej siffra, eller hur?

Här kan du läsa ett exempel på vad som för många som jobbar i branschen kan tyckas vara mer eller mindre vardag. Nämligen att designa en webbsida åt kund.

Matthew har även gjort lite föreläsningar och nedan kan du se en rolig snabbföreläsning om hur man får 5 miljoner unika besökare till sin sajt per månad.

Ursprungligen publicerad på avtramp.se

The Evolution of the Web

Smashing Magazine tipsar om The Evolution of the Web. En snygg uppställning över hur webben har utvecklats över åren.

Jag brukar ofta slänga ett öga Smashing Magazine och läsa lite om nya häftiga grejer. Nyss twittrade dom om en riktigt skön site som ritar upp webbens utveckling från början på 90-talet och fram till idag. Det är bara att klicka runt och läsa. Riktigt kul!

theEvolutionoftheWeb-large

Se sidan här: http://evolutionofweb.appspot.com/

Ursprungligen publicerad på avtramp.se

Dubbla bakgrunder med CSS3?

Ibland vill man jobba med två olika bakgrundsbilder på en sajt. Här på avtramp.se tyckte vi till exempel att det skulle vara trevligt och vi ville ju inte bryta loss en div från vår centrerade layout för att åstadkomma det hela. Så vi använde oss av ett litet CSS3-trick och använde två bilder i body.

Javisst, numera stöds detta av alla större browsers. I bland kanske du vill ha två olika bilder som bakgrund och då kan man lösa detta genom följande kodbit:

body {
background-image: url('bild1.jpg'), url('bild2.jpg');
background-repeat: repeat-x, repeat;
}
Detta använder vi oss av här på avtramp.se då träpanelen är motsvarande bild1 och den gråa strukturen motsvarar bild2. I raden under säger vi att träpanelen ska repeteras i x-led medan den gråa bilden ska repeteras i både x- och y-led.

Skulle vi vända på ordningen i background-image så hade inte träpanelen synts då den hade placerats under den den gråa bilden. Något att ha i åtanke om din ena bild inte syns. Alltså, översta bilden först.

Positionering kan göras genom background-position med värden separerade med kommatecken enligt exemplet ovan. Läs mer på css3.info eller på W3.org.

Ursprungligen publicerad på avtramp.se