| // Managing States in JavaScript via Prototypal Inheritance | |
| // https://pusher.com/sessions/meetup/viennajs/managing-states-in-javascript-via-prototypal-inheritance | |
| function State(newState) { | |
| Object.assign(this, newState); | |
| } | |
| // If you want to make every state to immutable. | |
| // Be careful with this because if state object has property | |
| // which itself is an object then you have to call it recursively. | |
| // function State(newState) { |
| /** | |
| * WHY? - BECAUSE EXCEPTIONS/TRY/CATCH IS A GLOBAL HORRIBLE MESS :-( | |
| * Check out error handling in golang: https://blog.golang.org/error-handling-and-go | |
| */ | |
| /** | |
| * Wrap an "unsafe" promise | |
| */ | |
| function safePromise(promise) { | |
| return promise |
| /* | |
| * use of ramda fantasy Maybe for deep inspection of an object property | |
| * see https://github.com/ramda/ramda-fantasy/blob/master/docs/Maybe.md | |
| * for more info | |
| */ | |
| const R = require("ramda"); | |
| const M = require("ramda-fantasy").Maybe; | |
| const Just = M.Just; | |
| const Nothing = M.Nothing; | |
| const response = { |
| // Usage: | |
| // | |
| // function loader() { | |
| // return new Promise((resolve) => { | |
| // if (process.env.LAZY_LOAD) { | |
| // require.ensure([], (require) => { | |
| // resolve(require('./SomeComponent').default); | |
| // }); | |
| // } | |
| // }); |
We dropped Lerna from our monorepo architecture in PouchDB 6.0.0. I got a question about this from @reconbot, so I thought I'd explain our reasoning.
First off, I don't want this post to be read as "Lerna sucks, don't use Lerna." We started out using Lerna, but eventually outgrew it because we wrote our own custom thing. Lerna is still a great idea if you're getting started with monorepos (monorepi?).
Backstory:
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: manipulationThe 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.
| import React from 'react'; | |
| const IGNORE_CLASS = 'ignore-react-onclickoutside'; | |
| export default function clickOutside(BaseComponent) { | |
| return class ClickOutside extends React.Component { | |
| static displayName = `${BaseComponent.name}ClickOutside`; |
The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!
Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is
| (function () { | |
| var perfBar = function(budget) { | |
| window.onload = function() { | |
| window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {}; | |
| var timing = window.performance.timing, | |
| now = new Date().getTime(), | |
| output, loadTime; |
| // Eliminate FOIT (Flash of Invisible Text) caused by web fonts loading slowly | |
| // Using font events with Font Face Observer | |
| var roboto = new FontFaceObserver('Roboto', { | |
| weight: 400 | |
| }); | |
| observer.check().then(function () { | |
| document.getElement.className += 'fonts-loaded'; | |
| }); | |
| // Load multiple fonts using a Promise |
