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.

#502

02.07.2010 12:18
5 Kommentare
Share
  • os
  • ubuntu
  • linux
  • open-source
  • betriebssystem
  • netbook
  • laptop
  • mobile
  • Bericht
Screenshot von Ubuntu 10.4
Um auch unterwegs ein wenig an meinen Horrorblog Reviews zu arbeiten und Konzepte zu schreiben oder sonstwas zu machen habe ich mir in der letzten Woche mein erstes Netbook zugelegt. Das trendige iPad kam nicht in Frage, da es keine Tastatur hat, nicht erweiterbar ist und man nur die Apps aus dem AppStore installieren kann.

Um mich nicht mit dem auf dem Samsung N150 vorinstalliertem Windows 7 rumägern zu müssen hab ich direkt beim zweiten mal hochfahren den vorher präparierten USB Stick mit der Ubuntu Live-CD angesteckt und schon nach wenigen Klicks war Ubuntu installiert. Beim erstellen des USB Sticks hat es sich herausgestellt, dass die Anleitung auf der Ubuntu Download Seite für OSX nicht funktioniert und dass man mit der Windows Anleitung besser fährt.

Nach der Installation stand mir die ganze Open-Source Welt offen und ich hab’ erstmal meine Lieblinge cmatrix und figlet für die Kommandozeile installiert. Weitere Programme findet man über die Software suche und kann sie super schnell und einfach installieren.

#497

30.05.2010 21:31
0 Kommentare
Share
  • buch
  • javascript
  • js
  • O’Reilly
  • Verlag
  • Meinung
Da mir schon vor einiger Zeit der Computer-Lesestoff ausging, hab’ ich mir letzte Woche jQuery Cookbook bei Amazon bestellt.
Das Buch ist angefüllt mit praktischen Beispielen und Lösungen, auf die man, wenn man viel mit jQuery arbeitet, schon gestoßen ist. Wenn ihr Glück habt findet ich viele, oder so wie ich, weniger neue Sachen in dem Buch. Auf jeden Fall sollte man mal reinschauen! Die deutsche Ausgabe kommt im Juni raus, jQuery Kochbuch kann man schon vorbestellen.

#490

22.11.2009 21:33
0 Kommentare
Share
  • Web
  • osx
  • virtual
  • box
  • google
  • os
  • preview
  • test
  • screenshots
Das Horrorblog in Chrome OS
Letzte Woche Freitag Nacht wurde von Google der Source Code aka Quellcode zu deren Online-Betriebssystem Chrome OS released. Ein paar Videos und noch mehr Infos gibt’s in dem dazugehörigen Blog-Post im Chrome-Blog.

Wer es drauf hatte auf Ubuntu seinen eigene Version zu compilieren kann sich glücklich schätzen und kennt sich wahrscheinlich gut damit aus. Ich musste mich mit dem Versuch begnügen das ganze mit einem Festplatten-Image von GDGT in Virtual Box (3.0.12 r54655) auf Snow Leopard (10.6.2) zum Laufen zu bekommen. Nachdem ich den Netzwerkadapter auf Desktop umgestellt habe, Linux - Ubuntu - Other Linux wie in der Anleitung angegeben hatte zeigte sich auch endlich der Login-Screen! So, jetzt noch die Tücken der englischen Tastatur besiegen und nachdem das "z" im Passwort auch hübsch als "y" auf der Tastatur eingegeben wurde komm ich auch mit meinem Google Account rein! (Manchmal geht das wohl nicht weil die Server überlastet waren?)

Ja, wie ist es? Ganz nett - es kann noch nich’ viel, alles läuft quasi im "Browser". Das Schachspiel das man schon gesehen hat vielleicht läuft in Flash und ich glaube nativ installiert, auf einem Netbook, ist Chrome OS superschnell! Frisch hochgefahren mit 3 Fensterchen offen, verbrauchte Chrome OS nur ca. 50MB!

Ich bin gespannt wie das fertige System aussehen wird. In einem Jahr wird sich ja hoffentlich noch viel Ändern und noch mehr "Programme" geboten werden. Zum Websites-Testen braucht man Chromium auf jeden Fall nicht - da reicht auch der Chrome-Browser.

#482

13.08.2009 22:16
11 Kommentare
Share
  • gmail
  • skype
  • addon
  • firefox
  • slow
  • facebook
  • javascript
Der Firefox meiner Freundin hatte enorme Probleme sich mit Facebook anzufreunden und da hab’ ich mich in die Untiefen von Windows Vista begeben müssen. Doofe Sache das. Dann hat sich rausgestellt, dass man einfach nur das Skype Addon (was macht das eigentlich!?) deinstallieren muss. (Das soll btw. auch bei GMail helfen!)
Wem’s hilft kann sich ja in den Kommentaren bedanken!

#473

20.07.2009 06:29
0 Kommentare
Share
  • berlin
  • freunde
  • Musik
  • Veranstaltung
  • Termin
  • Oktober
Am Freitag ging die neue Seite für das Netaudio Festival 2009 online.
Ein neues Design, Logo und Website mit Anbindung an Facebook und Twitter hält die Besucher auf dem Laufenden wenn es vom 08.10.2009-11.10.2009 in der Berliner Maria wieder ganz um Netaudio geht!

#459

10.06.2009 10:35
1 Kommentar
Share
  • osx
  • tipp
  • video
  • movie
  • performance
  • vlc
  • playback
  • hd
In den erweiterten Einstellungen (im VLC, Einstellungen unten auf die Radio-Button "All" klicken) kann man wie auf dem Screenshot zu sehen relativ unkonfortable die Performance vom VLC bei HD Filmen verbessern.
Danach kann man auch 1080 Filme auf nem etwas älteren weissen MacBook (2007er) wunderbar anschauen ohne Ruckler oder Artefakte.

#450

03.04.2009 13:45
0 Kommentare
Share
  • berlin
  • buch
  • photo
  • book
Vor ein paar Wochen war ich auf einer Lesung von Ivo Sachs.
In dem echt "überfüllten" Cafe konnte man sich bei ein zwei Bier gut in die gefüllten Anekdoten reinversetzen. In seinem Buch Schimpansen am Abgrund gibts nur so was. Leseprobe gibts auch undzwar auf der Seite vom Proviantbuch Verlag.
  • 1
  • 2
  • 3
  • weiter »
marceleichner HTML5 Harrison Theme (Validate Source), © 2010 by Ephigenia M. Eichner, Impressum