# Basic HTML example
<video poster="preview_image.png" controls>
  <source src="or_here.webm" type="video/webm" />
  <source src="alternative_if_browser_cant_pay_first_source.mp4" type="video/mp4" />
  <track src="optional_subtitles.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
</video>

# Javascript API (notable methods and properties)
video = document.querySelector('video')
video.play()
video.pause()
video.load() // Reset to the beginning and select the best available source
video.currentSrc // The selected source
video.c...

RubyMine has a HTTP Client that can be useful to test web APIs.
Just create a .http scratch file an write your request in it.
The request can then be executed with the "Run all requests in File" button above the file.

Some alternatives:

• Postman
• Curl

The format for request is like this:

Method Request-URI HTTP-Version
Header-field: Heade...

In a web application you sometimes have tasks that can not be processed during a request but need to go to the background.
There are several gems that help to you do that, like Sidekiq or Resque.

With newer Rails you can also use ActiveJob as interface for a background processing library. See here for a list of supported queueing adapters.
For ...

Select2 comes with AJAX support built in, using jQuery's AJAX methods.
...
For remote data sources only, Select2 does not create a new element until the item has been selected for the first time. This is done for performance reasons. Once an has been created, it will remain in the DOM even if the selection is later changed.

If you have a huge collection of records for your select2 input, you can populate it via AJAX in order to not pollute your HTML with lots of <option> elements.

All you have to do is to provide...

Speaker today is Henning Koch, Head of Development at makandra.

This talk will be in German with English slides.

Introduction

As web developers we work with JavaScript every day, even when our backend code uses another language. While we've become quite adept with JavaScript at a basic level, I think many of us lack a deep understanding of the JavaScript object model and its capabilities.

Some of the questions we will answer in this talk:

• How does the new keyword construct an object?
• What is the differen...

Test-Driven Development (TDD) in its most dogmatic form (red-green-refactor in micro-iterations) can be tedious. It does not have to be this way! This guide shows a pragmatic approach with integration and unit tests, that works in practice and improves on productivity.

Advantages

• No added effort: tests need to be written anyway.
• Test heads serve as todo lists. You'll always know what is finished and what is left to do.
• Big tasks are broken down into smaller tasks that can be processed one by one.
• You will not forget a test.
• You...

Simplecov is a code coverage tool. This helps you to find out which parts of your application are not tested.

Integrating this in a rails project with rspec, cucumber and parallel_tests is easy.

1. Add it to your Gemfile and bundle

   group :test do
     gem 'simplecov', require: false
   end
   

2. Add a .simplecov file in your project root:

   SimpleCov.start 'rails' do
     # any custom configs like groups and filters can be here at a central place
     enable_cov...
   

A recent patch level Ruby update caused troubles to some of us as applications started to complain about incompatible gem versions. I'll try to explain how the faulty state most likely is achieved and how to fix it.

Theory

When you deploy a new Ruby version with capistrano-opscomplete, it will take care of a few things:

• The new Ruby version is installed
• The Bundler version stated in the Gemfil...

When we write a form with date fields, we often use graphical data picker like Rome to get a consistent calendar popup on all browsers.

When you integrate a date picker popup, remember to also set autocomplete="off" on the text input that opens the calendar on click. Otherwise the autocomplete suggestions will cover the calendar box and make it unusable:

If you are using a tool like Unpoly you might want to set autocomplete="off" i...

Turns out, Cucumber::MultilineArgument::DataTable#diff! caches some stuff. Code of the following form will not work as intended:

Then('some table should look like') do |expected_table|
  patiently do
    actual_table = calculate_actual_table
    expected_table.diff!(actual_table) # not actually patient, will keep failing if it failed the first time
  end
end

Instead, simply use

expected_table.dup.diff!(actual_table)

By default, Devise redirects to a sign-in form when accessing a route that requires authentication. If for some reason you do not want this, but use Basic Authentication (and the corresponding browser username/password dialog) instead, this is a simple change.

