     HTTP/1.1 103 Early Hints
     Link: </main.css>; rel=preload; as=style

     HTTP/1.1 103 Early Hints
     Link: </style.css>; rel=preload; as=style
     Link: </script.js>; rel=preload; as=script

     HTTP/1.1 200 OK
     Date: Fri, 26 May 2017 10:02:11 GMT
     Content-Length: 1234
     Content-Type: text/html; charset=utf-8
     Link: </main.css>; rel=preload; as=style
     Link: </newstyle.css>; rel=preload; as=style
     Link: </script.js>; rel=preload; as=script

HTTP/1.1 103 Early Hints

Link: </main.css>; rel=preload; as=style

HTTP/1.1 103 Early Hints

Link: </style.css>; rel=preload; as=style

Link: </script.js>; rel=preload; as=script

HTTP/1.1 200 OK

Date: Fri, 26 May 2017 10:02:11 GMT

Content-Length: 1234

Content-Type: text/html; charset=utf-8

Link: </main.css>; rel=preload; as=style

Link: </newstyle.css>; rel=preload; as=style

Link: </script.js>; rel=preload; as=script

Transform SVG into React components

svgr is a library designed to convert your SVG files to a React component for ease of portability and quick styling (by passing in a color prop). However, there is a performance hit to consider (especially on mobile) when converting/styling SVGs like this.

Don’t want to convert your .svg to .js just to style it easier? No worries, you can always restyle SVG using CSS.

Alexa Kid Skill Challenge

Amazon is hosting a hackathon to build Alexa skills for Kids under 13.

Time to consult the braintrust:

https://alexakidskills.devpost.com/

React apps in subdirectories that use React Router

If you’ve ever deployed your new React app to a subfolder on your server and you’re using React Router you might notice that React Router starts getting all funky and truncates the subfolder name. This is the expected behavior, albeit something easy to overlook when deploying to a subfolder. The good news is that there is a pretty straightforward solution: just add a basepath to your Router and specify the folder name.

Check out the documentation.

<Router basename="/some/sub/directory/">
  // Other routes here
</Router>

// Other routes here

</Router>

For example, I deploy most of my playground apps to apps.bioramp.com, to deploy the Auto9 app I use a subfolder and the resulting URL is http://apps.bioramp.com/auto9

This is what my Router looks like for that app (keep in mind I import my routes from an external file).

// ... other imports
import { routes } from "./config/routes";

class Auto9 extends React.Component {
  render() {
    return (
      <Router basename="/auto9">
        <div>
            {routes.map((route, index) => (
              <Route
                key={index}
                path={route.path}
                exact={route.exact}
                component={route.component}
              />
            ))}
        </div>
      </Router>
    );
  }
}

// ... other imports

import { routes } from "./config/routes";

class Auto9 extends React.Component {

render() {

return (

<div>

{routes.map((route, index) => (

<Route

key={index}

path={route.path}

exact={route.exact}

component={route.component}

))}

</div>

</Router>

);

}

Also, keep in the mind that you should have a “homepage” node in your package.json before you a do a build.

Collective intelligence vs. Superstar Developer

Lunar Logic has an excellent post about why it’s not always about the developer skill set but more-so how well the developer integrates into the team.

From my experience, cowboy coders and catfish programmers can be remarkably effective but there’s nothing more powerful than a solid team working together towards a common goal.

“None of us is as smart as all of us.” -Kenneth H. Blanchard

It’s all about the team, yo.

React Fiber now available

Facebook just officially released React 16 RC. This release was codenamed Fiber and represents a complete rewrite of React. As such, I’m anxious to start using it, but I prefer to wait a little while and give some time for all the relevant libraries I use to confirm compatibility.

Github and Facebook launch the Atom IDE

For a few months Danny had me determined to work with and love Atom.io. It never happened.

Atom certainly is snazzy enough, and neon syntax plugin was fun (but ultimately became like Cathode vintage terminal and the retro fun faded after awhile). Cool enough, but not enough to make me switch.

A personal requirement for me with any editor is the ability to use multiple cursors. Atom came to a crawl (if not crashed) any time I had a large number of multi-cursors active.

The Atom IDE seems like a cool idea (and I applaud GitHub and Facebook for creating and open sourcing it), but I just don’t see how this could dethrone my current favorite IDE: IntelliJ or my current favorite editor: VS Code.

Official Atom IDE Launch Announcement