ilomon10

UI component names

As front-end developers we all know the pain of coming up with meaningful component names for CSS classes. I created this gist as a place to collect terms that are suitable as user interface component names.

Please contribute your own ideas!

Interactive components

• button

ilomon10

# SOURCE: (milq) https://github.com/milq/scripts-ubuntu-debian/blob/master/install-opencv.sh
# also http://milq.github.io/install-opencv-ubuntu-debian/
# KEEP UBUNTU OR DEBIAN UP TO DATE

sudo apt-get -y update
sudo apt-get -y upgrade
sudo apt-get -y dist-upgrade
sudo apt-get -y autoremove

ilomon10

import cv2
import socketio #python-socketio by @miguelgrinberg
import base64

sio = socketio.Client()
sio.connect('http://x.x.x.x:xxxx)

cam = cv2.VideoCapture(0)

while (True):

ilomon10

import React, { useState, useCallback } from 'react';

const Draggable = ({
  children
}) => {
  const [isDrag, setIsDrag] = useState(false);
  const onDragEndHandler = useCallback((e) => {
    setIsDrag(false);
  }, []);
  const onMouseDownHandler = useCallback((e) => {

ilomon10

/**
 *  Ref: https://zellwk.com/blog/async-await-in-loops/
 */

const mapLoop = async _ => {
  console.log('Start')

  const promises = fruitsToGet.map(async fruit => {
    const numFruit = await getNumFruit(fruit)
    return numFruit

ilomon10

Read: https://pm2.keymetrics.io/docs/usage/startup/#manually-resurrect-processes

1. Run app with pm2 pm2 start "index.js"
2. Save current pm2 processes pm2 save
3. Generate startup script pm2 startup
4. Copy and paste generated script on terminal etc. sudo env $PATH ...

ilomon10

// Read: 
//   https://stackoverflow.com/a/12423012/8271526
//   https://stackoverflow.com/a/9186301/8271526

function timestampParse(time: string | number): number {
  let t = 0;

  if (typeof time === "number")
    if (/^[0-9]{10}$/.test(`${time}`)) // is unix
      t = time * 1000;

ilomon10

// Ref: https://ciphertrick.com/salt-hash-passwords-using-nodejs-crypto/

'use strict';
var crypto = require('crypto');

/**
 * generates random string of characters i.e salt
 * @function
 * @param {number} length - Length of the random string.
 */

ilomon10

import React from 'react';

const AspectRatio = ({ children, className = "", ratio, style = {} }) => {
  const r = ratio.split(":");
  const val = 100 / parseFloat(r[0]) * parseFloat(r[1]);
  return (
    <div className={className} style={{ position: 'relative', width: "100%", paddingTop: `${val}%`, ...style }}>
      <div style={{ position: 'absolute', top: 0, left: 0, height: "100%", width: "100%" }}>{children}</div>
    </div>
  )

ilomon10