On a recent trip to Japan, I combined my newfound obsession with cooking with a not-so-common touristic destination.
Kappabashi or “Kitchen town” is a street lined with cooking-related stores. It is said that if you can’t find it in Kappabashi, you can’t find it anywhere.
You can basically start a restaurant with what you can buy there. No kidding – it’s not just knives and pots and pans – it’s racks, machines, signs, menus and just about everything you can think of.
If you see the big chef, you know you’re in the right spot.
When I came to Kappabashi I first went for a sushi lunch in nearby Asakusa. This touristy neighborhood is probably the first place that many people to go in Tokyo because of Senso-Ji.
Medium fatty tuna, fatty tuna, sweet shrimp. Background – red miso soup.
The place was quite expensive but it was also pretty great in terms of quality. You know you’re in the right spot if you think there is a God right after eating a piece of chūtoro (中とろ) [medium fatty tuna].
Now, on to Kappabashi itself.
Looking through the pictures of my visit, I don’t actually have a lot of good ones, since most of the time there was spent looking through small shops with limited room to move (and thus to photograph).
Japan, land of convenience. Lockers around every station.
I knew I wanted to buy a lot of stuff so I put a big backpack in a coin locker, and went exploring.
The past year or so I’ve been on a bit of a quest to improve my cooking.
There’s a wealth of info on the internet on how to make almost anything. In my Best of 2017 – YouTube I mentioned 2 cooking channels – not a coincidence!
Lately I’ve been into making curries. First I made this Japanese beef curry:
And then this butter chicken curry:
It might look simple, but there is a lot of work behind this.
The hardest part is nailing the rice and the broth. But then when it turns out well it is quite rewarding.
You do end up with a lot of food though. I’ve resorted to giving out food to friends and family because otherwise I would be eating the same thing for a whole week.
In Antwerp we have this “Chinese street” close to the Central Station which is ideal for sourcing ingredients.
I also found a nice local African shop, where I’ve sourced spices that were otherwise hard to find in my typical supermarket (den “Delhaize”). Best of all it is quite cheap.
Containers and labelling are quite important, especially for spices. I’ve bought so many plastic boxes to store things but I still feel like I run out of containers often.
This shows some of the stuff I got today. The rice paper is meant to make some spring rolls. The nori sheets are meant for an experiment to make some ramen. The celery and the spring onions are for the ramen as well.
It might sound stupid but every time you try something new, you cross a new boundary in skill levels. First a piece of ginger is this semi-exotic object and 6 months later you’re like – how can you not have a piece of ginger on hand at all times?
My latest experiment is this 1,5kg of beef meat I just bought in a local butcher shop (€8). In the supermarket I’d probably pay 4 euros for the best part of this which I can just cut off now. Then I have some remainders and I can make a broth from the bones.
As my last film of January I saw The Shape of Water. This is a fantastic movie that is just pure cinema. Some call it a fairytale, some talk about it being a metaphor for the “increasing modern-day non-acceptance of people outside the norm”.
Honestly, what I see is Guillermo Del Toro doing what he did in Pan’s Labyrinth, but better. The Shape of Water fuses the supernatural with a realistic environment and a great story. It passed the six laugh test easily and the small cinema room was often filled with oohs and ahs. I had a great time watching this. (★★★)
I was in a screening of The Post. The average age in the room must’ve been higher than 50… probably the people who were alive when all of this happened.
This film has gotten some good reviews but it didn’t really do it for me. I didn’t connect with the film at all. There was good imagery and a great performance from Meryl Streep but ultimately it all felt a little flat and overproduced. (★1/2.)
Edit: in Kermode’s podcast, they mentioned the “Spielberg light”; this must’ve been the bloomy cinematic effect that bothered me.
Maybe it’s because I am now a recent convert to the Church, or maybe it’s because I am looking for excuses to get my steps per day up, but I’ve been going to the cinema so often, it’s a bit crazy.
Just today, I cancelled my Netflix account in a vow to be more picky in what “content I choose to consume”. It’s not that Netflix is bad. I honestly enjoyed a lot of stuff that is on Netflix last year — just look at this list — but Netflix also makes it way too easy to keep watching trashy shows with zero value.
But let’s move on to what I really wanted to write about, my recent moviegoing.
Yesterday I saw The Florida Project (★★★1/2). I was impressed by the story constantly wavering from following 6-year old Mooney on her adventures to following her mother’s. I don’t want to spoil anything, if you like great photography I would just see this film without knowing too much about it.
A week ago I saw Jumanji: Welcome to the Jungle (★1/2). This is just a fun well-made comedy/feelgood movie, nothing more, nothing less. I wouldn’t specifically go to the cinemas for this one, but this is actually a decent movie.
Maybe it is also time to explain the star rating system I use, because it can confuse some people.
★★★★★
This is reserved for only a handful of movies in the world. For a film to receive five stars is very rare. Movies that get five stars have some kind of historic value in filmmaking. They might change filmmaking itself.
★★★★
This is reserved for just one movie a year, two would make a very good movie year. This is a must-see.
★★★
This is a good movie, I heartily recommend it.
★★
This is a good movie, I can recommend it, but it has some downsides
★
This is a mediocre movie, I wouldn’t necessarily recommend it, but it does have some aspect that makes it interesting, or something to watch, particularly if you are interested in that one aspect
1/2 stars
Same as above but you’d have to be super passionate about that one aspect
A few days I subscribed to the Kermode podcast. I listened to one very long episode and I already love it.
They were talking about Three Billboards Outside Ebbing, Missouri (★★★), and even interviewed the director Martin McDonagh. Last night I saw this film and I must say it was very, very good.
It even surpassed Molly’s Game (another recent opener) (★★) if I would have to make a ranking. This film is Aaron Sorkin’s directorial debut. You might know Aaron Sorkin as the screenwriter behind various fantastic works like The Newsroom, A Few Good Men and The Social Network.
I’ve also seen All The Money in the World (★★), the latest Ridley Scott film. You might have heard about a frantic reshoot after it was revealed what Kevin Spacey had done; the reshoot seemingly didn’t affect this film at all. I thought the performances were strong and this movie had me entertained throughout.
A new year, and a bit of difficulties in business led me to a lot of thinking.
This post doesn’t have a lot of structure, but I hope the combined thoughts make some sense and give you something to think about as well.
In my day job, I am a UI designer, and most of my work is concentrated on designing applications.
I’ve been tremendously focussed on trying to do projects where the applications that we design actually do something useful.
And I notice that I am the happiest when I see useful working software that does a good job.
What makes me unhappy is shallow work that doesn’t offer an actual benefit.
When the winner at the local tech startup competition is an app that lets you send messages to the future, or yet another food delivery startup, I think that’s a bit sad.
When people get sent to New York with government money on a “startup mission” with a super flawed business concept I can’t help but think that some people are just surfing this startup wave as some kind of lifestyle.
What is “useful software” then?
For example, a few years ago I worked on ticketing software, and when I order a concert ticket using that system and it works like I wanted it to, that makes me happy.
And then when I enter the concert hall, and the security people swiftly scan my ticket using a piece of software I helped create, that makes me happy as well.
Some time ago I also worked on a software project to organise TV shows, and now I saw that it was being used for Music for Life (1) to make sure everything would go smoothly.
We only worked a few weeks on this project with Mono, but I can see that what is there now is a massive evolution of what we worked on. I think that’s great.
(Obviously this is group work I can only take a bit of credit for.)
I think people are always looking for the next big thing, but in my opinion, the next best thing is a target that doesn’t exist.
The only thing you can do is to improve the current situation.
In design, we say over and over that the process is all about iteration.
When you iterate, you hopefully improve something, and ideally you elevate the starting point that someone else can build upon.
When you create a website, you are standing on the shoulders of giants.
The fact that you can create a drop shadow with a single line of code is the result of combined years of work by many people (2).
A drop shadow might be a silly example, but the point is: you need to try to build something that you can build upon.
For example, when I look at Hidde’s work, I see someone who is building things that follow that philosophy.
My work is building and designing software, but in this process, we don’t just make decisions about drop shadows.
We also make decisions about what it is that we build, why it should exist, and what it ultimately does.
When we discuss features, how to move around data, whether a user should be allowed to do X, Y or Z, we are essentially focussed on very human things.
What if the user wants to switch to another service? Do we lock down this data? Do we provide an export function?
Do we allow someone to delete their account?
Both questions should, in my opinion, obviously be answered with a resounding yes.
But I have had these discussion so many times and for a lot of people, this is not such an obvious yes.
So, where do we go from here?
I think we need to be careful that what we build is not a shallow solution for short-term gains.
We need to embrace open standards, even more than we already are doing.
We need to take control over our own data.
And if we give someone data, we need to hold them responsible when they don’t secure our data properly.
We can’t allow corporations to build big databases about our behavior that they will use for commercial purposes.
Think twice before you upload all of your photos to a cloud service. Do you really want BigCorp X to build a data profile on your kid already?
Every image gets analyzed and you can bet that at some point somebody will use it for malicious purposes. And that somebody will justify that because they’re making money with it and they need to put bread on the table.
So why not prevent the situation in the first place?
Data leaks easily, and like we discovered this week, 5 lines of Javascript can bring down almost every Intel chip.
Please, when you browse the internet, use an ad blocker and software that helps you prevent tracking (3).
Get your own domain name, and when you sign up to something, use a different e-mail address for every service you use.
Get a password management system and use a different password for every service.
Avoid leaning too much on one company for all your online needs (i.e. Google).
When you create an event for your friends, maybe think twice to do it on Facebook. Not everybody has or wants a Facebook account.
We need to avoid locking up our stuff in central, closed databases.
We need to work on keeping computing human.
I don’t know yet what that exactly means, but I hope to figure it out.
The future is not a thousand apps on your phone, posting a fake version of yourself on the internet, or immersing yourself in virtual reality.
(Don’t get me wrong, some parts of VR are awesome, but something has to be said about its escapist nature)
Maybe the future is that you just have this device that helps you augment your thoughts, and that you can also put down when you’re having diner with your family.
So, maybe that future is already here, and we just need to iterate on it.
We have already created a lot of things that are great and an obvious addition to life.
Software like Excel is awesome, if you look at what it allows you to do vs. what you had to do before computers. The concept has evolved to a shared spreadsheet that is always in sync (4).
I was complaining about the lack of a proper filesystem for iOS on Twitter, but I should be happy that I have this computer in my pocket that can do an amazing number of things.
And I am pretty sure Apple will iterate on the Files app (as they have done already) and that in the end it will be worthy enough to stand next to macOS’s finder.
They are a worthwhile addition to our lives but we need to realize that they are just this tool, that we should be able to live without.
I saw someone complaining on Twitter 3 times about Deliveroo not working like he was used to.
And I all I can think is: you know, maybe you can learn to cook? So the internet doesn’t have to be your nanny?
In 2018 I want to put down whatever gizmo I have at the moment a bit more, and live in the moment. And can everyone please stop filming half the show with their smartphone when I go to a concert? Seriously.
Over the years, I keep coming to the same conclusion.
I want things to be better.
And what’s better is very personal, but I can idenfity with Merlin Mann’s Better:
To be honest, I don’t have a specific agenda for what I want to do all that differently, apart from what I’m already trying to do every day:
* identify and destroy small-return bullshit;
* shut off anything that’s noisier than it is useful;
* make brutally fast decisions about what I don’t need to be doing;
* avoid anything that feels like fake sincerity (esp. where it may touch money);
* demand personal focus on making good things;
* put a handful of real people near the center of everything.
This was written 8 years ago, and it still rings true.
Originally, we wanted to name Mono “Augment”, where the “Augment” part would be about making something better.
It didn’t exactly roll of the tongue so we went with Mono, but that’s what my still my mission.
Make things better.
—
(1) This is a big solidarity event that happens every year in Belgium where people collect money for charities
(2) I remember drawing 9 elaborate PNGs in Photoshop to do the same work, and then creating an elaborate HTML table to position those. Ugh.
(3) I would say Ghostery is a good starting point
(4) Google Spreadsheets, but also Office 365, and a bunch of competitors
I made a side project, showing off my favorite things released in 2017.
If you don’t care about the details and/or technicalities and just want to see the result, check out the project here.
Intro
I love end of year lists. It’s always nice to have a backlog of great movies to watch or albums that you should really check out.
And every year around this time, I suddenly find myself with some free time. I want to take a break and stop working on commercial work, but on the other hand I can’t help to want to catch up with what I wanted to learn this year.
A small side project seemed like the ideal way I could learn something new.
I worked on this project on and off during the Christmas break. In this blog post you’ll find some of the details.
Concept
In the beginning I came up with a concept: do a basic end of year listing. The idea was to list albums worth listening to, movies worth watching and games worth playing. In the end the concept evolved a bit to include more, but this was the start.
Now, just to list my favorites in a “static” way wouldn’t be very challenging — I mean, I could make a Google document and then be done with it — so I wanted to incorporate some technical challenges into it.
Challenge 1: Use CSS Grid in the design
I knew I wanted to use CSS grid, because I didn’t get enough of a chance to practice with it during the year.
In terms of “research” I watched Miriam Suzanne (of Susy fame) talk about grid systems and read Jonathan Snook’s post on laying out a calendar using Grid.
I also consulted this auto-fill vs. auto-fit video by Mr. Snook again. After finishing my own code I saw this post by Sara Soueidan on the same topic.
If you look at possible layouts, the most obvious layout for showing off albums for instance is a grid:
I took my layout ideas to Figma to figure out what to do:
Using Figma to figure out a good layout
After this I wrote some code in Codepen to figure out how it would work.
Using Codepen to check out what’s technically possible.
If you are interested in the code, the source is here.
This was written using Pug, my favorite templating language, and of course, SCSS.
I envisioned a Masonry style grid for the project page, but in the end I decided against that.
There’s tons of CSS grid experiments floating around the web, but a lot of them depend on extra Javascript implementations. Thanks, but no thanks. I have been down that rabbit hole and it’s not pretty.
I also scrapped the idea of mixing the different types of content with each other, so in the end, I ended up with something that looks like the initial sketch:
Challenge 2: use JSON for the data
I knew I wanted to use some kind of structured data. JSON seemed like the perfect candidate.
After a failed attempt in coda.io, I created a table in Airtable.
Figure: the albums table in its infancy.
Airtable is a really cool app that allows you to create structured data. After creation, you can get the data out of an Airtable document (called a “base”), because every Airtable document comes with its own API documentation, generated from the data itself.
I wrote a small shell script to get the data from Airtable as JSON:
After I had the JSON, I rendered the result using the Pug template language in a Bedrock project.
Since I am not really a Javascript expert, I spent some time trying to figure out how to get the URL of the image. It’s an object in an object, which makes it a bit more difficult.
Eventually I found it, but I am not 100% happy with the code (it’s on line 10). If anyone has a suggestion I would welcome it.
table
tr
th Image
th Name
th Release
each item in contentData.movies.records
tr
td
if item.fields.image
img(width="200" src=item.fields.image[Object.keys(item.fields.image)[0]].url)
td #{item.fields.name}
td #{item.fields.releaseDate}
In the final result, the markup changed to be something else than a table.
Parsing the data
As I mentioned, to generate the site, I used Bedrock.
Bedrock is a static site generator that we use daily at Mono to build application prototypes. But if you strip it down a bit, it’s actually also a really good static website generator.
Technically, Bedrock consists of an Express.js node server and a series of Gulp-based tasks to generate a static site.
I “hacked” Bedrock core to be able to use Moment.js to parse dates to my preferred format.
I also used Marked to be able to parse markdown. The reviews sometimes contain multi paragraph content, or formatting like italics & bold. The easiest way to handle this is to write the markdown directly into the Airtable database.
(This makes me think we could easily use AirTable as a CMS, but that’s another story…)
It’s nice to be able to use these off-the-shelf implementations for things that are tricky to do right. This is a major +1 for working in a Node environment (especially for novice programmers like me!).
Data and image optimization
I noticed some of the images were quite heavy to load, so I optimized some of the images by hand in Photoshop, and then re-uploaded them to Airtable. I kept the source images in Airtable as well.
To keep the data in Airtable is the easiest solution, but it does some come with some limitations, like the manual re-upload.
I also had to manually resize a ton of images in Photoshop to bring the filesize down. In a classic CMS environment (i.e. WordPress) this could be automated, but in this case I have no idea how I would efficiently automate it.
Cross-referencing tables
At some point, I created a table that cross-referenced another table in Airtable. When you do this, Airtable generates id’s that can be cross-referenced in the relevant JSON files.
From line 18 on, you can see I am first checking if there are any cross-references, then looping through them.
each item in contentData.youtube.records
.cover
if item.fields.name
.cover-image
+image(item)
.cover-info
h2.cover-heading
| #{item.fields.name}
ul.c-horizontal-list
each subitem in item.fields.categories
li
.c-tag #{subitem}
li Subscribers: #{item.fields.subscriberCount}
.cover-review
//- Here we are using marked to render markdown
div!= marked(item.fields.review)
//- Video recommendations
if item.fields.Videorecs
p.caps Video recommendations
ul.styled
//- We are cross referencing a table here
// - First we loop through the relevant items
each subItem in item.fields.Videorecs
each subSubItem in contentData.videorecs.records
// - We check for existence along the way
if subItem == subSubItem.id
// - And then render our item
li: a(href=subSubItem.fields.url)=subSubItem.fields.name
Coding this required some trial and error, and I am pretty sure this can be written in a much more legible way. I suppose this is the JSON equivalent of combining tables with something left a LEFT JOIN, but honestly, I am such a SQL/database noob that I’m not even sure if that’s true.
Summing up my feelings when doing this kind of work:
Challenge 3: use a new app — Pixelmator Pro — to edit the images (#fail)
Figure: trying to make something decent with Pixelmator Pro
Last month, Pixelmator Pro came out. Whenever a new Mac app that looks well-designed comes out, I just buy it, mostly for research reasons. I had this one lying around but didn’t use it yet.
I’ve been meaning to get rid of my Adobe Creative Cloud license, looking at alternatives. I don’t really want to pay €600 a year for software that I barely use.
In 2017, I mostly used Figma, and a bit of Sketch, and a litttttle bit of Photoshop and Illustrator.
Potentially Pixelmator Pro was the answer for my bitmap editing needs.
I tried to create some basic things in Pixelmator but I kept hitting the limits of the program. It is obviously made for photo editing and not for my intended purpose, which is a composite layout.
The feature that I missed most was “clipping mask” from Photoshop. What I was also worried about was what’s called “smart objects” in Photoshop. If I resize a bitmap, I don’t want to have any quality loss in relationship to its original image.
In the end I switched back to Photoshop for any editing. The truth is that it’s very hard to counter 10 years of Photoshop habits and all of the little little nice things that have landed in the application over the years.
People might look at Photoshop as a bloated beast but in my opinion it’s still hands down the best image editing app in the world.
Challenge 4: Make it look good
Good visual design comes from a few different things, but mostly it’s the right combination between layout, type and colour.
Fonts
Starting with type, I figured I already licenses for several great looking fonts, like Atlas from Commercial Type:
And also Untitled Sans from Klim Type Foundry:
The problem here is that I don’t actually have their equivalent web font licenses, and I am not willing to shell out the $300+ this will cost for a simple side project.
Since I do pay for Adobe Creative Cloud, I could use Typekit for my fonts (knowing that the design will not be intact when I ever stop paying ☹️)
An alternative was to use an open source font, but this is the solution I’ve been using all year, and things are getting a bit boring (at some point I wanted to write an essay called “Tired of Roboto”).
I experimented with Google Fonts, because it was the easiest to implement quickly. But honestly I am not a fan of putting Google’s code on every site I build. Google is already big enough, and font import code is the equivalent of a tracker.
So, maybe poorly so, in the end I decided to match the typography of this site — johanronsse.be — and it’s just good ol’ Helvetica (Neue).
One thing I was wondering about, is when you want to use the medium weight of a font, but the bold weight if that font doesn’t exist locally (and thus the fallback font is loaded). I am not sure if this can be done, if anyone has any tips, let me know.
Colour
At some point, I changed the overall colour scheme to be white on black instead of black on white. I noticed the visuals looked much better with a black background, so I stuck with that experiment. I didn’t specifically bother to do anything else related to colour.
In general, as a designer, I am super uninterested in colour (Mono is not accidental), unless it can actually improve/enhance the look based on its content.
One example is the design of rdio (RIP), where the album art gets blurred for added “atmosphere”.
This effect can work but this can also go horribly wrong. In iOS, this effect is used quite a lot, but if you take a close look at the gradient images created in the process they’re only pretty in some cases. At some point time I dubbed this effect “rainbow puke”.
So in the end, I decided to do nothing, and just work with a black background. I spiced up the homepage with a bit of a topographic background image to make it look more interesting, since this page has the least amount of other content.
Maybe sometimes restraint is the best thing.
Animation
I experimented with tilt.js and at some point I even had some kind of glitchy text for the sote’s logo in the code, but I removed these.
My feeling is that if an animation is just an effect, what’s the point? These 2 experiments also added to rendering time, and sometimes created layout bugs. I didn’t want to bother fixing these, so I scrapped both.
Again, a bit of restraint. If it’s not objectively better, what is the point?
Layout
When I was sketching, I felt like this kind of layout would work for showing off images from movies, games and TV series:
After a few iterations I ended up with something like this:
I had some ideas to evolve it by showing more images for every movie, but I found it difficult to source the right images in the same resolutions. In the end I just ran out of time as well.
Side thoughts: content first?
At some point during the process, I had working lists of series, albums, games etc… basically the content was just an image showing off the particular item, its name and its release date.
I felt this was a bit lifeless… visitors would probably wonder why a particular item was the list? To counter this, and give it a bit more life, I started writing short reviews/comments for each of the items.
I also created a homepage to explain what the project is and to lead people into it with the right expectations.
Looking back, a project like this should start from the content first. Now it started as a technical exercise and I added the content later on.
Challenge 5: Make it a progressive web app (didn’t do it)
During the year I saw lots of talk about progressive web apps. I researched making this a progressive web app, but because the content is quite static, I didn’t see any advantages to it, and didn’t do it.
Something for another project next year!
Final thoughts
In the past, I approached this kind of project as a manual graphic design exercise. I would go into Photoshop and design the individual pages. This was a lot of fun but the approach would break down when you wanted to make things responsive.
This time, I’ve approached the design from a more technical standpoint, where I had a database of items that I could get info from easily, and I designed almost everything in the browser.
New techniques like CSS grid make things a lot easier, and knowing how to loop over (any?) JSON data is a powerful tool in my toolset. However, I think things could look better in general, but this wasn’t specifically my focus for this project.
I am also happy with a reusable data format. Making a similar website next year will be a lot easier!
It recently entered beta, with a monthly $25 fee to test the app. At first this move felt weird to me, but I know how hard independent software development is, so I understand this decision.
Subform was announced as a Kickstarter project in 2016 and got about $112k in backing. It has a very interesting premise, where it tries to fight the standard conceptions of what a UI design tool should be. Instead of putting rectangles and text boxes in the correct spots, you use alignment tools on parent groups to basically put things into place.
In general, when you’re designing a UI, there’s a certain point when changing something becomes quite the daunting task. Depending on your tools, project setup and team expectations of “file cleanliness” (i.e. proper layer naming) making a seemingly small change can sometimes take hours.
The co-creator of Subform wrote about how pushing pixels is quite miserable here. His point is that the computer should do that pixel pushing instead.
In a way, it’s a lot like using a UI to do something like working with Flexbox and CSS grid; or like setting up constraints in Xcode.
I think there’s a lot of work to be done to make it handier to design a UI with Subform, because I had a lot of trouble doing something reasonably simple. I do think that once everything works, you get all the concepts, you can work really fast.
Doing something new will always require learning something new as well, so I am curious where this will go.
*After a long hiatus, I announced a second meetup about UI design tooling. It takes place January 10th in Antwerp. We are still looking for a great location. If you have something to say about UI design tools, please send me an e-mail – I want this to be a community event with input from everyone. RVSP here!
For my job, I often have to share my screen for lengthy calls.
As my setup, I use an LG 27″ UD58 4K screen and a 2015 Macbook Pro.
Now, this screen is not exactly ideal to show designs.
The people on the receiving end might be using a 15″ laptops, so the image they receive will be too small.
Even worse, because of the massive resolution, screen sharing is processor intensive and things might be choppy because you have to upload a massive image as well.
What I would sometimes do to fix these issues is to detach my screen and present from my laptop only specifically for the call, but since this is an everyday occurrence, this is quite annoying.
I found a solution in setting a shortcut to change my resolution using SwitchResX. With this small tool I set a shortcut so that ⌘+F6 becomes a switch to change from the native 3840×2160 resolution to a more streamable 1080p. Another shortcut brings me back to my native resolution.
