<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: ArthurJ</title>
    <description>The latest articles on DEV Community by ArthurJ (@arthurbiensur).</description>
    <link>https://dev.to/arthurbiensur</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F262769%2Ff05874d6-3627-453a-80f4-5647c90dae35.jpeg</url>
      <title>DEV Community: ArthurJ</title>
      <link>https://dev.to/arthurbiensur</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/arthurbiensur"/>
    <language>en</language>
    <item>
      <title>AI‑Assisted Writing as Search (Not Draft Generation)</title>
      <dc:creator>ArthurJ</dc:creator>
      <pubDate>Sun, 14 Dec 2025 06:41:17 +0000</pubDate>
      <link>https://dev.to/arthurbiensur/ai-assisted-writing-as-search-not-draft-generation-4io8</link>
      <guid>https://dev.to/arthurbiensur/ai-assisted-writing-as-search-not-draft-generation-4io8</guid>
      <description>&lt;p&gt;I have a steady stream of ideas I genuinely want to explore.&lt;/p&gt;

&lt;p&gt;And yet most of them die in the same place: a few bullet points in a notebook, or an outline in a repo.&lt;/p&gt;

&lt;p&gt;In my case it literally looks like files named things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;projects/personal/ideas/2025-12-10-blog-post-second-brain-experience.md&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;projects/personal/ideas/2025-12-13-ai-writing-process.md&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;They weren’t nothing. They were real attempts.&lt;/p&gt;

&lt;p&gt;But they rarely turned into something I could publish.&lt;/p&gt;

&lt;p&gt;Not because I had nothing to say but writing (for me) had become a fragile, synchronous activity:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I need long, uninterrupted time to polish.&lt;/li&gt;
&lt;li&gt;I need peers to push back in real time.&lt;/li&gt;
&lt;li&gt;I need enough confidence in English (and honestly, even in French) to feel the result was “worth reading.”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Those conditions don’t reliably exist in my life.&lt;/p&gt;

&lt;p&gt;I’m a founder with a family. Time comes in fragments. I also don’t live in a dense tech ecosystem where you get daily, high‑signal pushback by osmosis. So ideas would keep looping in my head… and I’d keep not shipping.&lt;/p&gt;

&lt;p&gt;This post is the workflow I built to fix that.&lt;/p&gt;

&lt;p&gt;It’s opinionated, but not performatively confident. And it has a simple thesis:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;One useful way to think about writing is as a search problem.&lt;/p&gt;

&lt;p&gt;AI is useful when it helps you explore the search space (multiple framings, objections, structures) &lt;em&gt;before&lt;/em&gt; you commit.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Promise (under my constraints):&lt;/strong&gt; when time is fragmented and I don’t have editorial peers on tap, this workflow reliably turns “looping idea noise” into a draft I’d actually be willing to share. It does this by expanding options first, then forcing precision before polishing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Who this is for:&lt;/strong&gt; people with ideas, limited uninterrupted time, and limited high‑signal pushback.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Who this is not for:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you already have strong editorial peers and deep uninterrupted time.&lt;/li&gt;
&lt;li&gt;If your main goal is “prettier prose” or a polished AI voice.&lt;/li&gt;
&lt;li&gt;If your goal is SEO/marketing outcomes.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  A quick epistemic note
&lt;/h2&gt;

&lt;p&gt;I try to label important statements as &lt;strong&gt;experience&lt;/strong&gt;, &lt;strong&gt;opinion&lt;/strong&gt;, &lt;strong&gt;assumption&lt;/strong&gt;, or &lt;strong&gt;verified&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;In this post, most claims are &lt;strong&gt;experience&lt;/strong&gt; or &lt;strong&gt;opinion&lt;/strong&gt;. When I say “this works,” I mean “this works for me under my constraints,” not “this is a universal method.” (Full taxonomy in Appendix A.)&lt;/p&gt;

&lt;h2&gt;
  
  
  The real failure mode: committing too early
&lt;/h2&gt;

&lt;p&gt;If you’re busy and you have ideas, the default “one‑draft” AI workflow is tempting:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Prompt a model.&lt;/li&gt;
&lt;li&gt;Get a passable draft.&lt;/li&gt;
&lt;li&gt;Edit a bit.&lt;/li&gt;
&lt;li&gt;Publish (or don’t).&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;My &lt;strong&gt;opinion&lt;/strong&gt;: this fails in a subtle way.&lt;/p&gt;

&lt;p&gt;It collapses the space too early.&lt;/p&gt;

&lt;p&gt;If you accept the first coherent framing you see, you miss the alternative theses you didn’t think to ask for. You also miss the objections you would have discovered in a real debate. The result may be fluent, but it’s often shallow or generic.&lt;/p&gt;

&lt;p&gt;When I say “writing as search,” I mean:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;There are many plausible ways to frame an idea.&lt;/li&gt;
&lt;li&gt;Your first framing is rarely the best one.&lt;/li&gt;
&lt;li&gt;The work is not producing text; it’s choosing what you actually believe.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Why “search,” specifically?
&lt;/h3&gt;

