Is Invisible

'Is Invisible' is a clean, curated One Pager recommending quality products with minimalistic design.

by Rob Hope via One Page Love

Top 8 Digital Marketing Myths [INFOGRAPHIC]

Digital. Sounds so inviting, isn’t it? Digital Marketing and many sales people will raise their hand and ask “how does it work?” and start-up business owners saying “works like magic”, “the road to successful and cheap marketing” and critics frowning their forehead asserting that digital marketing is nothing but a click-bait method for the millennials. “False belief, when followed, is harmful.”

This old adage has always been true. Living in a world that is full of people who practice trial-and-error in their daily business may have somehow believed in some of the notions that their ancestors have told them such as “customer is always right” or “customers only care about low prices”. Unfortunately, some business owners failed to realize that these ideas might actually cause for their business to fail. Though some myths were once true, it is the time itself that decides its validity.

by Irfan Ahmad via Digital Information World

Head Slapping WordPress Security with Expert Chris Burgess

WordPress security isn't a term most people get excited about. It's a tricky topic which generally goes hand in hand with fear. Fear in wondering if you're doing enough for your site, whether it's done correctly, or even at all.

A couple of weeks ago we held a webinar with Chris Burgess on SitePoint to discuss WordPress security and how you can start making your site secure. We looked at:

• common myths and misconceptions
• what made WordPress an easy target
• what motivated attackers and how they attack sites

• Most importantly we also looked at:
• what you can do to strengthen your site
• how you can avoid common WordPress security risks

Continue reading %Head Slapping WordPress Security with Expert Chris Burgess%

by Angela Molina via SitePoint

Lessons Learned from Migrating 1,000 Blog Posts to WordPress

A corporate blog is a major cornerstone of any digital marketing strategy, right alongside the rest of the website, analytics, and of course email marketing.

Spinning up a blog is a crucial first step for many organizations looking to increase their profile and attract more customers with content marketing. Today there’s a flurry of blogging platforms to choose from, many of them free to start, that can help kick off the process and turn even the smallest business into a powerhouse content publisher.

But what if your company already has a blog?

And what if that existing blog, and the platform it is run on, has been around for a decade?

This is the story of the team that inherited a ten-year-old blog and migrated it to a new platform to redesign the entire user experience, juice up organic search traffic, and keep content writers from throwing their laptops out the window in frustration.

Continue reading %Lessons Learned from Migrating 1,000 Blog Posts to WordPress%

by Sal Partovi via SitePoint

ES6 Template Literals: Techniques and Tools

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

JavaScript template literals, new to ES6, provide a powerful new tool for doing everything from extending strings across lines to building powerful HTML and XML generators. This article will cover the big changes that template literals bring to JavaScript, including the backtick character, expressions in templates, template functions, and building more complex XML/HTML templates.

The Backtick Character

You've no doubt run into this situation: you have a line of text, maybe HTML, that extends over several lines. How to put those multiple lines in HTML? It is possible to use the + operator to join strings across multiples lines (provided you enclose them in quotes) or even just append the line with the backslash character ("\"). Those work. They are also awkward, error prone, and ugly.

