Things you probably didn’t know you could do with Chrome’s Developer Console
Collection of useful tools in the Chrome JavaScript console.
Make the whole page editable
This is not special to Chrome, but still a clever thing:
document.body.contentEditable=true
Taking time
You can easily measure the time on the console with named timers:
console.time('myTime'); // Start timer
console.timeEnd('myTime'); // End timer and print the time
Reference previously inspected elements (from the Elements panel)
Variables $0, $1, ... $n reference the nth-last inspected Element. $0 is the ...
How to checkout submodules in Gitlab CI
Accessing other repositories in Gitlab CI is not straight forward, since the access rights of the current pipeline might not be sufficient enough.
One approach is to use project access tokens and clone the repositories via HTTPS.
-
Create a project access token
Archive
for all submodules you want to have access to with the setting
read_repository - Add the secrets as environment variable to the main project you want to have access to submodules:
- Protected
false...
- Protected
When reading model columns during class definition, you must handle a missing/empty database
When doing some meta-programming magic and you want to do something for all attributes of a class, you may need to access connection or some of its methods (e.g. columns) during class definition.
While everything will be fine while you are working on a project that is in active development, the application will fail to boot when the database is missing or has no tables. This means that Raketasks like db:create or db:migrate fail on a freshly cloned project.
The reason is your environment.rb which is loaded for Raketasks and calls...
Devise: Invalidating all sessions for a user
Background information about session storage in Rails
Rails has a
default mechanism to store the session
Archive
in the CookieStore. This is a cookie which holds the entire user session hash in the browser. This cookie is serialized, encoded with base64, and signed.
How Devise handles authentication
Devise uses this CookieStore. To track a users session, a salt is stored in the session cookie when a user logs in.
When a user logs out this CookieStore is overwrit...
Git: Show commits that have touched specific text in a file
If you want to find the commits that touched a specific text in a file, use
git log -S 'text in the code' -- path/to/file
If you use tig you may run a similar command to get a navigatable list of affected files:
tig -S'text in the code'
Example
Here is an example, where the move of the convert_number_column_value(value) method in active record is traced (simplified output):
git log -n 1 --pretty=oneline -S 'convert_number_column_value(value)' -- activerecord/lib/active_record/base.rb
ceb33f84933639d3b6...
NVM: How to automatically switch version when changing directories
The Node Version Manager allows installing multiple NodeJS versions and switching between them.
By default, it does not automatically switch versions when entering a directory that holds a .nvmrc file.
The project's
readme document
Archive
offers a bash function which calls nvm use after each cd. In fact, it replaces cd in your bash.
I did not want to do that, but instead use the $PROMPT_COMMAND feature. So here is my take on it.
Note that it is much shorter, it probably does a f...
JavaScript: Don't throw exceptions from async functions
TLDR: A function is hard to use when it sometimes returns a promise and sometimes throws an exception. When writing an async function, prefer to signal failure by returning a rejected promise.
The full story
When your function returns a promise ("async function"), try not throw synchronous exceptions when encountering fatal errors.
So avoid this:
function foo(x) {
if (!x) {
throw "No x given"
} else
return new Promise(function...
PSA: Chrome and Firefox do not always clear session cookies on exit
Cookies without an expiration timestamp are called "session cookies". [1] They should only be kept until the end of the browsing session.
However, when Chrome or Firefox are configured to reopen tabs from last time upon start, they will keep session cookies when closing the browser. This even applies to tabs that were closed before shutting down the browser.
This is by design in Chrome Archive and [Firefox](https://bugzilla.mozilla.org/buglist.cgi?bug_id=337551,345830,358042,362212,36...
Webpack: How to split your bundles
To keep JavaScript sources small, it can sometimes make sense to split your webpack bundles. For example, if your website uses some large JavaScript library – say TinyMCE – which is only required on some select pages, it makes sense to only load that library when necessary.
In modern webpack this is easily doable by using the asynchronous import function.
Say we have an unpoly compiler that sets up TinyMCE like this (code is somewhat simplified):
// TinyMCE as part of the main bundle!
import tinymce from 'tinymce/tinymce'
// UI
im...
Heads up: counting may be slow in PostgreSQL
The linked article points out that COUNT queries might be unexpectetly slow in psql.
If you just need to know "are there any records" use any?. This uses SELECT 1 AS one FROM ... LIMIT 1 under the hood.
If you just need to know "are there no records" use empty? or none?. This uses SELECT 1 AS one FROM ... LIMIT 1 under the hood.
In short: Replace foo.count > 0 with foo.any? or foo.count == 0 with foo.none?
Accessing JavaScript objects from Capybara/Selenium
When testing JavaScript functionality in Selenium (E2E), you may need to access a class or function inside of a evaluate_script block in one of your steps. Capybara may only access definitions that are attached to the browser (over the window object that acts as the base). That means that once you are exporting your definition(s) in Webpacker, these won't be available in your tests (and neither in the dev console). The following principles/concepts also apply to Sprockets.
Say we have a StreetMap class:
// street_map.js
class S...
Marko Denic's list of TIL for HTML
Table of content for the linked article:
1. The `loading=lazy` attribute
2. Email, call, and SMS links
3. Ordered lists `start` attribute
4. The `meter` element
5. HTML Native Search
6. Fieldset Element
7. Window.opener
8. Base Element
9. Favicon cache busting
10. The `spellcheck` attribute
11. Native HTML sliders
12. HTML Accordion
13. `mark` tag
14. `download` attribute
15. Performance tip
16. Video thumbnail
17. input type="search"