foobartel Site Feed https://foobartel.com Mon, 15 Jul 2019 00:00:00 +0200 Dato - A Better Menu Bar Clock https://foobartel.com/tilrs/dato tilrs/dato Mon, 15 Jul 2019 00:00:00 +0200 Via Twitter today I found Dato, a new macOS menu bar clock app by Sindre Sorhus. I like its simplicity, with the added bonus of displaying different cities with their respective timezones. Very handy and a little more convenient than the clock widget on the dashboard, which I usually use to look up the time in different places.

Dato is a replacement for the system menu bar clock. By default, it looks exactly the same, but when you click it, you get a small calendar, the current time in various time zones (even with custom names), week number, and more. You can customize what to show in the menu and the menu bar.

Screenshot of the Dato app as it appears when opened on the macOS menubar

For a limited time Dato is available for free on the App Store.

]]>
Eco-Yeah https://foobartel.com/tilrs/eco-yeah tilrs/eco-yeah Mon, 15 Jul 2019 00:00:00 +0200

Bearface is now a senior, and with age comes a tendency to share indoor gifts of the odorous kind. We set up a couple of trays for him and started off with standard litter, but soon learned of a more economical and efficient product that’s also 100% natural.

While there is so much bad, sad and frustrating news in the world and on Twitter, Simon’s post made me smile and is very much on the positive side of things :) Also don’t expect anything technical here ;)

Go and check out Living ecologically, you’ll find an enjoyable read and good things to do.

]]>
On Taking Notes https://foobartel.com/notes/on-taking-notes notes/on-taking-notes Sun, 14 Jul 2019 00:00:00 +0200 Last week Matthias wrote about the importance of writing down ideas immediately. I have to agree, the best way to being able to remember something, is to write it down right away. I have had many thoughts and ideas floating around, but oftentimes when I don’t write them down, I can’t remember or recall them later.

In a follow-up post Matthias now writes about the “The Single Best Way to Take Notes”, why it is important to do so and what he uses himself to write things down. The article also contains a list of apps that came out of a Twitter survey, with responses on which apps other people use.

I personally use iAWriter for most of the things I want to write down. I like it, because I think the writing experience is very good, there’s an app for macOS and iOS available and both of them sync via iCloud. This way I can always have access to my most recent (or any other) files and I can continue writing, so then one day they will turn into something more complete or thought out. Or get deleted.

]]>
Faceless Paintings https://foobartel.com/tilrs/faceless-paintings tilrs/faceless-paintings Thu, 11 Jul 2019 00:00:00 +0200 Via the Dense Discovery newsletter I saw the art of Joseph Lee and I have to say that I really do love these faceless paintings. It’s an amazing style and even though there are no faces, these paintings have a lot of energy and emotion.

Have a look at joeyunlee on Instagram.

]]>
CSS-in-HTML https://foobartel.com/tilrs/css-in-html tilrs/css-in-html Wed, 10 Jul 2019 00:00:00 +0200 Yesterday I came across this tweet and it made me smile. I’m not sure how many developers nowadays are aware of the fact of this having being the everyday reality a long time ago, but as with a lot of things we do, evolution continues to progress. We have come a long way from real <font> tags and I’m happy to have had the full experience of the web over time. Looking back it has been an enjoyable and interesting ride.

Currently my CSP doesn’t allow any external scripts, hence the Twitter embed doesn’t display as it would like to. I’m not sure if I want to change it in the future, hence I’m attaching a screenshot of the aforementioned tweet for your immediate perusal below ;)

Screenshot of tweet saying "Remember CSS-in-HTML" with a code example by @rauchg
Screenshot of tweet saying "Remember CSS-in-HTML" with a code example by @rauchg
]]>
Thinking of “You Got This” https://foobartel.com/tilrs/thinking-of-you-got-this tilrs/thinking-of-you-got-this Mon, 08 Jul 2019 00:00:00 +0200 Over the last few days I have remembered and thought about Jeffrey Zeldman’s article “You Got This” in which he wrote about learning new things and how it can be quite hard, how it’s different to 20 years ago, when we first learned all the things web. I’ve started to learn Vue.js to get a better understanding of what all the talk is about. It’s hard in some ways, especially because some of the concepts are quite different to how I learnt to build for the web. It’s “easy” in some other ways and I really enjoy the process.
I’ve had quite a few moments in which I was about to curse for the rest of the day, but eventually I figured things out and made it work. I do enjoy the process and since this is not the first time, I know how the process usually goes. It’s all about patience and putting time into it. What I’m trying to build is now slowly coming together and I keep thinking “You got this”.

]]>
Resource: Stupid .htaccess Tricks https://foobartel.com/tilrs/stupid-htaccess-tricks tilrs/stupid-htaccess-tricks Fri, 05 Jul 2019 00:00:00 +0200 While I was trying to figure out how I can add different .htaccess directives for different environments, I came across Stupid .htaccess Tricks by Jeff Starr. It’s a pretty old post from 2006 (which these days is almost surprising it’s still there!), but it’s a great resource that contains and explains all kinds of things you can, and might want to do, with your .htaccess file. Definitely one for the bookmarks for that day you wonder how that one thing did work again ;)

]]>
Welcome Brid.gy https://foobartel.com/notes/welcome-brid-gy notes/welcome-brid-gy Wed, 03 Jul 2019 00:00:00 +0200 It’s been a long time in the making—or rather thinking about the making—, but I have finally added Brid.gy to my site. Bridgy pulls in Likes and Mentions from Twitter and displays them below Articles and Notes. I’m not sure if it already works, but in theory it should ;) If you like, or mention a tweet with the article or notes URL in it, your Twitter avatar and type of action should be displayed below. I kinda like surprises, so let’s see what it does.

]]>
On Conference Proposal Rejections https://foobartel.com/notes/conference-proposal-rejections notes/conference-proposal-rejections Tue, 02 Jul 2019 00:00:00 +0200 Last week I received an email that my submitted conference talk proposal has not been accepted. This is always a disappointing moment, since of course everyone would rather be selected than rejected.

Important reminder: There is nothing wrong with getting a rejection email for a conference talk and it should not be the reasons to give up submitting your talk again. And again.

I have received many of these emails over the last few years and at some point you will get used to them and be a little less disappointed ;) What I really liked about this last email was that stye included a list of possible reasons on why my talks hasn’t been selected.

  • it did not perfectly fit in We Love Speed’s orientation: feedback and Web Performance;
  • it was only technical, and the jury also had the opportunity to involve a speaker with a feedback to back-up their recommendations;
  • it was close to a topic already discussed last year or another proposal that the jury preferred;
  • the jury had to make financial choices (especially regarding people from outside Europe);
  • finally, it was also necessary to make timing arrangements in order to organise the interventions.

While this list isn’t personal feedback on a specific talk, it’s a good pointer to possible reasons. This way of providing feedback is manageable for organisers, since individual feedback can in some cases be impossible to provide and it is a much better read than receiving a rejection email without any further background.

Well done, We ♥️ Speed team!

It would be great to see more conferences do similar things. Yet, even providing feedback like this, still needs to be well thought through. Otherwise those reasons, might turn into the list of “default rejection reasons”. Simply copy and then paste. Unfortunately such a list wouldn’t be authentic, useful, honest and transparent after all.

]]>
Undoing GIT https://foobartel.com/tilrs/undoing-git tilrs/undoing-git Tue, 25 Jun 2019 00:00:00 +0200 Every once in a while there’s something new to figure out in GIT, and most of the time it’s about fixing something that I screwed up… The other day I came across this handy guide which lists all the different possibilities of undoing what you’ve done in GIT. Definitely a good one to keep in the bookmarks.

]]>
Testing Webmentions https://foobartel.com/tilrs/testing-webmentions tilrs/testing-webmentions Mon, 24 Jun 2019 00:00:00 +0200 I have finally added webmentions to my site, but it’s not yet working correctly all the way. Bear with me while I will send this (and possibly a few more) test that will show up in the feed… To make it a little more worthwhile, I’ll add something useful to each of the tests ;)

