DEV Community: Barkley Santo

React Native Conditional Button styling for iOS.

Barkley Santo — Thu, 14 Jul 2022 10:05:54 +0000

React Native (RN) allows us to write code in one language for mobile apps instead of resorting to writing platform specific code.

However there are some things in RN that do require platform specific code.

Below we have a custom button component, the effect we're looking at now is the button changing color when pressed 👆🏾.

RN gives us a special property we can use for this effect, it's called android_ripple. Once the button is pressed, the ripple property applies the color we provided to the button.

Check it out!

    <View style={styles.buttonOuterContainer}>
      <Pressable
        onPress={pressHandler}
        android_ripple={{ color: "#540233" }}
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>

But since this is an Android property 👽, it won't work on iOS devices, so we need to finesse some JS for this.

The style attribute in a component can either take a style object directly or an arrow function, so we can run some JS directly inside of it.

   <View style={styles.buttonOuterContainer}>
      <Pressable
        onPress={pressHandler}
        android_ripple={{ color: "#540233" }} //Android color change


        style={({ pressed }) => // iOS color change
          pressed
            ? [styles.buttonInnerContainer, styles.pressed]
            : styles.buttonInnerContainer
        }
      >
        <Text style={styles.buttonText}>{children}</Text>
      </Pressable>
    </View>

Here's what we get.

The Pressable component automatically passes a pressed value (which is a boolean) to the function, and then we can use that boolean in a ternary operator.

We’re allowed to return/add multiple styles objects in an array from this ternary operator, so we’re not limited to one ‘key’ from the stylesheet in this case. We're applying both the base button style and the button press color change here.

It ends up reading as “if pressed is true, apply both style objects from this array, if not, just apply a single style”.

A quick one, but good to know, cheers 🥂

A puppy for your troubles (source):

Cover image by Katya Ross

Submit form data from client to Node.js (API)

Barkley Santo — Thu, 30 Jun 2022 11:55:16 +0000

This is a fun one!

It's common practice to have a form or input on a website where visitors can enter something in a search field and then expect some data back.

So let's take a look at how we can do that!

Dependencies we'll use for this project:

Express (a Node.js framework that provides broad features for building web and mobile applications)
Nodemon (so our server automatically updates when we change the anything in our server file)

The first thing we're going to want to do is start a project with a basic index.html file. You can add this to the body of your HTML page 😎!



  <h1>Welcome our test site! 👋🏾</h1>

  <form action="/find" method="POST">
    <input type="text" name="search-item" placeholder="Search here!">
    <button type="submit">Search</button>
  </form>

And here are some basic styles for your stylesheet:



  h1{
    color: rgb(79, 75, 204);
    font-family: Arial, Helvetica, sans-serif;
  }

  h1, form{
    margin: 0 auto;
  }

  button{
    color: white;
    font-weight: bold;
    background-color: rgb(79, 75, 204);
    border-radius: 6px;
    padding: 4px;
  }

We'll go over the HTML portion in a few. Let's build our node server now!

First, in your terminal, run the following command:
npm init

Once you press enter, you'll be prompted to answer a few questions in the terminal, but you don't need to fill those out right now, you can always edit them later on directly in the file; just press enter until the questions go away.
This will initiate a package.json file in your project where your dependencies will live.

The package.json file should look like this after you run the command.


 json
{
  "name": "blogcode",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC"
}

Now we can add those dependencies mentioned in the beginning by running the following commands.
npm install express
and
npm install --save-dev nodemon

NOTE 📝: We're saving nodemon as a dev dependency because it's solely for our benefit when testing locally, it's not needed in production, so we add the --save--dev flag to tell our package.json that it's not needed past our testing phase.

Here's what our package.json file looks like now after adding the dependencies.

Now let's manually add one more line to the package.json file so when we're testing locally, we can use Nodemon to automatically update our server instead of manually needing to refresh it every time we make a change.

We can create our server now! Go ahead and paste this code into your server file (I named mine server.js for convenience):



const express = require("express")
const app = express()
const port = 3000

app.use(
  express.urlencoded({
    extended: true,
  })
)

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html")
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

In the first three lines, we are setting up our server variables.
const express = require("express") : here we're importing the express package we installed earlier (npm install express)

const app = express() - creates our express app.
const port = 3000 - we'll use this variable to tell our app which port to listen to.

