A rather geeky/technical weblog, est. 2001, by Bramus
import {Motion, spring} from 'react-motion'; // In your render: <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> This library provides an alternative, more powerful API for React’s TransitionGroup. For 95% of use-cases of animating components, we don’t have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for …
Continue reading “Motion Design in React.js with “React Motion””
Video of the talk “Front-End Performance: The Dark Side” by Mathias Bynens which he gave at Fronteers Spring Conference 2016 which I attended: In security-sensitive situations, performance can actually be a bug rather than a feature. This presentation covers timing attacks on the web, and demonstrates how modern performance-related web APIs can sometimes have a …
Continue reading “Front-End Performance: The Dark Side @ Fronteers Spring Conference 2016”
Today I learned: In JavaScript it is possible to use the + operator alone before a single element. This indicates a math operation and tries to convert the element to a number. If the conversion fails, it will evaluate to NaN. This is especially useful when one wants to convert a string to a number …
Create your component as you normally would, and then register it on the document using document.registerReact(…) /* @jsx React.DOM */ MyComponent = React.createClass({ render: function() { console.log(this.props.items); // passed as HTML tag`s argument console.log(this.props.children); // original tag children return <ul><li>React content</li></ul>; } }); document.registerReact('my-react-component', MyComponent); You can then use it as follows: <body> <my-react-component items="{window.someArray}"></my-react-component> …
Continue reading “ReactiveElements: Convert React.js components into Web Components”
There’s a good set of articles on ES6 ES2015 over at Pony Foo: Promises, Arrow Functions, Template Literals, Classes, Modules, Array Extensions, Destructuring, Iterators, Maps, Proxies, … it’s all covered. The post ES6 ES2015 Overview in 350 Bullet Points is a nice summary of ‘m all. Pony Foo: Articles tagged es6-in-depth →
The state of Javascript development is overwhelming and confusing because everyone is over-engineering their apps by default without even realizing it. How should you start a Javascript application? Should you ever use something like React or Angular? Should you use a package manager? What do you do if you don’t? Are tests even necessary? Should …
Crystal clear video course on getting started with Redux: Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently. In this series, we will learn the basics of Redux, so that you can start using it to simplify …
Enter react-native-webview-bridge, a JavaScript bridge between your React Native app and a WebView contained inside it: var WebViewBridge = require('react-native-webview-bridge'); const injectScript = ` (function () { if (WebViewBridge) { WebViewBridge.onMessage = function (message) { if (message === "hello from react-native") { WebViewBridge.send("got the message inside webview"); } }; WebViewBridge.send("hello from webview"); } }()); `; …
Continue reading “Sending/Getting messages to/from a React Native Webview”
So, you’re starting a brand new JavaScript front end project or overhauling an old one, and maybe you haven’t kept up with the breakneck pace of the ecosystem. Or you did, but there’s too many things to choose from. React, Flux, Angular, Aurelia, Mocha, Jasmine, Babel, TypeScript, Flow, oh my! Well, the good news is …