DEV Community: jaredsurya

Nothing New Here

jaredsurya — Tue, 19 Sep 2023 20:50:21 +0000

Yeah so, what?

Using Leaflet JS library to create responsively programmed maps using React

jaredsurya — Mon, 24 Apr 2023 18:52:12 +0000

Introduction

Leaflet is a popular open-source JavaScript library for creating interactive maps. It provides a lightweight and easy-to-use API for creating maps and markers. The Leaflet npm package makes it easy to integrate Leaflet with your React application, allowing you to create interactive maps with markers and popups. By using Leaflet, you can take advantage of its many features and benefits, such as its support for various map providers, its customizable markers, and its ability to handle large amounts of data.

With Leaflet, you can create powerful and interactive maps that enhance the user experience of your React application. In this tutorial, we will be using the Leaflet npm package to create useful maps for our Rails application. We will cover how to use programmed markers, make them clickable, and program their location.

Pre-requisites

Before you start with this tutorial, you should have the following:

Basic knowledge of HTML, CSS, and JavaScript Familiarity with Node.js and npm (Node Package Manager)
An up-to-date version of Node.js installed on your system (we recommend version 14 or higher)
An up-to-date version of npm installed on your system (we recommend version 6 or higher)
An understanding of React and its basic concepts
A code editor such as Visual Studio Code or Sublime Text installed on your system
A modern web browser such as Chrome, Firefox, or Safari

If you're new to React or Leaflet, we recommend that you take some time to familiarize yourself with the basics before starting this tutorial. Here are some resources that can help you get started:

React Documentation
Leaflet Documentation
Official React Tutorial
Official Leaflet tutorial

Additionally, to follow this tutorial, you'll need to have the following dependencies installed in your project:

react and react-dom: These are the core React libraries that enable you to build React components.
leaflet: This is the JavaScript library that we'll be using to create and interact with the Leaflet map.
react-leaflet: This is the React wrapper for Leaflet that allows you to use Leaflet with React components.

You can install these dependencies by running the following command in your project directory:

npm install react react-dom leaflet react-leaflet

Note: If you're using Yarn instead of npm, you can install these dependencies by running the following command in your project directory:

yarn add react react-dom leaflet react-leaflet

Make sure to save these dependencies as devDependencies by adding the --save-dev flag to the install command if you're using npm.

Installation and Set-up

Before we get started, make sure that you have Node.js and npm installed on your system, as well as a code editor such as Visual Studio Code or Sublime Text.

Creating a new React project

To create a new React project, open up your terminal and navigate to the directory where you want to create the project. Then run the following command:

npx create-react-app my-map-app

This will create a new React project called my-map-app in the current directory.
Replace my-map-app with your own apps name.

Installing dependencies

Next, we need to install the leaflet and react-leaflet packages that we'll be using to create our map. To install these packages, navigate to your project directory (my-map-app) in your terminal and run the following command:

npm install leaflet react-leaflet

Adding Leaflet CSS

Before we can use Leaflet, we need to add its CSS file to our project. To do this, open up the public/index.html file in your project directory and add the following line inside the

element:

<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
  integrity="sha384-pFeFNVIfdvyD31yC5j5w5LB5wUzL1U/k8Z9X9xrwnKGGnUz0nFlMfPaa15tx2qqn"
  crossorigin=""
/>

This will load the Leaflet CSS file from a CDN (Content Delivery Network) and make it available to our project.

Testing the setup

Finally, we can test our setup by running the following command in our project directory:

npm start

This will start the development server and open up a new browser window with our React app. If everything is set up correctly, you should see the default React app homepage.

That's it! You've now set up your React project and installed the necessary dependencies. In the next section, we'll start building our Leaflet map component.

Building the Map Component

Now that we have our React project set up and the necessary dependencies installed, we can start building our Leaflet map component.

Adding the Map Component

First, create a new file called Map.js in the src directory of your React project. In this file, we'll create a new React component that will render our Leaflet map.

import React, { useRef, useEffect } from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";

