Weekly Links #86

Top 10 Links For 3-9/11

  1. Going out to eat and understanding the basics of Express.js
  2. Using a React 16 Portal to do something cool
  3. Code Reuse Is Not a Good First Class Goal
  4. How I Deal With Differences in Opinion
  5. Creating an Accessible React Website
  6. Text input highlight, TripAdvisor style
  7. The Most Clever Line of JavaScript
  8. Practical Functional Programming
  9. Slaying a UI Antipattern in React
  10. CSS Code Smells

Weekly Links #85

Top 20 Links For 27/10-2/11

  1. Web Typography: Designing Tables to be Read, Not Looked At
  2. Netflix functions without client-side React, and it’s a good thing
  3. What’s the difference between JavaScript and ECMAScript?
  4. There’s a human on the other side of your code review
  5. 2 cases where Babel fixes your code but it shouldn’t
  6. Why we’re (slowly) migrating to Styled Components
  7. Storybook vs. Styleguidist for a component library
  8. Emulating CSS Timing Functions with JavaScript
  9. How to auto bind props by using React element
  10. Fun with Single-Element CSS Spinner
  11. 3 frameworks for managing deadlines
  12. Avoiding the productivity mouse-traps
  13. React Call Return — What and Why
  14. How to debug Front-end: Console
  15. Tracing method calls via Proxies
  16. The cure for Javascript fatigue
  17. Thunks in Redux: The Basics
  18. Testing React components
  19. Effective Snapshot Testing
  20. Simple React Patterns

Weekly Links #84

Top 20 Links For 20-26/10

  1. How to give rendering control to users with prop getters
  2. Clean Code: Why HTML/CSS Essentials Still Matter
  3. Some Best Practices For Rolling Out New Software
  4. Replacing Mocks With Hand-Written Test Doubles
  5. How We Started Sharing Components as a Team
  6. HTML Web Component using Vanilla JavaScript
  7. Debugging React Like a Champ with VSCode
  8. Do more from your inbox with Gmail Add-ons
  9. Integrating React in a 6+ Year Old Rails App
  10. Why We Use Styled Components at Decisiv
  11. React animation example and how it works
  12. Screen sharing in Slack, made interactive
  13. create-component-app v1 is out now
  14. My approach to using z-index
  15. 10 new features in Ruby 2.5
  16. Mocking is a Code Smell
  17. Code Review Etiquette
  18. The Output Element
  19. Coding with Clarity
  20. Success with CSS

Weekly Links #83

Top 15 Links For 13-19/10

  1. Easy JavaScript Part 12: What are the Call and Apply Methods?
  2. Why You Shouldn’t Worry About Imposter Syndrome
  3. We fired our top talent. Best decision we ever made.
  4. Exploring Functional Programming with Ruby
  5. Fastest way to profile a method in Ruby
  6. How to structure components in React?
  7. Theming with Sass: An SCSS Tutorial
  8. How awesome engineers ask for help
  9. My impressions about React Conf BR
  10. What it’s like to be a developer at …
  11. Sapiens and Collective Fictions
  12. The melting pot of JavaScript
  13. ES6 for beginners Part-2
  14. Functors in JavaScript
  15. The Art of Comments

Weekly Links #82

Top 80 Links For 15/9-12/10

How to overcome “spread hell” in reducers, on minimum time

TL;DR:  When you have a nested object on state, and for some reason you cannot normalize it, you can use one of the existing immutable update  utility libraries. I recommend on timm library .

I am writing this post after getting inspiration from Dalmais’s article

The Problem

  • We have a nested object in our Redux store. For example,
    testObject = { a: { b : { c: { d: 1 } } } }
  • We want to update the value of d from 1 to 2, but we should not mutate the existing object.

The Naive Solution

  • The regular solution will be to use multiple spreads. The example from Dalmais’s article is:
  • The problem with this approach is that the code is unreadable and pretty ugly.

Other Solutions

  • Don’t use nested objects on store, so you need to do a refactor/normalize it. This is the best solution. In most cases, it will be the best choice for the long run, but you might not choose it if, for example, you fix a bug in a legacy code, and refactoring is not a top priority.
  • Use Immutable.JS library: Also an excellent idea, but again, it is not a quick fix.
  • Use Lodash’s cloneDeep method. But it is really unnecessary, as a wise man said.
  • Use one of the immutable update utility libraries which enables to set an attribute on a nested object. I will focus on this solution from now on.

