Blog – Page 36 – Johan Ronsse

Simple flexbox check

January 3, 2016 - Posted in Uncategorized - 3 comments

I love Modernizr to check if a browser support a certain CSS feature, but I found myself in the situation where I only had to check for flexbox support.

In this case, it seems a bit ridiculous to load Modernizr. You can use the following code instead:

var doc = document.body || document.documentElement;
var style = doc.style;

if ( style.webkitFlexWrap == '' ||
    style.msFlexWrap == '' ||
    style.flexWrap == '' ) {
  doc.className += " supports-flex";
}

Via Ethan Marcotte’s article “Putting My Patterns through Their Paces”.

Designing for performance

January 2, 2016 - Posted in interface

In 2015 there were two talks that kept me thinking for a few days. They are “The website obesity crisis” by Maciej Ceglowski and “Delivering Responsibly” by Scott Jehl.

Both authors went to great lengths to make their talk available as a responsive web page. This is important because it underlines the points of their talks: content should be accessible. Performance is important.

I fully agree. If there is one thing that pisses me off it is poor web performance.

When I hear someone discuss that you can just “add a few web fonts to your site” my brain goes into overload and I kind of want to start a long discussion about why that is just a terrible idea.

There is a good reason why this website doesn’t load any web fonts: it’s much more important that the article you are reading actually loads on a 2G connection than that it is “pretty”. Furthermore, as my colleague Xavier pointed out, every modern OS comes with its own system font that is actually pretty great.

OSX and iOS have San Francisco, Windows has Segoe UI, Android has Roboto. Even Firefox OS (RIP!) has the wonderful Fira Sans.

So why bother loading a font that will a) cost you a licensing fee and b) will probably be inferior? The only sensible reason is a branding perspective, but what is the point of a brand that can’t be accessed?

P.S. Yes, I know, there are various optimization techniques you can use to load the font asynchronously, add it to localstorage etc, etc. I have researched all of this. The fact remains that few people take performance seriously, and most people will take the easiest way out.

Signage

December 29, 2015 - Posted in data-visualisation interface

On Twitter I’ve seen people complain about the new information systems from the Belgium railways, so I decided to take a closer look.

This is what the new signage looks like:

signage-new

I think there are 2 main issues with the design:

the “hours” are not so scannable because they are not aligned
there is not enough contrast. The old panels had yellow on black which provides high contrast. These new panels have either white on mid blue or white on gray. The problem with a display is that you don’t always see it in optimal conditions.

Here is what it used to look like: (sorry, I only had a picture with massive delays :)):

signage-old-2

This is the “big” panel which does have the hours in one column:

signage-old

And just for fun, similar signage at the airport:

signage-bru-airport

Hello world (again)

December 28, 2015 - Posted in Uncategorized

Time for a new blog! This time I will try to actually blog a bit like… uh… blogging used to be?

For those who don’t know, I have a long history of blogs all the way back to 2006. In the beginning I blogged to learn, and when I went freelance a couple of years ago I blogged to build up my reputation.

The past few years I’ve mostly been blogging to promote the company I work for but since that’s a much bigger story now than just me, in a way I now feel I don’t have an outlet for my thoughts on the company blog anymore.

I’ve written tons of stuff the past few months and for me it’s been frustrating that none of it really got published in a proper way. This new site is a fresh start to finally get those thoughts online.

Prefill credit card information on web forms in iOS

December 1, 2015 - Posted in Uncategorized

Wouldn’t it be nice if you can prefill credit card information when filling out forms on the web? Well, in iOS, you can.

Make sure Safari > Settings > Autofill > Credit card is turned on. This setting will allow you to add a credit card by taking a photo of it or manually adding the data.

When the setting is on, if you go to a form on the web, provided it is served through a secure connection (SSL), and it has the correct references, Safari will offer to autofill the credit card information.

I presume developers of native apps will also be able to prompt the user for their credit card information using Apple’s provided API’s.

The trick to making it work on the web is using certain “name” attributes on the inputs e.g. “ccName”. I haven’t personally verified the pattern that Safari is matching to, but this code sample of a form should help you on your way.

Sony A7RII

September 1, 2015 - Posted in Uncategorized

The DSLR is looking like not just a dinosaur, but a lame dinosaur, given these advances. How long will CaNikon watch Sony advance without responding? The optical viewfinder is great for some things, but I say get rid of it—it is a huge liability for most things. Mirrorless is now the leading technology on the market, solving real issues for real photography.

diglloyd →

Kana Master 1.0 released!

June 9, 2015 - Posted in entrepreneurship interface

Some time ago I was looking for a developer for an application I was designing. The guys at Underlined decided to help me out with development, and so the Kana Master story began. This weekend the app got approved on the App Store (after 10 days… jeez… compare that to deploying a website update). You can watch the demo video to see how it works:

Content

The goal of the app is to provide a quick reference for both Japanese scripts. In daily life I found myself often forgetting a character and there was no quick way to look it up. This app serves me well in these situations. Next to that there is a quiz which provides you with a way to test your knowledge.

Quiz interaction

