View

Stop animations and network polling when the document tab isn't visible

Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating data over the network every five minutes?

It's a good idea to not do this if the your document tab is not even visible to the user. This saves your user's battery and data plan.

You can ask document.visibilityChange whether this tab is visible:

```
function pulse() {
if (!document.visibilityState || document.visibilityState == …

Repeats

Find an ActiveRecord by any column (useful for Cucumber steps)

The attached patch lets you find a record by a string or number in any column:

User.find_by_anything('carla')
User.find_by_anything('email@domain.de')
User.find_by_anything(10023)

There's also a bang variant that raises ActiveRecord::NotFound if no record matches the given value:

User.find_by_anything!('carla')

Boolean and binary columns are excluded from the search because that would be crazy.

I recommend copying the attachment to features/support/find_by_anything.rb, since it is most useful in Cucumber step …

Auto-destruct in 56 days

Updated: Ruby: Extract the hostname from a URL

Added hint on how to obtain a host's full URL without path etc.

Building web applications: Beyond the happy path

When building a web application, one is tempted to claim it "done" too early. Make sure you check this list.

Different screen sizes and browsers

Desktops, tablets and mobile devices have all different screen resolutions. Does your design work on each of them?

  • Pick a lower limit browser. Usually this will be an Internet Explorer, e.g. IE9. Make sure the page looks ok, is usable and working in this browser.
  • Use @media queries to build a responsive design
    • If you do not support different screen sizes, the app should at least not l…

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.

Represent astral Unicode characters in Javascript, HTML or Ruby

Here is a symbol of an eight note: ♪

It's two-byte hex representation is 0x266A.

This card describes how to create a string with this symbol in various languages.

All languages

Since our tool chain (editors, languages, databases, browsers) is UTF-8 aware (or at least doesn't mangle bytes), you can usually get away with just pasting the symbol verbatim:

note = '♪'

This is great for shapes that are easily recognized by your fellow programmers.
It's no…

Repeats

Checklist for implementing authentication

This card has four sections, concerning

  • all apps behind SSL
  • apps employing Clearance
  • apps with basic authentication
  • apps with home-made, self-built authentication

Choose what applies to you.

For any application that stores sensitive data in the browser, that is, cookies (e.g. by offering a login)

  • Ask the admins to turn on SSL (they will set an HSTS header for SSL-only sites)
  • [Make cookies secure and http_only](https://makandracards.com/makand…

Ubuntu MATE: Shortcut launcher for a web application

For some years Google Chrome has allowed you to add desktop icon for any web page by going to Tools / Add to desktop. Unfortunately this doesn't work reliably on Ubuntu MATE with recent Chromes: The icons could not be moved away from the desktop, or they would open the application as a new tab (instead of as a new window).

I found it to be easier to add a custom application launcher to the MATE panel.

In the Command field, enter this:

google-chrome --app="https://www.google.com/calendar"

This will open Google Calendar in a…

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…

Repeats

ActiveRecord: validate_uniqueness_of is case sensitive by default

By default, validates_uniqueness_of does not consider "username" and "USERNAME" to be a collision. This is usually not what you want.

Say you have a user model

class User < ActiveRecord::Base
  validates_uniqueness_of :name
end

with a unique index in the database.

If you try to create the users "user" and "USER", this will not trigger a validation, but fail with a SQL error due to duplicate index key.

You can change Rails' behaviour, by saying

```
class User < ActiveRecord::Base
validates_uniqueness_of :name, :case_sensitiv…

How to find out what is running on a port on a remote machine

By convention, common protocols use a defined port, like 80 for HTTP or 443 for HTTPS.

You can use nmap to find out what service is running behind a given port, and most often see some details about it.
This can be helpful if servers don't offer the services you expect for some ports.

Note that nmap's service discovery may trigger several requests.

Example

When using nmap, adding the -A switch will make nmap discover details about the given port. Specify that port using -p.

Here we look at port 443 on makandracards.com:

``…

Auto-destruct in 55 days

Updated: Using Google Analytics with Unpoly

Added a simpler integration option that has a lot less code.

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…

About the HTML and the BODY tag

The <html> and <body> tags both come with some non-default behavior that you know from other tags.
Do not try to style html or body for positioning, width/heigth, or similar. Every browser has its own caveats and you can not test them all.

Generally speaking:

  • Use the html tag to define your page's default background color (because on short pages or large screens, your body may not be as tall as the browser window).
  • Use the body tag to define font styles (family, color, size, …).
  • Use a div inside the body for anyth…
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…

View
3150 cards