WH

HMR with Web Components

Say that you are using HMR in conjunction with web components for your layouts, you would expect a change in the component's JavaScript logic to trigger the HMR code to re-register the component.

However, there isn't a way to redefine a web component once it has already been defined and registered onto the page, an error will be thrown if you tried to redefine the web component again.

Export Value for Comparison

HMR is a convenient tool to have when one wishes to perform updates to a page without fully reloading the whole page. When using Snowpack's HMR, one can compare a variable's value prior to it being changed.

This feature might come in handy when you want to perform resets after a set amount of time has passed for a user session, but there also might be a requirement to restore certain pieces of old information back into a new session. For example, in a privacy-sensitive form area, a notice can come up in area that does not require a full refresh as a top status bar after a time-out period.

Linaria CLI

CSS-in-Js styles are quite modular given their ability to be associated with components, but it is also helpful to have the option to compile some styles ahead of time for a html page to use. This behavior is desired if there are common global styles that referenced by all pages. Having minimum styles on the page in a css file also helps to prevent the flash of unstyled content.

In the following example, Linaria will be shown as the CSS-in-Js of choice since this library supports compilation during build.

Create a new project and install the project dependencies:

npm install snowpack @snowpack/plugin-run-script @linaria/cli @linaria/shaker

Dynamically Adding Lit Elements into Page

Lit elements are an implementation of web components. Lit elements are useful because it encourages component reuse across different JavaScript frameworks, which leads to reduced development time.

The traditional usage of Lit elements / web components involves defining the component inside your html page, however there might be instances where you do not wish to modify the html page by introducing the web component markup. The introduced web components might serve only as an assistive means for using the page, but the html export of the page must remain immaculate.

Remove Falsey Values from an Array

Use without as a means to remove falsey values from your arrays. The first argument to the without method takes in an array which will represent the elements which are to be removed when found in the second argument array. You can include any values in the first argument array which you deem to be a "falsey" value.

R.without([false, null, ''], [false, null, '', 1, 2, null, 3, 4, false, 5]);

// Outputs
// [1, 2, 3, 4, 5]

Check Content-Type

Testing a simple static file server is made simple when using SuperTest. It permits for the testing of HTTP methods, content-type, response body and many more options.

Supposedly you wish to test a basic http server which serves the common zip, jpg, and html files. This server example uses only the native Nodejs modules: http, fs, and path:

Lorem Ipsum

Use this plugin to fill out placeholder paragraphs. Helpful to see how content flows in html in a layout template or to check for text overflows.