<?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: Vincent Will</title>
    <description>The latest articles on Forem by Vincent Will (@vincenius).</description>
    <link>https://forem.com/vincenius</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%2F251078%2F863c814c-ab45-46c3-9af2-0214658c1219.jpeg</url>
      <title>Forem: Vincent Will</title>
      <link>https://forem.com/vincenius</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/vincenius"/>
    <language>en</language>
    <item>
      <title>The Most Common Website Security Issues</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Mon, 15 Dec 2025 09:44:25 +0000</pubDate>
      <link>https://forem.com/vincenius/the-most-common-website-security-issues-5dhn</link>
      <guid>https://forem.com/vincenius/the-most-common-website-security-issues-5dhn</guid>
      <description>&lt;p&gt;Recently, I built &lt;a href="https://statusscout.dev" rel="noopener noreferrer"&gt;StatusScout&lt;/a&gt;, an open-source tool to check and monitor a website’s health. For testing purposes, I ran the tool against hundreds of websites. Here are the most common security issues I encountered:&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Sensitive files or directories are publicly available
&lt;/h2&gt;

&lt;p&gt;A surprisingly large number of websites have sensitive files and directories accessible via the web. The ten most common ones I encountered are:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/.htaccess&lt;/strong&gt; – could reveal sensitive server rules&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/info.php or /test.php&lt;/strong&gt; – usually expose phpinfo() output, which can reveal detailed server and PHP configuration that could be abused&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/package-lock.json&lt;/strong&gt; – exposes JavaScript dependencies and project structure. This is especially dangerous if it includes outdated packages with known security vulnerabilities (use npm audit to check for those)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/.gitignore&lt;/strong&gt; – reveals which files are considered sensitive or excluded from version control&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/.git/&lt;/strong&gt; – exposes the Git repository and history. Attackers may download the source code or commit history&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/.git/config&lt;/strong&gt; – exposes Git configuration, which can leak repository details and targets&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/wp-includes&lt;/strong&gt; – WordPress core include files are publicly accessible. This can help attackers fingerprint the WordPress version and plugins&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/docker-compose.yml&lt;/strong&gt; – includes service definitions, image names, and environment references that can expose deployment details or secrets&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;/bitbucket-pipelines.yml&lt;/strong&gt; – contains repository and deployment information&lt;/p&gt;

&lt;p&gt;There are many more files I’ve encountered, but these are the most common ones.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Missing or misconfigured DNS records
&lt;/h2&gt;

&lt;p&gt;Other common security issues lie within DNS settings. One of the most common problems is &lt;strong&gt;dangling DNS records&lt;/strong&gt;, which can lead to subdomain takeovers. This happens when a DNS record points to a service that no longer exists (for example, a deleted cloud resource on AWS, GitHub Pages, or Vercel). Attackers can then claim the resource and take over the subdomain.&lt;/p&gt;

&lt;p&gt;Another common issue is a missing &lt;strong&gt;DNSSEC&lt;/strong&gt; record, which increases the risk of spoofing and hijacking.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Missing HTTP headers
&lt;/h2&gt;

&lt;p&gt;Most websites are also missing several security-related HTTP headers. The most important ones are:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Content-Security-Policy&lt;/strong&gt; – controls which resources (scripts, styles, images, etc.) are allowed to load&lt;br&gt;
&lt;strong&gt;Strict-Transport-Security&lt;/strong&gt; – forces browsers to use HTTPS&lt;br&gt;
&lt;strong&gt;X-Frame-Options&lt;/strong&gt; – protects against clickjacking by preventing your site from being embedded in an iframe&lt;br&gt;
&lt;strong&gt;X-Content-Type-Options&lt;/strong&gt; – prevents MIME type sniffing&lt;/p&gt;

&lt;p&gt;If you want to check your website for all these security issues, you can do so for free at &lt;a href="https://statusscout.dev" rel="noopener noreferrer"&gt;https://statusscout.dev&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Thanks for reading! Let me know if you'd like to read a more extended guide on website security :)&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>security</category>
      <category>beginners</category>
      <category>learning</category>
    </item>
    <item>
      <title>💻 Web Development Resources #181</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 17 Jan 2024 06:36:44 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-181-5bgl</link>
      <guid>https://forem.com/vincenius/web-development-resources-181-5bgl</guid>
      <description>&lt;p&gt;If you have any feedback, or you want to share tools and resources for the next newsletter - just comment below.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.triplit.dev/" rel="noopener noreferrer"&gt;Triplit&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.triplit.dev/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-14T08%3A23%3A28.246Z-Triplit.jpg" alt="Triplit" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A complete solution to data persistence, state management, and realtime synchronization for web applications.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://melt-ui.com/" rel="noopener noreferrer"&gt;Melt UI&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://melt-ui.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-14T08%3A21%3A32.525Z-MeltUI.jpg" alt="Melt UI" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source Svelte component library for building high-quality, accessible design systems and web apps.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/ArchiveBox/ArchiveBox" rel="noopener noreferrer"&gt;ArchiveBox&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/ArchiveBox/ArchiveBox" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-14T08%3A22%3A57.151Z-ArchiveBox.jpg" alt="ArchiveBox" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source self-hosted web archiving. It takes an URLs/browser history and etc. and saves HTML, JS, PDFs, media, and more.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://lassebomh.github.io/htmx-playground/" rel="noopener noreferrer"&gt;HTMX Playground&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://lassebomh.github.io/htmx-playground/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-10T07%3A15%3A57.713Z-HTMXPlayground.jpg" alt="HTMX Playground" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A tool that allows you to write code in a backend-like environment, running entirely inside the browser.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://tinydevkit.com/" rel="noopener noreferrer"&gt;TinyDevKit&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://tinydevkit.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-10T07%3A15%3A22.078Z-TinyDevKit.jpg" alt="TinyDevKit" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of handy developer tools like URL parsing, base64 encoding/decoding, and other convenient utilities.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://time.fyi/timezones" rel="noopener noreferrer"&gt;time.fyi&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://time.fyi/timezones" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-10T07%3A14%3A09.458Z-timefyi.jpg" alt="time.fyi" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A tool to compare different timezones by using a slider.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.frontendplanet.com/useful-css-tools/" rel="noopener noreferrer"&gt;39 Useful CSS Tools for Developers&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.frontendplanet.com/useful-css-tools/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-10T07%3A12%3A38.521Z-39UsefulCSSToolsforDevelopers.jpg" alt="39 Useful CSS Tools for Developers" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A list of 39 CSS tools for developers, including calculators and generators.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/schedule-x/schedule-x" rel="noopener noreferrer"&gt;schedule-x&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/schedule-x/schedule-x" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-10T07%3A10%3A38.747Z-schedulex.jpg" alt="schedule-x" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A library for a material design event calendar and date picker.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://domainr.com/" rel="noopener noreferrer"&gt;Domainr&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://domainr.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-10T07%3A11%3A57.815Z-Domainr.jpg" alt="Domainr" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A fast and free, domain name search for every TLD&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>resources</category>
      <category>javascript</category>
      <category>tooling</category>
    </item>
    <item>
      <title>💻 Web Development Resources #180</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 10 Jan 2024 07:08:49 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-180-5g5k</link>
      <guid>https://forem.com/vincenius/web-development-resources-180-5g5k</guid>
      <description>&lt;p&gt;I hope you all had a good start into the new year. This year, I will continue sending you high quality web development resources (without any ads or sponsorships). If you want to support my work, feel free to leave a donation on &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt; ♥️&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://pocketbase.io/" rel="noopener noreferrer"&gt;PocketBase&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://pocketbase.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-07T10%3A10%3A09.089Z-PocketBase.jpg" alt="PocketBase" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source backend in 1 file with realtime database, authentication, file storage and admin dashboard.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://aws-lite.org/" rel="noopener noreferrer"&gt;aws-lite&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://aws-lite.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-05T12%3A55%3A37.392Z-awslite.jpg" alt="aws-lite" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A simple, extremely fast, extensible Node.js client for interacting with AWS services.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://e-html.org/" rel="noopener noreferrer"&gt;EHTML&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://e-html.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-05T12%3A56%3A33.182Z-EHTML.jpg" alt="EHTML" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A set of custom elements that you can place on an HTML page for different purposes and use cases.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://svg.io/" rel="noopener noreferrer"&gt;SVG.IO&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://svg.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-05T12%3A49%3A22.144Z-SVGIO.jpg" alt="SVG.IO" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free AI Generator text-to-svg tool to create unique SVG cut files.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://devresume.app/" rel="noopener noreferrer"&gt;DevResume&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://devresume.app/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-05T12%3A55%3A04.912Z-DevResume.jpg" alt="DevResume" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free web-based resume editor based on writing YAML with realtime preview and PDF export.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/lxfater/inpaint-web" rel="noopener noreferrer"&gt;inpaint-web&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/lxfater/inpaint-web" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T18%3A47%3A17.719Z-inpaintweb.jpg" alt="inpaint-web" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free and open-source inpainting and image-upscaling tool powered by webgpu and wasm on the browser.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://uxrepo.co/" rel="noopener noreferrer"&gt;UX Repo&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://uxrepo.co/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T18%3A47%3A43.762Z-UXRepo.jpg" alt="UX Repo" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
