Three-way CSS-only selector

February 11th, 2016

I was at the Slovenian CSS Meetup yesterday where I did a short talk on Quantity Queries. That’s a name given to a technique where you use pseudo class selectors to discern how many elements are inside a certain element – for example :first-child:nth-last-child(4) {} will only select the first child if there are exactly 4 elements. If you group that with the general sibling selector ~, you can also get all the other elements.

The idea of quantity queries has been around for a year or so and even though at first glance you might say “We’ve got flexbox for that now”, you’d only be right in certain cases. The thing that quantity queries bring to the table is the idea of being able to change the styling depending on the number of elements, which I guess people currently solve either on the backend or with javascript.

But that’s not the main reason I’m writing this – it’s the last talk of the night where a three-way selector solution was presented by Gorazd. He created a CSS version but had problems with the smoothness of the animation as he didn’t know where the selector was before the selection to move it to the selected position after a user interaction. He resorted to using javascript that basically only did some class switching. This immediately gave me an idea that a sibling selector could be used for that if the indicator had the same parent as the inputs and was positioned after them in the code. And today I made a proof-of-concept solution I’m calling “the three-way CSS-only selector”.

It uses three radio buttons, so the form is perfectly submittable, the labels also select properly, it animates properly and does not use javascript. It’s only been tested on the browsers I have on my Mac, so I can easily see it breaking in IE or mobile browsers – if anyone wants to fix that please go ahead and ping me to add your solution to this post. You can also check the solution on JSBin.

The airport confusion

May 19th, 2015

Frankfurt airport confuses me. I never know when I’ll have to go through security and when it’s only going to be border control. This means that I don’t really like flying through it as I don’t know if I can buy stuff at airports on the way in and Fraport is losing money. Same thing goes for shops at the airport – even store clerks don’t know if I need to clear security again. And I don’t like the idea of throwing away a 50 EUR bottle of rye bourbon.
If they offered a service that would, based on the date of travel, origin and destination airports, tell me which gate I might arrive at and fly out of as well as what kind of controls I’d have to go through and which shops are on my way I’d like it more.

My ideal commuter bike

April 12th, 2015

I’ve been thinking about this for a while now and we’re getting closer but not there just yet. Since a few people have asked me and I always forget something I’ll list all the features here.

Must haves beside wheels, frame, forks, saddle, pedals, handlebars and a reasonable price:

  1. breaks front & back (disks a plus)
  2. fenders front & back
  3. internal gear hub
  4. chain cover
  5. reasonable weight

Optionals:

  1. lights front & back
  2. hidden break and shifter cables
  3. rear rack

You can get the lights, but it’s way nicer if they look the part, cables inside the frame make the bike look nicer and a rear rack is useful for schlepping stuff around.

I’ve recently done another search and found that Schwinn Brighton comes close – it has all the must-haves, but unfortunately it’s not available in Slovenia.

Update: I found this bike in Cube Town Pro black 2017.

Shipping

October 5th, 2014

When we stared a hardware startup, I hoped that at least the logistics and shipping would not be a problem – from all the global shipping companies to all the fulfillment companies surely it’d be a breeze. Oh how wrong I was.

Since then I found out that delivery guy ignorance and package mishandling doesn’t only happen here, it happens elsewhere too. I’ve even been told that the “this side up” sign is ignored, they only care where the label is so it can be scanned fast and automatically.

The prices on their price lists are also out right ridiculous. Most companies I’ve seen only offer fast shipping (1-2 business days in Europe), if you want anything cheaper/slower you go the way of the local post, which is unreliable and can’t guarantee anything (and will usually take 5-10 business days in Europe).

Returning packages is another thing that is far from solved – from the delivery companies to customs officers, so it’s really hard to create a good experience for the customer to return an item free of charge.

As usually with these huge systems you need to get to the people level to get things working – when you’re calling a person not a number, when you call the delivery guy by name everything works. For everything else you try to hack the system to get what you want…

Benchmarking web servers

August 25th, 2014

We recently bought a server at CubeSensors and are now putting it through its paces.

One of the things I was looking at was our HTTP server / load balancing setup. We’re currently using an Nginx server in front of Tornado instances and I was wondering if there is something that is more specialized and thus likely faster that would allow for realtime upstream configuration changes. I found HAProxy.

I did a simple setup on the server (Ubuntu 14.04) to test things:

  • Nginx 1.6.1
  • HAProxy 1.5.3
  • Tornado 4.0.1

Tornado is running a very simple app that only returns OK at /, there’s two of them and both are started with 2 forks (server.start(2)). HAProxy is set up with option http-keep-alive with a 60s timeout and points to the two Tornados while Nginx has two virtual hosts, one linked directly to Tornados with keepalive 4, the other to HAProxy also the same keepalive setting, both with proxy_http_version 1.1 and removed Connection header. Server timeout is set to 30s, client to 10s.

The first idea was to test with ab using something like ab -n 10000 -c 100 URL. On a machine that is running nothing else but the tests, the times were changing way too much from one test to another. I also noticed that ab is making HTTP 1.0 requests.

The second tool I tried is siege, which has a few different options than ab and also makes HTTP/1.1 requests. I used siege -c 1000 -r 100 -b URL and Nginx-Tornado combination manages a 50% higher transaction rate than any combination with HAProxy. But I think this says more about my ability to configure HAProxy than it does about HAProxy itself – I keep getting a bunch of stale connections (in TIME_WAIT state) hanging around even with option forceclose.

Resolution: sticking with Nginx. It can log POST body, upstream configuration changes will be handled by including the upstream configuration which can be changed and reloaded.

Security questions

September 23rd, 2013

I was just asked two security questions by Apple after trying to buy an app. Apple says it’s the first app on this device, but what they really mean is “the first app on this device with iOS7”. I didn’t know the answer to any of them so I now have to reset them and who knows what else.

I have no idea who decided that security questions were a good idea in the first place. The answer to the question can usually either be easily researched (maiden names, first teachers, first cars,…) or hard to remember. The first one is a problem because then they don’t really provide any security, only add friction to the process.

Remembering the answers is a bigger problem because of a few reasons. Some of the questions are hard to answer in the first place – I for one have no idea what my first concert was and even if I think about it I have no idea if when setting the answer I thought the one at school counts or was it the first one I bought tickets for myself, which band did I write or did I wrote all of them in what order and in what form. Geographic questions are also much fun because you never know how local your answer was – was it the street, town, county, state,… And because of the first issue, the easily researched questions get tricky answers that you never again remember unless they are really obvious, which again makes them easily breakable.

I can see some value in these kinds of questions when there is a person on the other side, but only if that person is trained to recognize people that make up stories and lie. But this doesn’t happen very often.

So if you want something to be secure, make users select stronger passwords. Don’t add shit that doesn’t add security but problems.