foobartel.com :: All Posts https://foobartel.com Fri, 11 Oct 2019 00:00:00 +0200 All posts from foobartel.com combined Owning Your Content - A Love Letter to My Website https://foobartel.com/tilrs/owning-your-content tilrs/owning-your-content Fri, 11 Oct 2019 00:00:00 +0200

Having my own website says I care about what I do beyond clocking in and out and cashing a paycheck. It shows I’m proud of what I create.
[…]
But the real truth is that as long as we’re putting our work in someone else’s hands, we forfeit our ownership over it. When we create a personal website, we own it – at least to the extent that the internet, beautiful in its amorphous existence, can be owned.

I really liked this article by Tobias van Schneider about his thoughts on running your own website and why owning our content is a good idea. We've been over this a few times, but it can't be said often enough I guess. And when it's well put, it's definitely worth reading and sharing. In case you don't have your own website (yet!), maybe this article is inspiration and a possible step of convincing that it is be a good idea and worthwhile thing to do to create your little, own corner on the web.

]]>
HEX Color Codes Explained https://foobartel.com/tilrs/hex-color-codes-explained tilrs/hex-color-codes-explained Fri, 04 Oct 2019 00:00:00 +0200 I really liked this thread by Corey Ginnivan explaining the theory behind HEX color codes. I always found understanding this well can help a lot with adjusting or finding matching colors. For a long time I also wanted to write a conference talk about this topic, but hey… maybe one day. Anyways, for now this little thread is definitely worth checking out.

HEX Color Codes Explained
]]>
Quick-Fixing macOS Audio Woes https://foobartel.com/tilrs/quick-fixing-macos-audio-woes tilrs/quick-fixing-macos-audio-woes Fri, 13 Sep 2019 00:00:00 +0200 Recently the audio on my Mac sometimes stops working for an unknown reason… It‘s been happening with video in browsers and Tweetbot. I'm not sure what it is and where it‘s coming from, but here‘s a quick fix that has worked for me.

  1. Open Terminal, type sudo killall coreaudiod
  2. Press return (⮐)
  3. Start playing audio ;)

Obviously this is not the works-all-solution, but can be a possible quick fix.

]]>
Affecting Power Usage https://foobartel.com/tilrs/affecting-power-usage tilrs/affecting-power-usage Thu, 12 Sep 2019 00:00:00 +0200 An interesting article on How Web Content Can Affect Power Usage, how it works and what to do to improve it.

Users spend a large proportion of their online time on mobile devices, and a significant fraction of the rest is users on untethered laptop computers. For both, battery life is critical. In this post, we’ll talk about factors that affect battery life, and how you, as a web developer, can make your pages more power efficient so that users can spend more time engaged with your content.

Screenshot of Safari‘s Web Inspector Timeline Overview Tab
Screenshot of Safari‘s Web Inspector Timeline Overview Tab from webkit.org
]]>
Images to Kirby Content Directories with Bash https://foobartel.com/tilrs/images-to-kirby-content-directories tilrs/images-to-kirby-content-directories Tue, 10 Sep 2019 00:00:00 +0200 While working on a new section for my blog, I needed to convert a directory of images into a Kirby content file structure. I‘ve had some prior scripts from when I moved my blog from WordPress to Kirby and modified one of them to do exactly that. The below script creates a content text file and moves the source images into their repectively created subdirectory.

The image source directory looks like this:

image-source
  -- image1.jpg
  -- image2.png
  -- image3.jpg
  -- …

and the final resulting structure looks like this:

image-source
|-- 1_image1-1567760562
   -- foo.txt
   -- image1.jpg
|-- 2_image2-1567760562
   -- foo.txt
   -- image2.png
|-- 3_image3-1567760562
   -- foo.txt
   -- image3.jpg

With this structure, the folders can be moved into a Kirby content directory and will appear as listed pages. If you prefer to create unlisted or draft pages, remove ${i}_ from the script.

The script is pretty barebones and does not account for spaces in filenames or other things. It does add the required Kirby content file as foo.txt which contains a field with the filename, but if needed you can specify the fieldname and other content as required.

