<?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>Forem: yashaswi</title>
    <description>The latest articles on Forem by yashaswi (@themeticulist).</description>
    <link>https://forem.com/themeticulist</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%2F118073%2Ff45d9207-9202-486c-9bb2-bb3dfd736351.jpeg</url>
      <title>Forem: yashaswi</title>
      <link>https://forem.com/themeticulist</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/themeticulist"/>
    <language>en</language>
    <item>
      <title>I Had 12 Unpublished Articles Sitting in Drafts. An MCP Server Fixed That.</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Tue, 17 Mar 2026 02:57:28 +0000</pubDate>
      <link>https://forem.com/themeticulist/i-had-12-unpublished-articles-sitting-in-drafts-an-mcp-server-fixed-that-53ge</link>
      <guid>https://forem.com/themeticulist/i-had-12-unpublished-articles-sitting-in-drafts-an-mcp-server-fixed-that-53ge</guid>
      <description>&lt;p&gt;I'm a developer who learns by writing. The problem is I almost never finished writing.&lt;/p&gt;

&lt;p&gt;The graveyard of half-finished articles on my hard drive tells the real story: 12 drafts I genuinely intended to publish. Topics I found interesting, problems I'd solved, things I thought were worth sharing. Each one abandoned somewhere between "rough idea" and "good enough to post."&lt;/p&gt;

&lt;p&gt;It wasn't writer's block. It was friction. The research to figure out what's already been covered. The back-and-forth between editor, Dev.to, and my notes. The formatting, the tags, the series selection. None of it is hard — but all of it adds up to enough resistance that your brain finds something more immediately rewarding to do instead. Like fixing one more bug. Or reading one more article someone else already finished.&lt;/p&gt;

&lt;p&gt;I work with AI tools every day. Claude Code handles the heavy engineering work. I gave it my codebase and it refactored, debugged, and planned alongside me. But when it came to writing — the thing I kept saying I wanted to do more of — I was still doing everything by hand.&lt;/p&gt;

&lt;p&gt;So I built a bridge. An MCP server that connects Claude directly to Dev.to, turning the whole publish workflow into a conversation.&lt;/p&gt;

&lt;p&gt;It didn't just help me publish faster. It changed the psychology of publishing entirely.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Changes When the Friction Disappears
&lt;/h2&gt;

&lt;p&gt;The biggest thing I noticed wasn't speed. It was that I stopped talking myself out of it.&lt;/p&gt;

&lt;p&gt;Before: I'd have an idea, open a blank doc, start typing, realise I didn't know if someone had already written this exact thing, open Dev.to in another tab, spend 20 minutes searching, lose the thread, close the tab, tell myself I'd come back to it. I usually didn't.&lt;/p&gt;

&lt;p&gt;After: I'd have an idea, open Claude Code, and say "search Dev.to for articles about X — what's already been covered and what's missing?" Thirty seconds later I have a map of the topic. I know exactly where my angle fits. The blank page problem evaporates because I'm not starting from nothing — I'm starting from a conversation.&lt;/p&gt;

&lt;p&gt;That research step alone was the thing that killed most of my articles before they started. Removing it changed everything.&lt;/p&gt;

&lt;p&gt;The drafting is also different. I'm not writing into a void and hoping it lands. I describe what I want to say, Claude drafts it, I reshape it into my voice, and the structure is already there. I'm editing, not starting. Editing is easy. Starting is hard. This shifts the work from the hard thing to the easy thing.&lt;/p&gt;

&lt;p&gt;And once it's drafted — publishing is literally one message. "Looks good, publish it." Done.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Workflow in Practice
&lt;/h2&gt;

&lt;p&gt;Here's what an actual session looks like, from idea to published:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Me: "I want to write about setting up a local MCP server for Outlook.
     Search Dev.to — what's already covered on this topic?"

Claude: [searches Dev.to]
        "There are a few articles on MCP setup generally, but nothing
         specifically about Outlook or email automation workflows.
         Strong gap to write into."

Me: "Good. Check my existing series — does this fit anywhere?"

Claude: [checks my articles and series]
        "You have an 'AI-Powered Developer Workflows' series.
         This fits perfectly as the next entry."

Me: "Write it. Focus on the local server setup and the automation
     angle. Keep it practical, not theoretical. Draft it on Dev.to."

Claude: [writes article, creates draft]
        "Draft created. ID: 3341092. Ready for your review."

Me: "The setup section needs more detail — add the exact
     config file path and a sample rule."

Claude: [updates the draft]

Me: "Perfect. Publish it."

Claude: [publishes]
        "Live at https://dev.to/themeticulist/..."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start to published: one conversation. No tab switching. No copy-pasting. No context loss.&lt;/p&gt;

&lt;p&gt;The article that came out of that session? It's sitting on my Dev.to profile right now with reactions and comments. It wouldn't exist otherwise — it would have been draft number 13.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to Set This Up Yourself
&lt;/h2&gt;

&lt;p&gt;The server is open source at &lt;a href="https://github.com/yashaswiyogeshwara/devto-mcp" rel="noopener noreferrer"&gt;yashaswiyogeshwara/devto-mcp&lt;/a&gt;. Here's how to get it running.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Get your Dev.to API key
&lt;/h3&gt;

&lt;p&gt;Go to Dev.to → Settings → Extensions → DEV Community API Keys → Generate a new key. Keep it — you'll need it in a moment.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. Clone and build
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/yashaswiyogeshwara/devto-mcp.git
&lt;span class="nb"&gt;cd &lt;/span&gt;devto-mcp
npm &lt;span class="nb"&gt;install
&lt;/span&gt;npm run build
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Create your &lt;code&gt;.env&lt;/code&gt; file
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;# devto-mcp/.env&lt;/span&gt;
&lt;span class="nv"&gt;DEVTO_API_KEY&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;your_key_here
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  4. Add it to Claude Desktop
&lt;/h3&gt;

&lt;p&gt;Open &lt;code&gt;%APPDATA%\Claude\claude_desktop_config.json&lt;/code&gt; and add:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"devto"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"C:/path/to/devto-mcp/dist/index.js"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"env"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
        &lt;/span&gt;&lt;span class="nl"&gt;"DEVTO_API_KEY"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"your_key_here"&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Restart Claude Desktop. The Dev.to tools appear automatically in the MCP panel.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. For Claude Code users
