Image for post
Image for post
Photo by Suganth on Unsplash

When there is even a linting rule to enforce a pattern, it usually means that pattern has indeed some issue, so lets see why return await ... is bad.

When to use await

The await keyword can be used either if the top level context is asynchronous, or if the current executing function is.

The peculiarity of await is that it works with any kind of returned value, even primitives.

(async () => {
// we can await any value or callback
const regular = () => 'regular';
// but we don't need to await returned promises
const promise = () => Promise.resolve('promise');
// we also should use `async` *only*
// if we need to `await` something
const asynchronous = async () => {
await regular();
// we don't need to await promise()
// we can return *just* promise()
return promise()…


Image for post
Image for post
Photo by Erda Estremera on Unsplash

This is a quick one about a little trick I’ve recently used to ship simplemaps.com’s World Cities Database basic data through my latest geo2city npm package, and as SQLite database.

There are few things that made me ship 690K zip archive instead of 2.3MB database or, once zipped, 1.1MB, but while the current saving doesn’t look too relevant, the same technique made me create a 3MB zip database instead of 280MB file, using a different source of data (check version 0.2, if curious).

Create optimized tables

As obvious as it sounds, most distributed SQLite databases usually just ship a big table with all fields in it, either because these were imported right away from .csv


Image for post
Image for post
Photo by Jonas Denil on Unsplash

After being revolutionary in 2007 to unleash CSS selectors that never existed, the specification moved from v1.0 to the current, recommended, v3.1, but browsers stopped with v1.0 … and we’re missing out!

XPath vs CSS

The fundamental difference between these two standards is that one was born to crawl and analyze the DOM tree in all “axes”, while the other one job is to live-style the DOM, without any way to crawl its content.

That’s it: XPath is a searching tool while CSS is a real-time “drawing” tool, hence rich in functionalities to style, but poor in terms of DOM tree analysis.

What XPath can do that CSS cannot

Here an example: even if the CSS :has(...) selector is part of the most recent specifications, no browser has implemented it to date, while in XPath


Image for post
Image for post
Photo by Federico Bottos on Unsplash

Heavily inspired by the recent Vue 3 announcement, uce-template promises a very similar DX, also defeating most pain-points of the modern Web.

Some background

There are very few developers that fully understand the purpose and context of Web Components, and few others not super happy about the current state.

If we also consider the controversial history of the Web Components umbrella, where HTML Imports got removed, Custom Elements shipped in two different versions, and one browser vendor doesn’t want to fully comply with latest specs, plus the fact that partial Templates updates are still nowhere, we can easily sympathize with the confusion and skepticism that surrounds this part of the standard Web, but let’s start clarifying a few things before…


Image for post
Image for post
Photo by Marco Lermer on Unsplash

Update

all patterns described in this post have been merged into a reactive-props module that can be configured for any use case

Some pattern can be handy, without requiring heavy libraries or frameworks!

This post is a walk through reactive approaches and all the details to consider in adopting one or another.

The property Accessor

The first thing we need to understand is how the reactive paradigm works, which can be summarized as “some data changed, some update is needed”.

const data = {key: 'some value'};
// how can we intercept the following?
data.key = 'some other value';

A way to intercept any property change within, almost, any generic object, is to describe an “accessor”. …


Image for post
Image for post
Photo by Geran de Klerk on Unsplash

It took months to land a tiny change, but it finally went public, and I’d like to help you out with all the details so that maybe, next time, it’ll take less time, or it’ll require less iterations between parts.

The Agreement

If we’re not willing to sign this agreement, which is pretty common for any Open Source contribution when the project is driven by organizations, we can just keep ranting about standards on twitter and skip reading here.

Moreover, if the company we work for deals with, or uses, Web technologies, be sure such company is OK in letting us signing that agreement on behalf of such company, but there are also other steps…


Image for post
Image for post
Photo by Inset Agency on Unsplash

Update

It’s out, and widely compatible!

Please give @webreflection/custom-elements module a chance, as it’ll be part of ungap umbrella once proven working in all conditions ♥

Times are different, and so should be polyfills! I’ve managed to bring full V1 specs compliant to every browser, and this is the story!

Some Background

In July 2014, I’ve created an alternative Custom Elements polyfill in response to the Polymer library, simply because I follow, and write, standard code, and Custom Elements never needed a whole library/framework to be used, which I also believe is one of the reasons these never got widely adopted … that being said, I appreciate the Polymer team effort to promote something based on standards (well, sort of, as they had their own constrains and dependencies at that time), as opposite of creating their own parser, tooling, etc … you know the story…


Image for post
Image for post
Photo by Martin Wilner on Unsplash

I’ve been dealing, and developing, with ES2015 template literals, since their first TC39 appearance, and I think it’s time to talk more about these.

JS Template Literals in a nutshell

Historically introduced as “yet another way to write strings in JavaScript”, there are still may developers not understanding where is the power of this relatively recent JS feature. Well, there are fundamentally two ways to use template literals, but many stops at the first one:

const str = `template literal with ${someValue} in it`;

That’s a string that allows multi-lines without ugly escape, and interpolated values, as someValue is, without needing any sort of concatenation: congratulations, you’ve learned 30% of JS template literals potentials! …


Image for post
Image for post
Photo by Sarah Kilian on Unsplash

Another day on the Web, another library based on Web Components (ahem, Custom Elements) … but there’s something we need to talk about …

About bundling the library

Every single library getting started, including mines, suggest we should import the library in order to define what supposed to be a “portable Custom Element”.

import {LitElement, html} from 'lit-element';
import { FASTElement, customElement } from '@microsoft/fast-element';
import { Component, Prop, h } from '@stencil/core';
import HyperHTMLElement from 'hyperhtml-element';

The list goes on and on, and it became the standard way to create Custom Elements, implying, most of the time, the following:

  • no way we can ship a Custom Element without having a…


Image for post
Image for post
Updating a Raspberry Pi Oled via any browser

I think everybody knows the Electron project: a Chromium based browser that brings Node.js like development directly through its Web View.

It’s been used to create many cross platform applications, breaking out regular Web pages boundaries when it comes to use databases, reach system IO, simplifying creation of DIY of any kind.

Why looking for alternatives?

Electron is also the main Web View that fuels my project BENJA, but while it’s cool and everything, it has various limitations, and following just a couple:

  • Electron must be installed in the machine running its content. If you have it installed in a Raspberry Pi, as example, only the Raspberry Pi can interact with its features. Any other browser in the network cannot run that code, because browsers won’t understand code that uses Node.js modules. …

About

Andrea Giammarchi

Web, Mobile, IoT, and all JS things since 00's. Formerly JS engineer at @nokia, @facebook, @twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store