Marcelo Somers marcelosomers

Answering the Front-end developer JavaScript interview questions to the best of my ability.

Explain event delegation

Sometimes you need to delegate events to things.

Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

Explain how prototypal inheritance works.

CSS Pre-Processing

When it comes to languages that power the web, CSS is a double-edged sword. Often heralded for being quick to learn, like chess it takes awhile to master. Due to its simplicity, it is easy to get to a point where CSS files become unruly, mired by code repetition and lack of consistency.

Enter CSS pre-processors (and post-processors). Of all the CSS pre-processing approaches, Sass (Syntactically Awesome Style Sheets) is the clear front-runner.

http://sass-lang.com

Metaphorically, Sass is to CSS what jQuery is to JavaScript. Not only that, Sass gives CSS a seat at the table of first-class programming languages.

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

claude-code conversion optimization framework

Headline 4-U Formula: Useful, Unique, Urgent, Ultra-specific (88% won’t read past this)
Above-Fold Value Proposition: Customer problem focus, no company story, zero scroll required
CTA First-Person Psychology: “Get MY guide” vs “Get YOUR guide” (90% more clicks)
5-Field Form Maximum: Every field kills conversions, progressive profiling for the rest
Message Match Precision: Ad copy, landing page headline, broken promises = bounce
Social Proof Near CTAs: Testimonials with faces/names, results, placed at decision points
Cognitive Bias Stack: Loss aversion (fear), social proof (FOMO), anchoring (pricing)
PAS Copy Framework: Problem > Agitate > Solve, emotion before logic

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	// example Express server using the custom Fractal view engine
	const express = require('express');
	const path = require('path');
	const appRoot = path.normalize(path.join(__dirname, '..'));
	const app = express();
	const fractalEngine = require(path.join(appRoot, 'lib/fractal-engine'));
	const loadComponents = require(path.join(appRoot, 'middleware/load-components'));

	// register custom Fractal rendering engine
	app.engine('fractal', fractalEngine);