<?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: Omer Rosenbaum</title>
    <description>The latest articles on Forem by Omer Rosenbaum (@omerr).</description>
    <link>https://forem.com/omerr</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%2F545823%2Fb44d6f0f-da7c-438c-8b73-ac846880f362.jpeg</url>
      <title>Forem: Omer Rosenbaum</title>
      <link>https://forem.com/omerr</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/omerr"/>
    <language>en</language>
    <item>
      <title>Creating up-to-date diagrams with Mermaid.js</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Mon, 06 Mar 2023 10:16:28 +0000</pubDate>
      <link>https://forem.com/omerr/creating-up-to-date-diagrams-with-mermaidjs-1loc</link>
      <guid>https://forem.com/omerr/creating-up-to-date-diagrams-with-mermaidjs-1loc</guid>
      <description>&lt;p&gt;Humans are visual beings, so when we learn something new - whether simple or complex - it usually helps when we can visualize whatever we want to know.&lt;/p&gt;

&lt;p&gt;On that note, our team at Swimm is happy to announce our integration with Mermaid!&lt;/p&gt;

&lt;p&gt;Swimm’s integration with Mermaid provides software-related use cases to get the most out of this amazing combination.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Mermaid?
&lt;/h2&gt;

&lt;p&gt;Mermaid is an open source diagramming and charting tool that lets you create flowcharts and diagrams with Markdown-inspired syntax. It is a wonderful way to visually explain flows, dependencies, and other aspects of your codebase. Mermaid won the &lt;a href="https://osawards.com/javascript/#nominees"&gt;JS Open Source Awards (2019)&lt;/a&gt; for "the most exciting use of technology." 🥇&lt;/p&gt;

&lt;p&gt;Understanding a codebase or parts of it can be overwhelming and complex, and visualizations can significantly help with that. With Swimm’s Mermaid integration, you can create diagrams and charts that automatically remain up to date as code changes.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Mermaid + Swimm = up to date Diagrams 🤯&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;You can now create and edit Mermaid diagrams straight from Swimm’s editor. We even included sample diagrams to get you started:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--mrdfOYPF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3dkh9cd0qmt0z8gsvdq.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--mrdfOYPF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3dkh9cd0qmt0z8gsvdq.gif" alt="Mermaid &amp;amp; Swimm" width="834" height="984"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We’ve taken this beautiful tool and extended its functionality with Swimm’s &lt;a href="https://docs.swimm.io/docs/Features/editor-commands#smart-tokens/?utm_source=devto&amp;amp;utm_medium=free-pub&amp;amp;utm_campaign=mermaid&amp;amp;utm_content=mermaid-launch"&gt;Smart Tokens&lt;/a&gt;. Type a backtick ` within your diagram labels to &lt;a href="https://swimm.io/blog/advanced-documentation-editor-how-to-create-code-coupled-docs-in-seconds/"&gt;code-couple&lt;/a&gt; constants or variables. You won't need to worry about the impact of refactoring on your documentation and renaming those values referenced in your diagram. This means that diagrams in your documentation stay up to date with your code 🤯&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--heBD-9vE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhiuivc4or5y1qhu5fix.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--heBD-9vE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhiuivc4or5y1qhu5fix.gif" alt="smart tokens" width="880" height="710"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The many benefits of diagrams in your docs
&lt;/h2&gt;

&lt;p&gt;The impact of diagrams in your documentation are many. Here’s a closer look at the benefits. &lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;Architecture overview&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When approaching a large codebase, there is so much to learn, and it is quite easy to get overwhelmed. A good architectural diagram explains the different logical modules of a codebase and the main interactions between them.&lt;/p&gt;

&lt;p&gt;You can use smart paths as well as definitions from the entry points of each module. &lt;/p&gt;

&lt;p&gt;Here is an example &lt;a href="https://develop.sentry.dev/architecture/"&gt;from Sentry’s documentation&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--bSGeaVJU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l2kuz8xhnd4y49eo3b6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--bSGeaVJU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l2kuz8xhnd4y49eo3b6.png" alt="Sentry's documentation" width="880" height="515"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  A﻿ flow in the code
&lt;/h3&gt;

&lt;p&gt;Logical code paths are hard to follow when they involve various areas of the code that interact with one another in a way that is not necessarily obvious. Imagine a straightforward web app where to fully understand the flow. You would need to go back and forth between various parts of the frontend and backend. &lt;/p&gt;

&lt;p&gt;Here is another example, with a sequence graph showing Git commands:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FTD1Bc0Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eix03b9dn948bpch1c3a.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FTD1Bc0Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eix03b9dn948bpch1c3a.png" alt="Git commands" width="880" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  E﻿vents pipeline
&lt;/h3&gt;

&lt;p&gt;Pipelines of events are so ubiquitous they deserve a section of their own. When an event gets transmitted between different parts of the system, visualization can help explain the flow. &lt;/p&gt;

&lt;p&gt;For example, consider the following diagram that explains the &lt;a href="https://getsentry.github.io/relay/relay_server/index.html#path-of-an-event-through-relay"&gt;path of an Event through Sentry's Relay Server Application&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1wiYCcog--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o03m1hdn5gbnl0dou717.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1wiYCcog--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o03m1hdn5gbnl0dou717.png" alt="sentry" width="880" height="327"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Multi-repo dependencies
&lt;/h3&gt;

&lt;p&gt;The case described above regarding a flow in the code becomes even more complicated if the code is spanned across multiple repositories. For example, a system where the frontend code is in one repository and the backend is in another. The problem worsens as the number of repositories involved in the flow increases. Understanding the flow becomes straightforward when a document contains code parts from all relevant repositories.&lt;/p&gt;

&lt;p&gt;Therefore, a diagram that describes code flow spanning multiple repositories is essential.&lt;/p&gt;

&lt;p&gt;At a basic level, we can describe the flow of operations between the different repositories, and the document can connect each step of the process like this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--gyRMRb-L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj84h8tjmkvmowvu6c1k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--gyRMRb-L--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj84h8tjmkvmowvu6c1k.png" alt="multi-repo" width="880" height="564"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Another option is to have a more detailed representation relating to specific entities within different repositories, such as the following Swimm diagram:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2w_7e1hs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so11o6jaiucalaqf2xkt.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2w_7e1hs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/so11o6jaiucalaqf2xkt.png" alt="multi-repo" width="880" height="520"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;We can see communication taking place between 4 different repositories. &lt;/p&gt;

&lt;h3&gt;
  
  
  A﻿ class diagram
&lt;/h3&gt;

&lt;p&gt;Describing classes, and especially how they interact with one another, is a common use case for diagrams. &lt;/p&gt;

&lt;p&gt;For instance, the following diagram is taken from the &lt;a href="https://github.com/uw-advanced-robotics/taproot/wiki/Command-Subsystem-Framework#comprised-command"&gt;wiki of Taproot&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--htsByi07--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32kgz3lh0x5sk5lio7s.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--htsByi07--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j32kgz3lh0x5sk5lio7s.png" alt="A class diagram" width="880" height="302"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This diagram explains the usage of the comprised command, a “layer built on top of the Command class. The key idea is that a comprised command is an encapsulation of multiple commands.”&lt;/p&gt;

&lt;h3&gt;
  
  
  A﻿ process
&lt;/h3&gt;

&lt;p&gt;Sometimes, a process requires a few steps that may or may not be directly linked to a part of the code, or something may happen on a remote service you cannot access. Especially in these cases, it may be difficult to understand the entire process by just looking at the code.&lt;/p&gt;

&lt;p&gt;Consider this example of system flow between K8s components to start a container (&lt;a href="https://kubernetes.io/docs/contribute/style/diagram-guide/"&gt;from Kubernetes' documentation&lt;/a&gt;).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FUmRgYht--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4ulptpg9te9f9384ju6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FUmRgYht--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4ulptpg9te9f9384ju6.png" alt="a process" width="880" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here is another example (&lt;a href="https://kubernetes.io/docs/concepts/services-networking/ingress/#what-is-ingress"&gt;from k8s documentation, “What is Ingress”&lt;/a&gt;):&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TkuOWYRL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydcvfm2rckr4xyomiaz0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TkuOWYRL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydcvfm2rckr4xyomiaz0.png" alt="k8 docs" width="700" height="239"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;User journey&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When creating products that interact with users, it’s crucial to understand how the flow of the code supports the user journey. What is the happy flow, and what are the other flows? Do you really cover all cases? &lt;/p&gt;

&lt;p&gt;Using Swimm’s Mermaid charts, we can create user journey charts that couple the user journey and UX with the implementation, ensuring they are aligned and the link between them is clear.&lt;/p&gt;

&lt;h2&gt;
  
  
  B﻿ottom line
&lt;/h2&gt;

&lt;p&gt;With Swimm’s Mermaid integration, you can create diagrams that automatically stay up to date as the code evolves. This opens up the possibility for new use cases incorporating the powerful tool of visualization, and the impact for our dev teams around the globe has been tremendous.If you’d like to see Swimm’s Mermaid integration up close, &lt;a href="https://swimm.io/request-demo/?utm_source=devto&amp;amp;utm_medium=free-pub&amp;amp;utm_campaign=mermaid&amp;amp;utm_content=mermaid-launch"&gt;sign up for a 1:1 demo&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>documentation</category>
      <category>programming</category>
      <category>productivity</category>
      <category>github</category>
    </item>
    <item>
      <title>10 reasons devs can be thankful this Thanksgiving 🦃</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Sun, 20 Nov 2022 08:49:43 +0000</pubDate>
      <link>https://forem.com/omerr/10-reasons-devs-can-be-thankful-this-thanksgiving-3ip7</link>
      <guid>https://forem.com/omerr/10-reasons-devs-can-be-thankful-this-thanksgiving-3ip7</guid>
      <description>&lt;p&gt;Channeling my inner David Letterman here... &lt;/p&gt;

&lt;p&gt;10: Dall-E for making all memes and gifs on Slack so much better.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zMHyeWrU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tfd5s138ju2yee4b3wu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zMHyeWrU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tfd5s138ju2yee4b3wu.png" alt="Blue rubber duck watching Game of Thrones" width="880" height="880"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;9: Large external monitors. You don’t have to ask.&lt;/p&gt;

&lt;p&gt;8: Name tags! 2022 in-person dev conferences were the best.&lt;/p&gt;

&lt;p&gt;7: NASDAQ for adding spice to our lives and roadmap.&lt;/p&gt;

&lt;p&gt;6: Your favorite dev tools for making you look so good at work.&lt;/p&gt;

&lt;p&gt;5: The new developer you onboarded didn’t ask you “how to” questions once an hour, and used a Documentation Playlist instead.&lt;/p&gt;

&lt;p&gt;4: All of the caffeine consumed this year.&lt;/p&gt;

&lt;p&gt;3: Your go-to code reviewer who nails the funniest yet helpful comments.&lt;/p&gt;

&lt;p&gt;2: Open source.&lt;/p&gt;

&lt;p&gt;1: You can find your &lt;a href="https://swimm.io/product?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=thanksgiving-post"&gt;documentation&lt;/a&gt;, and it’s actually up to date.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Git Internals: Rewriting History and Overcoming Gitsasters</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Tue, 11 Oct 2022 17:23:52 +0000</pubDate>
      <link>https://forem.com/omerr/git-internals-rewriting-history-and-overcoming-gitsasters-klj</link>
      <guid>https://forem.com/omerr/git-internals-rewriting-history-and-overcoming-gitsasters-klj</guid>
      <description>&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/tc4LnmhZusc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Brief, or what I do for fun
&lt;/h2&gt;

&lt;p&gt;When I'm not wearing my CTO hat at &lt;a href="https://swimm.io/product?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=brief-git-int-oct11"&gt;Swimm&lt;/a&gt; (we're building a documentation platform for devs), I create videos for my YouTube channel, Brief. Brief is my way of sharing knowledge and creating tutorials about Programming, Git, Computer Networks, Computer Science and more. &lt;/p&gt;

