<?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: aiw3n</title>
    <description>The latest articles on DEV Community by aiw3n (@aiw3n).</description>
    <link>https://dev.to/aiw3n</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2403544%2F1b3baad1-c5a3-44a3-b68b-40d0f1f09e91.png</url>
      <title>DEV Community: aiw3n</title>
      <link>https://dev.to/aiw3n</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aiw3n"/>
    <language>en</language>
    <item>
      <title>I built a Ruby hosting platform and I'm looking for 10 early adopters (free for 3 months)</title>
      <dc:creator>aiw3n</dc:creator>
      <pubDate>Fri, 09 Oct 2026 12:16:32 +0000</pubDate>
      <link>https://dev.to/aiw3n/i-built-a-ruby-hosting-platform-and-im-looking-for-10-early-adopters-free-for-3-months-3doc</link>
      <guid>https://dev.to/aiw3n/i-built-a-ruby-hosting-platform-and-im-looking-for-10-early-adopters-free-for-3-months-3doc</guid>
      <description>&lt;p&gt;Hi everyone,&lt;/p&gt;

&lt;p&gt;I'm a Rubyist and I've been building Enkihost, a hosting platform focused on Ruby and Rails apps. The idea is simple: something between "Heroku is too expensive" and "managing my own VPS is too much work".&lt;/p&gt;

&lt;p&gt;Where it stands today: deploys take around 11 seconds, and you get a dashboard with logs, domains, a terminal, config, add-ons and backups.&lt;/p&gt;

&lt;p&gt;Where it doesn't stand yet: it has no users. That's why I'm here.&lt;/p&gt;

&lt;p&gt;I'm looking for 10 people willing to host a real app (side projects are perfect) for free for 3 months. In exchange I'd love honest feedback: what's confusing, what's missing, what breaks.&lt;/p&gt;

&lt;p&gt;If you're interested, comment or DM me. Happy to answer any questions about how it works under the hood.&lt;/p&gt;

&lt;p&gt;enkihost.com&lt;/p&gt;

</description>
      <category>ruby</category>
      <category>showdev</category>
      <category>startup</category>
      <category>webdev</category>
    </item>
    <item>
      <title>The Challenges of Vibe Coding: Staying Focused Amidst Memory Chaos</title>
      <dc:creator>aiw3n</dc:creator>
      <pubDate>Sun, 06 Apr 2025 13:49:32 +0000</pubDate>
      <link>https://dev.to/aiw3n/the-challenges-of-vibe-coding-staying-focused-amidst-memory-chaos-2e78</link>
      <guid>https://dev.to/aiw3n/the-challenges-of-vibe-coding-staying-focused-amidst-memory-chaos-2e78</guid>
      <description>&lt;p&gt;As developers, we’ve all been there—coding away, only to find ourselves suddenly caught up in a stream of unrelated ideas or thoughts. It’s like we’re coding in the "vibe," but at the same time, we have to juggle multiple mental threads to avoid losing track of the task at hand.&lt;/p&gt;

&lt;p&gt;One of the most unique aspects of vibe coding is the constant mental balancing act. We need to keep an active memory of all the concepts, pieces of code, or tasks we’ve touched during our coding journey. This is particularly challenging when there are multiple threads of conversation or tasks involved, such as while working on a collaborative project or engaging in discussions during pair programming or team meetings.&lt;br&gt;
The Memory Challenge&lt;/p&gt;

&lt;p&gt;When coding in this "vibe" mode, it’s like our brains are hosting a chat with ourselves. Every idea or concept we interact with needs to be stored somewhere to ensure we don’t stray from our goal. You have to maintain the "memory" of where you left off with each part of the task, especially if it’s a multi-step process or involves jumping between different files or languages. This can get messy and overwhelming.&lt;/p&gt;

&lt;p&gt;Imagine, for example, you’re working on a specific function, but midway through, you’re distracted by a potential optimization or a bug elsewhere in the codebase. You must quickly switch gears, remember where you left off, and then shift back into the groove of the original task. The mental strain of continuously refocusing on the task at hand, without getting lost in side thoughts, can be exhausting.&lt;br&gt;
How to Keep the Flow&lt;/p&gt;

&lt;p&gt;So, how do you navigate vibe coding without losing track of the task? A few strategies that might help:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Break Tasks Down: Having clear, manageable tasks and goals makes it easier to stay on track. Instead of focusing on the entire project at once, break down tasks into smaller, more digestible pieces.

Use Tools to Your Advantage: Take advantage of your code editor’s features like comments, bookmarks, and tasks lists. These simple features can help keep track of what’s next and avoid forgetting what you were doing when you got distracted.

Timeboxing: Set short intervals of focus time (like the Pomodoro technique) where you concentrate solely on the current task, and during breaks, clear your mind of unrelated thoughts.

Collaborative Tools: In team environments, collaborative platforms like Slack, Jira, or Trello can serve as external memory banks for keeping track of where each task or discussion stands, reducing the mental load.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;The Payoff&lt;/p&gt;

