Copyright 1998-2013 Tweakers.net B.V. Fri, 24 May 2013 10:46:57 GMT Fri, 24 May 2013 10:46:57 GMT http://tweakers.net/reviews/76 Tweakblogs.net is de weblog service van Tweakers, de grootste hardwaresite en techcommunity van Nederland. http://tweakblogs.net/ http://tweakimg.net/g/if/logo.gif 60 60 Tweakblogs.net nl-nl http://glamour.tweakblogs.net frontpage@tweakers.net http://glamour.tweakblogs.net/blog/8717/getting-started-on-firefox-os-apps-with-angularjs.html The part that amazes me most about working day to day with Firefox OS is the incredible way that the existing web eco-system can be reused to target mobile phones. We have seen this with using Weinre to remote debug the FFOS system, using emscripten to cross compile C code into javascript, or just the ease of reusing jQuery within your Firefox OS app; something that I would have killed for back in...creator1988 1 http://glamour.tweakblogs.net/blog/8717/getting-started-on-firefox-os-apps-with-angularjs.html#reacties http://glamour.tweakblogs.net/blog/8717 Wed, 20 Feb 2013 10:21:28 GMT http://glamour.tweakblogs.net/blog/8564/a-decent-terminal-experience-on-windows.html Two years ago I would've never guessed that I would be completely hooked on using the terminal. However, after moving to an operating system that had a decent terminal underneath I soon became a command line junky. Time to improve the retarded beast that they call 'cmd.exe' in Windows by adding some real terminal experience. Yes, I'm aware of PowerShell. But the 'yet another syntax' is not for me. The thing that annoys me the most is the inability to easily copy and paste text. On OS/X I can do this through CMD+C, CMD+V, and keep CTRL+C for terminating programs; on Linux I can use CTRL+SHIFT+C, but on Windows:Right-click and choose 'Mark'Drag selectionRight clickGo somewhere, right click againAnd choose 'Paste' Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/8564/a-decent-terminal-experience-on-windows.html#reacties http://glamour.tweakblogs.net/blog/8564 Sun, 30 Dec 2012 12:19:25 GMT http://glamour.tweakblogs.net/blog/8476/node-punt-jss-null-terminator-of-death.html Recently we embraced our new 'review for security' strategy, that included a security 101 given by yours truly and a very big messages like 'Don't reinvent the fucking wheel'. Just saying. Working on this subject intensively also learned me to really really test for security. Developers, and I'm not an exception here, are focussed on code quality, feature stability and security is not always on their radar. And that's a shame because reviewing for security really gives you this 'Dade Murphy' hackers feeling. Meet me at the 'null terminator of death'. Read more »creator1988 1 http://glamour.tweakblogs.net/blog/8476/node-punt-jss-null-terminator-of-death.html#reacties http://glamour.tweakblogs.net/blog/8476 Mon, 19 Nov 2012 17:29:41 GMT http://glamour.tweakblogs.net/blog/8051/building-wordpress-sites-in-the-cloud.html As part of the new features that we launched two weeks in Cloud9 IDE we've added support for Python, Ruby and PHP as server side languages besides node.js. That's not just it, because users have full freedom over the VM that we run your code on so they can install any platform they like (C++ development in the cloud f.e.). The cool thing is that it's now possible to bring all sorts of already existing applications into Cloud9, without relying on third parties to do the actual Apache hosting etc. because you'll just get an Openshift server. In this post I'll show a step by step demo of how to use Cloud9 to build a Wordpress application without leaving the browser. If you want to see the quickest demo possible, sign up for Cloud9 at c9.io, log in via GitHub and create an index.php file: PHP:<?php echo 'Hello world' When you now click the 'Debug' button we spawn a shell version of PHP that echoes 'Hello world' back to you. To run it via Apache go to the run panel, select 'Apache+PHP' and re-click 'Debug'. Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/8051/building-wordpress-sites-in-the-cloud.html#reacties http://glamour.tweakblogs.net/blog/8051 Wed, 11 Jul 2012 13:20:35 GMT http://glamour.tweakblogs.net/blog/7818/rate-limited-website-scraping-with-node-punt-js-and-async.html So yesterday a job description at my previous employer popped up in my facebook stream which reminded me of the programming excercise that we included in the interview process just before I left the company. In short it comes down to:Funda has an API that lets you do queries, the response is paged, max. 25 objects at a timeThe API is rate limited at about 100 req./minuteRequest all pages for a given queryCount the times a realtor ID is in the resultAggregate and sum the realtor ID's and create a top 10 list of realtors with the most objectsScraping this is pretty easy, but the rate limiting got me thinking. A great library for doing queue work like this (create a large list of URLs to scrape, then do it 4 at the same time or something) is async by caolan, but it lacks real rate limiting. Room for improvement! Read more »creator1988 1 http://glamour.tweakblogs.net/blog/7818/rate-limited-website-scraping-with-node-punt-js-and-async.html#reacties http://glamour.tweakblogs.net/blog/7818 Wed, 25 Apr 2012 17:30:52 GMT http://glamour.tweakblogs.net/blog/7779/inheritance-in-javascript.html Inheritance in javascript blijf verdomd moeilijk, zoals ik deze week weer tegenkwam toen ik een vriend hielp in het porten van wat AS3 code naar javascript. Vandaar wat ready to use code snippets en een kleine uitleg om inheritance toe te passen. Javascript kent een aantal manieren om code te mixen, maar ze zijn globaal onder te verdelen in inheritance en mixins. Inheritance is prettig voor een object structuur die je in een taal als Java of C# zou schrijven. Single inheritance van classes, als in Object->GameObject->Person->Enemy. Elk van de parent classes zou ook los kunnen bestaan, en de classes mogen zelf state bijhouden. Mixins hebben meer weg van abstracte classes, en zijn bedoeld om behavior te laten erven, sla er dus geen state in op want dan loop je tegen scoping issues aan. Je kunt meerdere mixin's in 1 object mixen voor multiple-inheritance-like behavior. Inheritance Allereerst lenen we wat code uit node.js. Omdat deze functie afhankelijk is van Object.create voegen we deze toe aan browsers die deze nog niet hebben middels een workaround van Ben Newman. JavaScript: Object.create = function (o) { if (arguments.length > 1) { throw new Error('Object.create implementation only accepts the first parameter.'); } function F() {} F.prototype = o; return new F(); }; var inherits = function (ctor, superCtor) { ctor.super_ = superCtor; ctor.prototype = Object.create(superCtor.prototype); ctor.prototype.constructor = { value: ctor, enumerable: false }; }; Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/7779/inheritance-in-javascript.html#reacties http://glamour.tweakblogs.net/blog/7779 Thu, 12 Apr 2012 16:54:12 GMT http://glamour.tweakblogs.net/blog/7238/live-file-sharing-met-socket-punt-io-en-node-punt-js.html File uploading is altijd een pain in the ass geweest, upload limits, geen progress informatie, geklooi met Flash plugins voor multiple file selection. Gedoe. Maar nu hebben we de File API, socket.io en node.js. Alvast filmpje van het eindresultaat: Video Zit daar in dan?Aan de achterkant een simpele node.js server met:Een laagje socket.io die als proxy dient voor het doorgeven van data tussen clientsEen beetje express en ejs om HTML te serverenDrag and drop API om bestanden in de site te slepenFile API om de data te lezen<progress> element voor de statusSocket.io om de data gebuffered door te sturen Lees verder »creator1988 http://glamour.tweakblogs.net/blog/7238/live-file-sharing-met-socket-punt-io-en-node-punt-js.html#reacties http://glamour.tweakblogs.net/blog/7238 Thu, 27 Oct 2011 15:00:46 GMT http://glamour.tweakblogs.net/blog/7223/nerd-tshirts-met-obfuscated-javascript.html Het begin: Het resultaat (uitvoeren in Chrome of Firefox console): JavaScript:__=!($=[$=[]])+$;_=$[$]+'';$_=({}+$);$_[-~(($=-~$)<<-~$)]+__[-~$]+$_[$]+_[~-$]+_[$=-~$]+(($<<$)+~-$) Geinspireerd door deze blogpost nu zelf maar eens bezig geweest met het (expres) obfuscaten van javascript. Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/7223/nerd-tshirts-met-obfuscated-javascript.html#reacties http://glamour.tweakblogs.net/blog/7223 Mon, 24 Oct 2011 09:08:59 GMT http://glamour.tweakblogs.net/blog/7211/schizofrene-code-met-node-punt-js.html Allereerst een kleine update, op 1 oktober ben ik overgestapt van de de gevestigde orde naar de wondere wereld van een startup. Niet alleen cultureel een verschil, maar ook een shift van .NET naar javascript, van Solr naar Redis, van SVN naar Git en van een Xeon workstation naar een Macbook Air. En nog belangrijker, van tafeltennis naar tafelvoetbal. Voor de mensen die niet 74 feeds in Google Reader hebben zitten: Cloud9 is een IDE, vergelijkbaar met Eclipse of Visual Studio, maar volledig draaiend in de browser; het is 'c9.io' intikken en gaan. Debugging, stack exploration, versiebeheer, you name it. Cloud9 is helemaal gebouwd in javascript, de client is gebouwd op APF, een open source framework voor web applicaties dat intern is ontwikkeld (heeft wel wat weg van Webforms). De backend draait op node.js, een event-based framework voor het schrijven van server side applicaties in javascript. Doordat node vanaf design geschreven is met het idee dat alle code event-driven moet werken heb je bijna geen blocking calls, en kunnen je threads sneller vrijgegeven worden: ergo: je kan meer requests handlen in je web server (gesimplificeerde weergave ). Direct spelen met alle code Het leuke van werken aan een IDE is dat je features die je zelf handig vind gewoon kan inbouwen, zoals het met een klik laten klonen van de GitHub repository waar alle code samples uit de blogpost zitten. Ergo, om alle code uit deze post in hun echte context te zien en meteen te runnen klik hier en druk hierna op 'Run'. Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/7211/schizofrene-code-met-node-punt-js.html#reacties http://glamour.tweakblogs.net/blog/7211 Thu, 20 Oct 2011 09:59:19 GMT http://glamour.tweakblogs.net/blog/6577/dus-euh-jij-voert-dan-die-huizen-in.html "Maar, dat funda dat is toch wel af?"; "En dat doe je dan in je eentje neem ik aan?"; "Maak jij dan de foto's ofzo?"; zomaar een paar citaten die in de afgelopen 2,5 jaar zijn langsgekomen tijdens feestjes. Daarom het enige echte dev-overzicht van funda, met hopelijk een verklaring hoe we 20 man fulltime bezig kunnen houden met het knutselen aan de site. Kan ik daarna mooi bit.ly/neeikvoergeenhuizenin hierheen laten linken en op een t-shirt printen. Dus, hoeveel man loopt daar nou rond? In totaal bestaan we uit een man/vrouw of 50, waarvan er ~ 20 zich bezig houden met techniek, verdeeld over de volgende disciplines:- 1 Groot leider- 1 Software architect- 2 Project managers- 2 Testers- 4 User experience designers (waarvan 1 groot leider)- 1 Release manager / interne technisch applicatiebeheerder- 10 Software developers, waarvan 7 intern, en 3 op locatieEn daarnaast nog 3 applicatiebeheerders die voornamelijk voor ons werken, maar in dienst van onze applicatiebeheer-partij zijn. Maar, die site verandert toch nooit? Wel dus! Maar naast werk aan de sites funda.nl en fundainbusiness.nl hebben we ook nog een mobiele site, een iPhone app, een API, etc. De meeste tijd gaat echter zitten in ons makelaarportaal, de funda desk, waar we tools hebben voor het beheer van alle panden, media en kantoorgegevens. Omdat er voor producten die we daar aanbieden betaald moet worden, hebben we tevens een grote set aan business rules + aanverwante programma's die dit allemaal in goede banen leiden. Lees verder »creator1988 http://glamour.tweakblogs.net/blog/6577/dus-euh-jij-voert-dan-die-huizen-in.html#reacties http://glamour.tweakblogs.net/blog/6577 Wed, 18 May 2011 13:37:13 GMT http://glamour.tweakblogs.net/blog/6538/oauth-provider-in-net.html Om maar eens met een auto-analogie te komen: wanneer je (iets te onbetrouwbare) neefje iets uit de kofferbak van je auto moet halen, kan het een onveilig gevoel geven om hem direct de sleutel van je nieuwe A4 te overhandigen. Hij kan immers met die sleutel de auto starten, wegrijden en je no-claim om zeep helpen. En doet hij het niet nu, dan kan hij de sleutel kopiëren en het morgen proberen. Zou het niet mooi zijn om een sleutel te geven die alleen werkt op de kofferbak? Zelfde geldt voor 3rd parties die bij jouw data willen. Wanneer een applicatie alleen een lijstje met de huizen die jij bewaard op funda wil tonen, waarom zou je dan je gebruikersnaam en wachtwoord moeten geven? Daar kan de applicatie immers álles mee. Daarom: OAuth. An open protocol to allow secure API authorization in a simple and standard method from desktop and web applications. "If you're storing protected data on your users' behalf, they shouldn't be spreading their passwords around the web to get access to it. Use OAuth to give your users access to their data while protecting their account credentials." OAuth is dus een open protocol waarmee je 3rd parties toegang kan geven tot data van je gebruikers, zonder dat de gebruiker zijn wachtwoord met de 3rd party hoeft te delen. Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/6538/oauth-provider-in-net.html#reacties http://glamour.tweakblogs.net/blog/6538 Wed, 11 May 2011 15:45:24 GMT http://glamour.tweakblogs.net/blog/6508/google-analytics-in-mvc.html Wanneer je iets in je MVC applicatie wil implementeren dat op (bijna) elke pagina terug moet komen, zoals Google Analytics, is dat een probleem dat lastig te tackelen is. Tactieken die ik in de praktijk heb gezien:1. Een baseclass maken met daarop de property 'GoogleAnalyticsTag', en alle Masterpages van dit model laten overerven. In de masterpage vervolgens <%= Model.GoogleAnalyticsTag %> doen.2. In je action 'ViewData["GoogleAnalyticsTag"]' zetten, om geen afhankelijkheid op alle modellen te hebben.3. Een losse action maken, en in je masterpage '<%=Html.RenderAction("GoogleAnalytics", "SomeController")%>'.3 is op zich de 'way-to-go' wat mij betreft, maar in tegenstelling tot 1. en 2. waar je in je action (of model) de GA tag zet heb je hier geen action context meer. En dus zag de code er in een van onze applicaties uit als: C#:var url = HttpContext.Current.Request.Url.PathAndQuery; var tag = ""; if (url.StartsWith("/koop/")) tag += "koop/"; if (url.StartsWith("/huur/")) tag += "huur/"; if (new Regex(@"/(koop|huur)/[\w-]+/\w+-\d+-[\w-]+/").Match(url).Success) { if (url.Contains("omschrijving")) tag += "object-omschrijving"; if (url.Contains("fotos")) tag += "object-fotos"; } // etc. etc. etc. Ononderhoudbaar, buggevoelig, en super hacky. Dat kan mooier! Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/6508/google-analytics-in-mvc.html#reacties http://glamour.tweakblogs.net/blog/6508 Thu, 05 May 2011 13:14:21 GMT http://glamour.tweakblogs.net/blog/6492/ios-like-javascript-photo-gallery-breakdown.html Vandaag een breakdown van de swipe-events in de photo gallery die we op onze mobiele website gebruiken. Verwacht niet een line-to-line breakdown, maar alleen de wijzigingen die hebben moeten doen om van onze more-or-less statische versie een versie te maken die swipe events ondersteunt. Let's get it started Omdat we gebruik willen maken van de 'touchmove' events gebruiken we een zelfgeschreven jQuery plugin die de interface iets handiger maakt: jquery.(s)wipe.js. De syntax voor deze plugin is: JavaScript:$('#een-element').wipe({ wipeStart: /* */, wipe: /* */, wipeEnd: /* */ }); We kunnen aan deze events functies koppelen waardoor we alle logica voor het swipen op één plaats hebben. Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/6492/ios-like-javascript-photo-gallery-breakdown.html#reacties http://glamour.tweakblogs.net/blog/6492 Tue, 03 May 2011 12:23:11 GMT http://glamour.tweakblogs.net/blog/6476/mobiele-website-live.html Voor een ieder die benieuwd was naar de touch-photogallery in deze post: we zijn live! Beschikbaar op m.funda.nl, als je op je desktop kijkt is het aan te raden Chrome of een andere Webkit browser te gebruiken. De Nota Bene's 1. Wellicht is de DNS server van je provider nog niet bijgewerkt, in dat geval zie je nog de oude site. 2. Koppeling met je profiel op Mijn funda wordt over enkele weken...creator1988 1 http://glamour.tweakblogs.net/blog/6476/mobiele-website-live.html#reacties http://glamour.tweakblogs.net/blog/6476 Fri, 29 Apr 2011 09:46:40 GMT http://glamour.tweakblogs.net/blog/6431/mix-rollup-deel-1.html Vorige week gespendeerd in Las Vegas voor de jaarlijkse Microsoft conferentie over User Interaction & Development: MIX. Hier een quick rollup van deze week! Zondag Aankomst, en een dag voor de conferentie het schokkende bedrag van $20.75 uit de 5-card poker machine gehaald met 4 azen! Lees verder »creator1988 http://glamour.tweakblogs.net/blog/6431/mix-rollup-deel-1.html#reacties http://glamour.tweakblogs.net/blog/6431 Wed, 20 Apr 2011 12:29:43 GMT http://glamour.tweakblogs.net/blog/6358/output-cache-substitution-(donut-caching)-in-asp-punt-net-mvc-2-en-3.html Dynamische pagina's, of het nou in PHP, CGI of .NET is, hebben het internet gemaakt tot wat het nu is; maar hebben één groot nadeel. Voor elk request dient de pagina opnieuw te worden gegenereerd. Oplossing: cachen. Nu hebben we hiervoor in ASP.NET MVC het 'OutputCache' attribuut, dat je op elke Action kan zetten: C#:// cache voor 1 minuut [OutputCache(Duration = 60, VaryByParam = "id")] public ActionResult Detail(int id) { // haal model op return View(); } Probleem Iedereen die deze pagina de komende minuut opvraagt krijgt dezelfde versie te zien. Geen probleem voor pagina's die more-or-less statisch zijn, maar funest wanneer je bijvoorbeeld login informatie toont! Voeg je bijvoorbeeld Output caching toe aan het standaard ASP.NET MVC 2 project (In VS 2010 -> New Project -> ASP.NET MVC 2 Web Application) dan krijg je de volgende situatie: Overzichtspagina, je ziet de 'last update' datum ter referentie Nu loggen we in De pagina wordt uit cache geladen (zie 'last update') maar er staat nog steeds een 'Log on' knop ipv. 'Logged in as jan'. Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/6358/output-cache-substitution-(donut-caching)-in-asp-punt-net-mvc-2-en-3.html#reacties http://glamour.tweakblogs.net/blog/6358 Tue, 05 Apr 2011 12:27:41 GMT http://glamour.tweakblogs.net/blog/6329/validatie-zoals-ux-het-wil-met-asp-punt-net-mvc-2.html De standaard validatie in MVC 2 gaat er vanuit dat je werkt met 'Validation messages' achter je tekstvelden, en een 'Validation summary' bovenaan je scherm. Dit werkt snel en out-of-the box, inclusief javascript validatie via jQuery Validate, en ook server side wanneer er geen javascript beschikbaar is (pic via). Maar... wat als je UX-afdeling dit spuuglelijk vindt? Vandaar dat we bovenstaande gaan transformeren naar: Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/6329/validatie-zoals-ux-het-wil-met-asp-punt-net-mvc-2.html#reacties http://glamour.tweakblogs.net/blog/6329 Tue, 29 Mar 2011 12:23:13 GMT http://glamour.tweakblogs.net/blog/6301/api-documentatie-genereren-uit-code.html Om het proces van API updates wat te verzachten willen we switchen van een op basis van een Word doc gegenereerd document, naar documentatie op basis van onze code (C#, met XML documentatie). Nu zou dat prima moeten kunnen met SandCastle, maar die genereert de documentatie op basis van onze code, en niet op basis van onze DataContracts. Probleem, want in de uiteindelijke API zijn alleen de data...creator1988 1 http://glamour.tweakblogs.net/blog/6301/api-documentatie-genereren-uit-code.html#reacties http://glamour.tweakblogs.net/blog/6301 Mon, 21 Mar 2011 13:20:14 GMT http://glamour.tweakblogs.net/blog/6282/video!-preview-van-touch-based-mobile-photo-gallery.html http://www.youtube.com/watch?v=WjpauZnEm7g//creator1988 1 http://glamour.tweakblogs.net/blog/6282/video!-preview-van-touch-based-mobile-photo-gallery.html#reacties http://glamour.tweakblogs.net/blog/6282 Wed, 16 Mar 2011 13:28:21 GMT http://glamour.tweakblogs.net/blog/6271/mapreducejs-een-educatief-map-reduce-framework.html Downloadlink: MapReduceJS, an educational MapReduce framework implemented in Javascript. MapReduce is een door Google ontwikkeld framework waarmee bewerkingen in twee stappen op grote sets data kunnen worden uitgevoerd. Elke bewerking is compleet onafhankelijk van andere bewerkingen en ze kunnen daarom eenvoudig worden verspreid over meerdere machines. Standaard voorbeeld hierin is bijvoorbeeld het tellen van woorden in documenten:1. Input: een lijst met documenten2. Map-stap: je krijgt een document binnen, en split deze op spaties. Je retouneert een array met alle losse woorden3. Reduce-stap: je krijgt binnen: het woord, en een array met alle keren dat deze voorkwam in álle documenten. Deze kan je tellen en teruggeven als output.Dit is goed distribueerbaar omdat stap 2 op een oneinding aantal machines kan draaien. Het splitten van een document is immers een volledig losse stap. Hetzelfde geld voor 3. aangezien je hier alleen hoeft op te tellen en geen andere info nodig hebt. Maar... Het testen van MapReduce kan je bijvoorbeeld in Hadoop of MongoDB heeft een aantal nadelen: je moet de software aan de praat krijgen en je data importeren. Vanwege het distributed idee achter MapReduce is het bovendien lastig om te debuggen. Daarom... Lees verder »creator1988 1 http://glamour.tweakblogs.net/blog/6271/mapreducejs-een-educatief-map-reduce-framework.html#reacties http://glamour.tweakblogs.net/blog/6271 Mon, 14 Mar 2011 13:58:39 GMT