HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript
Related cards:
JavaScript without jQuery (presentation from 2019-01-21)
Summary
- We want to move away from jQuery in future projects
- Motivations are performance, bundle size and general trends for the web platform.
- The native DOM API is much nicer than it used to be, and we can polyfill the missing pieces
- Un...
Unobtrusive JavaScript helper to progressively enhance HTML
The attached compiler()
function below applies JavaScript behavior to matching HTML elements as they enter the DOM.
This works like an Unpoly compiler for apps that don't use Unpoly, [Cus...
You should probably load your JavaScript with <script defer>
It is generally discouraged to load your JavaScript by a <script src>
tag in the <head>
:
<head>
<script src="app.js"></script>
</head>
The reason is that a <script src>
tag will pause the DOM parser until the script has l...
Managing Rails locale files with i18n-tasks
When internationalizing your Rails app, you'll be replacing strings like 'Please enter your name'
with t('.name_prompt')
. You will be adding keys to your config/locales/*.yml
files over and over again. Not to miss any key and place each at t...
Convert Adobe Flash FLA files into HTML5 with Wallaby
"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. This allows you to reuse and extend the reach of your content to devices that...
Click on a piece of text in Cucumber / Capyabra
The step definition below lets you write:
When I click on "Foo"
This is useful in Selenium features where the element you click on is not necessarily a link or button, but could be any HTML element with a Javascript event binding.
The e...
Managing vendor libraries with the Rails asset pipeline
The benefit of the Rails asset pipeline is that it compiles your stylesheets and javascripts to a single file, respectively. However, the consequences are startling if you don't understand them. Among others, the raw asset pipeli...
What's wrong with defining JavaScript variables within if blocks? - Stack Overflow
Because javascript has something called "Hoisting" which makes your code do things it doesn't look like it should be doing. Basically, that means a javascript interpreter will move all var declarations, regardless of where they are in the body of ...
Async control flow in JavaScript: Promises, Microtasks, async/await
Slides for Henning's talk on Sep 21st 2017.
Understanding sync vs. async control flow
Talking to synchronous (or "blocking") API
print('script start')
html = get('/foo')
print(html)
print('s...
A short overview of common design patterns implemented within Rails
The linked content includes a few design patterns implemented with Ruby on Rails.
What is the card indented to achieve?
- You can use the pattern names for code reviews, so all parties know with only a few words which change is requested. Examp...