#!/bin/bash

# This script iterates over every JPG or PNG file in the directory and moves it into its own directory.
# The resulting directories will be named as e.g.: 1_img_0395-1567760562
# The above directory name consists of: iterator_filename-timestamp
# The file itself will not be renamed and only moved into its repective directory
# Save this script as e.g. `createdirs.sh` in the source images directory
# Run the script with `sh createdirs.sh` 

i=1;
for file in *.jpg *.png; do
  dir=${file%%.*}
  add=$(date "+%s")
  mkdir -p "${i}_${dir}-$add"
  mv "$file" "${i}_${dir}-$add"
  echo "imagefilename: $file" > ${i}_${dir}-$add/foo.txt
  ((i++))
done

The script is provided as is and hopefully will help someone to achieve something similar. Let me know if you found it useful or have any questions, in which case I‘ll try to help

]]>
Redacted https://foobartel.com/tilrs/redacted tilrs/redacted Tue, 10 Sep 2019 00:00:00 +0200 A helpful tool I came across in the latest Dense Discovery newsletter:

This handy web app allows you to easily redact parts of an image. Just drag the image into the browser and start redacting. Double-click to cycle through different styles.

Example of three different styles to redact with Redacted
Example image showing three of the different styles to redact with Redacted

Have a look and try it out: Redacted

]]>
Dev Lids https://foobartel.com/tilrs/dev-lids tilrs/dev-lids Mon, 09 Sep 2019 00:00:00 +0200 After seeing a short Twitter thread about laptop stickers and what others’ laptops do look like, I remembered this fun site, collecting only that: Stickered laptop lids.

If you’re into that kind of thing, knock yourself out!

]]>
The Effect of CSS Filter Grayscale https://foobartel.com/tilrs/the-effect-of-css-filter-grayscale tilrs/the-effect-of-css-filter-grayscale Thu, 05 Sep 2019 00:00:00 +0200 Recently I wrote about the grayscale CSS filter and how I used it for an image hover effect. While I played around with it, I noticed that the filter not only works on the image it‘s applied to, but all of its applied styles as well.

As an example, the following rule will convert the image, as well as all other properties containing a color value to grayscale:

.grayscale {
    filter: grayscale(1);
    padding: 1rem;
    border: thick dashed #d61925;
    background-color: #79c9d4;
}
View of the beach of Tai Long Wan in Hong Kong
Original image
View of the beach of Tai Long Wan in Hong Kong
The same image with the grayscale filter applied

The effect of all colors being converted does make sense, yet it was slightly unexpected when I first noticed it. So in case you want to keep the colors of your properties as intended, simply wrap the image with another element and apply the filter for the image seperately.

]]>
Conference Talks for The Rainy Days https://foobartel.com/tilrs/conference-talks-for-rainy-days tilrs/conference-talks-for-rainy-days Wed, 04 Sep 2019 00:00:00 +0200 This week is yet another rainy and wet one in HK. There‘s been way too much of that this year. And it‘s always good to have something to do when going out is not really the amazing thing to do. Unless you love the rain. So here are some conference talk videos to get you through those rainy days.

Over the last two days, Jointfuturesconf in Helsinki has been streaming all of their talks live, for everyone to access and watch. This is an amazing effort and the video stream has worked very well. They‘ve had a great lineup and fantastic talks. If you have missed the livestream—which depending on your timezone, can easily happen—the talk videos will still be available after the conference. I‘m not going to recommend certain talks, but I definitely recommend to have a look and check it out yourself ;)

And while I‘m at it and you are into learning by watching, there are many more fantastic talks available from Beyond Tellerrand, which is my favourite one. Have a look at the past talks and save some for the rainy days!

Recently Front Conference also released all their latest videos and there‘s some interesting ones in there as well.

