teleren/devto huggingface dataset:
New Gatsby Starter
Tags: gatsby, react, github, showdev
Published: 2021-01-12 14:33:53

I've built a couple different sites now with Gatsby: my own and my sister's portfolio sites. I built them both using CodyHouse's CSS framework [CodyFrame](https://codyhouse.co/ds/get-started), but the process to build each has been a little bit of a learning experience. I wanted to take that experience and generalize it for future use, both for myself and for anyone else who wanted it. To that end, I'm happy to announce:

## [Gatsby + CodyHouse Starter](https://github.com/peiche/gatsby-starter-codyhouse)

### What is CodyFrame?

CodyFrame is a front-end framework, complete with CSS classes (both BEM and utility) and utility JavaScript, which has no dependencies (like jQuery). CodyFrame's benefit is enhanced with its optional components. 

### What are CodyHouse Components?

[Components](https://codyhouse.co/ds/components) is a library of components built with CodyFrame in mind. The CSS and JS is easily dropped into any project using CodyFrame, making it easy to build a fully interactive web app. The JS in each component is plain JavaScript, ensuring that it will work with any framework -- including React and Gatsby.

### Using a component with Gatsby

I recommend following CodyHouse's [directions](https://codyhouse.co/blog/post/using-the-codyhouse-components-with-react) for including Components within React. With regard to this starter, a new component file can be created within the `src/components` directory. The SCSS code would be placed inside a new include created inside the `src/styles/components` directory, and don't forget to update the `_index.scss` file in there! Place the JS code in its own file in `static/js`, and follow the CodyHouse directions for creating/removing the script element in the component's `componentDidMount` and `componentWillUnmount` functions, respectively.

### Optionally use with PurgeCSS

The starter also includes a commented-out section in the `gatsby-config.json` file, which can be uncommented to enable using PurgeCSS. Keep in mind that this is not a zero-config option; each use-case will differ, so be sure to follow the [plugin directions](https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/) for fine-tuning the configuration.

----

Under normal circumstances, I would also submit this starter to Gatsby's official starters page. They're currently not accepting any new submissions, so I'll have to wait to do that. 🤷‍♂️
Instale Node.js no Xubuntu
Tags: ubuntu, linux, node, braziliandevs
Published: 2021-01-12 14:22:07

Olá pessoal, hoje iremos instalar o Node.js no **Xubuntu 18.04**, o Node.js é uma plataforma que possui como principal funcionalidade a execução do JavaScript no servidor, existem alguns meios para realizar a instalação, irei demonstrar 3 formas.

1. [Gerenciador de pacotes (apt)](#gerenciador-de-pacotes-apt)
2. [Download do binário](#download-do-binário)
3. [Gerenciador de versão do Node (nvm)](#gerenciador-de-versão-do-node-nvm)

## Gerenciador de pacotes (apt)

Abra o terminal com as teclas de atalho `CTRL + ALT + T` e execute o comando a seguir:

```bash
sudo apt-get install nodejs
```

Verifique se a instalação foi realizada com sucesso:

```bash
nodejs -v
```

Para utilizar o comando `node` ao invés de `nodejs`, crie um link simbólico:

```bash
sudo ln -s /usr/bin/nodejs /usr/bin/node
```

Verifique se o link simbólico está funcionando:

```bash
node -v
```

## Download do binário

Acesse o [_site_](https://nodejs.org/en/) e clique em [_Downloads_](https://nodejs.org/en/download/).

![Site Node.js](https://franciscochaves.com.br/assets/img/blog/2020/jul/site-nodejs.png)

Selecione ***Linux Binaries (x64)***.

![Download ](https://franciscochaves.com.br/assets/img/blog/2020/jul/download-nodejs-linux.png)

Abra o terminal, descompacte o arquivo:

```bash
tar -xvf node-*-linux-x64.tar.xz
```

Renomeie o arquivo baixado:

```bash
mv node-*-linux-x64 node
```

Mova a pasta descompactada para a pasta **opt**:

```bash
sudo mv node /opt/nodejs
```

Crie um link simbólico para o **node**:

```bash
sudo ln -s /opt/nodejs/bin/node /usr/bin/node
```

Verifique se o **node** foi instalado com sucesso:

```bash
node -v
```

Crie um link simbólico para o **npm**:

```bash
sudo ln -s /opt/nodejs/bin/npm /usr/bin/npm
```

Verifique se o **npm** foi instalado com sucesso:

```bash
npm -v
```

Crie um link simbólico para o **npx**:

```bash
sudo ln -s /opt/nodejs/bin/npx /usr/bin/npx
```

Verifique se o **npx** foi instalado com sucesso:

```bash
npx -v
```

## Gerenciador de versão do Node (nvm)

Abra o terminal e execute o comando abaixo para realizar o _download_ do _script_ de instalação e instalá-lo em seguida:

```bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
```

Abra o arquivo **bashrc** com editor **nano**:

```bash
nano ~/.bashrc
```

Adicione o conteúdo abaixo no arquivo **bashrc** e salve com as teclas `CTRL + O` e `CTRL + X`:

```
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
```

Para carregar as novas configurações adicionadas, feche e abra novamente o terminal ou execute o comando a seguir:

```bash
source ~/.bashrc
```

Para instalar a última versão estável do Node.js.

```bash
nvm install --lts
```

## Referências

Node.js. **OpenJS Foundation**. Disponível em: [https://nodejs.org/en](https://nodejs.org/en). Acesso em: 20 jul. 2020.

Nvm-sh/nvm. **GITHUB**. Disponível em: [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm). Acesso em: 20 jul. 2020.
The < kbd > HTML Tag
Tags: html, webdev, programming
Published: 2021-01-12 14:19:39

Welcome to part two of the  [Uncommon HTML Tag series](https://hashnode.com/series/uncommon-html-tags-ckjiqctar042xzgs1bei2e9a3)! 

With each article in this series, I will introduce a widely unknown HTML tag, discuss compatibility across browsers and cover some real-world use cases with the element.

### The < kbd > Tag

The `<kbd></kbd>` tag defines user input on your document and, by default, uses the browser's monospace font for visual distinction. 

While the most common use-case for using this tag is to denote keyboard input, it can also be used for input such as voice or other commands.

Let's take a look at how it's used!

```html
<p>To open a new tab on Mac, press 
   <kbd>Cmd</kbd> + <kbd>T</kbd>.
</p>

<p>To open a new tab on Windows, press 
   <kbd>Ctrl</kbd> + <kbd>T</kbd>.
</p>
```


![Screen Shot 2021-01-08 at 10.35.54 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610123792192/MXExc-oWS.png)

Both the opening and closing tags are mandatory and, unlike some of the other HTML tags we've discussed, does not contain any unique attributes (global attributes can be used).

If you want to have the content of the tag stand out a little more, consider applying some custom CSS.


![Screen Shot 2021-01-08 at 10.36.23 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610123799122/9IRGM_RSs.png)

If you want to play around with the tag, feel free to fork the pen below!

{% codepen https://codepen.io/braydoncoyer/pen/RwGBpPm %}

### Compatibility

The `<kbd></kbd>` tag is part of the HTML Living Standard and is supported on all major web browsers! 


![Screen Shot 2021-01-08 at 10.37.30 AM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610123865495/0KAlfI3qf.png)

### Conclusion

Thanks for reading! Have you ever used the `<kbd></kbd>` tag in a project? Let me know in the comments below!

If you liked this article and want more content like this, read some of my [other articles](https://blog.braydoncoyer.dev/), [subscribe to my newsletter](https://braydoncoyer.dev/newsletter/) and make sure to follow me on [Twitter](https://twitter.com/BraydonCoyer)!
Happiness Index
Tags: happiness, agile, retrospective, management
Published: 2021-01-12 14:12:10

A **happiness index** is a person’s feeling, state of mind with respect to the surrounding factors like Health, quality of life, economic situation.

Let’s take a look at what is happiness index and how it impacts us.

**The Concept**
The Gross National Happiness [Happiness index](https://sustainabledevelopment.un.org/index.php?page=view&type=99&nr=266&menu=1449#:~:text=Sustainable%20Development%20Knowledge%20Platform,Singye%20Wangchuck%20in%20the%201970s.) concept was introduced by His Majesty the Fourth King of Bhutan, **Jigme Singye Wangchuck** implying the sustainable development should take into account economic and non-economic wellbeing. 


**What is happiness index for employees?**
Employee Happiness is a leading indicator of many things, such as engagement, productivity, innovation, and revenue! 

**Why is it important (how does it add value)?** 
[Research]( https://wrap.warwick.ac.uk/63228/7/WRAP_Oswald_681096.pdf) has proved that happy employees give 10-12% better results. The idea to capture the happiness index to see how employees are feeling and what are their pain pains and how can we address the issues that make employees unhappy.

**How can we implement it?**
We use the age-old method of asking the question and inferring based on their responses. Below are some of the sample questions one can ask, it works well with retrospective. 
e.g. 
*How happy you are at work on this project?*
*How happy you are at work with this technology?*
*What would increase your happiness level?*
*How will I contribute to raising the overall happiness level?*
Results can be measured on a scale of **1-5**; **1 being sad, 5 being happy**.

Here a sample [template.](https://github.com/swapanroy/PythonAlgorithms/blob/main/Happiness%20Index.xlsx)

Apart from excel sheet, data points can be gathered via survey’s. In past, I’ve used mentimeter. 
Below is the screen print from [mentimeter]( https://static.mentimeter.com/screenshot/1-how-are-you-feeling.jpg?url=https%3A%2F%2Fwww.mentimeter.com%2Fs%2Fb0f849993f8792499c334bdb46127098%2Fc05decd9c598%2Fpreview&maxage=600&w=1920&h=1080&cache_buster=7)

The way i did it: 
![Happiness Index](https://dev-to-uploads.s3.amazonaws.com/i/rxzip4qvd4f4nful9pur.GIF)


Please share your feedback, suggestions.
WordPress installieren und einrichten - WepE Teil 4
Tags: wordpress
Published: 2021-01-12 14:50:37

---
title: WordPress installieren und einrichten - WepE Teil 4
published: true
date: 2021-01-12 14:10:09 UTC
tags: Wordpress
canonical_url: https://j0e.org/wordpress-installieren/
---

![WordPress installieren und einrichten](https://j0e.org/wp-content/uploads/2021/01/wordpress-installieren-setup.png)

 WordPress installieren ist ein Kinderspiel. Die Einrichtung benötigt schon etwas mehr Zeit und auch Wissen, …

[WordPress installieren und einrichten »](https://j0e.org/wordpress-installieren/)
Python vs Go
Tags: python, go
Published: 2021-01-12 14:07:04


what's the difference between the [Python](https://python.org) programming language and the [Go](https://golang.org/) programming language and which should
you choose?

## Speed 

Okay sorry there are different areas the first area is **speed**. So go is based on C++ so it's really fast, it's as fast as C++.

Python is a bit slower so if you rely on speed then you should take go. Go is compiled
programming language. It is a traditional programming language that is compiled down and then executed in bytecode.

The Python programming language which is *interpreted* so you can quickly try things out so if you want to get paid highly then I recommend a Python.

In the US, you will get six figures easily. 

## Concurrency

Go is a much younger language released in 2009, Python in 1991 so python is still the 800-pound gorilla with much more experience regarding object orientation.

**Go is not object orientated** and Python is object oriented, so it's more useful abstraction in many cases python has like concurrent libraries which execute concurrently.

If you rely on parallel programming and distributed things then **go** is much easier it has built-in **concurrency support**.

Python does not but you can import it easily with the library. So in memory management Python doesn't let you to customize memory management, so it is like automatic in go.

![computer memory concurrency](https://dev-to-uploads.s3.amazonaws.com/i/oxf5tl5r2npfe7agotu5.jpeg)

Go has some customization features so it's a bit more powerful in memory management for the user.

## General purpose?

For the programmer, Python is much more popular. It is a really simple programming languages to [learn](https://pythonspot.com), ok so how does go look?

```python
print("hello world")
```

Go uses parenthesis and it's different, like a bit like the C++ language with some Python language add-ons.

```go
package main

import "fmt"

func main() {
   fmt.Println("Hello, World!")
}
```

Ok so Go feels like an intermediate between Python and C++. Python yeah it looks very clean there are no parentheses and brackets and so on so it's a bit easier to read I would say. It is easier to write and it's a bit cleaner. For a beginner, I'd say [Go](https://golangr.com/) is harder to learn.

The Python programming language dominates for general purpose programming. You can use it for [gui programming](https://pythonpyqt.com/), [web development](https://pythonbasics.org/what-is-flask-python/), [machine learning](https://pythonprogramminglanguage.com/python-machine-learning/) and lots of other things.

Go can be used in many domains, but it's not matured yet in all those domains and lots of software is written in Python.
Being your dev tutorial challenger!
Published: 2021-01-12 14:02:05

Hi everyone!

My name is Candida Rodriguez ( @crmiguez ), Business & Web Developer, Marketing Assistant and about to finish my CS studies next month.

The aim of this post is to challenge myself about tutorials in 2021. At first, I have no clue how to start, but if you have some ideas for giving you a bold tutorial, I will appreciate it! :)

Please comment below and I will take them into consideration.
Python serialization with Marshmallow
Tags: python, marshmallow, serialization, api
Published: 2021-01-12 13:41:17

When we are creating a API, we need a solid way to serialize and deserialize our data. The are lots of ways to do it, but in this article, we are going to see how to work with [marshmallow](https://marshmallow.readthedocs.io/en/stable/).

So, let's take a look on how we start using marshmallow in our projects.

## Install Marshmallow

To install marshmallow, we will use pip:

> $ pip install -U marshmallow

Note that the -U parameter is used to upgrade all the packages to the newest version.

Now we have:

> pip install -U marshmallow
> Collecting marshmallow
> Using cached marshmallow-3.5.1-py2.py3-none-any.whl (45 kB)
> Installing collected packages: marshmallow
> Successfully installed marshmallow-3.5.1

## Creating our first Schema

To create a schema, we will use basically two imports: `Schema` and `fields`

{% gist https://gist.github.com/ceb10n/2ffdd9cfa5cfcc95c86b03c0a97e04c5 %}

To create a class representing our data, we will make it a subclass of Schema. To represent our fields, we will use the fields.TYPE, as you can see in the example above.

Now, we can serialize and deserialize our data using our schema:

{% gist https://gist.github.com/ceb10n/d8053ee914ed74c89b116c85d6ba79fb %}

As you can see, we basically use **load** to deserialize our data into python objects, and **dump** to serialize it again.

## Validating data with Marshmallow

One of the great advantages of using a serialization library, is to be able to validate the incoming data. Marshmallow offers you a simple way of doing it.

{% gist https://gist.github.com/ceb10n/ac18ce66b3be9f3c4a1fb116070c6a83 %}

As you can see in the code above, we sent an integer to a field expecting a valid UUID. When we use the load method, marshmallow will raise a **ValidationError** with all the data that are wrong.

You can use the **messages** property to check all data that failed to validate, and with **valid_data** property, you can check all data that is valid.

### Custom message validations in marshmallow

Although we can use default validation messages provided by Marshmallow, we can provide our own custom messages:

{% gist https://gist.github.com/ceb10n/759840373627fd3ee90d6acc43c0f1c5 %}

And when we try to load the data, we’ll get our custom message to each cenario:

{% gist https://gist.github.com/ceb10n/3857551be47a0144fa8e4aa54545da8c %}
How to create .icns file from PNG files on CLI
Tags: macos, icns, icon
Published: 2021-01-12 13:41:09

I had to make another .icns file in order for my app to match the icon style on macOS Big Sur. Here is how to make .icns file from png files. You don't need to use any app for doing it but only a built-in command-line tool.

Make a folder named `***.iconset` (e.g., `desktop-icon.iconset`) and prepare files like so:

```shell
> ll
total 49976
drwxr-xr-x  13 user  staff       416 Jan 12 19:23 desktop-icon.iconset/

> ll desktop-icon.iconset/
total 1376
-rw-------  1 user  staff   10416 May  6  2019 icon_128x128.png
-rw-------  1 user  staff   26457 May  6  2019 icon_128x128@2x.png
-rw-------  1 user  staff     665 May  6  2019 icon_16x16.png
-rw-------  1 user  staff    1651 May  6  2019 icon_16x16@2x.png
-rw-------  1 user  staff   26457 May  6  2019 icon_256x256.png
-rw-r--r--@ 1 user  staff   91117 Jan 12 19:06 icon_256x256@2x.png
-rw-------  1 user  staff    1651 May  6  2019 icon_32x32.png
-rw-------  1 user  staff    4331 May  6  2019 icon_32x32@2x.png
-rw-r--r--@ 1 user  staff   91117 Jan 12 19:06 icon_512x512.png
-rw-r--r--@ 1 user  staff  422658 Jan 12 19:21 icon_512x512@2x.png
```

The folder content looks like this:

![Screen Shot 2021-01-12 at 22.31.38](https://dev-to-uploads.s3.amazonaws.com/i/avchmzft8t7stcyr54it.png)
 

Generate `.icns` file:

```
> iconutil --convert icns desktop-icon.iconset
```

Then, you should get a file like so:

![Screen Shot 2021-01-12 at 22.34.20](https://dev-to-uploads.s3.amazonaws.com/i/myqwqa1o92szj2zt16pq.png)

Hope that helps!

---

* [@inkdrop_app](https://twitter.com/inkdrop_app)
* [Inkdrop - Note-taking App with Robust Markdown Editor | Inkdrop](https://www.inkdrop.app/)
Setting goals for 2021 - A brief guide to personal goal setting
Tags: productivity
Published: 2021-01-12 13:33:58

I'm a big fan of personal goal setting. Not just for the sake of it, but because I believe setting goals can make your life more meaningful and inspiring. 

Sometimes it's not easy though, especially the part of completing a goal. So how do you get started? The content available on the subject is downright prolific. There is so much information out there, in fact, that it can be overwhelming to pick a program, make a plan, and actually get into the business of goal setting and achievement.

This guide was built to help you get started, and set meaningful goals to sharpen your focus. 

https://blog.doit.io/goal-setting/
Make a Github Profile Finder | Learn Ajax Get Requests
Tags: webdev, tutorial, javascript, showdev
Published: 2021-01-12 13:29:35

{% youtube 7weVorqT89M %}

In this Video, you will be able to learn how to scrape data from a Public API and dynamically Update HTML Elements using Jquery and how to perform GET Requests in Jquery Ajax !!!

Try The Live Demo at [https://git-profile-finder-neatcoder.netlify.app](https://git-profile-finder-neatcoder.netlify.app)

Get The Source Files from [https://github.com/Neat-Coder23/Github-Profile-Finder](https://github.com/Neat-Coder23/Github-Profile-Finder)

Support My Channel at [https://www.youtube.com/channel/UC_x91mqbyHX4-meYOpMxyUA](https://www.youtube.com/channel/UC_x91mqbyHX4-meYOpMxyUA?sub_confirmation=1)

Have Fun Coding !!
Write Jira-flavoured Markdown the easy way!
Tags: webdev, vscode, markdown
Published: 2021-01-12 13:28:04

---
title: Write Jira-flavoured Markdown the easy way!
published: true
description: Jira markdown is different, use this extension to convert your vanilla markdown to Jira-flavoured
tags: webdev, vscode, markdown
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3odwv9nnmzibd5mtzal2.jpg
---

Like a lot of developers, I like to write in [Markdown](https://en.wikipedia.org/wiki/Markdown). Also, like a lot of developers, I use [Jira](https://www.atlassian.com/software/jira) a lot. The trouble is that Jira's Markdown is different to the Markdown I'm used to using.

For example, when I want to indicate a Heading using Markdown, I use the `#` symbol.

```markdown
  ## Heading 2
```

If I'm adding text to Jira, the way to write the same heading is…

```markdown
  h2. Heading 2
```

I'm a lazy person, as [all devs should be](https://blog.codinghorror.com/get-me-the-laziest-people-money-can-buy/), so I don't want to learn two different flavours of Markdown.

## [transnano](https://marketplace.visualstudio.com/publishers/t-nano) to the rescue!

I spend almost all of my day in VS Code and there's an extension that does exactly what I want: [Markdown to confluence for VSCode Extension](https://marketplace.visualstudio.com/items?itemName=t-nano.markdown-to-confluence-vscode).

Now I can write my Jira ticket descriptions in the flavour of Markdown I'm most familiar with and use this extension to convert it into the flavour that Jira and Confluence understands.
How to set up a MariaDB server with docker on Mac
Tags: docker, mariadb
Published: 2021-01-12 12:33:46

Create account in docker hub.
install docker from docker hub.
run `docker -v` to check it is installed

run `docker pull mariadb` in the terminal to pull in the MariaDB image

Create volume with a volumeName:
`docker volume create volumeName`

Create container with name containerName that links to volume with volumeName and to run it on port 3307 (you can use port 3306 if nothing is being used by it on your Mac) - note the reference to 3306 is the port inside the docker instance, 3307 is the port used on your local Mac:
run `docker run --name containerName-mariadb -e MYSQL_ROOT_PASSWORD=password -v volumeName:/etc/mysql/conf.d -p 3307:3306 -d mariadb:latest`

Connect to MariaDB server with table plus

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


source: https://laracasts.com/series/guest-spotlight/episodes/2
Upload Files with FormData in .NetCore, without Forms
Tags: netcore, csharp, files
Published: 2021-01-12 13:13:06

The code is self explainatory...

Client Side

```js
async function uploadFile() {
  const formData = new FormData();
  const file = new File(["Hello Dev Users"], "devnotes.txt", { type: "text/plain" })
  formData.append("formFile", file);
  try {
    const res = await fetch("/uploadfile", {
      method: "POST",
      body: formData
    });
    return res;
  } catch (ex) {
    console.log(ex);
  }
}
uploadFile().then(r => console.log(r.statusText));
```  

In Controler

```csharp
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.IO;

namespace file.Controllers
{
  public class FileModel
  {
    public IFormFile FormFile { get; set; }
  }

  [Route("/uploadfile")]
  [ApiController]
  public class FileController : ControllerBase
  {
    [HttpPost]
    public ActionResult Post([FromForm] FileModel file)
    {
      try
      {
        string fileName = file.FormFile.FileName;

        string path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", fileName);

        using (Stream stream = new FileStream(path, FileMode.Create))
        {
          file.FormFile.CopyTo(stream);
        }

        return StatusCode(StatusCodes.Status201Created);
      }
      catch (Exception)
      {
        return StatusCode(StatusCodes.Status500InternalServerError);
      }
    }

  }
}

```