...not possible to use variables in media queries with plain CSS. @media (max-width: var(--some-pixel-size)) {...
...} /* Does not work */ Postcss Plugin If you're using PostCSS to postprocess...
...your CSS, you can configure postcss-custom-media and add this feature: @custom-media --small-variable-name(max-width: 968px); @media (--small-variable-name) {...
Note The plugin does not...
Starting Terminator with split screens is quite simple: Just store a layout and start Terminator with the --layout option. However, if you want to run custom commands in your terminals...
...command exits. You accomplish this by tweaking bash to run a command before actually starting. Pimp your .bashrc Add this to the end of .bashrc: # hack to keep a bash...
Git log offers useful options for filtering. This card provides a short overview. By message Only commits that include a specific string in their commit message git log --grep="tracker...
By file Only commits that introduced changes to a specific file git log -- foo.rb bar.rb Note In case the file was renamed or moved the --follow option can be...
...are usually believed to have worse performance than those defined via def. Hence, developers sometimes prefer using class_eval to define methods using def, like this: class_eval "def #{attribute...
...for_realsies?; do_things; end" You can benchmark methods defined like this and will see that those defined via def actually do perform better. Basically, it ranks like this:
Bundler allows you to specify the name of the Gemfile you want to bundle with the BUNDLE_GEMFILE environment variable. BUNDLE_GEMFILE=Gemfile.rails.7.2 bundle By default, bundler will look...
...have multiple Gemfiles in your project, which cannot all be named Gemfile. Let's say for example, you maintain a gem and want to run automated tests against multiple rails...
...version understands? Did you double-check your @font-face declarations with all the hacky syntax that is required? Compare them with other declarations you find on the web.
...same name? This usually leads to trouble, but there are workarounds. Do IE's security settings prevent the download of webfonts? (see below) IE Security Settings can prevent font download...
This is for people recovering from Subversion. Get an existing from the server for the first time git clone git@example.com:repositoryname See what's changed git status Check in locally...
...git commit -m "good description" Push local commits to the server git push Get and merge updates from the server git pull Stage a file for the next local commit...
...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...
Git is our version control system. Goals Understand why we use git. Learn how to work with your local repository: Create a local repository (git init) Commit changes (git add...
See the history (git log) See changes (git diff) Work with branches Create new ones: git switch --create or git checkout -b. Switch to existing branches: git switch...
Somewhat regularly, you will need to filter a list down to some items and then map them to another value. You can of course chain map and compact, or select/filter...
...if i.even? }.compact => [4, 8, 12] or >> [1, 2, 3, 4, 5, 6].select(&:even?).map { |i| i * 2 } => [4, 8, 12] you can just do...
When you have string contents (e.g. a generated binary stream, or data from a remote source) that you want to store as a file using Carrierwave, here is a simple...
While you could write your string to a file and pass that file to Carrierwave, why even bother? You already have your string (or stream). However, a plain StringIO...
...with additional margin towards their container. Starting with version 121, Chrome now also supports the spec-compliant properties scrollbar-width and scrollbar-color. These allow less styling. You may only...
...track and thumb colors, and a non-specific width like auto, thin, or none. .example { scrollbar-width: thin; scrollbar-color: blue lightblue; } Styling the -webkit-scrollbar-* pseudo elements is still...
JavaScript objects can have getter and setter functions that are called when a property is read from or written to. For example, if you'd like an object that has...
...person.firstName and person.lastName: var person = { firstName: 'Guybrush', lastName: 'Threepwood', get fullName() { return this.firstName + " " + this.lastName; }, set fullName(name) { var parts = name.split(" "); this.firstName = parts[0]; this.lastName = parts[1]; } }; The code below shows...
Version 3.7.0 broke some things in complex forms. Sorry for that. Concurrent user input is hard. 3.7.1 This change fixes two regressions for form field watchers, introduced by 3.7.0:
...a validation for a fragment while a validation request for the same target is still loading. Validations no longer throw an error if a targeted fragment is destroyed while a...
Ctrl + Alt + S > search "rubocop on save" Under "Inspections", check the highlighted box on rubocop -a Caveat: This adds a little time overhead to saving. When you're editing many...
...bodies with a maximum of 4096 characters. You can work around that limit by splitting the text into smaller fragments and stitch together the resulting mp3 files with a CLI...
...tool like mp3wrap or ffmpeg. Example Ruby Implementation Usage input_text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
Native promises have no methods to inspect their state. You can use the promiseState function below to check whether a promise is fulfilled, rejected or still pending: promiseState(promise, function...
// `state` now either "pending", "fulfilled" or "rejected" }); Note that the callback passed to promiseState will be called asynchronously in the next microtask. Usage example: Tests Note Since this card...
First we export the checks on the nodes we want to monitor: @@nagios_service { “check_unicorns-${::hostname}”: host_name => $::hostname, service_description => ‘Unicorn Status’, check_command => ‘check_unicorn-${::hostname...
...Then we realize the resources on the Nagios server Nagios_service <<| |>> Now it is quite easy to create new monitoring checks with Puppet. With the ease of creating monitoring checks...
In order to have monitoring for Sidekiq (like queue sizes, last run of Sidekiq) your application should have a monitoring route which returns a json looking like this: { "sidekiq": {
...queue_sizes": { "dead": 0, "retries": 0, "monitoring": 0, "low_priority": 0, "mails": 0, "default": 0, "elasticsearch": 0, "high_priority": 0, "file_upload": 0, "scheduled": 0 }, "active_workers": 0 }, "timestamps": {
...to run JS tests. Given a Vue project that uses Jest (via vue-cli-service) with the following package.json: { "scripts": { "test": "vue-cli-service test:unit --testMatch='**/tests/**/*.test.js' --watch...
...allows us to run Jest tests with yarn test. The only downside of this setup is that debugger statements are ignored with the CLI approach - there are no Browser Devtools...
Plot graphs in Ruby WebGraphviz renders in your browser via JavaScript (to store the rendered graph, extract the SVG using your browser's DOM inspector) GraphViz with DOT: Online...
...graphviz.christine.website/ or offline https://makandracards.com/makandra/1589-auto-generate-state_machine-graphs-as-png-images Balsamiq Draw.io Excalidraw Asciiflow Google Presentation Egon.io: Domain storytelling with replay functionality (good to visualize and present flows) Gnuplot Ruby Bindings: Especially for more...
...in "Comment" with: """ This is a long comment. With multiple lines. And paragraphs. """ The step definition is part of the spreewald gem
Note: You won't need this for single lines of text. In this case it is better to just use the text-overflow property: Use CSS "text-overflow" to truncate...
...use -webkit-line-clamp in your CSS/SASS to natively render an ellipsis (...) after a specific amount of lines for a multi-line text in your HTML. Earlier, it was necessary...
While the Software Design Basics card tried to make a point about writing self explanatory code, it's still essential for every application to maintain a good documentation. The...
...README file is essential for fellow engineers to get started quickly, as it contains documentation of all major moving parts of the given app. Resources README Driven Development