The following code is middleware, it parses incoming requests with urlencoded payloads and is based on body-parser. It pretty much allows us to read request objects 🤓, nothing crazy.



app.use(
  express.urlencoded({
    extended: true,
  })
)

Now for the good stuff 🔥

The app.get() is saying "Hey server, when we're on the root path/route, send our HTML page to be displayed."

And app.listen() is binding the app to the port on our machine, in this case it's listening to port 3000 which we defined as a variable at the top of the server file.

Now in our terminal we can run that package.json script we added a few steps ago, go ahead and typenpm run dev in your terminal, and you should see this:

This means our server is running, and our app is listening for events that happen on that port!

Remember that form we added to the HTML page? We have 3 important pieces here for our server.

1.) When the form is submitted, hit the /find route on our server (we haven't made this route yet, but it's coming).

2.) Make a POST request to the server, so we can do something with the data we're sending to this route.

3.) The key we'll use for our response object.

Let's make the /find route in our server real quick. Add this to your server file:



app.post("/find", async (req, res) => {
  const searchItem = await req.body.searchForThis
  console.log(searchItem)

  res.send(`We can search for this item on our backend:  ${searchItem}`)
})

Now that our server is running, we can type something into our HTML input field and submit (click search). We'll see our input logged to our server that's running in our terminal, and then our response to our website will be whatever is in the res.send()!

Client side:

Server:

And there you have it! Passing data from the client side to your server is an every-day task; so it's nice to have an idea on how to do these things!

Now that you have that data on your server side, you can make requests to APIs to upload and request data using that value we passed along!

If you have any questions or feedback, let me know, and we can share ideas! ✌🏾💙

Here's a puppy:

doggy photo: Karsten Winegeart 🤘🏾

cover photo: Claudio Schwarz 🙏🏽

The React useEffect hook!

Barkley Santo — Wed, 15 Jun 2022 13:10:42 +0000

Typically, when building a web application, we're using an API of some sort. We use that API to perform CRUD operations (Create, Read, Update, Delete) in our app depending on what actions our user is taking.

For example, if we want to fetch a random image of a dog from the DOG API 🐶, our typical fetch would look like this:

fetch("https://dog.ceo/api/breeds/image/random")
    .then(res => res.json())
    .then(data => console.log(data))

Then, once we check our developer console, we can see that response object in JSON format after we've cleaned the data.

{message: "https://images.dog.ceo/breeds/terrier-irish/n02093991_3243.jpg", status: "success"}

Now, in React we use State which is a built-in React object that is used to contain data or information about the component.

So now that we have our fetch API set up, let's store the response in our state! Check out the code below 😎

import React from "react"

export default function App() {
    const [dogData, setDogData] = React.useState({})


    fetch("https://dog.ceo/api/breeds/image/random")
    .then(res => res.json())
    .then(data => setDogData(data))

    return (
        <div>
            <pre>{JSON.stringify(dogData, null, 2)}</pre>
        </div>
    )
}

Cool! So now it looks like we're making a fetch to the API, storing it as our new State and then re-rendering the component with its new state ♽!

But there's an issue…check out this statement from the React.js docs.

This can get us into trouble right now. What's actually happening in our code now is that our component is making a fetch from the API, setting the state of the component, and then renders an updated component with its new state. Once that updated component is rendered, it runs the same fetch API request again, updates the state renders an updated component that makes a new fetch again, so we're stuck in an infinite loop, check out the GIF below.

Now for the crux of this guide, the useEffect hook! Here it is implemented into our code:

    useEffect(() => {
        fetch("https://dog.ceo/api/breeds/image/random")
        .then(res => res.json())
        .then(data => setDogData(data))
    }, []);

This hook takes in 2 arguments.

useEffect([callback], [dependency])

The first one is a callback function, in this case it's our fetch request. The second argument (conceptually) is our dependencies, here, it's just an empty array because right now we don't have any dependencies.

If we omit the empty array as our second argument, our component will get stuck in its infinite loop again, so let's keep it there!

With this piece of code, we can ensure the fetch request happens only once, and we're successfully able to update our state with the data retrieved from the fetch, boom!

There you have it, a simple use-case for this hook, but an important one nonetheless.

Should you have any questions or any additional info to share, please reach out! Anything to help me improve these guides is helpful 💪🏾

