CSS3 Grid By Example

grid-by-example

I have been writing and speaking about the CSS Grid Layout Module for some time now. In order to learn how Grid works I’ve put together lots of small examples, and I am publishing them here as a resource for anyone else interested in this emerging specification.

Great to see these all bundled up on one website.

Grid by Example – Simple usage examples for the CSS3 Grid Layout Module →

Elsewhere , , , Leave a comment

SVG and <picture>

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source type="image/svg+xml" srcset="path/to/header--full.svg">
    <source type="image/svg+xml" srcset="path/to/header--medium.svg" media="(max-width: 1024px)">
    <source type="image/svg+xml" srcset="path/to/header--small.svg" media="(max-width: 640px)">
    <!--[if IE 9]></video><![endif]-->
    <img src="path/to/header-1x.png" srcset="path/to/header-2x.png 2x, path/to/header-3x.png 3x" alt="Header description">
</picture>

Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you’re in need of interactivity or external styling, <img> is the standard way for loading an SVG image, but it has one disadvantage: you currently need JavaScript to provide fallback and/or change the image source for art direction. In this post, I’ll talk about a better way to do that, using the <picture> element.

Don’t forget to include PictureFill ;)

Better SVG Fallback and Art Direction With The <picture> Element →

Not familiar with <picture>? Be sure to read Introducing the <picture> element and Native Responsive Images first.

Elsewhere , , , Leave a comment

CSS Ruler

css-ruler

Great tool for those getting started at CSS to let them more easily wrap their head around the various CSS units used.

CSS Ruler →

Related: CSS Length Explained, a more theoretic approach

Elsewhere , Leave a comment

StackPHP – HttpKernelInterface based middlewares

onion

The HttpKernelInterface models web request and response as PHP objects, giving them value semantics. Stack is a convention for composing HttpKernelInterface middlewares. By wrapping your application in decorators you can add new behaviour from the outside.

In the screenshot above Session is a decorator wrapped around Authentication which itself is a decorator wrapped around the original $app. The incoming $request is passed through these three layers, one after the other.

The key part of StackPHP is \Symfony\Component\HttpKernel\HttpKernelInterface: each layer must implement it.

<?php namespace Cartisan\Middleware;

use Cartisan\Core\App;  
use Symfony\Component\HttpFoundation\Request;  
use Symfony\Component\HttpKernel\HttpKernelInterface;

class Logger implements HttpKernelInterface  
{
    protected $app;

    public function __construct(HttpKernelInterface $app)
    {
        $this->app = $app;
    }

    public function handle(Request $request, $type = self::MASTER_REQUEST, $catch = true)
    {

        // Add logic here to be placed in the request response cycle
        // ...

        // Call handle on inner layer
        return $this->app->handle($request);

    }
}

Stack — HttpKernelInterface based middlewares →
StackPHP Middleware →

(via)

Elsewhere , , Leave a comment

Easy Textures with CSS Masks

grit
.grit {
 -webkit-mask-image: url("grit.png");
 mask-image: url("grit.png");
}

With the above image, the areas with partial and full transparency will mask the element (allowing the background to show through), while fully opaque areas (of any color) will allow the element to be visible.

Then simply apply it as a mask image in CSS with only 2 lines of code!

Elsewhere , , Leave a comment

Polylion: SVG polygon animation

lion-head-motion

Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>.

// SCSS
@keyframes polyonlion-animation {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.polyonlion > g polygon {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;
  }
}

@for $i from 1 through $polyonlion-count-face {
  .polyonloaded .polyonlion > g#polyonlion-face polygon:nth-of-type(#{$i}) {
    animation: polyonlion-animation 100ms linear 1 forwards;
    animation-delay: 0.0275s * $i; // 0.0275s * 1, 0.0275s * 2, etc.
  }
}

Polylion →

Elsewhere , , , Leave a comment

Alto’s Adventure

Alto’s Adventure is an endless snowboarding odyssey, set against a beautiful and ever changing alpine landscape.

Great atmosphere and quite fun :)

Alto’s Adventure →

Elsewhere , , Leave a comment

Recommended Reading: Modern PHP

modern-php

PHP is experiencing a renaissance, though it may be difficult to tell with all of the outdated PHP tutorials online. With this practical guide, you’ll learn how PHP has become a full-featured, mature language with object-orientation, namespaces, and a growing collection of reusable component libraries.

Author Josh Lockhart—creator of PHP The Right Way, a popular initiative to encourage PHP best practices—reveals these new language features in action. You’ll learn best practices for application architecture and planning, databases, security, testing, debugging, and deployment. If you have a basic understanding of PHP and want to bolster your skills, this is your book.

Having skimmed the book I must say it’s a very good resource. Except for a few minor remarks here and there, it’s a rock solid book touching not only PHP specific stuff, but also some of the extra stuff one must be aware of: Namespacing, Traits, Composer & Packagist, Password Encryption, Unicode, SSH, Deployment, Unit Testing, …. The only thing I found missing was a (little) section on Dependency Injection.

Sidenote: It’s also nice to see that there’s quite an overlap between the book and my PHP course materials (part 1 + part 2) and its lab assignments (unfortunately not freely available online).

O’Reilly: Modern PHP →

Elsewhere , , Leave a comment

PHP Scalar Type Hints, Follow-up

php-logo

The vote for the RFC “PHP Scalar Type Hints” got cancelled, after the author of the RFC – Andrea Faulds – posted “I Quit” on the internals list:

For my own reasons, I have decided to cease my involvement with PHP development. […] I’m no longer contributing to PHP, and all four active RFCs authored by myself are therefore withdrawn: Scalar Type Hints, Spaceship/Combined Comparison Operator, Void Return Type, Big Integer Support.

Very sad, yet it’s a choice one must respect.

Whilst the vote still was open, my eye fell on “Do NOT work around weak typehints, but fix them” by Bob Weinand, who voted “no”. His conclusion read:

[…] I voted no on the RFC. Not because it is a bad RFC nor a bad concept, it just tries to fix the problem the wrong way. It is a workaround around the too relax current type casting, which basically is the root problem to should be solved.

I think, working around the core problem is definitely not the way to go. Fix the core problem, then we don’t need strict scalar hints (as weak hints already will cover everything strict hints aim to solve) and unicorns stop dying so fast.

As someone who’s not familiar with how the voting system in the PHP community actually works this got me wondering why Bob’s argumentation made wasn’t noted somewhere along the RFC before the vote started. It’s a very reasonable argumentation, with some good points.

Now, whilst I do dig the gist of the RFC I wasn’t a fan of the suggested declare(strict_types=1) { … } myself either. If I were to vote on the RFC, it would have resulted in a “no” too, even though I like the essence of it. What seems to be missing on the vote is a “no, but …” (or even “yes, but …”) option, for people like Bob and me.

Getting lots of “no” votes is not pleasant, yet – when looking at the results of the ternary vote – I do suspect quite a few of those were more “no, but …” votes …

Perhaps there were too little possible options to vote for? Or perhaps the vote was opened too soon?

Elsewhere , Leave a comment

Compositing And Blending In CSS

css-blend-modes

Before the Compositing and Blending specification was introduced, CSS allowed one type of composite operations: simple alpha compositing. This is what the opacity property is for. By changing an element’s opacity, the browser makes it translucent so that the colors of its backdrop can show through.

Today, two main properties exist that allow us to blend elements and backround images by specifying one of 16 available blend modes. These two properties are background-blend-mode and mix-blend-mode. Let’s get to know each.

Compositing And Blending In CSS →

Elsewhere , , , Leave a comment