DEV Community: peytono

Intro to React Hooks

peytono — Mon, 29 Apr 2024 01:59:41 +0000

Overview

In React you've always had access to state, a tool that allowed you to hold on to temporary values, non persisted changes, with easy ways to rerender your components to reflect those changes. At first, if needing state in a component, you’d need to take advantage of class components and lifecycle methods. With class components the constructor, render, componentDidMount, etc. control the functionality of a certain lifecycle. Giving you control of what functionality happens over stages of the component. On more complicated components, this gets messy and doesn’t allow for a real separation of concerns. For example, a componentDidUpdate() method would require every functionality needed for any updates to the state. In this article we’ll go over the most common React Hooks.

Introducing hooks! With React Hooks, all components should be functional. This rids the need for all lifecycle methods, including the constructor and render. Hooks allow for statefulness in functional components, as well as more control over your logic flow. All hooks must be imported into the file from React.

useState

The first hook to get acquainted with is useState, instead of adding values to the state object inside of the constructor and using setState, you’ll add useState inside your function statement, but before your return. When calling useState, you’ll use array destructing syntax to declare, the first being the name of your new state, then the update function, conventionally preceding the state name with ‘set’. Then you’ll pass in the initial state value inside the useState invocation like so:

const [user, setUser] = useState({});

Now anytime you need to change the value of the state you’ll use the update function, passing in the new value of state, or a function that resolves to the new value of state. Using the updater function is the same as setState, except the updater function is specific to the updated state.

 const [message, setMessage] = useState(‘’);

const startState = [‘hello’];

const [messages, addMessage] = useState(startState);

const [isWaiting, setWaiting] = useState(false);

In the below example I'll also use axios, a great technology to help make HTTP requests.

const onSend = () => {
  setWaiting(true);

  axios
    .post(‘/chatbot’, { messages: allMessages })
    .then((response) => {
      setWaiting(false)
      addMessage((curMessages) => curMessages.concat([response.data.message]));
      axios.post(‘/chatbot/db’, { message: response.data.message, userId: user.id });
      })
      .catch((err) => console.error(‘failed sending new message’, err));

  setMessage(‘’);
};

useEffect

The second hook to get acquainted with is useEffect, which can take two parameters: the first, a callback function, most commonly an anonymous arrow function, being required, and the second, an array, to include the effects dependencies. Intuitively, whenever useEffect is triggered, the function passed in will be invoked. The dependencies array should consist of any reactive values from the callback. Reactive values include stateful values or other hooks. Meaning, anytime a dependency value changes, that useEffect will be called. useEffect is super helpful in splitting up your component functionality into much more readable and modularized code than using React class components lifecycle methods.

useEffect(() => {
  bottomScroll();
}, [messages]);

In the above example, useEffect, calling bottomScoll, will be invoked when the component renders, as well as anytime the value of messages changes.

useMemo

useMemo mixes functionality of useState, useEffect and a memoize function. If you’ve used a memoized function before, useMemo has a similar purpose, holding onto cached values for optimization.

import React, { useMemo } from ‘react’;

function EventList({ events, time }) {
  const eventsNow = useMemo(() => filterEvents(events, time), [events, time]);
}

In this first example, we’re creating a function EventList, which is destructuring events and time. Then we’re creating a variable from useMemo called eventsNow. Since we want to call our function filterEvents passing in arguments, we need to pass it into the body of an arrow function, and because events and time are reactive values, they belong in the dependency array. This allows eventsNow to hold onto the result from filterEvents, then any time one of the dependencies changes, eventsNow will keep the cached value until the filterEvents calculation is completed, then any rerendering will take place.

The second example may seems less useful off the bat, but we’ll see how it comes into play.

const [user, setUser] = useState(null);

const userState = useMemo(() => ({ user, setUser }), [user]);

Here we’re creating a state of user, an updater function of setUser, and an initial state of null.

useMemo requires a function with no arguments, as well as a dependencies array. Dependency rules are the same as useEffect.

We’ll see soon why this was useful, but our userState is now an object containing user, currently null, and setUser, which can change the value of user.

useContext

React’s useContext is similar to useState, except it is accessible to any component, including children, inside its provider. This becomes more useful with deeply nested components or stateful values needed throughout the entire app as you won’t have to pass state down the entire tree of React nodes.

