Skip to content

Instantly share code, notes, and snippets.

View ruucm's full-sized avatar
🎾
Focusing

ruucm

🎾
Focusing
View GitHub Profile
import React from "react";
const inEffect = `
@keyframes react-fade-in {
0% { opacity: 0.2; transform: translateX(100%); }
50% { opacity: 0.2; transform: translateX(50%); }
100% { opacity: 1; transform: translateX(0%); }
}
`;
@ruucm
ruucm / useElement.js
Created April 18, 2021 09:12
A simple custom hook to get element's ref.
/**
* A simple custom hook to get element's ref.
* @example
* import { useElement } from "./useElement";
*
* export function Test() {
* const [ref, element] = useElement();
*
* return (
* <div ref={ref}>Test {element && element.getBoundingClientRect().width}</div>
@ruucm
ruucm / index.html
Created February 21, 2021 12:34
react-in-simple-html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
@ruucm
ruucm / reset.css
Last active June 8, 2022 02:00
For removing default browser CSS.
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,
@ruucm
ruucm / FF_HTMLbookmarks_toCSV.js
Created October 16, 2020 16:29 — forked from keikoro/FF_HTMLbookmarks_toCSV.js
JavaScript bookmarklet for converting HTML-formatted Firefox bookmarks into a downloadable CSV file
javascript:(function(){
/* escape quotes and commas in contents to be comma-separated */
function wrapCsvContents(content) {
if (typeof(content) === 'string') {
if (content.replace(/ /g, '').match(/[\s,"]/)) {
return '"' + content.replace(/"/g, '""') + '"';
}
}
return content;
}
@ruucm
ruucm / twitch-picuture-in-picture.js
Last active May 13, 2020 06:51
Twitch Picture In Picture for Safari (JavaScript Bookmarklet)
// Original Source Code
var video = document.querySelector("div.video-player video");
if (video.webkitSupportsPresentationMode && typeof video.webkitSetPresentationMode === "function") {
video.webkitSetPresentationMode(video.webkitPresentationMode === "picture-in-picture" ? "inline" : "picture-in-picture");
}
// paste below line to as your bookmark in safari
// javascript:(function()%7Bvar%20video%20%3D%20document.querySelector(%22div.video-player%20video%22)%3Bif%20(video.webkitSupportsPresentationMode%20%26%26%20typeof%20video.webkitSetPresentationMode%20%3D%3D%3D%20%22function%22)%20%7Bvideo.webkitSetPresentationMode(video.webkitPresentationMode%20%3D%3D%3D%20%22picture-in-picture%22%20%3F%20%22inline%22%20%3A%20%22picture-in-picture%22)%3B%7D%7D)()
document.oncontextmenu = new Function("return false");
document.ondragstart = new Function("return false");
document.onselectstart = new Function("return false");
document.body.style.MozUserSelect = "none";
function stringKnife(str, range, remove = false) {
if (typeof range == "number") range = [range, undefined];
const [start, end] = range;
const sliced = str.slice(start, end);
if ((!remove && !end && start > 0) || (remove && start < 0))
return str.replace(sliced, "");
return sliced;
}
// Usage
{
"useAnimation": {
"prefix": "ua",
"body": [
"var ${2:animName}",
"export function ${1:OverrideName}(): Override {",
" ${2: animName} = useAnimation()",
" return {",
" animate: ${2: animName},",
" $3",
@ruucm
ruucm / useGiphy.js
Created December 15, 2019 12:09
A simple react hook to get Giphy random image (install use-http hook first)
import { useRef, useState, useEffect } from "react";
import useFetch from "use-http";
const useGiphy = search => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
const [request, response] = useFetch("http://api.giphy.com/v1");
useEffect(() => {
const getUrl = async () => {