InfluxDB Flux: type conflict: int != float

In a Flux query I was writing I wanted to negate the fetched values using a map function to multiply each value by -1:

map(fn: (r) => ({ _value: r._value * -1 }))

To my surprise this yielded an error:

type conflict: int != float

Took me a few Google Search Coupons to realize the error got trigger not by the type of the _value, but by the -1 in there. The solution therefore is really simple: don’t multiply by an integer (e.g. -1) but multiply by a float (e.g. -1.0); like so:

map(fn: (r) => ({ _value: r._value * -1.0 }))

πŸ˜…

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 surely put a smile on my face. Thanks!

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

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

ESNext: Proposals to look forward to (ESNEXT Conf)

Happening right now is ESNEXT Conf a fully remote conference exploring the future of JavaScript and the web. When I saw the CFP float by, it sounded like a perfect match for my talk β€œESNext: Proposals to look forward to”. Thankfully the organisers – Fred and Drew from Pika – also felt that ways and the put me in the line-up.

With the yearly ECMAScript releases (ES2015..ES2020) of a lot of things have changed in JavaScript-land, and there’s even more to come. This talk takes a look at a few of the newest (ES2020) and some of the upcoming ECMAScript features, which (hopefully) will become part of the ECMAScript Language Specification in the near future.

~

Talk Slides

The slides are up on slidr.io, and also embedded below:

~

Talk Outline

  • ECMAScript History and Timeline
  • TC39: Info on TC39, what they do, and how they work.
  • ESNext Proposal: Field Declarations
  • ES2020 Feature: Optional Chaining
  • ES2020 Feature: Null Coalescing
  • ESNext Proposal: Logical Assignment
  • ES2020 Feature: Dynamic Imports
  • ESNext Proposal: Decimal
  • ESNext Proposal: Cancellation API (+ Mention of AbortController)
  • ESNext Proposal: Declarations In Conditionals
  • ES2019 Feature: Object.fromEntries()
  • ESNext Proposal: Slice Notation
  • ESNext Proposal: Pattern Matching
  • Fin.

~

Talk Video

Once the video has been released, I’ll update this post to include it. Here it is:

~

Thanks to the organisers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward). A shame we couldn’t meet in person though, perhaps at a next edition πŸ˜‰

πŸ’β€β™‚οΈ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

The Sound of Silence

If you’re a regular reader of bram.us you might have noticed that I haven’t posted anything here during the past month. In short: I’ve been busy with many (personal) things that needed my attention. Here’s a few of the things that kept me from blogging …

Public Speaking

With COVID-19 many conferences have switched to an online format. With this came the opportunity to speak at rather distant conferences, which wouldn’t have been possible before. I’m honoured to have been able to speak at JS VidCon, JS RemoteConf, JSNation Live, and JSConf.be.

Some of those events worked with prerecorded talks, while others were done live. It was always a mix and match of sites and apps to use (Crowdcast, Zoom, Wirecast, Run the World, Slack, Discord, etc) all while I remained at home. Easy, although I’m kinda missing the personal connections one can make at IRL conferences.


Me, speaking at home #JSNationLive

Prepping for those conferences took some time, but thankfully I could reiterate on my ESNext: Proposals to look forward to talk. As the talk has grown over the past two years I’ve come rather fluent at it, and can easily adapt it to both short and long formats. There’s another rather big conference planned this mid-July, but I can’t talk about it just yet πŸ˜‰

~

Life as a family of 3 + 2

Tomorrow it will be exactly five months ago that my youngest son Noah was born. If you’re a parent yourself I shouldn’t tell you how hard it is to have a baby in the house, especially if that baby only sleeps for short periods of time (bursts of 30 minutes during the day, 3 to 4 hours at night). He’s a very pleasant and happy baby to have around, yet the only thing we wish for is to get a few more hours of unbroken sleep. It’s really hard to focus and think when in Zombie mode 😡

We’ve also had some issues with getting his formula right, as he tends to be rather sensitive (but not allergic as the doctor said) to cow milk, but after four months of trial and error I think we finally got it right.


Noah, June 2020

