Episode 12
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: 10chto 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
- Designing responsively does not only mean designing for different devices but also for different user groups. With the
prefers-reduced-motionmedia query supported by Webkit browsers, we can now serve alternate animations to users that might suffer from motion sickness.
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.
- 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.