1 2 3 4 5 6 7 8 9 10 |
|
Well, this works fine for client-side only application, but has lot of challenges to express and build them on the server (SSR), that when declarative shadow comes into picture!
Declarative Shadow DOM (DSD) helps us to have Shadow DOM to the server with ease, the sample imperative example as above would look like:
1 2 3 4 5 6 |
|
Here is codesandbox:
P.S: chrome://flags/#enable-experimental-web-platform-features
should be enabled as of today to use this feature.
util.promisify
, for example:
1 2 3 4 |
|
1 2 3 4 5 6 7 |
|
1 2 3 4 |
|
But interesting there are few builtins that are already promisifed for us:
1 2 3 4 |
|
In the latest version of node v16
we have the below:
dns/promises
implementation -> lib/internal/dns/promises.js
fs/promises
implementation -> lib/internal/fs/promises.js
stream/promises
implementation -> lib/stream/promises.js
timers/promises
implementation -> lib/timers/promises.js)
Sample usage:
1 2 3 4 |
|
1 2 3 4 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
1 2 3 4 |
|
Hope to see more such built-in promise APIs!
]]>One can easily open a inspector like:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
But, most of times we would want to wait until the debugger is connected to our process, that's where inspector.waitForDebugger()
will be useful, here is a quick example.
1 2 3 4 5 6 |
|
1 2 3 4 5 6 7 8 9 |
|
Dispatching and receiving message responses and notifications is possible with the session
API:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
session.on(<inspector-protocol-method>)
where the methods are from devtools-protocol.
P.S: This is an experimental API with Stability of 1
meaning is not subject to Semantic Versioning rules. Non-backward compatible changes or removal may occur in any future release. Use of the feature is not recommended in production environments.
URLPattern
web API is an URL
pattern matching web-platform primitive as a generic javascript code. Also helps in controlling service worker to the subset of a site that it owns and maintains.
URLPattern()
constructor accepts an Object
as in input param as in the sample usage and and has test()
and exec()
methods.
Currently there is a partial implementation of URLPattern available in Chrome Canary under the "Experimental Web Platform features" flag.
Sample usage:
1 2 3 4 5 6 7 8 9 10 11 |
|
1 2 3 4 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
|
1 2 3 4 5 6 7 |
|
1 2 3 4 5 6 7 8 |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
|
In serviceworker:
1 2 3 4 5 6 7 8 |
|
We also have the URLPatternList
API in the proposals, that would help to do something like:
1 2 3 4 5 |
|
URLPattern
API is highly influenced by path-to-regexp node module and support many of the features including:
"*"
wildcardsDon't miss read the Design Document for URLPattern
API.
We have the below Highlight Pseudo-elements:
::selection
: the portion of a document that has been selected as the target
::target-text
: represents text directly targetted by the document URL’s fragment
::spelling-error
: content that has been flagged by the user agent as misspelled.
::grammar-error
: content that has been flagged by the user agent as grammatically incorrect.
Note: A future level of CSS may introduce ways to create custom highlight pseudo-elements.
Let us see few quick examples:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
P.S: Modern browsers are yet to implement the last 3 of these pesduo elements.
]]>??
people have asked me the difference between Logical OR (||) vs Nullish coalescing (??) operators, so here is a quick post.
]]>1 2 3 |
|
1 2 3 |
|
1 2 3 |
|
So, say you have a function updateID
it can vary in the below ways:
1 2 3 4 5 6 7 8 9 10 11 |
|
You could also use it with ??
1 2 3 4 5 6 |
|
This is on stage-4 and you should be able to use it today!
I am happy that I was able to co-champion this proposal.
7 Years ago it was just a thought!
]]>Let us see a quick example:
1 2 3 4 5 6 7 8 |
|
1 2 3 4 5 6 |
|
That was easy, but say you have sistuation where the context
need to be update later in time, to emulate we could setTimeout(() => {setContext('state', {})},1000)
this would not reflect either in the parent or the child component.
store
comes to our resuse in these cases:
1 2 3 4 5 6 7 8 9 |
|
1 2 3 4 5 |
|
Here is a quick example:
This is explictily mentoined in the API docs too:
]]>Context is not inherently reactive. If you need reactive values in context then you can pass a store into context, which will be reactive.
React
, Vue
and Svelte
for this case study:
Say, you were to pick up some veggies from your salad today:
1
|
|
It would be better to have array of objects for topping like [{id: '', label: '', value: ''}]
but for the ease of the demo, let us stick with an array
for the toppings
. We need to create a simple group of inputs
of type checkbox
.
First up React
with 🎣
:
Crux of handling those multiple checkboxs:
1 2 3 4 5 6 7 8 |
|
It's Vue's trun:
This the best I could do, thanks to GreenJello
for the quick review.
The key component here is v-model
:
1
|
|
Finally, Svelte:
The key factor here is bind:group
:
1
|
|
Contoller vs Magic vs Concise code I shall leave it to the reader discretion and choice!
]]>await
keyword outside of async
functions with Top-level await and the happy news is you can use it today in node and REPL.
As of today, if we execute the bleow peice of code in node env:
1
|
|
We would see a: SyntaxError: await is only valid in async function
So, we would normally mitigate this by wrapping it in an async
function:
1 2 3 4 |
|
But with top level await it get's easier we could just do const answer = await Promise.resolve(42);
note that this will only work at the top level of modules only.
Well, Node.js v14.3.0 was released with the support of top-level await! But we always had a flag to enabled top-level await on the REPL, ever since node v10!
The --experimental-repl-await
enables experimental top-level await keyword support in REPL, so all you have to do is start the REPL with the flag node --experimental-repl-await
and that's it.
And within the script you could do something like:
1 2 3 4 |
|
1 2 3 |
|
You could execute this using node --experimental-top-level-await
.
TLDR: For REPL we would need --experimental-repl-await
and for mjs
scripts --experimental-top-level-await
as of today.
First up, Check if the browser support this API:
1
|
|
invoke select
method:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
contacts
would be an array of objects with keys being the requested properties and values being the corresponding contact details.
Note:
This API works only on top level window.
User gesture is required before invoking the select
method!
View the demo here and the source below:
]]>backpressure
is missing.onmessage
event will keep firing until the page becomes completely unresponsive.Goals of WebSocketStream API:
^ From the explainer.
Sample code:
1 2 3 4 5 6 7 8 |
|
DEMO:
Thanks for authoring the spec and confirming this! 🤟 https://t.co/7bFMIzWPoL
— Hemanth.HM (@GNUmanth) March 6, 2020
]]>
The Element Timing API, helps us to measure this with ease and it supports the below elements:
img
elements.
image
elements inside an svg.
video element's poster image
.
Elements with a background-image
.
Groups of text nodes.
Make sure the DOM element of interest has elementtiming
content attribute:
1 2 3 |
|
Observe the element:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
renderTime
and loadTime
will be DOMHighResTimeStamp
time stamp in milliseconds.
Note: renderTime
may not be available if the element is an image and it's loaded cross-origin without the Timing-Allow-Origin
header.
DEMO:
]]>prefers-color-scheme
CSS media feature, below code gives more details on the same.
Detecting the prefered color scheme in JS:
1 2 |
|
Or maybe a more generic method:
1 2 3 4 5 6 7 8 9 |
|
1 2 |
|
matchMedia(query)
returns a new MediaQueryList
object with the parsed results of the specified media query string.
Detecting the prefered color scheme in CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Note for the spec:
User preferences can also vary by medium. For example, a user may prefer dark themes on a glowing screen, but light themes when printing (to save ink and/or because inked text on blank paper prints better than blank letterforms knocked out of an inked background). UAs are expected to take such variances into consideration so that prefers-color-scheme reflects preferences appropriate to the medium rather than preferences taken out of context.
Handling prefered color changes:
1 2 3 4 5 |
|
Force setting dark mode:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
We would normally apply a function like below to detect if an element is visible in the viewport:
1 2 |
|
Later we would mostly add it on scroll events to trigger the checks as the user scroll, which in turn is a costly operation.
That's where the Intersection Observer API comes into rescue.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
Say, if we were to observe this element, #catBox
for visiblity, we would end up with:
1 2 3 4 5 6 7 |
|
A portal is similar to an iframe, in that it allows another browsing context to be embedded. However, the portal browsing context hosted by a portal is part of a separate unit of related browsing contexts. The user agent is thus free to use a separate event loop for the browsing contexts,even if they are same origin-domain.
At times we would want to communicate with the intial host and the portal and vice versa, it can be easily achived with the below:
In the host:
1 2 3 4 5 6 |
|
We can also get other information from the event
:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
In the portal:
1 2 3 4 5 6 |
|
With portal.activate
we can basically pass the {data}
to the portal on activation and the portal shall receive this data in the event object of the portalactivate
callback.
evt.adoptPredecessor()
will provide context to the originator of the portal and portalHost
is exposed if the window
has a portal browsing context.
foo
with the below directory structure:
1 2 3 4 5 6 7 |
|
Let us say that src/component
in dependent on lib/util.js
, in current world one would have to do the below to require
the util
in their component
1
|
|
The nesting for those realtive paths ../../
gets more complex as the directory structure gets more deeper.
For our rescue the module
object of node got an addition of createRequireFromPath
method in v10.12.0
, which accepts a
filename
to be used to construct the relative require function.
and return a require
function.
This can help in doing the below in our src/component
, rather than dealing with relative paths.
1 2 3 |
|
So, any files in ../../lib
can now be just required as requireLib(<absPath>)
instead of dealing with relative paths.
The heart of createRequireFromPath
looks like:
1 2 3 4 5 6 |
|
Meanwhile, MylesBorins has a proTip for us:
omfg
— sMyle (@MylesBorins) March 24, 2019
`const require = createRequireFromPath('.');`
... just works 😇
]]>
Without wasting time with some placeholder content, the below are the features and examples:
Array#{flat,flatMap}
1 2 3 4 5 |
|
Object.fromEntries
1 2 3 4 5 6 |
|
String#{trimStart,trimEnd}
1 2 |
|
Symbol#description
1 2 3 |
|
try { } catch {} // optional binding
1 2 3 4 5 |
|
JSON ⊂ ECMAScript
1 2 3 |
|
1 2 3 |
|
well-formed JSON.stringify
1 2 |
|
Function#toString
1 2 3 4 5 |
|
Array#sort stability
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Don't miss:
🎉 New JavaScript features in ES2019:
— Mathias Bynens (@mathias) January 29, 2019
➡️ Array#{flat,flatMap}
➡️ Object.fromEntries
➡️ String#{trimStart,trimEnd}
➡️ Symbol#description
➡️ try { } catch {} // optional binding
➡️ JSON ⊂ ECMAScript
➡️ well-formed JSON.stringify
➡️ stable Array#sort
➡️ revised Function#toString
]]>
$
operator.
$
AKA Application operator
helps us in avoiding parentheses during function, a quick type check relves:
1 2 |
|
1
|
|
That implies (f x)
is same as (f $ x)
but it helps us in rewriting f (g (h x))
as f $ g $ h $ x
So, say we have:
1
|
|
We can re-write it as:
1
|
|
It gets interesting with the function composition operator .
1 2 |
|
We can re-write the $
expression to:
1
|
|
or
1
|
|
Another example would be using the $
and .
with interact
.
1 2 |
|
^ Input from the standard input device is passed to this function as its argument, and the resulting string is output on the standard output device.
Say, we need to accept multiple inputs from the standard input and add them up, we could do it as:
1
|
|
If we are trying the same in Prelude
, you must use lines
with it. (Better not to use interact
in GHCi
)
1
|
|
So, the thing to remeber is:
f $ x = f x
(f . g) x = f (g x)
Get the first camera that is front-facing #javascript GUM.
— Hemanth.HM (@GNUmanth) September 8, 2018
Better with `?.deviceId` pic.twitter.com/1sBcP5CZjz
@_zouhir suggested facingMode
Which has the below mods:
"user": The video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone.
"environment": The video source is facing away from the user, thereby viewing their environment. This is the back camera on a smartphone.
"left": The video source is facing toward the user but to their left, such as a camera aimed toward the user but over their left shoulder.
"right": The video source is facing toward the user but to their right, such as a camera aimed toward the user but over their right shoulder.
Here is some simple code to flip cameras:
Check if the browser supports facingMODE
1 2 3 4 |
|
Set options for the getUserMedia
1 2 3 4 5 6 7 8 |
|
Stream the video:
1 2 3 4 5 |
|
Toggle cams:
1 2 3 4 5 6 7 8 |
|
Demo:
]]>