View

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…

Repeats

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 contentAuto-destruct in 11 days

Updated: CSS: Match against attribute values (or parts of them)

Added "matching beginning of a class name" hint:

Note that matching a class is not as straight-forward, since the class attribute usually contains several white-space separated values. To match the beginning of a class properly, use this combined selector: [class^="bar"], [class*=" bar"]. It matches bar either at "beginning of attribute" or "preceded by white space".

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: '', } ...

Linked contentRepeats

CSS: Matching against attributes and their values (or parts of them)

You probably know that you can use CSS selectors to match against elements and their attributes, such as:

a[title] { /* any <a> that has a "title" */ }
a[data-fancy="true"] { /* any <a> that has their "data-fancy" attribute set to "true" */ }

But there is more: You do not need to match against "full" attribute values but can match against parts of them.

They work in all somewhat modern browsers, and IE9 or later.

Exact match (CSS2)
[foo="bar"] (matches <div foo="bar" />, but not `<div…

How to: Run geordi in a single proccess with parallel test setup

Geordi uses parallel_tests if available for running the test suite. To debug an application it is very unhandy to have multiple processes as your terminal I/O will not work as expected once a breakpoint is hit.

Even parallel_tests support an option to enable a single process run, it is not possible to pass this option through geordi. But you can set the number of processes via ENV variable manually:

```
PARALLEL_TEST_PROCESSORS=1 bundle exec geordi cucu…

Linked contentAuto-destruct in 1 day

Updated: Minor caveat for minified Font Awesome fonts with webpack

I noticed that changing the subset of used icons does not change the file name of the generate font, and will cause issues with browser caching.

I've added a workaround.

Repeats

How to create memory leaks in jQuery

jQuery doesn't store information about event listeners and data values with the element itself. This information is instead stored in the global $.cache object. Every time you add an event listener or data value to a jQuery object, $.cache gains another entry.

The only way that a $.cache entry gets deleted is when you call remove() on the element that put it there!

Since cache entries also have a pointer back to the element that spawned them, it is easy to create DOM elements that can never be garbage-collected.

Below are …

Unpoly 0.57.0 released: New params API, compiler improvements and scrolling fixes

This is a major rewrite with many bugfixes, performance improvements and some minor breaking API changes.

Request parameters

To prevent confusion with [up-data], Unpoly now uses the word "params" when talking about form values or request parameters:

  • up.request() option { data } has been renamed to { params }.
  • up.replace() option { data } has been renamed to { params }.

Parameters may be passed in one of the following type…

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