GitHub Universe 2022 Highlights, 21 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Building with :heart: - Universe 2022

Description

Over 3,000 people at GitHub spend their days obsessing over details so our customers can build what they, and the world, need. The fact is that we love being builders, too! In this not-to-be-missed session, Kyle Daigle will pull back the curtain and share some of the small, delightful, and potentially game-changing innovations that have kept GitHub, well, GitHub for the past 15 years.

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Thank you, everyone, so good to be back in person for GitHub universe and a huge hello to all of you watching from home, whether you're watching from your office you're about to prepare dinner or you're joining us as you're having breakfast. It is so great to have you with us how about that video?

A

Wasn't it great the first time anyone in the world has seen that video about GitHub and you're about to see a lot more of it around the United, States and soon the world, as we continue to tell the GitHub story, which is impart your story. I'm really excited to be closing out day one. It's been a packed day, full of talks and I encourage everyone to stick around tomorrow.

A

There are great talks from Mike Hanley, our SVP of engineering, about how we build software talks for maintainers about how they're sharing their work with the world and, of course, our opening keynote tomorrow with stormy, Peters, our VP of communities. You do not want to miss her talk and the stories from her team about how all of you are powering the world with software throughout Universe.

A

Throughout the day, so far, you've been hearing a lot about how we got here, how software has changed the world, how our ships are in your hands and how you're making them your own. But for a moment, I want to rewind the clock a bit about a decade back and talk about a much younger GitHub back when there were just small ideas, tiny ideas that were being built with love and passion and turned into something.

A

Absolutely incredible in my story starts with an octocat I joined GitHub about 10 years ago, and when I joined, we had a relatively small paid product that had some early success, something called GitHub fi, which ultimately became GitHub Enterprise server. It was small but a growing business.

A

The pull request was created and we also built a lot of things that never saw the light of day, but, most importantly, millions of developers were already flocking to GitHub building and sharing their code with each other, the open source Community rallied around GitHub and all along the way we had an octocat that was growing with us. The octocat became a part of the GitHub Zeitgeist because of a simple, tiny idea.

A

The founders wanted a fun error page, something to make you smile when we all screwed up, but with Git having the concept of an octopus, merge a nerdy idea, mingled with a fun one and the octocat was born. We purchased the image from an illustrator named Simon Oxley, the same illustrator who created logos for digitalocean bitly and the huge startups of the day. But what started as a fun nerdy put a smile on your face idea quickly turned into something so much more. The designers at GitHub created dozens of octocats.

A

They became a way to describe your identity, whether you're, a parentic hat, a yogi to cat or one of my personal favorites, the max to cat hubbers developers. Customers, people dressed in suits were clamoring for stickers from a bunch of us wearing hoodies, and so we kept tinkering like. We really went deep on this. How does an octocat walk? I mean really how many tentacles does The octocat Have, and why is it obviously not? Eight.

A

And what we were really asking was: how do we entertain people while we're teaching them about git or Version Control, or the latest Enterprise release? Over the years we've produced more than a dozen full-length animations, a physical octocat figurine, a plushie that my kids love and much more. The octocat got a name Mona a full backstory a world in a community all her own.

A

So why the hell? Does a software company invest this much into a brand as Cameron and early Hubbard said it's not something that you do logically or analytically.

A

It doesn't seem like it would even be a successful brand element, but we did it anyway, and it was an enormous success because people view the octocat as an extension of our community of Developers and because whether it's software or octocats at GitHub, we're never quite done at Universe this year we have a absolutely beautiful new book celebrating 10 years of tinkering crafting and perfecting our octet by our design teams. Our animation teams illustration teams in our community. So if you're here on site with us, it's definitely worth a look in the shop.

A

The pages are absolutely beautiful. The octocat, the animations, the community, are still evolving and growing every day because of all of you. So the reason I wanted to tell you this story.

A

The journey that it brought us on the journey that it brought me on is because at GitHub we're Builders too we're building four Builders and we all need somewhere to start. We start with an idea we Tinker with it. We go deep and we see what happens. That was the getup I joined 10 years ago, and it's still the GitHub of today.

A

So right now, I want to do something we haven't done in a while. I want to show you the things that are on our workbench that are in our Labs the ideas that are just experiments, I'm talking about things that may never make it all the way to the product or be next year's big announcement at universe, but those ideas that are just small ideas and maybe they'll, become our next big release.

A

Arthur Ashe, a famous American tennis player, said start where you are use what you have and do what you can and- and we can do a whole hell of a lot, and so here we go. Let me show you what we're experimenting on I'm going to be doing this live because who doesn't love a live demo, particularly when they go bad I mean hell, especially when they go bad, I, guess and so I hope you'll stick with me as we work through this GitHub universe, great okay.

