Tuesday, 10. January 2023Week 02
.: JSON Feed

Added a JSON Feed to this blog (in additon to the existing RSS and Atom feeds): https://blog.x-way.org/feed.json

To build the proper JSON file, I used this Jekyll template and the JSON Feed validator.


21:51 | Webdesign | Permalink
Sunday, 19. June 2022Week 24
.: Custom nginx error pages

For quite some time I've been using custom nginx error pages on this site.
My approach so far was to generate a bunch of static HTML with the various error messages and then configure them for each corresponding HTTP status codes in nginx.
As there are quite a number of HTTP errors, I used a little shell script to generate the whole config and HTML, in the end I had a huge file with snippets like the one below.

error_page 429 @custom_error_429;
location @custom_error_429 {
	internal;
	more_set_headers 'Content-Type: text/html';
	echo '<html>...</html>';
}

Now while implementing custom error pages for a different project, I tried to see if there is an easier way to do this.
Some searching lead to the One NGINX error page to rule them all article which describes an alternative approach leveraging the nginx SSI module to generate the error pages on the fly.

Instead of generating and defining a specific error page for each error, a single error page is used for all errors. 

error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414
           415 416 417 418 421 422 423 424 425 426 428 429 431 451 500
           501 502 503 504 505 506 507 508 510 511 /error.html;

location = /error.html {
	ssi on;
	internal;
	root /var/www/default;
}

nginx provides the status code as variable to our error page, but we also need the error message to make it more userfriendly.
For this we define a mapping of status codes to the error messages.

map $status $status_text {
  400 'Bad Request';
  401 'Unauthorized';
  402 'Payment Required';
  403 'Forbidden';
  404 'Not Found';
  405 'Method Not Allowed';
  406 'Not Acceptable';
  407 'Proxy Authentication Required';
  408 'Request Timeout';
  409 'Conflict';
  410 'Gone';
  411 'Length Required';
  412 'Precondition Failed';
  413 'Payload Too Large';
  414 'URI Too Long';
  415 'Unsupported Media Type';
  416 'Range Not Satisfiable';
  417 'Expectation Failed';
  418 'I\'m a teapot';
  421 'Misdirected Request';
  422 'Unprocessable Entity';
  423 'Locked';
  424 'Failed Dependency';
  425 'Too Early';
  426 'Upgrade Required';
  428 'Precondition Required';
  429 'Too Many Requests';
  431 'Request Header Fields Too Large';
  451 'Unavailable For Legal Reasons';
  500 'Internal Server Error';
  501 'Not Implemented';
  502 'Bad Gateway';
  503 'Service Unavailable';
  504 'Gateway Timeout';
  505 'HTTP Version Not Supported';
  506 'Variant Also Negotiates';
  507 'Insufficient Storage';
  508 'Loop Detected';
  510 'Not Extended';
  511 'Network Authentication Required';
  default 'Something went wrong';
}

Now we have the status and the status_text variables available in our error.html page.

<html><body>
<h1><!--# echo var="status" default="" --> 
<!--# echo var="status_text" default="Something went wrong" --></h1>
</body></html>

09:48 | Webdesign | Permalink
Saturday, 4. June 2022Week 22
.: Blogging like 2002

On the occasion of the 20th anniversary of this blog, I've used archive.org to reconstruct the original HTML layout from back in the time and applied it to the Jekyll templates.

Enjoy the blog in all the (<table> based) glory from 2002 :-)


11:32 | Webdesign | Permalink
Wednesday, 19. January 2022Week 03
.: Google Analytics removed

After running it for a bit more than a decade, I've now removed again the Google Analytics tracking from this site. It does not feel appropriate anymore on a personal website.
At the moment no alternative statistics solution is in place yet, but I could imagine setting up a self-hosted solution like Matomo or Plausible in the future.


22:45 | Webdesign | Permalink
.: Google Analytics declared illegal in the EU

Google Analytics declared illegal in the EU.


20:45 | Webdesign | Permalink
Sunday, 28. March 2021Week 12
.: security.txt

This website now also serves a security.txt file which is a standardized way of making security contact information available. (Wikipedia)

The file is available in two locations /security.txt (the classic location) and /.well-known/security.txt (the standard location following RFC8615).

To easily add the file on all my domains, I'm using the following nginx config snippet.

location /security.txt {
	add_header Content-Type 'text/plain';
	add_header Cache-Control 'no-cache, no-store, must-revalidate';
	add_header Pragma 'no-cache';
	add_header Expires '0';
	add_header Vary '*';
	return 200 "Contact: mailto:andreas+security.txt@jaggi.info\nExpires: Tue, 19 Jan 2038 03:14:07 +0000\nEncryption: http://andreas-jaggi.ch/A3A54203.asc\n";
}

location /.well-known/security.txt {
	add_header Content-Type 'text/plain';
	add_header Cache-Control 'no-cache, no-store, must-revalidate';
	add_header Pragma 'no-cache';
	add_header Expires '0';
	add_header Vary '*';
	return 200 "Contact: mailto:andreas+security.txt@jaggi.info\nExpires: Tue, 19 Jan 2038 03:14:07 +0000\nEncryption: http://andreas-jaggi.ch/A3A54203.asc\n";
}

This snippet is stored in a dedicated file (/etc/nginx/conf_includes/securitytxt) and is included in the various server config blocks like this:

server {
	server_name example.com;

	include /etc/nginx/conf_includes/securitytxt;

	location / {
		# rest of website
	}
}

08:16 | Webdesign | Permalink
Sunday, 1. November 2020Week 43
.: 15 years of o5

15 years ago this weblog received the current o5 design (or theme as it would be called nowadays).
During this time the design has aged quite well and also survived the move of the backend from a self-written PHP blog-engine to Jekyll.

Although it still works surprisingly well and presents the content nicely every day, there are some parts where better usage of contemporary technologies would be desirable.
It has no mobile version nor a responsive layout as the design was created before the now omnipresent smartphones were invented. Similar is the font-size hardcoded and not very adequate for todays retina displays. And yes, it uses the XHTML 1.0 strict standard with all its quirks and CSS tricks from 2002 (which luckily are still supported in current browsers).

Overall I'm quite happy that the o5 design has turned out to be so timeless and that I did not have to come up with a new one every other year (btw: I don't remember where the o5 name came from, likely the 5 is a reference to 2005 when it was created).

With the current Corona situation forcing me to spend more time at home again, I have the feeling that some things might change around the weblog (not quite sure what or when exactly, first I need to re-learn how websites are built in 2020 :-).


19:03 | Webdesign | Permalink
Friday, 12. September 2014Week 36
.: Fancy blog statistics

The about page now features some fancy blog statistics, check it out :-)

The statistics are created with the help of Cal-Heatmap which allows to easily create calendar heatmaps similar to the activity heatmap of GitHub.

Update: couldn't stop playing around and thus added another chart, this time with the help of C3.js (a D3.js based reusable chart library).


14:48 | Webdesign | Permalink
Monday, 21. April 2008Week 16
.: ImageFlow

ImageFlow, CoverFlow mit JavaScript. (via)


21:31 | Webdesign | Permalink
Saturday, 12. January 2008Week 01
.: Embed Flash into valid XHTML documents

<object type="application/x-shockwave-flash" data="flash.swf" width="100" height="200">

<param name="movie" value="flash.swf" />

</object>

17:12 | Webdesign | Permalink
Monday, 24. April 2006Week 17
.: Scriptaculous Cheat Sheet

Amy Hoy has released a nice Scriptaculous Cheat Sheet just at the right moment since I'm going to use Scriptaculous for the redesign of actualites.epfl.ch.


10:06 | Webdesign | Permalink
Wednesday, 23. November 2005Week 47
.: CSS4IE

