Recoil – An Experimental State Management Library for React

Recoil is the State Management Library for React they use at Facebook.

Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components. Atoms are units of state that components can subscribe to. Selectors transform this state either synchronously or asynchronously

Best to watch the talk from React Europe 2020 embedded above. It clearly explains why Recoil come to exist, and when & how to use it.

If you’ve ever used MobX it might all sound a bit familiar. This Twitter Thread by the MobX author is worth a quick read.

Recoil →

SPACEX – ISS Docking Simulator

This simulator will familiarize you with the controls of the actual interface used by NASA Astronauts to manually pilot the SpaceX Dragon 2 vehicle to the International Space Station. Successful docking is achieved when all green numbers in the center of the interface are below 0.2. Movement in space is slow and requires patience & precision.

My inner space-geek rejoices! πŸ€“

SPACEX – ISS Docking Simulator →

Don’t charge your MacBook Pro from the left side. Use the right side.

Ever since September 2019 I had this issue with my MacBook Pro where kernel_task would sometimes spike up to > 1000% (!) CPU load and drain my battery – even while connected to a charger.

Upon disconnecting the charger, the load would drop back to normal levels. But on reconnecting kernel_task would be at it again.

~

A few weeks ago I saw this tweet float by:

And yes, that totally explained my problem. As the linked StackExchange thread mentions:

High CPU usage by kernel_task is caused by high Thunderbolt Left Proximity temperature, which is caused by charging and having normal peripherals plugged in at the same time.

So the fix is simple: don’t charge your MacBook from the left side but use the right side.

Now this is not something I’d expect from a +$3000 costing machine but as the late Steve Jobs would say: “You’re holding charging it wrong” … Β―\_(ツ)_/Β―

In Apple’s support article on it the function of kernel_task itself is explained in detail:

One of the functions of kernel_task is to help manage CPU temperature by making the CPU less available to processes that are using it intensely. In other words, kernel_task responds to conditions that cause your CPU to become too hot, even if your Mac doesn’t feel hot to you. It does not itself cause those conditions. When the CPU temperature decreases, kernel_task automatically reduces its activity.

So it’s basically kernel_task trying to steal CPU cycles from other processes, so that those processes don’t overheat the system.

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

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

Chrome DevTools Pong – A game to play inside the Chrome DevTools

Move over Chrome Dino Game! Now you can play Pong inside the Chrome DevTools.

Chrome DevTools Pong →

Spoiler: How it works

In case you were wondering: it’s a regular Pong game, but with the elements visually hidden (opacity: 0;) so that they only show up in the DevTools’ Layers Panel.

So simple, that becomes awesome!

Remix – React Framework for Web Apps

The past few weeks I’ve been enjoying the newsletter of Remix, an yet to be released React Framework

Remix is a web application framework for React from the authors of React Router: Michael Jackson and Ryan Florence. It provides APIs and conventions for server rendering, data loading, routing and more.

You can also read some of its details in their introductory post from two weeks ago. I really like this post, as they build up their code examples in a step-by-step manner. In that post they cover their approach to:

  • File System Routing
  • Data Loading
  • Location-Based Cache
  • Meta Tags and Document Titles

Remix will be a paid product. Next to a Commercial License they’ll also provide an Affordable Indie License.

Remix →
Remix Preview #1 →

PHP 8 in 8 Code Blocks

Brent has been following the PHP releases and featured up close. In this post he highlights 8 of the features that will make it into PHP 8

  1. Attributes (aka Annotations)
  2. Union types
  3. The static return type
  4. The just-in-time Compiler
  5. throw in Expressions
  6. Non-capturing catches
  7. Trailing commas in parameter lists
  8. New str_* functions

As a bonus he also adds the new Stringable interface and the ability to call ::class directly on objects.

PHP 8 in 8 Code Blocks →

The Ultimate Guide to React Native Optimization

The folks over at Callstack have published a series on React Native Optimization:

In this and the following articles, we will show you how to optimize the performance and stability of your apps. Thanks to the practices described in the guide, you will improve the user experience and speed up the time-to-market of your apps.

The whole guide is divided into 18 articles, which will be published regularly. Over time, all these articles will be collected in one place and made available as one large ebook for download.

By now 5 parts have been published online so far:

  1. Reducing the device’s battery usage with UI re-renders
  2. The best practices around using dedicated higher-ordered React Native components
  3. Picking external libraries
  4. Choosing Libraries optimized for mobile
  5. Find the balance between native and JavaScript

Well worth a read!

CSS-Only Resizable Elements

In Playing With (Fake) Container Queries Chris used the <resize-asaurus> web component to make the elements resizable. Curious to see how that worked I dug into its source.

As I was expecting a truckload of JavaScript to make it work, I was very surprised to see that it basically revolved around using just one single CSS property: resize

The resize CSS property sets whether an element is resizable, and if so, in which directions.

Accepted values for resize are none, horizontal, vertical, and both.

To play nice with CSS Logical Properties the values block and inline will also be supported.

πŸ˜… Up until then I thought resize was a thing reserved for <textarea> only.

~

Demo

To get resize working, one must apply it on a block level element + also set overflow to any value but visible. Below is a demo with resize set to both:

See the Pen
Resizable Element (Pure CSS)
by Bramus (@bramus)
on CodePen.

Don’t forget to set min-width/min-height/max-width/max-height in case you want to prevent the resizable box from becoming too small/big.

~

Resizing iframe elements

A very practical use-case for this is resiable iframe elements: As many embedded CodePen pens are responsive, you want your visitor to be able to resize them.

πŸ™ƒ As by coincidence, Ahmad asked for exactly this on Twitter just yesterday:

Could this be a task for CSS resize property you ask? Why yes, but there’s one big problem though: resize and <iframe> don’t play nice together.

Of course, as with many web things, there’s a little workaround we can use:

  1. Wrap the <iframe> in a <div>, and make the <div> resizable.
  2. Have <iframe> strech along with the <div>‘s dimensions, using Flexbox.

Like so:

See the Pen
Resizable iframe (Pure CSS)
by Bramus (@bramus)
on CodePen.

~

Browser Support

Resize is supported in all major browsers, except for MobileSafari (e.g. Safari on iOS). A shame though, as this once again pushes MobileSafari into the “(Mobile)Safari is the new IE6” corner …

Data on support for the css-resize feature across the major browsers from caniuse.com

πŸ’‘ Shown above is a dynamic CanIUse.com image, showing an always up-to-date support table. By the time you are reading this browser support might have become better.

Sidenote: @supports vs. resize: both; vs. MobileSafari

In the demo above I wanted to show a warning in browsers that don’t support resize: both;. For that I tried using @supports, which has proven to be successful before.

.warning {
	display: block;
}

/* Hide warning in case browser supports resize: both; */
@supports (resize: both) {
    .warning {
        display: none;
    }
}

MobileSafari however also hides the warning and thus falsely claims to support resize: both.

I’ve reported a bug on this: https://bugs.webkit.org/show_bug.cgi?id=211994

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would always put a smile on my face. Thanks!

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