How to (Safely) Use a jQuery Plugin With Vue.js

It’s not a great idea to use jQuery and Vue.js in the same UI. Don’t do it if you can avoid it.
But you’re probably reading this not because you want to use jQuery and Vue together, but because you have to. Perhaps a client is insisting on using a particular jQuery plugin that you won’t have time to rewrite for Vue.

Link: https://dzone.com/articles/how-to-safely-use-a-jquery-plugin-with-vuejs?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Coder Frozen in 2009 Awakens to Find Front-End Development Not Awful

I’ve not seriously touched front-end code, in years. Frankly, it scares me. To that end “front-end devs are not real programmers” is totally BS. I want to talk about some of the recent changes in tooling and APIs that are available so that front-end development might not suck as much as it used to. You will not learn to be a CSS or JS guru with this post. If you’ve written much front-end code, this will be mostly full of face-palm level obvious statements. Therefore, feel free to read for the laughs.
I’ve been working at Heroku for 5+ years and I’ve not shipped a production feature that touched front-end code in that time. Prior to that, I kinda dabbled a bit, but mostly just mocked up other people’s interfaces. The last “real” website on which I was responsible for front-end development was probably circa 2009, and it was awful (both in experience and my designs).

Link: https://dzone.com/articles/coder-frozen-in-2009-awakens-to-find-frontend-deve?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

6 jQuery-inspired Native DOM Manipulation Methods You Should Know

When jQuery was released, one of the main reasons behind its meteoric rise to popularity was the ease with which it could select DOM elements, traverse them and modify their content. But that was way back in 2006. In those days we were stuck with Internet Explorer 7 and ECMAScript 5 was still a couple of years off.

Luckily, a lot has changed since then. Browsers have become considerably more standards compliant and native JavaScript has improved in leaps and bounds. And as things have improved, we have seen people questioning whether we still need jQuery. I’m not going to get into that argument here, rather I’d like to offer some food for thought, as I present six native DOM manipulation methods which were inspired by this great library. These are as follows:

append()
prepend()
after()
before()
replaceWith()
remove()

In this article I want to examine the similarities and the differences between these native DOM manipulation methods and their jQuery counterparts. Then hopefully, the next time you find yourself including jQuery for the sake of a convenience method or two, you might opt to embrace the power of vanilla JavaScript instead.
1. append()
The append method performs an insertion operation, that is, it adds nodes to the DOM tree. As the name indicates, it appends the passed arguments to the list of children of the node on which it is invoked. Consider the following example:
const parent = document.createElement(‘div’)
const child1 = document.createElement(‘h1’)
parent.append(child1)
parent.outerHTML
//

<h1></h1></div>

const child2 = document.createElement(‘h2’)
parent.append(child2)
parent.outerHTML
// <div><h1></h1><h2></h2></div>

At this point you would be forgiven for asking how this differs from the native appendChild method. Well, a first distinction is that append() can take multiple arguments at once, and the respective nodes will be appended to the list of children, just like the jQuery append method. Continuing the previous snippet:
const child3 = document.createElement(‘p’)
const child4 = document.createElement(‘p’)
const child5 = document.createElement(‘p’)
parent.append(child3, child4, child5)
parent.outerHTML
/* Outputs:
<div>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
<p></p>
</div>
*/

Furthermore, an argument can be even a string. So, while with appendChild() a rather verbose syntax must be employed:
parent.appendChild(document.createTextNode(‘just some text’))

with append() the same operation is shorter:
parent.append(‘just some text’)
parent.outerHTML
/* Outputs:
<div>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
<p></p>
just some text
</div>
*/

The string is converted to a Text node, so any HTML is not parsed:
parent.append(‘<p>foo</p>’)
parent.outerHTML
/* Outputs:
<div>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
<p></p>
just some text
<p&gt;foo&lt;/p&gt;
</div>
*/

This is in contrast to the jQuery method, where strings of markup are parsed and the corresponding nodes are generated and inserted into the DOM tree.
As is usually the case, if the appended node it is already present in the tree, it is first removed from its old position:
const myParent = document.createElement(‘div’)
const child = document.createElement(‘h1’)
myParent.append(child)
const myOtherParent = document.createElement(‘div’)
const myOtherParent.append(child)
myOtherParent.outerHTML
// <div><h1></h1></div>

myParent.outerHTML
// <div></div>”

A final difference between append() and appendChild() is that the latter returns the appended node, whereas the former returns undefined.
2. prepend()
The prepend method is very similar to append(). Children are added, but this time they are prepended to the list of children of the node on which the method is called, just before the first child:
const parent = document.createElement(‘div’)
const child1 = document.createElement(‘p’)
parent.prepend(child1)
parent.outerHTML
// <div><p></p></div>

const child2 = document.createElement(‘h2’)
parent.prepend(‘just some text’, child2)
parent.outerHTML
/* Outputs:
<div>
just some text
<h2></h2>
<p></p>
</div>
*/

The return value of the method is undefined. The corresponding jQuery method is prepend().
3. after()
The after method is another insertion method, but this time it must be called on a child node, that is, a node with a definite parent. Nodes are inserted as adjacent siblings, as can be seen in the following example:
const parent = document.createElement(‘ul’)
const child = document.createElement(‘li’)
child.append(‘First item’)
parent.append(child)
child.after(document.createElement(‘li’))
parent.outerHTML
// <ul><li>First item</li><li></li></ul>

The return value is undefined and in jQuery the similar operation is after().
4. before()
The before method is similar to after(), but now the nodes are inserted before the child node:
const parent = document.createElement(‘ul’)
const child = document.createElement(‘li’)
child.append(‘First item’)
parent.append(child)

const child1 = document.createElement(‘li’)
child1.append(‘Second item’)

const child2 = document.createElement(‘li’)
child2.append(‘Third item’)

child.before(child1, child2)

parent.outerHTML
/* Outputs:
<ul>
<li>Second item</li>
<li>Third item</li>
<li>First item</li>
</ul>
*/

Once again, the return value is undefined. The respective jQuery method is before().
Continue reading %6 jQuery-inspired Native DOM Manipulation Methods You Should Know%

Link: https://www.sitepoint.com/native-dom-manipulation-methods/

(Now More Than Ever) You Might Not Need jQuery

The DOM and native browser API’s have improved by leaps and bounds since jQuery’s release all the way back in 2006. People have been writing “You Might Not Need jQuery" articles since 2013 (see this classic site and this classic repo). I don’t want to rehash old territory, but a good bit has changed in browser land since the last You Might Not Need jQuery article you might have stumbled upon. Browsers continue to implement new APIs that take …

(Now More Than Ever) You Might Not Need jQuery is a post from CSS-Tricks

Link: https://css-tricks.com/now-ever-might-not-need-jquery/

14 jQuery Live Search Plugins

A live search is an enhanced search form that uses AJAX technology to deliver results or suggestions within the same view. This is different from a regular HTML input field that is given autocomplete powers from a modern browser like Chrome, Firefox or Safari. A live search is often an input field that has been programmed to load suggestions from a specific dataset.

July 6th, 2017: This article was rewritten to update the list of plugins, and include some bonus, non-jQuery libraries.

Using live search in your application greatly improves the user friendliness of your site. Whatever back-end technology you are using — PHP, Java, Python, Ruby — JavaScript is your best bet in implementing a client-side live search feature.
Before I proceed, I would like to point out that the term live search is a bit ambiguous. There’s no authoritative definition for that term. Other terms that are frequently used to mean the same thing are autocomplete and type ahead.
I’ve come across a number of solutions labeled as live search which lack certain critical features. For this article, I’ll only shortlist live search solutions that fit the definition I’ve defined above.
1. Ajax Live Search

The first one on this list is a pretty amazing open-sourced, live search jQuery plugin. It is well documented and works perfectly in Chrome, Firefox, Safari, Opera, and IE8. The most impressive feature is that it can return results in the form of a paginated table! How cool is that?
You can learn more about it in the following links:

Website
Source
Download

2. Semantic UI Search Component

If you are into CSS frameworks, you should check out Semantic UI. They have a cool Search Component that allows you to implement live search on your forms very easily. Just take a look at this example code:
HTML:

How to Convert a jQuery Plugin Into a WordPress Plugin

We’ve talked about how incredibly dominant WordPress can be as a web platform to publish your content. But, for all its features and functionality, some people still want more. While programmers and developers have been feverishly working to come up with every kind of plug-in and function imaginable to make WordPress easy and engaging to use, there are some jQuery plugins that simply do it better.
However, as plugins and API’s go, they are non-standalone software that implement functionalities into standalone software. If you didn’t follow that right away, here is a succinct way of putting it: the person who made your jQuery plugin didn’t make it for WordPress, and WordPress hasn’t updated their platform to seamlessly integrate the same kind of feature functionality you are looking to use.

Link: https://dzone.com/articles/how-to-convert-a-jquery-plugin-into-a-wordpress-pl?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Pure CSS3 LavaLamp Menu

I think that you have already seen various animated menus with the LavaLamp effect (based on jQuery plugin). Today I would like to tell you how to repeat the same behavior only with CSS3 (without any JavaScript). I had to use CSS3 transitions in our menu (to animate elements). So, if you are ready, let’s start.
Here are samples and downloadable package:

Link: https://dzone.com/articles/pure-css3-lavalamp-menu-1?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Drop jQuery From Your Bootstrap Project (and Replace it With Vue.js!)

Bootstrap is the internet’s most popular web page framework. I’m unaware of a quicker way to build a responsive web project than with Bootstrap.
But since my tool of choice for adding dynamic functionality to a page is Vue.js now, it’s becoming harder to justify Bootstrap because it brings with it some baggage…I’m talking about jQuery.

Link: https://dzone.com/articles/drop-jquery-from-your-bootstrap-project-and-replac?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

