teleren/devto huggingface dataset:
Learn Solidity helping Santa Claus
Tags: blockchain, adventofcode, solidity, javascript
Published: 2021-12-01 15:52:08

Advent of Code is a yearly series of 25 puzzles that are released between the first and 25th of December. You might have heard of them, lot's of people do them – to have fun, to show off their speed, or to learn a new language.

We'll be going through these puzzles, doing them in Solidity (and JS) - https://github.com/ethsgo/aoc

The first puzzle came out just today, so it's not late to start following along. Here is what the solution for today looks like (not adding the code to this post itself to avoid spoilers - https://github.com/ethsgo/aoc/blob/main/contracts/_01.sol#L18).
How to Rename Local and Remote Git Branch
Tags: git, webdev, productivity, tutorial
Published: 2021-12-01 18:26:59

Have you ever wondered or come across a situation where you want to rename a Git branch? If yes then this article will help you with that. Earlier, I faced the same situation where I wanted to rename the git branch locally and on remote, and luckily I found that git allows us to rename the branch very easily, lets see how. 

I will share the solutions to rename the git branch locally and under the remote.

## Rename local git branch

If you are already in the local branch which you wanted to rename, you can hit this command.

```
git branch -m <new_name>
``` 

If you are under another branch and want to rename the branch then hit the below command.

``` 
git branch -m <old_name> <new_name>
``` 

Now check your current branch name by hitting 

``` 
git status 

or
 
git branch 
``` 

you will see the changes, isn’t it is so simple 😉

## Rename remote git branch

If your local branch is already pushed to a remote repository and you want to rename it and reset the upstream branch then this command will help you to rename it.

``` 
git push origin -u <new_name>

git push origin --delete <old_name>
``` 
Now if you want to check the changes then you can login to your GitHub or GitLab or whatever the git client portal you are using and see the changes there.

## Conclusion

Renaming a local Git Branch is just a matter of running a single “git branch -m” command. However, you can’t directly rename a remote branch as you need to push the renamed local branch to the remote repository and then delete the old branch from there.

