Notes

⇾ Handling images in Kirby

| | permalink

Sonja Broda, aka texnixe, has written a very nice article about how to handle images in Kirby.

Read: Handling images in Kirby

⇾ Do responsive sites have to be so tall on mobile?

Kevin Vigneault asks an interesting question with:

Do responsive sites have to be so tall on mobile?

He doesn’t only ask the question, but comes up with some thoughts on what to change in his opinion.

Read: Do responsive sites have to be so tall on mobile?

V for Wikipedia

| | permalink
Screenshots of the app V for Wikipedia
Great reading experience, useful app: V for Wikipedia by Frank Rausch

I don’t stumble across or download a lot of new apps these days. In September last year though, at the Typo Days in Cologne, I have seen an ace talk by Frank Rausch, who later also spoke at beyond tellerrand in Berlin (<- links to the video of his talk). In his talk he spoke about his app and how he dealt with typographic hurdles and difficulties, when it came to displaying all the information that Wikipedia provides in a good to use and good to read, but also beautiful way. As I was curious, I bought his app right after the talk and am happy to suggest you to do the same.

His app, called V for Wikipedia, is not only one of the best designed apps I have seen for a while, when it comes to typography and how he displays information from Wikipedia, but it also is a lot of fun to use with extra feature, you don’t have when using Wikipedia directly. It is so much fun to use, that since I got it, I must have convinced at least 25 people (if not more) to also get it, only by showing them how I use it, when we are out in a city. I love the “Nearby Places” feature and often use it, when I am somewhere for an event and want to check what else is interesting around me, to explore a few places. Of course the reading experience is fantastic as well, as I said earlier. V for Wikipedia supports a lot of different languages and it is super easy to switch from one to another – in my case often between Englisch and German.

Visit Frank’s V for Wikipedia website and check all the features in detail to get an impression. But honestly, if you use Wikipedia usually, you’ll love this app. And if you don’t use Wikipedia, you’ll do from now on ;)

Interneting is hard

Oliver James has created a very nice and useful resource to learn about the Internet called Interneting is hard. It is not, like Jeremy’s Resilient Web Design, about the history of the Web, but nicely written tutorials for beginners.

Image with example of text and image combination
Clean typography and illustration style support the good reading and learning experience.

Many chapters, well illustrated and easy to read and understand makes this source a really good starting point for anyone starting from scratch. The hands-on examples help to understand and learn what you just read. And the best part: it is totally free!

Check Interneting is hard

⇾ Skateguitar

| | permalink

What a lovely project. Skateguitar.

We are two friends who once had an idea to combine our passion for skateboarding and music.

Gelato Affogato

| | permalink
Gelato Affogato
Yummy!

Inspired by Erik Spiekermann and Brendan Dawes lately: Gelato Affogato after lunch using vanilla ice cream and Letterpresso beans for the coffee.

Playing with Tuna

| | permalink

Last night I was playing around with Tuna as I said earlier this week. I really like the typeface and I used the option of MyFonts to temporary use it locally on my machine to test it. I quickly changed the css to use Tuna. It would certainly need some fine tuning and playing with weights here and there, as well as some more line-height for the text bodies with more text, like in the blog posts.

A few examples as screenshots side to side. On the left side you see Tuna in use and on the right side the actual Quatro Slab with Fira Sans. Again, these are only quick sketches and also screenshots are all shrunk to fit my blog width. But I wanted to get a first impression.

Click on the images for a large screenshot made on a retina display.

Screenshot of the masthead of the home page
Masthead with Tuna thin italic for the quotes.

I really like the thin italic version of Tuna. It look more elegant than the italic Fira Sans.

I am not sure about the main navigation and might play around with different weights here next. I think it might use the forced bold variation of regular in this screenshot anyways, which is wrong of course Also on the call to action buttons, I think a bolder variation would be better of course.

But as said, I wanted to get a quick, first impression.

Screenshot of the events home page with speakers grid
Events homepage with speakers grid and intro text.

I was not sure about the main headline, but I have chosen the light italic version for h1. It looks completely different to the very bold Quatro Slab but somehow I like it.

I also like the speaker grid variations of the text. The read names in regular and the topic in italic.

Again I am not sure about the event navigation as it is right now. Needs some tinkering to find out what looks best.

Screenshot of job list on beyond tellerrand job board
beyond tellerrand Job Board with job list

I like the look and feel of the job list – which also looks similar to the blog list. The overall feeling is lighter without being actually much lighter than the Fira Sans version. Except form the main headline, where I have chosen a thin and light version as said.

Screenshot of news on home page
Latest news on the landing page.

I also like how h2, the green one, looks. Maybe I go with the bold version here, just to have some more contrast and a bit more “fun” for the eye.

In general I quite like the look and feel with Tuna. I think a bit more line-height for the text is needed and some tinkering with weights for the headlines and buttons as well as details like the teaser text in the masthead. I really like to hear from you: What do you think?

Plugins for IndieWeb and Kirby

If you use Kirby and are interested in the IndieWeb topic, you might like what Sebastiaan Andeweg is working on and releasing on GitHub at the moment.

Micropub Plugin

He released a Micropub endpoint for Kirby. In a blog post, he explains what basic a micropub endpoint, which he added to his toolkit (se further down) does. For Kirby, he has written a Kirby Micropub Endpoint.

Webmention Plugin

In addition, he published a webmentions plugin, which is also based on Bastians first version of the webmention plugin for Kirby. Webmentions are:

Webmention is a simple way to notify any URL when you link to it on your site. From the receiver's perspective, it's a way to request notifications when other sites link to it. Webmention is a modern update to Pingback, using only HTTP and x-www-form-urlencoded content rather than XMLRPC requests. Webmention supersedes Pingback.

Read more about what webmentions are on the IndieWeb site

IndieWeb Toolkit

Last but not least Sebastiaan is working on an IndieWeb toolkit. Is is meant to be used next to the Kirby Toolkit by Bastian Allgeier.


And if this all is not enough, you can use his IndieWeb news aggregator called IndieNews, which aggregates the news directly from https://news.indieweb.org/ ;)

⇾ You might not need JS

| | permalink

JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.

Look what was in my post today

| | permalink
A copy of Brad Frost’s Atmoic Design Book

More or less exactly one year ago, I have written a little post about Brad Frost’s Atomic Design Book. Back then it was ready to be pre-ordered and meanwhile it was published and Brad was busy packing and shipping the book to destinations all around the world.

Today, when I checked what was in my snailmail, I found this little package from Brad. Included was one edition of his book and stickers. But what made me happy was a personal by Brad.

Thanks a lot, Brad. You made my day ;)