19+ JavaScript Shorthand Coding Techniques

This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand what is going on I have included the longhand versions to give some coding perspective.

June 14th, 2017: This article was updated to add new shorthand tips based on ES6. If you want to learn more about the changes in ES6, sign up for SitePoint Premium and check out our screencast A Look into ES6

1. The Ternary Operator
This is a great code saver when you want to write an if..else statement in just one line.
Longhand:
const x = 20;
let big;

if (x > 10) {
big = true;
} else {
big = false;
}

Shorthand:
const big = x > 10 ? true : false;

You can also nest your if statement like this:
const big = x > 10 ? ” greater 10" : x < 5 ? "less 5" : "between 5 and 10"; 2. Short-Circuit Evaluation Shorthand When assigning a variable value to another variable, you may want to ensure that the source variable is not null, undefined or empty. You can either write a long if statement with multiple conditionals, or use a short-circuit evaluation. Longhand: if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; } Shorthand: const variable2 = variable1 || 'new'; Don’t believe me? Test it yourself (paste the following code in es6console): let variable1; let variable2 = variable1 || ''; console.log(variable2 === ''); // prints true variable1 = 'foo'; variable2 = variable1 || ''; console.log(variable2); // prints foo 3. Declaring Variables Shorthand It is good practice to declare your variable assignments at the beginning of your functions. This shorthand method can save you lots of time and space when declaring multiple variables at the same time. Longhand: let x; let y; let z = 3; Shorthand: let x, y, z=3; 4. If Presence Shorthand This might be trivial, but worth a mention. When doing “if checks”, assignment operators can sometimes be omitted. Longhand: if (likeJavaScript === true) Shorthand: if (likeJavaScript) Here is another example. If “a” is NOT equal to true, then do something. Longhand: let a; if ( a !== true ) { // do something... } Shorthand: let a; if ( !a ) { // do something... } 5. JavaScript for Loop Shorthand This little tip is really useful if you want plain JavaScript and not rely on external libraries such as jQuery or lodash. Longhand: for (let i = 0; i < allImgs.length; i++) Shorthand: for (let img in allImgs) Shorthand for Array.forEach: function logArrayElements(element, index, array) { console.log("a[" + index + "] = " + element); } [2, 5, 9].forEach(logArrayElements); // logs: // a[0] = 2 // a[1] = 5 // a[2] = 9 6. Short-Circuit Evaluation Instead of writing six lines of code to assign a default value if the intended parameter is null or undefined, we can simply use a short-circuit logical operator and accomplish the same thing with just one line of code. Longhand: let dbHost; if (process.env.DB_HOST) { dbHost = process.env.DB_HOST; } else { dbHost = 'localhost'; } Shorthand: const dbHost = process.env.DB_HOST || 'localhost'; 7. Decimal Base Exponents You may have seen this one around. It’s essentially a fancy way to write numbers without the trailing zeros. For example, 1e7 essentially means 1 followed by 7 zeros. It represents a decimal base (which JavaScript interprets as a float type) equal to 10,000,000. Longhand: for (let i = 0; i < 10000; i++) {} Shorthand: for (let i = 0; i < 1e7; i++) {} // All the below will evaluate to true 1e0 === 1; 1e1 === 10; 1e2 === 100; 1e3 === 1000; 1e4 === 10000; 1e5 === 100000; 8. Object Property Shorthand Defining object literals in JavaScript makes life much easier. ES6 provides an even easier way of assigning properties to objects. If the property name is the same as the key name, you can take advantage of the shorthand notation. Longhand: const obj = { x:x, y:y }; Shorthand: const obj = { x, y }; 9. Arrow Functions Shorthand Classical functions are easy to read and write in their plain form, but they do tend to become a bit verbose and confusing once you start nesting them in other function calls. Longhand: function sayHello(name) { console.log('Hello', name); } setTimeout(function() { console.log('Loaded') }, 2000); list.forEach(function(item) { console.log(item); }); Shorthand: sayHello = name => console.log(‘Hello’, name);

setTimeout(() => console.log(‘Loaded’), 2000);

list.forEach(item => console.log(item));

10. Implicit Return Shorthand
Longhand:
function calcCircumference(diameter) {
return Math.PI * diameter
}

Longhand:
calcCircumference = diameter => Math.PI * diameter;

11. Default Parameter Values
You can use the if statement to define default values for function parameters. In ES6, you can define the default values in the function declaration itself.
Continue reading %19+ JavaScript Shorthand Coding Techniques%

Link: https://www.sitepoint.com/shorthand-javascript-techniques/

Vue.js Is Easier to Learn Than jQuery

jQuery is commonly suggested as a good starting point for beginner web developers. Many learn jQuery even before they’ve begun to learn vanilla JavaScript.
Why? It’s partly because of jQuery’s popularity, but mostly because of a misguided belief that more experienced developers have: since jQuery is simple for them, that it’s also simple for beginners.

Link: https://dzone.com/articles/vuejs-is-easier-to-learn-than-jquery?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev