Jasmine specs for the frontend often need some DOM elements to work with. Because creating them is such a common task, we should have an efficient way to do it.

Let's say I need this HTML structure:

<ul type="square">
  <li>item 1</li>
  <li>item 2</li>
</ul>

This card compares various approaches to fabricating DOM elements for testing.

Constructing individual elements

While you can use standard DOM functions to individually create and append elements, this is extremely verbose:

let list = document.createElement('...

Jasmine specs that work with DOM elements often leave elements in the DOM after they're done. This will leak test-local DOM state to subsequent tests.

For example, this test creates a <spoiler-text> element, runs some expectations, and then forgets to remove it from the DOM:

describe('<spoiler-text>', function() {
  it ('hides the secret until clicked', function() {
    let element = document.createElement('spoiler-text')
    element.secret = 'The butler did it'
    document.body.appendChild(element)
 ...

Running rails server will start a local server that you can access via http://localhost:3000.

When you are working on multiple web apps, they will likely set cookies with generic names on localhost. This is annoying, since you will sign out your current user whenever you switch to another app.

A better way is to use our own daho.im service. All daho.im subdomains resolve to your local IP (127.0.0.1). That means you can use a different hostname for different apps, and you will stay logged in in each app:

http://foo-ap...

Capybara provides execute_script and evaluate_script to execute JavaScript code in a Selenium-controlled browser. This however is not a good solution for asynchronous JavaScript.

Enter evaluate_async_script, which allows you to execute some asynchronous code and wait until it finishes. There is a timeout of a couple of seconds, so it will not wait forever.

Use it like this:

page.evaluate_async_script(<<~JS)
  let [done] = arguments
  doSomethingAsynchronous().then(() => {
    done() // call this to indicate we're done
  })
J...

When we write a form with date fields, we often use graphical data picker like Rome to get a consistent calendar popup on all browsers.

When you integrate a date picker popup, remember to also set autocomplete="off" on the text input that opens the calendar on click. Otherwise the autocomplete suggestions will cover the calendar box and make it unusable:

If you are using a tool like Unpoly you might want to set autocomplete="off" i...

Your development machine is usually on a very good network connection.
To test how your application behaves on a slow network (e.g. mobile), you can simulate limited bandwidth.

Chrome

• Open the dev tools (Ctrl+Shift+I or F12) and switch to the "Network" tab
• In the row below the dev tool tabs, there's a throttling dropdown which reads "Online" by default.
• Inside the dropdown, you will find a few presets and an option to add your own download/upload/latency settings.

Firefox

• Open the dev tools (Ctrl+Shift+I or F12) and switc...

tl;dr

In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:

• Display size and lines along with labels
• Changing their attributes
• Change how overlay is colored and fastly switch nested elements in the Elements panel

This guide will only cover some example gif recordings on how to use with Grid, since it's basically straight forward to apply this for Flexbox by yourself afterwards.

For this purpose a the link to documentation and a simple code pen have been added...

If you're frequently switching between projects, you might be annoyed by RubyMines behavior of opening the last project on startup.
After all loading a project takes a few seconds as files are scanned and the RubyMine index is rebuilt. If you switch to another project after startup this time is doubled.

A saner default might be to open RubyMine with a dialog to choose the project to open.

This can be set under Appearance & Behavior > System Settings > Project > Reopen projects on startup.

Switching to other projects

A helpful dialog...

RubyMine comes with a nice way to grep through your project's files: The finder (ctrl + shift + f). Don't be discouraged about the notice 100+ matches in n+ files if your searched keyword is too general or widely used in your project.

RubyMine comes with a few ways to narrow down the resulting list, don't hesitate to apply those filters to speed up your search. Your keybinding might vary based on your personal settings.

File mask (alt + k)

If you already know the file extension of your ...

If your app does not need to support IE11, you can use most ES6 features without a build step. Just deliver your plain JavaScript without transpilation through Babel or TypeScript, and modern browsers will run them natively.

Features supported by all modern browsers include:

• fat arrow functions (() => { expr })
• let / const
• class
• async / await
• Promises
• Generators
• Symbols
• Rest arguments (...args)
• Destructuring

You won't be able to use import and export, or use npm modules.

See this [ES6 compatibility mat...

This can happen with a very simple model:

class Note
  has_many :attachments
end

Everything looks normal:

Note.all.to_a.size # => 8
Note.all.ids.size # => 8

Then .includes leads to weird results:

Note.all.includes(:attachments).to_a.size # => 8
Note.all.includes(:attachments).ids.size # => 12

If a note has 5 attachments, its id will be included 5 times.

With .preload it works as expected:

Note.all.preload(:attachments).to_a.size # => 8
Note.all.preload(:attachments).ids.size # => 8

Note

I crea...

Large Rails projects tend to define multiple custom ways to format Dates or DateTimes. This often leads to duplicated format strings, wrong formats and unnecessary introduction of new formats.

to_fs also supports to refer to those formats by name e.g. to_formatted_s(:iso_8601) or to_formatted_s(:short).
to_fs is an alias for to_formatted_s.

Those names are defined in Time::DATE_FORMATS and it's possible to add your own formats. There is a how to in the official [docs](https://api.rubyonrails.org/classes/Date.html#method-i-t...

tl;dr

The Chrome DevTools are a neat collection of tools for the daily work as a web developer. If you're lucky, you'll maybe find some handy stuff in here.

Analysing

• Frontend Performance Issues
• Rendering Performace

Breakpoints

• [Breakpoints on HTML Elements](https://makandracards.com/makandra/517982-chrome-devtools...

TLDR: sass >= 1.35.0 has the option quietDeps to silence deprecation warnings from dependencies.

quietDeps: If true, the compiler must not print deprecation warnings
for stylesheets that are transitively loaded through an import path or importer.

You might have seen deprecation warnings like this during assets compilation:

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($grid-gutter-width, 2)
More info and automated migrator: https://sass-la...

CSS transitions are a simple animation framework that is built right into browsers. No need for Javascript here. They're supported by all browsers.

Basic usage

Transitions are used to animate the path between to property values. For example, to let the text color fade from red to green on hover, the following SASS is used (shorthand syntax):

.element
  color: red
  transition: color .1s
  
  &:hover
    color: green

This tells the browser "whenever the color of an .element changes...