Episode 14
Kirby Next now has over 120 supporters. During the first 4 weeks of our experiment, we had 5 live sessions with Bastian, interesting insights and lively discussions on Slack. The first working Kirby 3 website to play around with is also available now. Curious? You can still become a supporter by buying a fellowship package, a Kirby 3 Pro license or a Kirby 3 Pro upgrade.
We will be running our first ever Kirby Workshop on November 6, 2017 in Berlin. There are still a few seats left, so if you want to learn how to build great websites with Kirby, reserve your seat now.
Kirby 2.5.3 and 2.5.4 were released this week and come with some nice little feature additions and bug fixes.
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:
Fresh Kirby Plugins
-
If you need a queue to do stuff in the background like sending webmentions etc. using Cron jobs, check out Sebastiaan Andeweg's Queue for Kirby plugin (free).
-
Adding Fontawesome icons within KirbyText becomes a breeze with Julien Gargots new plugin (free).
-
Getcached saves the result of an f::read() request in Kirby's local cache folder.
-
Convert HTML markup to KirbyText using the HTML2Kirby plugin for Python by Liip (free, under development).
-
Lauri Liimatta shares his Grid Gallery plugin that provides a Kirbytag for inlining CSS grid layout based galleries into your textarea fields in browsers that support CSS Grid. Falls back to floats in older browsers (free).
-
Dennis Kerzig's Lightbox Gallery plugin is flexbox based and uses Photoswipe to add a lightbox gallery via a Kirbytag (free). Dennis also just created a brand-new HTML5 Video Kirbytag.
Note: Both gallery plugins use the "gallery" Kirbytag, so you will have to change their settings if you want to use both in a single project.
Illustrated Radio Buttons/Checkboxes
Add visual clues to radio buttons or checkboxes using two new plugins by Sylvain Jule (free).
Kirby Themes
Kollapse is the latest Kirby Theme by Jori Yordanov. It comes with a lot of components and options to customize the theme.
Accessibility 1
Use the Contrast Ratio online tool by Lea Verou to get instant information about the contrast ratio of foreground and background colors.
Accessibility 2
On Inclusive Components, Heydon Pickering published a new tutorial on creating inclusive tooltips.
CSS
-
CSS variables allow you to store values for reuse throughout a stylesheet. These can also be used with animations, adding a lot of flexibility. If you want to know more, check out this tutorial that also lists some demos from different developers.
-
CSS grid layout isn't supported in older browsers. A new article on Smashing Magazine explains how to progressively enhance layouts from floats to flexbox to grid.
-
Rachel Andrews initiated a CSS Grid bugs collection on GitHub. Might become a useful go-to resource to learn more about these bugs or contribute if you find any.
Design Versioning
- Of course, we can use Git and GitHub for design versioning, but it is not the only or necessarily the best option. This article discusses some alternatives for designers.
Performance
- Harry Roberts writes about stress testing third party resources we use in our projects like fonts, analytics, CDNs etc.
Developer Tools
-
Get alerted to JavaScript errors without having to open dev tools with JavaScript Errors Notifier Chrome extension (via Jens Törnell).
-
Let me finish off with a second Chrome extension that makes minified CSS, JavaScript etc. easily readable (via Jens Törnell).