msandrini

/**
 * Taken from: https://github.com/marceloucker/postcss-prefixer
 * and adapted to receive a third parameter in options
 * to restrict plugin action by import name match (restrictByName)
 * Note: it uses the package css-selector-tokenizer
 *
 * Specified in postcss.config.cjs
 */

const postcss = require('postcss')

msandrini

import { DirectiveBinding, ObjectDirective } from 'vue'

type FocusableElement = HTMLInputElement | HTMLTextAreaElement
type NotificationCallback = (isNowFocused: boolean) => void
type GenericEventHandler = () => void
interface ExtendedDirective extends ObjectDirective {
  handleFocus: GenericEventHandler
  handleBlur: GenericEventHandler
}

msandrini

const handlerMain = {
    get: function (obj, prop) {
      return (prop in obj) ? obj[prop] : new Proxy(obj, handlerSub);
    }
};
const handlerSub = {
    get: function (obj, prop) {
      return (prop in obj) ? obj[prop] : {};
    }
};

msandrini

Vue.js + VueX quick guide

The official documentation of Vue is nice, but it is very thorough and, so, ends up complicating a bit something that is very simple in essence. I'll try to explain how to get the hang of it mostly with code, so I hope this can be of use.

I'll skip the installation part, the examples below can work in a "packed" environment or simply putting the JS file wrapped in a <script> tag.

---

Vue.js

msandrini

Stack assessment for JS Project

Frameworks assessed:

• React 16.x: bulky and featuring some features that may not be needed, but recently subject of a good optimisation and with nice new features, which made it different from the rest;
• Preact: virtually identical to React (before 16.x), after the changes to the “original” this became a bit “outdated”, but still a good option out of its lean footprint;
• Inferno: first on speed benchmarks since it was released a long time ago, surprisingly still the fastest of all libs that use the same syntax of React (before 16.x). It also comes with some extra features aiming performance (VNode);
• Deku: super lightweight framework featuring VDOM, without most React features, including state (meant to be integrated with a state manager);
• Stencil: lightweight footprint, React-like concept (state, props) although with a slightly different syntax, TypeScript support;
• Vue: works (by default) in the "Angular-way" also used by Aurelia, with a

msandrini

/* © Marcos Sandrini Lemos */

import { Component, Fragment, createElement } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';

const getMimeTypeFromExtension = (extension) => {
	const allowedExtensions = ['jpeg', 'gif', 'png', 'webp'];
	if (allowedExtensions.includes(extension)) return `image/${extension}`;
	if (extension === 'jpg') return 'image/jpeg';

msandrini

Post Mask directive

Magical directive that takes a field and converts it to a input=number while editing, and after editing (on blur event) formats it into a user-defined format.

A Pen by Marcos Sandrini on CodePen.

License.

msandrini

Angular two-way controllers

A select and an input with values bounded.

A Pen by Marcos Sandrini on CodePen.

License.

msandrini

Angular pseudo-radio directive

A Pen by Marcos Sandrini on CodePen.

License.

msandrini

Angular pseudo-check directive

A Pen by Marcos Sandrini on CodePen.

License.