Dead easy animation with similar API to styled-components

Photo by Nikita Kachanovsky on Unsplash

Note: You need React 16.3 so if you want to use react-pose you must upgrade if you haven’t already

Animation in React has always been a fuzzy subject. Many people don’t even know how to start looking for something to help them build cool and fun animations for their web projects.

Of course there are a few packages that help us, like:


Setup a React application in just a few seconds 📦

“A displayed content of a toolkit displayed showing tools like hammer, axe, box cutter, iron and flashlight” by Todd Quackenbush on Unsplash

Setting up a React application can be a nuisance if you’re new and inexperienced. There are just too many moving parts. Babel, Webpack, Hot Reloading and Dev servers are, sometimes, complex things to setup and take their time to learn and master.

By the time you’re done configuring them, you might not even understand what you just did and your will to continue working is drained.

Tools like Babel and Webpack are important and knowing how to configure them is too, don’t get me wrong! If you put yourself in any frontend job you’ll probably deal with these tools or…


Still experimental but we can start building fun stuff 😃

chrome

Before the actual code, read this ❗ ❗️

This API is still experimental and under development. It isn’t available right off the bat in Chrome. From my experience some operating systems still don’t detect very well (my Linux machine can’t detect anything, my Windows machine only detects faces and my Apple machines detect face, eyes and mouth).

To put it available you must first enable Experimental Web Platform Features on your Chrome’s flags. Very simple to do.

Go to :

chrome://flags/#enable-experimental-web-platform-features

And enable the Experimental Web Platform features section.


A really quick way to get your projects up and running

“Colorful rolls of scotch tape, scissors and sticky notes on a table” by Jo Szczepanska on Unsplash

When I look back on my years in programming I realised that I used to struggle greatly with starting new projects. Being a bit of a neat freak I was always thinking about the correct way of organizing files, naming things and the best way to do them while the project was still in a very embryonary state.

I did not understand that those things are important but not as I’m still working out the kinks of my idea.

All the pressure I was putting on myself always led to the project being abandoned from my mind and discarded. …


Or anywhere really

“A group of people brainstorming over a laptop and sheets of paper” by Štefan Štefančík on Unsplash

The world of programming is never ending. New technologies are constantly being crafted and we, as developers, need to keep up with such an advance or we will be left out in the mud.

It’s easy to think:

“Well, you just have to keep updated with the latest news and tech”

But the reality is that it is not so linear. People have jobs, projects, hobbies and families to take up their times. It is never easy to always be on top of the situation. Your company might work on some old technology and you are the one maintaining it…


The perfect toolset for your venture in Functional Programming

This article is pointed towards beginners in Javascript or people who are just starting working with functional Javascript and never heard of map, filter and reduce. If you already have a lot of practice with these, you can just jump to the end of the article where I point you towards some other interesting pieces.

What is functional programming?

Functional programming is a programming paradigm where the output value of a function depends only on the arguments that are passed to the function, so calling a function a determinate amount of times will always produce the same result, no matter the amount of times…


And what the near future holds

not these patterns :D

Throughout your React carreer you will find yourself wondering, several times, how can I achieve what I want in a simple and effective way?!

sort of like this

Gladly, applying some useful patterns, you can rid yourself of messy and over-complicated code.

Many times I see developers asking questions of “How to do X in React”. Some times it is adequate to ask this question, however, if you just think about it, in other cases you can just look at it as a Javascript problem and not a React one. Many interesting solutions and patterns are born from this thinking.


Make your React app fly!

not exactly like this but close!

React is awesome! it allows you to start building apps with ease, be it small and simple apps or big and complex apps. As applications evolve, it is only natural for requirements to do so as well and, in consequence, you will eventually need to boost some performance out of your app. There are some problems you might encounter and luckily for you it’s not hard!

If, for now, you’re stuck building simple applications for learning purposes do not neglect these topics. Please, do browse them and keep them in mind for your future!

Let’s get to it then!

Long lists of data

This…


Before proceeding! What are render props?

If you haven’t read the excellent post about Render props by Michael Jackson, (No, not the singing one), you must give it a try before proceeding with this article.

If you are too lazy to read I can hook you up with a video (that is also included in the article)

Shamelessly quoting MJ’s article:

A render prop is a function prop that a component uses to know what to render.

More generally speaking, the idea is this: instead of “mixing in” or decorating a component to share behavior, just render a regular component with a function prop that…


formik logo

The purpose of this post is to show some things that some people might struggle with when starting working with Formik.

If you do not yet know about Formik please refer to its Github or these posts:

I’m gonna make these examples simple and understandable for demonstration purposes. I’m also going to leave out some features intentionally so I can throw some challenges at you in the end!

Uploading one file 📎

I’m pretty sure all of us have tried file uploading in…

João Miguel Cunha

Frontend Engineer @ Mindera ❤ JS and React

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