View

Flickity: Currently best known slider

Features include:

  • Slide style agnostic, styling a slide is completely up to the developer (including varying widths)
  • Responsive (configurably debounced)
  • Full touch support (configurable: on/off, friction, snappiness)
  • Free scroll option
  • Having one slider control another

Feature showcase

For a quick overview, click through the main menu on flickity and watch the table of contents on the right.

Google Chrome: How to find out your currently installed theme

So you downloaded a theme for Chrome a while ago and don't remember which one it is?
Chrome's user interface won't tell you. You have to check its Preferences file.

Linux
/home/YOUR_USER_NAME/.config/chromium/Default/Preferences
OSX
/Users/YOUR_USER_NAME/Library/Application Support/Google/Chrome/Default/Preferences
Windows
C:\Users\YOUR_USER_NAME\AppData\Local\Google\Chrome\default\Preferences
  1. Open that file with a text editor and search for "theme":{"id" to reveal the theme's Chrome Store ID.
    2….

Ubuntu MATE: Add a new panel

To add a new panel in MATE:

  • Right-click on an existing panel and choose New Panel
  • A new panel will appear at the bottom of the screen
  • Right-click on the new panel, choose Properties and uncheck Expand
  • Alt+Drag the panel to the desired location (e.g. to a second monitor)
  • In the properties, check Expand again.
Repeats

Cucumber features as documentation

Cucumber allows for prose in features and scenarios. Example:

Feature: Cancel account

  There are several ways to cancel a user account. Admins need to 
  do it in complex cases, but normally, users can do it themselves.
  
  Scenario: User cancels his own account
    
    Users should be able to cancel an account themselves, so the 
    admins do not need to do it.
    
    Given a user account for "willy@astor.de"
    When I sign in as "willy@astor.de"
    And I follow "Cancel account"
    Then I should see "Account canceled"

B…

Auto-destruct in 55 days

Updated: Cancel the ActiveRecord callback chain

  • Added Rails 5 examples
  • Added caveat about halting the callback chain by accidentally returning false in Rails 1-4.
External content

ActiveRecord subselects - Today I Learned

Apparently you can pash a second scope to a hash-condition and the whole thing will be evaluated as a second SELECT statement mit with a subselect.

stopping / restarting libvirt on Ubuntu 16.04 with systemd

Because systemd is the greatest thing ever it's not enough to stop the libvirt service. You need to disable the libvirt socket too.

sudo systemctl stop libvirt-bin
sudo systemctl stop libvirt-bin.socket
sudo systemctl start libvirt-bin
External content

Name that Color

This service gives you a kind-of standard color name for any hex code.

This is useful if you want to extract some colors into a Sass $variable and are looking for a proper variable name.

Repeats

RubyMine: Scratch files

There are times when you have a chunk of text that you want to do something with, e.g. replace something on it, or quickly edit it.

While you can open your favorite non-RubyMine editor for this, there is also a plugin: Scratch.

It allows RubyMine to open temporary files (actually they are saved, but somewhere inside the plugin's directory) so you don't need to switch to a text editor like gEdit that works differently and may not even offer what you are used to.

Note that RubyMine also offers so…

Using Google Analytics with Unpoly

The default Google Analytics might not work as expected with your Unpoly app. This is because your app only has a single page load when the user begins her session. After that only fragments are updated and the <script> tag that sends the page view to Google Analytics is probably never evaluated again.

Luckily you can fix this.

First, edit your Google Analytics code snippet and comment out the last line (ga('send', 'pageview')):

```

You can implement basic object-fit behavior with background images

So you want to use object-fit, but you also need to support Internet Explorer.

One option is to use lazysizes as a kinda-polyfill. Another option is to implement the requirement with background-size: contain, and background-size: cover, which is supported in IE9+.

E.g. to make an image cover a 100x100 px² area, cropping the image when nece…

Images darken when getting converted with ImageMagick

When using ImageMagick to manipulate images, you might see that images get darker when beeing modified by newer versions of ImageMagick.

This usually happens with CMYK images beeing converted to RGB by IM.

Solution

At least in our version of ImageMagick (6.7.7) you can solve this by passing this parameter to ImageMagick -colorspace sRGB.
The RGB colorspace was okay for ImageMagick until version 6.6.9. RGB and sRGB switched obviously.

How to force horizontal panel layout for Chrome

Chrome's developer tools automagically choose vertical or horizontal panel layout, based on their width. You can disable that magic.

Open the developer tools menu (3 dots) and then "Settings" (or press F1 when focusing the dev tools).
Under "Preferences", in the "Appearance" section, find the "Panel layout" option. Set it to your liking.

Wat?

Vertical means that the DOM tree is next to the styles/etc panel, like so:

![vertical layout example](https://makandracards.com/makandra/41536-how-to-force-horizontal-panel-layout-for-chrome/at…

External content

About the HTML and the BODY tag

  • The html and body elements are distinct block-level entities, in a parent/child relationship.
  • The html element's height and width are controlled by the browser window.
  • It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed.
  • The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.
  • In almost all modern browsers, the built-in offset from the edge of the page is applied through a ma…
Repeats

Angular Performance: One-time bindings in expressions

In addition to the {{ myValue }} two-way binding syntax, since Angular 1.3 there's a one-time binding syntax, prefixing the value or expression with ::, e.g. {{ ::myValue }}, {{ ::myValue >= 42 }} and {{ ::myExpression(value) | someFilter }}.

One-time bound expressions get dropped from the list of watchers as soon as they can be resolved. Performance-wise the impact for this small change is huge, since Angular apparently slowes down with too many watchers registered [(Source)](http://www.binpress.com/tutorial/speeding-up-angular-js-wi…

There is no real performance difference between "def" and "define_method"

You can define methods using def or define_method. In the real world, there is no performance difference.

define_method is most often used in metaprogramming, like so:

define_method :"#{attribute_name}_for_realsies?" do
  do_things
end

Methods defined via define_method 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_name}_for_realsies?; do_things; end"

You can be…

Available now: Post Rails Book Bundle

The Post Rails Book Bundle is a collection of books about growing Ruby on Rails applications as they become bigger and more successful.

The bundle is only available until this Friday (July 22nd 2016), so grab your copy while you can!

The following eight books are included at a heavily discounted price:

Fearless Refactoring Rails Controllers

This book guides you through the complicated task of cleaning up the mess that controllers often become in legacy Rails ap…

Icon font vertical alignment in Windows

I had an issue with icons from an icon font aligning differently on Linux, iOS and Windows (seemingly browser-independent). With vertical-align:middle, they aligned properly on Linux, iOS and macOS, whereas with a vertical-align of -18%, it looked good on Windows and iOS, but not Linux.

Further investigation showed that not only icons, but also normal capital letters aligned differently. No setting of vertical-align could fix this, neither top, bottom, middle, nor additional paddings or margins. It seems like browsers take the…

View
3146 cards