bastianallgeier

<?php 

// register a field 
$kirby->set('field', 'author', 'field/author');

// register blueprints
$kirby->set('blueprint', 'blog', 'blueprints/blog.yml');
$kirby->set('blueprint', 'article', 'blueprints/article.yml');

// register a widget

bastianallgeier

(function($) {

  $.fn.myfield = function() {

    return this.each(function() {

      var field = $(this);

      // avoid multiple inits
      if(field.data('myfield')) {

bastianallgeier

kirby-plugin => site/plugins/{name}
kirby-field => site/fields/{name}
kirby-tag => site/tags/{name}.php

bastianallgeier

<?php 

$files = [];

foreach($blog->children()->filterBy('customfield', 'customvalue')->shuffle() as $article) {
  $files[] = $article->file();
}

bastianallgeier

$('a').each(function() {
  if(this.host !== window.location.host) {
    $(this).attr('target', '_blank');
  }
});

bastianallgeier

Kirby + Patterns = <3

When I heard about Brad Frost's Patternlab for the first time at beyond tellerrand I was intrigued. The idea of splitting your design work for a website into simple modules or patterns isn't new and starts to become more and more of a standard. But organizing this into a very visual styleguide/patternlab seemed to make so much sense. Brad also introduced a very interesting approach with his separation of modules into categories, such as atoms, molecules and organisms.

I started porting Brad's patternlab app to Kirby, but it never really made it to something polished and it turned out for me after using it for Kirby's panel UI, that it's actually a pain in the ass to maintain such a pattern collection.

The problem of patternlab

The problem with such a styleguide or patternlab is that it exists next to the real thing. When you change something in your code base you also have to update the particular code for the pattern in patternlab. To be honest I went very quickly from being

bastianallgeier

<ul class="menu cf">
  <?php foreach($pages->visible() as $p): ?>
  <li>
    <a <?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>

    <?php if($p->hasVisibleChildren()): ?>
    <ul class="submenu">
      <?php foreach($p->children()->visible() as $p): ?>
      <li>
        <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>

bastianallgeier

When I was a beginner…

This is a little exercise to try remember the things I struggled with, when I got started with web development. It's too easy to forget about those things after years in business. I think it's super important to keep the ability to put yourself back into the position of a beginner from time to time in order to not overcomplicate your own work and to not throw the typical "just" and "simply" sentences at other people, who get started.

The following list is not complete or very detailed. It's really all about writing down some memories quickly. Feel free to follow this experiment for yourself if you think it's useful.

HTML

• Breaks. Why the hell doesn't text wrap in the browser when I add a line break to the source code?
• Paths: I absolutely struggled with the basic concept of absolute and relative paths and why stuff doesn't get loaded correctly when I messed paths up in URLs.

bastianallgeier

<? if($image = $article->image()): ?>
<?= $image->resize(300,200)->html() ?>
<? endif ?>

bastianallgeier

<!-- create the complete html img tag for a given image -->
<?= $page->image()->html() ?>

<!-- modify the attributes of the img tag -->
<?= $page->image()->html(['class' => 'myImage']) ?>

<!-- resize an image first and then get the img tag for it -->
<?= $page->image()->resize(300,200)->html() ?>