teleren/devto huggingface dataset:
Cómo deshacer un commit erroneo
Tags: git, codenewbie, productivity, programming
Published: 2020-11-15 20:01:18

Es muy posible que hayas querido deshacer un commit en tu proyecto porque pusheaste algo que no deberías... Tranquilo, Git permite deshacerlo todo, así que respira y mira los siguientes comandos.

## Deshacer el último commit no pusheado
Es muy posible que hayas hecho un commit en el que has añadido varios archivos, y alguno de ellos no corresponde al commit que intentas subir. Hay dos formas de deshacer este commit que está en local, en tu equipo, depende de si quieres o no mantener los cambios en los ficheros:

Si quieres mantenerlos, lanza el siguiente comando:
```
git reset --soft HEAD~1
```
El comando git reset hace que la rama actual retroceda a la revisión que le indicamos. Con el --soft le indicamos que queremos mantener los cambios que habíamos hecho en ese commit. En este caso le decimos HEAD~1 para volver a la versión inmediatamente anterior a la que estamos ahora. La de antes de hacer el commit.

Si no quieres mantener los cambios, lanza el siguiente comando:
```
git reset --hard HEAD~1
```
Al cambiar el --soft por el --hard le decimos a Git que queremos volver a la versión anterior de código sin guardar los cambios del commit que queremos revertir. Esto es como si no hubiéramos hecho nada, así que piénsalo bien antes de usarlo.

## Hacer cambios sobre un commit no pusheado
Tal vez, quieres hacer unos cambios mínimos sobre el commit que acabas de hacer antes de publicarlo.

Por ejemplo, si quieres cambiar el mensaje del commit:
```
git commit --amend -m "Mensaje correcto"
```
Si lo que quieres es añadir un fichero más, porque lo acabas de editar o porque no lo habías añadido y corresponde a ese commit, debes lanzar el siguiente comando:
```
git add path/of/the/file
git commit --amend -m "Mensaje para el commit"
```
Al añadir --amend al comando git commit hacemos ediciones sobre el últimos commit, **siempre y cuando aún no esté pusheado (publicado)**.

## Deshacer el último commit que hemos publicado
En esta ocasión, no solo has hecho el commit, si no que has ejecutado el comando git push y tu error está visible para todos los puedan ver ese repositorio. En este caso, solo tienes que lanzar el comando:
```
git revert ID_COMMIT
```
Esto creará un commit con el código previo al commit que le indicas, de este modo habrás deshecho todos los cambios del commit indicado.

Además al hacerlo así, todos los cambios quedan en Git, incluida la rama que estás revirtiendo, por si te arrepientes de haber revertido los cambios.
S3 redirect to another domain and preserving Query String
Tags: aws, s3
Published: 2020-11-15 20:00:21

One of our clients has Microsites transferred to independent domains. The Microsite URL is like www.rewards.com/loyalty1 and it’s moved to www.loyalty1.com. The hosting of both the sites are in AWS S3 with Cloudfront. 

This is permanent change, and we all know that it should be 301 permanent redirect. As you see in this [post](https://dev.to/imewish/url-redirects-with-aws-s3-and-cloudfront-96a), we have to update the Redirect rules in S3. The client has configured the rules, but they have old campaigns with UTM values referring to the earlier domain. As per S3 redirect rules, the sites are redirecting to new domain, but it does not preserve the query strings. 

I have noticed two issues, 
* When I checked through browser developer tools, two round-trips happening. First, https://www.rewards.com/loyalty1?utm_source=fall2020 to http://www.loyalty1.com and then redirects to https://www.loyalty1.com
* UTM values in the query strings are missing.

Referring the AWS [documentation](https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html), noticed an element we can add to the rules. `Protocol`, this can be `http`, `https` or `none`. This will force the redirects to the protocol configured. This element is missing in the rules, so one other round-trip.

The issue of losing the campaign query strings during the redirect is because of the element `ReplaceKeyWith`. There is an excellent discussion at [stackoverflow](https://stackoverflow.com/questions/30775068/amazon-s3-redirect-rule-preserve-query-params). So use `ReplaceKeyPrefixWith`.

Finally, following is the rule we configured,
```
{
    {
        "Condition": {
            "KeyPrefixEquals": "loyalty1"
        },
        "Redirect": {
            "HostName": "loyalty1.com",
            "HttpRedirectCode": "301",
            "Protocol": "https",
            "ReplaceKeyPrefixWith": ""
        }
    }
}
```
This is redirecting to the new domain, but still there is one issue. The condition check is case sensitive. I don’t see any regex references in the documentation for redirect rules. Anyone has an alternate solution for this?
Just a little trick for debugging
Tags: javascript, typescript
Published: 2020-11-15 19:48:34

---
title: Just a little trick for debugging
published: true
tags: javascript, typescript 
//cover_image: https://direct_url_to_image.jpg
---

```JavaSript
// instead of
console.log('someVar', someVar);

// I now often just do this:
console.log({someVar});
console.log({someVar, someOtherVar});
```


Might not be a new idea to some of you while others will frown upon using `console.log` at all. I still like to share this neat little "trick" to label my variables when logging.
How to create a README.md for your Github profile
Tags: github, watercooler
Published: 2020-11-15 19:40:27

The other day I came across a Github profile with a big flashy username/README.md on the profile screen. I had no idea this is possible, so I checked how to do it and now I have one, too. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qbpllgfdbofx2h41efv1.png)

## How to create the profile README.md

To create the profile readme, simply create a repository with the same name as your username. You will be greeted immediately with this message:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9mop5bsa31kuvkv9jrf7.png)

