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>.
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:
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.
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.
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.
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 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.
