DEV Community: Dom (dcode)

The Easiest Way to Install Node.js on WSL, Mac & Ubuntu

Dom (dcode) — Mon, 06 Mar 2023 11:49:53 +0000

Let's have a look at the easiest way to install Node.js on your WSL, Mac, or Ubuntu system.

We're going to be using a tool called nvm.

Video Tutorial

If you prefer, you can watch my 4-minute video on installing Node.js instead:

How to Install Node.js on Your WSL, Mac or Ubuntu System

Go to the GitHub page for nvm.
Copy and paste the install script into your command line. At the time of writing, 0.39.3 is the latest version:
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
```
Hit Enter. Once installation is complete, close and re-open your terminal window.
Now that nvm is installed, you can install the latest version of Node.js by typing:
```
nvm install node
```
That's it! You should now be able to type node --version and see that the latest version is installed.

Happy coding 😎

Enrol Now 👉 JavaScript DOM Crash Course

You can find a complete course on the JavaScript DOM using the link below 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

The Easiest Way to Embed PDFs on a Website

Dom (dcode) — Wed, 18 Jan 2023 11:30:45 +0000

Let's have a look at the easiest way to embed PDFs onto your website.

The simplicity of this solution comes from the fact that we're using the web browser's built-in (native) PDF viewer using <iframe>.

Video Tutorial

If you prefer, you can see how to embed PDFs in video form 👇

How to Embed PDFs

All you need to do is specify an <iframe>, and set the src attribute to the path of your PDF file. We can also remove the frame border using frameborder="0".

For example:

<iframe src="documents/file.pdf" frameborder="0"></iframe>

When running the above code in your browser, you should see a small area where your PDF file is being generated. If you wish to resize it, you can do so using CSS.

Resize Using CSS

Let's begin by adding an id to the <iframe>, then, apply some styles in CSS:

<iframe id="myPDF" src="documents/file.pdf" frameborder="0"></iframe>

#myPDF {
    width: 85%;
    height: 975px;
}

Feel free to experiment with the CSS styles to suit your liking 🙂

Enrol Now 👉 JavaScript DOM Crash Course

You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Happy coding 😎

How to Append Multiple Elements at Once in JavaScript DOM

Dom (dcode) — Tue, 27 Sep 2022 13:32:24 +0000

In today's post, I'll be taking you through 2 of my favourite ways to append multiple child elements to a parent element with the JavaScript DOM.

1. `insertAdjacentHTML()`

This is one of the most underrated methods in JavaScript. You can use insertAdjacentHTML() to insert an HTML string at a specified position relative to a parent element.

It supports a total of 4 positions, but the one we're interested in for appending elements is beforeend (insert before the end of the parent element).

Let's see it in action.



/*
    HTML:

    <ul id="fruit">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");

// Add 3 new <li>'s to the list of fruits
fruitList.insertAdjacentHTML("beforeend", `
    <li>Pear</li>
    <li>Orange</li>
    <li>Grape</li>
