Forem: Mario Lemus

I'll code a TikTok video scrapper, so let me tell you why

Mario Lemus — Sat, 27 Aug 2022 02:35:18 +0000

Yeah! as the title of this article suggests. I will be creating a TikTok video scrapper, so the biggest question here, is why?

To be completely honest with you guys. I want to start uploading videos on YouTube, but growing a YT channel from scratch is actually hard and takes a lot of time and dedication " which I'm surely lacking "

So after I watched a guy over on TikTok suggesting re-upload TikToks to youtube shorts to get a bunch of subscribers faster, and later deleting them. In order, to start uploading your own content. I gave it a try and Oh Lord! to my surprise It actually works one of my videos got 9k views on the first-day, and even I got more than 20 subscribers on the first day, as well.

Here is some proof:

Here is my channel name and link as well: YT got memes?, by the way, I upload memes:

So when I see this working I decided to automate the process so I can accelerate the process even more, and after thinking a lot I decided to do it, and that's why you see this post. Because I came to a conclusion and of course seeing that there is an ongoing contest by Hashnode.

I decided to create a series following the process of becoming a YouTuber in a short period of time of course, all the series will be more oriented to the technical standpoint and not the marketing one (but if you want something related to marketing in tech, comment it).

So to close the introduction of this series, I want to spam you with my personal blog in which I will be updating the series faster than I will do in Hasnode.

😝⚡ Here is the link: https://www.thismar.xyz/

Why I can't decide how to convert a string into a number in JS

Mario Lemus — Sun, 07 Aug 2022 23:09:00 +0000

As mentioned in the title of this post. We will be exploring a few methods you can use to cast strings into numbers and avoid being trapped in a hell of methods.

parseInt( ) vs parseFloat( )

First of all, when talking of string casting we can't avoid mentioning these very well-known methods.

So, for the ones who are new to javascript, let me tell you, that these methods are used to convert a string into an integer number "parseInt( )" or a float number "parseFloat( )" respectively.

But, there is a tiny problem with both, you have to be aware of the type of number you want to operate with from the beginning because parsing to an incorrect number can produce a lot of mistakes, that can be super harmful to your business.

const stringNumber = "45.1"

// output -> 45 (is not a string anymore)
const int = parseInt(stringNumber) 

// output -> 45.1 (is not a string anymore, and it is float)
const float = parseFloat(stringNumber)

Number( )

This is directly an instance of the javascript's Number class.

Number( ), is one of the most recommended ways to parse strings in numbers since is legible enough to be in large-scale code bases and its functionality can be clearly understood by its name also formats a string in Integer or Float automatically.

const stringIntegerNumber = "45"
const stringFloatNumber = "45.1"

// output -> 45 (is not a string anymore)
const int = Number(stringIntegerNumber)

// output -> 45.1 (is not a string anymore, and it is float)
const float = Number(stringFloatNumber)

Unary operator (+)

Maybe in this selection of methods to transform a string into a number. This is definitely the weirdest, since isn't actually a JavaScript method or class but, instead a special operator.

As Number( ), the unary operator does the same functionality, but it has better performance if the people you work with have never read JavaScript's documentation this way can be not enough legible.

const stringIntegerNumber = "45"
const stringFloatNumber = "45.1"

// output -> 45 (is not a string anymore)
const int = +stringIntegerNumber

// output -> 45.1 (is not a string anymore, and it is float)
const float = +stringFloatNumber

If you don't understand what's going on let me tell you that this method works by adding a "+" operator immediately before a string with a numeric value (if there are spaces between "+" is considered the classic sum operator)

If you have more methods you feel free to comment on them.

How is really like to be a self-taught dev (harsh truth)

Mario Lemus — Thu, 28 Jul 2022 19:54:00 +0000

Well, as the title suggest I am actually a self-taught dev, so through this post, I will try to explain from my perspective the pros and cons of being one.

Pros

You become more disciplined (generally talking, even in life)
You learn whatever you want, without being subjected to following any scholarly path with unnecessary topics
You can study at whatever time of the day

*** I didn't explain any of the points above simply because they are self-explanatory**

Cons

You don't have tutors and even classmates, which makes it very difficult to determine your own capabilities and weaknesses
You don't have any guide, so you keep learning unnecessary stuff, and wasting your time
You get frustrated after a time of being self-taught because when you explore a topic you almost always find out that there are a lot of other issues you don't know and even complete ignore, which makes really hard to know if you are able to fit in a job position (finally declining in impostor syndrome)
If you are completely self-taught and you don't have any related diploma, you have to be the best developer while trying to search job, otherwise you are not going to be taken seriously by anyone (mainly, while trying to find your first job)

