const toCSV = (arr, delimiter = ",") =>
arr.map((v) => v.map((x) => x).join(delimiter)).join("\n");
toCSV([
["Name", "Email"],
["Jane Doe", "jane.doe@email.com"],
]); // Name,Email\nJane Doe,jane.doe@email.com
const toCSV = (arr, delimiter = ",") =>
arr.map((v) => v.map((x) => x).join(delimiter)).join("\n");
toCSV([
["Name", "Email"],
["Jane Doe", "jane.doe@email.com"],
]); // Name,Email\nJane Doe,jane.doe@email.com
const queryString = "q=sample+query+params";
// old way
queryString.replace(/\+/g, " ");
// new way
queryString.replaceAll("+", " ");
@media all and (display-mode: fullscreen) {
body {
background-color: blue;
}
}
# local npm module
cd ~/local-dependency
npm link
# local project that uses your local npm module
cd ~/my-app
npm link local-dependency
import { useState, useEffect } from "react";
export default function useLocalStorage(defaultValue, key) {
const getItem = () => {
const item = window.localStorage.getItem(key);
const parsedItem = item !== null ? JSON.parse(item) : defaultValue;
return {
...defaultValue,
...parsedItem,
};
};
const [value, setValue] = useState(() => {
return getItem();
});
useEffect(() => {
const item = getItem();
const valueToSet = { ...item, ...value };
window.localStorage.setItem(key, JSON.stringify(valueToSet));
}, [key, value]);
return [value, setValue];
}
// example usage
function App() {
const [preferences, setPreferences] = useLocalStorage({}, "preferences");
const handleSelection = (e) => {
const { name, value } = e.target;
setPreferences({ ...preferences, name: value });
};
return (
<div>
<label htmlFor="mode">Mode</label>
<select name="mode" onChange={handleSelection}>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
);
}
const isWholeNumber = (n) => n - Math.floor(n) === 0;
import { useState, useEffect } from 'react';
export default function useWindowSize() {
const isClient = typeof window === 'object';
const [windowSize, setWindowSize] = useState({
height: undefined,
width: undefined,
});
useEffect(() => {
if (!isClient) return undefined;
function handleResize() {
setWindowSize({
height: window.innerHeight,
width: window.innerWidth,
});
}
window.addEventListener('resize', handleResize);
// initial window size
handleResize();
return () => window.removeEventListener('resize', handleResize);
return windowSize;
}
// example usage
function App() {
const size = useWindowSize();
return (
<div>{size.width}px / {size.height}px</div>
)
}
export $(grep -v '^#' .env | xargs) && # ex. node index.js
export default function App() {
const arr = [];
return (
<div>
{arr.length && <span>You won't see me but you will see a 0</span>}
{/* make arr.length a boolean by adding !! */}
{!!arr.length && <span>You won't see me and the 0 is gone</span>}
</div>
);
}
npm list -g --depth 0
# or
yarn global list --depth=0
function diff(a, b) {
if (a.length > b.length) {
return a.filter((a) => !b.includes(a));
}
return b.filter((b) => !a.includes(b));
}
diff([0, 2, 4], [1, 2, 3, 4]);
docker run --name my-redis-container -p 6379:6379 -d redis
const uppercaseStr = "Testing";
const lowercaseStr =
uppercaseStr.charAt(0).toLowerCase() + uppercaseStr.slice(1);
const lowercaseStr = "testing";
const uppercaseStr =
lowercaseStr.charAt(0).toUpperCase() + lowercaseStr.slice(1);
// input
console.log(console);
// output
/*
{
debug: [Function: debug],
error: [Function: error],
info: [Function: info],
log: [Function],
warn: [Function: warn],
dir: [Function: dir],
dirxml: [Function: dirxml],
table: [Function: table],
trace: [Function: trace],
group: [Function: group],
groupCollapsed: [Function: groupCollapsed],
groupEnd: [Function: groupEnd],
clear: [Function: clear],
count: [Function: count],
countReset: [Function: countReset],
assert: [Function: assert],
profile: [Function: profile],
profileEnd: [Function: profileEnd],
time: [Function: time],
timeLog: [Function: timeLog],
timeEnd: [Function: timeEnd],
timeStamp: [Function: timeStamp],
context: [Function: context],
memory: [Getter/Setter]
}
*/