> Hope you liked this article and found it useful, feel free to comment with your thoughts and opinions and stay connected with me here and on [Twitter](https://twitter.com/KodeWithChirag)🐦.
Introduction
Published: 2021-12-01 19:54:05

Creational patterns hide how instance of classes are constructed. Thereby enabling more independence and increasing flexibility in a system. In this series, we try to look at the most common creational patterns and their unique features.

To demonstrate the implementation of the creational patterns, we will use, as an example, what we have named as “The Design-pattern Cafe”. The Design-pattern Cafe is a fictitious Cafe based in Ethiopia. For each pattern,
we have devised a problem-scenario that could potentially be solved with the pattern.

All of the sample code used as examples can be found on GitHub at:
{% github dp-team/creationaldesignpatterns %}
What are Pet Tags and Details to include on them?
Published: 2021-12-02 05:53:28

Pet Tags are used to identify the pet's owner or the pet that is wearing it. The tags are usually made of plastic, cloth, metal, or paper. They are usually found on the pets' necks. They, like humans, are used to identify the owner and animal. Along with this, these can be used in cases of lost animals.
The pet tag is an identification tag that is worn by a pet on their collar or harness. The tag is made of plastic and has an identification number, which can be read when using an electronic scanner. The information contained in the pet tags may include:
-Owner information (name and address)
-Pet's name
-Veterinarian's phone number
-Microchip ID number
-ID number of rabies vaccination
-License/registration ID
[Pet tags](https://leashkingtags.com/) are used for the identification of pets. They are worn around the neck or on the collar of a pet. It is usually made out of metal, plastic, or paper. They have been used since the 1800s. The first pet tag was registered with the American Kennel Club in 1884. They are an important accessory for all pets. They can be used for identification purposes and to prevent theft.
They come in many shapes and sizes and can be engraved or printed with the pet's name, phone number, and microchip ID. Animal shelters use them to identify animals that are lost. Pet tags are a useful way to identify a pet. They have been around for a long time and have proven to be an effective way of identifying pets that are lost. The pet tag is a small metal plate with a name and address on it, usually attached to the collar or harness of the animal.
They can also be used as an identifier for lost pets. If someone finds a lost pet they will contact the owner if they can find out who the owner is by looking at their contact details on the tag. Sometimes people will make up stories to find out who owns their new stray pet, but this isn't recommended because it's illegal and committed by people that do not care about animals. These are typically worn for identification, but they can also be used to identify animals that are lost. They come in different shapes and sizes, but the most common shape is the flat metal tag that is often described as looking like a license plate.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm8rx3evklnbz33k2ouw.jpg)
Publish your site assets with the Netlify CLI
Tags: netlify, jamstack, cli, tools
Published: 2021-12-02 10:26:07

---
title: Publish your site assets with the Netlify CLI
published: true
description: Learn how the Netlify command line interface (CLI) can publish your web site assets to the Netlify hosting infrastructure for you with a single command.
tags: Netlify, Jamstack, CLI, Tools
cover_image: https://www.netlify.com/img/blog/og-cli-deploy.png
canonical_url: https://www.netlify.com/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december/
series: Netlify - a feature a day 2021
---

_Learn about [a different Netlify feature each day](https://www.netlify.com/blog/2021/12/01/highlighting-a-different-netlify-feature-each-day-in-december/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=cli-deploy) throughout December!
Here's one..._


Did you know that you can publish your sites to the web without leaving the comfort of your command line?

The open source [Netlify CLI](https://github.com/netlify/cli) includes lots of helpful features (expect to see learn more about that in upcoming post this month!) and deploying production or preview versions of your site can be done with the handy command: `netlify deploy`

> 💡 Install the Netlify CLI for all sorts of web development helpers and utilities with this command: `npm install -g netlify-cli`

The first time you run `netlify deploy` from a local project folder, it will give you the option of deploying to an existing site or creating a new site in a project team, and then deploy your specified folder to Netlify.

For added safety, the default target for a `netlify deploy` is a unique preview URL which the CLI helpful returns to you as a link to inspect and share. Ready to deploy to production? Then you’ll want to use the `prod` flag:

```
netlify deploy —-prod
```

More powerful deployment pipelines await you via [Netlify’s build infrastructure](https://www.netlify.com/products/build/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=cli-deploy), but this command is very useful for sending your assets to Netlify where we’ll publish them to the [global hosting infrastructure](https://www.netlify.com/products/edge/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=cli-deploy) for you.

Happy deploying!

## More information

- [Getting started with the Netlify CLI](https://docs.netlify.com/cli/get-started/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=cli-deploy)
- [Netlify CLI 2.0 rebuilt from the ground up](https://www.netlify.com/blog/2018/09/10/netlify-cli-2.0-now-in-beta/?utm_campaign=featdaily21&utm_source=devto&utm_medium=blog&utm_content=cli-deploy)
Free Bootstrap 5 Admin Dashboard Template - Dash UI
Tags: webdev, opensource, css, javascript
Published: 2021-12-03 08:08:09

Dash-UI is a [Bootstrap 5 Admin & Dashboard](https://dashui.codescandy.com/) Theme. Dash UI Kit a free and open source components and templates kit fully coded with Bootstrap 5.


Demo - [Dash UI](https://codescandy.com/dashui/index.html)

Support - [Join the Community](https://github.com/codescandy/Dash-UI/discussions)

## What's in the package

- 50+ Components
- **Bootstrap 5.1.3**
- HTML5 & SCSS
- **Gulp Based Workflow**
- 100% Responsive
- Authentication Pages
- **Collapsible Sidebar**
- Font Icons
- Google Fonts
- Developer [Docs](https://codescandy.com/dashui/docs/index.html)

## Pages

- [Project Dashboard](https://codescandy.com/dashui/index.html)
- [Profile](https://codescandy.com/dashui/pages/profile.html)
- [Account Settings](https://codescandy.com/dashui/pages/settings.html)
- [Billing](https://codescandy.com/dashui/pages/billing.html)
- [Pricing](https://codescandy.com/dashui/pages/pricing.html)
- Authentication Pages
 - [Sign In](https://codescandy.com/dashui/pages/sign-in.html)
 - [Sign Up](https://codescandy.com/dashui/pages/sign-up.html)
 - [Forgot Password](https://codescandy.com/dashui/pages/forget-password.html)

- 404 Error
- Menu Level
- Layout

**Thank you for reading.**
If you like this product, please support us by sharing our GitHub repository! [Github](https://github.com/codescandy/Dash-UI).
6 Days Left until BotMeNot’s beta launch on the 7th of December, 2021!
Tags: discuss, security, testing
Published: 2021-12-02 15:58:06

In case you’ve missed it, we’ve recently announced BotMeNot’s beta launch! 

BotMeNot (Beta) will go live on the 7th of December 2021 and if you decide to register as a beta user you’ll receive 100 free credits! 

![BMN Beta Launch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0h6bcewz22b9vhh8j7ub.png)

What is BotMeNot about and why should you become a beta user?

BotMeNot is a tool that tests websites’ bot protection levels
It can be used by website owners or anyone interested in bot protection
Currently, there are three types of tests you can choose from - Starter, Light, and Smart Tests
By knowing how well protected a website is, you’ll know what are the chances of bots slowing down the server’s response time
You’ll get to know how easy it is to scrape content from your website.
You’ll be able to understand if your website is at risk of being targeted by spambots
You’ll get to know how effective your current bot protection solution is (if you’re using one)

Interested?

Head over to https://botmenot.com/beta-users-wanted/!

Register and claim your 100 free credits!
Are you a video fan?🚀
Tags: codereview, programming, productivity, video
Published: 2021-12-02 16:14:31

How many videos do you watch a week? I'm sure a lot. 
Some of the videos for pleasure, and some of them for educational reasons.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ig6demfft4hrr3tgjkq.jpg)


About two years ago (Covid 19) video usage increased dramatically.
We have learned that it is much more convenient to transfer and share knowledge between each other via video instead of physical meetings. As a video consumer, you can  understand the content much faster, enjoy it more and can always stop and continue in your free time from the same point you stopped watching.
And even better, you can watch at 1.5x speed and save time.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29mojnv4nbgxl1a6ft1u.jpg)

While observing the development world 👨‍💻👩‍💻, you write thousands of lines of code every week (!)
How many times have you found yourself repeatedly explaining what you did to someone else?

How easy it was if you could record📷 Your screen and explain what you have developed in your own words instead of explaining it 10 times? 😀

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97cs9l1w2br3bgc3319w.jpg)


Meet Speacode, a cool tool that has been developed by developers to developers that allow you in just 2 clicks the ability to record yourself from the IDE to explain exactly what you wrote so you can share it with the relevant people.
You can share the video within the relevant lines of codes or if necessary even share it with friends via a link 😀

If you want to take a try you can download it from Jetbrains marketplace here - [Speacode Video Screen Recorder for Code | Python Java JS PHP etc](https://plugins.jetbrains.com/plugin/15672-speacode-video-screen-recorder-for-code--python-java-js-php-etc) 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd1vmjrqf2fvjhgfg6g4.gif)
Typing Effect by using CSS
Tags: css, webdev, beginners, tutorial
Published: 2021-12-03 12:35:11

As you may have already seen some website which has some kind of typing animation. It looks cool right but what if I tell you it is very easy to do and you can do it with just CSS only, not without using JS.

First of all, let's visualize what I am talking about - 

### Preview

![preview](https://i.imgur.com/7PBxp4Q.gif)

Now let's look at the code, how can we make that happen

### HTML
```html
<h1 class="typing">You had me at 'hello'.</h1>
```
HTML is very simple we just need to use only one element in order to make this work.

### CSS

```css
/* Typing Class */
.typing {
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.15em;
  border-right: 0.15em solid orangered;
  animation: typing 3.5s steps(40, end) infinite,
			 cursor-blink 0.75s step-end infinite;
}

/* The typing effect for the text */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* The cursor  blinking effect */
@keyframes cursor-blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orangered;
  }
}
```


{% codepen https://codepen.io/j471n/pen/JjrdRmL %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/JjrdRmL)



### Conclusion

It is as simple as that, now you can use this in your projects wherever you want. You can also make that work with JS, but that's another story for another time. 

> You can now extend your support by buying me a Coffee.😊👇
[![buymecoffee](https://imgur.com/2QWo3cm.png)](https://www.buymeacoffee.com/j471n)



#### Also Read
- [Curved Timeline in CSS](https://dev.to/j471n/curved-css-timeline-5ab3)
- [How to use Web Storage API?](https://dev.to/j471n/how-to-use-web-storage-api-3o28)
- [Video as Text background using CSS](https://dev.to/j471n/video-as-text-background-using-css-58im)
Typing Effect with typed.js
Tags: javascript, webdev, beginners, tutorial
Published: 2021-12-09 04:26:24

As you may have already seen some website which has some kind of typing animation. It looks cool right but what if I tell you it is very easy to do. 

I have already made an article about how you can make this type of effect with CSS but today we will build something different than that. In this effect, you can give multiple strings and it will display one by one. 

First of all, let's visualize what I am talking about - 

### Preview


![preview](https://i.imgur.com/0vwGdE4.gif)

To make this work we need to use a library called [typed.js](https://mattboldt.github.io/typed.js/) So firstly add the following script to your project.

```html
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
```

Now let's look at the rest of code, how this is cooking.

### HTML
```html
<h1>Hi, I am <span class="title"></span></h1>
```
HTML is very simple we just need to use only one element in order to make this work.

### JS

```js
var options = {
  strings: ["Jatin Sharma", "React Developer", "Python Developer"],
  typeSpeed: 40,
  backSpeed: 40,
  loop: true
};

var typed = new Typed(".title", options);
```


{% codepen https://codepen.io/j471n/pen/qBPdXdm %}

[![codepen](https://imgur.com/MNtTdVp.png)](https://codepen.io/j471n/pen/qBPdXdm)


### Conclusion

It is as simple as that, now you can use this in your projects wherever you want. To learn how you can make typing effect in CSS visit the given link.

> You can now extend your support by buying me a Coffee.😊👇
[![buymecoffee](https://imgur.com/2QWo3cm.png)](https://www.buymeacoffee.com/j471n)


#### Also Read

- [Curved Timeline in CSS](https://dev.to/j471n/curved-css-timeline-5ab3)
- [How to use Web Storage API?](https://dev.to/j471n/how-to-use-web-storage-api-3o28)
- [Typing Effect by using CSS](https://dev.to/j471n/typing-effect-by-using-css-50p)
Day 78/100 Npm Vs Yarn
Tags: 100daysofcode, javascript, programming, motivation
Published: 2021-12-02 17:42:17

Tackling the details more deeply towards topics often neglected the difference between their functions and primary purpose. Somehow, reviewing minor information would make it more understandable and easy to remember.

![v2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e310nvwcn5cho5u4g7n.png)


Here are the difference between the usage of each commands :

- Install dependencies from package.json:
```
npm install == yarn
```

- Install a package and add to package.json:
```
npm install package --save == yarn add package
```

- Install a devDependency to package.json:
```
npm install package --save-dev == yarn add package --dev
```

- Upgrade a package to its latest version:

```
npm update --save == yarn upgrade
```

- Install a package globally: 

```
npm install package -g == yarn global add package
```

- Remove a dependency from package.json: 

```
npm uninstall package --save == yarn remove package
```

## Extensions to consider
These are some extensions which I think would be helpful to make your coding more interactive.

- [Rainbow Brackets](https://plugins.jetbrains.com/plugin/10080-rainbow-brackets)

- [Reactjs code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets)

- [Snazzy Operator](https://marketplace.visualstudio.com/items?itemName=aaronthomas.vscode-snazzy-operator)

- [Spirited Away Color Theme](https://marketplace.visualstudio.com/items?itemName=MaxfieldWalker.vscode-color-theme-spirited-away)

- [Bitter Sweet Theme](https://marketplace.visualstudio.com/items?itemName=gerane.Theme-Bittersweet)

- [Mark down all in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)


## Code snippet

```
npx cowsay hello

Ok to proceed? (y) y
 _______
< hello >
 -------
        \   ^__^
         \  (oo)\_______
            (__)\       )\/\
                ||----w |
                ||     ||
```


Stay in touch with me along with my coding journey. Don't hesitate to reach out and let's venture together!

[![Twitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0o6yjmhnea6k9bobgqu.png)](https://twitter.com/CantreRio)

[![Medium](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umyb75eb9l28de3jubgv.png)](https://medium.com/@smittenaf301icu)

[![Dev.to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gke9sw0zv0ln9qmfkec.png)](https://dev.to/riocantre)
100 días de código: 30, avance en The Odin Project.
Tags: spanish, 100daysofcode, webdev
Published: 2021-12-03 00:15:27

¡Hey hey hey!

Bienvenidos a este día 30 del reto. Realmente no he avanzado mucho porque practique el uso de prototipos en Javascript.

Me siento realmente motivado desde que elegí la ruta a seguir en The Odin Project la cual fue Javascript Full stack.

### Ayer:
- Practique 30 min de Touch Typing.
- Comencé a aprender TypeScript con la documentación oficial que puedes encontrar [aquí](https://www.typescriptlang.org/).
- Termine la sección completa de Foundations de The odin project.
- Investigue cual era la mejor ruta para seguir como desarrollador Full stack y al final elegí JavaScript Full Stack.

### Hoy: 
- Avance hasta la sección del proyecto de biblioteca en la ruta de Javascript.
- Practique 30 minutos de Touch Typing.
- Hice algunos ejercicios de Hacker Rank.

Hoy no escribiré mucho porque no fue un día especialmente variado y quiero seguir avanzando en el ejercicio asi que hasta pronto!

Espero que tengan mucho éxito con sus proyectos.
Adiós mundo!
Code Smell 108 - Float Assertions
Tags: oop, tutorial, codenewbie, cleancode
Published: 2021-12-03 03:11:21

*Asserting two float numbers are the same is a very difficult problem*

> TL;DR: Don't compare floats

# Problems

- Wrong test results

- Fragile tests

- Fail fast principle violation

# Solutions

1. Avoid floats unless you have REAL performance concerns

2. Use arbitrary precision numbers

3. If you need to compare floats compare with tolerance.

# Context

Comparing float numbers is an old computer science problem.

The usual solution is to use threshold comparisons.

We recommend avoiding floats at all and trying to use infinite precision numbers.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/2fc79af85305eaada328fd324cb38c0d)
```java
Assert.assertEquals(0.0012f, 0.0012f); // Deprecated
Assert.assertTrue(0.0012f == 0.0012f); // Not JUnit - Smell
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/570958fcfb8e52379b7ddde2389ad6f8)
```java
Assert.assertEquals(0.0012f, 0.0014f, 0.0002); // true
Assert.assertEquals(0.0012f, 0.0014f, 0.0001); // false
// last parameter is the delta threshold

Assert.assertEquals(12 / 10000, 12 / 10000); // true
Assert.assertEquals(12 / 10000, 14 / 10000); // false
```

# Detection

[X] Automatic 

We can add a check con *assertEquals()* on our testing frameworks to avoid checking for floats.

# Tags

- Test Smells

# Conclusion

We should always avoid comparing floats.

# Relations

{% post https://dev.to/mcsee/code-smell-71-magic-floats-disguised-as-decimals-2g7p %}

# More Info

- [Fail fast](https://dev.to/mcsee/fail-fast-48dm)

# Credits

Photo by <a href="https://unsplash.com/@mbaumi">Mika Baumeister</a> on <a href="https://unsplash.com/s/photos/numbers">Unsplash</a>
  
* * *

> God made the natural numbers; all else is the work of man. 

_Leopold Kronecker_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Create QR codes in JavaScript
Tags: javascript, node, webdev, programming
Published: 2021-12-03 07:43:34

This is an example of how you could create QR codes in JavaScript (and Node.js) with the "qrcode" npm package. This video includes browser and Node.js examples where we create the QR codes as base64 image strings.

{% youtube U0pRmzCxbnk %}