Skip to content

Instantly share code, notes, and snippets.

Ryosuke whoisryosuke

View GitHub Profile
View compare-dates.js
// Direct comparison (did it happen now?)
var d1 = new Date();
var d2 = new Date(d1);
console.log(d1 == d2); // prints false (wrong!)
console.log(d1 === d2); // prints false (wrong!)
console.log(d1 != d2); // prints true (wrong!)
console.log(d1 !== d2); // prints true (wrong!)
console.log(d1.getTime() === d2.getTime()); // prints true (correct)
View fetch-with-hooks.jsx
function App() {
const [data, setData] = useState({ hits: [] });
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=redux',
);
setData(result.data);
View js-url-params.md
// Assuming "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
@whoisryosuke
whoisryosuke / react-target-dom.js
Created Apr 13, 2019
React / JS - Using React with a library that requires an DOM ID to target (e.g. `#signup-btn`) and how to hook in 3rd party actions into class - via: https://github.com/stfy/react-editor.js/blob/master/src/editor.js
View react-target-dom.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import EditorJS from '@editorjs/editorjs';
import commonTools from './common-tools';
class Editor extends Component {
static defaultProps = {
holderId: 'editorjs-holder',
@whoisryosuke
whoisryosuke / prettier.sh
Created Apr 13, 2019
Prettier - Format or unminify code (single file or any folder of certain files)
View prettier.sh
# Quickly fix one file
npx prettier --write your-file.html
# Quickly fix all files of one type
npx prettier --write src/**/*.{js,jsx}
@whoisryosuke
whoisryosuke / dev-to-dark-mode.css
Created Apr 10, 2019
Dev.to Dark Mode CSS - Greyish
View dev-to-dark-mode.css
body,
.stories-show {
background:#303030 !important;
color:#F5F5F5;
}
/* Menu Colors */
.top-bar,
.top-bar nav,
@whoisryosuke
whoisryosuke / error_blade_directive.php
Created Apr 5, 2019 — forked from calebporzio/error_blade_directive.php
A little Blade directive to make working with validation errors a bit nicer.
View error_blade_directive.php
<?php
// Usage:
// Before
@if ($errors->has('email'))
<span>{{ $errors->first('email') }}</span>
@endif
// After:
@whoisryosuke
whoisryosuke / package.json
Created Mar 30, 2019
NodeJS - Useful package.json stuff
View package.json
{
"husky": {
"hooks": {
"pre-commit": "npm format && npm test",
"pre-push": "npm format && npm test"
}
},
}
@whoisryosuke
whoisryosuke / package.json
Last active Mar 30, 2019
NodeJS - Useful package.json Scripts
View package.json
{
"scripts": {
"format": "prettier --write 'src/**/*.js'",
"test": "jest",
"test:watch": "jest --watch"
}
}
@whoisryosuke
whoisryosuke / styled-component-states.js
Created Mar 30, 2019
Styled Components / JS Design System - Using functional programming and a color library to generate CSS colors for states (hover, active, focus)
View styled-component-states.js
import React from "react"
import Color from "tinycolor2";
import styled from "styled-components"
const colors = {
fullBlack: "#000000",
white: "#FFFFFF",
red: "#DB2828",
orange: "#F2711C",
}
You can’t perform that action at this time.