A detailed introduction to one of the most powerful web development tools

The modern web application is incredibly complex. With Javascript tools like React, Angular, CSS tools like Sass or Less, and HTML tools like pug, any web project is implementing a variety of libraries and technologies.

Image for post
Image for post
Photo by Clément H on Unsplash

All of these tools run on Javascript. In ECMAScript 2015+, you can separate your code into multiple files and import these files into your application when needed to use their functionality. For example, when building a React application you always write import React from 'react' at the top of each JS file.

This functionality isn’t built into browsers by default, so modern code bundlers were built to bring this capability in a couple forms: by asynchronously loading javascript as it’s needed, or by combining all the javascript into a single file that’s loaded via a <script> tag. …

Best Practices for React Hooks

Image for post
Image for post
Photo by Tudor Baciu on Unsplash

The introduction of React hooks has fundamentally changed how we built React applications, exposing state and lifecycle functions beyond class based components. Functional components are now first-class citizens of React, making up the bulk of React applications.

However, while React hooks are incredibly powerful, it’s also easy to misuse them, introducing unexpected behavior or bugs into your code.

Lets take a look at some best practices for using React hooks to ensure you’re writing clean, efficient, and maintainable code.

Use hooks as they’re supposed to be used

While it may seem obvious, I’ve seen some pretty egregious use of hooks in ways that they’re not supposed to be used. …

Using “Uncle Bob’s” five object oriented design principles to write better code.

Image for post
Image for post
Photo by Clément H on Unsplash

SOLID is an acronym for the first five object oriented design (OOD) principles, created by Robert C. Martin, popularly known as “Uncle Bob”. Developed in Martin’s book “Agile Software Development, Principles, Patterns, and Practices”, the SOLID principles have become industry standard practices to write and release better code.

These principles, when combined and used properly, make it easy for programmers to write software that’s easy to maintain and extend. They are also part of the agile or adaptive software development style, and ensure code remains clean and easily refactorable.

SOLID stands for:

  • S - Single Responsibility
  • O - Open Closed…

What makes Recoil so good and how can you take advantage of it?

Introduction

State management for React is a huge field, encompassing giants like Redux and Mobx. Recoil.js is a relatively new kid on the block of state management libraries. Created and open-sourced by Facebook, it seems promising for simplifying global state management for React developers. It offers low-boilerplate and simple global state management that’s implemented simpler and easier than other state management libraries.

Dave McCabe, a software engineer at Facebook who worked on Recoil, gave an interesting talk on Recoil in May 2020, citing a need for high performance and efficiency in his reason for building a new state management library.

Dave McCabe’s talk on…

Image for post
Image for post
Photo by Ferenc Almasi on Unsplash

Introduction

Today, state management has been made even easier with the introduction of React hooks, changing how developers manage state in their React components.

Before, it was complicated to define state for a specific component (which I’ll discuss next), but now, it’s as easy as creating an abstract hook like useUserLogin to share state logic across components.

We’ll be taking a look at State management before hooks and with hooks, why you may want to use a state management library, and some of the common state management libraries today.

Before React Hooks

Before React hooks state management was pretty binary. There were two options: define a local state in a component, or use a state management framework to handle global state. …

I’ll be frank, there’s a lot of badly written React code out there. It’s really easy to slip into bad practices that make code unorganized and hard to read. In general, React is a very unopinionated framework compared to others like Angular, which can be incredibly powerful, but also makes it easier to introduce bad practices into your code. While writing a lot of React code, I’ve come up with a couple of ways to ensure that your code maintains readable and usable for not just yourself, but other devs.

Image for post
Image for post
Photo by Ferenc Almasi on Unsplash

1. File Organization

React doesn’t recommend a specific pattern to organize folder structure, but there are a couple of suggestions on their website. There’s quite a few Medium articles floating around out there that recommend various file structures. I personally have adopted the Atomic Design principle for all my projects. Regardless of which structure you pick, the important thing is consistency, maintainability, and readability. Ideally, a React developer should be able to look at the folder structure for a couple of minutes and have a general idea of where everything is. …

Image for post
Image for post
Photo by Tianyi Ma on Unsplash

It goes without saying that COVID19 has affected society in a variety of ways, from the rise in alcohol consumption and the 53% of adults whose mental health has been negatively impacted.

This article is not to discuss these more obvious issues that have arisen with social isolation, but rather a serious social one: Have you seen the memes?

If you have spent any time on the internet during the quarantine period (which almost everyone has), you have probably come across at least a couple memes. Meme production, always a crucial part of internet culture, has been on the rise as more people find themselves stuck at home, endlessly scrolling through popular social media sites likeInstagram or Reddit. …

Image for post
Image for post
Photo by Andrew Neel on Unsplash

Every project manager knows that there is never such a thing as a “one size fits all” methodology for leading teams. However, picking the right method is crucial to effectively getting the job done right.

According to the Project Management Institute (PMI), a methodology is defined as a system of practices, techniques, procedures, and rules used by those who work in a discipline. Lean practices, Kanban, and Six Sigma are project management methodologies examples.

These methodologies are processes that help project managers effectively keep track of deliverables, monitor team performance, and manage issues that arise during the development process.

There are many project management methodologies, each with their unique strengths and weaknesses. You should select a methodology based on the project you’re working on and your team dynamic. …

“The best time to plant a tree was 20 years ago. The second best time is now.” — Chinese proverb

Image for post
Image for post
Photo by Drew Beamer on Unsplash

Software development is a constant learning experience, but there are certain habits and tips that I wished I internalized earlier. Hopefully, these will be of help to any software developer who’s learning, to help you save time, frustration, and effort in the long run.

“Habits are not a finish line to be crossed, they are a lifestyle to be lived.” – James Clear

Lessons

You’ll never know everything about anything

Programming, algorithms, frameworks, libraries — they’re all too vast for any one person to understand the whole system. Swallow your ego and accept that you don’t know most of the things out there.

Learn how to use Git properly

The worst programmers are the ones who don’t actually know how to use Git and don’t ask for help, messing up the Git tree and causing hours of unnecessary work. Don’t be that person — learn Git. …

Everyone knows that Javascript and Typescript have several weird and hidden features that allow you to shorten the amount of code you write. To preface this article, I’d like to impose upon you an important tidbit of information, short and efficient code doesn’t always equal good code. As always, you should be prioritizing readability over implementing a bunch of fancy features.

That being said, these features can help you save tons of space and used properly are easily understandable to anyone else who’s reading your code. …

About

Caelin Sutch

Entrepreneur, Software Developer, and Creative. Cofounder and COO of Bytes Robotics. Freshmen at UC Berkeley in the MET Program

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