DEV Community: Shanley Elizabeth

Talk Nerdy To Me: An Artist's Quick Guide to Programming Terminology

Shanley Elizabeth — Thu, 10 Aug 2023 04:19:44 +0000

Coming from a non-computer science background and getting into programming, there are a ton of terms thrown around that we are expected to know seemingly inherently. Now, I've come to understand that being lost in the sauce is just a part of daily life as a programmer and that, contrary to what all of the condescending people on StackOverflow think, no one knows it all (and if they say they do they're lying to you!). And while I've gotten really good at smiling and nodding along while secretly chat GPT-ing definitions under the table, I figured I might as well share my little terminology cheat sheet so that you can maybe save yourself some time. So if you're feeling like a fish out of water, here is a just a brief BRIEF (did I mention brief?) quick start guide to just a few programming terms so you can talk nerdy:

1 - Wireframe:
It is literally just a basic frame of what a website will LOOK like to a user. It's not a component tree, and it's not your domain model. You can make this on Microsoft Paint if you want to. I'm talking circles and squares. Okay maybe don't make it in Microsoft Paint if you want to look professional... Use Balsamiq, Figma, or even Jamboard in the Google workspace. There are probably some VS Code extensions too. Go Wild!

2 - Iterating Methods
An iteration method is just a cute little process that we can do in many different languages that lets us cycle through a bunch of stuff and do something to each one of those things. Think of an array of all of your exes:

const exes = ['Tommy', 'Chris', 'Brad', 'Chad']

Let's say you wanna iterate through this array (or list in Python!) and punch every one of your exes individually in the face. We can't punch the exes all at once; after all, we only have two hands! So we have to create a loop that goes to each ex one by one and sucker punches them right in their nose. Some examples of loops:

the classic Javascript for loop:

for (let i = 0; i < exes.length; i++) {
    punch(exes[i]);
}

forEach:

exes.forEach(function(ex) {
    punch(ex);
})

map:

const brokenNosedExes = exes.map(function(ex) {
    return punch(ex);
})

(Quick side note for this example here, map produces a new array with each ex potentially transformed by our punch function. forEach does NOT inherently produce a new array or change the original array of exes, but the items in the array might be altered if the function we give it does so (like punch here)

list comprehension in Python


def punch(ex):
    return f"{ex} says 'Ouch!'"

reactions = [punch(ex) for ex in exes]

print(reactions)

3 - Framework
A framework in software development is a pre-prepared toolkit of standardized, pre-written code. They provide a foundation on which software developers can build applications for a specific platform or type of application. Think of building a website like you're building a house. You can lay the foundation, put up the wooden frame, install the plumbing, lay the bricks with the grey stuff that goes in between them all by yourself (can you tell I don't know anything about construction) OR you could just use a prebuilt frame of a house that maybe has all of that plus the toilet already installed for you! The prebuilt-toilet-house is like a framework. Some examples of some popular frameworks are React, Django, Angular, Vue, and Flask. They can take a bit of time to learn, but are super time savers later on if you can master them!

4 - Hash
No it's not the super fun stuff that leaves you sleepy and hungry and cry-laughing at the teletubbies theme song at 1 pm on a Tuesday! Hashes are like a magical little organizer of data. Let's use another dating analogy: For each person you date, you know how you create a little nickname for them that acts as a shorthand code for their entire life story? Here's how this analogy works for Hash's:

Consistent Output Size: No matter how intricate or simple their life story, whether they've traveled the world or never left their hometown, the nickname is always, say, exactly two words long. "Crunchwrap Supreme" for Nick who loves Crunchwrap Supremes, "Golf Guy" for the semi-pro golfer, and "TikTok Girl" for the girl you met on TikTok.

Sensitivity to Input Changes: If "Crunchwrap Supreme" Nick suddenly tells you he's now more into Quesaritos, even that slight preference change would result in a totally new two-word nickname, like "Quesarito Nick".

Speed: These nicknames are quickly made. As soon as you hear a story, bam, you've got a nickname!

Non-reversibility: Here's the catch – if someone only hears the nickname, they can't deduce the entire backstory or even significant parts of it. "TikTok Girl" doesn't tell a third person if you met at a TikTok event, through a specific video, or if she's actually a famous TikToker.

These nicknames are like hashes. They provide a consistent, quick, and unique representation of data. But just like you can't know the whole story from the nickname, you can't get the original data back from its hash.

