Wikipedia Mobile #1
Veröffentlicht am 8.4.2012, 02:00 Uhr
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:
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.
iPhone-Apps analysieren
Veröffentlicht am 6.4.2012, 22:55 Uhr
Heute habe ich ein paar iPhone-Apps auseinander genommen und sowohl Funktionsweise als auch Datenverkehr näher angeschaut.
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
- http://www.charlesproxy.com/
- iPhone und Rechner in selbes WLAN
- Rechner-IP:8888 als Proxy der WLAN-Verbindung im iPhone einrichten
- Session capturen
SSL-Web-Traffic nachvollziehen
- Proxy -> Proxy Settings -> SSL -> Enable SSL Proxying
- Locations mit den entsprechenden Domaisn füllen
- 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.
Performance-Optimierung am Beispiel: betamode.de
Veröffentlicht am 22.3.2012, 20:07 Uhr
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
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.
Wireshark: Copy content of compressed requests
Veröffentlicht am 7.3.2012, 17:40 Uhr
Copying the content of a request compressed by using gzip is not easy in Wireshark:
- Click the request you want the content from
- In the Middle panel, click “Packet Details”
- Collapse all branches
- Right click on last Branch (Could be “Line-based text data: text/html” or “Media Type”)
- Click “Copy”
- Click “Bytes (Printable Text Only)”
Now you have the content in your clipboard and paste it where you want.
Anwendungen und Tools zum Monitoring und Graphing von Serverdaten (Load, Memory, Traffic)
Veröffentlicht am 31.7.2011, 18:19 Uhr
SAAS:
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.
Fix ugly fonts in Firefox 5
Veröffentlicht am 27.6.2011, 09:40 Uhr
- about:config
gfx.direct2d.disabledauf true setzen
Secure XAMPP: only local connections
Veröffentlicht am 25.3.2011, 12:23 Uhr
1) Open file xampp\apache\conf\httpd.conf and replace
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]!)
Dual-boot a hackintosh with Windows 7
Veröffentlicht am 7.7.2010, 10:26 Uhr
http://thebackpackr.com/hackintoshing-with-snow-leopard/
http://www.chip.de/news/Microsoft-Tool-Windows-7-vom-USB-Stick-installieren_38622482.html
Pin Freemind to the taskbar in Windows7
Veröffentlicht am 8.4.2010, 09:55 Uhr
The normal Freemind shortcut goes directly to Freemind.exe, but as the execution takes place in Java you can’t pin this shortcut to the taskbar in Windows 7. Another icon will appear with the same icon. If you try to pin this icon, Freemind won’t start or the icon will change to the generic Java icon.
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.
Programming is hard
Veröffentlicht am 16.1.2010, 19:10 Uhr
http://writing.bryanwoods4e.com/