Great presentation about writing Javascript like you write everything else: Well-structured and tested. JavaScript is no longer a toy language. Many of our applications can’t function without it...
...If we are going to use JavaScript to do real things, we need to treat it like a real language, adopting the same practices we use with real languages.
...inherit styles from the document. See Styling a Web Component for this case. Applying JavaScript behavior to new elements All client-side JavaScript frameworks comes with mechanisms to activate JavaScript...
...using a framework mechanism you may use customElements.define() to register your custom element's JavaScript behavior with the browser directly. A big advantage of using the browser's customElements.define() is...
The Javascript code below is a rough equivalent to the simple_format helper that ships with Rails: function simpleFormat(str) { str = str.replace(/\r\n?/, "\n"); str = $.trim(str); if (str.length...
...see an error message such as /usr/lib/ruby/gems/1.8/gems/execjs-1.3.0/lib/execjs/runtimes.rb:50:in `autodetect': Could not find a JavaScript runtime. See https://github.com/sstephenson/execjs for a list of available runtimes. (ExecJS::RuntimeUnavailable)
...a JavaScript runtime to your Gemfile and the error vanishes. Examples: gem 'therubyracer'
...markdown from user input, an attacker might be able to use this to inject javascript code into the source code of your page. The linked github page is a collection...
...common markdown XSS payloads which is handy for writing tests. Producing arbitrary links: [Basic](javascript:alert('Basic')) [Local Storage](javascript:alert(JSON.stringify(localStorage))) [CaseInsensitive](JaVaScRiPt:alert('CaseInsensitive')) [URL](javascript://www.google.com...
...with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC... the list of new and stable solutions...
...offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today. Solutions look and feel the same, have a common simple feature...
...to use for Selenium+Chrome). Similar sounding but completely different card: Detect if a Javascript is running under Selenium WebDriver (with Rails...
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...
...in the global scope (which is window in web-browsers). Declaring a variable in Javascript is done like var x = 5. This creates a new variable in the current scope...
...e.g. the function you're in). What happens when don't use var? Javascript needs to be clever when you do an assignment without declaring a variable, e.g. x...
...primarily increase with the number and size of your assets, especially with CSS and JavaScript. Always optimize: Keep your JavaScripts small. This is the most important rule.
...pages (e.g. TinyMCE), only load it on those pages. Be wary of low quality JavaScript libraries. You need to have a rough understand how a library works. This is especially...
Cucumber scenarios that are tagged with @javascript so they run with Selenium are very slow. You might not want to run them every time. In order to skip all Selenium...
...scenarios, call Cucumber like this: cucumber --tags ~@javascript Note that you should still run all the scenarios, including the Selenium ones, before you push a change...
You might sometimes use self to capture the context of this before it is destroyed by some function. Unfortunately self...
When I enter "text" into the browser dialog Also see Accept or deny JavaScript confirmation dialogs in Capybara/Selenium...
...how to do it without a server-side component (like a Rails application). Use JavaScript's navigator.language (real browsers and IE11+) and navigator.userLanguage (old IEs). Use a refresh as fallback...
...Provide buttons for paranoid users that disabled JavaScript and meta refreshs. JavaScript The following JavaScript will try to auto-detect a user's preferred language. It understands strings like like...
...universal method present? which returns true for all values that are not blank?. In JavaScript you need to roll your own implementation of blank? and present?. If your application uses...
...console.log(up.util.isBlank(foo)) // prints false console.log(up.util.isBlank(bar)) // prints true Testing for missing values JavaScript has both undefined or null to represent a missing value. Although there used to be...
...forms against concurrent edits This is from a real project: When opening a form, JavaScript makes a request to acquire a lock for that record (1). After 20 seconds the...
...JavaScript starts polling the server (2), to check if another user has taken the lock away from us by force. When the PC was low on resources (parallel_tests), acquiring...
When cucumber encounters a failing step in a @javascript feature, the selenium browser window instantly closes. Sometimes you do not want that, because you need to see what is going...
...flight AJAX requests to finish before ending a scenario: You may have client-side JavaScript that freaks out when the tab closure kills their pending requests. If that JavaScript opens...
end Legacy solution for jQuery frontends The module above is compatible with all JavaScript frameworks (or VanillaJS). If you cannot use capybara-lockstep and you're working on an...
...parse, interpret & run them. In this post, we’ll dive into this phase for JavaScript, why it might be slowing down your app’s start-up & how you can fix...
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...
...even easier. If you need IE8 support, keep using Bootstrap 3. Rewrote all our JavaScript plugins. Every plugin has been rewritten in ES6 to take advantage of the newest JavaScript...
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')
Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server...
Jasmine has spyOnProperty(), but it only works if the property is implemented using getter and setter functions. This is a...