The latest articles on DEV Community by William Troup (@williamtroup). https://dev.to/williamtroup https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F869669%2F4b35b715-57da-4aa6-b3ea-3c1d7dba2de9.png https://dev.to/williamtroup en William Troup Mon, 06 Jul 2026 22:58:04 +0000 https://dev.to/williamtroup/rattributejs-2cmm https://dev.to/williamtroup/rattributejs-2cmm <p>Rattribute.js allows you to define different HTML attributes for different viewport widths using simple data-* attributes. Whether you need to change classes, targets, ARIA attributes, or any other HTML attribute, Rattribute.js updates your elements automatically as the browser size changes — without writing responsive JavaScript.</p> <p>This is a brand new project that I started a few days ago!</p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/williamtroup" rel="noopener noreferrer"> williamtroup </a> / <a href="https://github.com/williamtroup/Rattribute.js" rel="noopener noreferrer"> Rattribute.js </a> </h2> <h3> ❓ A lightweight JavaScript library for automatically changing HTML element attributes based on responsive screen sizes. </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"><div class="markdown-heading"> <h1 class="heading-element"> Rattribute.js </h1> <p><a href="https://twitter.com/intent/tweet?text=Rattribute.js%2C%20a%20free%20JavaScript%json%20converter&amp;url=https://github.com/williamtroup/Rattribute.js&amp;hashtags=javascript,json,html,converter" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/cb820a0ecc9645168e33b03925d7f14691262ddbaeaf66a0a91697803d0cba2d/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f687474702f736869656c64732e696f2e7376673f7374796c653d736f6369616c" alt="Tweet"></a> <a href="https://www.npmjs.com/package/rattribute.js" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/c50ddf57573d2d4e9255b611d3f86ed92e7d309522b3bb133075b0537cb6fbee/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e706d6a732d76312e332e312d626c7565" alt="npm"></a> <a href="https://www.nuget.org/packages/Rattribute.js/" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/d62d708312e56bffe089653f0d431b3c8fa894d0395ba9ce99c46646b3ad9c5a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6e756765742d76312e332e312d707572706c65" alt="nuget"></a> <a href="https://github.com/williamtroup/Rattribute.js/blob/main/LICENSE.txt" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/f8df3091bbe1149f398a5369b2c39e896766f9f6efba3477c63e9b4aa940ef14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e" alt="license"></a> <a href="https://github.com/williamtroup/Rattribute.js/discussions" rel="noopener noreferrer"><img src="https://camo.githubusercontent.com/79f7b6be708462912fa91b2504844999c5419692e0da5b733188fab724f85193/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64697363757373696f6e732d57656c636f6d652d726564" alt="discussions Welcome"></a> <a href="https://william-troup.com/" rel="nofollow noopener noreferrer"><img src="https://camo.githubusercontent.com/7f861bcd95b99224a4cbb45ac13ed71286f87631e7ee8beb306371f2ac10277c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f6465645f62792d57696c6c69616d5f54726f75702d79656c6c6f77" alt="coded by William Troup"></a></p> </div> <blockquote> <p>❓ Rattribute.js allows you to define different HTML attributes for different viewport widths using simple data-* attributes. Whether you need to change classes, targets, ARIA attributes, or any other HTML attribute, Rattribute.js updates your elements automatically as the browser size changes — without writing responsive JavaScript.</p> <p>v1.3.1</p> </blockquote> <br> <br> <div class="markdown-heading"> <h1 class="heading-element">What features does Rattribute.js have?</h1> </div> <ul> <li>🚀 Zero dependencies and lightweight.</li> <li>📝 Written in TypeScript with excellent editor support.</li> <li>📱 Responsive breakpoints matching Bootstrap (<code>xs</code>–<code>xxl</code>), plus custom sizes.</li> <li>🔄 Automatically detects new DOM elements.</li> <li>⚙️ Public API for manual control.</li> <li>🎯 Ignore specific elements when needed.</li> <li>🧩 Set attribute values directly or from function calls.</li> </ul> <br> <br> <div class="markdown-heading"> <h1 class="heading-element">What browsers are supported?</h1> </div> <p>Rattribute.js works in all modern browsers, including:</p> <ul> <li>Google Chrome</li> <li>Microsoft Edge</li> <li>Mozilla Firefox</li> <li>Safari</li> <li>Opera</li> </ul> <br> <br> <div class="markdown-heading"> <h1 class="heading-element">What are the most recent changes?</h1> </div> <p>To see a list of all the most recent changes, click <a href="https://github.com/williamtroup/Rattribute.js/docs/CHANGE_LOG.md" rel="noopener noreferrer">here</a>. <br> <br></p> <div class="markdown-heading"> <h1 class="heading-element">How do I install Rattribute.js?</h1> </div> <p>You…</p></div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/williamtroup/Rattribute.js" rel="noopener noreferrer">View on GitHub</a></div> </div> webdev uidesign javascript programming William Troup Mon, 30 Sep 2024 16:30:49 +0000 https://dev.to/williamtroup/jsontreejs-v400-a-typescript-json-viewer-and-editor-with-side-by-side-comparison-support-3n7n https://dev.to/williamtroup/jsontreejs-v400-a-typescript-json-viewer-and-editor-with-side-by-side-comparison-support-3n7n <p>This is another project I launched in the new year! It's finally come into its own, so I figured it was time to share it with everyone!</p> <p><a href="https://www.william-troup.com/jsontree-js/" rel="noopener noreferrer">https://www.william-troup.com/jsontree-js/</a></p> William Troup Wed, 03 Jul 2024 17:54:34 +0000 https://dev.to/williamtroup/heatjs-generate-customizable-heat-maps-charts-and-statistics-to-visualize-date-based-activity-and-trends-2f4c https://dev.to/williamtroup/heatjs-generate-customizable-heat-maps-charts-and-statistics-to-visualize-date-based-activity-and-trends-2f4c <p>Hello!</p> <p>This is my latest project that I'm trying to spread the word on. This has been rewritten in TypeScript to allow greater integration support with React, Angular, and other libraries!</p> <p>Website:<br> <a href="https://william-troup.com/heat-js/">https://william-troup.com/heat-js/</a></p> <p>Repository!<br> <a href="https://github.com/williamtroup/Heat.js">https://github.com/williamtroup/Heat.js</a></p> William Troup Sun, 03 Sep 2023 21:05:32 +0000 https://dev.to/williamtroup/calendarjs-a-free-javascript-library-1c76 https://dev.to/williamtroup/calendarjs-a-free-javascript-library-1c76 <p>This is my JavaScript calendar project! I've been building it on and off for a few years, but I figured it was about time to spread the word a little about it!</p> <p><a href="https://github.com/williamtroup/Calendar.js">https://github.com/williamtroup/Calendar.js</a></p> <p>Sorry, I posted it before, but I've been pushing it a little bit more lately, so figured a fresh post was right.</p> javascript webdev css github William Troup Sun, 29 May 2022 23:00:48 +0000 https://dev.to/williamtroup/just-signed-up-pkg https://dev.to/williamtroup/just-signed-up-pkg <p>Hi, I'm new here! Decided to try and meet like mind developers and shared some of the bits I work on in my spare time.</p> <p><a href="https://github.com/williamtroup/Calendar.js">One of my projects can be found here: Calendar.js</a></p> <p>There of course other ones on there, but little things I've thrown together over the years!</p> javascript webdev html css