A

So the theme at this year's GitHub universe and our new tagline is let's build from here. So what if we took that literally what if you could build GitHub in GitHub, if your repository was more than just a static, read me and a link of that to documentation or your website or to some other tool that you have to use to give it a try and that's why the team has built blocks a way to engage with your repos directly and interactively. So let me show you so here.

A

I have a little example project, of course, like every good project, it needs a readme. So let me go ahead and add that now the home of the octocates okay, but I, don't just want to type a bunch of words right. I want to make it easier for people to understand. What's going on in my repo I can do that by directly embedding a block that shows off what it does. You'll see it's using mydemo.js file. I can click this button and immediately start seeing what my script does. Look at all those Arctic Cats right.

A

That was me earlier. We should also list out the possible images that we can get back so I'll. Add another header come down here images and now in this block we can see all the possible options that would be returned by The Script, but blocks is way more than just a readme editor. So let me get out of full screen mode and I can quickly. Click save and immediately Commit This to my Repository blocks, reimagines repos and it puts your repository's core front and center.

A

So we have a file Tree on the left, and history on the right blocks are components that customize how you interact with your content. It could be as simple as a file viewer or as powerful as a Live code sandbox or a wysiwyg editor under the hood. A block is a JavaScript component that knows how to interact with the files and folders inside your repo, so you can think of them like little apps that you deploy simply by pushing to GitHub. But what should the readme of the future look like?

A

Well, maybe it looks a little bit like this. Here's an example of the p5.js project. Now, instead of using an SVG hack or adding everything manually, we can have a proper project, Health block along the top for people to get a sense of the popularity of the project.

A

You can scroll down and use an interactive demo. This isn't a screenshot I can go right here into the code and immediately start changing it. We can even have reference documentation with search. So, as you know, I want to draw a circle with this Library I can type in circle.

A

Click it scroll down and immediately edit now here further down, I can highlight the contributors of the project. There we go see. I can find someone hey thanks Kate now we see projects split their time and their energies by building really great project websites to make their projects approachable, more powerful, but with blocks projects can have a powerful ux that isn't possible with simple markdown and with no need for a separate project website, and it's not just readmes. You can read and write any content inside your repository.

A

So let's take a look at an example of a diagram. I opened up this Excalibur diagram, I can view it. I can immediately say Hello, Universe and save it to my Repository or, if I'm, keeping some sort of data set in my repo instead of viewing it as a text, file I can have a spreadsheet interface.

A

We didn't really have much rain today, which was amazing or I can view this information as a chart by looking at a chart block now, even if it is code in some form, sometimes it's not always best to read it as simple text. So I can load up this style sheet or corporate style sheet over here. I, don't want to see the raw code I want to see the actual style guide and I can even click through history, so that I can see what has changed over time.

A

Actually, I want to put this style guide at the bottom of my readme. So put it here.

A

Okay, great blocks aren't only for files, you can use them on entire folders or even entire repos, so say, you're running a community, and you can build out your own dashboard like this one, which shows the health of your community within your Repository and even internally, we've been finding blocks to be a great way to prototype the future of GitHub we've prototyped a block here that uses GitHub copilot. To summarize the explanation of the code for each function, we can create blocks, deploy them, learn from them and keep iterating, and that is githublocks.

A

So blocks is available as an experiment for you to sign up and give a try both the blocks we've created, but also the blocks that you want to create on your own, so head on over to blocks.githubmax.com, to sign up for the waitlist and share your ideas of what an interactive repository experience should be so in that blocks.

A

Demo I quickly showed you a way that we're experimenting with integrating the power of GitHub, co-pilot and AI into the core of the GitHub experience, but when I'm writing code I'm, not just in github.com or in my editor all day, I'm also using my terminal. So what if GitHub copilot could also be just as helpful in your CLI.

A

Let me show you an example, so say: you've forgotten the exact incantation of listing all the typescript files in your project. Let's ask GitHub copilot and see if it can help. We invoke it by just typing question: mark question mark and asking what we want.

A

Okay, that looks right, but I can then ask copilot to refine it even further. I know the last time. I did this: it returned a bunch of junk from node modules, so I'll say, exclude node modules.

A

Okay, you can pass the dash V to grep. I didn't know that. Finally, let's sort the list, so we can make the list easier to read sort by size. Okay, that looks right. Let's run it there, you go all the codes sorted with a good overview of where your source code is concentrated, but another place that I sometimes can forget. Flags and options is with Git. It can be incredibly powerful to manipulate, say, git log data, but it can also be hard to remember all the sub commands and flags.

A

We've built a special command into GitHub, copilot CLI that helps you with Git commands. So, let's start with a simple one: let's see if it can help with deleting a branch. Okay I mean that one's easy. So now, let's say we want to do some git sleuthing through commits I, want to pull up a list of the commits that are security related, but I can't for the life of me. Remember how to do this. So let me ask copilot commits with the word security.

