Skip to content

Instantly share code, notes, and snippets.

View pomber's full-sized avatar
🧭
Building @code-hike

Rodrigo Pombo pomber

🧭
Building @code-hike
View GitHub Profile
@pomber
pomber / styled-components-snippets.jsx
Created September 28, 2018 15:22
Styled Components API snippets
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
:hover {
color: red;
}
`;
// attrs, props, &
const React = require("react");
const Lifecycles = React.createLifecycleEvents({
didMount({ setState }) {
setState({
disabled: false,
});
},
didUpdate({ inputRef }) {
if (document.activeElement !== inputRef.value) {
@thebinarypenguin
thebinarypenguin / node-hello-world.js
Created March 6, 2016 13:27
"Hello World" HTTP server using node.js
const http = require('http');
const name = 'node-hello-world';
const port = '8888';
const app = new http.Server();
app.on('request', (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.write('Hello World');
@asmaier
asmaier / start_cloudera.sh
Created July 17, 2017 16:19
Start script for cloudera quickstart docker container (see https://dzone.com/articles/docker-how-to-get-started-with-cloudera)
#!/bin/bash
docker run --name cdh --hostname "quickstart.cloudera" --privileged=true -t -i -d \
-p 80:80 \
-p 7180:7180 \
-p 8888:8888 \
cloudera/quickstart /usr/bin/docker-quickstart
docker exec -ti cdh /home/cloudera/cloudera-manager --express
@pomber
pomber / bleeding-thread.js
Last active October 13, 2019 20:13
Run this to display the health of the main thread. Long red lines means that the main thread was busy for a long time.
(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;
@RLesur
RLesur / google_fonts.md
Created June 30, 2018 21:38 — forked from cvan/google_fonts.md
get ttf, woff, woff2 from Google Fonts

ttf

curl 'https://fonts.googleapis.com/css?family=Karla'

woff2

curl 'https://fonts.googleapis.com/css?family=Karla' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'User-Agent: AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116'

woff

After many years of writing and thinking about developer documentation, I'm convinced that the discipline is still in its infancy. The goal of this document is to summarize my current opinions on the topic of documenting software.

When you ask a software developer what their favorite documentation is, you'll get a wide range of opinions with consensus centering roughly around the Stripe and Twilio documentation, as well as the documentation for open source software like Django, Perl, Flask, etc.

In academia, the uncontested master craftsman of developer documentation is Donald Knuth, who pioneered "Literate Programming"

At the frontier of developer documentation, we find projects like Eve and other projects inspired by Bret Victor's seminal "Inventing on Principle" video.

However, as folks at Dynamicland will often point out, the medium (in the McLuhan sense of the word) of software hasn't changed much since the days when code was written on teletypes: We still write software on fancy typewriters. The

@cantbewong
cantbewong / Install-DCOS-baremetal.md
Last active August 30, 2020 09:43
Install DC/OS on bare metal

Install DC/OS on bare metal

Assume 5 physical nodes, or VMs, that will be used with ScaleIO storage

  • All nodes have 2 CPU cores, 64GB of disk storage. Hardware or VM type needs to support CentOS 7.3.
  • The Install bootstrap node needs 4GB of memory, Other node types might get by with 2GB, though the spec calls for more (32GB on Master and Boot node, 16GB on others), and 2GB is cutting it close on the Master node for sure.
  • Assume a single NIC each, All on a common subnet - though other configurations may work
  • Each node must have a hostname in DNS, with forward and reverse lookup working, DHCP is OK
@markerikson
markerikson / redux-archeology-notes.md
Last active November 17, 2020 04:54
Redux Archeology and Design Notes

Design Goals

reduxjs/redux#8 (comment)

The main goal of this library is to prove that Flux can be implemented in a way compatible with full hot reloading (and explore how this can be done). You can run the example code with npm start, change action creators or stores, and the new logic will kick in before you refresh.

@acdlite
acdlite / coordinating-async-react.md
Last active March 20, 2022 12:27
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?