🚀 A new era: Kirby 4 Get to know
Skip to content
    Search by Algolia

    Episode 54

    12 Mar 2021

    I have to say that Kirby, its staff & the surrounding community have played no small role in enriching my abilities as a developer, and boosting my confidence to tackle this new step [as a freelance developer), so i wanna say thank you! (Bruno Mokross)

    You cannot imagine how happy we are whenever we get such feedback from our users. It motivates us in our strive to get better every day, it helps us overcome those roadblocks that are an inevitable part of a developer's every day life, inspires us to look for new and better solutions. So thank you everyone for your kind words and support.

    Kirby in the wild

    Websites created with Kirby out in the wild are always a great source of inspiration and show that with its flexibility and extensibility there are hardly any limits to what you can create with Kirby.

    Designworkplan: Wayfinding studio and Learning Platform

    Plugins & Kits

    Kirby Vitekit is an alternative starter kit that combines Vite.js with a public folder setup for Kirby.

    And it seems that Vite.js is the new cool kid on the block, since with the Kirby Vite plugin you get another option as it provides a set of helper functions to get the correct path to your versioned CSS and JS files generated by Vite.

    Kirby Multilistis basically a structure field on steroids with inline editing capabilities.

    MetaKnight is a powerful search-engine-optimization (SEO) plugin for Kirby. Jonathan Muth from diesdas.digital gives some insights about the background of this plugin.

    With the Code Editor field you get code highlighting, optional line numbers, tabs or spaces for intentation and support for various languages in the Panel.

    Anotherkit: Get started with Kirby, TailwindCSS 2.0 and AlpineJS.

    Add a floating button with links to services like Twitter, WhatsApp etc. to your site with the Kirby Feedback Button plugin.

    Kirby Memberkit: A versatile Kirby membership plugin powered by Stripe subscriptions.

    Always test third-party plugins thoroughly before using them in production. Note that we do not test plugins we list here.

    Cookbook recipes

    Our new cookbook recipe Creating a custom block type from scratch covers all the steps necessary to create a feature-rich block type complete with a preview for audio files. With To bundle or not to bundle there's an accompanying recipe that shows you how you can build the same block without the pains of a build process if you want, even if you lose the simplicity and power of single file components.

    Tools

    The Raycast Mac app lets you control your tools with a few keystrokes, and Script Commands makes it possible to execute scripts from anywhere on your desktop.

    Murex features a bash-like $SHELL designed for greater command line productivity and safer shell scripts.

    Rclone is a command line utility like rsync but for cloud storage with support for over 40 cloud services.

    Hiding content

    content-visibility is a new CSS feature (available in Chromium 85) that intends to speed up page load performance by suppressing an element's rendering work while that element is off-screen. However, this behavior can impact accessibilty as Marcy Sutton points out in her article.

    Kitty Giraudel discusses ways to hide content, be it through HTML or CSS, in a way to still make it accessible to screen reader users.

    Frontend

    Una Kravits has collected ten single line layouts to show how a single line of styling can impact a page's or element's layout.

    In Through the pipeline, Andrew Walpole compares three frontend bundlers: Parcel, Rollup, and esbuild. If you are looking to get into bundlers, maybe it's worth a look.

    With SmollCSS, Stephanie Eckles has put together a collection of snippets for modern CSS layouts and components.

    In his article The Beauty Of Tiny Enhancements In CSS, Ahmad Shadeed points out modern CSS features we can use that when not supported, fall back to decent browser defaults (and which properties don't).

    The :is() pseudo-class is a nice way to write more compact CSS and make code more manageable. Browser support is also pretty decent even though the feature is relatively new.

    Parvus is a lightweight image lightbox with a focus on accessibility in plain JavaScript.

    Performance

    Eight image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.

    This & That

    What does separation of concerns mean in the context of coding, which factors are important, and why and how implement it?

    There is something about social media that human beings are not psychologically prepared for. It is a perverse and unnatural abstraction of human social community to which our brain does not react well. (Craig the Computer Guy)

    Creating an accessible current page navigation state.

    If you are interested in getting into system administration, you can follow a video course from the Stevens Institute of Technology. More details about the course in the video descriptions.