&lt;h2&gt;
  
  
  About the tutorial
&lt;/h2&gt;

&lt;p&gt;Understanding the concepts of git can help us in many cases. Sometimes, it can help us when things go wrong - for example when we did something we did not want to do, and we would like to go back in time. We will call these cases - &lt;code&gt;gitsasters&lt;/code&gt;, that is, disasters when working with git.&lt;/p&gt;

&lt;p&gt;This video, as well as the next one, will provide you with some superpowers. After these two videos, you will feel confident when things go wrong in git. When someone commits to the wrong branch, they will call you, and you will be able to help out. When a team member loses important changes they have made, you will be the person to consult with.&lt;/p&gt;

&lt;p&gt;In these two videos we will deepen our understanding of git while acquiring new tools, especially for rewriting history. We will also apply these tools to real-life scenarios.&lt;/p&gt;

&lt;p&gt;I also wrote &lt;a href="https://swimm.io/blog/rewriting-history-and-overcoming-git-disasters-gitsasters-part-1-git-reset/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=brief-git-int-oct11"&gt;an article on this topic&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Let me know if you found this tutorial useful! And if you have an idea for a future tutorial, I'm all ears. &lt;/p&gt;

</description>
      <category>git</category>
      <category>programming</category>
      <category>tutorial</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Need for speed: Migrating from Webpack 4 to Vite</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Mon, 03 Oct 2022 17:42:04 +0000</pubDate>
      <link>https://forem.com/omerr/need-for-speed-migrating-from-webpack-4-to-vite-559l</link>
      <guid>https://forem.com/omerr/need-for-speed-migrating-from-webpack-4-to-vite-559l</guid>
      <description>&lt;p&gt;We migrated our web app’s codebase from &lt;a href="https://vitejs.dev/https://webpack.js.org/"&gt;Webpack 4&lt;/a&gt; to &lt;a href="https://vitejs.dev/"&gt;Vite&lt;/a&gt; for one simple reason: speed 🏃🏃🏃.&lt;/p&gt;

&lt;p&gt;Since Vite is relatively new, we can share that it’s stable and has made a tremendous difference in our lives as developers. Plus, the move was straightforward and didn’t take long—though our team here at &lt;a href="https://swimm.io/utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=vite-webpack-talko"&gt;Swimm&lt;/a&gt; learned some hard lessons along the way.&lt;/p&gt;

&lt;p&gt;Here’s a bit more about why we made the switch in the first place.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Vite?
&lt;/h2&gt;

&lt;p&gt;Vite is a Javascript build tool designed for speed. Vite consists of two major parts: a dev server that uses native ES modules that makes Hot Module Replacement incredibly faster, and a build command that uses Rollup behind the scenes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why we decided to migrate from Webpack
&lt;/h2&gt;

&lt;p&gt;We used Webpack 4 at Swimm for over two years as it’s used in Vue CLI, which is the service we use for our app’s client-side. But about six months ago, we decided we needed to change when Webpack slowed us down as our codebase expanded and became more complex.&lt;/p&gt;

&lt;p&gt;Though Webpack 5 has been available for a couple of years, migrating Vue CLI from v4 to v5 introduced several breaking changes that made the migration quite challenging.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Webpack’s performance was a deal breaker&lt;/strong&gt;&lt;br&gt;
Webpack’s Hot Module Replacement (HMR) works well until you have too many files in your codebase. As our web app became larger and larger and we had many files in the codebase, it made HMR so slow it would sometimes break.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Launching Webpack for local development took upwards of two minutes at best.&lt;/li&gt;
&lt;li&gt;HMR in Webpack took about 10 seconds.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Moving from Webpack to Vite: the challenges
&lt;/h2&gt;

&lt;p&gt;The entire move to Vite took just a couple of days. Most of the work was done in one day by four devs, with some pre-work done in the days prior.&lt;/p&gt;

&lt;p&gt;While we were able to migrate quickly, we had to overcome some technical difficulties right off the bat.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Project separation&lt;/strong&gt;&lt;br&gt;
First off, our codebase needed some restructuring.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://swimm.io/product/utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=vite-webpack-talko"&gt;Swimm has several projects&lt;/a&gt; in addition to the web app including &lt;a href="https://swimm.io/blog/swimm-native-integrations/utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=vite-webpack-talko"&gt;IDE plugins&lt;/a&gt; and &lt;a href="https://github.com/apps/swimm-io"&gt;Swimm’s GitHub app&lt;/a&gt;, and Webpack’s configuration was relevant for most of them. Because Vite is intended for web projects, we had to extract the shared code between the projects so that the web app would be isolated and independent.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Environment variables and configuration files&lt;/strong&gt;&lt;br&gt;
Second, we had to clean up our environment variables and config files including tokens, URLs, and .env files. In particular, our TypeScript and eslint configuration had to be readjusted.&lt;/p&gt;

