jQuery 3.6.2 Released!

You probably weren’t expecting another release so soon, but jQuery 3.6.2 has arrived! The main impetus for this release was the introduction of some new selectors in Chrome. More on that below.

As usual, the release is available on our cdn and the npm package manager. Other third party CDNs will probably have it soon as well, but remember that we don’t control their release schedules and they will need some time. Here are the highlights for jQuery 3.6.2.

undefined and whitespace-only CSS variables

jQuery 3.6.1 introduced a minor regression where attempting to retrieve a value for a custom CSS property that didn’t exist (i.e. $elem.css(“–custom”)) threw an error instead of returning undefined. This has been fixed in 3.6.2. Related to that, we also made sure that whitespace-only values return the same thing across all browsers. The spec requires that CSS variable values be trimmed, but browsers are inconsistent in their trimming. We now return undefined for whitespace-only values to make it consistent with older jQuery and across the different browsers.

.contains() with <template>

An issue was recently reported that showed that a <template>‘s document had its documentElement property set to null, in compliance with the spec. While it made sense semantically for a template to not yet be tied to a document, it made for an unusual case, specifically in jQuery.contains() and any methods relying on it. That included manipulation and selector methods. Fortunately, the fix was simple.

It wasn’t Ralph that broke the internet

The internet experienced a bit of a rumble when Chrome recently introduced some new selectors, the most pertinent of which being :has(). It was a welcome addition, and one celebrated by the jQuery team, but a change to the spec meant that :has() used what’s called “forgiving parsing”. Essentially, even if the arguments for :has() were invalid, the browser returned no results instead of throwing an error. That was problematic in cases where :has() contained another jQuery selector extension (e.g. :has(:contains(“Item”))) or contained itself (:has(div:has(a))). Sizzle relied on errors like that to know when to trust native querySelectorAll and when to run the selector through Sizzle. Selectors that used to work were broken in all jQuery versions dating back to the earliest jQuery versions.

And yet, this little drama didn’t last long. The Chrome team quickly implemented a workaround to fix previous jQuery versions in the vast majority of cases. Safari handled their implementation of :has() a little differently and didn’t have the same problem. But, there’s still an important issue open to determine how to address this in the CSS spec itself. The CSSWG has since resolved the issue.

jQuery has taken steps to ensure that any forgiving parsing doesn’t break future jQuery versions, even if previous jQuery versions would still be affected.

Upgrading

We do not expect compatibility issues when upgrading from a jQuery 3.0+ version. To upgrade, have a look at the new 3.5 Upgrade Guide. If you haven’t yet upgraded to jQuery 3+, first have a look at the 3.0 Upgrade Guide.

The jQuery Migrate plugin will help you to identify compatibility issues in your code. Please try out this new release and let us know about any issues you experienced.

If you can’t yet upgrade to 3.5+, Daniel Ruf has kindly provided patches for previous jQuery versions.

Download

You can get the files from the jQuery CDN, or link to them directly:

https://code.jquery.com/jquery-3.6.2.js

https://code.jquery.com/jquery-3.6.2.min.js

You can also get this release from npm:

npm install [email protected]

Slim build

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version. These files are also available in the npm package and on the CDN:

https://code.jquery.com/jquery-3.6.2.slim.js

https://code.jquery.com/jquery-3.6.2.slim.min.js

These updates are already available as the current versions on npm and Bower. Information on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their copies today, please give them a few days to post the files. If you’re anxious to get a quick start, use the files on our CDN until they have a chance to update.

Thanks

Thank you to all of you who participated in this release by submitting patches, reporting bugs, or testing, including sashashura, Anders Kaseorg, Michal Golebiowski-Owczarek, and the whole jQuery team.

Changelog

Full changelog: 3.6.2

CSS