The webmentions on this site are, or will be powered by Sebastian’s Kirby 3 plugin sendmentions.

And here’s the test data from Webmention.rocks:

Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 11
Test 12
Test 13
Test 14
Test 15
Test 16
Test 17
Test 18
Test 19
Test 20
Test 21
Test 22
Test 23

Update Link added: https://webmention.rocks/update/1
https://webmention.rocks/update/1/part/2

https://webmention.rocks/update/2

]]>
TikTok, Who’s There? https://foobartel.com/articles/tiktok-whos-there articles/tiktok-whos-there Fri, 21 Jun 2019 00:00:00 +0200 A couple of months ago was the first time I heard about TikTok. It was a lovely day in spring and… Haha, no. Somebody on Twitter asked what this weird teenage girl dance was. Turned out it was something called the “girlfriend challenge”. Since then, these and other videos with a TikTok logo in their upper corner had popped up here and there again, and eventually I was curious enough to have a look and download the app. Sometimes it’s good to look beyond my technology bubble and see what else is new on on the web.

I hardly download any new apps and if so, they are mostly some sort of utility app. Interestingly enough, with TikTok it’s possible to use the app, or rather watch unlimited video clips, without the need to create an account and you’re also not being nagged every other minute to sign up for a “better experience” or so they say oftentimes. That’s actually quite cool and somehow feels a little like it used to be back in the days.
I started using the app and in the beginning there was a lot of lip-sync videos, teenage prank stuff and probably more lip-sync stuff going on, but in between were a few fun and interesting videos.

After my first few days of TikTokking during which I checked once in a while and at some point, I saw more and more of the fun and interesting stuff, away from the teenage pranks and dances.

Considering the app’s origin being in China, it’s very popular all around Asia and it’s gotten pretty big in the US and elsewhere after it got mentioned in a talk show. Either way, the company behind it, ByteDance, is one of the most valuable startups in the world, valued at US$78 billion as of November 2018… I didn’t know and had never heard of them before.

I haven’t used TikTok to post things, but started to watch more frequently, and trust me, there’s some really cool stuff on there. Wether it’s people in rural China showing how they live and cook, factory workers and how they make shoes, recipes and cooking from all over the world, others driving their trucks through the mud in the country side or finding new and amazing travel destinations, this app can be quite fun in some ways.

Here’s a few video links to give you an idea what it‘s all about. The app can get a little addictive at times and you might possibly waste a few hours on it…

What’s even more fun at this time: Currently there is zero (nada, 0, niente) advertising, and mostly everything is user generated content, no ads, no campaigns. Instead, everyone wants to get their 15 minutes of fame and become famous in one way or the other, but much of it is ”real” content. Some more silly than others, but still real. That's only my personal opinion, likely other people will disagree, it’s popular and liked a lot. I find it somehow is the spirit that makes it. And that spirit is an interesting a good one, for sure. It's also quite remarkable how many followers some people have accrued.

At the moment TikTok feels a bit like app.net used to be. Back then, we had a global "timeline" or rather "feed" for what it's called now… Which actually shows us how the perception wanted to be changed. I‘d much prefer "timeline". The chronological content of what I want to see and what I‘m interested in. Everything else is a waste of my time.

A few brands have realised the potential and are starting to be very active, but for now, it somehow reminds me of the good old times when the web, and places like Twitter, were more or maybe rather different fun. The way people are having fun on TikTok is unusual and of most of the comments I’ve seen so far, the majority are “nice”. Opinions yes, but nothing nasty – at least for what I’ve seen.

What I find most amazing about this app is that it allows its users to get a glimpse into the lives of people all over the world, wether in big cities or the most remote corners of the world. That can be quite a thing, because this is the stuff that we never see or hear about. It’s bringing the world together in a new way and I think that’s a huge opportunity. Unfortunately this opportunity will probably soon be sold to greed and advertising in the not so far future…

Until then, I’d recommend to have a look and check it out. Get a glimpse into the world which lies out there and experience the web in a somewhat way as it used to be… Sharing experiences—without the ads we never asked for.

]]>
<hr>: The Thematic Break Element https://foobartel.com/tilrs/the-good-old-hr-tag-has-changed tilrs/the-good-old-hr-tag-has-changed Thu, 20 Jun 2019 00:00:00 +0200 Did you know that the good old <hr> element has changed to a semantic meaning? What we used to know as the “Horizontal Rule” element which was just a line, now is called the “The Thematic Break” element. So instead of a presentational element, <hr> is now a rather semantic element.

Well, I came across it more or less by accident and didn’t know. It must have changed some time ago already, I’m not sure when. It’s also not one of those that you would need or use a lot or look up in the spec…

The HTML <hr> element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

Furthermore:

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

Find more details in <hr>: The Thematic Break (Horizontal Rule element) on MDN.

]]>
Oh The F’ing Rains https://foobartel.com/tilrs/oh-the-fpercentdollaring-rains tilrs/oh-the-fpercentdollaring-rains Wed, 19 Jun 2019 00:00:00 +0200 Today wasn’t my favorite of all the days in the office. I decided to leave a little early and go for a walk home. Great idea to clear your head sometimes. Well, turned out that HK decided that it really needed to pour down… For sure we haven’t had enough rain yet this and the last month.

]]>
Desktop Resizing on macOS https://foobartel.com/tilrs/desktop-resizing-on-macos tilrs/desktop-resizing-on-macos Wed, 19 Jun 2019 00:00:00 +0200 When in macOS Finder, press Cmd-Plus or Cmd-Minus and it’ll let you adjust the size of your Desktop icons. Easy, quick, and especially helpful when you are looking for something and can't see the forest for the trees.

]]>
Introducing TILRS https://foobartel.com/articles/tilrs articles/tilrs Tue, 18 Jun 2019 00:00:00 +0200 The intial inspration to add a “Today I Learned” section to my site came when I saw it on Manuel’s site. Shortly after, Tobias followed suit, because he also liked the idea. For a couple of weeks I did have it on my list to add this new section, but somehow I didn’t get around to do so.

Nevertheless I’ve been thinking about it for some time and the more I thought about “Today I Learned”, I realised that it wasn’t quite what I wanted. Somehow it felt too limited and too constrained. I wanted this new section to be more fun, more flexible and more personal in a way. One evening I realised that what I wanted to do was to write shorter posts and that they could probably all fit into the following categories:

  • A thing I’ve learned;
  • something I remembered;
  • or something that I simply want to share.

Technically I could have done this in the Notes section, but somehow something like “TIL” seemed a better idea. And so I came up with something new.

Today I would like to introduce a new section on my site that I call:

TILRS: “Today I Learned, Remembered or Share

At the moment this new section is also available in my “All Posts Feed” and eventually will get its own.

So far I enjoy TILRS a lot and I hope you will enjoy the new TILRS as much as I do. See ya!

]]>
Image Optimisation Tools https://foobartel.com/tilrs/image-optimization tilrs/image-optimization Tue, 18 Jun 2019 00:00:00 +0200 In case you are looking for a complete guide on image optimisation, head on over and read this guide by Addy Osmani, because the following post is not this guide ;)

I really like ImageOptim. It’s useful, easy and fast to use, and most of the time yields very good results.

Screenshot of optimised images in ImageOptim
Screenshot of optimised images in the ImageOptim app

Another great option to get your images as small as possible is Squoosh. It's not as fast, mostly because I always forget its name ;) I'm kidding, it’s super fast.

Screenshot of the Squoosh website
The Squoosh homepage

