CSS-Tricks

jQuery

The web can be anything we want it to be

# By Robin Rendle

I really enjoyed this chat between Bruce Lawson and Mustafa Kurtuldu where they talked about browser support and the health of the web. Bruce expands upon a lot of the thoughts in a post he wrote last year called World Wide Web, Not Wealthy Western Web where he writes:

...across the world, regardless of disposable income, regardless of hardware or network speed, people want to consume the same kinds of goods and services. And if your websites are made for the whole world, not just the wealthy Western world, then the next 4 billion people might consume the stuff that your organization makes.

(more…)

Is jQuery still relevant?

# By Chris Coyier

Part of Remy Sharp's argument that jQuery is still relevant is this incredible usage data:

I've been playing with BigQuery and querying HTTP Archive's dataset ... I've queried the HTTP Archive and included the top 20 [JavaScript libraries] ... jQuery accounts for a massive 83% of libraries found on the web sites.

This corroborates other research, like W3Techs:

jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites.

And BuiltWith that shows it at 88.5% of the top 1,000,000 sites they look at.

Even without considering what jQuery does, the amount of people that already know it, and the heaps of resources out there around it, yes, jQuery is still relevant. People haven't stopped teaching it either. Literally in schools, but also courses like David DeSandro's Fizzy School. Not to mention we have our own.

While the casual naysayers and average JavaScript trolls are obnoxious for dismissing it out of hand, I can see things from that perspective too. Would I start a greenfield large project with jQuery? No. Is it easy to get into trouble staying with jQuery on a large project too long? Yes. Do I secretly still feel most comfortable knocking out quick code in jQuery? Yes.

(Now More Than Ever) You Might Not Need jQuery

# By Ollie Williams

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 the pain away from library-free development, many of them directly copied from jQuery.

Let's go through some new vanilla alternatives to jQuery methods.

(more…)

Lazy Loading Gravatars in WordPress

# By Chris Coyier

Most WordPress themes show user Gravatars in the comment threads. It's a way of showing an image with the user, as associated by the email address used. It's a nice touch, and almost an expected design pattern these days.

Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren't always particularly tiny files. Yeesh.

Let's lazy load them.

(more…)

Need to do Dependency-Free Ajax?

# By Chris Coyier

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it's becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to lose the jQuery dependency.

How's Ajax doing?

(more…)

The Narrative Browser Using Articulate.js

# By Adam Coti

Many sites with lots of written content employ specially crafted print style sheets. That way, a user can print out the relevant content without wasting paper on navigation, ads, or anything else not germane.

Articulate.js, a jQuery plugin, is what I consider the narrative equivalent. With as little as one line of code, it enables developers to create links that allow users to click, sit back, and listen to the browser read aloud the important content of a web page. In some ways, it can turn a thoughtful essay or article into a mini podcast. And because it uses built-in JavaScript functionality, no browser extensions or other system software is needed.

(more…)

Is jQuery Still Relevant?

# By Chris Coyier

It took a minute, but I believe we have arrived at Baby Bear on the jQuery conversation. Some choice quotes from the ensemble cast blog post:

Nathanael Anderson: The biggest negative for jQuery in this day and age is that browsers are a lot more standard in coverage and directly messing with the DOM is slow unless you can do everything at one time; and jQuery was not designed for large change groups.

Todd Motto: Final thing from me: let’s not aim to dissuade jQuery developers from using it – it’s amazing, extremely mature and powerful, and its place in “modern web” has shifted, that’s all. In 5 years we’ll all be doing it wrong again.

TJ VanToll: To me, jQuery remains the gold standard for a library with an elegant API design and comprehensive documentation. Although I may not use it in every app nowadays, I still find it the easiest way to interact with the DOM and add powerful widgets to my apps.

And coincidentally, in Nicholas C. Zakas's newsletter:

I ran into a former coworker shortly after leaving Yahoo as he was preparing to join a new company as a tech lead. During our conversation, he mentioned that his top priority would be to switch them over to YUI. The company was using jQuery, and he said he really didn't want to use it. I gently suggested that, perhaps, this wasn't really a battle he wanted to wage. He could certainly evaluate the overall architecture to see what improvements would be made, but going into a company and trying to get everyone to switch to your favorite library or framework is rarely a formula for success.

When I joined Box, I ran into a similar situation except that people seemed to assume that I would try to eliminate jQuery from the front-end. Time after time I was asked, "are you going to get rid of jQuery?" My response was always the same: "No, jQuery isn't going anywhere. However, I want to make sure its position in the architecture is well-defined."

Pledging allegiance to a particular technology or approach is fine so long as you don't become dogmatic about it.

Collision Detection

# By Chris Coyier

I posted about jQuery UI's position feature years ago, but I was just thinking of how useful the collision detection part of that feature is. In a nutshell: you can position an element where you want them to go, but if it calculates that where you're putting it would be offscreen or otherwise hidden, it will adjust the positioning to fix it.

(more…)

Done Resizing Event

# By Chris Coyier

If you're used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag