Posts

Snowpack - Dev Server - Compile Css on Server Start

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
Categories: #shell #JavaScript #css
Tags: #NodeJs
Document Fragment with Kor UI

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.

Categories: #JavaScript #html
Ramda - Quick Tips #1

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]
Categories: #JavaScript
Tags: #ramda
CBOR - JSON Encoding

Compact Binary Format for JSON Data Transfer

When you wish to use JSON for its convenience, but also want to send the JSON using a more compact representation to save data that needs to be transfer, you will need to use an information encoder for JSON. These encoders tend to represent the JSON data in binary format for transfer and there are many out there.

Categories: #JavaScript
Tags: #NodeJs