The latest articles on DEV Community by Karthik RP (@blended_ideas). https://dev.to/blended_ideas 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%2F294157%2F22d2d7c1-2b81-4e6e-9b0d-646f0b632a52.jpeg https://dev.to/blended_ideas en Karthik RP Tue, 25 Feb 2020 05:20:24 +0000 https://dev.to/blended_ideas/my-first-npm-library-web-component-using-stenciljs-h4c https://dev.to/blended_ideas/my-first-npm-library-web-component-using-stenciljs-h4c <h3> My First Post on dev.to 🚀 </h3> <p>Hey everyone! </p> <p>This is my first-ever post on dev.to, and I’m already loving the community here. 😊</p> <p>For the past 3-4 years, I’ve been coding professionally but never really ventured into contributing to open source projects. During this time, I’ve been learning a lot about programming but that’s the thing: it’s mostly been learning. Outside of work, I hadn’t done much to apply or experiment with what I’ve learned. </p> <p>Recently, I decided it was time to change that and finally build something of my own. I started exploring for inspiration and stumbled upon a fantastic library for React called <strong>React Spectrum</strong>. Inspired by it, I set out to create something similar but with a twist: using <strong>Web Components</strong>. </p> <h3> Introducing <strong>Word Spectrum</strong> </h3> <p>Let me introduce you to <strong><a href="https://github.com/karthikrp/WordSpectrum" rel="noopener noreferrer">Word Spectrum</a></strong>—a simple, colorful, and lightweight placeholder for paragraphs. </p> <h4> Highlights: </h4> <ul> <li> <strong>Tiny Size:</strong> <ul> <li>Minified: <strong>271 bytes</strong> </li> <li>Minified + Gzipped: <strong>198 bytes</strong> </li> <li> <a href="https://bundlephobia.com/result?p=@blendedideas/word-spectrum@0.0.3" rel="noopener noreferrer">Check it out on Bundlephobia</a> </li> </ul> </li> </ul> <h4> Preview: </h4> <p><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%2Fusr6nr8wldb5p6kfbl0s.png" class="article-body-image-wrapper"><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%2Fusr6nr8wldb5p6kfbl0s.png" alt="Word Spectrum" width="800" height="439"></a> </p> <h4> <a href="https://codepen.io/karthikrp/pen/XWbpRee" rel="noopener noreferrer">Live Demo on Codepen</a> </h4> <p>I’d love to hear your thoughts and suggestions for improvements! Contributions are welcome, so feel free to submit pull requests. Let’s build something awesome together! </p> <p>Cheers,<br><br> Karthik</p> webcomponents npm javascript typescript