&lt;p&gt;Also, environments in Vite are handled very differently than in Webpack. Specifically, Vite has its own set of defaults and a new namespace. We imagine that other dev teams, like us, will need to go through extensive migration and configuration change work to work within Vite’s environmental expectations.&lt;/p&gt;

&lt;h2&gt;
  
  
  Using Swimm to Migrate to Vite
&lt;/h2&gt;

&lt;p&gt;There were many code changes during the process of migrating from Webpack to Vite. No surprises there.&lt;/p&gt;

&lt;p&gt;And since all of our &lt;a href="https://swimm.io/product?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=vite-webpack-talko"&gt;code is documented in Swimm&lt;/a&gt;, this meant that we were able to ensure that our docs stayed up to date, current, and relevant. And, of course, we had a place to put all of the items we didn’t want to forget about the migration.&lt;/p&gt;

&lt;p&gt;So, in addition to the Swimm documentation connected to the code changes, we also now have a “How We Use Vite doc” for our team at Swimm to read and use as we continue to ease into the migration.&lt;/p&gt;

&lt;h2&gt;
  
  
  Moving to Vite: the easy wins
&lt;/h2&gt;

&lt;p&gt;Once the challenges for the migration were behind us, we saw the Vite wins immediately.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Speed&lt;/strong&gt;&lt;br&gt;
No matter how big the project size is in development mode, it doesn't impact Vite’s speed.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Vite launches in less than one second (~700 milliseconds).&lt;/li&gt;
&lt;li&gt;HMR in Vite takes less than one second.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Native integrations and efficiency&lt;/strong&gt;&lt;br&gt;
Vite was written by the same developers as Vue, so we gained from a lot of the native integrations and synergies between the two. Vite also uses esbuild and doesn’t require bundling in pre-production environments, which makes local development so fast. It’s orders of magnitude faster than using Webpack. Also, Vite only supports modern browsers, so there’s no additional code to support legacy browsers many dev teams aren’t using.&lt;/p&gt;

&lt;p&gt;But you don’t have to use Vue with Vite. Vite is completely separate so you can use it with React, Angular, and others however they best fit your project needs. Vite also has a lot of official plugins and many more community plugins.&lt;/p&gt;

&lt;h2&gt;
  
  
  Other technical details
&lt;/h2&gt;

&lt;p&gt;A few other points to keep in mind if you’re considering migrating from Webpack to Vite:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Shims and Polyfills&lt;/strong&gt;. Unlike Webpack 4 and earlier versions, you don’t get any automatic shims or polyfills for Node.JS modules with Vite. So, support for older mixed Node.JS/Browser modules can be a bit difficult. You can’t easily import anything and just expect it to work. And if you have some legacy Node.JS module that’s mission-critical, it will present challenges you’ll need to consider.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Bundling&lt;/strong&gt;. When it comes to bundling, Vite is a general solution that does things a little differently. It’s not just a file watcher, web server, and bundler; it does on-demand compilation. As a browser requests updated JS files, Vite delivers them live and just in time. It’s super fast because of esbuild. There’s no need for complicated bundler solutions, and it only replaces the changed file via HMR.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Project configuration.&lt;/strong&gt;Project configuration is also something to watch out for. We had all sorts of issues with templates and had to go deep into the documentation. We recommend you stick to configuration defaults and templates if you can and only change the configuration if you know what you’re doing.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Bottom Line
&lt;/h2&gt;

&lt;p&gt;Migrating from Webpack to Vite was well worth it, and we are very happy with the results. The migration from Webpack to Vite may present some challenges if your code repository has shared resources and dependencies across projects. But if your code is well isolated and independent, you’ll hopefully have an easy time with it.&lt;/p&gt;

&lt;p&gt;We think the migration to Vite is well worth the investment if Webpack has slowed you down.&lt;/p&gt;

</description>
      <category>vite</category>
      <category>webpack</category>
      <category>javascript</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Software Development Knowledge Sharing Methods Are Broken: Here’s Why</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Wed, 24 Aug 2022 11:38:36 +0000</pubDate>
      <link>https://forem.com/omerr/software-development-knowledge-sharing-methods-are-broken-heres-why-59j3</link>
      <guid>https://forem.com/omerr/software-development-knowledge-sharing-methods-are-broken-heres-why-59j3</guid>
      <description>&lt;p&gt;Traditionally, developers gain knowledge gradually when working on projects over time. I’m not referring to general knowledge such as a programming language. Instead, I am referring to project-specific knowledge, including the many decisions made while planning a project. This includes product decisions (what to implement, what not to implement, and why) and design decisions (what architecture to use, how to split the system into its components, and how the components interact).&lt;/p&gt;

&lt;p&gt;There is, of course, more specific knowledge that accumulates either when developing code or reading it to understand something - for example, during debugging. Knowledge about how the code is constructed, what parts are essential, and how the data flows in the system is gradually accumulated.&lt;/p&gt;

&lt;p&gt;Gradually is key here because in the mind of the developers as they develop their system, this knowledge is an inseparable part of the craft of programming.&lt;/p&gt;

&lt;p&gt;Not surprisingly, this knowledge is hard to transfer. For example, when new developers join the team, they need to quickly learn all kinds of things from the design decisions through the specific implementation details; when a bug occurs, we need to find the cause and make a fix; when performing a code review or basically whenever we interact with code we haven’t written ourselves, we need to get into the mind of the developer who originally has originally written the code.&lt;/p&gt;