function Map() {
  const mapRef = useRef(null);

  useEffect(() => {
    if (mapRef.current) {
      const { current: map } = mapRef;
      map.setView([51.505, -0.09], 13);
    }
  }, []);

  return (
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      style={{ height: "100vh", width: "100%" }}
      whenCreated={mapInstance => (mapRef.current = mapInstance)}
    >
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default Map;

In this component, we're importing the MapContainer, TileLayer, Marker, and Popup components from react-leaflet. We're also using the useRef hook to get a reference to the Leaflet map instance, and the useEffect hook to set the initial view of the map.

The MapContainer component is the top-level component for our map, and takes in several props including center (the initial center point of the map), zoom (the initial zoom level of the map), and style (the CSS style for the map container). We're also using the whenCreated prop to set the mapRef to the Leaflet map instance.

The TileLayer component is responsible for displaying the map tiles. In this example, we're using the OpenStreetMap tile server, but you can also use other tile servers like Mapbox or Google Maps.

The Marker component is used to display a clickable marker on the map, and takes in a position prop to set the position of the marker. The Popup component is used to display a tooltip when the user clicks on the marker.

Adding Clickable Markers

To make our markers clickable, we need to add an event handler to the Marker component. In the Map.js file, add the following function:

function handleClick(e) {
  console.log(e.latlng);
}

This function logs the latitude and longitude of the clicked location to the console. Next, update the Marker component to include the eventHandlers prop:

<Marker position={[51.505, -0.09]} eventHandlers={{ click: handleClick }}>
  <Popup>
    A pretty CSS3 popup. <br /> Easily customizable.
  </Popup>
</Marker>

Integration with React

Now that we have our Leaflet map component built, we need to integrate it with our React app.

Adding the Map Component to App.js

In your App.js file, import the Map component and add it to your app's main layout.

import React from "react";
import Map from "./Map";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My React Leaflet Map</h1>
      </header>
      <Map />
    </div>
  );
}

export default App;

In this example, we're importing the Map component and rendering it below the header. You can customize the layout of your app as needed.

Adding Custom Markers

To add custom markers to your map, you can create a new component that renders the marker and its associated popup. For example, create a new file called CustomMarker.js in the src directory:

import React from "react";
import { Marker, Popup } from "react-leaflet";

function CustomMarker({ position, text }) {
  return (
    <Marker position={position}>
      <Popup>{text}</Popup>
    </Marker>
  );
}

export default CustomMarker;

In this component, we're using the Marker and Popup components from react-leaflet to display the marker and its associated popup. The position prop sets the position of the marker, and the text prop sets the content of the popup.

To use this custom marker in our Map component, we can import it and add it to the Map component's JSX:

import CustomMarker from "./CustomMarker";

function Map() {
  // ...

  return (
    <MapContainer
      // ...
    >
      <TileLayer
        // ...
      />
      <CustomMarker position={[51.5, -0.1]} text="Hello, world!" />
    </MapContainer>
  );
}

In this example, we're adding a new CustomMarker component to the Map component, with a position of [51.5, -0.1] and text of "Hello, world!".

Best Practices

When working with Leaflet maps in a React app, there are a few best practices you should keep in mind to ensure your app runs smoothly and efficiently.

Componentizing the Map

One of the biggest advantages of using React for your Leaflet maps is the ability to create reusable components. Consider creating a separate component for each map you create, and pass in any necessary props to customize the map's behavior and appearance.

Optimizing Performance

To optimize performance, consider using lazy loading to only load the map components when they are needed, and unloading them when they are no longer in use. You can also use React.memo() to memoize your components and prevent unnecessary re-renders.

Avoiding Direct DOM Manipulation

Avoid directly manipulating the DOM with Leaflet code, as this can cause conflicts with React's virtual DOM. Instead, use React's state and props to control the behavior and appearance of the map.

Using the React-Leaflet Library

When working with Leaflet maps in a React app, it's recommended to use the react-leaflet library, as it provides a simple and convenient way to integrate Leaflet maps with React. It also handles some of the common issues that can arise when using Leaflet in a React app, such as managing the lifecycle of the map components.

Keeping the Map Simple

Finally, when designing your Leaflet maps, remember to keep them simple and easy to use. Avoid cluttering the map with too much information or too many controls, as this can overwhelm the user and make the map difficult to navigate. Instead, focus on providing the key information that the user needs, and use intuitive controls that are easy to understand and use.

By following these best practices, you can create beautiful and efficient Leaflet maps in your React app that provide a great user experience.

Troubleshooting

Even with careful planning and attention to detail, you may run into issues when adding Leaflet maps to your React app. Here are a few common issues and how to troubleshoot them:

Map Not Displaying