`);

As you can see, it's easy to append multiple elements using plain HTML. To make it even simpler, you can use template literals to take advantage of multi-line HTML as I've done above 👆

The above technique uses HTML strings, but what if you wanted to build the DOM elements manually? Sometimes, doing it this way makes it easy to add event listeners or perform operations on the elements.

Let's explore the same example as above, this time using the append() method which works like appendChild() but lets you pass in multiple items.



/*
    HTML:

    <ul id="fruit">
        <li>Apple</li>
        <li>Banana</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");

const pearListItem = document.createElement("li");
const orangeListItem = document.createElement("li");
const grapeListItem = document.createElement("li");

pearListItem.textContent = "Pear";
orangeListItem.textContent = "Orange";
grapeListItem.textContent = "Grape";

// Add 3 new <li>'s to the list of fruits
fruitList.append(pearListItem, orangeListItem, grapeListItem);

It's also worth noting that the append() method also lets you pass in text nodes or plain-text strings.

If you have any other techniques, please leave them down below!

Enrol Now 👉 JavaScript DOM Crash Course

You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Happy coding 😎

Another 5 Must Know JavaScript DOM Methods 🧮

Dom (dcode) — Mon, 19 Sep 2022 12:40:44 +0000

As mentioned in my last article, I think writing vanilla JavaScript is the best way to build a strong understanding of the most popular programming language in the world 🌏

Let's have a look at 5 more must know JavaScript DOM methods 👇

1. `scrollIntoView()`

This method is perfect for building user interfaces.

When calling scrollIntoView() on an off-screen element, the web browser will smoothly bring the element into view by scrolling.

/*
    HTML:
    <div>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        <p>Dummy Text</p>
        ... and so on
    </div>
*/

const someParagraph = document.getElementById("important");

// The browser will bring #someParagraph into view
someParagraph.scrollIntoView({
    behavior: "smooth"
});

I suggest you run the above code after creating a lot of <p> tags to see how it works.

2. `contains()`

If any DOM method were to be underrated, it'd be this one.

The contains() method will tell you if an element is a descendant of another. Let me demonstrate with an example.

/*
    HTML:
    <ul id="fruit">
        <li>Apple</li>
        <li>Pear</li>
        <li>
            <strong id="strongOrange">Orange</strong>
        </li>
        <li>Grape</li>
    </ul>
*/

const fruitList = document.getElementById("fruit");
const strongOrange = document.getElementById("strongOrange");

// Output: true 💪
console.log(fruitList.contains(strongOrange));

As you can see, the <strong> tag didn't need to be a direct child of #myList, it just needed to be a descendant.

3. `cloneNode()`

If you've ever had trouble making copies of an element, pay attention to this method.

As the name suggests, cloneNode() will clone the method that it's called on. This can also help with building user interfaces as once an element is copied, you may wish to update it with new data.

/*
    HTML:
    <ul id="cars">
        <li>Sedan</li>
        <li>Hatch</li>
        <li>Wagon</li>
    </ul>
*/

const carsList = document.getElementById("cars");

// Get the first <li> so we can copy it
const existingItem = carsList.querySelector("li");

const newItem = existingItem.cloneNode();

newItem.textContent = "4WD";
carsList.appendChild(newItem);

After running this code, <li>4WD</li> will be on the #cars list. Please note that this will only create a shallow copy. If you want to make a deep copy, you can pass true as an argument.

4. `after()`

There's nothing more exciting than finding new ways to append elements to the DOM 😎

The after() method allows you to append one or more elements or text nodes after another element. Being able to append multiple elements at once is very useful.

/*
    HTML:
    <ul id="drinks">
        <li>Water</li>
        <li id="softDrink">Soft Drink</li>
        <li>Juice</li>
    </ul>
*/

const softDrink = document.getElementById("softDrink");

const milkshake = document.createElement("li");
const cordial = document.createElement("li");

milkShake.textContent = "Milkshake";
cordial.textContent = "Cordial";

softDrink.after(milkShake, cordial);

Once this code runs, both <li>Milkshake</li> and <li>Cordial</li> will exist after <li>Soft Drink</li>, respectively.

5. `remove()`

The simplest method on this list comes in last place.

As the name suggests, the remove() method will remove an element from the DOM. This is a convenient alternative to removeChild().

const someParentElement = document.getElementById("parent");
const toRemove = someParentElement.querySelector("span");

// Using removeChild()
someParentElement.removeChild(toRemove);

// Using remove()
toRemove.remove();

As you can see in the above example, you don't need to reference the parent element to remove a child element when using remove().

And that's it! Hope you enjoyed this list 😁

Enrol Now 👉 JavaScript DOM Crash Course

You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇

https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Happy coding 😎

3 Easy Ways to Generate HTML with JavaScript

Dom (dcode) — Thu, 15 Sep 2022 21:21:24 +0000

In today's post, I'll be taking you through 3 of my favorite techniques to generate HTML using JavaScript.

Video Tutorial

If you prefer, you can consume this tutorial in video form 👇

1. Build HTML Element Objects

We're going to start off strong. This technique involves creating DOM elements using document.createElement(...) and then appending those elements to the document.

It may seem a little cumbersome doing it this way, but it gives you the most flexibility. This means you're able to gain access to the DOM objects immediately and do things like attach event listeners, update attributes or inject text.

Existing HTML



<ul id="fruit">
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
</ul>

Let's add another list item, Grapes.



const fruitsList = document.querySelector("#fruits");
const grapesListItem = document.createElement("li");

// add classes
grapesListItem.classList.add("list-item");

// add attributes
grapesListItem.setAttribute("id", "grapes");

// add events
grapesListItem.addEventListener("click", () => {
    alert("You clicked on Grapes!");
});

fruitsList.appendChild(grapesListItem);

As you can see it's very programmatic but provides the most flexibility.

2. `innerHTML`

If you've dabbled in JavaScript before, you'll probably know about the innerHTML property. This one allows you to re-assign the HTML within an element.

Let's re-add the Grape item from above, this time using innerHTML.



const fruitsList = document.querySelector("#fruits");

fruitsList.innerHTML += '<li id="grapes">Grapes</li>';

const grapesListItem = document.getElementById("grapes");

grapesListItem.classList.add( ...);
grapesListItem.setAttribute( ... );
grapesListItem.addEventListener( ... );

As you can see, I've used += to append to the existing HTML. To replace the entire HTML of an element, simply use = instead.

Another thing to note is that innerHTML is good for simple operations. We've had to use getElementById() once the list item was added in order to add attributes safely.

3. `insertAdjacentHTML`

This is one of my favourites. The insertAdjacentHTML method works in a similar fashion to innerHTML in that it allows you to inject HTML strings.

However, with insertAdjacentHTML, you're able to specify a position. One of 4 options is available:

beforebegin (before an element)
afterbegin (first child)
beforeend (last child)
afterend (after an element)

Let's see the same example as above, this time with insertAdjacentHTML:



const fruitsList = document.querySelector("#fruits");

fruitsList.insertAdjacentHTML("beforeend", '<li id="grapes">Grapes</li>');

const grapesListItem = document.getElementById("grapes");

grapesListItem.classList.add( ...);
grapesListItem.setAttribute( ... );
grapesListItem.addEventListener( ... );

This one still requires you to select the element once it's added, but it provides greater flexibility in terms of positioning of the HTML string.

For more info on this method, see the MDN Docs.

Enrol Now 👉 JavaScript DOM Crash Course

If you're learning web development, you can find a complete course on the JavaScript DOM at the link below 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

7 Must Know JavaScript Tips & Tricks 🎈

Dom (dcode) — Thu, 15 Sep 2022 12:49:53 +0000

Let's have a look at 7 valuable tips and tricks found in the most popular language in the world, JavaScript.

1. Destructuring with Parameters

You can use object destructuring within function parameters. A popular use case for this would be something like event listeners, and gaining access to the target property on the event object.

buttonElement.addEventListener("click", ({ target }) {
    // is the same as using e.target 👇
    console.log(target);
});

2. Deep Copy with JSON

You may have heard of using object spread or Object.assign() to make shallow copies of an object, but did you know about using JSON to make deep copies?

Simply convert an object to JSON using JSON.stringify() and then re-parse it using JSON.parse() to create a deep copy.

Just remember to only do this for simple objects, as doing it on large objects may raise performance issues.

const person = {
    name: "Dom",
    age: 28,
    skills: [
        "Programming",
        "Cooking",
        "Tennis"
    ]
};

const copied = JSON.parse(JSON.stringify(person));

// false 😎
console.log(person.skills === copied.skills);

3. Easy Defaults with OR

I talk about this one a lot. Basically, you can use the logical OR operator (||) for defaults as opposed to using an if statement.

Alternatively, for stricter comparisons, you can take advantage of the nullish coalescing operator

Old Code (using if statement - 4 lines)

let username = getUsername();

if (!username) {
    username = "Dom";
}

New Code (using || - 1 line)

const username = getUsername() || "Dom";

The new code also means you can use const over let.

4. Advanced Array Searching

Step aside, indexOf() and includes() because there's another method that allows for advanced array searching and it's called find().

The find() method allows you to pass in a test function. The first element within the array to pass the test function will be returned.

This makes for more useful array searching.

const occupations = [
    "Lawyer",
    "Doctor",
    "Programmer",
    "Chef",
    "Store Manager",
];

const result = occupations.find(o => o.startsWith("C"));

// "Chef" 🧑‍🍳
console.log(result);

5. Remove Array Duplicates

You may have heard of this one before, but there's a really simple way to remove duplicates from an array using the Set data structure.

Basically, Set doesn't allow duplicate values. We can take advantage of that by turning an array into a Set, and then back into an array.

const numbers = [5, 10, 5, 20];
const withoutDuplicates = Array.from(new Set(numbers));

// [5, 10, 20] 👇
console.log(withoutDuplicates);

6. Self-Invoking Functions

This one is a classic. Self-invoking functions are functions that execute themselves. A common use case for these is to assign a variable or constant that requires complex logic.

const someComplexValue = (() => {
    const a = 10;
    const b = 20;

    if (a > b) {
        return a * b;
    }

    return b / a;
})();

Of course, the above example is trivial but you can imagine the kind of complex code you may require to be within the self-invoking function.

7. Array Copying with Spread

Last on this list involves creating shallow copies of an array. We can do this using spread (...).

const numbers = [5, 19, 24, 36];
const numbersCopy = [...numbers];

// false
console.log(numbers === numbersCopy);

I hope you learnt at least something new from this list. For more JavaScript content, check out my YouTube channel, dcode.

Enrol Now 👉 JavaScript DOM Crash Course

Build an Image Editor with JavaScript 🎨

Dom (dcode) — Wed, 14 Sep 2022 13:12:38 +0000

Have you ever wondered if it was possible to build an image editor with plain JavaScript?

Well, you're in luck because today I'm going to show you how to do it.

No third-party libraries are required.

Let's get into it.

How Will it Work?

Good question. We'll be using HTML5 Canvas to store the image, and then, using the canvas context's filter property, apply different filters to the image.

These filters include things such as:

brightness
saturation
blur
inversion

See a list of all available filters here.

We're going to be giving the user the option to decide which filters should be applied to the image, and how intense each filter should be. This is done by using <input type="range" /> as you can see below.

Full Video Tutorial

You can find the source code and full video tutorial for this project on my YouTube channel, dcode.

Enjoy! 😎

The Easiest Way to Detect Device Orientation in JavaScript

Dom (dcode) — Tue, 13 Sep 2022 14:06:07 +0000

In this post, we'll take a look at the easiest way to detect device orientation on the web with JavaScript.

This is compatible with all major browsers (including Safari) and works on mobile/tablet devices.

Video Tutorial

If you'd prefer to watch a video, you can find my 4 minute tutorial down below on YouTube:

OK, let me show you how easy this is.

Detect Portait/Landscape Mode with `matchMedia()`

We can use window.matchMedia(...) to detect if we are in portrait mode. The best part about this is that if you're not in portrait mode, you must be in landscape mode.



const portrait = window.matchMedia("(orientation: portrait)").matches;

// portrait = `true` or `false` 😮

Using the above technique, we're able to detect if a user is in portrait mode at the current point in time.

But what if we want to react when a user changes their device orientation? This includes when they rotate their mobile device.

This is easily done by using addEventListener.



window.matchMedia("(orientation: portrait)").addEventListener("change", e => {
    const portrait = e.matches;

    if (portrait) {
        // do something
    } else {
        // do something else
    }
});

And that's it! Very easy to do 😎

Enrol Now 👉 JavaScript DOM Crash Course

Enjoy.

Parse HTML Strings with DOMParser in JavaScript

Dom (dcode) — Wed, 07 Sep 2022 13:54:34 +0000

If you've been following my YouTube channel then you'll know I love discovering new things in JavaScript.

This one is no different. Let's get into it 😎

Video Tutorial

If you prefer to watch a video tutorial on the DOM Parser, feel free to watch it below 👇

DOM Parser

It's in the name. The DOMParser object will take an HTML/XML string and parse them as an HTMLDocument.

This is really cool.

Let's see it in action:



const html = `
  <html>
    <body>
        <h1 id="title">Page Title</h1>
    </body>
  </html>
