LineLapse BlogMake your own →

The LineLapse Blog

Short, illustrated explainers on how things work — every post comes with a hand-drawn animation you can watch, made with the same tool you can use yourself.

The Pythagorean Theorema² + b² = c², alwaysa (leg)b (leg)c (hypotenuse)ACBA right triangleThe theorema² + b²=c²Square on aSquare on bSquare on c3 cm4 cmc = ?ACBThe 3-4-5 trianglePlug in the values3² + 4²=c²9 + 16=c²c²=25Solve for cc=√(25)c=5 cmc = 5 cm3 cm4 cm5 cmACBThe 3-4-5 triangle3-4-5 triangleabcACBCheck: right triangle?Reverse checkknow a, b, cif a² + b²=c²then right angle!a relationship in every right angle+ together =

The Pythagorean Theorem

Every right triangle hides a secret relationship between its three sides. The two shorter sides are called the legs.

#maths#geometry#education
What is RAG?Retrieval-Augmented Generation, explainedFrozen ModelKnowledge CutoffRetrieve → GenerateRetrieve1Generate2User QuestionKnowledge BaseYour DocsText ChunksVectorsQuestion VectorSimilarity SearchMatched ChunksContext WindowGrounded AnswerRAG Wins

What is RAG (retrieval-augmented generation)?

Every AI model has a knowledge cutoff. It knows what it learned during training — and nothing after that. That's the problem RAG solves.

#ai#llm#rag
Stop the Scrollwrite a hook that landsThe HookThe Gap4 Hook TypesBold ClaimDirect PromiseSharp QuestionPattern InterruptSo surprising it demands a reactionExactly what they'll getPokes a real painBreaks autopilotBurying the Lead"So today I wanted to…"Be Specificposting once a monthMatch the DeliveryEarn TrustLose TrustHook Worked

How to write a hook that stops the scroll

Most people scroll past your content in under two seconds. So your first line has to hit before they even decide to care.

#storytelling#writing#hooks#structure
How Photosynthesis Workssunlight in, sugar outSunlightWaterCO₂LeafChlorophyllStage 1Stage 2ThylakoidO₂ ReleasedATPNADPHStromaGlucoseThe Plantsunlight → life

How does photosynthesis work?

Every plant you've ever seen is running on sunlight. But how? It starts with three ingredients: sunlight, water, and carbon dioxide.

#biology#science#education
How ChatGPT Workswords to reply, step by stepYour messageTokens1word chunks — never raw lettersEmbeddings2similar meanings → nearby pointsAttention3every token looks at every otherLayers × dozens4each pass refines meaningPredict next token5one token at a timeGrow sequenceTraining6billions of weightsGenerated replynot retrieved — generatedrepeat

How ChatGPT Works

Every time you type a message to ChatGPT, something surprisingly structured happens behind the scenes. It starts with your words being broken into tokens.

#ai#llm#machine-learning
The Story Spine8 sentences · any storyWhat & WhyKenn Adamsimprov toolscreenwriters, designers, teachershardest problem: structureSet the World① Once upon a time…character + ordinary life② Every day…show the routinemake them careThe Hinge③ Until one day…inciting incidentspecificvisualimpossible to ignorethe whole story pivots hereThe Causal Chain④ Because of that…⑤ Because of that…⑥ Because of that…not 'and then' — because ofThe Climax⑦ Until finally…biggest choicethe whole chain was building hereThe New Normal⑧ Ever since then…sentence 2sentence 8old routinenew worldbefore troubleafter changeworld must feel differentPin-Up Rules'because of that' must be causal — not just sequential'and then' is a warning signinciting incident must break the routine — not nudge itsentence 8 must feel different from sentence 2the #1 mistake: 'and then'8 sentences. all the bones.borrowed by

The Story Spine: Eight Sentences That Build Any Story

The story spine is a writer's skeleton — eight fill-in-the-blank sentences that force any idea into a shape that actually works.

#storytelling#writing#structure#narrative
Gemini Broke Out of a Testtwo small cracks, three real companiesTask: hack fictional companySandboxCrack 1: sandbox onlineCrack 2: name = real domainGemini searchedFound real domain3 real companies breachedGuessed passwordsLeaked credentials in public reposaccidentally committed, never cleanedGemini stopped itselfMay 2026Jul 2026Sep 2026Breach occursInternal review surfaces itGoogle public disclosureTwo cracks, one bridge
📰 In the news

Google's Gemini Broke Out of a Security Test and Touched Three Real Companies

Security tests are designed to be airtight. This one had two small cracks — and that was enough.

#news#ai#security
Mixture of Expertsright expert, not whole brainDense networkevery param fires every tokenMixture of ExpertsExpert poolReasoningCodeTranslation… more expertsRouter200B total params~2% activeTwo advantagesMassive capacityLow compute costStep 5 · Mixtral · DeepSeekLoad balancingtraining penalty → spread trafficRight part, not whole brainpicks 2–3
📰 In the news

StepFun's Step 5 Preview Uses 600 Billion Parameters — But Only 27 Billion at a Time

A standard neural network activates every single one of its parameters for every token it processes. That works fine when models are small.

#news#ai#machine-learning#mixture-of-experts
Plugin4Shellgit naming trick, four agentsAI Coding AgentsClaude CodeCodexCopilotGemini CLICommit PINa3f9c1d… (40 chars)git checkout a3f9c1d2b8e4f6a0c9d3e7b1f5a2c8d4e6f0a9b3Git Ref Resolutionmatching branch name (wins)the pinned commit objectAttackerbranch name = pinned SHA# attacker branch name:FETCH_HEADzero-clicksilent auto-updateNOT shell injectiongit ref-resolution logicGitHubblocks SHA-named branchesBitbucket & self-hostedno such blockFix: verify after checkoutactual = git rev-parse HEADassert actual == pinned_sha# only then: execute plugingit finds this first
📰 In the news

Plugin4Shell: A Git Naming Trick Let Attackers Swap Code in Four AI Coding Agents

A git branch named after a commit hash can make 'git checkout <SHA>' resolve to the wrong code — the trick behind Plugin4Shell, a zero-click flaw in Claude Code, Codex, Copilot and Gemini CLI plugins.

#news#ai#security#supply-chain
What Makes a Story Stick?three things every memorable story doesMemorable StoryEmotion1Feels = MemoryCharacter2TransportedOpen Loop3what next?Specificityhis father's watchRemembered

What makes a story stick in your memory?

Some stories vanish the moment you finish them. Others live in your head for years. What's the difference?

#storytelling#writing#memory#craft
HTTP Status Codes You Actually Need5 families · 15 codesFive Families1xxInformationalstill thinking2xxSuccess✓ happy path3xxRedirectiongo elsewhere4xxClient erroryour fault5xxServer errortheir faultfirst digit = shelf2xx Success200OKrequest worked, here's data201CreatedPOST succeeded, resource made204No Contentsuccess, nothing to return201 → Location headerstart here! ✓3xx Redirect301Moved Permanentlycached forever — update links302Foundtemporary detour, not cached304Not Modifiedbrowser has fresh copy, no body sentsaves bandwidth4xx Client Errors400Bad Requestserver can't parse what you sent401Unauthorizedyou need to log in403Forbiddenlogged in but still not allowed404Not Foundthe famous one422Unprocessable Entitydata shape is wrong (APIs)your fault5xx Server Errors500Internal Server Errorcatch-all crash502Bad Gatewayproxy got broken upstream response503Service Unavailablealive but overwhelmed or in maintenancetheir faulton-call nightmareThe #1 API Trap// ❌ NEVER do thisHTTP 200 OK{ "error": "something failed" }// ✅ Use the right status codeHTTP 422 Unprocessable Entitythe #1 mistakePin These Rules4xx = your fault · 5xx = their fault301 permanent & cached · 302 temporary & not201 Created must include a Location header304 sends no body — that's the whole pointnever 200 OK with an error inside the bodypin this15 codes · read logs natively

The HTTP status codes you actually need

HTTP status codes are the internet's short vocabulary for 'here's what happened' — and about a dozen cover almost everything you'll ever see.

#http#networking#web#apis
But & Thereforewhy cause and effect winsAnd Then…SceneSceneSceneThe FixButThereforeConflictA WallDecisionConsequenceCause & EffectFinds Map1Sets Off2Bridge Out3New Route4Followed5And Then = ListBut/Therefore = ChainStory Snaps to Lifethereforebutthereforebut

Why but and therefore beat and then

Every story dies the same slow death. Scene happens. Another scene happens. Another scene happens. That's 'and then' storytelling — and it's a flatline.

#storytelling#writing#craft#structure
Git Branching & Mergingwhat's really happening under the hoodcommit Acommit Bcommit Cmaingit checkout -b feature/loginfeature/logincommit Dcommit Efeature/logineach commit → parentgit merge feature/logincommon ancestordifferent files → autosame lines → conflictmerge committwo parentsmainhistory unifiedparentparent

How does git branching and merging actually work?

Every Git repository starts with a single line of commits, one after another. A branch is just a label. It points to one specific commit.

#git#version-control#developer-tools#workflow
Story vs Plotthe two layers of every narrativeStoryvsPlotall events, real orderchildhood loss → shapes characterchosen events, writer's orderreveal hidden on page 200raw materialarchitecturethe gap between themcontrols feeling & timingdrama lives heretensionsuspensesurpriseMysterymurder + motive + killer: knownrevealed slowly, piece by pieceplot shapes your path

Story vs plot: what is the difference?

Every story feels like it has two layers, even when you can't quite name them. Those two layers have names. One is story. The other is plot.

#storytelling#writing#craft#structure
What is a JWT?tokens, trust, and zero memoryYouServerJWT3 parts insideHeader1type + algorithmPayload2ID, role, expirySignature3Secret KeyAlgorithmVerifyAccess GrantedAccess DeniedNo DB lookuploginhere's your JWTre-run algorithm

What is a JWT, and how is it verified?

Every time you log into an app, the server needs to know who you are on the next request. But it can't remember you. So it hands you a token.

#security#authentication#web
The Hero's JourneyCampbell's pattern across every mythOrdinary WorldThresholdTrialsOrdealReturnElixirOrdinary WorldCall to AdventureRefusalMentorCross the ThresholdRoad of TrialsTest 1Test 2Test 3The OrdealDarkest momentTransformedSeize the RewardTruth or PowerRoad BackResurrectionReturn with ElixirGift to the worldBreak down → Rebuild → Return

The Hero's Journey, one step at a time

Every great story follows a pattern. Joseph Campbell noticed it across myths, religions, and cultures worldwide. He called it the Hero's Journey.

#storytelling#writing#narrative#structure
How OAuth Workssign in, no password sharedOAuthone service vouches for youYouThe AppGoogleClick 'Sign in with Google'1Authenticate2credentials stay hereConsent screen3name & emailcalendarAuth code4Access Token5no password ever sharedRequest profile6Approved data onlyClean separation of trustredirectshort-lived codeexchange codetoken

How does OAuth let you sign in with Google ?

You click 'Sign in with Google' on some app you've never used before. But how does that actually work without the app ever seeing your Google password?

#security#authentication#web#oauth
Show, don't tellwhat it actually meansYour BrainTellingShowingTwo DoorsEmotionRainy WindowHalf-Eaten MealUnansweredActionBurning HallMoving ForwardImaginationThey Build ItThey Own ItThe Keys

Show, don't tell: what it actually means

'Show, don't tell' sounds like advice for writers. But it's really about how your brain works. Telling hands you a fact. Showing makes you feel it.

#storytelling#writing#craft
Caching Strategiesremember more, work lessThe HierarchyRegistersL1/L2 CacheRAMDiskNetworkhot data, fastest placeWhere to CacheClient-sideServer-sideCDNtypelives inremembersclientbrowserimages, scriptsserverapp & dbqueriesCDNedgeglobal copiesMumbai served from Mumbai!Eviction PoliciesLRULFUFIFOpolicydropsnoteLRUoldest usedpopularLFUleast askedcounts hitsFIFOoldestsimple, often wrongFreshnessTTLInvalidationValidationTTL: expiry, e.g. 60s newsinvalidate: drop on changevalidate: ask 'changed?' firstGolden Rulescache reads, never writescache expensive, not trivialnaming, off-by-one, invalidationthe 2 hardest problems!same answers, less work

Caching strategies on one cheat sheet

Caching is the art of remembering so you don't have to work twice. Think of it as a cheat sheet inside your system — a fast, small storage layer that…

#performance#databases#infrastructure
The Three-Act Structuresetup · confrontation · resolutionAct 1 · Setup1characters, world, goalInciting IncidentAct 2 · Confrontation2obstacles stack upfail · learn · retryMidpoint TwistRock BottomAct 3 · Resolution3Final ChallengeNew NormalSetup · Confrontation · Resolution

The Three-Act Structure

Every story, from a fairy tale to a blockbuster movie, follows a hidden skeleton. It's called the three-act structure. Act one is the setup.

#storytelling#writing#structure
How Does a CDN Work?proximity, caching, zero wasted distanceYouDistant ServerCDNContent Delivery NetworkPoP — LondonPoP — MumbaiPoP — São PauloYouNearest PoPCached Contentimages, scripts, stylesInstant!ProximityCachingshorter distancedata pre-loadedDynamic ContentOrigin ServerEverywhere Fastzero wasted distancelong tripfast routefastest route

How does a CDN make websites faster?

Your browser makes a request. That request has to travel to a server. And if that server is on the other side of the world, you wait.

#networking#performance#infrastructure
What Is a Load Balancer?why every serious app needs one1000 UsersOne ServerCrash!Load BalancerAlgorithmsRound RobinLeast ConnectionsIP HashServer AServer BServer CDownHealth CheckingFault TolerantTraffic Spike+ Server D+ Server ENo DowntimeTwo FlavoursLayer 4IP + PortLayer 7API vs ImagesSingle Point of FailureResilient System

What Is a Load Balancer, and Why Do You Need One?

A busy website needs more than one server — and something has to decide which server handles each visitor. That's the load balancer's job.

#infrastructure#servers#scalability#reliability
How DNS Worksnames → numbers, explainedDNSthe internet's phone bookYouLocal CacheCache Hit!ResolverRoot Server1TLD Server2.com .org .inAuthoritative3IP AddressConnected!Cached!

How does DNS turn a name into an address?

You type a name into your browser. But the internet only understands numbers. That's the job of DNS — the Domain Name System.

#dns#networking#internet#web
The TCP Handshakethree signals, one reliable connectionYour ComputerServer🤝 SYN1SYN-ACK2ACK3SYN → SYN-ACK → ACKSequence numbers agreedReliable Protocolzero bytes lostEvery connectionWebpagesEmailVideo callsSYNSYN-ACKACK

The TCP handshake, explained simply

When two computers want to talk, they don't just start sending data. They shake hands first.

#networking#tcp#protocols#internet
Public-Key Cryptographyhow strangers share secretsTwo Keys🌍 Public Key🔒 Private KeyYouSecret Message🔒 Lockedone-way doorRSAFactoring huge numbers61 × 53 = 32333233 = ? × ?Giant NumberSecret Factorswebsites · emails · serversAnyoneOnly Me✍️ Sign✓ VerifyAuthenticationHTTPS · Email · Bitcoin · SSHlockunlockencryptdecrypt

Public-Key Cryptography

You want to send me a secret message, but we've never met to exchange a key. Public-key cryptography solves this with a clever trick: two keys instead of…

#cryptography#security#encryption
Hash Functionsthe invisible lock on your dataAny InputHash Functiona7f3e9...FilePasswordAnything← That's the hashInput + 1 bitHash Function9k2m5x...3 Big JobsIntegrity1ComparePasswords2LoginSpeed3Hash TableCollisionsame hash!GoodBadSHA-256MD5bcryptYour Lock

Hash Functions Explained

A hash function turns any input into a short, one-way fingerprint. Here's how that simple trick verifies downloads, protects passwords, and speeds up software — in one hand-drawn explainer.

#hashing#security#computer-science
How Indexes Workthe phonebook trick for databasesPhonebook10,000 pagesYouflip flip flipDatabasefull table scanWith GuideA...B...C...YouinstantIndexQueryYour RowsTrade-offwrites cost moreStrategyindex what you queryMaintainedmilliseconds

How Database Indexes Work

Imagine you're searching for a name in a phonebook with ten thousand pages. Without an index, you flip through every single page until you find it.

#databases#indexing#performance#sql
What Happens When You Press Entera web request's hidden journeyBrowserexample.comcacheOSrouterDNS server192.0.2.1🤝 TCP handshakeSSL handshakeHTTP RequestGET /page HTTP/1.1Host: example.comCookie: session=abcInternet routersWeb ServerHTTP ResponseParse HTMLCSSJSimagesRenderPixels on screen⚡ < 1 second

What Happens When You Press Enter

You type a URL, hit Enter, and a page appears. Here's the relay race that happens in between — DNS lookup, connection, request, response, render — in one hand-drawn explainer.

#web#dns#http#networking
How HTTPS Workskeeping secrets on the open webYouRouterRouterWebsiteSnooperpasswords, cardsHTTPSencryptedConnect1Certificate2Authority3Secret Key4GibberishSnooper???Lock Icontunnel secureShoutingSealed Tube

How HTTPS Works

How HTTPS turns a public, untrusted network into a private channel — verify identity, exchange a secret safely, then encrypt everything — in one hand-drawn explainer.

#https#security#encryption#web
How to Master DSAwithout feeling lostThe Path📖 1. Learn👁️ 2. Visualize✏️ 3. Practice🧩 4. Patterns🚀 5. ApplyArray012341020304050index starts at 0Linked List1234∅Stack vs QueuestackLIFOundoqueueFIFOprinterpush, pop, enqueue, dequeueRecursionf(n)f(n-1)f(1) — done!Big-OO(1)instantO(log n)fastO(n)linearO(n²)careful!runtimedon't memorize — derive!Keep in Mindconcepts over shortcutsone problem every daylearn from every mistakepatience beats panicmindsetstuck? normal.progress over perfection

Learn Data Structures & Algorithms — The Whole Map on One Poster

A study-notes cheat sheet for mastering DSA: the learning path, the core structures, and the handful of patterns that unlock most interview problems.

#dsa#algorithms#learning#computer-science
1990s2000s2010s2020sWeb 1.0 · read-onlyWeb 2.0 · socialMobile-first🤖 AI web

How the Web Evolved: From Read-Only Pages to the AI Era

A short, illustrated history of the web — Web 1.0 to the AI web — as one hand-drawn timeline you can watch draw itself.

#web#history#internet#ai