Return undefined for whitespace-only CSS variable values (#5120) (8bea1dec)
Don’t trim whitespace of undefined custom property (#5105, c0db6d70)

Selector

Manipulation: Fix DOM manip within template contents (#5147, 5318e311)
Update Sizzle from 2.3.7 to 2.3.8 (#5147, a1b7ae3b)
Update Sizzle from 2.3.6 to 2.3.7 (#5098, ee0fec05)

Tests

Remove a workaround for a Firefox XML parsing issue (965391ab)
Make Ajax tests pass in iOS 9 (d051e0e3)

Flatlogic Admin Templates banner

Sing App React and Light Blue React Admin templates Update

We are happy to announce an update of one of our first React Admin TemplatesSing App React and Light Blue React!

What react admins are affected by the update?

Current 5 React Admin boilerplates are affected by updates:

Sing App React
Sing App React Node.js
Sing App React Java
Light Blue React
Light Blue React Node.js

What has changed?

Now the admin boilerplates use React 17, and Bootstrap 5. Additionally, we have updated the colors, typography, and some minor UI parts.

And also we made several minor changes that make this admin dashboard template up-to-date.

Updated Amcharts to the latest version
Updated Fullcalendar to the latest version
Updated Axios
Updated Sortable library to the latest stable version
Updated Awesome Bootstrap checkbox that it now supports Bootstrap 5

Thus now, Sing App React and Light Blue React Admin Templates are one of the most modern react admin on the market in terms of technologies used under the hood and the look of the boilerplate.

Summing Up

For the rest of our React templates, check our marketplace. If you face any difficulties setting up this or that template or admin dashboard, please feel free to leave us a message on our forumTwitter or Facebook. We will respond to your inquiry as quickly as possible!

The post Sing App React and Light Blue React Admin templates Update appeared first on Flatlogic Blog.Flatlogic Admin Templates banner

Bringing a little slice of Developer Tools to Seq in 2022.1

If your experience is anything like mine, debugging in production is as much about organizing information – clues, leads, sometimes frustrating dead-ends – as it is about unearthing it. Working through an issue, I need pen and paper, sticky notes, whiteboards and spreadsheets as much as I depend on searching logs.

Seq is never going to replace my favorite Lamy pen (a chrome Pico I’ve hung onto for absolutely years ?), but in 2022.1 there are two small improvements coming that should help with the information overload:

Variables as an alternative to copy-and-paste for keeping track of useful values, and
A redesigned (and searchable!) history makes it easier to jump back to an earlier search or query.

Search history doesn’t need much explanation (it’s now a tool window you can pop out in the signal bar), but variables are actually pretty interesting.

When GUIDs start to look alike…

The basic scenario looks like this:

Why does request cbc6f181ba66498092c78bdd4106e3f1 time out, while request c43df41457dd443a83f1bcf94353a3c7 succeeds?

Instead of copying those values back and forth to a text editor window, inevitably forgetting which is on the clipboard at any given moment, Seq 2022.1 supports assigning them to variable names:

select ‘cbc6f181ba66498092c78bdd4106e3f1’ into $failingRequest

You can use the resulting variable names in any expression where you would otherwise use the value:

The design of variables in Seq takes inspiration from the ubiquitous browser developer tools console: variables are somewhere to stash and inspect useful pieces of information while you work on a problem.

This could be a little confusing if you were expecting variables to behave more like those in procedural languages such as Transact-SQL or PL/pgSQL. Seq doesn’t support procedural programming, so there’s no way to, say, reassign a variable on each iteration of a loop. If you’re here looking for something along those lines, check out let bindings instead.

Quick variables

The green check-mark menu beside event properties can now be used to assign the value of a property to a new variable:

Seq will generate a variable name based on the property name. Variables can’t be directly renamed, but you can give a variable a more meaningful name by selecting its value into a new one:

select $requestId0 into $slowRequest

Variables in signals, alerts, and dashboards

Variables are tracked client-side, and passed back to the server by the Seq UI whenever they appear in a search or query. The value you assign to a variable doesn’t live any longer than your browser session.

This means that variable values aren’t available when signals are indexed, when alerts are checked, or when your dashboard is rendered on an overhead display. To avoid silently failing with incorrect results, Seq will reject all variable references that appear in these places:

Wrapping up the tour

So that’s it! Variables are a simple feature, but also part of an exciting direction that we’re going to explore further.

You can find out more about variables – the scenarios we’ve thought about, and some of the implementation details – in the Variables RFC.

Or, to jump in and try them against your next production debugging puzzle, pull the datalust/seq:preview Docker image, or download the 2022.1.*-pre MSI from the Seq downloads page. We can’t wait to hear how you go!

Flatlogic Admin Templates banner