`;

const parser = new DOMParser();
const parsedDocument = parser.parseFromString(html, "text/html");

console.log(parsedDocument);

If you were to check the console after running this code, you'll see a full-fledged document object, much like the normal document that comes with each page. 😎

This means you can do other things such as:



// Select the <h1> page title
const pageTitle = parsedDocument.getElementById("title");

// Update the title's text
pageTitle.textContent = "A new page title.";

The way I see it, there are two main use cases for this feature:

creating DOM elements from HTML string (although we have other techniques these days such as <template>)
taking an XML document full of data, and parsing it 😊

Either way, I hope you found the DOMParser interesting. Happy coding!

Enrol Now 👉 JavaScript DOM Crash Course

The Most Hidden Feature of JavaScript ✍️

Dom (dcode) — Tue, 06 Sep 2022 14:22:44 +0000

Think you know JavaScript? Think again. 🤔

Let me tell you something about a string's replace() method... you can pass a function into it.

What does this mean? I'll show you.

Video Tutorial

If you want to see my video tutorial on this feature, feel free to watch it below 👇

Passing a Function into the `replace()` method

Most of you know how the replace() method works: you pass in a string or regular expression to find alongside a replacement value.

For example, let's replace all numbers with the phrase "NUMBER":

const myString = "Order Number: 4 2 8 3";
const result = myString.replace(/\d/g, "NUMBER");

// result == "Order Number: NUMBER NUMBER NUMER NUMBER"

Pretty simple. But here's where it gets interesting 👇

You can also pass in a function as the replacement value. The return value of that function is what gets used as the actual "replacement".

Let's see the same example as above, this time with a function instead:

const myString = "Order Number: 4 2 8 3";
const result = myString.replace(/\d/g, match => {
    return "NUMBER";
});

// result == "Order Number: NUMBER NUMBER NUMER NUMBER"

This produces the same result. But why would you want to use this technique? Well, you can add some logic 😎

Now, let's only replace numbers greater than 3 with the phrase "NUMBER":

const myString = "Order Number: 4 2 8 3";
const result = myString.replace(/\d/g, match => {
    if (Number(match) > 3) {
        return "NUMBER";
    }

    return match;
});

// result == "Order Number: NUMBER 2 NUMER 3"

As you may have noticed, the first argument to the replacement function is the match, which refers to each match (in our case, number) found using the first argument to the replace() method.

I hope this technique can reduce some complexity in your regular expressions 😉

Enjoy!

Enrol Now 👉 JavaScript DOM Crash Course

How to Convert Images to Base64 Data URLs in JavaScript

Dom (dcode) — Wed, 31 Aug 2022 14:40:09 +0000

It's easy to convert JPG and PNG images to Base64 data URLs with JavaScript. Let me show you how.

In case you didn't know, a data URL is simply a long string of characters that represent the binary of your image. You can then use this URL in your HTML <img> tags.

Very convenient.

Video Tutorial

If you prefer a video tutorial, you can watch this 4 minute video on my YouTube channel:

Step 1. File Input

You'll need a file input field in your HTML. Just like this:



<input type="file" id="fileInput" />

You can name the ID whatever you like.

Step 2. Change Event

In JavaScript, you'll need to attach a change listener to react to when the user chooses a file.



const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    console.log(e);
});

If you choose a file and check the console, you'll notice the event object. Take note of the target.files property.

Step 3. File Reader Setup

Next, you'll need to get a reference to the selected file and create a new instance of FileReader. This file reader object can read files in different forms.



fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();
});

Replace the console.log line with the above code.

Step 4. Read as Data URL

Now that we have the FileReader created, we can tell it to read the file as a Base64 Data URL.



reader.addEventListener("load", () => {
    // Base64 Data URL 👇
    console.log(reader.result);
});

reader.readAsDataURL(file);

As you can see we attach the load event to the FileReader. Once the file has finished being read, we can grab the Data URL by accessing reader.result.

Full Code



const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", e => {
    const file = fileInput.files[0];
    const reader = new FileReader();

    reader.addEventListener("load", () => {
        // Base64 Data URL 👇
        console.log(reader.result);
    });

    reader.readAsDataURL(file);
});

Done! Feel free to use this Data URL in your <img> tags. Just don't make the images too large 😎

Enrol Now 👉 JavaScript DOM Crash Course

5 Must Know JavaScript Object Functions 🧑‍💻✍️

Dom (dcode) — Tue, 30 Aug 2022 11:21:04 +0000

Let's get straight into it. Below you'll find 5 useful functions that can be used on objects in JavaScript. 😎

YouTube Video

If you don't like reading, feel free to watch my YouTube video instead 👇

1. assign()

Starting us off we have Object.assign(). This one is great for initializing/merging objects, and you can use it to set defaults.

Let's see it in action.

Below is a function that accepts an options parameter. When Object.assign() is used, any properties in the target object are overwritten by the equivalent properties in the source object.

function foo(options) {
    const defaults = {
        maxPoints: 5000,
        startingCash: 100,
        rounds: 3,
    };

    // { maxPoints: 20000, startingCash: 100, rounds: 5 }
    options = Object.assign(defaults, options);
}

foo({
    maxPoints: 20000,
    rounds: 5
});

Hint: the spread (...) syntax serves a similar purpose.

2. defineProperty()

Did you know there's a fancy way to define new object properties in JavaScript? Well, there is.

If you use this function to add a new property to an existing object, you can "customize" its definition. For example, you can make a property immutable.

Let's see an example:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// Add an immutable "country" property
Object.defineProperty(person, "country", {
    value: "Australia",
    writable: false
});

// Doesn't work!
person.country = "New Zealand";

There are many other things you can do with the defineProperty function, and I recommend you read the MDN documentation for more info!

3. entries()

Compared to the previous 2 functions, this one is a little simpler. This function takes the key-value pairs in an object and converts them into a two-dimensional array.

Here are a couple of use cases for this:

building URL query strings
looping over an object (combine with array destructuring)

An example:

const color = {
    red: 0,
    green: 149,
    blue: 120
}

for (const [key, value] of Object.entries(color)) {
    console.log(`${key} => ${value}`);
}

/*
    Output:
    red => 0
    green => 149
    blue => 120
*/

Remember this one because you'll be surprised when you need it 😉

4. fromEntries()

If you didn't work it out from the last function, JavaScript calls two-dimensional arrays of key-value pairs "entries".

This function will take a two-dimensional array and convert it into an object. Pretty cool.

Let's see it:

const colorArray = [
    ["red", 0],
    ["green", 149],
    ["blue", 120],
];

// { red: 0, green: 149, blue: 120 }
const color = Object.fromEntries(colorArray);

Keep in mind that, while the most likely argument for this function is an array, this works on any type of iterable including strings.

5. Object.freeze()

Last but not least is Object.freeze(). This one does what it says on the box: it will freeze the object passed into it.

A frozen object means:

new properties cannot be added
existing properties cannot be changed
existing properties cannot be deleted

Example:

const person = {
    name: "Dom",
    age: 28,
    favoriteColor: "Blue"
};

// none of these work ❌
person.country = "Australia";
person.name = "Rodney";
delete person.age

Tip: you can use Object.unfreeze() to reverse this effect

Enrol Now 👉 JavaScript DOM Crash Course

Enjoy!

DEV Community: Dom (dcode)

The Easiest Way to Install Node.js on WSL, Mac & Ubuntu

Video Tutorial

How to Install Node.js on Your WSL, Mac or Ubuntu System

The Easiest Way to Embed PDFs on a Website

Video Tutorial

How to Embed PDFs

Resize Using CSS

How to Append Multiple Elements at Once in JavaScript DOM

1. insertAdjacentHTML()

2. append()

Another 5 Must Know JavaScript DOM Methods 🧮

1. scrollIntoView()

2. contains()

3. cloneNode()

4. after()

5. remove()

3 Easy Ways to Generate HTML with JavaScript

Video Tutorial

1. Build HTML Element Objects

2. innerHTML

3. insertAdjacentHTML

7 Must Know JavaScript Tips & Tricks 🎈

1. Destructuring with Parameters

2. Deep Copy with JSON

3. Easy Defaults with OR

4. Advanced Array Searching

5. Remove Array Duplicates

6. Self-Invoking Functions

7. Array Copying with Spread

Build an Image Editor with JavaScript 🎨

How Will it Work?

The Easiest Way to Detect Device Orientation in JavaScript

Detect Portait/Landscape Mode with matchMedia()

Parse HTML Strings with DOMParser in JavaScript

Video Tutorial

DOM Parser

The Most Hidden Feature of JavaScript ✍️

Video Tutorial

Passing a Function into the replace() method

How to Convert Images to Base64 Data URLs in JavaScript

Video Tutorial

Step 1. File Input

Step 2. Change Event

Step 3. File Reader Setup

Step 4. Read as Data URL

Full Code

5 Must Know JavaScript Object Functions 🧑‍💻✍️

1. `insertAdjacentHTML()`

2. `append()`

1. `scrollIntoView()`

2. `contains()`

3. `cloneNode()`

4. `after()`

5. `remove()`

2. `innerHTML`

3. `insertAdjacentHTML`

Detect Portait/Landscape Mode with `matchMedia()`

Passing a Function into the `replace()` method