DEV Community: Eliahu Garcia Lozano

How to Teleport in Vue 3

Eliahu Garcia Lozano — Tue, 02 Feb 2021 03:34:14 +0000

A few days ago I decided it was time for me to update myself to the new version of Vuejs, Vue 3. And today I wanted to share with you the first thing I learn that version two didn't have, the teleport component.

It's well known that modern web applications fit in a div.

// Detect dark theme var iframe = document.getElementById('tweet-1346423883285499904-508'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1346423883285499904&theme=dark" }

Ok, React uses #root and Vue uses #app but they just do the same, which is inject the JavaScript code into that div. So here it comes the question:

What if I have an element I want to display as a sibling of the `#app` element in the html?

Sometimes we have a loader or a modal (aka popup) component that is not part of the app, but anyway, it will be injected inside the #app element. Thus, the html will look like this:

<html>
  <body>
    <div id="app">
      <!-- Other injected HTML here -->
      <div class="loader">
        <!-- HTML for the loader goes here -->
      </div>
    </div>
  </body>
</html>

Let's teleport!

To use the teleport component in your app, you need to first, add a sibling to the #app element in the html.

<html>
  <body>
    <div id="app"></div>
      <!-- built files will be auto injected -->
    <div class="loader"></div>
      <!-- loader component will be injected here -->
  </body>
</html>

Once you've done that, go to your .vue file and use the teleport component:

<template>
  <teleport to=".loader" v-if="showLoader">
    <Loader />
  </teleport>
  <!-- The logic of your component goes below -->
</template>

And that's it. Now, when the showLoader condition is met, the loader will show in the specified html element. Notice that I used a CSS selector so if the element was an id, I could have done it like this: <teleport to="#loader" v-if="showLoader">

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Trim Your Inputs!

Eliahu Garcia Lozano — Wed, 09 Dec 2020 10:58:39 +0000

Definition of trim, "To cut away unnecessary parts from something." - Oxford Dictionary.

Sometimes, validating forms in JavaScript can be a tedious task for a developer. You have to check many things. For instance, that the values given are of the type you expect them to be (string, number, object...), that they are not undefined or null. And after all that validation, you realize that a user typed an empty string. 🤦‍♂️

One of the most common issues about empty strings a developer can face is the one that has spaces.

console.log(myInput)
> '      '  // 👈 Empty String

How can you prevent this from happening? In JavaScript, there are five different methods (actually there are three and two aliases) you can use. Let's check what they do.

Use Case

In a login form, you have an input where the user needs to enter a username like the one below.

👆 Did you notice the whitespace at the beginning and the end of the input?

If we have a look at our code, the input would be like this:

<input class="username" placeholder="Enter Username" type="text">

And the JavaScript like this:

const userNameInput = document.querySelector('.username')

console.log(userNameInput)
> '   Eliahu Garcia Lozano   '

Time to get rid of the whitespaces 🧹.

TrimStart and TrimLeft

These two will remove the whitespace from the beginning of a string.

console.log(userNameInput.trimStart())
> 'Eliahu Garcia Lozano   '
console.log(userNameInput.trimLeft())
> 'Eliahu Garcia Lozano   '

TrimEnd and TrimRight

These two will remove the whitespace from the end of a string.

console.log(userNameInput.trimEnd())
> '   Eliahu Garcia Lozano'
console.log(userNameInput.trimRight())
> '   Eliahu Garcia Lozano'

With these methods, we either removed the whitespace from the beginning or the end of a string but, what if you need to remove the whitespace from both sides?

trimStart and trimEnd are methods while trimLeft and trimRight are aliases of those methods.

Chaining the methods

You can use them together to get the desired result.

console.log(userNameInput.trimStart().trimEnd())
> 'Eliahu Garcia Lozano'
console.log(userNameInput.trimRight().trimLeft())
> 'Eliahu Garcia Lozano'

Ok, maybe it is a little bit ugly I know. Let's check the last method, actually the one I use.

Trim

Just like chaining methods, trim will remove the whitespace from left and right; plus, your code will look cleaner. 😅

console.log(userNameInput.trim())
> 'Eliahu Garcia Lozano'

Validating the input

In many places I've seen this kind of string validation:

if (userNameInput !== "") {
  // do something
}

