Eigenlijk ging alles goed, tot we bij Pseudo elementen aankwamen, niet dat Daan het niet snapte, maar ik wist eerst even niet hoe ik het uitgelegd moest krijgen. Het kan immers heel veel zijn. Een pseudo-element kun je gebruiken voor een link om stijl te verbinden aan bepaalde statuses (hover, actief, eerder bezocht). Maar met CSS3 kun je psuedo-classes ook gebruiken om specifieke acties / stijlregels door te voeren voor en na een element, maar ook op specifieke kinder-elementen. Daarom een kort overzicht van CSS3 pseudo elementen.

:nth-child(N)

We hebben allemaal wel een’s een gestreepte tabel gezien. Dit kan onder andere bereikt worden door met PHP (of een andere server taal) bij iedere oneven of even rij een css klasse toe te voegen, maar het kan dus ook gewoon direct in CSS. Met de :nth-child(N) optie. In principe wijst de N tussen de haken naar het nummer van het element binnen de parent, dus stel dat je deze html hebt:

 
    <div id="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

Dan zou .child:nth-child(3) de derde div binnen #parent aanspreken. Maar met de expressie 2n+1 bereiken we alle oneven aantallen, waardoor we alle oneven onderdelen van een tabel ook een alternatieve achtergrond kleur zouden kunnen geven. Deze expressies zijn duidelijker uitgelegd in dit artikel van DevSnippets

:first-child, :last-child

Hoewel deze vrijwel hetzelfde zijn als hierboven, zijn ze de moeite van het vermelden waard. Stel, onze child div’s van zojuist hebben een border van 1px, maar je wilt niet dat de bovenste div een border heeft, dan kun je simpelweg dit doen:

 
    .child:first-child{border-top:0px}

:after & :before

Dit zijn belangrijke selectoren. Ze geven je de mogelijkheid om -zonder nieuwe divs / spans of andere meuk toe te voegen- een div voor en na hij benoemd wordt nog te stijlen. Je zou bijvoorbeeld kunnen zeggen:

 
    #parent:before{clear:both}

Als je bij de div #parent je floats moet clearen. Maar het kan nog veel meer. Stel ik wil onder en boven mijn #parent div een schaduwrandje toevoegen, dan kan ik een grote achtergrondafbeelding maken, maar als #parent flexibel moet zijn in hoogte gaat dit al niet op. Dan kun je dus dit doen:

 
    #parent{
            width:100px;
            padding:20px 10px 20px 10px;
            height:auto;
    }
 
    #parent:before, #parent:after{
            display:block;
            width:120px; /* rekening houdend met de padding van het moederelement */
            height:20px;
            background:url(images/shade_top.png) repeat-x;
    }
 
    #parent:after{
            background:url(images/shade_bottom.png);
    }

:first-line & :first-letter

Het spreken vrijwel voor zich, maar ze spreken de eerste lijn of de eerste letter van een element aan. Altijd mooi om een inleiding mee aan te geven. Je kunt er vrijwel ieder text-gebaseerde stijling techniek op loslaten. hier vind je meer info over het first-line element

En Internet Explorer dan?

Ik hoor de meeste mensen zeggen dat oudere versies van Internet explorer deze elementen nog niet niet altijd (of in het geval van :before en :after, slecht) ondersteund. En dat is helaas waar. Gelukkig is er, net als voor vrijwel alle HTML5 elementen inmiddels een polyfill; een manier om -voor niet capabele browsers- de problemen op te vangen en op te lossen met javascript of een andere technologie.

 
In het geval van pseudo-elementen is deze technologie javascript en heet de library Selectivizr. Het werkt niet alleen met de bovengenoemde elementen, maar met nog veel meer pseudoclasses en nieuwe CSS3 attributen en is zeker een inspectie waard. Ik hoop wel dat de beloofde update van Microsoft Internet Explorers snel gaat volgen, het blijft vervelend om onder 50% van mijn blogposts nog paragrafen vol met ‘fixes voor Internet Explorer’ te moeten typen…

