segunadebayo

const getAllFocusableElements = (parent) => Array.from(parent.querySelectorAll('*')).filter(elm => elm.tabIndex > -1).sort((a,b) => a.tabIndex > b.tabIndex ? 1 : a.tabIndex < b.tabIndex ? -1 : 0);

segunadebayo

{
  "document": {
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "children": [
      {
        "id": "0:1",
        "name": "Page 1",
        "type": "CANVAS",

segunadebayo

async function getComponents(fileKey, token) {
  // Get file
  const file = await fetch(`https://api.figma.com/v1/files/${fileKey}`, {
    headers: { "X-Figma-Token": token }
  }).then((r) => r.json())

  if (file.err === undefined) {
    // Get style ids
    const styleIds = Object.keys(file.styles)

segunadebayo

/* Reset
=============================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Body

segunadebayo

/*jshint node:true*/
'use strict';

/**
 * This scripts recursively renames every file and directory in the script path
 * from camelCase and UpperCamelCase to dash-case
 *
 * Do a backup before executing this script
 *
 * @lecense MIT

segunadebayo

Random color from string in javascript

Consider a list of strings you need to permanently assign a random color.

First you should turn the string into a hash.

var string = "string"
var hash = 0

segunadebayo

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

• Accessible
• Composable
• Stylable

segunadebayo

/*

In JavaScript, objects can be used to serve various purposes.

To maximise our usage of the type system, we should assign different types to our objects depending
on the desired purpose.

In this blog post I will clarify two common purposes for objects known as records and dictionaries
(aka maps), and how they can both be used with regards to the type system.

segunadebayo

import React from "react";
import { useButton, mergeProps } from "reakit";

function Button(props) {
  // useButton should be used when the props are being applied to a non-button element
  const button = useButton();
  return <div {...mergeProps(button, props)} />;
}

// return value of useButton