And if that is not enough, you can find much more conference coverage including videos, tweets and photos on Colloq. Have fun and enjoy your rainy days!

]]>
Accessibility Insights https://foobartel.com/notes/accessibility-insights notes/accessibility-insights Fri, 30 Aug 2019 00:00:00 +0200 I would have not expected me to say this, but today Microsoft really impressed me! I saw Microsoft’s new Accessibility Insights tool mentioned in a tweet by Marcy Sutton and did have a look. This is a great piece of work with a lot of information and help on how to make sites more accessible and most importantly, allows you to test for accessibility with information on what and how to improve your very own sites. Very cool!

Screenshot of Microsoft’s Accessibility Insights Website
Screenshot of Microsoft’s Accessibility Insights Website

The tool runs as an extension for Chrome and Microsoft Edge Insider and is also available as a Windows application ”to run accessibility testing on other Windows applications“. I gave the Chrome extension a quick whirl and it’s pretty good.

The extension has three main options, which are FastPass, Assessment and Ad hoc tools. The launchpad from where you choose your actions looks like this:

Screenshot of Accessibility Insight’s Launchpad
Accessibility Insight’s Launchpad

After you run FastPass the tool opens a results page with the issues it has found:

Screenshot of Accessibility Insight’s FastPass results page
Accessibility Insight’s FastPass results page

This is only a first look at the tool and I really like what I see here. I hope this will make accessibility testing easier and—more accessible! ;) I recommend to give Accessibility Insights a try and spread the word, since this tool can help web developers make the web a little bit better, one test and improvement at a time.

]]>
Resizing on Click - Without JavaScript https://foobartel.com/tilrs/resizing-on-click-without-javascript tilrs/resizing-on-click-without-javascript Thu, 29 Aug 2019 00:00:00 +0200 I came across this on Twitter:

This codepen is a pretty interesting technique. Not sure if this is something suitable to use in production, but a cool thought experiment and result for sure. I like it 👍🏼

I’m thinking it could be quite a nice way to create a CSS light box or something similar without the need for JS. It might not be the best technique for light boxes, since it’s probably impossible to manage focus state on the page and to make it properly accessible. Still, I think it’s a neat idea and I want to have a closer look at it. It might be good for some use case.

]]>
Sorting an Array in JavaScript https://foobartel.com/tilrs/sorting-an-array-in-javascript tilrs/sorting-an-array-in-javascript Thu, 29 Aug 2019 00:00:00 +0200 If you’ve sometimes wondered how sorting arrays in JavaScript works, or rather how it does not work, this is a good post from Phil Nash explaining some of the gotchas and inconsistencies.

Read the full article here: How not to sort an array in JavaScript

screenshot of article title from Phil Nash’s blog
]]>
Helpful CSS Filters https://foobartel.com/tilrs/css-filters tilrs/css-filters Wed, 28 Aug 2019 00:00:00 +0200 Not quite the trend anymore, yet a client wanted to see their partner logos display in grayscale and only turn colored when hovering the logos. Well, obviously I wouldn't want to use two different images for that—it reminds me so much of the early days of Dreamweaver - MM_swapImage(), anyone? ;) Instead I used the CSS filter property to adjust the rendering of the images.

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

Good thing there is the CSS filter property luckily includes a grayscale function that does exactly what I needed.

The following renders an image at a 70% grayscale value. 100% renders the image as a full grayscale image. The values can be either a percentage or a number, e.g. 0.7.

filter: grayscale(70%);
filter: grayscale(0.7);

There are a few more functions for the CSS filter property. Personally I haven’t come across many use cases where I’d need them, but some are really fun just to try out. My fun favorite is hue-rotate(<angle>) which does the following:

Applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted.

The other available filters include blur, brightness, contrast, drop-shadow, hue-rotate, invert, opacity, saturate and sepia. The documention and examples can be found on MDN or the official spec for Filter Effects Module Level 1.

]]>
A Look at Average Page Load Time https://foobartel.com/notes/average-page-load-time notes/average-page-load-time Tue, 27 Aug 2019 00:00:00 +0200 At the beginning of this year we launched the new site for a client, who I’ve been working with for a long time. We only had a few restrictions and that’s when projects usually are more fun and you are able to produce the good work. One of the main goals for this site was to get it as fast as possible. Good performance is good user experience.