A

Okay, today I learned you can pass the gret flag to get log now, all I got to do is run it and there we go. Github also has a flexible CLI experience that we call GH, but every now and then stringing together, Advanced commands can be difficult, so we built another special command to help. Just with that, so let me get all the open issues on the Tailwind CSS Repository.

A

Tailwind CSS, okay I can pass it the state flag to issue list that makes sense. But what, if I wanted a Consolidated list of users who have opened issues on the Tailwind CSS repo have opened issues on Tailwind, Labs, Tailwind, CSS.

A

Okay, it passes the Json flag, so I'm only filtering down the response to a particular field and, of course, it's using JQ to make sure I'm only getting each user once, let's run it and there we go shout out to Mike McQuaid I gotta update Brew we're going to get up co-pilot in your CLI. You can start to see how similar to using it in your IDE. It is.

A

You can both more easily get your task done, but when you forget about grep and get log, but you also get the benefit of learning how to craft complete end-to-end commands in your shell, git or GH command line tool. I'm so excited about the potential for GitHub copilot CLI. To save me time and teach me a few things along the way.

A

Okay. So now we've shown you AI in your command line. I want to head back to the editor for a minute. If you've used an image, editing tool like Photoshop you've, probably been familiar with brushes right to use a brush. You paint on an image and it applies some sort of effect wherever you've painted. Now we wondered what, if you could use brushes, but not just on your code, not just on images, but on your code now let me show you the next experiment that we're very creatively calling brushes.

A

So here we have a JavaScript file. It's got a bunch of functions in it, as you can see, I want to take a look at this first function. So it's a little bit hard to read. It's super terse and, while I know being clever, is fun. I'd rather just understand what all the operators are doing here, so I'm going to click into the function, and it opens up a toolbox of brushes. This first brush is going to rewrite the code and make it more readable there. We go this code's much easier to read.

A

Instead of multiple ternary statements on one line, we have them split into their own statements and conditions. Now what else can we do here? Well, since it's a typescript file, we can also have it add some types.

A

Okay, it's guessing the two input parameters are going to be numbers. It's going to Output a number all right. Let's go on to the next function here, so I know, there's a bug in this one from when I ran it earlier today, but I'm not totally sure. What's going on so there's a job with our third brush here, which will make a look for bugs and try to fix them. So let's do that?

A

Okay, oh okay! It looks like I misspelled, low, great and now this is not going to work for all bugs to be obvious right, but we can use this next brush to make this function easier to debug all up.

A

Okay, it looks like it's added a log statement, so our program will print out the value of each variable. Every time we run this code, it's much faster than if I were to type this all out myself when I'm doing some console log debugging and after we're done we'll want to clean up this code. I'd normally do that by hand, but why not just have a brush do that for us.

A

A

This third function's also a little bit hard to follow. So we have this brush, which is going to going to go ahead, break it up into steps. So it's easier for me and whoever comes next as you can see, it's broken this into steps told us what each of those steps done. I find this very valuable to use when I'm, looking at new code bases or code in languages that I'm not particularly familiar with, but all of these brushes, don't just work in JavaScript they'll help you out anywhere you're writing code.

A

So, let's take a look at this HTML file with a little bit of CSS.

A

We have this CSS snippet, that's going to round the corners of our form and I know that I have to do something to make it work in all browsers, but I can never remember what that is either so I can use this brush to make my code more robust.

A

There we go, it's went in and added the vendor prefixes and it looks good to me. We know this won't cover every use case that you'll run into so we've also made it made an ability to add custom brushes on the Fly. This form right here isn't very accessible as it's currently written it's. We want to make it easier for screen readers for sure, so, let's create a new brush that makes this form more accessible.

A

And there we go it's added IDs and it's linked to labels to the input tags. So those are a few of the brushes that we're putting into the toolbox for this experiment. Our copilot Labs vs code extension has a bunch of really great experiments with GitHub copilot. You can explain code, you can translate code between languages and more, and we just added this brushes experiment today. So go download the co-pilots lab co-pilot Labs extension on the vs code extension Marketplace. To give it a try.

A

So I've shown you three New Uses of AI within your developer, workflow in your Repository, in your terminal and in your IDE via new novel uses of GitHub Copilot, but copilot's magic is that it continuously assists developers with non-intrusive helpful suggestions. You can look, you can learn or you can ignore it all and carry on typing.

A

Yet coding clearly goes beyond editing. It's also about collaboration and github's. Pull requests are at the center of that collaboration. So how can we bring the power of AI to software collaboration?

A

Our aim is to provide AI assistance to developers at every stage, from beginners learning to fix their first issue to experts carefully reviewing large PRS recalling this experiment AI for pull requests.

A

One of our prototypes is an easy to use GitHub app, we call prbot, but we think there are a ton of interaction models here. We've got a great partnership with open AI models just keep getting better and better. So we're really excited about the possibilities. So let me show you some early samples of PR bot in action.

A

Here's a cut down version of the tensorflow 2.0 tutorials, and someone has filed an issue here. This issue wants to oops sorry wrong, one. This one wants to uh replace tensorflow with pi torch, so a task like this can sometimes be daunting, whether you're new or an existing contributor. So let's show you how prbot could go about making a change like this, we'll give give it a quick second to read the changes and there we go. Here's a quick explanation about how I should move forward to make a change like it's suggested. Now.

A

Why not also have it suggest the changes? Given the explanation? Look good now for this, the bot will react with an emoji to let us know that it's thinking and then it's going to start walking through the various files in my repository and start suggesting a change, so I can start to click into the changes.

A

Okay, this one makes sense, take a look at another one down here, as it's still working you'll notice. It's not just changing the libraries but also changing the function. Calls where necessary.

A

Okay, it's skip the readme and then the pr bot will also put together a pull request for us that we can go and review. So, let's take a look at that perfect now, let's say: instead, someone sent you a pull request. Well, the first thing in this PR is that it doesn't have a very good description, so let's ask prbot to describe the changes that it sees in rpr, we'll give it a second again it.

A

It sends an emoji to know that it's working it's starting to describe the changes in the various files, and here we go. This pull request makes the following changes. Now I can get a broad overview of what this PR is doing before I go and attempt to review the pr myself now.

A

Why not just ask PR bot if I should merge this pull request, because you can't do it without a code review, so we'll give PR bot a quick second I'll scroll back up to do the work and boom there. It is here's a suggested change with all the context of the pr. So, if you're going to offer a review similar to what you'd expect you know from your colleagues here, it is I have the changes to fix that one also looks good I'm going to commit the changes and we're good to go.

A

So even if we want to have a human team member review this before we finally merge utilizing copilot gives immediate feedback at any time of day. That goes. Way Beyond linters we're still very hard at work on even more use cases on having AI within issues and pull requests workflows to make the lives of developers easier.

A

This set of experiments isn't quite ready for you to play with, but we've got well over a dozen more in the works and we're so excited to show you those sometime early next year.

A

So blocks copilot, CLI, brushes AI for PRS and a dozen other experiments and tinkering projects that I didn't show you at GitHub we're trying to find new ways every day to put developers first and it's not just a tagline. It's not an empty promise, we're developers too. We also want to stay in the flow, we're not interested in tools that just get the job done, we're chasing happiness in the joy of building. Just like you, some of these experiments start small and they stay small. Some of them start small, look like they won't work.

A

We go back to the drawing board. The idea grows, a little evolves, a little more and then it takes on a shape and becomes something that changes the face of software.

A

Everything I've shown you in this session is built by our GitHub next team and fueled by the feedback of thousands of hubbers, and all of you get up. Next is the team that worries about exploring the unknown, pushing what software development should be like and, of course, experimenting. A lot of their ideas will never see the light of day, but we learn we tinker and we iterate again.

A

So if you want to learn more about what this immensely talented team of researchers and Engineers are up to check out their work at githubnext.com, you can sign up for the blocks. Experiment, take a look at learnings from efforts like flat data or workplace a workspaces and gives us your feedback. Githubnext.Com survey, your ideas, fuel, our ideas for those of you in person.

A

You can find members of the GitHub next team and the demo stations and throughout the event, so let's take it all the way back to the beginning, back to the octocat started with a fun idea, a way to put a smile on the face of a developer when something was broken and the experiments I showed you today, they're like early early oxycats, we're still sketching them out, but you're developers you get it.

A

This is part of the enormous magic of software, sketching it out getting feedback iterating quickly, getting it into people's hands and seeing what happens next, sometimes it can feel like software is like sketching on a page. You know drawing something erasing some of it, drawing it again, because in a way it's just like that bits mean nothing until someone starts using them and I'm so excited to get some of these bits into your hands today and someday in the future.

A

Come back tomorrow morning for the kickoff of day, two with stormy Peters at 9 30 a.m, Pacific 12, 30 p.m, back home for me, and Eastern Time, 5, 30 p.m, GMT, and for the last thing before you go to bed at 11, PM Indian, Standard time, I want to offer a huge. Thank you so much for our sponsors for being a great part of this experience. Today and tomorrow, thank you to the production team.

A

Who's been doing amazing work with us the past three days, and thanks to all of you for being here with us on day, one of GitHub Universe 2022, we'll see you all tomorrow, foreign.