Forem: Patrick Canella

How to add a Giphy image to Dev.to posts in 2023

Patrick Canella — Fri, 17 Feb 2023 21:52:15 +0000

I had issues with this so I thought I'd write a quick how-to on this. To the Dev.to folks: Why can't we easily embed this? There's no Giphy option in the embed tab. I tried using Giphy's embed as well, but it just would never show up.

This is kind of a rip off of this post, but Giphy has updated their site, so this is a tad different now.

Okay, so first choose a gif, we'll choose this Giphy link: https://giphy.com/gifs/natgeowild-america-natgeo-americathebeautiful-ItIMgSW1kSAo0QTl30
Click Share (see below)

Click Copy Giphy Share Link

Take copied link from above and add it inside this tag:

<img width="100%" style="width:100%" src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZWQ3NmZmMjMwODQwNjZiZTcwY2VhODhlMzE4NmRiZDYzYTNjNDM5MSZjdD1n/ItIMgSW1kSAo0QTl30/giphy.gif">

End Result

Godot 4: "Pointing" an Area2D to the correct direction using look_at!.

Patrick Canella — Fri, 17 Feb 2023 20:38:49 +0000

Hello all! I just want to do a quick post regarding Godot 4, something I've been working with for awhile and absolutely LOVE.

If you don't know what Godot (pronounced guh-doh)is, it's an open source game engine that's almost ready for its 4.0 release.

Anyway, let's move on. One issue I had in my upcoming video game, Retro Hockey, is that I wanted a player to pass the puck to another player. I wanted them to have a "line of sight" (see below) for their passing in the shape of a big inverted triangle.

Then, if there's another player on the same team inside this triangle, and they are closer than another player, it would pass to the closer player.

Anyway, the problem I was having was I needed to figure out some way to rotate the triangle to the direction (Vector2) the player was moving to.

The solution? the look_at function!

In Godot 4, the look_at function does this (official docs):

void look_at ( Vector2 point )
Rotates the node so it points towards the point, which is expected to use global coordinates.

Great! So now, let's just take the existing linear_velocity of my character/player. Based on how your character moves, it may be different (something to keep in mind is how Godot and game programming uses the Cartesian plane), but here's the example I have:

# based on my char's movements, we reverse the x and y coords
var newVec = Vector2(linear_velocity.y, linear_velocity.x)

# set the look_at point to the initial global position of our triangle origin + the new vector. We also have to account for the y coord being negative since Godot/game programming uses the plane a bit differently...
passing_triangle.look_at(passing_triangle.global_position + (Vector2(newVec.x, -newVec.y)))

So then, with the View Collision Shapes option on, we can see how this works! FYI, if you're not sure how to do this, here's a handy image for you:

And here's the final product! A giant triangle that rotates to where the player is going:

This post was heavily inspired by this old Reddit thread on Godot! Thank you for the help, stranger!

🥘 Reduce: It's all gravy, baby!

Patrick Canella — Mon, 22 Aug 2022 19:34:00 +0000

I've been working in JS codebases for over 10 years (👴🏻) and one thing that still trips me up sometimes is the reduce function. Every time, I go to the MDN documentation on reduce, I have some initial trouble understanding how the heck it works.

Then, if you go on Twitter or something, everyone will be like "reduce is the most important array function!" Cue anxiety 😩!

So in this short post, I'll try to explain Reduce and show examples that are actually relevant and not overwhelming.

So with that; let's REDUCE 🥘.

Let's start with the "official" documentation explanation and go from there:

The reduce() method executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

From this we know:

It takes in a callback function () => {} for each array element
It takes the previous calculated element and uses it in the callback function. Like so (previousValue, currentValue) => {}
It returns a new array of values after reducing
We don't know this really, but reduce is a really stupid name for this function. IMO accumulator would be a far better, and more accurate term.

One thing to note is that reduce will take a callback, but it will also take an initial value as a parameter; this is to "get the accumulator going" in the right direction. If you're adding/manipulating numbers, it's a good idea to start at 0.

As an example, it'll look like this:

// This is incredibly similar to the MDN example
const arrayToReduce = [1, 2, 3, 4, 5];
arrayToReduce.reduce((prevValue, currValue) => return prevValue + currValue), 0)

