DEV Community: Jeff Omenyuru

The UI Components of GitHub's UI

Jeff Omenyuru — Fri, 01 Jul 2022 14:45:05 +0000

Several features and tools make up the components of GitHub's UI. These features and tools enable management and collaboration among users. To get a description of some of these tools and features, read on for a breezy tour around the platform. Use the table of content below to navigate to different sections.

Table of content
User feed
User profile
Notifications
Profile settings
Repository components

User feed

Recent repositories: This is where the most recent repositories you interacted with appear. Any repository you don’t interact with after four months will automatically drop out of Recent Repositories. The search bar helps find such a repository. You can also use the green button above the search bar to add a new repository.
Following feed: The public activities of those you follow and repositories you watch appear under Following. For example, when anyone stars a repository you watch or someone you follow forks a public repository, follows another user, or starts sponsoring someone, GitHub will notify you on your personal dashboard under Following. The Following feed is how you stay up-to-date on your community's activities on the platform. However, you can unfollow anyone whose public activities you no longer wish to see.
For you feed: The For you feed is where GitHub makes recommendations based on your interests and public activities, including repositories you star, repositories you’ve contributed to, users and organizations you follow and have collaborated with. These recommendations help you discover interesting projects across the platform.
Explore repositories: The Explore repositories section offers personalized recommendations for interesting projects based on activities such as contributions and starred repositories.

User profile

Edit profile: Allows you to edit your name, bio, company, location, email, website, and social media handle.

Pull requests: Displays the pull requests you created.

Issues: Displays all your open issues.

Marketplace: Enables you to discover and add free and paid functional tools that improve your workflow.

Explore: Shows trending repositories and recommends projects and good first issues based on past contributions and people you follow.

Overview: Displays the content of your profile README and an activity section that shows your profile visitors, most active repositories, type of contributions, and number of contributions.

Repositories: Access all your repositories, both private and public, sorted by name, star, or last update. There’s a button for adding a new repository and a search bar that enables you to search for a specific repository that isn’t immediately visible in the lineup.

Projects: Still in the beta stage, individual users and organizations use Projects to manage their workflow in an Excel-like spreadsheet. The spreadsheet is versatile enough to allow planning, prioritization, sorting, filtering, tracking, and so on. You can view your projects either as a high-density table or as a board.

Packages: Fully integrated with GitHub, Packages lets you host all your code and software packages in one place, either privately or publicly, helping you centralize and manage software development with greater ease. GitHub Packages is compatible with popular package management tools like Docker, Apache Maven, NuGet, RubyGems, npm, and Containers.

Stars: Every repository you star on GitHub appears on the Stars page. You can curate and organize starred repositories with lists, making it easier to locate and return to those repositories later.

Create: Creates new repositories, gists, organizations, and projects. Also imports repositories.

Notifications: See Notifications section.

Your profile: Takes you to your profile.

Your repositories: Takes you to a list of all your public and private repositories.

Your codespaces: All your codespaces appear here.

Your projects: Displays your existing projects, with the option to create new projects using the New project button.

Your stars: Displays starred repositories.

Your gists: Shows all the private and public gists you created.

Upgrade: Upgrades your account to the pro version.

Feature preview: Provides a list of features that are available in beta.

Help: Accesses GitHub documentation for any information you may need.

Settings: See the Profile settings section.

Sign out: Signs your account out.

Notifications

Inbox: Displays notifications you haven’t marked as done or unsubscribed to.

Saved: Notifications you saved to read later appear in Saved.

Done: Notifications you’ve marked as done appears in Done.

Filters: The settings icon next to Filters enables you to filter your inbox by Assigned, Participating, Mentioned, Team mentioned, and Review requested.

Manage notifications: Has a drop-down that provides three notification management options: Notification settings, Watched repositories, and Subscriptions.

Notifications settings: Chooses how you receive organization and Dependabot alerts, including notifications for conversations, actions, and watching.
Watched repositories: Displays the repositories you’ve watched
Subscriptions: Displays the repositories you’re subscribed to.

Profile settings

Public profile: Allows you to change your name, select a verified email to display publicly, mention your company’s GitHub organization, and include a short bio, website URL, and location. You can also update preferences to make your profile private, show your achievements, and include private contributions on your profile.

Account: Changes your username, exports your account data, adds a successor, or deletes your account.

Appearance: Enables you to choose how GitHub will look to you. You can apply day or night theme and choose a preferred emoji skin tone, tab size, and font for your Markdown editor.

Accessibility: Enables you to activate or deactivate character keys. You can also choose whether animations should play automatically and modify shortcuts to trigger the Command Palette for the default search mode and command mode.