&lt;p&gt;Other metaphors are available: writing as sculpting (remove excess), writing as iteration (revise until good), writing as dialogue (respond to an imagined reader).&lt;/p&gt;

&lt;p&gt;I still use “search” because it emphasizes a trade‑off that matters under my constraints: &lt;strong&gt;backtracking is cheap &lt;em&gt;before&lt;/em&gt; commitment.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If I haven’t spent three hours polishing Draft A, it’s easier to abandon it when Draft B reveals a better thesis.&lt;/p&gt;

&lt;p&gt;Caveat: this isn’t “free.” It shifts the cost from &lt;em&gt;writing&lt;/em&gt; to &lt;em&gt;reading&lt;/em&gt; (and attention). You pay a &lt;strong&gt;reading tax&lt;/strong&gt; to avoid paying a &lt;strong&gt;polishing‑the‑wrong‑draft tax&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;That’s the workflow: separate two modes.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Exploration:&lt;/strong&gt; expand the space of possible essays.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Commitment:&lt;/strong&gt; pick a framing and make it honest.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  The 5‑step loop (plus an optional 4.5)
&lt;/h2&gt;

&lt;p&gt;Here’s the pipeline I run (the folder structure in this repo mirrors it):&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Raw dump&lt;/strong&gt; (fuel)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Perspective expansion&lt;/strong&gt; (parallel drafts)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Synthesis&lt;/strong&gt; (selection + compression)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Human clarification&lt;/strong&gt; (where truth enters)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Integration&lt;/strong&gt; (write the draft)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Optional:&lt;/p&gt;

&lt;p&gt;4.5. &lt;strong&gt;“What would X say?” critique&lt;/strong&gt; (objection generation, treated cautiously)&lt;/p&gt;

&lt;p&gt;The steps sound straightforward; the point is where you put the effort.&lt;/p&gt;

&lt;p&gt;My &lt;strong&gt;experience&lt;/strong&gt; is that Step 4 (human clarification) is the highest‑leverage part. It’s where I stop hand‑waving. Steps 2 and 3 are what make Step 4 possible.&lt;/p&gt;

&lt;p&gt;Pipeline in one line:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;Raw dump → Parallel drafts → Synthesis → Human Q&amp;amp;A → Draft&lt;/code&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  Step 1: Raw dump (give the system real fuel)
&lt;/h2&gt;

&lt;p&gt;A raw dump is not an outline. It’s not a prompt. It’s closer to a messy interview with yourself.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Experience:&lt;/strong&gt; I often start as a voice note (because typing feels like “writing,” and writing triggers perfectionism).&lt;/p&gt;

&lt;p&gt;What goes into the raw dump:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What happened (the event) and why it matters to you.&lt;/li&gt;
&lt;li&gt;What you currently believe.&lt;/li&gt;
&lt;li&gt;What you’re unsure about.&lt;/li&gt;
&lt;li&gt;What you’re optimizing for (clarity? novelty? persuasion?).&lt;/li&gt;
&lt;li&gt;Constraints (time, audience, sensitivity).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example from this post (grounded):&lt;/strong&gt; my “raw dump” literally began as a process spec:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“A technical blog post about a systematic approach to writing better technical blog posts…”&lt;/li&gt;
&lt;li&gt;“Step 1: Raw Information Dump”&lt;/li&gt;
&lt;li&gt;“Step 2: Multi‑Model Perspective Expansion”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s a common trap: the “workflow post about workflows.” If your raw dump is thin, everything downstream becomes generic. It is purely procedural.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 2: Perspective expansion (generate full drafts, not bullets)
&lt;/h2&gt;

&lt;p&gt;This is the step I used to avoid.&lt;/p&gt;

&lt;p&gt;I would ask one model for an outline, accept the first structure, then start writing. The result was always thin. It was coherent enough to publish, but it missed the alternative framings I didn’t know to ask for.&lt;/p&gt;

&lt;p&gt;Now I generate &lt;strong&gt;parallel drafts&lt;/strong&gt;: multiple full essays from different models (or different prompts/lenses).&lt;/p&gt;

&lt;p&gt;Why full essays?&lt;/p&gt;

&lt;p&gt;Because a complete draft forces:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a thesis&lt;/li&gt;
&lt;li&gt;definitions&lt;/li&gt;
&lt;li&gt;transitions&lt;/li&gt;
&lt;li&gt;a conclusion&lt;/li&gt;
&lt;li&gt;an implicit set of assumptions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A bullet list can hide all of that.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Experience:&lt;/strong&gt; I typically run 3–4 models. Not because it’s magic, but because it’s where I personally hit diminishing returns: fewer often converge too quickly; more rarely adds genuinely new structure for the extra reading time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What I look for when comparing drafts (practical checklist):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Which draft makes the strongest claim (and what does it assume)?&lt;/li&gt;
&lt;li&gt;Which draft surfaces the best objections?&lt;/li&gt;
&lt;li&gt;Which draft has the cleanest structure (even if the content is wrong)?&lt;/li&gt;
&lt;li&gt;Which draft feels most “alive” (specific constraints, real stakes)?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Important: I don’t treat these drafts as “the answer.” I treat them as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;alternative framings I didn’t think of&lt;/li&gt;
&lt;li&gt;objections I didn’t anticipate&lt;/li&gt;
&lt;li&gt;better structure than my default&lt;/li&gt;
&lt;li&gt;phrasing I might reuse &lt;em&gt;only if it matches what I mean&lt;/em&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  If you only have one model
&lt;/h3&gt;

