Twitter Bootstrap & Google Maps

Het heeft mij dik een uur gekost om op te lossen, zonde van de tijd!

Hierbij de oplossing voor iedereen die Google Maps embed in sites die gebruik maken van Twitter Bootstrap. Zie hier het probleem:

Je ziet links een fout in de zoom-control, en de infowindow wordt verkeerd weergegeven. De oplossing?

/* bootstrap vs google maps api fix */
#googleMap img {
  max-width: none;
}

Eenvoudig een kopie maken van een WordPress site

Na het een en ander getest te hebben, blijkt de Duplicator plugin de beste optie om een volledige wordpress site te kopieren. Bijvoorbeeld naar een test server voor het testen van nieuwe plugins en thema’s, of voor het switchen van server. De plugin verpakt zowel de bestanden als de database in 1 pakketje. Handig!

Je vindt de plugin hier: http://wordpress.org/extend/plugins/duplicator/

Twitter Bootstrap: snel front-ends bouwen

Ik gebruik het inmiddels al een tijdje, maar ik blijf me verbazen over hoe mooi het werkt: Twitter Bootstrap. De naam klinkt misschien een beetje verwarrend, maar het komt neer op een volledig front-end pakket gemaakt door medewerkers van Twitter. Het bestaat uit HTML, CSS en JavaScript elementen die het echt mogelijk maken om lean en agile websites in elkaar te zetten. Zo makkelijk, dat ik steeds sneller overstap van wireframes naar echt werkende prototypes. Daarmee krijgen klanten een veel beter gevoel van de werking, en het bouwen van de front-end moet sowieso gebeuren. Op die manier voegt het waarde toe, en kost het minder tijd. Wie wil dat nou niet?

Lees verder »

CakePHP: Cake bake werkt niet?

Op het moment ben ik een nieuw programmeer framewerk aan het leren: CakePHP. De eerste indrukken zijn goed, alhoewel het denken volgens de Model-View-Controller (MVC) systematiek nog wel wat moeite vereist. Toch zie ik zeker nut in het aanleren hiervan, mede gezien de iPhone SDK ook volgens dit principe werkt (mijn volgende project..).

Een ander punt is dat CakePHP ook gebruik maakt van de Command Line Interface (CLI) van PHP, wat betekent dat je via Terminal (op de Mac) met een paar commando’s een hele applicatie in elkaar kan zetten. En hier zat voor mij al gelijk een probleem: als leek op het gebied van Terminal kreeg ik het commando “cake bake” niet voor elkaar. Het heeft me heel wat zoekwerk gekost om op te lossen, dus bij deze deel ik de oplossing graag.

Cake bake werkend krijgen in Mac OS

  1. Gebruik een text editor (bv Coda of Textmate) om een bestand aan te maken in je homedirectory, oftewel de map /Users/mijnnaam/. Noem dit bestand .bash_profile
  2. Dit bestand zal automatisch geladen worden bij het openen van Terminal. Met behulp van dit bestand moeten we de locatie van de CakePHP map definiëren.
  3. Plak de volgende regel in het bestand, waarbij je mijnnaam veranderd in de jouwe ;-) Let daarbij dus ook op waar jij de CakePHP map hebt, bij mij is dat in de Sites map.
    export PATH=”$PATH:/Users/mijnnaam/Sites/cakephp/lib/Cake/Console”
  4. Open nu Terminal, navigeer naar je map en gebruik het commando “cake bake” om je applicatie te bakken! Meer daar over lees je hier.

De beste iOS web development apps

Als freelance web developer wordt je regelmatig benaderd door klanten op momenten dat je niet achter je bureau zit. Even snel een pagina in WordPress bewerken, een error uit een php script halen of een afbeelding offline zetten. Voorheen waren dit soort klusjes onderweg niet direct mogelijk, maar met de komst van smartphones en tablets is een nieuwe wereld open gegaan: de mobiele apps. Zelf gebruik ik naar mijn Mac’s thuis een iPhone 4 en iPad 2 voor onderweg. Hiermee kan ik tegenwoordig binnen een minuut de eerder genoemde klusjes en meer voor elkaar krijgen. Aangezien het hiervoor wel even zoeken is naar de juiste apps, deel ik hier graag mijn favoriete iOS web development apps.

Lees verder »

CSS Browser Selector

Het blijft één van de grootste problemen van en webdeveloper: Internet Explorer 6. Telkens weer lijkt alles prima te werken, totdat de grote test in IE6 komt. En helaas zijn er nog steeds veel mensen en instellingen met deze zwaar verouderde browser.

Met de volgende truc krijgt de html-tag classes mee die aangeven welk platform en welke browser de gebruiker heeft. Hiermee kunnen van custom styles per browser worden gedefinieerd.

Lees verder »

Eenvoudige WordPress login url

Vervelend altijd heh, dat je helemaal http://www.domein.com/wp-admin/ moet intikken om in te loggen in de WordPress backend?
(of erger nog http://www.domein.com/wordpress/wp-admin/ als je je WordPress installatie netjes een eigen map hebt gegeven)

Hier een shortcut:

Lees verder »

MySQL zoek en vervang

Na het verplaatsen van een WordPress blog naar een andere server op een ander domein, werken de afbeeldingen en links niet meer.. Reden: in de broncode wordt naar de absolute url verwezen in plaats van de relatieve.

Wat te doen?  Alles handmatig aanpassen? Natuurlijk niet!

Lees verder »

Ronde hoeken

Het klinkt zo leuk: ronde hoeken aan blokken (div’s). Van oudsher is dat echter niet mogelijk. Met de komst van CSS3 is daar verandering in gekomen. Met één regel CSS is het opgelost:

#container {
border-radius: 10px;
}

Het probleem hierbij is alleen wederom het feit dat te veel mensen nog een oude browserversie gebruiken. Voor dit overgrote deel van de gebruikers dus nog steeds geen ronde hoeken, of toch wel?

Lees verder »