Most applications test you with multiple-choice quizzes but I find this to be a teaching method where you don’t really remember. You don’t have to recall, you just have to recognize. The idea behind the quiz is purely recall: you type the romaji (roman version) of the kana that is shown at the moment.

Technical

We first tried to work with Ionic framework. The promise of a cross platform app using web technology was promising but it was hard to get the result we wanted. The developers then decided to make it a native iOS app. I didn’t fully agree at first because I believe it is possible to make a good cross-platform experience using web technology. However, seeing the end result, I am kind of glad with it. Sorry for the Android and Windows Phone users out there. We might make an Android or Windows Phone version when the app proves to be popular.

Future

The current application is free. We are planning to add in-app purchases in the future for newer features. One feature I would like to add is to show how to write the characters, more specifically the stroke order. Check it out!

Download Kana Master on the App Store.

I tried some augmented/virtual reality games

May 19, 2015 - Posted in games interface

I don’t know what’s happening lately, maybe it’s because I’m in Japan, or maybe because we finally reached a certain point in tech, but every 2 weeks there is some new announcement that makes me feel like I am living in the future. Just a few days ago I saw a video of 2 guys flying over Dubai with a jetpack. I saw some guy with a surfboard that had a jet engine attached to it – they called it a new sport. There was the HoloLens announcement. There are drone deliveries and people are excited about space again.

I was talking to some coworkers in our coworking space and showing them the video I recently made about Tokyo Indie Fest. At that game conference I got to try the Oculus rift as well as the Samsung Gear VR. The difference between these is that one uses a computer to render the data to the Oculus whereas the second one uses a smartphone for the display. I am not sure where the renderer is located in the case of the Samsung Gear VR.

So when I say coworkers I mean the other guys in my coworking space. Not my Mono colleagues. Anyway, for months they have been working on their project, which is an augmented reality game. I got to try it today. Basically you have a sensor on your wrist that connects to a smartphone. The sensor is this product called the Myo:

Then just like the Samsung Gear VR product you strap a smartphone to your head (in this case it was a Sony Xperia) and it’s time to play! The game involved shooting fireballs from your hand. No, really. Fireballs from your hand.

Basically you would clench your fist so the muscles in your arm would tighten. When you release your fist the muscles untighten, the sensor gets a signal and BOOM! – you see a fireball coming from your hand. I probably looked like a total dork but for one moment I felt the power.

We chatted a bit about possible uses cases and this could make a game like laser shooting a lot more interesting. The idea for now is to make a 3 vs 3 game as seen in Hado’s concept video. From what I’ve seen it’s hard to pull off VR, and from the demo I tried it isn’t quite there yet. This counts for all VR stuff at the game conference as well. The resolution is too low and the software is too slow, but I think with some dedication and newer hardware we can reach that VR point that it actually becomes nice and a preferred way to play video games. I love it when people are working on hard problems so to these guys I say: がんばって!

I made a small documentary about Tokyo Indie Fest 2015

May 13, 2015 - Posted in film games

One of my main software projects (which I unfortunately can tell nothing about) is close to a first release. The developers are working hard to iron out the last bugs. As the designer I suddenly found myself with a lot of free time on my hands.

My dream has always been to make a movie. Every time I watch a movie I analyze the shots carefully. I’m usually more interested in the technical side than the actual story.

I had dabbled with iMovie and Final Cut (Pro X) before but it never felt like I could actually make a proper movie with them. These apps felt like toys to me.

I decided to learn Adobe Premiere and I must say it’s pretty awesome. Lynda.com was a great help to get up to speed with the different functions of Premiere. The photography skills I picked up before helped with this project as well.

The problem was that I didn’t really have any material to practice with, so I decided to make it a real project. I wanted to do a small movie on indie game makers. I went to the Tokyo Indie Fest conference and interviewed 5 people about their game. I had the lovely assistance from my girlfriend to be the second camera person.

The material was then edited using Adobe Premiere and Audition. What we used for this film is pretty bare bones: a cheap lavalier mic from Sony, a DIY lavalier mic, a tripod, 2 iPhones, a recorder and a Sony RX100 III. It worked but as you will hear in the video the place was noisy as hell. Even after a lot of sound editing it still sounds kind of bad; that’s a lesson for later.

I am already thinking about new documentary ideas and how to make the next one better. Enjoy the movie!

Re: The Death of the Agency Has Been Greatly Exaggerated

March 15, 2015 - Posted in Uncategorized

The Death of the Agency Has Been Greatly Exaggerated:

“Now this doesn’t mean that agencies won’t struggle. With services like SquareSpace and Shopify eating into the lower end of the market, I think many smaller agencies or individuals will find it difficult to complete.”

I think the opposite is true, services like Squarespace and Shopify enable smaller agencies or individuals to actually deliver a service that they never could before. When an organisation has a need to be represented online, to sell things online etc. these tools make a single talented individual super-powerful.

You can add payments to a website with stripe in less than a day, it used to be a mammoth task of integrating Ogone and dealing with all kinds of issues. These days you can buy software that used to be thousands of dollars for one tenth of the price (I am talking about Logic and Lightroom). This software enables small companies to deliver a lot of value for their clients.