“Mag ik uw identiteitskaart voor de garantie?”

October 16, 2018

Als ik een game in de Mediamarkt ga halen vragen ze aan de kassa of ze “mijn identiteitskaart mogen voor de garantie”.

Ik zie de mensen voor mij dan vaak schaapachtig hun kaart afgeven. Mediamarkt zal er wel bij varen, bij een hoop adresinformatie van hun klanten.

Volgens de Europese garantiewetgeving lijkt het me zeker geen verplichting om je eID te laten inlezen bij een aankoop. Een bewijs van aankoop zou moeten volstaan, lijkt mij.

Dat inlezen is de bedoeling van de eID écht helemaal voorbij. Ik snap niet dat dit nog mag of nog niet stopgezet is in GDPR-tijden.

pug-textmate2-bundle

October 16, 2018

From the README:

If you are one of the holdouts who is still using Textmate and codes in Pug, you will find that there are a lot of outdated bundles out there. I use this one which provides the correct syntax highlighting.

It’s not perfect but it’s the best I have. It’s a modified version of an original Jade bundle. I figured I would share on Github.

Weg met de betutteling

October 14, 2018

Ik kom het keer op keer tegen. De ping-pong tafel. De PS4 op kantoor.

Referentie: Artikel in Net magazine over een studio in Belfast

Ik snap het niet. Waar dienen die dingen eigenlijk voor? Om op 16u op vrijdag een rondje ping pong te spelen (en lawaai te maken voor de rest)? Om tussen de middag te gaan gamen (en nog meer voor een scherm te zitten?)?

In het nieuwe boek van Basecamp gaat het erover dat je collega’s niet je familie zijn, en ik vind dit een heel correcte statement. Natuurlijk kan je vrienden worden met je collega’s. Natuurlijk kan je als je elkaar lange tijd kent belangrijk voor elkaar worden. We zijn allemaal mensen.

Maar waarom is er in het bedrijfsleven zo’n focus op van die zij-voordelen die eigenlijk geen echte voordelen zijn? Kan je in voorgenoemd voorbeeld niet beter om 16u aan je weekend beginnen? Kan je niet beter een babbeltje doen met je collega’s tijdens de lunchpauze als het doel is elkaar beter te leren kennen?

Er wordt vaak gebabbeld over Google als summum van voordelen op het werk. Gratis eten, massages en andere zaken. Maar zijn dit niet gewoon manieren om mensen zoveel mogelijk te binden aan hun werk? Als je bedrijf je strijk doet, je ophaalt met de Googlebus en je avondeten voorziet, wat moet je dan eigenlijk nog zelf doen?

Toen ik in Japan woonde was ik verbaasd om te horen dat in veel gevallen je woning betaald wordt door je werkgever. Er is zo helemaal geen scheiding meer tussen privé en werk. Wil je ontslag nemen, wil je een risico nemen? Je kan het niet meer want er staat te veel op het spel. Je moet dan verhuizen, bij uitbreiding moeten je kinderen naar een andere school, etc. Dit is geen goede situatie.

Ik pleit voor een duidelijke scheiding tussen werk en privé.

Ik pleit ook voor minder betutteling. Volwassen mensen kunnen hun eigen keuzes maken.

Waarom moet ik als werkgever bonnetjes geven waar mensen eten en ecologische lampen mee kunnen gaan kopen? Waarom moet ik mij bezig houden met de mobiliteit van mijn werknemers?

Ik begrijp dat de overheid een groen voorbeeld wil geven, maar als ze dat echt zouden menen, zouden salariswagens al lang afgeschaft zijn. Ecocheques zijn een lachertje, je kan er de meest vervuilende producten zoals TVs mee kopen.

En maaltijdcheques is gewoon een soort instandhouding van Sodexo en EdenRed en hebben geen enkele bestaansreden. Iedereen moet eten kopen. Schaf het af en verlaag de belastingen rechtstreeks. Verwelkom de administratieve vereenvoudiging.

Ik wil bezig zijn met het onderwerp van mijn bedrijf, namelijk de best mogelijke software ontwerpen.

Laat iedereen toch eens wat meer voor zichzelf denken.

Weg met de betutteling.

Android thoughts

October 13, 2018

I am a casual user of Android. I only use Android every once in a while, such as now, while my iPhone is in repair. I’ve owned several Android Phones over the years, mostly Google ones.

I choose to use Android sometimes, just to stay up to date with what is happening, so I can design better apps.

But every time I go to the Android world I get such a bad impression.

I am using a Google Pixel which is supposed to be a flagship phone.

I charged it a couple of days ago and then didn’t touch it until today. The battery is completely drained. I suppose this is software related, because I’ve experienced similar things with an Android tablet I have and every Android phone I have had in the past.