The only point I’d have is that it’s a little less convenient if you need to optimise a lot of images. You’ll have to optimise and download all of the images seperately. Depenind on what you ‘re after, the results with Squoosh might be even better than ImageOptim. As always, mileage may vary and I recommend you try them both to see what works best for yourself.

]]>
SVG to PNG Export Automation https://foobartel.com/tilrs/svg-to-png-export-automation tilrs/svg-to-png-export-automation Mon, 17 Jun 2019 00:00:00 +0200 Today I had a short conversation about Apple Keynote on Twitter. One of the drawbacks with Keynote currently is that it's not possible to import SVG files. In some cases this can be quite cumbersome, but instead of converting all your files manually, it can be done by setting up a folder action (macOS only). The folder action then allows you to simply drop images into a folder and they will be automatically converted to PNG format.

The tool behind the Automator folder action wrapper is svgexport which can also be found on NPM. In case you prefer, you can also run svgexport from your command line without the need for folder actions.

Today I remembered that I set this up some time ago and it has saved me a lot of time in the past. I hope it's going to be helpful to you, too.

Update: As Frederic has pointed out, the upcoming macOS 10.15 release might exclude Automator‘s default installation or even remove it completely, the latter which I doubt. Let‘s see.

]]>
Exponential Notation for CSS Property Values https://foobartel.com/tilrs/exponential-notation tilrs/exponential-notation Fri, 14 Jun 2019 00:00:00 +0200 The other day I opened up some SVG files in my text editor to change their color values and I came across a rather strange looking value for opacity.

<style>.svgitem { opacity:3.500000e-02; } </style>

It turns out that this is called “Exponentional Notation” and actually does what you wanted it to do in the first place. ;) If I'm not mistaken, those files have been saved with Adobe Illustrator.

Here's how it works: The E tells you how many places to move the decimal point. A negative number after E says to move the decimal point to the left. A positive number tells you to move the decimal point to the right.

To sum things up: opacity: 3.500000e-02 is exactly the same as opacity: 0.035;. I have to say that I find the latter notation much easier to read, much easier to write and easier to understand. That's probably why we don't use this on a regular basis ;)

I'm not sure why it would appear like this in those files, maybe someone can shed a light on it someday.

]]>
Learning Styles https://foobartel.com/tilrs/learning-styles tilrs/learning-styles Wed, 12 Jun 2019 00:00:00 +0200 Yesterday I replied to a tweet about learning resources for JavaScript. In my reply I said “…depends on your learning style…”.

It reminded me of the different learning styles of people and their different preferences when it comes to consuming new information. I love to read books and can learn by reading very well.

I used to have a lot of discussions with my business partner Jane back in the days, where she would ask me how something works and I’d be replying with “we did have a book on this topic, if you wanna learn it”. Books have always been her worst enemy for learning and she always “hated” me for that ;)

]]>
Layering Objects in Apple Keynote Templates https://foobartel.com/tilrs/layering-objects-in-apple-keynote-templates tilrs/layering-objects-in-apple-keynote-templates Wed, 12 Jun 2019 00:00:00 +0200 A new, but incredibly helpful feature landed in Apple’s Keynote: Allowing layering with your master templates. This is a great new addition and there have been many cases, where in the past I would have wished this to be possible.

When in View -> Edit Master Slides the Format sidebar options display the new checkbox option:

Screenshot of part of the Apple Keynote Appearance Panel
Screenshot: Apple Keynote “Edit Master Slides” Appearance Panel showing “Allow layering”

When you are creating a new slide from your templates, check the new option to allow layering and your normal template will get a new super power.

Screenshot of Apple Keynote in “Edit Master Slides” mode
Apple Keynote in "Edit Master Slides" mode

Adding a new object to your template would have meant that it is to stay on its own layer (z-index, or enter other preferred term), without any chance of changing its layer index with your master template objects. There have been many times where I did recreate parts of the master template to be able to move objects in my desired layer order.

Screenshot of Apple Keynote in “Normal View” mode
Apple Keynote showing a slide based on the master template with a red circle object layered above the master objects

With the new option checked and being able to move objects underneath your master template objects, the hassles of recreating template parts are gone. You can move objects in front of and behind master template objects via the options under the Arrange menu item.

Screenshot of Apple Keynote in “Normal View” mode
Apple Keynote showing a slide based on the master template with a red circle object halfly layered underneath the topmost master object
]]>
Running a Local Server https://foobartel.com/tilrs/running-a-local-server tilrs/running-a-local-server Wed, 12 Jun 2019 00:00:00 +0200 In this tweet Andy Bell mentions that you can run a local Python server with these easy commands:

  1. Open your Terminal
  2. cd to your project directory
  3. Run python -m SimpleHTTPServer
  4. Open your browser to localhost:8000
  5. Done

I didn’t know about the Python way, but another possibility is to run a PHP server, which is a similar process:

  1. Open your Terminal
  2. cd to your project directory
  3. Run php -S localhost:9090
  4. Open your browser to localhost:9090
  5. Done

As Zell points out, you can also run a server as a Node module.

  1. npm install -g http-server (do this once)
  2. Open terminal and type http-server
  3. Go to localhost://8080

As with many things, the best way depends on what you are planning to do. What I like about the first two options, is that you can just run them and do't need to install anything to get going. The last option requires you to download an install the module (globally, hence only once), but still I prefer to not having to do this. Either way, enjoy running your local sites!

]]>
Kirby Snippets in V3 https://foobartel.com/tilrs/kirby-snippets-in-v3 tilrs/kirby-snippets-in-v3 Mon, 10 Jun 2019 00:00:00 +0200 Well, the Kirby snippets in V3 do work a little differently now and do require a variable passed to them, otherwise they won't find the variable and hence not work. It took me a little time to actually think that this could have changed. I wish there was a better reference of changes between the versions though.

Update: This was an impromptu post and since I received feedback it wasn‘t very helpful after all, I'm adding a link to the documentation for passing variables to snippets in Kirby V3.

]]>
Content-Security-Policy and Base 64 Images https://foobartel.com/tilrs/content-security-policy-base-64-images tilrs/content-security-policy-base-64-images Fri, 31 May 2019 00:00:00 +0200 Not too long ago I started to add some additional security headers to the sites I build. I started doing this on my own site to explore new techniques, but then started to like the idea and a little extra security doesn't hurt.

A problem that I have ran into: When using base64 encoded images in your code and you want to add a Content-Security-Policy (CSP), the image-src directive in the header needs a little extra instruction. It's not enough to declare self or unsafe-inline. Instead, for base64-encoded images, its "scheme" must be allowed.

data:image/png;base64,iVBORw0KGgoAAAANSUhEU…

The data: part in the above is called the scheme, which is similar to a better known scheme like https:. By using this scheme, it needs to be declared in the CSP. It's important to notice that the colon needs to be included, otherwise it won't work.

img-src 'self' data:;

The reason for this little awkwardness is that it's otherwise difficult to distinguish between a 'data' scheme, and a host named 'data'. You can find some more details in the spec.

]]>
Of Logos, a Cucumber, and Craftmanship https://foobartel.com/articles/of-logos-a-cucumber-and-craftmanship articles/of-logos-a-cucumber-and-craftmanship Thu, 23 May 2019 00:00:00 +0200 Two weekends ago I met with one of my best friends in Frankfurt. Besides our usual spots, we also went to a few bars, one of them being a new one I had never been to before.

Photo showing a leather jacket with a Drinksmith enamel pin attached
The Drinksmith enamel pin attached to my jacket, which story you are about to read below

Over the last two years I saw myself getting more into gin, always aiming to discover new brands and flavours.

That evening I ordered a Sipsmith tonic and when I ordered it, mentioned that I do like cucumbers. When I got my drink I noticed there was no cucumber, and I thought it might have been forgotten.

I didn’t show much appreciation for this drink (it might have not been the first drink that night). I then asked one of the other bartenders for a cucumber.

