Skip to content

Instantly share code, notes, and snippets.

Avatar
🧭
Building @code-hike

Rodrigo Pombo pomber

🧭
Building @code-hike
View GitHub Profile
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:

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()
@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";
@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 => (
View dijkstra.md

Our intellectual powers are rather geared to master static relations and ... our powers to visualize processes evolving in time are relatively poorly developed. For that reason we should do (as wise programmers aware of our limitations) our utmost to shorten the conceptual gap between the static program and the dynamic process, to make the correspondence between the program (spread out in text space) and the process (spread out in time) as trivial as possible.
--- Dijkstra (1968) "A Case against the GO TO Statement" cited in: Bill Curtis (1981) Tutorial, human factors in software development. p. 109.

@pomber
pomber / mute.txt
Created Jun 14, 2019
Fix twitter timeline
View mute.txt
suggest_who_to_follow
suggest_recap
suggest_recycled_tweet
suggest_recycled_tweet_inline
suggest_activity_tweet
suggest_pyle_tweet
suggest_ranked_timeline_tweet
@pomber
pomber / thanos.js
Last active May 23, 2019
Decimate issues button for GitHub
View thanos.js
const buttonHtml = `
<a id="thanos" class="btn btn-primary float-right" role="button"
style="margin-left:38px">
Decimate issues
</a>`;
var css = '#thanos:hover{ background-image: linear-gradient(-180deg,#6d3678,#693270 90%) }';
var style = document.createElement('style');
@pomber
pomber / Presenter.jsx
Created May 11, 2019
mdx-deck teleprompter
View Presenter.jsx
import React from "react"
import { globalHistory } from "@reach/router"
import Zoom from "./Zoom"
import Slide from "./Slide"
import Pre from "./Pre"
import Clock from "./Clock"
// based on https://github.com/streamich/react-use/blob/master/src/useSpring.ts
import { SpringSystem } from "rebound"
import { useState, useEffect } from "react"
View __.babelrc
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}