<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Matias Fandiño</title>
    <description>The latest articles on DEV Community by Matias Fandiño (@matifandy8).</description>
    <link>https://dev.to/matifandy8</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%2F831829%2F9a2dd337-a789-45ee-b6bf-5bf1967f8d21.jpg</url>
      <title>DEV Community: Matias Fandiño</title>
      <link>https://dev.to/matifandy8</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/matifandy8"/>
    <language>en</language>
    <item>
      <title>I built a 400B clipboard library for React (with an agnostic core)</title>
      <dc:creator>Matias Fandiño</dc:creator>
      <pubDate>Wed, 25 Mar 2026 09:18:00 +0000</pubDate>
      <link>https://dev.to/matifandy8/i-built-a-400b-clipboard-library-for-react-with-an-agnostic-core-3obc</link>
      <guid>https://dev.to/matifandy8/i-built-a-400b-clipboard-library-for-react-with-an-agnostic-core-3obc</guid>
      <description>&lt;h1&gt;
  
  
  🚀 I built a 400B clipboard library for React (with an agnostic core)
&lt;/h1&gt;

&lt;p&gt;Copying to the clipboard sounds simple… until you try to do it properly.&lt;/p&gt;

&lt;p&gt;Permissions, async APIs, browser quirks, and UI feedback quickly turn something that &lt;em&gt;should&lt;/em&gt; be one line into unnecessary boilerplate.&lt;/p&gt;

&lt;p&gt;So I built &lt;strong&gt;lite-clipboard&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  What is lite-clipboard?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;lite-clipboard is a tiny, zero-dependency clipboard library with a framework-agnostic core and a React hook on top.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use the &lt;strong&gt;core&lt;/strong&gt; anywhere (vanilla JS, Vue, Svelte, etc.)&lt;/li&gt;
&lt;li&gt;Use the &lt;strong&gt;hook&lt;/strong&gt; for a clean React experience&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  React usage
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useClipboard&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;lite-clipboard&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;CopyButton&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="nx"&gt;text&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;copied&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;copy&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useClipboard&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt; &lt;span class="na"&gt;onClick&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nf"&gt;copy&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;text&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;copied&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Copied!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Copy&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;button&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Simple, reactive, and no boilerplate.&lt;/p&gt;

&lt;h2&gt;
  
  
  Framework-agnostic core
&lt;/h2&gt;

&lt;p&gt;If you're not using React:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;copy&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;lite-clipboard/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;copy&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Hello world&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No framework required.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why another clipboard library?
&lt;/h2&gt;

&lt;p&gt;Most existing solutions are:&lt;/p&gt;

&lt;p&gt;❌ Bigger than they need to be (1KB–2KB+)&lt;br&gt;
❌ Not React-friendly (no state, no hooks)&lt;br&gt;
❌ Missing TypeScript support&lt;br&gt;
❌ Require manual state handling (setTimeout, etc.)&lt;/p&gt;

&lt;p&gt;I wanted something:&lt;br&gt;
✅ Minimal&lt;br&gt;
✅ Modern&lt;br&gt;
✅ React-friendly&lt;br&gt;
✅ And reusable outside React&lt;/p&gt;

&lt;h2&gt;
  
  
  ⚡ Features
&lt;/h2&gt;

&lt;p&gt;🚀 ~400 bytes (React hook), ~250 bytes (core)&lt;br&gt;
🔌 0 dependencies&lt;br&gt;
⚛️ Built-in React state (copied, error, supported)&lt;br&gt;
🔁 Auto-reset (no manual timers)&lt;br&gt;
🎯 Callbacks (onSuccess, onError)&lt;br&gt;
🧩 Framework-agnostic core&lt;br&gt;
🌍 SSR safe&lt;br&gt;
🧪 TypeScript-first&lt;/p&gt;

