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:
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…
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 :
And enable the Experimental Web Platform features section.
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. …
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…
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…
Throughout your React carreer you will find yourself wondering, several times, how can I achieve what I want in a simple and effective way?!
Gladly, applying some useful patterns, you can rid yourself of messy and over-complicated code.
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!
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…
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!
I’m pretty sure all of us have tried file uploading in…
Frontend Engineer @ Mindera ❤ JS and React