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!
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.
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’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.
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.
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:
π 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.
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.
Second time this month kernel_task (with pid 0) decided to go nuts and drain my battery until my macbook shut down (even while connected to a power brick)
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” β¦ Β―\_(γ)_/Β―
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!
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:
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:
Hello friends,
I need to add a *resizable iframe* for an article, similar to the DevTools one. Is there a ready-made solution/JS library that I can use before I try to build that myself? π€
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.
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:
Wrap the <iframe> in a <div>, and make the <div> resizable.
Have <iframe> strech along with the <div>‘s dimensions, using Flexbox.
βοΈ 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 β¦
π‘ 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.
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.
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 π
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).
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.
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)?
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.
π‘ 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.
// "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 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.
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!
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.
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:
Ugh, while this works on iOS Safari and in-app browsers like the one in Google Hangouts, it breaks in Chrome, since Chrome honors `-webkit-fill-available` (and consequently doesn't ignore it). Demo: https://t.co/Rx0VSoxe0e. pic.twitter.com/z3MKEcgUAz