&lt;p&gt;Our existing methods for sharing knowledge about software are fundamentally broken, and we need to prioritize sharing this knowledge efficiently and effectively. In this post, I will explain why and what can be done about it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why knowledge sharing methods are broken
&lt;/h2&gt;

&lt;p&gt;Knowledge sharing methods are broken for two fundamental reasons: knowledge is scattered, and documentation is outdated.&lt;/p&gt;

&lt;h3&gt;
  
  
  Knowledge is scattered
&lt;/h3&gt;

&lt;p&gt;Where is that “knowledge” we want to transfer stored? Well, in the mind of the developers, of course. But then, when it is transferred, it is also stored somewhere. Some knowledge is found within the code itself, and some isn’t. Design decisions, for example, are hard to deduce from the code. Furthermore, in the code itself, you can’t find the reasons that made the developers not implement things in a certain way.&lt;/p&gt;

&lt;p&gt;Knowledge about code can be transferred in oral conversations and, in this instance, not stored at all. They can be conveyed on recorded video calls, documents stored on shared folders or Wiki pages, code comments, README files, Slack conversations, emails, and more.&lt;/p&gt;

&lt;p&gt;This scattered knowledge makes it extremely hard to find; most of the time, you don’t even know where to look for it - assuming there is any relevant documentation to begin with.&lt;/p&gt;

&lt;h3&gt;
  
  
  Documentation is outdated
&lt;/h3&gt;

&lt;p&gt;Even when the relevant knowledge is documented, it is often outdated. This is the result of the nature of software; it quickly evolves. As developers create new features and fix bugs, the code constantly changes, and they simply don’t remember to update the relevant documentation or bother looking for it.&lt;/p&gt;

&lt;p&gt;Time is always of the essence and locating and updating the documentation takes precious time that could be devoted to writing more code.&lt;/p&gt;

&lt;h3&gt;
  
  
  Developers no longer trust documentation
&lt;/h3&gt;

&lt;p&gt;It’s a vicious cycle: when developers stumble on a document, they often lose trust in the documentation. Because once you find outdated documentation more than a couple of times, you are likely to assume that it’s probable that other docs are outdated as well.&lt;/p&gt;

&lt;p&gt;So why would you, as a developer, bother to read the documentation? And of course, if it’s not valuable to read the documentation, it’s understandable why developers would not justify or prioritize the effort of writing the docs in the first place.&lt;/p&gt;

&lt;p&gt;As a result, developers spend less time creating high-quality documentation, leading to other developers reading the documentation and not getting value from it, which leads to a stronger belief that there is no value in writing documentation at all.&lt;/p&gt;

&lt;p&gt;Sometimes, developers try to avoid the problem of outdated documentation in advance - by writing only high-level documents describing general flows and architecture, as these are not liable to change frequently. However, this leaves many gaps. A lot of the important knowledge that simply cannot be covered by high-level documents is never documented.&lt;/p&gt;

&lt;h3&gt;
  
  
  Knowledge should be found and consumed at the right time
&lt;/h3&gt;

&lt;p&gt;Even if we assume that all knowledge relevant to a software project exists in some written form and is centralized in a single place, it is not practical to just read all the relevant documentation once you join a new project. When, for example, should you read each document, and do you know when it’s the right time?&lt;/p&gt;

&lt;h2&gt;
  
  
  Swimm’s knowledge management solution
&lt;/h2&gt;

&lt;p&gt;With Swimm, information is located and consumed in two forms.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Developers get a high-level overview of the project they enter upon entrance using our &lt;a href="https://swimm.io/blog/swimm-universal-playlists-as-code-coupling-for-continuous-documentation/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=cs-aug24&amp;amp;utm_term=2022-08-24"&gt;Swimm Playlists&lt;/a&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using Swimm’s IDE plugins, developers find the relevant information just in time, when they need it, when trying to understand a part of the code that has relevant documentation, or when writing code where existing documentation can facilitate.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Swimm analyzes the changes introduced to the code on every PR. When the changes are minor, we &lt;a href="https://swimm.io/blog/how-does-swimm-s-auto-sync-feature-work/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=cs-aug24&amp;amp;utm_term=2022-08-24"&gt;Auto-sync&lt;/a&gt; them, track the relevant code parts, and update the documentation accordingly. When breaking changes are introduced, we mark them for the developer to manually update the documentation as part of the PR - when the information is fresh - as the breaking change has just been introduced.&lt;/p&gt;

&lt;h2&gt;
  
  
  Knowledge sharing is transforming teams
&lt;/h2&gt;

&lt;p&gt;Knowledge sharing is transforming for developer teams with the use of code-coupled documentation. Learn more about Swimm’s &lt;a href="https://swimm.io/blog/what-is-continuous-documentation-manifesto-part-1/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=cs-aug24&amp;amp;utm_term=2022-08-24"&gt;knowledge management documentation platform&lt;/a&gt; and &lt;a href="https://swimm.io/sign-beta/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=cs-aug24&amp;amp;utm_term=2022-08-24"&gt;try out Swimm for yourself.&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How we built our GitHub app</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Sun, 14 Aug 2022 16:31:52 +0000</pubDate>
      <link>https://forem.com/omerr/how-we-built-our-github-app-p2a</link>
      <guid>https://forem.com/omerr/how-we-built-our-github-app-p2a</guid>
      <description>&lt;p&gt;Swimm’s GitHub app helps developer teams create, maintain, and find documentation as part of the development workflow.&lt;/p&gt;