If you don’t touch the device for a few days, it’s just dead. Sometimes I don’t use my iPad for a while. If I come back to it, it usually still has some battery left – at least enough to use it from the charger, if not more.

Now the Google Pixel is charging and it gets super hot. I really don’t get it. This was a €700+ phone that was supposed to the top of the bill in the Android world. It’s not.

And I only bought after returning the horrible LG G6 which was so bad that I returned it after a single day.

The battery drain, the overheating. I’ve never experienced this with iPhones.

The Figma API (for the rest of us)

September 23, 2018

As a personal challenge, I tried to do do a few things with the Figma API.

There were 3 main reasons to do so:

  1. I am interested in design automation. I feel like we are sometimes doing a lot of non-work in design. How can we automate repeat tasks so we can work on the actual work? (I love Jon Gold‘s work on this topic)
  2. I feel like my Javascript skills have been getting worse instead of better. I can’t recall the last time I even wrote a simple script myself, so it’s time to step up my Javascript game.
  3. I am currently giving Figma workshops (the first one was just this week) and I feel like I should know everything there is to know about Figma. I didn’t know that much about the API and now I feel like I know a thing or two.
    • There will be public workshops later this year – possibly next year. If you are interested get in touch!

Since it was mostly for work I can’t really share too much of what I did, but the general idea is that it’s about design automation, where I am using the Figma API to bring things from the design side to the code side automatically.

Here’s a small example, where I coded automatic listings of color palettes generated from a Figma file. In Figma the artboard would look like this:

And then on the website it would look like this:

These are colors from a wireframe by the way, so not really a final design.

I am also working on a way to get SVG files in your designs without needing to manually export them (as described by Github). This is harder than I thought, and will need some more time.

The goal of this post is to summarize some of the resources I used to learn so you don’t have to go looking in every corner of the internet if you want to try something yourself. I would also like it if other people shared some more of their work because this seems like the nichest of topics.

Your first stop if you are interested should probably be the Figma API explorer. I didn’t see it at first, but if you look closely there are input fields on the page in which you can enter some text like your personal access token and a file key. You can then use this page to get example JSON back so you have an idea of the data you will be dealing with. It’s important to note that there are  different API endpoints which give you different types of data.

With the images endpoint you can get images back; with the file one you can get your entire file structure; with the file node one a little part of your file structure.

This becomes important once you start coding because you will notice soon enough that getting an answer back from the API can take quite a while – and as the size of your file grows, the time it takes to pull it in grows as well. This means that in practice you will have to optimize your requests or cache query results if you want to make something that’s fast enough.

The next thing you’re going to want to do is check out the Figma API demo repo, particularly the projector demo. This demo can basically teach you how to pull in images from Figma which should be useful to any design team needing feedback on their work.

In the index.html file of this project we can see some interesting functions which I could understand and adapt to my own project. I also used the progress bar code from this page.

I find this style of Javascript a much simpler way to code than something like the figma-js npm package. But if you are into that kind of advanced JS, whatever floats your boat!

Another thing that really helped me is this Youtube video, where the author filters the JSON data she gets back from the Figma API.

This tutorial led me to wanting to understand Array.prototype.filter() and to have a better understanding about Javascript objects. I went down the rabbit hole with this one and started learning a lot of things.

The biggest learnings for me were Object.entries, flat(), and the aforementioned filter().

For example, I wrote this kind of code to grab simple properties from a document:

// Using file node endpoint
var documentName = Object.entries(apiResponse.nodes).flat()[1].document.name;
var documentWidth = Object.entries(apiResponse.nodes).flat()[1].document.absoluteBoundingBox.width;

And combined it with this kind of code to reduce a big file structure down to a smaller one, which I could then parse to my own structure and render back to the DOM using other code.

// Using files endpoint
// Grab all my pages
var pagesList = Object.entries(apiResponse.nodes).flat()[1].document.children; // Filter my pages to find a specific page
var pagesListFiltered = pagesList.filter( function(item) { return item.name == "Components - Colors" });
// On this specific page, list my swatch group “groups”
var swatchGroups = Object.entries(pagesListFiltered).flat()[1].children.filter( function(item) { return item.name == "Swatch category" }); 

That’s what I have to share for now. I might write some more if there is interest.

Overall, I am quite happy with this. The Figma API is really cool and I think the skills I picked up now will be useful when we are focussing on designing with data (both in the new Sketch 52 and using Bedrock), React components in Framer X and more.

Remove newbie UI from AI/PS

September 8, 2018