Notifications: Allows you to choose how you want to receive notifications for push access, mentions, Dependabots, actions, organization alerts, repositories, and conversations you’re watching. Beyond these, you can also choose specific activities to receive email notifications for.

Billing and plans: Displays your personal billing, including your current monthly bill and next payment due. You can create an organization account, update your current plan and payment method, manage your spending limit, and redeem coupons. Additional things you can do in Billings and plans include getting usage reports, sponsoring users of your choice, view minutes quota, data transfer quota, bandwidth quota, and shared storage between Actions and Packages.

Emails: Adds email addresses, both primary and backup email addresses. Also, here you can make your email private and choose the emails you receive.

Password and authentication: Enables two-factor authentication. Also allows you to update your password, view and revoke sessions you don’t recognize.

SSH and GPG keys: Adds new SSH and GPG keys. Activates vigilant mode, allowing you to flag unsigned commits as unverified.

Organizations: Gives you the option to either create a new account or transform your existing account into an organization account.

Moderation: Has a drop-down that reveals three moderation options: Blocked users, Interaction limits, and Code review limits.

Block users: Allows you to search and block users. You can also see all the users you’ve blocked and choose to get a warning when a blocked user is a previous contributor to your repository.
Interaction limits: Sets a temporary interaction limit for existing users, prior contributors, and repository contributors.
Code review limits: Limit reviews on all repositories and remove review limits from all repositories.

Repositories: Updates repository default branch and displays existing and deleted repositories.

Packages: Searches deleted packages and displays recoverable deleted packages.

Pages: Adds and verifies domains, allowing you to restrict who can publish GitHub Pages on them.

Saved replies: Saves snippets of texts you can reuse in comment fields throughout GitHub.

Code security and analysis: Disables or enables dependency graph, Dependabot alerts, and Dependabots security updates.

Applications: Displays and configures installed GitHub apps. You can also view authorized GitHub and OAuth apps and revoke authorization.

Scheduled reminders: Shows scheduled reminders.

Security log: Displays and exports security logs.

Sponsorship log: Displays sponsorship log, including new sponsorships, changes, and cancellations. You can also filter the log by period.

Developer settings: Registers new GitHub and OAuth apps and generates new personal access tokens for quick access to the GitHub API.

Repository components

Pin: Pins a repository to your profile.

Unwatch: Sets up notifications for repositories. You can choose to be notified about all activities or never be notified. Also, you can turn on notifications for specific events like mentions.

Fork: Forks repositories to enable you freely work on projects without altering the original repository.

Star: Stars a repository.

Code: Displays the complete content of a repository.

Issues: Enables the detailed description of issues discovered in a project. The Write section in Issues provides ample space with Markdown support to help you format your description properly. You can also attach files, write code inline, use labels, link to lines of code, refer to other issues, and mention people from whom you might be looking to get feedback.

Actions: GitHub Actions is a free continuous integration and continuous delivery (CI/CD) platform fully integrated into GitHub. It enables you to automate your software development lifecycle, from building and testing to deployment. You can also create workflows directly in your repository, with specific events as triggers, such as someone creating an issue or opening a pull request.

Projects: Enables you to organize your issues and pull requests in a spreadsheet so that you can visualize, keep track, and prioritize tasks better.

Wiki: Every repository on GitHub is equipped with Wiki, designed to host documentation that can help others better understand and contribute to your projects. With Wiki, you can easily describe your project in granular detail in long-form content that’s easy to navigate.

Security: Includes a security policy in your repository, views security advisories, enables Dependabots alerts, and sets up code scanning.

Security policy: Your security policy informs users on how to report vulnerabilities and how you’ll fix them. This is outlined in a security.md file included in the root of your repository.
Security advisories: Allows you to discuss and fix vulnerabilities privately. After that, you can then publish a security advisory informing users of your project so that they can upgrade package dependencies.
Dependabots alerts: Enabling Dependabots alerts prompts GitHub to send alerts about vulnerable dependencies in public repositories.
Code scanning: Code scanning enables you to scan your GitHub repository for security vulnerabilities and coding errors.

Insights: Provides an overview of the activities of your repository. You get specific insights by clicking the following tabs:

Pulse: Provides data on active pull requests, active issues, merged pull requests, open pull requests, closed issues, and new issues.
Contributors: Enables you to view the top 100 contributors to your repository, presented as a contributor’s graph.
Community: Shows the community profile of a repository to help you decide whether to contribute or not.
Community standards: Accesses a checklist that allows you to add a description, README, code of conduct, contributing guidelines, license, issue and pull request template.
Traffic: Presented in form of graphs and tables, this is where you’ll find information on the traffic your repository accumulates. Traffic information includes popular content, visits, the number of times users cloned the repository per day, and referring sites.
Commits: Displays all the commits made to your repository in the past year through a top and bottom graph.
Code frequency: Shows weekly content additions and deletions in a graph.
Dependency graph: Provides a summary of the dependencies, packages and ecosystem a repository depends on. It also shows the packages, dependents, and repositories that depend on a repository.
Network: Gives a visual of the branch history of the whole repository network.
Forks: Shows a repository's forks, listed alphabetically by user names. Clicking on a user name redirects you to the user’s profile, while the fork name redirects you to the specific fork of the repository.

