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

Best JavaScript Frameworks, Libraries and Tools to use in 2017

It seems there are more JavaScript frameworks, libraries, and tools than there are developers. As of May 2017, a quick search on GitHub reveals more than 1.1 million JavaScript projects. There are 500 thousand usable packages on npmjs.org with almost 10 billion downloads every month.
This article endeavors to explain the basics and rudimentary differences between the most popular client-side JavaScript frameworks, libraries, and tools. Whether they are “best" for you is another question. Choose something and stick with it for a while. Just be aware your favorite option will be superseded by something "better" no matter what you select!
Please accept the following terms and conditions before reading this article…!

The JavaScript landscape changes on a daily basis. This article will be out of date the moment it’s published!
By "best" I mean "the most popular general-purpose projects". All are free/open source but the list may not include your favorites.
Discontinued projects such as YUI are not included even though they may still have high use across the web.
Only client-side projects are referenced. Some can work server-side but the list does not include pure server-based frameworks such as Express.js or Hapi.
Information about each project is intentionally brief to provide an overview for further research.
Each project provides a usage popularity indicator but statistics are notoriously difficult to collate and can be misleading.
I’m biased. You’re biased. Everyone else is biased! I haven’t tried every tool here and will declare my favorites but you should make your own assessment based on your requirements.
Neither I nor SitePoint are liable for any disastrous decisions you make!

Tricky Terminology
The terms "framework", "library" and "tool" can mean different things to different people at different times depending on the context. The general definitions used here:
Libraries
A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.
Libraries normally provide a higher level of abstraction which smooths over implementation details and inconsistencies. For example, Ajax normally relies on the XMLHttpRequest API but this requires several lines of code and there are subtle differences across browsers. A library may provide a simpler ajax() function so you’re free to concentrate on higher-level business logic.
A library could cut development time by 20% because you don’t have to worry about the finer details. The downsides:

a bug within a library can be difficult to locate and fix
there’s no guarantee the development team will release a patch quickly
a patch could change the API and incur significant changes to your code.

Frameworks
A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.
A framework normally provides a higher level of abstraction than a library and will help you rapidly build the first 80% of your project. The downsides:

the last 20% can be tough going if your application moves beyond the confines of the framework
framework updates can be difficult – if not impossible
core framework code and concepts rarely age well. Developers will always discover a better way to do the same thing.

Tools
A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.
Tools should provide an easier development process. For example, many coders prefer Sass to CSS because it provides code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax so the code must be compiled to CSS using an appropriate tool before testing and deployment.
Don’t Label Me!
The distinction between libraries, frameworks, and tools is rarely clear. A framework could include a library. A library may implement framework-like methods. Tools could be essential for either. I’ve attempted to label each project but the scope can vary.
If this sounds too complicated, you could consider coding vanilla JavaScript. That’s fine, but you will inevitably write your own library and/or framework code which must be maintained. JavaScript itself is an abstraction on a tower of browser and OS abstractions!
JavaScript Frameworks and Libraries
Projects in order of popularity…
jQuery

jQuery

type
library

website
jquery.com

repository
github.com/jquery/jquery

current version
3.2.1

developer
jQuery team

launch date
August 2006

typical size
30kb min

typical use
general purpose

usage
72.4% of all websites

jQuery remains the most-used JavaScript library ever created and is distributed with WordPress, ASP.NET and several other frameworks. It revolutionized client-side development by introducing CSS selector to DOM node retrieval plus chaining to apply event handlers, animations, and Ajax calls.
jQuery has fallen from favor in recent years but remains a viable option for projects which require a sprinkling of JavaScript functionality.
Pros:

small distribution size
shallow learning curve, considerable online help
concise syntax
easy to extend

Cons:

adds a speed overhead to native APIs
less essential now that browser compatibility has improved
usage has flat-lined
some industry backlash against unnecessary use.

React

React

type
library

website
facebook.github.io/react/

repository
github.com/facebook/react

current version
15.5.4

developer
Facebook and contributors

launch date
March 2013

typical size
21kb min

typical use
single-page applications

usage
low

Perhaps the most-talked about library of the past year, React claims to be a JavaScript library for building user interfaces. It focuses on the "View" part of Model-View-Controller (MVC) development and makes it easy to create UI components which retain state. It was one of the first libraries to implement a virtual DOM; the in-memory structure computes the differences and updates the page efficiently.
React usage appears low in statistics perhaps because it’s used in applications rather than websites. Almost 38% of developers claim to be using the library.
Pros:

small, efficient, fast and flexible
simple component model
good documentation and online resources
server-side rendering is possible
currently popular and experiencing rapid growth

