aibolik

import { useRef, useState } from "react";
import styled, { createGlobalStyle } from "styled-components";

const GlobalStyles = createGlobalStyle`
  body {
    color: #494E5C;
  }
`;

const Wrapper = styled.div`

aibolik

let recognition = new window.SpeechRecognition();
recognition.interimResults = true;
recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('');
  
  if (e.results[0].isFinal) {
    // this is the final version, feel free to do whatever you need with transcript/text

aibolik

/**
 * It maps a number `num` from original `[in_min, in_max]` range
 * to output range `[out_min, out_max]`.
*/
function mapRange(num, in_min, in_max, out_min, out_max) {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

aibolik

class MinHeap {
  constructor() {
    this.arr = [];
  }

  insert(x) {
    this.arr.push(x);
    this.bubbleUp(this.arr.length - 1);
  }

aibolik

const logger = (storeApi) => (next) => (action) => {
  console.log(`\n[debug] [redux] action: ${action.type}`);
  try {
    console.log(`[debug] [redux] action body: ${JSON.stringify(action)}\n`);
  } catch {
  }

  next(action);
}

aibolik

Remapping keys with hidutil

hidutil is a powerful tool that can remap keys on your MacOS. It can remap keys for internal keyboard as well as for external keyboard. In the example below, I am remapping section sign key(§) to grave accent key(`), because I want to have my recently bought K380 keyboard with UK layout to act almost like US layout.

Note: there are GUI tools like Karabiner, but it messed by FN keys on external keyboard, when I just wanted simple one key remap, so I found this might be useful if you want simple solution.

Arguments and mapping

aibolik

{"lastUpload":"2020-03-11T23:09:31.750Z","extensionVersion":"v3.4.3"}

aibolik

const Toast = ({ children, id }) => {
  const { removeToast } = useToast();
  
  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(id);
    }, 3000); // delay
    
    return () => {
      clearTimeout(timer);

aibolik

export function useToast() {
  const toastHelpers = React.useContext(ToastContext);
  return toastHelpers;
}

aibolik

import { ToastContext } from './path/to/ToastProvider';

const Example = () => {
  const { addToast } = React.useContext(ToastContext);
  // ...