...optimize the experience. Using capistrano-rails capistrano-rails is a Gem that adds Rails specifics to Capistrano, i.e. support for Bundler, assets, and migrations. While it is designed for Asset...
...Pipeline (Sprockets) assets, it can easily be configured for Webpacker. This brings these features to the Webpacker world: Automatic removal of expired assets Manifest backups # config/deploy.rb # No need to include...
...about half of our curriculum deck! 🎉 We've covered the basics of your future stack and are about to dive deeper in some more advanced topics. A few things before...
...curriculum cards every other monday Read the article "Parting advice from an older Software Engineer". Try to memorize the key takeaways of 1-5 on the list. Watch Dominik's...
...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...
Some users might use Adblock Plus or similar browser plugins to reduce the number of ads displayed. If you run into an issue that your application or part of an...
...our web apps. But if your application uses iframes or is embedded in another site it's more prone to it. Blocked elements most of the time appear to the...
...a web developer, you know Google Analytics (GA). Probably you've dropped the GA snippet into more than one website, maybe you've even used its Javascript API to implement...
...configurable without changing anything in the application's code base (and much more beyond, see below). Only prefer GTM if the customer requests it, or if he is updating his...
...don't only have a favicon.ico in your project but also PNGs of different sizes and backgrounds, you should test if all those files are actually reachable.
...few selectors to get you started: 'link[rel~="icon"]' # regular ones, matches "shortcut icon" and "icon" 'link[rel="apple-touch-icon"]' # iOS 'meta[content][name="msapplication-TileImage"]' # IE11 'meta[content...
...a remote API, check out the VCR gem as an alternative to Webmock or stubbing hell. The idea behind VCR is that is performs real HTTP requests and logs the...
...in a .yml file. When you run the test again, requests and responses are stubbed from the log and the test can run offline. It's a great way to...
In Cucumber, scenario outlines help avoiding tests that are basically the same, except for a few variables (such as different inputs). So far, nothing new. The problem
...your test should (or should not) do something, like filling in a field only for some tests? Scenario Outline: ... When I open the form And I fill in "Name" with...
...modern JavaScript down to EcmaScript 5. Depending on what browser a project needs to support, the final Webpack output needs to be different. E.g. when we need to support IE11...
...JavaScript features. Hence our output will be more verbose than when we only need support modern browsers. Rails 5.1+ projects often use Webpacker to preconfigure the Webpack pipeline for us...
...some beyond 50MB. Unless you need to offer this large files, you should always shrink uploaded files to a reasonable resolution. class ImageUploader < CarrierWave::Uploader::Base process resize_to_limit...
...to do it. Make an educated decision: Is the code change worth the effort? Stay straight on track, don't go astray. Note: Usually, you'd refactor after finishing your...
...story. At times, it might be necessary to refactor up front. But try to keep refactoring out of your current task. Knowing where to optimize Things should only be optimized...
I recently did a quick research on how to better write down multiline statements like this: # Dockerfile RUN export DEBIAN_FRONTEND=noninteractive \ && apt-get update \ && apt-get dist-upgrade -y...
...apt-get install --no-install-recommends --no-install-suggests -y \ ca-certificates \ curl \ unzip It turns out, there is! Buildkit, the tool behind docker build added support for heredoc strings...
...GitHub repository is a bit like our "dev" cards deck, but groomed from a single person (Josh Branchaud). It includes an extensive list of over 900 TILs on many topics...
...TILs that were new to me. I encourage you to take your time to skim over the original list as well! Assoc For Hashes Hash#assoc can be used to...
Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the...
...surrounding context, you can hide certain elements or use smaller fonts. Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other...
To update your Rubygems to the latest available version, type the following: gem update --system Note that you have a separate Rubygems installation for each Ruby version in your RVM...
...or rbenv setup. Updating one does not update the others. Ruby 1.8.7 If you are using Ruby 1.8.7 you cannot use the latest version of Rubygems. Type the following to...
jQuery's removeClass removes the given class string from an element collection. If you want to remove multiple/unknown classes matching a given pattern, you can do that. For example, consider...
...node for the following HTML. We'll reference it by $element below. Option A: Selecting classes, then removing them You can iterate over existing classes, and select matching ones. The...
...messages should include the ID of the issue your code belongs to. Our preferred syntax prefixes the issue title with its ID in brackets, e.g. [FOO-123] Avatars for users...
In a nutshell: return statements inside blocks cause a method's return value to change. This is by design (and probably not even new to you, see below) -- but can...
...a problem, for example for the capture method of Rails. Consider these methods: def stuff puts 'yielding...' yield puts 'yielded.' true end We can call our stuff method with a...
Fresh Chrome installations now show a "Choose your search engine" popup in Europe. This might make your Cucumber tests fail. Fortunately there is a flag to disable the popup. Add...
...the following option to your chromedriver setup code: options.add_argument('--disable-search-engine-choice-screen') I found this flag in Peter Beverloo's list. Background: This was experienced locally with...
...into your Webpack's assets folder or write an npm package with an own sass file that can be imported from the Webpack manifest. Load fonts from your assets folder...
...The first option turns out to be straightforward: Import the stylesheets in the index.js of the pack you're using: // webpack_source_path/application/index.js import './stylesheets/reset' import './stylesheets/main' // loads the fonts...
...When I go to the dashboard And console Then I should see "Hans Peter" AfterStep @slow-motion Waits 2 seconds after each step Example: @slow-motion Given there is a...
When I go to the dashboard Then I should see "Hans Peter" AfterStep @single-step Waits for a keypress after each step Example: @single-step Given there is...
Sometimes you want to write a test for a business rule that's based on multiple variables. In your goal to cover the rule thoroughly, you start writing tests for...
...each permutation of all variables. Quickly it blows up into something unsustainable. With n variables for the business rule, you get 2n permutations/test cases. This is manageable with 2 variables...
...with modern CSS features In the past, you might have resorted to bulky JavaScript solutions or CSS hacks like transitioning between max-height: 0 and max-height: 9999px. All of...
...them were awkward and/or have several edge cases. With modern CSS, there is actually a way to do it properly: Just use a display: grid container which transitions its grid...
The closest is probably Nimbus Sans L, which is released under the GPL, AFPL, LPPL licenses. However, I couldn't find a way to convert Nimbus Sans L into a...
I finally settled with Liberation Sans, which is awesome for some reasons: Although it's available for free, it's a high quality font because its creation was...