cassidoo.co

My personal website, version 5! Build from scratch using the awesome power of pure HTML, CSS, and JS, baby.

How it's built

The Fetch API

I really liked using the Fetch API to populate the content of the site in version 4. So, I did it again!

I made a couple easily editable JSON files to make maintaining information about me and what I'm doing super simple. You can check those out for yourself in the contents folder. To get them into the HTML, I pulled the information from them with fetch. Fun fact, Safari and fetch don't get along. So, I used GitHub's handy fetch polyfill project to fix the holes in that. There was so much debugging, it was like the aftermath of a real safari with no bug spray.

Expanding content

I originally had all of the content of the site exposed immediately, and changed that for 2 reasons:

The loading message was kind of ugly and gross to have showing first thing
That's a lot of scrolling for small screens

So, it had to be expanded. This part was actually pretty simple. The classList DOM property already has a built-in function called toggle, so I just toggled a CSS class to make the content display.

Less

Okay, so I didn't really use pure CSS, technically. Less really saved my butt when it came to nesting CSS classes and using mixins to avoid the rewriting of a lot of properties of repeating sections. And color variables are so nice.

The Design

I really backed off on the crazy designs for this version of the site. I wanted something simple, techy, and understandable. And fast-loading, of course.

So, as I was just messing with things in vim, I realized, "Wow, my vim setup is beautiful" and I copied myself. Found some cool monospace webfonts, picked some nice accent colors from my terminal config, and voila. A terminally-ill site ("ill" meaning "sick" or "totally radical dude" like the kids say).

Future stuff

Right now I'm happy with the site, but touch events on iPhone (thanks again, Safari) are weird. You kind of have to told the toggle a bit. I want to make that smoother, and maybe add an Easter egg or two. :)

Getting Started with GitHub

👋 Welcome to GitHub Learning Lab's "Introduction to GitHub"

To get started, I’ll guide you through some important first steps in coding and collaborating on GitHub.

👇 This arrow means you can expand the window! Click on them throughout the course to find more information.

What is GitHub?

I'm glad you asked! Many people come to GitHub because they want to contribute to open source ^📖 projects, or they're invited by teammates or classmates who use it for their projects. Why do people use GitHub for these projects?

At its heart, GitHub is a collaboration platform.

From software to legal documents, you can count on GitHub to help you do your best work with the collaboration and security tools your team needs. With GitHub, you can keep projects completely private, invite the world to collaborate, and streamline every step of your project.

GitHub is also a powerful version control tool.

GitHub uses Git ^📖, the most popular open source version control software, to track every contribution and contributor ^📖 to your project--so you know exactly where every line of code came from.

GitHub helps people do much more.

GitHub is used to build some of the most advanced technologies in the world. Whether you're visualizing data or building a new game, there's a whole community and set of tools on GitHub that can get you to the next step. This course starts with the basics, but we'll dig into the rest later!

📺 Video: What is GitHub?

Exploring a GitHub repository

📺 Video: Exploring a repository

More features

The video covered some of the most commonly-used features. Here are a few other items you can find in GitHub repositories:

Project boards: Create Kanban-style task tracking board within GitHub
Wiki: Create and store relevant project documentation
Insights: View a drop-down menu that contains links to analytics tools for your repository including:
- Pulse: Find information about the work that has been completed and the work that’s in-progress in this project dashboard
- Graphs: Graphs provide a more granular view of the repository activity including who contributed to the repository, who forked it, and when they completed the work

Special Files

In the video you learned about a special file called the README.md. Here are a few other special files you can add to your repositories:

CONTRIBUTING.md: The CONTRIBUTING.md is used to describe the process for contributing to the repository. A link to the CONTRIBUTING.md file is shown anytime someone creates a new issue or pull request.
ISSUE_TEMPLATE.md: The ISSUE_TEMPLATE.md is another file you can use to pre-populate the body of an issue. For example, if you always need the same types of information for bug reports, include it in the issue template, and every new issue will be opened with your recommended starter text.

Using issues

This is an issue ^📖: a place where you can have conversations about bugs in your code, code review, and just about anything else.

Issue titles are like email subject lines. They tell your collaborators what the issue is about at a glance. For example, the title of this issue is Getting Started with GitHub.

Using GitHub Issues

Using GitHub issues

Issues are used to discuss ideas, enhancements, tasks, and bugs. They make collaboration easier by:

Providing everyone (even future team members) with the complete story in one place
Allowing you to cross-link to other issues and pull requests ^📖
Creating a single, comprehensive record of how and why you made certain decisions
Allowing you to easily pull the right people and teams into a conversation with @-mentions

📺 Video: Using issues

Managing notifications

📺 Video: Watching, notifications, stars, and explore

Once you've commented on an issue or pull request, you'll start receiving email notifications when there's activity in the thread.

How to silence or unmute specific conversations

Go to the issue or pull request
Under "Notifications", click the Unsubscribe button on the right to silence notifications or Subscribe to unmute them

You'll see a short description that explains your current notification status.

How to customize notifications in Settings

Click your profile icon
Click Settings
Click Notifications from the menu on the left and adjust your notification preferences

Repository notification options

Watch: You'll receive a notification when a new issue, pull request or comment is posted, and when an issue is closed or a pull request is merged
Not watching: You'll no longer receive notifications unless you're @-mentioned
Ignore: You'll no longer receive any notifications from the repository

How to review notifications for the repositories you're watching

Click your profile icon
Click Settings
Click Notification from the menu on the left
Click on the repositories you’re watching link
Select the Watching tab
Click the Unwatch button to disable notifications, or Watch to enable them

malli7622 / github-slideshow Goto Github PK

github-slideshow's Introduction

How it's built

The Fetch API

Expanding content

Less

The Design

Future stuff

github-slideshow's People

Contributors

Watchers

github-slideshow's Issues