If your map is not displaying, check the following:

-Make sure the Leaflet and React-Leaflet libraries are properly installed and imported in your app.
-Check that the container element for your map has a defined width and height.
-Verify that the map component is being rendered properly in your app.

Map Not Centering or Zooming

If your map is not centering or zooming correctly, check the following:

Verify that the map's center and zoom props are being set correctly.
Check that the center and zoom props are being updated when the user interacts with the map.
Ensure that any markers or layers on the map are not causing the map to zoom or center incorrectly.

Performance Issues

If your map is causing performance issues, check the following:

Check that the map is being lazy loaded and unloaded properly to prevent unnecessary rendering.
Verify that the React.memo() function is being used to memoize your map components and prevent unnecessary re-renders.
Ensure that your map is not rendering too many markers or layers at once, as this can cause performance issues.

Interactivity Issues

If you are having issues with interactivity on your map, check the following:

Ensure that any markers or layers on the map are properly registering and responding to user interactions.
Check that the onClick and other event listener props are being set and updated correctly.
Verify that the Leaflet library is not interfering with React's event system.

By troubleshooting these common issues, you can ensure that your Leaflet maps are functioning properly and providing a great user experience in your React app.

Conclusion

Congratulations! You have successfully added Leaflet maps to your React app front-end. You should now have a solid understanding of how to:

Install and set up the Leaflet and React-Leaflet libraries
Build a map component with custom markers and layers
Integrate your map component with your React app
Follow best practices for optimizing performance and user experience
Troubleshoot common issues that may arise

By incorporating Leaflet maps into your React app, you can provide an engaging and interactive experience for your users. Whether you are building a location-based app or just want to add some extra functionality to your site, Leaflet maps offer a powerful tool for visualizing data and engaging with your users.

If you have any questions or comments, feel free to leave them below. Happy mapping!

Additional Resources

If you want to learn more about Leaflet maps and how to use them in your React app, here are some additional resources to check out:

Leaflet Documentation - The official documentation for the Leaflet library.
React-Leaflet Documentation - The official documentation for the React-Leaflet library.
OpenStreetMap - A free, editable map of the world that provides the data used by many Leaflet maps.
Leaflet Plugins - A collection of plugins and add-ons for the Leaflet library.
Leaflet AwesomeMarkers - A plugin for adding custom markers to your Leaflet maps.

By exploring these resources, you can deepen your understanding of Leaflet maps and discover new ways to integrate them into your React app. Whether you are a beginner or an experienced developer, there is always more to learn and explore in the world of Leaflet maps.

Seeding to Rails from an API

jaredsurya — Tue, 07 Feb 2023 01:17:06 +0000

Intro

I am currently a student finishing up phase 4 of my cirriculum at Flatiron School. For this phase I had to reflect on what I had learned, and what I could share with you. While making the full-stack web application (React front-end, Rails back-end), I encountered many problems which I solved. I thought I would convey here one of those, and attempt to create a mini walkthrough guide in case you're attempting to do the same thing.

While I was building my project - a single page application - there were a number of problems that I had to overcome. The unique coding situation that I found myself in whilst planning involved seeding. I had to get a specific quantity of data, which existed on the internet, into my SQL database. I discovered an API which hosted all the relevant info I needed, and I wanted to fetch it using (here-to-fore unknown) code in my rails seeds.rb file.

I got my data from superheroapi.com. The site had far more info than what I needed, so I had to figure out how to selectively import data via code in my seeds.rb file. I began searching around and below you will find my discoveries. None of this stuff was easy, but with some crafty deductive logic it all came together into just what my project needs.

The Good Stuff

I new I wanted to make a webpage about superheroes and I was glad to find out they had an API for just that. As I sifted through the data, I found out it was quite comprehensive - FULL of info:

I only wanted a fraction of that (like 5 key-value pairs), so I had to figure out how to selectively take what I needed and store it, through Rails, in my database. This led me to needing to download and use the rest-client ruby gem, which I'll detail for you below.

REST-client

rest-client has been described as

"A simple HTTP and REST client for Ruby, inspired by the Sinatra microframework style of specifying actions: get, put, post, delete."

and this Github link contains most of the information needed to get started using it. As I learned from rubygems.org, all you have to do to get started is run the following command in your terminal. Be sure you are in the appropriate directory, such as the parent directory of your rails project.

gem install rest-client