But let's take MDN's example and break it down a bit. Complete with console.logs to make a bit more sense of how it works:

const initialValue = 0;
const arrayToReduce = [1, 2, 3, 4, 5];
arrayToReduce.reduce(
(previousValue, currentValue) => {

    console.log("prev:", previousValue, "curr:", currentValue); 
    const result = previousValue + currentValue; 
    console.log("result", result); 

    return result
  },
  initialValue
);

Running this will output the following:

> "prev: " 0 "curr:" 1
> "result" 1
> "prev: " 1 "curr:" 2
> "result" 3
> "prev: " 3 "curr:" 3
> "result" 6
> "prev: " 6 "curr:" 4
> "result" 10
> "prev: " 10 "curr:" 5
> "result" 15
> 15

I feel like explaining this without an example showing the output and everything is disingenuous. As you can clearly see here, basically the result is added to the next iteration as an input in the callback (previousValue), and the current iteration that the array is looping through, is the currentValue.

This is basically the equivalent of doing:

const arrayToForLoop = [1, 2, 3, 4, 5];
let valueToKeepTrackOf = 0; //equivalent to reduce's "initialValue" parameter
let finalResult = [];

arrayToForLoop.forEach(item => {
  console.log("prev:", valueToKeepTrackOf, "current:", item);
  valueToKeepTrackOf += item;
  console.log(valueToKeepTrackOf); 
  finalResult.push(valueToKeepTrackOf);
});

console.log(finalResult);

So there you have it! That's reduce in a nutshell. It's incredibly useful for appending/using operators on!

My personal advice: Don't use this for complex things; if you need to do something really complex or nested in a bunch of JSON objects, best to simplify it first and go from there.

As always, MDN is a great source to understand this in its entirety.

Cover Photo Credit: La Cucina Italia

🎶 Promise Me No Promises

Patrick Canella — Wed, 27 Jul 2022 20:48:00 +0000

`🎶 Promise Me No Promises 🎶`

(okay, I'm done...)

In JS what are they? If you're a beginner in JS you already should have some knowledge of callbacks and how they work. If not let me know and I can make a blog post on these as well.

Anyway, what is a Promise?

Well, MDN defines a Promise as:

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Ok, those are some words. Let me give an example of a basic Promise and then kind of go over what it means.

This is a really basic promise. Basically what we are doing here is saying "hey when this promise gets resolved, we are going to print out hello there. Easy, right? But why would I use a Promise for this, when I can just do:

console.log('hello there!')?

Great point! Promises aren't really needed or used for something like this. So what are they used for?

Promises are used to wrap asynchronous functions (like HTTP requests) and give its result in a synchronous manner

Yes yes, we all know that JS is asynchronous, but if we don't have something like promises, we'll be doing what in the JS community we like to call 🔥🔥 CALLBACK HELL 🔥🔥. Callback hell is when you are calling many functions whose results come in the form of a callback with an argument as a value... something like this:

YIKES. What a mess. This is how we used to have to write JS! This simplified version below uses Promises.

As you can see we wrap the existing async fs.readdir function in a Promise and once fs.readdir has completed, we get the result via resolve

BTW, resolve is just a fancy way of using return in a Promise. It basically says "hey here's the data you are looking for, I'm going to return this in the callback. reject is similar, but will only print out the err when the you put a .catch method at the end of the chain. Let's take a look at what that would look like:

That's great, but what's a real world example of this?

Great question! In JS, we have the ever famous fetch function (both on the browser and now on NodeJS!), which is a PERFECT use of Promises! Let's see how.

So what just happened? A few things, as mentioned in the code comments:

We initially make the fetch call with the URL as its parameter. This kicks off an async function that will return a Promise and "resolves" as a Response type (more on that here).
Once that fetch completes or resolves, we want to use then to get the response object.
With the response object, we now want to make this response into a JSON format. Thus, we call response.json(). We'll set this to a variable, so we can use it in the next line.
Once response.json() has completed, we use the final then to print out the JSON body that we are looking for.

and ta da! You get this as a result:

Honestly, this is broken down a bit much. Usually for a simple fetch request, you can shorten it with chaining like so:

And that's it! Promises provide a great alternative to Callback hell and are great for async functions of any kind.

Actually, one more thing...

With ES6, the introduction of async/await has made Promises even easier than before! I'll probably do a separate blog post on this, but in essence instead of doing:

You can simply do:

No then needed! This is some nice syntactic sugar that JS provides now so we can write our code more linearly like many synchronous languages can do. It's incredibly useful and you'll see most promises written in this way.

Anyway, I hope this helps you understand how promises work. Let me know if you have any questions! Thanks for reading 😄

Old blog post archive

Patrick Canella — Wed, 16 Sep 2020 03:26:11 +0000

Hello all! In case you dropped here from my website, here are a bunch of old blog posts I did years ago! I wanted to put them here one by one, but I'd rather spend time creating new content than porting over old stuff, so here's a link to it:

BLOG ARCHIVES

The Vimeo API; Or: Why postMessage rocks!

Patrick Canella — Wed, 16 Sep 2020 03:11:03 +0000

Transferring this over from my old blog to DEV.to... bear with me for any aberrations!

m going to try to keep this post short and sweet; because: A) It’s a quick overview B) Nobody reads the “fluff” of coding articles (because we’re usually looking for answers!)

