JavaScript Ramblings

If you’ve ever wondered how to deploy your React app once it’s ready, you probably know that figuring this out can become confusing really fast. Most articles go over detailed instructions on how to configure nginx, how to configure reverse proxies. But

The performance of an application is critical to its success. Having a fast application will lead to a better user experience and to an increased adoption rate. But what does it mean that an application is fast? And how does one measure the performance

Semantic UI is a fantastic UI library and the fact that you can use plain React components to compose your layouts makes it a great fit for React applications. When it comes to customizing the styles though, it’s a whole different story. The

Invariant violation: Could not find "store" in either the context or props of "connect(MyComponent)". Either wrap the root component in a Provider or explicitly pass store as a prop to connect(MyComponent)" So, you're writing a unit test for one of your Redux

TL;DRMedia queries with styled components work the same as in CSS! const CardWrapper = styled.div` display: flex; flex-direction: row; @media (max-width: 768px) { flex-direction: column; } `; If you want a more involved example with defining different device sizes and such, continue below. What we'll buildI

Updating create-react-app could mean two things: You want to update your global create-react-app install to make sure new apps you create use the latest boilerplateIn this case, you don’t need to do anything! When you run create-react-app, it always creates the project with

Think for example Twitter's search box. As the search results come in, a dropdown menu renders and user can select any of the items. How can I build this in react? Let's try to built this kind of component! To keep things simple, I'll

One of the first choices you need to make when starting a new project using React is what library to use for styling your components. There are a ton of options to choose from and the community hasn't yet reached a consensus of what

Do you ever wonder what the hype is about all these styling libraries and what their point is? CSS Modules, Styled components, Radium, glamourous, JSS, jsxstyle - you name it. It’s hard to get an overview of how they came about and what

I do not understand how can a framework help me, when it seems to me that almost everything I try to achieve in a framework can simply be done in jquery with few lines of code, like calling a rest service with Ajax and

It's super frustrating that ES6 module syntax is officially part of the language specification, yet no browser supports it yet! So most of the times, if you just want to use ES6 modules, you need to use something like Webpack or Browserify, adding one

You know you have a memory leak. So you set out to record a Timeline with Chrome DevTools to see if the memory is cleaned up. But the results are so inconsistent! Sometimes the listeners or node count is going down, sometimes it isn't.

Finding resources to help you when you're trying to fix a memory problem can be a real pain. There's no central source of knowledge, information is scattered everywhere and a lot of the articles are already outdated. So, I tried to compile a list

You're part of a team where everyone understands and agrees unit tests are important and sees their value. Yet somehow you never get around to writing them. So how do you get out of this? How do you get from a situation where tests

You've used MustacheJS templating to avoid code repetition and you're now dynamically filling in the template at run time. This works great, however you know that the user wastes time while the library is downloaded and the template is filled, when this could very