Sign in

I’m a Front End Engineer who loves React, NextJS, and GraphQL. Need a REMOTE React Developer? Contact me at: https://www.linkedin.com/in/bengrunfeld/

Please follow me on Twitter, or come say hi on LinkedIn, and if you enjoy the article, please give it a clap — they lower my cholesterol 😃

Scalable GraphQL Architecture
Scalable GraphQL Architecture
Scalable GraphQL Architecture

GraphQL has been the new “In Thing” for a couple of years, but bigger companies are just starting to adopt it, and one of the first questions they ask is: how does it scale?


The thing I like the most about React Testing Library (RTL) is its simplicity.

React Testing Library — Tutorial
React Testing Library — Tutorial
React Testing Library — Tutorial

To those new to the library, RTL helps you test your Front End components. Its testing lifecycle is quite simple:

  1. Render the component
  2. Test if the rendered HTML is as expected
  3. If your component has asynchronous functionality, wait until…


The N+1 problem occurs when we use data returned from the database to fuel a list of further queries to the database.

Article title image. Solving the N+1 Problem in GraphQL
Article title image. Solving the N+1 Problem in GraphQL

Meaning, if you receive a list of results from a query, then for each result, you will make another query to the database.


Warning: Prop `className` did not match. Server: “fs-fdsf” Client: “sd-dfasj”

The combination of Next.JS and Styled Components is truly epic. You get fast, Static Rendered, highly semantic code as a result of the union, but you also get an error unless you know the secret config that solves it (like so many things in our industry…. 😒).

Warning: Prop `className` did not match. Server: "sc-gKsewC" Client: "sc-dlfnbm"

For some reason, it’s actually kinda hard to find the solution. It’s listed on an obscure Github issue somewhere. Well, without further ado, here you go.

npm i babel-plugin-styled-components


Code is read much more often than it is written

– Guido Van Rossum, Creator of Python.

Inline Styles

It is generally accepted that inline styles are not the best idea, because they make the code so much less readable.

Imagine if we were on a page that contained…


Looking for a great Software Engineer? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Common web hack attacks
Common web hack attacks
Common Web Attacks

Security has to be a core part of our work, not an auxiliary skill. As such, it helps to know the most common types of attacks that hackers carry out.

Common Pathways of Attack

The following access points into your application allow a User to provide custom input. A hacker can take advantage of these access points to send malicious code instead of valid data, which can cause unwanted and dangerous effects, and compromise security.

  • HTML forms
  • URL’s
  • API Requests that allow…


Looking for a great Software Engineer? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Web Security Fundamentals
Web Security Fundamentals
Web Security Fundamentals

Much of this content came from LinkedIn Learning’s fantastic course.

General Security Recommendations

  • Validate & Sanitize inputs and outputs
  • Provide a Content Security Policy (CSP)
  • Use cookie settings like HttpOnly, Secure, and Expire
  • Always use HTTPS
  • Mark session cookies as Secure Cookies
  • Force the User to perform an additional step for…


Looking for a great Software Engineer? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Using Formik together with Yup, TypeScript, and react-select can seem a little daunting at first. I mean, getting different libraries that share concerns to play nice together is often a recipe for hours of Googling how someone else did it, then finding that the implementation doesn’t work on…


Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Often, the hardest part of using a package is configuring it and making sure it plays nice with all the other packages that work in the same domain.


Looking for a great (remote only) React Dev? Or just feel like having a chat? Visit my profile on LinkedIn and say hi! 😃

Docker: Hot Reloading with Next.JS
Docker: Hot Reloading with Next.JS

This one really took me a while. I got all the concepts, but there were several coffee (pfft… and cookie) breaks until I figured out exactly what the directory mappings needed to be.

tl;dr

Implementing Hot Reloading with Docker and Next.JS is literally two (2) lines of code! npm run dev, and a mapping between your local project directory and a directory on your Docker instance, using a volume:

./:/src

That’s it! (although I use usr/src/app instead…

Ben Grunfeld

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store