Build a reusable, functional animation component for using React Hooks.

Animations delight users. And you’d think, by the sheer volume of articles, that React Hooks delight developers. But for me, fatigue was starting to creep into my opinions on Hooks. But serendipity saved me, as I found an example that was a good match for React Hooks, rather than just “the new way”. As you probably have guessed by this article’s title, that example was an animation.

(Note: This article was first published on freecodecamp.org.)

I was working on a React application with cards in a grid. When an item was removed, I wanted to animate its exit, like this.

Image for post
Image for post
my goal


Image for post
Image for post
let me in! (Giphy)

Handling auth is painful. But most applications need to authenticate users and control what resources they can access. Microservices, though growing in popularity, can add complexity. You need to secure both the user’s actions and the interactions between services.

AWS offers some great building blocks for a microservices architecture. But like furniture from IKEA, you have to assemble the pieces yourself. Plus the instructions aren’t very good.

We’ll build a simple application and configure AWS to authenticate a user and secure a microservice.

TL;DR (for the impatient)

Working Demo: https://auth-api-demo.firebaseapp.com/ (user: demouser password: demoPASS123)

GitHub Repo: https://github.com/csepulv/auth-api-demo

Base Use Case/Assumption: There are two groups…


Microinteractions guide a user through your application. They reinforce your user experience and provide delight.

You may have seen some of the slick examples of microinteractions on Dribble or CodePen. But do you know how to build your own library of similar UI widgets?

In this article, I’ll focus on animated microinteractions using React, Facebook’s popular, component-oriented UI framework. I’ll build three interactions for a searchbox:

  • open and close the text box
  • move to the top of the screen
  • shake (indicating an error)
Image for post
Image for post

I’ll use a few different implementations:

Here’s a live demo and the code…


Image for post
Image for post
Photo courtesy of pixabay.com

A prospective founder must ask: is my idea viable? But this question also must be addressed throughout the startup’s life. This story is my cheat sheet for evaluating the viability and strategy of startups.

I spent 10 years with Pivotal Labs (now Pivotal), working with hundreds of startups. Some like TrueCar, TaskRabbbit and Twitter matured and succeeded. Others did not. Now, I am an operating partner at an angel fund, leading two startups and advising others. These experiences have revealed insights and patterns that help me declutter the confusion and distractions common in startups.

Of course they will come

I was sitting in Verve Coffee


Image for post
Image for post

Developers are adopting Higher Order Components (HOC) Stateless Functional Components, and for good reason: they make it easier to achieve code reuse, a coveted aspiration of developers.

There are many articles on HOC and Functional Stateless Components. Some are introductions and others describe deep technical aspects; I’ll explore refactoring existing components to create reusable elements.

You might think that code reuse is overrated. Or it’s too hard, especially when looking to share code between the web and mobile. But here are a few benefits to consider:

  • UX consistency, both within an application and across devices
  • Make cross-cutting upgrades: improve a…

Image for post
Image for post

I recently built an Electron app using create-react-app. I didn’t need to muck about with Webpack, or “eject” my app, either. I’ll walk you through how I accomplished this.

I was drawn to the idea of using create-react-app because it hides the webpack configuration details. But my search for existing guides for using Electron and create-react-app together didn’t bear any fruit, so I just dove in and figured it out myself.

If you’re feeling impatient, you can dive right in and look at my code. Here’s the GitHub repo for my app.

Before we get started, let me tell you…


Image for post
Image for post

I thought of the above sketch when I recently was explaining why refactoring can be joyous for a developer.

A common workflow pattern is to make something work, however you can. Once you have it working, you clean up your code (refactor), such that the external behavior/functionality is unchanged, but the internal code design and organization is refined and improved. (This should be done in small doses; I would not recommend building an entire application and then trying to clean up its codebase.)

You start with a dilapidated mess (a shack), held together with duct tape, paper clips and whatever…


Image for post
Image for post

TL;DR: Here is a GitHub repo that has a create-react-app project with necessary dev dependencies and the WebStorm run configurations. npm install and open the project in Webstorm. You can set a breakpoint in App.test.js and run the Tests configuration in debug mode to try it out.

(This has only been tested with Node.js 6.9+ and WebStorm 2016.3. Sorry if the project doesn’t load correctly — Webstorm can be finicky about .idea files)

I’ve been exploring React lately. While there are lots of boilerplates and starter resources, I’ve been using create-react-app, a bootstrapping tool from the React team.

If you…


Image for post
Image for post

We all know the line; but a startup should ask: “If we build it, will anyone care?” It can be very tempting to jump to developing an idea and then get caught up in the excitement of creative flow and possibilities. But you could waste a lot of time (and precious resources) building distractions or, in the worst case, pursuing an idea that is doomed.

I suggest a simple model for sanity checking a startup idea and plan: The Field of Dreams Test. (It’s also one of my most important North Star Questions.) As noted, the key question is “If…


Image for post
Image for post

I think it is easy to lose focus, especially in a startup. There is always too much to do, so much to learn and explore, changing pressures, limited resources…and the list goes on. For me, I gain comfort and clarity from North Star Questions and Principles.

These are a few key questions or ideas that either

  • remind me of my project’s priorities, or
  • help me make sense of whatever current overload I have to deal with.

I like to have 2 sets of questions/principles:

  • a general set (could be applied to most contexts)
  • a specific set (for my project)

Examples…

Christian Sepulveda

espresso fanatic, coder (still), VP Engineering Bastille, …yeah, espresso comes first. https://christiansepulveda.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store