Opinionated Angular style guide for teams by @john_papa

Not everything in this guide works perfectly for us, but is still a good start.

You can hook into Slack when using Capistrano for deployment. The slackistrano gem does most of the heavy lifting for you. Its default messages are unobtrusive and can be adjusted easily.

When deploying, it posts to a Slack channel like this:

How to integrate

Integrating Slackistrano with Capistrano 3 is fairly simple.

1. In your Slack, open menu → A...

Often times you want to give a bunch of elements the same style, except for the last. For example borders or margins.

You probably commonly used the :last-child CSS meta selector like so:

.foo {
  border-bottom: 1px dashed #000;
}
.foo:last-child {
  border-bottom-width: 0;
}

However, this only works when an element is the last child of its parent. Any other siblings which are unrelated to your case will break it.

Instead, prefer using the + sibling selector. It applies to the element following the other.

.foo + .foo {
 ...

See this Railscast.

Basically you can simply write views like index.xlsx.erb:

<?xml version="1.0"?>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
  xmlns:o="urn:schemas-microsoft-com:office:office"
  xmlns:x="urn:schemas-microsoft-com:office:excel"
  xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"
  xmlns:html="http://www.w3.org/TR/REC-html40">
  <Worksheet ss:Name="Sheet1">
    <Table>
      <Row>
        <Cell><Data ss:Type="String">ID</Data></Ce...

Write a // and indent every subsequent line by two spaces.

This is great for documenting BEM blocks!

//
  An action button
  ================
  
  Basic usage
  -----------
  
      <a href="/path" class="action">New booking</a>
      <button class="action">Save</a>
      <input type="submit" class="action">Save</a>
  
  Colors
  -------
  
      <a href="/path" class="action is-red">Primary</a>
      <a href="/path" class="action is-grey">Secondary</a>
  
  Small inline buttons
  --------------------
  
      <p>
        Recor...

When you want to look up a class for a given factory, do it like this:

>> FactoryBot.factories.find('admin').build_class
=> User

In older versions, you could do:

>> FactoryBot.factory_by_name('admin').build_class
=> User

When you use the send_file method to send a local file to the browser, you can save resources on the application server by setting the :x_sendfile option to true. This option is activated by default for Rails 3, so you need to understand this.

What this option does is not to send any data at all, but rather set the local file path as a new response header:

X-Sendfile: /opt/www/awesome-project/shared/downloads/image.png

When the response comes back from Rails to...

Webfonts are not always available when your JavaScript runs on first page load. Since fonts may affect element sizes, you may want to know when fonts have been loaded to trigger some kind of recalculation.

Vanilla JavaScript / Modern DOM API

In modern browsers (all but IE and legacy Edge) you can use document.fonts. Use load to request a font and receive a Promise that will be resolved once the font is available. Example:

document.fonts.load('1rem "Open S...

When a CSS3 animation makes the animated element flicker, it may well be due to pixel fragments being handled differently during animation. You can force the browser into rendering the element on the GPU by adding certain properties. In Chrome, the combination of the following properties has the best effect.

box-shadow: 0 0 0 #000
transform: translate3d(0,0,0) # remember to add vendor prefixes

Depending on your markup, you might need to set these properties on several elements (presumably all those that have height or width in %)...

The debate between using mixins or extends in Sass has been heating up recently. From the surface it appears they both provide solid benefits in helping us write consistent and modular code. However, the critics are out and extends specifically have come under fire. But why?

Interesting results: Although mixins create more code than extends, the gzipped CSS is smaller and somewhat faster to evaluate for current browsers.

Redis comes with a really easy to use Pub/Sub mechanism.

An official Github repo by Google containing the binary font files served through Google Fonts, so you can easily download and install them locally.

If you want to sort values from an enumerable into two arrays based on whether they match a certain criteria or not, Enumerable#partition can come in handy.

# Enumerable#partition returns two arrays, 
# the first containing the elements of enum 
# for which the block evaluates to true, 
# the second containing the rest.

(1..6).partition { |v| n.even? }  #=> [[2, 4, 6], [1, 3, 5]]

Works well with destructuring assignment, too.

even, odd = (1..6).partition { |n| n.ev...

Here you are:

SELECT table_name, table_rows FROM INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA = 'your_database' order by table_rows;

To achieve this goal you have to setup the session store like the following example:

  MyApp::Application.config.session_store(
    :cookie_store,
    {
      :key => '_myapp_session',
      :domain => :all, # :all defaults to da tld length of 1, '.web' has length of 1
      :tld_length => 2 # Top Level Domain (tld) length -> '*.myapp.web' has a length of 2
    }
  )

The invconvenient side effect for local development

… or: Why do I get "Can't verify CSRF token authenticity" even if csrf token is present?

As `:domain => :all...

An online markdown live previewer with GitHub Flavoured Markdown support.
Another online markdown live previewer with GitHub Flavoured Markdown support.
An online markdown live previewer without GitHub Flavoured Markdown support.

Good article about window functions. Also note how they use a postgres feature called common table expressions.

Great crash course into basics and common mistakes.

Obviously, you only can do this for your own sites.
You need to authenticate a domain you want to remove content from via Webmaster Tools.

To remove a URL:

1. Open Webmaster Tools
2. Select the respective site from the list of domains under your control
3. Choose "Google Index" from the menu left
4. Click "Remove URL"

The asset pipeline (which is actually backed by sprockets) has a nice feature where templates ending in .jst are compiled into Javascript template functions. These templates can be rendered by calling JST['path/to/template'](template: 'variables'):

<!-- templates/hello.jst.ejs -->
<div>Hello, <span><%= name %></span>!</div>

// application.js
//= require templates/hello
$("#hello").html(JST["templates/hello"]({ name: "Sam" }));

Whatever is in the <% ... %> is evaluated in Javascript...

When uploading images, adding more than one process to a version can cause MiniMagick to run multiple commands. In order to have all processing done in one mogrify system call, you'll need to define only one process that combines all options you'd like to pass in.

The linked article explains how to get a database-wide lock without creating table rows:

This article explains how I replaced file-based methods to ensure only one running instance of a program with MySQL’s GET_LOCK function. The result is mutual exclusivity that works in a distributed environment, and it’s dead simple to implement.

Ruby implementation

An implementation as a Rubygem seems to be [with_advisory_lock](https:...

Postgres 9.4 introduces a new column type: jsonb. json and jsonb columns store data differently, so just compare the two when you want to store JSON data and choose the one that matches your use case best.

Rails 4.2 includes support for jsonb columns, too. The article outlines different ways on how to interact with the serialized object.

When you are using the #selector_for helper in Cucumber steps, as e.g. Spreewald does, the following snippet will save you typing. It recognizes a prose BEM-style selector and maps it to the corresponding BEM class.

For a variation on this idea, see An auto-mapper for ARIA labels and BEM classes in Cucumber selectors.

Examples

"the main menu" -> '.main-menu'
"the item box's header" -> '.item-box--header'

Here are some examples of steps (using Spreewald, too):

T...