Robitx

Conventinal Commit Messages

See how a minor change to your commit message style can make a difference. Examples

Have a look at CLI util git-conventional-commits to ensure this conventions and generate changelogs

Commit Formats

Default

Robitx

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

Robitx

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

Robitx

async / return await explained

This is yet another explanation of why async and return await is pointless, coming from this post.

// async means that this:
const fn = async (...args) => {/* stuff */};

// is basically the equivalent of this:

Robitx

About This Gist

This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.

The handleEvent ASCII Doodle

                  ┌---------------------------------┐
var handler = {   | any object that inherits or     |

Robitx

function i18n(template) {
  for (var
    info = i18n.db[i18n.locale][template.join('\x01')],
    out = [info.t[0]],
    i = 1, length = info.t.length; i < length; i++
  ) out[i] = arguments[1 + info.v[i - 1]] + info.t[i];
  return out.join('');
}
i18n.locale = 'en';
i18n.db = {};

Robitx

const proxy = (target, handler) => {
  handler = typeof handler === 'object' ?
            Object.create(handler) : new handler;
  return (handler.proxy = new Proxy(target, handler));
};

Robitx

// ES2017 Asynchronous Export
// module.js
export default new Promise(async $export => {
  const module = await Promise.resolve(
    {my: 'module'}
  );
  $export(module);
});

// - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Robitx

Consolidated lists of CSS properties that are inherited by default.
Taken from http://www.w3.org/TR/CSS21/propidx.html
--------------------------------------------------------------------

One item not in the list was "text-decoration" which affects child elements. A few new properties (text-shadow) also affect child elements

List

azimuth
border-collapse

Robitx

Svelte cheatsheet

Doc examples

Table of Contents

1. Structure
2. Imports
3. Variables
4. Reactivity
5. Variables