Wanting to having the value of the user throughout the app, we’ll reuse the useMemo example above alongside useContext to create a UserContext and provider.

import React, { createContext, useState, useMemo } from ‘react’;

export const UserContext = createContext({});

export function UserContextProvider({ children }) }
  const [user, setUser] = useState(null);

  const userState = useMemo(() => ({ user, setUser }), [user]);
  return (
    <UserContext.Provider value={userState}>
      {children}
    </UserContext.Provider>
  );
};

Now inside App.jsx we’ll make the UserContextProvider a wrapper for all components. Making the context available everywhere.

import React from ‘react’;
// imports of all components in return

function App() {
  return (
    <UserContextProvider>
      <Login />
      <HomePage />
      <Profile />
      <Events />
    </UserContextProvider>
  );
};

export default App;

In order to use and update the context inside other components we’d have to do something like the example below. If you don’t need to update the context you can access is with just the first two lines, not needing to extract setUser from userContext.

const userContext = useContext(UserContext);

const { setUser, user } = userContext;

useEffect(() => {
  axios
    .get(‘/user’)
      .then(({ data }) => setUser(data))
      .catch((err) => console.error(‘failed setting user’, err));
}, [setUser]);

Thank you!

Hopefully after this overview of the most common React Hooks you’ll be excited to see all you can do with this super helpful tool. If you don’t find the one that’s quite right for your needs, you can just create your own! This is just one of the amazing tools React has for us.

React Hooks Docs

Learn Web Scraping with Cheerio

peytono — Sun, 14 Apr 2024 21:44:06 +0000

An overview

Haven’t heard of web scraping before? If you want to traverse web pages through Node.js, you’re in the right place! Web scraping is a process by which you load or connect to an external web page and extract data or HTML from the page. While an old practice, is now commonly used in machine learning and still very useful in innovation! Most web scraping libraries have their own API service. When it comes to Cheerio, its syntax is very similar to jQuery. For example, to grab all img tags from your loaded HTML:

const $img = $(‘img’);

Cheerio is a more simple solution to web scraping, but there are situations that it won’t work and you’ll need to actually interact with the page or get content not accessible through Cheerio.

Is Cheerio right for you?

There are many more options out there than just Cheerio, but if needing HTML from a web page, this is a great one. If all you need is to select elements and some DOM manipulation, go with Cheerio. It’s super fast and has a very smooth learning curve. Unfortunately, if the site you need uses dynamic content or pagination, this is a sign that Cheerio might not work. You’ll absolutely want to check out your intended site with your Chrome Dev Tools to see what you’re working with! While you’re doing some digging, check for a robot.txt file to see if they have web scraping guidelines to follow. If this is your case, you may want to check out Puppeteer, built to be a browser animation tool, it allows you to interact with a site and get any fetched data.

Installation

Getting started with Cheerio is quick and easy! Cheerio has support for yarn, npm, and pnpm. To install through npm:

npm install cheerio

Then you can import cheerio to your file. If using ES6 or newer, you can then use:

import * as cheerio from 'cheerio';

or for commonJS:

const cheerio = require('cheerio');

Now you’re ready to use Cheerio!

Getting Started

There are several different loading methods in Cheerio, but the most supported and only one available out of the box is load. This method has one required argument, HTML in a string. Here’s a very basic example call...

const $ = cheerio.load(`
  <body>
    <h1>Heading</h1>
    <p>Some website content</p>
  </body>
`); 
console.log($('p').text());

Receiving log:

Some website content

Now you know the Cheerio basics!

Functional Usage

So, this is all that’s needed if you already have the HTML, but you likely won’t. Now let’s say you wanted to know the most popular Reddit communities. First, you should go to Reddit and inspect the page. You can select the element you’d like by clicking the icon with a dotted line box and a cursor. Now you can see the tag name with all the classes of this element. And we can go to writing some code!

Since the load method takes a string of the HTML, we’ll first need to get the site's HTML. This can very easily be done with Axios. Once getting the response, you can use the load method on the response data. Then we can initialize a popular communities variable set to the return of the selector, passing in our tag name and classes, each separated by a period(Noticing the jQuery?).

axios.get('https://www.reddit.com/?feed=home')
   .then(({ data }) => {
     const $ = cheerio.load(data);
     const $popCommunities = $('span.text-neutral-content.block.text-ellipsis.whitespace-nowrap.overflow-hidden');
     console.log($popCommunities.text().split('r/').slice(1));
   })
   .catch((err) => console.error('Failed getting reddit HTML', err));

Logs to the console:

[
  'DestinyTheGame',   'anime',
  'destiny2',         'FortNiteBR',
  'dndnext',          'buildapc',
  'techsupport',      'jailbreak',
  'LivestreamFail',   'legaladvice',
  'LifeProTips',      'AskCulinary',
  'Philippines',      'memes',
  'Rainbow6',         'Sneakers',
  'learnprogramming', 'RedDeadOnline',
  'jobs'
]

If you’re trying to get data unavailable through Cheerio

We discussed before that sometimes Cheerio is not good for your case, wanted to show an example. It can be hard to know when you’re using a new technology incorrectly or it just can’t do what you need! Let’s check out www.neworleans.com to check out some events going on.

Let’s try the same thing we tried before to find what we need. Doing that, we’d want to find the div with classes ‘shared-item’ and ‘item’, spoiler, the query isn’t working! So, I’ll back out to the parent, with the class ‘shared-items-container’ to find the HTML inside.

axios.get(
     'https://www.neworleans.com/events/upcoming-events/?skip=0&categoryid=40&startDate=04%2F11%2F2024&endDate=05%2F11%2F2024&sort=title',
   )
   .then(({ data }) => {
     const $ = cheerio.load(data);
     const $sharedItems = $('div.shared-items-container');

     console.log($sharedItems.html());
   });

The log we see is:

<div class="shared-items">
  <div 
    class="container" 
    data-sv-items-wrapper="" 
    data-sv-items=""
  >
  </div>
</div>

Uh oh, the container div is empty! Unfortunately, this is data that Cheerio does not have access to. In this case, you may want to check out Puppeteer.

Outro

If you had been familiar with API’s, but weren’t finding the information you needed, just wanted to learn more about a new topic, or were confused you weren’t getting the data you were expecting, I hope this helped you out! Now you know when to use Cheerio and how to get started. I’m pretty amazed at how quickly Cheerio can load and traverse the entire DOM of a site. Happy web scraping!

Resources

Cheerio Docs
Cheerio vs Puppeteer
What are the best practices for ensuring accurate and reliable web scraping results?
Web Scraping With JavaScript And NodeJS
Puppeteer Docs

All About Code Reviews

peytono — Mon, 01 Apr 2024 02:58:00 +0000

Overview

A popular way to cut down on bugs and make sure proposed changes should be made is through code reviews. When working with teams and wanting to add your code to a repository, you open a pull request to that repo. Then other developers on your team can review your code, make comments, request changes, or, fingers crossed, approve your PR(pull request).
Reviewing a PR can be a daunting task, especially if you’re new to the process. And of course, there are things to keep in mind when making a pull request. We’ll go through both sides of the process.

Making a PR

The title of the PR should be relevant and concise. When using verbs, use the imperative form. Add a description that lets the reviewer know the what, why, and how this code is a positive addition to the feature. Keeping pull requests small helps to not overwhelm reviewers, as well as continuous deployment helps trim down on “the second 90%”. An article from SmartBear, Best Practices for Code Review, saw that efficiency in a code review greatly diminishes after exceeding 400 lines of code. To get a bit more specific, they found,

“In practice, a review of 200-400 LOC over 60 to 90 minutes should yield 70-90% defect discovery.”

Comments giving context to changes add to efficiency both by helping the developer spot their bugs and helping the reviewer understand the code’s purpose.

Streamlining

Code reviews should not be used to nitpick formatting. Use formatters and linters, these save large amounts of time. These will have to be set up at the beginning of a project, then developers no longer need to spend time arguing about spacing or other minor syntactical issues. As long as you remember to use your formatter! In this same vein, avoid wasting time arguing about variable names. Focus on the important stuff. It’ll be easier and more tempting to point out the easy things, like syntax and naming, but they won’t impact the performance or how the new feature works.
Tests should only stay in the codebase if they are helpful. Good tests help ensure merges won’t break the production instance. Don’t keep tests that just slow the team down.

Most effective uses for code reviews

A developer is new to the company or still a green developer. Code reviews in this case will teach the newbie the company’s styles and conventions. This can also be used the opposite way. A developer new to the repository can review a pull request to better understand the conventions or the new feature.
If making changes to integral or sensitive parts of the code base. Examples would be changing the architectural structure or dealing with sensitive data. While these instances should be less frequent, you’ll want extra eyes on the pull request to double-check it won’t take down the site or add vulnerabilities.
When it seems like a whole discussion is breaking out in the comments, that’s a sign to schedule a meeting. What could end up being a giant thread of unproductive messages, could be more efficient by a quick meetup.

Reviewing Code

Be nice, and add encouragement.

In A zen manifesto for effective code reviews, Jean-Charles Fabre wrote,

“Did you know that in written communication, neutral content looks more negative than it actually is? Beware of this bias and include emojis when needed to get the tone right in your comments.”

There’s no reason to lower morale by not considering other’s
feelings. When seeing areas for improvement, use language
that promotes a conversation. If you have an idea to improve
something, ask what they think about that idea, instead of
asking why they haven’t already implemented it. This is
kinder and gives the reviewer more context to the decisions
made. Both parties can learn more from questions than
requests.

Be engaging, if you’re confused about something, ask questions. If you have other ideas, feel free to suggest them and weigh out the pros and cons. Always reach out with helpful resources!
Junior developers should still feel comfortable giving code reviews to their senior developers. Letting someone know you found something confusing might point them towards refactoring to something better.
Keep up with pull requests; getting to a review late will make it more difficult for the reviewee to remember exactly what they were doing.
Make sure the outcome of the code is in line with the purpose of the pull request.

Things to avoid

Your style opinions are not fact, and should not be presented as such. If you’ve got documentation or style guides that back you up, you can give a reference to the documentation.
Don’t overwhelm the contributor with comments, if they’re following a poor pattern, reference the poor pattern instead of leaving a comment on every single instance of it.
Don’t comment on code they didn’t write. If they worked on a feature that had some bad code in it, don’t try and force them to fix it. What you can do is review what they worked on and say you’d like to come back to the previous poorly written section.
Judgmental phrasing. You want to build up your peers and help improve the overall product as a team. Pay attention to phrasing. Instead of asking why they didn’t do it the way you would’ve or being sarcastic, let them know another way, and what the benefit would be.
Don’t use emojis for comments, unless they’re positive. The positive emojis can be encouraging and fun, but if leaving an emoji to point out something negative; you aren’t explaining why and it can come off as mean.
Ignoring comments. Someone took the time to read your pull request and try to help you improve it. Be respectful to your other developers. If it’s advice you don’t want to implement, you should still respond and maybe let them know why not.

Outro

If you were like me and overwhelmed when first tasked with reviewing a peer’s code, hopefully, you should now feel confident to get out and start reviewing! Regardless, with some new techniques for code reviews, you’ll know how to get at them more effectively! Thanks for reading!

A React Native Intro

peytono — Mon, 26 Feb 2024 00:08:37 +0000

React Native Overview

If you have enjoyed the React JavaScript library, you should check out React Native. It is now one of the most popular frameworks for mobile app development. The framework is open source and like React, was created by Facebook. (If you don’t know anything about React, I have another blog post comparing React vs Angular.) React Native is a cross-platform framework, that allows the creation of an app to run on iOS, Android, and, with the use of React Native for Web, browsers. Kumar Harsh has an in depth article, "The complete guide to React Native for Web". React Native uses Expo to view your progress as you go. Their app, Expo Go, gives you the ability to experience what you’re building from your mobile device.

Even though “native” is in the name. React Native is not considered native app development. Native app development involves focusing the app on one platform. They offer very high performance and typically offer better UX/UI than web development. Performance is increased since the code is compiled directly into the device’s core language. In native app development, it’s very easy to follow the specific OS guidelines, allowing for optimal user experience. While these are some great advantages, it also means you’d have to build two separate apps to work on both operating systems.

Getting Started

Either npm or yarn can be used to start a new React Native Project, below will be the npm example. If you follow these steps, be sure to be in your code editor’s terminal in the directory you’d like the project to be inside.

npx create-expo-app YourNewExcitingProject

cd YourNewExcitingProject
npx expo start

After those three lines, you’re ready to use Expo Go and take a first look at your project! As long as you’ve installed Expo Go, Apple users can scan the QR code in their terminals from their phone’s camera app, and this will take you to the live view of the project! Android users must first open the Expo Go app and then use the app to scan the same QR code.
Now, as you edit YourNewExcitingProject or whatever you named it, the edits will be reflected. Note: I sometimes have to close and reopen the app to reflect changes after fixing errors.

Having prior experience in React will give you a major head start in working with this framework, you may not understand React Native until you have an understanding of React. The fundamental building blocks of React, components, JSX, props, and state, will all be used in React Native projects.

You’ll be able to import all the React modules you’ve used, and of course, React Native has built upon these. Giving access to new modules built specifically for iOS or Android views.

Using only built-in modules I was able to very quickly put together this little app. These screenshots were taken from my phone while using the Expo Go app to preview my work.

And after clicking the Do Something button...

I created a new Home component in a separate file. Then all I did in App was import it and added it to the App’s return, in typical react fashion.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View } from 'react-native';

import Home from './components/Home.js';

