DEV Community: disgusting-dev

How to generate Static Atomic CSS with SCSS

disgusting-dev — Mon, 05 Apr 2021 15:02:54 +0000

In this article, I'd like to briefly show and explain you some snippets of SCSS-code responsible for generation of step-based classes

What is Static Atomic CSS?

Atomic CSS is one of popular CSS Methodologies, that says 'each css property has its own dedicated class' - for example

.bg-red {
   background: red;
}

The ideas behind Atomic were about:

Swapping code complexity from CSS to HTML/JSX markup and to not be looking to couple files at the same time, trying to find needed class for your markup
Preventing CSS classes from being mutable and leading to different sorts of bugs

Types of Atomic

There are two types of how you'd write atomic classes:

Static - this is about the example above - you've wrote a class and now it exists in your app without some modifications from any side
Dynamic - when every class looks like a function so the system creates needed class at build time:

<div class="bg(red)" />

As Dynamic classes will be transformed to static anyway, I've decided to concentrate only on static part.

Here I'll show an example that might be useful when your design system requires some custom behaviour:

Grid generation

This comes from bootstrap approach: When you need to define some grid system, bootstrap proposes you classes from .col-1 to col-12

Let's say that your Design Team specified they need to have 9 columns, each column should have padding of 5px on vertical etc (any strange requirement you could imagine)

On one hand, Front End Dev can always tell "I just won't do this cause it smells like a bad pattern". On the other hand, it still might be interesting, how to do such thing

For such ideas, we have CSS pre/post-processors (In the article SCSS was used, but it can be actually any processor that you wanna use). They propose us more coding solutions rather than repetative writing of css without some logic behind

And I agree this is not exactly Atomic class example, but it close to paradigm I'm gonna show in next example

Implementation

So, for grid generation, we need to define our amount of columns - let's say it is 9:

$colsAmount: 9;

Then, we need to identify the step of column (width of one column):

$colStep: 100% / $colsAmount

And now we just need to use for loop and generate needed amount of classes:

$colsAmount: 9;
$colStep: 100% / $colsAmount;

@for $i from 1 through $colsAmount {
  .col-#{$i} {
    width: $colStep * $i;
  }
}

The output in pure CSS will be the next:

.col-1 {
  width: 11.1111111111%;
}

.col-2 {
  width: 22.2222222222%;
}

.col-3 {
  width: 33.3333333333%;
}

.col-4 {
  width: 44.4444444444%;
}

.col-5 {
  width: 55.5555555556%;
}

.col-6 {
  width: 66.6666666667%;
}

.col-7 {
  width: 77.7777777778%;
}

.col-8 {
  width: 88.8888888889%;
}

.col-9 {
  width: 100%;
}

And as you already got, inside of this loop generation you may type any logic you need and get preferred behaviour

Margin-padding

Let's now move to example, where we need to generate some defined step for our paddings and margins.

Here I should ask you guys to forgive me - cause I'm going to show you 3 level of loop with if statements (of course my nickname assumes that I will write exactly the code of such quality, but that's not what it really means :))

$basicStep: 4px;

For comfortable binding of our property with some shorthand key, we need to use scss map structure:

$gaps: ('m': 'margin', 'p': 'padding');

Then goes directions of gaps and amount of steps we need to have:

$directions: (
  'l': 'left',
  'r': 'right',
  't': 'top',
  'b': 'bottom',
);

$stepsAmount: 12;

And now we need:

go through map of gaps
for each gap, create class with each direction and each step

@each $gapKey, $gapValue in $gaps {
  @each $dirKey, $dirValue in $directions {
    @for $i from 1 through 12 {
      .#{$gapKey}#{$dirKey}-#{$i} {
        #{$gapValue}-#{$dirValue}: $i * $basicStep;
      }
    }
  }
}

It will generate you 300 rows of classes from .ml-1 to .pb-12

You promised if statements!