The Requirements:

  • The function should support both objects and arrays in the nested path.
  • The function should support autovivification, i.e. it will create objects/arrays along the path when they don’t exist.
  • The syntax of the “immutable set” function will be convenient and readable.
  • We should write one sentence only – just invoking the set method and get the desirable result.
  • The function should have a good performance, especially if we use it frequently.
  • The library should have some sort of popularity (4 stars on GitHub is not enough…).
  • The library should be as tiny as possible.

The Research:

  • The original article pointed on lodash/fp as a possible solution, but as Mark Erikson commented on that article, there are a lot of other possibilities of immutable update utility libraries. A  big libraries list appears on his amazing repository.
  • Eventually, I reduced the number of contestants to 8:
  • I wanted to have fun, so I wrote on CodeSandbox  a React application which compares the performance of all the checked libraries.
  • There are two main components:
    • ResultsTable: The main component which renders a table with all of the wanted results.
    • ResultDisplayer: Component which gets a function and arguments to a function, invoke it constant number of times and renders the average amount of time that the execution of the function took.
  • Every library was tested against three tests with the same test object:                                                                           { aObject: { bArray: [{ cObject: { dAttribute: 1 } }] } }
    • Test 1: Update aObject.bArray[0].cObject.dAttribute from 1 to 2
    • Test 2: Change aObject.bArray[1].cObject.dAttribute(path that doesn’t really exist) to 2
    • Test 3: Change aObject.bArray[0].cObject.eAttribute(path that doesn’t really exist) to 2
  • Yes, I know… This is not scientific research, and the results are not accurate. But it did gave me a sense of security when I ran the tests over and over, and the first place was always on top.

Comments Before Results:

  • I wanted to test also functions from Ramda, but I didn’t find functions that exactly fit. set and evolve functions are closed but close is not enough.
  • immutability-helper library is the recommended library by React team, but surprisingly it doesn’t support autovivification, so I could execute only the first test on this library.
  • I don’t expect anyone to install Lodash only for this need, but if you already use Lodash, it can be a good choice for you.

The Results:

Timm/setIn won in most departments:

  • Like all other contestants, it supports both objects and arrays in the nested path.
  • Like most of the other contestants, it supports autovivification.
  • Its syntax is nice:  For example:  setIn(TEST_OBJECT, ["aObject", "bArray", 0, "cObject", "dAttribute"], 2)
  • The operation is done during one sentence, as all other libraries.
  • Its performance is the best by far than most of the other libraries.
  • The library is not so popular – only 163 stars on GitHub when writing this sentence.
  • The library is tiny: about 1.5 kB minified & compressed.

Last Words

I enjoyed a lot during making this post. It was my first usage of CodeSandbox and it was really cool to write there. Special thanks Maxence Dalmais, which his post encouraged me to do my own research.  I believe that Timm/SetIn is a great option when you need to update a nested object and you cannot refactor your code for some reason.

Weekly Links #81

Top 20 Links For 8-14/9

  1. How JavaScript works: memory management + how to handle 4 common memory leaks
  2. A React And Preact Progressive Web App Performance Case Study: Treebo
  3. CSS in JS is like replacing a broken screwdriver with your favorite hammer.
  4. How to Organize a Large React Application and Make It Scale
  5. The Ultimate Guide to Flexbox — Learning Through Examples
  6. How to make onboarding engineers a competitive advantage
  7. How to Learn React: Everything You Need to Get Started
  8. Simple React Snippets For Visual Studio Code
  9. 12 cool things you can do with GitHub
  10. Seeing Through Redux with Lenses
  11. Learning Ruby: From Zero to Hero
  12. How JavaScript linters cause bugs
  13. JavaScript Monads Made Simple
  14. DOM Attributes in React 16
  15. The Bad News Advantage
  16. What’s New in React 16?
  17. “Elements kinds” in V8
  18. Introducing Atom-IDE
  19. Sublime Text 3.0
  20. V8 Release 6.2

P.S. I will be on vacation on the next four weeks, and the blog too. Next post will be on 14/10. It will be a special technical post.