Brand New JavaScript ES6 String Methods that you should Know?

Hello, Friends, I know most of the developers are now switching to es6 or they have already switched.

ES6 looks little complicated but it is easy at last now javascript also possessing all the features similar to python etc

I'm writing this article to show you a few powerful string methods that we developers got as a gift from the ES6.

String methods like trim(), the index based accessing etc are very popular now which was introduced in the ES5 (ECMAScript 5)

Today I will show you three new string methods that are introduced with ES6. They are as follows

1. startsWth()
2. endsWith()
3. repeat()

The above are the three new string methods.  I will explain them with an example one by one starting from the top to bottom.

startsWith(): This method is case sensitive. this method accepts two parameters. First one is required and the second one is optional.

Syntax:

let example = "Hello, Developer. How are you?";
example.startsWith(searchString , position);

This method returns boolean true or false. if your search matches the string starting characters then it will return true otherwise false.

Arguments: 

The First one is Required *. Here you have to add the starting characters of the string that you are searching.

The Second one is optional here you have to specify the index position to starts searching from.

Example of a startsWith method:

See the Pen String Methods in ES6 by MD M Nauman (@mmnauman) on CodePen.

This was the simple example of a startsWith method. You can add the second parameter to specify the index position to starts searching from there.

The used case of startsWith:

It can be used in many things from filtering out the names based on their first name,

You can also allow only people whose name starts with certain characters to login in your site or do some other stuff.

There are so many things that can be done using this method.

It will replace complex regex methods to find with a certain pattern.

Play with this in your developer tools to get the instant return value.

endsWith(): This method also possesses similar features that we saw above in startsWith method.

This method is case-sensitive. It also accepts two parameters.

The first Parameter is required and the second one is optional.

Syntax:

let example = "Hello, Developer. How are you?";
example.startsWith(searchString , length);

This method returns boolean true or false. if your search matches the string starting characters then it will return true otherwise false.

Arguments: 

The First one is Required *. Here you have to add the starting characters of the string that you are searching.

The Second one is optional. This second parameter is different than the startsWith method. Here you have to specify the length of the string within that you want to search your characters.

Example of an endsWith method:

See the Pen String Methods in ES6 endsWith() by MD M Nauman (@mmnauman) on CodePen.

The used case of endsWith() Method:

This is a very powerful string method and can be used in many things like:

To find out the emails ending with .com, .net etc

To find out whether the person last name is 

To find out whether the  image is jpg/png etc

There are many possibilities you can implement this method in your projects. 

repeat(): This method creates copies of the string and you have to specify the number as the argument to create your desired amount of copies. This method doesn't modify the original string but it will return the new string with the specified copies of the string.

repeat method accepts one parameter. The Parameter is required

Syntax:

let example = "Hello";
example.repeat(5);

Arguments: 

The argument is Required *. Here you have to add the number so that the repeat method will create that many copies of the string for you.

Example of the repeat method:

See the Pen String Methods in ES6 repeat() by MD M Nauman (@mmnauman) on CodePen.

The used case of repeat Method:

This method is rarely used as it is not that useful.

You can use this method in your development to generate dummy text.

Conclusion

I'm concluding this article now. This is the brand new methods that were introduced with ES6. If you found it little difficult then try it again and again till you get used to with them.

With this new methods, I think the development complexity will be reduced. More then that javascript is becoming powerful day by day.

ES6 is a new standard for JavaScript. Leaving Internet Explorer most modern browsers support all these methods. and gradually all browsers have to comply with this standard.

That's It Thanks For Following our Tutorial ''Brand New JavaScript ES6 String Methods that you should Know?' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

Read more »

Email Subject Line Research 2018: Short is the Latest Trend

We’ve taken a comprehensive look at all emails and associated data sent last year to gain new insights into the importance of subject lines. The aim of this is to learn more about how to get emails open, read, and converting. By taking all of the data available we’ve been able to draw up a list of key questions that we intend to answer in this article.

1. Does Personalization Improve Open Rates?

In this instance, personalization refers to adding the person’s first name to the subject line. There is always the option to add the full name, but this can often appear too formal and is not appropriate.

The key thing to understand is that whilst personalized subject lines may seem like a nice touch, do they actually improve the open rate?

Personally, I feel that personalized subject lines run the risk of appearing spammy. As a recipient, I know that I am receiving an automated email, which makes the use of my first name feel insincere and not genuine.

Interestingly, when we began to crunch the numbers we found that only 3.5% of emails sent actually employed a personalized subject line. We then saw that the open rate for emails using a personalized subject line was 18.1%, as compared to the open rate of 17.9% for non-personalized emails. This is not a statistically significant difference as a larger sample could see the difference reversed.

It is clear that the data shows personalization has no demonstrated impact on open rates.

2. Do Exclamation Marks Add Emphasis, Or Reduce Conversions?

After compiling the top 30 performing subject lines used with newsletters we noticed that 14 of them contained exclamation marks.

By looking at newsletter campaigns and automated email workflows we were able to investigate whether their inclusion had any impact on conversion rates.

A. Newsletter Campaigns
42% of email subject lines contained exclamation marks, so how did this translate into conversions?

Subject lines that didn’t use exclamation marks had an open rate of 18%, as compared to 17% for subject lines using exclamation marks.
Interestingly there was also a negative correlation between open rates and the number of exclamation marks. With one exclamation mark, the open rate was 17.5%, falling to 16.7% for 2 exclamation marks, and16.5% for 3 exclamation marks or more. A clear sign from the data that users are put off by the use of exclamation marks.

B. Automation Workflows:

We found that a total of 95% of all automated emails sent by Omnisend marketers used exclamation marks.

Interestingly a single exclamation mark leads to an open rate of 29%, whilst multiple exclamation marks caused the open rate to increase to 35%. 

It’s important to understand that the sample size for multiple exclamation marks was far smaller and was therefore far more susceptible to being easily biased. 

There are also take-home points to be learned from looking at single emails and sequences of emails separately. 

Single Automated Email: Emails with a single exclamation mark achieved a 47% open rate. This then fell steeply to 42% when multiple exclamation marks were used.

It’s important to understand that the multiple exclamation samples were only 0.7% of the total sample size. 

Automated Email Series: The use of a single exclamation mark resulted in an open rate of 24%,  2 or more saw a drop to 21%.

This tells us that if you’re creating an email sequence then you will see a drop off in open rates when using multiple exclamation points. There are a number of possible reasons for this, such as reduced confidence that the message isn't spammed, but the numbers don’t lie. 

3. Should You Offer Discounts in Dollar Amounts or as Percentages?

At Omnisend we’re regularly asked about the best way to offer a discount. Should it be as a dollar amount (save $15) or as a percentage (get 15% off)? 

To gain some fresh insight into this problem we looked at subject lines containing a $ sign and compared them with those containing a % sign. Here’s what we found.

Interestingly the % sign was 10 times as popular amongst the marketers we looked at, but this didn’t translate into better performance. The dollar sign was underutilized and yet it leads to a higher open rate.

The open rate for $ sign subject lines was 29%, which was 4 percentage points higher than the 25% achieved by % sign subject lines. Proof that it pays to tell people the absolute amount of money they will be saving, rather than focusing their attention on margins.  

4. What is the Length of the Ideal Subject Line?

Interestingly we found that one of the biggest brands in our survey had a tendency to use very long subject lines.

We found that most subject lines used on average 11-50 characters, but why? Is this the most effective length? Or does the brand using over 200 characters on a regular basis know something that everyone else has missed?

Take a look at the graph below which charts open rates and include a curve showing which are the most commonly sent subject line lengths. 

Interestingly you see that longer is better, to an extent. Subject lines with 51-90 characters show a 40.5% open rate, whilst the more commonly sent 11-50 character subject lines achieve a much lower open rate of 33.8%.

It is again important to take into account sample size and the ease of biasing. The red curve clearly shows that the size of the sample for the 51-90 character subject lines is significantly smaller and therefore more likely to be skewed. 

To get specific, it is seen that subject lines with 21-30 characters achieve the highest open rates. 

Indicating that short is the latest trend there is probably no need to regularly send long subject lines if you want to maximize the open rate of your emails. 

Read more »

All You Need To Know About CSS Variables and Modifying in JavaScript

Hello, Friends, we are writing today's article on CSS variables. The best thing about it is we can shorten our code and follow the DRY (Don't Repeat Yourself), Model. We can separate our code in parts like we do in javascript. We will cover many things just see the list below:

1. The Syntax
2. How to use variables values in CSS 
3. How to access them using JavaScript
4. How to modify them using JavaScript
5. Why and When to use them?