&lt;p&gt;When our team at Swimm began designing Swimm’s GitHub app, we needed to identify the best moment to interact with users. We knew, for example, that running and notifying users on every open branch can be annoying, and we wanted to make the experience simple and enjoyable. Moreover, we understood that we had to find the window of opportunity for developers - the best time when software engineers were looking for checks, reviews, and comments.&lt;/p&gt;

&lt;h2&gt;
  
  
  Design of Swimm’s GitHub App
&lt;/h2&gt;

&lt;p&gt;Our team at Swimm started designing the GitHub app integration in 2021, keeping in mind that most interactions happen during Pull Requests because it’s usually the last point the code can be verified before it is merged into the main branch and deployed. But it’s also the first time when software engineers push their code and mark it as ready for review.&lt;/p&gt;

&lt;p&gt;The initial version of Swimm’s GitHub App ran our Swimm Verify check whenever a PR was opened or an open PR was updated. This allowed us to make sure the documentation on the branch would stay up to date so that code changes would not require an update to the documentation.&lt;/p&gt;

&lt;h2&gt;
  
  
  Continuously improving Swimm’s GitHub App
&lt;/h2&gt;

&lt;p&gt;Since then, we have added quite a few capabilities and features. Today we’re covering Swimm’s GitHub app features one by one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Accepting Auto-synced changes from GitHub
&lt;/h2&gt;

&lt;p&gt;Swimm's patented &lt;a href="https://swimm.io/blog/how-does-swimm-s-auto-sync-feature-work/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=github-aug-14&amp;amp;utm_term=2022-08-14"&gt;Auto-sync&lt;/a&gt; algorithm analyzes what happens in your codebase. When Swimm Verify check recognizes Auto-sync documentation changes, users are notified via a comment on your pull request. You can then trigger a Swimm Commit by clicking the “Approve Auto-sync” button in the check, which accepts all Auto-synced docs from the GitHub App.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--R31mPed4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz9ed0gg680v6wr0oqbp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--R31mPed4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz9ed0gg680v6wr0oqbp.png" alt="Image description" width="880" height="465"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--14chj9Ji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psapc4tta39rgorex2kk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--14chj9Ji--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psapc4tta39rgorex2kk.png" alt="Image description" width="880" height="217"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Automatic Auto-sync approval
&lt;/h2&gt;

&lt;p&gt;We’ve taken the Auto-sync feature one step further. In the GitHub app settings, you can set up automatic Auto-sync approval. Swimm’s GitHub app will automatically accept Auto-sync changes, committing them to your open pull request in a dedicated commit. Clients rely on Swimm’s trusted patented Auto-sync algorithm to automatically update their documentation with this feature.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pJZjUCux--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjgt7kyi3k4jc8ace9s5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pJZjUCux--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjgt7kyi3k4jc8ace9s5.png" alt="Image description" width="880" height="40"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  New doc notifications
&lt;/h2&gt;

&lt;p&gt;Since tracking and locating documentation is challenging, we designed a feature for New Doc Notifications: you can set an alert on Slack or via email whenever a new document is created and merged to your main branch. This helps keep track of new documentation in your repo and allows you to invite other members of your organization to read and learn more about new documentation. We’ve found that this encourages a better overall understanding of the codebase.&lt;/p&gt;

&lt;h2&gt;
  
  
  Draft Documents from Pull Requests
&lt;/h2&gt;

&lt;p&gt;We all know too well that documentation is usually an afterthought, or something completed after writing tests and making code review requested changes to your PR.&lt;/p&gt;

&lt;p&gt;This is exactly why Swimm’s GitHub App analyzes your code changes, and when a Pull Request is interesting enough to document, we notify you with a comment and encourage you to create it. With a single click on the Review Draft in App button in our comment, you go into Swimm’s Web App. All the code changes from your Pull Request are added to a document, and all that’s left for you is explaining what the code does. There are no rules for how to do this, but ideally, you would want to arrange it in an order that tells a story.&lt;/p&gt;

&lt;h2&gt;
  
  
  Doc recommendations
&lt;/h2&gt;

&lt;p&gt;When you change code that has relevant documentation, Swimm’s GitHub app recommends documentation for you to review. This helps users access documentation about specific code changes by alerting you to relevant documentation on PRs.&lt;/p&gt;

&lt;p&gt;Here are a few examples you might see: a doc is recommended to you for your E2E testing guide whenever someone changes a covered test; the CI deployment documentation is recommended when someone changes a configuration script; a fragile piece of code changes, and you are alerted to documentation that references an Incident Report.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rt8tQH3C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/autx1bv56kn8wf8b9vsj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rt8tQH3C--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/autx1bv56kn8wf8b9vsj.png" alt="Image description" width="880" height="490"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Swimm Verify on PR changes only
&lt;/h2&gt;

&lt;p&gt;We created an option to run Swimm Verify only on files that are changed in the Pull Request.&lt;/p&gt;

&lt;p&gt;Here’s why: because we know that sometimes things break on the main branch. Perhaps a merge conflict or two competing changes are going on simultaneously. And we know that this can happen with your documentation as well. While these changes might take some time to be fixed, they might otherwise fail our Swimm Verify check across your repository, even on unrelated Pull Requests. So we suggest that it is a worthwhile option to turn this feature on until issues with your main branch are resolved. This feature helps our clients avoid unnecessary delays.&lt;/p&gt;

&lt;h2&gt;
  
  
  Disabling comments
&lt;/h2&gt;

&lt;p&gt;Our engineering teams work in a fast-paced environment; we move quickly, frequently break things, and always work on bug fixes.&lt;/p&gt;

&lt;p&gt;Therefore, we designed Swimm’s GitHub app with an option to disable comments. This helps reduce the number of notifications that you’ll be sent during busy deadlines and crunch time. And then, of course, you always have the option to enable the comments again whenever you wish.&lt;/p&gt;

