A Peculiar Zoo of Thoughts
Today I was faced with a problem: I wanted to set up a duply backup task to store data via rsync on a Synology NAS. After clicking around, enabling rsync in the admin interface, creating a user for the task, and getting duply on my original machine running, I could not bring duply (or better, duplicity which does the actual connecting) to talk to the NAS. There are two syntaxes for the TARGET…
When creating complex user interfaces there comes the time when we have to think hard about focus order and where the focus should be put at after a certain action. Think of a modal dialog that is shown to the user. Where should the focus go to after the dialog closes? This question is sometimes trivial to answer. In our dialog case, if there is only one button that opens the dialog, the focus…
Picture yourself with a CSS theme or framework that needs to be adapted to the Corporate Designs of several customers. You do not want to re-invent the wheel again and again and you’ve got more important things to do than overwrite dozens and dozens of color definitions. What if I told you you can set a theme color for your whole stylesheet with a single CSS custom property, complete with contrast…
I worked at importing Unicode data into Codepoints.net ’s database, when I encountered a peculiar MySQL error that I haven’t seen before yet: ERROR 1153 (08S01): Got a packet bigger than 'max_allowed_packet' bytes I knew that my import SQL files were quite large, but I’ve used larger ones in the past without problem. Well, off to a search engine I went. It turned out, that MySQL complained about…
Building a project completely can be as simple as calling make in the project root folder, if there is a sufficiently carefully composed Makefile present. In this case, make will build the first target in the Makefile . If we are in a sub-folder, however, make will not automatically search for Makefile s in parent folders. I’ve written a small wrapper script named mk , that simply does that:…
It is an open secret, that I prefer make over all those newfangled build tools, that first need a ton of configuration to get off the ground. A simple rule to add autoprefixer goodies to a CSS file is exactly two lines long: out.css : in.css ./node_modules/.bin/postcss "$<" --use autoprefixer --output "$@" This little rule uses GNU make Automatic Variables , which allows us to copy-paste it or use…
Some time ago, I compiled a list of awesome Unicode code points . One of the code points I added was U+2E2E REVERSED QUESTION MARK , the irony mark “⸮”. I’ve described it with the sentence A useful character⸮ Pieter Fiers noted today , that this sentence might be the wrong way around. While thinking of an answer, I noticed, that in fact it constitutes a rather nice paradox. Epimenides, an…
The Mozilla Developer Network recently switched its infrastructure . Now, the MDN content is stored in a Github repository in the form of HTML files with YAML front matter. You can think of it, what you want, given their recent change in staffing MDN . But this repository opens up a new possibility to search the MDN content. I traditionally struggle to find what I need with MDN‘s own search.…
I do not recommend using Docker for everything. In many cases a locally installed package or a full virtual machine are better suited for a given problem. Heavy use of Docker also means downloading dozens of images, with every one several hundred MBs in size. However, there is a sweet spot in between, where a quick Docker command allows you to effortlessly complete a task without littering your…
’Tis the time of the year again when doors are opened , so I thought, “Well, would be nice, if we could open some doors with CSS only.” And lo and behold, modern CSS is equipped with everything necessary. First we need a door frame and a door, that we can open: < div class = " doorframe " tabindex = " 0 " > < div class = " door " > </ div > </ div > Then we sprinkle a little bit of CSS magic onto…
The good old aspell utility is actually quite up-to-date. One of its many features is a command-line switch, that allows you to tell it the filetype it is about to encounter. With this switch, it becomes a breeze to test all your Markdown files for typos. for file in *.md do aspell check --mode = markdown --lang = en " $file " done If you want to store additional words in a per-project file, you…
LilyPond is a music engraving program based on plain text. It produces beautiful note sheets like, e.g., the following: (Source: Mutopia Project ) LilyPond supports SVG output natively: lilypond -dbackend = svg sheet.ly # will produce a file sheet.svg However, the canvas of this file will be much larger than it needs to be. A quick postprocessing step using Inkscape ’s command line interface can…
The trick is quite simple, once you know it. When you are in namespaced code and call a function, PHP will first search your namespace for that function, and then fall back to the global namespace, if it doesn’t find a match. Prerequisites ¶ So for this to work, you need these two aspects implemented in your code: Use a namespace, and do not call global functions explicitly, that is, not like…
The set-up is quite simple. Use git init to get a boilerplate .git folder and then remove as much as possible. Where do we end? Let’s start one by one. $ git init . Initialized empty Git repository in /folder/.git/ $ find .git .git/ .git/refs/ .git/refs/tags/ .git/refs/heads/ .git/config .git/info/ .git/info/exclude .git/branches/ .git/description .git/objects/ .git/objects/pack/…
target.png : %.png : %.svg convert +antialias -background none "$<" "$@" convert +antialias -background none -density 144 "$<" "$(patsubst %.png,%@2.png,$@)" optipng -o7 "$@" "$(patsubst %.png,%@2.png,$@)" target@2.png : target.png The last line is optional. It tells make how to build the @2 file directly in case some other rule asks for it. You will need ImageMagick and optipng installed for this…
The so-called “Gutenberg canon” is a way to lay out pages in print. It is widely regarded as the perfect way to do this. How does this method behave for different page sizes? On this page you can try it yourself interactively.
If you use RequireJS and jQuery in a project, you might find yourself in a situation, where you embed jQuery before RequireJS, but still need to have the “jquery” dependency respected. Unfortunately, in the usual scenario it’s essential, that RequireJS is loaded before jQuery to provide the define() method, that jQuery registers it with. <!-- this will fail with an error: --> < script src = "…
First of all I’d like to thank the SO users μBio , Divya Manian , Alerty and BoltClock , who edited the answer and helped improve it. The original question can be found here. Learn Simple Things First ¶ For the most parts (and especially if you start learning), it holds, that HTML 4 is a subset of HTML 5 and likewise CSS 2 of 3. Therefore my suggestion is to start learning the ‘old’ techniques…
The other minute I’ve read an interesting article on the new HTML5 reversed attribute on ordered lists, that, who would have thought, reverses the counting. The article proposed a JavaScript polyfill. However, I thought, that this should be possible with CSS counters alone, and lo, it works: < ol style = " counter-reset : c 6 " > < li > Hello </ li > < li > World </ li > < li > Foo </ li > < li >…
In 2009 Tantek Çelik published a draft of a new calendar with 5-day-weeks solving issues with the Gregorian one. I am not convinced, that this is a useful way to re-structure the calendar. Back in the days we set up a calendar for our RPG world together with Sebastian Gerstl and Markus Biedermann, which makes transition much smoother. We came up with this concept: introduce a 13 th month…
The Mozilla developers have received some critics for their decision to remove the version number from future Firefox releases. Many other open source projects, like GIMP , are speeding up their release cycles as well, although not yet going the bolder step to abandon version numbers completely. When you think of it from a distance, ask yourself: What is the use of a version number on a product?…
The question came up quite regularly in the past, what would be an appropriate way to attribute me when using one of the CC-released works. Unfortunately the Creative Commons License itself proves to be no real help here. The license text ( as of version 3.0 ) says: “You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse…
I’m a sucker for the monokai color scheme , especially in its Vim theme incarnation molokai . It is easy to imagine, how surprised I was, that this scheme wasn’t ported to a ChatZilla motif yet. After all it exists now in this way or the other on basically any editor under the sun. The official existing motifs need to get used to. So I grabbed the test file and created a monokai based motif with…
Better late than never, as the saying goes, this is my report of the June 2011 MDN Doc Sprint in Cincinnati, OH, and the preceding Open Help Conference . For those not familiar with the term, Mozilla organizes Doc Sprints since October 2010 to encourage work on the Mozilla Developer Network (MDN) and to enhance the community around it. The core of the MDN is a community-driven wiki, that aims to…
Demo Several people have presented methods to replace the default checkboxes in HTML forms by ones that are more consistent in a given design. While generally this might be unnecessary and even leading to a negative user experience, if these replacements are not being crafted carefully, in some cases it really makes sense. Literally any of those techniques make use of images to replace the native…
PHP has been thrashed a lot over the last years. While many critics are doubtlessly true, it is still the most used server-side language to create the web we use today and it is an easy to learn language to get started with developing for the web. There are several approaches to work around flaws in PHP, and I’ll give a short overview of typical representatives here. PHP is Slow ¶ If this is true…
For one of my recent projects I looked for simple icons, that are free to use. Well, to put it in a nutshell, I didn’t find, what I was looking for. So I fired up Inkscape and created a set that fits my need. Here it is, simple, plain, monochrome and free to use (a.k.a. in public domain). The icons are designed to be as minimal as possible The PNG was created from this SVG image , which I’d like…
The HTML5 logo, reset to its components. Source: W3C . The HTML5 draft specification contains a detailed section about rendering HTML with several CSS statements, that are strongly suggested to visual user agents. For targeting browsers, that follow this suggestion, the chapter therefore provides a great starting point to develop a CSS reset stylesheet with minimal impact. So without further ado,…
Vim’s syntax highlighting Highlighted syntax of source code on websites is a common sight these days. Tools like GeSHi , Pygments and SyntaxHighlighter make it easy to embed this functionality on both server and client side. However, the generated markup differs highly with regard to semantic correctness and user experience . In this article I compare different approaches and present a setup, that…
The EPUB standard is based on several other, well-established technologies. This makes it easy to generate simple ebooks in this format with the standard libraries of many modern languages. I’ll show here a way to do it with Python, and for the minimal set of features described here we could go back as far as Python 1.6 and would still need no external library. Let’s assume we already have a bunch…
Many web services allow access to their APIs via JSONP nowadays. This allows client-side JavaScript to access ressources via domain boundaries. However, for several reasons caching ressources locally (on the same server as the original web page) has still many application areas. Take the Twitter API as example. A client is allowed to have 150 API calls per hour. If the user has a tab open to a web…
After colorizing the SVG icons I needed to create images suitable for CSS sprites out of them. The first step is rasterizing the SVG files, as I described in the previous article. We now have a bundle of PNG files, which lay around and wait to be joined in one single image. Fortunately, the command line cure for this problem is clear. It’s called ImageMagick. The following small script does the…
Creating colorized versions of a base icon usually calls for heavy Photoshop actions. Recently I created an SVG file with some simple black-and-white icons I wanted to use in an application. The file contains a red background to differentiate between the single icon tiles, whose opacity is set to 0.3 . The single icons all have an attribute fill="black" . The task was then to create CSS sprites…
A thumbnail view of a website is meanwhile a common sight. Google has recently introduced it in its search results page, and numerous ad services offer more or less annoying tool tips with page previews. What all these instances have in common is the need for rendering the webpage in question on the server and displaying the image only to the client. In this article I’ll show a thumbnail technique…
What are Digraphs? ¶ I really became addicted to Vim’s digraph feature. It’s a simple but elegant way to input higher Unicode by entering combinations of ASCII characters. In insert mode, you press Ctrl-K followed by a mnemonic two-character sequence and Vim inserts the corresponding character from the digraphs table. The Wikipedia has an article about different input methods on several OSes and…
One of the main reasons, why I finally landed at Vim as editor was the lack of decent regular expression support in all other editors I used so far (except, of course, Emacs). That includes especially Notepad++ on Windows and gedit and Kate on Linux. My main criticism is, that in none of the latter three you can consistently and simply search for strings with newlines. Or, if you can, you cannot…
I’m Manuel Strehl, a true and thorough Bavarian web developer. And why, yes, I also own a Lederhose . Apart from dancing around some poles and Schuhplattling (ok, admitted, I never did that), I enjoy coding and developing good-looking, valid and usable web sites. Here in Regensburg I work for a small company named Kinetiqa . We sell our own CMS , but lately we focus more on custom web applications…
The SVG train is starting to gain momentum. Internet Explorer as the last of the major browsers is lacking support for displaying SVG images, but its developers gave a hint, that this may change with IE 9 . This article intends to demonstrate a different use of the XML-based vector graphics format. I will show you today how to use SVG to create wireframes out of a new website design and the…