teleren/devto huggingface dataset:
How to Undo a GIT Commit
Tags: commit, versioncontrol, git, undo
Published: 2021-09-26 15:19:42

---
title: How to Undo a GIT Commit
published: true
date: 2021-09-08 18:03:37 UTC
tags: commit,versioncontrol,git,undo
canonical_url: https://medium.com/@redin.gaetan/how-to-undo-a-git-commit-7942cdf6c211
---

#### Understand the basics of version control

![](https://cdn-images-1.medium.com/max/1024/1*mpoSqoZPwLdexOC6_SeODw.jpeg)

Hey, I’m sure I’m not in this case. You know you make your git add <files>and then your git commit -m "..." But oh no I forgot a file… Well rather than create a second commit, why not just undo the previous one and recreate it?

Here’s a git alias I use every day:

```
alias.undo=reset --soft HEAD^
```

Here’s how to create it:

```
git config --global alias.undo 'reset --soft HEAD^'
```

**Tips** : If you have already pushed your commit into your PR, you will have to use git push -f .

Thanks for reading.

How to undo a commit

Hey, I’m sure I’m not in this case. You know you make your git add <files>and then your git commit -m "..." But oh no I forgot a file… Well rather than create a second commit, why not just undo the previous one and recreate it?

Here’s a git alias I use every day:

```
alias.undo=reset --soft HEAD^
```

Here’s how to create it:

```
git config --global alias.undo 'reset --soft HEAD^'
```

**Tips** : If you have already pushed your commit into your PR, you will have to use git push -f .

Thanks for reading.

### Learn More

- [Install Jest for Angular](https://dev.to/gaetanrdn/jest-and-angular-install-fg3)
- [TypeScript Function Overloads](https://dev.to/gaetanrdn/typescript-function-overloads-2fbd-temp-slug-1069498)
- [Angular for everyone: All about it](https://link.medium.com/SXPQgRn7xjb)
Tic-Tac-Toe.py
Published: 2021-09-17 21:22:49

Try my childhood game I played in elementary with my classmates during class. This is a two player game. Play it with your friends or family. First run 'python3 file-path/tic-tac-toe.py' in the terminal. You will then be prompted to input 'x' or 'o' and press enter for whoever will go first. First player will input the corresponding number to the corresponding space and press enter. Then, the same action will be done by the next player. If the space is taken, the terminal will prompt you that space has been taken and will have to re-enter an authorized number. The game ends when either player has filled a column, row, or diagonal.

![Tic Tac Toe on terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vpwn8z2ad6j10s17bu5.png)

[Tic-Tac-Toe Repository] (https://github.com/taimankj/Tic_Tac_Toe)
HTML tags | s
Tags: html, tags, s
Published: 2021-09-20 06:24:14

It is used to **indicate a text that is no longer correct, accurate or relevant**, and that is usually rendered with a line through it.

**It is not suitable for indicating edits in a document**, that's what the `<del>` and `<ins>` elements exist for.

The presence of the `
` element is not advertised in most screen readers with the default settings. You can force your ad using the `content` property of CSS as well as the `::before` and `::after` pseudo-elements as follows:

```
s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}
```

Some screen reader users disable content ad to avoid excessive verbosity. So it is important not to abuse this technique, [avoiding using it whenever possible](https://www.tempertemper.net/blog/be-careful-with-strikethrough), except in situations where not knowing that there is a crossed-out content can adversely affect the understanding of the text.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s) | [Support](https://caniuse.com/mdn-html_elements_s)
Week 1/Google PM Specialization
Tags: management, projectmanager, googlecourse, coursera
Published: 2021-09-26 20:25:59

Hey all, 

Recently I've started the second course of Project Management specialization created by Google and titled : **Project Initiation : Starting a successful project**. I decided to post my notes here as a memo. 

#Week 1 : 

## Initiation phase of the project life cycle : 

Among Project Manager responsibilities during the project initiation phase we find:
1. Identify goals and resources based on initial discussion with stakeholders
2. Ask the right questions to stakeholders, perform research
3. Document the key component of the project.

Getting in the same page with the stakeholders, by clarifying the goals of the project, will save a lot of time and extra work for everyone throughout the project.
It's  a crucial phase, because it determines how well the goals will be met, and it ensures that the benefits will outweigh the cost of the project.

## Key component of project initiation : 

The key component to concider during the initiation phase are : 
![Project Key component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/813e7jjj23o9evj2pna2.png)

Once key components established, you need to create a project charter, the document that contain all project details to review with stakeholders in order to get their approval so you can start with the planning stage.

Next, I will write about cost-benefit analysis and its importance in project management.

Have a nice day all :)
Embedded  System
Published: 2021-09-26 22:04:57

What is an Embedded System?
     Embedded System is the integration of actuators, sensors and also intelligence with the support of a system to give a more versatile, robust output.
                         Microcontroller
A microcontroller is a chip that contains :
1. CPU
2. RAM
3. ROM
4. FLASH
 This chip functions as the brain of an embedded system. It is built in such a way that it can process a lot of activities together and give a robust output.
 We can use a microcontroller:
1. when Intelligence is required.
2. It is less expensive than all other components.
3. It breaks down complexity in embedded systems, e.t.c.
   When we do not use a microcontroller:
1. little or no intelligence.
2. Slow response, e.t.c.
  We have different examples of microcontrollers, the most common one we have today is the arduino. The Arduino is a multitasking microcontroller. It is designed not only for technicians but also for other people like artists. It is designed for hobbies. It is also used to create simple circuits.
  We have different types of Arduino, for example:
1. Arduino Uno
2. Arduino Mega
3. Arduino Nano
4. Arduino Micro e.t.c
      In the Arduino, we have different pins on it. The two types of pins we have are:
1. Digital pins/GPIO
2. Analogue pins
                          Digital pins/GPIO:
- General Purpose Input and Output.
-  Can be used as digital input or output.
-  Each pin is uniquely assignable.
-  "Analogue" (PWM) output are:3,5,6,9,10,11.
-  Analogue pins 0-5 can also be used as GPIO pins.
                                   Arduino shield
     Shields are the things that can connect up to your Arduino.
 
AbdulMalik Abdulazeez is 14 and an upcoming Embedded Systems Engineer at IQ Academy Bodija Ibadan. Kindly support my work [here](https://ko-fi.com/abdulazeezmalik201)

Edited by [Ahmidat Gbadegesin](https://linkedin.com/)
         
Ahmidat Gbadegesin is a School Admin 2 and Student Manager at [IQ Academy Ibadan.](https://iqacademyibadan.com)
Web Components Update
Published: 2021-09-26 23:55:25

##Work Done So Far
Throughout the weeks of understanding web components, there has been tons of new functions and coding techniques that were introduced to me since my last semester. We have started using our open-wc boilerplate to introduce our first project, creating a CTA Button. For the first week, our group has produced a not-so-pleasant-looking button, yet is the starting point into building something better. So far, our button has the functions of hovering, disabling, focusing, and activation, so far following all the necessary guidelines. HTML, CSS, and JS are the languages I have enjoyed learning and improving on so far this semester.

##Easy Parts
So far, the button has been pretty straight forward with functionality and being visually appealing. Being able to design in CSS with our button and give it the professional look and functions has been "easy enough" with the help of examples and in-class walkthroughs. Although, there has been some challenges.

##Difficulties
Some difficulties we have faced are mostly with GitHub, with the merging and pulling of different people's code. We have resolved most of our issues so far from talking in person with one another and getting our code on the same level. Other than that, the button project has been smooth.

##What I've learned
I have learned to closely follow examples and code walkthroughs in class, as well as trying to get as much of a head-start as you can. We have been given the opportunity to have our code reviewed and improved so much, by just working ahead. It is awesome to have a great instructor who sees hard-work being done and giving all students the opportunity to progress their learning and code skills by working ahead on assignments and projects.

Our Repo: https://github.com/TheKodingKrab/cta-button/tree/main/CEEK
What is REST
Published: 2021-09-27 02:54:05

REST is a term that’s referred to a lot in programming. So, what is REST? It stands for REpresentational State Transfer. Ok, huh? [REST is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other.](https://www.codecademy.com/articles/what-is-rest)

Still confused? Basically, it boils down to a fairly simple explanation, REST is a standardized way that web apps should structure and name their URLS. It [has gained a lot of popularity in recent years due to its simplicity and scalability.] (https://www.freecodecamp.org/news/benefits-of-rest/) 

Ok, but maybe this concept's still a little hazy. Totally understandable. There are 4 basic HTTP verbs that are used to interact with resources.

`www.mysite.com` (example site)
`www.mysite.com/results` (results is my resource in this example)

**1) GET**- retrieves the resources and displays the result 
`www.mysite.com/results` (all results)
`www.mysite.com/results/1` (single result retrieved by ID)

**2) POST**- creates a new resource 

**3) PUT**- updates a single resource by ID

**4) DELETE**- deletes a single resource by ID

The below [image](https://miro.medium.com/max/1494/1*LraiNuIhwGGVb9nLmvuAIA.png) explains the HTTP methods and each CRUD action (Create, Read, Update and Destroy) well. 

![1-LraiNuIhwGGVb9nLmvuAIA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz2tldq8h3elpqb7gvel.png)
 
 
By using RESTful conventions it makes things clear and predictable. Thanks for reading!
Progress Update: Button Web Component
Published: 2021-09-27 01:52:41

Since starting the development of a call-to-action (CTA) button for IST 402, I have encountered quite a few challenges while learning a lot about open web components and LitElement. My partner and I chose to develop a CTA button modeled after a circular button on an e-commerce clothing site, which would act as a building block for learning about atomic web design. 

#### Progress
Thus far, my partner and I have created the button component itself, linked it, and have completed a lot of the responsive CSS behavior for the button itself. This includes resizing the button when different text is inserted into it, as well as changes in state when it is hovered over and focused on. We plan to also create behavior for "active" and "disabled" states, and are currently working on these. In addition, we've added optional icon support that features conditional rendering, allowing for the creation and removal of an icon in our button from the "inspect" tab of a browser. We have began working on our button's dark mode behavior as well, designing a way for dark mode to be initiated within the button's tag. 

> Here is the repository that exhibits our progress thus far: [circle-button-ad Repository] (https://github.com/3B4B/circle-button-ad)

#### Challenges  
Building a responsive, reusable circular button is hard. As the lead developer in my partner team, I learned this very quickly and figured out my knowledge of CSS was *not great* almost immediately. That said, lots of browsing CSS on overly-specific sites has led to me learning a lot more about it than I assumed I would when starting this button. I can proudly say I know more about styling a button than I did when I started this assignment.
As web components are something I've never extensively worked with until now, this also presented a learning curve. LitElement seemed intuitive when I was using a hello-world boilerplate, but getting familiar with its inner workings took more time than I'd like to admit. This isn't a shortcoming of the structure so much as it is my lack of experience with it. As I've continued to work in the directory structure that our web component is set up, I've become more familiar with it and feel that my understanding of our button has gotten much better. For instance, learning how the demo folder's index.html file interacts with my JavaScript file in my src folder has allowed me to vastly improve the way I visually test the functionality of our button--and increase its customizability.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 63
Tags: php, javascript, webdev, tutorial
Published: 2021-09-27 03:30:48

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.


In this video,we will be Making our first ajax call
{% youtube mIKK5mm1E94 %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Alexander Zingman talks on Agro Deal
Published: 2021-09-27 05:28:56

Alexander Zingman, Zimbabwe’s honorary ambassador, said the $ 58 million agreement between the two countries would transform Zimbabwe’s agriculture. The first batch of high-tech farms has been set up in the Valley, including 20 July, including 100 tractors and 52 farmers, while it is expected in December.

Alexander Zingman said, “This agreement brings the knowledge of Belarus to Zimbabwe’s agriculture and engineering.

Read more here :  https://www.tmcnet.com/usubmit/-alexander-zingman-says-belarus-agriculture-deal-will-boost-/2020/06/25/9174623.htm
JS Boilerplates Comparison
Published: 2021-09-30 00:37:25

Here, I will discuss a set of four boilerplates, created for one each of the following JavaScript libraries: React, Angular, Vue.js, and StencilJS. A boilerplate, for those who don't know, is a basic template that can be used to build a project from.

My process for finding my Angular boilerplate was using the web to look for one that is hosted on GitHub. Unlike looking for Vue.js or especially React boilerplates, there is no _de facto_ standard boilerplate available, but rather several smaller user-generated boilerplates which do not guarantee that they work well. The installation was straightforward, which involved installing dependencies using npm, which I didn't expect to take as long as it actually did considering how stripped-down the end boilerplate is.

The React boiler chosen was created by Max Stoiber, and is by far the most popular React boiler on GitHub. It's individual components are divvied into their own files and folders all contained within the app/components folder. The components are easy to follow.

The StencilJS boiler is a Storybook boiler that had an absurd number of vulnerabilities that had to be audited when installing npm. It is very barebones with few in the way of interactive components.

The Vue.js boiler is the Vue CLI as provided by vuejs.org. required running `npm run build` followed by `serve -s dist` to start up as opposed to `npm start` with Angular, React, and Stencil. It is very simple with a handful of links and text, and the components are quite simple.

For me, the React boilerplate had the most to work with, the most straight-forward code, and had by far the most hassle-free setup.

The link to our cloned boilerplates is here: https://github.com/Viable-Slime/BoilerPlate
Animation In Flutter : AnimatedAlign
Tags: flutter, dart, animation, programming
Published: 2021-09-28 06:27:08

* As a developer, animation becomes an important part of your app development workflow. To make your app memorable, you might want to create cool animations in your application.
* Animation makes a huge difference in user engagement. It is a powerful tool for grabbing user's attention and making the app's UI more friendly to use.
* Animation is the process of creating a visual illusion of motion, with the help of elements such as images or videos. It is such a wonderful technique that allows you to convey your message with emotion and feeling.
* Animation is one of the integral parts that make Flutter such a powerful framework. It helps us to create apps that not only look fantastic but feel natural and seamless as well.
* In this series, I'm going to explain different in-built animation widgets like AnimatedAlign, AnimatedContainer, AnimatedOpacity, AnimatedWidget, AnimatedModalBarrier, etc.
* In this article, I've explained the AnimatedAlign widget. Which is used to animate the position.

Read Full Article [Here](https://dhruvnakum.xyz/animation-in-flutter-animatedalign)
Creating a reusable layout in Next.js
Tags: nextjs, react
Published: 2021-09-28 10:46:43

Yesterday we [added a menu to our Next.js application](https://daily-dev-tips.com/posts/retrieving-the-primary-wordpress-menu-in-nextjs/). However, this was hardcoded on one page.

Today we'll take a look at how we can introduce a layout component to have a shared layout for our menu on each page.

## Creating the layout component

Create a file called `layout.js` in the `components` folder.

This file will act as the main layout. In our case, it will render the header and the children for each page.

```js
import Header from './Header';

export default function Layout({children, menu}) {
  return (
    <>
      <Header menuItems={menu} />
      <main>{children}</main>
    </>
  );
}
```

The children are passed through our main page, the `_app.js`, and we will pass the `menu` variable, so we'll have a look at how that works next.

## Retrieving the menu items

Before we go there, let's see how we can retrieve the menu items in one place instead of doing it per page.

For this, we need to open the `_app.js` file. Here we can add a function called `getInitialProps`.

This function can be used to retrieve the menu and eventually pass it to our layout.

```js
import {getPrimaryMenu} from '../lib/api';

MyApp.getInitialProps = async () => {
  const menuItems = await getPrimaryMenu();
  return {menuItems};
};
```

## Passing items to the layout component

Let's see how we can now make sure the layout is used everywhere and pass the menu items.

Let's first add the layout to our `_app.js` file.

```js
import Layout from '../components/Layout';

function MyApp({Component, pageProps}) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}
```

To access the menu items, we have to add them to the `MyApp` function.

```js
function MyApp({Component, pageProps, menuItems}) {
  return (
    <Layout menu={menuItems}>
      <Component {...pageProps} />
    </Layout>
  );
}
```

And with this, we have a fully functional universal layout.

- `_app` loads the menu and passes it to our layout component
- `layout` works as the main layout and renders the header

If we now run our application, we can see the menu work on all pages automatically.

![Creating a reusable layout in Next.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1632208147971/Lwx9qRv_b.gif)

You can find the complete code on [GitHub](https://github.com/rebelchris/next-tailwind/tree/layout).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Frontend Mentor: 3-Column Preview Card Component
Tags: css, html, webdev, codenewbie
Published: 2021-09-28 12:20:55

Frontend Mentor is one of the popular platforms for improving your frontend development skills. This website has frontend challenges for a developer who is given JPEG design files for mobile & desktop layouts.

This challenge is category-wise for Newbie to Guru sort options. This completes this challenge we have to use only HTML and CSS. Also in this challenge, they provide us a starter file with images and a color list. This is fully responsive for mobile views as well as tables views.



Make it yours now by using it, downloading it, and please share it. we will design more elements for you. Also, we are submitting this repository on Github.

[Source Code](https://w3hubs.com/frontend-mentor-3-column-preview-card-component/)
Functional Programming inside OOP? It’s possible with Python
Tags: python, community, conference, talk
Published: 2021-09-28 14:30:59

I'm sharing my [EuroPython 2021 talk](https://ep2021.europython.eu/talks/5SQrJC4-functional-programming-inside-oop-its-possible-with-python/) today. 

Please enjoy!

{% youtube 43yNp4D2UKo %}