arturparkhisenko

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

arturparkhisenko

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

---

Effective Engineer - Notes

• By Edmond Lau
• Highly Recommended 👍
• http://www.theeffectiveengineer.com/

What's an Effective Engineer?

arturparkhisenko

ffmpeg

Converting Audio into Different Formats / Sample Rates

Minimal example: transcode from MP3 to WMA:
ffmpeg -i input.mp3 output.wma

You can get the list of supported formats with:
ffmpeg -formats

You can get the list of installed codecs with:

arturparkhisenko

/**
 * We use this workaround to detect the Chromecast device generation.
 * Unfortunately the Cast Application Framework (CAF) does not have an API for that.
 *
 * cc-1: Chromecast 1st Gen.
 * cc-2: Chromecast 2nd Gen.
 * cc-3: Chromecast 3rd Gen.
 * cc-ultra: Chromecast Ultra
 * cc-builtin: Android TV with Chromecast built-in
 */

arturparkhisenko

Pure ESM package

The package linked to from here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

arturparkhisenko

FE vs BE

TL;DR enough of this kind of nonsense

---

I've been in the field for ~20 years and started as BE developer, and this is a reference for people thinking that because they are on the BE side, they're somehow entitled to:

• earn more money
• feel superior about FE developers
• joke about JavaScript or minimize the FE effort in any way

arturparkhisenko

arturparkhisenko

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

const fn1 = s => s.toLowerCase();
const fn2 = s => s.split('').reverse().join('');
const fn3 = s => s + '!'

const newFunc = pipe(fn1, fn2, fn3);
const result = newFunc('Time'); // emit!

arturparkhisenko

const curry = fn => (...args) => fn.bind(null, ...args);

const map = curry((fn, arr) => arr.map(fn));

const join = curry((str, arr) => arr.join(str));

const toLowerCase = str => str.toLowerCase();

const split = curry((splitOn, str) => str.split(splitOn));

arturparkhisenko

//trimmed down version of jack lawsons mediator

(function (root) {

    // We'll generate guids for class instances for easy referencing later on.
    // Subscriber instances will have an id that can be refernced for quick
    // lookups.
    function guidGenerator() {
        var S4 = function () {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);