## How to edit the profile README.md

Go to the profile and start editing the README. It works like with any other README.md on Github. To use images and gifs, upload them to your *secret* repository and reference them in the README.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fqzalovdhd2nwum3j7uf.png)

That's it. Have a great start of the week! :unicorn:
CSS Selectors: A Primer
Tags: css, webdev, html, design
Published: 2020-11-15 19:36:30

## CSS Selectors
CSS or Cascading Style Sheets is used to style HTML elements.
Element styling typically involves: <br/>
* Selecting the element
* Applying the specific styles.

A Typical example of an HTML element could be: <br/>

```html
<h1> hello </h1>
```
Here the h1 is an HTML element. 
Now we need to select this specific element in our CSS file, this would be done by using 
a selector.

## A simple selector
The simplest CSS selector could be, an Element selector.<br/> 
```css
h1{
color: red;
}
```
The above is an example of an element selector, it would do exactly what its name says, select all specified elements on the page and apply the said styles,in this case it would select all h1 elements and make it red.

## Let's get more specific!
Element selectors are good, but we may not need to apply the same styles to all instances of the selected element on the page,
i.e. All h1 elements may not be red! <br/>
There could be situations when only some h1 elements need to be red, here we use more specific Selectors.

## Class selectors
A class selector looks like this: <br/>
```css
.myColoredTag{
color: red;
}
```
We apply a class to an HTML element as: <br/>
```html
<h1 class="myColoredTag"> hello </h1>
```
In this case, the same set of styles would be applied to all the elements having the same class name.
This could be considered as one of the most used tags, as it can later help you to use various CSS frameworks, example: bootstrap and apply framework specific styles.

## ID Selectors
An ID selector looks like this: <br/>

```css
#myColoredTag{
color: red;
}
```
We can apply an ID to an HTML element as: <br/>

```html
<h1 id="myColoredTag"> hello </h1>

```
Each page can have only one element with same id, an id is thus unique.
5 good reason for choosing Kubernetes
Tags: devops, kubernetes, docker, cloud
Published: 2020-11-15 19:29:20

**Kubernetes** is the leading solution for container orchestration. In this article, we will learn 5 simple reasons for using it. These reasons are technical and strategic. In fact, we will learn that using Kubernetes we can not only solve technical problems but also helps in cloud transformation.
Choosing only 5 points was quite hard, considering all the benefits of using Kubernetes. Anyway, you could reply to this post and add your own motivation.

[Read the article for learning more](https://towardsdatascience.com/5-reason-for-using-kubernetes-b7ade82eda90)
A user dev badge
Tags: markdown, github, devto, api
Published: 2020-11-15 19:18:37

Have you ever wanted to add a dev badge to your github homepage or personal website?

With [badgify-dev-to](https://github.com/alfredosalzillo/badgify-dev-to) you can!

```markdown
<-- replace {username} with your dev.to username -->
[![Dev to profile {username}](https://badgify-dev-to.alfredosalzillo.vercel.app/badges/user?username={username})](https://dev.to/{username})
```

[![Dev to profile alfredosalzillo](https://badgify-dev-to.alfredosalzillo.vercel.app/badges/user?username=alfredosalzillo)](https://dev.to/alfredosalzillo)

---
Visit the repository 
{% github alfredosalzillo/badgify-dev-to %}
Detect Network Failures When Using Fetch
from Aaron Bruce
Tags: network, fetch
Published: 2020-11-15 18:59:31

Awesome article from Bruce : [Detect Network Failures](https://medium.com/to-err-is-aaron/detect-network-failures-when-using-fetch-40a53d56e36)

Client Side Timeouts are not Optional

```js
try {
  const response = await Promise.race([
    fetch(request),
    new Promise((_, reject) => setTimeout(
      () => reject(new Error('Timeout'),
      10000
    )),
  ]);
} catch (e) {
  if (error.message === 'Timeout') {
    // retry
  } else {
    throw e; // rethrow other unexpected errors
  }
}
```

Fetch throws “Network request failed”

```js
try {
  const response = await Promise.race([
    fetch(request),
    new Promise((_, reject) => setTimeout(
      () => reject(new Error('Timeout'),
      10000
    )),
  ]);
} catch (e) {
  if (error.message === 'Timeout' 
    || error.message === 'Network request failed') {
    // retry
  } else {
    throw e; // rethrow other unexpected errors
  }
}
```
Fetch Resolves with an Empty Body

```js
let response;try {
  response = await Promise.race([
    fetch(request),
    new Promise((_, reject) => setTimeout(
      () => reject(new Error('Timeout'),
      10000
    )),
  ]);
} catch (e) {
  if (error.message === 'Timeout' 
    || error.message === 'Network request failed') {
    // retry
  } else {
    throw e; // rethrow other unexpected errors
  }
}try {
  const body = await response.json();
} catch (e) {
  // just retry, even if it's a PUT request
}
```
Sev to Dev: New Github Account
Tags: github, git, devjournal
Published: 2020-11-15 18:58:23

I have had the same Github account since I started learning to code in 2016. 

After weighing the pros and cons, I decided to create a new Github account. A few factors influenced my decision. 

1. Deleting repos is kind of a pain and time consuming if you have years of pointless repos and used to be bad at documenting ( lookin back, I'm appalled at myself lol. What IS all this stuff?!) 

2. My username was not really that professional and I was feeling a little silly giving people my handle. 

3. A fresh start is just nice sometimes and I'm ready to live my best life. 

My portfolio site will be a constant work in progress so being able to track changes is important to me as I go along. I also know that I will not be working alone forever and being able to work on a codebase with other people is a very BIG part of being a developer from what I've seen so learning these version control skills before the time to collaborate comes seems like the move. 

After I configured these environments, I took some time to refresh my knowledge of general terminal commands as well as git specific ones which I will review in a separate post.

The next step is going to be to design the damn thing so this will be my last post about version control for a while but we WILL be back shortly when I start to code my design:)
Testing Python with Mockito
Tags: python, testing
Published: 2020-11-15 18:17:22

![Quick example of a Python unit test using Mockito](https://dev-to-uploads.s3.amazonaws.com/i/9ech8nkkk6q4m1ipw78c.png)

Are you a recovering Java coder who now writes Python? Do you miss writing unit tests with Mockito?  I have good news for you! 

In a quick read, I introduce mockito-python, a Python implementation of the Java Mocking framework. Enjoy

https://nve.ventures/testing-python-with-mockito/
Object keys are stored in insertion order
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-11-15 18:00:56

```js
const obj = {
  name: "Human",
  age: 0,
  address: "Earth",
  profession: "Coder",
};

console.log(Object.keys(obj)); // name, age, address, profession
```

Objects maintain the order in which the keys were created.

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
What is your go-to place for looking for remote developer jobs? Why?
Tags: career, watercooler, discuss
Published: 2020-11-15 17:50:47

With an emphasis on *why?* ;)

What made you chose the website you are most frequently using?

Do you have any issues with your favorite website? Anything you would like to see added?

What alternatives did you try using and why you stopped using them?
[11] PHP and the Latest News from the Front Line
Tags: codenewbie, webdev, php, career
Published: 2020-11-15 17:37:33

Literally, the other day, I finished a university course that was called [Web and Game technologies basics](https://opetustarjontahaku.lab.fi/search.php?lang=en&term=Web%20ja%20peliteknologian%20perusteet#result-21260). It included a brief introduction to the PHP, MariaDB, Linux (Bash), and some server-side interactions as well.

To be honest, I had huge prejudices about PHP as a modern programming language. So, I was surprised when I heard what language was chosen for this course. For some reason, PHP always reminded me of [times](http://www.arngren.net/) when I tried to make simple sites while going to school in early 2000. Anyway, it turned out, that in some sense, PHP is really an obsolete language with a strange syntax. But, on the other hand, it still has a large amount of code written on it and remains in demand.

The general assignment on the course was an implementation of a website, with which the user can view the price catalog of a [local liquor store](https://www.alko.fi/en/). It was also necessary that the user can be able to filter the search results in a few different ways. It was a difficult enough assignment for a beginner like me, especially given that I haven’t made anything with PHP before.

To complete the assignment, I had to create a container on the school server. Install there the PHP support, PHPMyAdmin, and database ([MariaDB](https://mariadb.org/)) as well as the webserver ([Lighttpd](https://www.lighttpd.net/)). After that, I had to turn the given .csv file with the catalog into a database. Finally, when I had a working database with the right data, I could build the website using PHP. At last, I got [the result](https://old.create-react-app.com/Projects/PHP/), which meets most of the requirements, but nevertheless has certain flaws.

On the image below you can see an example of the interface.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u26ce37xp15wntpfn4tl.png)

***

[Original post 29.10.20 @ create-react-app.com](https://create-react-app.com/11-php/)

My Site https://proj.create-react-app.com/
GitHub https://github.com/villivald
How to make CSS Zigzag borders
Tags: css, html, webdev
Published: 2020-11-15 17:33:24

Hello Friends, today, we are creating a snippet based on How to make a Zigzag border using HTML and CSS. Here we will make a CSS zigzag vertical edge for the banner image. We often see websites using curved or different shaped frames to make their website look aesthetic and slightly different from the traditional website. Zigzag borders are often used for the banner image or the other sections like services, portfolios, blogs, etc.<a href="https://www.codingflicks.com/2020/11/how-to-make-css-zigzag-borders.html">Download the Source Code</a>
Advice to all newbie in coding.
Published: 2020-11-15 17:23:16

Few months ago I started coding because I was curious and amazed by how those tiny lines of codes can create such amazing stuffs .The journey has been amazing 🎊full of confusion especially at the beginning where I was faced by all  tech technologies especially starting has self taught developer.But if I had  to do it all again I would never do it differently.Learning curve was steep and amazing good all the way.
In that journey this is what I learned and  sharing it to a  beginner , who is self taught developer is a gift.
Lesson number one :always remember why you started coding .This can be source of the energy you  will need in one point or another.
2 Find a community which you can lean on  and some people you share common interest.

3 Start by free resources  and then move on to paid resources if you have to.

4Find your niche buddy . Coding is vast.Find your area of interest and become a nerd  in it🎀

5As a beginner or whichever level you are form good habits of coding because bad habits die hard

6 Know and Embrace the learning cycle because you will be learning a lot

7Indentify your learning style
 
8 Get comfortable with failures
Since in this field error messages are so often.

9 Buddy you don't have to know everything in coding because who does?Start small, learn each day and you will be surprised.

9 And my favourite is, Depth  over breadth. Taking time to learn one thing is better than learning bunch of tiny pieces .Self taught developers tend to get excited by all tech technologies but remember don't be a polymath but be a master of one move .
 
For today chew on that we shall talk soon⛄
Sev to Dev: My Journey Into Tech
Tags: devjournal, firstpost
Published: 2020-11-15 17:14:14

Hello! 
My name is Sev and I'm going to be building my portfolio site from scratch and documenting the process. 

First a little about me:
I went to a small private art college for music before dropping out and entering the retail/barista workforce. Thanks to my own natural curiosity and the freaking MIRACLE of online learning I started to teach myself to code on and off for the last couple of years. I managed to create a position at my current company (a small wine and spirits brand in San Francisco) that involves a little coding, content creation, and video and design work in addition to website admin, blogging, and online order fulfillment. I love the creative/tech aspects of the job. 

It's become increasingly clear to me that my skills are valuable and with a little focus, I know I can do something really cool.

My goals of documenting my journey:
1. Create portfolio that can showcase my many skillsets and projects.

2. Show my work and engage with community. I'd like to meet more creatives like me. 

3. Get better at articulating myself. I want to be able to confidently talk about what I know. And, as I'm sure you're aware of by now, writing isn't my thing. lol. Looking at this as an opportunity to stretch that muscle as well.

4. Either get a job that involves even more of the stuff I love to do or do freelance work.  

Feeling very excited for this endeavor. See you soon!
Important HTML tags (part 1) 👨🏻‍💻
Tags: html, tutorial, webdev
Published: 2020-11-15 17:02:45

Well, if you are here reading this article, it means that you are most probably interested in Web Development. Let me tell you that you’ve landed on the perfect web page, then! 👨🏻‍💻

## What is HTML and why do we need it?
HTML is a standard markup language used to build web pages. With HTML, you can define the structure of the web page.

This article will cover five important HTML tags that every new Developer in town should know. I will cover again five other tags shortly after. 

⚠️(UPDATE)⚠️- PART TWO is available [here](https://dev.to/johncornea/important-html-tags-part-2-m7i).

## 1️⃣ HTML `<picture>` tag
The HTML `<picture>` tag can contain one `<img>` tag and one or more `<source>` tags.
```
<picture>
    <img src="example.jpg" alt="logo">
    <source srcset="large_img.jpg" media="(min-width: 1024px)">
    <source srcset="small_img.jpg" media="(min-width: 512px)">
</picture>
```
This tag helps developers to display images for different screen sizes scenarios. By showing an alternative image version for smaller screens with smaller viewports. 

<img> tag serves as a fallback option in the case where none of the <source> elements are matching the viewport and also if the browser does not support it.

## 2️⃣ HTML `<video>` tag
This HTML tag allows us to embed a media player for video playback.
```
<video autoplay="" loop="" controls="" width="640" height="480">
    <source type="video/mp4" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
    <p>Have fun watching the video!</p>
</video>
```
First, you need to upload your video to a platform that you prefer.

Within the `<video>` tag, you can specify certain attributes, such as autoplay, loops, controls, height and width.

## 3️⃣ HTML `<progress>` tag
This HTML tag represents the completion progress of a task, you might know it under the name of “progress bar”.
```
<progress value="55" max="100"></progress>
```
It is important not to confuse the <progress tag> with the <meter> tag. The `<meter>` tag, does represent a scalar value within a known range.

## 4️⃣ HTML `<meter>` tag
As explained above, the <meter> tag is used to measure data within a known range. This can be achieved using the min and max values or with a percentage.
```
<!-- Measure data within a given range -->
<meter value="4" min="0" max="10">4 / 10</meter>
<!-- This also can be achieved with min and max values or with % -->
<meter value="0.2">20%</meter>
```

## 5️⃣ HTML `<map>` tag
This HTML tag allows us to define an image map (an image with a clickable link area). 

What you have to do is to define the X and Y coordinates in the elements within the `<map>` tag.
```
<img src="countries.png" width="600" height="400" alt="Countries" usemap="#countries">

<map name="countriesmap">
    <area shape="circle" coords="15,52,92" href="romania.html" alt="Romania">
    <area shape="circle" coords="60,48,5" href="italy.html" alt="Italy">
    <area shape="circle" coords="135,48,12" href="israel.html" alt="Israel">
</map>
```
Week 2  Update !!!
Tags: javascript, react, redux, css
Published: 2020-11-15 16:40:35

Hi Community, this is my second blog on this platform and my previous [**Blog**](https://dev.to/amansharma/week-1-documenting-the-learning-journey-37n7).

After Learning HTML CSS in the first week of mentorship by [**Deepak**](https://dev.to/dipakkr) sir, I have reached the second week of mentorship with high Enthu.
This week I have studied the **Jest** (Testing Framework of JS) and the **Vanilla Javascript**. 
From my learning, I have made the project in JavaScript.
* [StopWatch](https://amansharma4.github.io/stopwatch/) --> [Code](https://github.com/amansharma4/stopwatch)

[freeCodeCamp](https://www.freecodecamp.org/) and [W3Schools](https://www.w3schools.com/) help me in rectifying the error I faced.
# Explore More on !!!
Connect on [LinkedIn](https://www.linkedin.com/in/amansharma01/) and Follow on [Twitter](https://twitter.com/amansharma0011)