Da hier anscheinend doch machmal ein paar Benutzer mit dem Internet Explorer vorbeikommen habe ich nun doch noch das Layout so angepasst, dass es auch im Internet Explorer wie gewünscht aussieht (zudem soll ja eine potentielle Kundschaft nicht abgeschreckt werden).

Eigentlich sind die Änderungen am CSS nur ganz klein, aber umso schwerer herauszufinden *grrr*.
Als sehr hilfreich herausgestellt hat sich die parallele Installation verschiedener Internet Explorer Versionen. Dieser Artikel erklärt wie man eine solche Testumgebung erstellt.

Interessanterweise sah der unangepasste Stylesheet im Internet Explorer 4 bedeutend besser aus als im Internet Explorer 5, 5.5 oder 6.


01:21 | Webdesign | Permalink
Tuesday, 1. November 2005Week 44
.: CSS Reboot Fall 2005

Am Wochenende bin ich per Zufall auf die CSS Reboot Seite gestossen.
Da ich am Sonntag Nachmittag nichts Interessantes vorhatte, ist innerhalb eines Tages das neue Design entstanden :-)

Wer immernoch das mittlerweile etwas verbleichte alte Layout sieht, soll bitte hier klicken um zum neuen zu wechseln.

In Mozilla Firefox, Opera und Safari sieht die Seite ziemlich genau so aus wie gewünscht, aber im Internet Explorer stimmt wiedereinmal gar nichts :-(


00:00 | Webdesign | 3 comments
Friday, 9. September 2005Week 36
.: Démos d'AJAX

Voilé quelques liens vers des démos d’AJAX.


14:39 | Webdesign | 2 comments
Saturday, 8. January 2005Week 01
.: Colors

I’ve found some color resources & utilities on del.icio.us. These are always useful, especially since i’m not the person who can just throw together three colors and automatically the result looks good.


23:02 | Webdesign | Permalink
Sunday, 25. July 2004Week 29
.: Anschauen!
collecting best practice webdesign resources
00:25 | Webdesign | Permalink
Tuesday, 6. July 2004Week 27
.: Quicklinks Webdesign

19:15 | Webdesign | Permalink
Thursday, 15. April 2004Week 15
.: Mozilla Bug
Screenshot vom Bug

Wie ich Andrew Porter Glendinning besuchte, entdeckte ich diesen Graphikfehler in Mozilla. Der Text lautet

If you can read this, your browser doesn't support the over 4-year-old CSS Level 2 Recommendation. These icons should be fixed in the lower right corner of your browser window, and this message should be invisible.

Nach der Analyse des Stylesheets, habe ich herausgefunden, dass der Text eigentlich ausserhalb des Browserfensters dargestellt werden sollte. Bei Mozilla hört das Browserfenster vor dem Scrollbalken auf, jedoch für die Rendering-Engine erst am Fensterrand :-P


01:55 | Webdesign | 3 comments
Wednesday, 14. April 2004Week 15
.: Developing With Web Standards

Developing With Web Standards Recommendations and best practices. Eine gute Übersicht, auch geeignet um Leute in die Thematik einzuführen.

Via LinkDump


21:07 | Webdesign | Permalink
Friday, 9. April 2004Week 14
.: Inkscape

Gestern habe ich Inkscape entdeckt. Inkscape ist ein Vektor-Graphikprogramm, das SVG als Dateiformat benutzt.

Das Programm lässt sich mit Macromedia Fireworks vergleichen, wennauch der Funktionsumfang noch nicht ganz so gross ist. So kann Inkscape nur nach PNG exportieren und unterstützt keine Animationen. Dafür ist IMHO die Vektorbearbeitung von Inkscape schon jetzt der von Fireworks überlegen.

Nachdem ich auch das Tutorial gemacht habe, durfte ich feststellen, dass das Userinterface von Inkscape grösstenteils absolut top ist. So eine angenehme und einfache Handhabung habe ich bei einem Graphikprogramm bisher vergebens gesucht. Da kann selbst mein bisheriger Favorit Fireworks fast nicht mithalten.


21:22 | Webdesign | 3 comments
Sunday, 14. March 2004Week 10
.: Rechnen mit CSS

Im Stylesheet dieser Seite findet sich unter anderem folgende Styledefinition:

#rechts li a {
	display: block;
	border-bottom: 1px solid #FFFFFF;
	width: 100% - 30px;
	padding-left: 30px;
}