UX resources to help craft exceptional user experiences.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://vaibhav111tandon.github.io/vov.css/" rel="noopener noreferrer"&gt;VOV.CSS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://vaibhav111tandon.github.io/vov.css/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T12%3A54%3A24.526Z-VOVCSS.jpg" alt="VOV.CSS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A CSS library for small but useful animations.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/cmang/durdraw" rel="noopener noreferrer"&gt;durdraw&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/cmang/durdraw" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T11%3A35%3A27.462Z-durdraw.jpg" alt="durdraw" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Versatile ASCII and ANSI Art text editor for drawing in the Linux/Unix/macOS terminal.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/penxio/penx" rel="noopener noreferrer"&gt;PenX&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/penxio/penx" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T11%3A34%3A14.864Z-PenX.jpg" alt="PenX" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A structured, privacy-first, note-taking app for personal use.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/davidmerfield/blot" rel="noopener noreferrer"&gt;Blot&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/davidmerfield/blot" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T11%3A35%3A00.922Z-Blot.jpg" alt="Blot" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A tool to turn a folder into a blog.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore" rel="noopener noreferrer"&gt;You Don't Need Lodash Underscore&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T11%3A33%3A07.311Z-YouDontNeedLodashUnderscore.jpg" alt="You Don't Need Lodash Underscore" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A list of JavaScript methods which you can use natively + ESLint Plugin.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://sourcemap.tools/" rel="noopener noreferrer"&gt;Sourcemap Tools&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://sourcemap.tools/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T11%3A31%3A18.802Z-SourcemapTools.jpg" alt="Sourcemap Tools" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Apply source maps to the JavaScript error stack trace and get the original error position.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://fastbootstrap.com/" rel="noopener noreferrer"&gt;FastBootstrap&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://fastbootstrap.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2024-01-02T11%3A31%3A59.895Z-FastBootstrap.jpg" alt="FastBootstrap" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A library of beautiful Bootstrap UI components designed with Atlassian Design.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://heynote.com/" rel="noopener noreferrer"&gt;Heynote&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://heynote.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-22T16%3A24%3A39.340Z-Heynote.jpg" alt="Heynote" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A dedicated scratchpad for developers with syntax highlighting and auto-format.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>resources</category>
      <category>productivity</category>
    </item>
    <item>
      <title>💻 Web Development Resources #179</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 20 Dec 2023 09:09:06 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-179-3b26</link>
      <guid>https://forem.com/vincenius/web-development-resources-179-3b26</guid>
      <description>&lt;p&gt;This will be the last issue for this year. Have a great holiday season and a happy new year! See y'all next year :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://tsdocs.dev/" rel="noopener noreferrer"&gt;TS Docs&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://tsdocs.dev/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-19T17%3A17%3A09.344Z-TSDocs.jpg" alt="TS Docs" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A website to generate type documentation for npm libraries.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://taildashboards.com" rel="noopener noreferrer"&gt;Taildashboards&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://taildashboards.com" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-19T08%3A40%3A28.032Z-Taildashboards.jpg" alt="Taildashboards" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Fully responsive and carefully crafted, one-page dashboards.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/twentyhq/twenty" rel="noopener noreferrer"&gt;twenty&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/twentyhq/twenty" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-19T08%3A41%3A23.651Z-twenty.jpg" alt="twenty" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A modern open-source alternative to Salesforce.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/Vincenius/OpenMailer" rel="noopener noreferrer"&gt;OpenMailer&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/Vincenius/OpenMailer" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-19T07%3A27%3A53.950Z-OpenMailer.jpg" alt="OpenMailer" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A minimalist Next.js alternative to Mailchimp, Beehiiv, Convertkit etc.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://stackui.co/" rel="noopener noreferrer"&gt;Stack UI&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://stackui.co/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-14T06%3A11%3A18.529Z-StackUI.jpg" alt="Stack UI" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A Freeform UI library which helps you to craft interactive user interfaces instantly.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/automock/automock" rel="noopener noreferrer"&gt;automock&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/automock/automock" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-14T06%3A07%3A35.386Z-automock.jpg" alt="automock" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A library for easier unit testing for TypeScript dependency injection frameworks.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://fonts.google.com/icons" rel="noopener noreferrer"&gt;Google Icons&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://fonts.google.com/icons" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-09-23T09%3A14%3A44.698Z-GoogleIcons.jpg" alt="Google Icons" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Icons in material design style in three styles and four adjustable variable font styles.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://pieces.app/" rel="noopener noreferrer"&gt;Pieces for Developers&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://pieces.app/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-14T06%3A00%3A36.757Z-PiecesforDevelopers.jpg" alt="Pieces for Developers" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A Mac app to save, search, share &amp;amp; reuse key developer resources in a AI-powered code snippets + screenshots hub.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.braedin.com/Thpace/" rel="noopener noreferrer"&gt;THPACE!&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.braedin.com/Thpace/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-08-21T08%3A07%3A14.547Z-THPACE.jpg" alt="THPACE!" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A pretty space animation out of triangles using canvas.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.pitivi.org/" rel="noopener noreferrer"&gt;Pitivi&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.pitivi.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-14T05%3A58%3A47.374Z-Pitivi.jpg" alt="Pitivi" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free and open source video editor for Linux.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/VikParuchuri/marker" rel="noopener noreferrer"&gt;Marker&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/VikParuchuri/marker" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-13T14%3A20%3A11.939Z-Marker.jpg" alt="Marker" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A tool to convert PDF, EPUB, and MOBI to markdown quickly with high accuracy.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>resources</category>
      <category>javascript</category>
      <category>css</category>
    </item>
    <item>
      <title>💻 Web Development Resources #178</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Thu, 14 Dec 2023 05:54:34 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-178-2ghn</link>
      <guid>https://forem.com/vincenius/web-development-resources-178-2ghn</guid>
      <description>&lt;p&gt;A bit late and a bit smaller this week, because I have been sick the last few days...&lt;/p&gt;

