On this text, I will indicate you a straightforward predicament where that it’s likely you’ll also be taught to profit from Sourcegraph to:

1. Determine the library of an strange UI component & use it in a mission
2. Catch completely different projects that use this UI component
3. Video show for new projects & revisit searches

---

Understanding an strange UI component

This component is something that I if truth be told maintain not viewed in any of the fabricate draw libraries that I’ve oldschool. I first chanced on it on Dremio.

There is an interactive slider within the centre of the container, and a pair of very smartly designed photos are presented in stark distinction subsequent to each completely different. Gape the sunshine/dark color map, and the use of identical shapes in both photos. Here’s a if truth be told orderly manner of the use of this component to showcase the completely different aspects & aspects of the providers and products that they provide!

Inserting the photos apart, I didn’t know of the name of the component so I didn’t know how to precisely Google this component.

🔍 To get some clues, let’s any other time use the Browser Inspector.

Inspecting the component

There’s a comic repeated class name known as twentytwenty 🤔. In total builders who make their gain custom UI would use Semantic Class Naming pretty than a vague name be pleased this. This affords us grounds to deduce that…

👉 this classname is supplied for a library implementation.

Now let’s use Sourcegraph, a current code search instrument to seem for this library, since we do not know whether or not the library is accessible on GitHub/ GitLab or and many others.

Look for the library with Sourcegraph

Sourcegraph will be accessed here.

🔍 Let’s strive to search out the library the use of the inquire of repo: twentytwenty

Bingo! We bought just a few repositories with the description of “assert comparability” which tallies to what the component does. From a ogle, we can also behold that this component is be pleased minded with the next libraries:

• jquery (1.2k ⭐)
• Vue (197 ⭐)
• React (40 ⭐)

As soon as we click on one among the repositories, we can behold that we can navigate the total mission within Sourcegraph itself ✨ There’s also a handy icon for us to jog the distinctive GitHub repository if we pick to be taught about/superstar the repository.

The usage of the library

Following the setup instructions within the README for the Vue version of the component, I used to be ready to spurn up the component very without complications on codepen, the use of a neko 🐱 and doggo 🐶 assert, same to what we saw on Dremio.

And that’s the manner that it’s likely you’ll also add this assert slider UI to your gain mission too! When that it’s likely you’ll also very smartly be the use of React or jquery, that it’s likely you’ll also test up on the completely different 2 repositories as an different. Although Dremio already exhibits a if truth be told horny use case of the TwentyTwenty component, this would be frigid for us to search out out completely different inventive ways of the use of this component too.

Look for pretty just a few projects that oldschool the component

🔍 To seem completely different projects that use this component, we can originate a attractive search inquire of that comprise of three filters

1. obtain out:repo
   • by default, Sourcegraph affords us search results in phrases of the recordsdata where they procure connected converse. nonetheless, we simplest are seeking to know the projects, in completely different words the repositories that uses the component
2. -repo:^github.com/.*/.*twentytwenty
   • the repo search filter takes in a regex pattern
   • we’re seeking to exclude the repositories that provide the UI component comparable to react-twentytwenty, vue-twentytwenty and so forth, so the quest filter becomes -repo
3. converse:"twentytwenty-container"
   • we prefer the projects to incorporate usage of the twentytwenty-container classname be pleased how Dremio did it.
   • it’s likely you’ll well strive with correct twentytwenty, but it’s likely you’ll get search results beside the level to this component as smartly, because there is a broadly oldschool authentic Wordpress theme known as TwentyTwenty too.

Combining all three, we get this search inquire of.

obtain out:repo -repo: ^github.com/.*/.*twentytwenty converse: "twentytwenty-container"

While you reproduction and paste it into Sourcegraph, it’s likely you’ll get the next search results.

These repositories are all the use of the the TwentyTwenty component! Nonetheless, we cannot repeat at a ogle regarding the framework of each mission which would possibly well be listed within the quest results. These forms of results shall be the use of the jQuery plugin version of the component, since the component used to be first created as that plugin. But what if your mission would not use jQuery?

Discovering a explicit framework mission

As an instance, state that it’s likely you’ll also very smartly be engaged on a Vue mission, it’d be extra connected to search out projects of the identical framework that use this component and test up on how they put into effect it in code.

🔍 To attain this, that it’s likely you’ll also add an additional search filter lang: Vue, which creates the blended inquire of underneath.

obtain out:repo -repo:^github.com/.*/.*twentytwenty converse: "twentytwenty-container" lang:Vue

In case you speed this search inquire of, as of this post, there is simplest 1 mission out of the 72 that we chanced on correct now that is Vue.

On this delivery supply font mission Victor Mono, they created a Vue net converse app that uses the TwentyTwenty component to showcase the adaptation between the font they provide and the completely different long-established programming fonts. Or not it’s a somewhat frigid use case 😎!

Isn’t very going to or not or not it’s effective if it’s likely you’ll well get notified in the end when there are recent delivery supply projects which would possibly well be the use of inventive usages of Vue projects the use of this component?

Neatly, Sourcegraph comes with this functionality! ✨

Code Monitoring

To set your searches and show screen code, it’s likely you’ll prefer to construct an memoir with Sourcegraph. You should signal in without complications the use of the GitHub authentication feature.

To build a code show screen, that it’s likely you’ll also click on “Monitoring” on the NavBar.

First, or not it’s a long way well-known to construct a brand recent trigger in accordance with a search inquire of. We are in a position to reproduction paste the inquire of we had sooner than, and then add a brand recent filter type:diff.

obtain out:repo -repo:^github.com/.*/.*twentytwenty converse: "twentytwenty-container" lang:Vue type:diff patternType:literal

• This recent filter is required to repeat the code show screen when to express you.
• type:diff represents you

Then we now maintain to consume an action to speed. For now, there is simplest “Ship e-mail notifications”, so consume that option and continue. That you just might also click on “Ship test e-mail” to glimpse how the notification will be be pleased.

Here’s the test e-mail that I purchased.

After filling the total essential inputs, the “Fabricate code show screen” button will be clickable.

Save a search

To set a search and revisit it manually later, there are 2 ways that it’s likely you’ll also reach the Saved Searches page.

1. First manner: Click on on your profile and then on “Saved Searches”
   
2. 2nd manner: Click on on the “Save Search” button after you speed a inquire of on the quest page.
   

You then will be dropped at this page, where that it’s likely you’ll also add a description for the inquire of that that it’s likely you’ll also very smartly be saving.

For a extra exhaustive checklist of search inquire of syntax to craft extra detailed queries, test up on the Sourcegraph documentation for Search Inquire of Syntax.

That’s a wrap other folks! 🎉

Thank you for reading, hope you enjoyed the article to turn exact into a better dev detective with Sourcegraph! Here’s correct a if truth be told easy use case of the manner that it’s likely you’ll also profit from Sourcegraph to be taught of recent libraries be pleased TwentyTwenty and how completely different projects maintain oldschool them. Imagine completely different prospects it’s likely you’ll well attain with this mighty search instrument! ✨

While you survey the article kindly, hit the reactions 🧡 and portion it 🐦~

To discontinue updated at any time after I post recent stuff, notice me on Twitter.