&lt;p&gt;Despite the inherent challenges, vibe coding can be incredibly productive if approached with the right mindset and tools. The key is recognizing when you’re getting sidetracked and reining yourself back in, while still embracing the creative process.&lt;/p&gt;

&lt;p&gt;It’s a delicate balance, but when you manage it, you can code with purpose, productivity, and, of course, good vibes.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Why Declare Components as Standalone in Modern Angular</title>
      <dc:creator>aiw3n</dc:creator>
      <pubDate>Sat, 23 Nov 2024 17:30:55 +0000</pubDate>
      <link>https://dev.to/aiw3n/why-declare-components-as-standalone-in-modern-angular-2c75</link>
      <guid>https://dev.to/aiw3n/why-declare-components-as-standalone-in-modern-angular-2c75</guid>
      <description>&lt;p&gt;Modern Angular versions introduced &lt;strong&gt;standalone components&lt;/strong&gt;, a feature that simplifies project structure, enhances modularity, and reduces boilerplate. This approach makes Angular development more intuitive and aligns well with other modern frameworks like React or Vue. This post will explain why you should use standalone components and show how to implement them with an example.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Are Standalone Components?
&lt;/h2&gt;

&lt;p&gt;In traditional Angular, components are declared within &lt;strong&gt;NgModules&lt;/strong&gt;. To use a component, directive, or pipe, you had to include it in a module and import that module in other parts of the app. While powerful, this approach has some drawbacks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Overhead&lt;/strong&gt;: Managing modules can be tedious, especially in large projects.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Complexity&lt;/strong&gt;: Circular dependencies and unnecessary module imports can arise.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Tightly Coupled&lt;/strong&gt;: Components are bound to specific modules, reducing flexibility.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Standalone components eliminate the need for NgModules. These components, along with standalone directives and pipes, declare their dependencies directly, resulting in simpler and more modular applications.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why Use Standalone Components?
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplified Modular Design&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Each component is self-contained, with all dependencies declared directly in the component.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reduced Boilerplate&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
There’s no need to create and maintain NgModules, leading to less repetitive code.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Improved Tree-Shaking&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Angular can optimize the app more effectively by removing unused components.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Faster Development&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Components can be created and used without worrying about module configuration.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Future-Proof&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Standalone components are a core part of Angular's future, ensuring your applications are up-to-date with the latest standards.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  Example: A Standalone Component with FormsModule
&lt;/h2&gt;

&lt;p&gt;Let’s build a standalone &lt;code&gt;PostFormComponent&lt;/code&gt; that allows users to create blog posts using Angular’s &lt;strong&gt;FormsModule&lt;/strong&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Create the Component
&lt;/h3&gt;

&lt;p&gt;Run the following command to generate the standalone component:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ng generate component post-form &lt;span class="nt"&gt;--standalone&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  2. Implement the Component
&lt;/h3&gt;

&lt;p&gt;Here’s the code for &lt;code&gt;post-form.component.ts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;FormsModule&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/forms&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="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-post-form&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;standalone&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="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;FormsModule&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`
    &amp;lt;form (ngSubmit)="submitForm()" #postForm="ngForm"&amp;gt;
      &amp;lt;div&amp;gt;
        &amp;lt;label for="title"&amp;gt;Title:&amp;lt;/label&amp;gt;
        &amp;lt;input id="title" name="title" [(ngModel)]="post.title" required /&amp;gt;
      &amp;lt;/div&amp;gt;
      &amp;lt;div&amp;gt;
        &amp;lt;label for="content"&amp;gt;Content:&amp;lt;/label&amp;gt;
        &amp;lt;textarea id="content" name="content" [(ngModel)]="post.content" required&amp;gt;&amp;lt;/textarea&amp;gt;
      &amp;lt;/div&amp;gt;
      &amp;lt;button type="submit" [disabled]="postForm.invalid"&amp;gt;Submit&amp;lt;/button&amp;gt;
    &amp;lt;/form&amp;gt;
    &amp;lt;div *ngIf="submitted"&amp;gt;
      &amp;lt;h3&amp;gt;Post Preview&amp;lt;/h3&amp;gt;
      &amp;lt;p&amp;gt;&amp;lt;strong&amp;gt;{{ post.title }}&amp;lt;/strong&amp;gt;&amp;lt;/p&amp;gt;
      &amp;lt;p&amp;gt;{{ post.content }}&amp;lt;/p&amp;gt;
    &amp;lt;/div&amp;gt;
  `&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;PostFormComponent&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;post&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;content&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;''&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="nx"&gt;submitted&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="nf"&gt;submitForm&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;submitted&lt;/span&gt; &lt;span class="o"&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="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  3. Use the Component
&lt;/h3&gt;

&lt;p&gt;You can now bootstrap the standalone component directly in &lt;code&gt;main.ts&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;bootstrapApplication&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/platform-browser&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;PostFormComponent&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./post-form.component&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="nf"&gt;bootstrapApplication&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;PostFormComponent&lt;/span&gt;&lt;span class="p"&gt;)&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="nx"&gt;err&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;err&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This approach eliminates the need for an AppModule. You directly bootstrap the PostFormComponent, making the application structure cleaner and more modular.&lt;/p&gt;

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