Skip to content

Instantly share code, notes, and snippets.

View ruucm's full-sized avatar
🎾
Focusing

ruucm

🎾
Focusing
62 followers · 65 following
View GitHub Profile
@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 / vscode-framer-snippets.json
Last active June 8, 2022 02:01
{
"useAnimation": {
"prefix": "ua",
"body": [
"var ${2:animName}",
"export function ${1:OverrideName}(): Override {",
" ${2: animName} = useAnimation()",
" return {",
" animate: ${2: animName},",
" $3",
@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 / test-component.js
Last active December 29, 2021 06:00
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 / 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)()
@ruucm
ruucm / disableDrag.js
Created April 28, 2020 04:53
document.oncontextmenu = new Function("return false");
document.ondragstart = new Function("return false");
document.onselectstart = new Function("return false");
document.body.style.MozUserSelect = "none";
@ruucm
ruucm / 🔪stringKnife.js
Last active March 11, 2020 16:53
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
@ruucm
ruucm / useUnsplash.js
Last active December 15, 2019 12:09
A simple react hook to get unsplash radom image without API
import { useRef, useState, useEffect } from "react";
const useUnsplash = search => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState([]);
useEffect(() => {
const getUrl = async () => {
var currentSize = 800;
const baseUrl = "https://source.unsplash.com";
const route = search === "" ? "/random" : `/featured`;