DEV Community: crishanks

Drag & Drop: Reorder Lists with react-dnd

crishanks — Wed, 03 Jan 2024 18:44:29 +0000

Drag & Drop with react-dnd

Demo

Diving In

At the top level of our component we import 'react-dnd' and 'react-dnd-html5-backend' and hook up the DndProvider. If it's gonna be draggable, it's gotta be wrapped in the provider and passed a backend.

import "./styles.css";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { DropZone } from "./drop-zone";

const dndCharacterData = [
  { id: 1, classType: "Barbarian", race: "Dragonborn" },
  { id: 2, classType: "Barbarian", race: "Dwarf" },
  { id: 3, classType: "Fighter", race: "Elf" },
  { id: 4, classType: "Fighter", race: "Gnome" },
  { id: 5, classType: "Monk", race: "Half - elf" },
  { id: 6, classType: "Monk", race: "Half - orc" },
  { id: 7, classType: "Druid", race: "Halfling" },
  { id: 8, classType: "Druid", race: "Tiefling" }
];

export default function App() {
  return (
    <div
      className="App"
      style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
    >
      <h1>react-dnd</h1>
      {/* The DndProvider component provides React-DnD capabilities to our application. */}
      {/* There are different backend types for different applications like 'touch' for mobile
        but HTML5 is the primary supported backend. Use this unless you have a
        really specific use case*/}
      <DndProvider backend={HTML5Backend}>
        <DropZone dndCharacterData={dndCharacterData} />
      </DndProvider>
    </div>
  );
}

Now let's create a drop zone that surrounds our draggable items. Typically a drop zone configured component will have its own instance of useDrop, but when your dragabbles are always inside the drop zone, we don't need it (see the beginner example for contrast). So for this example, the DropZone component really serves as more of a container to extrapolate out some of the business logic associated with reordering our list.

import React, { useCallback, useState } from "react";
import { Draggable } from "./draggable";
import update from "immutability-helper";

export function DropZone({ dndCharacterData }) {
  //grabbing api data and rendering it with `renderDndCharacterCards`
  const [dndCharacters, setDndCharacters] = useState(dndCharacterData);

  //a memoized function that uses js `immutability-helper` & `splice` to update the
  //order of our rows
  const moveRow = useCallback((dragIndex, hoverIndex) => {
    setDndCharacters((prevCharacters) =>
      update(prevCharacters, {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, prevCharacters[dragIndex]]
        ]
      })
    );
  }, []);

  const renderDndCharacterCards = () =>
    dndCharacters.map((dndCharacter, index) => (
      <Draggable
        index={index}
        key={dndCharacter.id}
        dndCharacter={dndCharacter}
        moveRow={moveRow}
      />
    ));

  return (
    <div
      style={{
        border: "1px solid blue",
        width: "80%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        padding: "20px",
        gap: "10px"
      }}
    >
      <h2>Drop Zone</h2>
      {renderDndCharacterCards()}
    </div>
  );
}

Now let's get into the nitty gritty.

Our Draggable component is actually going to take care of almost all of the drag and drop functionality. We use the useDrop provided by react-dnd to establish a droppable area, and the useDrag hook to make something draggable. The two are connected by useDrop's accept property, and useDrag's type property. If those don't match, no draggy droppy.

import React, { useRef } from "react";
import { useDrag, useDrop } from "react-dnd";

//High Level 101 -- react-dnd uses drop areas and draggable items

export function Draggable({ dndCharacter, moveRow, index }) {
  const { id, race, classType } = dndCharacter;
  //react-dnd uses refs as its vehicle to make elements draggable
  const ref = useRef(null);

  //we use `useDrop` to designate a drop zone
  //it returns `collectedProps` and a `drop` function
  const [collectedProps, drop] = useDrop({
    //collectedProps is an object containing collected properties from the collect function

    //`accept` is very important. It determines what items are allowed to be dropped inside it
    //this corresponds with the useDrag `type` value we'll see in a bit.
    accept: "dnd-character",

    //here's that collect function!
    //Usually the info we want out of `collect()` comes from the `monitor` object
    //react- dnd gives us. We can use `monitor` to know things about the state of dnd,
    //like isDragging, clientOffset, etc.
    //If we we want to expose this data outside of the hook and use in other places, we
    //should return it as a part of the `collect(monitor)` function.
    collect(monitor) {
      return {
        handlerId: monitor.getHandlerId()
        // Example: maybe you want `isOver: monitor.isOver()` for dynamic styles
      };
    },

    //`hover` gets called by react-dnd when an `accept`ed draggable item is hovering
    //over the drop zone. There is a decent amount of vanilla js that is required to
    //make the reorder ui work:
    hover(item, monitor) {
      if (!ref.current) {
        return;
      }
      const dragIndex = item.index;
      const hoverIndex = index;
      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return;
      }
      // Determine rectangle on screen
      const hoverBoundingRect = ref.current?.getBoundingClientRect();
      // Get vertical middle
      const hoverMiddleY =
        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
      // Determine mouse position
      const clientOffset = monitor.getClientOffset();
      // Get pixels to the top
      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
      // Only perform the move when the mouse has crossed half of the items height
      // When dragging downwards, only move when the cursor is below 50%
      // When dragging upwards, only move when the cursor is above 50%

      // Dragging downwards
      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
        return;
      }
      // Dragging upwards
      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
        return;
      }
      // Time to actually perform the action
      moveRow(dragIndex, hoverIndex);
      item.index = hoverIndex;
    }
  });

  //useDrag allows us to interact with the drag source
  const [collectedDragProps, drag, preview] = useDrag({
    //here's that `type` that corresponds with `accept`. These two have to align.
    type: "dnd-character",
    //`item` describes the item being dragged. It's called by react-dnd when drag begins.
    //`item` gets passed into hover and we use that data there
    item: () => {
      return { id, index };
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    })
  });

  //Here's an example of how we use `collectedProps`.
  //I'm using bgColor instead of opacity to demonstrate the difference between the item
  //being dragged and the preview, meaning the element in dragging state. isDragging affects
  //the actual dragged element, not the preview.
  //*Note: if we want to change the preview we would want to use a custom drag layer and render a preview component
  const bgColor = collectedDragProps.isDragging ? "gray" : "";

  //in the return statement, we assign the ref to be the value of the div

  //Join the two refs together. This is a shorthand that allows us to create
  //a drop zone around our draggables in one line.
  drag(drop(ref));

  return (
    <div
      //here's that ref
      ref={ref}
      style={{
        border: "1px dotted",
        width: "50%",
        padding: "2px 12px",
        backgroundColor: bgColor
      }}
      data-handler-id={collectedProps.handlerId}
    >
      <p>{`Class: ${classType}`}</p>
      <p>{`Race: ${race}`}</p>
    </div>
  );
}

A couple of gotchas on the above code that are worth reiterating:

There is a difference between the preview and the draggable item we've given to the ref. The preview is what shows up when you start dragging. The draggable item is what actually moves when we reorder. If we want to interact with the preview we often do this with a 'Custom Drag Layer'. We aren't going over that in detail here, but we'll cover it in the advanced example.
Remember a few paragraphs ago when we said typically a drop zone's useDrag is separated from the draggable item component? Take a look at line 98, drag(drop(ref)); . Since our draggables are always going to be inside of a corresponding drop zone, react-dnd gives us a shorthand that says 'go ahead and combine the refs' so we just pass the combined ref to the containing draggable element we return in the Draggable.

There we have it. Our feature now has drag and drop.

Stay hydrated out there

Deploy / Host your React App with cPanel in Under 5 Minutes

crishanks — Fri, 09 Aug 2019 20:04:22 +0000

Stay hydrated out there

Diving Right In

While working on a personal project called Punchstarter, a Kickstarter clone app, I struggled to find any good documentation on how to host a custom app on my own domain with cPanel. I hope this will serve useful to many.

1. Purchase a Domain and Hosting

To host a website, you'll need to purchase a registered domain name and a hosting plan from a hosting provider (both provided through numerous sources like Namecheap or Godaddy). If you buy them together, these providers will typically point the domain to your hosting server automatically. If not, this tutorial can help you out.

2. Add the Homepage to your package.json File

Next, open up your React App. Open up your package.json file and add a "homepage" attribute like so:

The format should be "homepage": "http://yourdomainname.whatever"

3. Create the `build` File

In your application's root directory, run yarn install to install the updated dependencies. Once this has finished, the next command you'll run is yarn build (npm install and npm build work, too).

You'll notice this creates a new directory in your project called build. The build folder is essentially a super-compressed version of your program that has everything your browser needs to identify and run your app.

4. Connect to cPanel

Let's head over to your hosting provider (Namecheap, Godaddy, Bluehost etc.). Once you've logged in, navigate to the cPanel manager for your domain. Typically there is a dropdown menu of some kind that says "Manage" which will direct you to cPanel.

Your cPanel manager should look something like this:

Navigate into the File Manager. There you'll find a dropdown list of directories. The one we're interested in is public_html. Open that up.

5. Add the Build File Contents to `public_html`

Navigate to the build file in your app's root directory. Open it up and select all the contents inside the build file. If you upload the entire build file itself, the process will not work.

Once you've copied all the contents inside the build file, upload them into public_html.

6. Create and Upload the `.htaccess` File

In order for the routes to work in your React app, you need to add a .htaccess file. In the public_html folder, at the same level as the build file contents, add a new file and name it .htaccess.

Edit the file and insert the following boilerplate information:



<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

Save the file.

You're Super Done.

Stay hydrated out there

That's it! Navigate to your domain address in the browser and you should see your fully functioning web app.

But you know what else is nice... A shiny new mechanical keyboard. Click that if you're interested in a good one. Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

A Note on FileZilla

I know a lot of folks like to use FileZilla to deploy and host their custom web apps. I found it to be unnecessary for my purposes, but should you choose, you can:

Download and run FileZilla
Grab your domain's ip address -- or ask your hosting provider
Input the domain ip, cPanel login, cPanel username, and host port (i.e. 21. Your hosting provider should provide that info for you) into the top bar
Click QuickConnect
Once connected, navigate to, select, and copy the contents inside the build file (in the left-side pane showing your computer's directories)
Navigate to the public_html directory in the cPanel pane on the right-hand side. Paste the contents of the build file into public_html
Create the .htaccess file with the same information listed above

It Isn't Magic, It's Webpack.

crishanks — Sun, 07 Jul 2019 03:18:58 +0000

Stay hydrated out there

Bundlers

Maybe a better title for this post would have been "It Isn't Magic, It's Webpack (or Browserify, Brunch or Parcel, etc.)." These are known as module bundlers, which have been defined as packages of code that "compile small pieces of code into something larger and more complex that can run in a web browser." In essence, this will package all of your stylesheets into one package, your TypeScript into another, all of your JavaScript files into yet another, etc.

Module bundlers essentially figure out which bits of code depend on other bits of code (in other words, bundlers identify dependencies) and make sure code runs in the order it needs to. Bundlers ultimately create a dependency graph, starting with a root (which has no dependencies) wherein the further down the graph a bundle of code falls, the more dependencies it has. Further-down code waits its turn for its dependencies to load first before it is loaded itself.

So, What Is Webpack?

Even in simple applications, we write a lot of code in a lot of separate files. We use syntax like @import and ES6. We use helpers like TypeScript to which allow us to write clearer code and catch errors sooner. Think of applications built with component-based libraries and frameworks like React where we import components or functions that depend on code written somewhere else in our application. The way our code is parsed, packaged, and executed in a way our browsers can understand can seem like nothing short of magic. But it isn't. It's a bundler called Webpack.

What makes Webpack stand out, though, is its ability to gather all dependencies including not just code, but assets such as images, stylesheets (including preprocessors like sass, typescript and more and create the beforementioned dependency graph. And that's the key -- the heart of Webpack is building the dependency graph.

Building the Dependency Graph

The dependency graph consists of a few key components. Here I'll focus on: Entry, Output, Loaders, and Plugins. One can run yarn add webpack webpack-dev-server --save-dev and create a webpack.config.js file to your app's root directory to get started. Don't forget to update your package.json scripts:

"start": "webpack-dev-server", "build": "webpack"

1. Establish an Entry Point

The first thing Webpack does is establish an entry point. This is going to be the root of the dependency graph. We can do this by creating a variable containing an object which points to the source file. This is typically going to be index.js. You can create the object with a simple string, but for scalability and the possibility of a need for multiple entry points, let's use an object.

Simple enough.

2. Establish an Output

Once Webpack has finished bundling code and creating the dependency tree, it needs to be told where to put the finished product; This is our Output. Remember, you can name the filename parameter whatever you'd like. Typically this will be named something like main.js.

Interestingly enough, this is the base information the application needs to bundle code. With this, you can spin up your local server with yarn start and Webpack will begin doing its thing.

3. Loaders: Bundling File Types Beyond JavaScript

This is where Webpack starts getting so cool.

Here's a screen grab of some imports from the index.js file of a recent React project of mine called Squad.

It's something we do 100 times a day. But what's really happening behind the scenes? We're telling Webpack about the dependencies index.js needs. For example, the line import ./index.css tells Webpack to grab those styles.

In our webpack.config.js file, we add a module object like the example below (see webpack concepts, loaders).

This object uses a Regular Expression to identify certain file types and then tells Webpack which loader to use before bundling. We're saying, "Webpack compiler when you find a path that ends with .css in an import, transform/load them using the css-loader and style-loader when you bundle."

Important note: "Transforming" means parsing files (other than .js files), and translating it into something else that Webpack and the browser can understand.

A few examples:

Have you ever used @import or syntax like url('./icon.png') in your CSS files? Webpack's css-loader is the reason why! It parses your .css file and processes it. That is why you can import Icon from ./icon.png; and later element.appendChild(Icon)! As stated in the Webpack Documentation, "The loader will recognize this is a local file, and replace the ./icon.png path with the final path to the image in your output directory. The html-loader handles <img src="./icon.png" /> in the same manner." Isn't that so cool?
TypeScript is a superset of JavaScript that (among other things) allows JS devs to write more statically-typed code to catch errors while writing code. But Webpack doesn't speak TypeScript. The ts-loader parses TypeScript files and converts them into JavaScript Webpack can read.
What about any ES6 syntax like classes, let or const variables, arrow functions, default values, destructuring, etc? babel-loader parses the code you wrote, identifies ES6 syntax, and loads and transpiles it to ES5 the browser understands.

You can learn more about how loaders work under the hood, and even how to write your own loaders here.

4. Plugins vs. Loaders

Loaders

Work on a file level
Help create the bundle (during or before bundle generation)

Plugins

Work on a system level
Affect the created bundle (bundle or chunk level)
Focus on optimization (uglifyJS takes the bundle.js and minimizes it to decrease file size)

The code implementation looks something like this:

The following graphic may help visualize the difference as well:

Summary

Webpack is the culprit behind much of the magical secret sauce that allows us to use syntax and libraries that makes code cleaner, clearer, more scalable. From imports to ES6, developing apps would be difficult without bundlers like Webpack.

Stay hydrated out there

You know what's nice... A shiny new mechanical keyboard. Click that if you're interested in a good one. Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

5 Steps to Use OAuth in Your App

crishanks — Mon, 22 Apr 2019 16:06:25 +0000

Stay hydrated out there

What is OAuth?

OAuth allows developers to create ultra curated content for specific users. It essentially allows users to grant your application limited permission to access specific, allowed features from another application like Spotify, Facebook Instagram and more. So, developers can work with features and content a user has already curated for his or herself. Searchmicroservices said it, "allows an end user's account information to be used by third-party services, such as Facebook, without exposing the user's password."

You have seen this before. Dating app X would like to access your Instagram images. Music Streaming App Y would like to access your Facebook profile information. The list goes on.

What makes OAuth so interesting, in my opinion, is its ability to curate personalized content which is much more likely to be valuable to a user. Why? With OAuth, the user opts in to let our app integrate certain features of another app they're already using, which we can assume is already providing them with a great deal of value.

Why Use OAuth?

Imagine an app that helps users create a collage of pictures with friends, and automatically sends those pictures to them on their birthday. Wouldn't it be great if within our app the user had instant access to lists of images with tagged friends without having to open another app? Wouldn't it be cool if they didn't have to leave our app, sort through their posted pictures, manually find those tagged pictures and somehow import them for every friend on every birthday? In this hypothetical example, OAuth would be the portal allowing us to access users' photos and tags (something they already probably care about quite a bit) so we can do all that for them.

Using OAuth in Your App

In this example, Jason Basuil and I connected to the Spotify public API to create MetroBeat, an app that gamifies playlist making by guessing the tempo (BPM) of songs served to them.

There are 3 main players in OAuth: The User (Stacy), the Consumer (MetroBeat), and the Service Provider (Spotify).

Step 1 -- Get a Client ID and Client Secret

Set up an account through Spotify Developer. The walkthrough is straightforward. They will give you a client ID and Client Secret. Make sure to never reveal these to anyone! You will need to include these in the initial request to Spotify in order to gain an access token and make requests (I'll explain in a sec). An initial request is made to Spotify with encoded versions of the Client ID and Secret. More details on how you can encode info in Rails.

Step 2 --Verify the Consumer Identity to the Service Provider

We set up MetroBeat to redirect to get '/login', to: "auth#spotify_request" first thing. #spotify_request makes that initial request to Spotify with the Client ID and Secret, verifying it's us, we know each other, and suggesting we should get together for brunch sometime. This redirects Stacy to a prompt that asks if she's cool to allow MetroBeat to access her Spotify account.

This code makes a request to Spotify and contains a redirect to our get '/user', to: "users#create". You'll also notice the body of this request specifies which permissions (scope) we need Stacy to agree to. You can add as many or as few as you need. Best practice requires we not to add any that aren't essential. When Stacy says it's all good, she gets created as a User and is assigned an access token.

Step 3 -- Create the User and Assign Her an Access Token

Since we made that initial request, we'll get some params back in Spotify's response. We'll need to grab the params[:code] from that and include it in our request body, along with the client ID and Secret. We'll make a few more requests to Spotify for a Refresh token and an Access token.

The Consumer (MetroBeat) needs to remind the Service Provider (Spotify) that it's us every time we make a request to Stacy's Spotify info via the Spotify API. This is done by with an access token.

When Stacy grants MetroBeat permission to access her Spotify account, we'll need to place this access token in every single request to a Spotify API endpoint.
These auth_params will get us back the access and refresh tokens we need to make those requests. The user_params contain profile info from Stacy's Spotify account that we can use to authenticate her and get her logged in (like her username and profile image. We can't see her password).

Then, we can create her as a User and make sure to associate those user and auth params to her in the database so we can use them later.

Spotify's access tokens expire each hour, so we request a new one if Stacy's been playing for about 55 minutes.

Step 4 -- Request User info from Service Provider API

Now we can make some requests and see the data come to life! We can create new playlists and add songs to them, see song analyses including song tempo, top tracks by country and so much more.

In order to attach these requests to components and event listeners, we'll move to our ReactJS front end.

users[1] was hard-coded in some areas initially, only for testing purposes

We made other requests (to get song analysis info, for instance) but the sky's the limit. You'll need to pay close attention to the Service Provider's request formatting. The headers and body for each request type will need to match their requirements.

Step 5 -- Implement Requests in React Components

All that's left to do now is determine when and where to display the info we get back from our requests. Make sure you keep asynchronous programming in mind when planning your requests. You'll need that user info and access token back first before you can make other requests.

Conclusion

OAuth is a super interesting and secure technology that can help you create convenient, curated, tailored content that actually matters to users. The User, Consumer and Service Provider work closely through the entire process, passing access tokens and other vital info back and forth to verify your app and allow you to access a User's info through the Service Provider. Using Rails and React are a great way to make these requests and create a user experience all your own.

Stay hydrated out there

But you know what else is nice... A shiny new mechanical keyboard.
Click that if you're interested in a good one.

Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

How to Write A Programming Language

crishanks — Mon, 08 Apr 2019 17:01:11 +0000

Stay hydrated out there

Under the Hood

Have you ever found yourself writing code and wondering exactly what is going on under the hood? How does programming really work? In an attempt to peel back at least one of the curtains, Jessica Betts and I created our own Esoteric Programming Language based on Lord of the Rings lore called My_Precious. There are many different approaches to creating a programming language.

What is an Esoteric Programming Language?

Esolangs.org defines an Esoteric Programming Language as, “A computer programming language designed to experiment with weird ideas, to be hard to program in, or as a joke, rather than for practical use."

Examples include Kaiser Ruby and $:

Esoteric programming languages are essentially a new, creative way of writing code that is designed to be interesting rather than intuitive, efficient or especially functional.

My_Precious

My_Precious is a gem that uses the English language and Lord of the Rings keywords written in what we defined as a .precious file which is then translated into actual usable Ruby code.

My_Precious is a gem in which users are able to:

Generate a .precious file using LOTR lore keywords
Translate code written in the .precious file and output it to a .rb file
Delete files

How it Works

My_Precious essentially works like this:

The User creates a test file
The test file is passed into a Run file
The Run file opens the test file and passes it to the Parser
The Parser combes through each line of code and translates it to Ruby
The Parser returns translated code to the Run file
The Run file writes the code to the Output file

The Planning Phase

When starting out, it's important to find something you're passionate about. Why do you want to create an Esoteric Programming Language? Do you want to poke fun at a specific aspect of coding? Do you think there's a better way to do something? Do you want to challenge yourself and create something technical? We wanted to make something fun that would reinforce current Ruby knowledge and expand our understanding of how programming languages really work.

Next, choose a domain whose size fits your purpose. My_Precious needed to be large enough to work with English but niche enough to have well-known and memorable keywords. (Some minimalistic language have as few as 8 characters). So, we chose the Lord of the Rings.

Lastly, decide the scope of your project. Are you interpreting the language or translating it? We chose to translate to Ruby. It was more familiar and slightly less complex.

Creating the Language

Parser

The Parser is the heart of My_Precious; the most important file. In the Parser, we define keywords or characters that will be mapped to programming functionality. For example, Precious is the keyword for true. You shall not pass is the keyword for end used in loops, conditionals, function declarations, etc.

The Parser parses through each line of written code, holds on to established keywords, and outputs them to a .rb file. In essence, it's our translator.

Run File

To separate functionality, we created a Run file. Its job is to check for the .precious extension, open a .precious file, pass the file to the Parser, grab the returned translation, and write the translation to a .rb file. The Parser file should only have to worry about parsing.

Test File

The Test file is a .precious file in which to write My_Precious code. It's used to make sure the Parser is correctly translating your code into Ruby. It tests each keyword defined in the Parser.

Output File

This is a .rb file to which the translation will be written. You compare the results here against the inputs in the Test file.

Publish Your Language

Ruby Gems are open source and widely used. We chose to make My_Precious a downloadable gem so anyone could contribute to it, and more easily download and use it right away.

The Interface

How do you want users to interact with your language? We chose to use a Command Line Interface (CLI). CLIs are great tools which allow users to type commands into the terminal. A CLI makes My_Precious more intuitive and user-friendly, allows flexibility (users can name their own input and output files), and made it easy for us to implement clean error handling including output error messages and instructions.

Have Fun, Precious!

Creating an Esoteric Programming Language can be daunting at times. Remember to choose a domain that you can sincerely get behind, something you're passionate about. Go one operation at a time and celebrate those wins.

Stay hydrated out there

Be sure to download My_Precious and give it a try.

Check out the Documentation as well!

Making this was really fun

But you know what else is fun... A shiny new mechanical keyboard. Click that if you're interested in a good one. Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

Classical vs. Prototypal Inheritance

crishanks — Mon, 25 Mar 2019 20:18:58 +0000

Stay hydrated out there

Object Orientation

Objects are abstractions (or described representations) of physical things with which we interact in the real world. Some real-world things are much more alike than others. A boot, for example, has much more in common with a slipper than it does with a tree. It wouldn't be out of the ordinary to refer to either as a Shoe. Without hardly knowing it, we make these mental organizations all the time.

The purpose of Object-Oriented Programming is to mimic these real-world categories as closely as possible. As important as it is to recognize the similarities between objects, we must also realize their differences. Let's take our Shoe example a step farther.

Let's discuss what properties and behaviors shoes have in common: a size, a color, and a material. We can change a shoe's color or a shoe can wear down.

Just as we do in reality we can categorize all Shoes by what they have in common, and create an endless amount of individual Shoe copies that inherit all the characteristics that all shoes have, but with their own unique characteristics as well.

In this case Shoe is known as a Generalization; in other words the more general, less specific description of a real-world item.

Classical Inheritance

In Classical Inheritance, Objects are still abstractions of real world 'things', but we can only refer to Objects through Classes. Classes are a Generalization of an object. In other words, Classes are an abstraction of an object of a real world thing. (Classes, then, are an abstraction of an abstraction of a real-world thing). Since a Class is yet another reference to (or abstraction of) its predecessor, each descendant child Class increases the level of abstraction, thus increasing the level of generalization.

Prototypal Inheritance

As opposed to Classical Inheritance, Prototypal Inheritance does not deal with increasing layers of abstraction. An Object is either an abstraction of a real-world thing, same as before, or is a direct copy of another Object (in other words, a Prototype). Objects can be created from thin air, or they can be created from other objects:

This is important! It means that Generalizations (like the overarching Shoe concept) are just other Objects. With Classical Inheritance, Generalizations are abstractions of abstractions of abstractions... all the way down to the most recent descendant.

The abstraction level here is never deeper than 1; The only abstraction that occurs with Prototypal Inheritance is the abstraction away from real-world things.

Prototypal Inheritance includes some key advantages over Classical Inheritance:

The Mechanics of Prototypal Inheritance

The Constructor

In JavaScript, all Objects have a Constructor. And in JavaScript classes, we use the Constructor function to create and instantiate new Objects within a class. Each class can only have one constructor. In the example above, we instantiate each Shoe Object with characteristics that all Shoe Objects share (all Shoes have a size, color, and material).

You can take a more in-depth look into Constructors (how to view an Object's class, how to change a class, etc.) on MDN.

New Operator

According to MDN docs the New operator performs the following actions:

Creates a blank, plain JavaScript object;
Links (sets the constructor of) this object to another object;
Passes the newly created object from Step 1 as the this context;
Returns this if the function doesn't return its own object.

In order to instantiate a Prototype of a JS class, we use the keyword new. In the example above, we define the name of the new Object let slipper and create it with new. We then pass in the parameters defined in the constructor of the Shoe class. These new Object instantiations are known as types. You can then access any of the Object properties by calling, for example, slipper.size or slipper.color.

Conclusion

The differences between Classical and Prototypical Inheritance can get pretty complex quickly. If you wish to study these concepts on a much deeper level, you might try "Why Prototypical Inheritance Matters" by Aadit M Shah.

Stay hydrated out there

I hope this was helpful

But you know what else is helpful... A shiny new mechanical keyboard.
Click that if you're interested in a good one.

Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

HTML & CSS - Find Your Inner Dev With Divs

crishanks — Sun, 10 Mar 2019 03:20:19 +0000

Channeling Your Inner Dev

"If you like CSS, you're probably a Front End Dev." It's a phrase that's been floating around campus a lot since delving into Full Stack frameworks like Ruby on Rails.

As I experiment with new technologies, I discover more about the type of Developer I want to be. It's doubtless one of the most exhilarating and daunting aspects of being a student of Tech. As a curious Developer who deeply cares about user experience, I decided to "div" into a little CSS myself.

The Project

Turns out, you can whip up a pretty nifty static site with some vanilla HTML and CSS. The following example was made with a single index.html and style.css file. I thought it might be fun to make a shout out to an old site some of you may remember:

Setup

Set up an index.html file like you would with any other project.
Create a style.css file in the same directory. In order to link the CSS stylesheet, you'll need to link to it via link tag in the header section your index.html file (line 7 below).

As with all great amigos, your HTML will now listen and respond to the styles in your CSS file.

Organize HTML with Divs

In index.html, you'll be essentially telling your browser what info you want to be displayed. Sometimes web pages display a lot of information, and if we don't keep it organized it will be nearly impossible for your CSS to accurately identify where each HTML element should live, what it should look like and even what it should do.

Enter the div tag. Divs look like this: <div></div>. They're essentially containers for sections of HTML code you want to live together and behave similarly. We often nest divs, so child divs (divs inside other divs) can inherit qualities from outer parent divs but also be assigned unique qualities.

Check out lines 13-15. I have a lot of unique sidebar content, but I wanted all the elements in the sidebar to be contained in the same area. So, I nested the divs together.

Selectors & Specificity

Inside those div tags above, you'll notice I've added class='sidebar' and id='sidebar_content'. The style.css file will have corresponding syntax, .sidebar and #sidebar-content. These are knows as selectors. They're the way your CSS tells your HTML which pieces of information to style.

Selecters allow us to get nit-picky. If I want to select all the images in the sidebar, I can use .sidebar img. Pretty cool. But what if I want to select just a specific element (image, paragraph, list item, etc.) in the sidebar section? Selectors follow a rule of Specificity, meaning certain types of tags carry a higher weight than others. Chained together Selectors combine scores and the highest Specificity score wins.

Specificity is calculated like this:

Elements (<h1>, <p>, <img>, etc.): 1 point
Classes (signified with a .): 10 points
IDs (signified with a #): 100 points

Note that the universal * selects everything regardless of score. We try to use it rarely.

Let's take a look at an example:

Can you calculate the Specificities? Since the .hero-text Class selector is worth 10 points and the h3 Element selector is worth 1, the .hero-text h3 selector (11 points) gets specific styling unique from anything else in the .hero-text div. For additional practice, W3 Schools has some great info.

And I Don't Even Need JS?

CSS Selectors allow us to get pretty tricky. We can use Selectors called Pseudo Classes that tell our HTML when to make an element look a certain way. We can specify actions like :visited, :hover, :active, :lang and more. Take the hovers and clicks we saw on the buttons and links. By using the following selectors, our CSS is able to tell our HTML to change color or even background on hover and on click.

Using Pseudo Classes, I'm even able to get the images in the blog content to expand when my mouse hovers over it.

Conclusion

For anyone wondering whether or not Front End Web Development is their cup of tea, I suggest taking a day to dive into a personal CSS project.

Web design is creative, artistic and fun. It can also be very tricky and frustrating. After struggling with CSS on my first project, I gained a huge appreciation for great-looking web apps. I feel a sense of responsibility to make the internet look clean and interesting, and operate smoothly. I think it's likely you will too.

Prevent SQL Injections

crishanks — Wed, 27 Feb 2019 00:13:54 +0000

Stay hydrated out there

Protect Your Data from Malicious User Input

It's the year 3019 and, naturally, all athletes are robots. You've programmed each robo-player to receive instructions from a coach in order to carry out carefully choreographed plays.

One example might look like this:

Player (coach input) do (coach input). Player (coach input) then do (coach input).

For example: Player 12, pass to Player _6. Player 6, __run pattern 4 _.

But bad news. Coach is upset because his players malfunctioned and didn't pour yellow sports drink all over him after last week's big win! Disgruntled, he inputs the following instructions into your program:

Player 8, turn around and dropkick the ball into the rafters. Players 7, 3, 4, and 12, go to the locker room and think about what you've done.

Since the robo-players weren't protected against these inputs, they carried them out! Now you and the entire coaching staff have been fired and no one gets covered with any colored sports drink.

What is a SQL Injection?

SQL (structured query language) is a special programming language used to communicate with a database and tell it what to do. SQL can be used to tell a database to Create, Read, Update and Destroy data (CRUD). When a user enters an SQL command into input fields (such as typical login info like username, password, email, etc.), it will be read by your program and carry out exactly what you've programmed it to do. If left unprotected, your program interacts with that pernicious input and mistakenly allows it to send unintended commands to the database.

Those Pesky Hackers

Let's look at an example. Coach is not pleased about his recent career status, and depression has made it nearly impossible for him to keep it 100 on his Friends fanblog. Three weeks and 15 pounds later, he looks to the National Robo Sports League (NRSL) for revenge.

Coach knows the NRSL website login page has a simple input field for a User Id. The code is set up to take in that string and assign it to a variable, which will then be used to run a simple SQL query. It might look something like this:

The user input string is 105 OR 1=1, which will always be true. Guess what? Coach just got all data in all columns for every user! That could mean passwords, credit card info, and other private information.

Let's take a look at another example.

Until the feds show up, Coach is ballin'. But his lust for revenge is as volatile as a Rachel - Ross romance. He logs back on the the NRSL website and checks out that user input field. This time his input looks something like this:

Since they weren't protected against his SQL injection, no one gets to be a coach in the NRSL!

How Bad Could it Be?

Despite its discovery over 15 years ago, SQL injections are still one of the most prevalent threats to websites and apps. Recently, Motherboard reported cybercriminals were able to use SQL Injections to log in to Fortnite, one of the most popular video games of our time, and take over any player's account. Rogue Media Labs discovered hackers gained access to hundreds of customer passports. These are only a few recent examples. Unprotected, anyone who tries to input data into your program can (intentionally or not) bypass protected fields such as passwords to access private info (credit card numbers, email addresses, etc.), change data as it exists in the database, drop tables or even gain control over your entire system. As we learned in our future sports analogy, SQL injections can ask our programs to carry out embarrassing and harmful commands with serious consequences.

Protect Against SQL Injections

There are a few ways we can protect ourselves against vengeful coaches and other hackers using SQL injections.

Using SQL Parameters allow us to use a '?' and pass in a parameter instead of using string concatenation.

Screenshots from hacksplaining.com

Provided ActiveRecord methods are pre-built with protected code. Use methods like 'find_or_create_by' instead of SQL queries like 'where'.
Sanitize your strings. In other words, inputs like '1=1' for a username seem pretty suspicious... We can run logic that checks and rejects weird inputs. For example, use a regex to match for email inputs. Make sure the alphanumerical field inputs don't contain any symbols. Take out any whitespace. There are even cool gems like sanitize that can help.

SQL injections are not going away any time soon. And neither are disgruntled coaches. Be smart, use protection.

I hope this was helpful

But you know what else is helpful... A shiny new mechanical keyboard.
Click that if you're interested in a good one.

Or click this for another cool option.

Or perhaps you have a good one and you want to spruce it up a bit (you know I did).

DEV Community: crishanks

Drag & Drop: Reorder Lists with react-dnd

Drag & Drop with react-dnd

Demo

Diving In

Deploy / Host your React App with cPanel in Under 5 Minutes

Diving Right In

1. Purchase a Domain and Hosting

2. Add the Homepage to your package.json File

3. Create the build File

4. Connect to cPanel

5. Add the Build File Contents to public_html

6. Create and Upload the .htaccess File

You're Super Done.

A Note on FileZilla

It Isn't Magic, It's Webpack.

Bundlers

So, What Is Webpack?

Building the Dependency Graph

1. Establish an Entry Point

2. Establish an Output

3. Loaders: Bundling File Types Beyond JavaScript

4. Plugins vs. Loaders

Summary

5 Steps to Use OAuth in Your App

What is OAuth?

Why Use OAuth?

Using OAuth in Your App

Step 1 -- Get a Client ID and Client Secret

Step 2 --Verify the Consumer Identity to the Service Provider

Step 3 -- Create the User and Assign Her an Access Token

Step 4 -- Request User info from Service Provider API

users[1] was hard-coded in some areas initially, only for testing purposes

Step 5 -- Implement Requests in React Components

Conclusion

How to Write A Programming Language

Under the Hood

What is an Esoteric Programming Language?

My_Precious

How it Works

The Planning Phase

Creating the Language

Parser

Run File

Test File

Output File

Publish Your Language

The Interface

Have Fun, Precious!

Making this was really fun

Classical vs. Prototypal Inheritance

Object Orientation

Classical Inheritance

Prototypal Inheritance

The Mechanics of Prototypal Inheritance

The Constructor

New Operator

Conclusion

I hope this was helpful

HTML & CSS - Find Your Inner Dev With Divs

Channeling Your Inner Dev

The Project

Setup

Organize HTML with Divs

Selectors & Specificity

And I Don't Even Need JS?

Conclusion

Prevent SQL Injections

Protect Your Data from Malicious User Input

What is a SQL Injection?

Those Pesky Hackers

How Bad Could it Be?

Protect Against SQL Injections

Screenshots from hacksplaining.com

3. Create the `build` File

5. Add the Build File Contents to `public_html`

6. Create and Upload the `.htaccess` File