&lt;/h3&gt;

&lt;p&gt;Add the same block to your &lt;code&gt;claude_mcp_config.json&lt;/code&gt; (usually at &lt;code&gt;%APPDATA%\Claude\claude_mcp_config.json&lt;/code&gt;). Claude Code picks it up on next launch.&lt;/p&gt;




&lt;h2&gt;
  
  
  What the Server Can Do
&lt;/h2&gt;

&lt;p&gt;Eight tools cover the full cycle:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Research&lt;/strong&gt; — &lt;code&gt;search_articles&lt;/code&gt; finds what's already published on any topic. Filter by tag, author, or popularity. Run this before you write a word.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Planning&lt;/strong&gt; — &lt;code&gt;list_my_articles&lt;/code&gt; and &lt;code&gt;list_series&lt;/code&gt; show your existing content so Claude can suggest where a new article fits, and flag if you're about to repeat yourself.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Writing&lt;/strong&gt; — &lt;code&gt;create_draft&lt;/code&gt; saves directly to Dev.to with &lt;code&gt;published: false&lt;/code&gt;. You review in your browser before anything goes live. &lt;code&gt;update_article&lt;/code&gt; lets you iterate — "make this section more concrete", "cut the intro", "add a code example" — all without leaving the conversation.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Publishing&lt;/strong&gt; — &lt;code&gt;publish_article&lt;/code&gt; is a deliberate, separate step. One message to ship. The separation matters: you always know when something is about to go live.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tracking&lt;/strong&gt; — &lt;code&gt;get_article_analytics&lt;/code&gt; returns reaction counts and comments for any article.&lt;/p&gt;




&lt;h2&gt;
  
  
  One Gotcha Worth Knowing
&lt;/h2&gt;

&lt;p&gt;If you're building on top of this or customising it: &lt;strong&gt;don't put YAML frontmatter in your article body&lt;/strong&gt;. The Dev.to API has a quirk where frontmatter in &lt;code&gt;body_markdown&lt;/code&gt; silently overrides your JSON parameters — your tags get replaced, your series disappears. The server already guards against this and throws a clear error if it detects frontmatter, but it's worth knowing why.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Actually Changed for Me
&lt;/h2&gt;

&lt;p&gt;I've published more in the past month than in the previous year. That's not because I suddenly have more ideas or more time — it's because the step between "I should write about this" and "this is published" shrank from a multi-session ordeal to a single conversation.&lt;/p&gt;

&lt;p&gt;The tool doesn't write the articles for me. My voice, my examples, my perspective — that still has to come from me. But it handles everything around the writing. The research, the structure, the formatting, the publishing mechanics. It turns writing from a project into a conversation.&lt;/p&gt;

&lt;p&gt;If you've got a graveyard of unpublished drafts, that's the thing worth fixing.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;This article was drafted using the MCP server it describes.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>mcp</category>
      <category>ai</category>
      <category>productivity</category>
      <category>devto</category>
    </item>
    <item>
      <title>How to build a local MCP server for outlook and create email automation</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sat, 14 Mar 2026 09:04:23 +0000</pubDate>
      <link>https://forem.com/themeticulist/i-stopped-opening-outlook-my-ai-reads-my-email-now-4i94</link>
      <guid>https://forem.com/themeticulist/i-stopped-opening-outlook-my-ai-reads-my-email-now-4i94</guid>
      <description>&lt;p&gt;Here's a conversation I had with my AI assistant last Tuesday morning:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; Read my inbox. What needs me today?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI:&lt;/strong&gt; You have 43 unread emails. 3 need a reply. 2 contain action items. The rest are notifications and CC'd threads.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; Draft a reply to Sarah. Tell her to restart the service, I'll push a fix today.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI:&lt;/strong&gt; Done. Here's the draft. Want me to send it?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Me:&lt;/strong&gt; Send it. What should I work on today based on those emails?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;AI:&lt;/strong&gt; 1. Fix the staging bug Sarah reported. 2. Address Mike's review comments. 3. Confirm the client license renewal by Friday.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I didn't open Outlook. I didn't Alt-Tab. I didn't copy-paste a single thing. My inbox was processed, my replies were sent, and my day was planned â€” all before 9:15.&lt;/p&gt;

&lt;p&gt;This isn't a mockup. This is my actual morning now. And the thing that makes it work took an afternoon to build.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Dumbest Moment That Started This
&lt;/h2&gt;

&lt;p&gt;I was three hours into debugging a race condition. Deep focus. The kind where you're holding six things in your head and one interruption resets all of them.&lt;/p&gt;

&lt;p&gt;A Slack message popped up: &lt;em&gt;"Sent you the stack trace on email."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;So I did what every developer does twelve times a day. Minimized the IDE. Opened Outlook. Scrolled past newsletters, build alerts, a meeting reschedule, three CC'd threads I didn't care about. Found the email. Selected the stack trace. Copied it. Switched back to the IDE. Pasted it.&lt;/p&gt;

&lt;p&gt;And then sat there for four minutes trying to remember what I was doing before.&lt;/p&gt;

&lt;p&gt;My AI assistant was right there in the editor the entire time. It can search through 10,000 files in my codebase. It can refactor an entire module. But it couldn't read one email sitting in the application &lt;em&gt;running right next to it&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;That felt dumb. So I fixed it.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Three-Line Secret
&lt;/h2&gt;

&lt;p&gt;Outlook on Windows has a built-in interface called COM. PowerShell speaks it natively. The entire connection:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight powershell"&gt;&lt;code&gt;&lt;span class="nv"&gt;$outlook&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;New-Object&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nt"&gt;-ComObject&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nx"&gt;Outlook.Application&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="nv"&gt;$ns&lt;/span&gt;&lt;span class="w"&gt;      &lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;$outlook&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;GetNamespace&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s2"&gt;"MAPI"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="nv"&gt;$inbox&lt;/span&gt;&lt;span class="w"&gt;   &lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="nv"&gt;$ns&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;GetDefaultFolder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;6&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No API keys. No sign-ups. No cloud portal. Outlook is already running on your desktop â€” this just lets another program talk to it.&lt;/p&gt;

&lt;p&gt;To make my AI understand this, I used MCP â€” Model Context Protocol. It's a standard for giving AI assistants new abilities. You define a function like "read inbox," and the AI can call it whenever it needs to.&lt;/p&gt;

