Vortex with CSS Variables

Another great demo by Ana Tudor. Here’s a pen with the result:

See the Pen 🌈 vortex with CSS variables (WebKit-only, no JS) by Ana Tudor (@thebabydino) on CodePen.

More videos on her YouTube Channel. Lots of demos on her CodePen page.

Elsewhere , Leave a comment

Next.js 2.0

Next.js is a very slim yet powerful framework. Place React components in a pages directory and running next, and you’ll get automatic code splitting, routing, hot code reloading and universal (server-side and client-side) rendering.

Version 2 of Next.js was released earlier today, with server-side and client-side rendering, dynamic routing, component styling, and link pre-fetching.

Next.js 2.0 →
Learning Next.js →

Elsewhere , , Leave a comment

Autonomous Trap: A Trap for Self-Driving Cars

Art installation by James Bridle:

Ground markings to trap autonomous vehicles using “no entry” and other glyphs.

Ingenious! πŸ™‚

Autonomous Trap →

Elsewhere , , Leave a comment

Snapshot testing with PHPUnit

use Spatie\Snapshots\MatchesSnapshots;

class OrderTest
    use MatchesSnapshot;

    class test_it_casts_to_json()
        $orderId = new Order(1);


Again great work by the folks at Spatie:

The difference between a classic assertEquals and an assertMatchesSnapshot is that you don’t write the expectation yourself when snapshot testing. When a snapshot assertion happens for the first time, it creates a snapshot file with the actual output, and marks the test as incomplete. Every subsequent run will compare the output with the existing snapshot file to check for regressions.

A Package for Snapshot Testing in PHPUnit →
spatie/phpunit-snapshot-assertions (GitHub) →

Elsewhere , , Leave a comment

LocalStack – A fully functional local AWS cloud stack

At work we’ve been using several separate docker images – such as instructure/fake-s3 and airdock/fake-sqs, orchestrated by docker-compose – to run a few of the Amazon Web Services locally.

LocalStack provides the whole lot in one:

LocalStack provides an easy-to-use test/mocking framework for developing Cloud applications. Currently, the focus is primarily on supporting the AWS cloud stack. LocalStack spins up the following core Cloud APIs on your local machine:

  • API Gateway
  • Kinesis
  • DynamoDB
  • DynamoDB Streams
  • Elasticsearch
  • S3
  • Firehose
  • Lambda
  • SNS
  • SQS
  • Redshift

LocalStack – A fully functional local AWS cloud stack →

Elsewhere , , Leave a comment

R2-D2 is sad Obi-Wan Doesn’t remember him…

Poor R2 😒

Elsewhere , Leave a comment

Fading text with CSS Blend Modes

Clever usage a gradient background and mix-blend-mode. On hover the size of the background is changed, revealing the rest of the text contents:


New to Compositing And Blending In CSS? Look no further.

Elsewhere , , Leave a comment

10 Lodash Features You Can Replace with ES2015 (ES6)

Lodash is the most depended on npm package right now, but if you’re using ES6, you might not actually need it. In this article, we’re going to look at using native collection methods with arrow functions and other new ES6 features to help us cut corners around many popular use cases.

10 Lodash Features You Can Replace with ES6 →

(via Freek)

Elsewhere , , Leave a comment

Automatic Bullseye MOVING Dartboard

Former NASA engineer Mark Roper:

I fulfilled a 3 year long dream to create a dartboard where you get a bullseye every time thanks to some engineering. Basically, you throw a dart and then a Vicon motion capture system tracks the dart in the air. We use those x,y,z positions in matlab to predict where the dart will land using some regression analysis. Once we know where it will land, we move the board to the right spot using 6 stepper motors that attach to the back of the board using fishing line. All of this happens in 400ms or so. Then we took it to a bar to see what people would think of it (SPOILER ALERT: they liked it)


Elsewhere , Leave a comment

An Animated Intro to RxJS

In Reactive Animations with CSS Variables the subject of RxJS was touched. If you’re not familiar with RxJS, CSS-Tricks has nice introductory article on the subject:

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you’re anything like me, you were completely bewildered when you first tried learning about it.

An Animated Intro to RxJS →

(via Freek)

Elsewhere , , Leave a comment