Anthony Ascencio anthony2025

Explaining Miles's Magic

Miles Sabin recently opened a pull request fixing the infamous SI-2712. First off, this is remarkable and, if merged, will make everyone's life enormously easier. This is a bug that a lot of people hit often without even realizing it, and they just assume that either they did something wrong or the compiler is broken in some weird way. It is especially common for users of scalaz or cats.

But that's not what I wanted to write about. What I want to write about is the exact semantics of Miles's fix, because it does impose some very specific assumptions about the way that type constructors work, and understanding those assumptions is the key to getting the most of it his fix.

For starters, here is the sort of thing that SI-2712 affects:

def foo[F[_], A](fa: F[A]): String = fa.toString

Cheng Lou - On the Spectrum of Abstraction

Cheng Lou, a former member of the React team, gave an incredible talk at React Europe 2016 entitled "On the Spectrum of Abstraction". That talk is available for viewing here: https://www.youtube.com/watch?v=mVVNJKv9esE

It's only a half-hour, but it is mind-blowing. It's worth re-watching two or three times, to let the ideas sink in.

I just rewatched the talk for some research, and wrote down a summary that's semi-transcript-ish. I didn't see any other transcripts for this talk, other than the auto-generated closed captions, so I wanted to share for reference.

Summary

Go here, select "View Bug Reporter", login, select "New", select "Bug Reporter".

Classification:

UI/Usability

Reproducability:

Always

Title:

App Store Review Guidelines should use different language when discouraging unqualified submissions to the app store

Preact for Angular 1 Users

Here's my quick attempt to build a tiny preact app using terminology from Angular 1.

Installation

# get it
git clone https://gist.github.com/e5de4c33c1a8d8fd172905010d3ff75c.git preact-for-angular1-users
cd preact-for-angular1-users

Ever wonder why a particular website is showing a development build icon for React DevTools? Here's how you can find out!

First copy/paste this well-annotated DevTools build-type-checker function into your browser console so you can run it.

Next, execute the following line in your developer console:

console.log(__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers);

If React is present on the page, you'll see something like:

	export const GoogleApi = function(opts) {
	opts = opts \|\| {}

	const apiKey = opts.apiKey;
	const libraries = opts.libraries \|\| [];
	const client = opts.client;
	const URL = 'https://maps.googleapis.com/maps/api/js';

	const googleVersion = '3.22';
	let script = null;

	// While I claim this is a drop-in replacement, it is a little bit slower.
	// If you have hundreds of links, you might spend a few more milliseconds rendering the page on transitions.

	// KNOWN ISSUES WITH THIS APPROACH:

	// * This doesn't work great if you animate route changes with <TransitionGroup>
	// because the links are going to get updated immediately during the animation.
	// * This might still not update the <Link> correctly for async routes,
	// as explained in https://github.com/reactjs/react-router/issues/470#issuecomment-217010985.

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	import styled from ‘styled-components’;

	const Score = styled.div`
	/* some styles here … */
	font-size: ${props => props.length <= 2 ? 62 : 45}px;
	`;

	// Imagine what would it be if connect, withRouter, injectIntl were child as function
	export default (
	<Connect mapStateToProps={mapStateToProps} mapPropsToActions={actions}>
	{
	(props) => (
	<WithRouter>
	{
	(router) => (
	<InjectIntl>
	{(intl => <SomeComonent intl={intl} router={router} {...props} />}