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.
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. …
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.
Due to these problems, I switched over to using Recoil for a while, but then I remembered about 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. …
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.
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 …
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:
In all these cases, you’re rendering elements outside of the normal location in the DOM tree.
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} …
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.
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.
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. …
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.
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.
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.
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.
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.
To look at why useMemo
even exists, we’ll first be looking at how rendering works.
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