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/
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…. 😒).

This is likely the error you’re getting, or some variant of it:

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

First run:

npm i babel-plugin-styled-components

– Guido Van Rossum, Creator of Python.

Source: https://www.python.org/dev/peps/pep-0008/

It is of utmost importance that we make our code as readable and semantic as possible, so that the next person who comes and reads it is able to quickly understand what the intention was, what the logic is, and how to alter it to meet the new business requirements.

Inline Styles

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


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.

  • 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! 😃

If you enjoy this article, please hit the clap button 👏🏻 so that someone at FAANG who read it thinks I’m cool and offers me a sweet dev job! 😉

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! 😃

If you enjoy this article, please hit the clap button 👏🏻 so that someone at FAANG who read it thinks I’m cool and offers me a sweet dev job! 😉

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.

Naturally, there’s significant overlap between ESLint, Prettier, and TypeScript, and if you haven’t set it up in the right way, you’ll soon be gazing in a bovine trance at the “Great Wall of Errors”.

In this article, we’ll go over installation and configuration, but we’re not going to…


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


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

In the previous article, we explored how to get started with Docker, but the app we built was incredibly simple. All it did was respond with a string to a HTTP request to the main URL.

What if we wanted to do something a little more complex? How about a React app that stores its state in MongoDB?

App Explanation

You can see the code for the app here:

https://github.com/bengrunfeld/docker-nextjs-mongo

So this is a really simple CRUD app…


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

Basic Docker Tutorial for Beginners
Basic Docker Tutorial for Beginners
Basic Docker Tutorial for Beginners

LENGTH WARNING: This is going to be a fairly long article. Apologies, there’s simply a lot of content to get through.

If you want to avoid my nostalgic ramblings, just skip to the actual tutorial below the page breaks.

Oh wow, I’ve been avoiding this one for a while. Like 7 freaking YEARS… Yes, that’s right. In 2013, I was working for a guy called Gabe Monroy who now is a big wig at Microsoft Azure


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

React additional hooks
React additional hooks

This article continues our discussion of React’s Additional Hooks. The official documentation on how to use these hooks is pretty sparse, so I feel that there’s a need to make a blog post about them. Let’s dive in and get hooked on hooks! (yeah, I know, that was pretty bad… 😂)

useRef

The traditional use of useRef is to store a reference to a DOM node. If the DOM node updates, so does the reference. …

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