The moment the cucumber slid into my drink, I noticed the bartender at the other end of the bar, rolling his eyes. He was the one who made my drink. I mentioned the look to my friend (who also saw it) and continued our conversation. Somehow that look left me thinking. In a way I thought that look was a little rude and it also kept on bothering me. A few minutes later, I decided to ask why I got that look. Simple question, simple answer: The Gin I ordered was a floral gin and with those, you don’t use cucumber. I guess I know nothing, or rather very little about gin, and mixology.

What came after, was a huge realisation for me: I had been the worst client, or in this case, customer. The prototypical nightmare of designers, developers and everyone else who works with clients, I guess. I pulled a “Make my logo bigger” on a proud bar owner and “messed up” my drink. More importantly, I (unintentionally) disrespected his knowledge of the craft and “ruined” his creation.
I cannot count the many times clients have told me that a design needs more space here or there, that a red is too red, or that their logo for sure needs to be bigger, of course.

If needed, my drink would have come with a cucumber.

I apologised, briefly explained my epiphany moment, re-ordered the drink and paid close attention to how it tasted with and without the cucumber. Of course the man, who’s job it is to understand and make cocktails, was correct. I ignored the first drink and happily sipped away on the second thereafter.

A little later, the owner of the bar approached and handed me an enamel pin. We didn’t exchange too many words during that moment, since none were necessary. I very much appreciated his gesture and it makes me happy to know, that he honoured my appreciation for his craft.

If you’re Frankfurt and feel like having a nice drink, have a look and pay DrinkSmith a visit.

]]>
Design, Trust and Limited Creativity https://foobartel.com/articles/design-trust-limited-creativity articles/design-trust-limited-creativity Wed, 22 May 2019 00:00:00 +0200 In this reply to my previous article Tom writes:

“From the early/mid 90's, I gradually shifted from magazine and print layout, from illustration to html, css and programming. I dived deeper and deeper into what makes the web tick, and after more than twenty years in the front-line of conceptualizing, designing, building, and maintaining web sites I think I have a pretty broad AND deep understanding of the cogs and wheels involved.”

This is something that I often think about. The web has changed a lot, but with the amount of things that we have learned over twenty years of working on the web, provides a very solid understanding of many aspects and areas.

“Every time I create something for the web, I have the feeling it is kind of dull. It works, it is lean. It is maintainable, scalable.”

Gaining technical understanding and mastering techniques, is a great skill, but somewhat limited. That’s give and take, because you can put things together in new ways, but it’s still limited. At some point you do know the spec and know how you can use it. The constraint is the technology, but you can put it together in different ways. Yet, the “putting it together” part is creativity.

Creativity has no bounds. You will never be able to fully master it, because there is no limit. You can take it anywhere you want, anytime. There is nothing to master. You can only get better, everytime you try to do so.

[…] is it really that I'm not "allowed" the creative freedom in the bread-and-butter jobs or is it that I think that the truly creative ideas would be wasted anyway on these clients?

It’s probably about trying harder in the first place. Nowadays there’s a certain set of expectations anchored in people’s minds and that might be due to the “free economy” of the web. It’s easy to choose a free template and go with a default design. Why not, it’s free!
Usually there’s a price to pay, even when it’s free. Part of that price is the sameness that’s attached to it, a lack of creativity. It’s easy possible to learn to build a website and create some boxes that looks just like others.

People operate by confirmation of the masses. When most people use a theme that’s free, they likely use a theme that looks the same as many others. When enough people use those themes, in a way this look becomes a de facto standard. The “design” is well known and because of that, it’s trusted. It has to work. Why else would everybody use it?

In a way, we can all blame frameworks. It’s been a great idea and has allowed many people to create and run websites. To learn and practice. It’s made the web a little more accessible to people who might have never had a chance to build a website otherwise. Yet, those frameworks have allowed their sameness to creep in, default designs to be seen for how websites “should” look like today. Even though frameworks were only meant for prototyping and as a starting point to build upon, they have made their mark in terms of design. With a lack of understanding of the craft and its underlying techniques, it’s difficult to change and modify the defaults, to be creative and unique.

And why change in the first place, it’s what everybody uses. It’s tested. It’s trusted. It’s confirmed.
How could the masses be so wrong?

In order to be able to do more creative work, we have to start by being more creative.

]]>
Staying Curious at Beyond Tellerrand 2019 https://foobartel.com/articles/staying-curious-at-beyond-tellerrand-2019 articles/staying-curious-at-beyond-tellerrand-2019 Tue, 21 May 2019 00:00:00 +0200 Call it a tradition. Every year in the month of May, I’m travelling to Germany, mainly to attend the Beyond Tellerrand conference in Duesseldorf. This year has been the eighth year in a row.

The stage at Beyond Tellerrand

Usually I would buy my ticket shortly after they’d been announced, without knowing any of the speakers. This time I somehow only got my ticket very late, despite the fact that it was clear that I’d be going. I also didn’t look into who’d be speaking, but I think it wasn’t as excited as in other years. Little did I know that this year’s conference was about to become (one of) the best of all of them.

Before you read any further: I’m not going to get into the details of each of the talks, which have all been absolutely great! You can read about the talks here, here, here or here (in German). You can watch them online, they are already available on Vimeo. For your convenience, you can find the complete and growing collection of coverage of Beyond Tellerrand 2019 on Colloq.

I’ve been to a fair share of conferences and there are a lot of good ones out there. Many organisers put a lot of effort into getting things right and think ahead, yet Beyond Tellerrand seems to always be that little bit more special. (I’ll try to write another post on more details…) And yes, of course I’m biased, because in a way, this is my “Heimspiel” conference.

Many of the attendees have been going to Beyond Tellerrand for more than a few times. This is a huge factor in what gives this conference the “family feeling” of all conferences. A lot of people have already met and have gotten to know each other better over all these years. While at times, this can seems and feel quite clique-y, everyone looks out for new people, includes them in conversations and introduces them to others.

I’ve said it before and still believe in the same idea: The “real” conference usually takes place around a conference. This is where the magic happens. It happens in conversations, great exchange, meeting old and new people who share experiences and inspiration. And sometimes, the magic happens on and off the stage.

During the conference, two talks stood out for me, because they did deliver something that I didn’t expect. Both Dorobot and David Carson demonstrated and challenged the true nature behind the conference’s name: Think outside the box, dare to see beyond a plate’s edge and take your ideas to places you’ve never thought it would even make sense. There are no bad ideas, there are no silly ideas, it’s only about the right combinations and the right timing. Trust in yourself and dare to be creative, break the rules and see where it will take you.

This is something that I have been thinking about for quite some time, and it’s great to get inspired like this. It’s never easy to push the limits, to be creative and not have doubt. These two talks were good proof that it’s possible to push the limits. With so much sameness on the web these days, I would love to see more people dare, more creative outcomes and results, and more creative thinking, much more often. That’s myself included.

If you ever get the chance to attend a Beyond Tellerrand conference, don’t hesitate, jump in and go.
And until then, keep pushing for your plate’s edges. Stay curious.

The stage at Beyond Tellerand with the screen showing "Thanks"

Fun fact: Somehow Marc Thiele has a good unbelievable connection to the weather gods. No matter the forecast before or after the conference, the conference days are always the most beautiful.

A bright blue Düsseldorf sky with five Beyond Tellerrand flags in the foreground
]]>
Petbarn Identity Redesigned https://foobartel.com/notes/petbarn-identity notes/petbarn-identity Tue, 07 May 2019 00:00:00 +0200 I'm a sucker for good design and besides some smart thinking and great execution, this article, or rather its illustrations, on the brand redesign for Petbarn made me smile a lot. (found via DenseDiscovery)

The website also shows the fun illustrations and just hovering the navigation made me smile again :)