Anyway, this post is to highlight the Vimeo JS API, it’s optional Froogaloop helper library (which I actually did NOT use) and creating a quick wrapper dedicated to Vimeo’s basic API functionality.

For this project, we needed to use both the YouTube and Vimeo APIs to take control of their iframes. The weird thing is, both of these companies decided to implement their API quite differently.

If you’re debating whether or not to use Vimeo or YouTube, I would actually suggest Vimeo, only because their API is a lot more straightforward (in my opinion) and it’s easier to get up and running with it. YouTube’s iframe API is sort of clunky and you have to hack a bit to get it working how you want. You also MUST include their JS, which is actually really irritating if you want multiple instances.

ANYWAY, let’s get on with it.

Now, Vimeo’s iframe API revolves around the really cool (and fairly recent) postMessage API that allows us to send events to a 3rd party iframe where they have their own event listeners! A really cool (and secure) way to execute cross-domain requests. We can actually set this up quite easily with Vimeo’s API!

First, you’ll want to make sure that your embedded url looks something like this:

<iframe id="iframe_video" src="https://player.vimeo.com/video/<VIDEO_ID>?byline=0&portrait=0&title=0&autoplay=0&badge=0&api=1&player_id=iframe_video"/>

I have some fancy parameters here (which are optional and can be found here), but the most important ones are api=1 (which enables the postMessage/JS API) and the player_id (which says “ok, I’ll correspond with the iframe with ID of “iframe_video”)

Let’s take a look at a quick code sample (as a full reference, here’s ~~the wrapper I have created~~ I have learned recently that this is out of date and no longer works, sadly):

    post: function(action, value) {
    var data = {
        method: action
    },
    $player = document.getElementById('iframe_video');

    // Just as a check to make sure value exists
    if (value) {
        data.value = value;
    }
        var url = $player.src,
        message = JSON.stringify(data);
        $player.contentWindow.postMessage(message, url);
    }

Ok, so there’s a bit we should go over.

params:

-action (required): the action you want Vimeo API to execute.Need a list? Here you go!

-value (optional depending on action): The value that is attributed to the action (for example, the action would be “seek” and the value would be a JSON object like:

{
 'seconds:'192.622',
 "percent":'0.527',
 "duration":'365.507'
 }

(BTW this is totally taken from the API docs)

Anyway, this is all fairly straight forward if you’ve used postMessage. Haven’t used postMessage? Check out David Walsh’s example!

Below is a quick demo of Vimeo’s postMessage API working in action :) (want to see the code behind it? Check out the jsFiddle)

This post is from September 2015 and may not be up-to-date, however I am transferring to Dev.to for historical reasons

Is this a blog or something?

Patrick Canella — Wed, 16 Sep 2020 03:04:39 +0000

Hello all!

I'm not quite sure what DEV.to exactly is, but I have decided to use it as some sort of blogging tool and somewhere I can share my inane thoughts and opinions about the following:

Javascript
Swift
Tech in general
IoT Stuff (my current personal favorite ATM)
Retro Macs & Restoration!

I have no idea what audience I will reach with this account, but I am willing to start!

If you're interested in rants, please follow @pcanella on Twitter.