Crafting elegant and robust drag and drop animations — I work on an open source library that aims to provide a beautiful and accessible drag and drop experience for lists on the web (react-beautiful-dnd). One goal of the library is to provide a drag and drop experience that feels as if you were dragging physical objects around. The library…

if you’re sick, don’t work from home — rest from home — Our tools and technology make it so easy to work remotely instead of taking a genuine sick day. But just because you can do something does not always mean that you should. Last year I fell into a bad habit of working from home when I was sick. Rather than…

Pull up a chair and warm your hands by the fire. Let me share with you three stories from my front-end performance adventures. — Pull up a chair and warm your hands by the fire. Let me share with you three stories from my front-end performance adventures. A bit of backstory I work on react-beautiful-dnd at Atlassian. The library aims to provide a drag and drop experience for the web that feels more physical.

One year ago, we at Atlassian released react-beautiful-dnd with the aim of creating a more beautiful and accessible drag and drop… — One year ago, we at Atlassian released react-beautiful-dnd with the aim of creating a more beautiful and accessible drag and drop experience for the web 🎂🎉 react-beautiful-dnd announcement blog: Rethinking drag and drop I wanted to take this opportunity to reflect on how far we have come in the last…

I work on a drag and drop library for React: react-beautiful-dnd 🎉. The goal of the Atlassian library is to provide a beautiful and… — I work on a drag and drop library for React: react-beautiful-dnd 🎉. The goal of the Atlassian library is to provide a beautiful and accessible drag and drop experience for lists on the web. You can read the introduction blog here: Rethinking drag and drop. The library is completely driven…

Applying principles of physicality to pursue a more natural drag and drop experience — Applying principles of physicality to pursue a more natural drag and drop experience Recently at Atlassian we released react-beautiful-dnd: a library that aims to provide a beautiful, natural and accessible drag and drop experience for the web. It allows users to control the entire drag and drop experience using only…

Taking something basic and making it beautiful — Drag and drop is an intuitive way of moving and rearranging things. We at Atlassian have recently released react-beautiful-dnd which makes drag and drop for lists on the web more beautiful, natural and accessible. Physicality The core design idea of react-beautiful-dnd is physicality: we want users to feel like they are…

Normalised state and connected components — Normalised state and connected components *Be sure to read Performance optimisations for React applications first! I recently gave a talk at React Sydney in which I put forward some ideas and techniques to significantly increase the performance of your React applications (again). In the talk I address some of the style and performance pain points…

TLDR; — TLDR; The main performance hotspot in React applications is redundant processing and DOM diffing in components. In order to avoid this return false from shouldComponentUpdate as high up in your application as you can. To facilitate this: Make shouldComponentUpdate checks fast Make shouldComponentUpdate checks easy Video You can watch a video recording…