Linux, Arial and Helvetica: Different font rendering in Firefox and Chrome
When text renders differently in Firefox and Chrome, it may be caused by a font alias that both browsers handle differently.
Situation
A machine running Linux, and a website with the Bootstrap 3 default font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
.
Issue
Anti-aliasing and kerning of text looks bad in Firefox. Worse, it is rendered 1px lower than in Chrome (shifted down).
Reason
Firefox resolves "Helvetica" to an installed ["TeX Gyre Heros", which is its Ghostscript clone](https://www.fontsquirrel.com/fonts/...
Guideline for moving from jQuery to vanilla JavaScript
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling them, animating them, and fetching data—things that jQuery was great at. With broad browser support of ES6 (over 96% at the time of writing), now is probably a good time to move away from jQuery.
[Practical and clear reference with the most common jQuery patterns and their equivalent translations in vanilla JS](https://tobiasahlin.com/blog/move-from-j...
Ruby: The YAML safe_load method hides some pitfalls
The Ruby standard lib ships with a YAML Parser called Psych. But serializing and deserializing data seems not as obvious as if you are using JSON.
To safely write and read YAML files you should use Psych#dump
(String#to_yaml
) and Psych.safe_load
(YAML.safe_load
):
data = {'key' => 'value'}.to_yaml
=> "---\nkey: value\n"
YAML.safe_load(data)
=> {"key"=>"value"}
Unfortunately you might encounter a few pitfalls which are not obvious in the first place. All of them are a side effect that you can not configure Psych#dump
to o...
Don't open user-supplied links with target="_blank"
This will give the target site full access to your Javascript environment through window.opener
, if the target is on the same domain.
Even if the target site is on another domain, it still has some access and can for example manipulate window.location
to perform a phishing attack.
You may use a rel="noopener"
attribute to avoid this in modern browsers, except IE or Edge.
Email validation regex
There is a practical short list for valid/invalid example email addresses - Thanks to Florian L.! The definition for valid emails (RFC 5322) can be unhandy for some reasons, though.
Since Ruby 2.3, Ruby's URI lib provides a built-in email regex URI::MailTo::EMAIL_REGEXP
. That's the best solution to work with.
/\A[a-zA-Z0-9.!\#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[...
Rails: Verify the CSRF token
Rails uses a CSRF token in forms and AJAX requests to verify a user request. Internally it compares the injected CSRF token of the form data with the CSRF token in the encrypted user session. To prevent SSL BREACH attacks, the CSRF token from the form data is masked.
To better debug issues, when these tokens do not match, it is useful to unmask the CSRF token from the form da...
Rails: Manually decrypting a session cookie
Normally, Rails handles encryption and signing of cookies, and you don't have to deal with the matter. Should you need to decrypt a session cookie manually: here is how.
Obviously, you can only decrypt a session cookie from within the corresponding Rails application. Only the Rails application that encrypted a cookie has the secrets to decrypt it.
Rails 7
- With authenticated encryption enabled (default since Rails 5)
- W...
Unicorn: How to force a single threaded boot in development
Unicorn allows you to specify the maximum number of workers. In development this could be useful if you use a debugger, but do not want to overflow the console with other request like from ActionCable. Then just set the maximum number of workers to 1
and the other requests have to wait.
UNICORN_WORKERS=1 rails server
How to fix webpack-dev-server not found
The bin/webpack-dev-server
command is not as smart as e.g. rails server
, where it shows the proper fix within the error message.
$ bin/webpack-dev-server
yarn run v1.19.1
error Command "webpack-dev-server" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Run yarn install --check-files
to fix this error.
Links to CoffeeScript 1 documentation
coffeescript.org contains only documentation for the latest CoffeeScript version. Version 2 transpiles to ES6.
We stopped using CoffeeScript a while ago, but older projects still use version 1 which transpiles to ES5. This means that examples for transpiled results or the "Try CoffeeScript" web console behave differently, and lookup up stuff when working on older projects may be somewhat hard.
Here are some links to version 1 documentation:
-
http://coffeescript.org/v1/
- Fully functional
- If this ever g...
WProofreader: How to manually enable for a WYSIWYG editor instance (with CKeditor 4 example)
WProofreader is a spelling and grammar checking tool that integrates with textareas and numerous WYSIWYG editors.
While it usually activates automatically, depending on your application, it may fail to boot.
In my case, an application was using CKEditor 4 and programmatically activated CKEditor. WProofreader's autoSearch
logic failed to hook into that for some reason.
You can choose not to use its autoSearch
feature, but explicitly enable WProofreader.
Here is a guide for CKEditor 4. It should apply to other WYSIWYG editors as well.
1...
Guidelines for Pull Requests and Code Reviews
Projects with more than one developer should always consider to enforce code review even for small changes to improves the overall code health of the system. Here are some guidelines that can help you to accomplish this task.
Github
How to write the perfect pull request
Google's Engineering Practices documentation
Modern Code Review: A Case Study at Google
Though...
Testing regular expressions visually
Developing complex regular expressions quickly blows my mind. Here are some online regex editors that help you by highlighting matching text and capture groups:
- Ruby:
- Javascript:
A collection of useful design resources for developers
This collection contains some useful design resources for developers. Many of them were mentioned in the Refactoring UI tutorials.
Tutorials
Integrating or upgrading makandra-rubocop
Introduction
Most of the time it is a tedious task to apply a code style guide to an existing code base as there are likely to be a lot of conflicts. At makandra we are using makandra-rubocop to have code style checks. Here is some advice on how to add makandra-rubocop efficiently.
Note
RubyMine by default has a Rubocop inspection with rules that we don't always agree with. We recommend replacing this with makandra-rubocop or disabling the inspection.
...
Checking database size by row count
As an application exists, data accumulates. While you'll be loosely monitoring the main models' record count, some supportive database tables may grow unnoticed.
To get a quick overview of database table sizes, you can view the row count like this:
PostgreSQL
SELECT schemaname,relname,n_live_tup
FROM pg_stat_user_tables
ORDER BY n_live_tup DESC
LIMIT 12;
schemaname | relname | n_live_tup
------------+------------------------------------------------+------------
public | images...
Rails: Invoking a view helper from the console
There are a few ways to access view helpers from the Rails console. The easiest way is the helper
shortcut:
helper.translate 'i18n.string'
helper.your_helper_method
If the desired helper renders a view template, you need this setup:
view_paths = Rails::Application::Configuration.new(Rails.root).paths["app/views"]
av_helper = ActionView::Base.new(view_paths).extend YourHelperModule
av_helper.your_helper_method
How to: Specify size of Selenium browser window
Applications often show or hide elements based on viewport dimensions, or may have components that behave differently (like mobile vs desktop navigation menus).
Since you want your integration tests to behave consistently, you want to set a specific size for your tests' browser windows.
Using WebDriver options / Chrome device metrics
For Google Chrome, the preferred way is setting "device metrics". This allows you to configure dimensions larger than your display and enable/disable touch behavior.
Simply use register_driver
to set up...
Fix error: rails console No such file to load -- irb/encoding_aliases.rb (LoadError)
I got this error after upgrading Ruby from 2.4.5 to 2.6.4 when I opened the Rails console - rails server
still worked.
Running via Spring preloader in process 14679
Loading development environment (Rails 5.2.2.1)
Traceback (most recent call last):
.../lib/ruby/gems/2.6.0/gems/spring-2.1.0/lib/spring/application.rb:175:in 'fork': No such file to load -- irb/encoding_aliases.rb (LoadError)
.../lib/ruby/gems/2.6.0/gems/spring-2.1.0/lib/spring/application.rb:175:in 'fork': undefined method 'reject!' for nil:NilClass (NoMethodError)
.../li...
How to enable Chromedriver logging
When using Chrome for Selenium tests, the chromedriver
binary will be used to control Chrome. To debug problems that stem from Selenium's Chrome and/or Chromedriver, you might want to enable logging for the chromedriver itself. Here is how.
Option 1: Use Selenium::WebDriver::Service
In your test setup, you may already have something like Capybara::Selenium::Driver.new(@app, browser: :chrome, options: ...)
, especially when passing options like device emulation.
Similar to options
, simply add an extra key service
and pass an inst...
palkan/isolator: Detect non-atomic interactions within DB transactions
With this gem your transaction
blocks raise an error when they have side effects that cannot be rolled back.
By default it checks whether you're connecting with HTTP, queuing a Sidekiq job or sending an e-mail within a transaction
. You can add custom checks, too.
Found in this RubyGuides article.
The nitty-gritty of compile and link functions inside AngularJS 1 directives
Use the compile function to change the original DOM (template element) before AngularJS creates an instance of it and before a scope is created.
Use the pre-link function to implement logic that runs when AngularJS has already compiled the child elements, but before any of the child element's post-link functions have been called.
Use the post-link function to execute logic, knowing that all child elements have been compiled and all pre-link and post-link functions of child elements have been executed.
Bash script to list commits by Pivotal Tracker ID
The main benefit of our convention to prefix commits by their corresponding Pivotal Tracker ID is that we can easily detect commits that belong to the same story. You can either do that manually or use the bash script below by copying it somewhere to your .bashrc
.
# Usage: ptcommits 123456
function ptcommits {
if test "$1"
then
local PTID=$(echo "$1" | grep "[0-9]*" -o) # Allow URLs
git log --onel...
Convert SCSS to SASS
The ruby sass gem also installs a command line tool to convert to and from SCSS. Use it for a directory of .scss
-files like
sass-convert -R assets/stylesheets --from scss --to sass