No-Code is getting better, but don’t expect them to be stealing developer jobs anytime soon

The rise of low-code and no-code platforms have had people concerned about the replacement of developers in favor of these platforms and other automated concerns. If you’re a software developer, you may be worried about these platforms replacing your job, but I believe that’s not a valid concern.

Image for post
Image for post
Photo by AltumCode on Unsplash

What is Low Code and No Code?

Lets start with talking about what exactly are Low Code and No Code platforms. They’re shorthand for a set of services that allow you to connect various services together, often with a drag-and-drop interface and highly visual workflow creators that enable non-software developers to create highly functional apps.

No-Code has been around for a while, Magento page builder, Wix, Weebly, Squarespace, Bubble, all of these are no-code or low-code platforms that allow you to build complex Web designs without writing a single line of HTML, CSS, or JS. Others like Zapier allow you to hook together various services and integrate them into a seamless workflow. …


The lifesaver for any Redux developer

If you’re a frontend developer, you’ve probably dealt with the massive amount of bloat and boilerplate that can come with Redux. Setting up actions and reducers can lead to hundreds of line of code that relatively simple, but necessary.

Image for post
Image for post
Photo by Joshua Aragon on Unsplash

Due to these problems, I switched over to using Recoil for a while, but then I remembered about Redux Toolkit.

What is Redux Toolkit

Redux Toolkit is:

The official, opinionated, batteries-included toolset for efficient Redux development

With a variety of utilities and a slightly opionated framework, it reduces the amount of fluff code you have to write to implement Redux.

Even better, it’s officially supported by the Redux team, which means it works just as well as Redux with half the code. …


Setting up the developer tools for serious React developers

We’ll skip the introductory BS and get straight into this guide. You can see the finished project in this Github repo. If you check the commit history, I’ve created commits for each “step” of this process.

Image for post
Image for post
Photo by AltumCode on Unsplash

Technologies

Setup Next.js and TypeScript

First, we’ll start by creating a new Next.js project with TypeScript. Open up your terminal and run:

yarn create next-app

Follow any prompts this tool gives you, and you should have an initialized Next.js …


Learn all about React portals and how to use them

React portals are a first-class method to render children into a DOM node that exists outside of the current parent. This is commonly used when you need a React component to visually “break out” of the current tree hierarchy. For example:

  • Dialogs
  • Modals
  • Tooltips

In all these cases, you’re rendering elements outside of the normal location in the DOM tree.

Image for post
Image for post
Photo by Christian Wiediger on Unsplash

Normally, when you return a component from the render method of a React component, it’s mounted in the DOM tree as the child of the nearest parent Node:

render() {
// React mounts a new div and renders the children into it
return (
<div> {this.props.children} …


What to Learn to Excel at Frontend Development

Front-end developers catch a lot of slack, often the butt of many jokes, they are still in incredibly high demand across the software industry.

Frontend development as a field is constantly growing and changing. For example, the concept of Javascript frameworks like React or Vue didn’t event exist 10 years ago.

Image for post
Image for post
Photo by NASA on Unsplash

To stay on top of the game and be a great developer, regardless of the current hot technology stack, here’s some skills to master.

Responsive web design

The way people browse the internet today is 44% on mobile devices. This means that any implemented web design should take mobile into consideration just as much as desktop. …


A lesson on how to extract component logic into reusable hooks.

React hooks, released in React v16.8, have changed the way developers write code. By default, React gives us access to a set of powerful base hooks, like useState , useEffect , useReducer , and others, but we can also build our own custom hooks to abstract complex state logic.

Image for post
Image for post
Photo by v2osk on Unsplash

Wait, what are custom hooks?

When writing React applications, there’s bound to be instances where you find yourself using the same repetitive or redundant state logic across multiple components. With custom hooks, we can extract this logic into a function to make our code cleaner and more reusable.

Custom hooks are simply functions that encompass other hooks and contain a common stateful logic that can be reused in multiple components. These functions are prefixed with the word use . Custom hooks mean less keystrokes and DRYer code. …


Today’s world is tumultuous, complex, and distracting. Each day from the moment we wake up there are often hundreds of things that demand our attention, like reading the most recent breaking news report, watching that TV show everyone’s raving about, or talking to friends on social media.

Image for post
Image for post
Photo by Colton Duke on Unsplash

Every single one of these distractions are tempting, who doesn’t want to be on top of the latest tech news? But they’re still distractions.

It’s almost universally recognized that most people have problems with saying no (check out this Psychology Today article from 2014), and it’s all rooted in our want to avoid conflict. Although saying “no” won’t cause a major war, it still creates some disharmony that our brains interpret as conflict. …


As we move into 2021, the way we develop and think about the web has radically changed. The further development of Progressive Web Apps (PWA’s), Artificial Intelligence/Machine Learning, expansion of the Internet of Things (IoT), Web Assembly, and more will shape the future of the web.

Image for post
Image for post
Photo by JOHN TOWNER on Unsplash

In this article, we’ll be looking at some of the up-and-coming technologies every technologist should be looking at for 2021.


React hooks were introduced in React v16.8, and made functional components incredibly powerful. With React hooks like useCallback , useEffect , and others (all of which I’ve written about), developers were equipped with the tools to turn React functional components into the building blocks of all React applications.

In this article, we’ll be looking at the React hook useRef and how we can use it to upgrade our React functional components.

Image for post
Image for post
Photo by Daniel Leone on Unsplash

What is useRef?

What exactly is the useRef hook?

const refContainer = useRef(initialValue);

useRef takes in a single function argument, initialValue , and returns a mutable reference object whose .current value is initialized to the passed argument.


When React hooks were introduced in React v16.8, developers were finally given the ability to manage state in functional components by using hooks like useState , useEffect , and others. In this article, we’ll be looking at the React hook useMemo and how we can use it to write faster React code.

Image for post
Image for post
Photo by Filiberto Santillán on Unsplash

To look at why useMemo even exists, we’ll first be looking at how rendering works.

Function Equality and Expensive Operations

useMemo at its core seeks to solve two problems, function equality and expensive operations.

During the lifecycle of a component, React re-renders the component whenever an update is made. This means that React will rebuild all the functions and variables in the React component, potentially a very expensive operation for more complex React components. …

About

Caelin Sutch

Passionate about building cool shit. First-year undergrad student studying EECS and Business @ UC Berkeley MET Program and software developer at Carline

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