Skip to content

Instantly share code, notes, and snippets.

Dawson Botsford dawsbot

Block or report user

Report or block dawsbot

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@dawsbot
dawsbot / image-minifier.sh
Last active Dec 20, 2019
Lossless image compression for all images in current directory
View image-minifier.sh
#!/bin/bash
# Minify all jpg and png images in current directory recursively
command_exists () {
type "$1" &> /dev/null ;
}
# Learn more about optipng at http://sweetme.at/2013/09/11/how-to-maximize-png-image-compression-with-optipng/
if command_exists optipng ; then
optipng -o2 -strip all **/*.png
else
@herr-vogel
herr-vogel / material-ui-next-js-button.js
Last active Jan 10, 2020
Using Material-UI Button with Next.js Link
View material-ui-next-js-button.js
import React from 'react'
import Link from 'next/link'
import Button from '@material-ui/core/Button'
const ButtonLink = ({ className, href, hrefAs, children, prefetch }) => (
<Link href={href} as={hrefAs} prefetch>
<a className={className}>
{children}
</a>
</Link>
@codeBelt
codeBelt / AddBeerAsync_OptionsWithRender.ts
Last active Dec 8, 2019
React Loadable TypeScript Examples
View AddBeerAsync_OptionsWithRender.ts
import * as React from 'react';
import * as Loadable from 'react-loadable';
import OptionsWithRender = LoadableExport.OptionsWithRender;
import AsyncLoader from '../components/AsyncLoader';
import {IProps} from './AddBeer';
const loadableOptions: OptionsWithRender<IProps, any> = {
loader: () => import(/* webpackChunkName: "AddBeer" */ './AddBeer'),
loading: AsyncLoader,
render(loaded: any, props: IProps) {
@radiovisual
radiovisual / .eslintrc
Last active Aug 11, 2019
React Native AirBnB ESLint Config
View .eslintrc
{
"parser": "babel-eslint",
"plugins": [
"react",
"react-native"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
@marcbachmann
marcbachmann / .hyperterm.js
Last active Dec 22, 2018
hyperterm config
View .hyperterm.js
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 12.5,
// font family with optional fallbacks
fontFamily: '"Meslo LG S for Powerline", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',
// terminal cursor background color (hex)
cursorColor: 'rgba(255,255,255,.4)',
View managing-state-in-react.md

Managing State in React

After digging more into React I get a better idea on how React states work. It looks like React still have a bit of magic happening behind the scene to make states work.

// 3 Elements mapping to the same real DOM
var element1 = <MyElement awesome=true>My Awesome Content</MyElement>

var element2 = <MyElement awesome=false>My Boring Content</MyElement>
@markerikson
markerikson / appEntryPoint.js
Last active Jan 9, 2020
Webpack React/Redux Hot Module Reloading (HMR) example
View appEntryPoint.js
import React from "react";
import ReactDOM from "react-dom";
import configureStore from "./store/configureStore";
const store = configureStore();
const rootEl = document.getElementById("root");
@markerikson
markerikson / react-controlled-inputs.md
Last active Dec 8, 2019
React "controlled" vs "uncontrolled" inputs explanation
View react-controlled-inputs.md

[12:03 AM] acemarke: "controlled" and "uncontrolled" inputs
[12:04 AM] acemarke: if I have a plain, normal HTML page, and I put <input id="myTextbox" type="text" /> in my page(edited)
[12:04 AM] acemarke: and I start typing into that textbox
[12:04 AM] acemarke: it remembers what I've typed. The browser stores the current value for that input
[12:05 AM] acemarke: and then sometime later, I can get the actual element, say, const input = document.getElementById("myTextbox"), and I can ask it for its value: const currentText = input.value;
[12:05 AM] acemarke: good so far?
[12:08 AM] acemarke: I'll keep going, and let me know if you have questions
[12:08 AM] lozio: ok, actually I'm reading
[12:09 AM] lozio: good
[12:09 AM] acemarke: so, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value

@dawsbot
dawsbot / gitBackup.sh
Created Jan 29, 2016
Always have your code in two git servers by backing up with Bitbucket
View gitBackup.sh
#Enter this as one line
git remote set-url — add — push origin git@bitbucket.org:dawsonbotsford/vimrcbuilder.git
#Re-add the original URL as well. Again do this with one line
git remote set-url — add — push origin git@github.com:dawsonbotsford/vimrcBuilder.git
#Verify everything worked
git remote -v
@dagingaa
dagingaa / prototype-to-class.js
Last active Nov 18, 2017
Codemod to transform well-written function prototype style classes into the new ES2015 syntax. Requires jscodeshift.
View prototype-to-class.js
module.exports = (file, api, options) => {
const j = api.jscodeshift;
const root = j(file.source);
// We have to add "use strict" for node to play nice
// Taken from https://github.com/cpojer/js-codemod/blob/master/transforms/use-strict.js
const hasStrictMode = body =>
body.some(
statement => j.match(statement, {
type: 'ExpressionStatement',
You can’t perform that action at this time.