Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryosuke whoisryosuke

View GitHub Profile
@whoisryosuke
whoisryosuke / box.tsx
Created Jul 28, 2020
React / Typescript - SVG component that accepts SVG in `as` prop --
View box.tsx
import React from "react";
// Ignore because SC type pkg is broken for now
// @ts-ignore
import styled from "styled-components";
import {
compose,
typography,
space,
color,
layout,
@whoisryosuke
whoisryosuke / markdown-directory-tree.md
Created Jul 27, 2020
Markdown / Documentation - Generate Markdown-friendly directory / folder tree structure - @see: https://stackoverflow.com/a/23990108
View markdown-directory-tree.md
  1. Install the Linux package tree using Homebrew: brew install tree
  2. Run the tree command on any directory to generate a Markdown friendly structure: tree your-directory

You can save it to a file by piping the results into a text file: tree . >> directory-structure.md

Example

packages/button
├── lib
@whoisryosuke
whoisryosuke / yarn-reverse-dep-search.bash
Created Jul 22, 2020
Yarn / Project Management - Figure out which dependency is using a certain dependency (e.g. if you have lodash in node modules, but didn't install it yourself)
@whoisryosuke
whoisryosuke / styled-component-types-rn.ts
Last active Jul 16, 2020
Typescript / Styled Component / React Native - How to type Styled Components
View styled-component-types-rn.ts
type ButtonProps = {
primary: boolean;
};
const Button = styled.TouchableOpacity<ButtonProps>`
opacity: ${(props) => (props.primary ? 0.5 : 1)};
`;
// Or HTML version
View laravel-horizon-5.8-install.md

The official Laravel docs don't cover exactly how to install older versions. If you try following them, you'll have issues with composer requiring higher versions of Laravel, Symfony, etc.

This assumes you're using version 5.8 of Laravel

  1. Install Horizon 3.7.2 composer dependency - composer require laravel/horizon:3.7.2
  2. Install Horizon using artisan CLI: php artisan horizon:install
  3. Make sure your .env has the QUEUE_CONNECTION set to redis.
  4. Run the server and check out the Horizon dashboard: http://localhost/horizon

References

@whoisryosuke
whoisryosuke / LICENSE.md
Created Jul 14, 2020
OSS / Licensing - MIT License 2020
View LICENSE.md

The MIT License (MIT) Copyright (c) 2020 Ryosuke Hana

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE S

@whoisryosuke
whoisryosuke / html-input.ts
Created Jul 14, 2020
Typescript - HTMLTextAreaElement or HTMLInputElement instead of HTMLElement -- @see: https://stackoverflow.com/a/33460539
View html-input.ts
// ⛔️ Don't do this
const textbox: HTMLTextAreaElement = document.getElementById("theme");
// You'll get following error:
// Type 'HTMLElement' is missing the following properties from type 'HTMLTextAreaElement': autocomplete, cols, defaultValue, dirName, and 26 more.
// ✅ Do this
var controlCheckbox = <HTMLTextAreaElement>document.getElementById("mainTextArea")
// Or for input elements
var controlCheckbox = <HTMLInputElement>document.getElementById("mainCheckbox")
View array-to-object.js
var arr = [
{ key: 'foo', val: 'bar' },
{ key: 'hello', val: 'world' }
];
var result = arr.reduce(function(map, obj) {
map[obj.key] = obj.val;
return map;
}, {});
@whoisryosuke
whoisryosuke / theme.js
Last active Jul 14, 2020
Design Systems - System UI / Styled System default theme structure -- learn more: https://system-ui.com/theme/
View theme.js
export const theme = {
animation: {
default: "400ms ease-in",
fast: "300ms ease-in",
},
// Breakpoint values for media queries
breakpoints: [
// mobile
"320px",
@whoisryosuke
whoisryosuke / theme.js
Created Jul 14, 2020
Design Systems - System UI / Styled System theme structure example from my personal blog
View theme.js
export const animation = {
default: '400ms ease-in',
fast: '300ms ease-in',
}
export const breakpoints = [
// mobile
'320px',
// tablet
'768px',
You can’t perform that action at this time.