DEV Community

loading...

5 Github Elements you have to try

jordanfinners profile image Jordan Finneran Originally published at jordanfinners.dev ・3 min read

Contents

  1. Intro
  2. Time Elements
  3. Image Cropping Element
  4. File Attachment Element
  5. Copy Element
  6. Text Expander Element
  7. Summary

Intro

I'm a big fan of web components. Reusable web elements that can work anywhere.

A friend showed me this awesome set of components from Github.
I can't believe that I hadn't come across them before so I thought I'd share a few of the best ones with you!

These all work across all modern browsers, and browser support is documented.
They have virtually no dependencies either so they will be blazing fast, unlike other solutions to some of these problems.
More importantly they are battle tested as they are the elements Github uses itself!!

TLDR; Checkout the repository

Time Elements

Displaying Times can be hard! Figuring out how long ago something was to display in a human friendly format, or how long it is until an event.

Github have solved this for you, all with 0 dependencies!!

These are the same components you will have seen on Github itself where it displays times for example:

Github Time Element

This is really handy for any project when you need to display the time, you also know its tried and tested with it used themselves.

There are a few different types of time display available.
They even have a demo page available too!

Image Cropping Element

Image cropping can be a nightmare, and getting a library that handles it also can be difficult to setup and use. Github to the rescue!

Repository
Demo Page

This is really cool, especially the various ways Github advise you can use this, including automatically updating the values in inputs which you can send off to the server.

And again, it has no dependencies so will be super fast!

File Attachment Element

File uploads, I'm pretty certain everyone will have had to develop one of these in their career! Well now it's just an element away.

Repository
Demo Page

Copy Element

With the Clipboard API it's now fairly easy to write some logic to copy out some text to the users clipboard. But Github does this and one better by letting you bind to elements and there values for example, copying out a URL from a link.

<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>
Enter fullscreen mode Exit fullscreen mode

Couldn't be easier!

Repository
Demo Page

Text Expander Element

Ever wondered how Github looks up users or issues as you type? Wonder no more as you can do it exactly like they do with another really simple element!
This would be super useful for anyone building social sites for example.

Repository
Demo Page

Summary

Github have done amazing work here, and I cannot thank the engineers who wrote them enough.
I've already started using these elements in projects I work on, and it has saved me plenty of time already!

There are lots more elements to take a look at so check the whole repository and examples here.

Let me know which are your favorites!

Happy Building!

Discussion (0)

pic
Editor guide