Fastpack - pack JavaScript fast & easy
This gist is a submission for a lightning talk on the ReactiveConf 2018.
Why?
- JavaScript bundling can be a lot faster
- There are proper tools to guarantee consistency
- Writing OCaml code is fun!
This gist is a submission for a lightning talk on the ReactiveConf 2018.
In this talk I'd like to use 5 minutes of my time to explain to the audience why jQuery is simply way better than React.
fadeIn()
method? Nah, I don't think so. You need to install a react-transition-group package which weighs over 3GB.$.get(https://stackoverflow.com/questions/12345/adding_two_numbers_javascript)
in React? NOPE.And many, many more.
(This is a completely serious lightning talk proposal, I promise.)
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.
const { execSync } = require('child_process'); | |
const directory = 'src'; | |
const findOut = execSync('find -L src').toString(); | |
const filenames = findOut.trim().split('\n') | |
.filter(name => name.endsWith('.js')) | |
.map(name => name.replace('.js', '').replace('src/', '').replace(/\/index$/, '')); | |
console.log('Found', filenames.length, 'files in', directory); |
Please
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.
import React, { Component, PropTypes } from 'react'; | |
class OutsideClick extends Component { | |
static propTypes = { | |
children: PropTypes.any, | |
onClick: PropTypes.func.isRequired, | |
id: PropTypes.string, | |
tag: PropTypes.string, | |
className: PropTypes.string | |
} |
queryIds(searchIds){ | |
let ids = [...searchIds]; | |
return this.lanes.reduce((result, lane, laneIdx) => { | |
// no more ids | |
if(!ids.length) return result; | |
const notes = lane.notes; | |
const idsIndexOfLane = ids.indexOf(lane.id); |
import React from 'react' | |
import { render } from 'react-dom' | |
import { Router, browserHistory, match } from 'react-router' | |
import createStore from '../shared/lib/create-store.js' | |
import ContextProvider from '../shared/lib/context-provider.js' | |
import { fetchDataOnLocationMatch } from '../shared/lib/fetch-data.js' | |
import Root from './Root.jsx' | |
import routes from '../shared/routes.jsx' | |
import { AppContainer } from 'react-hot-loader' | |
import { observable, computed, autorun } from 'mobx' |
The issue:
..mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.
(from a new defunct https://developers.google.com/mobile/articles/fast_buttons article)
touch-action
CSS property can be used to disable this behaviour.
touch-action: manipulation
The user agent may consider touches that begin on the element only for the purposes of scrolling and continuous zooming. Any additional behaviors supported by auto are out of scope for this specification.