The Basics of Web Development.

Barkley Santo — Thu, 02 Jun 2022 15:56:45 +0000

Getting started with coding for web development can be quite a rabbit hole. Like anything, there's so much information out there, it might seem like a journey that's difficult to start.

The beauty is, the information you need is out there!

Learning to code is a useful skill, and if you find that it's something you'd like to learn, stick around 🕺🏽. So, if you'll allow me, I'd like to introduce you the basics of a modern website 😉.

We can break down the core components of a website into 3 languages…

HTML
CSS
JavaScript

HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content (MDN).

I'd like you to consider the HTML code of a website to be equivalent to the frame of your home 🏠. It's the 'bones' that give it structure; without it, everything would just fall apart.

The pieces of that foundation and structure in HTML are tags, and they each serve a purpose. In general tags help improve SEO (Search Engine Optimization); so your website works better on internet search engines, they also help with accessibility for users with disabilities or assistive technologies, each tag behaves differently when you add it to your code as well.

Here's an example of what a tag looks like:
<body></body>

This particular tag has an opening tag <body> and a closing tag </body>, however not all tags have a closing tag, some are self-closing like the image tag <img/>

Websites have these <body> tags that hold all the other tags that help make up the rest of it.

Here are examples of a few more tags:

<body></body> ALL content goes in here
<h1></h1> Top level heading
<h2></h2> Less important heading
<h3></h3> Even less important heading
<p></p> Paragraph
<a></a> Anchor (for links)
<button></button>
<img/> Images

This is what our website would look like if we employed a few of those tags.

Each tag serves its purpose and behaves a bit differently on the page. You can see our <p> tags are a smaller than any of the heading tags (h1, h2, h3). Whereas, the h1 heading tag appears the largest on the page. The h1 is macho, it's just the largest heading on the page. Then, by order of importance, we can use the other heading tags.

But the website looks pretty… plain 💩. Nowadays, not many businesses or people want a website that looks like it was made in 1982, so we spice it up a bit with some styling. That's where CSS comes into play.

CSS

Let's get fancy queens and kings 👑. CSS (Cascading Stylesheets), is the code that defines the appearance and presentation of the different parts of your website.

Remember that house we mentioned earlier on? Well, if HTML is the frame of your home, then you can consider CSS as the paint on the walls, the shape of the railings, the size of your garage. CSS dictates properties that modify the appearance of what we're seeing. It can't add a second garage for you, but it can definitely change the color of your lawn.

With CSS, we dictate a style rule in 3 parts.

Selector
Property
Value

For example, if in our home we had a door and wanted to paint it green, we can say, “I want to change my door color to green.”, this reads very much like a CSS rule.

Translated to code speak: “I want to change my h1 color to green.”

We just changed a single word from the original sentence, and here's what it looks like in code now! Take a look at how we can change the <h1> color below:

We can also change other properties such as font-size, font type, background colors, and much more! Check out how we changed the size and background color of the tags below:

This is nice, of course, but there's something missing…

When you visit a site or an app, you usually interact with it in some way. Things like filling out a form or survey, clicking a button, moving things around on the page that all happens with JavaScript!

JavaScript

Not to be confused with Java. Java is to JavaScript as pen is to pentagon. No relation at all, simply a mistaken case of identity.

Do you remember that HTML and CSS are the structure and appearance of our home 🏠? Well, JavaScript is what you can interact with. Things like turning on the faucet, adjusting the air conditioning, plugging something into a power outlet etc., it's what allows you to interact with things in the home!

Strictly defined:

“JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved.” - (MDN).

With JavaScript (JS) we allow interactivity with our website or app. Let's see it in practice first, and then I'll explain how the code works:

You'll see on line 25 I added a button element to the HTML code of the page with the element. Then on line 35 I start my JavaScript code.

First on line 35 we find the button tag on the page with document.querySelector() and store it in a variable (you can think of it as a storage box) called button, it's pretty much saying “Hey JS, go to the HTML page and find the button tag,
and then store it in this box, please.”.

Then on like 37 we add an event listener which says “When the button is clicked, do whatever comes next.”. In our case, what comes next is a function named sayHello(). Which sends an alert on our page. Here it is in action:

There you have it! We've only had a taste of what these three languages are capable of, but I hope it helped you understand a bit more about how modern websites work. With HTML/CSS and JS, you can build almost anything your heart desires!

