Karim Aya

Karim Aya

1556938600

How to Create Multi-Line String with Template Literals in JavaScript

With the arrival of Template Literals, it’s finally super easy to produce multi-line strings. Previously, we had to use the \n or separate string concatenation which was messy and difficult to read. Finally, it’s easier now. ES6 for the win 🙌

// Old way
const multiLine1 = "1️⃣first \n2️⃣second";
// ✅ ES6 way
const multiLine2 = `1️⃣first
2️⃣second`;
                   
/* RESULT
1️⃣first
2️⃣second
*/

Multi-line vs Single-line Strings

I just want to make sure I clarify that when I say “Multi-Line”, I mean the output of the string is spanning on multiple lines. For example, if I console.log the variable, it will produce something like this:

// Multi-Line
1️⃣first
2️⃣second

And here’s a “Single-Line” output:

// Single-Line
1️⃣first 2️⃣second

The reason why I’m emphasizing this is because there are other methods in JavaScript to create strings. But watch out, they actually don’t produce true “Multi-Line” outputs 😱

**Ex. Using **+

const notTrueMultiLine = '1️⃣first' +
'2️⃣second' +
'3️⃣three';
console.log(notTrueMultiLine);
// 1️⃣first2️⃣second3️⃣three

**Ex. Using **\

const notTrueMultiLine = "\
1️⃣first \
2️⃣second \
3️⃣three";
console.log(notTrueMultiLine);
// 1️⃣first2️⃣second3️⃣three

Even though, it may appear in your code as multi-line. But when it’s outputted, it’s actually a single-line. To create true multi-line output, you have to use Template Literals or \n. Just wanted to make sure I point this out cause I remember making this mistake when I was first learning JavaScript 😖

Blank Space in Template Literals

So template literals will output as it appears, spaces and all! Because of that, be mindful of your blank spaces or lines.

const blankSpace = `
first
    second
  third
  
`;

Here’s the output. I denoted the white space with a dot, ⚪️ and line break with a square ◻️:

□
first
····second
··third
□
□

HTML Templating with Template Literals

This is my favorite use case of using template literals multi-string capability. It makes super readable and easy to render HTML markup. I remember before, the only way to do this is to use a template system such as Handlebars.js. Well, not anymore. We can achieve the same result without importing anything and just use vanilla JS. It’s awesome! Anyhoo, let’s take a look at some examples:

✅Ex. HTML Markup using Template Literals

const HTMLmarkup = `
<article>
  <h1>Code Tidbits</h1>
</article>
`;

Ex. HTML Markup using Old JavaScript

const HTMLmarkup = "<article>" +
"<h1>Code Tidbits</h1>" + 
"</article>";

Ex. HTML Markup using Handlebars.js

<script id="entry-template" type="text/x-handlebars-template">
  <article>
    <h1>Code Tidbits</h1>
  </article>
</script>
<!-- also need to import handlebars -->

#javascript

What is GEEK

Buddha Community

How to Create Multi-Line String with Template Literals in JavaScript
IT Articles

IT Articles

1589751469

Template Strings (Template Literals/Back ticks) in JavaScript in 8 min | IT Articles

