pieroxy.netdesign

Remote real time computer monitoring

Tue, 27 Jul 2021 05:48:00 GMT

Conkw is a new project I've been working on for a few month. It stands for web-based Conky.

Just like Conky, it is aimed at hobbyists that want a small dashboard where their most essential data is displayed. CPU, temperature, fan speeds, but also the weather forecast, stock market, latest emails received, etc.

Unlike conky, the metrics are exposed through a REST API and there is a HTML UI to display your stuff on any browser. The goal is to find some use to the old ipads/tablets/laptops we all have lying around. You can put them next to your screen and have your metrics displayed there, with no real estate consumed from your screens. The UI has been properly prepared to run on old browsers.

The very nature of the web based architecture allows a conkw running on a machine to send all of its metrics to another central one for instance. So it is right out of the box ready to monitor a large park of machines, all reporting to one or more central instances.

It is also very lightweight to deploy as it stores nothing, it is real time! As such, one other way of using it is to gather all of your monitoring data through one instance, and have all that data exported to grafana, graphite or any other monitoring system that stores data.

Hop on the github for more details.

Apple is so great

Fri, 24 Apr 2020 07:29:00 GMT

Apple invented the personal computer with the Apple II, igniting the personal computer revolution. Apple is unique in that regard.

Apple made the mouse ubiquitous and popular, as well as the GUI. That's goundbreaking.

Apple changed twice of CPU architecture (68k -> PPC -> x86) in their computers, maintaining backward compatibility. That's no small feat.

Apple invented what we know today as being a smartphone. "The smartphone revolution". That was Apple starting it.

Apple introduced tablets and is arguably the biggest tablet manufacturer in the world. In fact, it produces one third of all tablets produced. Wow!

No other company has that track record.

Yet, Apple, to this day, still fails at making available to devs the number of pixels available for a webpage. CSS doesn't know. JavaScript doesn't know. HTML doesn't know. There is no way.

No other company has that track record indeed.

Pure madness

Mon, 27 Mar 2017 18:56:00 GMT

The other day I was waiting on a disqus blog to start up, loading the comments section. I have a 20MB/s ADSL line. I can download at 1.8 Mega Bytes per second without any issue.

The browser was spinning for so long that I decided to hit F12 in Firefox and headed for the "Network" tab. I hit F5 at that stage.

When everything was finished loading I could read:

340 requests, 7 557,42 KB

Granted, the content was available way before everything was loaded. But still. 7 Megabytes. 340 requests... This is PURE MADNESS!

Then again, buzzfeed.com's home page:

223 requests, 9 382,25 KB

Ok, ok, this is buzzfeed. Let's go to the nytimes.com.

283 requests, 8 158,95 KB

The biggest page of the website I'm currently working on shows:

40 requests, 198,45 KB

Out of these, there are 32 images that come out of a DB. And I find that too high and am trying to reduce it.

This. Is. Madness... Pure madness. But it seems to be the web today.

The good news is, on the performance front it is quite easy to get an edge. There is always an opportunity :-)

JPEG Compression: Is 80 the magic quality - Part 1 - the retina screens

Sun, 01 May 2016 07:45:00 GMT

Foreword - encoding JPEGs

How do you encode your JPEGs ?

Let's take a concrete example. You you have a 150x150 image. You want to compress it in JPG, but which quality settings should you use? JPEG encoders usually take a quality setting as a parameter, between Q1 and Q100, where 1 is the worst quality and 100 the best.

An image encoded in different qualities. The legend shows the quality setting and the corresponding filesize.

Q 10 - 1579B

Q 20 - 1960B

Q 30 - 2260B

Q 40 - 2513B

Q 50 - 2729B

Q 60 - 2973B

Q 70 - 3308B

Q 80 - 3826B

Q 90 - 4939B

Q 100 - 32KB

We can see that the greater the quality, the better and bigger the image. There is clearly a compromise to be done as Q100 is clearly too big an image and the increase in filesize doesn't translate to an equivalent increase in visual quality. 80 seems a sensible choice. The filesize is 3.8KB.

While this 80 quality settings is the most sensible, we're going to show that in some circumstances it is completely off the mark.

In this first part, we'll focus on high density displays, aka retina screens as they were first introduced by Apple a few years ago.

Hamburger anyone?

Fri, 30 Oct 2015 08:37:00 GMT

Under the idea of learning something new every day, I stumbled upon a nice article depicting the flaws of the hamburger menu.

