teleren/devto huggingface dataset:
Shipping Swag 📦
Published: 2021-01-01 19:13:31

Hey y'all! 

I've decided to start off 2021 with a little project. Throughout 2020 I shipped a tonne of swag to attendees for hackathons and events alike. 

So for all you hackathon organisers, I've put together swagshiphack.dev for all your swag distribution needs 🙌

Feel free to ping me an email if you'd like any help making your online event that little bit more awesome 💯
Baixe a ISO do Ubuntu Minimal 20.04
Tags: linux, ubuntu, braziliandevs
Published: 2021-01-01 19:12:28

Olá pessoal, já temos disponível a versão do **Ubuntu Minimal 20.04**, a ISO tem o tamanho de aproximadamente **78 MB**, para quem tiver interesse em realizar o _download_ pode acessar este [link](http://archive.ubuntu.com/ubuntu/dists/focal/main/installer-amd64/current/legacy-images/netboot/).
The first Python Challenge in 2021: 30 Days Of Python Challenge
Published: 2021-01-01 19:09:05

I am a developer, instructor, and content creator. I am the creator of 30 Days of Python, 30 Days of JavaScript, and 30 Days of React.

Python is gaining more popularity from year to year. It is a general-purpose programming language that allows us to do almost anything we can imagine. 

Just to mention a few uses of python, 
It can be used:
- To develop a desktop application
- To use it as a server-side programming language of any purpose
- To do web scraping, data cleaning, data munging, and wrangling
- To do data analysis
- To apply machine learning models
- etc

Now, it seems Python is the standard tool for anything related to data, data analysis, data science, machine learning, and AI. Therefore, learning Python in 2021 will be the best decision for anyone who starts programming or a seasoned developer. 

Today, I would like to inform you about 30 days of Python. It was the most popular python learning material in 2020 in the data analysis, data science, and machine learning community. I believe it will be the most useful reference material for the next five years. It has been trending on GitHub for a couple of months in 2020.

This material helped thousands of developers, data analysts, data scientists to understand python very well and improve their problem-solving skills and most students and developers use it as standalone reference material.

This challenge has both basic and advanced concepts of Python, NumPy, Pandas, Flask, MongoDB, and API Development. It has more than 300 questions and four projects.

The challenge has also a very supportive telegram group that helps people whenever they get stuck.

If you have a plan to learn Python in 2021, you must try to check 30 days of Python first. 

Steve Nouri put the 30 Days Of Python challenge on the 2nd rank among the best Python GitHub repositories.

Here is the link:
30 Days Of Python: https://lnkd.in/epW6d_U

# Other challenges

30 Days Of JavaScript: https://lnkd.in/efqy_df
30 Days Of React: https://lnkd.in/d8VAS2J
Day 1
Published: 2021-01-01 19:01:39

learned some Html and CSS through "complete intro to Web Development course" by Brain Holt in Frontend Masters.
--------------------------------------------------------------------
something he said that I loved:-
Don't try to understand every piece all at once. There are times where it's okay to just trust that something works and come back later to understand how. It's a tough balance because you do want to try to understand what's going on all at once ;
Starting the year with a simple JS question
Published: 2021-01-01 19:01:30

Look at the following code:

```javascript
const getData = () => Promise.resolve("OK")

try {
  getData().then(data => {
    if(data === "OK") {
      throw new Error("I am an error")
    }
  })
} catch(err) {
  console.log("I caught an error here:", err)
}
```
What do you think is going to happen? Is the `console.log` statement going to be executed? Why or why not? 

How can we refactor this code so that it works as expected?

Watch the solution in my Youtube channel! https://www.youtube.com/watch?v=PB0FSbUFulc&ab_channel=DavidArmend%C3%A1riz
Estrutura básica do HTML
Tags: html, braziliandevs, beginners, webdev
Published: 2021-01-01 18:49:43

Crie um arquivo com o nome `index.html` e adicione a estrutura básica de um documento HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Título do página</title>
  </head>
  <body>
    Conteúdo
  </body>
</html>
```

Abra o arquivo `index.html` no navegador, caso queira aprender a utilizar um servidor local para desenvolvimento, indico este [link](https://franciscochaves.com.br/blog/http-server-servidor-leve-e-rapido). Podemos observar que o conteúdo é exibido no navegador.

![Estrutura básica HTML](https://dev-to-uploads.s3.amazonaws.com/i/8efbzeuq5a1i8tp3klzr.png) 

{% jsfiddle https://jsfiddle.net/franciscochaves/Lvtko421 result,html %}

Também podemos adicionar um título com uma cor vermelha.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Título do página</title>
  </head>
  <body>
    <h1 style="color:red">Conteúdo</h1>
  </body>
</html>
```

![Estrutura básica HTML com título](https://dev-to-uploads.s3.amazonaws.com/i/thsp1za51r396xnc1d5t.png)
 
{% jsfiddle https://jsfiddle.net/franciscochaves/k279qzpw result,html %}

Agora vamos entender a estrutura básica:

- `<!DOCTYPE html>` indicar ao navegador para utilizar a última versão `html`;
- `<html>` início do documento;
- `<head>` local onde fica informações sobre metadados: título, autor, descrição, palavras-chave e etc; e
- `<body>` conteúdo do documento exibido pelo navegador.

Podemos observar no código abaixo a _tag_ `h1`, o atributo `style` que altera a cor do texto, e o conteúdo da _tag_.

```html
<h1 style="color:red">Conteúdo</h1>
```

Algumas informações sobre os atributos:

- Os atributos são sempre especificados na _tag_ inicial (_tag_ de abertura), nesse caso o `<h1 style="color:red">`;
- Os atributos geralmente são declarados com nome e valor;
- Todos os elementos HTML podem ter atributos; e
- Atributos fornecem informações adicionais sobre um elemento.
Yielding for testability in python
Tags: python, testing, generators, yield
Published: 2021-01-01 18:48:23

(This is a crosspost from my blog: https://blog.meadsteve.dev/programming/2021/01/01/yielding-for-testability/)

I was writing a small cli tool and wanted to try out [typer](https://typer.tiangolo.com/).
I'm a big fan of fast api, so I thought a cli library from the same author was worth a look.
This blog post will cover a pattern I ended up using to help with testing.

## The app and the first attempt at tests
I won't go into too much detail about my actual problem, but I ended up with something like the 
following:

```python
import typer

def my_command(some_input: str):
    typer.echo(f"Starting up")
    # Do the first thing
    typer.echo(f"Result of first thing was X")
    # Do the second  thing
    typer.echo(f"Result of second thing was X")
    # Do some clean up
    typer.echo(f"All done")

if __name__ == "__main__":
    typer.run(my_command)
```

The value in the code I was writing was the output of `typer.echo`. So I wanted to test it.
Initially in my tests I was monkey patching `typer.echo` and asserting that it matched what
I wanted. This was okay, but I don't like monkey patching with mocks as it often becomes 
very tangled and complicated.

## A solution? Yielding.
Since I already had a function representing my command invocation I thought it would be
really nice if I could just return the output. Then I could call the function and assert
that it had output what I wanted. However, given that quite significant delays could
happen in between each of my echo statements I didn't really want to wait until the end
to get all my output. So instead `yield` seemed like a good candidate.  I updated my code
to look something like this:

```python
@dataclass
class Echo:
    message: str

def my_command(some_input: str):
    yield Echo(f"Starting up")
    # Do the first thing
    yield Echo(f"Result of first thing was X")
    # Do the second  thing
    yield Echo(f"Result of second thing was X")
    # Do some clean up
    yield Echo(f"All done")

```

Now my function was a generator. The code looked almost identical which was nice. 
I did need to add a layer on top to run this generator but this was not too complicated:

```python
import typer

def run_cli(generator_func):
    for output_line in generator_func():
        typer.echo(output_line.message)
```

and now my test cases could look like this:

```python
def test_something():
    actual = list(my_command("input"))
    expected = [
        Echo("first message"), 
        Echo("second message"), 
        Echo("etc.")
    ]
    assert actual == expected
```

I'm counting this as a success. My tests became a lot simpler which was my initial goal.
In addition, the `my_command` function lost its dependency on the `typer` library and became
agnostic to how the input is displayed to the user (though this wasn't really my initial goal).
Module 1 - Welcome to the career path
Tags: javascript, css, scrimba, html
Published: 2021-01-01 18:12:43

Just completed the first module and I'm excited and that's how it went: 
1. How to use Scrimba's interactive tutorials. 
2. Show you a big chunk of code and help you make big and satisfying changes. A great way to help overcoming fear that it's too hard
3. Few challenges to make your own simple changes! They still have a satisfying effect and motivate you to learn more.
And here's my first website after just changing few lines of code
![Before](https://dev-to-uploads.s3.amazonaws.com/i/hhw78uskyilgvp5ygrlu.png)![After](https://dev-to-uploads.s3.amazonaws.com/i/0j8z7xaycwfhdhi4ois9.png)
4. A few advices get the most from this tutorial
5. Introducing learning method 
**HTML > CSS > Javascript > Project**  
6. Introducing you to your teachers
7. Inviting you to Discord and a Pro Member role that gives you access to special discord channels.   

Despite being just introduction this course already hooked me to learn and it comes from a person who gets bored during most courses very fast 😅 

Here's [Navigation Post](https://dev.to/dominikgorczyca/frontend-developer-career-path-navigation-37pm) if you want to see more modules

*Tell me what do you think about this post and feel free to give some advice!*
Go LSP in Sublime Text
Tags: go, sublimetext, lsp, editor
Published: 2021-01-01 18:03:24

Here is how to configure LSP (language server protocol) for Go development in Sublime Text.

## Prerequisites

* go
* gopls
* gotools (gofmt, goimports...)

## Packages

* sublimelsp/LSP

## LSP settings
Open LSP Settings, then paste the below one


// for MacOS
```json
{
    "clients":
    {
        "gopls":
        {
            "command": [
                "<path_to>/go/bin/gopls",
                "-v",
                "-rpc.trace",
                "-logfile=<path_to>/gopls.log"
            ],
            "enabled": true,
            "env": {
                "PATH": "<echo $PATH in terminal then paste its value here>"
            },
            "scopes":["source.go"],
            "syntaxes": ["Packages/Go/Go.sublime-syntax"],
            "settings": {
                "gopls.usePlaceholders": true,
                "gopls.completeUnimported": true,
            },
            "languageId": "go"

        }
    }
}
```

// for Windows
```json
{
    "clients":
    {
        "gopls":
        {
            "command": [
                "<path_to>\\bin\\gopls.EXE",
                "-v",
                "-rpc.trace",
                "-logfile=<path_to>\\gopls.log"
            ],
            "enabled": true,
            "scopes":["source.go"],
            "syntaxes": ["Packages/Go/Go.sublime-syntax"],
            "settings": {
                "gopls.usePlaceholders": true,
                "gopls.completeUnimported": true,
            },
            "languageId": "go"
        },
    }
}
```

## LSP Key Binding

Search LSP Key Binding then paste the below value into the field

```json
[
	// Go To Definition
    {
        "command": "lsp_symbol_definition",
        "args": {
            "side_by_side": false
        },
        "keys": [
            "ctrl+d"
        ],
        "context": [
            {
                "key": "lsp.session_with_capability",
                "operator": "equal",
                "operand": "definitionProvider"
            },
            {
                "key": "auto_complete_visible",
                "operator": "equal",
                "operand": false
            }
        ]
    },
]

```

## Known Issues

- Auto-format on macOS doesn't work but works well on Windows 


=====

Updated: This package is now working well with simple set up. https://packagecontrol.io/packages/LSP-gopls

Gofumpt for auto-format also works: https://github.com/mvdan/gofumpt#sublime-text
Using symbols in CSS selectors
Tags: css, webdev, ui
Published: 2021-01-01 17:47:12

I recently came across a selector that caught my attention - `.w-1/4`. This class sets width to quarter in the Tailwind CSS framework.
Seeing a backslash in a class name was odd at first. Is it even valid? Turns out, it is.

There's a small gotcha. Defining the class name like `.w-1/4 { ... }` won't work.

# So, how can we get class names like that?
Well, you have to escape the backslash with a forward slash.

For example,
```css
.w-1\/4 {
  width: 25%;
}
```
```html
<div class="w-1/4">Hello World</div>
```
#But wait, that's not all.
We are not limited to just the backslash. You can do the same with almost anything which is a character from your keyboard!

Check this out,
```css
.\%\@\% {
  ...
}
```
```html
<div class="%@%">Hello World</div>
```
# Conclusion
This implementation can come in quite handy and let you do selector names like `sm:flex`. Just make sure not to overdo it like in the later example.
Create a responsive image filter portfolio using HTML, CSS, and JavaScript
Tags: html, css, javascript, cwb
Published: 2021-01-01 17:45:15

The image filtering is made with HTML, CSS, and JavaScript. They are usually used in the portfolio gallery. It is very useful and Important e.g. users can directly filter the images they wanted to view and it increases user interaction, you can also use it by copy-pasting the code from my site.
<a rel="nofollow" href="https://codewithbishal.com/example/filter-images-using-javascript">View it on our website</a>
View More :
<ul>
<li><a rel="nofollow" href="https://codewithbishal.com/example/create-an-image-slider-with-html">Pure CSS automatic Image Slideshow</a></li>
<li><a rel="nofollow" href="https://codewithbishal.com/example/html-css-social-media-buttons">Social media icon animation</a></li>
</ul>
At first, on our webpage, there is a preview of our image filter then there are a few QNA, and an overview of the blog. There is a button to copy the codes (HTML, CSS, and JavaScript). You can also try it on our website

You can view and copy the source code files through the link given below. <a rel="nofollow" href="https://codewithbishal.com/example/filter-images-using-javascript">View and Copy Source Code</a>
How to build or develop LOGIC in programming.
Tags: javascript, tutorial, codenewbie, programming
Published: 2021-01-01 17:41:52

Hello! this is my first ever blog on the internet, so I thought about what to write, after a while I was cleared that I should help new programmers who can learn from projects by doing and could learn how to build logic in programming. so, without delay let's get in...

1. LOGIC Building
before writing any code, needs to think about the logic that how can you do or solve a problem, and if you are successful to find or building logic then the rest of the tasks becomes too easy.

2. Break Problems into subproblems
Continuing to learn...
Tags: devjournal, learning, programming
Published: 2021-01-01 17:29:45

I'm going to cut straight to the chase...I'm feeling a little uninspired and need the help of the dev community, especially those intermediate programmers out there.

How did I end up here?

I've spent much of the last few years learning to code...initially I did a Udemy course on iOS development in order to build an app idea I had.

Since then I've took a deeper dive into full stack development, initially working through much of the freeCodeCamp material and then finally completing a bootcamp with CareerFoundry and landing a job as a web developer which I love!

But I don't want to stop there...I want to keep learning and this is where I've found myself right now. I found it easy as a beginner to find courses and tutorials but I feel like I need something meatier now...

So...developers who've been around a while...
- Where do you go for inspiration when learning?
- What projects are great to build to push yourself?
3 Content Marketing Tips For SaaS
Tags: saas, startup
Published: 2021-01-01 17:25:19

SaaS businesses now increasingly rely on organic traffic from SEO for generating leads for their businesses. It's scalable and cost-effective — especially in the long-term. Here are three tips on types of content you can create for immediate business results:

**1. Write a "best" article featuring yourself**

Instead of thinking content marketing is only about non-promotional "self-awareness", write an article about the broad category your SaaS company belongs to. Feature yourself in a well-placed manner telling the reader how you're unique.

For instance, website building software companies, like Squarespace, could create an article on [best portfolio website builders](https://thecreativeshour.com/best-portfolio-websites/). 

And mention themselves in an organic manner. Do it tastefully, only telling what's unique about you — not trying to take the first spot and appealing to "everyone."

**2. Launch your course**

In 2020, the pandemic accelerated the adoption of online education. It's time hence for you to capitalize on the trend by offering a free course as it could act as an effective lead generator. 

Ahrefs, an SEO suite, did this by offering their paid course "blogging for business" for free. Don't delay building yours in 2021. Choose from one of these [online course platforms] (elitecontentmarketer.com/best-online-course-platforms/), and get started on creating a course around the pain points of your audience.

**3. Write an alternative article**

The “alternatives” format of articles lets you piggyback on the popularity of your competitor brands. Suppose you’re a company selling grammar checking software, a pretty competitive space (with Google generating over 69,70,000 results for the query). Creating recognition and trust for your brand will take time.

To get immediate revenue from content, you can write an article around [Grammarly’s alternatives] (https://elitecontentmarketer.com/grammarly-alternative/) (a leader in the software category of grammar and punctuation checker software). Mention yourself but do an honest review of other competitors as well that someone looking for switching from “Grammarly” can consider checking.

**Pro tip**: Instead of writing a listicle article in this alternative format, you can also consider an exhaustive comparison with one key competition in a “vs.” format. Here’s an article comparing [Adobe Portfolio with Squarespace] (https://thecreativeshour.com/adobe-portfolio-vs-squarespace/). This format carries benefits similar to the alternative format.

Both of these content strategies work having been executed by billion-dollar brands such as Shopify and HubSpot. So go out there and implement one of these in your [SaaS business in 2021] (https://elitecontentmarketer.com/saas-stats/).
New Podcast
Tags: podcast
Published: 2021-01-01 17:20:39

New podcast announced called [9to5 Hackers](https://9to5hackers.com), where they discuss topics such as politics, entrepreneurship, news, education, our health care system and more. Some may consider it to be part of [conservative podcasts](https://9to5hackers.com), but it is pretty even-keeled but tends to lean towards the right in terms of beliefs.

9to5 Hackers is a twice-weekly podcast discussing all of the hot topics effecting the millennial generation in America today. Guests such as educators, fitness experts, doctors, veterans, and others fill the roster weekly.

The show is hosted by [Nick Landy](https://nlandry.com) and [Patrick Brouillette](https://patrickbrouillette.com), both serial entrepreneurs hailing out of Washington and Illinois, respectively.

Tune in weekly at 9to5hackers.com!
Ricing your linux
Published: 2021-01-01 17:11:44

I definitely love this site http://dotshare.it/

I use it for color coding my weechat and vim


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

Update: Just updated my urxvt .Xresources to have the Dracula colorscheme.

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

Just paste the below into your .Xresources

*.foreground: #F8F8F2
*.background: #282A36
*.color0:     #000000
*.color8:     #4D4D4D
*.color1:     #FF5555
*.color9:     #FF6E67
*.color2:     #50FA7B
*.color10:    #5AF78E
*.color3:     #F1FA8C
*.color11:    #F4F99D
*.color4:     #BD93F9
*.color12:    #CAA9FA
*.color5:     #FF79C6
*.color13:    #FF92D0
*.color6:     #8BE9FD
*.color14:    #9AEDFE
*.color7:     #BFBFBF
*.color15:    #E6E6E6
How to use Google One Tap in your React or Vue project?
Tags: react, vue, javascript, webdev
Published: 2021-01-01 16:52:35

Hi there,
I will show you how to use Google One Tap in your project. For this, i use my own npm package [google-one-tap](https://github.com/BurakGur/google-one-tap#readme).

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

####Get your Google API client ID
Open the "Credentials" page of the [Google APIs console](https://console.developers.google.com/apis).
Create or select a Google APIs project. If you already have a Google Sign-In button, use the existing project and the web client ID.


**1. Install package on your project.**

```
npm install google-one-tap
```
or 
```
yarn add google-one-tap
```

**2. After this, import package.**
```javascript
import googleOneTap from 'google-one-tap';
```
**3. Use googleOneTap method with options.**
```javascript
const options = {
	client_id: '___CLIENT_ID___', // required
	auto_select: false, // optional
	cancel_on_tap_outside: false, // optional
	context: 'signin' // optional
};

googleOneTap(options, (response) => {
	// Send response to server
	console.log(response);
});
```

**Vue.js Full Code Example**
```javascript
import googleOneTap from 'google-one-tap';
export default {
	mounted() {
		const options = {
			client_id: '___CLIENT_ID___', // required
			auto_select: false, // optional
			cancel_on_tap_outside: false, // optional
			context: 'signin', // optional
		};
		googleOneTap(options, (response) => {
			// Send response to server
			console.log(response);
		});
	},
};
```
After all this, you must send response to server. 

**Node.js Server Example** 
```javascript
const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);
async function verify() {
	const ticket = await client.verifyIdToken({
		idToken: token,
		audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
		// Or, if multiple clients access the backend:
		//[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
	});
	const payload = ticket.getPayload();
	const userid = payload['sub'];
	// If request specified a G Suite domain:
	// const domain = payload['hd'];
}
verify().catch(console.error);
```

Thanks for reading 😊