Here they are, we defined only for each side separately, but I want to use x (right-left), y (top-bottom) and a(all directions) as classes, so I need to cover them with ifs (since SCSS doesn't have switch/case solution)

$basicStep: 4px;
$stepsAmount: 12;

$gaps: ('m': 'margin', 'p': 'padding');
$directions: (
  'l': 'left',
  'r': 'right',
  't': 'top',
  'b': 'bottom',
  'a': 'all',
  'y': 'vertical',
  'x': 'horizontal'
);

@each $gapKey, $gapValue in $gaps {
  @each $dirKey, $dirValue in $directions {
    @for $i from 1 through 12 {
      @if $dirKey == 'a' {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}: $i * $basicStep;
        }
      }

      @else if $dirKey == 'x' {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}-right: $i * $basicStep;
          #{$gapValue}-left: $i * $basicStep;
        }
      }

      @else if $dirKey == 'y' {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}-top: $i * $basicStep;
          #{$gapValue}-bottom: $i * $basicStep;
        }
      }

      @else {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}-#{$dirValue}: $i * $basicStep;
        }
      }
    }
  }
}

All the code examples you may find in my Github gists

Thank you for your attention, see you next time!

How to swap JS variables with destructuring

disgusting-dev — Sat, 27 Mar 2021 21:53:46 +0000

This swap trick for some reason always borns that phrase in my mind: 'Listen, son, you know there is a couple of techniques for swapping and they look correct, readable etc. - but now Dad will show you the old trick...'

The task is super-simple - just to swap two variables values

Usually it requires some temporal variable as a storage while you do your let a = b;

let a = 1, b = 2, temp = a;

a = b;
b = temp;

So, in ES6 we've got Array Destructuring - simple thing for allocation some array elements as variables in one line of code:

[firstElem, secondElem] = [1, 2, 3, 4]; //variables for 1 and 2

Example above don't require to create the variables before destructuring operation, but on the other hand no one tells it's forbidden:

let a = 1;
let b = 2;

[a, b] = [2, 1];

And that really makes the whole trick, instead of tempo variable, we can use array to place our variables in reversed way:

[a, b] = [b, a];

This is not really just wins you one line of code, but might conceptually be a better solution, when you need to do some other operations with variables

[a, b] = [b, a].map(item => item * 2)

That's it, thank you for reading, the swapping example will play some role in my next articles so consider it small teaser to future posts

Classic issues: Memoization

disgusting-dev — Fri, 19 Mar 2021 06:39:40 +0000

This article analyses the approach that lodash used in it's memoization function

The issue

In different frameworks, we have a lot of techniques to optimize our computations. It might be reselect for Redux, computed of Vue, useMemo of React etc. - all of them serves for purpose to save your computational and memory resources somehow.

let's assume that I have set of arguments that will communicate somehow to provide me resulting number (arg1 + arg2 * arg3 % arg4 sth like that) - and if this certain computation might be fast enough - firstly, there might be arguments of 100000 and more values, and secondly we may use more and more arguments to make it slow anyway.

function somefunction(a1, a2, a3, .....a100, b1, b2, ...) {
  //Here probably goes science
}

To prevent additional computations, there is an existing technique called memoization, which watches like 'Hey, did you already tried to do somethin like that? I just saved a result, give it, no need another computations';

Implementation

The solution will build on two important terms

High Order Function

Simply, it's a function that takes another function as an argument - and the resulting output also will be a function.

const memoizedComputation = memoize(somefunc);
memoizedComputation(someArg);

So let's write the function body:

function memoize(func) {
   return function(value) {
   }
}

Closure

This is when some function binded with references to lexical environment of it; Simply - talking, it is a function with access to external data.

We will need to use caching object to store some results of function calls, but it can't be inside of returning function cause it will recreate itself and we won't access to previously computed results

function memoize(func) {
   const cache = {};

   return function(value) {
   }
}

The body of returning function is very simple - either we computed something before and we return the result saved in cache - or we just compute and then save it:

return function(value) {
    if (cache[value] !== undefined) {
      return cache[value];
    }

    const result = func(value);

    cache[value] = result;

    return result;
}

The major part is done, next is only refactoring

As usual - typecheck of an argument

if (typeof func !== 'function') {
    throw new TypeError('Expected a function')
}

Object cache doesn't store correctly

I have a limitation there, cause object can only use keys as strings, so if I wanna say

cache[someObj] = value

it stores

[object Object]: value

I'm going to

change it to Map for better storing
provide a possibility to change it by function user

function memoize(func) {
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function');
  }

  const memoized = function(value) {
    const cache = memoized.cache;

    if (cache.has(value)) {
      return cache.get(value)
    }

    const result = func(value);

    memoized.cache = cache.set(value, result) || cache;

    return result;
  }

  memoized.cache = new (memoize.Cache || Map);

  return memoized
}

memoize.Cache = Map

export default memoize;

So the code user is able to use

memoize.Cache = WeakMap

In case he awares that it will help to use the function in certain case more effectively

Arguments refactoring

So far, returning function accepts only one argument - this is totally incorrect, and to improve this part we will need:

use args from function
define a resolver as memoization param - to allow user to specify, how to calculate the key for cache in case of multiple params

function memoize(func, resolver) {
  if (
    typeof func !== 'function'
    || (resolver != null && typeof resolver !== 'function')
  ) {
    throw new TypeError('Expected a function');
  }

  const memoized = function(...args) {
    const key = resolver
      ? resolver.apply(this, args)
      : args[0];
    const cache = memoized.cache;

    if (cache.has(key)) {
      return cache.get(key)
    }

    const result = func.apply(this, args);

    memoized.cache = cache.set(key, result) || cache;

    return result;
  }

  memoized.cache = new (memoize.Cache || Map);

  return memoized;
}

That should be it, thank you for reading, gonna write more function divings like that in future so feel free to watch

Classic issues: Deep Copy

disgusting-dev — Tue, 16 Mar 2021 20:58:09 +0000

The Issue

I need to get a full copy of some object. Let's say I have a plain object full of primitives:

const objExample = {
  n: 63,
  s: 'An',
  b: false,
  u: undefined,
  e: null,
};

Before I start

I always like to repeat, that some sort of classic issues analysis is nothing more thant just analysis - cause if you guys need deep copy, better go to 'lodash.cloneDeep' (not even talking about cloneDeepWith), they do write code for coders and that simply means a lot.

Shallow Copy

I can use Object.assign or spread operator to try to clone that:

const assignedObject = Object.assign({}, objExample);
const spreadedObject = { ...objExample };

Of course, this is just 2 different syntax of the same operation, so no surprise that the result is going to be the same - our objExample will be copied to 2 different variables

But, this copying called 'Shallow Copy' - which means that it's ok working with primitives, but for structural types it will copy not a body but the reference to the structure being copied

const objExample = {
  b: false,
  c: { a: 34 }
};
const assignedObject = Object.assign({}, objExample);

assignedObject.b = 24;
assignedObject.c.a = 45;

console.log(objExample.b, objExample.c); // false { a: 45 }

How we can avoid this?

We can try with JSON serialization/deserialization technique:

const jsonObject = JSON.parse(JSON.stringify(objExample));

jsonObject.c.a = 63;

console.log(objExample.c);

But

JSON may work only with JSON-like structures, which means that you are not able to work with non-json stuff like functions, undefined etc.

const objExample = {
  u: undefined,
  e: () => {},
  b: new Date(),
  m: new Map(),
  c: { a: 34 }
};

const jsonObject = JSON.parse(JSON.stringify(objExample));
console.log(jsonObject);
//Output: { b: '2021-03-15T08:06:01.181Z', m: {}, c: { a: 34 } }

So JSON doesn't work well here.
On another hand, Node.js has own package 'v8' that also has serialization methods with Buffer under the hood, but it doesn't support functions copying, so this is also not for us.

const v8 = require('v8');

const objExample = {
  u: undefined,
  a: function() {},
  m: new Map(),
};

const v8Object = v8.deserialize(v8.serialize(objExample));
//Error: function() {} could not be cloned;