export default function App() {
  return (
    <View style={styles.container}>
      <Home />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In Home, I imported several React Native components, and added them to my return, just with an addition of some simple attributes.

import { View, Text, Button, Alert, Image } from 'react-native';

export default function Home() {
  return (
    <View>
      <Text style={{ fontSize: 20 }}>Here is the Home View</Text>
      <Button
        title='Do Something'
        onPress={() => Alert.alert('You did something!')}
      />
      <Image
        source={{ uri: 'https://reactnative.dev/docs/assets/p_cat2.png' }}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

This example did not show using any use of props or state, but hopefully gets you excited about how quickly you can get started!

Wrap up!

No matter what app you’re trying to build, React Native is a framework that will give you many possibilities and tools to get you there. Take advantage of all the other React libraries and frameworks, such as React Redux or React Bootstrap. If you’re new to programming, there will be many opportunities for deep dives, but you should have an easy enough time starting the project and seeing some nice results!

What makes for good UX/UI?

peytono — Mon, 19 Feb 2024 04:44:28 +0000

The Basics

User Experience (UX)

Refers to the users’ interactions with the application. What the user benefits from while on the app.About the feel or flow of the entire app. Making the overall product intuitive and enjoyable is a part of UX.

User Interface (UI)

Refers to the visual aspects of the application. The appearance or animations of individual components or elements are parts of UI. The User Interface(UI) contributes to the User Experience(UX).

These concepts have overlapping similarities, but both make up your users' enjoyment and likelihood of returning.

Image from What is UX Design? Differences Between UX and UI Design

A positive User Experience (UX)

Looking into some super successful companies we can see what works.

Airbnb

The founders of Airbnb stumbled upon an idea that was not widely available. There was a consumer want for non-hotel lodging. The founders stayed focused on the user experience. Keeping every listing personalized, lets the user feel a connection. They have many interactive features. One is a map that includes many filter options. Another is an “Experience” feature that allows Airbnb to develop further a connection with the user and the user to their environment. Public reviews and user verifications allow hosts and travelers to feel confident in their decisions. It’s hard to trust just the seller! This app has become so successful that many landlords have tried switching to running Airbnbs and even made renting less affordable in many areas.

Google

Google took over as a search engine because of its far superior UX. It started with being faster, prettier, and giving more relevant results than its competitors. Their About Page has an article, From the Garage to the Googleplex about the founders' original mission,

“to organize the world’s information and make it universally accessible and useful.”

So successful, that it was the first technology company that’s usage became a verb. Now, Google is so much more. You can easily change your search between websites, images, shopping, and more. Currently, the search engine even gives snippets or relevant question drop-downs that should be useful to you based on your search, not even needing to leave the search page. The company did not stop there and created many sharing-based apps that allowed people to work together for free on the internet like never before. Logged into your Google account, you can switch seamlessly between the search engine, mail, calendar, etc...

The above image shows the first thing shown from search What makes for good UX?

When thinking about improving your user experience, think about ways your user can feel more connected with your product as a whole. Keep them engaged with your site, whether through personalized ways or with features that could help them seamlessly accomplish your product’s goals.

A positive User Interface (UI)

Some more on the big guys

Airbnb

Hired professional photographers for listings when they noticed the photos were lacking. Shows helpful information about listings on the search page, including photos, cost, rating, location, and others depending on the search. Features like filters and the map are intuitive and easy to look at. Minimalistic design and visually pleasing spacing.

Apple

Their developer site has an article, “UI Design Dos and Don’ts” with a nice four-section quick reference to help with mobile development. Keeping the following four topics from their article in mind should greatly impact the UI of your final product.

For interactivity, they suggest the layout to fit the size of the screen, users won’t enjoy having to scroll horizontally to read important content. Keep an appropriate size and spacing between clickable elements. Apple suggests at least 44 by 44 points(Similar to pixels, but points are slightly larger. Pixels are about 1/96th of an inch, while points are about 1/72nd). To add to user engagement, choose elements that allow for touch gestures in addition to clicking.

As far as readability, “Don’t let text overlap.” Add extra spacing between lines so your component doesn’t look too chaotic. To avoid having the user zooming while reading, keep text at a minimum of 11 points. Only use font colors that greatly contrast the current background. Failing at any of those three things can make it impossible for a user to even read important information.

On the graphics side, your product’s images should offer higher-quality options for today’s high-resolution screens. Don’t let your images become distorted. Pictures often look very strange if their original height-by-width ratio is changed

The above 3 photos were also included in Apple's aritcle, "UI Design Dos and Don’ts"

For clarity, make sure your layout has controls that are intuitive and minimalistic. Proper alignment allows users to easily tell where they are and what elements on your page are related.

Have fun designing!

You need both for users to want to keep returning. These major companies with publicly acclaimed UI and UX have kept their user’s experience as a priority and suggest you do the same, before even starting your project.

Some links if you'd like to dive deeper

React vs Angular

peytono — Mon, 05 Feb 2024 03:24:11 +0000

Introduction to the React Library and Angular Framework

When starting a new JavaScript project you should use the best tools at your disposal. It can be overwhelming how many there are to choose from! React and Angular are two very popular choices, and for good reason. Both React and Angular are all about components, helping keep code smart and reusable.

React

React takes advantage of JSX for its markup syntax. JSX is pretty similar to HTML, but is a little more strict. One slight difference includes, using className instead of class. Keep in mind, if wanting to return multiple JSX tags in a return, they must be wrapped in a shared parent wrapper, it can just be an empty wrapper. This syntax also allows you to insert JavaScript wherever you’d like, just inside some curly braces.
As far as updating components state, you’ll want to use React’s useState. First you’ll need to import it into your file. Like, import { useState } from ‘react’; You’re free to then declare state variables, const [followers, setFollowers] = useState(0); This can be used to keep track of whatever states you need, but the naming convention is variableName and setVariableName. Another convention is to have all components separated into their own files.

import { useState } from 'react';

function SayHello(){
  const [exclamation, setExclamation] = useState('!');

  function handleClick(){
    setExclamation(exclamation + '!');
  }

  return (
    <>
      <p> Hello world{exclamation} </p>
      <button onClick={handleClick}>
        Get Excited!
      </button>
    </>
  );
}

Angular

While both are all about components, that’s not all Angular is about. Being that Angular is a Framework, it has many more tools in its belt. Two major ones are its own Command Line Interface(CLI) and TypeScript, which adds upon the JavaScript language especially useful in errors. The documentation explains it eloquently,

"With Angular, you’re taking advantage of a platform that can scale from single-developer projects to enterprise-level applications."

Peeking back into conventions, Angular’s is a bit different. Components also go into their files, but naming should follow say-hello.component.ts. Each component is going to need a decorator for defining a selector, the tag (based on the file name), and an HTML template, for browser rendering.

@Component({
  selector: 'say-hello',
  template: ` <p> Hello World! </p> `,
})

Some major upsides

Checking out the documentation for either, you’ll find some cool tutorials to help you get started. React will help you build a Tic Tac Toe game, while Angular allows you to choose between your first web app or their Tour of Heroes.

React

Pramesh Jain compared React’s and Angular’s components,

“React is way ahead then Angular in terms of components, features, migration, updates, and architecture. So, it does consist [of a] more speedy and brighter future than Angular.”

When it comes to performance, React uses a virtual DOM and one-way binding instead of a real DOM and two-way binding that Angular does. Giving us some faster speeds at run time.

Image from altexsoft

On a personal note, I am a big fan of the React documentation’s pleasing UI.

Angular

Angular has many libraries for your projects, allowing for more than its base framework. If you feel so inclined, you can even publish your own. There are many development tools as well.
Angular comes with architecture patterns, MVVM(Model–View–ViewModel) and MVC(Model-View-Controller). While the two have some differences, they allow for the separation of business logic and data with the UI.

Image from MDN

Some potential downsides

Both release frequent updates, leaving projects with more maintenance to keep up with the newest updates.

React

React is still just a library, and as Bala Krishna Ragala said,

“Developers do not enjoy what they can have in a fully featured framework such as Angular”.

As far as Angular’s previously mentioned architecture patterns, React does not have these capabilities. React is controlling the view, and for everything else, you’ll need to research which other frameworks or libraries would be right for you. This adds to potential issues.

Angular

Many bloggers refer to Angular’s learning curve as steep, Biz4Solutions adds,

“and this is more so for newbie developers. Angular developers must be well versed in concepts like TypeScript, reactive programming (RxJS), etc., and multiple aspects like templates, components, services, modules, dependency injection, etc”

RxJS in itself can be hard to understand with unintuitive errors. New developers might have further confusion if new to classes or components, they may have no understanding of dependency injection. The documentation can feel lackluster to people as well. Then likely, ending up with further delays in understanding Angular.

If you aren’t a newbie, installing Angular onto your project involves a lot of boilerplate code. Not a big deal for a large project, but for a quick idea, can be a bit of a drag.

How To Choose For Your Next Project

This isn’t a one-fits-all situation here, like most choices programmers make, it depends on your situation and goals. If you’re new to programming, with no knowledge of either, you will almost definitely have an easier time starting a new project with React. As well as a smaller project, as it involves less setup and boilerplate code. If front and back end are a priority, then Angular might be the way to go. It’ll have support for it straight out of the box. For projects that need the support of a full framework, Angular does come with lots of tools.

All in all, they are both well respected in the JavaScript community and either would be a great addition to your next project! Making these decisions can be difficult, but now you should be more informed to go and start coding!

A Look Into Recursion

peytono — Mon, 18 Dec 2023 04:25:47 +0000

Recursion is a helpful process by which we can make code call itself. Any situation in JavaScript where you would need to iterate, even if you don’t know exactly how many times, you can take advantage of the recursion method. Besides loops, there are tons of other situations we can apply recursion. In this process, you use a function to call itself until you get to the desired case.

One simple example to show would be finding out if a number is divisible by five.

x % 5 === 0 ? true : false;

The same above expression could be written using recursion like so...

function divisibleBy5(num){
  if(num > 0 && num < 5){
    return false;
  } else if(num === 5) {
    return true;
  }

  return divisibleBy5(num - 5);
}

Base Case and Recursive Case

A recursive function consists of two major phases, the base case and the recursive case. It should always start with a base case, which allows for the function to return and exit if certain arguments are passed in or a certain condition has been met. Similar to a loop, this part is necessary if you don’t want to crash your program (In a little bit, I’ll talk more about the call stack).

I would like to re-use the above example to show you that you can have more than one base case.

function divisibleBy5(num){
  // base case
  if(num > 0 && num < 5){
    return false;
  } else if(num === 5) {
    return true;
  } else if(num < 0){
    return 'try again with a positive number';
  }

  // recursive case
  return divisibleBy5(num - 5);
}

Before we wanted two base cases in this divisibleBy5 function because we had two potential outcomes. You can also add additional base cases if you want specific arguments passed in when the function is called.

The second major part of recursion would be the recursive case. This is where you mutate the arguments that were passed in and call the function again. It is worthwhile to note, that if you are using recursion with a collection, you probably want to use nondestructive methods so as not to destroy your data! (i.e., use method .slice() instead of .splice()) You do not have to mutate your data inside the returned function call, but often you may want to. If when making a recursive function, you’re feeling lost as to where to start, it can often be easiest to begin with the recursive case because you know this will be done every time the function calls itself. Then you can come up with an idea of what will be happening to your data on every call, which will often make it clear as to when you need to exit the function(or the base case).

Here we've got another example of recursion, this time getting the sum of all the elements in an array.

function sumOfArray(array, sum = 0){
  // base case
  if(array.length === 0){
    return sum;
  }

  // recursive case
  sum += array[0];
  return sumOfArray(array.slice(1), sum);
}

When using recursion on an array, we always want to work with the first element of the array. Also as mentioned before, we're using the slice() method so as not to destroy the array we pass into the function.

The Call Stack

The JavaScript interpreter, which translates your JavaScript so that your computer understands it, has a mechanism called the call stack. When using loops, you must include an iterator, or your whole program crashes. This concept is similar when using recursion, except now you’d get a “stack overflow” error. Every function call in JavaScript gets added to the top of the call stack, and then anytime the function return is resolved, it gets removed from the stack. The call stack only has so much memory to work with, afterwards it “overflows” and your program will crash. The call stack does have enough memory to the point where this won’t often be an issue unless you forget to update your arguments before passing them through the recursion step.

function sumOfArray(array, sum = 0){
  // base case
  if(array.length === 0){
    return sum;
  }

  // recursive case
  sum += array[0];
  return sumOfArray(array, sum);
}

This would be an example of exceeding the call stack because an iterator was left out. Calling this function, as is, with an array of any length greater than zero will result in an error.
RangeError: Maximum call stack size exceeded

In conclusion,

Anytime you want to iterate through recursion, just create a base case and a recursive case. Also, keep in mind that the call stack does have a limit! Sometimes recursion can even make your code more readable and even potentially cut down the necessary code, now no one has to decipher that loop!

A Look Into Recursion

peytono — Mon, 18 Dec 2023 03:43:38 +0000

One simple example to show would be finding out if a number is divisible by five.

x % 5 === 0 ? true : false;

The same above expression could be written using recursion like so...

function divisibleBy5(num){
  if(num > 0 && num < 5){
    return false;
  } else if(num === 5) {
    return true;
  }

  return divisibleBy5(num - 5);
}

Base Case and Recursive Case

I would like to re-use the above example to show you that you can have more than one base case.

function divisibleBy5(num){
  // base case
  if(num > 0 && num < 5){
    return false;
  } else if(num === 5) {
    return true;
  } else if(num < 0){
    return 'try again with a positive number';
  }

  // recursive case
  return divisibleBy5(num - 5);
}

Here we've got another example of recursion, this time getting the sum of all the elements in an array.

function sumOfArray(array, sum = 0){
  // base case
  if(array.length === 0){
    return sum;
  }

  // recursive case
  sum += array[0];
  return sumOfArray(array.slice(1), sum);
}

The Call Stack

function sumOfArray(array, sum = 0){
  // base case
  if(array.length === 0){
    return sum;
  }

  // recursive case
  sum += array[0];
  return sumOfArray(array, sum);
}

DEV Community: peytono

Intro to React Hooks

Overview

useState

useEffect

useMemo

useContext

Thank you!

Learn Web Scraping with Cheerio

An overview

Is Cheerio right for you?

Installation

Getting Started

Functional Usage

Outro

Resources

All About Code Reviews

Overview

Making a PR

Streamlining

Most effective uses for code reviews

Reviewing Code

Things to avoid

Outro

More Reading

A React Native Intro

React Native Overview

Getting Started

Wrap up!

What makes for good UX/UI?

The Basics

User Experience (UX)

User Interface (UI)

A positive User Experience (UX)

Airbnb

Google

A positive User Interface (UI)

Airbnb

Apple

Have fun designing!

Some links if you'd like to dive deeper

React vs Angular

Introduction to the React Library and Angular Framework

Some major upsides

Some potential downsides

How To Choose For Your Next Project

A Look Into Recursion

Base Case and Recursive Case

The Call Stack

In conclusion,

A Look Into Recursion

Base Case and Recursive Case

The Call Stack

In conclusion,