&lt;p&gt;If you only have access to one model, you can still do perspective expansion by forcing lenses across three passes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Skeptic:&lt;/strong&gt; strongest objections + missing caveats&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Teacher:&lt;/strong&gt; simplest explanation + concrete examples&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Editor:&lt;/strong&gt; structure + cuts + “what should be removed?”&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Step 3: Synthesis (curation, not averaging)
&lt;/h2&gt;

&lt;p&gt;After the parallel drafts, I do a collapse step.&lt;/p&gt;

&lt;p&gt;Most people hear “synthesis” and imagine “merge paragraphs.”&lt;/p&gt;

&lt;p&gt;A safer claim (and my real experience): the temptation is to average everything into one polite post. That usually produces blandness.&lt;/p&gt;

&lt;p&gt;My &lt;strong&gt;opinion&lt;/strong&gt;: synthesis should be opinionated.&lt;/p&gt;

&lt;p&gt;It’s selection + compression:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Extract the strongest claims.&lt;/li&gt;
&lt;li&gt;Surface disagreements.&lt;/li&gt;
&lt;li&gt;Identify what needs evidence.&lt;/li&gt;
&lt;li&gt;Propose a narrative shape that could actually carry the post.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example from this post (grounded):&lt;/strong&gt; my synthesis flagged the core risk:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;“The missing ingredient: a concrete event… Without a real event/case study, it reads as generic advice.”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That forced a decision: the post couldn’t just be “here is a pipeline.” It needed to be grounded in the repeated event of ideas dying as outlines under my constraints.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 4: Human clarification (answer questions like an interview)
&lt;/h2&gt;

&lt;p&gt;This is the step that turns “sounds right” into “is right.”&lt;/p&gt;

&lt;p&gt;After synthesis, I have the model ask me targeted questions.&lt;/p&gt;

&lt;p&gt;Not “what else should I add?”&lt;/p&gt;

&lt;p&gt;But questions that force precision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What was the triggering event?&lt;/li&gt;
&lt;li&gt;What exactly failed in the old process?&lt;/li&gt;
&lt;li&gt;What are you &lt;em&gt;not&lt;/em&gt; claiming?&lt;/li&gt;
&lt;li&gt;What would falsify this?&lt;/li&gt;
&lt;li&gt;What are the hallucination risks?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then I answer like I’m being interviewed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Experience:&lt;/strong&gt; this feels like an async podcast episode. It gives me the pushback I don’t get locally.&lt;/p&gt;

&lt;h3&gt;
  
  
  What changed for this post (a concrete transformation)
&lt;/h3&gt;

&lt;p&gt;Here’s a literal before → question → after chain from this post.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Before (raw/spec voice):&lt;/strong&gt; “A technical blog post about a systematic approach to writing better technical blog posts using AI models…”&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Clarification question:&lt;/strong&gt; “What was the triggering event?”&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;After (draft voice):&lt;/strong&gt; “I have a steady stream of ideas… And yet most of them die… I’m a founder with a family. Time comes in fragments… I don’t live in a dense tech ecosystem…”&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;What changed:&lt;/strong&gt; the post stops being a workflow diagram and becomes an explanation of &lt;em&gt;why&lt;/em&gt; I need this workflow: it substitutes for missing pushback and makes exploration possible in fragmented time.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is why I call Step 4 “where truth enters.” The model can generate structures and objections, but it can’t supply my constraints. If I don’t answer precisely, the post becomes confidently generic.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 5: Integration (write the draft you actually want to read)
&lt;/h2&gt;

&lt;p&gt;After Step 4, you have something most writing processes don’t reliably produce: a clear set of constraints and editorial decisions.&lt;/p&gt;

&lt;p&gt;Now you write.&lt;/p&gt;

&lt;p&gt;This is where you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;choose one framing (and discard others)&lt;/li&gt;
&lt;li&gt;insert real examples where they do argumentative work&lt;/li&gt;
&lt;li&gt;add caveats and “unknowns” instead of smoothing them away&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Experience:&lt;/strong&gt; I stop when I read the draft and genuinely enjoy it.&lt;/p&gt;

&lt;p&gt;What does “enjoy it” mean concretely (for me)? Three signals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I can read the draft without wincing at any sentence.&lt;/li&gt;
&lt;li&gt;There’s at least one idea that surprised me. It’s something I didn’t know I thought until I wrote it.&lt;/li&gt;
&lt;li&gt;I’d send it to someone whose judgment I respect without prefacing it with “sorry this is rough.”&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If I don’t hit that bar after one loop, I often choose not to publish rather than turning it into a multi‑week project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Caveat (non‑negotiable):&lt;/strong&gt; the evidence for this workflow is entirely self‑reported. I haven’t run controlled comparisons, I haven’t measured reader outcomes, and I don’t have reliable external feedback. The claim is “this feels better to me under my constraints,” not “this is objectively better.”&lt;/p&gt;