No choice - I need to write own solution
(If I don't know about lodash of course)

Define a function

Let's start with first step - we need to define a function and say there, that for starter we will work only with arrays and objects as complex structures:

function isObject(value) {
  return typeof value === 'object';
}

function deepCopy(value) {
  if (Array.isArray(value)) {

  } else if (value && isObject(value) {

  }
}

I need to add a variable to operate with in all cases and to return at the end. Also, I need to say that if my function param is a primitive or simple function - I will just rewrite this variable:

function deepCopy(value) {
  let newVal;

  if (Array.isArray(value)) {

  } else if (value && isObject(value) {

  } else {
    newVal = value;
  }

  return newVal;
}

If I work with object type, I need to go through all it's keys and specify - if the key is primitive, I'm adding it to my 'newVal', otherwise I'm recursively calling my function to go through internals of nested object:

else if (value && isObject(value)) {
    newVal = {};

    Object.keys(value).forEach(key => {
      if (isObject(value[key])) {
        newVal[key] = deepCopy(value[key]);
      } else {
        newVal[key] = value[key];
      }
    });
  }

And for the array structure I just need to use map method with calling deepCopy there:

if (Array.isArray(value)) {
    newVal = value.map(item => {
      return deepCopy(item);
    });
  }

Circular References

We need to develop the logic for preventing memory leak cases, when object has a field referenced with the object itself, which will create an infinite recursion and stack overflow

const a = { b: { c: 345 } };
a.d = a;
const b = deepCopy(a);

For this, I need to use Map structure to set already existed keys there (WeakMap doesn't suit cause I also want to store arrays as keys)

function deepCopy(value, hash = new Map()) {
  let newVal;

  if (hash.has(value)) {
    return hash.get(value);
  }

  if (Array.isArray(value)) {
    hash.set(value, newVal);

    newVal = value.map(item => {
      return deepCopy(item, hash);
    });
  } else if (value && isObject(value)) {
    newVal = {};

    Object.keys(value).forEach(key => {
      if (isObject(value[key])) {
        hash.set(value, newVal);
        newVal[key] = deepCopy(value[key], hash);
      } else {
        newVal[key] = value[key];
      }
    });
  } else {
    newVal = value;
  }

  return newVal;
}


const a = { b: { c: 345 } };
a.d = a;
const b = deepCopy(a);

console.log(b); //{ b: { c: 345 }, d: [Circular] }

P.S.

That's of course not the perfect end for such function, cause there are a lot of corner cases to check, but if we just go to starting code of lodash's cloning function baseClone...

/** `Object#toString` result references. */
const argsTag = '[object Arguments]'
const arrayTag = '[object Array]'
const boolTag = '[object Boolean]'
const dateTag = '[object Date]'
const errorTag = '[object Error]'
const mapTag = '[object Map]'
const numberTag = '[object Number]'
const objectTag = '[object Object]'
const regexpTag = '[object RegExp]'
const setTag = '[object Set]'
const stringTag = '[object String]'
const symbolTag = '[object Symbol]'
const weakMapTag = '[object WeakMap]'

const arrayBufferTag = '[object ArrayBuffer]'
const dataViewTag = '[object DataView]'
const float32Tag = '[object Float32Array]'
const float64Tag = '[object Float64Array]'
const int8Tag = '[object Int8Array]'
const int16Tag = '[object Int16Array]'
const int32Tag = '[object Int32Array]'
const uint8Tag = '[object Uint8Array]'
const uint8ClampedTag = '[object Uint8ClampedArray]'
const uint16Tag = '[object Uint16Array]'
const uint32Tag = '[object Uint32Array]'

So I suggest to trust that function, or if something really bothers you - it's open source, so just fork it and enjoy any changes you would like to implement there;

Thank you for attention, hope you will like the format!

Vue Directive - Click Outside

disgusting-dev — Sun, 14 Mar 2021 13:18:38 +0000

The problem I wanna solve is:

I need to catch moments when I click outside of some element

Why?

It might be useful for UI components such as dropdowns, datepickers, modal windows - to assign some logic for this certain behaviour

As a starter, I will say that the accepted value for directive will be just a function and in the code it will look like:

<app-datepicker v-click-outside="someFunc" />

At the end of the text there will be 'Refactoring' section with extension of the logic for more usage ways

References used

The text and code in the article is a result of open source analysis and going through existing solutions written above

Solution

I am gonna use Vue as a UI framework here. Why? I just use Vue as my current business framework, so for me this would be a nice chance to dive in it deeper.

First of all, let's just define a function that catches outside clicks, without any wrappers, almost pseudo-code

Define, when we can tell that we clicked outside of an element

For that, we need to know, where we clicked, and what's our element with assigned listener, so the function will start like that:

function onClickOutside(event, el) {
  const isClickOutside =
    event.target !== el
    && !el.contains(event.target);
}

Now, if the flag is true, we need to call some handler:

function onClickOutside(event, el, handler) {
  const isClickOutside =
    event.target !== el
    && !el.contains(event.target);

  return isClickOutside ? handler(event, el) : null;
}

For me it looks a bit hard only that I have to follow the arguments order, so i gonna use one param of object instead;
function onClickOutside({ event, el, handler })

Start listening the function

Logically, we need to find a place, where we can use this:

document.addEventListener(
  'click',
  (event) => onClickOutside({ event })
)

Here - no invention, just going to Vue doc and seeing about Custom Directives

Basically, we need only three lifecycle stages there:

bind - to assign directive logic to element and create listeners
unbind - when element is not in DOM anymore and we need to remove our listeners

To be able to catch listeners binded to the element, I'm gonna create a Map of those - for storing and fast achieving them:

const instances = new Map();

Before writing the hooks themself, I'm gonna write a function for reusing the code - there I will manipulate my eventListeners:

function toggleEventListeners(action, eventHandler) {
  document[`${action}EventListener`]('click', eventHandler, true);
}

(The 'true' third param I used for calling the handler on capturing phase, a bit earlier than in bubbling)

bind function will look like:

function bind(el, { value: handler }) {
  const eventHandler = event => onClickOutside({ el, event, handler});

  toggleEventListeners('add', eventHandler);

  instances.set(
    el,
    eventHandler
  );
}

Unbind function will do simple logic for remove our listeners from the system:

function unbind(el) {
  const eventHandler = instances.get(el);

  toggleEventListeners('remove', eventHandler);

  instances.delete(el);
}

At the end, we just need to export this directive properly and connect with our Vue instance in 'main.js' file:

const directive = {
  bind,
  unbind,
};

export default directive;

'main.js':

import Vue from 'vue'
import App from './App.vue'

import clickOutside from './directives/clickOutside';

Vue.config.productionTip = false

Vue.directive('click-outside', clickOutside);

new Vue({
  render: h => h(App),
}).$mount('#app')

That's it as a minimum, now goes next section

Refactoring

I'd like to handle not only function as value, but also an object

//Validator function
function processArgs(value) {
  const isFunction = typeof value === 'function';

  if (!isFunction && typeof value !== 'object') {
      throw new Error(`v-click-outside: Binding value should be a function or an object, ${typeof bindingValue} given`)
  }

  return {
    handler: isFunction ? value : value.handler,
  }
}

//Handler goes from the processing function
function bind(el, { value }) {
  const { handler } = processArgs(value);

  //...function body
}

I wanna add a middleware function to define conditions when I want or don't want to invoke my handler

Extend the processing result with middleware method

return {
  handler: isFunction ? value : value.handler,
  middleware: value.middleware || (() => true),
};

Extend logic of clickOutside function

function onClickOutside({ event, el, handler, middleware }) {
  const isClickOutside =
    event.target !== el
    && !el.contains(event.target);

  if (!isClickOutside || !middleware(event, el)) {
    return null;
  }

  return handler(event, el);
}

Then just everywhere you were using handler, don't forget also to destructure middleware and add as parameters to bind and adapter functions

DEV Community: disgusting-dev

How to generate Static Atomic CSS with SCSS

What is Static Atomic CSS?

Types of Atomic

Grid generation

Implementation

Margin-padding

You promised if statements!

Thank you for your attention, see you next time!

How to swap JS variables with destructuring

That's it, thank you for reading, the swapping example will play some role in my next articles so consider it small teaser to future posts

Classic issues: Memoization

The issue

Implementation

High Order Function

Closure

As usual - typecheck of an argument

Object cache doesn't store correctly

Arguments refactoring

Classic issues: Deep Copy

The Issue

Before I start

Shallow Copy

How we can avoid this?

But

Define a function

Circular References

P.S.

Vue Directive - Click Outside

The problem I wanna solve is:

Why?

References used

Solution

Define, when we can tell that we clicked outside of an element

Start listening the function

Refactoring

I'd like to handle not only function as value, but also an object

I wanna add a middleware function to define conditions when I want or don't want to invoke my handler

Well, that's it, the full example might be found here in my gists - https://gist.github.com/disgusting-dev/8d45aebff8a536af1cba39b0fcd203e3

Thank you for reading, further there will be more and more, so feel free to subscribe to not miss any analysis!