Note that Devise's default configuration actually only redirects requests for HTML content (as requested by the HTTP Accept header).
For all other formats (like JSON) it would use Basic Auth if the http_authenticatable setting was enabled. So you can simply enable that flag and cl...

Code comments allow for adding human readable text right next to the code: notes for other developers, and for your future self. You can imagine comments as post-its (or sometimes multi-sheet letters ...) on real-world objects like cupboards, light switches etc.

As always, with power comes responsibility. Code comments can go wrong in many ways: they may become outdated, silently move away from the code they're referring to, restate the obvious, or just clutter files.

Good Comments

Here are some simple rules to keep your comments help...

If you need to test some HTML, e.g. an embed code, you can use RubyMine's "scratch files":

1. File > New Scratch File (or Ctrl + Shift + Alt + Ins)
2. Select "HTML" as file type
3. Write or paste the HTML
4. Move your mouse to the upper right corner of the scratch file editor. Pick a browser to instantly open your file.

Or: How to avoid and refactor spaghetti code

Please note that I tried to keep the examples small. The effects of the methods in this card are of course much more significant with real / more complex code.

What are the benefits of more modular code?

Code is written once but read often (by your future self and other developers who have to understand it in order to make changes for example). With more modular code you reduce the scope of what has to be understood in order to change something. Also, naming things gives you the opportunity t...

This is a personal post-mortem analysis of a project that was mainly build to provide a REST API to mobile clients.

For the API backend we used the following components:

• Active Model Serializer (AMS) to serializer our Active Record models to JSON.
• JSON Schema to test the responses of our server.
• SwaggerUI to document the API.

It worked

The concept worked really good. Here are two points that were extraordinary compared to normal Rails project with many UI components:

• Having a Rails application, that has no UI components (only...

This checklist should help you to check edge cases that are not part of the default Carrierwave configuration.

• Check Default Configuration and Suggested Changes
• Use secret URLs.
• Check if you need expiring public URLs.
• Check if you need an optimized cache
• Use a [nested directory structure](https://makandracards.com/m...

Debugging image color profiles is hard. You can't trust your eyes in this matter, as the image rendering depends on multiple factors. At least the operation system, browser or image viewer software and monitor influence the resulting image colors on your screen.

When we offer our users the possibility to upload images, they will most likely contain tons of EXIF metadata and sometimes exotic color profiles like eciRGB. We want to get rid of the metadata, as it might contain sensitiv...

Browsers come with a set of built-in elements like <p> or <input>. When we need a new component not covered by that, we often build it from <div> and <span> tags. An alternative is to introduce a new element, like <my-element>.

When a browser encounters an unknown element like <my-element>, the browser will proceed to render <my-element>'s children. The visual rendering of your page will not be affected.

If you care about their HTML being valid, your new element should contain a dash character (-) to mark it as a *custom el...

When tests might not run with skipping RSpec in the RSpec.describe failing with the error undefined method 'describe' for main:Object this card will help you out!

In RSpec 3 the DSL like describe is exposed globally by default. Therefore it is not necessary to write Rspec.describe.

However, there is a config option to disable this beavior, which also disables the old should-syntax:

RSpec.configure do |config|
  config.disable_monkey_patching!...

You can use the Youtube API to get data from youtube. Here are some resources and some things that are good to know.

You need to create an API key and each request will cost a certain amount of Request-Points (depending on the kind of query).

It may help to understand youtube's domain model before starting.

It's best to just try out your requests in the browser to see what you will get.
A request can look like this (note that you have to replace the playlis...

A while ago I tweeted a thread about how a small JavaScript snippet, one that can fit in a single tweet in fact, can be used to allow defining custom elements purely in HTML. This post will expand on the idea, show how the snippet works, and argue for why you might want to actually use this.

A nice trick that lets you define "partials" in HTML without any additional rendering technology on the server or client.

The french Tilt Studio built a caniuse clone for email clients.

Note that while checking styling support helps using (or not using) certain features, it cannot substitute for checking the actual rendering in real clients. Make sure you follow Designing HTML Emails.