A simple tool to build complex CSS Grid templates. Edit the template string below or drag the areas in the preview. The changes will reflect in both sides. CSS Grid Template Builder →
Tag Archives: link
JavaScript Confetti Cannon
Grid Garden – A game for learning CSS Grid Layout
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 …
Snapshot testing with PHPUnit
use Spatie\Snapshots\MatchesSnapshots; class OrderTest { use MatchesSnapshot; class test_it_casts_to_json() { $orderId = new Order(1); $this->assertMatchesJsonSnapshot($order->toJson()); } } 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 …
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 …
Continue reading “LocalStack – A fully functional local AWS cloud stack”
10 Lodash Features You Can Replace with ES6 ES2015
Lodash is the most depended on npm package right now, but if you’re using ES6 ES2015, 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 …
Continue reading “10 Lodash Features You Can Replace with ES6 ES2015“
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 …
Mocking Individual CSS Transform Functions using CSS Variables
In CSS we use the transform property to manage an element’s translation, rotation, and scale. As it’s one single combined property for all three possible transformations, setting transform: rotation(90deg); on an element will (re)set the values for translation and scale by falling back to their default values. This will change when the “CSS Transform Module …
Continue reading “Mocking Individual CSS Transform Functions using CSS Variables”
Deep dive CSS: font metrics, line-height and vertical-align
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. They really are complex, maybe the hardest ones, as they have a major role in the creation of one of the less-known feature of CSS: inline …
Continue reading “Deep dive CSS: font metrics, line-height and vertical-align“