&lt;p&gt;The bridge between the two is a small Node.js server:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Me (in IDE) â†’ AI â†’ MCP Server â†’ PowerShell â†’ Outlook
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;McpServer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@modelcontextprotocol/sdk/server/mcp.js&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="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;StdioServerTransport&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;require&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@modelcontextprotocol/sdk/server/stdio.js&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;mcpServer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;McpServer&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;outlook-com&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1.0.0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;main&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;transport&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;StdioServerTransport&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;mcpServer&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;transport&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;process&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;exit&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Ten lines. One npm package. One config file to tell the IDE where to find it:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"mcpServers"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"outlook"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"command"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"node"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="nl"&gt;"args"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s2"&gt;"mcp-servers/outlook-com-mcp/server.js"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Restart the IDE. That's the whole setup.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Actually Do With It Every Day
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Morning scan.&lt;/strong&gt; &lt;em&gt;"Read my last 20 emails. What needs a reply, what's FYI, what can I skip?"&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Reply (3):&lt;/strong&gt; Sarah â€” staging bug. Mike â€” PR questions. Client â€” license renewal.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;FYI (5):&lt;/strong&gt; Build alerts, sprint update, meeting reschedule.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Skip (12):&lt;/strong&gt; Newsletters, CC'd threads, automated noise.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Three emails that need me. Not forty-three.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Replies.&lt;/strong&gt; I tell the AI what to say. It reads the full email for context, drafts the reply. I tweak a line, say &lt;em&gt;"send it."&lt;/em&gt; No window switching. No losing my train of thought.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Todo list.&lt;/strong&gt; &lt;em&gt;"Based on what you just read, what should I work on today?"&lt;/em&gt; Done. My day is planned from my inbox.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Friday cleanup.&lt;/strong&gt; This one I found by accident. &lt;em&gt;"Search for all automated notifications from the last 7 days. Group by sender."&lt;/em&gt; â€” 14 from Jira, 9 from CI/CD, 6 newsletters I never read. I unsubscribed from four on the spot. Now I do this every Friday. Two minutes. Mailbox stays clean.&lt;/p&gt;

&lt;h2&gt;
  
  
  Build This Today
&lt;/h2&gt;

&lt;p&gt;Windows + Outlook + Node.js. That's the whole requirements list.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;code&gt;mkdir mcp-servers/outlook-com-mcp &amp;amp;&amp;amp; cd mcp-servers/outlook-com-mcp&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;npm init -y &amp;amp;&amp;amp; npm install @modelcontextprotocol/sdk&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Write &lt;code&gt;server.js&lt;/code&gt; â€” skeleton above + a function that runs PowerShell scripts&lt;/li&gt;
&lt;li&gt;Write your &lt;code&gt;.ps1&lt;/code&gt; scripts â€” each starts with the same three-line Outlook connection&lt;/li&gt;
&lt;li&gt;Add the config file, restart&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Fifteen minutes. One dependency. Your AI reads, searches, sends, and replies to email.&lt;/p&gt;

&lt;p&gt;Start with email. Once it works, you'll realize the same pattern connects anything on your machine â€” calendar, contacts, Excel. Same bridge. Same config. Same afternoon.&lt;/p&gt;

&lt;p&gt;If you build something with this, tell me in the comments. I'll be reading them from my IDE.&lt;/p&gt;

</description>
      <category>mcp</category>
      <category>productivity</category>
      <category>ai</category>
      <category>automation</category>
    </item>
    <item>
      <title>From Overwhelmed Team Lead to AI Orchestrator: How I Took Back Control of My Dev Life</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sun, 08 Mar 2026 15:50:06 +0000</pubDate>
      <link>https://forem.com/themeticulist/from-overwhelmed-team-lead-to-ai-orchestrator-how-i-took-back-control-of-my-dev-life-16gj</link>
      <guid>https://forem.com/themeticulist/from-overwhelmed-team-lead-to-ai-orchestrator-how-i-took-back-control-of-my-dev-life-16gj</guid>
      <description>&lt;p&gt;&lt;em&gt;13 years building .NET products. Team lead. This is what the last 8 months taught me.&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  The Anxiety Phase
&lt;/h2&gt;

&lt;p&gt;13 years as a .NET engineer. I thought I had seen everything.&lt;/p&gt;

&lt;p&gt;Then May 2025 happened and my team started using &lt;strong&gt;Cursor&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;Before that my week was fine. 1 maybe 2 stories, a couple of PR reviews, some back and forth with business. This is what my week looked like.&lt;/p&gt;

&lt;p&gt;Then almost overnight it wasn't.&lt;/p&gt;

&lt;p&gt;Stories went from &lt;strong&gt;1-2 per week ** to **1-2 per day&lt;/strong&gt;. PRs went from a couple a week to 3-5 queued at any given time. Communication items - Slack threads, business questions, QA back and forth - just kept stacking. Every morning I'd open Slack and already feel behind before I'd done anything.&lt;/p&gt;

&lt;p&gt;The reason was my team had picked up Cursor.&lt;/p&gt;

&lt;p&gt;Juniors who used to write 20 lines and check with me, were now shipping whole features. Which sounds great right! It isn't great when you're the one reviewing it. I went from leaving 3-5 comments per PR to 10, 20, sometimes 30. Because Cursor was directing them, not them directing Cursor. Every architectural call, every pattern decision, every naming choice the tool made - that all landed in my queue.&lt;/p&gt;

&lt;p&gt;And the sprint numbers looked incredible from the outside. 10 stories per sprint became 25 stories per sprint. Leadership was happy. I was not.&lt;/p&gt;

&lt;p&gt;I still had my own stories to deliver. Business teams still needed answers. QA still needed help with test plans except now there was 2.5x the surface area to cover. Every part of my job got multiplied at the same time.&lt;/p&gt;

&lt;p&gt;I don't want to be dramatic about it but those 8 months - from May 2025 to around last month - were genuinely an anxiety phase for me. Every sprint was really a "Sprint" there was no time to relax. Before it was always to hard sprints and one medium sprint were you can relax a bit (Real developer know , this is needed. We cannot constantly run, we are humans and we need breaks.)&lt;/p&gt;




&lt;h2&gt;
  
  
  The Click
&lt;/h2&gt;

&lt;p&gt;One day I'm sitting there with a PR queue, a stack of Slack threads, 2 stories in progress, a test plan that needs my input - and it just hit me. (This is something that happens with all the developers. It will just hit you. No prepration needed or process to follow. It just hits)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;All I had to do was give up my ego.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That was it. That was the whole thing.&lt;/p&gt;

&lt;p&gt;I had spent 13 years being the person who understood the codebase, caught the bugs, knew the patterns. And I was holding onto that identity while everything around me had already moved on. I was trying to do the work when I should have been directing something that could do it for me.&lt;/p&gt;

&lt;p&gt;The second I made that switch in my head - Cursor is not a tool I use, it is an incredibly capable assistant I manage - I knew exactly what to build.&lt;/p&gt;




&lt;h2&gt;
  
  
  Step Zero: Building the System
&lt;/h2&gt;

&lt;p&gt;First thing I did. No magic prompts, no clever tricks. Just sat down and built 4 things:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. MCP Servers&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Slack server&lt;/li&gt;
&lt;li&gt;ADO server&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So Cursor could actually see my world, not just my code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Cursor Rules&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;13 years of pattern knowledge sitting in my head - SQL CRUD conventions, code flow, project-specific standards. If I have left the same PR comment more than twice it is now a rule. Cursor doesn't guess, it follows. (If you are thinking of building this dont over complicate it, just give curosr the rules you follow in the code. They can be just one or two and ask cursor to create rules. It will do it for you. In next one week, trust me, you will create a document of rules)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Cursor Skills&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Branch naming, PR structure, commit messages - the repetitive stuff. I created skills so Cursor handles it consistently without me having to specify every time. (Dont complicate this either. what ever repeatable stuff you do in your project, create a skill for each)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. A Prompt for Every Job&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Triage, review, execution, communication, test planning - each one has a prompt. Not vague. Specific. Cursor knows what role it is playing and what I need out of it.&lt;/p&gt;

&lt;p&gt;That is the foundation. Everything I am going to walk you through is built on those 4 things.&lt;/p&gt;




&lt;h2&gt;
  
  
  One Window. That Was the Rule.
&lt;/h2&gt;

&lt;p&gt;Now once the setup was done, I did the same things I have always done, but this time I used Cursor as my only window of operation.&lt;/p&gt;

&lt;p&gt;Developers will relate to this - the more we switch windows the more context switching happens - it feels like and it drains energy. So I said Cursor will be my window of operation. That's it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Now this is how my day looked
&lt;/h2&gt;

&lt;p&gt;As soon as I start working I ask Cursor to look into all posts that mention me or my name in the last 36 hours, give me an analysis of what is expected from me, and break it down into tasks.&lt;/p&gt;

&lt;p&gt;Those tasks fall into buckets:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Communication tasks&lt;/strong&gt; - Cursor spawns separate threads, analyses each one, creates appropriate responses. I review and send.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ADO comment tasks&lt;/strong&gt; - Based on the item I analyse it and ask Cursor to add the appropriate comments.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Priority ADO stories&lt;/strong&gt; - This is where it gets interesting. Cursor:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyses the story&lt;/li&gt;
&lt;li&gt;Creates an execution plan and a test plan&lt;/li&gt;
&lt;li&gt;Creates the branch - I have a skill that handles the branch naming convention and the parent branch&lt;/li&gt;
&lt;li&gt;Generates the code using Cursor rules that point to SQL table CRUD patterns, code flow based on patterns already in the repo, and other coding conventions&lt;/li&gt;
&lt;li&gt;Commits with proper comments&lt;/li&gt;
&lt;li&gt;Raises a fresh PR and gives feedback on the changes&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Then I manually look into the code, give Cursor the PR comments to fix, it fixes them.&lt;/p&gt;

&lt;p&gt;Post merge - I direct Cursor to execute the test plan and ask it to attach test comments and screenshots to the story. I review the testing scenario and if everything looks good I close the story.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For engineering heavy items&lt;/strong&gt; - I give feedback post code generation. I make sure to ask all the questions, I need on the generated code for my own understanding, and I give Cursor proper correction and feedback. This process over time sharpens Cursor - better code generation, faster delivery, less back and forth.&lt;/p&gt;




&lt;h2&gt;
  
  
  Things I Discovered Along the Way
&lt;/h2&gt;

&lt;p&gt;Once the core workflow was running I started pushing Cursor further and was genuinely surprised by what it could handle.&lt;/p&gt;

&lt;p&gt;Cursor can log into web applications in Chrome, navigate them and do UI testing - and you can watch it happen in real time. It can also connect to Chrome's dev tools, open your website and run UI testing from there. I did a lot of local testing this way and asked Cursor to give me screenshots for validation.&lt;/p&gt;

&lt;p&gt;It can analyse logs too. You give it the location where your logs are stored and it gives you root causes behind bugs. It can even look into information logs, analyse performance from the log timestamps and tell you exactly what you should be looking into and why.&lt;/p&gt;

&lt;p&gt;Overall Cursor is a very powerful tool. And from what I have seen you should be able to achieve the same workflow using Claude Code as well.&lt;/p&gt;

&lt;p&gt;One thing to note - for heavier tasks I use either Claude Opus or Gemini inside Cursor depending on what the task needs.&lt;/p&gt;




&lt;h2&gt;
  
  
  Never Let Cursor Direct You
&lt;/h2&gt;

&lt;p&gt;This is the most important thing in this entire post.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;You are still the one coding. Never forget that.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Senior devs will relate to this. Most of the time before Cursor or Claude, the high was in finding the solution. The labour - the actual typing, the boilerplate, the repetitive implementation - that is what you would delegate to a junior. The problem with delegating to a junior was always making them understand what to do.&lt;/p&gt;

&lt;p&gt;That is exactly what you should do with Cursor. Except instead of a junior dev you have an incredibly intelligent assistant at hand. You bring the domain knowledge, the architecture instinct, the product context. Cursor brings the execution. That combination is unbeatable.&lt;/p&gt;




&lt;h2&gt;
  
  
  You Don't Need a Git Repo to Get Started
&lt;/h2&gt;

&lt;p&gt;I know devs don't want fluff. You want real code, git repos, assets you can clone and run.&lt;/p&gt;