My oldest son Finn (aged 11) and my daughter Tila (aged 9) live with us every other week, as they spend the other week at their mums place. When they’re at home with us, they really are “at home” as all the schools in Belgium had switched to a format called “pre-teaching” because of COVID-19: the kids don’t go to school physically, and are required to finish a set of daily tasks (both online and offline) at home. I’m blessed that I have quite smart and standalone children by now, yet my oldest son Finn is quite the slacker to be honest … always reminding him to get started, double checking his work, etc. is quite time consuming to be honest.


Ellie + Finn + Tila, May 2020

Thankfully schools have reopened their doors just last week, so that’s a small load off of my shoulders. And oh, I’m very grateful that my daughter Tila also helps us with the baby when she’s around.

~

We bought a new house

Ever since (before) the birth of our son Noah we’ve been on the lookout for a new house to live in, as we need an extra bedroom for him to sleep in (right now he sleeps with us in our bedroom, by lack of a spare bedroom). About a month ago my colleague Roel stumbled upon a house while biking and sent it over. One thing led to the other and before we knew we were talking with the bank about a new loan and everything that goes along with that. And yes, our bid got accepted so mid-September we’ll be moving house 🀩


Our new house, soon to be home

~

We’re about to sell our current house

As we will no longer be needing our current home β€” and we kinda rely on the money that we’ll get from selling it β€” I’ve been busy finishing up the list of home improvements that needed to be done. The biggest job on that list was finishing the drywall in our living room. After sitting there unfinished for nearly 5 years (😬) I – with the help of a friend – finally got to smoothing it out, putting up a wallpaper and painting the whole thing white.


Before and after

In order for the realtor who will be selling our house to start, they need some photos. To do so, we got a set of instructions (it’s in Dutch but you get the idea with the photos). As a result we’ve been cleaning out our closets and have been making trips to the local thrift shop and/or recycling depot . It’s crazy what one can collect over a period of 10 years time πŸ˜…

Our house is expected to go up for sale early July.

~

Work

In between all that I also tried to do some actual work. I’m still working on a long-term Monitoring platform / IOT project which we at vBridge started almost two years ago, doing mainly PHP and cloud-based things nowadays. I try to sneak in some JS from time to time (both client- and serverside), but it’s quite limited to be honest.

As I’m currently the only web developer on the project (*), I’m a bit overbooked: refactoring a huge part of the app while also squashing bugs (if one were to be found) and catching deadlines of new promised features is quite a lot of juggling that needs to be done. This week I was finally able to finish up one of two planned refactors, so I can finally focus on new features again.

(*) Although we haven’t announced it officially yet, we’re on the lookout for good people to join our team. We’re basically looking for a web developer with preferably a PHP background and an interest in cloud development. Our policy is to hire for talent+attitude and train for skill, so don’t worry if you think you lack certain skills.

JavaScript Yellow

Back in November I was invited to speak at Full Stack Europe 2019. At the conference I was scheduled to do a pre-conference workshop on React and a lightning talk named “JavaScript Yellow”. Last week the video said talk got released:

References:

Thanks again to the organisers for having me πŸ™‚

πŸ˜… In the end, I ended up doing a full talk on ESNext: Proposals to look forward to too, as one of the originally planned speakers unfortunately couldn’t make it after all.

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 surely put a smile on my face. Thanks!

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

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

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 resizable 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 as an <iframe> is a replaced element.

πŸ™‹β€β™‚οΈ Replaced Elements?

As per spec:

A replaced element is an element whose content is outside the scope of the CSS formatting model, such as an image or embedded document. For example, the content of the HTML img element is often replaced by the image that its src attribute designates.

iframe, canvas, iframe, etc. also are Replaced Elements.

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.

As images also are replaced elements (see above), you need to apply a similar trick to be able to resize them:

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

☝️ Note that I also added an object-fit rule in there, to prevent aspect ratio distortion.

~

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 surely put a smile on my face. Thanks!

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

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

ESNext: Proposals to look forward to (JS VidCon / JavaScript Remote Conf)

The past few days I’ve been attending some virtual conferences. At JS VidCon and JavaScript Remote Conf I also joined as a speaker, to bring forward my ever-evolving talk β€œESNext: Proposals to look forward to”

With the yearly ECMAScript releases (ES2015..ES2020) of a lot of things have changed in JavaScript-land, and there’s even more to come. This talk takes a look at a few of the newest (ES2020) and some of the upcoming ECMAScript features, which (hopefully) will become part of the ECMAScript Language Specification in the near future.

The slides are up on slidr.io, and also embedded below:

Talk Outline:

  • JavaScript Yellow: How to get JavaScript Yellow on your website (a plea to using the right tool for the right job)
  • TC39: Info on TC39, what they do, and how they work.
  • ESNext Proposal: Field Declarations
  • ESNext Proposal: Pipeline Operator
  • ES2020 Feature: Optional Chaining
  • ES2020 Feature: Null Coalescing
  • ESNext Proposal: Logical Assignment
  • ES2020 Feature: Dynamic Imports
  • ESNext Proposal: Export Default From
  • ESNext Proposal: Decimal
  • ESNext Proposal: Cancellation API (+ Mention of AbortController)
  • ESNext Proposal: Declarations In Conditionals
  • ESNext Proposal: Slice Notation
  • ES2019 Feature: Object.fromEntries()
  • ESNext Proposal: Pattern Matching
  • Fin.

Thanks to the organisers for having me, and thanks to the attendees for coming to see me. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward). A shame we couldn’t meet in person though, perhaps at a next edition πŸ˜‰

πŸ’β€β™‚οΈ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

Spacing grid/flexbox items in CSS with the gap property

Flexbox layout with CSS gap applied

The gap property for Flexbox about to land in Chromium 85. It allows you to define the size of the gutters between Grid/Flexbox children.

CSS Grid brought a delightful spacing feature called grid-gap, which quickly became a popular way to put space into layouts. It was easy to fall in love with because it took upon itself so much responsibility with such elegance. Starting in Chromium 85 grid-gap is now just gap, and you can use it with Flexbox. πŸ’ͺ

So no more grid-gap, but simply gap:

.layout {
-  grid-gap: 1em;
+  gap: 1em;
}

~

Why use gap (and not margin)?

Margins in flexbox don’t collapse, so when working with margin you’ll have to adjust the value you’re using. Because of this you’ll also get edges on the inside of your container, as the margin applied on the children is pushing the children inwards. Compare the screenshot below (using margin) with the one at the top of this post (using gap).

Flexbox layout with CSS margin applied
A margin of 1em is applied. Note the broader width between items and the extra blue edge on the container, all due to margins not collapsing.

~

Demo

See the Pen
Flexbox Gap
by Bramus (@bramus)
on CodePen.

Sidenote: @supports vs. Flexbox Gap

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

.warning {
    display: block;
}

/* Hide warning in case browser supports flexbox gap */
@supports (display: flex) and (gap: 1em) { /* DOES NOT WORK AS INTENDED! */
    .warning {
        display: none;
    }
}

But that’s not really working as intended. In Chromium < 85 – which does not support flexbox gap – the warning is hidden, this because both conditions are evaluated separately:

  • Does Chromium < 85 support display: flex? Yes
  • Does Chromium < 85 support gap: 1em? Yes (from CSS Grid)

This makes me wonder whether re-using property names remains a good idea or not

Perhaps an extension to css-conditional should be made so that it supports a combination of properties β€” e.g. @supports (display: flex; gap: 1em)?

I’ve filed an issue for the latter.

~

Shorthand

gap is a shorthand for row-gap and column-gap:

.layout {
   display: flex;
   gap: 1em 2em;
}

The first value targets row-gap, the second value column-gap.

~

Browser Support

Firefox has supported it ever since version 63. Chromium is the first engine to follow its lead.

Data on support for the flexbox-gap 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.

ESNext: Logical Assignment Operators (||=, ??=, &&=)

Update 2020.07.21:

This proposal made it into Stage-4 and will officially be part of ES2021 πŸ₯³

πŸ’β€β™‚οΈ Stage-4?

The Technical Committee which is concerned with the standardization of ECMAScript (e.g. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-4 is the Finished Stage and indicates that the proposal is ready to become part of the ECMAScript Specification.

A new ECMAScript Proposal that I’m looking forward to is Logical Assignment Operators. In short it combines Logical Operators (||, &&, and ??) with Assignment Expressions (=).

// "Or Or Equals" (or, the Mallet operator)
a ||= b;

// "And And Equals"
a &&= b;

// "QQ Equals"
a ??= b;

Basically these operators translate to these actions being performed:

  • ||= will only assign the value of b into a if a is falsy (false, 0, null, etc.).
  • &&= will only assign the value of b into a if a is truthy (true, 1, {}, etc.).
  • ??= will only assign the value of b into a if a is null or undefined.

πŸ€” Not familiar with that ?? you see there? It’s the Nullish Coalescing Operator which is part of ES2020 and it’s awesome!

~

These operators will change the way you code, see this before/after example:

// Without Logical Assignment
name = name ?? 'stranger';

// With Logical Assignment
name ??= 'stranger'

Using Logical Assignment Operators will save you to writing an if statement. Additionally it can save a setter execution.

let name = 'bramus';

// Without Logical Assignment: the value of name will *always* be set to (here: to its own value), even though name is not nullish
name = name ?? 'stranger';

// With Logical Assignment: name won't be reassigned as name is not nullish
name ??= 'stranger'

~

The Logical Assignment Operators proposal is currently Stage-3.

πŸ’β€β™‚οΈ Stage-3?

The Technical Committee which is concerned with the standardization of ECMAScript (e.g. TC39) has a 5 stage process in place, ranging from stage-0 to stage-4, by which it develops a new language feature.

Stage-3 is the Candidate Stage where the feature is considered complete and only critical changes will happen based on implementation experience. If all goes well the proposal will advance to Stage 4 without any changes, after which it will to become part of the ECMAScript Specification.

Since it’s Stage-3, we can expect things to look good implementation-wise, which it totally is:

  • Babel: The β€œMallet Operator Transformer” got added a long time ago (back when it was still called β€œ6to5”). Nowadays you should use the @babel/plugin-proposal-logical-assignment-operators plugin.
  • Chrome/V8: The feature got added two days ago and will get shipped with V8 v8.4 behind the flag --harmony-logical-assignment
  • Firefox/SpiderMonkey: Version 77 should support it, but I couldn’t get it to work in Firefox Developer Edition (77.0b2). Firefox Nightly (78.0a1) works fine.
  • Safari/JavaScriptCore: Logical Assignment Operators shipped with Safari Technology Preview 105

I don’t expect this proposal to change at all anymore and can see it advancing to Stage-4 at the one of the next TC39 meetings. That way this proposal will most likely become part of ES2021.

~

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 surely put a smile on my face. Thanks!

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

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

100vh in Safari on iOS

When working with Viewport Units there’s this longstanding and extremely annoying bug in Safari on iOS where it does not play nice with the vh unit. Setting a container to 100vh for example will actually result in an element that’s a wee bit too high: MobileSafari ignores parts of its UI when calculating 100vh.


Image by Max Schmitt

πŸ€” New to Viewport Units? Ahmad Shadeed has got you covered.

As Apple basically gives us the finger on this – stating that it works as intended (which we all can disagree on) – we have to rely on workarounds. In the past I’ve used like Viewport Units Buggyfill or Louis Hoebregts’ CSS Custom Properties Hack to fix this behavior. I was glad to see that Matt Smith recently found a way to have MobileSafari render an element at 100vh using CSS:

As I replied on Twitter: Nice, but I’d rather have MobileSafari fix the vh unit, as using -webkit-fill-available for this will only work to achieving 100vh.

If you want to achieve a perfect 50vh for example, using -webkit-fill-available won’t work as you can’t use -webkit-fill-available in calc(). Above that it won’t work when the targeted element is nested somewhere deep in your DOM tree with one its parents already having a height set.

Come ‘on Safari, stop being the new IE6 …

UPDATE 2020.05.16 Apparently this -webkit-fill-available workaround can negatively impact the Chrome browser:

Given this I guess the recommended workaround right now still remains Louis Hoebregts’ CSS Custom Properties Hack:

.my-element {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
const setVh = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};

window.addEventListener('load', setVh);
window.addEventListener('resize', setVh);