The problem with this is that the user may enter whitespace.

Now that we know how to trim the value of the input, let's see how to implement it in our form validation.

if (userNameInput.trim() !== "") {
  // do something
}

Do you see the difference?

Conclusion

We saw how to remove the whitespace from just the beginning or the end of a string as from both sides at the same time.

Remember:

.trimStart() & .trimLeft() will remove whitespace from the left.
.trimEnd() & .trimRight() will remove whitespace from the right.
.trim() will remove whitespace from both the left and the right side.

From now on, Trim Your <Inputs>! (if you didn't before).

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Cover Picture by Isra E on Unsplash

Default Function Parameters

Eliahu Garcia Lozano — Mon, 07 Dec 2020 17:12:25 +0000

We always have to validate if the arguments passed in a function have a value or they are undefined but, do we really?

Introduction

In my last post, I talked about Destructuring Assignment In A Function Parameter and why it is handy when you have optional parameters in a function and don't want to pass undefined or null.

With that been said, what if you have a function where all the parameters are required? Again, since ES2015 (aka ES6) this can be easily implemented. Let's dive in.

Use Case

If you take a Tip Calculator project as an example, you probably will need always the same parameters:

Bill Amount.
Number of People.
Service Quality.

The function you'll need would look like this 👇

function calculateTip(totalBill, numOfPeople, serviceQuality) {
  // Your validation here
  // Your code here
}

console.log(calculateTip(50, 2 , 0.2))
// 5.00

Inside the function, you'll have to do all the calculations AND all the validation; plus, most of the time I go with the same friend (2 people) and leave the standard tip (20%).

In this case, the only parameter that will be changing all the time will be the bill amount.

So, let's give numOfPeople and serviceQuality a default parameter:

function calculateTip(totalBill, numOfPeople = 2, serviceQuality = 0.2) {
  // Your code here
}

console.log(calculateTip(50))
// 5.00
console.log(calculateTip(75))
// 7.50

Now, just when someone else is joining, or we want to leave a different tip percentage, it will be necessary to pass the rest of the arguments.

Conclusion

You don't really need to check if the argument in a function is undefined, you can create a default value for it.

When a different value is provided, the default value will be overwritten.

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Destructuring Assignment In A Function Parameter

Eliahu Garcia Lozano — Mon, 07 Dec 2020 17:08:11 +0000

Have you ever passed an argument as a null or undefined in a function? Since ES2015 (aka ES6) you don’t have to. You can use JavaScript destructuring.

Use Case

We all have this Utils.js file in our projects where we have all kinds of functions that will be used all over the project. Imagine you have a To-Do app and one of those functions was addTodoItem and you had to call this function in different places.

Function declaration would look like this:

function addTodoItem(title, description, dueDate) {
  // Your code here
}

Before calling the function, see the characteristics for each parameter:

Title => required.
Description => !required.
DueDate => !required.

Let’s add a few items to the list now.

addTodoItem('Shopping List', 'eggs, milk', '30-11-2020')
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem('Call Mom')
> { title: 'Call Mom' }
addTodoItem('Pay Bills', undefined, '01-12-2020')
> { title: 'Pay Bills', dueDate: '01-12-2020' }

If we pay attention to the last example, we can see that on the first day of the month I need to pay my bills. 🤣

Jokes aside, we see that I had to pass the second value as undefined because the function is expecting the description as the second parameter.

For this specific example, if I wanted to pass a dueDate, first I would have to check whether the description is undefined or not before I call the addTodoItem function.

Here is where using destructuring will be very helpful.

This is how the addTodoItem would look now. 👇

function addTodoItem({title, description, dueDate}) {
  // Your code here
}

Let’s add again the same items as before.

addTodoItem({ title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' })
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem({ title: 'Call Mom' })
> { title: 'Call Mom' }
addTodoItem({ title: 'Pay Bills', dueDate: '01-12-2020' })
> { title: 'Pay Bills', dueDate: '01-12-2020' }

If you pay attention to the last item added, you’ll see that there was no need on adding the undefined for the description. Just title and dueDate.

Bonus!

There is more: not only do you not need to pass undefined anymore, but you can even change the order of how you pass the arguments and it will still work.

addTodoItem({ description: 'eggs, milk', dueDate: '30-11-2020', title: 'Shopping List' })
> { title: 'Shopping List', description: 'eggs, milk', dueDate: '30-11-2020' }
addTodoItem({ title: 'Call Mom' })
> { title: 'Call Mom' }
addTodoItem({ dueDate: '01-12-2020', title: 'Pay Bills' })
> { title: 'Pay Bills', dueDate: '01-12-2020' }

Conclusion

That’s it! We saw how to use destructuring when declaring a function and how to call that function and provide the arguments.

Remember that you can get rid of the undefined or null since the order of the arguments doesn’t matter.

PS. Remember to pay your bills. 🤣

If you found it useful, please like, subscribe, and share the knowledge.

You might like what I share on my Twitter too.

Copyright Up To Date (The Automate Way)

Eliahu Garcia Lozano — Tue, 06 Oct 2020 05:05:02 +0000

Let's be honest, outdated copyright disclaimers on a website looks bad. Looks like the website it's unmaintained on many levels. On the other hand, you don't want to manually update it every 1st of January on every website you own right? Let me help you automate this task with 2 lines of code. If you want to know more about the importance of updating your copyright dates I found this post with a more in-depth explanation.

First, let's create a basic HTML template where we will have our copyright disclaimer at the footer:

<body>
  <header>Lorem ipsum dolor sit</header>

  <main>Lorem ipsum dolor sit amet consectetur adipisicing elit.</main>

  <footer>Copyright © <span id="copyright"></span>, My Company Name</footer>

  <script src="app.js"></script>
</body>

And then, our javascript will look like this:

const copyright = document.querySelector('#copyright')

copyright.innerHTML = new Date().getFullYear()

That's it, you are cover now. 😎

Bonus tip:💡

In case you need a range of years instead of a single year in your copyright disclaimer, you can easily tweak the above code.

<footer>Copyright © <span id="copyright">2010 - </span>, My Company Name</footer>

const copyright = document.querySelector('#copyright')

copyright.innerHTML += new Date().getFullYear()

Thank you for reading, if you like my content, you can always find me on Twitter @eligarlo.

My Journey Into Tech (In A Foreign Country)

Eliahu Garcia Lozano — Fri, 04 Sep 2020 08:34:19 +0000

With my salary, we had enough to cover the monthly expenses, but my wife decided to start working so I could study. Pregnant and with our son…she found a kinder garden where she could work and also take our son.

Hi there 👋, after the first two posts of VueJs, The Series 🚀, I wanted to post something about me and my journey into tech.

To give you some context, I'm Eliahu, you can find me on Twitter @eligarlo, I'm from Spain and currently based in Israel. I speak 3 languages (Spanish, English, Hebrew) but my reading and writing skills in Hebrew are just OK (with the help of Google Translate😅). I'm 33 years old, married and father of two wonderful kids. I never had a blog before, this is literally the third post I've ever written in my life! I invite you to keep reading and enjoy my journey.

From Spain

I lived in Spain until the age of 24. I quit studying when I was 18, at that time I thought that studying wasn't for me 😂. I started working as a carpenter. I always loved to build things, to see that, taking parts that apparently don't belong together, I could build something useful. Unfortunately this job did not endure much and after trying as a salesman, the 2008 crisis hit and I decided to leave Spain.

// Detect dark theme var iframe = document.getElementById('tweet-1291645278420951040-216'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1291645278420951040&theme=dark" }

Through England

In Spain you have everything, beach, mountains, hot and cold weather, you name it. It's not very common to live in another country or to travel to different countries as a Spaniard. It is not in the culture (probably for my parent's friends I'll still be the one that lives in Israel).

So, I left Spain and took a flight to Bristol, UK and then a bus to Wells, Somerset. I was like this guy moving from the town to the city. Even though Wells is known to be the smallest city in England, my thoughts were that the world was bigger than what I had imagine.

My English was like Manuel's from Fawlty Towers, but I had a contract with a local hotel to start working as a waiter in their restaurant. As my English improved, I started getting more tasks to do, at some point I ended up covering some shifts as a receptionist.

I met awesome people from different countries, staff and customers. This helped me to better understand other cultures and not feel like that boy coming from the town. I even got to do an Interrail 🚂 trip from Amsterdam to Vienna, through Berlin, Warsaw, Krakow, and Prague.

After a year and a half, I was ready to move on.

To Israel

I always wanted to live in Israel and I arrived in 2012 full of energy. Originally, I thought speaking English was gonna be good enough but unfortunately that wasn’t the case.

The First two years were good, I really enjoyed myself but after that I got my nationality and had to start working (like a real job👔).

In 2015, I went to one of those agencies that find you a place to work. Due to my lack on the local language, the only position I could find was cleaning in a school. It was not the best job in the world but at least I started working at 10am so I could go to sleep late 🦉. That same year I met my wife and got married, she is also Spaniard but from a different city. When school closed for summer vacation, I decided I had to find something else.

During that summer I worked in a cafe, and although I learned some Hebrew there, the salary wasn't great, so I went to the next opportunity. I took a job as animal caretaker in a laboratory of the Hebrew University, Jerusalem.

The job there was basically taking care of the animals (mice🐭, rats🐀 and rabbits 🐇), feed them and clean their cages.

In 2016, whilst working at the lab, my first son was born. I worked there for over a year and then started having problems with my back due to the workload.

Next stop was ticket controller on the light rail 🚆. In this job I picked up Hebrew much quicker as I was always out on the street and talking with lots of people.

Deep Thoughts

In January 2018, I realized I needed a BIG CHANGE. My wife was expecting again (our daughter).

I was working shifts on the light rail, but for years I had had the fear that I wouldn’t be enough, enough to provide for my growing family and enough for myself.

I'm a quick learner, I learned English and Hebrew on the fly, no lessons. I started thinking I could do better, I needed to do better.

⬇Start talking about code here⬇

With the above said, let's talk some code.

I have this friend (with time he became my mentor) that told me that he was a web developer, to be honest I always liked nice effects on websites and things like that, but never thought about what was behind it. I started playing around with the basics for a couple of months and then decided I needed a place to go to boost my learning (my respects for people I see nowadays learning online, alone).

So, I went to the John Bryce academy asking about a course in web development and they offered me a Full Stack Course of one year. I didn't have the money, I didn't have the time, but I had the motivation and a wonderful wife!

// Detect dark theme var iframe = document.getElementById('tweet-1175696731897548801-113'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1175696731897548801&theme=dark" }
// Detect dark theme var iframe = document.getElementById('tweet-1175696733931786240-887'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1175696733931786240&theme=dark" }

With my salary, we had enough to cover the monthly expenses but my wife decided to start working so I could study. Pregnant and with our son (he was staying home with her), she found a kinder garden where she could work and also take our son. Their day was like leaving home before 7am and back home at almost 6pm.

In May 2018, after going to a taster session to find out if I could understand the language (Hebrew), I decided I would go for it. My days were tough, my shifts at work were from 7am to 5pm, and I had lessons twice a week from 6pm until 10pm. It got better when I started getting homework and semester projects 😂. I didn't have an office at home, just my laptop and no fancy setup. I remember putting a desk in our room, and the back of my chair was against the bed and my knees against the desk.

We were like zombies, and we barely saw each other part from weekends, but I was getting pretty good grades and I realized after 30 years, I had finally found my passion. I could (and still do) talk about code all day, learn new stuff and enjoy everything I am learning.

Landed My First Job

About half a year after I started learning, my friend (mentioned above) talked to me about an opening position they had at his company. His boss called me, we talked, I was so nervous I talked too much😅, but they hired me. No exam, nothing, just the trust of this friend that I could do the job. To this day, that is coming back to me as impostor syndrome. I see many people struggling to get that first job, and for me it was just a quick phone call.

So, I signed a contract with them for a couple of months, that's what the original offer was. I learned things I wouldn't learn in the course. I learned new technologies, how to work with a team, build web pages from simple mock-ups given from the designer and much much more!

At the end of the contract, due to company policy, I had to leave, BUT the boss saw that I was delivering and growing very fast, so he hired me as a contractor and I was able to work there for the whole year.

I was working up to 4 days a week, sometimes just 3 (which it was fine during the time I was still studying), but my contract was renewed every two months. I was very happy working there but I decided to start looking for a full time job.

I was working up to 4 days days a week, sometimes just 3 (which it was fine during the time I was still studying), but my contract was renewed every two months. Even that I was very happy working there, I starting looking for a full time job.

I started simple, passing my CV to friends. I'm a low profile (or that I thought). One came back with an interview over the phone, where I had to record myself while answering questions on the phone. I passed that first step of the interview and went to a face to face interview with the hiring manager. I've read many tips on what to do before an interview, the one I give you is, think about the interview as if you were chatting with a friend, this gave me confidence, thinking that the person in front of me was not judging me but wanted to know me better.

I passed this step too and I was given an exam, a home assignment and code review after I finished it. After the code review I got to the final step! Passed the HR interview, then got an offer which I accepted 🍾🥂. This was December 2019.

Even though I am working full time I continue learning and building my side projects. I have started to become more active in the Twitter tech community and started blogging as well.

Thank you for reading, if you have any questions or would like to know me better, you can always find me on Twitter @eligarlo.

VueJs - Interpolations

Eliahu Garcia Lozano — Mon, 31 Aug 2020 02:02:03 +0000

Hi vue and welcome to VueJs, The Series 🚀

This article was first posted on my blog, here is the article

Spoiler alert🚨: In case you missed VueJs - Getting Started go and check it out.

What is Interpolation?

When we talk about interpolation, aka "String Interpolation", we talk about the "Mustache" syntax we saw in the previous episode, {{ }}.

There are 4 types of interpolations:

Text
JavaScript Expressions
Raw HTML
Attributes

Text

We already saw it when we had this HTML.

<div id="app">
  <h1>{{ title }}</h1>
</div>

Let's also bring our Vue instance for reference.

new Vue({
  el: "#app",
  data: {
    title: "I'm Interpolating!"
  }
})

We see that Vue is accessing the data property inside our Vue instance, is grabbing the title and 'binding' it's value inside our {{ title }}. That's it, there is nothing else to see here. 👀

JavaScript Expressions

Vue supports JavaScript expressions, so basically we can throw any JavaScript code inside.

<div id="app">
  <div>2 * 2 = {{ 2 * 2 }}</div>
  <div>Today is {{ new Date().toDateString() }}</div>
  <!-- It also works with ternary expressions -->
  <div>And the output is: {{ foo ? 'bar' : 'baz' }}</div>
</div>

The output of the ternary? 🤷‍♂️

It will be baz because foo is undefined in our Vue instance, so is evaluated as false.

⚠Attention⚠, Vue will bind only one single expression, so the following code won't run.

<div id="app">
  <div>{{ let myVariable = 'be' }}</div>
  <div>{{ if (foo) { return 'bar' } }}</div>
</div>

The code above won't work because neither are JavaScript Expressions.

Raw HTML

Until here we saw that whatever was inside our Mustache {{ }} was text, or interpreted as text, but what about if we want to bind some HTML? Imagine that we have a JSON where we have stored the content of the website, or we fetch it from the back-end. Most of the time, we will store the content as plain text, but sometimes we might get HTML instead.

For this we will need to use the v-html directive. Don't worry for now, we'll cover what directives are.

For the purpose of these tutorial let's put that HTML in our title :

new Vue({
  el: "#app",
  data: {
    title: "<h1 style='color: blue;'>I'm Interpolating!</h1>"
  }
})

In our HTML now we don't need to grab the {{ title }} inside the h1 tag.

<div id="app">
  {{ title }}
</div>

As explained before, Vue will interpret this as text so the output will be 👇

What we need to do in order to see our HTML as HTML is the following:

<div id="app">
  <span v-html="title"></span>
</div>

We used an HTML tag, in this case a span, inside it's opening tag we added our directive v-html, and as a value we passed our title. What Vue will do is to pass that value of title inside the span. Let's see if this time worked 👇

Attributes

As we saw with the v-html, there are times when we need to pass certain values to our HTML, for that, we use directives. Imagine we have to put a dynamic id, inside of a div in our HTML. For this we can use the v-bind directive. Again, don't worry, directives will be cover in future episodes of this series.

The syntax is quite similar as the previous example.

<div id="app">
  <span v-bind:id="dynamicId"></span>
</div>

Look how we add :id after v-bind to tell Vue that what we want will be this <span id="1"></span>, well if dynamicId had the value of 1 😅

And we can do more with v-bind. Imagine we have a button that we want to show as disabled. All we have to do is to add :disabled at the end of v-bind. But for this we won't give a value that Vue can interpret as string. Vue needs to know if we want this button to be disabled, YES or NO, so will check if the value is true or false.

<div id="app">
  <button v-bind:disabled="isButtonDisabled">Sign In</button>
</div>

In our case, isButtonDisabled is undefined, so Vue won't even render the attribute disabled, and this will happen if the the value is also null or false.

Conclusion

In this episode we covered the following:

We can do interpolations as plain Text with Mustache syntax {{ }}.
Inside the Mustache syntax we can have JavaScript Expressions.
In order to render Raw HTML we need the v-html directive.
We can dynamically change Attributes with the v-bind directive.

GitHub repo for the code used in this episode.

Did you enjoy this article? Don't be selfish, go on and share the knowledge!
You can also find me on Twitter @eligarlo.

VueJs - Getting Started

Eliahu Garcia Lozano — Thu, 13 Aug 2020 06:28:56 +0000

This article was first posted on my blog, here is the article

“To get started with Vue, all you need is familiarity with HTML and JavaScript. With these basic skills, you can start building non-trivial applications within less than a day”- VueJs Docs

Hi vue and welcome to VueJs, The Series 🚀

In this first episode we will be covering the following topics:

Table of Content
Getting Vue In Our Machine
Setting Up Our Environment
Conclusion

Getting Vue In Our Machine

We have a few different ways to install vue as you can see here. But for the purpose of this tutorial I'll be using CDN.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Don't use this CDN for production.

Setting Up Our Environment

We will need an index.html and app.js files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- VueJs Import -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>VueJs - Getting Started</title>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
    </div>

    <script src="app.js"></script>
</body>
</html>

Your index.html should look like this ☝

Imported VueJs CDN.
Created a div with an id of app.
Inside app created a title.

Let's go over 2 and 3 for a second:

The div will be under control of the Vue instance.
Title uses the special syntax that Vue will recognize and interpolate from our Vue instance.

Your app.js should look like this 👇

new Vue({
  el: "#app",
  data: {
    title: "Hello World!"
  }
})

Hold your 🏇🏇, WHAT?

We created our Vue instance with new Vue() that takes an object as an argument.

Then we have the el and data properties. All properties (there are more and we will see them in this series) have reserved names that Vue will recognize.

In the el property we need to pass the html element that we want the Vue instance to take control.

In the data property we store all the data we want to use in our Vue instance. Think of the properties store inside the data object as variables, you can have strings, booleans, arrays...
In our case the data property is the string Hello world, very creative right?

Ok, so let's open our html file and see what we got there.

Congratulations, we created our first VueJs app! 🎉🥳

Conclusion

In this episode we covered the following:

We installed the VueJs framework using CDN.
We created our html template and use the special {{ }} syntax.
We created our Vue instance and explain about the el and data properties.

TODO: Build this Hello World app by your own but this time instead of using a CDN, install Vue in a different way.

Here is again the link for the other installation options.

GitHub repo for the code used in this episode.

Find me on Twitter @eligarlo

DEV Community: Eliahu Garcia Lozano

How to Teleport in Vue 3

What if I have an element I want to display as a sibling of the #app element in the html?

Let's teleport!

Trim Your Inputs!

Use Case

TrimStart and TrimLeft

TrimEnd and TrimRight

Chaining the methods

Trim

Validating the input

Conclusion

Default Function Parameters

Introduction

Use Case

Conclusion

Destructuring Assignment In A Function Parameter

Use Case

Bonus!

Conclusion

Copyright Up To Date (The Automate Way)

My Journey Into Tech (In A Foreign Country)

From Spain

Through England

To Israel

Deep Thoughts

⬇Start talking about code here⬇

Landed My First Job

VueJs - Interpolations

Hi vue and welcome to VueJs, The Series 🚀

What is Interpolation?

Text

JavaScript Expressions

Raw HTML

Attributes

Conclusion

VueJs - Getting Started

Hi vue and welcome to VueJs, The Series 🚀

Getting Vue In Our Machine

Setting Up Our Environment

Conclusion

What if I have an element I want to display as a sibling of the `#app` element in the html?