teleren/devto huggingface dataset:
5 Best linux Distros for Beginners
Tags: linux, javascript, programming, computerscience
Published: 2020-12-23 18:06:29

>>Linux Mint: Very Simple and Sleek linux distro which can be used as a beginner to learn about Linux environment.

>>Ubuntu: Very popular for servers. But also comes with great UI.

>>Elementary OS: Cool Design and Looks.

>>Garuda Linux

>>Zorin Linux

read more at -
https://www.codersnoon.com/2020/12/5-best-linux-distros-for-beginners.html
What would you ask Tech Santa for this year?
Tags: watercooler, discuss, rudderstack
Published: 2020-12-23 17:53:54

It’s almost Christmas. I’m sure many of us wrote a list to Santa with all the things you wanted when we were kids.

Well, let’s say **Tech Santa** shows up on Christmas Eve night, looking like a festive RMS, and offers you any tech gift you want. It can be an object, knowledge, experience, a job, or whatever you want, but it has to be tech-related. What do you ask Tech Santa for?

<br />  
*Cover photo by [Caleb Woods](https://unsplash.com/@caleb_woods?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/xxmszPRm_ck?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).*
Fetch in react js returns 401 (unauthorized) while passing access token
Tags: react, javascript
Published: 2020-12-23 17:53:53

Hello everyone,

I am trying to pass access token to an API that returns data through `fetch` from **DATA_API** but I am getting `401 unauthorized error`. 

When I opened `Network` Tab, I observed that the `auth headers did not injected` and hence the 401 error is coming. The token is also getting fetched from **ACCESS_TOKEN_API** and its getting logged in the console.

Here is my code. Please suggest a workaround.
```
import React, { useState, useEffect } from "react";
import {Col } from 'antd';
import { Link } from "react-router-dom";
import AntDTable from '../shared/AntDTable';
import iInnerLoader from '../shared/iInnerLoader';
const columns = [
  {
    title: 'Account Name',
    dataIndex: 'name',
    render: (text, record) => (
      <Link to={`/all-customers/tenants/?tenant_id=${record.id}&customer=${record.name}`}>{record.name.toUpperCase()}</Link>
    ),
  },
  {
    title: 'Total Tenants',
    dataIndex: 'tenantCount',
  }
];
const useFetch = (url, headers) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
    useEffect(async () => {
      const response = await fetch(url,headers)
      const data = await response.json()
      // console.log(data)
      setData(data)
      setLoading(false)
    },[]);
    return {data, loading};
}
​
export default function CreateTestcaseStep2() {
  const [token, setToken] = useState([]);
    useEffect(async () => {
      const response = await fetch('ACCESS_TOKEN_API',{
        method : 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body : 'body_part'
      })
      const data = await response.json()
      // console.log(data)
      setToken(data)
    },[]);
  
console.log("token is ", token.access_token) // TOKEN IS GETTING PRINTED HERE
var api_headers={ method: 'GET',
  headers: {'Authorization': `Bearer ${token.access_token}`,
  "Access-Control-Allow-Origin" : "*", 
  "Access-Control-Allow-Credentials" : true },
}
console.log("headers ", api_headers)
  const {data, loading} = useFetch('DATA_API', api_headers)
  return (
    <>
      <Col md={24} sm={24} className="p-0">
        <div className="customer-list">
            <div className="customer-list-header">
              Customer Accounts
            </div>
            <br/>
            <div className="customer-list-content">
            {loading? <iInnerLoader isDisplayLabel={true} label={"Loading Customers"} /> :
             <AntDTable columns={columns} data={data.data} pagination={true} height={390}/>}
            </div>
        </div>
    </Col>
    </>
  );
}
```
How to make your webpage responsive using Media Queries.

Tags: html, css, responsive
Published: 2020-12-23 17:39:56

One of the most important feature of any website is its ability to be responsive. So let us first understand **what is a responsive website**.

A responsive website is one that provides the same content on all devices irrespective of their sizes. It does not break if we access on any other devices other than our PC like mobiles, tablets, etc.

###Importance of responsiveness

Nowadays due to technological advancements, we are getting devices in a wide variety of shapes and sizes. Just take our laptops for example gone are the days where we used to have a monitor of standard sizes now we get laptops in various ranges of sizes. It is very important for a website to be compatible with all these devices and many more that will come in the future.

In this article, I will help you in making a website responsive using Media Queries.

###What are Media Queries?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

So if you want your website font-size to automatically get reduced when the width of the screen is less than equal to 600px you can write the below code in your CSS file:
```
@media only screen and (max-width: 600px) {
  body {
   font-size; 10px;
  }
} 
```

Let's understand the above code.

``@media`` - This enables our code to be a media query.
``only screen`` - This ensures our code should be applicable to only screen sizes.
``max-width: 600px`` - This is the breakpoint or condition you can say which applies the styles only when the screen size is less than equal to 600px.

Please note if you have a style in media query already declared, the style inside media query will just get override if the condition is met.

Apart from max-width, we can also use min-width to make sure media query styles are only applied when the screen size is greater than equal to the breakpoint.

There is one more way in which a web page size changes apart from the device size is orientation in mobile devices.

For mobile devices, we have two types of orientation: Portrait and Landscape, and the size of the page changes whenever the orientation changes.

*Do not worry! Here come media queries to the rescue*.

So if you want to change to webpage color based on the orientation you can use the below code.
```
@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
```
``orientation``- values can be landscape and portrait

Reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Have a nice day!
Solving day 23 of Advent of Code 2020 in JavaScript
Tags: challenge, adventofcode, javascript, video
Published: 2020-12-23 17:23:22

---
title: Solving day 23 of Advent of Code 2020 in JavaScript
published: true
description: JavaScript walkthrough of Advent of Code 2020 (day 23)
tags: challenge, AdventOfCode, javascript, video
series: Advent of Code 2020 in Javascript
---

This is part 1, and an explanation of why my part 1 code won't work for part 2 ;)

{% youtube 6BJ_636Bsbo %}
🏃 Hackathon progress
Tags: dohackathon, preview, javascript
Published: 2020-12-23 17:17:05

2020 has been a good year for my personal projects. I [launched one](https://www.sitejoy.dev) that I’d be thinking about for a decade within a month of starting to build it and now thanks to the hackathon I’m the cusp of getting another finished.

For a while I’ve wanted to build a visual timeline for the music production duo, The Neptunes. I’ve been a fan of their for 20 years or so and having an archive of their work has been a goal of mine for a while. I’ve just never made the time to sit down and get it done.

## Getting started

I’ve manually mined the data and massaged it so it’s easier to use when creating a template.

I toyed with the idea of picking up Vue or React but in all honesty both are overkill. I did start with Vue, but modern JavaScript comes with everything I need for this project so I’ve gone for a Vanilla JS solution instead. I’ve now got basic filtering and searching done and once the data is loaded everything happens in the browser.

## What’s next?

I’ll be linking out to where you can stream or buy the music listed and updating the data provider to include artwork as only a handful have something at the moment. Got to improve a design a bit too as it works but it’s not as good as I want it to be yet!

You can preview the project here: https://theneptunes.1thingaweek.com

Feedback appreciated!
How to migrate mgo to qmgo
Tags: go
Published: 2020-12-23 17:08:41

[For more information, visit my new blog **Immortal Blog**](https://immortal-blog.github.io/)
## Why migrate to qmgo

- Mgo is a convenient library for golang to operate mongodb, but it does not support the latest features of mongodb,
  such as Transaction.
- My old project is written in mgo. If I want to migrate to the official mongo-driver, its syntax is more primitive, the
  usage difference is large, and the migration cost will be higher.
- I found a library called qmgo, which is based on the official mongo-driver package, but it is closer to mgo in terms
  of syntax and suitable for simple and rude migrations.

Below I will record the methods used in the migration process, which I found out by myself. If you have any questions,
please correct me.

## Batch replacement

- Batch replace `github.com/globalsign/mgo/bson` with `go.mongodb.org/mongo-driver/bson`
- Batch replace `bson.NewObjectId()` with `primitive.NewObjectID()`
- Batch replace `bson.ObjectId` with `primitive.ObjectID`
- Batch replace `.Find(bson.M` with `.Find(c, bson.M`
- Batch replace `.Find(search` to `.Find(c, search`
- Batch replace `.Insert(` to `.InsertOne(c,`
- Batch replace `.Update(` to `.UpdateOne(c,`
- Batch replace `.RemoveAll(` to `.RemoveAll(c,`
- Batch replace `.Remove(` to `.Remove(c,`
- Batch replace `errors.Is(err, mgo.ErrNotFound)` with `qmgo.IsErrNoDocuments(err)`
- Batch replace `.EnsureIndex(mgo.Index{` for
  `.CreateOneIndex(c, options.IndexModel{`

## Copy and paste

- Where there is no context, copy and paste everywhere `c := context.Background()`
- If it is in the interface method of gin, you can directly use gin's `c *gin.Context` (but if multi-coroutine operation
  needs to Copy gin's Context)

## Function substitution

- Replace the bson.IsObjectIdHex() method:

```go
package db

import (
	"go.mongodb.org/mongo-driver/bson/primitive"
)

func IsObjectIDHex(hex string) bool {
	_, err := primitive.ObjectIDFromHex(hex)
	if err != nil {
		return false
	}
	return true
}
```

- Replace the bson.ObjectIdHex() method:

```go
package db

import (
	"fmt"
	"go.mongodb.org/mongo-driver/bson/primitive"
)

func ObjectIDHex(hex string) primitive.ObjectID {
	id, err := primitive.ObjectIDFromHex(hex)
	if err != nil {
		panic(fmt.Sprintf("Invalid input to ObjectIDHex: %+v", hex))
	}
	return id
}
```

These functions can be placed in the package of the auxiliary method or the package of the database operation, and then
replace the references in batches.

## Summary

At this point, the project completed the migration within two hours and started running smoothly.  
Thanks to the author of qmgo for making the wheels for me.   
If I have the opportunity, I will also open up some wheels.
Git And Github
Tags: github, linux, terminal, git
Published: 2020-12-23 17:01:39

<b>Git</b> is a version control system that lets you manage and keep track of your source code history. 
<b>GitHub</b> is a cloud-based hosting service that lets you manage Git repositories
I never know that Git and github were two different words.
I started my journey of web development with <b>React</b> and realised that I need to know about Git and Github to manage my project.

I use <b>Ubuntu</b>.So, most of the commands I use here were related to Linux environment. I think except for installing every command was similar in other terminals also.

First things first lets install Git into our System.

`$ sudo apt install git-all`

after you check whether it is installed or not by running 

`$ git --version`

you can [install from here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).


I did make a directory and navigated into it. To initialise the git into our directory we need to run 

`$ git init` 

it will create a folder <i>.git</i>

Lets start our work by adding stuff into the folder and then you need to commit your work.
<b><i>commit</i></b> is like a snapshot of your work.
First add the files to commit, you can add individual files

`$ git add index.html`

or all the files  by

`$ git add .`

and then commit it with a message

```$ git commit -m "😋 second Dev Post```
```> you can add multiple lines ```
```> and whatever message you want"```

We need a Remote Repository and we can create it by logging into our GitHub account and clicking the 
<b>+(New Repository)</b>

we need to  give Repository a name and then 
`Create repository` and then add the remote branch to our local system by
 
`$ git remote add origin <url to git repo>.git`

and now we can push the code by

`$ git branch -M main`

>All new Git repositories on Github uses `main` instead of `master` as default branch

>After the brutal death of George Floyd and the Black Lives Matter protests earlier this year 2020, tech companies wanted to show their support for the black community by abandoning non-inclusive terms such as master, slave, blacklist, and whitelist [Link](https://www.zdnet.com/article/github-to-replace-master-with-main-starting-next-month/)

`$ git push  -u origin <branch>`

Uff.. it is very unique experience writing a article and I know that I have some flaws and I need your support to make them right. I managed to write normal and basic command but I always feel confused during `Pull` and creating new branches and then merging them. But I will try to understand and write an article to continue from this. `Thank  you.`
2020. Mi jornada hasta hoy.
Tags: career, motivation
Published: 2020-12-23 16:50:45

Si, ya lo sé, este año ha sido todo un problema, aunque siempre algo bueno se le pudo sacar. En este post, mi primero de hecho, voy a contarles un poco sobre lo que ha sido mi experiencia con la programación.

Nunca estuve más cerca de la programación antes, a pesar de que me gradué como IT en 2008, no había visto/considerado programar seriamente. Tal vez porque uno no encuentra trabajo como desarrollador tan fácil. Luego de salir del instituto, siempre trabajé dando soporte técnico hasta que cambié de trabajo para una empresa en donde me tuve que involucrar un poco más con programar.

Como muchos, comencé con Python, y un libro muy bueno de la serie Head First. Fue la recomendación de un amigo, que dominara primero el lenguaje antes de saltar de lleno a un Framework y así lo hice.

Django fue mi primera experiencia, y aquí tiene tremenda popularidad, así que estuve haciendo el tutorial oficial y sintiéndome cómodo con el framework. Ah claro, ya tenía algo de experiencia con HTML y CSS muy básico. Aprender el ciclo de vida de los requests y el modelo vista plantilla fue muy interesante y enriquecedor.

Luego tuve la oportunidad de crear, con la ayuda de la comunidad de Django Cuba en Telegram (y la de Dev.To también), un pequeño sistema para el departamento comercial, usando Django
{% github dcruz1990/django-misclientes %}, ya ahí me despegué un poco de los tutoriales y ya tuve que incorporar un poco de CSS con MaterializeCSS. A pesar de que hay miles de soluciones open source al problema de llevar los clientes y contratos de una empresa, fue toda una experiencia. Eso fue aproximadamente en abril del 2019.

También tuve la oportunidad de colaborar con un amigo en su blog personal, usando Asp Net Core y Angular. Y ayudar en su despliegue usando Docker y Nginx como proxy reverso. Otra maravillosa experiencia.

Si has leído hasta aquí, pues esta es mi jornada bien resumida con la programación, muchas horas de desvelo debido a que en donde vivo el Internet era muy lento

{% link https://dev.to/dcruz1990/what-would-be-the-best-night-time-to-code-274k %}

 -recientemente pusieron celdas LTE-, estados de ánimo cambiantes, altas/bajas en fin. La programación requiere mucho esfuerzo y dedicación, no es cosa de un día, aun así personalmente siento que he crecido mucho en este año 2020.

Espero que tú también hayas tenido buenas experiencias en este, casi finalizado año 2020. ¿Podrías compartir algunas?
Javascript Array Properties and Methods
Published: 2020-12-23 16:46:22

I'll be going over the length/size property and a couple methods involving removing/adding an index/indexes to an array. 

One of the most commonly used properties of a Javascript array is .length. This property when called on an array will return to you the amount of items inside your list. This is extremely helpful when it comes time to iterate through your list. It is commonly used to set the condition upon which your loop will stop running. 

You can also use the length method to clear the array out. If you set the array.length = 0. You can also set the value of your index by doing array[index] = value. This can be dangerous however because you could end up leaving empty values on all the indexes between the one you are setting and the last one you set. It's one of the downfalls of arrays being so versatile. It's better to use the built in methods for arrays rather than treating them like a normal Javascript Object. 

This leads me to the first few methods I am going to discuss. Those being .push(), .pop(), .shift(), and .unshift(). First we will touch on .push() and .unshift() as they both add an item to an array. 

The difference between .push() and .unshift() is rather small. They are invoked in the same way by calling the function on an array and then passing them the value/s that you want to add to your array. The biggest difference is that .unshift() will add the value to the beginning of your array and .push() will add the value to the end of the array. 

The other two methods .pop(), and .shift() are very similar to their counter parts. Rather than add values to an array they will remove items from the array. With .pop() removing the last element and .shift() removing the first element. 

These are some of the most commonly used methods for arrays whenever you first start learning about Javascript arrays. They all are considered to be mutating the array, which isn't always what you want to do! If you want to learn more about what I mean by mutating and ways to change your array non-mutating I will be doing another blog next week about that!
Elm: A short example of the development experience on a real code change (video)
Tags: elm, javascript, frontend
Published: 2020-12-23 16:46:00

---
title: Elm: A short example of the development experience on a real code change (video)
published: true
description: I love working with Elm, but it can be hard to explain what the development experience is really like compared to JavaScript-based tools. I thought a short video might help.
tags: [elm, javascript, frontenddevelopment]
//cover_image: https://direct_url_to_image.jpg
---

I love working with Elm, but it can be hard to explain what the development experience is really like compared to JavaScript-based tools. I thought a short video might help.

{% youtube J4n40TKAvww %}
It's the holidays. Here is a gift you can pass along..
Tags: discuss, watercooler
Published: 2020-12-23 16:40:12

Every year at Christmas time I think about how important it is to reach out to family and friends who need to hear a friendly voice. The truth is , you never know what someone else is going through and your call or text, or card might be one thing that brightens their day. Especially if someone is used to being home alone, maybe they're shy and introverted and this time of year can be especially difficult for them.

This last year has been tough and there are even more people who feel forgotten and alone then ever before. We all can help each other one person at a time.

I commit to at least one phone call, card or text every day up to January 2 that will hopefully make someone else feel cared for, cared about, thought about, remembered -- call it whatever.. 

Put aside old grudges, prejudices and pre-conceived notions.
Spread the love -- because we are all being human together.

I commit to reaching out..
Hope my changes get merged and go live...
Final submission for DigitalOcean App Platform Hackathon
Tags: dohackathon, potatizer, nuxt, tailwindcss
Published: 2020-12-23 16:32:32

## What I built

An application to randomly generate your potato mood called **Potatizer**.

### Category Submission: 

**Random Roulette**: truly silly and fun submission 🤣

### App Link

[https://potatizer.dawntraoz.com/](https://potatizer.dawntraoz.com/)

### Screenshots

![Desktop potatizer](https://dev-to-uploads.s3.amazonaws.com/i/e0q8ovn9bnoa6n8imk9u.png)
![Mobile potatizer](https://dev-to-uploads.s3.amazonaws.com/i/31u6jyhf12qp80aw0tq0.png)

### Description

Generate your potato mood randomly with this without sense app 🥔

### Link to Source Code

[https://github.com/Dawntraoz/potatizer](https://github.com/Dawntraoz/potatizer)

### Permissive License

I've chosen [MIT](https://choosealicense.com/licenses/mit/)

## Background

Let's be honest, I have an obsession with potatoes. It doesn't matter how I cook them, they drive me crazy.

The other day I read that they are partly addictive. So, what better than to remind me, entering every day in Potatizer to see my potato mood of the day?

### How I deploy it 

Well, first I tried to deploy it from the *Apps* link on the main left menu once you log in, the common process.

Once I had the public code ready and the deploy.template.yaml created, I clicked the 'Deploy to DigitalOcean' button that I added to the Readme and the website and I followed the steps until the web was deployed again.

I loved the idea of the button and found it super original 🤗

And, every time I push to my main branch I see that it deploys successfully, but everything has gone smoothly 🎉

### My helpers

https://nuxtjs.org/
https://www.flaticon.com/
https://tailwindcss.com/
https://www.adobe.com/products/illustrator.html
Bulma Hero Backgrounds Templates
Tags: css, html, webdev, weeklyui
Published: 2020-12-23 16:16:32

We made so many elements in different frameworks with the help of CSS and also we modify some classes in frameworks. So here we made simple Bulma Hero Backgrounds Templates with the help of the utility class and also we modify the height class.

In these templates we used background color class with are given in this framework and also we used container class with the help of the hero-body class. Also here we used heading tag with align center class to make heading centered. This is a responsive hero background template layouts in Bulma CSS framework.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/bulma-hero-backgrounds-templates/)