Once you have installed the gem, navigate to your seeds.rb file (within your text editor) and at the very top of the file, type require 'rest-client'. This will enable your file to use the commands from the rest-client library.

CODING the logic

In my heroesdata method, on line 9 of my code above, I get down to the business of extracting the information from the external API. By using the rest-client gem, I was easily able to connect with the resource and make use of the information that was delivered. My Hero table needed to be populated with heroes. In order to do so, I simply made a GET requst to my endpoint. The syntax for this is:

RestClient.get(url, headers={})

On line 10 of my code I call rest-client in this way with a GET method and pass in the URL. This delivers the appropriate hero I need, and it needs formatting. The hero that's returned here has way more information than what I can use. I used constructive logic to take away just the components I wanted (key, value pairs), piece by piece. I just took what was useful and left the rest.

To begin with, I parsed the data into a useable hero_array. Then, I used the nested data to populate a hash which I call final_hero on line 21. On line 28 I submited that hash and effectively created the first instance of a Hero on my heroes table. I need more than one hero, so I make sure the code loops through the heroesdata method many times. I chose to make 35 heros because that fit the needs of my app, but you could conceivably choose any number you want. With adequate Hero instances created, I worked on my front end (react-based) to display the data for use (pictured below).

Conclusion

Through using rest-api gem and some crafty reasoning, I was able to reduce the large quantity of information to a hash that is much smaller:

final_hero = {
    name: hero_array["name"], 
    full_name: full_name, 
    power_level: power_level,
    publisher: hero_array["biography"]["publisher"],
    image: hero_array["image"]["url"]
  }

With only 5 key-value pairs (now manageable and precise), the app was thus crafted and everything fit nicely.
It was challenging but fun to create each of these unique features. rest-client was very helpful for when I needed to seed data using an API, and I hope it works for you too. It was relatively easy to figure out, and I know you will find it useful too. I am grateful for what hard work it must have taken to create such a useful ruby gem, rest-api.

Thank you for reading & happy coding!

Object Inheritance in Ruby

jaredsurya — Sun, 20 Nov 2022 21:27:00 +0000

Introduction

In real life, different categories or groups
(like people, reptiles, buildings, etc.) are related in all sorts of ways. Within a single group, or class, there are many ways things can be classified. For example, the "people" category or class includes garbage men, shop owners, scientists, etc. Each class shares common features because they are all people. Even though they are different, they all have specialized and unique traits too.

In coding, we know we always want to cut out repetitious sequences from our code. Object inheritance in Ruby allows us to simplify our code and keep repititious 'code smell' down. We see the similarities between related classes and we abstract out the common methods and behaviors into a parent class.

Basics of Inheritance

Inheritance is one of the most important features in an object-oriented language.
It is when a class inherits behavior from another class. If a programmer wants to create a new class and there is a class that already includes some of the code that the programmer wants, then they can derive a new class from the existing class. The class that is passing along behavior is called the superclass and the class that inherits it is called the subclass. The use of inheritance allows us to create a family of classes with shared behavior, while still differentiating those classes. Using this system reuses existing code and allows new classes (sub-classes) to need less new code written.

Implementing class inheritance creates a family of classes with shared behavior and differentiation. Code that would have been used repetitively gets abstracted and simplified. The new child or subclass adopts attributes and behaviors that are already contained in the parent class. (superclass)

Key terms in Inheritance:

Super-class: Classes whose characteristics (methods and behaviors) are inheritable are known as "superclass" (aka. base class or parent class).
Sub-class: The class which is derived from another class is known as a subclass or derived class or child class. They are sometimes written with their own objects and methods in addition to the superclass methods and objects, etc.

Examples:

Defining the Superclass:

Below we have written a class called Bear. It has many methods, all of which can be passed down and available to its children, aka. subclass. The superclass normally provides the bulk of key code content, that which is inheritable by the children (aka. subclasses).

class Bear

  attr_accessor :coat_color, :favorite_food

  def initialize(coat_color, favorite_food)
    @coat_color = coat_color
    @favorite_food = favorite_food
  end

  def speak
    "Grrrowlll!"
  end

  def feed
    "om nom nom!"
  end

end

Here we see our Bear super-class. It is initialized with coat_color and a favorite_food. Also present are instance methods, such as speak and feed. Each of these methods will be available to any children, inheriters of this Bear super-class.

