• 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