Screenshot of navigation on petbarn.com.au
A screenshot of the navigation on petbarn.com.au, displaying a cute cat illustration next to the sub navigation items of the cat section
]]>
“Ethics” and Ethics and the Right Thing to Do https://foobartel.com/notes/ethics-and-ethics-and-the-right-thing-to-do notes/ethics-and-ethics-and-the-right-thing-to-do Fri, 12 Apr 2019 00:00:00 +0200 This rather long essay by Oliver Reichenstein looks at the meaning of “Ethics” and Ethics in our world of today. Why do we sometimes need to put it in quotes? What's the right thing to do, anyways?

There is a connection between good and beautiful. Theoretically, this brings to Plato’s ethics. It claims that beauty, justice, and goodness are connected. A strong point of view. Plato is considered to be an enemy of the senses. But if you study Platonic ethics – beauty, goodness, and justice – they’re one and the same idea, the highest idea. Designers have an affinity to see beauty, to see beauty in goodness, beauty in justice.

While this has been true for Plato and might still be for some, it hasn’t been part of the idea of capitalism, which bred greed, which more often than not turns into evil.

Read the full piece here: “Ethics” and Ethics

]]>
Faster Cursor Movement in Terminal https://foobartel.com/notes/faster-cursor-movement-in-terminal notes/faster-cursor-movement-in-terminal Wed, 20 Feb 2019 00:00:00 +0100 Sometimes when typing a long command or a commit message in Terminal, you might notice a typo, or want to add or change something. Very likely, you’d use the left-arrow key to move the cursor to the desired position, which sometimes can be a little tedious.

Luckily there’s an easier way: Option-click your Terminal prompt line at the position where you want to change or insert text. Your cursor will then blink right where you wanted it and you can start typing away.

Another way to speed things up is by using the option (alt) modifier key in combination with the arrow-keys (⌥→, ⌥←), which lets you jump the line word by word, which is also a little quicker.

]]>
Stopping the Dark Patterns of Booking Sites https://foobartel.com/articles/stopping-dark-patterns-of-booking-sites articles/stopping-dark-patterns-of-booking-sites Tue, 19 Feb 2019 00:00:00 +0100 In one part of my latest talk “The Benefits of Ethical Design” I discuss so-called dark patterns and one example is about hotel booking sites. I never liked the approach of what I call pressure-triggers. Even though they might work for those who use them, they do seem stupid in one way and quite constructed in another.

Screenshot of part of a booking site displaying a hotel deal
A hotel property listing displaying prices and pressure triggers on a booking site

Each time after I have given the talk, conference attendees approached me to further speak about it. To my surprise, some thanked me that I had recognised and included these patterns in the talk, because they suffer from an anxiety disorder and can very much relate. The important point of this section of the talk concerning ethics is that people who suffer from anxiety disorders can feel a lot of pressure. They might have a difficult time using these sites, which could result in a panic attack. For me - and very likely for most of us - such patterns are annoying. But it has been very insightful and important to hear this feedback which helped me better understand the effects and what these pattern can cause. Considering that every site should be usable by everyone, this indeed is an ethical no-go.

In New York another attendee approached me and “confessed” that he works for such a booking site. He was quite surprised to hear what effect these patterns can have and wanted to bring it up and discuss it with his team. (Unfortunately we didn’t exchange contacts, so if you are reading this, please get in touch and let me know how it went.)

Yesterday a friend sent me this article, in which this topic - for a different reason - seems to now become a problem for some. Regulators in the UK have identified that these practices could prevent customers finding the best deals.

The Competition and Markets Authority is clamping down on websites including Expedia, Booking.com and Hotels.com over practices that give a false impression of a hotel’s popularity, with claims such as “one room left at this price” and “booked four times in the last 24 hours”.
[…]
The websites have a deadline of 1 September to make the changes or face further action. Not all firms engaged in all of the dubious practices but all have agreed to abide by all the principles set out by the CMA.

It’s good to see that the CMA is looking into this, but unfortunately there is no mention of accessibility. Good deals are nice, but it would be important to also recognize these patterns as dark from an accessibility point of view, since they render these sites unusable for some users.

I guess time will tell if other countries will follow suit and make this a new “standard” or if the companies will roll this out globally. As with many things, the progress likely will be baby steps forward.

You can find the full article on The Guardian.

]]>
Better Terminal Navigation with Markers https://foobartel.com/articles/better-terminal-navigation-with-markers articles/better-terminal-navigation-with-markers Fri, 15 Feb 2019 00:00:00 +0100 A quick trick to jump to your previous or next issued commands or prompt lines in the Terminal app, in case you need to move around between long outputs:

Check “Edit->Marks->Automatically Mark Prompt Lines” on the Manu bar and from then on every new Terminal window will allow you to easily jump back and forth between prompts. Once this setting is turned on, you’ll see a small square bracket on either edge of the window.

You can then press Cmd-↑ or Cmd-↓ in a Terminal window and you’ll be taken right to your previous or next prompt from where you currently are. Terminal then shortly highlights the line with a bright yellow marker.

Screenshot of Apple’s Terminal app window with a command line prompt highlighted in bright yellow color
Screenshot of Apple’s Terminal app window with a command line prompt highlighted in bright yellow color

In case you want to remember a certain line of output and want to be able to get back to it without having to scroll back and tediously search for it, you can set either a marker or bookmark:

Right-click the line you want to remember and choose “Mark” from the contextual menu items. After that, your marked line will be recognised when you step through the prompt lines with the Cmd-arrow shortcuts.

You can also save a bookmark, which allows you to directly go to that line by selecting a saved bookmark from the “Edit->Bookmarks” item on the menu bar.

]]>
Batch Editing Kirby Content Files https://foobartel.com/articles/batch-editing-kirby-content-files articles/batch-editing-kirby-content-files Tue, 12 Feb 2019 00:00:00 +0100 In a recent project I built with Kirby, I came across a challenge that I needed (or rather wanted) to add an extra field to all of my yaml files. The project is a theater site and contains a lot of event entries, which hold the date and location of what’s playing each day.

The project has been migrated from an old version of webEdition CMS, which the site has been running on for several years. The previous (partial) structure of the event entry model contained a date field and the time of the show, which after getting the data into Kirby looked like this:

Date: 2019-02-13
—— 
Time: 20:00

I wanted to add a new field with a timestamp that was generated from these two values. I could have done this on the fly as well, but for various reasons, adding a timestamp directly to the files was the better solution. The timestamp is from now on generated when creating a new date entry. The new yaml file and what I wanted to achieve looks like this:

Date: 2019-02-13
—— 
Time: 20:00
——
Timestamp: 1550088000

So, how do you do that in a thousand files? At first, I thought about writing a shell script, which for a similar task I had done before. I had a stab and couldn’t get it to work. Since I’m more familiar with PHP than Shell scripting, I decided to go down the PHP route.

I always find it a little difficult to traverse directories and iterate on them in any language and it’s the same with PHP. It took me a little time to get it right, but it finally worked and I got done what I needed to be done.

The script below is provided as is and meant as a stating point, in case you have to solve a similar problem. It will likely need modification to work for you, since it’s very specific for my task. It’s also not the prettiest of them all, but it got the job done and that’s enough. If you have ideas on how it can be improved, I’d be happy to hear your comments though ;)

The file structure of my content files looks like this:

showdates
    — 1-showdate1
        — entry.txt
    — 2-showdate2
        — entry.txt
    — 3-showdate3
        — entry.txt

Prerequisites for the addTimeStamp.php script:

  • An "Eventtimestamp:" key already exists in the yaml file, but it could be with or without the actual timestamp value;
  • The script operates on files named “entry.txt”;
  • The script needs to be saved in the parent directory of the directories containing “entry.txt”. In this example it’s the “showdates” directory;
  • The script does not handle any errors.

