o-
, Object- abstrct; may be used in any number of (unrelated) places across the project
- modifications have knock-on effects in a lot of other unrelated places
- for “abstracting out the repetitive, shared, and purely structural aspects of a UI into reusable objects”
- layout, wrappers, containers and other “skeletal aspects” of UI components
c-
, Component- a concrete, implementation-specific piece of UI
- modifications are detectable in the context you’re currently looking at
# In order for gpg to find gpg-agent, gpg-agent must be running, and there must be an env | |
# variable pointing GPG to the gpg-agent socket. This little script, which must be sourced | |
# in your shell's init script (ie, .bash_profile, .zshrc, whatever), will either start | |
# gpg-agent or set up the GPG_AGENT_INFO variable if it's already running. | |
# Add the following to your shell init to set up gpg-agent automatically for every shell | |
if [ -f ~/.gnupg/.gpg-agent-info ] && [ -n "$(pgrep gpg-agent)" ]; then | |
source ~/.gnupg/.gpg-agent-info | |
export GPG_AGENT_INFO | |
else |
I’m amazed by React and how it’s bringing happiness to our developer lives. I specially like the workflow that integrates Webpack + React + CSS Modules + Babel among other tools and preprocessors. That’s why Javier Jiménez and I are working together in a library called React Toolbox that we would like to show in a lightning talk at Reactive Conference.
The main idea is to create a set of React components implementing Material Design guidelines. There are already some libraries that solve a similar problem but our project is mostly focused on the workflow and best practices to create a tool everybody would want to use. Also, we are sticking to the design guidelines proposed by Google and embracing minimalism by generating the minimum possible amount of HTML and styles to get the best result. Our workflow includes among others:
- Webpack.
- ES6 with Babel
- Unit t
import { Component } from "React"; | |
export var Enhance = ComposedComponent => class extends Component { | |
constructor() { | |
this.state = { data: null }; | |
} | |
componentDidMount() { | |
this.setState({ data: 'Hello' }); | |
} | |
render() { |
{ | |
"name": "my-app", | |
"version": "1.0.0", | |
"description": "My test app", | |
"main": "src/js/index.js", | |
"scripts": { | |
"jshint:dist": "jshint src/js/*.js", | |
"jshint": "npm run jshint:dist", | |
"jscs": "jscs src/*.js", | |
"browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js", |
// Takes a credit card string value and returns true on valid number | |
function valid_credit_card(value) { | |
// Accept only digits, dashes or spaces | |
if (/[^0-9-\s]+/.test(value)) return false; | |
// The Luhn Algorithm. It's so pretty. | |
let nCheck = 0, bEven = false; | |
value = value.replace(/\D/g, ""); | |
for (var n = value.length - 1; n >= 0; n--) { |
/** | |
* Luhn algorithm in JavaScript: validate credit card number supplied as string of numbers | |
* @author ShirtlessKirk. Copyright (c) 2012. | |
* @license WTFPL (http://www.wtfpl.net/txt/copying) | |
*/ | |
var luhnChk = (function (arr) { | |
return function (ccNum) { | |
var | |
len = ccNum.length, | |
bit = 1, |