Crooked Style Sheets

Crooked Style Sheets is a proof of concept for website tracking/analytics using only CSS and without Javascript.

What can we do with this method?

We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we can detect if a user opens a link or hovers with the mouse over an element. This can be used to track which (external) links a user visits and using the hover method. It should be even possible to track how the user moved their mouse (using an invisible table of fields in the page background). However, using my method it’s only possible to track when a user visits a link the first time or hovers over a field the first time. Maybe it’s possible to modify the method so that it is possible to track every click.

Furthermore it is possible to detect if a user has installed a specific font. Based on this information it should be possible to detect, which OS a users uses (because different operating systems ship different fonts, e.g. “Calibri” on Windows).

JSON Server

JSON Server is a handy tool for anybody working with or developing the REST/JSON APIs.  It’s a ready-made “fake” API server, that is super easy to setup with your end points and your data.  And the best part – it’s not just read-only.  You can work with POST, PUT, PATCH, and DELETE requests too and the JSON Server will properly update your pre-configured data in the JSON files.

Nerd Fonts – Iconic font aggregator, collection, and patcher

Nerd Fonts is a collection of fonts for people who work with code snippets, command line, and text-based user interface applications.  The fonts are also patched with additional popular icon sets like Font Awesome, Devicons, Octicons, and others.

Why the World Only Has Two Words For Tea

Slashdot has an interesting story of why there are only two variations of the word tea in the majority of languages:

With a few minor exceptions, there are really only two ways to say “tea” in the world. One is like the English term — te in Spanish and tee in Afrikaans are two examples. The other is some variation of cha, like chay in Hindi. Both versions come from China. How they spread around the world offers a clear picture of how globalization worked before “globalization” was a term anybody used. The words that sound like “cha” spread across land, along the Silk Road. The “tea”-like phrasings spread over water, by Dutch traders bringing the novel leaves back to Europe.

The term cha is “Sinitic,” meaning it is common to many varieties of Chinese. It began in China and made its way through central Asia, eventually becoming “chay” in Persian. That is no doubt due to the trade routes of the Silk Road, along which, according to a recent discovery, tea was traded over 2,000 years ago. This form spread beyond Persia, becoming chay in Urdu, shay in Arabic, and chay in Russian, among others. It even it made its way to sub-Saharan Africa, where it became chai in Swahili. The Japanese and Korean terms for tea are also based on the Chinese cha, though those languages likely adopted the word even before its westward spread into Persian. But that doesn’t account for “tea.” The te form used in coastal-Chinese languages spread to Europe via the Dutch, who became the primary traders of tea between Europe and Asia in the 17th century, as explained in the World Atlas of Language Structures. The main Dutch ports in east Asia were in Fujian and Taiwan, both places where people used the te pronunciation. The Dutch East India Company’s expansive tea importation into Europe gave us the French the, the German Tee, and the English tea.

This reminds me of this old post about how most languages, apart from English, use “ananas” as a word for pineapple.

The Brutal Lifecycle of JavaScript Frameworks

JavaScript ecosystem is well known for its dynamic nature.  There are a gadzillion of libraries and frameworks, and they come and go much faster than any developer can learn and utilize them.  StackOverflow blog runs this article, which looks at the issue in more detail.

17 Tips for Using Composer Efficiently

Martin Hujer has collected 17 tips for using composer efficiently, and then added a few more after receiving the feedback on the blog post.  I was familiar with most of these, but there are still a few that are new to me.

Tip #7: Run Travis CI builds with different versions of dependencies

I knew about the Travis CI matrix configuration, but used it only for other things.  I’ll be looking into extending it for the composer tests shortly.

Tip #8: Sort packages in require and require-dev by name

This is a great tip!  I read the composer documentation several times, but somehow I missed this option.  It is especially useful for the the way we manage projects at work (waterfall merges from templates and basic projects into more complex ones).

Tip #9: Do not attempt to merge composer.lock when rebasing or merging

Here, I’m not quite sure about the whole bit on git attributes.  Having git try to merge and generate a conflict creates a very visible problem.  Avoiding the merge might hide things a bit until they popup much later in the CI.  I guess I’ll have to play around with this to make up my mind.

Tip #13: Validate the composer.json during the CI build

This is a great tip!  I had plenty of issues with composer validations in the past.  Currently, we have a couple of unit tests that make sure that composer files are valid and up-to-date.  Using a native mechanism for that is a much better option.

Tip #15: Specify the production PHP version in composer.json

This sounds like an amazing feature which I once again missed.  Especially now that we are still migrating some projects from PHP 5.6 to PHP 7.1, and have to sort out dependency conflicts between the two versions.

Tip #20: Use authoritative class map in production

We are already almost doing it, but it’s a good opportunity to verify that we utilize the functionality correctly.


Zero-Width Characters

This article shows a couple of interesting zero-width characters techniques for the invisible fingeprinting of text.

In early 2016 I realized that it was possible to use zero-width characters, like zero-width non-joiner or other zero-width characters like the zero-width space to fingerprint text. Even with just a single type of zero-width character the presence or non-presence of the non-visible character is enough bits to fingerprint even the shortest text.


I also realized that it is possible to use homoglyph substitution (e.g., replacing the letter “a” with its Cyrillic counterpart, “а”), but I dismissed this as too easy to detect due to the differences in character rendering across fonts and systems. However, differences in dashes (en, em, and hyphens), quotes (straight vs curly), word spelling (color vs colour), and the number of spaces after sentence endings could probably go undetected due to their frequent use in real text.


The reason I’m writing about this now is that it appears both homoglyph substitution and zero-width fingerprintinghave been discovered by others, so journalists should be informed of the existence of these techniques.

How an A.I. ‘Cat-and-Mouse Game’ Generates Believable Fake Photos

The New York Times is running a very fascinating article on the progress of the artificial intelligence and machine learning in both identifying and generating fake photos – How an A.I. ‘Cat-and-Mouse Game’ Generates Believable Fake Photos.   The above image shows the progress of the AI working against itself and learning from its own results – one part is trying to identify if the photo is fake or not, and the other part is trying to generate a fake photo which will pass the test.  When the test fails, the system learns, improves, and tries again.  Look at the last row of photos, which are super realistic and took the system between 10 to 18 days to learn how to generate.

But that’s not all.  It gets better, and I quote:

A second team of Nvidia researchers recently built a system that can automatically alter a street photo taken on a summer’s day so that it looks like a snowy winter scene. Researchers at the University of California, Berkeley, have designed another that learns to convert horses into zebras and Monets into Van Goghs. DeepMind, a London-based A.I. lab owned by Google, is exploring technology that can generate its own videos. And Adobe is fashioning similar machine learning techniques with an eye toward pushing them into products like Photoshop, its popular image design tool.

Here are a few more photos that were generated:

This is remarkable.  But if you keep reading the article, you’ll quickly discover that there is even more to it.  What’s next in line after pictures?  You are correct: videos.  You better sit down before you watch this video, showing Obama’s lip sync:

So, can’t trust the TV.  Can’t trust the Internet.  Who do you trust?

Morten Rand-Hendriksen: Gutenberg and the WordPress of Tomorrow

If you are working with WordPress in any capacity, you have to watch this talk.  Or at least the first 25 minutes (before the Q&A).  If you are involved with web publishing or web design, you have to watch it.  If you are a web enthusiast, you have to watch it.   If you are not involved with the web at all, you definitely have to watch it, as you’ll have an idea of where things are going, and you might decide to get involved.

Just watch it!