-
Measuring the performance of your frontend application
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 of a single page application? In... Read more -
How to use Semantic UI with a custom theme in your CRA app
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 docs are lacking any detailed explanations and... Read more -
Troubleshooting 'could not find store in either the context or props'
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 connected components. What does this error say? It’s... Read more -
How to use media queries with styled components
TL;DR Media 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 build I already created... Read more -
Updating create-react-app
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 boilerplate In this case, you don’t need to do anything! When you run create-react-app, it always creates the project with the latest version of react-scripts so... Read more -
Creating a Twitter-like search component in React
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 skip the styling and actually loading... Read more -
Stuck testing your connected component? Make sure you export your 'plain' component as well!
Does this sound familiar to you? You have a container component and you write a test for it: import ShoppingCartContainer from './ShoppingCart'; test('it works', () => { const wrapper = shallow(<ShoppingCartContainer />); // test something }); And then when you run it, the first thing you see is this error:... Read more -
3 ways to test mapStateToProps and mapDispatchToProps
You already know that you shouldn’t actually test the result of calling connect (the connected component) - as Redux already makes sure the behaviour of connect is correct. Instead, you test your wrapped component separately, by exporting it as a named export. But what about mapStateToProps and mapDispatchToProps? This is... Read more -
Server-side rendered styled-components with Nextjs
Out of the box, Next.js comes configured with styled-jsx. But what if you want to use something else for styling? I’ve recently worked on setting up Next.js with styled-components, and while it all went rather smoothly, I didn’t really understand what was going on 🙂 And if my setup was... Read more -
Easy theming with CSS in JS
You read about CSS in JS and you wonder: what can this give me that I don’t already have with CSS modules? Your code is maintainable, scope is local, all is good. But what if you need theming support? And you want your users to be able to change the... Read more -
React theming with styled components
Step by step tutorial to setup theming with styled components Read more -
React theming with glamorous
Step by step tutorial to setup theming with glamorous Read more -
React theming with emotion
Step by step tutorial to setup theming with emotion Read more -
Migrating to styled-components cheatsheet
Choosing a styling library for a React project is hard. And when you already have an existing code base you’re considering to migrate, things get only trickier. Will you be able to convert everything? Is there a way to get a feel for how the code will look before you... Read more -
Should you use CSS in JS?
Well… it depends! Are you just starting out? The most important things to look at are: simplicity ease of debugging You want to be able to understand how CSS relates to a React component without too much “magic” happening. CSS in JS libraries usually generate class names at runtime. This... Read more -
Things to consider when choosing a React styling framework
styled-components, emotion, glamorous, aphrodite, radium, JSS … and the list goes on! What are some things you should keep an eye on when evaluating them? User base How many downloads does the library have so far? What are the trends - is the library gaining or losing traction? I find... Read more -
Understand the React styling paradigms
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 is the best way to style... Read more -
3 talks you should watch on styling React components
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 each is trying to solve. But if... Read more -
Two ways to know if you should use a framework or stick to jQuery for now
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 then outputting the result There are... Read more -
Use ES6 modules in the browser today with SystemJS
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 more step to do before you... Read more -
Are your Chrome Timeline Recordings inconsistent?
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. Sometimes the node count does not go... Read more -
Big list of resources on Javascript memory
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 of articles I found useful and... Read more -
How do you encourage your team to write more unit tests?
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 are an afterthought to one where... Read more -
How to fill a MustacheJS template at compile-time and inject it into a webpage
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 well be done before hand, at... Read more -
React file template in WebStorm
Wouldn’t it be great if when you open the “File > New” menu you could also choose “React component”? WebStorm allows you to do this by creating custom “File templates”. Start from an existing file The easiest way to create one is to just start from a file you already... Read more -
Is it possible to do hot reloading when using Gulp and Browsersync?
This probably sounds familiar: you have a setup with Gulp, Webpack and BrowserSync. Gulp compiles your scss/less files, Webpack compiles your JS files and BrowserSync nicely refreshes the page when anything changes. Now you’d like to make this even better - and have hot reloading of your JavaScript. But you’re... Read more -
Use Grunt to remove console.logs from your code
You already know that it’s a good practice to remove the console.log statements from your code when deploying to production. So you manually go over the code that you recently changed to remove any console.logs before uploading the files to the server. This is however a task that is perfect... Read more -
Automate preparing your files for production using Grunt
You know you can use Grunt to automate some of the steps you already do when prepapring your code for production, but how do you actually go about it? First, let’s install Grunt Fire up a console, navigate to the root of your project and then run: $ npm install... Read more -
What does this "for .. in" expression do
You are used to the classic way of iterating through an array: var data = [ 'a', 'b', 'c' ]; for(var i=0; i<data.length; i++) { console.log(data[i]); } // a, b, c But you ran into a different way of looping in someone else’s code: for(var item in data) { console.log(data[item];... Read more -
How to change object values without assigning it to another object
You have two variables, one referencing the other one like this: var person = { name: "John" }; var luckyWinner = person; Now, say want to get some data from an AJAX call and assign it to person, but you also want luckyWinner to keep the reference: // say we... Read more
subscribe via RSS