&lt;p&gt;But here's the summary of this week's &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt; resources :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/tolgee/tolgee-platform" rel="noopener noreferrer"&gt;tolgee&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/tolgee/tolgee-platform" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-13T11%3A05%3A01.306Z-tolgee.jpg" alt="tolgee" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source localization platform that is developer &amp;amp; translator friendly.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://osssoftware.org/" rel="noopener noreferrer"&gt;Open Source Software&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://osssoftware.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-13T11%3A29%3A25.026Z-OpenSourceSoftware.jpg" alt="Open Source Software" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A website to find open source alternatives to popular projects as well as projects to contribute to.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://hexcolor.co/" rel="noopener noreferrer"&gt;Hex Colors&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://hexcolor.co/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-08T09%3A06%3A28.274Z-HexColors.jpg" alt="Hex Colors" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free color tool providing information about any color and generating matching color schemes.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://react.keepdesign.io/" rel="noopener noreferrer"&gt;Keep React&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://react.keepdesign.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-08T08%3A56%3A50.420Z-KeepReact.jpg" alt="Keep React" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A library of 40+ open-source React UI components and interactive elements.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://remixicon.com/" rel="noopener noreferrer"&gt;Remix Icon&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://remixicon.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-09-22T08%3A20%3A00.734Z-RemixIcon.jpg" alt="Remix Icon" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A set of open source neutral style system symbols. All of the icons are free for both personal and commercial use.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://docs.codex.so/codex-docs" rel="noopener noreferrer"&gt;CodeX Docs&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://docs.codex.so/codex-docs" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-06T15%3A26%3A32.045Z-CodeXDocs.jpg" alt="CodeX Docs" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A simple free application for your internal, public or personal docs.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://tailwind.unify-ui.dev/" rel="noopener noreferrer"&gt;Tailwind Blocks&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://tailwind.unify-ui.dev/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-06T07%3A03%3A17.057Z-TailwindBlocks.jpg" alt="Tailwind Blocks" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of modern, reusable UI blocks and components for React, Next.js and Astro build on top of TailwindCSS.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://tympanus.net/Development/AnimatedHeaderBackgrounds/index.html" rel="noopener noreferrer"&gt;Animated Background Headers&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://tympanus.net/Development/AnimatedHeaderBackgrounds/index.html" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-08-21T08%3A14%3A30.620Z-AnimatedBackgroundHeaders.jpg" alt="Animated Background Headers" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Creative website header animations using Canvas and JavaScript.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>resources</category>
      <category>javascript</category>
      <category>tooling</category>
    </item>
    <item>
      <title>💻 Web Development Resources #177</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 06 Dec 2023 06:59:15 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-177-4gal</link>
      <guid>https://forem.com/vincenius/web-development-resources-177-4gal</guid>
      <description>&lt;p&gt;I hope you're having a great December!&lt;/p&gt;

&lt;p&gt;If you have any feedback, or you want to share tools and resources for the next newsletter - just answer comment below :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://front.tips/" rel="noopener noreferrer"&gt;Front Tips&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://front.tips/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-05T06%3A28%3A57.542Z-FrontTips.jpg" alt="Front Tips" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
Daily short video tips and tricks for HTML, CSS, JavaScript, frontend libraries and tools.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/" rel="noopener noreferrer"&gt;Let’s learn how modern JavaScript frameworks work by building one&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://nolanlawson.com/2023/12/02/lets-learn-how-modern-javascript-frameworks-work-by-building-one/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-04T08%3A25%3A21.078Z-LetslearnhowmodernJavaScriptframeworksworkbybuildingone.jpg" alt="Let’s learn how modern JavaScript frameworks work by building one" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An interesting article that walks through building a JavaScript framework to understand the underlying code.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://app.y.gy/" rel="noopener noreferrer"&gt;y.gy&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://app.y.gy/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-03T11%3A16%3A58.383Z-ygy.jpg" alt="y.gy" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free and fast link shortener with QR codes, custom domains and more.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/anywhichway/examplify" rel="noopener noreferrer"&gt;examplify&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/anywhichway/examplify" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-01T07%3A47%3A54.270Z-examplify.jpg" alt="examplify" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A library to amplify your Markdown documentation with executable examples.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/nimbus-corp/layoutcss" rel="noopener noreferrer"&gt;LayoutCSS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/nimbus-corp/layoutcss" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-30T12%3A41%3A57.014Z-LayoutCSS.jpg" alt="LayoutCSS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A CSS library to create responsive layouts with html only.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/williamtroup/Syntax.js/" rel="noopener noreferrer"&gt;Syntax.js&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/williamtroup/Syntax.js/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-12-01T07%3A47%3A14.550Z-Syntaxjs.jpg" alt="Syntax.js" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A lightweight, and easy-to-use, JavaScript library for code syntax highlighting.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/trekhleb/javascript-algorithms" rel="noopener noreferrer"&gt;JavaScript Algorithms and Data Structures&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/trekhleb/javascript-algorithms" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-29T07%3A47%3A57.631Z-JavaScriptAlgorithmsandDataStructures.jpg" alt="JavaScript Algorithms and Data Structures" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A GitHub repository with algorithms and data structures implemented in JavaScript with explanations.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://designerfeed.org/css-background-patterns/" rel="noopener noreferrer"&gt;CSS Background Patterns&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://designerfeed.org/css-background-patterns/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-29T07%3A35%3A31.127Z-CSSBackgroundPatterns.jpg" alt="CSS Background Patterns" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A nice article with a lot of CSS patterns.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/0x48piraj/fadblock" rel="noopener noreferrer"&gt;FadBlock&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/0x48piraj/fadblock" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-29T07%3A44%3A01.246Z-FadBlock.jpg" alt="FadBlock" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/typicode/json-server" rel="noopener noreferrer"&gt;json-server&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/typicode/json-server" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-29T07%3A46%3A55.294Z-jsonserver.jpg" alt="json-server" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A library to create a full fake REST API with zero coding in less than 30 seconds.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://trianglify.io/" rel="noopener noreferrer"&gt;Trianglify.io&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://trianglify.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-08-21T07%3A56%3A43.728Z-Trianglifyio.jpg" alt="Trianglify.io" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Create colorful low poly triangle patterns that can be used as wallpapers and website assets.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://icons8.com/icons" rel="noopener noreferrer"&gt;Icons8&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://icons8.com/icons" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-09-22T08%3A02%3A10.418Z-Icons8.jpg" alt="Icons8" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of 1,313,900 free icons in various styles.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>resources</category>
      <category>css</category>
    </item>
    <item>
      <title>💻 Web Development Resources #176</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 29 Nov 2023 06:12:45 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-176-74n</link>
      <guid>https://forem.com/vincenius/web-development-resources-176-74n</guid>
      <description>&lt;p&gt;Here's the summary of this week's &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt; resources.&lt;/p&gt;

&lt;p&gt;If you have any feedback, or you want to share tools and resources for the next newsletter - just comment below :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://uiball.com/ldrs/" rel="noopener noreferrer"&gt;LDRS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://uiball.com/ldrs/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-27T05%3A43%3A04.017Z-LDRS.jpg" alt="LDRS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of free, open-source loading animations. Available as copy/paste HTML or drop-in web components.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/goniszewski/grimoire" rel="noopener noreferrer"&gt;Grimoire&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/goniszewski/grimoire" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-26T12%3A31%3A09.158Z-Grimoire.jpg" alt="Grimoire" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source bookmark manager to add and organize bookmarks easily.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://css-generators.com/ribbon-shapes/" rel="noopener noreferrer"&gt;CSS Ribbon Shapes&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://css-generators.com/ribbon-shapes/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-24T11%3A39%3A31.011Z-CSSRibbonShapes.jpg" alt="CSS Ribbon Shapes" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A CSS-only collection of Ribbon Shapes made with a single element.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/alyssaxuu/screenity" rel="noopener noreferrer"&gt;screenity&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/alyssaxuu/screenity" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-24T11%3A38%3A59.982Z-screenity.jpg" alt="screenity" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A powerful free and open-source screen recorder &amp;amp; annotation tool for Chrome.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://thenounproject.com/" rel="noopener noreferrer"&gt;Noun Project&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://thenounproject.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-09-22T07%3A59%3A36.148Z-Ionicons.jpg" alt="Noun Project" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A website to search for over 3 million icons, which can be used for free with attribution.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://pieces.app/" rel="noopener noreferrer"&gt;Pieces&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://pieces.app/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-22T08%3A49%3A45.042Z-Pieces.jpg" alt="Pieces" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A tool to save, search, share &amp;amp; reuse key developer resources in a AI-powered code snippets + screenshots hub.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.toptal.com/designers/subtlepatterns/" rel="noopener noreferrer"&gt;Subtle Patterns&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.toptal.com/designers/subtlepatterns/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-08-21T08%3A05%3A53.212Z-SubtlePatterns.jpg" alt="Subtle Patterns" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A huge list of more than 500 subtle background patterns and textures.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.joshwcomeau.com/css/interactive-guide-to-grid/" rel="noopener noreferrer"&gt;An Interactive Guide to CSS Grid&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.joshwcomeau.com/css/interactive-guide-to-grid/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-22T08%3A47%3A56.429Z-AnInteractiveGuidetoCSSGrid.jpg" alt="An Interactive Guide to CSS Grid" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A guide on how CSS Grid works and how we can use it effectively.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/sindresorhus/image-dimensions" rel="noopener noreferrer"&gt;image-dimensions&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/sindresorhus/image-dimensions" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-22T08%3A48%3A51.335Z-imagedimensions.jpg" alt="image-dimensions" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A JavaScript library to get the dimensions of an image.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://biomejs.dev/" rel="noopener noreferrer"&gt;Biome&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://biomejs.dev/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-22T06%3A41%3A27.622Z-Biome.jpg" alt="Biome" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A toolchain for web projects, aimed to provide functionalities to maintain them.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.youtube.com/watch?v=j4mOm1qic7k" rel="noopener noreferrer"&gt;CSS4 Is Coming&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.youtube.com/watch?v=j4mOm1qic7k" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-22T08%3A46%3A31.131Z-CSS4IsComingNotaClickbait.jpg" alt="CSS4 Is Coming" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A great video with an explanation of why CSS4 is coming even though we were told that it will never happen.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>resources</category>
      <category>css</category>
    </item>
    <item>
      <title>💻 Web Development Resources #175</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 22 Nov 2023 07:01:21 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-175-2i1a</link>
      <guid>https://forem.com/vincenius/web-development-resources-175-2i1a</guid>
      <description>&lt;p&gt;If you have any feedback, or you want to share tools and resources for the next newsletter - just comment below :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://dev.to/vincenius/self-hosting-your-web-app-on-an-ubuntu-server-1ple"&gt;Self-Hosting Web Apps On Ubuntu&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://dev.to/vincenius/self-hosting-your-web-app-on-an-ubuntu-server-1ple"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-21T14%3A10%3A12.361Z-SelfHostingWebAppsOnUbuntu.jpg" alt="Self-Hosting Web Apps On Ubuntu" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A guide I recently wrote on how to set up and host applications on an Ubuntu server.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.defined.net/blog/modern-frontend-testing/" rel="noopener noreferrer"&gt;Modern frontend testing&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.defined.net/blog/modern-frontend-testing/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-21T14%3A08%3A43.973Z-Modernfrontendtesting.jpg" alt="Modern frontend testing" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A blog post about frontend testing using Vitest, Storybook, and Playwright.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.svgbackgrounds.com/" rel="noopener noreferrer"&gt;SVG Backgrounds&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.svgbackgrounds.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-08-21T07%3A55%3A38.088Z-SVGBackgrounds.jpg" alt="SVG Backgrounds" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of customizable SVG-based repeating patterns and backgrounds.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://signaldb.js.org/" rel="noopener noreferrer"&gt;SignalDB&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://signaldb.js.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-20T08%3A45%3A54.813Z-SignalDB.jpg" alt="SignalDB" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A reactive local JavaScript database with a MongoDB-like interface, first-class TypeScript support and signal-based reactivity.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://uxwing.com/" rel="noopener noreferrer"&gt;UXWing&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://uxwing.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-09-22T08%3A00%3A29.033Z-UXWing.jpg" alt="UXWing" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A lot of icons that are free for any personal and commercial use and available as .svg and .png.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://fusionssg.com/" rel="noopener noreferrer"&gt;fusion.ssg&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://fusionssg.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-17T06%3A19%3A12.607Z-fusionssg.jpg" alt="fusion.ssg" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A minimal framework for building static websites, with no initial project config required.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://lea.verou.me/blog/2023/minimalist-affordances/" rel="noopener noreferrer"&gt;Minimalist Affordances: Making the right tradeoffs&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://lea.verou.me/blog/2023/minimalist-affordances/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-16T05%3A57%3A24.661Z-MinimalistAffordancesMakingtherighttradeoffs.jpg" alt="Minimalist Affordances: Making the right tradeoffs" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An article where Lea Verou discusses the balance between usability and aesthetics in user interface design.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.simplethread.com/card-components-best-practices/" rel="noopener noreferrer"&gt;Card Components: A Dive into Best Practices&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.simplethread.com/card-components-best-practices/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-15T07%3A14%3A05.823Z-CardComponentsADiveintoBestPractices.jpg" alt="Card Components: A Dive into Best Practices" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A short article about the best practices of card-based UI design.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://matifandy8.github.io/NeoBrutalismCSS/" rel="noopener noreferrer"&gt;NeoBrutalismCSS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://matifandy8.github.io/NeoBrutalismCSS/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-14T13%3A46%3A53.816Z-NeoBrutalismCSS.jpg" alt="NeoBrutalismCSS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A CSS framework that brings the aesthetics of NeoBrutalism to your web projects.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.bestcssbuttongenerator.com" rel="noopener noreferrer"&gt;CSS Button Generator&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.bestcssbuttongenerator.com" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-14T13%3A48%3A10.503Z-CSSButtonGenerator.jpg" alt="CSS Button Generator" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free online tool that allows you to create cross browser CSS button styles.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 donating via &lt;a href="https://ko-fi.com/webdev_town" rel="noopener noreferrer"&gt;Ko-Fi&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>resources</category>
      <category>javascript</category>
      <category>opensource</category>
    </item>
    <item>
      <title>💻 Web Development Resources #174</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 15 Nov 2023 06:48:38 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-174-fn8</link>
      <guid>https://forem.com/vincenius/web-development-resources-174-fn8</guid>
      <description>&lt;p&gt;Here are this week's resources :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" rel="noopener noreferrer"&gt;Just normal web things&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://heather-buchel.com/blog/2023/07/just-normal-web-things/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-14T08%3A18%3A13.109Z-Justnormalwebthings.jpg" alt="Just normal web things" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A plea for us to get back to building websites that can do normal website things.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://bigheads.io/" rel="noopener noreferrer"&gt;Big Heads&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://bigheads.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-14T06%3A17%3A56.751Z-BigHeads.jpg" alt="Big Heads" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A tool to easily generate avatars for your projects by combining expressions, clothing, hairstyles and colors.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://html-first.com/" rel="noopener noreferrer"&gt;HTML First&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://html-first.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-13T06%3A37%3A48.318Z-HTMLFirst.jpg" alt="HTML First" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Principles to make building web software easier, faster and more inclusive.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://vavebg.com/" rel="noopener noreferrer"&gt;Vave BG&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://vavebg.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-13T06%3A38%3A34.871Z-VaveBG.jpg" alt="Vave BG" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Free, easy-to-use backgrounds for your designs, wallpapers, and presentations.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/scalar/scalar" rel="noopener noreferrer"&gt;scalar&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/scalar/scalar" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-12T13%3A41%3A28.693Z-scalar.jpg" alt="scalar" width="800" height="400"&gt;&lt;/a&gt;&lt;br&gt;
An open-source tool to turn swagger/openapi spec to stripe docs.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/HichemTab-tech/EasyCaptchaJS" rel="noopener noreferrer"&gt;EasyCaptchaJS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/HichemTab-tech/EasyCaptchaJS" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-10T06%3A37%3A30.128Z-EasyCaptchaJS.jpg" alt="EasyCaptchaJS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A lightweight and user-friendly jQuery/JS library that simplifies the integration of Google reCAPTCHA API into web pages.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://react-datasheet-grid.netlify.app/" rel="noopener noreferrer"&gt;React Datasheet Grid&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://react-datasheet-grid.netlify.app/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-11T14%3A16%3A30.551Z-ReactDatasheetGrid.jpg" alt="React Datasheet Grid" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An Airtable-like| React component to create beautiful spreadsheets.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.papermark.io/" rel="noopener noreferrer"&gt;Papermark&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.papermark.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-09T14%3A40%3A24.848Z-Papermark.jpg" alt="Papermark" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source document sharing alternative to DocSend with built-in analytics.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://vector.mapcraft.biz/constructor/" rel="noopener noreferrer"&gt;Vector maps&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://vector.mapcraft.biz/constructor/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-09T14%3A36%3A09.673Z-Vectormaps.jpg" alt="Vector maps" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An SVG world map, where you easily select and export countries and regions as SVG. &lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/armennersisyan/ExpandifyCSS" rel="noopener noreferrer"&gt;ExpandifyCSS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/armennersisyan/ExpandifyCSS" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-09T14%3A37%3A45.200Z-ExpandifyCSS.jpg" alt="ExpandifyCSS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A lightweight, CSS-only library for creating expandable and collapsible sections with ease.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/Cicada-Software/cicada" rel="noopener noreferrer"&gt;Cicada&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/Cicada-Software/cicada" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-06T18%3A56%3A40.318Z-Cicada.jpg" alt="Cicada" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A FOSS, cross-platform version of GitHub Actions and Gitlab CI.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://evodim.github.io/mgplus/" rel="noopener noreferrer"&gt;Milligram Plus&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://evodim.github.io/mgplus/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-08T07%3A14%3A07.817Z-MilligramPlus.jpg" alt="Milligram Plus" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A minimalist CSS framework for a fast and clean starting point, designed for better performance and higher productivity.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 booking a &lt;a href="https://webdev.town/sponsorship/"&gt;sponsored post&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>resources</category>
      <category>react</category>
    </item>
    <item>
      <title>A Guide To Self-Hosting Web Apps On Ubuntu Servers</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Fri, 10 Nov 2023 07:49:49 +0000</pubDate>
      <link>https://forem.com/vincenius/self-hosting-your-web-app-on-an-ubuntu-server-1ple</link>
      <guid>https://forem.com/vincenius/self-hosting-your-web-app-on-an-ubuntu-server-1ple</guid>
      <description>&lt;p&gt;Hey everyone,&lt;/p&gt;

&lt;p&gt;I've recently moved my Next.js application from Vercel to an Ubuntu Server. In this article, I will share a step-by-step guide on how I did it. This applicable for any web app that runs on a port.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Prerequirement:&lt;/em&gt;&lt;br&gt;
A GitHub repository with your application you want to host&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclaimer: Links marked with * are affiliate links&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Table of contents:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Connect to your server&lt;/li&gt;
&lt;li&gt;Fetch the code from GitHub&lt;/li&gt;
&lt;li&gt;Run the app&lt;/li&gt;
&lt;li&gt;Serve the app using Caddy&lt;/li&gt;
&lt;li&gt;Create a CI pipeline using GitHub Actions&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;
  
  
  Connect to your server
&lt;/h2&gt;

&lt;p&gt;First, you'll need an Ubuntu server. Some options are &lt;a href="https://m.do.co/c/5ec9f49fcf88" rel="noopener noreferrer"&gt;DigitalOcean&lt;/a&gt;* and &lt;a href="https://aws.amazon.com/" rel="noopener noreferrer"&gt;AWS EC2&lt;/a&gt;. I decided to go for &lt;a href="https://acn.ionos.com/aff_c?offer_id=1&amp;amp;aff_id=7931" rel="noopener noreferrer"&gt;IONOS&lt;/a&gt;* because they are using green energy and their pricing is quite reasonable. (e.g. 4GB ram, 2 cores &amp;amp; 160GB storage for $9/mo)&lt;/p&gt;

&lt;p&gt;The important part is that you make sure that the public IP won't change on server restart. How to do this depends on your hosting provider. For DigitalOcean this means adding a Reserved IP and for AWS adding an Elastic IP.&lt;/p&gt;

&lt;p&gt;Your hosting provider will give you either an SSH key or a password to connect to your Linux instance.&lt;/p&gt;

&lt;p&gt;If you got an SSH key, you'll need to add it to your machine first. Move the private key to your SSH directory (&lt;code&gt;~/.ssh&lt;/code&gt;). Then open your terminal and use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ssh-add ~/.ssh/your-private-key
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For Windows, you might need to run &lt;code&gt;start-ssh-agent&lt;/code&gt; first.&lt;/p&gt;

&lt;p&gt;Now you can connect to your instance using your terminal.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ssh username@your-public-ip
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Usually your default username will be "root" or "ubuntu".&lt;/p&gt;

&lt;h2&gt;
  
  
  Fetch the code from GitHub.
&lt;/h2&gt;

&lt;p&gt;Now that we're connected to the server, we need to get our application code. This can be done via git clone. To be able to access your GitHub account, you need to create a new SSH key. On your Ubuntu server run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ssh-keygen
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Use the default path (&lt;code&gt;/root/.ssh/id_rsa&lt;/code&gt;) and leaving the passphrase empty. Get your public key by running&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat&lt;/span&gt; ~/.ssh/id_rsa.pub
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copy the output. Now head to your GitHub settings → SSH and GPG keys → New SSH Key. Give a proper title and paste the output of your public key to the Key field, and create the key. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fxpnv0z51jbggwcfhs61e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fxpnv0z51jbggwcfhs61e.png" alt="Screenshot of GitHub. Click SSH and PGP Keys and then New SSH Key" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now you will be able to pull your code from your Ubuntu server. Go to your GitHub repository and copy the SSH clone URL. (&lt;code&gt;git@github.com:your-username/your-repository.git&lt;/code&gt;)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fhekkwl1lrc2bqhpdcfxb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fhekkwl1lrc2bqhpdcfxb.png" alt="Screenshot of GitHub. Copy the repositories SSH clone url" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now head back to your server command line. For storing my applications, I usually create a directory &lt;code&gt;apps&lt;/code&gt; in my home directory.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;apps
&lt;span class="nb"&gt;cd &lt;/span&gt;apps/
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's personal preference. You can store your code wherever you want. Clone your GitHub repository using the URL you just copied.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone git@github.com:your-username/your-repository.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Run the app
&lt;/h2&gt;

&lt;p&gt;Before you are able to run your application, you might need to install dependencies. My application is a Next.js app. So I need to install Node.js first. I will install it using "nvm", because that makes switching versions easier. Based on my experience, this reduces headaches in the future.&lt;/p&gt;

&lt;p&gt;You can find the script to install nvm on their &lt;a href="https://github.com/nvm-sh/nvm" rel="noopener noreferrer"&gt;GitHub repository&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;As the time of writing this is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-o-&lt;/span&gt; https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After running the script, it will show you some follow-up commands to enable it. Run those as well. For me it's this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;export &lt;/span&gt;&lt;span class="nv"&gt;NVM_DIR&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$HOME&lt;/span&gt;&lt;span class="s2"&gt;/.nvm"&lt;/span&gt;
&lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-s&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$NVM_DIR&lt;/span&gt;&lt;span class="s2"&gt;/nvm.sh"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="se"&gt;\.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$NVM_DIR&lt;/span&gt;&lt;span class="s2"&gt;/nvm.sh"&lt;/span&gt;  &lt;span class="c"&gt;# loads nvm&lt;/span&gt;
&lt;span class="o"&gt;[&lt;/span&gt; &lt;span class="nt"&gt;-s&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$NVM_DIR&lt;/span&gt;&lt;span class="s2"&gt;/bash_completion"&lt;/span&gt; &lt;span class="o"&gt;]&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="se"&gt;\.&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="nv"&gt;$NVM_DIR&lt;/span&gt;&lt;span class="s2"&gt;/bash_completion"&lt;/span&gt;  &lt;span class="c"&gt;# This loads nvm bash_completion&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can verify that nvm is installed properly by running&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nt"&gt;-v&lt;/span&gt; &lt;span class="c"&gt;# will output the version (for me, 0.39.5)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we can use nvm to install any Node.js version. I will go with the most recent LTS (Long Term Support) version.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--lts&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To install other versions you can use&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nvm &lt;span class="nb"&gt;install &lt;/span&gt;node &lt;span class="c"&gt;# latest version&lt;/span&gt;
nvm &lt;span class="nb"&gt;install &lt;/span&gt;16.3.0 &lt;span class="c"&gt;# install a specific version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Verify that node has been installed correctly by running&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;node &lt;span class="nt"&gt;-v&lt;/span&gt; &lt;span class="c"&gt;# shows the node version (for me, v20.9.0)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we are able to install the dependencies of our project.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; ~/apps/your-repository/
npm i
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you want to use &lt;code&gt;yarn&lt;/code&gt; instead of &lt;code&gt;npm i&lt;/code&gt; you can install it using&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; yarn
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before running your application, don't forget to add the environment variables (if needed).&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;nano .env &lt;span class="c"&gt;# or nano .env.local for Next.js&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then add the variables and exit the editor with "Ctrl + X". Confirm saving the file with "Y" and confirm the filename with the return key.&lt;/p&gt;

&lt;p&gt;Now you should be able to build and run the app. For Next.js the corresponding commands are:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm run build
npm start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Your app should be running now. To be able to run the app in the background, I will use &lt;a href="https://github.com/Unitech/pm2" rel="noopener noreferrer"&gt;pm2&lt;/a&gt;.  Stop your application using "Ctrl + C" and install pm2&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install &lt;/span&gt;pm2 &lt;span class="nt"&gt;-g&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can run your app in the background using&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pm2 start npm &lt;span class="nt"&gt;--name&lt;/span&gt; &lt;span class="s2"&gt;"app-name"&lt;/span&gt; &lt;span class="nt"&gt;--&lt;/span&gt; start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace "app-name" with your application name. If your app needs a different npm script than &lt;code&gt;npm run start&lt;/code&gt;, replace &lt;code&gt;-- start&lt;/code&gt; with the command you need. If you run a file you can use &lt;code&gt;pm2 start main.js --name "app-name"&lt;/code&gt;. To see if the application is running properly, you can use&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pm2 logs
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now we need to make the app available to the public.&lt;/p&gt;

&lt;h2&gt;
  
  
  Serve the app using Caddy
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://caddyserver.com/" rel="noopener noreferrer"&gt;Caddy&lt;/a&gt; is a web server like nginx. The biggest advandage of Caddy over nginx is, that it handles HTTPS automatically. You can find the script to install Caddy in their &lt;a href="https://caddyserver.com/docs/install#debian-ubuntu-raspbian" rel="noopener noreferrer"&gt;documentation&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;At the time of writing, this is following:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-y&lt;/span&gt; debian-keyring debian-archive-keyring apt-transport-https
curl &lt;span class="nt"&gt;-1sLf&lt;/span&gt; &lt;span class="s1"&gt;'https://dl.cloudsmith.io/public/caddy/stable/gpg.key'&lt;/span&gt; | &lt;span class="nb"&gt;sudo &lt;/span&gt;gpg &lt;span class="nt"&gt;--dearmor&lt;/span&gt; &lt;span class="nt"&gt;-o&lt;/span&gt; /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl &lt;span class="nt"&gt;-1sLf&lt;/span&gt; &lt;span class="s1"&gt;'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt'&lt;/span&gt; | &lt;span class="nb"&gt;sudo tee&lt;/span&gt; /etc/apt/sources.list.d/caddy-stable.list
&lt;span class="nb"&gt;sudo &lt;/span&gt;apt update
&lt;span class="nb"&gt;sudo &lt;/span&gt;apt &lt;span class="nb"&gt;install &lt;/span&gt;caddy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before we serve our application using Caddy, we need to point the domain to the server IP. We need to do this first, so Caddy is able to issue the SSL Certificate.&lt;/p&gt;

&lt;p&gt;Head to the website where you bought your domain. For me this is Namecheap. Go to the DNS settings and add an A Record that points to the public IP of your server. As host, use "@" if you want to have it on your domain or enter any string that you want as subdomain.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2F8ignt3so4sdkenw7ibrj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F8ignt3so4sdkenw7ibrj.png" alt="Screenshot Namecheap showing an A Record with an IP" width="800" height="453"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now go back to your server's command line. We need to create a Caddyfile to tell Caddy what domain is pointing to our server. I will create the Caddyfile in the home directory of my user.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; ~/
nano Caddyfile
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add following content to the Caddyfile:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;your-domain.com &lt;span class="o"&gt;{&lt;/span&gt;
        reverse_proxy localhost:3000
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Replace &lt;code&gt;your-domain.com&lt;/code&gt; with the domain you are using. Also replace &lt;code&gt;:3000&lt;/code&gt; if your application runs on a different port. Save the file with "Ctrl + X" -&amp;gt; "Y" -&amp;gt; "Return". You can serve many applications via Caddyfile adding this code multiple times in your Caddyfile and replacing the domain and port.&lt;/p&gt;

&lt;p&gt;Now we are able to start Caddy. Make sure to be in the same directory as your Caddyfile when you start Caddy. Then run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;caddy stop &lt;span class="c"&gt;# make sure it's not running already&lt;/span&gt;
&lt;span class="nb"&gt;sudo &lt;/span&gt;caddy run
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now Caddy generates the SSL certificate and serves the app. It might fail to generate the SSL certificate even if you're sure, you've pointed the domain to the correct IP. Sometimes it takes a while for the DNS to propagate. Wait a bit and try again a few minutes later.&lt;/p&gt;

&lt;p&gt;Congrats! You should now be able to access your web app on your domain. If you're seeing errors, you can check the application logs with &lt;code&gt;pm2 logs&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;As a last step, we want to run Caddy in the background. Use "Ctrl + C" to exit the Caddy process. Then run&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;caddy start
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should still be able to access your application on your domain.&lt;/p&gt;

&lt;h2&gt;
  
  
  Create a CI pipeline using GitHub Actions
&lt;/h2&gt;

&lt;p&gt;Last but not least, we will set up a CI pipeline. It will automatically build and restart our app when we push to GitHub. This depends on how we log onto our Ubuntu machine (SSH key or password). For both variants you need to create a file &lt;code&gt;.github/workflows/deploy.yml&lt;/code&gt; in your project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Password authentication&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you use a password to log onto your server add the following content to the file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Deploy to Server&lt;/span&gt;

&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;push&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="c1"&gt;# deploy on push -&amp;gt;&lt;/span&gt;
    &lt;span class="na"&gt;branches&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;main"&lt;/span&gt; &lt;span class="pi"&gt;]&lt;/span&gt; &lt;span class="c1"&gt;# to this branch&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;SSH into the server and run a command&lt;/span&gt;
        &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;|&lt;/span&gt;
          &lt;span class="s"&gt;sshpass -p ${{ secrets.SSH_PASSWORD }} ssh -o StrictHostKeyChecking=no ${{ secrets.SSH_USERNAME }}@YOUR_IP &amp;lt;&amp;lt; 'EOF'&lt;/span&gt;
            &lt;span class="s"&gt;echo "Connected!!!"&lt;/span&gt;
            &lt;span class="s"&gt;export PATH="$PATH:/root/.nvm/versions/node/YOUR_NODE_VERSION/bin"&lt;/span&gt;
            &lt;span class="s"&gt;cd ~/your/application&lt;/span&gt;
            &lt;span class="s"&gt;git pull&lt;/span&gt;
            &lt;span class="s"&gt;npm i&lt;/span&gt;
            &lt;span class="s"&gt;npm run build&lt;/span&gt;
            &lt;span class="s"&gt;pm2 restart your-application&lt;/span&gt;
            &lt;span class="s"&gt;echo "Deployment done!"&lt;/span&gt;
          &lt;span class="s"&gt;EOF&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The first line of our run script tells GitHub to connect to our server via sshpass. For that we need to add the environment secrets &lt;code&gt;SSH_PASSWORD&lt;/code&gt; and &lt;code&gt;SSH_USERNAME&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;For that open your GitHub repository and click on "Settings". On the left menu click on "Secrets and variables" and in the sub-menu "Actions". There you can click "New repository secret". Create two secrets with the names "SSH_USERNAME" and "SSH_PASSWORD" with the corresponding values.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Ffgkssnfalng8ux05gn0e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Ffgkssnfalng8ux05gn0e.png" alt="Screenshot Github showing Settings → Actions → New repository secret" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;SSH key authentication&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If you use an SSH key to log onto your server add the following content to the file:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Deploy to Server&lt;/span&gt;

&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;push&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="c1"&gt;# deploy on push -&amp;gt;&lt;/span&gt;
    &lt;span class="na"&gt;branches&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;main"&lt;/span&gt; &lt;span class="pi"&gt;]&lt;/span&gt; &lt;span class="c1"&gt;# to this branch&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;build&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Set up SSH agent&lt;/span&gt;
        &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;|&lt;/span&gt;
          &lt;span class="s"&gt;mkdir -p ~/.ssh&lt;/span&gt;
          &lt;span class="s"&gt;echo "${{ secrets.SSH_PRIVATE_KEY }}" &amp;gt; ~/.ssh/id_rsa&lt;/span&gt;
          &lt;span class="s"&gt;chmod 600 ~/.ssh/id_rsa&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;SSH into the server and run a command&lt;/span&gt;
        &lt;span class="na"&gt;run&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;|&lt;/span&gt;
          &lt;span class="s"&gt;ssh -o StrictHostKeyChecking=no -i ~/.ssh/id_rsa ubuntu@YOUR_IP &amp;lt;&amp;lt; 'EOF'&lt;/span&gt;
            &lt;span class="s"&gt;echo "Connected!!!"&lt;/span&gt;
            &lt;span class="s"&gt;export PATH="$PATH:/root/.nvm/versions/node/YOUR_NODE_VERSION/bin"&lt;/span&gt;
            &lt;span class="s"&gt;cd ~/your/application&lt;/span&gt;
            &lt;span class="s"&gt;git pull&lt;/span&gt;
            &lt;span class="s"&gt;npm i&lt;/span&gt;
            &lt;span class="s"&gt;npm run build&lt;/span&gt;
            &lt;span class="s"&gt;pm2 restart your-application&lt;/span&gt;
            &lt;span class="s"&gt;echo "Deployment done!"&lt;/span&gt;
          &lt;span class="s"&gt;EOF&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In the first step we're creating a directory to copy our SSH key to. Afterward, we create the SSH key via the echo command. For that we need to add the &lt;code&gt;SSH_PRIVATE_KEY&lt;/code&gt; our repository secrets.&lt;/p&gt;

&lt;p&gt;Open your GitHub repository and click on "Settings". On the left menu click on "Secrets and variables" and in the sub-menu "Actions". There you can click "New repository secret". Create a new secret with the name "SSH_PRIVATE_KEY".&lt;/p&gt;

&lt;p&gt;To get your private SSH key go to your server CLI and type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cat&lt;/span&gt; ~/.ssh/id_rsa
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then copy the output to your GitHub secret and create it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For both methods&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In the line where you connect via &lt;code&gt;ssh / sshpass&lt;/code&gt;, replace "YOUR_IP" with the actual IP of your server.&lt;/p&gt;

&lt;p&gt;Wrapped in the "EOF" you can find the code which will be executed on the server. First it will log that it connected successfully. Then we need to update the path to our Node.js binary. This enables the GitHub action to use our global modules like pm2. To get the correct path open your Server command line and type:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;echo&lt;/span&gt; &lt;span class="nv"&gt;$PATH&lt;/span&gt; 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will display all paths on our machine, separated by ":".&lt;br&gt;
Look for the one to the .nvm directory. For me it's&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;/root/.nvm/versions/node/v20.9.0/bin
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can update the path in the deploy.yml with your Node.js path.&lt;/p&gt;

&lt;p&gt;In the next line the script changes the directory to our project. Update the path to your application.&lt;br&gt;
Then it does all the steps we would do manually on the machine get the updates.&lt;/p&gt;

&lt;p&gt;The last thing you need to update is the name of "your-application" with the name of your pm2 process. If you don't know the name you can go to your server CLI and type&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pm2 list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will give you a list of all node apps running on your server.&lt;/p&gt;

&lt;p&gt;Now you can push the deploy script to GitHub. You can check if the deployment ran successfully on your GitHub repository under the tab "Actions". If something went wrong you can check the logs of the GitHub action to debug the problem.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.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%2Fdfnn8nmx8h0jce28doxn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2Fdfnn8nmx8h0jce28doxn.png" alt="Screenshot successfull GitHub Action deployment" width="800" height="270"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Thanks for reading!
&lt;/h2&gt;

&lt;p&gt;I hope I could help you setting up your server. If you have questions or problems feel free to comment.&lt;/p&gt;

&lt;p&gt;If you enjoyed the content you can follow me on &lt;a href="https://twitter.com/wweb_dev" rel="noopener noreferrer"&gt;Twitter/X&lt;/a&gt; or check my &lt;a href="https://webdev.town/"&gt;weekly web development resources newsletter&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>tutorial</category>
      <category>ubuntu</category>
      <category>beginners</category>
    </item>
    <item>
      <title>💻 Web Development Resources #173</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 08 Nov 2023 07:11:49 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-173-3oil</link>
      <guid>https://forem.com/vincenius/web-development-resources-173-3oil</guid>
      <description>&lt;p&gt;If you have any feedback, or you want to share tools and resources for the next issue - just comment below :)&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.tpgi.com/digital-accessibility-blogs-and-newsletters/" rel="noopener noreferrer"&gt;Digital Accessibility Blogs and Newsletters&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.tpgi.com/digital-accessibility-blogs-and-newsletters/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-06T10%3A42%3A34.194Z-DigitalAccessibilityBlogsandNewsletters.jpg" alt="Digital Accessibility Blogs and Newsletters" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A personal list of valuable resources, including blogs and newsletters around accessibility.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.codux.com/" rel="noopener noreferrer"&gt;Codux&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.codux.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-06T12%3A23%3A04.107Z-Codux.jpg" alt="Codux" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A visual IDE for React that enables you to visually edit your own code.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://grucloud.github.io/bau/bau-ui/" rel="noopener noreferrer"&gt;Bau UI&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://grucloud.github.io/bau/bau-ui/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-06T10%3A39%3A56.293Z-BauUI.jpg" alt="Bau UI" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A component library built with Bau, an alternative to React, Vue, Angular, Svelte.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://fastbootstrap.com/" rel="noopener noreferrer"&gt;FastBootstrap&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://fastbootstrap.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-06T10%3A40%3A47.105Z-FastBootstrap.jpg" alt="FastBootstrap" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A free Bootstrap theme with fully responsive, powerful CSS utilities, expertly crafted components with Atlassian Design.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://free-stock.video/" rel="noopener noreferrer"&gt;Free Stock Video&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://free-stock.video/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-03T07%3A21%3A31.320Z-FreeStockVideo.jpg" alt="Free Stock Video" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of free high-quality stock video footage without watermarks.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.vectorpea.com/" rel="noopener noreferrer"&gt;Vectorpea&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.vectorpea.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-03T07%3A19%3A54.258Z-Vectorpea.jpg" alt="Vectorpea" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An online vector editor, that lets you edit vector graphics, AI, SVG and PDF files.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.react-magic-motion.com/" rel="noopener noreferrer"&gt;react-magic-motion&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.react-magic-motion.com/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-03T07%3A18%3A17.199Z-reactmagicmotion.jpg" alt="react-magic-motion" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A React library that magically animates your components.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/Ryczko/FormsLab" rel="noopener noreferrer"&gt;FormsLab&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/Ryczko/FormsLab" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-03T07%3A17%3A40.361Z-FormsLab.jpg" alt="FormsLab" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source form builder for anonymous surveys, polls, and collecting feedback.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://casaos.io/" rel="noopener noreferrer"&gt;CasaOS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://casaos.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-02T12%3A24%3A47.130Z-CasaOS.jpg" alt="CasaOS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A simple, easy-to-use, elegant open-source personal cloud system.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.flipt.io/" rel="noopener noreferrer"&gt;Flipt&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.flipt.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-01T11%3A54%3A40.735Z-Flipt.jpg" alt="Flipt" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An open-source, self-hosted feature flagging solution that is flexible and easy to use.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/szabodanika/microbin" rel="noopener noreferrer"&gt;microbin&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/szabodanika/microbin" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-02T12%3A23%3A40.124Z-microbin.jpg" alt="microbin" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A secure, configurable file-sharing and URL shortening web app written in Rust.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://react-knob-headless.vercel.app" rel="noopener noreferrer"&gt;React Knob Headless&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://react-knob-headless.vercel.app" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-11-01T11%3A54%3A00.906Z-ReactKnobHeadless.jpg" alt="React Knob Headless" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A React library for an unstyled &amp;amp; accessible knob primitive.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 booking a &lt;a href="https://webdev.town/sponsorship/"&gt;sponsored post&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>resources</category>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>💻 Web Development Resources #172</title>
      <dc:creator>Vincent Will</dc:creator>
      <pubDate>Wed, 01 Nov 2023 08:27:02 +0000</pubDate>
      <link>https://forem.com/vincenius/web-development-resources-172-2g1l</link>
      <guid>https://forem.com/vincenius/web-development-resources-172-2g1l</guid>
      <description>&lt;p&gt;Hey everyone :)&lt;/p&gt;

&lt;p&gt;I still have some open sports for sponsorships this month. Just pass me an email at &lt;a href="mailto:info@webdev.town"&gt;info@webdev.town&lt;/a&gt; if you're interested in promoting a project to 1100+ devs.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Sponsored&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://gumroad.com/a/111303123/sbcrk" rel="noopener noreferrer"&gt;Level up with Tailwind CSS&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://gumroad.com/a/111303123/sbcrk" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-30T15%3A18%3A14.374Z-LevelupwithTailwindCSS.jpg" alt="Level up with Tailwind CSS" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
 A journey into mastering Tailwind CSS. Start from the basics and move on to the unique stuff Tailwind offers.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://selectors.info/" rel="noopener noreferrer"&gt;CSS Selectors/Combinators Classifier&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://selectors.info/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-30T10%3A21%3A30.744Z-CSSSelectorsCombinatorsClassifier.jpg" alt="CSS Selectors/Combinators Classifier" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A simple interactive tool to learn CSS selectors and combinators.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.nngroup.com/articles/content-dispersion/" rel="noopener noreferrer"&gt;The Negative Impact of Mobile-First Web Design on Desktop&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.nngroup.com/articles/content-dispersion/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-29T12%3A26%3A44.261Z-TheNegativeImpactofMobileFirstWebDesignonDesktop.jpg" alt="The Negative Impact of Mobile-First Web Design on Desktop" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An article on how mobile-first web designs cause significant usability issues when viewed on desktop.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.home-assistant.io/" rel="noopener noreferrer"&gt;Home Assistant&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.home-assistant.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-29T12%3A27%3A23.856Z-HomeAssistant.jpg" alt="Home Assistant" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
Open source home automation that puts local control and privacy first.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://sonner.emilkowal.ski/" rel="noopener noreferrer"&gt;Sonner&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://sonner.emilkowal.ski/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-28T08%3A48%3A29.690Z-Sonner.jpg" alt="Sonner" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An opinionated toast component for React.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://tosdr.org/" rel="noopener noreferrer"&gt;Terms of Service; Didn't Read&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://tosdr.org/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-29T12%3A25%3A58.795Z-TermsofServiceDidntRead.jpg" alt="Terms of Service; Didn't Read" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A project to help fix that almost no one really reads the terms of service we agree to all the time.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.stripe.press/recommended/design-books.html" rel="noopener noreferrer"&gt;Design books for non-designers&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.stripe.press/recommended/design-books.html" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-26T09%3A19%3A08.591Z-Designbooksfornondesigners.jpg" alt="Design books for non-designers" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A collection of design books for non-designers, recommended by the Stripe design team.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.verto.sh/" rel="noopener noreferrer"&gt;verto.sh&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.verto.sh/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-27T06%3A03%3A08.651Z-vertosh.jpg" alt="verto.sh" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A website that simplifies your entry into the open-source world by curating accessible projects.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://reactagent.io/" rel="noopener noreferrer"&gt;ReactAgent&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://reactagent.io/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-26T09%3A16%3A35.803Z-ReactAgent.jpg" alt="ReactAgent" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An experimental autonomous agent that uses the GPT-4 language model to generate and compose React components.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://www.tella.tv/animated-background" rel="noopener noreferrer"&gt;Free Animated Background Videos&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.tella.tv/animated-background" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-26T09%3A17%3A40.424Z-FreeAnimatedBackgroundVideos.jpg" alt="Free Animated Background Videos" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A website with various free mp4 video backgrounds that loops perfectly.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/AndrewWalsh/openapi-devtools" rel="noopener noreferrer"&gt;OpenAPI DevTools&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/AndrewWalsh/openapi-devtools" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-26T09%3A14%3A04.865Z-OpenAPIDevTools.jpg" alt="OpenAPI DevTools" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A Chrome extension that automatically generates OpenAPI specifications in real time for any app or website.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://phuoc.ng/collection/mirror-a-text-area/" rel="noopener noreferrer"&gt;Mirror a text area&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://phuoc.ng/collection/mirror-a-text-area/" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-26T09%3A15%3A38.031Z-Mirroratextarea.jpg" alt="Mirror a text area" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
An interesting series about a technique to mirror a text area element for various use cases.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;a href="https://github.com/sweetalert2/sweetalert2" rel="noopener noreferrer"&gt;sweetalert2&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/sweetalert2/sweetalert2" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fwebdev.town%2Fcontent%2F0_new%2F2023-10-26T09%3A13%3A09.503Z-sweetalert2.jpg" alt="sweetalert2" width="" height=""&gt;&lt;/a&gt;&lt;br&gt;
A responsive, highly customizable and accessible replacement for JavaScripts popup boxes.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Enjoyed this newsletter? You can support me by:&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;📧 Subscribing to the weekly email newsletter on &lt;a href="https://webdev.town/"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;💬 commenting and letting me know&lt;/p&gt;

&lt;p&gt;💸 booking a &lt;a href="https://webdev.town/sponsorship/"&gt;sponsored post&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Vincent from &lt;a href="https://webdev.town"&gt;WebDev Town&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>resources</category>
      <category>design</category>
    </item>
  </channel>
</rss>
