Mood boards in a content-first design process

Thomas Byttebier, who has been taking a content first approach, wondered if he could design something visual to present to their clients alongside the content prototype:

Do we really need to finish all content before researching the project’s visual vocabulary? It’s a tricky question of course. At first I believed it to be impossible even. You can’t have your cake and eat it too. And yet there’s no doubt it would speed up the design process tremendously. So in our latest projects, while we were building the content prototype, we tried something new: we designed a mood board simultaneously. And we did it in such a way that it never conflicted with our holy content-first philosophy. It turned out to be quite successful.

Mood boards in a content-first design process →

Elsewhere , , Leave a comment

TensorKart: self-driving MarioKart with TensorFlow

During the winter break Kevin Hughes decided to try and train an artificial neural network to play MarioKart 64:

After playing way too much MarioKart and writing an emulator plugin in C, I managed to get some decent results. Getting to this point wasn’t easy and I’d like to share my process and what I learned along the way.

TensorKart: self-driving MarioKart with TensorFlow →
TensorKart Source (GitHub) →

Elsewhere , , Leave a comment

Does Google execute JavaScript?

Stephan Boyer created a website with some JS injected content and waited for Google to crawl it. It got indexed, but without JS execution. Only after having submitted the site manually via the Google Search Console it got indexed with JS executed.

His conclusion:

Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. Do server-side/universal/isomorphic rendering just to be safe.

Now, I don’t wholeheartedly agree with this, as other experiments have already verified that Google indeed indexes JS content. What I think is going on is that Google has 2 crawlers: one dumb/fast one sans JS execution (to quickly index new sites), and a smart/slow one with JS execution (which visits the site later).

Also, I once read a similar article (but cannot seem to find it back) that used window.setTimeout to see how long Google allows the JS execution. If I remember correctly Google will let your scripts run for some time between 30 and 60 seconds max.

Does Google execute JavaScript? →
Does Google crawl dynamic content? →

Related, a few other Google indexing experiments I did:

Elsewhere , , , Leave a comment

Marky, a high-resolution JavaScript timer

Marky, by Nolan Lawson:

JavaScript timer based on performance.mark() and performance.measure(), providing high-resolution timings as well as nice Dev Tools visualizations.

For browsers that don’t support performance.mark(), it falls back to performance.now() or Date.now(). In Node, it uses process.hrtime().

The greatest win to me is the visualization in the Dev Tools timeline.

After installing it with npm install marky use its mark() and stop() methods to time your stuff:

var marky = require('marky');

marky.mark('expensive operation');
doExpensiveOperation();
marky.stop('expensive operation');

Marky, a high-resolution JavaScript timer based on performance.mark() and performance.measure()

Elsewhere , , , , Leave a comment

Show Facebook Computer Vision Tags Chrome Extension

Since April 2016, Facebook has been automatically adding alt tags to images you upload that are populated with keywords representing the content of your images.

This Chrome Extension visualizes the tags (which can be found in the markup)

<img src="https://facebook.com/some-url.jpg"
alt="Image may contain: golf, grass, outdoor and nature"
width="316" height="237">

Show Facebook Computer Vision Tags Source (GitHub) →
Show Facebook Computer Vision Tags on the Chrome Webstore →

Elsewhere , , , Leave a comment

twitter-export-image-fill

Twitter allows you to download your tweet archive, but that archive doesn’t contain your images. Ergo, it is not really an archive.

This script downloads all the images from your tweets locally and rewrites the archive files so that they point to the local images.

twitter-export-image-fill

Elsewhere , , , Leave a comment

Private Packagist

Mid-December Nils Adermann – Co-Founder of Packagist Conductors & Creator of Composer for PHP – announced Private Packagist.

Being a hosted service, setting up your own Composer package repository on Private Packagist is done with a few clicks. No matter if your private source code is hosted on GitHub, GitLab, Bitbucket, any of their on-premise solutions, or in any other Git, Mercurial, or Subversion repository, Private Packagist can immediately access your code after setting up your credentials to make it available for installation through Composer.

A few years ago I tried setting up Satis, but that didn’t quite work out. Private Packagist would’ve been handy back then 🙂

Private Packagist →
Introducing Private Packagist →

Elsewhere , , , Leave a comment

Owl

This owl was drawn by Dorota Pankowska using 13 circles, like Twitter’s Bird Logo:

If you can make a bird out of circles, then you can probably make all sorts of animals. I wanted to add something more design-based to my portfolio, so I made that my personal challenge. The idea was to draw animals from exactly 13 circles, and I decided to match that number by making 13 animals.

13 animals made from 13 circles →
Illustrating Animals With 13 Circles: A Tutorial And Drawing Challenge →

Elsewhere , , Leave a comment

Front-end Style Guides – Creating and Maintaining Style Guides for Websites

Anna Debbenham – creator of styleguides.io – wrote a book on … Style Guides:

Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have used them. It’s packed with practical tips, whether you’re starting from scratch or assembling one for an existing site.

This book is for people who build stuff for the web and want to make their own style guides. It’s full of techniques, practical advice and examples for both coders and non-coders.

It’s in my library, waiting to read 🙂

Front-end Style Guides →

Elsewhere , , , Leave a comment

Resilient Web Design

Jeremy Keith wrote a book, “Resilient Web Design”, on how to build a web that lasts:

With a title like Resilient Web Design, you might think that this is a handbook for designing robust websites. This is not a handbook. It’s more like a history book.

[…]

You won’t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code.

Jeremy’s writing style – just like his style of speaking – is very inspiring and packed with lots of relevant backstory.

Resilient Web Design, by Jeremy Keith →

Elsewhere , , , Leave a comment