It’s been a little while, but today I took another look at the Analytics data and was delighted by what I saw. The average page load time from the time we launched in January 2019 until today, clocks in at 1.0 second. There’s been a few hick ups here and there, but overall this is a great result and I’m very happy about it.

Google Analytics page speed screenshot, results from January to August 2019 averaging at 1 second
Google Analytics page speed screenshot, showing the results from January to August 2019 with an average page load time of 1 second

In case you have a project which you believe can benefit from performance improvements to positively impact your conversions, don’t hesitate to reach out and we can talk about the possibilities of how to speed things up for your project.

]]>
Lazy Loading Inline Frames https://foobartel.com/tilrs/lazy-loading-inline-frames tilrs/lazy-loading-inline-frames Sat, 24 Aug 2019 00:00:00 +0200 There’s a new loading attribute that allows native lazy loading in Chrome. The loading attribute is not a standard yet, but it’s being worked on and I’m really looking forward to it, I think this is a really good feature.

Besides images I noticed that it’s also possible to lazy load iframes. iframes aren’t used that much these days, but when they are, it can be helpful being able to load them only by the time the user scrolls near them, instead of loading all their associated data right away. I’m thinking Google Maps, which send quite a bit of data with their iframe maps, but I haven’t looked at or tried it yet at all.

The way to lazy-load an iframe is straight forward and just the same as you would do with images:

<iframe src="source.html" loading="lazy"></iframe>

Note: The loading attribute is only available in Chrome 76 and later, and as of this writing, no other browsers support it yet.

]]>
Optimised Kirby Content Images https://foobartel.com/tilrs/optimised-kirby-content-images tilrs/optimised-kirby-content-images Fri, 23 Aug 2019 00:00:00 +0200 For some time it has been bugging me that I couldn’t add optimised images to Kirby’s textarea markdown. There’s been many times I wished that I could optimise those images to my liking.

At some point I added image resizing and optimisation to the file.create:before hook, but that only allowed to have one size and one setting for image compression. Because of the strict limitations, I didn’t like it much and removed it again.

I wanted some more flexibility and created a little KirbyTag plugin that extends the default image KirbyTag by a few options so it does what I want. It’s been a rather quick and dirty job, but does its job. I also added support for the new loading attribute that allows for native lazy-loading of images.

The plugin supports resizing by either width, height or both, an image compression and lazy-loading. Now I can simply add images with additional preferred options directly in the markdown field:

optimage: biarritz.jpg width: 1200 quality: 65 loading: lazy

Will output something like:

<img src=“source-img-1200x-q65.jpg” width="1200" loading=“lazy”>

The code can be found in this Gist on Github. If you like it or find it useful, feel free to use it and let me know what you think.

Also, if you are looking for a solution to add lazy-loading to your WordPress site, have a look at Tom Arnold’s approach, based on the initial snippet from CSS-Tricks.

]]>
State-Controlled Social Media https://foobartel.com/tilrs/state-controlled-social-media tilrs/state-controlled-social-media Tue, 20 Aug 2019 00:00:00 +0200 One of the huge topics today is that Twitter has taken down a ”significant state-backed information operation“. Over the last few days I have seen a lot of comments on how the Pro-CCP trolls have been infiltrating in masses in my feed, so this is a good move from Twitter and I think they deserve credit for doing so with transparency.

One interesting bit from Twitter’s post is this:

As Twitter is blocked in PRC, many of these accounts accessed Twitter using VPNs. However, some accounts accessed Twitter from specific unblocked IP addresses originating in mainland China.

Here’s the link to the full blog post from Twitter Safety.

Furthermore, Twitter has also updated their policies on advertising by state-media, since the PRC has been running a lot of disinformation campaings on the network, too.

