To make CSS rules dependent on the screen size, we use media queries: @media (max-width: 500px) { // rules for screen widths of 500px or smaller } Browsers will automatically enable and...
...disable the conditional rules as the screen width changes. To detect responsive breakpoints from JavaScript, you may use the global matchMedia() function. It is supported in all browsers:
I frequently find myself needing a combination of group_by, count and sort for quick statistics. Here's a method on Enumerable that combines the three: module Enumerable
group_by(&block) .transform_values(&:count) .sort_by(&:last) .to_h end end Just paste that snippet into a Rails console and use #count_by now! Usage examples...
...files. Those can be used to apply to a different repository [1] or by someone else (e.g. sent when sent to them via e-mail). Creating a patch in git...
...changes and commit them. Run git format-patch COMMIT_REFERENCE to convert all commits since the referenced commit (not including it) into patch files. For example, let's say you...
...pretty_print method As an example, consider the following class. class MyClass # ... def inspect "#<#{self.class} attr1: #{attr1.inspect}, attr2: #{attr2.inspect}>" end end Instances of that class will inspect like #<MyClass attr1...
...Alice", attr2: "Bob">, but IRB will apply a single color (green) for everything. That is because MyClass implements only inspect. If it were to implement pretty_print, IRB would use...
When ending a Selenium test Capybara resets the browser state by closing the tab, clearing cookies, localStorage, etc. It may be a good idea to wait for all in-flight...
...AJAX requests to finish before ending a scenario: You may have client-side JavaScript that freaks out when the tab closure kills their pending requests. If that JavaScript opens an...
min-width is known as a CSS property that can be set to define a least width for an element. Surprisingly, it can also be used to set something that...
...it is more like "auto". This can make block elements take up much more space than desired, even stretching their container beyond the screen edge on small screens.
...tough challenge. To get more detailed insights consider using the rack-mini-profiler gem. Setup with Unpoly Add the following gems: group :development do gem 'memory_profiler' gem 'rack-mini...
If you have slow views (Haml/Partials can be slow), consider caching them. Remove code & sql-queries that are not needed to render the page. Calling to_a blindly on...
If you want to switch to another ruby versions, you have several options, depending on what you want: Do you want to switch temporarily, per project, or globally?
Unlike RVM, rbenv does not offer a command like rvm use. By default, it respects your project's .ruby-version file. If you need to change manually...
When you're using feature branches, they will stack up if you don't delete them after the merge to master. Here's how to tidy them up. Delete feature...
...Find already-merged branches by running # On branch master git branch --merged You may safely delete each of the listed branches, because they point to commits that are contained in...
While it might seem trivial to implement an invoice that sums up items and shows net, gross and vat totals, it actually involves a lot of rules and caveats. It...
...examples in Ruby and MySQL, the concepts apply to all programming languages and data stores. When to round There are exactly two spots where your invoice logic should round money...
When you create a temporary file (e.g. to store a generated Excel sheet) and try to send it to the browser from a controller, it won't work by default...
...this controller action: class FoosController < ApplicationController def download file = Tempfile.new('foo') file.puts 'foo' file.close send_file file.path end end Accessing this controller action will usually raise a 404 not found...
When you use method_missing to have an object return something on a method call, always make sure you also redefine respond_to_missing?. If you don't do it...
def method_missing(method_name, *args, &block) if method_name == :bark 'woof!' else super end end end This will allow you to say: Dog.new.bark => "woof!" But: Dog.new.respond_to? :bark...
Since I use this a lot in my daily work and there were no scripts working properly for me, I made one myself. It's actually not bound to Xfce...
...t tried it, though). Installation If you don't yet have xdotool, install it: sudo apt-get install xdotool If you don't yet have wmctrl, install it:
You can change which branches will be pushed when saying git push. Our recommendation is to set it to current. From the git-config documentation: push.default Defines the action git...
...branch, but forgot to setup tracking. If you can't currently push, use git branch --set-upstream-to=origin/$(git branch --show-current...
...upgrade tasks according to its actual value. Consider to create and periodically maintain a summary, which helps you and your team in the decision which refactoring task should be taken...
Estimated Efforts Visible customer value Customer value explained Developer value Developer value explained Short title for the task Score from 0-5 Score from 0-5 Explanation
...posts; if you use pagination the queries will be more complicated, but the point still stands. Looks harmless enough? It is not. The problem ActiveRecord will rewrite this into a...
...query using LEFT JOINs which looks something like this: SELECT "blog_posts".*, "comments".*, "attachments".* FROM "blog_posts" LEFT OUTER JOIN "comments" ON "comments"."blog_post_id" = "blog_posts"."id"
If you need to convert an SVG source to PS or EPS, the most common suggestion on the interwebs is to use Inkscape from the commandline. Inkscape is a fairly...
...converting is CairoSVG. CairoSVG is available on most Linux distros through their package management systems, e.g. apt install cairosvg on Ubuntu. It has few dependencies (most importantly Python 3 and...
...a global variable in Rails? Ugh, that's the worst. If you need global state, you've probably reached for Thread.current. When you're using Thread.current, you must make sure...
...yourself or your cached data will stay in Thread.current. For Sidekiq, you can use request_store-sidekiq. Cronjobs are unaffected, as a new process is created each time...
...to read the The framework field guide - Fundamentals, the first of a three part series to learn the basics of frontend technologies. I can highly suggest it for learning the...
...fundamentals. 'The framework field guide' is written by Unicron Utterances and there side has many high quality articles on web development and computer science related to programming. The Framework Field...
Why string sorting sucks in vanilla Ruby Ruby's sort method doesn't work as expected with special characters (like German umlauts): ["Schwertner", "Schöler"].sort # => ["Schwertner", "Schöler"] # you probably expected...
...Schöler", "Schwertner"] Also numbers in strings will be sorted character by character which you probably don't want: ["1", "2", "11"].sort # => ["1", "11", "2"] # you probably expected...
...block evaluates to true. first_post_with_image = posts.find do |post| post.image end However, sometimes it's not the item you're interested in, but some value depening on it...
...image).find(&:present?).url If the mapping is a costly operation or has undesirable side effects, you need to do it in a single iteration instead. Single iteration solution with...
When you have an Angular directive that transcludes content, you might want to do something in case there is no content inside your element, like showing some default content.
...you can not do something like default goes here . Angular will always empty that element's text, even if there is nothing to transclude. But you can use your directive...
Here are a few common patterns that will probably lead to flaky specs. If you notice them in your specs, please make sure that you have not introduced a flaky...
Using RSpec matchers One rule of thumb I try to follow in capybara tests is using capybara matchers and not plain rspec matchers. One example: visit(some_page)
Jasmine has long standing support for writing asynchronous specs. In days gone by we used the done callback to achieve this, but these days it is possible to write much...
...more readable specs. Async specs As a first example, say we want to check that some form disables the submit button while working. // bad (how we used to do it...