teleren/devto huggingface dataset:
Git - 6 comandos que podem lhe ajudar
Tags: git, developer, softwaredevelopment, code
Published: 2020-05-13 21:39:03

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0avfxzyujuuusibanniu.png

title: Git - 6 comandos que podem lhe ajudar
published: true
description: Comandos GIT que poderão lhe ajudar em algum momento do seu dia a dia
tags: #git, #developer, #softwaredevelopment, #code
---

Na área da programação é muito importante usar alguma ferramenta que possa garantir o versionamento de código de uma aplicação. Há muitas vantagens ao fazer o versionamento do seu código, algumas delas são:
- Segurança no desenvolvimento;
- Eficiência no desenvolvimento em equipes;
- Organização do projeto;
- Controle de atualizações da aplicação;
- Histórico de modificação.

Até o momento, Git é o sistema de versionamento de código mais famoso entre desenvolvedores. No dia a dia da programação você irá se deparar com várias situações relacionadas ao uso do Git, então é muito importante que você saiba alguns comandos que farão total diferença para você.

  
## Comandos

- `git clone --recurse-submodules <repo>`: caso você for fazer a clonagem de um repositório que possui submódulos, este comando além de clonar o repositório principal, irá clonar os submódulos;

- `git config --global credential.helper store`: permite de forma global armazenar as credenciais de acesso de um repositório. É necessário informar somente na primeira vez as credenciais, após isso elas serão armazenadas pelo Git. Caso queira armazenar de forma local no projeto, ao invés de global, basta trocar o global no comando por local;

- `git cherry-pick <id_commit>`: quando realizado um commit em uma branch errada, esse comando permite trazer o commit de acordo com seu id informado para o branch que está no momento do comando;

- `git checkout -b`: este comando realiza a criação de uma branch e faz a troca da branch atual para a que foi criada;

- `git stash`: permite que seja armazenado o estado atual dos arquivos em alteração na branch atual. Isso permite que seja feita a atualização da branch atual, ou até mesmo a troca de branch para realizar determinada ação. Quando desejar obter novamente os arquivos armazenados basta usar o comando `git stash pop`;

- `git log --pretty="format:%H | %s | %an | %ar"`: mostra o histórico de commits da branch atual, os parâmetros informados formatam o histórico para apresentar a seguinte sequência: hash do commit | mensagem | autor | tempo do commit.

###Referência

- https://git-scm.com/docs
- https://devhints.io/git-log-format

Obrigado pela leitura!
Let's deploy now
Tags: linux, devops
Published: 2020-05-13 21:38:00

Previously, we have [Setup the blog using Hexo](https://dev.to/chuanjin/setup-my-blog-using-hexo-h44) and [deploy it to Github page](https://dev.to/chuanjin/set-up-websites-using-github-pages-4a57). Additionally, we can deploy it to [Vercel](https://vercel.com)(formerly zeit). We can either go to their website to connect it to our Github, Gitlab, etc, or install command line interface and deploy with one hit.
`npm i -g vercel`
Just run `vercel` or `vc` inside the project, it will guide you to setup for the first time and deploy automatically. Note, the command was used to be called `now`.

{% youtube 1ZtXNBw-oYo %}
[AWS EKS] Setup CloudWatch-logging
Tags: aws, ec2, cloudwatch, eks
Published: 2020-05-13 21:31:31

### step1 - setup file cluster.yaml

{% gist https://gist.github.com/PanupongDeve/1d2d3bf473ecea9ce6c193eee8a0dd1c file=eksctl-cluster-ec2-add-cloudwatch-logging.yaml %}


### step2 - enable cloudwatch log with eksctl

<code>eksctl utils update-cluster-logging --config-file ((cluster-config.file.yaml)) --approve</code>

### loggin in aws console

CloudWatch -> log groups -> /aws/eks

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

### disable cloudwatch logging

<code>eksctl utils update-cluster-logging --name=((EKS-course-cluster-name)) --disable-types all  --approve </code>
What’s your alternative solution? Challenge #43
Tags: challenge, javascript, codenewbie, learntocode
Published: 2020-05-13 21:30:02

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that will convert an array containing ASCII codes in a string

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge38

println(codesToString([73,32,108,105,107,101,32,74,97,118,97,83,99,114,105,112,116]));

function codesToString(ar)
{
    return String.fromCharCode(...ar);
}

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Quick LoadTests with Artillery
Tags: loadtest, httptest, performancetests, artillery
Published: 2020-05-13 21:23:50

I was troubleshooting a capacity issue with one of the web application and wanted to reproduce why some calls were failing. Usually I turn to Jmeter but today I decided to use something quick and fast and found this nifty nodejs called Artillery. Just configure what you wanted to do in a yml file and run the test. You will get report of the http responses and various other stats.

I found it very useful to make a quick number of requests along with request chaining and authentication. Here is what I did.

To install
```
yarn add global artillery
```
Now create a yml file as below
```
config:
  target: 'https://api.edge.service'
  phases:
   - duration: 30
     arrivalRate: 1
scenarios:
 - flow:
   - log: "Getting token"
   - post:
      url: "/token"
      json:
       username: 'xxxxxx'
       password: 'xxxxxxxx'
       grant_type: 'password'
      capture:
       json: "$.access_token"
       as: access_token
      expect:
        - statusCode: 200
   - get:
      headers:
        Authorization: 'Bearer {{ access_token }}'
      url: "/apis/users/v1"
```

The above yml is self explanatory. But in brief, here is what it does, it has a base url of 'https://api.edge.service' and the test will run for 30 seconds with 1 user request being made every second. It will first make a token request and uses the 'access_token' field in the response json in the next request's 'Authorization' header. 

So there you have it, a request which first gets an authentication token and then using that token to make another API call.

Run the test

```
#  With debug to see the requests made.
DEBUG=http artillery run load.yml

#  With debug to see the requests and responses made.
DEBUG=http:response artillery run load.yml

#  With debug to see the requests and responses made.
DEBUG=http:response artillery run load.yml

#Or just run in default mode
artillery run load-dev.yml
```

The Report

```
Summary report @ 17:20:54(-0400) 2020-05-13
  Scenarios launched:  1
  Scenarios completed: 1
  Requests completed:  2
  Mean response/sec: 1.35
  Response time (msec):
    min: 45.5
    max: 1126.6
    median: 586.1
    p95: 1126.6
    p99: 1126.6
  Scenario counts:
    0: 1 (100%)
  Codes:
    200: 2
```

The more I read the documentation of Artillery, the more I like it. It also has a PRO version which is paid and can be run from cloud. For me, I just use it my local to run some quick tests.

https://artillery.io/docs/getting-started
Detecting the end of a fluent API chain in JavaScript
Tags: javascript, node
Published: 2020-05-13 21:17:30

> Originally posted at [michaelzanggl.com](https://michaelzanggl.com/articles/end-of-chain/).

Say, we are building a test library and want to create a fluent API for sending requests in integration tests.

We can turn something like this

```javascript
// notice the explicit `.end()`
const response = await new Client().get('/blogs').as('🦆').end()
// or
const response2 = await new Client().as('🦆').get('/blogs').end()
```

into 

```javascript
const response = await new Client().get('/blogs').as('🦆')
// or
const response = await new Client().as('🦆').get('/blogs')
```

As you can see, we can chain the methods any way we want, but somehow end up with the response. All without an explicit method to end the chain like `end()`.

How does it work? Well, it all lies in the little magic word `await`.

Unfortunately, that also means that detecting the end of a chain only works for asynchronous operations. I mean, theoretically, you could do it with synchronous code but you would have to use the `await` keyword, which might throw some off. Apart from this hack, there is no way in JavaScript currently to detect the end of a chain for synchronous operations.

So let's look at the first implementation with the explicit `.end()` method. [Or jump straight to the solution](#solution).

Here is a possible API:

```javascript
class Client {
  as(user) {
    this.user = user
    return this
  }

  get(endpoint) {
    this.endpoint = endpoint
    return this
  }

  async end() {
    return fetch(this.endpoint, { headers: { ... } })
  }
}
```

### solution

And here is the little trick to achieve it without an explicit `end()` method.


```javascript
class Client {
  as(user) {
    this.user = user
    return this
  }

  get(endpoint) {
    this.endpoint = endpoint
    return this
  }

  async then(resolve, reject) {
    resolve(fetch(this.endpoint, { headers: { ... } }))
  }
}
```

So all we needed to do was switching out `end()` with `then()` and instead of returning the result, we pass it through the `resolve` callback.

If you have worked with promises, you are probably already familiar with the word `then`. And if you ever used `new Promise((resolve, reject) => ...` this syntax will look weirdly familiar.

Congratulations. You have just successfully duck-typed [A+ promises](https://promisesaplus.com/).

A promise is nothing more than a `thenable` (an object with a `then` method), which conforms to the specs. And `await` is simply a wrapper around promises to provide cleaner, concise syntax.

So in summary, to achieve an async fluent API, all you need to do is define a `then` method which either resolves or rejects any value through the two given arguments.
Is Golang the Java killer?
Tags: go
Published: 2020-05-13 21:09:30

No it isn’t, but it can be used in many of the places that Java is used today. Java is most without a doubt not only used for net programming.

Successful client-side Java use consists of Android app development, Java-Swing cross-platform clients, and Minecraft.

For server-side programming, Golang is a center ground between static-typed languages like Java/C# and dynamic-typed languages like Python, Ruby, or Javascript.

* Web development is not the only area of Java. 
* Java is heavily used in mobile and embedded applications, like Android.
* Java is used in desktop applications.

Golang has a long way to go before it can catch up to the size of Java’s ecosystem and user community. 

Java is the *enterprise standard programming language*, and the enterprise is extremely conservative.

So both languages will be around for the foreseeable future. However, it is a good idea to learn Go, as it has many pros.

**Related links:**
* <a href="https://golangr.com/">Learn Go</a>
* <a href="https://golang.org/">Download Go</a>
Error console highlighting
Tags: discuss, question, writing, markdown
Published: 2020-05-13 20:47:24

---
title: Error console highlighting
published: true
description: 
tags: discuss, question, writing, markdown
---

When composing posts on dev.to, is there a way to dispensary display error messages so they appear as console output, but in red?

I've tried things like:

<pre class="highlight markdown">
<code>
```error
My error message
```
</code>
</pre>

or

```html
<pre>
<code style="color:red;font-weight:bold">
My error message
</code>
</pre>
```

to no avail…

Is there a way to achieve this?
How to Choose the Right Web Design Company
Tags: webdev, webdesign, ecommerce
Published: 2020-05-13 20:30:13

If your website does not look good, the user will not stay on your website for a long time. Design a website is not as easy as we are thinking. You have to look after so many things.

Nowadays, it is difficult to find a right & the perfect web design company. So, if you are also facing the same problem keep your eyes here. In this article, I'm going to share how to choose the right web design company for your business.

**5 Professional Tips for Choosing The Right Web Design Company For Your Business**

**1) Check Online Reviews**
=> In this advanced technology world, you don't have to visit any company physically. You can check their online reviews using your device. Here, you can check how their previous client experience and give you an idea, how the web agency works.

=> This will cut off your 50% of work. You can check their online presence through social media handles. Google My Business page, Glassdoor etc.

**2) Check Company's Portfolio**
=> It is often said that experience speaks louder. Before signing up with any web design agency, it is essential to check their portfolio.

**You can judge of its previous work with the following steps:**
Is it responsive? 
Is the navigation easy to understand? 
Is the content easy to read?
Is the page load speed normal?

Like this you can also check have they include all the important website features. Generally, a top-notch web design company ensures not compromise with their quality & supported with great user experience.

**3) Check their client retention rate**
=> Along with looking at the company's previous clients, you can also question them about their client retention rate. As per on research, if the client ratio below 60% that indicates that there’s something fuzzy going on. They are not having satisfied clients.

=> Similarly, if the client ratio is 90% or above that to be a sign of client satisfaction. You can get a satisfactory result from this type of agency.

**4) Do they have their newsletter or blog?**
=> Always remember that it’s quality over quantity. Having a newsletter or blog on the website indicates that they are giving extra time and value-added service to their very own site. It shows their dedication and efforts.

**5) Check their social media handles**
=> Nowadays, almost all humans are now using the social media platform to perform searches. Therefore, it’s necessary to pick a web agency who is already having a huge reputation on social media handles.

=> If they have an impressive social media presence, you can also get an idea of what kind of a team they have.
ngxtop
Tags: nginx, monitoring, webdev
Published: 2020-05-13 20:15:34

If you are looking for a fast way for live monitoring your server http(s) traffics here's a tool that is easy to install : **ngxtop**

All you need is to have python and pip installed on your system :

```bash
apt-get install python python-pip
```

And then use `pip` to install the tool

```bash
pip install ngxtop
```

If the installation fails, there is a big chance that you need to update the setup tools as well and try again :

```bash
pip install --upgrade setuptools
pip install ngxtop
```

After the tool is installed you can type `ngxtop`. The tool assumes you didn't modify the access log in your nginx configuration (*/var/log/nginx/access.log*) and run successfully.    
Next you can visit one page of your server and you should see live update in the terminal.

More details on the [github](https://github.com/lebinh/ngxtop)

## Further

If you search for a more advanced tool you should also consider checking [goaccess](https://goaccess.io/). `goaccess` is more like a log analyzer, it is also real-time but the stats is made from all the data in the log *versus* `ngxtop` that starts making stats from the moment you run the command.
Simple Dark/Light mode
Tags: html, css, javascript
Published: 2020-05-13 20:09:29

Here is the simplest way I found to add dark mode to a project:
Add a toggle button in your HTML with a checkbox and an onClick calling a JavaScript function
```html
 <label id="toggle">
   <input type="checkbox" onclick="toggleDarkMode(event)">
   <span id="slider"></span>
 </label>
```
Then add a data-mode to your CSS with your CSS variables set to the dark mode colors
```css
:root {
  font-size: 10px;
  --bg: white;
  --font-color: black;
  --btn-bg: black;
  --btn-color: white;
}

[data-mode="dark"] {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}
```
Now all you have left is to write the JavaScript function to set or remove the data-mode
```javascript
function toggleDarkMode(event) {
  const isDarkmode = event.target.checked

  if (isDarkmode) {
    document.documentElement.setAttribute('data-mode', 'dark')
  } else {
    document.documentElement.setAttribute('data-mode', '')
  }
}
```
Then you can add some CSS to make the button look better and add a transition
```css
:root {
  font-size: 10px;
  --bg: white;
  --font-color: black;
  --btn-bg: black;
  --btn-color: white;
}

[data-mode="dark"] {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}

body {
  width: 100vw;
  font-size: 2rem;
  background-color: var(--bg);
  color: var(--font-color);
}

#toggle {
  margin-right: 2rem;
  width: 6rem;
  height: 3.4rem;
  border-radius: 3rem;
  background-color: var(--btn-bg);
}

#toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

#slider {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  top: 1.23rem;
  right: 1.8rem;
  border-radius: 3rem;
  background-color: var(--btn-color);
  transition: ease-in .2s;
}

#slider.dark {
  right: 4.2rem;
}
```

Here is the end result:
{% codepen https://codepen.io/matoval/pen/abvaojY %}
Nuxt: How to use nuxt-link-active and nuxt-link-exact-active classes with nuxt-link? 
Tags: nuxt, vue, frontend
Published: 2020-05-13 20:06:43

#### Problem
> Apply custom active class to active route in `nuxt-link` tag including all nested routes

Let's say you wish to apply custom active class to an active route in `nuxt-link` tag.
```html
...
<nav>
    <nuxt-link to="/">Home</nuxt-link>
    <nuxt-link to="/explore">Explore</nuxt-link>
    <nuxt-link to="/about">About</nuxt-link>
</nav>
...
```
The first choice is to use `nuxt-link-active` class to style the active route.
```css
.nuxt-link-active {
    font-weight: bold;
}
```
##### Discrepancy
If user navigates to `/explore` or `/about` route, the styling will get applied to `/` route as well which in practice is not desired.

Well, to resolve this issue one is prompted to use `nuxt-link-exact-active` along similar lines.

```css
.nuxt-link-exact-active {
    font-weight: bold;
}
```
Apparently this approach resolves the issue very well. But hold on, what if there are some nested routes? What about `/explore/express` or `/explore/ruby-on-rails`?

In practice if user navigates to any of the nested routes `/explore` should continue to have the styling, right? but with just `nuxt-link-exact-link` class in hand it will fail to persist.

#### Solution
To get the best of both worlds, use `nuxt-link-active` class along with `exact` keyword in `nuxt-link` tag.

Use `exact` in the `nuxt-link` tag
```html
...
<nav>
    <nuxt-link to="/" exact>Home</nuxt-link>
    <nuxt-link to="/explore">Explore</nuxt-link>
    <nuxt-link to="/about" exact>About</nuxt-link>
</nav>
...
```
with the following css
```css
.nuxt-link-active {
    font-weight: bold;
}
```
For every nested *explore* routes, `/explore` will continue to have the styling. Furthermore, `/` and `/about` will have the styling only when the exact route matches.


---
I hope it will help you. Keep coding!
why you need to register your logo design
Tags: register
Published: 2020-05-13 20:05:53

There are several different reasons to create a logo design and register it as a trademark. This is going to further allow you to use your logo into commercial needs. Your business is not going to stay confined to  a certain set of requirements either. In case you are wondering about <a href="https://www.trademarkterminal.com/trademark-registration-detail/">how to trademark a phrase</a> then you need to follow the same steps as you are for your logo design. You can choose to simultaneously get both of these features done to help sand boost the business. What other reasons do you think there are to register logo designs?
Sign up tailwind css
Tags: tailwindcss, beginners, css, codepen
Published: 2020-05-13 19:28:48

---
title: Sign up tailwind css
published: true
description: tailwind css
tags: tailwindcss, beginner, css, codepen
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ysd5s73uipj8xx3czvc5.png
---
Sign up with tailwind css:
{% codepen https://codepen.io/giandodev/pen/zYvLJPr %}

The Code, remember you have to import tailwndcss via CDN in your html file before using tailwind 🙂:
```html
<div class="bg-white">
  <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
    <h2 class="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10">
      Want  more News ?
      <br class="hidden sm:inline" />
      <span class="text-indigo-600">Sign up for My newsletter.</span>
    </h2>
    <form class="mt-8 sm:flex">
      <input aria-label="Email address" type="email" required class="appearance-none w-full px-5 py-3 border border-gray-300 text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:shadow-outline focus:border-blue-300 transition duration-150 ease-in-out sm:max-w-xs" placeholder="Enter your email" />
      <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
        <button class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
          Send me
        </button>
      </div>
    </form>
  </div>
</div>
```
Deploy ES6 Node app in Heroku
Published: 2020-05-13 19:24:13

It's very easy but relatively tricky all you have to do is customize the heroku build process by adding the following to your script in package.json

```json
"script": {
  +"heroku-postbuild": "npm run build"
}
``` 
the command above should compile your ES6 app using babel [read more here](https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process)

to set up your node js app in ES6 you can read my previous [post](https://dev.to/mixed_code/set-up-node-project-in-es6-2bla)
What is your pettiest programming-related opinion?
Tags: discuss
Published: 2020-05-13 18:58:54

---
title: What is your pettiest programming-related opinion?
published: true
description: We all know about Tabs vs. Spaces, what are some other petty opinions you'll fight about? 
tags: discuss
---

**What is the most meaningless, silly, un-important programming-related opinion that you'll just continue to defend?**

We're all familiar with _Tabs vs. Spaces_...
{% youtube SsoOG6ZeyUI %}

But what are some other pointless fights that you're always willing to fight about?