Marcel Eichner // Ephigenia

  • Home
  • Illustration
  • Code
  • Kontakt

Aktuelle Projekte

Horrorblog.org
jQuery.slideShow
Franklin
code.marceleichner.de

This Blog-Website is built with Harrison!

Blogs & Freunde

Gimmixx
Martin Fleck
Torsten Bergler
Jens Franke
Robokid
Peter Kröner
Polycoder
Coding Horror
Lotterliebe
CodeBalancer
Pseudocoder
Migrador
Dachdeckermeister Peter Arold in Werda, Plauen, Hof und Umgebung La Petite Provence - Pension und Festsaal in Leisnig Piv-Berlin, Immobilienverwaltung Verwaltung Berlin blogoscoop

#507

04.07.2011 19:51
0 Kommentare
Share
  • php
  • apache
  • gd-lib
  • image
  • server
  • nginx
  • static
  • content
  • delivery
  • .htaccess
One problem when relaunching large projects with a ton of images is to re-create all the thumbnails that users have uploaded in the years. If you don’t use paperclip (ruby) or anything like it in PHP (is there any like it!?) where you can run run one command to re-create all the thumbnails in all specified sizes your can try to keep it flexible and create every image on demand.

Theory

The Webserver should serve the image if it exists. If the file does not exist, the request should be redirected to a PHP script that searches and creates the requested image file (in requested size) at exactly the location it was originally requested. The second request on the file will not be redirected to the PHP script and will server the image that now exists.

Practice

So the first thing to archive is to send the request of a not existing image to a PHP file. That’s easy if you’re familiar with all the nginx directives:

This rule can be combined with the anti-hotlinking rules for images with nginx I showed you last week.

After that we need to create a format that includes width and height of any requested image so that the
thumbnailer.php
knows which size the created image should have. A valid request for a resized file should always have all parameters (width, height) in it:
../img/public/9c4be029/438xauto/filename.jpg

This makes it easy to split up width, height with a regexp in
thumbnailer.php
. The following code is just an example. You’re surelly integrate the logic into your frameworks:

That’s it! After that you can request any image in any size on your webserver by only creating it once it’s requested.

There are some things you can add, like other parameters in the
$formatRegexp
string to add different resizing methods or even filters, or limitations on the
width
and
height
parameter.

Appendix: Apache

It’s almost the same thing with apache. Just add a few lines to your
.htaccess.
and all your image requests are redirected to the thumbnailer (or anything):

#506

28.06.2011 11:16
0 Kommentare
Share
  • config
  • facebook
  • server
  • nginx
  • hotlinking
  • referer
  • block
  • how-to
Almost two weeks ago I moved my personal blog-project horrorblog.org from a domainfactory managed hosting server to a JiffyBox which is a scalable cloud server solution also by domainfactory. I won’t talk about the setup for now (but later this or next week) but I want to show you an example for a nginx config file that prevents your images from beeing hotlinked but still enabling google and facebook.

Prevent hotlinking in nginx is really simple and some rules and examples can be found via google:
# apply this rule on any location that’s an image using Regexp
location ~* \.(png|gif|jpg|jpeg|swf|ico)(\?[0-9]+)?$ {
  # block empty blocked or whiteliste referers
  valid_referers none blocked horrorblog.org www.horrorblog.org;
  if ($invalid_referer) {
    return 403;
  }
}

This works fine, unless you won’t have your images displayed on facebook when anybody likes your stuff with the facebook share button (og:image) or in google image search. The solution that enables facebook to grab the images from your host is by adding
~\.facebook\.
and
~\.fbcdn\.
to the whitelist of hosts:
# apply this rule on any location that’s an image using Regexp
location ~* \.(png|gif|jpg|jpeg|swf|ico)(\?[0-9]+)?$ {
  # block empty blocked or whiteliste referers
  valid_referers none blocked horrorblog.org www.horrorblog.org ~\.google\. ~\.yahoo\. ~\.bing\. ~\.facebook\. ~\.fbcdn\.;
  if ($invalid_referer) {
    return 403;
  }
}

#503

14.07.2010 11:40
0 Kommentare
Share
  • firefox
  • tool
  • open
  • source
  • console
  • Nerd
  • extension
Screenshot vom Vimperator in Aktion
Auf dem LinuxTag 2010 hat Caspar die Vimperator Erweiterung für den Firefox Browser vorgestellt die ich mir zu Hause gleich zu Gemüte geführt habe.

Die Erweiterung ist total für Nerds gedacht. Man kann den kompletten Browser, alle Links und Befehle von der durch den Vimperator hinzugefügten Kommandozeile aufrufen. So bekommt man noch mal mindestens 100 Pixel in der Höhe Platz für die Websites und gerade auf Netbooks ist das eine Menge Platz!

Nach einer leichten Einführungsphase um die wichtigsten Befehle wie
o www.spon.de[ENTER]
für Seite aufrufen oder
t www.horrorblog.org[ENTER]
für Tab öffnen zu lernen hab ich mir mitlerweile die komplette Bedienung zugelegt und auch schon mein erstes "Plugin" geschrieben das mit die aktuelle URL mit Bitly als ShortURL in die Zwischenablage legt. Hier meine eigene
.vimperatorrc
Datei die noch ein paar mehr Sachen macht:
" only use with buftabs plugin
set showtabline=0
"
custom colorsheme
colorscheme darkness
" set textmate as editr

set editor="mate -w"
" show hover links in status bar

set showstatuslinks=2
js document.getElementById("status-bar").setAttribute("moz-collapsed", false);
" no error sound, just flash display

set errorbells visualbell
" alternative tab navigation

map b gt
map v gT
" tab navigation via arrow keys

map <Left> <C-p>
map <Right> <C-n>
map h <C-p>
map l <C-n>
" bit.ly shortener.

javascript <<EOF
shortenURLIsGd = function (url) {
  var req = new XMLHttpRequest();
  " get your username and api key from bit.ly!!!

  req.open("GET", "http://api.bit.ly/v3/shorten?login=[Username]&apiKey=[API_KEY]&format=txt&longUrl=" + escape(url), true)
  req.onreadystatechange = function (ev) {
    if (req.readyState == 4) {
      if (req.status == 200) {
        util.copyToClipboard(req.responseText, true);
      } else {
        liberator.echo(req.responseText);
      }
    }
  }
  req.send(null);
}
EOF
map <silent> short :javascript shortenURLIsGd(buffer.URL);<CR>
map <silent> bitly :javascript shortenURLIsGd(buffer.URL);<CR>

Des weiteren sei noch erwähnt, dass man noch weitere ColorShemes oder Vimperator Plugins im Internet findet. Ein super Plugin ist auch das Buftabs Plugin, dass sogar die Tableiste überflüssig macht.

[UPDATE #1] Dank der Aktualisierung von Geshi, das das Code-Highlighting hier im Blog erledigt sieht das Vim-Script jetzt auch schön bunt aus.

#501

13.06.2010 16:26
3 Kommentare
Share
  • php
  • berlin
  • tool
  • pdf
  • vortrag
  • messe
  • 2010
  • linuxtag
  • präsentation
Gestern Nachmittag durfte ich auf dem LinuxTag 2010 Franklin in einem Kurzvortrag von 10 Minuten vorstellen. Nachdem der Monitor angeschlossen war und der erste Schock verdaut war - immerhin hatte ich ja OSX in Benutzung und nicht das bei den Anwesenden sehr beliebte Ubuntu - ging alles ganz reibungslos über die Bühne.

Wer sich anschauen möchte was ich da genau vorgestellt habe, oder wer noch nicht weiss was man mit Franklin machen kann, sollte sich die Präsentation als PDF anschauen.

In der Vortragsreihe hat Caspar auch Vimperator vorgestellt, was ich gerade mit wachsender Begeisterung teste. Mit der Firefox Erweiterung kann man alles mit der Tastatur steuern. Echt voll nerdy ;-)

#491

03.02.2010 23:08
0 Kommentare
Share
  • code
  • php
  • berlin
  • Referenz
  • Portfolio
  • Kultur
  • Website
  • Web
  • Project
Die Berliner Gazette ist ein seit 1999 bestehendes Online Feuiletton. Pünktlich zum Beginn des neuen Monats ist die neue aktualisierte Website online gegangen. Ich konnte in den letzten zwei Monaten sporadisch, an der auf Wordpress basierenden Seite, arbeiten - Da viele bisherige Inhalte schon in Wordpress vorhanden waren eine leichte Entscheidung.

Ich hoffe, das durch diese neue Version, in der auch bald alle Inhalte gesammelt sein werden, die Interaktivität gesteigert wird und alles viel dynamischer ist. Ich wünsche der Redaktion viel Erfolg!

#478

23.07.2009 17:18
0 Kommentare
Share
  • code
  • php
  • Project
  • blog
  • horror
  • film
  • movie
Nach ein wenig Programmieren und "Designen" ist jetzt endlich eines meiner Lieblingsprojekte online - das HorrorBlog. In dem Blog werde ich und ein paar andere Autoren jeden Tag die neuesten News zu Fantasy- und Horrorfilmen bringen. Wer auch ein Genre-Fan ist sollte unbedingt den Feed abonnieren!

#465

01.07.2009 11:23
1 Kommentar
Share
  • code
  • plugin
  • javascript
  • tool
  • js
  • jquery
  • slideshow
  • effect
  • animation
  • free
Letzte Woche habe ich für ein Projekt endlich mal meine verschiedenen jQuery Scripte zu einem Plugin vereinigt, dass es sehr einfach macht einfache Slideshows in seiner Website einzubinden.
Würde mich freuen wenn es euch mehr weiterhilft als mein Franklin, das erst 2 mal runtergeladen wurde ;-) Über Feedback würd’ ich mich natürlich auch freuen.

Hier noch ein kleines Beispiel wie ihr die Slideshow benutzt:
$(document).ready() {
  $('.mySlideShow').slideShow();
}
Mehr Beispiele, auch mit den slideClick und gotoSlide Callbacks gibts auf der jquery.slideShow Plugin Seite.

Mittlerweile habe ich es auch geschafft das Plugin in das Plugin-Verzeichnis von jQuery einzutragen. Über positive Bewertungen würde ich mich freuen!

