Skip to content

Instantly share code, notes, and snippets.

Ryosuke whoisryosuke

Block or report user

Report or block whoisryosuke

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
whoisryosuke / theme.js
Created Sep 22, 2019
CSS in JS / Styled Components / Emotion - Theming file with colors, typography, borders, and 16-col grid (based on Semantic UI)
View theme.js
import Color from "tinycolor2";
* Creates column percentages based on column count
const createColumns = columnCount => {
const columns = {};
for (let i = 1; i <= columnCount; i += 1) {
columns[i] = `${(i / columnCount) * 100}%`;
whoisryosuke /
Created Sep 17, 2019 — forked from santisbon/
Bring your feature branch up to date with master. Deploying from Git branches adds flexibility. Bring your branch up to date with master and deploy it to make sure everything works. If everything looks good the branch can be merged. Otherwise, you can deploy your master branch to return production to its stable state.

Updating a feature branch

First we'll update your local master branch. Go to your local project and check out the branch you want to merge into (your local master branch)

$ git checkout master

Fetch the remote, bringing the branches and their commits from the remote repository. You can use the -p, --prune option to delete any remote-tracking references that no longer exist in the remote. Commits to master will be stored in a local branch, remotes/origin/master

whoisryosuke / js-get-href-of-target.js
Created Sep 16, 2019
JS - Get attribute of event target (e.g. get href on click)
View js-get-href-of-target.js
event = event || window.event;
var el = || event.srcElement;
if (el instanceof HTMLAnchorElement)
whoisryosuke / react-onclick-proper-target.jsx
Last active Sep 16, 2019
React/JS - How to target "parent" instead of child during onClick (problem: refs actual child clicked, instead of onClick wrapper)
View react-onclick-proper-target.jsx
const submitForm = (e) => {
// ❌ Targets child
// ✅ Targets wrapper with onClick prop
// ✅ If above fails, log currentTarget and see if it looks like HTML
// currentTarget usually returns as type of HTMLElement
whoisryosuke / input-error.blade.php
Created Sep 13, 2019
Laravel/Blade - General Error handling for input (styled with Semantic UI)
View input-error.blade.php
@if ($errors->any())
<aside class="ui error message">{{ implode('', $errors->all(':message')) }}</aside>
whoisryosuke / jquery-iife.js
Created Sep 10, 2019
jQuery IIFE - Best practice for jQuery functions to wrap in IIFE -- example shows a shorthand of $(document).ready as $(function() {})
View jquery-iife.js
(function($) {
$(function() {
whoisryosuke /
Created Sep 10, 2019
Laravel - Command to make blade views
  1. php artisan make:command MakeViewCommand

  2. Add the following to the file:



namespace App\Console\Commands;
whoisryosuke / settings.json
Created Sep 10, 2019
VSCode/Laravel - Enable Emmet abbreviation autocomplete for Blade syntax, add this to User Settings -- via:
View settings.json
"emmet.includeLanguages": {
"blade": "html"
whoisryosuke /
Last active Sep 6, 2019
Laravel - Enabling UUID for model (v6 tested) -- uses \Illuminate\Support\Str::uuid


Add UUID (or swap bigIncrement) and make sure to set as primary column:

        Schema::create('events', function (Blueprint $table) {

When using the column as a foreign key in a pivot table, create a UUID column and do the same foreign key assignment:

whoisryosuke / sui-react-mobile-sidebar.jsx
Created Aug 21, 2019
Semantic UI React - Example - Hide Sidebar on mobile -- requires simple debounce
View sui-react-mobile-sidebar.jsx
import React from "react"
import { Sidebar } from "semantic-ui-react"
import debounce from "../tools/debounce"
import DocSidebar from "./sidebar"
import "./layout.scss"
import "../../../dist/semantic.min.css"
class Layout extends React.Component {
state = { visible: true }
You can’t perform that action at this time.