Skip to content

Instantly share code, notes, and snippets.

Avatar
🧭
Building @code-hike

Rodrigo Pombo pomber

🧭
Building @code-hike
View GitHub Profile
@pomber
pomber / sample.ipynb
Created Nov 4, 2017
Jupyter notebook project folder structure
View sample.ipynb
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@pomber
pomber / timeago.js
Created Feb 14, 2020
Get a time ago human friendly string from a date (like dates in twitter).
View timeago.js
const MINUTE = 60,
HOUR = MINUTE * 60,
DAY = HOUR * 24,
YEAR = DAY * 365;
function getTimeAgo(date) {
const secondsAgo = Math.round((+new Date() - date) / 1000);
if (secondsAgo < MINUTE) {
return secondsAgo + "s";
View page.js
import { bundleMDX } from "mdx-bundler";
import { getMDXComponent } from "mdx-bundler/client";
import React from "react";
export async function getServerSideProps() {
const mdxSource = `
# Hello
~~~js
console.log(1);
~~~`;
@pomber
pomber / remark.md
Last active Oct 2, 2021
Adding props to a JSX element with remark
View remark.md

This MDX file

import { MyComponent } from "my-component"

<MyComponent foo={[1, 2, 3]} />

Generates this mdxJsxFlowElement node in the MDAST:

@pomber
pomber / package.json
Created Mar 14, 2017
Root package.json with nested scripts
View package.json
{
"stuff": "...",
"scripts": {
"postinstall": "run-p install:api install:web",
"install:api": "cd api && npm install",
"install:web": "cd web && npm install",
"start": "run-p start:api start:web",
"start:api": "npm run start --prefix api",
"start:web": "npm run start --prefix web",
View slowmo.js
function slowmo(rate = 10) {
window._raf = window.requestAnimationFrame
window.requestAnimationFrame = f => window._raf(t => f(t/rate))
Date._now = Date.now
Date.now = () => Date._now() / rate
performance._now = performance.now
performance.now = () => performance._now()/rate
}
slowmo()
View lazy-with-preload.js
function lazyWithPreload(factory) {
const Component = React.lazy(factory);
Component.preload = factory;
return Component;
}
const StockChart = lazyWithPreload(() => import("./StockChart"));
// somewhere in your component
...
View didact-fiber.js
function commitAllWork(fiber) {
fiber.effects.forEach(f => {
commitWork(f);
});
fiber.stateNode._rootContainerFiber = fiber;
nextUnitOfWork = null;
pendingCommit = null;
}
function commitWork(fiber) {
@pomber
pomber / prerender.jsx
Last active Oct 28, 2019
Maybe some day we'll have something like this
View prerender.jsx
function App({ items }) {
const [itemId, setItemId] = useState(null)
const [startTransition, prepareTransition] = useTransition(newId => setItemId(newId), {
timeoutMs: 1000
})
return (
<Suspense fallback='Loading...'>
{itemId === null ? (
<ul>
{items.map(item => (
@pomber
pomber / bleeding-thread.js
Last active Oct 13, 2019
Run this to display the health of the main thread. Long red lines means that the main thread was busy for a long time.
View bleeding-thread.js
(function(frames = 200, colWidth = "2px") {
const container = document.createElement("div");
container.style.position = "fixed";
container.style.right = "10px";
container.style.top = "0";
container.style.zIndex = "99999";
for (let i = 0; i < frames; i++) {
const fc = document.createElement("div");
fc.style.background = "red";
fc.style.width = colWidth;