&lt;h2&gt;
  
  
  What this is optimizing for (and what it isn’t)
&lt;/h2&gt;

&lt;p&gt;Let me make the trade‑offs explicit.&lt;/p&gt;

&lt;h3&gt;
  
  
  Optimizing for
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Novelty (opinion):&lt;/strong&gt; compressing an idea until there’s at least a small “new” thing inside.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Conversation (experience):&lt;/strong&gt; getting pushback and alternate framings without needing synchronous peers.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Momentum (experience/opinion):&lt;/strong&gt; turning “idea noise” into “idea clarity” in short, fragmented sessions.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cost Opportunity efficiency:&lt;/strong&gt; The whole loop, with 3 revisions, using frontier models costed me 3US$ and about an hour focused on the idea (The CLI and workflows were already built prior). I never wrote anything that fast (of reasonable quality).&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Not optimizing for
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Perfect prose (opinion):&lt;/strong&gt; the writing may still feel rough or “AI‑ish.”&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automatic truth (non‑negotiable):&lt;/strong&gt; this does not replace research, benchmarking, or fact‑checking.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Guaranteed speed/quality (non‑negotiable):&lt;/strong&gt; sometimes exploration expands the problem space and you still decide not to publish.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Marketing outcomes (non‑negotiable):&lt;/strong&gt; this isn’t about attention or becoming famous.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Guardrails and failure modes
&lt;/h2&gt;

&lt;p&gt;This workflow can help you think. It can also help you be confidently wrong.&lt;/p&gt;

&lt;h3&gt;
  
  
  Minimum safety protocol (use even for casual posts)
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Label important claims (&lt;strong&gt;experience/opinion/assumption/verified&lt;/strong&gt;).&lt;/li&gt;
&lt;li&gt;Keep a “things to verify” list as a first‑class artifact.&lt;/li&gt;
&lt;li&gt;No attribution (“X said…”) without a source.&lt;/li&gt;
&lt;li&gt;For technical claims: do separate validation work (experiments/citations/peer review).&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Failure mode 1: hallucinated authority
&lt;/h3&gt;

&lt;p&gt;The biggest risk is that fluent text smuggles in fake certainty.&lt;/p&gt;

&lt;p&gt;Common offenders:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;performance claims (“X is fastest”) without benchmarks&lt;/li&gt;
&lt;li&gt;invented timelines&lt;/li&gt;
&lt;li&gt;misattributed quotes without sources&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Mitigations I use (&lt;strong&gt;experience/opinion&lt;/strong&gt;):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Keep epistemic labels.&lt;/li&gt;
&lt;li&gt;Maintain a “things to verify” list.&lt;/li&gt;
&lt;li&gt;Prefer narrow, attributable statements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Failure mode 2: genericness via weak grounding
&lt;/h3&gt;

&lt;p&gt;If you skip the event and constraints, everything becomes “AI transforms writing.”&lt;/p&gt;

&lt;p&gt;My &lt;strong&gt;opinion&lt;/strong&gt;: a process‑only post is almost always less compelling than a story‑backed one.&lt;/p&gt;

&lt;p&gt;Mitigation: include an artifact trail (even a tiny one):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;raw dump excerpt&lt;/li&gt;
&lt;li&gt;contrasting draft theses&lt;/li&gt;
&lt;li&gt;synthesis bullets (tensions, missing evidence)&lt;/li&gt;
&lt;li&gt;what changed after clarification&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Failure mode 3: process tax
&lt;/h3&gt;

&lt;p&gt;This pipeline adds steps.&lt;/p&gt;

&lt;p&gt;And yes: the timeboxed loop below is often ~60–80 minutes.&lt;/p&gt;

&lt;p&gt;My &lt;strong&gt;experience/opinion&lt;/strong&gt; is that it’s still worth it when the alternative is spending three scattered evenings polishing the wrong idea, or never shipping at all. The efficiency gain is often in &lt;strong&gt;discarding bad paths early&lt;/strong&gt;, not in “typing faster.”&lt;/p&gt;

&lt;p&gt;Mitigations (&lt;strong&gt;experience&lt;/strong&gt;):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Timebox sessions to your real life (kid asleep, late night).&lt;/li&gt;
&lt;li&gt;Stop after one loop if it’s “good enough.”&lt;/li&gt;
&lt;li&gt;Save artifacts so future posts get easier.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Failure mode 4: deep technical claims without verification
&lt;/h3&gt;

&lt;p&gt;For highly technical writing (benchmarks, correctness proofs, security claims), this workflow can produce plausible nonsense.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Opinion:&lt;/strong&gt; treat it as idea refinement, not validation.&lt;/p&gt;