Settings: This is where you customize your repository:

Rename: Renames your repository.
Collaborators: Allows you to add people you want to collaborate with and manage access. Under Who has access, the Manage button redirects you to the Danger Zone section, where you can change repository visibility, archive repository, delete repository, or transfer ownership.
Moderation options: Moderation options include interaction limits and code review limits. With interaction limits, you can restrict users’ interaction with your repository for a specified period. Restrictions include comments, pull requests, and issues. While Code review limits restricts the access of users you granted permission to approve or request changes on pull requests.
Branches: Renames default branch and includes rules to check status before merging and to prevent branch deletion and force pushing.
Tags: Marks specific commits at a particular point in the history of a repository. In tag settings, you can add tag protection rules to prevent your repository users from creating or deleting tags.
Actions: Has a dropdown with two options: general and runners. General is where you grant action and workflow permissions, choose artifact and log retention duration, and determine which collaborators will require approval to run workflows. While runners enables you to add a self-hosted runner to a repository.
Webhooks: Adds webhooks to help you build and set up integrations.
Environments: Adds new environment.
Pages: Hosts individual, project, and organization pages straight from a repository.
Code and security analysis: Sets up code scanning and enables secret scanning. You can also enable dependency graph, Dependabot alerts, Dependabot security updates, and Dependabot version updates.
Deploy keys: Adds deploy keys, an HSS key that gives access to a single repository.
Secrets: A drop-down will reveal Action and Dependabot. Action adds new Action (environment and repository) secrets for the use of those with collaborator access to your repository. While Dependabots add encrypted secrets to the Dependabots at the repository or organization level.
GitHub apps: Sets up apps that integrate with specific repositories to enable you to automate and improve your workflow.
Email notifications: Sets up email notifications for when push events are triggered.

Master: Switches branches and tags. Also has an input bar where you can find or create a new branch.

Branch: Shows all branches, including active and stale branches.

Tags: Views tags and releases.

Go to file: Displays a search bar where you can type in the name of the file you’re looking for.

Add file: A drop-down allows you to create or upload new files.

Code: A green-colored button that enables you to clone a repository using either the HTTPS link, SSH key, or GitHub CLI. You can also download the repository as a zip file or open it with GitHub desktop.

About: This is where you provide topics that help classify your repository, plus a short description of what your repository is about.

Overall, not all the GitHub UI components were described above. Just enough for new and intermediate users to get started on the platform.

How to add files to your GitHub repository

Jeff Omenyuru — Fri, 01 Jul 2022 11:54:46 +0000

You can add files to your repository from GitHub or the command line in Git. Use GitHub if the file you’re adding is anything below 25MB. But if it does exceed 25MB, you might want to use the command line. You can add a file of up to 100MB using the command line.

In this How-to guide, you’ll learn how to add files to your repository from GitHub and the command line.

Add files to your repository from GitHub

(1) Open your GitHub profile and go to the repository to which you want to add the files.

(2) Click Add file to reveal a drop-down.

(3) Click Upload files in the drop-down.

(4) Pick, drag, and release the files in the area below. Or click choose your files to upload directly from your local machine.

(5) In the comment box, write your commit message. At this point, you can either commit directly to the master branch or create a new branch and start a pull request. It’s not a good practice to commit changes directly to the main branch, especially when you aren’t working solo. You can click Learn more about pull requests for more information.

(6) Click Commit changes.

Add files to your repository from the command line

This guide assumes you’ve installed and set up Git on your computer.

(1) On GitHub, navigate to the repository to which you want to add a file and open it.

(2) Highlight the HTTPS link and copy.

(3) Open Git Bash on your computer.

(4) Enter cd ~/Name of the location where you want your cloned repository. I chose “Desktop” as the preferred destination in the image below.

(5) Type "git clone" and paste the link you copied from GitHub.

(6) Press enter.

(7) Move the files of your choice into the local directory created when you cloned the repository.

(8) Change your current working directory to your local repository, manually or from the command line in Git Bash. To do this from the command line, enter cd ~/Desktop/Exercise in Git Bash and press enter. Replace “Exercise” with the name of your local directory.

