Learn Github, Leaflet and Nightmare

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build Maps with React Leaflet

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Secure GitHub connections with SSH

Github Actions are an awesome tool from Github that allows us to automate tasks using code-based workflow configuration files. There's also a large marketplace that comes stocked with many useful tools that are ready out of the box.

But sometimes the options available don't completely solve our needs or maybe we're working with a new technology that's simply not available as an Action yet. Luckily, Github allows anyone to create their own Actions using common technologies like Javascript via Node.

We'll learn how to create a new Javascript-based Github Action running on Node. We'll first walk through a simple Hello World example, learn how to test it locally, version control it, use it in the wild, and move on to more advanced solutions that include using packages from npm!

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

Create a New Github Action to Automate Code Tasks with Javascript

Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out! 

GitHub Tips & Tricks

GitHub Actions are a powerful workflow tool that allows you to write and use custom code to execute workflows. It's like a serverless CI/CD platform built directly into GitHub. We have access to GitHub's registries, our own repos, multiple platforms (Mac, Windows, Linux), runtimes (VMs and Containers), and languages (JS, Rust, Go, etc) to perform any action we want. We can trigger workflows using GitHub's own events, our custom events, or even scheduled events like a cronjob.

GitHub Actions at Work

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

How to Write an Open Source JavaScript Library

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

How to Contribute to an Open Source Project on GitHub

npm is the package manager for JavaScript. Find, share, and reuse packages of code from hundreds of thousands of developers — and assemble them in powerful new ways.

npm packages almost always have a git repo tied to them for version control. We will start our package by initializing a git repository.

Add version control to npm packages using git init

Let's split our changes into separate commits. We'll be able to check over our changes before staging them all from the terminal. Then, we'll see the positive effect it has on our commit history.

Use git add --patch for better commit history and mitigating bugs

In this lesson we’ll talk about what GitHub is and how to sign up for a GitHub account so you can contribute to an open source project on GitHub.

Introduction to GitHub

GitHub adds a lot of great features on top of git repository hosting. We’ll take a look at some of these features including:

- How to create a repository and organization on GitHub
- How to explore and find projects on GitHub
- About GitHub gists
- Searching pull requests and issues on GitHub

Exploring GitHub

The basic unit of GitHub is a repository. This is where your code is stored and GitHub allows you to interact with others and with the code in great ways. In this lesson we talk about Watching, Starting, and Forking a repository. We also cover GitHub issues and pull requests and various other stats about a GitHub repository.

Exploring a Repository

Let’s install the Git Source Control Management software so we can interact with repositories hosted on GitHub.

How to install Git SCM

Anytime you push code to GitHub, you must be authenticated so GitHub knows you are authorized to make changes. In this lesson we’ll learn how to authenticate with GitHub using SSH so we don’t have to enter our username and password each time we push code to GitHub.

How to authenticate with GitHub using SSH

When you find a bug in an open source project, you know exactly the change you want to make. Other times you just want to find a way to contribute. Either way, you’ll need to know how the project maintainers want to run the project and work with them to come up with an implementation for the fix/feature. And if you don't even know what project to start contributing to, check out [this blogpost](https://medium.com/@kentcdodds/what-open-source-project-should-i-contribute-to-7d50ecfe1cb4) for inspiration on how to identify a good project to contribute to.

Identifying How to Contribute to an Open Source Project on GitHub

You cannot push code to repositories that you don’t own or have sufficient permission to. So instead, you make your own copy of the repository by “forking” it. You are then free to make any changes you wish to your repository.

How to Fork and Clone a GitHub Repository

Before you start making your changes, you often need to set up your environment for the changes. This is where the repositories' contributing instructions come in really handy. In this lesson we’ll get our environment set up and ready for changes.

Setting up the project locally

Often when making a change, you want to verify your approach with the maintainer or ask them for help. In this lesson we’ll make a change and commit that WIP change. Then we’ll create a pull request requesting help from the project maintainer.

How to create a Pull Request on GitHub

It’s not often that you’ll get a Pull Request on GitHub just right the first time you try. You generally will iterate with the project maintainer on your solution before your PR gets merged. In this lesson, we’ll explore some of the tools that projects use to manage contributions to open source projects on GitHub.

How to Collaborate on a Pull Request on GitHub

Once you’ve made your code updates locally, all you need to do is commit those changes and push that commit to your Pull Request branch. In this lesson we’ll also talk about how to skip git hooks that may be included in the project when you just need help.

Topics

Instructors

Content Type

Free or Pro