Cons:

new concepts and syntaxes to learn
build tools are essential
can require other libraries or frameworks to provide the model and controller aspects
can be incompatible with code and other libraries which modify the DOM

Learn more about React with our Premium course, React the ES6 Way

Continue reading %Best JavaScript Frameworks, Libraries and Tools to use in 2017%

Link: https://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/

10 jQuery HTML5 Audio Players

According to Buzz Angle Music, a total of 83 billion audio streams were consumed in U.S. alone in the first quarter of 2017. This marks a 61.2% increase over the previous quarter. Meanwhile, music sales dropped by 23.8%.

May 8th, 2017: This popular article was updated to reflect the currently available audio players and plugins.

One advantage of streaming is that the audience can enjoy their favorite music and on-line broadcasts without worrying about storage space on their devices. More and more people, especially the younger generation, are discovering this convenience as the availability of affordable Internet reaches more people.
If you would like to get into the streaming business, you could do a lot worse than to check out this list of HTML5 audio players I’ve compiled.
1. MediaElement.js

Currently one of the best open source media players for websites, MediaElement.js supports both video and audio. MediaElement.js is capable of playing media from local and third-party sources such as SoundCloud, YouTube, DailyMotion, Vimeo, and Twitch. It can be configured with Vanilla JavaScript, jQuery, Node, Meteor, Require.js and React.
The reason I’ve given this media player the top spot is that it’s still under active development. This means issues will be resolved faster and it will likely be kept up-to-date with the latest HTML5 standards and browser support.

License: Open Source(MIT)
Website
Download
Source (GitHub)
NPM – 4,697 downloads last month
Documentation
CDN links:

http://www.jsdelivr.com/projects/mediaelement
https://cdnjs.com/libraries/mediaelement

2. SoundManager 2

SoundManager 2 is built to make it easier to deliver audio to desktop and mobile platforms. It has a powerful API that uses HTML5 audio where supported and optionally falls back to Flash where needed. It has no external dependencies and can be used with other JavaScript frameworks such as jQuery. Documentation is top notch, allowing developers to configure it for their needs. It supports playlists and multiple skins are available out of the box. Some of the websites using it include Last.fm and BeatsMusic.
Development of this audio player has slowed down, but the open-source community is doing a great job resolving issues reported by users. Sound Manager 2 is really well designed and is still compatible with the latest browser standards. It currently supports all major browsers including IE6, Safari, and Android.

License: Open Source (BSD)
Website
NPM – 5,048 downloads last month
Source (GitHub)

3. React-jPlayer

If you are looking for a jPlayer version that has no dependency on jQuery, then you are in luck (that is, if you are a React developer). React-jPlayer is a very new entry heavily inspired by jPlayer. It currently supports both audio and video. Modern browsers from IE9 and all modern mobile platforms are supported. This means older browsers such as IE6 and IE7 are not supported (not a big deal). It doesn’t use Flash as a fallback since iOS and Chrome have officially dropped support for it.
Continue reading %10 jQuery HTML5 Audio Players%

Link: https://www.sitepoint.com/10-jquery-html5-audio-players/

Web Diary System for jQuery and C# MVC

Introduction
This article describes using the very fine open source jQuery plugin, “FullCalendar,” by Adam Shaw to develop an appointment booking system. I will demonstrate numerous ways to use the plugin and show how it can integrate with an SQL Backend with Entity-Framework. The aim of this article is to give you almost everything you need, that you can tweak immediately, to bring diary/appointment functionality to your MVC application. This is a complete walk-through including setup of a linked EF database in SQL. I am going to use the Twitter Bootstrap framework to help speed things along. I am also going into a lot of detail to help those wishing to use the plugin to get started as fast as possible. The attached project is written in C# MVC 4. 
Background
I was recently looking for a good reliable web-based diary plugin that would allow me to give a solid appointment management functionality to my apps. Apart from some commercial offerings, the most suitable solution open source plugin I found was FullCalendar. Get it here. The demo scenario will have the following functionality:

Link: https://dzone.com/articles/web-diary-system-for-jquery-and-c-mvc?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Dashboard: Drag and Drop Visuals and Export Using JavaScript Libraries

Recently, I published an article on various JavaScript libraries for Dashboards. In this article, I am going to demonstrate how we can create a dashboard with drag-and-drop visuals and export it using JavaScript.
I am going to use the Gridster library to create the dashboard. I have used this library in my projects and found it easy to use and flexible.

Link: https://dzone.com/articles/dashboard-drag-and-drop-visuals-and-export-using-j?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev