<?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: llllvvuu</title>
    <description>The latest articles on DEV Community by llllvvuu (@llllvvuu).</description>
    <link>https://dev.to/llllvvuu</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%2F1153262%2Fc83b0ad7-1246-4e53-97de-1603a57bd073.png</url>
      <title>DEV Community: llllvvuu</title>
      <link>https://dev.to/llllvvuu</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/llllvvuu"/>
    <language>en</language>
    <item>
      <title>Improving Neovim load time on WSL 2</title>
      <dc:creator>llllvvuu</dc:creator>
      <pubDate>Wed, 01 Nov 2023 06:24:35 +0000</pubDate>
      <link>https://dev.to/llllvvuu/improving-neovim-load-time-on-wsl-2-441</link>
      <guid>https://dev.to/llllvvuu/improving-neovim-load-time-on-wsl-2-441</guid>
      <description>&lt;p&gt;Recently I decided to duplicate &lt;a href="https://github.com/llllvvuu/dotfiles/tree/main/vim/.config/nvim"&gt;my Neovim setup&lt;/a&gt; from MacOS to WSL. On MacOS, I never had any load time issues, but to my shock, on WSL it took 2 seconds to start Neovim and another 2 seconds to &lt;a href="https://github.com/folke/lazy.nvim"&gt;lazy load more plugins&lt;/a&gt; when opening a file!&lt;/p&gt;

&lt;p&gt;The root cause of this is the &lt;strong&gt;slow filesystem calls between WSL and the host Windows&lt;/strong&gt; which affects the search for executables. This can be addressed in 3 areas:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;a href="https://www.reddit.com/r/neovim/comments/1293o2y/comment/jelzgxt/"&gt;Bypass &lt;code&gt;clipboard.vim&lt;/code&gt; search for executables&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;a href="https://stackoverflow.com/questions/51336147/how-to-remove-the-win10s-path-from-wsl"&gt;Don't add Windows $PATH to WSL $PATH&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://unix.stackexchange.com/a/124517"&gt;Deduplicate $PATH&lt;/a&gt; (add this to the end of &lt;code&gt;.bashrc&lt;/code&gt;/&lt;code&gt;.zshrc&lt;/code&gt;)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A nice side effect of these steps is that bash/zsh becomes much faster as well (especially with autocompletion/&lt;a href="https://github.com/zsh-users/zsh-autosuggestions"&gt;autosuggest&lt;/a&gt;).&lt;/p&gt;

</description>
      <category>neovim</category>
      <category>wsl</category>
    </item>
    <item>
      <title>Many popular frontends are low-key open-source</title>
      <dc:creator>llllvvuu</dc:creator>
      <pubDate>Mon, 04 Sep 2023 13:36:43 +0000</pubDate>
      <link>https://dev.to/llllvvuu/it-turns-out-a-lot-of-popular-saas-frontends-are-low-key-open-source-1i86</link>
      <guid>https://dev.to/llllvvuu/it-turns-out-a-lot-of-popular-saas-frontends-are-low-key-open-source-1i86</guid>
      <description>&lt;p&gt;Ever wondered how your favorite frontend is built (for example, maybe it has an awesome component that you can't find replicated anywhere)? It might have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;No GitHub&lt;/li&gt;
&lt;li&gt;No GitLab&lt;/li&gt;
&lt;li&gt;No source maps in Chrome DevTools.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But you may still be able to find the original sources.&lt;/p&gt;

&lt;p&gt;I made a tool to extract them: &lt;a href="https://github.com/llllvvuu/dl-webapp-sources"&gt;https://github.com/llllvvuu/dl-webapp-sources&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;To summarize from the README:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You can get a list of all JS files loaded by a page using:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;performance&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getEntriesByType&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;resource&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="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;resource&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;resource&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;endsWith&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;.js&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="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;`"&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;"`&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;join&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt; &lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;You can pass this into the CLI:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;dl-webapp-sources &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;JS_URLS&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt; &lt;span class="nt"&gt;-o&lt;/span&gt; &lt;span class="k"&gt;${&lt;/span&gt;&lt;span class="nv"&gt;OUTPUT_DIRECTORY&lt;/span&gt;&lt;span class="k"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Often this will give you a full React app. It will be missing the build files like &lt;code&gt;package.json&lt;/code&gt;, &lt;code&gt;webpack.config.js&lt;/code&gt;, and &lt;code&gt;tsconfig.json&lt;/code&gt;, but you may be able to reverse engineer these - look for strings like &lt;code&gt;react-router&lt;/code&gt;, &lt;code&gt;next&lt;/code&gt;, etc and then plug in the appropriate build system and tweak the config.&lt;/p&gt;

&lt;p&gt;Try it on your favorite apps... you might be surprised! There are some interesting codebases to study and learn from.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>typescript</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
