Mr Branding

Tuesday, August 2, 2016

Github Widget

Github Widget is showing your github details that you can embed in any website.

by via jQuery-Plugins.net RSS Feed

A Comprehensive Look at jQuery Selectors

Whether you want to manipulate the content of an element on a web page, attach an event to it, or do something else, you will need to select it first. This is where jQuery selectors come into play: they form a crucial part of the library.

In this tutorial, I will cover all of these selectors and point out important things that you need to keep in mind while using them.

jQuery Selectors

The main purpose of these selectors is to select elements on a web page that meet certain criteria. The criteria can be anything like their id, classname, attributes or a combination of any or all of these. Most of the selectors in jQuery are based on existing CSS selectors but the library also has its own custom selectors.

Basic selectors

You can select elements on a webpage using their ID $("#id"), their class $(".class") or their tag name $("li") . You can also use a combination of these selectors like $(".class tag") or select combined result of multiple selectors like $("selectorA, selectorB, selectorC").

jQuery also offers few other basic selectors that I have listed below:

:header Selector — Let's say you have to select all the headings like <h1>, <h2>, <h3> in a <section>. In this case, you could either use the verbose $("section h1, section h2, section h3") selector or the much shorter $("section :header") selector. Both will do the same job and the latter one is comparatively easier to read. The header selector has set the background of all headlines to yellow in this demo.
:target Selector — This selector returns the element whose id matches the fragment identifier or hash of the document's URI. For instance, if the URI is "http://ift.tt/2aNzf0f". Then, the selector $("h2:target") will select the element <h2 id="hash">.
:animated Selector — This selector returns all elements that have an animation in progress when the selector is run. This implies that any element whose animation starts after the selector has been executed, won't be returned. Also, keep in mind that if you are using a custom jQuery build without the effects module, this selector will throw an error. In this demo only the animated box turns orange because of the selector.

Index-based selectors

Besides the basic selectors we discussed above, you can also select elements on the basis of their index. jQuery provides its own set of index-based selectors which use zero-based indexing. This means that to select the third element you will have to use the index 2.

Here is a list of all index based selectors:

:eq(n) Selector — This selector will return the element at index n. From version 1.8 onward, it accepts both positive and negative index value. When a negative value is supplied counting occurs backward from the last element.
:lt(n) Selector — This selector will return all elements with index less than n. It also accepts both positive and negative values from version 1.8 onward. Just like the :eq(n) selector, when a negative value is provided counting occurs backward from the last element.
:gt(n) Selector — This selector is just like :lt(n). The only difference is that it returns all elements with an index greater than or equal to n.
:first Selector — This will return the first matched DOM element on a webpage. It is equivalent to :eq(0) and :lt(1). One difference between :first and :first-child selector is that :first-child can select multiple elements each of which is first child of their parent.
:last Selector — This one is similar to the :first selector but returns the last child instead.
:even Selector — This will return all elements with an even index. Since indexing in jQuery is zero-based, the selectors selects first child, third child and so on. This seems counter-intuitive but that's how it works.
:odd Selector — This one works like the :even selector but returns elements with odd indexes.

In the following example, you can click on the three buttons :lt, :gt and :eq and they will randomly generate an index and apply the resulting selector to a list:

See the Pen Index-based Selectors by SitePoint (@SitePoint) on CodePen.

As you can see, using :first and :last only selects the respective first and last elements on the webpage and not within every parent.

Child selectors

jQuery enables you to select the children of an element based on their index or type. The CSS child selectors are different from jQuery ones in the sense that they don't use zero-based indexing.

Here is a list of all child selectors:

:first-child — This selector returns all elements which are the first child of their parent.
:first-of-type — This one selects all elements which are the first sibling of their own kind among many others.
:last-child — This will select the last child of a parent. Just like :first-child, it can select multiple elements in case of many parents.
:last-of-type — It selects all children that are the last of their type in a parent. In case of multiple parents, it can select multiple elements.
:nth-child() — This one is a bit complex. It can accept a variety of values as parameter like a number greater than or equal to 1, the strings even and odd or an equation like 4n+1.
:nth-last-child() — This selector is similar to the previous one and accepts the same parameters. The only difference is that it begins its counting from the last child.
:nth-of-type() — This selector returns all elements that are the nth child of their parent with respect to their siblings with same name.
:nth-last-of-type() — This selector functions just like the :nth-of-type() selector but the counting begins from the end.

Continue reading %A Comprehensive Look at jQuery Selectors%

by Baljeet Rathi via SitePoint

Enabling AJAX File Uploads in Your WordPress Plugin

Providing upload functionality in our plugin is always tricky business. We need to be able to provide a good user experience (UX) for uploading, while also keeping an eye on the security concerns that come with it. If it's not done properly, we could potentially put the site at risk for any security vulnerabilities that arise.

Instead of building the whole solution from scratch, we can leverage the WordPress core code to our advantage to speed up the development, specifically utilising async-upload.php file that's located in the wp-admin directory.

Using the async-upload.php file has several advantages. Firstly, since it's used by WordPress core itself for async uploading in the media library, we can be assured that the code is up to standard. Plus, all the validation and privilege checking has been done so we don't need to do that ourselves.

Continue reading %Enabling AJAX File Uploads in Your WordPress Plugin%

by Firdaus Zahari via SitePoint

Avoid Duplicate Content with These Three Techniques

Since Google’s Panda update, webmasters have been trying to avoid a “duplicate content penalty.” You still need to take the issue of duplicate content seriously — it affects your whole site, not just the pages that host it. While Google has said they don’t penalize pages with duplicate content, if you’ve got a lot of it you can seriously hinder your ability to rank in search results.

If you’re not careful, you could be inadvertently publishing duplicate content a few different ways:

Multiple URLs pointing to the same content
Multilingual versions of the same page
Paginated content

The good news here is that there are some on-page methods you can use to get rid of duplicate content on your site. They are known as rel="canonical”, hreflang and rel=”prev”/rel=”next” (pagination).

It’s well worth your time and effort to implement these fixes to make your site more findable on search engines. Let’s get started!

hreflang: Find Your Targeted Audience

What is it?

Introduced by Google in 2011, the hreflang tag lets you tell a search engine that a page is related to other pages in different languages and/or regions. If your website is https://example.com, and you’ve got the same page in Spanish on https://example.com/es, use the hreflang tag to tell search engines to serve that page to Spanish-speaking searchers.

It’s important to note that hreflang is a factor, not a directive, in search results. So if you have pages that are too similar (like English pages targeting the US and Canada) you run the risk of the wrong version ranking for a search term. Multilingual sites need to be a part of your overall marketing strategy.

How do I do it?

The hreflang annotation is implemented in the

section of an HTML page. For non-HTML pages the tag can be placed in the HTTP header. When done correctly the hreflang tag should look like this:

HTML: <link rel="alternate” hreflang=”en” href=”http://ift.tt/2aKQLl1;
HTTP: link: <http://ift.tt/2ayDMj4;; rel="alternate”; hreflang=”en”

You must include links to every version of your page. If you have English, Spanish and French copies, put links to all three in the page

If you have two or more pages in the same language but targeted to different geographies (say, the US, Canada and UK) you can extend the hreflang variable to include the country code like this:

<link rel="alternate” hreflang=”en-us” href=”http://ift.tt/2aKQLl1;
<link rel="alternate” hreflang=”en-ca” href=”http://ift.tt/2aKR2Vf;
<link rel="alternate” hreflang=”en-gb” href=”http://ift.tt/2ayE09N;

If you’ve got a non-HTML page in multiple languages, separate each hreflang annotation using commas like this:

link: <http://ift.tt/2ayDMj4;; rel="alternate”; hreflang=”en-us”,
link: <http://ift.tt/2aKRoeG;; rel="alternate”; hreflang=”en-ca”,
link: <http://ift.tt/2ayDt7Y;; rel="alternate”; hreflang=”en-gb”,

There’s also a third option to implement hreflang tags: your XML sitemap. Instead of adding markup to your pages, include the foreign language versions of your URLs in your sitemap. Just like with the other annotations, include a URL for each language.

<url>
<loc>http://ift.tt/2ayEbCb;
<xhtml:link 
             rel="alternate"
             hreflang="en-us"
             href="http://ift.tt/WjceXj;
             />
<xhtml:link 
             rel="alternate"
             hreflang="en-ca"
             href="http://ift.tt/2ayE75y;
             />
<xhtml:link 
             rel="alternate"
             hreflang="en-gb"
             href="http://ift.tt/2aKR27B;
             />
</url>

What could go wrong?

A common problem when inserting hreflang annotations are “Return Tag Errors.” These errors come from hreflang annotations that don’t link to each other. Annotations are a two-way street; if your English page links to your German page, your German page must link back to your English page. Possibly the most common Return Tag Error is omitting the self-reference — your English page needs to link to itself.

