makandra-rubocop 10.0 released

We released a new version of makandra-rubocop Archive

  • rubocop has been updated from 1.25 to 1.39
  • rubocop-rails has been updated from 2.11.3 to 2.17.2
  • rubocop-rspec have been updated from 2.4.0 to 2.13.2.
  • rubocop >= 1.29 requires a Ruby version > 2.6, so with this release support for Ruby < 2.6 is dropped.

Some cool new cops

# bad
File.open(Rail...

Fast Navigation Tips In Dev Tools

Hide/Show Drawer

You can press Escape to show/hide the drawer.

Fast Navigation with Command Menu

Use Ctrl + Shift + p to open Command Menu, where you can switch to different panels, toggle settings etc.

Reorder DevTools panels and Drawer tabs and combine them by moving them up and down to and from the Drawer.

Right click on any tab and then choose Move to top / Move to bottom

Change DevTools layout from auto to always horizontal or vertical.

Click on Settings > Preferences > Panel Layout, Choose between Horizontal / Ve...

Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools

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

Do not use unitless zeros in CSS calc functions

While in CSS zero is usually referenced without specifying a unit (e.g. padding: 0), you must not use a unitless zero in calc functions.

You would probably not write something like calc(1rem + 0) yourself, but it might be the result of a CSS preprocessor (like Sass) or when using custom properties.

The following is invalid:

.example {
  --extra-padding: 0;
  padding: calc(1rem + var(--extra-padding));
}

That is simply because it is unsupported Archive , as per docum...

How to choose keyboard shortcuts for web applications

One-line takeaways

  • Don’t override native browser (or OS) shortcuts.
  • Support standard shortcuts that don’t contradict the previous rule, and use one or two letter shortcuts for other actions.
  • Always have a consistent system.
  • Pay maximum attention to discoverability.

Variable fonts: Is the performance trade-off worth it? - LogRocket Blog

Variable fonts are popular for two reasons: they expand design possibilities and improve website performance. While the former statement is definitely true since variable fonts do provide infinite typographical choices, the latter only holds under certain conditions.

Unpoly 2.7 released

This is another maintenance release to bridge the time until Unpoly 3 Archive is fully documented. This release includes the following changes:

Rubymine: do not open last project

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: Efficiently filtering results in the "Finder" overlay

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.

Image

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

Rails asset pipeline: Using ESNext without a transpiler

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

Ruby: Do not mix optional and keyword arguments

Writing ruby methods that accept both optional and keyword arguments is dangerous and should be avoided. This confusing behavior will be deprecated in Ruby 2.7 and removed in Ruby 3, but right now you need to know about the following caveats.

Consider the following method

# DO NOT DO THIS

def colored_p(object = nil, color: 'red')
  switch_color_to(color)
  puts object.inspect
end


colored_p(['an array'])                   # ['an array'] (in red)
colored_p({ a: 'hash' }, color: 'blue')   # {:a=>'hash'} (in blue)
colored_p({ a: 'ha...

Caution: `.includes` can make `.ids` non-unique.

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

Organizing custom Date(Time) formats

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

Chrome DevTools: Treasure (Overview)

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

Breakpoints

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

Updated: Fixing flaky E2E tests

  • Smooth scrolling may cause Capybara/WebDriver to click an element before it is scrolled into view. Note that Bootstrap enables smooth scrolling by default!
  • Recommended to disable smooth scrolling in tests.
  • Reorganized animation section

Sass: get rid of deprecation warnings in dependencies

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

Using CSS transitions

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

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

Everything you ever wanted to know about constant lookup in Ruby

If you ever wondered why a constant wasn't defined or wasn't available where you expected it to be, this article will help.

Also see Ruby constant lookup: The good, the bad and the ugly.