jQuery, now using ECMAScript module syntax

A nice commit migrating away from AMD Modules to ECMAScript modules recently landed in the jQuery repo. Once published as a new release, you’ll be able to actually import $ using the modern ES module syntax:

import $ from "jquery";
$('#message').text('Hi from jQuery!');

Handy if you’re modernizing a legacy project that still uses jQuery.

πŸ’‘ Up until now I’ve been either including jQuery separately or have been relying on webpack-merge-and-include-globally to include jQuery in my Webpack build.

Ship legacy JavaScript and CSS files in a Webpack Project with webpack-merge-and-include-globally

One of the projects that I’m working on is quite reliant on jQuery and Bootstrap. As we’re introducing new features (such as a few React-based components, and Stylus for CSS) in said project, we’ve also introduced Webpack into it. Now, we don’t want to run jQuery nor Bootstrap through Babel (using Webpack), but we want to keep on shipping them untouched to the user.

However, we do want those files to β€œlive” in our Webpack ecosystem. Basically we just want to concatenate those assets, so that we can ship one single legacy.js and one legacy.css file to the user. This is where webpack-merge-and-include-globally comes into play:

Webpack plugin to merge your source files together into single file, to be included in index.html, and achieving same effect as you would by including them all separately through <script> or <link>.

Here’s how we use the plugin:


import webpack from 'webpack';
import MergeIntoSingleFilePlugin from 'webpack-merge-and-include-globally';

const config = (env) => ({
	// …

	plugins: [
		// …

		new MergeIntoSingleFilePlugin({
			files: {
				'js/legacy.js': [
					'assets/js/libs/jquery-2.2.3.min.js',
					'assets/js/libs/bootstrap.min.js',
					'assets/js/libs/moment-with-locales.min.js',
					'assets/js/libs/bootstrap-datetimepicker.min.js',
					'assets/js/libs/ekko-lightbox.min.js',
					'assets/js/scripts.js',
				],
				'css/legacy.css': [
					'assets/css/libs/animate.min.css',
					'assets/css/libs/bootstrap.min.css',
					'assets/css/libs/bootstrap-datetimepicker.min.css',
					'assets/css/libs/bootstrap-theme.min.css',
					'assets/css/libs/ekko-lightbox.min.css',
					'assets/css/screen.css',
				],
			},
		}),
	],
};

export default config;

With this in place we include legacy.js and legacy.css in the project to keep things working as they were before. Our β€œnew” CSS and JS is written separately and is being ran through the entire Webpack build pipeline, like one would normally do. In the end we end up with four includes:

<!-- legacy files, concatenated -->
<script src="/js/legacy.js"></script>
<link rel="stylesheet" href="/css/legacy.css" />

<!-- our new files, compiled through Babel/Stylus/etc. -->
<script src="/js/app.js"></script>
<link rel="stylesheet" href="/css/styles.css" />

Installation per npm/yarn

yarn add -D webpack-merge-and-include-globally

😊

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

β˜•οΈ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Tilt.js – A tiny parallax tilt effect for jQuery

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for jQuery.

Might come in handy for a quick project.

Also love the fact that it’s highly customizable:

maxTilt:        20,
perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets.
easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
scale:          1,      // 2 = 200%, 1.5 = 150%, etc..
speed:          300,    // Speed of the enter/exit transition.
transition:     true,   // Set a transition on enter/exit.
axis:           null,   // What axis should be disabled. Can be X or Y.
reset:          true,   // If the tilt effect has to be reset on exit.
glare:          false,  // Enables glare effect
maxGlare:       1       // From 0 - 1.

Tilt.js →
Tilt.js Source (GitHub) →

Full page transitions with jquery.smoothState.js

smoothstate

jquery.smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

Works by hijacking links, requesting the target URL over XHR, and then replacing the content of a specified element on the current page with the contents of that same element from the new page. A browser that supports window.history.pushState required though.

jquery.smoothState.js →
jquery.smoothState.js Source (GitHub) →

You Don’t Need jQuery!

you-dont-need-jquery

A series of posts in line with the aforementioned You might not need jQuery, From jQuery to Javascript, a reference, and I know jQuery, now what?.

Essentially nothing new, yet linking to because it has all handy snippets collected in one place. One thing I do find missing from it is Element#classList.

You Don’t Need jQuery! →

Note: Don’t forget that it is thanks to jQuery that we no longer need jQuery for everything we build. It’s goal, over time, is for itself not to exist anymore.

ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages

<div class="scrollme">
    <div
        class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="-200"
        data-rotatez="90"
    >
        Yup, that's all.
    </div>
</div>

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.

Must say I do like the fact that the data-when attribute accepts enter (= when the element enters the viewport), exit (= when the element exits the viewport), and span (= as long as the element is shown in the current viewport) as a value.

ScrollMe →