5 - Algorithms
I like to think of algorithms as digital recipes. They're well-defined, step-by-step procedures or sets of instructions crafted to perform specific tasks or solve particular problems. Let's use making a pizza as an analogy. You have the ingredients that you input into the process of cooking and then as your output you get a yummy pizza. However not all pizza recipes, or algorithms, are created equal. You could have a Lunchables pizza or a homemade-sourdough-made-from scratch-and-sun-dried-tomato-sauce-from-the-tomatoes-grown-in-your-garden pizza and they are technically (don't come for me pizza snobs) both pizzas. Meaning they both output the same thing. But one is significantly faster and takes up less space in your pantry (the Lunchable) than the other (the Gourmet pizza). The point? While there are multiple ways (algorithms) to achieve an outcome (like a pizza), not all methods are created equal. Some are faster, some are more resource-intensive, and choosing the right one for the job is crucial in the world of programming and for GETTING a job in the world of programming.

This is only a brief guide into the world of web development terminology. I hope this cleared up a few terms that I personally struggled to wrap my head around when I first started. Good luck out there my little baby hackers!

Lamb-Duh

Shanley Elizabeth — Mon, 24 Jul 2023 13:54:59 +0000

The Lambda Function: Just as simple as it sounds!

If you're a beginner programmer like me, you may have heard the term "lambda" thrown around in python discussions. At first, I was so incredibly confused on what the heck a lambda function was doing. However, fear not! In this blog post, I'll break down the concept of lambda in a way that helped me understand, so you can grasp its significance and how it can be used in your coding journey.

In programming, a lambda function is an anonymous function, meaning it lacks a name, that can be defined on-the-fly. Unlike regular functions, you don't need to assign a name to a lambda function before using it. Instead, you create the function right where you need it, making it incredibly useful for certain scenarios. It's like a little spell that we can use whenever we want!

The syntax of a lambda function is relatively straightforward. It typically follows this pattern:

lambda arguments: expression

Here's a simple example to illustrate the point. Let's say we want to create a function that doubles a given number:

Regular Function:

def double(x):
    return x * 2

vs:
Lambda Function:

double_lambda = lambda x: x * 2

As you can see, the lambda function has the same functionality as the regular function, but it's shorter and doesn't require a separate def statement.

But what is the POINT?!? Lambdas are often used in situations where a small, throwaway function is needed. They are commonly used with higher-order functions like map(), filter(), and reduce(). (Higher order meaning the kind of functions that use other functions as arguments.

map():
The map() function applies a given function to all items in an iterable (a list) and returns a new iterable with the results. Here's how a lambda function can be used with

map():

numbers = [1, 2, 3, 4, 5]
squared_numbers = map(lambda x: x**2, numbers)
# Output: [1, 4, 9, 16, 25]

filter():
The filter() function filters elements from an iterable based on a given condition (lambda function) and returns a new iterable with the elements that satisfy the condition:

numbers = [1, 2, 3, 4, 5]
even_numbers = filter(lambda x: x % 2 == 0, numbers)
# Output: [2, 4]

Sorting with sorted():
Lambda functions can also be used to define custom sorting criteria when working with the sorted() function:

names = ['Alice', 'Bob', 'Charlie', 'David']
sorted_names = sorted(names, key=lambda name: len(name))
# Output: ['Bob', 'Alice', 'David', 'Charlie']

I find that using a lambda function during sort() is incredibly useful.

One note about lambda functions is that while they can be incredibly useful and create simplified code, they also have some limitations. One being that lambda functions can only contain one single expression, so you can't use complex expressions with a lambda. Also, because they are a one line anonymous function, they can be a little more difficult to debug. In a big program with lots of lines of code, a small unnamed function can be difficult to parse out as a source of a bug.

I hope this brief introduction to lambda functions proved helpful to you! When using lambda's in higher order functions, your code will be more readable and useful!

What the heck is MUI

Shanley Elizabeth — Fri, 07 Jul 2023 02:27:54 +0000

Material UI is a React library that is created for developers based off of Google's Material Design Guidelines. Basically meaning that Google has made a cute little package for developers using react to automatically create prebuilt components for their web application.

Now if you like to design your own components down to the exact border radius pixel from the ground up.... go awf queen! However if you're like a lot of developers (over 80,000 people have starred it on GitHub!) then you like your prebuilt components because they save you time and sweet sweet keystrokes.

Someone somewhere at Google has designed google's Material Design to be user friendly and very clean and modern. I could write a whole thesis on the usage of Material UI and the many, many uses of it, however, I don't have the space here. So instead I'm going to give you a quick lil overview of just a few components that I personally find helpful to see if Material UI is the component library for you.

First off, to use Material UI you need to install it:
npm:
install npm install @mui/material @emotion/react @emotion/styled

yarn:
yarn add @mui/material @emotion/react @emotion/styled

You can do things like automatically create a wrapper container component that has margins so that your site is not the entire page wide (I added additional styling so you can actually see the container on the page):

import { Container } from "@mui/material";
function App() {
  return (
    <Container sx={{bgcolor: 'blue', height: '100vh', fontSize: '100px'}}>
      Wassup!</Container>
    )
  }

and that looks like this:

One cool thing about Material UI components is that they are responsive by default! So if you move the page larger and smaller, the components will adjust.

You can also import a typography component, which will give you a default font and sizing. You can make it different header size by using the variant prop:

import { Container, Typography } from "@mui/material";
function App() {
  return (
    <Container sx={{bgcolor: 'blue', height: '100vh'}}>
      <Typography variant='h1'>Wassup</Typography>
    </Container>
    )
  }

Resulting in:

SX is material UI's specific style prop. It allows you to do inline styling that is abbreviated (bgcolor for background color, p for padding, m for margin, py for padding top and bottom, or px for padding right and left. This is really just beneficial if you're a fan of inline styling and some people like it because they think it allows them to code quicker. SX also allows you to add hover, focus, before and after styling in line, which is not available with JSX's style prop.

Buttons are another popular Material UI component as well. Here is an example of three different kinds of buttons that Material UI offers:

import { Container, Typography, Button } from "@mui/material";

function App() {
  return (
    <Container sx={{bgcolor: 'white', height: '100vh'}}>
      <Typography variant='h1'>Wassup</Typography>
      <Button variant="text">Text</Button>
      <Button variant="contained">Contained</Button>
      <Button variant="outlined">Outlined</Button>
    </Container>
    )
  }

Looking like this:

Another fun component that Material UI gives us is their Paper component. Material UI's paper component is their version of a Card. It automatically gives us a quick way to elevate the cards off of the page. Here is some example code:

function App() {
  return (
    <div>
      <Typography variant='h1' color="primary">Wassup</Typography>
      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap','& > :not(style)': {
            m: 1,
            width: 128,
            height: 128,
            backgroundColor: 'lightgrey'
            },
}}
      >

      <Paper elevation={0} />
      <Paper />
      <Paper elevation={5} />
      </Box>

  </div>
  )
}