You can remove the (slow) newbie-friendly UI in both PS and AI by unchecking “Show The Start Workspace When No Documents Are Open” and chcking the “Use legacy ”File new” interface”. Good stuff 👍.

Figma tutorials

August 22, 2018

I wrote a few Figma tutorials last night. The original plan was to write a small tutorial but I ended up writing this huge thing in different parts. Here’s an organised list of links to the articles:

  • Tutorial 1: Basic organisation
  • Tutorial 2: Style overrides
  • Tutorial 3: Component matching 
  • Tutorial 4: Working with multiple pages and global components (coming soon)
  • Tutorial 5 Drawing tools and organizing components (coming soon)
  • Tutorial 6: Constraints (coming soon)
  • Tutorial 7: Component composition (coming soon)

I published these on Medium because Medium handles image uploads and captions very well. I don’t particularly like their monetisation model but I do find that there is a bigger chance that maybe this content will reach more people by posting there.

Variable fonts are here, and they are awesome

August 19, 2018

Yesterday I bought Flexible typesetting by Tim Brown. This inspired me to do some experiments with variable fonts, which you can find here.

The code behind that website is on Github, so if you are curious, you can check it out here.

I quite like the concept. Having access to so many font variations from a single WOFF2 file under 100kb is extremely powerful. I hope to use this in a real project at some point!

My go-to utilities for macOS

August 15, 2018

Part of what makes the Mac so great is the slew of utility apps to improve your productivity. Here’s a list of my favorites, most of which I have used for many years.

SizeUp is a window manager. I use it to put windows on the left or right half of my screen, or easily maximize them. This is usually the first thing I install on a new Mac.

Alfred is a tool that acts like Apple’s Spotlight: you invoke a hotkey and start typing. However, it does much more than Spotlight. I mainly use it to navigate between folders and quickly find files.

I was sceptical about CleanMyMac at first, but it really does find a lot of unused files on your system and offers to clean them for you in a reliable way. When you find yourself running out of hard drive space, you can also look at the free Disk Inventory X.

CloudApp instantly sends my screenshots to a web server for easy sharing. I also use it to share larger video files, like screencasts, via e-mail. I also find it handy to have an archive of screenshots online. I look at it sometimes and it really is a trip down (design) memory lane.

Talking about screencasts, Screenflow is my favorite screen recording software for the Mac. It’s not exactly a utility but I thought I’d mention it anyway.

Lastly, I use aText to save snippets of text, like my e-mail signature or my preferred way to handle CSS comments. For example, by typing ,sig1 my e-mail signature appears; and if I type ,lorem I get a bunch of lorem ipsum.

Cashless at #boomtown #gf18

July 21, 2018

At work we’ve been doing a bit of research regarding point of sale systems.

Every time I pay in a situation that is a bit different than the usual cash or debit card situation, I try to document it in order to improve the research.

Last night I was at Boomtown at the Gentse Feesten, this is a series of concerts that go on for about a week during the 10 day Ghent city festival that goes on every year.

They have this system where you can go cashless.

It’s supposed to be an improvement over the normal way of doing things (which would be food/drink vouchers) but it’s not.

With these kind of systems things tend to first have to get worse before they get better.

What I mean by this is that the new way of doing things has to mature in order to replace the old way of doing things.

However, I am not sure if this system will ever be better than physical tickets for short-term events.

The old way, in this case, would be to sell food and ticket vouchers which you can then use to pay for your things.

The reason we want vouchers is because when somebody comes up to pay, we want to minimize the payment interaction between the customer and the cashier.

3 beers means 3 drink tickets: easy.

The new cashless system, the interaction is swiping a card, which is easier, especially for large interactions. No need to count 16 vouchers, it’s just a card swipe.

I believe a cashless system can be better, but not for short term events like Boomtown where you go in for a few hours. Instead of going to enjoy the concerts you are now first presented with the task of figuring out how to get a drink.

Because of the way the prices are set up (2.8 euros for a beer, 1 euro for an exchange beaker, 5 euros admin cost to get your remaining money back via a website (!)) you are constantly doing some minor calculus to try and figure out if you can get another beers, whether you need to top up your card etc.

Add in the factor of multiple people buying multiple cards which all look the same and things just get utterly confusing.

I understand the advantage of a cashless system for multiple-day festivals (e.g. Melt in Germany or Tomorrowland in Belgium) but it just doesn’t work for short-term events.

You could argue that Boomtown is a multiple day festival but I think the majority of people go there just once or twice during the Gentse feesten and that means they are confronted with the same problem.

I did enjoy looking at the technology. Here are some vague pictures.

People trying to figure out the system.

My opinion after a few beers

The card itself

The cashier’s point of view

The swipe thingie – notice the Bitcoin balance :)