And I learned a thing or two. So instead of rehashing the article here, I invite you to click the link above, leave my website and have a good read.

Embrace boredom

Tue, 31 Mar 2015 07:21:00 GMT

I know, I'm a programmer. And as such, everyday or so of my life for the last 20 years I've written code. Most of it has been thrown away by now, but a good chunk is still alive and kicking. And what happens to this code now? Well, from time to time someone take a look at it and try to think "how am I going to make this code do what I want it to be doing". And if this person finds an answer quickly, the code I wrote was good.

As Dan McKinley puts it very well, the best way for this code to make things easy for other people is to be understandable at first glance. Smart and clever code doesn't meet this standard. Boring code does.

Boring code means code that meets long-established standards. It's boring because those standards have been known for a long time and you're smart! You can do better! Yes, you can, but no, you shouldn't. Because the next person modifying your code won't have a clue about your smart idea of the day.

In the same way, when choosing a library to answer a need you have, before jumping into the latest shiny bandwagon, ask yourself if the old and rock-stable lib everyone knows can do the job. If it can, there is probably no better choice. If and when it fails, you're more likely to have at least a few people onboard that know about that failure. When you push it to the limits, you also have experienced people that can better predict what will happen.

The only exception to this rule is areas in which you innovate, and there should be very few of them. You can't innovate on every front. Because innovation is draining your resources: it is longer to setup, harder to pickup for newcomers, harder to fine tune, more prone to bugs which are harder to debug. Just because it's new and no one has any experience with it. So choose those areas very carefully.

This is where the GTD (Get Things Done) should kick in. Use rock-solid and proven libs. Use rock-solid and proven patterns. You will be more likely to build a rock-solid platform that works without a glitch. And it will be faster and less expensive to build.

Chrome and Arial Narrow

Wed, 15 Oct 2014 13:08:00 GMT

As you discovered with my previous entry, I was looking for nice condensed web fonts (read: native) for my headings. Well, I found plenty for everyone but for Chrome on Windows. Chrome issue is troublesome for me because this combination represent 30% of my traffic right now, by far outweighing other combinations of browser/OS.

How come I couldn't do it? I could do it with IE, Firefox on all platforms and Safari on all its platforms. Even Chrome on non-Windows platforms. It turns out that Chrome does not support the font-stretch: condensed CSS attribute. On other platforms, there are fonts that are condensed and can be targeted by using their name, but alas, Arial Narrow is not a font you can target with Chrome (nor with Firefox), even though IE can target it. Note that Franklin Gothic is in the same situation.

It's the first time Chrome is lagging in terms of features behind IE and Firefox (at least on something I use).

Let's hope Google addresses this problem as Arial Narrow is pretty much everywhere. And it's a pretty nice font, even though Helvetica people have probably left my website by now.

Edit on October 16: It is an issue with Chrome 37. So hopefully it'll get patched soon.

Edit on October 21: Chrome 38 is out. This is fixed.

The quest for a condensed web font

Sat, 11 Oct 2014 21:29:00 GMT

I was looking to freshen up my blog's CSS. It's that time of the year. After looking here and there, I decided I wanted a condensed font for my headings. Sans Serif. This seemed like the right thing to do.

A condensed font is a font that is a little narrower than a regular font. For example:

As you can see, the letters are stretched and narrower than the regular version of the font.

I want a web safe and native font-stack because it is much lighter than a font-face (download-wise). You now see everywhere on the web that there is no point in targeting web safe fonts, because there are too few. So just use the CSS3 @font-face and be done with it. Well, I don't agree with this. I still care about my mobile users and imposing them a 100kB payload just to view the headers in the font I chose is not something I think is reasonable. Plus, I like the idea that my website looks a little different on every device. Hopefully it even matches the UI of the device since its using one of the device's font. I mean, using the Ubuntu font on an Ubuntu system is more likely to trigger a familiar feeling to the reader. This font is displayed in quite a few places in the OS such as the splash screen or the menus. And it seems fun.

Of course, I want my font-stack to be cross-browser. So I looked for default fonts on all my target systems. Fortunately, in my home there are plenty of different devices: iOS, Android, Windows, MacOSX and Ubuntu (Linux). This is my target right there.

The Quest