To check for Return Tag Errors, look in Google Search Console’s International Targeting data under Search Traffic. This will tell you how many hreflang tags Google found and how many have errors.

Return Tag Errors in Google Search Console

Another common problem implementing hreflang annotations is incorrect language or country codes. The hreflang value must be in ISO 639–1 format for language and ISO 3166–1 Alpha 2 format for country. Using ‘uk’ for the United Kingdom is the most common culprit; in this system the value should be ‘gb’ for Great Britain.

Note that your hreflang value must start with the language code and that region targeting is limited to countries — you can’t target the European Union or North America, for example.

rel="canonical”: Which Page is the Original?

What is it?

If you use a content management system, syndicate content or have an e-commerce shopping site, it’s easy to wind up with multiple URLs or domains all pointing to the same content. To combat this, tell search engines where they are to find the original using the rel="canonical” tag. When a search engine sees this annotation, they know the current page is a copy and where to find the canonical content.

How do I do it?

Start by deciding which URL you want to be canonical. In general, you should pick your best optimized URL as your canonical URL. Take it a step further and set your preferred domain in Google Search Console.

A nice benefit of setting a preferred domain is that search engines will take this into account when crawling links to your page; links to example.com will pass link juice to your preferred domain of www.example.com. The same goes for other indexing factors, such as trust and authority.

Set preferred domain in Google Search Console

To properly tell a search engine that content is copied from your canonical URL, place the rel="canonical” annotation in the

of your page. It should look like this:

<link rel="canonical” href=”http://ift.tt/2aKQLl1;

If you’ve got a non-HTML version of a document (like a PDF available for download) you can include the canonical reference in the HTTP header like this:

Link: <http://ift.tt/2aKRhiY;; rel=”canonical”

What could go wrong?

While the rel="canonical” tag seems simple enough to implement, getting it wrong can have a major impact on your search performance. There are a few common misapplications of canonicalization that you need to be sure to avoid:

Paginated content all pointing to page one: When you add the canonical annotation to paginated content match your page 1 URL to your canonical page 1 URL, page 2 to page 2, etc. We’ll cover this in a bit more detail later.

Canonical URLs that are not 100% exact matches: If your site uses protocol relative links, leaving off http/https will still result in search engines seeing duplicate content at those two addresses. Always make your preferred URLs 100% exact matches.

Pointing to canonical URLs that return a 404 error: Search engines will ignore tags that point to a dead page.

Multiple canonical tags: Search engines only support one rel="canonical” annotation per page. You can end up with multiple when a webmaster copies a page template that already includes rel=”canonical” or a plugin inserts a rel=”canonical” automatically. In cases of multiple canonical tags, Google will simply ignore all of them.

rel="prev”/”next”: Avoid Duplicate Title Tags & Meta Descriptions

What is it?

There are a few reasons you might want to break your content into multiple pages: you’ve got a long article or series of articles, your retail site has a long list of products within a category or you’re hosting a discussion forum with a lot of large comment threads. Paginated content generally won’t cause many problems with duplicate content in the body of a page, but will affect one very important aspect of your on-page SEO: title tags and meta descriptions. You can find any instances of duplicate titles and descriptions in Search Console in the HTML Improvements report under Search Appearance.

Find Duplicate Title Tags in Google Search Console

To tell search engines that you’ve got paginated content use the rel="prev” and rel=”next” annotations. These tags tell Google that your pages make up a connected series, consolidating their index properties (links, authority, etc.) and sending search visitors to page one.

How do I do it?

Continue reading %Avoid Duplicate Content with These Three Techniques%

by Greg Snow-Wasserman via SitePoint

Mr Branding

Tuesday, August 2, 2016

Github Widget

A Comprehensive Look at jQuery Selectors

jQuery Selectors

Basic selectors

Index-based selectors

Child selectors

Enabling AJAX File Uploads in Your WordPress Plugin

Avoid Duplicate Content with These Three Techniques

hreflang: Find Your Targeted Audience

What is it?

How do I do it?

What could go wrong?

rel="canonical”: Which Page is the Original?

What is it?

How do I do it?

What could go wrong?

rel="prev”/”next”: Avoid Duplicate Title Tags & Meta Descriptions

What is it?

How do I do it?

Vincent Mazza

WonderReel

Larsson Sweden