The Syntax: 

 We cannot declare variables anywhere or directly. Variables should be declared within a CSS selector like in HTML, body, class, id etc but if you declare variables in any particular selector like in class or id then you can use it in its scope, not outside it.

Example: If a variable is declared inside a nav then it will be only available for the nav children not outside the nav. 

To get the global scope all you need to do is declare the variables in the root of the document. I mean you have to use the :root pseudo-class and inside it declare all your variables after doing this you can access it anywhere from the document.

To Declare globally this is the syntax:

Now we know the syntax its time how to use them in our stylesheet means how to implement the custom variables values in real CSS properties.

We just saw the example above which is not working now its time to see the working example.

How to use variables values in CSS:

We have to use the built-in CSS method var() and inside it, we have to add our custom variable. 

The var() method accepts two parameters. 

var(Name_of_the_variable, Value_of_the_variable);

Name_of_the_variable	The first parameter is Required it should include two dashes in the prefix
Value_of_the_variable	The Second parameter is Optional Here you can assign any value as the default. it will be used if the variable value is invalid or absent.

Now I will show you the working example. Here we will use all the things which we have learned above.

Firstly we will create a variable with global scope.

:root{
--theme-color: red;
--theme-margin: 5px;
--center-me: 0 auto;
}

Here I have declared a few variables on the root element. which means I can use it anywhere on the page.

The variables which we are using from the top is theme colour, margins, and centring the element with predefined margins.

See the Pen CSS Variables by MD M Nauman (@mmnauman) on CodePen.

How to access them using JavaScript?

Here are few ways to interact with CSS variables with JavaScript you can set, remove or modify them accordingly.

Here is an example showing how to change CSS variable.

See the Pen Changing CSS Variables Values Using Javascript by MD M Nauman (@mmnauman) on CodePen.

So in the above example, we have shown you how we use Javascript to change the color variable. we just need to pick the colour and the variable will get dynamically updated. We are giving you a few important ways from which you can get variables or set variables in CSS

Getting a variable from the stylesheet using Javascript.

window.getComputedStyle(container).getPropertyValue("--theme-color");

Here we have used window getComputedStyle method to get the CSS properties. Here we have used the container variable from the above example of codepen. 

You can open the example in the codepen add this above code in the console you will get the value of the variable on picking the colour.

Changing the variable value with Javascript

<strong>Choose Color: </strong>
<input type="color" value='red' id='colorPick'>
<div class='container1'></div>
<script>                let container = document.querySelector('.container1');
        let colorPick = document.querySelector('#colorPick');
        colorPick.addEventListener('change', changeColor);
        colorPick.addEventListener('mouseover', changeColor);
        function changeColor() {
            container.style.setProperty(`--theme-color`, this.value);
        }
    </script>

We are using the second codepen example to demonstrate how we can change the value of the variable using the setProperty method that is highlighted above in green color.

Now the million dollar question 

Why to use CSS variables?

1. Like I said in the first paragraph Stylesheet for the big sites are very headache to manage as it contains 100's of lines of code. 
2. The developers repeat their code so to avoid that we need to use CSS Variable. 
3. We can set a theme color or theme font variables with this just changing one variable value whole site color changes. Here also we are following DRY method (Don't Repeat Yourself).
4. We can set variables like standard, medium etc for the padding and margins. 
5. CSS variables can be easily changes using Javascript so you can add interactivity without compromising speed.
6. It also have scoping so you can create local and global scope variables.

When To Use CSS variables?

1. CSS variables can be used when you think the code is getting longer and you need something to store the values so that you can use it to refer them.
2. It can be also used to create your own standard way of coding like we use frameworks. This is built in CSS so this is very fast compare to frameworks.
3. If you want to change sites color, margins dynamically using Javascript then you can use css variables.

Compatibility issues with cross browsers?

Image/information Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Browser_compatibility

According to developer.mozilla.org CSS variables are not at all compatible with Internet Explorer so if you think your apps or sites users use Inter explorer then you have to rethink before using this variables.

Conclusion:

Now we know the synatx, its importance, how to use them, why to use them and when to use them. 

Now after getting so much information now your work is to practice and make sure you use them in your daily coding projects to get used to of them.

That's It Thanks For Following our Tutorial ''All You Need To Know About CSS Variables and Modifying in JavaScript'' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.

Read more »