Star Wars: Episode IX – Teaser Trailer

No One Is Ever Really Gone.

Also: Lando in the Falcon! 😎

Unsafe SQL functions in Laravel

Recently the folks from Spatie released a security update for their laravel-query-builder package. Turns out it was vulnerable to SQL Injection.

At the core of the vulnerability is the fact that Laravel offers a shorthand for querying only certain fields of JSON data, but that these do not get escaped when converted to a json_extract function.

Brent has a detailed writeup on this:

Instead of manually writing json_extract, we can use the simplified -> syntax, which Laravel will convert to the correct SQL statement.

Blog::query()
    ->addSelect('title->en');
SELECT json_extract(`title`, '$."en"') FROM blogs;

Be careful though: Laravel won’t do any escaping during this conversion.

If you were to change title->en – which could come from a URL or user input – to title->en'#, you’re in …

Thankfully by now a fix authored by Brent has landed in Laravel 5.8.11 πŸ™‚

Unsafe SQL functions in Laravel →
An important security release for laravel-query-builder

HTML slides without frameworks, just CSS

Creating a slidedeck with CSS is not really that difficult. Stack all slides on top of each other, and then make good use of the :target pseudo-class selector:

We adjust the z-index for the active slide to be higher than all the other inactive slides with our trusty :target selector.

section {
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}

section:target {
  z-index: 1;
}

Sprinkle some more CSS on top, and you can also build in transitions.

HTML slides without frameworks, just CSS →

πŸ’β€β™‚οΈ Mostly the :target selector is used to highlight the anchor you just jumped to. But did you know it can also be used to change the entire layout of your site?

Automatic GitHub Changelog Generator

If your code/project always uses Pull Requests to add/fix stuff in your code (e.g. no direct commits on master), then Changelog Generator will come in handy. It’s a CLI tool (written in PHP) that automatically fetches all closed PRs and Issues between the targetted and the previously tagged release.

Installation is possible using Composer:

$ composer require jwage/changelog-generator

Once installed, run it like so:

$ changelog-generator generate --user=jwage --repository=changelog-generator --milestone=0.0.7

The snippet above will check all closed PRs and Issues that landed in between the 0.0.7 release and the one before (e.g. 0.0.6) of the repo jwage/changelog-generator.

0.0.7
=====

- Total issues resolved: **1**
- Total pull requests resolved: **4**
- Total contributors: **3**