Shortly after Twitter’s move, Facebook followed suit by closing a few accounts and groups. By far not as many, but again, it's a good start they are reacting.

]]>
Media Queries, Frameworks & An Eye for Design https://foobartel.com/articles/media-queries-eye-for-design articles/media-queries-eye-for-design Thu, 15 Aug 2019 00:00:00 +0200 Media queries have been around for almost 10 years and now that I think about it, that’s a real long time, especially on the web. I still remember the first responsive site I’ve built in 2010 like it was last year. It was seven years that said website had been launched and was to be redesigned. It for sure served well, but I’ll keep that for another story.

Back in 2010, we used to write our CSS from max-width media queries down towards mobile. As many will remember, or at least know better now, this approach didn’t work too well. To avoid unnecessary overwrites, the concept of mobile-first^1 was born.

There were fluid, fully responsive and adaptive layouts. I think the style that has been prevailing for a long time has been adaptive layouts. It might still even be today.

Since the introduction of responsive web design with media queries and the (rather slow) rise of responsive sites, my guess is that adaptive layouts were the ones used most often. Somehow fully fluid layouts had the reputation of being more difficult to achieve, mainly because it probably was a little more difficult. Not more difficult in terms of technical complexity, but fluid layouts required a different thinking and a bigger mental shift. And only few wanted to take this on, embrace the new paradigm, and dive in to fully commit.

By that time we had built websites with pixel values and fixed width layouts for 10 to 15 years, and as we all know, a change is always more difficult than to do what one has always done.

Even though there has been so much happening in the web technology space and how the approach to building sites (or webapps therefor) has changed, one thing has bothered me for many years:

Media queries are underused, underrated and somewhat misunderstood.

CSS doesn’t get a lot of credit these days. CSS is “not a real programming language”, hence too easy to be taken seriously, and yet it is difficult enough to be too hard to learn. Believe it or not, even after many years, responsive web design is still hard. I think that this very fact is one of the main reasons why people like to use frameworks instead of building what they need or want from scratch.

So many sites, and many frameworks, set their breakpoints by device viewport widths. To narrow it down, the most common breakpoints are 480, 600, 768, 1024 and maybe 1280px^2, but that might already be pushing it a little… there’s not so much wrong with this approach at first, but what happens with many sites is that the design changes in “radical” ways at said breakpoints, even though there would have been much more room to adjust. I think my most unliked thing to see is the main site navigation change to a hamburger menu just below a 1000px viewport width. Because that’s what the framework does. If you then don’t understand the underlying technique to be able to change and adjust things to your liking, this forced-upon-you solution will be the one for you. Not because it’s right or the best solution out there, but merely because that’s what it is.

Another thing that still persists and I still hear quite a lot is that extra breakpoints are extra effort and do cost extra. This is probably part philosophical and part knowledge issue. I believe the biggest misconception of media queries is that in many cases they are seen as a site-wide “configuration”. I believe it’s gotten less with the conversations around component-based design, yet it requires a good understanding of CSS, which doesn’t happen to appear by talking about components, though conversations and thinking in components definitely supports it.

Components in the technical sense also don’t matter so much in this context. If you have a navigation bar, it’s a “component” of your page, no matter how it’s built, re-usable or not. I always wanted these components—or let’s say every part of a page—to look great and as close to perfect as possible on every device and every viewport width.

Of course it always depends on the content of your component and that’s why any framework will always only be a somewhat close approximation to what you want to achieve. It’s been built for other peoples problems, not your specific one. Fair enough, that’s why they’re a great starting point, a great resource to learn and helpful to quickly get a prototype out the door.

To polish components and make them work everywhere the way I want, I have sometimes used many different media queries for a single component. Media queries can (and IMHO often should) differ throughout the page for different components, parts, etc.

In other cases it can be quite tricky to achieve desired outcomes with media queries, e.g. when nested components in different contexts get on stage. (This is exactly why we want container queries…) Luckily and thanks to CSS grid and flexbox layout modules it's sometimes possible to achieve the perfect outcome with very few or no media queries at all. Some great examples and approaches can be found on Every Layout.