Programming for web development can be a fun hobby and rewarding career path if you decide it's right for you. If you're looking to get started, feel free to ask me a question to help you get started!

Puppy of the week:

Managing Form state with React useState hook 🪝.

Barkley Santo — Thu, 26 May 2022 15:43:18 +0000

Est. reading time: 8 mins

If you're starting to work with React, you'll come to learn about State. If you're not quite familiar with state yet, we can summarize state as being a variable that stores data/information within your React component, this data can be updated/changed as users interact with your app.

To help us manage state in our component, React gives us the State Hook, which we can use to store and set that data.

We'll be working on the code for this simple form with two inputs, first and last name.

Let's check out an example to try and get caught up to speed. Take a quick look at this code here, and I'll try to explain below.

//React Code

export default function Form() {
    const [firstName, setFirstName] = React.useState("")
    const [lastName, setLastName] = React.useState("")

    function handleFirstNameChange(event) {
        setFirstName(event.target.value)
    }

    function handleLastNameChange(event) {
        setLastName(event.target.value)
    }

    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleFirstNameChange}
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleLastNameChange}
            />
        </form>
    )
}

At the top of the React code you'll see we use the useState() hook two times.

Once to change the state of the First Name input and another for the Last Name. We are storing our state (data) for the First Name in a variable called firstName, and then we use the setFirstName function to update what's stored in it.

When we initialize state for both firstName and lastName variables, you'll see we're initializing state to equal an empty string value with useState("").

Just below that, you'll see two other functions, handleFirstNameChange and handleLastNameChange. Each <input/> element below that, has an onChange property which listens for a change in that particular element and it executes the function it's holding as its value.

In short, the function that will run when there are any changes to our first name input, is handleFirstNameChange. The Last Name input has its own handleLastNameChange.

This code works really well 😊! When the First Name input is updated, its respective function will execute; the neat thing is that when the onChange is triggered, it automagically passes an event object to our handler function. If you take a look at each change handler, you see that they accept an event parameter.

We can break down that event to see the changes, by looking at event.target.value (line 8 where we log the updated value) here's what it looks like below.

Though it works, this solution is not scalable. Imagine you have a form with 10+ inputs. It's not very practical to write a handleChange function for each and every input on the page.

In programming, we try to keep our code as DRY 🌵 (Don't Repeat Yourself) as possible. So, let's fix this to ensure we aren't duplicating code we've already written.

Check out the refactored code below!

export default function Form() {
    const [formData, setFormData] = React.useState(
        {firstName: "", lastName: ""})

    function handleChange(event) {
        setFormData(prevState => {
            return{
                ...prevState,
                [event.target.name]: event.target.value
            }
        })
    }
    console.log(formData)
    return (
        <form>
            <input
                type="text"
                placeholder="First Name"
                onChange={handleChange}
                name="firstName"
            />
            <input
                type="text"
                placeholder="Last Name"
                onChange={handleChange}
                name="lastName"
            />
        </form>
    )
}

Let's make note of a few major differences.

There is only one handleChange function now. We got rid of handleLastnameChange and handleFirstNameChange.
We added a name property to our inputs. One input has a name value of firstName and the other has lastName. Keep this in mind for the cherry on top 🍒!

3.) Our initial state at the top is named differently, as well as the state change function. (They're renamed so we know they're more 'general'. The names have nothing to do with their behavior)

4.) Our handleChange function looks a bit different (see below).

    function handleChange(event) {
        setFormData(prevState => {
            return{
                ...prevState,
                [event.target.name]: event.target.value
            }
        })
    }

This way we can handle changes for both inputs with a single function. We call setFormData (our newly named state function). The useState hook gives us access to previous state which we can use to update the current state with the new one!

If we console.log() prevState now (blue arrow), you'll see it logs the most recent state value, in this case, it's the initialized state that we saved in formData (green).

Cool, huh?

Now, this last part is the cherry on top 🍒. The handleChange function is going to return an updated state (an object type).

Here its return statement:

            return{
                ...prevState,
                [event.target.name]: event.target.value
            }

We're using the spread operator (it's the 3 dots), to make a copy of our prevState object and then after that comma, we are updating the [event.target.name]. Remember that name property we added to our inputs? This is telling the handleChange to return the previous state BUT, to update this particular name property to be equal to the value of the target (input element) that received the event.