(9) To stage the files for commit to your local repository, enter git add .. To check the status, enter git status and press enter (git status gives you a view of the staged files).

(10) To commit the file in your local repository, enter git commit -m “Commit message”.

(11) To push changes from your local repository to your remote repository on GitHub, enter git push origin your branch name.

(12) Navigate to GitHub and check out your new file.

How to Create a GitHub Profile README

Jeff Omenyuru — Thu, 30 Jun 2022 16:10:04 +0000

Before the introduction of profile READMEs in 2020, GitHub merely showcased public repositories and activities on your GitHub profile.

But with profile READMEs, you can do so much more. It’s now possible to turn your GitHub profile into something of a portfolio where recruiters can visit to learn more about you and your work. Make sure you present yourself as well as you can. Your profile should showcase your best work, favorite tools and programming languages, and whatever else makes you stand out.

This tutorial will teach you how to create a GitHub Profile README using a GitHub Profile README Generator.

How to create a GitHub profile README

To get started, you need to create a new repository. Navigate to the top right corner of your GitHub profile and click on the plus icon.

The new repository must have the same name as your GitHub username. Your username is the name on the left, just beside the space GitHub provides for you to fill in the name of your new repository. After entering the username, you’ll know you got it right when a confirmation message below the username bar states that the new repository is a special repository.

Then tick Add a README file and click Create repository.

After creating the repository, go back to your GitHub profile. The new README will be at the top of your profile, like the image below.

Click the tiny pencil icon on the far right to edit your README file. Highlight and delete the content on the README. Then open the GitHub Profile README Generator. Fill and tick all the relevant sections. You can even look at other GitHub profiles for inspiration.

Note that in the Add-ons section of the GitHub Profile README Generator, you have to tick the one that applies to you from the last three options, as in the image below. Ticking one of those adds a blog post section to your GitHub profile. This will allow you to add a blog post workflow to your GitHub profile later in this tutorial.

When you’ve filled and ticked all the relevant sections, click Generate README at the bottom of the page. The top of the page that opens will look like the image below.

You can click preview to see what your GitHub profile will look like. The point is to check if you’re satisfied with how it looks and all the information you entered. If you’re not satisfied, click back to edit to go back to the GitHub Profile README Generator. But if you’re satisfied, click copy-markdown to copy everything and then paste it directly into your README on GitHub. Scroll down and click Commit changes at the bottom of the page. Your GitHub profile will look like this:

For some people, this would be it. But if you look at the image above, you’d notice that nothing appears under the blog posts section. As a technical writer, you want to showcase your latest blog posts so that anyone who visits your profile can immediately access your work. Below is a tutorial on how to create a blog post workflow.

Creating GitHub blog posts workflow

Install and set up your VS Code.

After installing and setting up VS Code, click the extension button on the sidebar. Type "GitHub Repositories" into the search bar and install.

Then go to the command palette by clicking the settings button at the bottom left corner of your VS Code. The command palette is the first option on the menu. A search bar will open when you click command palette.

Enter "Remote Repositories" into the search bar and click Remote Repositories when it comes up in the drop-down. You'll get the same image below. Click Open Repository from GitHub.

At this point, you'll be prompted to authenticate your GitHub account if you’ve never logged in from VS Code before. After the authentication, your GitHub repositories will appear in the file explorer in VS Code.

Open the new repository you created at the beginning of this tutorial and create a folder titled .github inside. Inside .github, create another folder titled Workflows. Then create a yml file titled blog-post-workflow.yml inside Workflows. You can create the folders and the yml file at once in VS Code.

To do that, click on the icon in front of the arrow in the image above and enter .github/workflows/blog-post-workflow.yml in the name bar. Click here and copy the code you see in the image below.

Paste the code inside your yml file. Get the RSS feed URLs of your blog post sources and replace the feed list in the code above, indicated with an arrow. Visit this repository and scroll down to get the RSS feed URLs of some popular blogging platforms. Simply remove the links in the code above and paste yours in, separated by a comma if you have multiple sources. Don't remove the quotation marks.

After replacing the feed list, save and then commit the changes by clicking the source control icon, shown with an arrow in the image below. Write a commit message in the message bar before clicking the tick icon above the message bar.

After that, go to your GitHub profile and open the repository you just made changes to. To see your new workflow, click Actions in the bar just below where GitHub displays names of repositories, as seen on the left in the image below.

To open your new workflow, click on Latest blog post workflow. Then run by clicking Run workflow at the bottom right corner. It takes only a few seconds to finish. If successful, a message that says “Workflow run was successfully requested” will appear at the top of the page.

Check your GitHub profile for the lineup of your latest blog posts. By default, it will display five of your latest blog posts if you have that many.