How to type brackets, braces, pipe, backslash, or at sign on OSX
On OSX (real or inside Browserstack), you need different keystrokes for your favorite special characters than you'd use on Linux or Windows.
Character | OSX Keystroke |
---|---|
[ |
Alt+5 |
] |
Alt+6 |
{ |
Alt+8 |
} |
Alt+9 |
` | ` (Pipe) |
\ (Backslash) |
Alt+Shift+7 |
@ |
Alt+L |
Incredibly fast web apps // Speaker Deck
Presentation about optimizing Ruby on Rails apps.
From Nico Hagenburger (homify's lead frontend developer).
Angular isolate scopes: Calling a parent scope function with externally defined arguments
Isolate scopes offer three kinds of variable binding. One of them is &
, allowing to bind a property of the isolate scope to a function in the parent scope. Example:
# HTML
<panel proxy="parent.someFunction(arg1, arg2)"></div>
# Coffeescript
@app.directive 'panel', ->
scope:
parentFn: '&proxy'
link: (scope) ->
scope.parentFn(arg1: 'first', arg2: 'second')
In this dumb example, the panel
directive will call its scope's parentFn()
function with two arguments, which proxies to parent.someFunction('first', 'second')
...
Amazon S3: Give a user write-access to selected buckets
There's no user interface to give an AWS IAM user read/write access to a selected list of S3 buckets.
Instead you need to attach an IAM policy like the one below to the user:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::bucket1",
"arn:aws:s3:::bucket2"
]
},
{
"Effect": "Allow",
"Action": [
...
Sass: How to do math with shorthand values inside variables
If you need to modify (e.g. add 2px) a Sass variable that defines multiple values as one (e.g. for short-hand CSS definitions such ass padding
), you can by using nth
. It's ugly.
While you could split up such variables into multiple values (e.g. combined padding into one for vertical and one for horizontal padding) in your own Sass definitions, when using some framework definitions like bootstrap-sass
, those variables are defined outside your reach.
The following is helpful if you really want to use values from such variables. However...
How to human-join an array in JavaScript
To simulate Rails' to_sentence
in your JavaScript application, you can use these few lines of CoffeeScript code:
joinSentence = (array) ->
if array.length > 1
array[0..-2].join(', ') + ', and ' + array[-1..]
else
array.join ', '
Examples:
> joinSentence(['cats', 'dogs', 'pandas'])
# => 'cats, dogs, and pandas'
^
> joinSentence(['llamas'])
# => 'llamas'
Here is some plain JavaScript, should you prefer that:
function joinSentence(array) {
if (array.length > 1) {
return ar...
Puppet 3.x: Convert a float to an integer
There is no built in possibility to convert a float to an integer. You have to use an inline_template
inline_template('<%= @someFloat.to_i %>')
Browsers have built-in pretty printing for JSON
This pretty-prints a JSON object
, with two spaces of indentation:
JSON.stringify(object, null, 2)
Detect the language of a string
You can use the whatlanguage gem to detect the language of a Ruby string.
Note that it also has not been updated in quite a while and that there might be alternatives. However, it still works.
It has problems with short strings, but works quite well on longer texts.
Use it like this:
>> WhatLanguage.new(:all).language('Half the price of a hotel for twice the space')
=> :english
There is also a convenience method on Strings (you may need to require 'whatlanguage/string'
).
>> 'Wir ent...
Rails: How to get PostgreSQL version being used
To check the currently running PG version from your Rails application (e.g. Rails console on your production server), simply do this:
ActiveRecord::Base.connection.select_value('SELECT version()')
Middleman does not fingerprint asset paths by default
We're using Middleman for some static sites like our blog.
Despite being very similar to Rails, Middleman does not add a fingerprint hash to its asset paths by default. This means that when you write this:
<%= javascript_include_tag 'all.js' %>
... you always get the same path, regardless of the contents of all.js
:
<script src='/javascripts/all.js'>
Because browsers tend to cache assets for a while, this means that users might not get your changes until their cac...
About Piwik
Piwik is the leading open-source analytics platform.
As such, it is an alternative to Google Analytics. Since it is open-source, it can be self-hosted and thus offers better data protection and privacy.
Notes
Actuality
Piwik does not show live reports, but updates its reports from time to time. piwik.pro seems to generate reports only once an hour. The exception to this is the dashboard, where you have a "Visitors in Real-time" widget that will show live tracking actions.
Date
Piwik analytics is always for a specific da...
The Current State of Telephone Links | CSS-Tricks
The linked article shows what current browsers do when you click a link like this:
<a href="tel:1-562-867-5309">1-562-867-5309</a>
Spoiler: The current state is sad
It's still the case that most desktop browsers can't do something useful with tel:
links. They will usually open a dialog confirming that an external application will be opened. If the user confirms, she will see an error, or nothing at all.
On mobile browsers on the other hand, these links just open...
Represent astral Unicode characters in Javascript, HTML or Ruby
Here is a symbol of an eight note: ♪
Its 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 not...
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...
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?
You can go to chrome://settings/appearance
(on Chrome 61+) to see the theme's name, and click a link to open it in the Chrome Web Store.
If you are on an older version, or if the above no longer works, you have to check Chrome's 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_US...
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.
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, yourbody
may not be as tall as the browser window). - Use the
html
tag to define a basefont-size
so you can use [rem
units](https://www.sitepoint.com/underst...
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.
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.
Simple mode: You just want to track all the page views
Embed your Google Analytics code as always.
Now add the following code snippet:...
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...
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 with a subselect.
Note that sub-queries are extremely slow in MySQL, but they can make cases easier where performance does not matter so much (e.g. a migration on 50K records).
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.
The Codeless Code
The Codeless Code is a charming series of stories about monks and nuns at a programming monastery.
Some stories to get started: