Use jQuery Plugins With Conflicting Names on the Same Page in ASP.NET

Recently, I have installed a new jQuery plugin (jQuery Masked Input Plugin by Josh Bush) to my application. I’d noticed that my existing masking functionality, that I’d already had in place, was broken somehow. Later, I found that there was a name conflict between my existing plugin and the new jQuery Masked Input Plugin that I had installed. Both plugins had the same name function “mask." In this article, we will see how we can solve it. Problem: Error Due to jQuery Plugins With Conflicting Names custom-extensions.js: has a mask function.

Link: https://dzone.com/articles/use-jquery-plugins-with-conflicting-names-on-the-s?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

25 Programming Books for the Aspiring Developer

Whether you’re learning to code online, at a bootcamp, or in-person, there’s one supplementary resource that we recommend to accompany your learning: books. But with so many programming books to choose from (a Google search brings up over 12 million…
The post 25 Programming Books for the Aspiring Developer appeared first on Treehouse Blog.

Link: http://blog.teamtreehouse.com/25-programming-books-for-the-aspiring-developer

6 jQuery Form Wizard Plugins

A jQuery Form Wizard is a jQuery plugin that assists with the creation of forms with some sort of form flow (without refreshing your page). For example, if you had a large form for entering user data, you could use a form wizard to divide it into a series of related steps. This has the advantage of not overwhelming users with a really long form and also giving them some indication of their progress as they enter their information.
In this post we list 6 of our favorite jQuery form wizards, examine their different features and finally look at a couple of paid options, as well as how to create your own. This isn’t intended to be an exhaustive list, but if you are looking for a jQuery form wizard, then hopefully this will point you in the right direction.

This popular post was updated on 30.08.2017. Broken / abandoned plugins were removed from the list and new plugins were added to reflect features people were asking for in the comments.

1. jQuery Steps
jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. It has a plethora of features, such as async content loading, state persistence (it saves your input between steps) and transition effects between sections. It can be installed via NuGet or bower and has a well-documented and feature-rich API.

Homepage | GitHub | Demo
2. jQuery Smart Wizard
Smart Wizard is a flexible and heavily customizable jQuery step wizard plugin with Bootstrap support. It is easy to implement and gives a neat and stylish interface for your forms, checkout screen, registration steps etc. Its features include theme support (with various themes included), URL navigation and step selection and the ability to dynamically hide or disable steps. It can be installed via npm, bower or composer and has a well-documented and feature-rich API.

Homepage | GitHub | Demo
3. formToWizard
This lightweight plugin turns any webform into multi-step wizard with jQuery, whereby every form

is turned into a separate step with forward and back buttons. It doesn’t have nearly as many features as the previous two plugins, but does integrate with the jQuery validation plugin to provide validation functionality. It is a single file (so you can just grab it off GitHub and go) and if JavaScript is unavailable, it degrades gracefully.

GitHub | Demo
Continue reading %6 jQuery Form Wizard Plugins%

Link: https://www.sitepoint.com/jquery-form-wizard-plugins/

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