New Tutorials on Code Daily

I’ve officially launched my new site Code Daily. This site will now house all of my tutorials, screencasts, and courses.

The goal is to post some bit of content on a daily basis. Anything from a tutorial, to a screencast, or even full courses could be published daily!

These will primarily be focused on React, React Native, and general web development practices. However as I slowly grow and see where the web/mobile is headed I will devote more time towards that content.

I will do my best to provide value and making the “bleeding edge” of web/mobile technologies less intimidating.

I will still update some content on this site, but at some point redirects will be setup to my new site.

So if you still want to get content visit Code Daily, and follow me on twitter at https://twitter.com/codedailyio.

Check it out here => Code Daily

Tagged under new, site

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,