npm init -y
Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.
// Generate a color based on letters. | |
export const generateColor = (letters) => { | |
// Generate a simple hash from a string | |
const getHashOfString = (str) => { | |
let hash = 0; | |
for (let i = 0; i < str.length; i++) { | |
hash = str.charCodeAt(i) + ((hash << 5) - hash); | |
} | |
hash = Math.abs(hash); |
UPDATE: I finally made an NPM package for this component! It is made with TypeScript, and now has a fully customizable styling system. It is also far ahead of this wrapper at this point. Check it out here if you'd like: https://github.com/csandman/chakra-react-select
In order to use this component, you can implement it and use it like you would normally use react-select. It should accept all of the props that the original takes, however customizing the theme or the components could break this implementation. There are also a few extra things you can do with this wrapper that pull from the chakra library.
size
prop with either sm
, md
, or lg
. These will reflect the sizes available on the Chakra <Input />
component (with the exception of xs
because it's too small to work).isFixed
to emulate the exapackage main | |
import ( | |
"fmt" | |
"golang.org/x/text/runes" | |
"golang.org/x/text/transform" | |
"golang.org/x/text/unicode/norm" | |
"strings" | |
"unicode" | |
) |
sudo update-alternatives --install /usr/bin/x-terminal-emulator x-terminal-emulator $(which alacritty) 50 | |
sudo update-alternatives --config x-terminal-emulator |
You can use this diagram as a template to create your own git branching diagrams. Here's how:
https://gist.githubusercontent.com/bryanbraun/8c93e154a93a08794291df1fcdce6918/raw/bf563eb36c3623bb9e7e1faae349c5da802f9fed/template-data.xml
// create a bookmark and use this code as the URL, you can now toggle the css on/off | |
// thanks+credit: https://dev.to/gajus/my-favorite-css-hack-32g3 | |
javascript: (function() { | |
var elements = document.body.getElementsByTagName('*'); | |
var items = []; | |
for (var i = 0; i < elements.length; i++) { | |
if (elements[i].innerHTML.indexOf('* { background:#000!important;color:#0f0!important;outline:solid #f00 1px!important; background-color: rgba(255,0,0,.2) !important; }') != -1) { | |
items.push(elements[i]); | |
} | |
} |
// Future versions of Hyper may add additional config options, | |
// which will not automatically be merged into this file. | |
// See https://hyper.is#cfg for all currently supported options. | |
module.exports = { | |
config: { | |
// Choose either "stable" for receiving highly polished, | |
// or "canary" for less polished but more frequent updates | |
updateChannel: 'stable', |