6 JS Frameworks to Learn in 2018

JavaScript (JS) is essentially the most used scripting language worldwide. All web developers swear by JS to design, animate and employ elements on the webpage. Along with HTML and CSS, JavaScript can move mountains… I mean, it can literally do anything and make the webpage more interactive and exciting.
Unlike HTML, JS doesn’t limit itself, instead, it keeps evolving because change is the new constant. JS knows how to keep its patrons engaged while they are working with it. JS is the most versatile programming language used worldwide owing to its ability to develop apps for a wide range of platforms such as Android, Windows, and iOS.

Link: https://dzone.com/articles/6-js-frameworks-to-learn-in-2018?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

We Need to Create a More Inclusive Web for Developers

When I was a kid, back in the time when there were announcers telling you which the next program on TV would be, you knew it would be good if they said: “We’d like to warn sensitive viewers that next program might upset you." So, with that in mind, I need to start this blog post with saying that it doesn’t reflect the opinions of my employer, Google, but are all my own. Ok, now that that’s out of the way, I want to talk about the state of the web, and what it’s like for developers, and I do hope to bring some nuance and perspective to the discussion.

Link: https://dzone.com/articles/we-need-to-create-a-more-inclusive-web-for-develop?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

A Full-screen Bootstrap Carousel with Random Initial Image

In this article, I’m going to build two simple extensions for the Bootstrap carousel. First, I’ll create a full-screen Bootstrap Carousel slideshow, and then I’ll show you how to randomize the first slide on page load.
But before digging into those extensions, let’s start by creating a carousel based on the default styles.
Building the Carousel
To create the carousel, we’ll take advantage of the basic code for the carousel component that Bootstrap provides:
[code language=”html"]

<!– Indicators –>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!– Wrapper for slides –>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="1.jpg" data-color="lightblue" alt="First Image">
<div class="carousel-caption d-none d-md-block">
<h5>First Image</h5>
</div>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<div class="carousel-item">
<!– slide content –>
</div>
<!– more slides –>
</div>
<!– Controls –>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
[/code]
Notice that each of our images contains the custom data-color attribute. Later we’ll use its value as a fallback in case the corresponding image fails to load.
The next step is to initialize the carousel via JavaScript and modify the predefined values of the interval and pause configuration properties. Take note that we choose to set the value of the pause property to false because we always want the cycling to be active:
[code language="javascript"]
$(‘.carousel’).carousel({
interval: 6000,
pause: "false"
});
[/code]
Having followed those simple steps (and of course imported the required files), we should now be able to build the first version of the carousel. Here’s how it looks so far:
See the Pen Basic Bootstrap Carousel by SitePoint (@SitePoint) on CodePen.

Continue reading %A Full-screen Bootstrap Carousel with Random Initial Image%

Link: https://www.sitepoint.com/full-screen-bootstrap-carousel-random-initial-image/

Getting Bootstrap Tabs to Play Nice with Masonry

On the Masonry website, we read that Masonry is …

a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Bootstrap is one of the most widely adopted, open-source, front-end frameworks. Include Bootstrap in your project, and you’ll be able to whip up responsive web pages in no time.
If you tried using Masonry together with the Tabs widget, one of the many JavaScript components Bootstrap has to offer, chances are you’ve stumbled on some kind of annoying behavior.
I did, and this article highlights what the issue is and what you can do to solve it.
Bootstrap Tabs Explained
Bootstrap’s Tabs component includes two key, related pieces: a tabbed navigation element and a number of content panels. On page load, the first panel has the class .active applied to it. This enables the panel to be visible by default. This class is used via JavaScript to toggle the panel’s visibility via the events triggered by the tabbed navigation links: if .active is present the panel is visible, otherwise the panel is hidden.
If you have some web content that’s best presented in individual chunks, rather than crammed all in one spot, this kind of tabs component might come in handy.
Why Masonry?
In some cases, the content inside each panel is suited to being displayed in a responsive grid layout. For instance, a range of products, services, and portfolio items are types of content that can be displayed in grid format.
However, if grid cells are not of the same height, something like what you see below can happen.

A wide gap separates the two rows of content and the layout appears broken.
Nowadays, Bootstrap solves the equal-width issue with the brand new card component, which is based on Flexbox. Just adding the card-deck class to a group of card components is sufficient to achieve equal-width columns.
If you like your cards to be of uneven length, you could use CSS3 Multi Column Layout. (After all, even though there are some browser support bugs, overall it’s quite good.) This underlies the new card columns option that comes packaged with the card component. However, if you still love the nice animation that the Masonry JavaScript library provides out of the box, and its wide browser compatibility, JavaScript is still a viable option in this case.
Setting Up a Demo Page
Getting a demo page up and running helps to show how integrating Bootstrap’s Tabs with Masonry is not as straightforward as one might expect.
This article’s demo page is based on the starter template, available on the Bootstrap website.
Below is the skeleton of the markup for the tabs component:

Top JavaScript Libraries for Making AJAX Calls

AJAX is a set of web development techniques used by client-side frameworks and libraries to make asynchronous HTTP calls to the server. AJAX stands for Asynchronous JavaScript and XML. AJAX used to be a common name in the web development circles and many of the popular JavaScript widgets were built using AJAX. For instance, a particular user interaction such as a button press would invoke an asynchronous call to the server and the server would retrieve data and return it back to the client—all this without reloading the webpage.
A Modern Reintroduction to AJAX
JavaScript has evolved and, today, we have dynamic websites built using front-end libraries and/or frameworks like React, Angular, Vue, etc. The concept of AJAX has also undergone major changes because modern asynchronous JavaScript calls involve retrieving JSON instead of XML. There are many libraries out there that let you make asynchronous calls to the server from your client-side application. Some of them have made their way into the browser standards, whereas others have a large user-base because they are flexible and easy to use. Some of them support promises whereas others use callbacks. In this article, I’ve covered the top 5 AJAX libraries for fetching data from the server.

Link: https://dzone.com/articles/top-javascript-libraries-for-making-ajax-calls?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

jQuery 3.3.1 – fixed dependencies in release tag

We encountered an issue in the release for jQuery 3.3.0, so we’ve immediately released another tag. The code itself is identical, but our release dependencies (only used during release) were added to the dependencies of the jQuery package itself due to the new behavior of npm in version 5+. jQuery 3.3.1 is now recommended if … Continue reading →

Link: http://blog.jquery.com/2018/01/20/jquery-3-3-1-fixed-dependencies-in-release-tag/

jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature?

It’s been a while since the last jQuery release, but the Core team hasn’t been idle. We’ve got an all new minor release for you, and it’s even got a new feature in it! The .addClass(), .removeClass(), and .toggleClass() methods now accept an array of classes. jQuery(elem).addClass([‘dave’, ‘michał’, ‘oleg’, ‘richard’, ‘jason’, ‘timmy’]); Generally, jQuery is … Continue reading →

Link: http://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/

jQuery Code Snippets for Responsive Websites

When building a responsive website or app, jQuery can be of great help. In fact, it can take the whole user experience to a new level. In this article, I have compiled my favorite jQuery tips and tricks for making and enhancing responsive sites.
Scroll to an Element
Scrolling endlessly isn’t the most fun thing ever. This is why it can be very useful to set scrolls so your visitors won’t need to take 10 seconds to reach the info they’re looking for.

Link: https://dzone.com/articles/jquery-code-snippets-for-responsive-websites?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev