Shot Tiles — 3 Rotating Variants

","

"," ","","

"," "," ARCH"," 04-03"," ON VISUAL DENSITY"," 08","

"," 05-10"," SHIPPING INCREMENTALLY"," 09"," 06-22"," THOUGHTS ON CRAFT"," 10","

"," 07-15"," DESIGN TOKENS AT SCALE"," 11"," LIVE"," 08-20"," BUILDING UI IN GPUI"," 12","

"," STATUS"," DATE"," TITLE"," ID","

","

"," 03-01"," PREVIOUS ENTRY"," 06"," 03-15"," DEPARTURE BOARD"," 07","

"," "," 2024-08-20","

A deep look at rendering framework behind Zed, exploring how handles retained-mode rendering and layout in a code editor. The provides a unique approach to that prioritizes performance.

","

Building UI in GPUI

"," DOC-12"," RESTRICTED","

","

A deep look at rendering framework behind Zed, exploring how handles retained-mode rendering and layout

","

"," 2025-03-15","

Tab protrusion and paper lines with visual treatment

","

Redacted Dossier

"," DOC-07","

"," "," 2024-08-20"," 12","

"," A deep look at the rendering framework behind Zed"," BUILDING UI IN GPUI","

","

"," 2025-03-15"," 07"," GPUI","

"," ","

Slab Monument, Redacted Dossier, Departure Board

","

Post Tiles — Typographic Focus

"," ","

",305,265,[284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548],{"_206":207,"_208":554},{"_206":207,"_208":552},{"_206":207,"_208":212},{"_206":34,"_208":551},{"_206":34,"_208":708},{"_206":34,"_208":549},{"_206":34,"_208":212},{"_206":34,"_208":707},{"_206":34,"_208":706},{"_206":34,"_208":626},{"_206":34,"_208":593},{"_206":34,"_208":705},{"_206":34,"_208":669},{"_206":34,"_208":619},{"_206":34,"_208":704},{"_206":34,"_208":703},{"_206":34,"_208":552},{"_206":34,"_208":702},{"_206":34,"_208":653},{"_206":34,"_208":701},{"_206":34,"_208":700},{"_206":34,"_208":699},{"_206":34,"_208":698},{"_206":34,"_208":598},{"_206":34,"_208":596},{"_206":34,"_208":697},{"_206":34,"_208":593},{"_206":34,"_208":626},{"_206":34,"_208":553},{"_206":34,"_208":552},{"_206":34,"_208":696},{"_206":34,"_208":695},{"_206":34,"_208":552},{"_206":34,"_208":694},{"_206":34,"_208":693},{"_206":34,"_208":552},{"_206":34,"_208":692},{"_206":34,"_208":563},{"_206":34,"_208":691},{"_206":34,"_208":690},{"_206":34,"_208":686},{"_206":34,"_208":571},{"_206":34,"_208":570},{"_206":34,"_208":689},{"_206":34,"_208":685},{"_206":34,"_208":552},{"_206":34,"_208":688},{"_206":34,"_208":563},{"_206":34,"_208":687},{"_206":34,"_208":686},{"_206":34,"_208":576},{"_206":34,"_208":685},{"_206":34,"_208":552},{"_206":34,"_208":684},{"_206":34,"_208":679},{"_206":34,"_208":601},{"_206":34,"_208":683},{"_206":34,"_208":651},{"_206":34,"_208":682},{"_206":34,"_208":567},{"_206":34,"_208":681},{"_206":34,"_208":552},{"_206":34,"_208":680},{"_206":34,"_208":679},{"_206":34,"_208":601},{"_206":34,"_208":571},{"_206":34,"_208":570},{"_206":34,"_208":678},{"_206":34,"_208":552},{"_206":34,"_208":677},{"_206":34,"_208":676},{"_206":34,"_208":564},{"_206":34,"_208":563},{"_206":34,"_208":675},{"_206":34,"_208":674},{"_206":34,"_208":560},{"_206":34,"_208":673},{"_206":34,"_208":556},{"_206":34,"_208":555},{"_206":34,"_208":554},{"_206":34,"_208":552},{"_206":34,"_208":212},{"_206":34,"_208":672},{"_206":34,"_208":671},{"_206":34,"_208":626},{"_206":34,"_208":593},{"_206":34,"_208":670},{"_206":34,"_208":669},{"_206":34,"_208":619},{"_206":34,"_208":624},{"_206":34,"_208":668},{"_206":34,"_208":667},{"_206":34,"_208":666},{"_206":34,"_208":665},{"_206":34,"_208":664},{"_206":34,"_208":663},{"_206":34,"_208":554},{"_206":34,"_208":552},{"_206":34,"_208":662},{"_206":34,"_208":619},{"_206":34,"_208":661},{"_206":34,"_208":660},{"_206":34,"_208":552},{"_206":34,"_208":659},{"_206":34,"_208":601},{"_206":34,"_208":571},{"_206":34,"_208":598},{"_206":34,"_208":658},{"_206":34,"_208":567},{"_206":34,"_208":657},{"_206":34,"_208":656},{"_206":34,"_208":552},{"_206":34,"_208":655},{"_206":34,"_208":601},{"_206":34,"_208":571},{"_206":34,"_208":570},{"_206":34,"_208":552},{"_206":34,"_208":654},{"_206":34,"_208":653},{"_206":34,"_208":652},{"_206":34,"_208":651},{"_206":34,"_208":598},{"_206":34,"_208":650},{"_206":34,"_208":649},{"_206":34,"_208":596},{"_206":34,"_208":648},{"_206":34,"_208":552},{"_206":34,"_208":647},{"_206":34,"_208":571},{"_206":34,"_208":646},{"_206":34,"_208":570},{"_206":34,"_208":580},{"_206":34,"_208":552},{"_206":34,"_208":645},{"_206":34,"_208":644},{"_206":34,"_208":643},{"_206":34,"_208":642},{"_206":34,"_208":641},{"_206":34,"_208":640},{"_206":34,"_208":639},{"_206":34,"_208":638},{"_206":34,"_208":637},{"_206":34,"_208":552},{"_206":34,"_208":636},{"_206":34,"_208":601},{"_206":34,"_208":571},{"_206":34,"_208":570},{"_206":34,"_208":635},{"_206":34,"_208":552},{"_206":34,"_208":634},{"_206":34,"_208":633},{"_206":34,"_208":564},{"_206":34,"_208":563},{"_206":34,"_208":632},{"_206":34,"_208":631},{"_206":34,"_208":630},{"_206":34,"_208":629},{"_206":34,"_208":552},{"_206":34,"_208":212},{"_206":34,"_208":628},{"_206":34,"_208":627},{"_206":34,"_208":626},{"_206":34,"_208":593},{"_206":34,"_208":625},{"_206":34,"_208":617},{"_206":34,"_208":619},{"_206":34,"_208":624},{"_206":34,"_208":623},{"_206":34,"_208":622},{"_206":34,"_208":621},{"_206":34,"_208":552},{"_206":34,"_208":620},{"_206":34,"_208":619},{"_206":34,"_208":618},{"_206":34,"_208":617},{"_206":34,"_208":616},{"_206":34,"_208":573},{"_206":34,"_208":552},{"_206":34,"_208":615},{"_206":34,"_208":614},{"_206":34,"_208":613},{"_206":34,"_208":552},{"_206":34,"_208":612},{"_206":34,"_208":611},{"_206":34,"_208":610},{"_206":34,"_208":609},{"_206":34,"_208":608},{"_206":34,"_208":552},{"_206":34,"_208":607},{"_206":34,"_208":606},{"_206":34,"_208":552},{"_206":34,"_208":605},{"_206":34,"_208":567},{"_206":34,"_208":552},{"_206":34,"_208":604},{"_206":34,"_208":603},{"_206":34,"_208":552},{"_206":34,"_208":602},{"_206":34,"_208":601},{"_206":34,"_208":600},{"_206":34,"_208":599},{"_206":34,"_208":598},{"_206":34,"_208":597},{"_206":34,"_208":596},{"_206":34,"_208":595},{"_206":34,"_208":594},{"_206":34,"_208":593},{"_206":34,"_208":592},{"_206":34,"_208":591},{"_206":34,"_208":590},{"_206":34,"_208":589},{"_206":34,"_208":588},{"_206":34,"_208":587},{"_206":34,"_208":586},{"_206":34,"_208":585},{"_206":34,"_208":554},{"_206":34,"_208":552},{"_206":34,"_208":584},{"_206":34,"_208":583},{"_206":34,"_208":573},{"_206":34,"_208":572},{"_206":34,"_208":570},{"_206":34,"_208":582},{"_206":34,"_208":552},{"_206":34,"_208":581},{"_206":34,"_208":580},{"_206":34,"_208":579},{"_206":34,"_208":552},{"_206":34,"_208":578},{"_206":34,"_208":577},{"_206":34,"_208":573},{"_206":34,"_208":576},{"_206":34,"_208":570},{"_206":34,"_208":569},{"_206":34,"_208":552},{"_206":34,"_208":575},{"_206":34,"_208":574},{"_206":34,"_208":573},{"_206":34,"_208":572},{"_206":34,"_208":571},{"_206":34,"_208":570},{"_206":34,"_208":569},{"_206":34,"_208":552},{"_206":34,"_208":568},{"_206":34,"_208":567},{"_206":34,"_208":552},{"_206":34,"_208":566},{"_206":34,"_208":565},{"_206":34,"_208":564},{"_206":34,"_208":563},{"_206":34,"_208":562},{"_206":34,"_208":561},{"_206":34,"_208":560},{"_206":34,"_208":559},{"_206":34,"_208":558},{"_206":34,"_208":557},{"_206":34,"_208":556},{"_206":34,"_208":555},{"_206":34,"_208":554},{"_206":34,"_208":553},{"_206":34,"_208":552},{"_206":34,"_208":212},{"_206":207,"_208":551},{"_206":207,"_208":550},{"_206":207,"_208":549}," ======================================== */"," SHOTS — 3 variants that rotate"," /* ========================================"," }"," z-index: 1;"," );"," transparent"," color-mix(in oklch, var(--accent) 30%, transparent) 70%,"," color-mix(in oklch, var(--accent) 50%, transparent) 50%,"," color-mix(in oklch, var(--accent) 30%, transparent) 30%,"," transparent,"," background: linear-gradient(90deg,"," height: 1px;"," top: 0; left: 10%; right: 10%;"," position: absolute;"," content: '';"," .p7-board::after {"," /* Ambient glow at top */"," color: var(--accent);"," .p7-live {"," border-left: 1px solid #1e2028;"," color: var(--fg-2);"," font-size: var(--fs-s);"," text-align: center;"," flex-shrink: 0;"," width: 48px;"," .p7-col-status {"," text-align: right;"," width: 52px;"," .p7-col-time {"," min-width: 0;"," flex: 1;"," .p7-col-dest {"," border-right: 1px solid #1e2028;"," width: 36px;"," .p7-col-id {"," transparent 52%"," rgba(0,0,0,0.15) 52%,"," rgba(0,0,0,0.15) 48%,"," transparent 48%,"," 180deg,"," background: linear-gradient("," /* Split-flap cell look */"," text-overflow: ellipsis;"," overflow: hidden;"," white-space: nowrap;"," padding: 8px;"," color: var(--fg);"," letter-spacing: 0.06em;"," text-transform: uppercase;"," font-weight: 600;"," font-size: var(--fs);"," font-family: var(--mono);"," .p7-col {"," opacity: 0.4;"," .p7-row-dim {"," .p7-row-active .p7-col-dest {"," background: #181b22;"," .p7-row-active {"," padding: 5px 8px;"," letter-spacing: 0.15em;"," color: #4a5068;"," font-size: 9px;"," .p7-row-head .p7-col {"," border-bottom: 2px solid #2a2d35;"," background: #1a1d25;"," .p7-row-head {"," border-bottom: 1px solid #1e2028;"," padding: 0;"," align-items: center;"," display: flex;"," .p7-row {"," border-radius: 3px;"," clip-path: none;"," border: 2px solid #2a2d35;"," flex-direction: column;"," background: #111318;"," position: relative;"," .p7-board {"," /* --- P7: Departure Board — split-flap arrivals aesthetic --- */"," background: color-mix(in oklch, #c44 40%, transparent);"," width: 1px;"," left: 28px;"," top: 0; bottom: 0;"," .p6-redacted::before {"," /* Red margin line on left */"," margin-top: auto;"," .p6-date {"," margin: 0 1px;"," border-radius: 1px;"," opacity: 0.85;"," background: var(--fg);"," vertical-align: text-bottom;"," height: 1.1em;"," width: 4em;"," display: inline-block;"," .p6-bar {"," line-height: 1.7;"," .p6-body {"," margin-top: var(--sp);"," line-height: 1.2;"," letter-spacing: 0.02em;"," font-weight: 700;"," font-size: var(--fs-l);"," font-family: var(--font);"," .p6-title {"," .p6-ref {"," padding: 1px 6px;"," border: 1px solid var(--accent);"," letter-spacing: 0.2em;"," .p6-class {"," align-items: baseline;"," justify-content: space-between;"," .p6-head {"," color-mix(in oklch, var(--fg-2) 6%, transparent) 22px"," color-mix(in oklch, var(--fg-2) 6%, transparent) 21px,"," 0deg, transparent, transparent 21px,"," background-image: repeating-linear-gradient("," /* Faint ruled lines */"," gap: var(--sp);"," padding: var(--sp-3);"," background: var(--surface);"," .p6-redacted {"," /* --- P6: Redacted Dossier — clean type + censorship bars --- */"," var(--accent),"," height: 3px;"," bottom: 0; left: 0; right: 0;"," .p5-slab::after {"," /* Ghost underline — large type casts a shadow */"," margin-top: 2px;"," display: block;"," .p5-date {"," opacity: 0.3;"," line-height: 1;"," font-size: 32px;"," .p5-num {"," z-index: 2;"," right: var(--sp-3);"," top: var(--sp-2);"," .p5-corner {"," line-height: var(--lh);"," left: var(--sp-3);"," bottom: 36px;"," .p5-sub {"," font-size: 72px;"," .demo-tall .p5-title {"," font-size: 56px;"," .demo-w .p5-title {"," word-break: break-all;"," letter-spacing: -0.03em;"," line-height: 0.85;"," font-weight: 800;"," font-size: 64px;"," .p5-title {"," border-left: 3px solid var(--accent);"," align-items: flex-end;"," background: var(--surface-2);"," .p5-slab {"," /* --- P5: Slab Monument — title fills the tile --- */"," TYPOGRAPHIC POSTS","oid","30517e4","mode","100644","4e3b5e8","parents",[20],"author",{"_728":729,"_730":731,"_735":736},"committer",{"_728":729,"_730":731,"_735":736},"message","wip: add 3 typographic post tile designs to demo\n\n- Slab Monument: giant condensed title fills the tile, accent left bar\n- Redacted Dossier: ruled paper, classification badge, inline censorship bars\n- Departure Board: split-flap arrivals aesthetic, tabular rows, ambient glow","signature","subject","wip: add 3 typographic post tile designs to demo","authors",[727],{"_728":729,"_730":731,"_732":729,"_733":734},"name","iamnbutler","email","iamnbutler@github.com","login","avatarUrl","https://avatars.githubusercontent.com/u/1714999?v=4","time",1770440664,"documentNavigation","repo","iamnbutler/iamnbutler.github.io","repoId","077a62f3-be49-4ad9-923b-62e0436d739f","ownerId","user:1714999","site","nexthub","private","admin","settings","maintainer","triage","starred","stars","watchers",1,"watching","pinned","notify","views",[877,878,879,880,881,882,883,884,885,886,887,888,889],"navigation",{"_758":759,"_837":838,"_839":840,"_841":842,"_843":844,"_845":846,"_206":847},"sources",[],"viewer","meta",{"_831":832,"_833":729,"_834":212,"_746":26,"_835":799,"_836":26,"_752":37,"_753":754},"branches",[775,776,777,778,779,780,781,782,783,784,785,786,787,788,789,790,791,792,793,794,795,796,797,798,799,800,801,802,803,804,805,806,807,808,809,810,811,812,813,814,815,816,817,818,819,820,821,822,823,824,825,826,827,828,829,830],"tags",[773,774],"cloneUrl","https://git.nexthub.sh/iamnbutler/iamnbutler.github.io.git","v18.0.0","v19.0.0","14-2","2017.3","add-gpui-extended-context-post","add-post-tags","backblaze-assets","dependabot/npm_and_yarn/defu-6.1.6","dependabot/npm_and_yarn/devalue-5.8.1","dependabot/npm_and_yarn/h3-1.15.10","dependabot/npm_and_yarn/multi-04ca55b44c","dependabot/npm_and_yarn/picomatch-2.3.2","dependabot/npm_and_yarn/postcss-8.5.14","dependabot/npm_and_yarn/rollup-4.59.0","dependabot/npm_and_yarn/smol-toml-1.6.1","dependabot/npm_and_yarn/svelte-5.55.7","dependabot/npm_and_yarn/svgo-4.0.1","dependabot/npm_and_yarn/vite-6.4.2","fix-backblaze-integration","fix-backblaze-issue-take2","glfs-test","global-tags","gpui-ui-post","import-and-sort","integrate-data-repo","lists","main","mellow-fjord/site-reliability-cleanup","nate-journal","revert-34-fix-backblaze-integration","tiny-search-2","unified-feed","update-nuxt","v-11","v-12","v-13","v-14","v-15","v-16","v-18","v-19","v-20","v-21","v-3","v-4","v11-newsprint","v14-1","v14-effect","v18","v19/add-mh-2","v21","v23","v5-04-21-06","v5-static","v8","v8_js","v9","v9-2020-eleventy","description","Personal Site","owner","section","head","empty","pins",[860,861,862],"documents",{"_857":858,"_859":37},"code",{"_853":854,"_855":856},"automations",{"_850":851,"_852":-5},"delivery",{"_848":37,"_849":-5},"ckQnXds0_OG2x4LL3veMKJ2xpXN","releases","applications","workflows",2,"deployments","commits",822,"changes",11,"counts",{},"total",{"_863":855,"_728":875,"_28":855,"_866":876,"_756":868,"_869":26,"_870":868,"_871":856},{"_863":872,"_728":873,"_28":872,"_866":874,"_756":868,"_869":26,"_870":868,"_871":37},{"_863":864,"_728":865,"_28":864,"_866":867,"_756":868,"_869":26,"_870":868,"_871":37},"id","issues","Issues","filters",{},true,"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_863":855,"_728":875,"_28":855,"_866":920,"_756":868,"_869":26,"_870":868},{"_863":872,"_728":873,"_28":872,"_866":919,"_756":868,"_869":26,"_870":868},{"_863":864,"_728":865,"_28":864,"_866":918,"_756":868,"_869":26,"_870":868},{"_863":915,"_728":916,"_28":915,"_866":917,"_756":26,"_869":26,"_870":868},{"_863":912,"_728":913,"_28":912,"_866":914,"_756":26,"_869":26,"_870":868},{"_863":850,"_728":910,"_28":843,"_866":911,"_756":26,"_869":26,"_870":868},{"_863":852,"_728":907,"_28":908,"_866":909,"_756":26,"_869":26,"_870":868},{"_863":848,"_728":905,"_28":848,"_866":906,"_756":26,"_869":26,"_870":868},{"_863":901,"_728":902,"_28":903,"_866":904,"_756":26,"_869":26,"_870":868},{"_863":839,"_728":899,"_28":839,"_866":900,"_756":26,"_869":26,"_870":26},{"_863":896,"_728":897,"_28":896,"_866":898,"_756":26,"_869":26,"_870":26},{"_863":893,"_728":894,"_28":893,"_866":895,"_756":26,"_869":26,"_870":26},{"_863":890,"_728":891,"_28":890,"_866":892,"_756":26,"_869":26,"_870":26},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794434517309,"sidebar","expanded"]