&lt;p&gt;I did not intentinally attach this stuff.&lt;/p&gt;

&lt;p&gt;Simply ask Cursor to read through this post and ask it to give you a plan on what to set up to streamline your own workflow the way I have done it. Trust me - it will do it. All you have to do is execute that plan.&lt;/p&gt;

&lt;p&gt;And just like that you have passed the phase of burnout.&lt;/p&gt;




&lt;h2&gt;
  
  
  One Last Thing About Prompts
&lt;/h2&gt;

&lt;p&gt;Don't overthink them. A prompt is just your thought process written down - the same step by step thinking you already use to solve your day to day tasks. Just give Cursor that thought process and ask it to create the prompts for you. It will. And they will be better than anything you would have spent an hour writing yourself.&lt;/p&gt;

&lt;h2&gt;
  
  
  I am writing this after long time. Any comments are more than appriciated.
&lt;/h2&gt;

</description>
      <category>webdev</category>
      <category>career</category>
      <category>ai</category>
      <category>productivity</category>
    </item>
    <item>
      <title>[Post-4][LINQ] Yield-Performance</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sun, 31 Oct 2021 17:33:53 +0000</pubDate>
      <link>https://forem.com/themeticulist/post-4linq-yield-performance-2053</link>
      <guid>https://forem.com/themeticulist/post-4linq-yield-performance-2053</guid>
      <description>&lt;h2&gt;
  
  
  [Post-4][LINQ] Yield-Performance
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--6nzJyvhL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1.medium.com/max/2160/1%2ATg6-0yVJkTZ1YzoXU36UoQ.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--6nzJyvhL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://cdn-images-1.medium.com/max/2160/1%2ATg6-0yVJkTZ1YzoXU36UoQ.gif" alt="" width="880" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using yield return has a great performance benefit when querying the data. That is because, the data is returned only when it is iterated.&lt;/p&gt;

&lt;p&gt;For example If you have to run multiple queries on a collection, one way is to iterate the collection for each query. The other way is to compile all the queries together and then run them once on the collection. The second way is better in performance and also has less memory footprint.&lt;/p&gt;

&lt;p&gt;Lets look into an example to establish the above point. [Source code is provided in the end of the blog as a github gist]. In the example we will filter a list of numbers and get multiples of 6.&lt;/p&gt;

