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. 💡 […]

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 […]

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%, […]

Full page transitions with jquery.smoothState.js

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 […]

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 […]