So it's saying; if the input with name="firstName" is targeted, let's take the previous state of this component, and update that key (name) with the new value.

And there you have it! Not so short, but certainly a powerful tool that React gives us to keep our code clean and more maintainable.

If you have any other feedback, please feel free to share! I'm always happy to learn more about how to improve my work 🤘🏾.

Here's a puppy

JavaScript Callback functions?

Barkley Santo — Fri, 20 May 2022 17:28:31 +0000

Est. reading time: 5 mins

I've worked with JavaScript (JS) callbacks for quite some time now without really understanding how, or why they work the way that they do. So I'm here to hopefully help you learn a bit more about them!

For those who are unfamiliar with what a JS callback is, it's defined as a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action 😱.

JavaScript is a single-threaded programming language. Meaning it's synchronous by default, and processes one operation at a time. This can vary depending on how you're using it and on which environment it (JS) is being used in, client 💻 vs server side 🗄.

Let's take a look at our first example of some browser code:

function fruitOne(){
    console.log('Apples are the best! 🍏')
}
function fruitTwo(){
    console.log('Bananas are the best! 🍌')
}
function fruitThree(){
    console.log('Cherries are the best! 🍒')
}

fruitOne()
fruitTwo()
fruitThree()

// RESUlT
Apples are the best!
Bananas are the best!
Cherries are the best!

Works a bit how we'd expect, right? The console logs each result in the order that their functions were called.

But now what do we think might happen if we use the Web API Method, setTimeout() inside one of the functions here in our second example:

function fruitOne(){
    console.log('Apples are the best! 🍏')
}
function fruitTwo(){
    setTimeout(() => console.log('Bananas are the best! 🍌'), 3000)
}
function fruitThree(){
    console.log('Cherries are the best! 🍒')
}

fruitOne()
fruitTwo()
fruitThree()

// RESULT
Apples are the best!
Cherries are the best!
Bananas are the best!

We can see the functions are being called in the same order as before, but see them return in a different order! Now, why is that 🤔?

Well, JS is a non-blocking programming language, meaning that it won't wait for previous code to finish executing before moving on to the next piece of code 🤯.

So in our most recent example, fruitOne() gets called, and returns immediately. Then we get to fruitTwo() which contains the setTimeout() web api method.

The setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires, in this case it will execute after 3 seconds.

The fruitThree() method does not wait for fruitTwo() to finish executing before it gets called, it want's to run asap!

Now we're seeing some asynchronous behavior! Functions returning in a different order than which they were called.

Let's look at a third example now!

function fruitOne(){
    console.log('Apples are the best! 🍏')
}
function fruitTwo(myCallback){
    setTimeout(() => {
        console.log('Bananas are the best! 🍌')
        callback()
    }, 3000)
}
function fruitThree(){
    console.log('Cherries are the best! 🍒')
}

fruitOne()
fruitTwo(fruitThree)


// RESULT
Apples are the best!
Bananas are the best!
Cherries are the best!

An important distinction for our third example above is that we're no longer invoking the functions one after another. We're passing the fruitThree function as an argument to fruitTwo().

👻 Sneaky Note: Notice that when we pass fruitThree into fruitTwo as an argument, we omit the "()" we normally use for functions. The () is a signal to invoke the function, and we don't want to do that just yet! We're just passing a reference to the fruitThree function with no intention telling that code to execute yet.

So inside fruitTwo we have access to the myCallback parameter. The way this example works, is that our fruitOne function runs first, and then we call the fruitTwo function. Our third function waits for the second to finish before it gets the go-ahead!

Inside fruitTwo() there is a setTimeout that executes 3 seconds after it's invoked. Once it's called it logs the 'banana' statement, and then finally it will run the callback function we named myCallback, which is really the fruitThree function in disguise 🥸.

Notice this time we do use the () when invoking the myCallback function param our fruitTwo function has access to.

And that's a little fun with callbacks! Callbacks are great for small tasks like this, but can quickly get out of hand with multiple nested callbacks, there's a name for this, Callback Hell 👹! There are other solutions to this though!

Things like Async/Await and Promises are great tools to help manage situations like these, they're outside the scope of this post, but we can get to them one day 😉

If anybody has any tips or wants to add something I missed, please let me know!

Much love, till next time!💙

Happy Friday!