On Ubuntu, there is a nice font pre-installed called Ubuntu, and there is a condensed variation. In bold it looks fine. I also found a Liberation Sans which also has a condensed version (called Narrow). There's a better chance of having these fonts on non-Ubuntu Linux boxes. Since I couldn't find any resource on the web telling me which fonts are preinstalled on an Ubuntu system, I made it with the fonts installed on mine. Also, testing with saucelabs.com I found that their bare Linux install has Liberation Sans installed. I'll call it a day.

Then I went to iOS, where a very nice website lists all the fonts on all the versions of iOS: iosfonts.com (best viewed on an iOS device). I found two fonts that I liked in there: AvenirNext (since iOS6) and Futura (since iOS3). So there I am, iOS is now covered. The extra bonus is that for old devices I will fallback to Futura and all iOS devices can install iOS3, so I've pretty much covered 100% of iOS devices. Sweet.

Then I went to Android, where there is a new font called Roboto (as you can see there). This is unfortunately only true for recent Android devices (how recent I don't know), but it seems to me that there was no condensed font installed before that point. Too bad. There is also something peculiar about Android font families: You cannot target font-family: Roboto. This would be too simple I guess. You instead have to target a generic condensed font: font-family: sans-serif-condensed. Oh well, after all what I'm looking for is a sans serif condensed font and if/when other browsers on other platforms start picking up this peculiar syntax, well, it'll give me what I want. I guess. I hope.

I went quickly to my wife's MacBookAir, just long enough to make sure that one of my iOS fonts was installed on her Mac: Futura. They also make available a list of fonts for their OS: ht1642. The wikipedia page is much more helpful in that it has images of what the fonts look like. So I found Helvetica Neue which has a nice CondensedBold version. There I was. Done for MacOSX.

Then I went to Windows, my least favorite platform but let's face it: The one used by the vast majority of my users. I was firmly decided to get it done quickly. More than 90% of my users come from Windows 7 or 8, so I went to the Win7 fonts page. And there is the real disappointment: no condensed or narrow fonts. The narrowest font I could find is Trebuchet MS, the font I was already using for my headings. Disappointed. Very much so. So I thought that most users having Windows have Microsoft Office. I then stumbled on this page: Fonts supplied with Office 2010. There I got plenty of interesting fonts. Unfortunately, I tested this on my son's Windows 8 laptop with Office 2013, but most of the fonts listed weren't even installed. Too bad.

Then, wandering on the fringes of the interwebs, I stumbled on cssfontstack.com where I discovered a few things:

There is a font called Arial Narrow. It works on my ubuntu even though it's not even on the installed fonts list!! Let me try that on windows... Well, things are complicated. On IE, you can target it fine either by putting Arial Narrow or by targeting Arial and specifying font-stretch: condensed. Firefox only goes with the font-stretch: condensed and Arial. Chrome as well (doesn't work on Chrome 37 though). So I'll put it with both forms as a fallback.
Franklin Gothic Demi Cond seems to work on Windows and looks a lot nicer than Arial Narrow. Firefox and Chrome let me use the font-stretch: condensed modifier which does the job on Franklin Gothic. With IE, it works both ways. Unfortunately, I've found a few systems with Arial Narrow which don't have Franklin Gothic Demi Cond, so I cannot target it for Firefox/Chrome or else Firefox will just display Franklin Gothic, not the condensed version on those systems.
Both these fonts are installed with Office, none are on a bare Windows install. Furthermore, to target Arial Narrow for Firefox and Chrome, you need to target Arial with a font-stretch: condensed. Hence, whether Arial Narrow is installed or not, Arial will be targeted and your font stack stops right there, because this is such an ubiquitous font. Since most Windows users have MS Office, I will still try to target it. And the rest of them will see Arial.

The Results

Here are my results so far:

h1 { font-family: /*iOS*/"AvenirNextCondensed-Bold", "Futura-CondensedExtraBold", /*MacOSX*/HelveticaNeue-CondensedBold, /*Ubuntu*/ "Ubuntu Condensed", "Liberation Sans Narrow", /*Windows*/"Franklin Gothic Demi Cond", "Arial Narrow", /*Android*/sans-serif-condensed, /*Fallback*/Arial, "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif; font-stretch: condensed; }

Since most of the fonts I found do please me, I listed them in no particular order, except for

My old fonts are at the last position as a last resort fallback.
Android's declaration seems a little too generic for me, so I put is just before the fallback fonts in case some future version of browsers start interpreting it giving me unexpected results.

Final thoughts

Finally, I've got a few surprises in my quest.

iOS and MacOS are much more polished environments than the rest and finding nice fonts was just plain trivial. There are lots of documentation and examples, and devices follow them nicely.
I thought a modern OS like Android would be more loaded with fonts and would have a better documentation.
Ubuntu is an undocumented pile of heterogeneous stuff. Linux. No surprises there.
I did not expect Windows to fare particularly well in here, but I certainly didn't expect it to fare that bad! Not only is the documentation just plain fuzzy and wrong, but the font choice is the worst of all OSes. To put it bluntly, it doesn't have a narrow font, not even in Windows 8. And to think this is the major desktop OS by far... I'm not wondering why MacOS shares are increasing.

And, as expected, no need for a @font-face declaration and a 70k download just to get a font I like. Most Windows users have Office installed (I hope) so this isn't a really big issue. Plus, Arial isn't that bad as a fallback. My font stack works well enough in all platform I've tested so far. That's more than enough for me.

At last, check out flippingtypical.com. It will list all the fonts your browser knows about with a nice preview. Very helpful.

The Demo Area

Here are all the fonts selected. You will see of course only the ones you have installed on your system. This is more of a test area for me than for you, but I threw it there so that you can see it. Note: I built a little tool to help you detect all the fonts you can target. Test the fonts on your browser

No style: All examples looking like this below means they don't exist on your system.

This is the test area
iOS6: Avenir Next Condensed Bold

This is the test area
iOS3: Futura Condensed Extra Bold

This is the test area
MacOSX: Helvetica Neue Condensed Bold

This is the test area
Ubuntu: Ubuntu Condensed

This is the test area
Ubuntu: Liberation Sans Narrow

This is the test area
Windows: Franklin Gothic

This is the test area
Android: Generic Sans Condensed

This is the test area
Fallback: Arial Narrow

This is the test area
Fallback: Trebuchet MS

This is the test area
Fallback: Lucida Grande

This is the test area
Fallback: Tahoma

This is the test area
Fallback: Verdana

This is the test area
Fallback: sans-serif (This is the last instruction - I want a sans serif font if nothing else is available)

This is the test area

www.qwant.com - how not to design a website

Sat, 16 Feb 2013 12:33:00 GMT

I was reading in the news the birth of www.qwant.com, a new French search engine. So I said to myself "ok, let's go and have a look." I was in my bath with my iPhone. First impression isn't very good since the website doesn't have a mobile template so you have to zoom in and out to read anything. So I launch my first search and zoom in to read the results. And then, some piece of JavaScript overlays huge column headers on top of my screen - covering 100% of the screen. I can't see the page anymore.

So here is my first impression: it is broken. It's just that the website is not usable with a phone. They have column headers that "float" on top of the page whenever you scroll down and whenever you zoom in, they take up 100% of the screen so nothing works. At all. You cannot even see the search results. Note that it doesn't work at all on Android or anything else with a small screen. Granted, with big-screen Android phones (think the 1280x720 variety), it is just clunky and somewhat usable since you don't have to zoom as widely as with a smaller screen phone.

This is in my opinion the exact opposite of what a website should be about. I mean, what value are you bringing if users cannot see your website?

The column headers that overlap the entire display does bring minimal value to desktop users and annoy phone users to the point of having your entire website useless. Why have them?

Presto is about to die

Wed, 13 Feb 2013 15:48:00 GMT

And Opera will run WebKit

Yes, Opera will soon be using WebKit as its rendering engine instead of the custom built Presto.

Now, for the average web developer that didn't bother testing on Opera (desktop and/or mobile, and/or mini) it will not change anything. For web developers that bothered, well, it will make things simpler.

But but... variety is good, right?

Well, actually, variety is good and bad at the same time. Opera's efforts toward their engine will now be directed towards WebKit, and will then be used by quite a few browsers: iOS's, Chrome and Safari (hopefully Android's default browser will eventually die and be replaced by Chrome so I won't count it.)

Thanks to all the folks at Opera working on Presto for the past 15 years. I'm sure the future will hold lots of great stuff for you guys.

iOS UI elements in HTML - part 2

Tue, 18 Dec 2012 11:20:00 GMT

The tab bar and buttons

In this second article, we will focus on the buttons bar at the top of many iOS apps. Below one live example:

We will see the toolbar, buttons (in two states: active or not), and tabs. Hop on to see the details.