While we are used to run our JavaScript tests on a test page within our Browser, it's also possible to run them on the command line with NodeJS. I...
If you want to move an element inside an array, neither JavaScript/ES6+ nor libraries like LoDash offet that natively. Here is a simple function instead that modifies the input array...
...the Webpack Bundle Analyzer, Chrome's new Lighthouse feature … … shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used...
...your page. It can also visualise unused bytes. This is very helpful to visualize Javascript files in development. It also works on production code, where its usefulness depends on the...
One really simple way to check whether JavaScript Sentry integration was successful (raven-js or @sentry/browser), is to create an erroneous event handler like this: My Website … and clicking on...
Native promises have no methods to inspect their state. You can use the promiseState function below to check whether a...
tl;dr: Use the URLSearchParams API to make your live easier if you want to get or manipulate query parameters...
Webfonts are not always available when your JavaScript runs on first page load. Since fonts may affect element sizes, you may want to know when fonts have been loaded to...
...trigger some kind of recalculation. Vanilla JavaScript / Modern DOM API In modern browsers (all but IE and legacy Edge) you can use document.fonts. Use load to request a font and...
Jasmine has spyOnProperty(), but it only works if the property is implemented using getter and setter functions. This is a...
You can use JavaScript to get or set cookie values on the client. Using the vanilla JavaScript API In JavaScript, document.cookie is an accessor to all cookies on the current...
Using a library If you are regularly working with cookies in JavaScript, you may want to use a library that simplifies this. Cookies.js is small and works nicely...
Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents (or value, in case of inputs). The approach is simple...
...as a bookmark. Place it in your bookmarks bar and click it to activate. javascript:(function(){var overlay=document.createElement('div');Object.assign(overlay.style,{position:'fixed',top:0,left:0,width:'100vw...
...After trying jQuery's trigger to no avail, I had success by using native Javascript methods to create and dispatch an event. For instance, to trigger a mousedown event:
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it...
Let's say you want to merge the properties of two JavaScript objects: let a = { foo: 1, bar: 2 } let b = { bar: 3, baz: 4 } let merged = merge(a, b...
You can say: $(element).is(':visible') and $(element).is(':hidden') jQuery considers an element to be visible if it...
Use the click method on the DOM element: let link = document.querySelector('a') link.click()
This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title...
...As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such...
Most of the JavaScript snippets have code that manipulates the DOM. For that reason dom manipulating javascript code should have been executed after the DOM has loaded completely. That means...
...are fully loaded. The following snippets show how you can do this with plain JavaScript, jquery or prototype (dom ready event binding in other frameworks). Plain JavaScript document.addEventListener("DOMContentLoaded", function...
...the Sass that goes along with it, providing a fallback case for visitors without JavaScript that does regular text-overflow magic: .overflow_container white-space: nowrap overflow: hidden text-overflow...
...up with nsbp + space, causing 2 spaces width. Wrap the code in our unobtrusive JavaScript helper or another way it's run once the DOM is loaded...
Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server...
Imagine all the syntactical delights of Ruby and Haml for your JavaScript. You write in a nice language, but get normal JavaScript at runtime. All whilst having full access to...
...3rd-party JavaScript libraries (jQuery, PrototypeJS), debugging support (it becomes pure, readable JavaScript), existing support from test suites (it’s normal JavaScript) and growing support from various text editors (TextMate...
Ask before leaving an unsaved CKEditor Vanilla JavaScript way, but removes any other onbeforeunload handlers: $(function(){ document.body.onbeforeunload = function() { for(editorName in CKEDITOR.instances) { if (CKEDITOR.instances[editorName].checkDirty()) { return "Unsaved changes present...
Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple. Using getComputedStyle First, find the element in question. let element = document.querySelector('.my-element...
...or $('.my-element').get(0) when using jQuery Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements. let style = window.getComputedStyle(element, '::before')
...they forgot one very important part, the ability to use it when responding to JavaScript (JS) requests! In Rails 3.1 it’s incredibly easy to build your application’s JavaScript...
...an AJAX request to your application you can only write your response using regular JavaScript and not CoffeeScript, at least until CoffeeBeans came along...
JavaScripts and CSS should be minified for production use. In Rails 3.1+ the asset pipeline will take care of this. Thus you're best off using an uncompressed version of...
...your Javascript in development. Also load the non-minified versions of libraries. This way debugging will be easier and you will still get all the minification love once deployed.