Subclass:

The subclass is the class which has been derived from the super's code and which extends the usability of that code. (i.e. class methods, instance methods, etc.)
In the code block below we see Bear's class characteristics being inherited by Panda. We also see the general syntax for inheriting , which is the < placed between the sub-class and the super-class. Panda now inherits all of the methods and behavior of the parent class. It can now use any of the methods found inside of the Bear class and can even have some Panda-specific ones of its own.

class Panda < Bear

  def speak
    "Grrr..."

end

Because Panda is a child of Bear, all of the methods defined within Bear are available for Panda to use. All of the methods of the parent are inherited by the child. For example, Panda.feed returns "om nom nom!" Also, a panda could be initialized with a coat_color and favorite_food.

Overwriting Inherited Methods

One feature that differs between the parent class and child class here is how in the parent Bear class the speak method returns "Grrrowlll!" and the child Panda class has it's own instance method called speak which overwrites its parent. When speak is called on the Panda class, "Grrr..." is returned instead of "Grrrowlll!". This illustrates how the subclass can overwrite methods of it's superclass.

Another example of this would be if we had a superclass of Human the greet instance method might say "Hello!" whereas a member of the Cowboy class might have a greet instance method overwriting that of it's parent Human class. The greet method of the Cowboy subclass might return "HOWDY!!" instead of "Hello!".

Conclusion

Because of ruby's object orientation and subsequent object inheritance, cleaner less repetitive code can be produced. Also, using the principles of inheritance, we can define generic Ruby classes which can have greater reusability. Smaller subclasses result in more detailed behaviors. With object inheritance we can also code multiple, non-repetitive methods, reducing the total amount of code needed, cleaning and optimizing the code that's useful to us.

Client-side Routing on a React-based SPA

jaredsurya — Wed, 14 Sep 2022 16:51:48 +0000

- WHAT IS SPA?

From mdn web docs:

An SPA (Single-page application) is a web app implementation that loads only a single web document, and then updates the body content of that single document via JavaScript APIs such as XMLHttpRequest and Fetch when different content is to be shown.

This therefore allows users to use websites without loading whole new pages from the server, which can result in performance gains and a more dynamic experience, with some tradeoff disadvantages such as SEO, more effort required to maintain state, implement navigation, and do meaningful performance monitoring.One helpful feature we can incorportate into our Single Page Applications is client-side routing. Single-page applications have, by definition, only one HTML document for the entire application, thus they are a perfect candidate for client-side routing. If we choose to use client-side routing to develop our page, all of the routing logic will be handled within Javascript. Also, the initial page-loading process happens with a single GET request to the backend server. After that, GET requests may be only needed for supplementary data. The bulk of the application will be loaded and the client-side routing will take control of switching which components are shown, how, and when. Routing consists of changing what the client is receiving in the web browser based on the endpoint of a URL. Not having to send a GET request on every routing call means that pages using client-side routing methods will render faster. As one of the essential aspects of single-page applications and as React doesn’t come with a routing solution, React developers must integrate third-party libraries to implement routing into their applications.

- HOW CLIENT-SIDE ROUTING WORKS IN REACT:
The general difference between client-side routing and server-side rendering is in which part of the website is the routing/rendering happening. The client-side would have the application programmatically adjust what the user is seeing based on logic in the browser that is affecting the user - experience. With the other, server-side routing, the user makes requests to the server every time there is to be a change to the app screen. With react, client-side routing is preferred. React receives a user request and programmatically renders the appropriate information on the DOM based on its component structure. Client-side routing in React helps to maintain the seamless user experience that a typical single-page application can promise. This may be achieved through an external React library called React Router. React Router uses dynamic routing to ensure that routing is achieved as it is requested by the user. Using React Router means that all the required components are also rendered without any flashes of white screen or page reload. All of this client-side routing produces speedy webpages and a seamless user experience.

- HOW REACT ROUTER CAN AID IN CLIENT-SIDE ROUTING:
In the following notes, I will briefly elaborate on some of the the basics of how React Router works. For steps to install React Router, click here. Once React Router has been installed, we would import BrowserRouter and wrap the entire App component in it to render it.

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Within App.js, we import 'Link' and add some global navigation:

import { Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav>
        <Link to="/invoices">Invoices</Link> |{" "}
        <Link to="/expenses">Expenses</Link>
      </nav>
    </div>
  );
}