It’s always a good idea to have a backup of the files you’re working on, just in case something goes wrong. That said, here’s the script:

<?php

/*
    addTimeStamp.php
    This script adds an "eventtimestamp" entry to yaml files in subdirectories of "showdates".
    The script needs to be stored in the directory it works on
    and only operates on files with the specified name
*/

$path = realpath( './' );
$objects = new RecursiveIteratorIterator( new RecursiveDirectoryIterator( $path ) );

foreach ( $objects as $file ) {
    if ( preg_match( '/entry\.txt/', $file ) ) {

        $content = file_get_contents( $file );
        $patternDate = '/Date\: ?(.+)/i';
        $patternTime = '/Time\: ?(.+)/i';
        preg_match( $patternDate, $content, $matchesDate );
        preg_match( $patternTime, $content, $matchesTime );

        if ( count( $matchesDate ) && count( $matchesTime ) ) {
            date_default_timezone_set( 'Europe/Berlin' );
            $eventtimestamp = strtotime( $matchesDate[1] .' '. $matchesTime[1] );
            $replacePattern = 'Eventtimestamp: ' . $eventtimestamp . "\n\n";
            $stampedContent = preg_replace( '/eventtimestamp\:.*?/i', $replacePattern, $content );
        }

        file_put_contents( $file, $stampedContent );
    } else {
        echo "Could not find any files to process.";
        die;
    }
}

?>

To run the script, save it in the directory you want to run it in, cd to the directory (e.g. $ cd showdates) in your Terminal and then run the script with: $ php addTimeStamp.php. That's all. If everything went right, your files should now all have a new Eventtimestamp key with its respective value.

I hope this might help you out in case you run into a similar problem with either Kirby content files or elsewhere. Feel free to reach out of you have any questions or comments.

]]>
Coming Back to Social https://foobartel.com/articles/coming-back-to-social articles/coming-back-to-social Fri, 01 Feb 2019 00:00:00 +0100 When I went to Sweden over the Christmas holidays, I stayed away from my phone for most of the time. This wasn’t planned at all, but somehow just happened. I had very little motivation on checking, posting or even reading anything. Twitter, Instagram or any kind of news were not important nor interesting and I rarely read or posted anything. It was simply nice to be in the silent middle of nowhere, unwinding away.

The January somehow stayed the same. When I got back to Hong Kong, I thought I’d be shocked by the difference in noise levels, but it wasn’t as bad as I though it would be. Adjusting was easy and I smoothly got back into the daily grind. But I still wasn’t in the mood to engage in any social media. I decided to stay low with little engagement for the month being and got productive working on some fun projects.

Now that it is February, I decided to come back and be more social again, but I will do so more selectively for sure. Over the last weeks I talked to many friends and without wanting to be too dramatic here, there’s something to the whole “always-on-engagement-thing”. The article “How Millennials Became The Burnout Generation” has been a great read and a sort of eye-opener in many ways. I also believe that this issue doesn’t only concern millennials, but rather everyone who’s been on the web and social media for some time. The article has resonated with a lot of people that I have spoken to and many of them, like myself, don’t fall into the millennial bracket. I’m a little curious and a little scared at the same time to see what long-term effects the exciting, beautiful, weird and busy web might have on us people.

Long story short, since I’ve been more selective about the social when, where and whats, stopped reading news (which these days mostly is just just noise for advertising money anyways) almost completely, I have noticed that I feel less stressed, can concentrate better, get more stuff done and am more productive again. And this is definitely a good outcome that wasn’t planned. I like it.

Let’s see how it’ll go from today on and here’s to hopefully more blogging, more opinions, more engagement and a little more Rock’n’Roll in general while staying sane. Happy February!

]]>
It’s Getting Dark Out There - A Thought on Dark Mode https://foobartel.com/notes/a-thought-on-dark-mode notes/a-thought-on-dark-mode Sat, 08 Dec 2018 00:00:00 +0100 At Colloq, we’ve recently been playing around with the dark mode preference, to give it a try and see how things turn out. After trying and using it for a while in Safari’s technology preview, I started to wonder:

Do I really want all websites to appear in a dark theme, just because I like my OS interface in dark mode?

I’m really not sure and I guess we’ll have to wait and see if there will be a way to define settings more granularly. Since this is quite a new thing, time will probably tell, but for today, this is just something that has been on my mind for a few days.

]]>
Inviting Conference Speakers https://foobartel.com/notes/inviting-conference-speakers notes/inviting-conference-speakers Fri, 07 Dec 2018 00:00:00 +0100 Some good tips on how to write good speaker invites and what information to include by Bruce Lawson. It’s generally about good an clear communication and while some things might be very clear for yourself, always assume the other party might not know all of it. It also helps to easy the effort, because noone wants to do research to understand an email.

How to invite a conference speaker

]]>
Old Goodie https://foobartel.com/notes/old-goodie notes/old-goodie Thu, 06 Dec 2018 00:00:00 +0100 While I was cleaning up some digital stuff, I came across an old article that I have written in 2014 for the StartupsHK blog. I couldn’t even remember I ever did, but there it was. A lot of things have changed since then, but the message still holds true.

Building a Better Product and ‘Harbour Front Web Days’ on 27 – 29 May in Hong Kong

]]>
Loading Web Fonts https://foobartel.com/notes/loading-web-fonts notes/loading-web-fonts Wed, 05 Dec 2018 00:00:00 +0100 I came across this clear and concise overview by @shortdiv on the various options on loading web fonts. I really liked it for its simplicity in writing and laying out the most important facts and options.

If the above post isn’t detailed enough and you are looking for further possibilities and some more technical details, you can knock yourself out with @zachleat’s complete guide to web font loading.

]]>
The Problem With Full Stack https://foobartel.com/notes/the-problem-with-full-stack notes/the-problem-with-full-stack Tue, 04 Dec 2018 00:00:00 +0100 There has been a lot of talk about HTML & CSS recently. It's easy! Both languages aren't getting the full recognition they deserve. Many times they are belittled, yet so difficult to truly master. This article by Heydon Pickering is spot on and hits home so many times. Recommended reading.

This is all to say that, if you put someone in charge of all of these things, it’s highly likely they are going to be much weaker in some areas than others (I’m identifying a trend here; there’s no need to comment with “but I can do all the things”, thank you). Worse: they’ll tend to have little interest in improving in areas with which they don’t identify or for which they aren’t rewarded. In my experience, men especially earn kudos for their knowledge of JavaScript, but little from CSS skills. CSS, which makes things look ‘pretty’, is considered feminine (don’t tell that to a peacock).

You can read the full article here: Reluctant Gatekeeping: The Problem With Full Stack

]]>
Resolving CSS Gridlock https://foobartel.com/notes/resolving-css-gridlock notes/resolving-css-gridlock Tue, 04 Dec 2018 00:00:00 +0100 The following article is a nice write up on the possibilities, difficulties and challenges that we might face with CSS Grid in production today. Discussing how we can possibly make the most out of it and learn the best ways to deal with incomplete support, Matthias offers a nice perspective on the topic and explains how prototyping can help us to better understand the limitations.

Dealing with incomplete support has always been one of the challenges of creating things on the Web.
[…]
To make the best use of it, we, therefore, need to learn how to play this new instrument and prototyping in code can be vital to explore the possibilities that CSS Grid offers.

Read the complete article on Matthias’ blog: Resolving CSS Gridlock

]]>
Leading Zeros in CSS Values https://foobartel.com/articles/leading-zeros articles/leading-zeros Mon, 03 Dec 2018 00:00:00 +0100 Today a question and following a quick conversation about leading zeros in CSS, or rather SASS, popped up, because some pre-processor documentation mentioned that leading zeros are “bad”. Matthew asked and Georgie, who wrote about it in the past, also chimed in.

