🚚 How to migrate to Kirby Tips & tutorials
Skip to content
    Search by Algolia

    Episode 12

    02 Jun 2017

    With this 12th episode, Kirby Kosmos celebrates its first birthday!

    Powered by Kirby

    It's always inspiring to see what others are creating with Kirby. This month’s picks are again very different and very unique:

    Diverently
    Digital Media

    Timothy Achumba
    Designer at Microsoft

    Fresh Kirby Plugins

    • JSON Feed is a new format for adding feeds to your site, similar to RSS or Atom, but not based on XML but JSON. And guess what? There is already a Kirby plugin by Stefan Zweifel that supports this new standard, so you can start adding a JSON feed to your blog (free).

    • The Sharingbuttons plugin by Flo Kosiol provides a page method to add the no-js-no-tracking sharing buttons by [http://sharingbuttons.io] to your website (free).

    • Florian Karsten developed Kirby Tablex, a new field for Kirby that allows you to integrate tables into your page. You can limit the number of columns and add a header via blueprint settings (free).

    • David Somers' Kirby Cache Widget plugin includes two Panel widgets that provide information about the PHP opcode cache/PHP object cache. You can also flush the cache via those widgets (free).

    • Check your SEO status with this new Panel widget by Sander de la Marche (free).

    Case Study: Interface Lovers

    Interface Lovers is an "online magazine for creative professionals". Read about how and why they use Kirby to power their website in our latest case study.

    Cookbook: RelMeAuth

    RelMeAuth is a proposed web standard that combines the advan-tages of logging in with a social media account and with your email account. Learn how to set up RelMeAuth on your Kirby website with Lukas' new cookbook recipe.

    Article: Decoupled Kirby

    In his article Mec Rawlings shows how he used Kirby to create a RESTful API, which he could then consume in a single page app using React.

    CSS

    • There are a couple of well known relative length units in CSS, like em or rem. But did you know that you can also use width: 10ch to make a box exactly 10 characters wide based on the elements' font? Works best with monospace fonts, of course.

    • Breaking out of a fixed width layout to fill the full viewport is usually achieved using negative margins. This article shows how to do this in a smarter way with CSS grid layout.

    • What methods can we apply to contrast text against backgrounds? As often, the answer depends on the use case and on browser support. Check out this article on CSS Tricks for some options.

    • Want to integrate tooltips into your site? Microtip is a tiny CSS-only tooltip library.

    Tools

    • Clippy is a useful little tool that helps you to create CSS clip-path shapes.

    HTTPS

    • Setting up HTTPS locally can be tricky and result in browser privacy errors. This article shows you how to set up self-signed certificates and shut up browser complaints.

    Responsive Design

    CORS

    • For security reasons, the same origin policy usually prevents that a website can access resources on another website. But there are times when we want to do exactly that. Martin Splitt has a guided tour on CORS for us that explains how to achieve that.

    Email

    • As web developers, we often have to get our hands dirty with HTML email. This article on CSS tricks collects some tools that might be useful if you want to create standalone HTML email or integrate a workflow into your Kirby site.