Diese macht, dass die Links im rechten Submenu auf der ganzen Breite funktionieren und nicht nur wenn man auf den Text klickt.
Zuerst hatte ich die Weite auf 100% gesetzt. Jedoch hat der Mozilla wegen der 30px Padding noch 30px ausserhalb des Rahmens angezeigt. Mit overflow: hidden habe ich versucht das Problem zu lösen. Jedoch hat das nicht funktioniert, da es ja kein eigentlicher overflow ist.
Schlussendlich bin ich durch ausprobieren von garantiert fehlerhaften Styledefinitionen auf die jetztige Lösung gekommen. Natürlich validiert das nun nicht mehr als korrektes CSS, aber es funktioniert :-)

Da ich nun keine Windows-Maschine mehr habe, wäre ich froh um Screenshots vom Submenu, wenn mit der Maus über ein Link gefahren wird (a:hover).


12:43 | Webdesign | 5 comments
Saturday, 8. November 2003Week 44
.: CSS Links
Bei mk ein paar (ältere) CSS Links gefunden:
Little Boxes
CSS @ Maxdesign
CSS horizontal navigation list
:hover mit beliebigen Elementen
pure CSS menus

17:42 | Webdesign | Permalink
Wednesday, 11. June 2003Week 23
.: Web Developer extension for Mozilla Firebird
Ist mir gerade bei CSS-Technik-News ins Auge gestochen, dass es jetzt noch weh tut: Web Developer extension for Mozilla Firebird
01:35 | Webdesign | 2 comments
Friday, 27. December 2002Week 51
.: CSS
Hier hat es unter anderem einige Beispiellayouts, tabellenlos versteht sich.
Hier hat es einige Links zu tabellenlosen Seiten und zu CSS-Tutorials.
Hier hat es Links zu 900 tabellenlosen Websites.
13:48 | Webdesign | Permalink
Sunday, 15. December 2002Week 49
.: Winter
Passend zur Jahreszeit ist jetzt plain 2 das neue Standard-Layout.
04:26 | Webdesign | one comment
Sunday, 8. December 2002Week 48
.: HTML 2.0
So aus lauter Freude hat's jetzt ein HTML 2.0 konformes Layout gegeben ;-)
14:01 | Webdesign | Permalink
Saturday, 7. December 2002Week 48
.: Design
Maintenant vous pouvez changer le layout de mon weblog au réglage

phrenologik est une site à tendance "dark"
19:12 | Webdesign | Permalink
.: Neues Design
Da auch mk und chee ihrem Weblog ein neues Aussehen geschenkt haben, musste ich die schon länger geplante Erweiterung meines PHP-Irrgartens, den Layout-Switcher, endlich fertig machen. Bei den Einstellungen könnt ihr nun euer Lieblingsdesign auswählen. Vorerst ist zwar nur das Standardlayout plain und das besonders kreative txt verfügbar - später werden's mehr sein ;-)
18:52 | Webdesign | 2 comments
Thursday, 5. December 2002Week 48
.: GIMP-Tutorials
Verschiedene deutsche Tutorials zu GIMP:
- Gimp verstehen
- Nachbearbeitet
- Scheibchenweise
- Angestöpselt
- Gimpressionen
- Bilder fürs Web
- Farbverläufe und Pfade
- Bildbearbeitung mit Gimp 1.2
- Grokking the Gimp
- Gimp in 80 Minuten
- die Gimp-Seiten
- Fotoretusche mit Gimp
- GIMP for Windows
- Lehrfilme

