View
Repeats

How to emulate simple classes with plain JavaScript

If you want a class-like construct in JavaScript, you can use the module pattern below. The module pattern gives you basic class concepts like a constructor, private state, public methods.

Since the module pattern only uses basic JavaScript, your code will run in any browser. You don't need CoffeeScript or an ES6 transpiler like Babel.

A cosmetic benefit is that the module pattern works without the use of this or prototypes.

Example

Here is an example for a Ruby class that we want to translate into Javascript using the module patter…

Linked contentRepeats

Canceling promises

The cancelable promises proposal was withdrawn some time ago.

The new standard way is that your long-running function take a AbortSignal { signal } property. The caller can use this signal to send an abort request to your function. Upon receiving the request, your function should reject its promise with an error.

Async browser functions like fetch() reject their promises with a `new DOMException('Message here', 'Abo…

Upgrading Ruby from 1.8.7 to 2.3.5

Suggested Workflow

Set the ruby version in .ruby-version to 2.3.5, then perform these steps one by one, fixing errors as they occur:

1) Update gems as listed below, and bundle
2) Boot a Rails console - see below for a list of changes you will probably need
3) Run Specs with --backtrace option
4) Run Cucumber features (with Geordi's --debug option)
5) When all tests are green, look through your Gemfile and remove as many version constraints as possible.
6) Boot the application in different environements to spot further issues, e…

Repeats

What collapsing margins are, how they work and when margins do not collapse

What collapsing margins are

Imagine you have 2 HTML boxes. The first one has a margin-bottom of let's say 30px and the second one a margin-top of 20px. After rules of collapsing margins have been applied we have a margin of 30px (not 50px) between these two boxes (see this article for an illustration) . This is because no addition of both margins takes place but the maximu…

How to create a Basic Auth header value

When doing Basic Authentication, your browser will send an "Authorization" header. Its value is simply a Base64-encoded representation of "username:password" (like when you place credentials in the URL directly). Example for "user@example.com" with password "secret":

Authorization: Basic dXNlckBleGFtcGxlLmNvbTpzZWNyZXQ=

So, in Ruby, you can create such headers like so:

Base64.strict_encode64("#{username}:#{password}")

Note that when speaking to a REST API, you should be using libraries like RestClient or HTTParty which will wrap …

Repeats

How to start Terminator with split screens and custom commands running

Starting Terminator with split screens is quite simple: Just store a layout and start Terminator with the --layout <your layout> option.

However, if you want to run custom commands in your terminals, you need to do some work to keep these terminals from closing after a command exits. You accomplish this by tweaking bash to run a command before actually starting.

Pimp your .bashrc

Add this to the end of .bashrc:

```
# hack to keep a bash open when starting it with a command
[[ $startup_cmd ]] && { declare +x $startup_cmd; eval…

CSS: How to find out the rendered font in chrome

The rendered font often depends on the local font your system provides, therefore you often find a rule like below in the computed style for an element:

font-family: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif

This means if your system has a font named Menlo, it will render the text with this font. Otherwise it will try Monaco and so on. For the last two fallback options the system is free to use any monospace font or if not present any serif font. At lea…

Deprecated

Live CSS / view reloading

Next time you have to do more than trivial CSS changes on a project, you probably want to have live CSS reloading, so every time you safe your css, the browser updates automatically. It's pretty easy to set up and will safe you a lot of time in the long run. It will also instantly reload changes to your html views.

Simply follow the instructions below, taken from blog.55minutes.com.

Install CSS live reload (only once per project)

  1. Add th…

How to: Use Ace editor in a Webpack project

The Ace editor is a great enhancement when you want users to supply some kind of code (HTML, JavaScript, Ruby, etc).
It offers syntax highlighting and some neat features like auto-indenting.

Integrating it with Webpack as described in the documentation – by using ace-builds and ace-builds/webpack-resolver – failed pretty hard for me. Maybe because Rails' Webpacker is still on Webpack 2.
The following works for Ruby on Rails with Webpacker / Webpack 2.

  1. Do not use the `ace-builds…
Linked content

SVGOMG allows optimizing SVGs with a live preview

There are many ways to optimize SVGs. Ideally, your build pipeline does that automatically for you (e.g. via postcss-svgo).

If you want to manually tweak an SVG, you can use SVGOMG which is an application running SVGO in your browser.
You should deactivate the option "Remove viewBox" because you want SVGs to be scalable by the browser.

You see a live preview of any changes you make, and can copy the SVGO source with a single click (or download the optimized SVG).

Repeats

Let the browser choose the protocol

Use protocol independent URLs whenever possible so that the browser will choose the protocol related to the protocol which the page is delivered with.

Example issues

  • When your page is delivered via https and you provide a youtube video only via http the most browsers (e.g. Firefox, Chrome) won't display the video.
  • When you deliver your youtube video via https://youtu.be/jyElDp98HdI your test which checks that the embeded video is rendered in the view will fail because your test server doesn't use https

Solution

Let your lin…

Repeats

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?

  • Choose which browsers to support. Make sure the page looks OK, is usable and working in these browsers.
  • Use @media queries to build a responsive design
    • If you do not suppo…
Linked content

How to: expand an element's cover area beyond its container

Occasionally, your designer will hand you designs where elements break the layout's horizontal container width, like navigation buttons of a slider that should be at the left/right of the browser window, or simply by applying a background color that reaches until the left and right of the browser window.

In the past, we've done some horrible things to achieve that. Like margin: 0 -10000px plus overflow-x: hidden.
There is a much saner approach.

Consider the following markup:

```html

<div class="sec...

How to access before/after pseudo element styles with JavaScript

Accessing pseudo elements via JavaScript or jQuery is often painful/impossible. However, accessing their styles is fairly simple.

Using getComputedStyle

First, find the element in question.

let element = document.querySelector('.my-element') // or $('.my-element').get(0) when using jQuery

Next, use JavaScript's getComputedStyle. It takes an optional 2nd argument to filter for pseudo elements.

```javascript
let style = window.getComputedStyle(element, '::before')
let color = style.getPropertyValue('background-color…

Deprecated

Disable the Java plugin in browsers to avoid drive-by attacks

Every now and then, Java is subject to security issues where code can break out of Java's sandbox and obtain more privileges than it should.
In almost all cases, such issues are actively being used for drive-by attacks via the Java browser plug-in, for example by malicious ad banners.

Since removing Java completely is not an option for us, make sure the Java plug-in is always disabled in every browser, even when you have updated Java on your machine.
Please re…

Linked contentRepeats

JavaScript basics tutorial: 33 Concepts Every JavaScript Developer Should Know

This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis.

Table of Contents

  • Call Stack
  • Primitive Types
  • Value Types and Reference Types
  • Implicit, Explicit, Nominal, Structuring and Duck Typing
  • == vs === vs typeof
  • Function Scope, Block Scope and Lexical Scope
  • Expression vs Statement
  • IIFE, Modules and Namespaces
  • Message Queue and Event Loop
  • setTimeout, setInte…
Linked content

Angular 1: Analyze how many watchers are registered on the page

A nice bookmarklet to analyze how many watchers have been registered on the current page. Good for keeping an eye on watchers count while developing.

  • Use as a bookmarklet.
  • Works with Angular 1.x
  • Logs to the browser's console.
Linked contentRepeats

Native share dialog on mobile Chrome

Mobile Chrome (and the Safari Technology Preview) support the "web share API" which allow you to use the native share functionality of an Android phone. When clicking a share button using this API, the browser will automatically show all installed applications that support content sharing, such as Whatsapp, Facebook, Twitter, e-mail etc.

The API is extremely simple to use:

```javascript
if ( typeof(navigator.share) === 'function' ) {
let data = {
url: '', title: '', text: '', } ...

This website uses cookies to improve usability and analyze traffic.
Accept or learn more