Skip to content

Instantly share code, notes, and snippets.

Avatar
🎾
Focusing

ruucm

🎾
Focusing
View GitHub Profile
View test-component.js
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 Apr 18, 2021
A simple custom hook to get element's ref.
View useElement.js
/**
* 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 Feb 21, 2021
react-in-simple-html
View index.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 Jun 8, 2022
For removing default browser CSS.
View reset.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 Oct 16, 2020 — forked from keikoro/FF_HTMLbookmarks_toCSV.js
JavaScript bookmarklet for converting HTML-formatted Firefox bookmarks into a downloadable CSV file
View FF_HTMLbookmarks_toCSV.js
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
Twitch Picture In Picture for Safari (JavaScript Bookmarklet)
View twitch-picuture-in-picture.js
// 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)()
View disableDrag.js
document.oncontextmenu = new Function("return false");
document.ondragstart = new Function("return false");
document.onselectstart = new Function("return false");
document.body.style.MozUserSelect = "none";
View 🔪stringKnife.js
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
View vscode-framer-snippets.json
{
"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 Dec 15, 2019
A simple react hook to get Giphy random image (install use-http hook first)
View useGiphy.js
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 () => {