How To Use Github's New Personal README and Wakatime

Key Takeaways

i like to look at the last 14 days because it shows me like i work on a bunch of different types of different files here mostly use vim but you can also put walk of time into a bunch of different other editors so it's a really cool thing [Music] welcome back everyone today we're going to talk about github personal readmes and how to implement walkatime in those readmes if you're new here my name is brian jenks on this channel we talk about all things code and tech if that interests you please hit that subscribe button and let's get into the video so how do we get one of these custom readmes all you have to do is make a repo with your username as the name of the repo so in my case it's tall guy jinx slash tall guy jenks and then you initialize that repo with a readme you can include some image resources you can have a license but really all you need is this repo with an initialized readme and that's it you edit the readme and it displays on your page so recently github just released this new feature where we now have personal readmes for our entire github profile here's an example of what mine looks like i like to keep it super clean minimalist and just get to the point so really all mine is is just a collection of social media and other type of links so i have a bunch of different things on here you know linkedin my website my email if you want to contact me stackoverflow orcid id you know etc but there's a lot of other cool things that we can actually do with these custom profiles so let's look at what are the few of those things are so you can see i've added some stuff to this readme to show off a couple of the features i don't usually keep this in here this is just for demonstration purposes it uses github markdown it's a readme on github it uses github flavored markdown which means all the things pretty much that you can use in your normal readmes on github you can use in this and now some people have had some really interesting ideas and we're going to talk a little bit about those in a bit but here are some examples of some stuff you can add to this for your own personal profile level readme i have a statistics toggle button that tells me you know about my entire profile about my commits my prs different repos i've contributed to and you're rating for your github profile some statistics about like how which languages i write in or different things i write with and you can do this type of stuff very easily it takes very minimal setup to get this ready for you so how do we get this github stats card in here this updates live with your profile it's pretty cool now it comes from this repo called github readme stats by this user here now it's really as simple as you get this link and you change your username to whatever your username on github is and then you can edit different pieces of metadata for it such as you know your color theme it actually does have a grove box color theme but i actually didn't want that on github just because you know the dark theme kind of clashes with github's light theme so i just didn't bother you can change this to be exactly whatever you want so if we look at the actual code behind the readme i showed you earlier if we edit this we can actually see that it's not actually all that much this is all just those social media icon buttons that i have in there but this is everything else for the github statistics the summary and details stuff this is actually that toggle button on github summary is the text that displays and details is actually that little button itself for all of those stats it's really just this image with the source url being you know the image that was on this repo the image actually came with markdown in the text here you know it actually uses markdown syntax to put the image in now i changed that to actually being an html tag solely because it allows me to embed this in the actual html tags here if i didn't change it to be html it actually causes some weird display issues so i kind of just chose to hey just do it all in html and not mark down syntax but if you want to do it all in just markdown you can totally do that but i like to have some of these things centered and then i actually wanted these toggle buttons so that's what i had to do for that now the second piece of information you saw me show was this breakdown of languages that i've written in this is actually powered by something called walk-a-time walk-a-time is like data collection on the types of programming languages and files that you're actually editing also it collects data on which of the github repos you know a git initialized repo that you're actually working on files in so you can actually track your time working on specific projects specific file types and even which specific files in those projects and their file type so you can actually see some really information cool information about that so this is just a really cool graphic produced by wakka time that you can actually embed into your readme now if i look at that it's just as simple as the the other one it's actually a image url i also put it in html and if it wasn't already and you can actually specify your height because sometimes it's a little bit too big or too small so actually you can change the height by this by doing that so how do we actually get this visual we all we actually have to produce data for it so we need to actually use walk-a-time so on the walk-a-time site i you don't need to pay for this you can get a pretty interesting amount of results with just free account i like to look at the last 14 days because it shows me like i work on a bunch of different types of different files here you can tell i mostly use vim but you can also put walk-a-time into a bunch of different other editors so it's a really cool thing now let's look at what we can actually put it into so these are all the different supported editors that support walk-a-time collection on the data that you want to write so some of these that i've probably used before visual studio vs code tech studio vim ssms is in here yeah a lot of different editors notepad plus plus yeah you can put walk of time in all these different things and collect all the data on all the projects you're working on the files the file types and get this really cool amount of information and so you can even see that this is actually the github repos that i work in unknown project is really just my file system it's just a catch-all but of my actual github repos you can see my flash script that i worked on it'll give me some information about that how much i code in it what i code in it with and then the languages that i use yeah so it's actually a really cool thing now walk-a-time is not going to be for everybody just because some people just don't want that data collected and i fully understand that but if you did want to implement this it's super simple there is this at least for vim anyways for vim you can actually install this plugin vim walkatime by walkertime and really it's just as simple as you know if you use vim plug you and you follow these instructions and right here it's just two three instructions you install the plugin and then it prompts you for the api key and then you enter that api key the api key is in you know you go to your profile settings and it's right there it's not even difficult to find you enter that api key into vim you're you're good to go now if you do that for vs code it's again pretty simple you install the plug-in plug-in is just called walk-a-time and so you'll do the same thing you install it and then i think yeah you restart vs code or vs codium either one it works for both and then you enter your api key and enter and again that's it once you enter that api key it's then collecting that data sending it to your dashboard and then you have this dashboard produced for you okay cool so once we have some data collected in walk of time how do we get this visualization here so on the site in walk of time you actually get this dashboard which is what i was looking at here now i want to actually share some of this information so you can go to share and you get all these different types of shareable items such as you know repo badges you can actually get emailed reports you can have some things auto tweet to your twitter account but i clicked embeddable charts and you can modify this to actually display what you want and then it will actually give you code that you can actually embed into your readme now you can see it comes in like a figure and stuff i didn't want this any of this stuff or the embed i just literally took the source right here and put it into an image tag and that works just fine sometimes it's a little bit small that's why i increased my image tag to 400 in height so there's a lot of cool stuff coming out around these new custom readmes for your profile because it's a profile level readme so as soon as you go to somebody's account you'll actually see it up here at the top it's right there in your face right above your repos now and it's a really great way to either self advertise or really just have an introduction to who you are and what you do so there's this repo right here by i'm not even going to try and pronounce this but awesome github profile readme it's just a collection of a bunch of people and their readmes and the types of elements that they put into this i pretty much went through all of these and took little bits and pieces tried things out and settled for my very minimalist just icons out down here at the bottom when i remove all this stuff but that's pretty much what i settled with but there's a lot of really cool stuff in here some of them are minimalist some of them are really tricked out and there's some good stuff you can find in all of these now with these new personal readme repos some people have had some really interesting ideas such as yeah a personal website is really cool sometimes it takes a lot of work to set up for some people who just don't want all that freedom and all of that stuff to manage and deal with a custom website know whether you're doing something with squarespace or if you're just doing something written from code yourself there is some really cool ideas coming around these repos such as using the issues in the repo for your personal readme as basically a blog because the issues are now they actually are numbered so they chronologically are listed you can actually make github read me markdown issues that are actually blog posts and for some people if they notice my spelling mistakes if i actually ever did this feel free to send a pull request to correct my spelling mistakes but some other cool things people are talking about is you know you can use this for a blog via the issue templates you actually have this almost like a website home page like a one-page app basically just an introduction to yourself on your repo introducing people to you what you do more about you but you could also use insights here and check out your traffic of people going to your readme or this repo and so this is really interesting because now you actually have free analytics too on this repo so this is not something i would do personally personally i support getting just your own whole website but as far as getting something quick and dirty just up and running get some traffic get some you know a blog sort of thing going get some eyes on it people following this watching it starring it and then actually having something introducing people to you on your front page this is a really cool idea and i'm really interested in this and really happy github put this out so i really hope you found this video interesting i'd love to hear about what cool interesting things you're doing with your readmes and how you're going to take advantage of these new github personal readme repos now before i go don't forget to subscribe to the channel if you enjoyed what you saw and a quick shout out to my patrons thank you devon and alberto for supporting the channel you can check out my patreon page in the link in my about me and i'll catch you in the next one [Music] you