DEV Community: Kade Esterline

Proxy Objects in JavaScript

Kade Esterline — Thu, 18 Aug 2022 21:58:29 +0000

Proxy objects were unknown territory for me just a little while ago. I had never even heard of them until I was asked to explain how to use them over on TikTok. I've spent some time now reading up on how to create proxy objects and how they can be used. I'm going to try my best to keep this brief so this won't be a comprehensive guide on how to use proxy objects. This will however show you some of the basic ways you can use them, as well as provide a few examples.

Creating a Proxy Object

To create a proxy object you'll need two things first, a target object and a handler object. The target is the object you're wanting to make the proxy for and the handler is where you define what behavior to change and how it should be changed. After defining both of those objects, you can create the proxy by creating a variable set equal to new Proxy(target, handler) replacing target and handler with whatever you've named them.

const target = {
  greetingOne: "hello",
  greetingTwo: "world",
};

const handler = {};

const proxy = new Proxy(target, handler);

I've left the handler empty for now, meaning that there won't be any changes in behavior. This isn't very useful, so next we'll start looking at how we can change some of the behavior of the proxy.

Changing The Get Method

Let's say that we want our proxy to change greetingTwo to 'dev.to' if target.greetingTwo is equal to 'world'. To do this, we'll redefine the get method in our handler object to overwrite the normal behavior. We'll need to pass target, prop and receiver into a get() function and then use those parameters to change the behavior.

const target = {
  greetingOne: "hello",
  greetingTwo: "world",
};

const handler = {
  get(target, prop, receiver) {
    if (prop === "greetingTwo") {
      return "dev.to";
    }
    return Reflect.get(...arguments);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.greetingTwo); // dev.to

Using Reflect we can keep the original behavior for some of the accessors and only change the values we're wanting to change.

Changing The Set Method

What if we only want certain values to be valid on an object? In order to accomplish this, we can use set() in our handler. This time we'll pass in an object, prop and value and use the parameters to make sure our data is valid.

const target = {
  value: 1,
};

const handler = {
  set(obj, prop, value) {
    if (prop === "value" && value < 1) {
      console.log("value cannot be lower than 1");
      // handle error
    } else {
      return Reflect.set(...arguments);
    }
  },
};

const proxy = new Proxy(target, handler);

proxy.value = 0; // 'value cannot be lower than 1'
console.log(proxy.value); // 1

proxy.value = 3;
console.log(proxy.value); // 3

Again, using Reflect let's us keep the normal behavior if we want it. Attempting to set proxy.value to a number less than 1 will result in a warning being console logged and the value not being set. Values 1 and higher are still valid.

Intercepting other methods

In hopes of keeping this post short and concise I'm not going to cover each individual handler trap. There are eleven more, but I'll only be showing a few. MDN has examples for all of them, and I would reccomend giving the docs a quick read if you're looking for more examples and a more thorough explanation.

apply()
- Using apply() traps function calls.
- Using a function as your target object, and calling apply() like this:

  apply: function(target, thisArg, argList){}

you can add onto existing functions, changing how a function behaves.

construct()
- Using construct(target, args) traps the 'new' keyword.
- You're then able the change the behavior of constructing new objects
has()
- Using has(target, key) is a trap for the in operator
- You're then able to change the behavior of how keys are accessed through the in operator like this

  if (key === "keyOne") {
    return false;
  }
  return key in target;

deleteProperty()
- Using deleteProperty(target, property) traps the delete operator
- This will allow you to change how properties get deleted, allowing for conditions to be set

  delete proxy.keyOne; // gets trapped in the handler object

That's going to do it for this post, If you have any questions I'll do my best to answer them in the comments.

Make Videos with JavaScript 4

Kade Esterline — Thu, 11 Aug 2022 20:07:00 +0000

I've been working on some other projects the past week or so and I've gone back to work while still looking for my first developer role. I have made some progress just enough for me to really talk about yet. I'm still having some issues with ffmpeg adding audio to video, but I'm still optimistic about this project and hope to wrap up the last few steps soon. Today I'm going to explain how I'm using puppeteer to grab screenshots from chrome.

The screenshot.js file

This file is exporting the screenshot() function that uses puppeteer to grab screenshots from the question. This was surprisingly easy to do, and was really satisfying to get working. The function takes in the questions url as well as the questionDataObj global variable.

First, url is set equal to the questions url. Then inside of a function called getScreenShot() puppeteer is used to launch a headless chrome browser, navigate to the url and then screenshot different divs based on CSS selectors that contain either keywords or ID's grabbed from the API call that I talked about last week.

Some of this process is repeated a few different times because of the way the divs are being selected. But everything starts with this code block

// open browser and navigate to questionURL
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
// if page has cookies prompt, close prompt
const [cookieButton] = await page.$x(
  "//button[contains(., 'Accept all cookies')]"
);
if (cookieButton) {
  await cookieButton.click();
}

This starts chrome, goes to the url and then closes an 'Accept Cookies' prompt that often shows up if it exists. I was pleasantly surprised with how easy it was to simulate clicks with puppeteer.

Next, is the code that screenshots the questions title

// find question title and screenshot it
await page.waitForSelector("#question-header");
const questionTitle = await page.$("#question-header");
await questionTitle.screenshot({
  path: "./screenshots/question-title.png",
});

This finds the selector that is used for the title and screenshots just the div that contains the title. After that, the questions body is then found and has a screenshot taken of it.

// find question body and screenshot it
await page.waitForSelector(
  "#question > div.post-layout > div.postcell.post-layout--right"
);
const questionBody = await page.$(
  "#question > div.post-layout > div.postcell.post-layout--right"
);
await questionBody.screenshot({
  path: "./screenshots/question-body.png",
});

The questions body uses a different syntax that the title because of how the div it's in is nested. This was probably the biggest struggle for me with screenshots. Still much easier than I thought the whole thing was going to be.

Then, using the questionDataObj I use a for loop to loop over the array of answer ID's from the API call. There's another prompt that likes to pop up here sometimes that needed to be handled as well.

// loop through answer ID's
for (let i = 0; i < questionDataObj.answerIds.length; i++) {
  // find answer and screenshot it
  await page.waitForSelector(`#answer-${questionDataObj.answerIds[i]}`);
  const answerText = await page.$(`#answer-${questionDataObj.answerIds[i]}`);
  // close prompt if it exists
  const [button] = await page.$x("//button[contains(., 'Dismiss')]");
  if (button) {
    await button.evaluate((b) => b.click());
  }
  await answerText.screenshot({
    path: `./screenshots/answer${questionDataObj.answerIds[i]}.png`,
  });
}

That grabs all of the screenshots we need, and all that's left is to close the page and chrome.

await page.close();
await browser.close();

I found this to be much easier than I had initially expected, and I want to try using puppeteer again for other projects in the future. Thanks for reading and feel free to check out some of my other posts. If you have any questions for me I'll do my best to answer them in the comments.

Make videos with JavaScript 3

Kade Esterline — Thu, 04 Aug 2022 19:07:00 +0000

Since my last blog post I've fixed a few persisting bugs and continued work with ffmpeg. The app is going to take user input for a stackoverflow questions url and a youtube videos url and create a narrated tiktok similar to this project. First I'm going to briefly explain some of those bugs and how I fixed them and then I'm going to explain the first function call that starts everything off.

Changes Made and Bugs Fixed

The bugs I ended up fixing ended up actually being apart of the makeApiCall() function I'll talk about later in the post. I was having async issues when fetching data from the stackoverflow API. This is my first time making fetch requests in Node, and I forgot to add await before fetching the data. This wasn't always an issue, only occasionally the functions that relied on the response would error out. Since it was so infrequent usually, I thought it was an issue with the API and how many requests I was making. I decided to look at the function a little closer and noticed that both API calls were missing await and I haven't had the error since.

I stepped away from this project to work on my portfolio for a while. I haven't made a ton of progress since my last post, but I have still made some. The function that is adding the mp3 audio from Googles text-to-speech API to the screenshots works sometimes, but I'm still having a few persisting errors I'm ironing out. Even just in writing this post and looking at the errors I have a few more ideas to fix the issues and hopefully I'll get everything working a little better by the next post.

The api-call.js File

api-call.js is the first function that get's called inside of startVideoEdit() after the user has passed in their inputs. The function takes in the question url and a few global variables that it uses to store parts of the response.

The file is importing three modules

import fetch from "node-fetch";
import chalk from "chalk";
import { parseText } from "./parse-text.js";

Node Fetch is pretty straight forward, and I've already explained what Chalk is and how it's used in previous posts. Parse text get's called from within this file to convert the HTML strings returned from the API calls into plain text.

The first step is to extract the question ID from the url passed into the function as it's the only part of the url we actually need.

const url = questionURL;
const questionId = url
  .match(/\/(\d+)+[\/]?/g)
  .map((id) => id.replace(/\//g, ""));

Then we can interpolate questionId into two different urls, one to get the questions data, and another for the answers.

const qURL = `https://api.stackexchange.com/2.3/questions/${questionId}?order=desc&sort=activity&site=stackoverflow&filter=withbody`;
const aURL = `https://api.stackexchange.com/2.3/questions/${questionId}/answers?order=desc&sort=activity&site=stackoverflow&filter=withbody`;

Then we're able to use the qURL to query the API

const getQuestionData = async () => {
  await fetch(qURL)
    .then((r) => r.json())
    .then((data) => handleQuestionResponse(data));
};

This is where that bug I talked about earlier was coming up. Now I know to always await fetches in Node. I then call a helper function handleQuestionResponse() and pass in the responses JSON data.

First, if the question isn't answered none of this is going to work. If the question has been answered I then save the number of answers, the html string of the questions body as well as the html string of the questions title.

async function handleQuestionResponse(data) {
  if (data.items[0].is_answered !== true) {
    console.log(
      "Sorry, this question isn't answered yet. Try again with another question."
    );
    questionDataObj.isAnswered = data.items[0].is_answered;
  } else {
    questionDataObj.answerCount = data.items[0].answer_count;
    questionDataObj.htmlString = [data.items[0].body];
    questionDataObj.title = [data.items[0].title];
  }
}

Then the aURL is used to query the API

const getAnswerData = async () => {
  await fetch(aURL)
    .then((r) => r.json())
    .then((data) => handleAnswerResponse(data));
};

Again, this is where that await bug was causing issues for me. Again, I'm using a helper function that takes in the responses JSON data.

First, I map over each object in the JSON saving the ID's in an array. Then I map over each object again, saving the HTML strings to an array. I do the same again to interpolate the ID into a string in order to give each answer a title to use with files later. Then I call the parseText() function three times. The first is used to get plain text for the Answers, the second is used for the questions body and the last is for the title. Looking at this function now, I'm not sure why parseText() is inside of handleAnswerResponse() instead of being called outside in the main function being exported from the file. I'll probably mess around with this and move those function calls outside of this helper function.

async function handleAnswerResponse(data) {
  let answersIds = data.items.map((el) => el.answer_id);
  questionDataObj.answerIds = answersIds;
  let htmlAns = data.items.map((el) => el.body);
  let titles = data.items.map((el) => `answer${el.answer_id}`);
  titles.forEach((el) => fileNames.push(el));
  // parse answers
  await parseText(htmlAns, plainTextStrings, questionDataObj);
  // parse question body
  await parseText(
    questionDataObj.htmlString,
    plainTextStrings,
    questionDataObj,
    false
  );
  // parse question title
  await parseText(
    questionDataObj.title,
    plainTextStrings,
    questionDataObj,
    true
  );
}

That's all there is in this file other than calling getAnswerData() and getQuestionData(). There's some room to improve here for sure, and I plan on having some of this changed by the next time I write about this project. If you have any questions about I'll do my best to reply in the comments. Thanks for reading and feel free to check out some of my other posts here on dev.to

Get Started With Next.js

Kade Esterline — Wed, 27 Jul 2022 20:56:00 +0000

When I first learned React I remember thinking to myself 'this is awesome' and 'why would anyone even bother writing vanilla javascript'. I kept feeling this way for awhile. React eventually felt like a massive chore to set up and use in a project. When I initially made my portfolio I made it with vanilla html and css with a few lines of javascript from some packages to make it more interesting. I didn't want to make a react app for something as simple as what my portfolio was at the time.

Then I started working on other projects for my portfolio, and writing more blog posts. I wanted to be able to more easily update both of these. Preferrably using API's and preferrably with multiple front end routes, which lead me to the decision to transition over to React. I had heard of Next, so I decided to look into learning it and used it to build my portfolio. Next once again makes me think to myself 'this is awesome' and 'why would anyone even bother writing normal React'. In this post I'm going to walk you through some of the features of Next, and explain how they're used in an actual app.

Installation

I'm going to assume you already have node installed. You'll also probably want to have a grasp on react and how to use it on its own before learning Next. To create a new Next app use

npx create-next-app

You'll then be prompted to name the app. If you'd like to use TypeScript with Next, add a --ts or --typescript flag to the npx command. That's basically it, you can install any other packages specific to whatever project you're working on, but you might be surprised by the time you're done reading this. You really don't need a lot with Next.

Frontend Routes

Everything in the /pages directory in your apps file structure is a route. For now, ignore the /api subdirectory inside of /pages. To create a frontend route just create a React component inside of /pages. In order to navigate between different pages use the Next Link component. You don't need to install react-router-dom with Next. Everything in _app.jsx handles the routing of the frontend. You don't need to import your modules, all you need is to use the Link in some sort of navbar component and let Next handle the rest for you.

You can also create dynamic routes pretty easily by creating a subdirectory in /pages. Just name the directory whatever you want the route to be. In the directory you'll need a index.jsx file as well as a file that indicates what value is going to be used to make the route dynamic. You wrap the value in brackets, so if you had a /blog route and wanted to have a route for each post with the id you'd create a file called [id].jsx. The file structure should look something like this

└─── Pages
│   └─── Blog
│   │   │ index.jsx
│   │   │ [id].jsx
│   │
│   │ _app.jsx
│   │ index.jsx

In your index file, you'll have to do a few different things. First you'll use more Link components to link to the dynamic routes. You'll also probably need to fetch data from an API in order to know what id's to use. Then each dynamic route will need to make it's own API call most likely. Luckily Next makes this easy while also letting you statically generate sites, or do some server side rendering.

getStaticProps

First, getStaticProps is just like it sounds. If you have data that isn't going to change on your app use should fetch it using getStaticProps and use Static Site Generation. When you have a function called getStaticProps it's automatically called when the page is requested and sets the props needed to render the page before it's generated so that the app can be statically generated. You can fetch data from external API's here, or just set the data equal to a value if you wanted. Here's what getStaticProps looks like

export async function getStaticProps() {
  // make request
  const res = await fetch("some url");
  // convert to json
  const data = await res.json();

  return {
    // return data in the props object
    props: {
      data,
    },
  };
}

This just goes in the same file as the React component you want to fetch the data for. So this is the bare minimum to know how to get id's for dynamic routing, next lets look at how to getStaticPaths() and how to statically generate the paths you'll need just like the props.

getStaticPaths

If you use dynamic routes and getStaticProps you'll need to set a list of paths to be generated. This is also automatically called like getStaticProps() and is called before the page is generated. Here's what getStaticPaths() looks like

export async function getStaticPaths() {
  return {
    paths: [{ params: { id: 1 } }, { params: { id: 2 } }],
    fallback: false,
  };
}

In the paths key that's returned it's a much better idea to map over some other data in order to create the array depending on the length of the data. I showed the hard coded way just so you could understand the syntax. Here's a better way to use getStaticPaths

export async function getStaticPaths() {
  // make request
  const res = await fetch("some url");
  // convert to json
  const data = await res.json();
  // map over data, adding each id to an object in the array
  const paths = data.map((post) => {
    return {
      params: {
        id: post.id.toString(),
      },
    };
  });

  return {
    // return paths
    paths,
    fallback: false,
  };
}

The getStaticPaths function goes in the [id].jsx file. You can then use getStaticProps to grab whatever data you need for that specific route. Before moving on to getServerSideProps here's a brief example of what index.jsx and [id].jsx might look like using both hooks.

// index.jsx
const Blog = ({ posts }) => {
  return (
    <div>
      <Head>
        <title> Blogs </title>
        <link rel="icon" href="/favicon.svg" />
      </Head>
      <main>{/* map over posts */}</main>
    </div>
  );
};

export default Blog;

export const getStaticProps = async () => {
  const res = await fetch("some url");
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
};

// [id].jsx
const Post = ({ post }) => {
  return (
    <div>
      <Head>
        <title> Blog </title>
        <link rel="icon" href="/favicon.svg" />
      </Head>
      <main>{/* use post prop to render content */}</main>
    </div>
  );
};

export default Post;

export const getStaticPaths = async () => {
  const res = await fetch("some url");
  const posts = await res.json();

  const paths = posts.map((post) => {
    return {
      params: {
        id: post.id.toString(),
      },
    };
  });

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.id;
  const res = await fetch("some url" + id);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
};

getServerSideProps

I haven't had a reason to use getServerSideProps yet, but I'm going to do my best explaining how to use it. getServerSideProps only runs on the server, and is run at request time to get props from the server. It looks just like getStaticProps in that you still make a request, parse to JSON and then return props with your data inside. The main difference is when and how the data is fetched and rendered. If you'd like more information on the difference between Static Site Generation and Server Side Rendering and when you might use both check out this blog post from Vercel.

Backend Routes

Next.js also allows us to really easily build out backend routes by creating files inside of /api in the pages directory. You can connect a database or use any node package you'd like and query the endpoint from your frontend. In the app I made I have a contact form that hits the /contact endpoint and sends an email to my email address using node mailer.

In my contact.js file which is in the /api directory I have a handler function that looks something like this

export default function handler(req, res) {
  const body = JSON.parse(req.body);

  // Some logic to send email

  res.status(200);
}

Then in my contact component I'm able to have a handleSubmit function that looks like this

const handleSubmit = (e) => {
  e.preventDefault();
  const data = {
    // key value pairs needed to send email
  };
  fetch("/api/contact", {
    method: "post",
    body: JSON.stringify(data),
  }).then((res) => {
    // handle response by clearing state etc.
  });
};

Conclusion

Next.js is the first real 'fullstack' framework I've learned. I've used Rails and React to build fullstack apps but building apps that way never felt good. Even using React inside a /client directory in a Rails app just never felt 100% right. Next feels good to use. Next makes everything simple, but it might be overkill for your app. I would say that unless you have a need for the API routes and/or use hooks like getStaticProps() alot you might be better off just using React or another library like Vue or Svelte to build your app. If you're building any medium to large size project I would recommend giving it a shot though.

Make Videos With JavaScript 2

Kade Esterline — Wed, 20 Jul 2022 18:55:37 +0000

Since my last blog post I've made a few changes to the app I've been working on. The app is going to take take user input for a stackoverflow questions url and a youtube videos url and create a narrated tiktok similar to this project. First I want to talk about some of the changes I've made, then I'll talk about the main.js file and what it does.

Changes since last week

A few things have changed but nothing major. I created a folder inside of /lib for the files being used in edit-video.js. I did this because the amount of steps needed to actually edit the video together justifies being split up. So far, I've been able to attach the audio files from the Google Cloud text-to-speech API to the screen shots from Puppeteer. I haven't been able to find the same amount of time to make as much progress as I had initially, but since I switched from etro.js to using ffmpeg, it's been going a lot smoother. I decided to make the switch to ffmpeg after reading into remotion and making an attempt at implementing it. I also found shotstack but didn't want to potentially be limited in the amount of API calls I could make.

I also renamed index.js file to main.js at some point and haven't changed it back yet.

Here are the changes I made to the /lib file

└─── lib
    └─── edit-video
            add-audio.js
            edit-video.js
            image-to-video.js
    │
    │   api-call.js
    │   download-video.js
    │   parse-text.js
    │   screenshot.js
    │   text-to-speech.js

There could still end up being a few changes while I wrap the project up, and I'll have a similar update the next time I write a post.

The Main.js File

main.js is the entryway to the app. In main.js, I'm importing modules from /lib as well as a few npm packages.

import chalk from "chalk";
import inquirer from "inquirer";
import { screenshot } from "./lib/screenshot.js";
import { makeApiCall } from "./lib/api-call.js";
import { downloadVideo } from "./lib/download-video.js";
import { convertTextToSpeech } from "./lib/text-to-speech.js";
import { editVideo } from "./lib/edit-video.js";

In the last post I talked a little about what each npm package I was using did, but I'm going to give a better explanation of how they're used in my app.

Chalk and Inquirer are used together when the app prints to the console and when it asks for user input. Inquirer is used to grab input and Chalk is used to style anything logged to the console.

Here's how they're being used in main.js

const greeting = chalk.green("STACKOVERFLOW VIDEO CREATOR");
console.log(greeting);

async function getQuestionURL() {
  const answer = await inquirer.prompt({
    name: "questionURL",
    type: "input",
    message: "Enter the stackoverflow questions URL:",
  });
  questionURL = answer.questionURL;
}

greeting prints out in green text, and when getQuestionURL is called the user is prompted to enter a URL to a stackoverflow question.

The following five import statements are importing modules being exported from /lib. I'll show how each function is being called in this post, and make a few more posts going over what the functions being called actually do.

After the app gets both URL's from the user, the app then asks the user to confirm their input before calling a function called startVideoEdit which makes function calls to the /lib modules.

First, makeApiCall gets the text to be converted to audio. It's passed in a question URL and a few global variables kept in main.js that are used throughout the app.

await makeApiCall(questionURL, questionDataObj, plainTextStrings, fileNames);

Then screenshot is called and uses Puppeteer to screenshot the pictures needed. This function also takes a question URL and global variables.

await screenshot(questionURL, questionDataObj, fileNames);

Next convertTextToSpeech gets called to get audio for the title, question body and answers to the question. Text strings are passed into the function as well as a title to save the audio as. I'd like to eventually try to refactor this into just one function call, but for now it takes a few to get the job done. First, I get the audio for the title, followed by the body of the question before looping through an array of question strings.

await convertTextToSpeech(questionDataObj.title[0], "question-title");
await convertTextToSpeech(questionDataObj.textString[0], "question-body");

async function getAnswerAudio() {
  for (let i = 1; i <= plainTextStrings.strings.length; i++) {
    await convertTextToSpeech(
      plainTextStrings.strings[i - 1],
      fileNames[i + 1]
    );
  }
}

await getAnswerAudio();

Lastly, before editVideo is finally called to wrap everything up, downloadVideo is called to download the youtube video to use as the background to the video. The only parameter for downloadVideo is the youtube vieo passed in by the user.

await downloadVideo(videoURL);

That does it for main.js, if you have any questions I'll do my best to reply. Thanks for reading and feel free to check out some of my other posts on dev.to.

Make TikToks with JavaScript 1

Kade Esterline — Tue, 12 Jul 2022 03:03:09 +0000

Stackoverflow video maker

This is the first post in a series of blog posts I'll be writing about an app I'm currently working on. I saw this video on YouTube last week and was super impressed. Lewis, the developer of RedditVideoMakerBot made a bot that makes TikTok length videos out of Reddit question threads. The original app was written in Python and was built to work with Reddit specifically. I decided to build my own version in JavaScript that takes the same idea but is built to work with StackOverflow questions(y'know because who doesn't want to listen to an AI voice read through threads of 'has this been answered?').

I'm still in the process of building the app out, but I have more than enough done to start walking through roughly how the app works. In this post I'll walk through how I've structured the app as well as some of the technologies I've been using.

Structure

I have pretty minimal experience building CLI apps and no experience doing it with Node. I had never even made a CLI app in Node before this, so if the structuring is poor that's totally on me. Currently the basic file structure looks something like this:

StackOverflow-Bot
└─── audio
│
└─── lib
    │   api-call.js
    │   download-video.js
    │   edit-video.js
    │   parse-text.js
    │   screenshot.js
    │   text-to-speech.js
│
└─── node_modules
│
└─── output
│
└─── screenshots
│
└─── videos
│
│   .gitignore
│   index.js
│   package-lock.json
│   package.json
│   README.md

The index.js file has all of the logic for the actual CLI part of the app. It's also importing modules from the lib folder. Each file from lib is exporting one function, they're either being used in index.js or being used in another lib file. The audio, output, screenshots and videos folders are all used to store files generated by the app.

This is by far the largest Node app I've built. With that, initially I didn't know exactly the best way to structure my app. What gets split into a seperate file? Where should I keep these seperate files? How do I share code between files? After some googling and probably 5-6 stackoverflow threads later, I decided that index.js should do as little as possible. Currently all index.js is doing is greeting the user, grabbing user input and calling the functions imported from lib.

I'll probably do a blog post for index and each lib file individually or in groups that make sense. If you have insight into how I could better structure my app I'd love to hear your input and if you have questions about how I structured the app I'll try my best to get back to you in the comments.

Technologies

When I decided to build this project, I had to do quite a bit of research into how I could replicate the principles of Lewis' project in JavaScript. Here is the list of npm packages I'm currently using:

Inquirer is used to prompt and receive user input. It's pretty simple to use and gets the job done but plain text in the terminal is super boring, so I'm using Chalk. Chalk allows you to style text that is logged to the terminal. It's also super easy to use, I only really had to glance at the docs before getting what I wanted out of it.

Node-fetch is being used so that I can make requests to Stackoverflows API to get question and answer data. Google Cloud text-to-speech is taking text that's been parsed from html into plain text and returning mp3 files of the question and answers being passed in.

Puppeteer is being used to grab screenshots of the questions title, body and answers.

To download a youtube video Ytdl-core is about as easy as it could get with code.

Lastly I have Etro listed but I'm not having the best luck with it so far. Etro is used to edit video with JavaScript, but there isn't a ton of examples to reference as it's a relatively new package. I've looked into a few other solutions for editing the video with JavaScript but there aren't a ton of options.

If you have any insight into Etro, or similar packages that will let me edit together all of the components I have I'd love to hear about them. As it stands right now I have all of the pieces to the puzzle, I just need a way to fit them all together.

Thanks for reading, I'll have another post going into more detail soon. In the mean time I'll do my best answering questions in the comments and of course if you have any advice I'd love to hear it.

How I use TikTok as a developer

Kade Esterline — Tue, 05 Jul 2022 20:43:42 +0000

Why TikTok

If you're under the age of 25 you've probably been on TikTok for a couple years. If you're not you've probably begrudgingly downloaded it and either not understood it or spent hours of your life watching sub 1 minute long videos of people walking up milk crate stairs, and dancing to songs you love that have now been dubbed as just another 'TikTok song'. Maybe you hate everything TikTok is doing and you wish people would stop using it. Sadly for you, TikTok continues to grow year over year with backlinko.com stating that of the roughly 4.8 billion internet users, 20.83% of them are using TikTok. The platform has spawned numerous careers in everything from music and comedy and other entertainment niches to education, finance, personal development and many more. Instagram was the king of my younger years, but as even Instagram, Facebook, Snapchat and Youtube try to implement features to compete with TikTok, it's still the clear winner in my opinion.

What I post on TikTok

I started about a month ago posting short videos of my solutions to Leetcode style problems. I would solve a problem on Leetcode, record a video of me typing out the solution and use TikTok's voice over feature to walk through the steps to my solutions. After a while I decided I could use TikTok to repurpose some of my blog posts from Dev.to and condense them into short explanations of various technologies, how-to's and technology spotlights. I've been posting every day for 4 weeks as of today and I've gained just over 750 organic followers. I'm looking forward to continuing the occasional leetcode solution while sharing some of the tools I use everyday while I'm coding.

How I Make TikToks

Right now I'm using OBS to screen record and I use my MacBooks webcam when I want to make an appearance in my videos. I then put the video in google drive, download it to my phone and post it. I try not to spend more than 20 minutes on the whole process of figuring out what I'll say, recording the video and uploading it. If you were to start, I'd recommend taking a little bit of time to either have a big stockpile of leetcode problems you could walk through or you could just have a big list of technologies to explain.

There are also probably tons of articles/videos that will try to teach you exactly how to grow on TikTok. I don't want to talk too much about that because it's not something I know a lot about, but staying consistent and making the type of content people want to watch will really help you grow. If you post at the bare minimum of once a day and try to post with a lot of variety of topics, lengths and at different times of the day, you'll eventually have a good idea of what people want to see and when. The problem with focusing too much on 'hacking the algorithm' is that the algorithm is going to change constantly and letting analytics guide you will be the best option.

Conclusion

If it wasn't easy to 1) grow an audience on TikTok, and 2) convenient/fast to post on TikTok, I wouldn't be taking the time to post every day. I don't think it makes sense for everyone, but if you have the time you can easily grow an audience organically. I haven't told anyone my username, and I don't think I really intend to. I'm using TikTok to share resources and knowledge just like I would with a traditional blog post. I don't want to blow up on TikTok, I don't think I have the personality for it. I do however really enjoy sharing knowledge and answering questions when they come up.

Hopefully this was somewhat helpful, and I encourage you to start posting on TikTok. If you do start, or if you're already posting on TikTok leave your username in the comments so I can check it out. Feel free to check out some of my other blog posts and thanks for reading.

Recursion in JavaScript

Kade Esterline — Mon, 27 Jun 2022 19:44:13 +0000

You've probably heard of recursion and know that it involves writing a function that calls itself again. At first this can be kind of hard to wrap your head around, but I'm going to try to break it down as best as I can.

The Call Stack

First let's talk about how the call stack actually works in JavaScript. The call stack is a stack data structure, just like it sounds. I like to think of the call stack as a stack of papers. Imagine every time a function is called a piece of paper is added to the stack. JavaScript can only work from the top of the stack down, so as more and more functions get called inside of other functions that stack grows in size. If you had a function called main that called a second function inside of itself called nested, the call stack would first have main put in the stack, then when nested is called it's put on top of main. Once nested is finished being evaluated and returns it's value to main, main can finish being evaluated and also pushed off the stack. Here's what that would look like:

Recursive vs Iterative

Now let's circle back to recursion. We know that every time we call a function it's put on top of the call stack until it's evaluated and then popped off the top of the call stack. With recursion, you just keep calling the same function and keep pushing it onto the call stack. Obviously you can't just keep calling the same function over and over with no limit, you'll overflow the stack.

To make sure our recursive functions stop being called it's actually pretty similar to a loop. You make a condition that would stop the function from being called at a certain point(this is just like using i < arr.length; in a for loop). You also have to make sure that every time you call the function recursively that it's getting a different value(this would be kind of like i++ but not really, you'll see in a moment). So if recursion is similar to a loop why not just iterate? Recursion while confusing at first is very concise and often requires less lines of code to do the same task. Here's an example of the same problem done both iteratively and recursively. Both functions will find the factorial of a given number.

You're probably familiar with a solution like this, there isn't really anything wrong with this solution. It'll work just fine.

As you can see the recursive solution might be a little hard to understand at first. For one, it's a lot less code which is great because it means you can write less code for the same result. At the same time though, it can be hard to see how calling the function within itself is actually working. When returning num * recursiveFactorial(num -1) the original function waits for this new call to resolve. This continues until the base case is met. So, calling recursiveFactorial(3) is the same as calling 3 * 2 * 1.

Resources

For more information on recursion and the call stack you can checkout these links:

I'll do my best to answer any questions in the comments below and feel free to check out some of my other blog posts as well. Thanks for reading!

Get Started With Ruby

Kade Esterline — Thu, 14 Apr 2022 18:10:27 +0000

What is Ruby?

Ruby is a dynamically typed, interpreted, object oriented programming language. Ruby was created by Yukihiro 'Matz' Matsumoto in Japan in the 1990's. Ruby has a very minimal syntax making it very readable and easy to write. If you're already familiar with another object oriented language like Python, learning Ruby will probably come very quickly. Ruby along with the Rails framework can allow you to build back ends very quickly. For a deeper dive on Ruby you can check out this link. For more information of Rails you should check out this link.

Installing Ruby

To install ruby head over to the ruby-lang site and follow the instructions for your operating system. I use a Mac and Homebrew so all I had to type in my terminal was brew install ruby. Windows and Linux will have slightly different ways to install so again just follow the instructions linked above and you should be fine. After installing ruby you should run the command ruby -v to check to make sure everything installed properly. If you use VS Code you can install this extension to help with things like syntax highlighting, as well as auto complete and formatter support.

Using IRB

Ruby comes with its own REPL that can be used in the terminal called IRB. If you have ever used Node.js, IRB is pretty similar. To use IRB just type irb into your terminal after installing ruby, you can then run Ruby code. You can test this out by typing puts 'Hello, world!' into an IRB session, you'll see that this returns nil after printing 'Hello, world!'.

Using Ruby

To give an example of how you can use Ruby, I'll show you how to solve Fizz Buzz. While this won't be an example of how to write object oriented code, it will give a very brief overview of syntax. If you're not familiar with Fizz Buzz you can check out the leet code question here. Ruby has a pretty easy to read syntax so if you have experience with a similar language you'll probably be able to follow along fairly easily but if not I'll include comments to explain what's going on.

First, lets create a new directory by typing mkdir ruby-fizzbuzz into the terminal. Next you can move into the new directory by typing cd ruby-fizzbuzz into the terminal as well. Now that you're in the new directory run the command touch fizzbuzz.rb, to create a new ruby file. After creating the file you're good to open the directory in whatever code editor you use.

First, let's define a fizz_bizz method.

#Use def to define a method, you don't need ( ) around parameters.
def fizz_bizz n
#Always remember to 'end' your methods.
end

Next, lets create an empty solution array.

def fizz_buzz n

    answer = []

end

We'll also need to set up a loop to iterate through a range of numbers. There are a ton of ways to loop in Ruby. I did a whole post on looping in Ruby that you can read here. This is also a pretty good resouce for more information on different types of loops in Ruby.

def fizz_buzz n

    answer = []
    #this is a very simple way to loop in ruby
    n.times do |i|
    #remember to always 'end' loops as well!
    end

end

Now all we need to do is add some conditional logic to check each value in the range given

def fizz_buzz n

    answer = []

    n.times do |i|
        #check if value is divisible by 15
        if (i + 1) % 15 == 0
            #shovel in 'FizzBuzz'
            answer << 'FizzBuzz'
        #check if value is divisible by 3
        elsif (i + 1) % 3 == 0
            #shovel in 'Fizz'
            answer << 'Fizz'
        #check if value is divisible by 5
        elsif (i + 1) % 5 == 0
            #shovel in 'Buzz'
            answer << 'Buzz'
        else
            #if none of the above is true, shovel in value as a string
            answer << "#{i + 1}"
        #always 'end' conditional statements
        end
    end
    #print array to terminal
    puts answer
end
#call the function
fizz_buzz 100

And that's really all you have to do! This solution could still be refactored but is probably the first solution a lot of people would come up with when approaching the problem with Ruby. To Run the code just make sure you're in the right directory and run ruby fizzbuzz.rb. To Check it out in a REPL you can check out [this] link.

Uses for Ruby

You'll hear all over the internet that Ruby is dying or that it is already dead. While Ruby is no longer being used as much as other languages it is still being used. There might not be as many jobs for Ruby in the market that you live in though, and you should probably make sure it's the right fit before diving into learning it. The Stack overflow developer survey is a good resource to see what is actually being used, but you should probably leverage things like indeed, glassdoor and other job posting sites to check for your local market. There are companies that still use Ruby in 2022 like twitter, shopify, hulu and many more. You'll want to pick up the Rails framework which allows for very fast fullstack app and api development.

Resources

Here are a few more resources that may come in handy as you learn more about Ruby:

Get Started With Elixir

Kade Esterline — Tue, 12 Apr 2022 16:40:05 +0000

What is Elixir?

Elixir is a dynamically typed, compiled, functional programming language built on top of the Erlang virtual machine best used for applications that are highly concurrent. Erlang was created in 1986 by Ericcson to create more reliable phone switching. Elixir was created on top of the Erlang Virtual Machine called BEAM, which allows Elixir to have the same functionality as Erlang while having a different syntax and features. Elixir uses a very Ruby like syntax that you'll see in the examples below. To learn more about the difference between functional and object oriented programming I have resources linked at the bottom of the article.

Installing Elixir

To install Elixir, head over to this link and follow the instructions depending on your operating system. Since I'm on Mac and use Homebrew all I had to do was type brew install elixir into the terminal to install everything I needed. If you use VSCode you can also install this extension to help with things like auto completion and syntax highlighting.

Using IEX

Elixir comes with its own terminal based REPL called IEX that can be used to test functions. If you are familiar with Ruby this is just like IRB or if you have a JavaScript background it would be similar to using Node in the terminal. To use IEX type IEX in your terminal. After starting your REPL to make sure it's working try typing IO.puts "Hello, world!" in the terminal, this should output two things, first you'll see the string Hello, world! printed then you'll see :ok returned.

Using Elixir

As I said earlier, Elixir uses a Ruby like syntax. If you have spent any amount of time building projects with Ruby, learning and reading Elixir will probably come pretty quickly. As an easy walk through I'll show you how we can create a program that solves FizzBuzz, the code for this demo came from here. I wish I could say I learned Elixir in 3 days but I've only just scraped the surface, check out that link if you're interested in another possible way to solve fizzbuzz and I'll also have a link with more solutions at the bottom of the article. This link has a working version of what we're after if you're not familiar with FizzBuzz.

First, create a new directory for this file. To do this you can type mkdir elixir-fizzbuzz in your terminal. Next, you'll need to change directories into your new directory by running the following command cd elixir-fizbuzz.

Now that you're in your new directory you can create a new Elixir file. There are a couple different file extensions you can use to create an Elixir file, each with a slightly different use case. This stack overflow question has a good answer for when to use which type of file extension. For this example we'll create a file called 'fizzbuzz.exs', to do this you'll need to run the command touch fizzbuzz.exs.

After creating the file open the directory in your text editor of choice.

First we'll create a module

#Define module
defmodule Solution do
end

Next we'll start writing our functions

#Define module
defmodule Solution do
    #Define type specs
    @spec fizz_buzz(n :: integer) :: [String.t]
    #Define FizzBuzz function
    def fizz_buzz(n) do
        #Loop through range of numbers
        for i <- 1..n do

        end
    end

end

Now we can call a private function that checks whether or not each number is divisible by 3 and/or 5.

#Define module
defmodule Solution do
    #Define type specs
    @spec fizz_buzz(n :: integer) :: [String.t]
    #Define FizzBuzz function
    def fizz_buzz(n) do
        #Loop through range of numbers
        for i <- 1..n do
            #Call Result() for each number in the range
            result(i)
            end
        end
    end
    #Handle divisble by 3 & 5
    defp result(n) when rem(n, 15) == 0, do: IO.puts("FizzBuzz")
    #Handle divisble by 3
    defp result(n) when rem(n, 3) == 0, do: IO.puts("Fizz")
    #Handle divisble by 5
    defp result(n) when rem(n, 5) == 0, do: IO.puts("Buzz")
    #Handle not divisble by 3 or 5
    defp result(n), do: IO.puts(Integer.to_string(n))

end

#Call function fizz_buzz/1 with range of 100 from Solution module
Solution.fizz_buzz(100)

Now that our functions are all defined lets run our code, to do that in your terminal type the command elixir fizzbuzz.exs.

Uses for Elixir

If you check the Stack Overflow developer survey you'll see there aren't really a lot of developers actually using Elixir professionally, with just 1.74% of respondants saying it's a language they use. It is however top 5 in the loved vs dreaded category, meaning most people that use it love it. Elixir is often used on projects that need to support a very large user base all at once, as well as projects that require fast responses. As of right now on there are 12 companies on the Elixir lang website that are currently using Elixir as a solution to a variety of problems. For example, Discord uses Elixir as the foundation of its messaging service which supports 100 million monthly active users. Change.org uses Elixir as they found it faster than the comptetion. There hasn't been a lot of uptake in Elixir or functional programming as a whole, so it may not be the most useful skill to learn if you want to get job ready for as many jobs as possible. If instead you are trying to figure out how you can create an app that is highly scalable and performant, Elixir may be a good option for you.

Resources

Here are a few resources that may come in handy as you learn more about Elixir:

What is Pseudo CSS?

Kade Esterline — Wed, 30 Mar 2022 18:06:47 +0000

Pseudo Classes in CSS

When writing CSS you can use a variety of selectors to style different elements of your HTML, these can be things like the class or ID of the element or even the element itself if you want all of that particular element to styled a certain way. Styling using normal selectors is great, but if you want to your styling to change depending on the state of the element you'll want to use pseudo classes. You've probably already seen things like :hover or :focus, these are pseudo classes. There are a ton of different pseudo classes in CSS that you can use to make your elements more dynamically styled, in this article I'll go over a few different kinds of pseudo classes and when to use them. Here are the MDN Docs on using pseudo classes in CSS, it goes into much more detail and has every pseudo class available. https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

User Action Pseudo Classes

Some pseudo classes will change styling when certain actions are preformed by the user, for example when they hover over a button or when an element in focused. As an example I'll show how you can make a buttons styles change when ever a user hovers over it.


button {
    background-color: #fff;
    border-radius: 5px;
    height: 40px;
}
button:hover {
    background-color: #000;
    color: white;

}

Here is a link to a code pen https://codepen.io/kadeesterline/pen/RwxZjVO to check it out for yourself. By using :hover you can change styling of the element when the element has the mouse over it. This will allow you to write less code in general, not having to use JavaScript to change class names or styles of an element and just relying on CSS will make everything more readable and reusable.

Tree-Structural Pseudo Classes

Tree-Stuctural pseudo classes allow you to target elements based on their location within the document, for example if you wanted to style the first or last child element of an element. As an example I'll show you how you can make change just the first and last list elements of a list have different styles than the rest of the list items.


ul {
  color: #999
}

li:first-child, li:last-child {
  color: #222
}

Here is another code pen https://codepen.io/kadeesterline/pen/YzYxEJo to show how the code above actually changes the styling of elements. When using :first-child or :last-child It will change that element every time it is the child of another element, so if you want all of the first P tags to change you can just use :first-child to change all of them. This will cut down on the amount of classes you have to added to your code, making it more readable and easier to find what CSS is styling any given HTML element.

Pseudo Elements in CSS

While pseudo classes can be very powerful to cut down on the amount of code you write as well as making your code more readable, even more powerful in my opinion are pseudo elements. Pseudo elements are very similar to pseudo classes but instead of targeting elements based on some kind of state of the element, they style specific parts of the element. Again, styling the first child of an element is great if you want the entirety of the element to be styled a certain way but not as flexible as using pseudo elements to style just the first line or ever the first letter of an element.

When using pseudo classes you use one colon (:hover, :first-child) to target the class. However when using Pseudo elements one colon will work but as a best practice you'll want to use two colons (::before, ::first-line) to differentiate the two. I'll show you a few different examples and include code pens to see how they work in action.

p {
  font-size: 25px;
  color: #999
}

p::first-line {
  font-size: 45px;
  color: #000;
}

p::first-letter {
  color: #0fa;
  font-size: 80px;
}

With this example both the first line and first letter of the P tag are being styled differently than the rest of the element. Check it out here https://codepen.io/kadeesterline/pen/bGararo . While you could achieve this by using spans inside of other elements it is far less code way easier to read and write when you take advantage of pseudo elements to take care of it for you.
Another way you can use pseudo elements is to style elements before or after an element. This code pen https://codepen.io/kadeesterline/pen/bGaraZM will show how this works as well as the CSS included below.


div {
  margin: 0 auto;
  max-width: 60%;
  height: 100px;
  background-color: #0fa;
}

div::after {
  content: '';
    position:absolute;
    top:150px;
    margin: 0 auto;
    height:100px;
    background-color: #000;
    width:60%;
}

Using Both Together

You can chain pseudo classes and pseudo elements together to write less class based CSS and focus more on styling your elements and writing more code in general. While this might not be the most straight forward way to write code it can be very powerful. I found and example here https://www.youtube.com/watch?v=1njdYdfv-Ls&ab_channel=OnlineTutorials that shows how to use both together, and here is a code pen using this example https://codepen.io/kadeesterline/pen/GRyvQoy.

Looping in Ruby

Kade Esterline — Wed, 16 Mar 2022 15:23:00 +0000

Looping in Ruby

An important and powerful concept to understand in any programming language is looping. By using loops we can iterate through arrays and interact with each piece of data in the array until a certain condition is met. If you know how to use loops in another language, like JavaScript, a few of the loops in Ruby will seem pretty familiar. Ruby has several ways to loop and iterate over data. I'll cover them and a few other concepts that may be useful in tandem with loops in this post.

For a more general overview of Ruby you can check out the article I wrote about getting started with ruby here

While Loop

While loops have three parts, the value to be incremented, a condition and an incrementer. Before starting your loop, initialize a variable to be incremented by the loop. Next set a condition for how long the loop should iterate based on the value of that variable. Then add the logic you want to execute for each value in the data set. Lastly increment the variable. In practice this looks something like this

def while_loop arr
i = 0

    while i < arr.length
        puts arr[i]
        i +=
    end

end

This loop will increment through each value of the array passed into it, printing each value to the terminal.

Until Loops

The until loop is like the opposite of a while loop. Instead of incrementing a variable while a condition hasn't been met, the until loop increments until a variable meets a condition. You'll still need a variable to increment, a condition and to increment the variable.

def until_loop arr
i = 0

    until i == arr.length
        puts arr[i]
        i +=
    end

end

The until loop may be easier to follow and read if you aren't already familiar with using the while loop. Instead of having to think of the loop doing something while something is true, you can think of the loop doing something until is true. Both loops do the same thing and can be used in place of one another, it's really up to what is easiest to follow.

Looping with #times

Using #times is similar to using a for loop in other languages, just with a very simple syntax. All you need to loop with #times is the number of iterations you want to execute and what you want to do each time you iterate.

def using_times arr

    5.times do |i|
        puts arr[i]  
    end

end

This loop will iterate through the array 5 times, printing the values of each index to the terminal. Using blocks you can condense the previous method down to one line

def using_times(arr) 5.times { |i| puts arr[i-1] }

Looping with #each

Using #each is a great way to iterate over an entire list of data, like an array, or hash.

def using_each_arr arr

    arr.each { |i| puts arr[i]}

end

def using_each_hash hash

    hash.each { |key, value| puts key, value }

end

Each is pretty straight-forward, it does one function for each item in a list. It doesn't have to have a condition making it dependent on the length of the whole list.

Looping with range

When using #times to iterate it starts counting from 0, using a range and #each allow us to start incrementing from a different number as well as put a set stop point on a loop using #each.

def using_range arr

    (4..15).each { |i| puts arr[i]}

The method using_range in the example above will allow us to start at 4 and go until 15.

Using next in a loop

Using the next keyword in Ruby allows you to skip values in an array based on a condition. You can use next with any type of loop.

def using_next arr

    5.times do |i|
        next unless  i.odd?
        puts arr[i]  
    end    

end

This loop is almost the exact same as the previous example showing how to use do loops, the only difference is this loop skips all even indexed values.

Stopping a loop early

By adding a break condition to a loop we can stop a loop early before the initial condition is met or before going over all the elements in a list. This will end the loop immediately.

def using_break arr

    arr.each do |i|
        break if i > 5
        puts arr[i]
    end

end

Comparison to JavaScript

As you can see a lot of the loops available in Ruby are similar to Javascript with a different syntax. Personally I enjoy and prefer the ruby syntax, it's a lot simpler and much more straight forward to write.

For example in Javascript to write a for loop we have to define a variable to increment, a condition and an action to execute at the end of the loop. This would look something like this

function forLoop(arr) {
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i])
    }
}

While in Ruby we could just write something like this

def do_loop arr

    arr.length.times do |i|
        puts arr[i]
        end

end

Ruby has a much simpler syntax, it also has methods like until that give the same result as other methods but with a syntax some may find more readable. In general a ruby loop will have less syntax needed to get the work done, as well as often times being more readable.