At this point there aren't any routes that render when the URL changes yet, but Link is changing the URL without causing a full page reload.👍

Now, we'll render some new components to be routed to:

Expenses:

export default function Expenses() {
  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>Expenses</h2>
    </main>
  );
}

Invoices:

export default function Invoices() {
  return (
    <main style={{ padding: "1rem 0" }}>
      <h2>Invoices</h2>
    </main>
  );
}

Next, inside of Index.js we'll create our first route config. By setting the path for each element we effectively tell the DOM what component has to be loaded if the specific URL path is chosen. We'll make it so that at "/" it renders and at "/invoices" it renders :

import ReactDOM from "react-dom/client";
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import App from "./App";
import Expenses from "./routes/expenses";
import Invoices from "./routes/invoices";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>
);

As you can see, we import Route in order to make each url path, and Routes as a container for them all.

The next thing we will have to do is create a Link for the client to click on and navigate the page:

import { Link, Outlet } from "react-router-dom";
import { getInvoices } from "../data";

export default function Invoices() {
  let invoices = getInvoices();
  return (
    <div style={{ display: "flex" }}>
      <nav
        style={{
          borderRight: "solid 1px",
          padding: "1rem",
        }}
      >
        {invoices.map((invoice) => (
          <Link
            style={{ display: "block", margin: "1rem 0" }}
            to={`/invoices/${invoice.number}`}
            key={invoice.number}
          >
            {invoice.name}
          </Link>
        ))}
      </nav>
      <Outlet />
    </div>
  );
}

Above we see the Link components being made as the invoices array is mapped through, producing one Link of appropriate parameters per invoice. When the Link is clicked by someone navigating the website, the React Router would render that component. The URL would also show that we were viewing that page.

You can demo a working version of this app here.

For a somewhat broader overview of what's possible with React Router, as well as some more how-to, visit this page.

React Router and other libraries like it are so brilliant because they take complex programmatic issues and have worked through them to enable a solution which makes many web pages run much faster. Client-side routing is hugely impactful as a means of navigating many webpages. The webpage user gets a streamlined experience in a quicker way than ever before.
To go even more in depth to the concepts which make React Router run, click here!

Client-side routing can provide a great performance benefit if your application consists mainly of a static page or if it's a landing page for your company. And, you're using a backend-less application, it can speed up your single-page application and provide seamless user experience. Since conventional server-side rendering can out-perform client-side routing in various situations, it's still important to understand the needs of your application. With this knowledge, you can decide whether to use client-side routing, server-side routing, or a combination of both.

The Almighty CRUD

jaredsurya — Mon, 05 Sep 2022 19:27:40 +0000

Since I've completed my second phase of schoolwork at Flatiron School, I thought I should re-visit and explore an important concept which I've been using during this phase. This phase at Flatiron School we predominately focused on the React programming language. During these studies, CRUD and its methods was also a readily utilized topic. It's also one which deserves more exploring. Below I will elaborate on what CRUD is, and how we've interacted with it within almost every React lab we did this phase.

An important concept in the web developers' world is CRUD, which stands for Create, Read, Update and Delete. Each letter in this acronym is an important way of viewing, searching, or changing information using computer-based forms and reports. A web developer would want to pay attention to CRUD and REST while going to make network requests via an API. In this phase at Flatiron we used many principles found in CRUD to make RESTful API requests to both local and remote servers.

REST is an acronym for REpresentational State Transfer and an architectural style for distributed hypermedia systems. It was first presented in in 2000 during Roy Fielding's famous dissertation. REST APIs communicate via HTTP requests to perform standard database functions like creating, reading, updating, and deleting records (CRUD) within a resource. For example, a REST API would use a GET request to retrieve a record, a POST request to create one, a PUT request to update a record, and a DELETE request to delete one.

For the acronym, C.R.U.D., we can elaborate a little more about what each letter means.

C is for Create. The create function allows users to create a new record in the database. In the SQL relational database application, the Create function is called INSERT. SQL (Structured Query Language) is a programming language used to communicate with data stored in a relational database management system. SQL syntax is similar to the English language, which makes it relatively easy to write, read, and interpret. When making RESTful API requests, the name of the request is POST. It creates a new insertion in the database info.

R is for Read. The read function is similar to a search function. It allows users to search and retrieve specific records in the database and read their values. Users may be able to find desired records using keywords, or by filtering the data based on customized criteria. When making API requests, the type of request that corresponds to 'Read' is 'GET.'

U is for Update. The update function is used to modify existing records that exist in the database. To fully change a record, users may have to modify information in multiple fields. In RESTful API methods, the Update of CRUD corresponds to PATCH and PUT.

D is for Delete. The delete function allows users to remove records from a database that are no longer needed. In a RESTful API scenario, the method we use to Delete the records from the server is DELETE. Fancy that!

As I worked through the second phase of Software Engineering cirriculum at Flatiron School, CRUD was a topic that students needed to know of for many reasons. There are many required operations in labs which can use the RESTful CRUD methods. In lab work, when we would update state in our react labs we had to make a corresponding fetch request to persist that change to an API. API means Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. For the labs, we were trying to get our React application, to carry out CRUD requests that would alter data both remotely, and locally from our json-server.

To persist our stateful changes to the 'backend' server, we made fetch requests for each type, c, r, u, and d. Below are some examples of how CRUD was used in our lessons for Flatiron School.

The following POST request Creates new information to be written to the server:

In the following GET request we used, information is Read from the server:

The following PATCH request Updates information in the server:

And, the following DELETE request Deletes information from the server:

Each type of API request we made had a different mode, each corresponding to one of the CRUD methods. By using these methods we were readily able to successfully Create, Read, Update, and Delete information from our server, and persist changes.

Betwixt all these requests back and forth from our json-server, there was much interaction with the React programming language, which kept the program's internal state up to date with all the information the server had stored.

CRUD really was an important part of my labs and development of knowledge during this phase at Flatiron. Without the CRUD methods, and their use, much of the programming involved with React would have been inoperable. All of this and more was a big part of what I had learned in Phase 2 at Flatiron School.

A Simple Overview of JavaScript Object Destructuring

jaredsurya — Thu, 26 May 2022 18:42:42 +0000

As I have just finished my first phase of study with Flatiron School, it occurred to me that I should display a portion of what I learned for others to benefit from.

For this, I have chosen object destructuring.

Summary: Here we'll explore some JavaScript object destructuring methods that assign properties of an object to individual variables.

Let's say we have an object containing someone's elemental makeup reading, taken by an oriental philosopher. Follow this link to learn more.

let johnsElementalMakeup = { wood: "13%", fire: "17%", earth: "23%", metal: "22%", water: "25%" };

The traditional way (before ES6) to assign properties of the johnsElementalMakeup object to variables was the following:

let wood = elementalMakeup.wood; let earth = elementalMakeup.earth;

Since ES6, we can now use the following:

let { wood: wo, fire: f, earth: e, metal: m, water: wa } = johnsElementalMakeup

Here, the variables of wo, f , e, m , and wa would be assigned to the values of wood, fire, earth, metal and water, respectively.

The basic syntax for this is:

let { key1: variable1, key2: variable2 } = object;

The identifier before the colon (:) is the key/property of the object and the identifier after the colon is the variable.

If the variables should have the same names as the keys of the object, we can simplify as shown:

let { wood, fire, earth, metal, water } = johnsElementalMakeup console.log(wood, fire, earth) // "13%", "17%", "23%"

Each of the key names within johnsElementalMakeup are now variable names which are assigned to the respective percentage values.

Adding in a key name that doesn't exist within the object would result in that variable being assigned "undefined".

For more, including how to destructure nested arrays, I suggest you check out the documentation at MDN: Here.

Timing of Things

jaredsurya — Tue, 22 Mar 2022 20:21:34 +0000

The journey so far has taught me a lot. Some of my latest difficulties have come in form of falling behind in my teachings. I'm more or less up to date now, but the vacation I went on had set me back a bit. I need to be more diligent so that I can finish on time or ahead of schedule.

Getting Stuck

jaredsurya — Tue, 08 Mar 2022 16:02:26 +0000

This stuff certainly has its ups and downs. I'm learning to use .find() in javascript and feeling pretty stuck here.

First Post!

jaredsurya — Tue, 22 Feb 2022 20:21:19 +0000

Today I am posting about my time with Flatiron School so far.

I really enjoy the way the online curriculum is laid out. In addition to making content easy to understand, they have technical coaches standing by to help when necessary. The group of students I am with seems very kind and I'm hoping we can help each other through this first phase of our schooling.