Brain Wilkinson

Brain Wilkinson

1603832220

Exploring the New GitHub CLI

Github just released it’s own Command-Line Interface (CLI) so developers can now do everyday GitHub tasks from the terminal. Yay! This means no more squiggling around the UI. With this new CLI, you can now view, create, clone, or fork repositories, create, view, and edit gists, you can also work with pull requests and issues right from the terminal.

Isn’t that awesome?

The motive behind this CLI is to move all of the developer workflow right to the terminal where we were already working with git. Now you might ask, _will it replace the git CLI? _The answer is no. The CLI is meant to integrate well with git, which means your trusty old git isn’t going anywhere. Rather this was one of the motives behind the creation of the GitHub CLI, bringing all your tools to one place to avoid context switching.

_But wait! doesn’t something like this already exists? Yes, yes it does. A GitHub wrapper called _hubwhich is an open-source extension to command-line git, maintained by a GitHub employee, that lets you do everyday GitHub tasks without ever leaving the terminal. Sounds pretty familiar eh? Hub already offers a lot of the things that the Github CLI brings to the table.

So why is GitHub Reinventing the Wheel?

The GitHub team mentions that the primary reason they didn’t build on top of hub was that they didn’t want to wrestle with the 10 odd years of design decisions that hub went through which weren’t really focused on GitHub workflows. They also_ didn’t want to change hub significantly_ because that might upset the already established user base which used hub on a daily basis. They addressed this in a lot more detail in their docs.

So enough talk, let’s see how it actually works. By the end of this article, you should be well on your way to integrating the GitHub CLI in your workflow.

Installation

The first step is installing the CLI. To do that simply follow the install instructions for your operating system given on their official page

#github #cli #cli-tools #open-source #terminal #shell #git #git-workflow

What is GEEK

Buddha Community

Exploring the New GitHub CLI
Brain Wilkinson

Brain Wilkinson

1603832220

Exploring the New GitHub CLI

Github just released it’s own Command-Line Interface (CLI) so developers can now do everyday GitHub tasks from the terminal. Yay! This means no more squiggling around the UI. With this new CLI, you can now view, create, clone, or fork repositories, create, view, and edit gists, you can also work with pull requests and issues right from the terminal.

Isn’t that awesome?

The motive behind this CLI is to move all of the developer workflow right to the terminal where we were already working with git. Now you might ask, _will it replace the git CLI? _The answer is no. The CLI is meant to integrate well with git, which means your trusty old git isn’t going anywhere. Rather this was one of the motives behind the creation of the GitHub CLI, bringing all your tools to one place to avoid context switching.

_But wait! doesn’t something like this already exists? Yes, yes it does. A GitHub wrapper called _hubwhich is an open-source extension to command-line git, maintained by a GitHub employee, that lets you do everyday GitHub tasks without ever leaving the terminal. Sounds pretty familiar eh? Hub already offers a lot of the things that the Github CLI brings to the table.

So why is GitHub Reinventing the Wheel?

The GitHub team mentions that the primary reason they didn’t build on top of hub was that they didn’t want to wrestle with the 10 odd years of design decisions that hub went through which weren’t really focused on GitHub workflows. They also_ didn’t want to change hub significantly_ because that might upset the already established user base which used hub on a daily basis. They addressed this in a lot more detail in their docs.

So enough talk, let’s see how it actually works. By the end of this article, you should be well on your way to integrating the GitHub CLI in your workflow.

Installation

The first step is installing the CLI. To do that simply follow the install instructions for your operating system given on their official page

#github #cli #cli-tools #open-source #terminal #shell #git #git-workflow

Mireille Von

Mireille Von

1625781780

Let's try Github CLI | Productivity | Tech Primers

This video covers the usage of command line interface v1.0.0 by Github

⏱ Chapter Timestamps:

0:00 - Introduction
0:40 - Installation of Github CLI
1:54 - Create new repository with gh
2:09 - Github auth login
7:37 - Create new Issue with gh
10:03 - Create new PR with gh
11:56 - Merge PR with gh

📌 Links

🔗 Github Link for example: https://github.com/TechPrimers/github-cli-example
🔗 Github CLI: https://cli.github.com/
🔗 Github CLI launched: https://github.blog/2020-09-17-github-cli-1-0-is-now-available/

📌 Related Videos

🔗 Github Package Registry: https://www.youtube.com/watch?v=Nm7m92sZZJA
🔗 Containers Primer: https://www.youtube.com/watch?v=yo2g_CZZWL4&list=PLTyWtrsGknYf_Oee7YOvom5Ev0F3-E2zB
🔗 Kubernetes Primer: https://www.youtube.com/playlist?list=PLTyWtrsGknYfanKF33E12LdJvl5q5PZGp
🔗 How to contribute to OpenSource (Github): https://youtu.be/LvkRaIKX1L8