Improvement
-----------

 - [47: Upgrade Doctrine Coding Standards to 5.0](https://github.com/jwage/changelog-generator/pull/47) thanks to @jwage
 - [43: Generate alternative (Setext, without #) Markdown format for headers](https://github.com/jwage/changelog-generator/pull/43) thanks to @Majkl578
 - [38: Fix: Provide missing required php version in composer](https://github.com/jwage/changelog-generator/pull/38) thanks to @prisis
 - [32: Upgrade PHPStan to 0.10](https://github.com/jwage/changelog-generator/pull/32) thanks to @jwage

Adding the --prepend --file=CHANGELOG.md options, will automatically prepend its output to CHANGELOG.md.

πŸ’‘ In case you don’t always want to type the arguments you could define it as a custom composer command/script into your own project, or use a config file which is also supported.

Generate a Markdown Changelog from a GitHub milestone. →

AV1, the video codec of the future

Next to praising the AV1 Codec and providing conversion examples (using ffmpeg), Andrey Sitnik also gives a good overview on containers and codecs – concepts every web developer who embed video should know imho – in his post on the subject:

File extensions for video (.mp4, .wmv, .webm or .mov) barely represent containers. When you see a .mp4 extension, the only thing you can be sure about is that the MP4 container had been used to package a file. The choice of codec depends entirely on a creator: it can be H.264/AAC, or AV1/Opus, or something else.

Better web video with AV1 codec →

bramus/enumeration – A Package to work with Enumerations in PHP

Earlier this week I released a new package on Packagist. It’s a Package to work with Enumerations in PHP, named bramus/enumeration. The package is my own take on Enumerations in PHP, which grew over time.

πŸ‘¨β€πŸ’» Looking back at the code that eventually would form the basis for this package, I can see – thanks to Git – that I started working on it back in 2013 (😱). Back then PHP Enumeration packages were still sparse, unlike now.

The first implementation basically was a straight copy from this simple Enum class I had then found on StackOverflow. It’s only about a year ago though – when I started working on a new project, that makes heavy use of enumerations – that I started adding new features such as making enumerations instantiable, composed enumerations support, etc.

~

When first looking at a class built upon bramus/enumeration, you can see that it’s quite similar to other implementations (they, after all, all allow you to use enums)

<?php

use Bramus\Enumeration\Enumeration;

class Weekday extends Enumeration
{
	const MONDAY = 1;
	const TUESDAY = 2;
	const WEDNESDAY = 3;
	const THURSDAY = 4;
	const FRIDAY = 5;
	const SATURDAY = 6;
	const SUNDAY = 7;
}

When using the Weekday enumeration shown above, the package starts to differ from some other packages, as bramus/enumeration provides you with several methods to creating enumerations.

Next to directly accessing a value through the class constant’s identifier it’s also possible to instantiate a bramus/enumeration, either through its constructor or by calling a static function that holds the name of the identifier (thanks __callStatic()!).

Weekday::MONDAY
// ~> 1
$instance = new Weekday(1);
$instance = new Weekday(Weekday::MONDAY);
$instance = Weekday::MONDAY();

πŸ’‘ TIP: By allowing one to create instances of a Enumeration-extended class, you can type hint your enumerations when used as function arguments πŸ˜‰

After having created an instance of a bramus/enumeration class, you can access its data using some logically named accessors:

$instance->getValue();
// ~> 1

$instance->getIdentifier();
// ~> 'MONDAY'

And thanks to its __toString() implementation you can easily pass these instances into query builders and the like, the value will automatically be returned (as a string)

(string) $instance;
// ~> '1'

~

Each class that builds upon bramus/enumeration also has some static functions for:

  • Converting between values and identifiers:

    Weekday::toValue('MONDAY');
    // ~> 1
    
    Weekday::toIdentifier(1);
    // ~> 'MONDAY;
  • Listing values and identifiers:

    Weekday::values();
    // ~> [1, 2, 3, 4, 5, 6, 7]
    
    Weekday::identifiers();
    // ~> ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']
  • Validating values and identifiers:

    Weekday::isValidValue(2);
    // ~> true
    
    Weekday::isValidValue(8);
    // ~> false
    
    Weekday::isValidIdentifier('TUESDAY');
    // ~> true
    
    Weekday::isValidIdentifier('SUMMERDAY');
    // ~> false

~

If you want, you can define a default value to use for a bramus/enumeration. To achieve this, define it as a constant named __DEFAULT on your class and you’re good to go:

<?php

use Bramus\Enumeration\Enumeration;

class Weekday extends Enumeration
{
	const __DEFAULT = 1;

	const MONDAY = 1;
	const TUESDAY = 2;
	…
}
$instance = new Weekday();

// object(Weekday)#424 (2) {
//  ["value":"Bramus\Enumeration\Enumeration":private]=>
//  int(1)
//  ["identifier":"Bramus\Enumeration\Enumeration":private]=>
//  string(6) "MONDAY"
//}

~

Where bramus/enumeration differs from almost all other enumeration packages, is the fact that it also allows one to create Composed Enumerations. These are enumerations that are composed of other enumerations.

A typical example would be the implementation for HTTP Status Codes. Since they are defined in groups, it would be logical to also implement ‘m that way, and then to combine ‘m.

<?php

namespace Bramus\Http\StatusCodes;

use Bramus\Enumeration\Enumeration;
use Bramus\Enumeration\ComposedEnumeration;

abstract class Informational extends Enumeration
{
	const CONTINUE = 100;
	const SWITCHING_PROTOCOLS = 101;
	const PROCESSING = 102;
	…
}

abstract class Success extends Enumeration
{
	const OK = 200;
	const CREATED = 201;
	const ACCEPTED = 202;
	…
}

abstract class Redirection extends Enumeration
{
	const MULTIPLE_CHOICES = 300;
	const MOVED_PERMANENTLY = 301;
	const FOUND = 302;
	…
}

abstract class ClientError extends Enumeration
{
	const BAD_REQUEST = 400;
	const UNAUTHORIZED = 401;
	const PAYMENT_REQUIRED = 402;
	…
	const IM_A_TEAPOT = 418;
	…
}

abstract class ServerError extends Enumeration
{
	const INTERNAL_SERVER_ERROR = 500;
	const NOT_IMPLEMENTED = 501;
	const BAD_GATEWAY = 502;
	…
	const NETWORK_AUTHENTICATION_REQUIRED = 511;
}

class StatusCode extends ComposedEnumeration
{
	public static $classes = [
		'\Bramus\Http\StatusCodes\Informational',
		'\Bramus\Http\StatusCodes\Success',
		'\Bramus\Http\StatusCodes\Redirection',
		'\Bramus\Http\StatusCodes\ClientError',
		'\Bramus\Http\StatusCodes\ServerError',
	];
}

⚠️ Due to PHP not having something like __getStatic() you cannot access constants directly on Composed Enumerations. You must use the direct value in the constructor to create instances when working with Composed Enumerations.

use Bramus\Http\StatusCodes\StatusCode;

// $instance = new StatusCode(StatusCode::OK); <-- This won't work,
$instance = new StatusCode(200);

Due to this limitation, the __callStatic() method to creating instances is recommended, as it works on both singular as composed enumerations:

$instance = StatusCode::OK();

πŸ’‘ If PHP were to support __getStatic(), I would be able to reroute the request to the correct constant on any of the contained classes and return the correct result … but that’s unfortunately not the case right now.

Default values also work with Composed Enumerations:

class StatusCode extends ComposedEnumeration
{
	const __DEFAULT = 200;

	public static $classes = [
		…
	];
}

~

Also shipping with bramus/enumeration are two utility classes. Whilst you most likely don’t need to use these directly, they might be of help:

  1. \Bramus\Enumeration\Helpers\Extractor

    This class extracts constants/identifiers/values from enumerations. It is used by \Bramus\Enumeration\Enumeration internally.

  2. \Bramus\Enumeration\Helpers\Generator

    This class allows one to generate instances of enumerations. Given the example \Bramus\Http\StatusCodes\StatusCode class from above, its usage might be something like this:

    use Bramus\Enumeration\Helpers\Generator;
    
    Generator::setNamespace('\\Bramus\\Http\\StatusCodes\\');
    
    Generator::generateStatusCode(); // Generates a \Bramus\Http\StatusCodes\StatusCode instance with its default value
    Generator::generateStatusCode(404); // Generates a \Bramus\Http\StatusCodes\StatusCode instance with the value 404

    This class might come in handy during unit tests.

    πŸ’β€β™‚οΈ In case the Enumeration has no __DEFAULT (e.g. it is NULL), calling Generator::generate* will return a random value for the Enumeration.

~

Feel free to use this package if you think it will float your boat. If you’ve find an issue, have a feature request, or something else regarding this project, then please open an issue on its GitHub repo.

bramus/enumeration Source (GitHub) →
bramus/enumeration on Packagist →

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

β˜•οΈ Buy me a Coffee ($3)

TossingBot – Learning Robots to Throw Arbitrary Objects

TossingBot, a robotic arm that picks up items and tosses them to boxes outside its reach range. It is double the speed and dexterity of other state-of-the-art picking systems achieving 500+ mean picks per hour, and is better at throwing than most of the engineers on the team. The key to TossingBot is a self-improving artificial intelligence algorithm that uses a combination of both physics and deep learning. This enables it to learn quickly — starting with just grasping objects in the morning, and eventually learning to toss them by the evening. The system is also general — capable of handling objects it has never seen before, and adapting to new target landing locations.

Here’s a more in-depth video:

During its first rodeo, the mechanical arm didn’t know what to do with the pile of objects it was presented with. After 14 hours of trial and error and analyzing them with its overhead cameras, it was finally able to toss the right item into the right container 85 percent of the time.

TossingBot: Learning to Throw Arbitrary Objects with Residual Physics →

(Via Sara, a former student of mine)

Deno, a new way to JavaScript

Ryan Dahl – inventor of Node.js – has been working on Deno, a new take on Node as if it were designed today.

From async-await to ArrayBuffers, the JavaScript language has changed significantly in the decade since Node.js was designed. Deno takes advantage of these developments and incorporate lessons learned in the development of Node to provide a new JavaScript platform built on V8 and Rust. This talk will teach the audience how to get started with Deno.

I especially like the compatibility with ES Modules.

Slides are also available.

🎧 FYI: The audio gets better after a few minutes. No worries there πŸ˜‰

Editor.js – Next generation block styled editor

Editor.js is a so called β€œblock style editor” like the one Medium (and recently WordPress) sport.

The Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core.

The output is not HTML but a JSON object which describes each Block.

Editor.js – Next generation block styled editor →

The resulting JSON reminds me of Jasonette, a tool to describe Mobile Apps using JSON.

Illustrated.dev explains web development through illustration

Illustrated.dev holds a collection of awesome illustrations on Web Development by Maggie Appleton:

Most of these explainers are about JavaScript fundamentals. Because those never go out of style. But I’ve also made a few on newer tools like React, Babel, and D3.

I make these because the front-end world is overflowing with confounding things to learn (and JavaScript in particular is πŸ”₯β—πŸŒπŸŒŸβ˜  ridiculous sometimes).

Shown above is the opening illustration for a piece on the React Virtual DOM. I really like her style!

Web Development Illustrated →