loading...
Cover image for I made DEV.to widget for websites/blogs

I made DEV.to widget for websites/blogs

saurabhdaware profile image Saurabh Daware 🌻 ・Updated on ・1 min read

Hey Everyone! So I made an (Unofficial) DEV.to widget / profile-card which you can use in your websites and blogs (You just have to copy-paste 2 lines of code :D).

Here's how it looks like

Usage ( JUST 2 LINES OF CODE :D )

    <dev-widget data-username="saurabhdaware"></dev-widget>

    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"></script>

And BOOM that's it! Just put your dev.to username in data-username attribute and you will get your profile card :D


If you want to install it as ES6 module (Mostly used in frameworks)

npm install --save dev-widget

and import at the top of your file

import 'dev-widget'

Then you can use

<dev-widget data-username="saurabhdaware"></dev-widget>

There are some other attributes like data-width, data-limit You can checkout full documentation on my GitHub:

GitHub logo saurabhdaware / DEV-widget

Unofficial Widget/profile card for https://dev.to/

DEV widget

GitHub package.json version Contributions to DEV Widget are welcomed

GUI to Generate Card: https://dev-widget.netlify.app/create

Codepen: https://codepen.io/saurabhdaware/pen/NWWbOvv

Unofficial Widget / profile card for dev.to.

You can use it in your website/blog and show off your DEV.to articles 🌻

Screenshot of the DEV.to Widget


Installation and Usage

- Through script tag

    <dev-widget data-username="saurabhdaware"></dev-widget>
    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"></script>

- As NPM module

This can be used in React, Vue and almost any other frontend framework

npm install --save dev-widget

Inside your framework component

import 'dev-widget'

Attributes Guide

attributes description default
data-username Your DEV.to Username
data-width Width of the card 300px
data-contentheight Height of the Aricles Container 300px
data-theme Theme of the card (dark, ocean, pink, cobalt2, default) default
data-name (optional) Name to display on card Will
…

Do ⭐ the repository πŸ¦„

Also, for the hacktoberfest, if anyone wants to contribute to this project, I would love to help. You can checkout CONTRIBUTING.md for contribution guidelines.

GitHub: https://github.com/saurabhdaware/DEV-widget
NPM: https://npmjs.org/package/dev-widget
Codepen: https://codepen.io/saurabhdaware/pen/NWWbOvv

Discussion

pic
Editor guide
Collapse
artis3n profile image
Ari Kalfus

This is great. Nit: Promote healthy web practices and add sub-resource integrity (SRI) via the integrity attribute on your example.

developer.mozilla.org/en-US/docs/W...

You can grab your hash from unpkg via the meta query parameter:

https://unpkg.com/dev-widget@1.0.1/dist/card.component.mjs?meta

<script src="https://unpkg.com/dev-widget@1.0.1/dist/card.component.mjs" type="module" integrity="sha384-755Jblzb17ugkA3KRCLz4XS8CPb3xEwBdBMk8ZBw51agtKmppILXMJrKvuTRkUhy"></script>
Collapse
loujaybee profile image
Lou β€” Cloud Engineer

Came here to say that too β€” bravo!

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Oh thank you! I've added integity hash to my codepen demo. Not really sure how I can get that hash before publishing so that I can set in readme (Apparently that hash changed from 1.0.1 to 1.0.2)

Thread Thread
artis3n profile image
Ari Kalfus

Yup, the hash will change for each version of the script pushed to the CDN.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Oh I didn't know about this thank you so much! I'll check it out

Collapse
seangwright profile image
Sean G. Wright

Nice work!

I love that you've made something so many other devs (including myself) appreciate (based on the comments).

The idea isn't that complex - someone else could have done it...

But no one else did - you did!

You took the time to figure everything out, make a quality, modern web component, and shared it with the world.

Congrats and thanks!

πŸ™

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much! this means a lot 🌻

Collapse
kp profile image
KP

@saurabhdaware this is phenomenal. I know you've open sourced the code but I'd like to build something very similar for my own site. Any pointers on how to get started would be great. Are you using the DEV APIs? Would I need to create those first for my own site before creating a public widget like this?

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Hi KP, yes I've used DEV API. There's a DEV API that returns the list of articles on providing the username. Even in my person website I am doing something similar in the articles section saurabhdaware.in

Thank you for kind words 🌻🌻

Collapse
kp profile image
KP

Thanks @saurabhdaware . Looks like the code you've written is in .mjs file format....which is new to me....I'll give it a closer look and hope you dont mind me forking and using it in the future! Some quick questions for you...

  • What is the advantage of mjs files for modules (versus regular js)? I've never used this file format.
  • How do you host on unpkg, and how do you create a command like this?

    npm install --save dev-widget

  • Any gotchas I need to be aware of / careful of when creating my own widget?

Thanks for the inspiration! 🌻

Thread Thread
saurabhdaware profile image
Saurabh Daware 🌻 Author
  • .mjs lets you use import and export in web without having a webpack build environment.

  • You have to publish it as a npm package and all npm packages are synced to unpkg

  • Gotchas:

    • The api does not return user's data directly, It comes under each article value with user's key
    • If user has written 0 articles, you dont get any value so no user data in this case.
    • If you are going to build on top of web components, you'll have to follow the webcomponent best practices (You'll find them on internet) for the widget to work in frameworks

