API Load Testing
Published 2017-02-14, 13:27
Last year I not only needed to log JavaScript errors but also find a way to load test a REST(ish) API. Again some bookmarks that resulted out of my research on how to load test an API:
Software as a Service
- https://loadimpact.com/api-testing
- https://loader.io/
- https://www.blitz.io/
- http://loadstorm.com/pro/
- https://loadfocus.com/load-testing
Articles / Blog Posts
- http://blog.novanet.no/load-testing-rest-apis/
- https://www.programmableweb.com/news/load-impacts-new-chrome-extension-allows-api-user-recording-browser/2013/12/10 + https://www.youtube.com/watch?v=qffAOJtXB2c
JavaScript Error Tracking and Logging
Published 2017-02-14, 13:19
Last year I needed a solution for logging and tracking errors in a JavaScript application and spent some time researching services and tools to resolve this need. This is a cleaned up dump of my bookmarks that resulted out of this research:
SaaS
- https://sentry.io/for/javascript/
- https://rollbar.com/docs/notifier/rollbar.js/
- https://trackjs.com/
- http://www.muscula.com/
- https://www.loggly.com/docs/javascript/
- http://jslogger.com/
- https://airbrake.io/languages/javascript_exception_handler
- https://errorception.com/
- https://raygun.com/products/crash-reporting
- https://trackets.com/
- https://www.honeybadger.io/
- https://www.bugsnag.com/platforms/javascript/
Google Analytics
- http://www.davidverhasselt.com/an-easy-javascript-error-logger-using-ga/
- https://developers.google.com/analytics/devguides/collection/analyticsjs/exceptions
- http://blog.pdsullivan.com/posts/2015/02/19/ionicframework-googleanalytics-log-errors.html
self-hosted
- https://github.com/errbit/errbit
- https://github.com/burakson/sherlogjs
- https://github.com/getsentry/sentry
hacky
- http://js.jsnlog.com/
- http://jserrlog.appspot.com/
Cordova/Ionic support
- https://jslog.me/
- https://www.atatus.com/docs/platforms/ionic
As I needed it for a Ioinic app and didn’t really have a budget I went with jslog.me which worked totally fine for my needs.
Postman: Use result data in test scripts (and save to environment)
Published 2015-03-10, 21:41
Just use ‚request‘ in the test script:
- request.data is an object with all the request parameters
- request.url contains the requested URL
- request.method contains the used request method
- request.headers is an object with all the headers
Makes so many things easier 🙂
Postman (REST Client) Tests
Published 2014-10-31, 16:04
### VORBEREITUNG ### // save response in env var data = responseBody; postman.setEnvironmentVariable("data", data); // parse value from json and save in env var data = JSON.parse(responseBody); postman.setEnvironmentVariable("device_id", data.id); // parse array from json and safe as string and save in env var data = JSON.parse(responseBody); var product = JSON.stringify(data[0]); postman.setEnvironmentVariable("contentful", product); // parse array from json, change value, and safe as string and save in env var data = JSON.parse(responseBody); data.locale = "en_US"; var device_update = JSON.stringify(data); postman.setEnvironmentVariable("device_update", device_update); ### TESTS ### // test resposonse code tests["Status code is 200"] = responseCode.code === 200; // test if response is empty var data = JSON.parse(responseBody); tests["Transaction list is empty"] = data.length === 0; // test if body contains value tests["Body contains string" + environment.device_id] = responseBody.has(environment.device_id); // test exact values of json var data = JSON.parse(responseBody); tests["transaction.id is " + environment.transaction_id] = data.id === environment.transaction_id; tests["transaction.state is IN_PROGRESS"] = data.state === "IN_PROGRESS";
WordPress Multisite
Published 2013-11-03, 23:00
Today I spent some time reading up on WordPress Multisite. It was born out of WordPress MU and included in the Core of WordPress since version 3.0, but I never got around to really understand and use it. Here we go:
Information
- http://codex.wordpress.org/Glossary#Multisite
- http://codex.wordpress.org/Create_A_Network
- http://codex.wordpress.org/Before_You_Create_A_Network
- http://codex.wordpress.org/Network_Admin
- http://codex.wordpress.org/Multisite_Network_Administration
- http://codex.wordpress.org/Debugging_a_WordPress_Network
- http://toscho.de/2013/wordpress-multisite-mit-mehreren-domains/
Plugins
- http://wordpress.org/plugins/wordpress-mu-domain-mapping/ + http://ottopress.com/2010/wordpress-3-0-multisite-domain-mapping-tutorial/
- http://wordpress.org/plugins/multisite-enhancements/
- http://wordpress.org/plugins/networks-for-wordpress/
- http://wordpress.org/plugins/multisite-user-management/
- http://wordpress.org/plugins/safecss/
- http://wordpress.org/plugins/wordpress-mu-sitewide-tags/
- http://wordpress.org/plugins/sitewide-comment-control/
- http://wordpress.org/plugins/network-only-plugins-tab/
Special Cases
- http://codex.wordpress.org/Migrating_Multiple_Blogs_into_WordPress_3.0_Multisite
Future
- http://make.wordpress.org/core/2013/10/06/potential-roadmap-for-multisite/
Summary
Multisite seems to work fine but sometimes behaves a bit strange, especially if you want to do special things that it’s not (really) supposed to do. The documentation lacks a lot (note to myself: maybe help) and the not-in-the-focus development from MU to Multisite causes lots of problems with old blogs posts, strange wording and information, confusing everybody. So I’m going to try using it.
Laravel 4, Eloquent: Check if there is a Model with certain key-value pair in a Collection
Published 2013-10-17, 16:47
I wanted to find out if there already is a Model with a certain value for a certain column in a Collection that I retrieved realier in my code, e.g. is there already a User with name = Müller in my $users Collection?
$users->contains() can only check if there is a model with a certain primary key, and there also is no method to trivially search through all Models. Of course this all could be hacked together somehow*, but after a bit of searching I found this nice way to solve my question:
$value = 'Müller'; $key = 'name'; if(in_array($value, $users->lists($key))) { ... }
Collection->lists() gets an array with all the values of the Model for the requested key. Checking if our new value is in there, is super simple.
*Of course I first tried it this way:
- use $collection->filter() and then count the result
- hack $collection->contains() +$collection->find() to accept a field name as a parameter
- see 2, but copy the methods as private methods to my controller instead of tinkering with the framework code directly
All 3 solutions worked, but needed lots of ugly code.
PHP Frameworks
Published 2013-10-02, 11:16
As I’m getting back into working with PHP more hands-on I spent some time to look around to build this small overview of PHP frameworks. I seperated them into 3 groups: Most popular, Others and Obscure / Ancient / Dead.
Most popular
- http://framework.zend.com/
- http://symfony.com/
- http://cakephp.org/
- http://ellislab.com/codeigniter
- http://kohanaframework.org/
- http://www.yiiframework.com/ + https://github.com/yiisoft/yii
- http://fuelphp.com/
- http://laravel.com/ + https://github.com/laravel/laravel
Google Trends graphes
To be able to assess the popularity, these simple Google Trend charts may help:
The „old guys“
(WTH happened in October 2009?)
The „new guys“ (+ ZF for comparison)
Please note, that many people probably only search for „Zend“ to find Zend Framework.
Others
- http://flow.typo3.org/
- http://silex.sensiolabs.org/ (Micro Framework)
- http://phalconphp.com/en/ (Speed!)
- http://www.slimframework.com/ (Micro Framework)
- http://www.yafdev.com/+ https://github.com/laruence/php-yaf (Speed!)
- http://lithify.me/
- http://zetacomponents.org/ + https://github.com/zetacomponents
- http://www.pradosoft.com/ + https://github.com/pradosoft/prado (founder left, now creates yii – team still active!)
- http://www.hazaarmvc.com/
- http://auraphp.com/
- http://www.agavi.org/
- http://fatfreeframework.com/home
Obscure / Ancient / Dead
- http://www.recessframework.org/ (last updated 2010)
- http://solarphp.com/ (replaced by Aura)
- http://jelix.org/
- http://www.phpontrax.com/
- http://www.phpdevshell.org/
- http://www.openbiz.me/developer/framework.php
- http://www.phpwact.org/
- https://github.com/akelos
- http://sourceforge.net/projects/cgiapp/
- http://xyster.libreworks.com/
- https://github.com/appflower
- http://www.qcodo.com/
- http://adventure-php-framework.org/Seite/001-Startseite
- http://zikula.org/
- http://www.redsparkframework.de/ (CMS framework)
- http://www.doophp.com/
- http://seagullproject.org/
- http://nette.org/
- http://alloyframework.org/
- http://www.banshee-php.org/
- http://www.dingoframework.com/
- https://burnercms.com/
- http://phpixie.com/
- http://code.google.com/p/kata/
Sources
- http://www.phpframeworks.com/
- http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks#PHP
- Google „php framework“
Wikipedia Mobile #1
Published 2012-04-08, 02:00
This morning I accidentally installed Wikipedia’s mobile app on my iPad. It felt sluggish, strange and not at all what I expected. As bitching doesn’t help and I wanted to use my professional knowledge in my free time, I started poking around. This is the result.
Starting position
The iOS Wikipedia app has really bad ratings. Users complain about bad performance, bad usability and about the feeling that this is more an Android app but an iOS app. In sum, this creates you a rating of only 2 stars for the current version. Ouch.
- http://itunes.apple.com/de/app/wikipedia-mobile/id324715238?mt=8
- https://play.google.com/store/apps/details?id=org.wikipedia
Android users seem to be happier with their 4.5 star rating. The problems only exists with the iOS version of the (similar) app. Strange. Let’s start with the basics and look into the feature set:
- Read Wikipedia articles
- Fulltext search
- Save and read articles offline
- Share articles
- Articles nearby (articles on topic near my geolocation)
- Supports reading articles in different languages
Doesn’t sound too bad. It’s not only stuff a mobile web site could do, so an app makes sense. So lets start to investigate.
What’s the background of all that?
The AppStore description of the app also links to a Twitter account and the source code of the app on Github:
- https://twitter.com/#!/wikimediamobile
- https://github.com/wikimedia/WikipediaMobile
From these two links I basically spent hours reading, clicking, reading again – typical procrastination stuff (Procrastinators beware if you are even near Wikipedia articles…). But I learned a lot 😉 Back to topic: The following links all are relevant to the mobile efforts of Wikipedia:
- http://bit.ly/wikiappbugs (Bugs in Bugzilla instead of Issues of Github)
- http://www.mediawiki.org/wiki/Category:Mobile
- http://www.mediawiki.org/wiki/Wikimedia_Mobile_and_Special_Projects_engineering
- http://www.mediawiki.org/wiki/Mobile_design
- http://www.mediawiki.org/wiki/Wikimedia_Apps
- http://meta.wikimedia.org/wiki/Mobile_Projects/Contribute#Apps
- http://blog.wikimedia.org/c/technology/mobile/
- http://meta.wikimedia.org/wiki/Mobile_Projects/roadmap
- http://meta.wikimedia.org/wiki/Mobile_Projects
- http://meta.wikimedia.org/wiki/Mobile_Projects/Platforms_Support_Status
While reading these pages, I noticed information about two different iOS apps: One is based on Rhodes, one on Phonegap. It turns out the Phonegap version for iOS is quite new and the old one is to be retired and phased out:
- http://www.mediawiki.org/wiki/Wikipedia_iPhone_app
So we have several projects and initiatives in the mobile space of Wikipedia:
- Mobile design
- Mobile website
- MobileFrontend: Extension that produces the mobile website http://www.mediawiki.org/wiki/MobileFrontend
- Zero (text-only) mobile website for Global South (developing countries)
- Mobile apps
Not too bad. Of course the articles in the wiki are quite… organically grown and sometimes hard to differentiate and classify. But I think that’s the case most of the time when volunteers and professionals work together.
The funny stuff: code
Now I have an overview, so let’s get back to the funny stuff: code.
As I have never used git before, I spend some time installing all the tools and learning how to use them. After that I can finally checkout the repository on Github. While I do this, I notice that the README.md isn’t as pretty as all the readmes of the other Github projects I know. So that’s the first thing I decide to fix. 1 hours, lots of reading and 3 minutes of ‚coding‘ and a pull request later, it is done. My commit gets integrated by reedy a few minutes later. I’m in.
But now to the real code. The folder structure of the repository isn’t very clear. There are lot’s of confusing files in the root that don’t really belong there in a multi platform project, several folders that also don’t make sense to me or I can’t identify. Again, this seems to have grown over time. This is definitely something that could and should be fixed.
In /assets/www I find something that looks like the html application. Loooots of Javascript, jQuery and Zepto *confused. Anyway, using –disable-web-security I can open the Phonegap app in Chrome and even get it working! Still, several ‚file not found‘ as non-existant files are requested. But here it becomes quite clear, that the app itself is no bad in itself. It works, the code is more or less structured, you can see what the developer was thinking. Normally that’s a good thing. So as to not fish around without all information, I conclude my little poking session for today.
Conclusion
After getting this short glimpse into Wikipedia Mobile I think that the code isn’t the first problem to fix. First it needs some love in the Documentation and Organization of the code. So that’s where I will start. Let’s see what I can do.
PS: Well, I installed the app on my old iPod 3 (iOS 4.2.1) and tried to use it – completely unuseable. Maybe we should start with the code after all.
Kurze Analyse von Forge of Empires
Published 2012-03-29, 15:30
InnoGames hat mit Forge of Empires ein neues Browser-Aufbaustrategie-Spiel veröffentlicht. Logischerweise habe ich mir das ein wenig genauer angeschaut:
Technik
- Flash-Client!
- Game-Seite sauberer Quellcode
- Nur inline CSS
- Combined JS
- Enthalten
- http://code.google.com/p/swfobject/
- http://swffit.millermedeiros.com/
- http://jquery.com/
- z.B. swfobject oder jQuery stehen unter MIT Lizenz:
[…] The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. […]
Die fehle allerdings überall.
- Enthalten
- Inline JS für eigenen Code
- Google Analytics
- Preloader lädt eine lang.mo, mit POEdit „dekompilierbar“ zu Quell-po-Datei
- geladene Datei aus Verzeichnis en_DK
- 1258 lokalisierte Strings
- Unterschiede Zwischen Vorlage und Übersetzung, obwohl beide EN
- Server unter /game/amf
- Selbe Domain wie Hauptseite, also auch Analytics-Cookies bei jedem AMF-Request
- Animationen und andere Assets als PNG(-Sprites)
- Manche Assets mit Reset-Cache-Query, andere ohne (siehe Liste vorne dran)
- Verschiedene SWF-Files je nach Zeitalter, vermutlich Interface, auf jeden Fall Musik
- Soundeffekte als MP3
- Musik aus verschiedenen Fetzen (dynamisch?) zusammengesetzt
- Server:
- Server: nginx/1.0.10
- X-Powered-By: PHP/5.3.10-1~dotdeb.1
- Tutorial-Content wird als XML-File ausgeliefert
- http://en1.forgeofempires.com/data/tutorial.xml
- Code ist nicht valide wegen kaputtem Comment 😉
- Tolle Payment-Einbindung
- Von Flash erzeugter Screenshot als Hintergrundbild
- Vordergrund Iframe der Payment-Seite
Allgemein
- Nette, ruhige Hintergrundmusik
- Per Default eine Menge Freunde
- Farmville meets Die Siedler II
- Kasten in Kasten in Kasten
- Dauer-PVP
- Support
- Plündern
- Highscorenachbarn statt Freundesleiste
- Keine Freundesliste
- Tutorial sehr restriktiv
- Event History bei Login ist ein super Feature
- Monetarisierung
- Produktion
- Instant abernten
- Instant fertig
- Doppelte Produktion
- Militär
- Personenslots bei Militärgebäuden
- Negotiation (kampfloser Gewinn) ohne verfügbare Gegenstände
- Reduce Training time
- Units heilen
- Instant scouting
- Gebiet
- Verzeitige Expansion
- Forschung
- Forschungspunkte
- Produktion
Performance-Optimierung am Beispiel: betamode.de
Published 2012-03-22, 20:07
Ich habe mich ein wenig mit Performance Optimierung von Webseiten beschäftigt. In den nächsten Tagen und Wochen werde ich einige Beiträge dazu veröffentlichen. Den Anfang macht diese Beschreibung des Optimierungsvorgangs von betamode.de:
Beispielseiten für Optimierung
- http://betamode.de
- http://betamode.de/2011/07/31/server-data-monitoring-graphing/
Ausgangssituation
- http://www.webpagetest.org/result/120318_NC_3MJ57/
- http://www.webpagetest.org/result/120318_GB_3MJ59/
Erste Beobachtungen und Auswertung
- urchin.js – uralter Google Analytics Code?
- Mehrere kleine GIFs, sollten sich einfach spriten lassen
- First Byte Time ist sehr hoch
- Kein Caching der statischen Ressourcen
- Kein CDN
Optimierung
Anwendbare Regeln aus High Performance Website Sites:
Rule 1 – Make Fewer HTTP Requests
Folgende Bilder können zusammengefasst werden:
- http://betamode.de/wp-content/themes/betamode/images/suche.gif
- http://betamode.de/wp-content/themes/betamode/images/clock.gif
- http://betamode.de/wp-content/themes/betamode/images/comments.gif
- http://betamode.de/wp-content/themes/betamode/images/xml.gif
Schritte:
- Bilder von <img> auf background-images umbauen
- Bilder als Sprite zusammenfassen: http://betamode.de/wp-content/themes/betamode/images/sprite.gif
- Sprite als background-image einbauen
- Da sich bg.gif nicht mitspriten lässt wird es als data-base64 direkt ins CSS eingebunden
Ergebnis
- http://www.webpagetest.org/result/120318_NM_3MJST/
- http://www.webpagetest.org/result/120318_C2_3MJSV/
Rule 3 – Add an Expires Header
Mit W3 Total Cache lässt sich sich das wunderbar erschlagen.
Ergebnis
- http://www.webpagetest.org/result/120318_0K_3MJY7/
- http://www.webpagetest.org/result/120318_4C_3MJZ0/
Rule 6 – Put Scripts at the Bottom
Das Analytics-Script ist zwar schon ganz unten, aber noch das alte synchrone. Also mal das neue besorgen und einbauen.
Ergebnis
- http://www.webpagetest.org/result/120318_B3_3MJZY/
- http://www.webpagetest.org/result/120318_TS_3MJZZ/
Rule 10 – Minify JavaScript (+ HTML + CSS)
Javascript gibt es keines, aber für Minify von HTML und CSS kann einfach W3 Total Cache konfiguriert werden, fertig.
Ergebnis
- http://www.webpagetest.org/result/120318_C4_3MK1C/
- http://www.webpagetest.org/result/120318_6G_3MK1D/
Dann zum Abschluss noch ein bisschen serverseitiges Caching um DB-Anfragen und so weiter zu minimieren mit W3 Total Cache.
End-Ergebnis
- http://www.webpagetest.org/result/120318_57_3MK1Z/
- http://www.webpagetest.org/result/120318_XM_3MK22/
Tadaa, schnell.