teleren/devto huggingface dataset:
Tags HTML pouco usadas
Tags: html, beginners, programming, tutorial
Published: 2021-12-01 05:50:32

Precisa de um autocomplete? O HTML tem!

Precisa de um gauge para mostrar algum valor? O HTML tem!

Precisa de um collapse sem ser bootstrap? O HTML também tem!

Nesse breve resumo vou listar algumas tags que são raramente usadas ou até mesmo desconhecidas e que, na hora da construção de um blog, site ou até mesmo landing page pode ser de grande valia.

### Datalist
A nossa primeira tag é  __datalist__. Nada mais é do que um lista de opções que são atreladas a um input, e ao digitar, as opções são sugeridas numa espécie de autocomplete.

```html
<form>
  <input list="browsers" name="browser" placeholder="Browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Safari">
  </datalist>
</form>
```
### Progress
A nossa próxima tag é a __progress__. Sem tempo ou habilidade para fazer uma barra de progresso estilosa? Usa a do HTML mesmo!

```html
<progress value="50" max="100"></progress>
<progress></progress>
```

### Meter
Quero mostrar uma lista de habilidades e ter um __gauge__ bonitinho. 

```html
<label for="meter">HTML</label>
<meter value="10" min="1" max="10" id="meter">10 de 10</meter>


<label for="meter">Javascript</label>
<meter value="8" min="1" max="10" id="meter">8 de 10</meter>
```

### Details
Preciso de um __collapse__ mas não quero usar Boostrap. O que eu faço? O HTML já tem isso!!! =D

```html
 <details>
   <summary>Lista de linguagens</summary>
   <dt>
     <dd>Javascript</dd>
     <dd>Python</dd>
     <dd>Reust</dd>
   </dt>
 </details>
```
Uma coisa do details é que a tag __summary__ vai ser o nosso cabeçalho e todo o restante vai ser o body do __collapse__. Sabe as tags __fieldset__ e __legend__? Pois vai funcionar exatamente assim.

