Babel-polyfill and babel-runtime easily explained
If you have worked with Babel before, no doubt you came a cross these two packages: babel-polyfill and babel-runtime
Basically these two modules do the same thing: emulate an ES2015 environment but in a different way.
In this article I will explain the difference between these two and when you should use one or the other.
Eslint trick: lint only changed files to upgrade project codestyle
The f*cking problem
What if you are working on a large project, and after some meetings with your lovely team mates you decided it’s time to sharpen the good ‘ol eslint config.
Everything fails, you got 2042234897234 errors help, 911 please help. WTF.
So you try eslint –fix, but still 999239 errors.
Calm down, I got the perfect solution for you.
What if you could only run Eslint on the commited changed files 😉 ? And by doing so, you can slowly migrate everything to adopt to the new code style. Plus when you have some time left over, you could refactor that auto-fetch-nudes component to the new code style. Fucking awesome.
SVG sprite icons for React and Webpack
There are a lot of ways how you can use icons in your frontend, in this article I will explain everything you need to know about setting up a good SVG sprite icons solution in your React and Webpack app.
The battle of icon solutions
Here is a quick list of different solutions for using icons in your app.
- Sprite maps: you can use Gulp or Webpack to automatically generate a sprite map, this is a good solution but it is a lot of work, say for example you have a small icon in black, but you need to make it red? Lot’s of work… also keep in mind you need to keep multiple sprite maps for your shiny retina devices. More information about sprite maps.
- Icon font: Icon fonts are awesome, but it can be a pain in the ass when a certain browser (ahumm… IE) renders the icon a few pixels to the top. More information about icon fonts and it’s pros and cons.
- SVG sprite icons: This is the way to go, its verbose, easy, lightweight and very maintainable.
Scalable Modals with React and Redux
I have tried many ways for setting up a scalable way to create modals with React and Redux. The approach that I ended up using is basically a tweaked version from a Stackoverflow answer from Dan Abramov’s
Creating modals in React is pretty simple, many solutions implement React Portals but I think rendering a Modal outside of the application container is overkill, we use a ModalRoot container which we render in our application container instead.
So I talk here about a solution that is scalable, testable and simple. It requires some boilerplate code to setup but it’s worth it in the long run.
Quick Tip: alternative Redux reducers
I have been using a simple helper to simplify and reduce boilerplate for setting up reducers in Redux.
What could be improved on the default “switch reducers”
Lets take a look at a default switch reducer: