• We Love Public Service

    Tänkte ta och rulla ut lite försiktigt ett av flera projekt jag pysslat med under #kod100 och det är We Love Public Service (eller WLPS). Det är en site och en hyllning till det fantastiska utbud som bl a SVT, SR och UR levererar. Det första jag tänkte avtäcka är ett API mot SVT Play. API:t är ett enkelt REST-API som bara returnerar JSON. Man har ett antal endpoints att utgå ifrån och kan även ställa frågor direkt. Så vi börjar lite smått.

    Vi börjar med rooten, http://api.welovepublicservice.se/v1/?format=json. Här ser vi alla de endpoints vi kan prata med, t ex att få ut alla kategorier, och de program som hör därtill.

    Säg att jag vill ha tag i alla avsnitt som sänts av Stor och Liten (som den småbarnsförälder jag är), enklast är då att göra en fråga i stil med: http://api.welovepublicservice.se/v1/show/?format=json&title=Stor%20och%20Liten och sen kan jag enkelt gå in på varje avsnitt och se http://api.welovepublicservice.se/v1/episode/12228/?format=json

    Så vad kan jag som utvecklare göra med detta? Du kan t ex bygga en helt egen Best of SVT med väldigt enkla medel. Du kan sätta upp bevakning när nya avsnitt av din favorit-TV-serie dyker upp. Du kan säkert komma på roligare idéer än så;-)

    Värt att nämna är att SVT har ingenting med detta API att göra utan det bygger helt på skrapad data från SVT Play. Detta är bara en förhandstitt och jag lämnar inga som helst garantier om att API:t kommer att se som det gör idag.

    Mitt närmaste mål är att hjälpa gänget bakom SVT Play-appen för Boxee box att gå igång den så vi enklare kan njuta av SVTs hela utbud av barnprogram=)

    För den som är intresserad så är allt byggt med Django med Tastypie som exponerar ut modellerna publikt.

    Och lugn bara, koden kommer, i sinom tid;-)

    EDIT: Vill du ha koll på utvecklingen så följ Google+-gruppen för WLPS.

  • #Kod100 - sju dagar in

    Då är vi inne på dag sju av de hundra dagarna av #kod100. Aktiviteten i hashtaggen har varit upp och ner under den gångna veckena, men kod, issues och dylikt har trillat in på en massa olika repos.

    Själv har jag nästan enbart arbetat med We Love Public Service, en tjänst som snart går igång i extremt begränsad beta. De senaste dagarna har jag nästan enbart skrivit deploymentscript för att göra det än lättare att få upp fler processer när jag behöver. Men en liten tjuvkik kan ni nog få ;-)

    Kikar man på t ex topsy.com ser man tydligt hur twittrandet dalat men jag tror många av oss gått över till att skriva kod istället=) Ta själv en kik över vad som hänt på Github den senaste veckan.

    Projekt jag vill lyfta fram och som jag tror kan bli något riktigt smutt är bl a:

    Andra som jobbat på är t ex:

    Och sen finns det de som vill ha något att göra också!

    Nu kommer jag starta igång ett projekt med stängd källkod (brrr!) så jag får se om min aktivitet med mina övriga projekt kommer ha samma fart, men commita, lägga tickets etc kommer ske varje dag, i 93 dagar till!

    Och det är aldrig för sent att haka på så;

    anmäl dig nu!

  • #Kod100 - nu kör vi!

    Yay! Folk har RT:at, tipsat och skrivit artiklar om #kod100, får tacka för spridningen det hela har fått tack vare er=)

    Lite bloggposter om #kod100 jag har hittat

    I skrivande stund är vi 16 personer som siktar på att hålla oss sysselsatta i 100 dagar, och jag hoppas fler hoppar med under kvällen=)

    Mitt första bidrag till #kod100 blir basen för någon form av aggregator som ska kunna visualisera hur det går för oss i vårt hundradagarsuppdrag.

    Annars tror jag mycket av mitt initiala engagemang i #kod100 kommer röra sig runt SVT Play och alla de olika småscript jag byggt runt siten, som t ex:

    • SVT Crawler, en spindel som letar fram alla program hos SVT Play.
    • PirateGet - en omskrivning av ett pythonscript från svtget.se för att ladda hem material från SVT Play.
    • We Love Public Service - din videobandspelare på nätet (Ssssshh! Hemlis;-)

    Och här är listan över anmälda hitills.

    Det finns även en twitter-lista om man vill se och följa de som är med,

  • #Kod100!

    Inspirerad av @bisonblog:s #blogg100 så startar jag #kod100. Varjedagbloggande är inte min kopp med te men jag skulle behöva lite press för att klappa på, ta hand om och ge lite kärlek till mina och andras open source-projekt.

    Att twittra ut länkar till bra bibliotek är en sak, men att faktiskt använda sig av dem, utvärdera och sedan faktiskt bygga något är något helt annat. Det jag vill åstadkomma är att än mer koda istället för att twittra om kod.

    Reglerna är enkla:

    • #Kod100 startar söndagen den 27:e januari
    • Varje dag, 100 dagar i rad, göra något som driver ett open source-projekt framåt
    • Det finns inga krav på att du måste commita kod varje dag, även att sortera buggar, svara på issues, diskutera lösningar är även det helt ok.

    Nästan all min kod finns Github och där finns en smutt historik över vad man gör så varför inte ha det som mittpunkt?

    Tyvärr verkar inte Bitbucket ha en lika bra historik, kör du på det så skriv nedan i kommentarerna att du är med ändå=)

    EDIT: All form av aktivitet är bra aktivitet, oavsett plattform det sker på =)

    Vi börjar väl så, så får vi se vart i hela friden det här tar oss=)

    ANMÄL DIG HÄR

    Frågor, kommentar, sugen att delta eller vill du bara heja på? Skriv det nedan! =)

  • The state of font-face

    Embedding fonts on a web page can be a chore, and getting all the little bits just right can take quite a while to iron out.

    The advice so far has been to convert your font and serve four different file types, an EOT, a WOFF, a TTF and a SVG. So I decided to actually check if that really is necessary.

    To make this mission I just went to caniuse.com and made some screenshots, so let’s compare those screenshots.

    The support for TTF/OTF

    Supported by almost all browsers, except IE and Opera Mini

    The support for WOFF

    IE supports this a bit better, but just for IE 9 & 10.

    The support for EOT

    Excellent support by IE, but only IE, but all the way back from IE 6!

    The support for SVG

    Supported by all browsers, except IE lower than 9, and I (and others) have experienced that the SVG looks wonky sometimes. Especially on Chrome on Windows.

    So my advice would be to ditch the WOFF, and due to IE’s partial support for TTF it’s best to serve the EOT before the TTF. So, serve the font files in this order:

    1. EOT (IE)
    2. TTF (Chrome, Firefox and others)
    3. SVG (Opera Mini)

    And there you should have covered all bases and your site should look fine and dandy (hopefully;-).

    Any thoughts or comments, please write a comment =)

  • Styling a select box with CSS

    UPDATE: I made some changes to this solution, take a look!

    Working with a designer that loooves to over design native HTML components is a . You do all these ugly hacks and replace a select box with a ul/li list and do negative margin on the original etc etc. And no matter how much you try you never achieve the same completeness as the native element. But it is possible to style a select box with just CSS3.

    I found this example but it uses an ugly hack to get rid of the native dropdown arrow, it wraps the select box in a container that has a fixed width and overflow:hidden, then it sets the select box to a fixed with that is wider than the container. Sure it must be a better way to get rid of it, and yes there is.

    You can get rid if all the styling of a select box, but since our beloved browsers handle things differently you have to use a bit of tweaking.

    This is the HTML we are gonna be using

    <div class="styled-select">
    <select>
        <option>One</option>
        <option>Two</option>
    </select>
</div>

    Styling for the container, this is where we set the custom arrow, gradient etc, but no width, so it will just wrap the select box nicely.

    .styled-select {
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    border: 1px solid #27292c;
    border-radius: 3px;
    background: url('bg.png') no-repeat right #494849;
    box-shadow:inset 0 0 1px #393939;
    -moz-box-shadow:inset 0 0 1px #393939;
    -webkit-box-shadow:inset 0 01px #393939;
}

    And on the real select box we hide the styling, and set the background to transparent, but for IE we have to apply the hack I linked to earlier, but now with a relative width instead of a fixed one.

    .styled-select select {
    -webkit-appearance: none;
    -moz-appearance: window;
    background: transparent;
    width: 100%;
    wid\th: 112%;   /* IE hack */
    padding: 1px 20px 0 3px;
    border: 0;
}

    There you have it! A select box that is native and resizes just the way it should. If you want to test it, head to the jsfiddle! Comments are more than welcome=)

    UPDATE: I made some changes to this solution, take a look!

« Page 2 / 3 »