Tem umas outras bem bacaninhas como o [map](https://www.w3schools.com/tags/tag_map.asp) por exemplo.


Dá uma olhada lá no [repo](https://github.com/pazfelipe/htmls-pouco-usadas) que eu disponibilizei. Vai ter essas e outras bem legais também! =D
How linux users install a text editor
Tags: linux, vim, bash
Published: 2021-12-01 05:47:50

---
title: How linux users install a text editor 
published: true
tags: linux, vim, bash

---

In honor of the neovim 0.6.0 release, I decided to do a funny skit installing
neovim, and fix up my install script in the process as part of my challenge to
fix up my dotfiles.  I ran into one snag where I was not updating the repo that
I cloned.  I moved it to the directory I now keep third-party git repos and set
it to update with ansible. 

{% youtube 64oKLphhBuo %}

The thing that took me the longest to realize was.... I had a path issue
pointing me to an old install of the appimage over the fresh build,  fixed that
up and now we are on 0.7.0 nightly.


## Related Links

https://neovim.io/
https://github.com/neovim/neovim
https://github.com/neovim/neovim/releases/tag/v0.6.0
Finding Developers For Calinix
Tags: calinix, linux, developers
Published: 2021-12-01 05:45:58

**So if you don't know what CalinixOS is, it's an Arch based linux users focused on power users**

We currently need developers for Calinix

GUI Developers. Calinix is FOSS so don't expect any payment from our side. Your contributions are what makes the open source projects great. Join our developer team and get mentioned in our Website and other social media handles. We currently need GUI developers who can make beautiful lightweight apps (hence no electron allowed)

Try to avoid using python, cuz of its slowness, C++ and Java grow as better options. Even if you use python you need to give efficient design. 

For joining us, mail us at contact@calinix.tech

Or join our Discord Server: https://tinyurl.com/calinixdisc

Arghya Sarkar,
Founder, Lead Developer, CEO
The Calinix Project
#25DAYSOFTECHTIPS
Tags: webdev, newbie, beginners, programming
Published: 2021-12-01 05:11:52

## 25 Days of Tech Tips
Let's start a new trend this year. I want to help give back to the amazing tech community by sharing tips and tricks. The goal is that each day at least one person learns something new from the content you share. 

## How to participate
Each day from 12/1 through 12/25, share one post on social media that is a tech tip, using the hashtag #25DAYSOFTECHTIPS 

I will be sharing mine daily on [my Twitter](https://twitter.com/_chrisbenjamin)

## What counts?
You can share tips and tricks about anything in IT, it doesn't have to be web development specific, you can tweet about your subject matter or find something new and interesting to share with the community. 

## Example Topics
- JavaScript
- HTML
- CSS
- React
- Python
- Ruby
- PHP
- Next.js
- Remix 
- Vue
- Angular
- Networking
- Linux
- Windows
- Powershell

If you are sharing code, you should try and include a snippet, or a link to help your audience understand your tip or trick. A great website for sharing code snippets is [Ssnippet](https://www.ssnippet.app/)

### Example Tech Tip
#25DAYSOFTECHTIPS
Did you know you can style your Console.Log() messages? This helps certain messages stand out from others when debugging. 
Learn more here: https://developer.mozilla.org/en-US/docs/Web/API/console#examples

![Example Code Snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmidwnwb0iynvwdnocjz.png)
This code produces:

![Example Code Output Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mw2a3ssh3826b0o65m4.png)


I cannot wait to see all the tips and tricks that you all share and I look forward to learning a few things myself! Please share this with your followers so they may learn and/or participate!
Auditting Compiler.md for IPC 144 Project
Tags: seneca, ipc144
Published: 2021-12-01 05:09:40

In Release 03 of the Open source course, I had a chance to work on [IPC 144](https://github.com/Seneca-ICTOER/IPC144) project that helps improve and maintain the IPC144 course's notes. I was working on auditing and editing the Compiler.md page.

## Issues
Prof. David has listed [issues](https://github.com/Seneca-ICTOER/IPC144/issues/18) that should be checked and edited to ensure the markdown page looks well. I simply followed the guide, and I improved the page by:
* Fixing typos and Markdown syntax
* Fixing Frontmatter metadata
* Adding inter-site links to other pages that have related info
* Adding alt text on images
* Improving page's Accessibility

There were some requirements I have not fixed on this page, such as centring images horizontally or making sure images work in dark and light modes. I feel like these requirements/issues should be set up globally instead of locally so the project will have a consistent style throughout all pages.

## Result
I also got some reviews from my classmate to improve my [PR](https://github.com/Seneca-ICTOER/IPC144/pull/73). Thank you, guys, for taking the time to review it. It could not complete without your recommendations. 
Finally, my Pr is merged, and this task helps me learn more about Docusaurus, LightHouse tool, and Web accessibility.
How to create a Twitter bot in python
Published: 2021-12-01 05:07:58


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6845g5yr2sf8pz0oy1oo.png)

In this article, we will learn how to create a Twitter bot using a module called `simpletwitter`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td0gl0jr8bm62gstsel4.gif)
 
1. Install the simpletwitter module

`pip install simpletwitter `

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3y9n6hywuniosof7t2ln.gif)  

Yes we have successfully installed the module

Now get into the code,

`from simpletwitter import SimpleTwitter`

Create an instance for the class SimpleTwitter

```
email = "Twitter_User_Email_Address"

password = "Twitter_Password"

user_name = "Abipravi1" 
#here i have entered my twitter username but you need to enter your's in this case

no_of_tweets = 10 
#this value is necessary how many no of tweets you want to perform operation

bot = SimpleTwitter(email, password, no_of_tweets, user_name)
```

That's all we set up all the necessary requirements, Now let us go and perform the Twitter operations…..

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esp6nal4gh6yyxtdajpv.gif) 

```
hashtags = ['#abipravi', #pythonmodule', '#twitter_bot']
tweetmessage = "My first tweet by simple twitter"
bot.login() 
# to login into the account
bot.like_tweet(hashtags) 
# like the tweet
bot.unlike_liked_tweets(5) 
# unlike the liked tweet
bot.tweet(tweetmessage) 
# put some tweet
bot.only_like_top_tweet(hashtags)
# this will like only the trending tweet
bot.retweet(hashtags) 
# retweet some tweets based on particular hashtags
```

Finally We have have it......

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esthup6mgmrt25erkya7.gif)
 
 
We have made our own Twitter bot

**Full Code:**

```
from simpletwitter import SimpleTwitter

email = "Twitter_User_Email_Address"

password = "Twitter_Password"

user_name = "Abipravi1" 
#here i have entered my twitter username but you need to enter your's in this case

no_of_tweets = 10 
#this value is necessary how many no of tweets you want to perform operation

bot = SimpleTwitter(email, password, no_of_tweets, user_name)
#Creating Instance

hashtags = ['#abipravi', #pythonmodule', '#twitter_bot']

tweetmessage = "My first tweet by simple twitter"

bot.login() 
# to login into the account

bot.like_tweet(hashtags) 
# like the tweet

bot.unlike_liked_tweets(5) 
# unlike the liked tweet

bot.tweet(tweetmessage) 
# put some tweet

bot.only_like_top_tweet(hashtags)
# this will like only the trending tweet

bot.retweet(hashtags) 
# retweet some tweets based on particular hashtags
```


**_Thanks for reading

If You like this post make sure you follow us on_**

[Instagram](https://www.instagram.com/praveenkumar_abipravi/)
[Twitter](https://twitter.com/ABIPRAVI1)
[Linked In
](https://www.linkedin.com/in/praveen-kumar-9b09441b7/)[BlogPost](https://medium.com/r/?url=https%3A%2F%2Fabipraviii.blogspot.com%2F)
Implementasi SSE pada Golang (Backend)
Tags: sse, go
Published: 2021-12-01 04:34:20

Pada kali ini, kita akan menggunakan package [go-sse](https://github.com/alexandrevicenzi/go-sse). 

Untuk install package tersebut, silakan eksekusi instruksi berikut pada terminal/command prompt.
`go get github.com/alexandrevicenzi/go-sse`.

Di bawah ini adalah contoh kode program implementasi SSE.
```
package main

import (
	"encoding/json"
	"net/http"
	"strconv"
	"time"

	"github.com/alexandrevicenzi/go-sse"
)

func main() {
	name := "Latest Event"
	channel := "new-update-channel"

	const jsonData = `
			{
				"stringField": "Value",
				"intField": 123,
				"floatField": 3.14159,
				"booleanField": true
			}
		`

	var sseData map[string]string
	json.Unmarshal([]byte(jsonData), &sseData)

	s := sse.NewServer(nil)
	defer s.Shutdown()

	// Konfigurasi route http
	http.Handle("/", http.FileServer(http.Dir("./static"))) // dummy static html file yang akan menampilkan event source
	http.Handle("/events/", s)

	// Mengirimkan data setiap 3 detik sekali
	go func() {
		for {
			id := strconv.FormatInt(time.Now().UTC().UnixNano(), 10)
			sseData["timestamp"] = time.Now().Format("2006-01-02 15:04:05")

			data, err := json.Marshal(sseData)
			if err == nil {
				s.SendMessage("/events/"+channel, sse.NewMessage(id, string(data), name))
			}
			time.Sleep(3 * time.Second)
		}
	}()

	http.ListenAndServe(":8080", nil)
}
```


Setelah itu, kita jalankan function Main.
```
go run main.go
```

Lalu, amati hasilnya.
```
C:\Users\benita.clarissa\Documents\go\src\github.com\Bhinneka\coba-coba>go run main.go
go-sse: 2021/11/28 10:52:29 server started.
go-sse: 2021/11/28 10:52:31 channel '/events/new-update-channel' created.
go-sse: 2021/11/28 10:52:31 new client connected to channel '/events/new-update-channel'.
go-sse: 2021/11/28 10:52:32 message sent to channel '/events/new-update-channel'.
go-sse: 2021/11/28 10:52:35 message sent to channel '/events/new-update-channel'.
go-sse: 2021/11/28 10:52:38 message sent to channel '/events/new-update-channel'.
```

SSE dari sisi backend sudah kita siapkan. Namun, kita perlu melakukan development agar client dapat menerima data yang di-push tersebut. Oleh karena itu, kita perlu menulis script pada sisi frontend yang akan berfungsi sebagai client dari SSE ini. Script pada sisi frontend dapat menggunakan bahasa pemrograman dan framework yang dapat mengakses HTML Server-Sent Events API. Salah satu contohnya adalah React JS.


# Referensi

Cook, D. (2014). _Data Push Apps with HTML5 SSE: Pragmatic Solutions for Real-World Clients_ (1st ed.) [E-book]. O’Reilly Media.
Java Script Truthy/Falsy & Logical Operators
Published: 2021-12-01 04:22:57

## Falsy Values
1. `null`
2. `undefined` 
3. `NaN`
4. `0`
5. `""` empty quotes
6. false

## && and || 

**&&** 

- Returns the first falsy value
- If none found, it will return the last truthy value

**||**
- Returns the first truthy value
- If none found, it will return the last falsy value

```
// both are truthy
truthy1 && truthy2; // truthy2
truthy1 || truthy2; // truthy1

// both are falsy
falsy1 && falsy2; // falsy1
falsy1 || falsy2; // falsy2

// 1st truthy, 2nd falsy
truthy1 && falsy1; // falsy1
truthy1 || falsy1; // truthy1

// 1st falsy, 2nd truthy
falsy1 && truthy1; // falsy1
falsy1 || truthy1; // truthy1
```
Welcomify-me
Tags: actionshackathon21, javascript, opensource, github
Published: 2021-12-01 04:18:48

### My Workflow
This is a simple Action With Listens to new Issue and PRs and check if it's first Issue or PR by user then it greets user a hello Message that you provide.

### Usage
```
name: 'Welcome New Contributors'

on:
  issues:
    types: [opened]
  pull_request_target:
    types: [opened]

jobs:
  welcome-new-contributor:
    runs-on: ubuntu-latest
    steps:
      - name: 'Greet the contributor'
        uses: DK-Khambhadiya/welcomify-me@v0.1
        with:
          token: ${{ secrets.ACTION_TOKEN }}
          issue-message: 'Hello there, thanks for opening your first issue. We welcome you to the community!'
          pr-message: 'Hello there, thanks for opening your first Pull Request. Someone will review it soon.'

```

### Submission Category: 
#####Wacky Wildcards: 


### Yaml File or Link to Code
`https://github.com/DK-Khambhadiya/welcomify-me`


### Additional Resources / Info

- An Open Source Project/Repository that uses This workflows
`https://github.com/DK-Khambhadiya/book-manager`
Code Smell 107 - Variables Reuse
Tags: oop, programming, webdev, tutorial
Published: 2021-12-01 03:15:49

Code Smell 107 - Variables Reuse

*Reusing variables makes scopes and boundaries harder to follow*

> TL;DR: Don't read and write the same variable for different purposes

# Problems

- Readability

- Hidden problems

# Solutions

1. Don't reuse variables

2. [Extract Method](https://dev.to/mcsee/refactoring-002-extract-method-1eee) to isolate scopes

# Context

When programming a script it is common to reuse variables.

This leads to confusion and makes debugging harder.

We should narrow the scope as much as possible.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/88615884493c78d45a57be565964ae5b)
```java
// print line total
double total = item.getPrice() * item.getQuantity();
System.out.println("Line total: " + total );

// print amount total 
total = order.getTotal() - order.getDiscount();
System.out.println( "Amount due: " + total );

// variable is reused
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/9657946be3bcd5a81aebc12d4ef82d0b)
```java
function printLineTotal() {
  double total = item.getPrice() * item.getQuantity();
  System.out.println("Line total: " + total );
}

function printAmountTotal() {
  double total = order.getTotal() - order.getDiscount();
  System.out.println( "Amount due: " + total );
}
```

# Detection

[X] Automatic 

Linters can use the parse tree to find variable definition and usages.

# Tags

- Readability

# Conclusion

Avoid reusing variable names. Use more specific and different names.

# Relations

{% post https://dev.to/mcsee/code-smell-03-functions-are-too-long-4hji %}

# More Info

{% post https://dev.to/mcsee/refactoring-002-extract-method-1eee %}

# Credits

Photo by <a href="https://unsplash.com/@sigmund">Sigmund</a> on <a href="https://unsplash.com/s/photos/recycle">Unsplash</a>
  
* * *

> Simplicity before generality, use before reuse.

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

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
How To Create Custom Middleware In Laravel
Tags: laravel, laravel8, middleware, beginners
Published: 2021-12-01 03:04:15

In this tutorial I will give you example about how to create custom middleware in laravel 6, laravel 7 and laravel 8. laravel 7/8 custom middleware example.

Laravel includes a middleware that verifies the user of your application is authenticated. If the user is not authenticated, the middleware will redirect the user to the login screen. If in your project's have multiple user then we need to use middleware to provide diffrent access or login to diffrent users.

So, let's start create custom middleware in laravel 7/8.

In this example, I have created "roleType" middleware and I will use simply on route, when they route will run you must have to pass "type" parameter and then you can access those request like as below demo link

```
Step 1 : Create Custom Middleware
Step 2 : Register This Middleware on Kernel File
Step 3 : Add Route
Step 4 : Add Controller
```

---

> **_[Read More : How To Create Custom Middleware In Laravel](https://techsolutionstuff.com/post/how-to-create-custom-middleware-in-laravel)_**
Update wallpaper previews on each push
Tags: actionshackathon21, actionshackathon, github, opensource
Published: 2021-12-01 02:24:40

---
title: Update wallpaper previews on each push
published: true
description: My submission to the GitHub Actions x DEV Hackathon 2021!
tags: actionshackathon21, actionshackathon, github, opensource
---

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon 2021, please fill out all sections.)

I maintain a wallpaper collection repository [nordic-wallpapers](https://github.com/linuxdotexe/nordic-wallpapers) and I have a `wallpaper-preview.md` in that repo to preview all the available wallpapers. I used to have a script that needed to be run before each commit to update the wallpapers. I shifted that to GitHub Actions because I thought all wallpaper enthusiasts might not be able to run the scripts.

### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

These are the steps involved in my workflow (not including cloning the repository into the system:
- Get a list of all the available wallpapers
    - This uses the `ls` command and redirects the output of that command into the `wallpaper-preview.md` file wiping the file clean in the process to avoid duplicate previews.
- Add the markdown syntax for previewing images around the file name
    - This step is executed as a multi-line script in the workflow.
    - The first step adds the `![](` in-front of each line using the `sed` tool.
    - The second step adds the `)` at the end of each line using the `sed` tool.
- Add a heading and an empty line between the heading and the wallpapers
    - This adds the page heading `# Wallpapers in this repository` using the `sed` tool.
    - To add a new line, I used the `sed` tool to search for "# Wallpapers" and add an empty line in the immediately next line.
- Commit and push changes to the repository
    - I used EndBug/add-and-commit to commit the changes to the repository and ad-m/github-push-action to push the changes.

{% github EndBug/add-and-commit %}
{%  github ad-m/github-push-action %}
### Submission Category: 

Wacky Wildcards

### Yaml File

{% gist https://gist.github.com/linuxdotexe/78cda767ff3d0192f75deadc74d45749 %}

### Additional Resources / Info

[Note]: # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any.)

[Reminder]: # (Submissions are due on December 8th, 2021 (11:59 PM PT or 2 AM ET/6 AM UTC on December 9th)

Link to the repository:
{% github linuxdotexe/nordic-wallpapers no-readme %}

Website:

I made a website using gatsby to preview all the wallpapers more easily. [Here](https://nordicwallpapers.vercel.app) is a link for the website.

The website is also open source. I am new to web development and can use all the help I can get from the community. PRs are very welcome.

{% github linuxdotexe/nordic-wallpapers-website no-readme %}

This is my first time sharing a post here. Very glad to be on dev.to :)
EVOLVING TECHNOLOGY AND IT'S IMPORTANCE
Tags: beginners, codenewbie
Published: 2021-12-01 01:57:56

#####The main goal of technology, which brings together tools to promote development, use, and information exchange, is to make tasks easier and to solve many of humanity's problems. We must emphasise how beneficial technology is to our lives as it advances and makes our lives even more convenient.
Some technologies that can be worked upon:-

1. Controlled Artificial Intelligence
2. Better machine learning and Nano tech
3. Secured networks

#####Also, technology is evolving according to the law of demand! We basically build and improve what the market wants to buy! For me this is an 'out-of-control' way of evolving. We become more and more disconnected from nature and rely more on "dependable" tech. For example, thanks to technological advances humans now are more educated than ever before. But that knowledge is not generally used. Whereas a few decades and even centuries ago, people where less educated, but were wiser, they could make better use of the knowledge they had, and better use of their mental and physical abilities.

#####Technology also helps us communicate more efficiently and effectively with others who are spread out over large distances. And it's always developing new ways of doing things that make life easier or bring us closer together whether it's through video chat, social media, or even just taking pictures with your phone and posting them online. But on the other hand, there are some people who think technology should be used less so we can spend more time interacting with each other face-to-face, or "in real life" as they call it. They argue that technology is making us lazier because we don't have to make as much effort to contact people or do things. And they also say that the new way we communicate online can lead to misunderstandings and fights because it is so easy for others to misinterpret the way you mean something.
![person panting](https://thumbs.gfycat.com/PortlyGraveHen-size_restricted.gif)
Data-driven, keyword Driven Testing Framework
Tags: testing, testautomation, selenium
Published: 2021-12-01 01:30:22

## Concept

### What is Data-driven testing framework
https://www.browserstack.com/guide/data-driven-framework-in-selenium

### What is keyword driven testing framework
https://www.browserstack.com/guide/keyword-driven-framework-in-selenium

### Hybird testing framework

https://www.browserstack.com/guide/hybrid-framework-in-selenium

## Thoughts

### Keyword driven test framework

It sounds hard to do in a large scale project. If we need to make the tester write test cases by providing keywords only, that will require a considerable amount of time to create and maintain those scripts.
I am using Cucumber, and it is BDD(Behaviour-driven development), so the Keyword test framework won't be something I will look at anyway.

### Data-driven test framework

It is good to provide a separation of test data and test cases. And to do it in the best practice, we should split the test data from test cases into external files instead of using Gherkin arguments. Using a data table is still not a good way as we cannot replace it.