đź‘€ Get a glimpse of Kirby 5 Learn more
Skip to content
    Search by Algolia

    Episode 43

    14 Feb 2020

    As we promised in our last issue, one of our goals for 2020 is to put a stronger focus on marketing Kirby–not only to strengthen our Kirby user family but to support you–users, developers or agencies when convincing clients that Kirby is the optimal choice for a project.

    Your Kirby Personal Demo is here

    As a major step in this direction, here comes Kirby demo: discover Kirby instantly without installing. The demo features multiple site types integrated into a single site, showcasing the extreme flexibility of Kirby for your projects–big or small. As a demo user, access the Panel and explore Kirby's user-friendly editing interface: add blog posts, create new products, upload images to the gallery, edit and add users, and more. Check it out and let us know what you think! And if you are curious to know how we made it, visit the repo on GitHub.

    Kirby in the wild

    Be it a huge complex company website with thousands of pages or your personal portfolio, Kirby helps you build a first-class experience for editors and website visitors alike.

    Bauhaus is one of the largest DIY store chains in Europe. Richtig gut is a spin-off of their main website with instructions and inspiration around house and garden.

    OBS Studio is a free and open-source cross-platform streaming and recording software. The website is available in 16 languages built with Kirby's multi-language feature.

    Want to see more examples? Visit our showcase!

    New Releases

    Kirby 3.3.4 and Editor 1.0.2 will be released next week. You can already test the release candidates.

    Kirby tip of the month

    Did you know you can leverage the full power of KirbyText in info sections/info fields or help text and even combine that with Kirby's query language? In the example below, we insert a KirbyText link tag and dynamically add the page URL.

    fields:
  info:
  label: Event Schema
  type: info
  text: >
    After saving, use the <a href="https://search.google.com/structured-data/testing-tool#url={{ page.url }}">Google Structured Data Testing Tool</a> to verify the schema.

    Kirby plugins

    SEO previews

    Preview how your SEO fields will look in search results with the interactive, configurable Kirby SEO Preview Section.

    Internal links

    The Enhanced toolbar link dialog greatly simplifies adding internal links via the textarea field's link dialog.

    Colors is a field that allows selecting a color using the native color selector. Colors can be viewed and edited in either HEX, RGB or HSL.

    Embed content from YouTube without compromising privacy with the Video plugin.

    Selfauth is a modified version of the PHP library Selfauth as a Kirby 3 plugin and provides self-hosted authentication for the IndieAuth protocol.

    Schedule automatic publishing of page drafts at a certain date+time with the Autopublish plugin. Built to work with caching enabled.

    Always test third-party plugins thoroughly before using them in production.

    Kirby Cookbook

    The Cookbook is the place on our website where you find a collection of solutions you can build with Kirby with step by step explanations how to build them. Here are our recent additions:

    Uwe Gehring introduces an alternative setup for multi-site Kirby installations with an easy way to switch between Kirby versions.

    Based on an idea shared by Markus Denhoff, I wrote a little recipe how to fine-tune page cache exclusions dynamically.

    When faced with choosing the right KirbyText/KirbyTags hook for a task, it is important to know when they are called.

    Manuel Moreale presents his solution to share controllers across multiple templates.

    Learn how to create your first custom Panel field with our new step-by-step recipe.

    Do you want to share your Kirby solution with the community? Get a free Kirby license for every approved cookbook recipe. Contact us if you want to contribute!

    CSS

    Matthias Zöchling wrote about using CSS variables in style attributes and how they contribute to a better separation of concerns. To see this strategy in action, check out the template code of our new demokit.

    Michelle Barker shares a quick way to add dark mode support with CSS custom properties.

    About using CSS contain to improve performance by informing the browser about the layout.

    Git

    There are many great resources for learning Git, but if you don't have much time and are looking for Git in a nutshell, check out how to git.

    And while we're at it, get up to date with some useful new Git features in 2.23.

    Images

    FLIFis a lossless image format that claims to be superior to PNG, lossless WebP, lossless BPG and lossless JPEG 2000 in terms of compression ratio on a variety of inputs. Currently, a polyfill is needed for using the format in the browser.

    Michael Scharnagl explains how to leverage the Web Share API to share images to your website and handle the data.

    Progressively enhance image placeholders once they are in the viewport with the <progressive-image> custom element.

    This & That

    "Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text." (Adrian Roselli, Link targets and 3.2.5)

    There is business after the last third party tracker has gone: Basecamp.com claims they removed all third party trackers, massively reducing overall user data collection.

    Luke Dorny reports his experiences with redesigning his personal site with Kirby 3.

    Playwright is a Node library by Microsoft intended to automate UI testing.

    Intopia's WCAG 2.1 Map illustrates where each Success Criterion fits under the WCAG Principles, including its level of conformance.

    JetBrains released Mono, an open source typeface for developers.

    Marcus Herrmann writes about improved accessible routing in Vue.js.