Ik ben uiteindelijk op twee opties gekomen. Optie 1 is om naar managewp.com te gaan en een betaalde beheeromgeving te creeëren waarin ik meerdere sites bij kan houden, clonen en monitoren. Een erg mooi pakket met features voor zeer schappelijke prijzen. Mijn andere optie was om WordPress multisite te gaan gebruiken, de optie waar ik uiteindelijk voor gekozen heb.

WordPress MultiSite is al een hele tijd beschikbaar als een aparte download (WordPress MU) en het idee van de laatste twee versies van WordPress is om deze twee versies te herenigen en iedere WordPress installatie in principe geschikt te maken voor meerdere websites.

Het fijne hieraan is dat je met één druk op de knop een nieuwe testomgeving voor een klant kunt maken, waarbij alle instellingen meteen al goed staan en je direct aan een theme / plugin kunt gaan werken. Ook bespaar je je server weer kostbare kopieertijd, de “core” bestanden zijn er immers al.

Hoe op te zetten

De WordPress codex heeft hier een erg uitgebreide beschrijving over. Om je wat leestijd te besparen komt hier mijn korte versie:
 

• Begin met een verse installatie, da’s wel zo makkelijk
• Voeg deze regel toe aan de wp_config.php: define(‘WP_ALLOW_MULTISITE’, true);
• Ga naar de Admin en klik onder Tools op “Network Setup” en volg de installatie
• That’s it!

 
Mocht je (net als ik) het proberen op een localhost, zorg dan dat er geen poort achter de url staat, de multisite omgeving weigert hier in te werken.

 
Nu kun je super eenvoudig nieuwe testwebsites aanmaken. Als de tijd komt om de testwebsite in productiemodus op zijn eigen server te gooien zet je simpelweg een verse WordPress installatie op de production-server en gebruik je de export / import functionaliteiten in de admin (dit is beter dan de complete database kopieren van de multi-site omgeving).

Handige plugins

Hoewel WordPress MultiSite al erg fijn is, is extra functionaliteit altijd mooi meegenomen. Daarom een lijstje plugins, speciaal voor MultiSite:
 

• New Blog Defaults Bij het aanmaken van een nieuwe site, verzet je altijd wat instellingen, dat kun je nu automatiseren.
• MultiPost Op meerdere websites tegelijk een post plaatsen kan nu ook heel eenvoudig. Altijd handig voor ‘filler posts’
• Domain Mapping Mocht je nog unieke domeinen aan je websites willen hangen, dan is dit de plugin om het voor elkaar te krijgen
• Dashboard Switcher Als “super-admin” heb je al de beschikking over een fijn admin-bar menu, maar dit menu maakt switchen naar een andere website binnen je ontwikkelomgeving een stuk makkelijker

 
Succes!
 

Schrijf over wat je leert

Voorheen heb ik ook al erg vaak geprobeerd om mezelf verslaafd te raken aan het bloggen; het schrijven vind ik een rustgevende bezigheid alleen mijn probleem was dat ik geen onderwerpen kon vinden. Tot ik tot de realisatie kwam dat het interessant was om te bloggen over wat je leert. Immers zit ik in een vakgebied waar iedere dag weer veel in gebeurt. Daarnaast is het (vind ik) een taak van ontwerpers en ontwikkelaars om bij te blijven. Nieuwe technieken, programma’s en tools te leren kennen en vervolgens beoordelen of je er mee verder wilt gaan. Daarnaast pusht het me inmiddels om op zoek te gaan naar nieuwe technieken. Mijn ‘onderzoekje’ naar Node.js zou ik nooit hebben gedaan als ik er geen blogpost over wilde schrijven. Inmiddels ben ik er van overtuigd dat het schrijven over wat je leert, je niet alleen verslaafd kan maken aan het bloggen, maar je ook een betere designer / developer maakt.

Schrijf vooruit

Op het moment dat deze blogpost uitkomt op woensdag 25 januari ben ik gewoon aan het werk voor een opdrachtgever, maar ik lig dit nu (zaterdag 21 januari 21u) te schrijven, al liggend op de bank met een biertje naast me. Meestal schrijf ik het gros van mijn blogposts in het weekend en gebruik ik de schedualed posts functie van WordPress om mijn website vrijwel dagelijks te voorzien van verse content. Op die manier hoef ik door de weeks mijn gewone werk niet te onderbreken en heb ik een mooie manier om (in de vorm van blogposts) een overview te maken van de nieuwe dingen die ik geleerd heb die week.

Gebruik Evernote

Ideeën voor blogposts komen vaak vanuit andere websites, links of gesprekken. Een platform waar je die ideeën snel kunt opschrijven en altijd weer terug kunt vinden is daarom belangrijk. Ik gebruikte Evernote al voor een hele hoop dingen zoals een read-it-later lijst, code snippets, kennis en zelfs wat administratief werk. Voor mij was het dus geen probleem om hier ook ideeën voor blogposts in bij te houden. Ik kan me voorstellen dat dit voor een hoop mensen even wennen is, maar geloof me Evernote downloaden maakt een hele hoop dingen gestroomlijnder.

Wordt een open source bedrijf

In mijn blogpost over goed twittergebruik stel ik 37 Signals als een van de vier voorbeelden. Dit omdat de website van dit bedrijf een erg goed blog heeft; Signal vs Noise. Hierin wordt erg open gedaan, niet alleen over de kennis die het bedrijf vergaard heeft, maar ook over bedrijfsstrategieën, problemenen die ze vaak tegen komen en andere bedrijfsinformatie. En dat voorbeeld probeer ik ook te volgen; wie weet voor wie die informatie handig kan zijn. Van het fabeltje dat concurrentie je op die manier kapot kan maken heb ik nog niks gemerkt. Overigens heeft de baas van 37 Signals Jason Fried hier een erg toffe presentatie over gedaan

Conclusie

Als je schrijven echt heel vervelend vindt, kun je het verslaafd raken aan bloggen sowieso een beetje vergeten, maar als je schrijven niet erg (of zelfs leuk) vindt en je vindt het -net als ik- leuk om nog even rustig over dingen na te denken dan kunnen de bovenstaande tips wellicht behulpzaam zijn! Succes!

Naast dat posts zijn te doorzoeken en filteren op elementen in de posts-tabel (zoals ID, post_title, post_type of post_date), zijn posts ook te doorzoeken aan de hand van hun extra velden (meta values) en hun taxonomies (indeling mechanismen als categorieën en tags). Als WordPress ontwikkelaar kun je dus te maken krijgen met ingewikkelde vraagstukken zoals; “ik wil alle posts in de categorieën projecten en producten, waarbij het extraveld ‘kosten’ niet leeg is”. Als we puur op mysql gebied gaan kijken hebben we het hier over een erg ingewikkelde query met meerder JOIN-functies. In WordPress is dit echter relatief eenvoudig.

Hoewel de vraagstelling hierboven zeer specifiek was, gaan we eerst kijken naar een eenvoudigere manier van filteren, een kleine recap van vorige week. Om alle posts in de categorie projecten te halen kunnen we kijken naar het ID van de taxonomie “categorieën” naar de term “projecten”, dat klinkt ingewikkeld en het is ook redelijk omslachtig, maar we beginnen bij het begin. Stel mijn categorie “projecten” heeft het ID 12, dan krijg je dus dit:

 
    $query = array('cat' => '12');
 
    //stuur de query variabelen mee met de functie query_posts()
    query_posts($query);

 
Zoals gezegd kan het wat minder omslachtig en kunnen we gewoon gebruik maken van de slug van die categorie (in dit geval is dat “projecten”, zonder hoofdletters):

 
    $query = array('category_name' => 'projecten');
 
    query_posts($query);

 
Dat ziet er al een stuk beter uit! Maar stel nu dat ‘projecten’ geen categorie is maar een post_type en we willen filteren op een custom taxonomy die we zelf hebben aangemaakt. Mijn nieuwe post type projecten wordt namelijk niet geordend met categorieën, maar per klant. Dan kan ik de slugs van mijn eigen taxonomy gebruiken om te filteren, zoals ik ook ‘cat’ of ‘category_name’ meegeef kan ik dus filteren op ‘klanten’. Daarnaast moeten we ook nog rekening houden met het posttype:

 
    $query = array(
                    'post_type' => 'projecten',
                    'klanten' => 'to-wonder'
    );

 
Nu haal ik alle projecten binnen met als klant “To Wonder”, maar het kan nog een stukje spannender door meerdere klanten toe te voegen. Let wel; de onderstaande query zoekt naar projecten waarbij zowel “to wonder” als “motief collectief” een klant zijn:

 
    $query = array(
                    'post_type' => 'projecten',
                    'klanten' => 'to-wonder', motief-collectief'
    );

 
Nu hebben we al een aardig ingewikkelde query weten te maken, maar als we echt de zoekopdracht willen gaan doen die bovenaan deze blogpost is ingesteld, hebben we nog wat andere variabele nodig die we mee moeten sturen, namelijk tax_query en meta_query.

 
tax_query en meta_query zijn twee variabelen die in de query_posts, get_posts en met WP QUERY meegestuurd kunnen worden, voorlopig werken wij even met query_posts. In feite zijn het gewoon arrays met extra informatie. Dus als ik alle posts terug wil krijgen van de klanten “to wonder” OF “motief collectief” kan ik dit gebruiken:

 
    $args = array(
                    'relation' => 'OR',
                    array(
	                    'taxonomy' => 'klanten',
	                    'field' => 'slug',
                            'terms' => array('to-wonder, 'motief-collectief'),
	                    'operator' => 'IN'
                    )
    );	
 
    query_posts('tax_query' => $args);

 
Laten we even rustig door de bovenstaande code heenlopen om te kijken wat er gebeurt: Als eerst wordt er een relation gesteld, in dit geval ‘OR’. Dit had ook ‘AND’ kunnen zijn. Bij OR is een van de onderstaande terms genoeg, bij AND dienen ze allebei aan een post gekoppeld te zijn. Vervolgens wordt de taxonomy gespecificeerd met ‘taxonomy’ => ‘klanten’, iets wat me voor zich lijkt spreken. De field variabele geeft aan waar we op moeten zoeken, in dit geval een slug maar het zou ook een ID of naam van een term kunnen zijn. ‘terms’ => array(‘to-wonder, ‘motief-collectief’) geeft aan dat we willen zoeken naar de termen ‘to-wonder’ en ‘motief-collectief’ en bij operator staat nu ‘IN’. Dat wil zeggen dat de posts die we terug krijgen in de bovenstaande klanten gecategoriseerd moeten zijn. Als er ‘NOT IN’ had gestaan hadden we dus alle posts terug gekregen die niet in ‘to-wonder’ en ‘motief-collectief’ zijn gecategoriseerd.

 
Zoals je kunt zien kun je hiermee helemaal los. En meta_query werkt op dezelfde manier; specificeer een extra veld, voeg een waarde toe en zeg of een post deze waarde wel of niet moet hebben. Laten we nu even teruggaan naar de query die we in het begin van deze post hebben opgesteld: “ik wil alle posts in de categorieën projecten en producten, waarbij het extraveld ‘kosten’ niet leeg is”. En laten we het nog leuker maken door het post_type in te stellen en alleen te zeggen dat we posts uit dit jaar terug willen krijgen. Dan krijgen we in de code dus dit:

 
    $args = array(
                    'post_type' => 'projecten',
                    'year' => '2012',
                    'tax_query' => array(
                                            'relation' => 'OR',
                                            array(
                                                    'taxonomy' => 'category',
                                                    'field' => 'slug',
                                                    'terms' => array('projecten', 'producten'),
                                                    'operator' => 'IN'
                                            )
                    ),
                    'meta_query' => array(
                                            array(
                                                    'meta_key' => 'kosten',
                                                    'value' => '',
                                                    'compare' => '!='
                                            )
                    )
    );
 
    query_posts($args);

Ik kan me voorstellen dat dit een hoop geouwehoer lijkt en in de werkelijkheid heb je deze ingewikkelde queries maar weinig nodig, maar het is fijn om deze kennis in huis te hebben. WordPress is zo veel flexibeler dan de meeste mensen denken, maar dat komt omdat er nog maar weinig mensen echt in de mogelijkheden van WordPress duiken.  

Zelf ben ik vooral met deze queries begonnen voor opdrachtgevers, maar inmiddels ben ik bezig met een WordPress plugin die een groot deel van deze query-woede uit je handen kan nemen, door alles te vertalen naar eenvoudig te maken filters. Zo kun je bijvoorbeeld filteren op taxonomiën, extra velden maar ook op post_types en publieke / prive posts. Blijf dus vooral dit blog in de gaten houden want ik verwacht mijn ‘Advanced filters’ plugin voor eind februari af te hebben.

@font-face

Wordt vaak gezien als een echte CSS3 feature, maar bestaat al sinds 1999 toen nota bene Microsoft de technologie in Internet Explorer 5(!) inbouwde. Is daarna onder gesneeuwd omdat er teveel gezeik kwam over licenties. Bij de CSS3 spec-sheet is het weer opgepakt en wordt het inmiddels door alle grote browsers gesteund. Diensten als de @font-face generator van Font Squirrel maken het bovendien makkelijk en houden rekening met licenties.
 

Argumenten vóór

• Geen Javascript of Flash nodig; alles draait op CSS
• Eenvoudig toe te passen
• Cross-browser ondersteuning (zelfs voor de oudjes

Argumenten tegen

• Alleen open source fonts
• Kan er lelijk uitzien in oudere browsers

 
Links:
Fonts
De @font-face generator

Google Web Fonts

Een aardige bibliotheek gratis te gebruiken fonts die op rete-snelle servers volledig gecached staan. Dit is @font-face op speed en er is inmiddels een behoorlijk aanbod.
 
Argumenten vóór

• Geen javascript of flash nodig
• Eenvoudig toe te passen
• Cross-browser ondersteuning
• Hele snelle laadtijd

 
Argumenten tegen

• Keuze is beperkt

 
Links:
Google Fonts
HowTo

Typekit

Een professionele oplossing met een prijskaartje. Nu valt het geld wat je er voor kwijt bent relatief mee voor de absoluut beste online font oplossing out there.
 
Argumenten vóór

• Heel veel fonts (inclusief betaalde fonts)
• Makkelijk toe te passen via Typekit’s embed systeem
• Visueel het beste resultaat

 
Argumenten tegen

• Het is een premium oplossing, met een jaarlijks abonnement

 
Links:
Typekit
HowTo

Cufon

Cufon kwam net op voor @font-face cross-browser ging en was op dat moment een erg goede oplossing voor het embedden van fonts. Het levert een super strak resultaat cross-browser, maar je krijgt met performance problemen te maken bij overgebruik.
 
Argumenten vóór

• Mooie, heldere tekst
• Zeer goede cross-browser ondersteuning (kwalitatief)

 
Argumenten tegen

• De text is niet te selecteren
• Relatief zwaar; gebruik het alleen voor headers
• Alleen open source fonts

 
Links:
Cufon
HowTo

Er zijn nog andere oplossingen als sIFR en Typeface.js, maar deze kunnen eenvoudigweg niet meer tippen aan de eenvoud en kwaliteit van de bovenstaande oplossingen. sIFR en Typeface.js waren goede oplossingen in hun tijd, maar zijn wat mij betreft niet meer de moeite van het overwegen waard.