Skip to content

Instantly share code, notes, and snippets.

View kennetpostigo's full-sized avatar
🏠
Working from home

Kennet Postigo kennetpostigo

🏠
Working from home
View GitHub Profile
class Profile extends React.Component {
// etc.
}
function createContainer (Component) {
return class extends React.Component {
render () {
return <Component {...this.props}/>
}
}
@staltz
staltz / .bashrc
Created March 7, 2017 13:08
Show a macOS notification when a terminal task is done
# Name it whatever you want. I like `y` because in my keyboard layout it's close to `;`
function y() {
previous=$?
if [ $previous -eq 0 ]; then
osascript -e "display notification \"Done\" with title \"Terminal Task\"" && say "it is done";
else
osascript -e "display notification \"Failed\" with title \"Terminal Task\"" && say "it went to the trees";
fi
}
@jasim
jasim / json_to_string.re
Created August 12, 2017 18:45
Reason script to traverse a native JSON object
type json = Js.Json.t;
let x: json = [%bs.raw {|{"a": [1, "hello", 2, {"b": {"c": [100,200, "d", [10,20,30]]}}]}|}];
let rec json_to_string json => {
let array_to_string a => a |> Array.to_list |> String.concat ",";
let emitObject o =>
"{" ^
{
let emitKV (key, value) => key ^ ": " ^ json_to_string value;
@mardambey
mardambey / testRunner.html
Created April 14, 2011 03:56
Simple test runner in JS.
<html>
<head>
<title>Mate1 Test Runner</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
// A test is the base class for all tests
// that will be run by the test runner.
Test = function() {
@donavon
donavon / test_runner.js
Last active January 22, 2020 23:08 — forked from joakimbeng/test_runner.js
A small and simple Javascript test runner
/**
* A Javascript test runner in 20 lines of code
* From http://joakimbeng.eu01.aws.af.cm/a-javascript-test-runner-in-20-lines/
*/
(function () {
// The test queue:
var tests = [];
// Function to add tests:
this.test = function test (name, cb) {
var Dialog = React.createClass({
render: function() {
// 1) render nothing, this way the DOM diff will never try to do
// anything to it again, and we get a node to mess with
return React.DOM.div();
},
componentDidMount: function() {
// 2) do DOM lib stuff
this.node = this.getDOMNode();

tracked npm

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

@acdlite
acdlite / app.js
Last active January 20, 2023 08:23
Quick and dirty code splitting with React Router v4
// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
return class AsyncComponent extends React.Component {
static Component = null;
state = { Component: AsyncComponent.Component };
componentWillMount() {
if (!this.state.Component) {
getComponent().then(Component => {

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

There are a couple of likely reasons this warning could be appearing:

  1. Are you using {...this.props} or cloneElement(element, this.props)? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.

  2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).

  3. React does not yet reco

gif-from-tweet

There are so many great GIFs out there and I want to have copies of them. Twitter makes that harder than it should be by converting them to MP4 and not providing access to the source material. To make it easier, I made a bash pipeline that takes a tweet URL and a filename, extracts the MP4 from that tweet and uses ffmpeg to convert back to GIF.

Dependencies

  • ffmpeg
    • macOS: brew install ffmpeg
    • Ubuntu/Debian: apt install ffmpeg