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.
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.
Working Demo: https://auth-api-demo.firebaseapp.com/ (user:
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.
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:
I’ll use a few different implementations:
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.
I was sitting in Verve Coffee…
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:
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…
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…
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)
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…
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
I like to have 2 sets of questions/principles: