Firefox freezes
De afgelopen weken had ik een diepgaand conflict met mijn Firefox. Om onduidelijke redenen bleef hij soms tientallen keren per dag om onheldere redenen 'hangen'. Bijvoorbeeld als je klikte ergens op een pagina of 'view source' deed. Mijn eerste veronderstelling was dat er misschien extensies of plugins waren die de boel verstoorden. Als fervent Firefox liefhebber en als webdeveloper heb je vaak toch al snel aardig wat onmisbare tooltjes (Firebug, Web developer, Delicious bookmarks en ShowIP om maar iets te noemen). Mijn eerste poging op weg naar herstel van een gezonde werkomgeving was het uitschakelen van alles wat ik maar kon missen en meer. Ik was overtuigd dat dit de oplossing was maar dit bleek niet het geval. Zelfs zonder enige plugin of extensie deed hij vervelend.
En toen?
Aangezien er nooit tijd is voor dit soort 'problemen', ik in enkele weken mijn pc wil herinstalleren en ik Opera ook het beste gun dacht ik 'ik kan best een paar weken met Opera gaan werken en wie weet bevalt het wel'. Opera geupdate, alternatieven voor mijn favoriete Firefox plugins gezocht en de meest belangrijke tabjes toegevoegd als 'app' (sinds ik dit ontdekt heb in Firefox is dit echt een primaire levensbehoefte geworden). Voor de meeste zaken waren prima alternatieven. Zo heeft Opera een geweldige, ingebakken, developer omgeving (Dragonfly, niet gezien? Zeker eens testen). Met mijn visie dat iets wat standaard in software zit ingebouwd altijd beter is dan iets wat je los installeert leek me dit het testen waard (en beviel me prima trouwens). Maar hoe sexy Opera ook was, hoe prettig Dragonfly ook was, ik miste mijn vertrouwde Firefox. Keer op keer opende ik toch automatisch weer Firefox om iets te testen en voor mijn geliefde Delicious extensie kon ik geen waardig alternatief vinden. Daar ik een trouw Delicious gebruik ben (ca 350 links) miste ik deze heel erg. Alles wat ik tegenkom tijdens onderzoek en belangrijk vindt wil ik in mijn Delicious stoppen. Kort samengevat; Opera is fantastisch maar ik mis Firefox.....
Op zoek naar een oplossing
Een beetje googlen bracht mij bij een weblog wat me hoop gaf. Ik was sowieso niet de enige en er was misschien een oplossing. Het zou namelijk kunnen komen door een verstoring van de database van Firefox die soms in een soort loop zou schieten. Vol goede moed de instructies gevolgd en vol verwachting mijn browser herstart maar helaas, de problemen waren niet weg.
Firefox 8 beta
Bij gebrek aan verdere opties, en bij het vinden van veel meer mensen met soortgelijke 'vage' klachten, toch maar even getest of het draaien van Firefox 8 beta dit op zou lossen. Dit bleek in mijn geval de oplossing. Ben er niet heel gelukkig mee dat ik op mijn primaire werkomgeving met een beta versie werk maar het werkt 100x beter dan Firefox 7 deed dus ben er blij mee. Mocht jij soortgelijke problemen hebben dan zou ik adviseren om eerst de poging te doen met het weblog. Beter een herstelde versie 7 dan een 8 beta lijkt me zo. Als het bij jou ook niet werkt dan is Firefox 8 beta dus een mogelijk goede oplossing.
Form based authentication for websites
Op Stackoverflow is men druk bezig in een poging "The Definitive Guide To Forms based Website Authentication" te maken. Komen best wat interessante punten voorbij. Sommige zijn relatief eenvoudig implementeerbaar in bestaande omgevingen terwijl andere "aanbevelingen" wat dieper gaan. Zeker als je een nieuwe applicatie opzet die nét dat stukje meer veiligheid vereist kan dit een heel interessant document zijn om nog eens kritisch te kijken naar je bestaande authenticatieprocedures.
De highlites zoals ik ze zie
Onderstaand lijstje is absoluut niet als richtlijn te gebruiken maar meer als "o ja, die" reminders van de zaken die in iedere geval in het oog springen, te gemakkelijk zijn om niet te doen of een flink verschil maken in de veiligheid van de login:
- CAPTCHA's zijn in basis nutteloos (op reCAPTCHA na want die is echt onmogelijk irritant)
- Ben je goeroe dan ga je voor een Diffie-Hellman key exchange (wiki)
- Cookies voor je sessie geef je het beste een HTTP Only header mee en zijn 'secure'
- Mocht je een "onthoudt mij" willen sla dan in iedere geval een zeer gezouten hash op van de token in je DB en niet de 'kale' cookie token
- Geheime vragen zijn evil en vormen een veiligheidslek
- Wachtwoord vergeten = nieuwe kiezen. Een "gereset" wachtwoord toezenden wat onmogelijk ingewikkeld is wordt vermoedelijk geprint, op een post-it gezet etc.
- Stel minimale eisen aan een wachtwoord (javascript wachtwoord complexiteit checker)
- Blokkeer massale login pogingen door pogingen te loggen en blocks uit te delen bij X aantal false attempts
- Geef straf "delays" bijv. 2 seconde na 3e foutieve login, 5 seconde na 4e foutieve login etc zodat het onmogelijk is massa's logins te testen
- Gebruik SSL (beetje open deur maar hij hoort erbij)
- Sla wachtwoorden alleen encrypted en salted op
De bron
Dit zijn maar een paar korte hightlites uit dit prachtige artikel:
http://stackoverflow.com/questions/549/the-definitive-guide-to-forms-based-website-authentication
Gratis Photoshop alternatief wat prima werkt
Enkele dagen geleden kwam ik langs een fantastisch stukje websoftware. Pixl editor genaamd. Een online Flash Photoshop alternatief wat echt superstrak in elkaar zit. Niet alleen zijn de functionaliteiten overweldigend maar het ziet er ook nog eens allemaal heel gelikt uit en is gratis. Wat wil je nog meer?
Niet alleen kun je met Pixl editor afbeeldingen op je PC bewerken (met de nadruk op het woord "op" omdat je als Flash 10 gebruiker gewoon lokaal werkt) maar je kunt ook gelijk een afbeelding van het internet "plukken" of uit een andere bron zoals Facebook etc.
Alle serieuze zaken die je in een betaald pakket tegenkomt zitten erin. Enkele van deze leuke functionaliteiten zijn:
- Afbeeldingen opbouwen uit lagen
- Veel prachtige filters zoals tilt shift, water effecten, caleidoscoop, haltone en meer
- Geschiedenis om bewerkingen ongedaan te maken
- Eenvoudig afbeeldingen bijsnijden etc
- Vele mogelijkheden tot bijwerken kleurtinten
- Meertalig
- Rotate, flip en meer
- Layer styling zoals dropdown shadows, bevels etc
Kortom, eigenlijk heel veel voor weinig. Ideaal om "even snel" ergens een afbeeling bij te snijden als je geen pakket op je PC tot je beschikking hebt.
Bezoek http://pixl.com/editor/
CSS prism kleuren van stylesheet bepalen
Geen idee of we dit ooit nodig gaan hebben maar wel weer een grappige app. In het kort de werking;
- Je geeft hem een url naar een stylesheet
- Hij geeft je alle kleuren terug die erin gebruikt worden
- Je kunt kleuren in één keer in hele stylesheet aanpassen
- Je krijgt een aangepaste stylesheet retour die je in je site kunt gebruiken
Eens testen
Hop, Webparking stylesheet erin en ik krijg inderdaad een scherm met kleurtjes:
Als je dan op een kleur klikt zie je welke kleur, kun je hem aanpassen en krijg je gelijk te zien waar hij in de CSS te vinden is:
Als je klaar bent met aanpassen kun je rechtsboven de aangepaste CSS downloaden en klaar. Erg simpel, erg handig en vooral iets waarvan je vergeet dat het er is. Weet nu al dat mocht ik ooit op deze manier iets moeten refactoren ik het vermoedelijk gewoon doe middels een search en replace in mijn code.
Spritecow CSS sprite generator
En we zijn weer een fantastische stukje web-app tegengekomen. Spritecow is een online app waarmee je sprites kunt genereren vanuit een afbeelding. Vorige week getest met een project en het werkt verbazingwekkend prettig eigenlijk. In het verleden hadden we wel eens gespeeld met een plugin voor Photoshop die automatisch sprites en CSS maakte maar dit werkte, in mijn visie in iedere geval, niet echt lekker.
Hoe werkt spritecow?
Eigenlijk supereenvoudig. Je upload je sprite-afbeelding, klikt op een icoontje of wat dan ook welke je als sprite wilt gebruiken en automatisch zoekt hij de randen van je afbeelding op en krijg je onderin de benodigde CSS te zien. Indien nodig kun je ook gewoon met de hand een "regio" selecteren in de afbeelding.
Er staat ook een redelijk helder voorbeeldbestand met begeleidende teksten.
Link naar de site: www.spritecow.com
Automatisch herstarten windows bij update uitschakelen
Afgelopen week had dhr. Microsoft me weer voor de zoveelste keer tuk. Je kent het wel, je start een prachtig proces wat de computer de komende uren mag zoet houden. Om de pc zo min mogelijk hierbij te storen start je dit proces voor het weekend of vroeg in een avond op en laat je hem met rust. Dan kom je de volgende (werk)dag bij de pc en klaar is hij. Een win-win situatie. Behalve als windows tussentijds een geweldige update heeft gevonden die zo belangrijk is dat de pc per direct moet worden herstart. Nou ja, je krijgt nog een optie om het uit te stellen maar aangezien je er niet bent beslist Microsoft voor je en dus "reboot". Omdat ze zich toch een beetje schuldig voelen herstarten ze wel de pc voor je maar geloof me, het zien van het inlogscherm komt niet in de buurt van het zien van een succesvol afgerond proces.
Deze keer was mijn verdriet zo groot dat ik besloot dat ik de oplossing moest gaan zoeken en die was er. Frost heeft dit uitgezocht en in zijn blog gezet. Voor u hier de kortste versie die ik ervan kan maken:
- Druk op start
- Typ gpedit.msc in het zoekveld
- Open "administrative templates"
- Open "windows components"
- Open "windows update"
- Klik met rechtermuisknop op "no auto-restart with logged on users for scheduled automatic updates installation"
- Kies "edit"
- Zet hem op "enabled"
Als het meezit ben je nu in staat ingewikkelde processen te starten (zoals in mijn geval een database conversie) zonder onderbroken te worden door een superbelangrijke update.
Donker Netbeans theme (optimaal voor PHP)
Iedereen heeft zo zijn eigen wensen hoe een IDE eruit moet zien qua font, kleurgebruik etc. Sinds ik overgestapt ben op Netbeans moet ik zeggen dat het tweaken van de kleuren wel erg makkelijk geworden is. Met als basis een kleurthema wat ik van één van de collega's op kantoor gekregen had ben ik verder gaan tweaken. Nu, na een ruime maand gebruik, durf ik wel te zeggen dat mijn theme klaar is voor de grote wereld.
Natuurlijk zitten er altijd nog wat kleine scenario's in de kleurconfiguratie die je vooraf niet had voorzien maar bij standaard gebruik in PHP, CSS, XHTML, XML en INI's gedraagt het zich prima. Hier wat screenshots van de verschillende weergaves:
PHP
INI
CSS
(X)HTML
Zelf testen? Download hier dit Netbeans theme
ps. Wellicht overbodig maar: maak even een backup van je huidige theme's voor het geval mijn export dingen overschrijft die je graag had behouden
APC cache en Zend Server CE
Als je op je Zend Server CE kijkt in de extensions lijst zoals die default ingesteld staan zou je vermoeden dan APC erop draait.
Dit blijkt echter niet geheel het geval als je de php.ini bekijkt. De versie die erop staat lijkt een soort port te zijn naar de cache engine van Zend Server zelf. Niet alle commando's die normaal in APC beschikbaar zijn werken etc.
APC installeren
Paul Kiddie heeft op zijn weblog al redelijk goed uitgezocht hij hij dit kon doen ten behoeve van een file upload progress bar.
- Ga naar http://downloads.php.net/pierre/
- Zoek de juiste versie van APC caching die bij je systeem past. In mijn geval was dit php_apc-3.1.5-5.3-nts-vc9-x86.zip (APC versie 3.1.5 voor PHP 5.3, Non-Threading Safe VC9 versie)
- Plaats php_apc.dll in je zendServer map \lib\phpext\
- Pas je php.ini (zendServer map \etc\) aan en voeg onderin bij de extensions extension=php_apc.dll toe.
- Restart je PHP engine en klaar
Als het goed is bevat je phpinfo nu het APC configuratie deel:
Kanttekening
Je PHP log bevat nu een warning.
[20-Nov-2010 15:31:48] PHP Warning: Module 'apc' already loaded in Unknown on line 0
Dit heeft te maken met de "APC" zoals Zend Server die zelf laadt. Je nu toegevoegde extension botst daar licht mee. Heb wel gekeken naar de opties maar heb nog geen oplossing. De APC request die Zend Server al doet voor je eigen extensies komt mee uit een kant-en-klare extension-dll van Zend Server. Als je hem via de Zend Server configuratietool disabled gooit hij ook gelijk je zelf toegevoegde APC extensie uit de php.ini. Zet je de eigen extension regel er dan weer in dan zet hij ook gelijk die van Zend Server weer aan op één of andere manier.
Update 23 november @ 22:05
We hadden het er vandaag op kantoor nog eens over en Pieter (thnx!) kwam met een briljant idee. Hij kon zich namelijk herinneren ergens in de configs van ZendServer ook nog een file tegengekomen te zijn waarin de oorzaak mogelijk stond.
Hierbij dus alsnog de oplossing voor deze error:
In ZendServer/etc/cfg staat het bestand datacache.ini. Hierin staat:
; When enabled, the Data Cache extension registers APC compatibility methods
zend_datacache.apc_compatibility=1
Als je die parameter op 0 zet ben je er. Op zich ook een erg logische regel om op 0 te zetten als je hem zo leest.
De beste software en tools voor PHP webdevelopment
Met de jaren bouw je een verzameling op met software waar je als developer prettig mee werkt. Van tools om het programmeren eenvoudiger te maken tot software om grafische zaken te doen.
Hieronder staat mijn lijst met favorites en een korte omschrijving waar ze voor dienen / wat deze software waardig maakt om in deze lijst te komen;
- Netbeans
Als serieus PHP developer moet je een goede IDE hebben en Netbeans is dit meer dan waardig.
www.netbeans.org - MySQL workbench
Voor het maken van gelikte database ontwerpen en deze inzichtelijk maken aan projectmanagers / opdrachtgevers.
wb.mysql.com
- Photoshop
Hoort eigenlijk niet thuis in een lijst voor PHP developers maar zeker wel als webdeveloper om zo nu en dan een plaatje te snijden of een knopje te maken.
http://www.adobe.com/nl/products/photoshop/photoshop/ - Notepad2
Naast Netbeans is het altijd handig een lightweight tooltje te hebben om even snel htaccess bestanden of conf files te bewerken. Ik vervang altijd zelf de notepad van windows met notepad2 zodat ik altijd syntax highlighting en regelnummers tot mijn beschikking heb. - http://www.flos-freeware.ch/notepad2.html
- Filezilla
Een goede en stabiele FTP tool.
http://filezilla-project.org
- Tortoise SVN
Soms kom je er met je IDE gewoon niet goed uit als het gaat om SVN en dan is Tortoise de beste windows oplossing. Mooi is hij niet maar wel effectief.
http://tortoisesvn.tigris.org/
- WAMP of Zend Server
Niets werkt zo lekker als lokaal. Snel, veilig en resultaat voor je F5 hebt kunnen drukken.
http://www.wampserver.com/en/
of
http://www.zend.com/en/products/server-ce/ - De browsers om te testen
Test op dit moment met Safari, Firefox, Chrome, IE7, IE8, IE9 en op een Virtual PC met windows XP en IE6. Voor noodgevallen vragen we een Mac visie op zaken. Daarnaast spelen we natuurlijk wel eens met Adobe labs maar bovenstaande dekt aardig de lading.
Dit zijn wel een beetje de belangrijkste.Niet alle software mag op kantoor in productie gebruikt worden maar als ik thuis voor mezelf aan het rommelen ben mag dit vaak wel dus dan komt mijn goede ervaring daaruit voort.
Nu ik dit lijstje typ realiseer ik me dat ik ook best veel handige firefox plugins gebruik. Zal daarover binnenkort een keer iets schrijven.
MySQL workbench tutorial
Als je databases complexer worden raakt het steeds lastiger om het overzicht te behouden op de database structuur. Via een administratietool als PHPmyadmin krijg je wel een goed beeld van de actuele situatie en relaties maar het is erg lastig om "visueel" te maken hoe zaken in elkaar zitten. Zowel voor jezelf als voor eventuele opdrachtgevers met wie je de database-opzet wilt delen. Daarnaast komt er een moment dat het uittypen van alle velden met hun configuraties een erg vervelend werkje wordt.
MySQL workbench is je gereedschapskist
MySQL workbench is een zogenoemd visuele database design pakket en de community versie is beschikbaar onder de GPL licenties voorwaarden.De afgelopen edities is MySQL workbench verder samengebracht met het administrator pakket waardoor je vanuit het programma eigenlijk alles rondom een database(server) kunt configureren.
De werking in het kort
Het programma is in basis niet zo erg complex maar de functionaliteiten zijn redelijk diepgaand. Ik zal hieronder kort uitleggen hoe je zelf je eerste database ontwerpt met het programma.
Als je het programma opstart krijg je onderstaand scherm:
Kies in het midden onder voor "create new EER model" (EER staat voor Enhanced Entity-Relationship). Je krijgt dan onderstaand scherm:
Laten we voor het voorbeeld even uitgaan dat we een database willen maken met auto's (car) en merken (manufacturer) met dus een relatie waarbij één merk meerdere auto's maakt. Veel dieper lijkt me niet nodig. We noemen de database 'test'.
Dubbelklik eerst op "mydb" bovenin je scherm om de naam, en eventueel de collation (werk zelf standaard met utf-8 general), aan te passen.
We hebben nu de basis gelegd. Dubbelklik nu op "add diagram" bovenin. Je krijgt nu onderstaand scherm:
Klik nu links op het "place new table" icoontje (7e van boven). Je krijgt nu een nieuwe tabel in je scherm te zien. Dubbelklik om hem te configureren. Onderin je scherm krijg je nu de tabel opties. Als het goed is zie je nu iets als:
Pas eerst de naam van de tabel aan naar "car" en klik daarna op columns. Voer nu de kolommen in die je belangrijk vind. Voor nu houden we het eenvoudig met een kolom voor het id, de naam en een veld voor de motorbeschrijving. Het ziet er dan ongeveer zo uit:
We doen hetzelfde voor de fabrikanten tabel. Nu komt het leuke stuk. We willen natuurlijk een relatie hebben tussen de twee tabellen. Afhankelijk van de situatie kun je kiezen voor verschillende soorten relaties maar in dit geval voldoet een 1:n relatie. één fabrikant die meerdere auto's maakt.
Klik links op het 1:n icoontje. Klik op de "car" tabel en dan op de "manufacturer" tabel en je relatie is een feit. Automatisch neemt hij veldeigenschappen als datatype, unsigned etc over van je manufacturer tabel dus alles is in één keer eigenlijk in orde. Als het goed is heb je nu iets als:
Stel dat je nu ook nog wilt veranderen wat er gebeurd bij een update of delete dan kun je dit doen in het tabje "foreign keys" onderin. Klik op de tabel waar de relatie invloed op heeft (de "car" tabel dus), dan op het tabje "foreign keys". Je ziet dan:
Standaard staat alles op "no action". Als je nu wilt dat bijvoorbeeld alle auto's verwijderd worden als het merk verwijderd wordt dan zet je hem bij delete op "cascade" enzovoorts.
Je schema is nu klaar. Nou ja, klaar niet maar het voorbeeld laat aardig zien hoe je ermee kunt werken. Wat je nu kunt doen is het schema exporteren als SQL create sript zodat je het direct in je MySQL server kunt uitvoeren en alle tabellen voor je gemaakt worden volgens je model. Dit doe je via "file -> export > forward engineer SQL CREATE script".
Wat nog leuker is, is de mogelijkheid om je model met een live database te synchroniseren. Hiervoor heb je wel toegang nodig tot de database server vanaf je pc!. Mocht je dit hebben dan kun je via "database -> synchronize model" een connectie opgeven (en opslaan voor later) naar je MySQL server. Hij vergelijkt dan de tabellen in je database en die van je model met elkaar en geeft aan waar ze verschillen. Je kunt dan per tabel aangeven of je het model of je database wilt updaten. Hierna voer je de mutaties uit en synchroniseert hij de tabellen. Enkele opmerkingen hierbij;
- Maak ALTIJD backups van je te synchroniseren database voor je echt iets doet. In het verleden gebeurde het wel eens dat mijn workbench het een goed idee vond de online database te legen en mijn model volledig in de war te gooien.
- De te synchroniseren database moet dezelfde naam en collation hebben voor een optimale werking van de syncing.
- Bepaalde zaken lopen soms iets vreemd. Als je bijvoorbeeld een enum aanmaakt met de values ('appel', 'peer', 'ei') en hem synced dan loopt alles goed maar hij zal blijven proberen iedere keer weer dit veld te syncen. Dit omdat MySQL de spaties tussen de values weghaalt en workbench dus vind dat ze niet gelijk zijn. Leermoment: mocht workbench structureel proberen een veld / tabel te synchroniseren wat hetzelfde lijkt, probeer dan te kijken naar spaties, default values die in MySQL al standaard zijn waardoor hij ze "leeg" laat qua value, collations die afwijken etc.
En nu?
Volgens mij dekt dit aardig de basis hoe je in workbench een model kunt ontwerpen en exporteren. Ga je voor visueel plezier (en overzicht bij complexere schema's) dan kun je de kleur van de tabel in het overzicht aanpassen. Dit doe je door op de tabel te klikken en dan links het tabje "properties" aan te klikken. De bovenste waarde is de kleur van de achtergrond. Dit kun je zowel voor 1 tabel als voor een selectie tegelijk instellen. Daarnaast kun je "regions" invoeren. Dit zijn kaders met een naam en kleur die je om blokken met tabellen heen kunt zetten om zo bijvoorbeeld alles van het authenticatie-systeem in een apart blok te zetten.
Ik zocht even een goed voorbeeld van de regions zoals je ze kunt gebruiken en kwam dit schema tegen van ECartservice.net. Misschien een beetje "heavy" maar het idee is wel duidelijk lijkt me 
MySQL workbench downloaden
http://dev.mysql.com/downloads/workbench/5.2.html
ps. Als je van een beetje spanning houdt is het zeker een aanrader om zo nu en dan een alpha of beta versie te downloaden. Deze betekenen vaak weer een berg aan nieuwe mogelijkheden, grafische leukheden etc. Natuurlijk met enige voorzichtigheid doen maar ik ben altijd wel blij met deze pre-releases.