A Year in Review and What is Next

Absence

I made a decision to not post as much on this blog over the past year. Despite reaching upwards of 300,000 views in the past 1.5 years, I wasn’t seeing the positive feedback I was hoping for. Not compliments, but increase knowledge around animations, and just a general positive impact on the community.

I now realize I was wrong. Over the course of the year many people have been posting new animated blog tutorials. I won’t go through my entire twitter timeline but one recently was from someone who posted an animation tutorial.

Lurking in chat channels, many have been helping others with animations and referencing my blog as where they learned. It’s a good feeling. This year I will return to the blog.

Read on →
Tagged under 2017, me, react, react-native, review

Migrating Ava to Jest

First off. Star the repo here https://github.com/facebook/jest so you can show some love for the hardwork that has been put into it.

Props

I was an early adopter of Jest back in the early days ( ~v0.4). It was okay but difficult to setup and slow with sometimes weird results and behaviors.

Tireless effort has been done by Christoph Pojer to get to the latest Jest (v16.01) so props to him and others working with him.

Check out the fantastic documentation here https://facebook.github.io/jest/docs/getting-started.html

Migrating in seconds

There is almost nothing to write about on this topic because it was almost too easy. Mostly because of jest-codemods. It is a set of codemods crafted to transition your Tape or Ava project to Jest.

It is worth it. Jest has come along way when it comes to speed, functionality, configuration options, and ease of configuration (or lack there of to get started).

There were minor configurations I had to setup, but most were copying and pasting from the documentation.

Lets dive into the process real quick.

First and last step to transition tests

First install jest-codemods

npm install -g jest-codemods

Then run jest-codemods in a desired directory. It will prompt you with Ava, Tape, or a both option. Then you provide a glob. I was running in my root so I provided the glob **/__tests__/**/*.js to convert all of my tests.

That was it.

Read on →
Tagged under ava, jest, react, testing

React Native - Maintain Touchable Items with a Parent PanResponder

What Are We Building

Intro

One of the issues I’ve noticed with PanResponder is that people assume it is an all or nothing. By that I mean adding a PanResponder in a parent view means it will steal all of your touches and Touchable items won’t be touchable any longer.

You may be running into this because you copy and pasted it from here the documentation here https://facebook.github.io/react-native/docs/panresponder.html and it includes a capture phase returning true. (I copy and paste this all the time). We’ll talk about the capture phase next.

Read on →
Tagged under Native, PanResponder, React, Touchable

CSS Modules, Webpack and Testing

The Problem

When getting into some basic React testing with CSS Modules I ran into one issue. How the hell do I test them?

You may see the issue that I faced requiring a .css file, if you don’t let me show you.

1
2
3
4
5
6
7
import React from "react";
import MyCss from "./somecss.css";
import classnames from "classnames";

const MyComponent = ({disabled}) => <div className={classnames(MyCss.container, {[MyCss.disabled]: disabled})} />

export default MyComponent;

So there isn’t really much to test here, but lets say we wanted to make sure that a div had the disabled class when it was given a disabled prop. We fire up our test, create it, babel compiles, but oh no, MyCss is undefined, or an empty object. Well duh, we’re using Webpack to process our CSS.

For that matter we could use something to mock the import right? Yeah you could but lets introduce something even more awesome so we don’t have to create custom mocks.

Babel Plugin Webpack Loaders Awesomeness

Babel Plugin Webpack Loaders allows us to run our tests and process all requires through our typical webpack loaders.

Read on →
Tagged under babel, css, css-modules,, modules,, react,, testing,, webpack,

React Native FlexboxFroggy

If you are in the React Native world and haven’t heard about Exponent then you’ve been living under a rock. It’s being built by James Ide, Brent Vatne, and Charlie Cheever. All who have contributed significantly to the React Native community and ecosystem.

Brent is holding a contest to win some awesome prizes, including tickets to the sold out ReactJS 2016 Conf. Check out the contest here https://gist.github.com/brentvatne/7d88f846417452355b18.

What does this have to do with flexbox? Well as my entry into the contest I converted http://flexboxfroggy.com/ to React Native.

Even adding animations was a breeze! One line of code LayoutAnimation.spring() easily makes all frogs spring into place!

You can check out the code here https://github.com/browniefed/flexboxfroggy

Or if you have Exponent installed you can run it easily on your phone by just tapping this link http:[email protected]/flexboxfroggy

If you don’t have Exponent installed I highly suggest you install it!

That’s all from me for now. Looking forward to getting back to blogging in 2016!

Tagged under exponent, flexbox, flexboxfroggy, react-native