&lt;h2&gt;
  
  
  Integrations with other tools
&lt;/h2&gt;

&lt;p&gt;Swimm partnered with &lt;a href="https://swimm.io/blog/swimm-official-compass-integration-partner/?utm_source=dev-to&amp;amp;utm_medium=publisher&amp;amp;utm_campaign=github-aug-14&amp;amp;utm_term=2022-08-14"&gt;Atlassian Compass&lt;/a&gt; - bringing Swimm to Compass’ ecosystem so that you can see your latest documentation status for all your distributed services from a single place. You can also use Swimm’s Compass Integration to link Swimm documentation to the Compass component.&lt;/p&gt;

&lt;p&gt;Swimm is currently integrating additional tools to facilitate understanding the bigger picture of your software development status with your Swimm documentation included.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fX5MRO9d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mti4rkvi5130uqvauo5x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fX5MRO9d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mti4rkvi5130uqvauo5x.png" alt="disable comments" width="880" height="436"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Doc hooks - coming soon
&lt;/h2&gt;

&lt;p&gt;Getting recommendations for a relevant document to existing code is helpful. But what about newly added code? There should be a way to locate documentation in situations such as:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;When a new database migration is added → link to your database migration policy&lt;/li&gt;
&lt;li&gt;When the configuration file is modified → link to your environment variable update process walkthrough&lt;/li&gt;
&lt;li&gt;When a new record is added to your Infrastructure as a code setting → link to your explainer on how to verify it will be deployed correctly.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Our team at Swimm is currently working on solutions to these exact problems. We are testing an alpha version of a feature that will recommend a specific document when a certain file is changed or something is added to a folder. Stay tuned!&lt;/p&gt;

</description>
      <category>github</category>
      <category>webdev</category>
      <category>tooling</category>
    </item>
    <item>
      <title>What's one piece of advice every dev should ignore? 🚩🚩🚩</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Wed, 23 Feb 2022 13:42:43 +0000</pubDate>
      <link>https://forem.com/omerr/whats-one-piece-of-advice-every-dev-should-ignore-11h6</link>
      <guid>https://forem.com/omerr/whats-one-piece-of-advice-every-dev-should-ignore-11h6</guid>
      <description>&lt;p&gt;We'll go first &amp;gt; &lt;/p&gt;

&lt;p&gt;"Good code is self-documenting"&lt;/p&gt;

&lt;p&gt;What would you add?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>devjournal</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Why Markdown?</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Wed, 26 Jan 2022 16:50:28 +0000</pubDate>
      <link>https://forem.com/omerr/why-markdown-lf1</link>
      <guid>https://forem.com/omerr/why-markdown-lf1</guid>
      <description>&lt;p&gt;Here's the rationale behind our decision to base our docs' format on Markdown. &lt;/p&gt;

&lt;p&gt;Why Markdown? &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;COMPATIBILITY! For example, if you're using Notion and Confluence to document your code, you can easily import to Swimm&lt;/li&gt;
&lt;li&gt;GitHub and the IDEs know how to parse &amp;amp; render Markdowns&lt;/li&gt;
&lt;li&gt;Markdown has become a standard and ultimately makes documentation easier &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Why we moved?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We &lt;a href="https://swimm.io/blog/docs-as-code-understanding-swimm-sw-md-markdown-format/"&gt;used to store content&lt;/a&gt; as .swm files in JSON format. So yes, it was easier for computers to read, but it wasn't readable as text and it didn't render in editors&lt;/li&gt;
&lt;li&gt;.swm was not user friendly &lt;/li&gt;
&lt;li&gt;we struggled to review changes&lt;/li&gt;
&lt;li&gt;JSON's curly bracket format made editing harder than it needed to be &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;First things first, here is what sw.md looks like in: &lt;br&gt;
&lt;strong&gt;Github&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pny_85fK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5nvqpfpidvjj174humj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pny_85fK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5nvqpfpidvjj174humj.png" alt="sw.md-github" width="880" height="343"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;VSCode&lt;/strong&gt;&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Zlru7QAf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyzhhf325023rlui6bhv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Zlru7QAf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyzhhf325023rlui6bhv.png" alt="sw.md-vscode" width="880" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://swimm.io/blog/docs-as-code-understanding-swimm-sw-md-markdown-format/"&gt;Learn more about docs as code here. &lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>webdev</category>
      <category>tutorial</category>
      <category>discuss</category>
    </item>
    <item>
      <title>E2E testing: challenges &amp; lessons learned</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Sun, 23 Jan 2022 11:42:53 +0000</pubDate>
      <link>https://forem.com/omerr/e2e-testing-challenges-lessons-learned-35ca</link>
      <guid>https://forem.com/omerr/e2e-testing-challenges-lessons-learned-35ca</guid>
      <description>&lt;p&gt;End-to-end testing. The holy grail of all testing types. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--y2akbzh3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxieqmmhs3nnuooppoxo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--y2akbzh3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxieqmmhs3nnuooppoxo.gif" alt="Holy Grail gif" width="240" height="200"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here's everything we learned regarding the ins and outs of end-to-end testing - lessons, takeaways, mistakes, you name it. &lt;/p&gt;

&lt;h2&gt;
  
  
  So, let's start out with why
&lt;/h2&gt;

&lt;p&gt;Swimm started growing, we added new features, and we found that we simply couldn't keep up with changes. &lt;/p&gt;