#463

19.06.2009 10:45
0 Kommentare
Share
  • code
  • osx
  • test
  • terminal
  • tool
  • apache
  • siege
  • unix
  • webserver
  • benchmark
  • performance
  • regression
Wie gestern schon beschrieben kann man super ab (Apache Bench) die Performance seiner Applikationen im Web testen. Durch Zufall hab ich in meiner Ports Sammlung noch ein anderes Programm gefunden das auch sehr vielversprechend aussieht: siege.

Dort kann man auch mehrere URLs testen, einen User simulieren und noch viel mehr. Damit habe ich allerdings noch nicht so viel Erfahrung. Hab aber gleich mal meine App getestet:
siege -c 100 -t 10s http://localhost/myProject/
Die Ausgabe sieht fast so aus wie beim ab:
Transactions:                    545 hits
Availability:                 100.00 %
Elapsed time:                  17.85 secs
Data transferred:               1.33 MB
Response time:                  1.02 secs
Transaction rate:              30.53 trans/sec
Throughput:                     0.07 MB/sec
Concurrency:                   31.01
Successful transactions:         604
Failed transactions:               0
Longest transaction:            3.31
Shortest transaction:           0.03

Mit einem Config File kann man aber auch noch mehrere Urls abfragen und so ein realistischeres Ergebnis erzielen. Mehr dazu steht in der Docu von Siege oder in Tutorials die man so im Netz findet: Regression testing with Siege.

Ich denke mal das solche Tools auch eine wunderbare Möglichkeit sind verschiedene Hoster zu testen oder einem Kunden zu zeigen wie Vorteilhaft eine Optimierung seiner Applikation wäre oder einfach nur welchen extremen Effekt der Einbau eines Caches hat.

#462

18.06.2009 13:37
2 Kommentare
Share
  • code
  • php
  • osx
  • test
  • framework
  • terminal
  • shell
  • apache
  • unix
  • benchmark
  • performance
  • port
Wer sich mit Websiten beschäftigt die von mehr als 100 Besuchern am Tag besucht werden und nicht wirklich viel im Terminal macht freut sich eventuell über Apache Bench.

Das ist ein Programm das man auf OSX ganz einfach im Terminal laufen lassen kann um seinen Server mal so richtig schwitzen zu lassen.

Ein üblicher (und auch vergleichbarer) Aufruf ist der folgende:
ab -c 10 -t 60 http://localhost/myProject/
Was 60 Sekunden lang, immer 10 Requests auf die Seite abfeuert und einem danach folgende Ausgabe generiert:
Finished 3102 requests
Server Software:        Apache/2.0.59
Server Hostname:        localhost
Server Port:            80
Document Path:          /myProject/
Document Length:        2005 bytes
Concurrency Level:      10
Time taken for tests:   60.002 seconds
Complete requests:      3102
Failed requests:        303
   (Connect: 0, Receive: 0, Length: 303, Exceptions: 0)
Write errors:           0
Total transferred:      7530897 bytes
HTML transferred:       6211149 bytes
Requests per second:    51.70 [#/sec] (mean)
Time per request:       193.431 [ms] (mean)
Time per request:       19.343 [ms] (mean, across all concurrent requests)
Transfer rate:          122.57 [Kbytes/sec] received
Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    1   1.2      0      11
Processing:    30  186 663.6    157   20630
Waiting:        0  161  83.6    155     621
Total:         30  187 663.6    157   20631
Percentage of the requests served within a certain time (ms)
  50%    157
  66%    196
  75%    219
  80%    235
  90%    276
  95%    309
  98%    354
  99%    386
 100%  20631 (longest request)
In dieser Ausgabe kann man erkennen das das aktuelle Projekt so ca. 50 Leute gleichzeitig aushalten könnte. Im vergleich mit anderen Projekten kann man dann Rückschlüsse darauf ziehen wie gut man programmiert hat ;-)

Viele benutzen ab auch zum Vergleich von verschiedenen Frameworks die ich euch natürlich nicht vorenthalten möchte: Test1, Test2 und Test3.

ab kann man wie üblich über macports installieren (OSX Developer Tools müssen installiert sein):
sudo port install ab

#385

12.03.2008 14:02
0 Kommentare
Share
  • code
  • php
  • programmieren
  • Portfolio
  • fundstücke
  • Experimentell
Anfang des Jahres hab' ich auch einer Laune heraus, und weil ich es dringend benötigt habe - ein Regular Expression Tool gebaut mit dem man Reguläre Ausdrücke testen kann. Mittels Ajax werden die Eingaben direkt von PHP interpretiert und das Ergebnis wird ausgegeben.
Das Ergebnis schimpft sich ephReggy und kann jetzt ausprobiert werden.

Mit der Zeit kamen auch noch andere kleine Spielereien dazu, die man auf code.ephigenia.de anschauen kann. Die sind aber eigentlich nicht so toll wie das ephReggy :D
  • 1
  • 2
  • weiter »
marceleichner HTML5 Harrison Theme (Validate Source), © 2010 by Ephigenia M. Eichner, Impressum