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.

Grundlagen

http://www.uptill3.com/static/iphone_forensics.pdf

Dateien auslesen

http://www.macroplant.com/iexplorer/

(Binary) Plist Dateien anzeigen

http://www.icopybot.com/plist-editor.htm

Cookies.binarycookies

http://it.toolbox.com/blogs/locutus/understanding-the-safari-cookiesbinarycookies-file-format-49980

SQLite Datenbanken anschauen

https://addons.mozilla.org/de/firefox/addon/sqlite-manager/

Web-Traffic nachvollziehen

1. http://www.charlesproxy.com/
2. iPhone und Rechner in selbes WLAN
3. Rechner-IP:8888 als Proxy der WLAN-Verbindung im iPhone einrichten
4. Session capturen

SSL-Web-Traffic nachvollziehen

1. Proxy -> Proxy Settings -> SSL -> Enable SSL Proxying
2. Locations mit den entsprechenden Domaisn füllen
3. Help -> Install Charles CA SSL Certificate -> Details -> In Datei kopieren -> Per Mail an iPhone senden und installieren

Vorsicht, besser nicht zu sehr bei der Installation von Apps benutzen, ich war heute 2 Stunden vom AppStore ausgeschlossen ;)

Mit dem Setup kommt man schon recht weit und kann doch so einiges lernen.

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.

1. Click the request you want the content from
2. In the Middle panel, click “Packet Details”
3. Collapse all branches
4. Right click on last Branch (Could be “Line-based text data: text/html” or “Media Type”)
5. Click “Copy”
6. Click “Bytes (Printable Text Only)”

Now you have the content in your clipboard and paste it where you want.

• http://www.serverdensity.com/
• http://newrelic.com/
• http://www.appfirst.com/
• https://www.bijk.com/

Self-hosted:

• http://munin-monitoring.org/
• http://www.cacti.net/
• http://www.eluna.org/eluna_graph_system.html
• http://www.monitorix.org/
• http://www.prbproject.org/
• http://serverstats.berlios.de/

Ergänzungen willkommen.

Listen 80

with

Listen 127.0.0.1:80

2) Open file xampp\apache\conf\extra\httpd-ssl.conf and replace

Listen 443

with

Listen 127.0.0.1:443

3) Open file xampp\mysql\bin\my.cnf|.ini and put in

bind-address=localhost

directly after [mysqld] (NOT [mysql]!)

http://www.chip.de/news/Microsoft-Tool-Windows-7-vom-USB-Stick-installieren_38622482.html

The solution to the problem is to change the target of the shortcut from [...]/Freemind.exe to this:
"C:\Program Files\Java\jre6\bin\javaw.exe" -jar lib/freemind.jar
Now you can pin the program to the taskbar in Win7 and use it as every other program.

And yes, this tip works with almost all Java programs that are delivered with working .jar files.

The trick is, that INNER JOIN will ‘shrink’ the LargeTable down to the size of the TemporarySmallTable and the delete will operate on that smaller set only, since USING will reference to the joined table.

http://blog.mkoebele.de/2008/07/mysql-delete-subset-in-table-quickly.html

http://dev.mysql.com/doc/refman/5.0/en/delete.html#c9536

Mehr davon bitte…

http://blog.janpiotrowski.de/elastische-tabstopps/

function utf16_to_utf8($str) {
$c0 = ord($str[0]);
$c1 = ord($str[1]);
if ($c0 == 0xFE && $c1 == 0xFF) {
$be = true;
} else if ($c0 == 0xFF && $c1 == 0xFE) {
$be = false;
} else {
return $str;
}
$str = substr($str, 2);
$len = strlen($str);
$dec = '';
for ($i = 0; $i < $len; $i += 2) {
$c = ($be) ? ord($str[$i]) << 8 | ord($str[$i + 1]) :
ord($str[$i + 1]) << 8 | ord($str[$i]);
if ($c >= 0x0001 && $c <= 0x007F) {
$dec .= chr($c);
} else if ($c > 0x07FF) {
$dec .= chr(0xE0 | (($c >> 12) & 0x0F));
$dec .= chr(0x80 | (($c >> 6) & 0x3F));
$dec .= chr(0x80 | (($c >> 0) & 0x3F));
} else {
$dec .= chr(0xC0 | (($c >> 6) & 0x1F));
$dec .= chr(0x80 | (($c >> 0) & 0x3F));
}
}
return $dec;
}Quelle: http://www.moddular.org/log/utf16-to-utf8

Update:
Manchmal sollte ich erst nachdenken, und dann nach Code googlen. Das hier reicht natürlich auch vollkommen aus und ist sicher besser getestet:
$utf8 = mb_convert_encoding($utf16, 'UTF-8', 'UTF-16LE');

Und schon hat man die normale Mausgeschwindigkeit auch in CS3-Programmen.

Quelle: http://www.psd-tutorials.de/modules/Forum/11_photoshop/25234-photoshop-cs3-maus-zu-langsam.html

http://dev.mysql.com/doc/refman/5.0/en/full-table.html

http://dev.mysql.com/doc/refman/5.1/de/full-table.html

http://jeremy.zawodny.com/blog/archives/000796.html

Das von Jeremy Zawodny vorgeschlagene

alter table foo max_rows = 200000000000 avg_row_length = 50;

funktioniert auch wunderbar. Nun passen nochmal ein paar Gigabyte rein.

<div style="float:left"><img src=...></div>
<div id="text">Erste Zeile Text. <em>Zweite Zeile Text</em></div>

Das führte im konkreten Fall im IE7 dazu, daß ab der zweiten Zeile der Hintergrund des text-Div vor das floatende Div links gelegt wurde. Natürlich war der verursachende Code lange nicht so einfach, und so habe ich dann doch locker 30 Minuten gesucht und probiert bis ich auf die Idee kam, dass das em der Auslöser sein könnte.

Glücklicherweise hatte schon 2006 jemand dieses Problem:

The other (are you ready for this?) is to remove the <em> element.

I am perplexed. Does anyone have a clue as to what is going on?

Und ein weiterer Leidensgenosse konnte eine passende Lösung liefern:

Yeah. It’s an em bug :-) IE6 has em bugs, too. Try this:
em {zoom: 100%; overflow: hidden;}

http://archivist.incutio.com/viewlist/css-discuss/81647

[...] sowohl Microsoft als auch Google überprüfen mittlerweile Seiten auf Cloaking auf Referrerbasis. Dazu rufen sie die Seiten mit einem Referrer, der so aussieht, als komme der Nutzer über ihre Suchmaschine auf.

Quelle: Referrer-Spam von Google und Microsoft

Ich habe ähnliche Referer entdeckt, allerdings bei Seiten, die nur über Google Adwords beworben werden und eigentlich keinerlei Seiten im Google-Index haben. Eine klassische Cloakinganalyse macht hier also wenig Sinn.

Erstmals tauchten diese Referer am 14.1 auf:

• http://www.google.com/search?hl=en&q=motor+large+ode+be
• http://www.google.com/search?hl=en&q=bedding+map+expenses+custom
• http://www.google.com/search?hl=en&q=car+medal+roads+stromberg
• http://www.google.com/search?hl=en&q=pregnant+wa+registery+website
• http://www.google.com/search?hl=en&q=sound+wolf
• http://www.google.com/search?hl=en&q=seto+Have
• http://www.google.com/search?hl=en&q=shower+leopard+lube
• …

Urpsrung waren die üblichen 72.14.- und 66.249.-IP-Blöcke von Google, als Useragent wurde das harmlose Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) übermittelt. Eigentlich eine Frechheit, denn das Verzeichnis auf das die Adwords-Besucher geleitet werden ist in der robots.txt explizit für Robots verboten. Dass Googles Adbot sich nicht daran hält ist verständlich, aber bei diesem Cloaking-Überprüfungsbot wundere ich mich doch ein wenig.

Ab 1. Februar kam noch eine weitere Variante dazu, über die ich bislang online noch gar nichts gelesen habe. Der Referer besteht nicht mehr aus zufällig zusammengewürfelten englischen Begriffen, sondern setzt sich aus einem wirklich in Adwords gebuchten Keyword und der Domain mit site-Operator zusammen:

• http://www.google.com/search?hl=en&q=site%3Aexample.org+keyword

Die IPs und der Useragent sind die selben.

Mich als Adwords-Kunden ärgert dieses Vorgehen von Google eher weniger, auch die bisherigen Adsbot-Aufrufe haben die Logfiles übermäßig zugemüllt. Für das wirkliche Erfolgstracking mussten diese schon immer herausgefiltert und explizit behandelt werden. Nun habe ich eben einige weitere Regeln hinzugefügt, die auch diesen Anti-Cloaking-Bot erfassen.
Die Hintergründe wären jedoch trotzdem interessant.

http://cgi.ebay.de/ws/eBayISAPI.dll?ViewItem&item=180216630221