Episode 40

It is decided! Meet other Kirby users, developers and the team on March 21, 2020, in Mainz, Germany, for our very first Kirby Konf ever.

Last week, Bastian and I met with Flo Kosiol and the people from 3st digital, who invited us to host the conference in their offices, a beautiful venue facing the river Rhine. We are very much looking forward to meeting you all there. If you want to attend, click the "Attend" button on the conference website. You can discuss your ideas for the event in our Kirby Konf repo.

Trioceros is here!

Also known as Kirby 3.3.0 and probably the Kirby 3 release with the longest changelog so far. Hundreds of GitHub issues were closed during its development. Some highlights: Search and pagination in users, pages and files fields, language specific SmartyPants, unsaved changes' overview in the Panel, new icons, a last minute config option, and a lot more.

Kirby Editor 1.0.0

Kirby Editor is a new official visual writing and layout field for Kirby – and a game changer. Compose long-form text with consistent inline styles. Add images, videos, quotes and more. Bring your own block types and always rest assured that the output will be valid, customizable HTML. On top, it delivers structured JSON content you can use for different output channels. And you can even import and export content.

Kirby plugins

Automatically convert uploaded files to WebP on the server with the Kirby WebP plugin. It comes with a snippet and a KirbyTag to include WebP images in your website.

The Kirby 3 Stopwatch plugin is wrapper around the Symfony Stopwatch component and provides a way to measure execution time of parts of your code.

The Color Palette plugin now comes with a branch that does not store a color value but you predefine, for example a CSS class, that can then be used in your templates.

The Murby Starterkit comes with Composer workflow, webpack, SASS, Babel, and more.

And there's a new Sitemap plugin with support for multi-language sites.

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

Kirby tip of the month

In a multi-language site, you can use $page->translation($langCode)->exists() to check if a translation file in the given language exists. You can also use this to filter pages by existing translation.

$translatedPages = $page->children()->filter(
    fn ($child) => $child->translation($kirby->language()->code())->exists()
);

If you want, you can wrap this code in a custom method. Keep in mind that this doesn't mean the page was actually translated. If you want to make sure that a page is fully translated, a checkbox or toggle field that marks a translation as ready for publication is the better option.

Kirby Docs

We enhanced the Virtual Pages guide with a more detailed database example, content locking docs and a chapter about merging local data with data from other content sources.

Kirby in the wild

forStory GmbH

CSS

Lukas Kleinschmidt created a utility class generator like Tailwind CSS but in pure SCSS.

Styling underlines will finally be a lot more powerful with new CSS options. Check them out in this video by Jen Simmons.

For inspiration: A collection of CSS Grid magazine style layouts by Olivia Ng.

Security

Rasmus Lerdorf shows how to create Let's Encrypt SSL certs for wildcard domains.

Images

Image orientation is often a problem when uploading images to a website. Michael Scharnagl writes about the current status of image orientation on the web, how to correct orientation of images using Node.js, and how browsers will handle this in the future.

A11y

Marco Zehe shares a tutorial about how to leverage Firefox' accessibility toolsto identify and fix many common accessibility mistakes and practices.

This & That

With the RoughViz JavaScript library you can create casual hand-drawn-style visualizations.

Michelle Barker published a three part series about modern frontend workflows.

Moss calls itself "the virtual sysadmin for web developers" and allows you to manage and monitor your Ubuntu servers, deploy your web apps and get alerted when things break. Commercial service with free plan available.

Rose Eveleth about ethics and why technology evolution is nothing inevitable.

Relative clip path is a little online tool to convert an absolute SVG clip path to a relative one.