This kind of wording can be quite misleading, since it doesn’t correctly specify what “bad” refers to. It could be bad practice, bad style, or simply “bad” by personal preference or decision by committee.

Turns out: It doesn’t really matter. It’s not “bad” in general terms and it’s not bad practice, but mainly comes down to which way one prefers. I personally like to include leading zeros, because I find it easier to read.

Whether you like leading zeros or not, when using a linter, you can still decide later on if you want to include zeros in your output file or rather not.

If you worry about the CSS file size, you probably shouldn’t. The savings in file size will in most cases be negligible. You can easily make up for such a small difference by either writing better CSS, or by optimizing other low-hanging-fruit areas like compressing images, etc.

Unless you want to completely geek out on web performance and push the limits of what’s possible, or are in for a 10Kb app challenge, just go with your preferred style, whichever it is, and enjoy writing CSS.

]]>
Long Live the iPhone 7 https://foobartel.com/articles/long-live-the-iphone-7 articles/long-live-the-iphone-7 Sun, 02 Dec 2018 00:00:00 +0100 Tonight I had a conversation about the new iPhone X and I mentioned that I have been thinking about getting one, solely for the camera upgrade.

I currently still use an iPhone 7 Plus. I’ve had it from right after its release. And then I noticed that not because of the price, but because I don’t have any pain points yet, I haven’t gotten one.

The iPhone 7 Plus still works like a charm and I don’t have any pain points yet on to why to get a new one. My friend has the same phone and we then realized that this model lasts much longer than any other before. Usually after about two years, and two generations, you’d feel it getting slower and that it was about time to get a new one.

This one doesn’t have it. It’s only been two years so far, but it feels the gap in between this and the latest models is huge and it’s been 3 new generations launched since then. The iPhone 7 Plus still feels fast and everything is at a good standard. The camera is great, the speed feels good, the only thing that could be better is storage. With 128Gb it’s getting close to operating at full disk most of the time, but that doesn’t seem to impact speed a lot, if at all. And the battery is still doing great as well.

It feels that this is one of the best models of all iPhones ever made. And still, at some point in the future I will probably get the new one, which then really has to prove it’s worth.

]]>
December https://foobartel.com/notes/december notes/december Sat, 01 Dec 2018 00:00:00 +0100 It’s the time of design & development advent calendars again. Hello December. This year went fast again. Since I recently decided to write more again, I was thinking to try to write something every day in December. Quite a challenge, but one can always try.

The start today, December 1st, didn’t go too well, since I’ve been out most of the day and when I remembered that I still wanted to write something, to my surprise my site was down :( Last night I initiated a server move for my hosting package so that I can finally have a better server and some new features. With that, obviously the IP address of the server had changed and I didn’t think of updating the DNS records on time… I have now updated the records and the site should be back up soon again, but this post didn’t make it on time for the 1st, or at least not on HK time for the 1st. Propagation seems to take some time today and I’m not sure if I want to wait for it. Either way, this and more posts will follow.

Happy December!

]]>
Breaking Things, Fixing Things… https://foobartel.com/articles/breaking-things-fixing-things articles/breaking-things-fixing-things Fri, 30 Nov 2018 00:00:00 +0100 Marcus is currently creating a showcase on how to build accessible SPAs in different JS frameworks, aka React and Vue. He is documenting everything he does and tries to find the best ways to solve certain problems and make the app as accessible as possible. This is a great idea which I absolutely support and I’m very much looking forward to see where he can take it.

Yet, while reading this latest article about the challenges and possible solutions for accessible routing in Vue, I couldn’t help but wonder why everything in this article sounds so wrong. I know of the issues with these frameworks, even though I have never dug in deep in either and for various reasons I’m not a big fan either.

These latest frameworks are so hyped, everybody seems to like them, yet I find that they do break everything the web does offer out of the box, as a default and for free. (Free as in beer as well as in zero overhead.) But to get these basics working in a framework like this, the behaviour of focus states and routes has to be fixed and worked around to eventually only arrive at a solution that has otherwise already existed since the beginning of the web.

What I understand and have seen many times over all these years, is that most things on the web start out as an experiment. New technologies are being created and time always tells if it’s been a good idea, a bad idea and if things will last until after the hype.

We need these experiments — whether failing or succeeding — to move the web and its technologies forward, but arguing that these frameworks are the holy grail, while discounting HTML and CSS, couldn’t be more wrong. While these frameworks do have their place, IMHO there is still some way to go for these frameworks to mature into something sustainable. Until then they will leave things broken and for some of us to fix.

]]>
Deep Work & Scheduling Work Time https://foobartel.com/notes/deep-work-scheduling-time notes/deep-work-scheduling-time Tue, 27 Nov 2018 00:00:00 +0100 Today I had a long conversation with Anselm & Tobias and how to best schedule work time and get the most out of it to be most productive. Tobias has tried the Pomodoro technique for some time and it seems to work well for him. Anselm and myself haven’t tried it yet, but are interested in doing so and, as we usually always do if someone does one thing, ask a lot of questions to get the quick tl;dr version from the person in the know ;)

I made me think of Brad Frost’s approach of scheduling every minute of the day, which is also quite interesting and seems to work well for him. For Brad the Pomodoro technique didn’t stick. The only way to find out what will work for me, is to try one and/or the other.

Even though scheduling every minute of the day sounds very intriguing, I think for now I do prefer the idea of Pomodoro, since it seems easier to accomplish and stick with.

One thing that came up today was how Pomodoro would (or could) apply to creative work? While for Tobias this is quite straight forward and should work the same way, I’m not sure if this can be applied to all different kinds of work. It for sure is possible to break creative work down into small pieces, 25 minutes doesn’t seem enough to even get into a creative head space… But: It seems.

I guess the only good way to find out is to try, hence I will try to apply it from tomorrow on and see where it will take me.

How do you schedule your work/time to be most productive?

]]>
All That Data https://foobartel.com/articles/all-that-data articles/all-that-data Fri, 09 Nov 2018 00:00:00 +0100 On my last night in NYC a few weeks ago, I spoke to a friend of mine who works at a large bank. Somehow we came to talk about data collection and how her analytics team was also collecting lots of data, but doesn’t really know what to do with it.

One of the big challenges isn’t to collect data, but to get or make something useful out of it. She agreed that most companies are sitting on a lot of data, but don’t know how to make sense of it or even more challenging, connecting data from different systems in the best way. Connecting datasets, especially from different systems, is one of the biggest challenges.

In my current talk, “The Untold Benefits of Ethical Design”, I touch on how data collection and security breaches are slightly out of control these days. Much of the data many companies collect, likely only serves the purpose of being collected or to satisfy egos. It also is “the thing” that everyone on the web does now, so why not.

When we collect all the data and what we do with it, many usually don’t think about the user, but how this can help business. If we try to help users to have a better experience and play it right, aiming for happier users by collecting data more thoughtfully can and will turn into a business advantage further down the road.

I always advocate for an approach that I call “Grow with your growth”. Start collecting data when you need it and when you know what you want to achieve with it. Once that’s done and more information or metrics are required, add another next step. This avoids sitting on too much data that can’t be handled anymore and many times, this approach should be sufficient for most. Also always ask the question: “Will this help our users, or is it only good for conversion rates?” If the latter is true, maybe there’s another way to achieve the same goals, but with more respect to our user’s privacy?

Disclaimer: All this probably doesn’t apply if you are in the business of selling user data, aka surveillance capitalism, which I do hope you are not ;)

]]>
When Things Go Wrong https://foobartel.com/articles/when-things-go-wrong articles/when-things-go-wrong Sat, 18 Aug 2018 00:00:00 +0200 It’s the weekend of FFCPH and yesterday morning I was supposed to leave from Hong Kong to hold a workshop today. As I write this, I’m sitting at the airport in HK, feeling somewhat in between tired, frustrated and helpless.

