Marc Agbanchenou marcagba

On CSS-in-JS

Overview

This is not an argument for or against any particular library or solution for styling UI. Instead I’d like to bring a bit of context and nuance to the conversation in a way that doesn’t add to the ongoing flame war.

First-Gen CSS-in-JS Wins

There are some things Emotion and Styled Components do very well, especially considering the styling landscape when they was created.

Testing Pyramid

📹 Resources from the 'What is the Testing Pyramid even?' episode from Unmock's wtfuzz video series. 📹

History

📖 Succeeding With Agile by Mike Cohn
Where he described the testing pyramid and kick-started the hype.

📝 TestPyramid by Martin Fowler \

3. Clone Open Source Apps

You already know you should be making projects to learn things and potentially add to your portfolio. You've read your Malcolm Gladwell, you know that you need 10,000 hours of deliberate practice. Given you're just starting out, I have a slightly contentious suggestion for you: DON'T make anything new.

Your decision-making is a scarce resource. You start every day with a full tank, and as you make decisions through the day you gradually run low. We all know how good our late-late-night decisions are. Making a new app involves a thousand micro decisions - from what the app does, to how it should look, and everything in between. Decide now: Do you want to practice making technical decisions or product decisions?

Ok so you're coding. You know what involves making zero product decisions? Cloning things. Resist the urge to make your special snowflake (for now). Oh but then who would use yet another Hacker News clone? I've got news for you: No one was gonna use your thing anyway. You

	#!/bin/bash

	# Based off https://gist.github.com/wojtekmaj/6defa1f358daae28bd52b7b6dbeb7ab6 with a few fixes and
	# additions/removals including no git interactions

	join_by() {
	local d=${1-} f=${2-}
	if shift 2; then
	printf %s "$f" "${@/#/$d}"
	fi

	// resource route component
	import React from "react";
	import { PassThrough } from "node:stream"
	import fs from "node:fs"
	import {createReadableStreamFromReadable} from "@remix-run/node"
	import { defaultQuality,widths,mainImageReadStream,generatedImageReadstream, isThereImage,BadImageResponse } from "../../util/image.server"

	export const loader = async ({ request }) => {
	const url = new URL(request.url);
	const src = url.searchParams.get("src");

	#!/bin/bash

	# Ensure we're working on the latest version of the main branch
	git switch main
	git fetch
	git pull

	# Create a new branch
	git switch -c vitest

	import { createHash } from "crypto";
	import fs from "fs";
	import fsp from "fs/promises";
	import path from "path";
	import https from "https";
	import { PassThrough } from "stream";
	import type { Readable } from "stream";
	import type { LoaderFunction } from "remix";
	import sharp from "sharp";
	import type { Request as NodeRequest } from "@remix-run/node";

	import { useState, useLayoutEffect, useEffect } from 'react';

	// remove this once safari support ships
	function checkFlexGap() {
	// create flex container with row-gap set
	const flex = document.createElement('div');
	flex.style.display = 'flex';
	flex.style.flexDirection = 'column';
	flex.style.rowGap = '1px';

	var list = [];
	document.querySelectorAll("body *")
	.forEach(function(elem){
	if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){
	list.push(elem.outerHTML.split('>')[0] + '>');
	}
	});
	confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )

	// 'download-blob.js', inspired by this gist:
	// 'dreamyguy/downloadFile.js' https://gist.github.com/dreamyguy/6b4ab77d2f118adb8a63c4a03fba349d
	// I added some handler to make it works in Chrome, Safari, and Firefox on iOS

	const downloadBlob = (
	result,
	defaultFilename = 'content.dat',
	mime = 'application/octet-stream'
	) => {
	if (window && result && result.data) {