ads.txt
Added and ads.txt file to the blog. The idea is to avoid that someone can sell fake advertisment space for this blog.
As I don't use any advertisment here the content of the file is pretty basic:
contact=https://blog.x-way.org/about.html
Added and ads.txt file to the blog. The idea is to avoid that someone can sell fake advertisment space for this blog.
As I don't use any advertisment here the content of the file is pretty basic:
contact=https://blog.x-way.org/about.html
Just discovered the text-decoration-color
CSS property and added it to the style on the blog:
a:hover {color: #454545; text-decoration: underline; text-decoration-color: #26C4FF;}
This causes that when you hover over a link in a post, the underline is not in the same boring gray as the text but lights up in a nice color :-)
(not to be confused with the hacky colored underlines in the righthand navigation bar, where I use a colored border-bottom
to achieve a similar effect since 2002)
Over the last couple weeks I slowly replaced the various <table>-based layout elements of the blog with more modern HTML elements.
And finally this afternoon the work was completed with the last <table> element gone.
Visually there should be almost no differences, but in case something looks strange just let me know :-)
(and yes, style-wise everything is still using the pixel-based layout from 2002, one day this might change as well…)
To provide basic dark mode support for the blog, I added the following lines of CSS:
@media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } img, video, iframe { filter: invert(1) hue-rotate(180deg); } }
If the browser/OS has dark mode enabled it will invert the colors and rotate the hue to achieve the dark mode effect.
The whole operation is applied a second time on images, videos and frames to avoid that they have their colors distorted.
You can get a preview by using the developer tools of your browser to enable dark mode :-)
The code is inspired by the post here, and then extended to provide a CSS-only solution by leveraging the color-scheme CSS property.
After switching the colors of the design, I kept the momentum and continued working on the HTML of the blog.
It took couple iterations of multiple hours, but now it's done: the HTML source of this blog is valid HTML5!
Getting rid of the obsoleteness hidden in old blogentries dating back over 20 years also led to some interesting observations.
Back when moving from HTML 4.01 to XHTML 1.1, I remember spending some time to transform old <br>
tags to <br />
. And now for HTML5 I did the inverse and moved all <br />
tags back to <br>
:-)
Also once more I'm very thankful for the work of the Internet Archive, which helped to recover images hosted on servers long gone (like URLs which already at the end of 2002 were no longer valid!).
Overall a lot of replacing no longer existing HTML tags and attributes with CSS definitions.
And there is virtually no change to the visual representation of the blog (which was the goal), so we still have the table-based layout with pixel-sized fonts as originally drafted in 2002.
Moving this to actually leverage modern HTML5 mechanisms and making it also more mobile friendly are tasks left for some future cold winter evenings :-)
Happy New Year! — Happy New Colors!
Winter is here (for a while already), time to change the colors of the blog.
To keep it in the nostalgic theme (the previous design was a repurpose of the inital design from 2002), I'm using the colors from the 'plain 2' winter layout (also from 2002).
Enjoy!
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.
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>
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 :-)
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.
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 } }
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 :-).
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).
<object type="application/x-shockwave-flash" data="flash.swf" width="100" height="200"> <param name="movie" value="flash.swf" /> </object>
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.
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.
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 :-(
Voilé quelques liens vers des démos d’AJAX.
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.
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
Developing With Web Standards Recommendations and best practices. Eine gute Übersicht, auch geeignet um Leute in die Thematik einzuführen.
Via LinkDump
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.
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).