A plane ran over the runway in Manila on Thursday night and since then, the runway has been closed. As a result, my flight, originally scheduled for 9am on Friday the 17th, has been re-scheduled six or seven times and it’s currently still unclear if and when it will leave HKG. Vitaly, who was supposed to hold a workshop too, has also been stranded in HK, since his flight from Doha to Manila got re-routed to HK. He doesn’t even have any new flight info as of now.

Yesterday I spent 12 hours at the airport, walking a lot between different counters and gates to find out about the new departure times and the flight’s status. At some point after 11pm I went home, got some sleep and went back to airport at 9am to catch the flight at 11am, which again has now been re-scheduled twice.

Besides feeling sorry for myself and being frustrated about the whole situation, I feel sorry for everyone at FFC. Two of three speakers haven’t made it to the conference yet and besides all the issues this has caused, it’s a pretty bad end to a great conference, which has been run for 9 years. This will be the last edition of FFC in Manila. What a sad ending.

I feel sorry for the attendees who were looking forward to a good experience, which had to be moved and shifted, to make things work. Well, “work” is not quite the right word, if there’s not much you can do to make things “work”. One positive thing is that the attendees all get to enjoy Hui Jing Chen‘s CSS Grid Masterclass today.

Once things like this happen, it clearly becomes apparent how much work goes into organizing a conference. So many things are connected and it’s difficult to find ways to mitigate this issue. I’m frustrated that there’s nothing one can do, besides waiting at the airport.

With all that said, it’s 12:40pm now and the departure time still stands for 2pm. If I can get on, that would be great and we’ll still have a good time at FFC, which for now has eventually been partially moved to tomorrow. I’m trying to stay optimistic and we’ll try to make the best out of this shitty situation.

]]>
Sticky Things https://foobartel.com/articles/sticky-things articles/sticky-things Sat, 11 Aug 2018 00:00:00 +0200 This week I have been working on a new navigation/header component which is supposed to work as a sticky header—people nowadays seem to want that by default. I started to write some JavaScript to make it stick to the top of the page when the page scrolls. It needed some offset to the body to avoid a rather annoying page jump, once it hits the sticky threshold. After I got it working, I remembered position: sticky which has been introduced in the second draft of CSS Positioned Layout Module Level 3 in 2015. I went ahead, tried it out and I have to say I’m a big fan now, simply because of its simplicity.

To make it work, all you have to do is add position: sticky; to your desired sticky element and specify the position of where you want your element to stick.

.sticky-element {
    position: sticky;
    top: 0;
}

Browser support isn’t great yet, but in my case the advantages outweigh the tradeoffs.

  1. No JavaScript needed. Even though it would only require a few lines of JS, it’s great to have a CSS-only solution;
  2. Super-simple implementation;
  3. If the browser doesn’t support it, it’s not a big deal if the element does not stick, but scrolls out of the viewport.

Support for this will get better over time and I’m very much looking forward for wider browser support. CSS has come such a long way and it keeps getting better and better :)

Details on browser support can be found here:

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/position
  2. https://caniuse.com/#search=sticky
]]>
Semantic Components https://foobartel.com/notes/semantic-components notes/semantic-components Fri, 27 Jul 2018 00:00:00 +0200 I wrote a new article on Colloq where I explain how we solved an issue with our component semantics. It has proven as a solid solution for us and allows for a lot of flexibility, without messing up semantics. Read the article on the Colloq blog and if you have come across similar issues, I’d be glad to hear your comments and ideas.

]]>
CSS-in-JS, Kindness and Evolution https://foobartel.com/articles/css-in-js-kindness-and-evolution articles/css-in-js-kindness-and-evolution Fri, 22 Jun 2018 00:00:00 +0200 CSS-in-JS is the new and popular kid on the block. On the flipside, Vanilla CSS is old-school and isn’t so much of the hi-roller anymore. Actually, CSS was never liked too much by many anyway.

Whenever I read articles explaining why CSS-in-JS is better than CSS, I can’t help but think it’s mainly due to a lack of understanding or experience. That’s not a bad thing per se, since not everyone is made to know and understand everything, but using one technology to avoid another, maybe isn’t a good solution.

Many arguments why CSS is “bad” can be understood. CSS for sure isn’t perfect and definitely has its flaws. One of the common problem seems to be large teams with different skill levels working on the same CSS codebase and causing accidental overwrites, because scoping can’t be easily controlled. For these overwrites, I’d argue that it’s probably down to experience and the skill level with CSS, but then again, we hit the issue of large teams with different skill levels. Don’t get me wrong, even skilled people in smaller teams create bugs by overriding existing rules. Guilty as charged. CSS is hard and naming things even more so. Bugs and mistakes are part of the game, just like there are bugs in other languages, too.

Don’t worry, I’m not writing this to explain what is better and what’s not. I have been working on the web long enough to know that in some time, things will be different again and we will argue about new problems and different tools. This isn’t the first iteration of A vs B vs C to then suddenly see D emerge and all others be forgotten.

With all of these discussions, I’m missing an important part of understanding and creativity though. Which I see like this:

The internet is an ongoing experiment, it’s so young and many things aren’t set in stone, nor confirmed to be working forever. Nobody knows where, and with what we will end up in 10 years time from now.

Many of these discussions often seem absolute. Framework A is the latest and greatest and that’s why everyone should use it. For everything! Many people seem to forget:

There are lots of different use cases, different projects, different people and different skillsets. We have different requirements and different budgets, different timelines and different needs.
And guess what: There’s not a single solution for all of these. There’s no one-size-fits-all tool or technology. And why should there be?

Pushing for the future

Web standards do work great and are introduced to be the building blocks of the web. New frameworks emerge and start to push things in new directions. These are all experiments, trying to solve a certain problem, every single one of them in their very own way. I applaud everyone who does venture into these lands, because this is how things evolve. We need these experiments to happen, because they are the ones driving innovation. We’ve seen some great things come from such experiments and they have had huge impacts on the web and the ways of how we work today.

Some things make it, some others don’t. Some things become a standard and some others will be discarded. CSS-in-JS for example is a first stab at doing things differently and to solve a problem that we’ve seen. Maybe it‘ll work or maybe it won’t. As with every version 1.0, don’t get too hyped up. The important thing to remember is that whatever it turns into, will have pushed the boundaries of what is possible and will have provided insights on what works well and what hasn’t.

Everything we do is a work in progress and nobody really knows where things will go. It’s all a bit of trial and error. Some things will work, others won’t. Some of the things that we try will be great and for others we will realise it’s been a bad idea in the first place. From both experiences we will learn for the future though.

Let’s go back in time: Sometime around 2001, JavaScript was considered dangerous and it was recommended to be wisely used for quite some time. Today it has turned into one of the most popular and widely used languages. There’s been many frameworks and libraries throughout the years, many of which have been long forgotten. Yet, they all have contributed in some way to the evolution of our web technologies and to where we are today. (Ok, maybe some haven’t…)

I wish we would allow a little more flexibility and creativity for things like these to flourish, fail or make it. Preaching for absolutism after just a few weeks time1 after the release of a new tool is clearly not the best way to go about things. And while there are many different (and valid!) opinions out there, I don’t understand why some people get so worked up about these things.

Remember: Everyone is free to choose the technology they like. Using only the latest and greatest things does not make you a better person. Nor does it make you a better or worse developer. But being kind, creative and open for constructive, creative and challenging conversations to push things forward will. In the end we’re all calling for diversity and and besides different people, different tools and opinions is what makes the web. The web is large enough for many different things to co-exist, whether that’s opinions or a tech stack. We should take this amazing opportunity in front of us, learn from each other by not trying to create from and for different systems, not a single one, just because someone said so. And while we’re at it, we should treat each other with kindness, no matter the opinions.

1: Of course this timeframe is highly exaggerated, but hopefully you’ll get the idea

]]>