export default App;

Looking like:

Another cool thing about Material UI is that you can create Theme's for your application so the overall design is cohesive with importing ThemeProvider. By specifying a theme, you can control various aspects of your UI, such as colors, typography, spacing, breakpoints, and more. The theme defines a set of predefined values and styles that can be easily accessed and used throughout your application.

Just import ThemeProvider from "@mui/material" in your 'index.js' file. Wrap your App component in your so the entire wrap will have access to it. Then you can import any custom styling that you want to repeat in any component by importing the useTheme hook:

import { useTheme } from '@mui/material/styles';

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

This code block has custom spacing from the theme that we've already established. You can also specify 'primary' and 'secondary' colors that you can easily plop into your code by using sx={{ color = 'primary'}}. Themes may seem like overkill, but you can imagine that in a project with multiple components and files, and multiple engineers working on it, having a common theme may be easier than individually adding classes and styling in CSS.

Material UI also provides you with an interactive them builder that you can use to help see what your site will look like with different themes.

Overall, if you want to code a product quickly and with clean and modern design that is pretty plug and play then material UI is the right fit for you. Especially if you're trying to create a quick prototype or first pass of a project. But if you're looking for something highly customizable and you want to put your finger print on every component, then maybe a DIY code is for you!

Resources:
https://mui.com/material-ui/

There's Something About Forms

Shanley Elizabeth — Mon, 26 Jun 2023 05:28:04 +0000

Forms in React. I don't know how I became so fascinated with programming forms. I wrote a whole blog essay on forms in vanilla Javascript - just to move onto React and realize how much better and cleaner my code could be. So since I've learned more about forms in React, I figured I'd do a little blog about the differences between the two!

In vanilla JavaScript, creating a form involves setting up event listeners and manually managing form submission. But in React, we can take advantage of reusable components and some of React's very handy hooks, like the useState hook. By updating and storing the Form's data in a state variable with useState, we can handle the inputs updated value whenever a change occurs. Which also means, that we can access that data from anywhere in our app by using the state variable that the information is stored in. Previously, in vanilla Javascript, we would have to add event listeners on every input element. Which can become cumbersome. But with React, we can further abstract the form's data into an even more dynamic and simplified code.

Having the inputs update their State with every keystroke allows us the unique ability to add validations to our form. Validations are a way of controlling what kind of information is added into the form's input. They could make sure that you typed your password into the input with the correct format, or frustratingly remind you that your fat fingers accidentally typed "scaswello" instead of "Scaswell" as your username, again.

When submitting a form, React and vanilla Javascript are very similar. In vanilla JS, we find the form, attach an event listener to the form and then prevent default and handle all of the form data manually. With React, we put the onSubmit event handler on the form element and call a function handle the submission, also preventing default on the event object that is passed in as a parameter.
Let me provide an example:

Let's say we have our FormComponent... let's just call it "FormComponent" ... yay creativity!
We establish a base for our state which will be what it is before the user enters their own data:

const initialFormInfo = {
  name: "",
  likes: 0
};

const [formData, setFormData] = useState(initialFormInfo);

We have our function handleChange(creative again!) that handles the "change" of keystroke in each input:

function handleChange(e) {
    setFormData((prevFormData) => {
      return {
        ...prevFormData,
        [e.target.name]: e.target.value,
      };
    });
  }

As long as the input has a name prop, we can target that so that the prop referring to that specific input is populated there. And the value is what the user types into the input. We are making a copy of the previous state of the form data (which is initially empty) and then adding our new info to that object. Reminder that this info being entered is EVERY KEYSTROKE that we are making as a user inputting data. Handle change doesn't actually do anything with this information yet other than track it and update the state variable.

Here we have the function that handles the actual submit of the form:

 function handleSubmit(event) {
    event.preventDefault();
// whatever we want to do with the form information, post, patch, update the state of an array of data to include the new information that you just posted in the form etc.
}

Within the return of the component, on your form and input, this is on way the syntax might look:

<form className="form" onSubmit={handleSubmit}>
      <h2>Add New Item</h2>
      <label >Name</label>
      <input
        type="text"
        id="name"
        name="name"
        value={formData.name}
        onChange={handleChange} />

And tada! There is your React Form!

I think also with React's nature of having separate components for each functionality on a website allows for more organized code in general. Having a separate component specifically for a form makes it easier for someone else to come in and work on updating or editing the form at a later time because it's easier to see where all of the information is flowing to and from.

Overall, React gives us some very powerful tools to make efficient forms for our web applications. It's helps us make cleaner and more dynamic code, as well as allowing us to more easily add validations onto our form to influence the user input data.

Forming Forms in Vanilla JS

Shanley Elizabeth — Sun, 11 Jun 2023 16:04:55 +0000

When I was first learning how to code a form in my bootcamp, I honestly just pattern matched. I would copy exactly what I saw in my class examples and hope that someday I would understand what I was doing. Why was I preventing default? OR calling the event listener on the form instead of on the input? And how does the submit input magically become a button on the page? Where did the term "target" and "value" come from when retrieving the information submitted? These are all things that after a few practice runs and some internet rabbit-holing, I finally figured out.
First of all, this whole prevent default situation comes from an action attribute that is inherent to form elements. This action element specifies which URL you'd like the form data to be submitted to, which, by default, is the current URL on the form's page. When this action attribute is fired it refreshes the current URL (or navigates to whichever URL is specified in the action attribute). If you are just trying to get the info from your form to show up on the page, and you don't add your the preventDefault() method, the page will refresh and your information will disappear from the page. So, to have our information persist on the page, we need to prevent this default action with preventDefault(). There are a few more events that use preventDefault(), but for the sake of this blog, I won't get too far into it!

I was also confused about why we needed to use "target" and "value" in the form submission, instead of just calling the event listener on the input itself. Imagine you have a super long form with many different inputs, then you'd have to call an event listener on every single input inside of that form, as well as an event listeners on the submit button. By calling the event listener on the form itself, it encompasses everything in that form, including the submit button! Way easier. But then we need to get to the individual inputs on the form... that's when "target" comes into play. Since the form now has an event listener added to it, we name the event whatever we want (typically "e" or "event" is standard, but you could use "form" or "submit" or "potato" if you so desired, it doesn't matter). But from that event, we need to target the individual inputs from the form. That's where target comes into play. It is targeting the input where a user is going to put in some sort of value. So now we have e.target, but we need to tell Javascript what we want to target. Here is where we grab the input id and chain it onto our event listener. So now we have: e.target.inputId to grab the whole line of the input BUT how do we grab from that line of input what the user types in? This is where "value" comes into play. We are trying to get the value of the text submitted in the form to post onto the page. So our total line chain to grab the text inputted by a user will then be: e.target.inputId.value. And there we get our user input!

Why do we have an instead of , considering that the submit button IS TECHNICALLY A BUTTON. Technically, you could use both in the same place, but elements with a tag are a lot more customizable, where as tags with the type="submit" are limited in their ability to customize. I think as a beginner, you should stick with using the rather than a button for the ease of use, and how it's built into javascript as a submit button already. Once you get more comfortable with styling buttons, then you can throw a your own customized button in there.
So that's my vanilla JS form submission rabbit-hole! I hope I could clear up any confusion beginners may have with creating a Javascript Form. Happy coding!