Hi Zach :D
Modals are funny beasts, usually they are a design cop-out, but that's okay, designers have to make trade-offs too, give 'em a break.
First things first, I'm not sure there is such thing as a "simple" modal that is production ready. Certainly there have been times in my career I tossed out other people's "overly complex solutions" because I simply didn't understand the scope of the problem, and I have always loved it when people who have a branch of experience that I don't take the time
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
| // '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) { |
📹 Resources from the 'What is the Testing Pyramid even?' episode from Unmock's wtfuzz video series. 📹
📖 Succeeding With Agile by Mike Cohn
Where he described the testing pyramid and kick-started the hype.
📝 TestPyramid by Martin Fowler \
| 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") ) |
| 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'; |
| 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"; |
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.
There are some things Emotion and Styled Components do very well, especially considering the styling landscape when they was created.
| #!/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 |