&lt;p&gt;Below is the list of numbers from 1 to 20.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List&amp;lt;int&amp;gt; numbers = new List&amp;lt;int&amp;gt;() { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;Lets do the filtering as a two step process.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;First we will filter the numbers that are divisible by &lt;strong&gt;2&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Then, we will filter the numbers that are divisible by &lt;strong&gt;3&lt;/strong&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Below are two functions bool DivideBy2(int x) and bool DivideBy3(int x) that return &lt;strong&gt;true&lt;/strong&gt; if the number is divisible by &lt;strong&gt;2 or 3 respectively&lt;/strong&gt;.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;private bool DivideBy2(int x)       
{           
 if (x % 2 == 0)
 {                
   return true;         
 }           
 else 
 {               
   return false;           
 }       
}

private bool DivideBy3(int x)       
{           
 if (x % 3== 0)
 {                
   return true;         
 }           
 else 
 {               
   return false;           
 }       
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;Now lets create the a &lt;strong&gt;Filter&lt;/strong&gt; extension on IEnumerable that filters the given enumerable based on a given predicate.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public static IEnumerable&amp;lt;int&amp;gt; **FilterWithOutYield**(
this IEnumerable&amp;lt;int&amp;gt; **enumerable**, Func&amp;lt;int, bool&amp;gt; **func**)        
{
  IEnumerator&amp;lt;int&amp;gt; **enumerator **= enumerable.GetEnumerator();
  List&amp;lt;int&amp;gt; result = new List&amp;lt;int&amp;gt;();
  **while (enumerator.MoveNext())**
   {
      **if (func(enumerator.Current))**
      {
        **result.Add(enumerator.Current);**
      }
   }
  **return result as IEnumerable&amp;lt;int&amp;gt;;**
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;The above function **FilterWithOutYield **has two parameters&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;enumerable&lt;/strong&gt;: The data on which this **FilterWithOutYield **is executed on.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;func&lt;/strong&gt;: This function acts as a filter and helps decide whether the item filtered or not.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So the function is doing 3 things here&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Iterating over the &lt;strong&gt;enumerable **in the while loop using its enumerator. [&lt;/strong&gt;while loop**]&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Filtering those numbers that satisfy the given predicate &lt;strong&gt;func. **[&lt;/strong&gt;If **]&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Adding them to a list and returning them*&lt;em&gt;. [result]&lt;/em&gt;*&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Lets call the above **FilterWithOutYield **on the list of 20 numbers that we have created in the beginning.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List&amp;lt;int&amp;gt; **numbers **= new List&amp;lt;int&amp;gt;() { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 };
            List&amp;lt;int&amp;gt; multiplesOfSix =
                (
numbers.FilterWithOutYield(**DivideBy2**) // returns a list 
       .FilterWithOutYield(**DivideBy3**) // returns a list

) as List&amp;lt;int&amp;gt;;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;In the above code &lt;strong&gt;FilterWithOutYield *&lt;em&gt;is called *&lt;/em&gt;&lt;/strong&gt;twice on the numbers.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;First time, **DivideBy2 **is used as the predicate. The function filters all the numbers divisible by 2 and returns a list.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Second time, **DivideBy3 **is used as the predicate. The function filters all the numbers divisible by 3 from the above list of numbers and returns another list.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At last a list of numbers that are divisible by 6 are returned. Here if you observe we are &lt;strong&gt;iterating through the collection twice and returning a new List at each stage&lt;/strong&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I.e. If &lt;strong&gt;FilterWithOutYield&lt;/strong&gt; is chained &lt;strong&gt;n&lt;/strong&gt; times , the iterations are also proportionately increased and also the number of &lt;strong&gt;lists&lt;/strong&gt; returned.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now, lets look at a better way of doing the same using Yield. Below is the &lt;strong&gt;FilterWithYield *&lt;em&gt;function that filters an enumerable and uses *&lt;/em&gt;*yield return.&lt;/strong&gt;*&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;public static IEnumerable&amp;lt;int&amp;gt; FilterWithYield(
this IEnumerable&amp;lt;int&amp;gt; enumerable, Func&amp;lt;int,bool&amp;gt; func)
{
   IEnumerator&amp;lt;int&amp;gt; enumerator = enumerable.GetEnumerator();
   while (enumerator.MoveNext()) 
   {
     if (**func(enumerator.Current)**)
     {
       **yield return enumerator.Current;**
     }
   }
 }
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;If you note, in the above method we are not returning any list instead we are doing an &lt;strong&gt;yield return.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Lets call this method on an enumerable and see how it works.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;List&amp;lt;int&amp;gt; numbers = new List&amp;lt;int&amp;gt;() { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 };

IEnumerable&amp;lt;int&amp;gt; multiplesOfSixUsingYield =
numbers.FilterWithYield(**DivideBy2**) // The list is not iterated.
       .FilterWithYield(**DivideBy3**); //Instead enumerator is returned
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;The above code does not iterate over **numbers, **and therefore does not go into either of **DivideBy2 **or **DivideBy3 **methods. Instead an enumerator is created that uses both **DivideBy2 **and **DivideBy3 **methods to filter the enumerable.&lt;/p&gt;

&lt;p&gt;To fetch a collection from the above code, the &lt;strong&gt;multiplesOfSixUsingYield *&lt;em&gt;has to be iterated using a *&lt;/em&gt;*foreach&lt;/strong&gt;* as below, or using extension methods like &lt;em&gt;**ToList() *&lt;/em&gt;&lt;em&gt;or *&lt;/em&gt;&lt;em&gt;ToArray()&lt;/em&gt;**.&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;foreach (int x in multiplesOfSixUsingYield) 
{              
   Console.WriteLine(x);
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;p&gt;Because of &lt;strong&gt;&lt;em&gt;yield return&lt;/em&gt;&lt;/strong&gt;, the enumerable is iterated only once irrespective of the number of times the &lt;strong&gt;FilterWithYield&lt;/strong&gt; method is used, improving the time and also decreasing the memory foot print.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;

&lt;p&gt;&lt;br&gt;&lt;br&gt;
Hope, you have liked the article. Keep reading. Thanks.&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>dotnet</category>
      <category>programming</category>
      <category>100daysofcode</category>
    </item>
    <item>
      <title>[Post-3][LINQ] — Yield</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sun, 31 Oct 2021 17:31:00 +0000</pubDate>
      <link>https://forem.com/themeticulist/post-3linq-yield-53fd</link>
      <guid>https://forem.com/themeticulist/post-3linq-yield-53fd</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tEO62NU7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2160/1%2ALYZGDNMhwoGTWm66buKIGw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tEO62NU7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/2160/1%2ALYZGDNMhwoGTWm66buKIGw.png" alt="" width="880" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Yield in C# is very tricky concept and would take at least a couple of reads to understand its use or purpose. Lets try to de -mystify this concept and understand its use and purpose in this article. Get buckled up for an interesting read.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://medium.com/learninbytes/post-1-linq-enumerable-6804e4d6672c"&gt;***Enumerable &lt;/a&gt;&lt;em&gt;**and &lt;a href="https://medium.com/learninbytes/post-2-linq-ienumerator-31f5e3962f84"&gt;***Enumerator&lt;/a&gt; *&lt;/em&gt;&lt;em&gt;are foundational concepts to understanding of **Yield&lt;/em&gt;&lt;em&gt;. Any method that does *yield return&lt;/em&gt; should return an &lt;em&gt;**Iterator. *&lt;/em&gt;*For a method to return an Iterator, its return type must of be one of the below types.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;IAsyncEnumerable&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;IEnumerable&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;IEnumerable&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;IEnumerator&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;IEnumerator&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you are wondering what these * *declarations mean, don’t worry, these are part of *Generics, *which will be covered in necessary proportions in the upcoming chapters. For now you can ignore them.&lt;/p&gt;



&lt;p&gt;Add breakpoints at line 17 and at lines 22 till 26 then run the code. You’ll notice that the code does not go into *YieldNumber() *method. It bypasses the method and breaks directly at line 17.&lt;/p&gt;

&lt;p&gt;The reason behind this functionality is that, yield return does a Lazy evaluation.&lt;/p&gt;

&lt;p&gt;Lazy evaluation in this context means that, until the YieldNumber() method is iterated the yield return statements are not executed.&lt;/p&gt;

&lt;p&gt;Now uncomment the line from 12 to 16 and execute the program.&lt;/p&gt;

&lt;p&gt;Notice that the program now goes into the *YieldNumber *method and breaks at each yield return statement for each iteration of the while loop.&lt;/p&gt;

&lt;p&gt;In the next post lets talk about &lt;strong&gt;how Yield and LINQ are related&lt;/strong&gt; and understand &lt;strong&gt;performance benefits of LINQ.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The posts in this publication are intentionally kept short for easier learning.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Any comment from you is greatly appreciated. Thanks!!!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>dotnet</category>
      <category>programming</category>
      <category>100daysofcode</category>
    </item>
    <item>
      <title>[Post 2]LINQ -IEnumerator</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sun, 31 Oct 2021 17:25:28 +0000</pubDate>
      <link>https://forem.com/themeticulist/post-2linq-ienumerator-1954</link>
      <guid>https://forem.com/themeticulist/post-2linq-ienumerator-1954</guid>
      <description>&lt;h2&gt;
  
  
  [Post-2] [LINQ] IEnumerator
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--nzR3tChX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/4490/1%2AE5b6X6tbMxcQrZ7YbDygYw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nzR3tChX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/4490/1%2AE5b6X6tbMxcQrZ7YbDygYw.png" alt="" width="880" height="622"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now that we have talked about &lt;a href="https://medium.com/@yashaswi.yogeshwara?p=6804e4d6672c"&gt;*“Enumerable”&lt;/a&gt; .&lt;em&gt;Lets talk about *“Enumerator”.&lt;/em&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;Enumerators are those that make a data structure Enumerable.&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I.e. Enumerators help traverse or iterate an Enumerable. IEnumerable and IEnumerator implement the &lt;em&gt;“Iterator Pattern”.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=uNTNEfwYXhI"&gt;**Iterator&lt;/a&gt;** is a behavioral design pattern that lets you traverse elements of a collection without exposing its underlying representation (list, stack, tree, etc.).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Making it simple Iterator pattern asks us to separate the underlying data collection and the functionality to traverse it.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Below are the IEnumerator and IEnumerable interfaces. IEnumerable exposes a method which returns an IEnumerator. IEnumerator provides following methods and properties.&lt;/p&gt;



&lt;p&gt;&lt;strong&gt;bool&lt;/strong&gt; &lt;strong&gt;MoveNext()&lt;/strong&gt;: Moves the pointer to next item in the collection and returns &lt;strong&gt;&lt;em&gt;true&lt;/em&gt;&lt;/strong&gt;. If the pointer is at the end of collection it returns &lt;strong&gt;&lt;em&gt;false&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;**object Current: **This property provides the current values of the item the pointer is located at.&lt;/p&gt;

&lt;p&gt;**void Reset(): **Although not extensively used or is part of *Iterator pattern *UML diagram, this method sets the pointer to the initial value of the collection.&lt;/p&gt;

&lt;p&gt;Look at the below example where different data structures return their Enumerators using which the these are iterated.&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;br&gt;
If you notice, in the above code we are iterating different data structures using same method &lt;strong&gt;&lt;em&gt;“Enumerate”&lt;/em&gt;&lt;/strong&gt;. If you get back to the *Iterator Pattern *definition, irrespective of the characteristics or internal implementation of the data structure we are able to iterate them uniformly.

&lt;p&gt;Although it is not a common practice to use the enumerator for iterating a data structure. [Instead we would use the &lt;em&gt;foreach *loop directly.] Understanding this particular concept helps in understanding **LINQ&lt;/em&gt;*.&lt;/p&gt;

&lt;p&gt;In the next post lets look into &lt;em&gt;**Yield *&lt;/em&gt;*and how IEnumerable and Yield are linked together.&lt;/p&gt;

&lt;p&gt;Thanks, please subscribe to the publication for more interesting posts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;[References]&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Iterator Pattern&lt;/strong&gt; : &lt;a href="https://www.youtube.com/watch?v=uNTNEfwYXhI"&gt;*https://www.youtube.com/watch?v=uNTNEfwYXhI&lt;/a&gt;*&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>dotnet</category>
      <category>programming</category>
      <category>100daysofcode</category>
    </item>
    <item>
      <title>[Post 1]LINQ -Enumerable</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sun, 31 Oct 2021 17:11:51 +0000</pubDate>
      <link>https://forem.com/themeticulist/post-1linq-enumerable-4bo5</link>
      <guid>https://forem.com/themeticulist/post-1linq-enumerable-4bo5</guid>
      <description>&lt;h2&gt;
  
  
  [Post 1]LINQ -Enumerable
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iVOqCdcB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/4490/1%2Ai5q5ZimWRcGDLeVVZ4Ggjg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iVOqCdcB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1.medium.com/max/4490/1%2Ai5q5ZimWRcGDLeVVZ4Ggjg.png" alt="" width="880" height="622"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Enumerable is a data structures that can be iterated, counted or enumerated. Array, List, Dictionary are some data structures that are Enumerable.&lt;/p&gt;

&lt;p&gt;In perspective of C# any Object that implements “*IEnumerable” *interface is an Enumerable. Array, List, Dictionary are some of the data structures that implement IEnumerable.&lt;/p&gt;

&lt;p&gt;Every IEnumerable can support the use of &lt;em&gt;“foreach()” *method for iterating the collection. [This post limits itself to the concept of IEnumerable and does not divulge into “*IEnumerable”.&lt;/em&gt;]&lt;/p&gt;

&lt;h3&gt;
  
  
  Documentation
&lt;/h3&gt;

&lt;p&gt;IEnumerable is part of “&lt;em&gt;System.Collections” *namespace. IEnumearble contains only a single method *“GetEnumerator()” *which returns an “*IEnumerator”.&lt;/em&gt;[A seperate post is being written on &lt;em&gt;“IEnumerator” *which would be published shortly.]&lt;br&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;br&gt;
A series of posts would follow this that talk about *“IEnumerator” , “Iterator Pattern” *and *“LINQ”.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The posts are written small intentionally. The purpose of these posts is to provide information in nuggets for faster assimilation, keeping it short and simple.&lt;/p&gt;

&lt;p&gt;`&lt;/p&gt;

</description>
      <category>csharp</category>
      <category>dotnet</category>
      <category>100daysofcode</category>
      <category>programming</category>
    </item>
    <item>
      <title>Everything you should know about Styles in Angular</title>
      <dc:creator>yashaswi</dc:creator>
      <pubDate>Sat, 08 Jun 2019 17:36:56 +0000</pubDate>
      <link>https://forem.com/themeticulist/everything-you-should-know-about-styles-in-angular-12ab</link>
      <guid>https://forem.com/themeticulist/everything-you-should-know-about-styles-in-angular-12ab</guid>
      <description>&lt;h3&gt;
  
  
  In this article we will talk about
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;H&lt;/strong&gt;ow to add styles to components in Angular.&lt;/li&gt;
&lt;li&gt;Global styles in Angular. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;W&lt;/strong&gt;hat is &lt;em&gt;ViewEncasulation&lt;/em&gt; property and how does it effect the Component Styles.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So lets get Started!!!&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Component Styles in Angular&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;To understand this lets quickly create an angular application.&lt;br&gt;
&lt;code&gt;&amp;gt; ng new StylesInNg&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Below is the &lt;code&gt;app.component.html&lt;/code&gt; and its &lt;code&gt;css&lt;/code&gt; file. To this component's &lt;code&gt;span&lt;/code&gt; element, a blue color style is added.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5pl0xzd317971e0d9dbr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5pl0xzd317971e0d9dbr.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now lets add another component and do the same, except, instead of blue this time lets add red color.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs90lkpllgi29leh5y93x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs90lkpllgi29leh5y93x.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And this is how it looks in the Browser.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2iixi62ihl2mmv7r0cqq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2iixi62ihl2mmv7r0cqq.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;See, the &lt;code&gt;app.component&lt;/code&gt; header span element is blue in color and the &lt;code&gt;info.component&lt;/code&gt; header span element is red in color. &lt;br&gt;
Now look into their styles in the same image. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;


&lt;span class="nt"&gt;&amp;lt;style&amp;gt;header&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;_ngcontent-c0&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;   &lt;span class="nt"&gt;span&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;_ngcontent-c0&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;blue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;/style&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;style&amp;gt;header&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;_ngcontent-c1&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;   &lt;span class="nt"&gt;span&lt;/span&gt;&lt;span class="o"&gt;[&lt;/span&gt;&lt;span class="nt"&gt;_ngcontent-c1&lt;/span&gt;&lt;span class="o"&gt;]&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nl"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="no"&gt;red&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="nt"&gt;&amp;lt;/style&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;app-root&lt;/span&gt; &lt;span class="na"&gt;_nghost-c0=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="na"&gt;ng-version=&lt;/span&gt;&lt;span class="s"&gt;"6.1.10"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;header&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c0=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c0=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;This is the header&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c0=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;This is some paragraph&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;app-info&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c0=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt; &lt;span class="na"&gt;_nghost-c1=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;header&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c1=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;span&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c1=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;This is the header of Info Component&lt;span class="nt"&gt;&amp;lt;/span&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;p&lt;/span&gt; &lt;span class="na"&gt;_ngcontent-c1=&lt;/span&gt;&lt;span class="s"&gt;""&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;This is some paragraph in Info Component&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/app-info&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/app-root&amp;gt;&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Notice the attributes &lt;code&gt;_nghost-c0 , _ngcontent-c1&lt;/code&gt;, that are present on the header, span elements and on their respective styles. These are attributes that angular uses to isolate component styles from one another. This is called as &lt;strong&gt;Emulated Shadow DOM&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;In summary, by &lt;strong&gt;default&lt;/strong&gt; all the elements of a component will have a specific attribute given by angular and the same attributes are set to their styles, thereby creating Style Isolation in components.&lt;/p&gt;

&lt;p&gt;For a deeper dive on this you can look &lt;a href="https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;G&lt;/strong&gt;lobal styles in Angular.
&lt;/h3&gt;

&lt;p&gt;Any, .css or .sass style sheet added in the &lt;code&gt;styles[]&lt;/code&gt; in angular.json is considered as a global style. By default, &lt;code&gt;styles.css&lt;/code&gt; sheet is present in this array.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc3j7x9qokh0rluhm69l6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc3j7x9qokh0rluhm69l6.png"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;h4&gt;
  
  
  Some points on Global styles.
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;You can use &lt;code&gt;@import&lt;/code&gt; statements in styles.css to add styles sheets to global styles.&lt;/li&gt;
&lt;li&gt;Adding style sheets in &lt;code&gt;styles[]&lt;/code&gt; or in &lt;code&gt;styles.css&lt;/code&gt; will make them global and there is no difference between these two.&lt;/li&gt;
&lt;li&gt;Global styles do not have angular attributes attached to them unlike the component styles.&lt;/li&gt;
&lt;li&gt;Component styles override the global styles.&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  ViewEnapuslation.
&lt;/h3&gt;

&lt;p&gt;Lets understand &lt;strong&gt;ShadowDom&lt;/strong&gt; first. Add a date element to &lt;code&gt;info.component&lt;/code&gt; and open Chrome Dev Tools &amp;gt; Elements &amp;gt; Settings  and check the &lt;em&gt;Show user agent shadow dom&lt;/em&gt;  option. Inspect the date element in the dev tools. &lt;/p&gt;


&lt;p&gt;&lt;a href="https://giphy.com/gifs/m9jU8q7hEbhNBbNxrJ" rel="noopener noreferrer"&gt;via GIPHY&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftmu3wux8944q1505xidp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftmu3wux8944q1505xidp.png"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Notice, &lt;code&gt;&amp;lt;input type="date"&amp;gt;&lt;/code&gt; element has a whole new DOM inside it, this is called Shadow dom. &lt;/p&gt;

&lt;h4&gt;
  
  
  &lt;em&gt;A parallel DOM created by the browser that encapsulates the markup, style, and behavior (DOM manipulation) of an HTML element.&lt;/em&gt;
&lt;/h4&gt;

&lt;p&gt;Angular emulates the shadow dom concept, where it encapsulates the markup, style, and behavior of the component by default and this is called &lt;em&gt;Emulated&lt;/em&gt; type of encapsulation.&lt;/p&gt;

&lt;p&gt;A component decorator contains a property called &lt;code&gt;encapsulation&lt;/code&gt; that sets the &lt;code&gt;ViewEncapsulation&lt;/code&gt; value.&lt;/p&gt;

&lt;p&gt;There are three modes of encapsulation.&lt;/p&gt;

&lt;p&gt;1.&lt;code&gt;ViewEncapsulation.Emulated&lt;/code&gt;:[The default value] Angular creates a emulated shadow dom here and isolates the component styles. However, the components can still inherit the global styles in this mode.&lt;/p&gt;

&lt;p&gt;2.&lt;code&gt;ViewEncapsulation.Native&lt;/code&gt;:In this mode the component does not inherit the global styles and also the component styles are isolated.&lt;/p&gt;

&lt;p&gt;3.&lt;code&gt;ViewEncapsulation.None&lt;/code&gt;: In this mode the component styles become global and their is no more isolation.&lt;/p&gt;

&lt;p&gt;Below is &lt;code&gt;app.component.html&lt;/code&gt; code.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;

&lt;span class="nt"&gt;&amp;lt;header&amp;gt;&lt;/span&gt;This is header&lt;span class="nt"&gt;&amp;lt;/header&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;This is paragraph&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;app-content&amp;gt;&lt;/span&gt;
   &lt;span class="nt"&gt;&amp;lt;app-info&amp;gt;&amp;lt;/app-info&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/app-content&amp;gt;&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Note, a component cannot inherit styles of its parent. In the above html code the &lt;code&gt;&amp;lt;app-content&amp;gt;&lt;/code&gt; component can not inherit the styles of  &lt;code&gt;app.component&lt;/code&gt; and also &lt;code&gt;&amp;lt;app-info&amp;gt;&lt;/code&gt; component can not inherit the styles of &lt;code&gt;&amp;lt;app-content&amp;gt;&lt;/code&gt; component&lt;/p&gt;

</description>
      <category>angular</category>
      <category>shadowdom</category>
      <category>viewencapsulation</category>
    </item>
  </channel>
</rss>