💥 Join TechPrimers Slack Community: https://bit.ly/JoinTechPrimers
💥 Telegram: https://t.me/TechPrimers
💥 TechPrimer HindSight (Blog): https://medium.com/TechPrimers
💥 Website: http://techprimers.com
💥 Slack Community: https://techprimers.slack.com
💥 Twitter: https://twitter.com/TechPrimers
💥 Facebook: http://fb.me/TechPrimers
💥 GitHub: https://github.com/TechPrimers or https://techprimers.github.io/

🎬Video Editing: FCP

🔥 Disclaimer/Policy:
The content/views/opinions posted here are solely mine and the code samples created by me are open sourced.
You are free to use the code samples in Github after forking and you can modify it for your own use.
All the videos posted here are copyrighted. You cannot re-distribute videos on this channel in other channels or platforms.
#GithubCLI #Productivity #TechPrimers

#github #cli #github cli

Edison Stark

Edison Stark

1603861600

How to Compare Multiple GitHub Projects with Our GitHub Stats tool

If you have project code hosted on GitHub, chances are you might be interested in checking some numbers and stats such as stars, commits and pull requests.

You might also want to compare some similar projects in terms of the above mentioned stats, for whatever reasons that interest you.

We have the right tool for you: the simple and easy-to-use little tool called GitHub Stats.

Let’s dive right in to what we can get out of it.

Getting started

This interactive tool is really easy to use. Follow the three steps below and you’ll get what you want in real-time:

1. Head to the GitHub repo of the tool

2. Enter as many projects as you need to check on

3. Hit the Update button beside each metric

In this article we are going to compare three most popular machine learning projects for you.

#github #tools #github-statistics-react #github-stats-tool #compare-github-projects #github-projects #software-development #programming

Justen Hintz

Justen Hintz

1663559281

To-do List App with HTML, CSS and JavaScript

Learn how to create a to-do list app with local storage using HTML, CSS and JavaScript. Build a Todo list application with HTML, CSS and JavaScript. Learn the basics to JavaScript along with some more advanced features such as LocalStorage for saving data to the browser.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>To Do List With Local Storage</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div id="new-task">
        <input type="text" placeholder="Enter The Task Here..." />
        <button id="push">Add</button>
      </div>
      <div id="tasks"></div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #0b87ff;
}
.container {
  width: 90%;
  max-width: 34em;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
#new-task {
  position: relative;
  background-color: #ffffff;
  padding: 1.8em 1.25em;
  border-radius: 0.3em;
  box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
  display: grid;
  grid-template-columns: 9fr 3fr;
  gap: 1em;
}
#new-task input {
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  border: none;
  border-bottom: 2px solid #d1d3d4;
  padding: 0.8em 0.5em;
  color: #111111;
  font-weight: 500;
}
#new-task input:focus {
  outline: none;
  border-color: #0b87ff;
}
#new-task button {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 1em;
  background-color: #0b87ff;
  color: #ffffff;
  outline: none;
  border: none;
  border-radius: 0.3em;
  cursor: pointer;
}
#tasks {
  background-color: #ffffff;
  position: relative;
  padding: 1.8em 1.25em;
  margin-top: 3.8em;
  width: 100%;
  box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
  border-radius: 0.6em;
}
.task {
  background-color: #ffffff;
  padding: 0.3em 0.6em;
  margin-top: 0.6em;
  display: flex;
  align-items: center;
  border-bottom: 2px solid #d1d3d4;
  cursor: pointer;
}
.task span {
  font-family: "Poppins", sans-serif;
  font-size: 0.9em;
  font-weight: 400;
}
.task button {
  color: #ffffff;
  padding: 0.8em 0;
  width: 2.8em;
  border-radius: 0.3em;
  border: none;
  outline: none;
  cursor: pointer;
}
.delete {
  background-color: #fb3b3b;
}
.edit {
  background-color: #0b87ff;
  margin-left: auto;
  margin-right: 3em;
}
.completed {
  text-decoration: line-through;
}

Javascript:

//Initial References
const newTaskInput = document.querySelector("#new-task input");
const tasksDiv = document.querySelector("#tasks");
let deleteTasks, editTasks, tasks;
let updateNote = "";
let count;

//Function on window load
window.onload = () => {
  updateNote = "";
  count = Object.keys(localStorage).length;
  displayTasks();
};

//Function to Display The Tasks
const displayTasks = () => {
  if (Object.keys(localStorage).length > 0) {
    tasksDiv.style.display = "inline-block";
  } else {
    tasksDiv.style.display = "none";
  }

  //Clear the tasks
  tasksDiv.innerHTML = "";

  //Fetch All The Keys in local storage
  let tasks = Object.keys(localStorage);
  tasks = tasks.sort();

  for (let key of tasks) {
    let classValue = "";

    //Get all values
    let value = localStorage.getItem(key);
    let taskInnerDiv = document.createElement("div");
    taskInnerDiv.classList.add("task");
    taskInnerDiv.setAttribute("id", key);
    taskInnerDiv.innerHTML = `<span id="taskname">${key.split("_")[1]}</span>`;
    //localstorage would store boolean as string so we parse it to boolean back
    let editButton = document.createElement("button");
    editButton.classList.add("edit");
    editButton.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
    if (!JSON.parse(value)) {
      editButton.style.visibility = "visible";
    } else {
      editButton.style.visibility = "hidden";
      taskInnerDiv.classList.add("completed");
    }
    taskInnerDiv.appendChild(editButton);
    taskInnerDiv.innerHTML += `<button class="delete"><i class="fa-solid fa-trash"></i></button>`;
    tasksDiv.appendChild(taskInnerDiv);
  }

  //tasks completed
  tasks = document.querySelectorAll(".task");
  tasks.forEach((element, index) => {
    element.onclick = () => {
      //local storage update
      if (element.classList.contains("completed")) {
        updateStorage(element.id.split("_")[0], element.innerText, false);
      } else {
        updateStorage(element.id.split("_")[0], element.innerText, true);
      }
    };
  });

  //Edit Tasks
  editTasks = document.getElementsByClassName("edit");
  Array.from(editTasks).forEach((element, index) => {
    element.addEventListener("click", (e) => {
      //Stop propogation to outer elements (if removed when we click delete eventually rhw click will move to parent)
      e.stopPropagation();
      //disable other edit buttons when one task is being edited
      disableButtons(true);
      //update input value and remove div
      let parent = element.parentElement;
      newTaskInput.value = parent.querySelector("#taskname").innerText;
      //set updateNote to the task that is being edited
      updateNote = parent.id;
      //remove task
      parent.remove();
    });
  });

  //Delete Tasks
  deleteTasks = document.getElementsByClassName("delete");
  Array.from(deleteTasks).forEach((element, index) => {
    element.addEventListener("click", (e) => {
      e.stopPropagation();
      //Delete from local storage and remove div
      let parent = element.parentElement;
      removeTask(parent.id);
      parent.remove();
      count -= 1;
    });
  });
};

//Disable Edit Button
const disableButtons = (bool) => {
  let editButtons = document.getElementsByClassName("edit");
  Array.from(editButtons).forEach((element) => {
    element.disabled = bool;
  });
};

//Remove Task from local storage
const removeTask = (taskValue) => {
  localStorage.removeItem(taskValue);
  displayTasks();
};

//Add tasks to local storage
const updateStorage = (index, taskValue, completed) => {
  localStorage.setItem(`${index}_${taskValue}`, completed);
  displayTasks();
};

//Function To Add New Task
document.querySelector("#push").addEventListener("click", () => {
  //Enable the edit button
  disableButtons(false);
  if (newTaskInput.value.length == 0) {
    alert("Please Enter A Task");
  } else {
    //Store locally and display from local storage
    if (updateNote == "") {
      //new task
      updateStorage(count, newTaskInput.value, false);
    } else {
      //update task
      let existingCount = updateNote.split("_")[0];
      removeTask(updateNote);
      updateStorage(existingCount, newTaskInput.value, false);
      updateNote = "";
    }
    count += 1;
    newTaskInput.value = "";
  }
});

Related Videos

Build a Todo list app in HTML, CSS & JavaScript | JavaScript for Beginners tutorial

Build a Todo List App in HTML, CSS & JavaScript with LocalStorage | JavaScript for Beginners

To Do List using HTML CSS JavaScript | To Do List JavaScript

Create A Todo List App in HTML CSS & JavaScript | Todo App in JavaScript

#html #css #javascript

Jolie Reichert

Jolie Reichert

1595668020

Stay Safe on GitHub: Security Practices to Follow

GitHub is undoubtedly the largest and most popular social development platform in the world. According to its 2019 State of the Octoverse Report, GitHub is home to over 40 million, and the community keeps expanding every day.

As developers in this deeply interconnected community use open source code to build software, Github security should be a top priority. This is because extensive code re-use increases the risk of distributing vulnerabilities from one dependency or repository to another. As such, every contributor should focus on creating a secure development environment.

Here are eight security practices that GitHub users can follow to stay safe and protect their code:

Strengthen Access Controls

Implementing proper access control is one of the best practices for enhancing security, not only on GitHub but in every other environment where code security is imperative.

GitHub offers several options that users can employ to reduce the risk of improper exposure. But to start with, it is important to employ the least privilege model where users are only granted necessary permissions.

Here are some basic access control guidelines that you should follow:

  • Restrict the creation of repositories to prevent users from exposing organization information in public repositories.
  • Enable branch protection and status checks to ensure users can merge commits or manipulate branches safely.
  • Allow or disallow forking private repositories to ensure users do not expose or share organizational code with unauthorized parties.
  • Revoke access for all inactive users who are no longer part of the contributors.

#tutorial #github #access control #software security #repository management #github issues #source code analysis #github apps #github enterprise #git best practices