JiLiZART

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

JiLiZART

Принципы разработки Амплифера

Тут перечислены не законы, последние слово всегда за здравым смыслом. Тут перечислены лишь направление, куда надо стремиться. Принципы, которые должны помочь, когда не знаешь, что выбрать.

Ценности

1. Пользователь. Если что-то сильно мешает UX или есть критическая ошибка, то в первую очередь мы спасаем пользователей. Для этого иногда надо взять ответственность на себя, переубедить толпу, написать плохой код.

JiLiZART

console.log(1);
(_ => console.log(2))();
eval('console.log(3);');
console.log.call(null, 4);
console.log.apply(null, [5]);
new Function('console.log(6)')();
Reflect.apply(console.log, null, [7])
Reflect.construct(function(){console.log(8)}, []);
Function.prototype.apply.call(console.log, null, [9]);
Function.prototype.call.call(console.log, null, 10);

JiLiZART

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:

(function(x, f = () => x) {

JiLiZART

Commit Message Conventions

These rules are adopted from the AngularJS commit conventions.

• Goals
• Generating CHANGELOG.md
  • Recognizing unimportant commits
  • Provide more information when browsing the history
• Format of the commit message
• Subject line

JiLiZART

var enbBemTechs = require('enb-bem-techs'),
    borschikTech = require('enb-borschik/techs/borschik'),
    fs = require('fs'),
    path = require('path'),
    techs = enbBemTechs,
    provide = require('enb/techs/file-provider');
    // php
//  process.env.YENV = 'production';
    enbBhPhp = require('enb-bh-php');
    //wpPhp    = require('./techs/wp-php.js');

JiLiZART

        ###
        # Retina images handler
        ###
        if ($http_cookie ~* "isRetina=1" ) {
                set $isRetina "retina";
        }

        location ~ ^/bundles/(.*)-retina\.png {
                try_files /bundles/$1-retina.png @retinaFallback;
        }

JiLiZART

Backend Development

• node.js
  • Installation paths: use one of these techniques to install node and npm without having to sudo.
  • Node.js HOWTO: Install Node+NPM as user (not root) under Unix OSes
  • Felix's Node.js Guide
  • Creating a REST API using Node.js, Express, and MongoDB
  • Node Cellar Sample Application with Backbone.js, Twitter Bootstrap, Node.js, Express, and MongoDB
  • JavaScript Event Loop
• Node.js for PHP programmers

JiLiZART

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---

JiLiZART

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

• All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

• 8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
• 3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
• 1 site has 2 viewport meta tags (with different values) in the source...