I want to come back to philosophy. If you want to build high quality interfaces that work well across devices and look great everywhere, you’ll have to go that extra mile. You can’t whine about too much effort. As a designer (and developer) it’s your job to make things look good. It’s your job to make it awesome. At least make it as good as you can. Whether that requires more media queries, element queries or the latest, greatest future-voodoo-magic, then those are the tools for you to deliver your best work. And you will charge for the great work you do, and not the amount of media queries that you had to write.

  1. When I speak of mobile-first I refer to the development concept of building from smaller towards larger viewports, rather than what started to be interpreted as entering the market with a mobile app and only later on adding a web or desktop version, if at all. ⤴︎
  2. Should we write media queries with pixels or EMs? Or maybe REMs? I personally will stick with ems and you can find some more opinions in this Twitter thread. ⤴︎

]]>
Modern Web Development on the JAMstack https://foobartel.com/tilrs/jamstack tilrs/jamstack Thu, 15 Aug 2019 00:00:00 +0200 A few weeks ago I started looking into Vue.js and static site generators to get a better idea what all the latest hype is about. So far it's been quite fun and I enjoyed learning something new. I haven't gotten around to try static site generators yet, since I currently don't have a real need for it, but am planning to do so when I find some extra time.

This free ebook from Netlify is a great resource to get a better understanding on building and hosting for JAMstack and covers many topics, from explaining the JAMstack concept, planning and setting up your project to deploying at scale, with a nice case study with SmashingMagazine.

]]>
Implementing Better Open Graph Article Information https://foobartel.com/tilrs/better-open-graph-article-information tilrs/better-open-graph-article-information Mon, 29 Jul 2019 00:00:00 +0200 Since I will to share more content again, I wanted to improve the Open Graph tags on my site, so when shared, the page would present correct and well-formed information. After testing with LinkedIn's post inspector, I noticed mostly text I didn’t like so much anymore, but also that the author information was missing. I wasn’t sure I really wanted to add it, but after looking into it, I decided to give it a go. Why not?

The improved meta tags should be included with all article pages at /articles, /notes and /tilrs.

Before, the whole site set og:type=website, to which I have now added a conditional statement to set og:type=article for respective pages.

From now on these article pages also provide additional information about the author, as well as the date and time for published and last modified. The properties look like this:

  • article:author
  • article:published_time
  • article:modified_time

⚠️ At first I was unsure if article:author was supposed to be part of og: and hence be written like og:article:author, which would have somehow made sense. It’s not, so the syntax for article: does not include the og: prefix.

The complete (Kirby-specific) code block for the article page open graph implementation looks like the below.

<?php if ( $page->intendedTemplate() == 'article' || $page->intendedTemplate() == 'note' || $page->intendedTemplate() == 'til' ): ?>
    <meta property="og:type" content="article" />
<?php if( $page->author()->isNotEmpty() ): ?>
    <meta property="article:author" content="<?php echo $page->author() ?>" />
<?php endif ?>
    <meta property="article:published_time" content="<?php echo $page->publishTimestamp()->toDate('c') ?>" />
    <meta property="article:modified_time" content="<?php echo $page->lastUpdateTimestamp()->toDate('c') ?>" />
<?php else: ?>
    <meta property="og:type" content="website" />
<?php endif ?>

The complete spec for Open Graph’s is available and besides article, there are a few more items that might be interesting, depending on the type of content that you share.

Now that Open Graph is fully integrated, go ahead and share all the things!
Thanks for reading and please reach out with any feedback or questions you might have.

]]>
Kirby Panel Custom Colors on Localhost https://foobartel.com/articles/kirby-panel-custom-colors-on-localhost articles/kirby-panel-custom-colors-on-localhost Wed, 24 Jul 2019 00:00:00 +0200 For quite some time I have been running my website on Kirby CMS, and more than once have I mixed up the environment, because I didn’t pay attention. I either added something on the development site or the production site that wasn’t meant to see that latest “asdfadsfadsfadf” post just for testing…

I've been thinking about how to add something to the topbar for quite some time and couldn’t figure out how to best do it. Until today I came across the custom CSS option for the panel again, which made it all very clear on how to solve this issue.

