}) Example case I had an Unpoly compiler for a tab navigation, which sets an -active class per default to the first tab link and removes it from all...
...other tab links. If another tab link is clicked, the -active class switches to the clicked link. In a Jasmine spec I wanted to test this behaviour. Unpoly's up.hello...
...only tidies up your own code, but also makes it easier to write future specs. However, not all situations are well-suited for that. Sometimes the effort isn't worth...
...would need too many parameters to be reusable. In those cases, you can also simply extract a private method: describe `/search` do it "doesn't lose the infinite scroll's...
...animate HTML elements using the Web Animation API's method .animate(keyframes, options) (which seems to be Baseline for all browsers since 2022). const fadeIn = [{ opacity: 0 }, { opacity: 1 }] // this...
// the animation object can be used for things like querying timings or state or `pause`, `cancel` the animation animation.pause() animation.play() await animation.finished // do other stuff Even though play...
To return non-HTML responses (like XLS spreadsheets), we usually use the respond_to do |format| format.xls do # send spreadsheet end end This is often, but not always the same...
...one format checks for authorization and the other doesn't. params[:format] is only set when a user explicitly puts a .xls at the end of the URL. The format.xls...
If you want to play music or sounds from a browser, your choice is to use either Flash or the new tag in HTML5. Each method has issues, but depending...
Can play MP3s or Wave files. Cannot play OGG Vorbis audio. Cannot reliably seek to a given position when playing VBR-encoded MP3s. HTML5 audio Is the future, but...
We structure our CSS using the BEM pattern. Our naming convention for blocks, elements and modifiers has evolved over the years. This card shows our current style and various alternative...
...styles that you might encounter in older projects. The difference between the various styles are mostly a matter of taste and optics. I do recommend to not mix styles and...
You want to prevent input to a form field, but all the solutions have side effects: The [readonly] attribute is only available for text fields, but not for checkboxes, selects...
...all kinds of fields, but will no longer include the field value in the submitted form data. pointer-events: none still allows keyboard input, and does not indicate disabledness visually...
Looking at the source code of the validates_numericality_of validator, it becomes clear that it converts the attribute in question to either an integer or float: if configuration[:only...
...any of your users as this is only broken in the most extreme case shown above...
...offset, e.g. Thu, 28 Mar 2019 16:00:00 CET +01:00. Ruby's stdlib TZInfo also has time zones, but with different identifiers. Unfortunately, not all timezone codes can...
...time zone has a pretty abbreviation. In such cases, you'll end up with a semi-broken offset identifier that humans won't understand. What to do?
Some browsers render PNG images with color profiles and other shenanigans, some do not. The cleanest way to have consistent colors across browsers is to convert all your images to...
...a standard color profile, strip the image's original profile and attach the standard profile. If you can't be bothered to convert color profiles, a quicker (but less effective...
Rails offers several ways to remove records. They differ in whether they instantiate records, fire callbacks (including dependent: associations) and how they manage relation state afterward. destroy_all
# ActiveRecord::Relation def destroy_all records.each(&:destroy).tap { reset } end records evaluates SQL, caches result .each(&:destroy) iterates the cached Array, returns it .tap { reset } calls Relation#reset...
Tested on Ubunut 22.04 1. Opener script Create a file ~/.local/bin/coverage_zip_opener with: #!/bin/bash tmp_folder="/tmp/coverage-report-opener" if [ -z "$1" ] then echo "Usage: coverage_zip_opener [filename]" exit -1 fi
index_filename=$(find /tmp/coverage-report-opener -name "index.html" | awk '{ print length, $0 }' | sort -n -s | cut -d" " -f2- | head -1) if [ -z "$index_filename" ] then echo "No index file...
...binary file. This method might be telling the truth most of the time. But sometimes it doesn't, and that's what causes pain. The method is defined as follows...
...not guaranteed to be 100% accurate. It performs a "best guess" based # on a simple test of the first +File.blksize+ characters. # # Example: # # File.binary?('somefile.exe') # => true # File.binary?('somefile.txt') # => false #--
...universe multiverse deb-src http://de.archive.ubuntu.com/ubuntu/ yakkety-backports main restricted universe multiverse deb http://security.ubuntu.com/ubuntu yakkety-security main restricted universe multiverse deb-src http://security.ubuntu.com/ubuntu yakkety-security...
10 http://de.archive.ubuntu.com/ubuntu yakkety-updates/main amd64 Packages 10 http://security.ubuntu.com/ubuntu yakkety-security/main amd64 Packages 2:7.4.1829-1ubuntu2 10 10 http://de.archive.ubuntu.com/ubuntu yakkety/main...
...investigate by running that example again using rspec . However, this does not work with shared examples, since Rspec doesn't know in which context the shared example should be run...
...But there is a different way: You can run the shared example using the -e, --example option. It takes a string value and runs all scenarios containing that substring in...
We're always striving towards keeping our website's JavaScript as small as possible. If you're using webpack(er), you can use the webpack-bundle-analyzer plugin to get...
...a good overview, which of your JavaScript modules take up how much space, and where you can optimize. To use it, add it via npm or yarn yarn add webpack...
...want some output. In Rails > 3.1 you have two methods at hand: announce and say_with_time. In the migration: class AddUserToken < ActiveRecord::Migration class User < ActiveRecod::Base; end
add_column :users, :token, :string announce "now generating tokens" User.find_in_batches do |users| say_with_time "For users ##{users.first.id} to ##{users.last.id}" do users.each do |user| user.update_attribute :token...
$number = $length / 1px // => 13 Converting a unit the result of an addition or subtraction between two numbers of different units is expressed in the first member’s unit
...the desired unit: $duration: .21s $duration-in-milliseconds: 0ms + $duration // => 210ms An example is storing a transition duration as CSS custom property to read it from Javascript. By converting the...
...had worked fine just a few weeks ago and there had been no changes since. Long story short: The browserslist database was simply outdated and the project's browserslist config...
...specifies "last 2 years" -- which no longer resolved to any known browsers, because the package version was older than 2 years. So, the fix is to just upgrade that package...
...on a very good network connection. To test how your application behaves on a slow network (e.g. mobile), you can simulate limited bandwidth. Chrome Open the dev tools (Ctrl+Shift...
...I or F12) and switch to the "Network" tab In the row below the dev tool tabs, there's a throttling dropdown which reads "Online" by default. Inside the dropdown...
...default order" of rows in database tables. For instance, when you paginate a result set: When using LIMIT, it is important to use an ORDER BY clause that constrains the...
...result rows into a unique order. Otherwise you will get an unpredictable subset of the query's rows. You might be asking for the tenth through twentieth rows, but tenth...
PostgreSQL's Common Table Expressions (CTEs) can be used to extract sub-queries from bulky SQL statements into a temporary table to be referenced instead. This is most useful to...
...avoid ugly joins or sub-selects. CTEs can be used for SELECT, INSERT, UPDATE or DELETE. Example (from the PostgreSQL docs): WITH regional_sales AS ( SELECT region, SUM(amount) AS...
...or every even-numbered item. However, :nth-child can do more. In modern CSS specifications (Level 4), there’s an additional feature that lets you use :nth-child in combination...
...with a list of css selectors. This way, you can target the nth-child within a subset of siblings matching a selector. For example: .container .foo %span.my-selector .bar
...you prepare your changelist properly, it directs your reviewer’s attention to areas that support your growth rather than boring style violations. When you demonstrate an appreciation for constructive criticism...
...your reviewer provides better feedback . Make others better: Your code review techniques set an example for your colleagues. Effective author practices rub off on your teammates, which makes your job...