**Being entirely self-taught is harder than it seems, and I don't really recommend **

Conclution

If you are able to study at a university, or even a Bootcamp do it. You will surely avoid a lot of troubles, and if you decide to go self-taught, good luck and keep strong even if it is a hard way to get the knowledge I have to say that it is gratifying.

Simplified Next.js, The modern React.js Framework #2

Mario Lemus — Wed, 02 Mar 2022 21:34:44 +0000

Built-in functionalities (Navigation, Link, Code splitting, and prefetching)

This is the continuation of the previous post, where we get started with the installation and basic info you need in order to use Next.js, for your projects. In this new chapter, we´ll be learning some Next.js, built-in useful basic functionalities.

Navigation between pages

Here you see one of the most basic, but useful Next.js functionalities. But You will not be surprised after see in it, because is something I showed you in the previous Next.js related post here you have it if you haven´t seen it yet 👏👉👉Simplified Next.js, The modern React.js Framework #1

What I am talking about is simply the structure of files that go into the Pages/ folder, and that is used instead of the react-router-dom library to navigate in your web app user views.

Here you have it 👇🙌:

files structure

Pages/index.js → (is a file that represents your homepage, (“ / “, in your browser URL bar)and is created by default by Nex.js)
Pages/products.js → (is a normal view, and represents (“ /products “, in your browser URL bar) )
Pages/about.js → (is a normal view, and represents (“ /about “, in your browser URL bar) )
Pages/contact.js → (is a normal view, and represents (“ /contacts “, in your browser URL bar) )

When you created these components (about.js, contact.js), automatically you have available the same file’s name as your routes and you can use them directly on your page like this: 👇

Link Component

If you have previously used React.js, this will be very familiar to you, after all, is a component that makes React.js normally behave as a SPA application, and in Next.js the functionality doesn´t work differently either. The unique difference between both is that in React you normally install react-router-dom from npm and in Next.js is something that already comes with it.

import Link from 'next/link'

And you use it like this:

<Link href="/about">
  <a>about page</a>
</Link>

Is important to notice that an anchor 👉👉👈👈 HTML tag is used in the Link component to work correctly as a SPA.

Code splitting and prefetching

If you know React.js lazy loading this basically means Next.js automatically does the lazy loading process and you don’t have to care about it. and if you ask, how do you control when the code loads when is needed, let me say you that again Next.js takes care of it, by using prefetching a functionality that automatically detects when a is on the viewport and prepares itself to load the component the user is requesting.

If you don’t know what the heck, is React lazy loading, then let me explain you quickly. Lazy loading is a technique to optimize your code by splitting the code into small chunks of information that does not load automatically after the page first renders in the browser, avoiding unnecessary code loading in the client and most importantly avoiding excessive loading times for users.

That it´s for today. Don’t forget if you want to help me do it via👌🧐
☕BuyMeACoffee.☕

Simplified Next.js, The modern React.js Framework #1

Mario Lemus — Wed, 02 Mar 2022 17:24:40 +0000

Getting started

In this series of posts, I will be teaching you. How to easily start learning Next.js. By simplifying the learning process, being super practical and avoiding over-technical terms.

I hope you, like it. And give it a try, maybe you will discover something awesome and fall in love with this modern React.js Framework .🐱‍👤💕

To begin with, execute the following command on your terminal:

npx create-next-app@latest

Or:

yarn create next-app

After the installation finish, go to the folder you created and open it on your favorite IDE. Then execute the following command, to start the development server.

npm run dev

And voilà, you just begin using Next.js 🎉🎉✨

If you want to begin personalizing your views.

Go to Pages/index.js

There you will see your home page component with some Next.js extra info.

By the way, by putting 👉👉.js👈👈, files into Pages/, folder. You automatically are using built-in Next.js routing, so YOU DON´T REQUIRE REACT-ROUTER-DOM INSTALLATION AND CONFIGURATION.

Here you have it. 🙇‍♂️👇

Create about.js into Pages/ and write some test data, like Hello World! From About File.
Then go to your browser and type, in your URL bar, localhost:3000/about.
Then you will be able to see automatically your about.js info displayed in your browser.

Well, this is the end of the first part 😭😫, If you would like to support my content go to: BuyMeACoffee, and buy me a coffee! 😁😁👌🙌