And yes you can go ahead and fork it

Do share the link once you're done :D

Thread Thread
kp profile image
KP

@saurabhdaware thanks! These tips are going to be really helpful.

I'll definitely let you know if I end up using it! First step, I'm trying to simply include your widget locally to see it in action...and then I can start modifying it :D

I'm trying to include this dev widget in my nuxt.js project, in one of my pages. For context, each page in Nuxt is nothing but a vue component.

Here is my code:

<template>
  <div class="container">

    <div>
        <dev-widget data-username="saurabhdaware"></dev-widget>
    </div>

  </div>
</template>

<script>

export default {
  layout: "default",
};
</script>

<script src="https://unpkg.com/dev-widget@1.0.3/dist/card.component.mjs" type="module"></script>

Any idea what I am doing wrong here? I keep getting an error:
Unknown custom element: < dev-widget >

Thread Thread
saurabhdaware profile image
Saurabh Daware 🌻 Author

you'll have to follow the npm install and import 'dev-widget' instead of the link</p>

Thread Thread
kp profile image
KP

Thank you...there's gotta be a workaround though! It works fine in a raw HTML file...so it should work in vue as well!

Thread Thread
saurabhdaware profile image
Saurabh Daware 🌻 Author

You can make it work in framework that way by putting that script file before end of body tag in your index.html.

These frameworks follow a particular standard and having compinents as module is by far the most comfortable way of adding anything. It also makes this process standard since it gets similar to how you would add a usual vue component.

What you write in your vue component is not really staright up appeneded to the final bundle rather they are in some way compiled (in v v v general terms) and they are bundled with vue's code along with it. So it is not really possible to standardize that script include thing (unless you write different widget for different frameworks)

Thread Thread
kp profile image
KP

That makes total sense @saurabhdaware . Thanks for the explanation! 🌻

I'll do some more research to see if I can get this working in vue / nuxt component pages!

Thread Thread
kp profile image
KP

Here's how to use your widget in Nuxt, for future reference:

@kiyuku1 's answer would work, but here's the complete solution that would work if we want to include a js (or mjs) file in ONE nuxt.js page only, instead of globally:

<template>
  <div class="container">

    <div>
        <dev-widget data-username="saurabhdaware"></dev-widget>
    </div>

  </div>
</template>

<script>

export default {
  layout: "default",

  head: {
    script: [
…
Thread Thread
saurabhdaware profile image
Saurabh Daware 🌻 Author

Oh I did not know Nuxt required separate handling. Thank you so much 🌻

Collapse
ben profile image
Ben Halpern

This is so beautifully done. I’m super impressed.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much ben🌻 means a lot πŸ¦„πŸ¦„

Collapse
loujaybee profile image
Lou β€” Cloud Engineer

Will this create any significant impact on DEV API consumption?

Collapse
z2lai profile image
z2lai

Wow, this adds so much value to a single-page portfolio by being able to show potential employers all the articles you've written with just TWO LINES OF CODE! The idea is pure genius, the execution looks perfect and I'm sure the code is just as elegant as the execution! I can also imagine this widget boosting the number of people using dev.to to write their articles.

So simple yet so beautiful. Extremely inspiring stuff mate, congratulations!

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much for such kind words πŸŒ»πŸŒ»πŸ¦„

Collapse
z2lai profile image
z2lai

Wow, I get two sunflowers! I am honoured.

Thread Thread
saurabhdaware profile image
Saurabh Daware 🌻 Author

haha your comment was the first thing I saw this morning and is surely gonna help me start my day with positivity, so you deserve a sunflower garden

Here you go: 🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻Thank You!🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻🌻

Collapse
maniflames profile image
Maniflames

Looks very neat!

Collapse
saurabhdaware profile image
Collapse
rose profile image
Rose

Love the idea, well done 😊

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much πŸ¦„

Collapse
paulasantamaria profile image
Paula SantamarΓ­a

Looks great, thank you!

Collapse
saurabhdaware profile image
Collapse
fultonbrowne profile image
Fulton Browne

I will use this on my blog, thanks

Collapse
saurabhdaware profile image
Collapse
deepaksisodiya profile image
Collapse
saurabhdaware profile image
Collapse
nickytonline profile image
Nick Taylor (he/him)

Cool stuff Saurabh!

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much 🌻

Collapse
eddieaich profile image
Eddie Aich

Amazing dude! A+ for Web Components implementation. Loved how you split the css into a separate module. Very impressive.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank youuu πŸ•ΊπŸŒ»

Collapse
pika1998 profile image
Prafulla Raichurkar

Cool 🀩

Collapse
saurabhdaware profile image
Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

This is awesome! β™₯️

Collapse
saurabhdaware profile image
Collapse
raghavmisra profile image
Raghav Misra

Amazing! I saw this and was impressed. Then I saw web components, great job. Dev Api use will definitely go up a lot now 😁

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you Raghav :D

Collapse
anjankant profile image
Anjan Kant

Well done! I'll use it :)

Collapse
saurabhdaware profile image
Collapse
rhymes profile image
rhymes

So cool! Great job!

Collapse
saurabhdaware profile image
Collapse
zooly profile image
Hugo Torzuoli

So simple, very nice !

Collapse
saurabhdaware profile image
Collapse
caffiendkitten profile image
DaNeil Coulthard

great widget!

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much :)