&lt;p&gt;If you need rigor, add separate work:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;experiments&lt;/li&gt;
&lt;li&gt;citations&lt;/li&gt;
&lt;li&gt;reproduction steps&lt;/li&gt;
&lt;li&gt;peer review&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  A minimal “do this tonight” recipe
&lt;/h2&gt;

&lt;p&gt;If you want to try this tomorrow, don’t copy my whole setup. Do the smallest viable loop.&lt;/p&gt;

&lt;h3&gt;
  
  
  Timeboxed loop
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;10 minutes:&lt;/strong&gt; voice‑note raw dump

&lt;ul&gt;
&lt;li&gt;what you believe&lt;/li&gt;
&lt;li&gt;what you’re unsure about&lt;/li&gt;
&lt;li&gt;what you’re optimizing for&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;10–20 minutes:&lt;/strong&gt; generate 3 full drafts (different models, or the same model with different forced lenses)&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;10 minutes:&lt;/strong&gt; synthesize

&lt;ul&gt;
&lt;li&gt;best claims&lt;/li&gt;
&lt;li&gt;disagreements&lt;/li&gt;
&lt;li&gt;“needs evidence” list&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;30–45 minutes:&lt;/strong&gt; answer clarification questions like an interview (voice works well)&lt;/li&gt;

&lt;li&gt;

&lt;strong&gt;Stop:&lt;/strong&gt; when you hit your “enjoy it” bar; publish or save as an internal memo&lt;/li&gt;

&lt;/ul&gt;

&lt;p&gt;Even if you don’t publish, you’ve converted a looping idea into a clearer artifact.&lt;/p&gt;




&lt;h2&gt;
  
  
  Closing: ship artifacts, not perfection
&lt;/h2&gt;

&lt;p&gt;I built this workflow because I wanted a repeatable way to turn “ideas I can’t stop thinking about” into “ideas I can actually examine.” I needed it under real constraints: language, isolation, and fragmented time.&lt;/p&gt;

&lt;p&gt;My strongest claim here is simple (&lt;strong&gt;opinion&lt;/strong&gt;): use AI to explore the space before you commit.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use AI for expansion (parallel drafts), not for authority.&lt;/li&gt;
&lt;li&gt;Use synthesis to curate, not average.&lt;/li&gt;
&lt;li&gt;Use human clarification to keep yourself honest.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re someone with too many ideas and too little uninterrupted time, try one loop.&lt;/p&gt;

&lt;p&gt;You don’t have to become a better prose stylist overnight.&lt;/p&gt;

&lt;p&gt;You just have to build a process that makes thinking possible again.&lt;/p&gt;




&lt;h2&gt;
  
  
  Appendix A: Epistemic status taxonomy
&lt;/h2&gt;

&lt;p&gt;I try to label important statements with one of these tags:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Experience&lt;/strong&gt;: something I personally observed/did.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Opinion&lt;/strong&gt;: a value judgment or preference.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Assumption&lt;/strong&gt;: plausible but not verified.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Verified&lt;/strong&gt;: backed by a link, benchmark, or citation.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Appendix B: Optional Step 4.5 (“What would X say?” creator critique, experimental)
&lt;/h2&gt;

&lt;p&gt;I’ve experimented with an extra loop: simulate critique using a corpus of a creator’s past takes.&lt;/p&gt;

&lt;p&gt;I’m not sure I love it yet.&lt;/p&gt;

&lt;p&gt;So I treat it as optional. I treat it as objection generation, not truth.&lt;/p&gt;

&lt;p&gt;Non‑negotiable safety rules (&lt;strong&gt;opinion&lt;/strong&gt;):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No attribution without a link/source.&lt;/li&gt;
&lt;li&gt;Explicitly call out context mismatch and possible staleness.&lt;/li&gt;
&lt;li&gt;Human must approve/reject anything incorporated.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Also: if this ever became more than a private tool, I’d want creator buy‑in; otherwise it can drift into “abuse” territory.&lt;/p&gt;

&lt;h2&gt;
  
  
  Appendix C: Prompt shapes (rough, but runnable)
&lt;/h2&gt;

&lt;p&gt;Use whatever tool you like. The important part is the shape of the prompts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Perspective expansion (run 3 times):&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Read &lt;code&gt;raw.md&lt;/code&gt;. Write a full essay draft.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pick a thesis and make it explicit in the first 10 lines.&lt;/li&gt;
&lt;li&gt;Define 3 key terms you’re using.&lt;/li&gt;
&lt;li&gt;Include at least 3 objections (steelman them).&lt;/li&gt;
&lt;li&gt;Flag any claim that needs evidence.&lt;/li&gt;
&lt;li&gt;If you’re about to generalize (“most people…”), rewrite as the author’s experience or delete.&lt;/li&gt;
&lt;li&gt;Keep epistemic honesty: don’t invent facts.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Synthesis:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Given the 3 drafts, produce:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the best 3 thesis options&lt;/li&gt;
&lt;li&gt;the strongest claims (with which draft they came from)&lt;/li&gt;
&lt;li&gt;disagreements/tensions&lt;/li&gt;
&lt;li&gt;“needs evidence” list&lt;/li&gt;
&lt;li&gt;10 clarification questions for the human&lt;/li&gt;
&lt;li&gt;one recommended narrative spine (and why)&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Clarification questions:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Ask me at least 15 targeted questions.&lt;br&gt;
Prefer questions that turn vague sentences into concrete, falsifiable statements.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;strong&gt;Integration:&lt;/strong&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Write &lt;code&gt;draft.md&lt;/code&gt; using &lt;code&gt;raw.md&lt;/code&gt;, &lt;code&gt;synthesis.md&lt;/code&gt;, and &lt;code&gt;answers.md&lt;/code&gt;.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Choose one framing.&lt;/li&gt;
&lt;li&gt;Add explicit caveats.&lt;/li&gt;
&lt;li&gt;Keep what is true; remove what is only plausible.&lt;/li&gt;
&lt;li&gt;Do not add quotes or attributions without sources.&lt;/li&gt;
&lt;/ul&gt;
&lt;/blockquote&gt;

</description>
      <category>writing</category>
      <category>ai</category>
      <category>tooling</category>
      <category>todayisearched</category>
    </item>
    <item>
      <title>Implicit CSS Grid, 301 &amp; 305</title>
      <dc:creator>ArthurJ</dc:creator>
      <pubDate>Sun, 01 Mar 2020 13:28:04 +0000</pubDate>
      <link>https://dev.to/arthurbiensur/implicit-css-grid-301-305-2mp1</link>
      <guid>https://dev.to/arthurbiensur/implicit-css-grid-301-305-2mp1</guid>
      <description>&lt;p&gt;Skipped last week's post because I changed job, and adaptation is still in full force. You might have seen it in the videos, which are now one take without prep, and are about 50% longer. Sometimes, shipped is better than perfect!&lt;/p&gt;

&lt;p&gt;Here we are, at the end of this series on CSS grid, exploring the concept of implicit grids. &lt;br&gt;
So far, all of our layouts have been strictly defined using grid-template and grid-area, which is great for static layouts, but it's only half of the equation. Dynamic ones needs a little bit more flexibility, guiding the browser to place items rather than placing them ourselves.&lt;/p&gt;

&lt;p&gt;The first 5 videos are about constructing a dummy login/register modal, with the columns defined and rows handled implicitly by the browser.&lt;/p&gt;

&lt;p&gt;The last 5 are about building a gallery, with 3/2 horizontal images, 2/3 vertical ones, 2/2 squares and 1/1 fillers, without having to calculate optimum layouts' placement. Oh! and did I mention it's fully responsive, without media queries?&lt;/p&gt;

&lt;p&gt;In the next few weeks, I'll be answering questions that I received during this series about CSS Grid, you can expect maybe 1 or 2 videos per week at this point, depending on schedule. Feel free to ask more here or tweeter, I'll try to answer as many as possible!&lt;/p&gt;

&lt;p&gt;After that It will be time to move on to another subject, if you have any suggestion, I would like to know from you if there's a subject you feel should have a bit more exposure! So far, I'm planning a series on State machines, images handling, HTML node performance costs &amp;amp; HTML performance in general.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/MakeItHappenDev/N2P-CSS-Grid" rel="noopener noreferrer"&gt;As per usual, you can check the code on GitHub, one branch for every video&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/playlist?list=PLBHbfZu_dhOca_FpdUccB2KfjPfW1zklZ" rel="noopener noreferrer"&gt;link to the full playlist here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;-1 track line trick&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/o95WkhpzXrk"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Centering with Grids, place-content, place-items &amp;amp; place-self&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/49kdZZVBps8"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Introduction to the implicit Grid&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/c-F5MlJtq08"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Filling out the login form&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/KJnbcrMRVEU"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Set default height of the Implicitly created rows&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/vyR1uDDb8ak"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Creating our Gallery&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/tIoV4-1L030"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Using auto-fit &amp;amp; auto-fill for responsiveness&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/fkhEJJzm5iE"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Ordering items&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Ctm439jflTI"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;creating our vertical/horizontal/square items&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/-FuaTjT3w6E"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Densely pack our gallery in one property&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/y65MmtoFMJc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>css</category>
      <category>grid</category>
      <category>youtube</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>CSS Grid 201, let's get technical</title>
      <dc:creator>ArthurJ</dc:creator>
      <pubDate>Sat, 15 Feb 2020 14:22:36 +0000</pubDate>
      <link>https://dev.to/arthurbiensur/css-grid-201-a-bit-more-technical-3ek8</link>
      <guid>https://dev.to/arthurbiensur/css-grid-201-a-bit-more-technical-3ek8</guid>
      <description>&lt;p&gt;So last week, &lt;a href="https://dev.to/arthurbiensur/learning-css-grid-the-easy-way-2d9h"&gt;I presented my way of talking about CSS Grid, focused on being simple to understand and visual&lt;/a&gt;. This week, we are going to go a bit deeper under the hood!&lt;/p&gt;

&lt;p&gt;As much as I think that using track numbers is unfriendly, it's still super useful to know how they work, especially before entering the "dynamic" part of the series next week.&lt;/p&gt;

&lt;p&gt;You will find below a walk through of how to place items using the track lines, area lines, all the shorthands you will need and as a bonus, how to overlap items!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/playlist?list=PLBHbfZu_dhOca_FpdUccB2KfjPfW1zklZ" rel="noopener noreferrer"&gt;link to the full playlist here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Under the hood&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/xfPBhTSFjkI"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Spanning multiple rows/columns&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/reMFQYiPR4o"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Using our named areas as tracks&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Ii85GSOK1Tw"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Hooking to multiple areas and span across them&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Ftfk8rdA8nM"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Overlapping items&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/9Lds75ufST4"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Reduce code verbosity with shorthands&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Dokj7PI0AY0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>css</category>
      <category>grid</category>
      <category>youtube</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Learning CSS Grid the easy way</title>
      <dc:creator>ArthurJ</dc:creator>
      <pubDate>Mon, 10 Feb 2020 14:26:39 +0000</pubDate>
      <link>https://dev.to/arthurbiensur/learning-css-grid-the-easy-way-2d9h</link>
      <guid>https://dev.to/arthurbiensur/learning-css-grid-the-easy-way-2d9h</guid>
      <description>&lt;p&gt;For those who know me a little, I've always been that weird friend/colleague excited about CSS Grids and trying to push them for layout. But usually the answer is: "I don't know, CSS grids seem kind of complicated".&lt;/p&gt;

&lt;p&gt;I always was conflicted about that answer, because I always felt Grids were really easy to get into, and they would be the clear way of doing things if we hadn't &lt;a href="https://www.youtube.com/watch?v=txZq7Laz7_4" rel="noopener noreferrer"&gt;been going around breaking the flow of the pages for the past many years&lt;/a&gt;.&lt;br&gt;
But recently I wanted to find tutorials to share and spread the Grid love all around. And to my surprise, every tutorial begins with the same description of the spec, and how to set a grid and place items in it by number. You end up having something like that as a "hello world":&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.container&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;grid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="py"&gt;grid-template-rows&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nb"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="py"&gt;grid-template-columns&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nb"&gt;repeat&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.header&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;grid-area&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;2&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.footer&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;grid-area&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;4&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;5&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;4&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.content&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;grid-area&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="m"&gt;2&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;2&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;3&lt;/span&gt; &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Not very welcoming and intuitive if you ask me. I believe this is the reason people assume Grids are hard! I mean, even I always mix up the row/column order in the grid-area shorthand property, and I'm supposed to be the Grid guru.&lt;br&gt;
The good thing is you really don't have to use it this way at all. There is a cleaner way, instantaneously understandable way to do it and it look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="nc"&gt;.container&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;display&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;grid&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nl"&gt;grid-template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
    &lt;span class="s1"&gt;"header header  header"&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;
    &lt;span class="s1"&gt;"...... content ......"&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;
    &lt;span class="s1"&gt;"...... ....... ......"&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;
    &lt;span class="s1"&gt;"footer footer  footer"&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;
    &lt;span class="p"&gt;/&lt;/span&gt; &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;   &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;     &lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="n"&gt;fr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.header&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;grid-area&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;header&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.footer&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;grid-area&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;footer&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nc"&gt;.content&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="py"&gt;grid-area&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;content&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It looks in the .CSS file just like it will looks in your layout. If you want to refactor it, you just have to change one property and everything falls into place. This is an absolute win for the web and us, web developers.&lt;/p&gt;

&lt;p&gt;This being said, there's still way more to grid than just the templates and visually see your layout in the .CSS file. So I started to record a series of video, each in the 2 minutes range, around CSS Grids that I call "Noob 2 pro". My goal is to explore Grids potential from an usage-based perspective, where we use new properties for specific needs rather than just go down the list of properties like a cheat sheet.&lt;/p&gt;

&lt;p&gt;The first part of the series is done, and being my first tutorial, it might still be a bit shaky at times, but I'm working to get it out there, I'm sure it will help some people!&lt;br&gt;
Those 10 videos will make you self sufficient in static/responsive layouts using CSS grids. Then, as I add more videos, one every 2 or 3 days hopefully, push on and make you a Grid master. Soon your life will be easier!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/playlist?list=PLBHbfZu_dhOca_FpdUccB2KfjPfW1zklZ" rel="noopener noreferrer"&gt;Here is a link to the playlist on youtube&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And here are the the videos:&lt;/p&gt;

