The latest articles on DEV Community by Timme (@cheesytimmy). https://dev.to/cheesytimmy 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%2F236070%2F92f6bfd4-4d95-470c-96cf-779072669d7d.jpg https://dev.to/cheesytimmy en Timme Thu, 24 Jun 2021 12:52:18 +0000 https://dev.to/cheesytimmy/introducing-qui-max-3nd9 https://dev.to/cheesytimmy/introducing-qui-max-3nd9 <p>Hi, everyone! 6 months ago, we released our first open source vue components library <a href="https://dev.to/cheesytimmy/introducing-qui-a-vue-js-design-system-for-web-5co3">Qui</a>. And we got a lot of feedback about it. The most popular question was "Does it work with Vue 3?", and now, It does! We called it <a href="https://github.com/Qvant-lab/qui-max">Qui-max</a>! Yes, as iPhone Max :)</p> <h2> Why? </h2> <ul> <li>Vue 3 is getting popular. We like Composition API, it really helps you to keep your code clean and composable. The component's api became more predictable. Making components, we also used new features as <code>Teleports</code>, plural <code>v-model</code> and others.</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aofJpjPm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehj6k8c7hybcydubpne7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aofJpjPm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehj6k8c7hybcydubpne7.png" alt="code"></a></p> <ul> <li>Types included, you can build your components with clear predictions. (p.s. I couldn't imagine how useful Typescript can be, before I try.)</li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9n56DFsH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bap5vsgu8v53rjox1b5f.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9n56DFsH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bap5vsgu8v53rjox1b5f.png" alt="Screenshot 2021-06-24 at 10.53.16"></a></p> <ul> <li><p>We build components with Vite (rollup.js inside), with treeshake and separate css files, so you can use a few components only and take care about your bundle size. (but no so <a href="https://github.com/vuejs/vue-next/issues/2860">fast</a>).<br> The bundle size was also decreased from:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--RtUYveIH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvir49abwz3mu7zvaj3c.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RtUYveIH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvir49abwz3mu7zvaj3c.png" alt="Screenshot 2021-06-24 at 15.40.23"></a><br> to:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oxyb5vdt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlzebthjyvp5r0qs4in4.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oxyb5vdt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlzebthjyvp5r0qs4in4.png" alt="Screenshot 2021-06-24 at 15.40.27"></a></p></li> <li><p>Added simple animations for dropdowns <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LE2BP3L6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jpkgpdb8nmh3tolh8y2.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LE2BP3L6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jpkgpdb8nmh3tolh8y2.gif" alt="ezgif-7-364ea3b07007"></a></p></li> </ul> <p>The library is under development, so if you find a bug feel free to make an issue in our repo <a href="https://github.com/Qvant-lab/qui-max">Qui-max</a></p> vue typescript vue3 uikit Timme Wed, 16 Dec 2020 13:36:44 +0000 https://dev.to/cheesytimmy/introducing-qui-a-vue-js-design-system-for-web-5co3 https://dev.to/cheesytimmy/introducing-qui-a-vue-js-design-system-for-web-5co3 <p>Hi, guys! We're ready to introduce Qui 🎉 - A Vue 2.x design system, we use for building great SPA apps for our customers!</p> <p>Check <a href="https://qvant-lab.github.io/qui/" rel="noopener noreferrer">Storybook</a> out!</p> <p>What is it?</p> <ul> <li>🔩 30+ Vue components</li> <li>📦 icons pack</li> <li>🏳️‍🌈 colors &amp; grid</li> <li>🥷 neumorphism styles</li> <li>📚 storybook sandbox</li> </ul> <p><a href="https://github.com/Qvant-lab/qui" rel="noopener noreferrer">Qui</a> is our first Open-source product, feel free to help and contribute!</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr2v1iynesdhctu7h6lc7.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fr2v1iynesdhctu7h6lc7.jpg" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fzk8j0ywcp9ob9mct5pvs.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fzk8j0ywcp9ob9mct5pvs.gif" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fo7f6oapf2kcufvl1rvcv.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fo7f6oapf2kcufvl1rvcv.jpg" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F645uqy95hg757r21cjfx.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F645uqy95hg757r21cjfx.gif" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7vv655m1rwddza0gz979.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7vv655m1rwddza0gz979.jpg" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fa28zoyoz2tmt3bjqzqx6.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fa28zoyoz2tmt3bjqzqx6.jpg" alt="Alt Text"></a><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjjdlkmch6f4ow2v8h5de.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fjjdlkmch6f4ow2v8h5de.jpg" alt="Alt Text"></a></p> vue javascript css design