&lt;h2&gt;
  
  
  📦 Size comparison
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Library&lt;/th&gt;
&lt;th&gt;Size&lt;/th&gt;
&lt;th&gt;Dependencies&lt;/th&gt;
&lt;th&gt;React Hook&lt;/th&gt;
&lt;th&gt;Agnostic&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;lite-clipboard&lt;/td&gt;
&lt;td&gt;~0.4KB&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;clipboard.js&lt;/td&gt;
&lt;td&gt;~2.4KB&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;copy-to-clipboard&lt;/td&gt;
&lt;td&gt;~1.1KB&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;⚠️&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  💡 Design philosophy
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Core first&lt;/strong&gt; → logic independent from frameworks&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Thin adapters&lt;/strong&gt; → React is just a wrapper&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Minimal footprint&lt;/strong&gt; → every byte matters&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Better DX&lt;/strong&gt; → less code, fewer bugs&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  🔗 Links
&lt;/h2&gt;

&lt;p&gt;GitHub: &lt;a href="https://github.com/matifandy8/lite-clipboard" rel="noopener noreferrer"&gt;https://github.com/matifandy8/lite-clipboard&lt;/a&gt;&lt;br&gt;
npm: &lt;a href="https://www.npmjs.com/package/lite-clipboard" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/lite-clipboard&lt;/a&gt;&lt;br&gt;
Product Hunt (launch): &lt;a href="https://www.producthunt.com/posts/lite-clipboard/maker-invite?code=QN3IzM" rel="noopener noreferrer"&gt;https://www.producthunt.com/posts/lite-clipboard/maker-invite?code=QN3IzM&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Support the launch
&lt;/h2&gt;

&lt;p&gt;If you find it useful, I'd really appreciate your support on Product Hunt 🙌&lt;/p&gt;

&lt;p&gt;Feedback, comments, or even just an upvote helps a lot!&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>opensource</category>
    </item>
    <item>
      <title>NeobrutalismCSS - A Classless CSS Library</title>
      <dc:creator>Matias Fandiño</dc:creator>
      <pubDate>Sun, 22 Oct 2023 22:29:08 +0000</pubDate>
      <link>https://dev.to/matifandy8/neobrutalismcss-a-classless-css-library-13e9</link>
      <guid>https://dev.to/matifandy8/neobrutalismcss-a-classless-css-library-13e9</guid>
      <description>&lt;p&gt;Are you tired of adding bulky CSS frameworks like Bootstrap or Tailwind CSS to your JavaScript or React demos just to make your HTML elements look good? Introducing NeobrutalismCSS – a lightweight and classless CSS library that brings sleek default styles to your HTML elements, without the unnecessary bloat.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://matifandy8.github.io/NeoBrutalismCSS/" rel="noopener noreferrer"&gt;View Demo&lt;/a&gt; | &lt;a href="https://github.com/matifandy8/NeoBrutalismCSS" rel="noopener noreferrer"&gt;GitHub Repository&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Notably, NeobrutalismCSS isn't meant to be a standalone CSS library only. It can seamlessly integrate with other CSS frameworks. This means you can harness the power of NeobrutalismCSS as the foundation for your site and still use your preferred CSS framework in harmony.&lt;/p&gt;

&lt;p&gt;Less Opinionated: We offer a cleaner canvas for your styling needs, allowing your creativity to flourish without rigid constraints.&lt;/p&gt;

&lt;p&gt;Versatile: Whether you're building a website, a blog, or enhancing an existing CSS framework, NeobrutalismCSS fits like a glove.&lt;/p&gt;

&lt;p&gt;Aesthetically Pleasing: We've focused on delivering visually appealing styles that delight the eye.&lt;/p&gt;

&lt;p&gt;Extensive HTML Element Support: NeobrutalismCSS is equipped to handle a wide range of HTML elements.&lt;/p&gt;

&lt;p&gt;Responsive: Our styles maintain consistency across different browsers, ensuring a seamless user experience.&lt;/p&gt;

&lt;p&gt;How to Use NeobrutalismCSS&lt;br&gt;
Using NeobrutalismCSS is a breeze. Simply add the following line to your HTML document:&lt;br&gt;
&lt;code&gt;&amp;lt;link rel="stylesheet" href="https://unpkg.com/neobrutalism.css"&amp;gt;&lt;br&gt;
&lt;/code&gt;&lt;br&gt;
If you're developing a JavaScript application, NeobrutalismCSS can be installed via NPM:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install neobrutalismcss&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;For more details about the library, visit our GitHub repository. If you find NeobrutalismCSS useful, don't forget to give it a star!&lt;/p&gt;

</description>
      <category>opensource</category>
      <category>css</category>
      <category>sass</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