&lt;p&gt;No code here =&amp;gt; 1. Announcement&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/VHX96XcEh2k"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;No code here =&amp;gt; 2. Pros/cons of CSS Grid&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/xzLpDwrO-L8"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Code starts here =&amp;gt; 3. Your first grid&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/Si1AgmdkB_U"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Add your first item/cell&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/cu_326R-XdY"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Add more items and gaps&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/TCcXix5Yg1Q"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Place one element by name&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/gQtGkjlYPHU"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Place all the items by name&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/GpKqPOuIM_s"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Shorthand grid-template&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/F8YdBIj8HLg"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;media queries refresh&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/HQCLBtDuW1Y"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Responsive Grids&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/saqeYQVy9X0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Add empty cells&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/GulAqTgp01Q"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Refactor your UI in seconds&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/mZAN8TW9QgI"&gt;
&lt;/iframe&gt;
&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>css</category>
      <category>grid</category>
      <category>youtube</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>(kind of) Getting the memory address of a JavaScript object</title>
      <dc:creator>ArthurJ</dc:creator>
      <pubDate>Thu, 28 Nov 2019 22:35:36 +0000</pubDate>
      <link>https://dev.to/arthurbiensur/kind-of-getting-the-memory-address-of-a-javascript-object-2mnd</link>
      <guid>https://dev.to/arthurbiensur/kind-of-getting-the-memory-address-of-a-javascript-object-2mnd</guid>
      <description>&lt;p&gt;Hey everyone,&lt;/p&gt;

&lt;p&gt;I am building a library for &lt;a href="https://github.com/MakeItHappenDev/GraphObjectNotation" rel="noopener noreferrer"&gt;Graph Object Notation&lt;/a&gt;, at the moment in super early stage, and I came across a really nice "loophole" to what I imagined being the biggest obstacle of the project : &lt;strong&gt;Getting the memory address of the objects in JavaScript&lt;/strong&gt;. &lt;a href="https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0" rel="noopener noreferrer"&gt;Here is a nice post if you need a quick reminder on how memory works in JavaScript!&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;As you may know, you can't access them for security reasons, end of the post, thank you for reading...&lt;br&gt;
...but turns out, you can cheat a little bit there. The actual address isn't really that important in my case, what's important is the consistency of the "fake address" that we will generate and make sure the same object always spits out the same address!&lt;/p&gt;

&lt;p&gt;First though is to go on and brute force things, building an array of known Object, another of fake address and comparing every object against that array. Turns out it works, but here comes the slow library judgement.&lt;br&gt;
Second though, building hashes of the object based on properties and values, then only comparing with "same hash" object, works as well, but not really efficient either.&lt;/p&gt;

&lt;p&gt;Then came an idea.&lt;/p&gt;

&lt;p&gt;The &lt;strong&gt;Map object&lt;/strong&gt; isn't really used in the JavaScript front-end world, but it's really effective at finding if it has a key defined, and it can hold any type of data as a key. This is contrary to the Object object, where keys can only be strings. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1 + 1 = success, let's use the objects themselves as key, and the fake address as value.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Here is a short video on how it works : &lt;a href="https://youtu.be/-ZenKpRfJdo" rel="noopener noreferrer"&gt;https://youtu.be/-ZenKpRfJdo&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And the next one in a more functional programming style, with a nice triple arrow function : &lt;a href="https://youtu.be/r7y8roTIPig" rel="noopener noreferrer"&gt;https://youtu.be/r7y8roTIPig&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And for those not wanting to watch a video, here's the code : &lt;br&gt;
(the live version is here)[&lt;a href="https://gon.arthurj.now.sh/references" rel="noopener noreferrer"&gt;https://gon.arthurj.now.sh/references&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codesandbox.io/s/vibrant-northcutt-wkh2e" rel="noopener noreferrer"&gt;https://codesandbox.io/s/vibrant-northcutt-wkh2e&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;arthur&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;user1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;arthur&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Joe&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="nx"&gt;user1&lt;/span&gt;&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="c1"&gt;//This generator doesn't garantee uniqueness, but looks way more memoryish than a incremental counter&lt;/span&gt;
&lt;span class="c1"&gt;//if you use this code for real, do incremental or something else unique!&lt;/span&gt;
&lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nf"&gt;generator&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;random&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;random&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;slice&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
    &lt;span class="k"&gt;yield&lt;/span&gt; &lt;span class="s2"&gt;`0x&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;random&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;preload&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;knowObjects&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;refs&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;generate&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reference&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reference&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;refs&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;knowObjects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;address&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;knowObjects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;address&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;generate&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;next&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;knowObjects&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;refs&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;object&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;address&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;setup&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;preload&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Map&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt; &lt;span class="p"&gt;{},&lt;/span&gt; &lt;span class="nf"&gt;generator&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;findRef&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;array&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;u&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;findRef&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;u&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="cm"&gt;/*
console.log something like that, and builds up the knowObjects map / refs object
[
 "0xf094c649",
 "0x7de35306",
 "0x6a99aa2f",
 "0xf094c649"
]
*/&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;refs&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;setup&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="cm"&gt;/*
console.log something like this
{
 "0xf094c649": {
  "name": "arthur"
 },
 "0x7de35306": {
  "name": "arthur"
 },
 "0x6a99aa2f": {
  "name": "Joe"
 }
}
*/&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>address</category>
      <category>memory</category>
      <category>map</category>
    </item>
  </channel>
</rss>