This video explains the backticks in Javascript (ES6). Its also known as template strings or Template literals in Javascript, backticks use for string interpolation in javascript. In this video we will see the examples of backticks(`) how to use it? whats the benefit of backticks and more.

https://youtu.be/d-JRZUYR7N0

#it-articles #template-strings #template-literals #back-ticks #javascript

Lowa Alice

Lowa Alice

1624399200

JavaScript Strings Tutorial

JavaScript Strings

📺 The video in this post was made by Programming with Mosh
The origin of the article: https://www.youtube.com/watch?v=09BwruU4kiY&list=PLTjRvDozrdlxEIuOBZkMAK5uiqp8rHUax&index=6
🔥 If you’re a beginner. I believe the article below will be useful to you ☞ What You Should Know Before Investing in Cryptocurrency - For Beginner
⭐ ⭐ ⭐The project is of interest to the community. Join to Get free ‘GEEK coin’ (GEEKCASH coin)!
☞ **-----CLICK HERE-----**⭐ ⭐ ⭐
Thanks for visiting and watching! Please don’t forget to leave a like, comment and share!

#javascript #strings #javascript strings #javascript strings tutorial

Adaline  Kulas

Adaline Kulas

1594162500

Multi-cloud Spending: 8 Tips To Lower Cost

A multi-cloud approach is nothing but leveraging two or more cloud platforms for meeting the various business requirements of an enterprise. The multi-cloud IT environment incorporates different clouds from multiple vendors and negates the dependence on a single public cloud service provider. Thus enterprises can choose specific services from multiple public clouds and reap the benefits of each.

Given its affordability and agility, most enterprises opt for a multi-cloud approach in cloud computing now. A 2018 survey on the public cloud services market points out that 81% of the respondents use services from two or more providers. Subsequently, the cloud computing services market has reported incredible growth in recent times. The worldwide public cloud services market is all set to reach $500 billion in the next four years, according to IDC.

By choosing multi-cloud solutions strategically, enterprises can optimize the benefits of cloud computing and aim for some key competitive advantages. They can avoid the lengthy and cumbersome processes involved in buying, installing and testing high-priced systems. The IaaS and PaaS solutions have become a windfall for the enterprise’s budget as it does not incur huge up-front capital expenditure.

However, cost optimization is still a challenge while facilitating a multi-cloud environment and a large number of enterprises end up overpaying with or without realizing it. The below-mentioned tips would help you ensure the money is spent wisely on cloud computing services.

  • Deactivate underused or unattached resources

Most organizations tend to get wrong with simple things which turn out to be the root cause for needless spending and resource wastage. The first step to cost optimization in your cloud strategy is to identify underutilized resources that you have been paying for.

Enterprises often continue to pay for resources that have been purchased earlier but are no longer useful. Identifying such unused and unattached resources and deactivating it on a regular basis brings you one step closer to cost optimization. If needed, you can deploy automated cloud management tools that are largely helpful in providing the analytics needed to optimize the cloud spending and cut costs on an ongoing basis.

  • Figure out idle instances

Another key cost optimization strategy is to identify the idle computing instances and consolidate them into fewer instances. An idle computing instance may require a CPU utilization level of 1-5%, but you may be billed by the service provider for 100% for the same instance.

Every enterprise will have such non-production instances that constitute unnecessary storage space and lead to overpaying. Re-evaluating your resource allocations regularly and removing unnecessary storage may help you save money significantly. Resource allocation is not only a matter of CPU and memory but also it is linked to the storage, network, and various other factors.

  • Deploy monitoring mechanisms

The key to efficient cost reduction in cloud computing technology lies in proactive monitoring. A comprehensive view of the cloud usage helps enterprises to monitor and minimize unnecessary spending. You can make use of various mechanisms for monitoring computing demand.

For instance, you can use a heatmap to understand the highs and lows in computing visually. This heat map indicates the start and stop times which in turn lead to reduced costs. You can also deploy automated tools that help organizations to schedule instances to start and stop. By following a heatmap, you can understand whether it is safe to shut down servers on holidays or weekends.

#cloud computing services #all #hybrid cloud #cloud #multi-cloud strategy #cloud spend #multi-cloud spending #multi cloud adoption #why multi cloud #multi cloud trends #multi cloud companies #multi cloud research #multi cloud market

Eldora  Bradtke

Eldora Bradtke

1594044223

JavaScript: Template Literals (ES6)

Inthis article, I will discuss another powerful feature of modern JavaScript; template literals, which was released in the 2015 edition of the ECMAScript specification and was referred to as template strings prior to ES6. Similar to string interpolation features in other languages like Ruby and Phyton, template literals provide syntactic sugar that allows us to construct strings more quickly. Before template literals were added to the JavaScript language in ES6, single quotes (‘ ’) and double quotes (“ ”) were the only ways to make a string. Template literals offer another way to declare strings that makes use of backtick ( ) character.

Let’s now look at the template literals in detail.


1. Basic Syntax:

Template literals use enclosing backticks (``) instead of using single (‘ ’) or double (“ ”) quotes as shown in the following example:

Template literals use backticks ( ) instead of single or double quotes to declare strings

Using the backticks allows us to use the single or double quotes in the template literal without escaping because each type of character only needs to escape its own type. So, in template literals, we only need to escape backticks by using a backslash( \ ).

Template literals do not need to escape single or double quotes

We have seen examples of how to create strings with single quotes, double quotes, and backticks. Now we will see more examples showing the advantages of using template literals.

#javascript #string #es6 #template-literals #programming

Create a Line Through Effect with JavaScript

In this post, we are going to create an amazing line through effect, with help of CSS and lots of JavaScript.

So, head over to your terminal and create a folder LineThroughEffect. Create three files -index.htmlmain.js and styles.css inside it. We are also opening the files in VS Code.

Image for post

VS Code

Now, we will add the basics html in index.html and also link both css and js files. We have very little html in this project, with div with id of line and an h1 with an id of text.

Image for post

#javascript-projects #javascript-tips #javascript #javascript-development #javascript30