abgestaubt bei rompe und mk
13:25 | Webdesign | 5 comments
Tuesday, 3. December 2002Week 48
.: CSS-Technik.de
CSS-Technik ist ein moderiertes Online-Projekt zur Sammlung von Ressourcen, Scripte und Tutorials zum Thema CSS und PHP für Webgestalter und Internetworker.
via [i-worker]
01:17 | Webdesign | one comment
Monday, 25. November 2002Week 47
.: centricle
Auf centricle.com findet man viele Informationen über CSS. Look at it!
21:07 | Webdesign | Permalink
Sunday, 24. November 2002Week 46
.: em
So, Schriftgrössenangaben sind nicht mehr in pt sondern in em.
Mozilla, IE und Opera interpretieren's in etwa gleich. Leider ist's nun im Netscape 4.x wirklich nicht mehr ansehbar.
Aber keine Sorge, dass nächste Layout ist schon in Planung ;-)
23:36 | Webdesign | 9 comments
.: 11h11
Sur 11h11.com il y a plus de 400 oeuvres, crées en 40 projets. Et cela ne sont pas seulement des images crées avec photoshop. Il y a des peintures, des images digitales, des photographies, des illustrations, des sons et même des vidéos! C'est vraiment une source d'art multimédial :-)
00:48 | Webdesign | Permalink
.: 12 inches couch
t w e l v e i n c h e s c o u c h est le site d'une étudiante en graphisme.
Le site a un design très spécial, à voir absolument!
00:30 | Webdesign | one comment
Sunday, 10. November 2002Week 44
.: Plongez dans l'accessibilité
Plongez dans l'accessibilité vous guide à faire votre site accessible. Très important!
Bon, je sais que mon weblog n'est pas encore accessible, mais je travaille à la vérsion suivante et celle-ci serait vraiment accessible :-)
21:30 | Webdesign | Permalink
.: FR_BLOG
FR_BLOG c'est une repertoire des weblogs français et francophones.
02:40 | Webdesign | Permalink
.: Les standards du W3C
Le StandBLog traite les standards du W3C.
02:38 | Webdesign | Permalink
Sunday, 27. October 2002Week 42
.: J'écris aussi en français!
J'ai annoncé ici que j'écris maintenant aussi en français. Je le fais pour entraîner mes connaissances du français.
Le but c'est d'augmenter mes notes en français et en histoire bilingue.

Voilà mon premier lien français: fkgb.fr est une "agence de communication" situé à Paris avec une site très multimédiale ;-)
02:38 | Webdesign | Permalink
Saturday, 26. October 2002Week 42
.: Nun ist so wie's sein muss!
waterwave.ch ist nun XHTML 1.0 konform und in punkto Accessibility auch nicht schlecht gestellt.

Valid XHTML 1.0!

Ich wäre froh, wenn jemand mit einer Software wie JAWS mal schauen könnte, ob waterwave.ch noch Probleme darstellt.
Sonstige Accesibility-Tips sind natürlich auch willkommen ;-)
15:13 | Webdesign | Permalink
Friday, 25. October 2002Week 42
.: Accessibility zum 2.
Nun ist waterwave.ch HTML 4.01 und CSS 2 konform. Zudem hab ich mich durch den Dive into Accessibility Guide gewühlt und einige Sachen daraus entnommen. Nur das Kontakt-Formular und die Abkürzungen müssen noch bearbeitet werden.
Ergänzungen?

Valid HTML 4.01! Valid CSS!
00:47 | Webdesign | Permalink
Thursday, 24. October 2002Week 42
.: Accessibility!
Damit ja niemandem langweilig wird:

Accessible Web Page Design
AWARE
IBM Accessibility Center
Weblog Accessibility
Joe Clark: Media Access
Web Accessibility for Section 508
NCI Web Accessibility and 508 Compliance Initiative
Accessible Web design - a definition
Usable Web
Accessible Web Design
Web Accessibility - ADA Guidelines
Accessible Web Page Design Curriculum
Dive Into Accessibility
22:50 | Webdesign | Permalink
Tuesday, 3. September 2002Week 35
.: deviantMAG
Eine Website für Designer :-)
IMHO siehts noch ein bisschen nach "under construction" aus. Aber dennoch schon gute Inhalte wie z.B. ein Interview mit dem Designer von 2advanced.com
11:26 | Webdesign | Permalink
Monday, 19. August 2002Week 33
.: Netscape 2.02
Für meine Maturaarbeit benötige ich zum Testen eine alten/älteren Netscape Browser. Nach einer unendlich langen Klickerei, bin ich hier fündig geworden. Dort gibts von Netcape 2.02 bis 6.2.3 alles was das Herz begehrt.
22:05 | Webdesign | 3 comments
Thursday, 27. June 2002Week 25
.: 3D-Artwork
Wundervolle virtuelle Welten findet man hier, hier und hier.
19:30 | Webdesign | Permalink
Thursday, 13. June 2002Week 23
.: Flash-Site
Den Link zu einer Website, die farblich völlig meinem Geschmack entspricht, habe ich hier gefunden.
19:12 | Webdesign | Permalink
Wednesday, 12. June 2002Week 23
.: Fireworks MX ist da!
Die neue Version meines Graphikprogrammes erscheint und ich habs total verschlafen (liegt vermutlich am Stress der Maturaarbeit).

Macromedia hat nun die MX Produktversionen fertiggestellt. Hab gerade die Fireworks MX Trial-Version gesaugt. Die Auswirkungen werdet ihr sicher in nächster Zeit sehen ;-)
BTW: Laut Macromedia hat MX keine spezielle Bedeutung; schaut man aber auf die um bis zu 100$ gestiegenen Preise, so erscheint More eXpensive doch ziemlich realistisch ;-)
02:00 | Webdesign | Permalink
Saturday, 8. June 2002Week 22
.: Flash
Etwas wunderschönes ...
17:26 | Webdesign | Permalink
Thursday, 6. June 2002Week 22
.: Flash-Sites
Gerade so ins Auge gestochen sind mir:

Verrücktes Design, aber trotzdem ansprechend: http://www.jureta.com/
Minimalistisches Layout: http://www.soerianto.net/
Gewöhnungsbedürftig: http://flakk.pixelwar.at/
Technisch hochstehend: http://www.acme24.de/

23:34 | Webdesign | Permalink
.: Farbenlehre
Auf metacolor.de hat es ein IMHO sehr gutes Tutorial zum Thema Farben im Internet. Besonders geeignet für Leute, die, wie ich, im Umgang mit Farben nicht besonders geschickt sind. ;-)
22:08 | Webdesign | Permalink
Monday, 3. June 2002Week 22
.: Flash-Sites
Beim (*unerlaubten*) Surfen aufgefallen:
http://www.2advanced.com
08:50 | Webdesign | one comment
Navigation
x-log
Archive
About
Blogs
mk
vowe.net
der Uninformat
Inliniac
To Linux and beyond!
#!/bin/blog
beetlebum
Su-Shee 2.0
Veni, Vidi, VISA
The Lone Sysadmin
Code as Craft
yelp Engineering
Wandering Thoughts
Thoughts on programming
eklitzke.org
rachelbythebay.com
Benjojo.co.uk
charity.wtf
danielmiessler.com
ieftimov.com
mdlayher.com
Krebs on Security
Troy Hunt
gru.gq
BrewDog
The Travelling Pigeon
Topics
Misc
Webdesign
Coding
Tech
Networking
Linux
School
Mac
NetBSD
Music
Cinema
Badges
Food