ES6 introduces another way to extend strings across a single line, using the back-tick character (`). At its simplest, this solves two issues with one throw - the aforementioned one of letting you have one string with embedded carriage returns, and the not to be sneezed at ability to incorporate both single and double quotes in a string without having to escape them.

Consider this code and observe what it generates below:

`"This isn't just another quote," Ada said. "It's a magical quote.";

"I'm not quite sure what you mean." 

Clive settled onto the couch, one foot over the armchair rest, eyeing her dubiously.

"Consider this - if I have to write a quote in code normally, say something like 'This is a weird quote.' \
then I have to spend a lot of time using escape characters like \\" and \\', and they can make for real \
legibility problems. With a magic quote, though, they just go away!"

"Really?"

"You do have to double escape your escape characters, however. \\n will still get interpreted as an hard \
carriage return, but \\\\n will give you the slash followed by the letter 'n'."
`
console.log(quote)

This generates the output:

"This isn't just another quote," Ada said. "It's a magical quote."
"I'm not quite sure what you mean."
Clive settled onto the couch, one foot over the armchair rest, eyeing her dubiously.
"Consider this - if I have to write a quote in code normally, say something like 'This is a weird quote.' then I have to spend a lot of time using escape characters like \" and \', and they can make for real legibility problems. With a magic quote, though, they just go away!"
"Really?"

"You do have to double escape your escape characters, however. \n will still get interpreted as a hard carriage return, but \\n will give you the slash followed by the letter 'n'."

The effect is instantaneous here - in effect, the backtick (or more accurately, the template literal operator) performs a conversion of carriage returns, tabs and quotes into their respective normal string representations. This not only handles the pain of dealing with apostrophes in conversational text (as demonstrated above), but it also makes the corresponding code considerably easier to read.

Note as well that the terminating backspace character is still recognized within templates, which can be very useful when you have text that runs longer than your available screen-width. The difference between a regular string and a template string is that in the former you need to escape every line, while in the latter you need only escape the overly long strings.

If your string contains a number of escaped characters (such as the newline or tab character) and you don't want to get caught up in counting slashes, you can also use the String.raw` literal form.

String.raw`The sequence \t puts a tab into a template literal`

"The sequence \t puts a tab into a template literal."

Evaluating Expressions in Template Strings

Template literals also solve another problem: they can evaluate variables within the string. The ${expr} construct, when used within a template literal, will evaluate the expression and incorporate this into a string itself.

var name = "Ada";
var vocation = "steampunk programmer";
varpcAssert = `${name} is a ${vocation}.`;
console.log(pcAssert)
// "Ada is a steampunk programmer."

Using a template literal as a...template

In the example below, the variable name and vocation are both predefined, and the ${} expressions then replace the variables with their associated values. In a similar vein, you can both evaluate content and use object references within these expressions:

Template Functions

At this stage, template literals are beginning to look interesting. You can create a complex template literal that can reduce the amount of time embedded such content into a string. However, template literals begin to come into their own when combined with functions which produce the same output.

Note that this can also be simplified somewhat by using ES6 arrow notation:

var pounds = (amount) => (
        amount.toLocaleString("en-UK", {
                style:'currency',
                currency:'GBP'
        })
);

varpronounUCase = (gender) => (gender == 'female') ? 'She' : 'He';

var describe = (obj) => (
        `${obj.name} is a ${obj.vocation}.\
        ${pronounUCase(obj.gender)} has ${pounds(obj.wealth)} \ in the bank.`
);

var person = {
        name: "Ada",
        vocation: "steampunk programmer",
        gender: "female",
        wealth: 24025
};

console.log(describe(person))

// "Ada is a steampunk programmer. She has £24,025.00  in the bank."

If the goal was to make a method on person, you'd be better off going with the more traditional functional notation, as the this keyword is not defined within an arrow function:

var person = {
        name: "Ada",
        vocation: "steampunk programmer",
        gender: "female",
        wealth: 24025,
        pounds: (amount) => (amount.toLocaleString("en-UK", {
                style: 'currency',
                currency:'GBP'
                })
        ),
        pronoun: (gender) => (gender === "female") ? "She" : "He",
        toString: function(){
                varself = this;
                return (`${self.name} is a ${self.vocation}.\
                        ${self.pronoun(self.gender)} has ${self.pounds(self.wealth)} \
                        in the bank.`
                )
        }
};

console.log(""+ person)

// "Ada is a steampunk programmer.She has £24,025.00 in the bank."

Creating a toString() Method with a Template

The use of the toString() method should be noted, as toString() is automatically called whenever an object is converted into a string without having to be explicitly invoked. This means that while person itself will always give the object, "" + person will return the templated string as output, making toString() useful for defining on classes and prototyped objects.

Continue reading %ES6 Template Literals: Techniques and Tools%

by Kurt Cagle via SitePoint

CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!

Filters were originally part of the SVG specification. However, when their usefulness became evident, W3C started working on adding some common filter effects to CSS as well. CSS filters are pretty powerful and incredibly easy to use. You can use them to blur, brighten or saturate images among other things. They can be used alone or in combination with other filters. You need to use the following syntax to apply filters in CSS:

[code language="css"]
filter: <filter-function> [<filter-function>]* | none
[/code]

Now, let's go over all these filters briefly.

Brightness

This filter controls the brightness of your images. It accepts values greater than or equal to zero as its parameter. A value of 0% will give you a completely black output. Similarly, a value of 100% will give you the original image. You can specify values greater than 100% to get even brighter images. For instance, a value of 300% will make the image 3 times as bright:

[code language="css"]
img {
filter: brightness(300%);
}
[/code]

Here is a CodePen with a brightness CSS filter in action:

See the Pen CSS Filter Example — Brightness by SitePoint (@SitePoint) on CodePen.

Contrast

This filter controls the contrast of your images. Just like the brightness filter, it also accepts values greater than or equal to zero. This filter controls the difference between dark and light parts of the image in CSS. Therefore, a value of 0% results in a gray image. Setting the contrast to 100% gives you the original image and any value beyond that will further increase the image contrast:

[code language="css"]
img {
filter: contrast(0%);
}
[/code]

Here is a CodePen with a contrast CSS filter in action:

See the Pen CSS Filter Example — Contrast by SitePoint (@SitePoint) on CodePen.

Grayscale

As evident from the name, this filter can help you make your images grayscale. This filter gradually converts all the colors in our images to some shade of gray. A value of 0% will have no effect on our images and a value of 100% will turn them completely grayscale. Negative values are not allowed.

[code language="css"]
img {
filter: grayscale(100%);
}
[/code]

Here is a CodePen with the grayscale CSS filter in action:

See the Pen CSS Filter Example — Grayscale by SitePoint (@SitePoint) on CodePen.

Saturate

This filter controls the saturation of colors in your images. A value of 0% will completely remove all colors from the image, while a value over 100% will make the image supersaturated. At 100%, the final result looks just like the original image. Negative values are not allowed for this filter.

[code language="css"]
img {
filter: saturate(0%);
}
[/code]

Here is a CodePen with the saturate CSS filter in action:

See the Pen CSS Filter Example — Saturate by SitePoint (@SitePoint) on CodePen.

Sepia

This filter adds a sepia tinge to your images like some old photographs. The amount of sepia added depends on the percentage. At 0%, the final result looks like the original image and at 100% the image will be completely sepia.

[code language="css"]
img {
filter: sepia(100%);
}
[/code]

Continue reading %CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS!%

by Gajendar Singh via SitePoint

Clean Code with ES6 Default Parameters & Property Shorthands

Creating a method also means writing an API. Whether it is for yourself, another developer on your team, or other developers using your project. Depending on the size, complexity, and purpose of your function, you have to think of default settings and the API of your input/output.

Default function parameters and property shorthands are two handy features of ES6 that can help you write your API.

ES6 Default Parameters

Let's freshen up our knowledge quickly and take a look at the syntax again. Default parameters allow us to initialize functions with default values. A default is used when an argument is either omitted or undefined; this means null is a valid value. A default parameter can be anything from a number to another function.

// Basic syntax
function multiply (a, b = 2) {
  return a * b;
}
multiply(5); // 10

// Default parameters are also available to later default parameters
function foo (num = 1, multi = multiply(num)) {
  return [num, multi];
}
foo(); // [1, 2]
foo(6); // [6, 12]

A Real World Example

Let's take a basic function and demonstrate how default parameters can speed up your development and make the code better organized.

Our example method is called createElement(). It takes a few configuration arguments, and returns an HTML element. The API looks like this:

// We want a <p> element, with some text content and two classes attached.
// Returns <p class="very-special-text super-big">Such unique text</p>
createElement('p', {
  content: 'Such unique text',
  classNames: ['very-special-text', 'super-big']
});

// To make this method even more useful, it should always return a default
// element when any argument is left out or none are passed at all.
createElement(); // <div class="module-text default">Very default</div>

The implementation of this won't have much logic, but can become quite large due to it's default coverage.

// Without default parameters it looks quite bloated and unnecessary large.
function createElement (tag, config) {
  tag = tag || 'div';
  config = config || {};

  const element = document.createElement(tag);
  const content = config.content || 'Very default';
  const text = document.createTextNode(content);
  let classNames = config.classNames;

  if (classNames === undefined) {
    classNames = ['module-text', 'default'];
  }

  element.classList.add(...classNames);
  element.appendChild(text);

  return element;
}

So far, so good. What is happening here? We:

Continue reading %Clean Code with ES6 Default Parameters & Property Shorthands%

by Moritz Kröger via SitePoint