&lt;p&gt;We realized that our goal for a testing solution had two parts: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Find a solution that allowed us to catch regressions bugs DURING development&lt;/li&gt;
&lt;li&gt;Save manual regression QA time &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;E2E testing seemed to be the right answer to our testing paradigm. &lt;/p&gt;

&lt;p&gt;We ended up choosing Cypress&lt;/p&gt;

&lt;h2&gt;
  
  
  Pros
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Awesome community &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Great documentation&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Great features: automatic waiting, automatic sreenshots &amp;amp; videos, time travel&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Cypress is intuitive &amp;amp; easy to set up &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Writing tests is fun  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Using Cypress' API applies for user behavior  &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Cons
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Lack of multi-tab support&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Difficulty with iFrames&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Limited browser support (just Chrome-based browsers &amp;amp; firefox) &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Challenges of E2E testing
&lt;/h2&gt;

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

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Identified &amp;amp; fixed a lot of bugs &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Saved so much time by not having to repeat manual flows weekly&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Dramatically increased stability &amp;amp; coverage &lt;br&gt;
&lt;strong&gt;Challenges&lt;/strong&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Human vs machine testing &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;We had zero experience with e2e tests&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Monitoring tests that are less reliable &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It takes more time than you think &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Key takeaways
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Appoint an owner for E2E testing&lt;/li&gt;
&lt;li&gt;Patience, patience, patience&lt;/li&gt;
&lt;li&gt;Write stable tests &lt;/li&gt;
&lt;li&gt;Trust. Your. Tests. &lt;/li&gt;
&lt;li&gt;Stable tests = stable product&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://swimm.io/blog/end-to-end-testing-challenges-and-lessons-learned/"&gt;Here's a detailed blog on how we implemented E2E testing. &lt;/a&gt;&lt;/p&gt;

</description>
      <category>testing</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>A dev's dillema: Vue vs React</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Thu, 13 Jan 2022 16:47:02 +0000</pubDate>
      <link>https://forem.com/omerr/a-devs-dillema-vue-vs-react-1556</link>
      <guid>https://forem.com/omerr/a-devs-dillema-vue-vs-react-1556</guid>
      <description>&lt;h2&gt;
  
  
  Why Vue?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Vue is lightweight &amp;amp; flexible and it feels more like a library than a framework&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;It's also less intrusive and has an easy onboarding experience&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Project components &amp;amp; structure in Vue are similar and easy to recognize. This especially helps with onboarding.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;READABILITY !!!! The html/css and JS are separated. &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  When React &amp;gt; Vue
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;React is an industry standard and oftentimes this makes it easier to recruit developers &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;React often provides better flexibility in some aspects &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Docs are far more advanced. Check out the 100s of pages of questions on React on Stackoverflow   &lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://swimm.io/blog/vue-vs-react-best-choice-for-startups/"&gt;This all started with an email we received a while back asking why Swimm chose Vue. &lt;br&gt;
&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Do you have this dilemma? Where do you stand?&lt;/p&gt;

</description>
      <category>vue</category>
      <category>reactnative</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Is self-documenting code a myth?</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Tue, 11 Jan 2022 09:55:23 +0000</pubDate>
      <link>https://forem.com/omerr/is-self-documenting-code-a-myth-651</link>
      <guid>https://forem.com/omerr/is-self-documenting-code-a-myth-651</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hXPVfOgO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnw4ln4b9a2lmanxqz27.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hXPVfOgO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnw4ln4b9a2lmanxqz27.jpeg" alt='meme on documenting code. "when u revisit function u wrote months ago and now it makes no sense and there is no documentation"' width="602" height="750"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To answer our own question - yes. Do you agree?&lt;/p&gt;

&lt;p&gt;If after a month you can barely make sense of the code you wrote, imagine how a junior dev joining your team would feel? Or even someone more senior going back to legacy code. Documentation becomes obsolete fast and eventually it renders itself useless. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://swimm.io/blog/what-is-continuous-documentation-manifesto-part-1/"&gt;Continuous Documentation &lt;br&gt;
&lt;/a&gt;calls for creating and maintaining code documentation as a part of the normal development workflow. &lt;/p&gt;

&lt;p&gt;The principles of Continuous Documentation require that documentation is: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Always up-to-date&lt;/li&gt;
&lt;li&gt;Created at the right time&lt;/li&gt;
&lt;li&gt;Tightly coupled with the code itself &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So you created a bunch of documentation. Now what? How do you make sure it stays up-to-date? &lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/5E2eFbamdP0"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;This &lt;a href="https://swimm.io/blog/how-does-swimm-s-auto-sync-feature-work/"&gt;tech&lt;/a&gt; checks docs as code evolves, notifying you if your changes affect your documentation. &lt;/p&gt;

&lt;h2&gt;
  
  
  So, what do you think? Will the "self-documenting" excuse disappear once documentation is (much) easier to maintain and keep up-to-date?
&lt;/h2&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>discuss</category>
      <category>programming</category>
    </item>
    <item>
      <title>10 devtools for 2022</title>
      <dc:creator>Omer Rosenbaum</dc:creator>
      <pubDate>Thu, 06 Jan 2022 17:38:32 +0000</pubDate>
      <link>https://forem.com/omerr/10-devtools-for-2022-o9f</link>
      <guid>https://forem.com/omerr/10-devtools-for-2022-o9f</guid>
      <description>&lt;h2&gt;
  
  
  Roundup of devtools for a more productive 2022
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://swimm.io/blog/swimm-top-devtools-our-picks/"&gt;We outline the suite of tools our R&amp;amp;D team uses. &lt;br&gt;
&lt;/a&gt; &lt;br&gt;
What tools do you use? What did we miss? &lt;/p&gt;

</description>
      <category>productivity</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
