Javi Velasco javivelasco

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

https://reactiveconf.com/

Please 🌟 this gist to vote for this proposal!

Make linting great again!

No other topic in software development probably has so much controversy as linting.

With a wrong workflow linting can be really a pain and will slow you and your team down. With a proper setup, though, it can save you hours of manual work reformatting the code and reducing the code-review overhead.

Ikea Bekant standing desk with Gerton table top

Rich text editing with DraftJS Plugins

Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.

Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓

DraftJS Plugins

Please star ⭐️ the gist to help! This is a proposal for a ⚡️ talk at Reactive Conference.

Styling Components in React Toolbox 2

I wrote react-toolbox and presented it almost a year ago in lighning talk at Reactive Conf 2015 in Bratislava. At first it was just a proof of concept of a component library styled with CSS Modules and SASS. Now the project has grown quite a bit, and during this year there has been tons of changes and lessons learned.

Theming and customization is one of the most difficult and interesting problems to solve. For the first version we needed a custom Webpack loader to generate themes and doing simple style overrides was very painful. Today I'm working on a new playground that will allow you try CSS Modules live, and to create React Toolbox themes on the f

Docker - How to cleanup (unused) resources

Once in a while, you may need to cleanup resources (containers, volumes, images, networks) ...

delete volumes

// see: https://github.com/chadoe/docker-cleanup-volumes

$ docker volume rm $(docker volume ls -qf dangling=true)

$ docker volume ls -qf dangling=true | xargs -r docker volume rm

Common Options

-#, --progress-bar Make curl display a simple progress bar instead of the more informational standard meter.

-b, --cookie <name=data> Supply cookie with request. If no =, then specifies the cookie file to use (see -c).

-c, --cookie-jar <file name> File to save response cookies to.

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

#A brief intro into Stateless functions#

So stateless functions are new in React 0.14 which are quite interesting. They look a bit like this.

const Test = ({name, amount}) => {
  return <div className="test">{name} has £{amount}</div>;
};

ReactDOM.render(<Test name="ben" amount="-2000" />) //  <div className="test">ben has £-200</div>

	import React, { Component, PropTypes } from 'react';
	import htr from 'hooks-theme-refs';

	export class Chip extends Component {
	render() {
	const { label, hooks, theme, refs, children, ...rest } = htr(this);

	return (
	<div {...rest} className={theme.chip} onClick={hooks.onClick} ref={refs.chip}>
	{children}