In the separate config.foobartel.local.php which only loads on the development environment, I’ve added the name and location for the custom style sheet:

return [
    'panel' => [
        'css' => 'assets/css/custom-panel.css'
    ]
]

I then added a custom stylesheet for the localhost panel of my development environment. With this simple stylesheet I’m only overriding the background color of the topbar and some items and adding the word “develop” after the site name that appears there as well.

The content of custom-panel.css:

.k-topbar {
    background-color: #d61925;
}

.k-topbar-signals {
    background-color: transparent;
}

[dir=ltr] .k-topbar-signals:before {
    background-color: transparent;
}

.k-topbar-button.k-topbar-view-button::after {
    content: 'DEVELOP';
    padding-left: 0.5rem !important;
}

All of the above then results in this colorful topbar with the the preferred styles, which in my case is the same background color I use in my site footer:

Screenshot of part of the Kirby panel with a custom styles sheet that changes the topbar appearance
Screenshot of part of the Kirby panel with a custom style sheet that changes the topbar appearance from the default black to red

Hopefully from now I won't make these silly mistakes anymore, because it's much more obvious which environment I'm looking at! ;) I keep thinking there’s much more possibilities to improve the look, but hey… I hope you found this helpful and in case you added a custom stylesheet too, please share it and inspire!

]]>
The Fading Trust in Technology https://foobartel.com/articles/the-fading-trust-in-technology articles/the-fading-trust-in-technology Thu, 18 Jul 2019 00:00:00 +0200 This week FaceApp has again made the rounds and a lot of people have been posting the old version of their own. Shortly after, people started to realise the app is developed by a Russian company and privacy concerns started to pop up. There’s been some rumours that the app uploads your complete camera roll in the background, of which I haven’t seen any evidence. Another concern was Apple’s API and how it allows access to one single photo.

Screenshot of the top stories on FaceApp on Google search
Screenshot of the top stories on FaceApp on Google search, raising privacy concerns and requests for investigation

The details of what people worry about aren’t important. Much more important is the fact that users do worry about the things in the first place. This might sound a little bit naive and I might agree, but it hasn’t always been like this.

It’s a sad fact that in recent years, companies have invaded privacy, abused user data and disrespected users as if it has to be part of a business. If done years ago it would have likely led to the death of a business. Today it has mostly become mainstream, not to say “accepted” practice. Because this is the way we roll today.

The problem: We want to build more apps and use more digital products, but by employing unkind and ethically questionable tactics to be more successful, how much will we gain? By going down this road and accepting it as the new status quo, our own products and technologies are destroying the trust in the things we build and the industry we work in.

Just after I finished this post, I saw the below tweet, which basically makes the same point:

😥.

]]>
Dropbox Alternatives https://foobartel.com/tilrs/dropbox-alternatives tilrs/dropbox-alternatives Thu, 18 Jul 2019 00:00:00 +0200 After seeing a question about alternatives to Dropbox, I thought it might be a good idea to share the few options that came up, plus an additional one that I do use myself.

One suggested option was Seafile, “an open source file sync&share solution designed for high reliability, performance and productivity.” It looks great and the community edition can be installed on your own server for free. The Pro version is free for up to 3 users and above that offers a variety of pricing options.

Nextcloud, “The self-hosted productivity platform that keeps you in control” is completely free and can be hosted on your own server. There are a few voices in this thread who recommend Nextcloud. It's the most comprehensive solution of these three.

I currently use Syncthing as a sharing tool with the Colloq team. This option is a little bit different, since it only does peer to peer sharing with dedicated machines that you allow. With this process there is no server in between and this option is great for sharing and exchanging files, but not really suited for the heavy-weight job of storing stuff on a server. It also only synchs when machines are actually online, so it does have its limitations, but to share files between a team it does a good job.

I hope you’ll find the best solution that works best for you.

]]>
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.

]]>
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.

]]>
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.

]]>
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.

]]>
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
]]>
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 ;)

]]>
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
]]>