teleren/devto huggingface dataset:
5 Easy Projects For Beginners.
Tags: beginners, programming, watercooler
Published: 2022-02-07 07:28:25

Best way to learn programming is by code. We can train our skills, where exploring a new one. So, here's some **Easy Projects For Beginners. **

## Memory game.

![Memory game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/diqnxzdsf5exd9usl3ts.png)

Difficulty      : **Easy**
Best coded at   : *HTML + CSS + JavaScript*, *Python*
Description     :

Memory game is a simple game that make user remembering and click the same tiles.

Objectives      : 
- Make a memory game.
- Make the memory game customizable and expandable.

Small tips      : 
- Store all of the answer in an array.

## Miniblog.

![Miniblog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrst8kq35o5j1lurkch3.png)

Difficulty      : **Easy-Medium**
Best coded at   : **Python**, **Node.js**, **Ruby**, **PHP**
Description     :

Miniblog is a site where user can share something, like text, image, or some snippets. Miniblog store their users' data on a file, or database.

Objectives      :
- Make a miniblog.
- Expand the miniblog with adding additional features like comments, login, etc.

Small tips      : 
Markdown is a good method for storing many data types as a text.

Difficulty:     

## Secure login form.

![Secure login form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydsd3fwwao2aq7au1eug.png)

Difficulty      : **Easy-Medium**
Best coded at   : **Python**, **Node.js**, **Ruby**, **PHP**
Description     : 

Login is one of the most common ways to authenticate user. User need to pass their personal data (username, email, password, etc) to the system, and the system will authenticate them.

Objectives      :
- Make a login system.
- Survive these attack;
    - Bruteforce attack,
    - SQL Injection (if using SQL)
    - Session hijacking
    - Bypassing

Small tips      :
- For preventing bruteforce attack, use captcha.

## Kanban board.

![Kanban board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yke7za1udlpbtz264ce.png)

Difficulty      : **Easy-Medium**
Best coded at   : **Python**, **Node.js**, **Ruby**, **PHP**, *HTML + CSS + JavaScript*
Description     :

A kanban (カンバン) is a task board with some cards. Kanban usually separated into some levels, like "task" or "to-do", "in-progress", and "done". 

Objectives      : 
- Make a kanban board.
- Expand the kanban board by adding additional functions.

Small tips      :
- WebSocket is great to make your board synchronized with the server (if you use web-based interface).

## Virtual assistant.

![Virtual assistant](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj9k6bv39h8fu27e2x6e.png)

Difficulty      : **Medium**
Best coded at   : **Python**, **C#**
Description     :

A virtual assistant is a tool that built to help people with their routine. Virtual assistant can do basic things that people can do. 

Objective       : 
- Make the virtual assistant.

Small tips      :
- Use a server.

**If you done the project, please give the project link in the comment, so I can review it :)**
Steps To Convert Excel to VCF Manually
Tags: excel, vcf
Published: 2022-02-07 07:10:05

Microsoft Excel is one of the famous tools which is utilized to store data in a methodical way. You can store big data on excel spreadsheets and execute activities in an effortless way than any other tool.. But individual devices or OS lets only vCard format. So to crush such cases we must understand the steps concerned to convert excel files to VCF format. In our earlier post, we include also discussed manual ways to Export Excel to MySQL Tables. 

So reaching back to Excel to VCF Conversion using the actions noted below, we will let you understand how the Excel to VCF conversion is accomplished without utilizing any software. There is no need to pay money for Excel to VCF converter if you can track the steps mentioned carefully. The conversion of the Excel file to VCF format can be split into three steps. In the first stage, we will export an Excel file to CSV format. In the second step, this CSV contact file will be imported and in the final stage, these contacts are shipped to VCF format.

Visit at  : https://www.osttopstapp.com/xlstovcf.html
People Management
Tags: discuss, leadership, improvement, growth
Published: 2022-02-07 07:07:25

---
title: People Management
published: true
description: In people management, things are never black or white
tags: discuss, leadership, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jp8f3fo0r08xcjqr2h7d.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/people-management/)._

> In people management, things are never black or white. Mostly grey, in more than 50 shades. Make sure you hear both sides of the story before making any decisions.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Parsing JSON on Jenkins , a problem with sh
Tags: jenkins, json, bash, devops
Published: 2022-02-07 07:07:10

When you want to process a JSON file in Jenkins pipeline, you can do in various ways

- [Pipeline Utility Steps](https://www.jenkins.io/doc/pipeline/steps/pipeline-utility-steps/#readjson-read-json-from-files-in-the-workspace) `readJSON`
- [jq](https://stedolan.github.io/jq/)
- JSON Parser in Python, NodeJS. etc

This article will focus on the problem with jq vs Jenkins `sh` since it introducing some interesting problem.

**Sample Data**
> file.json
```json
{
	"lorem": {
		"key": "Lorem Ipsum",
		"dash-key": "Lorem Ipsum",
		"underscore_key": "Lorem Ipsum",
	}
}
```

---

In the jq, a syntax to get the JSON value from a key is
```bash
$ cat file.json | jq -r .lorem.key
Lorem Ipsum
$ cat file.json | jq -r .lorem.underscore_key
Lorem Ipsum
```

But, it will have a problem when your JSON key contains "-" dash.
```bash
$ cat file.json | jq -r .lorem.dash-key
jq: error: key/0 is not defined at <top-level>, line 1:
.lorem.dash-key
jq: 1 compile error
```

With some limitation with jq, a key string contains dash `-` have to combine pattern with single-quote and double-quote when query. Possible in many pattern to get a value.

> Dash Issue with jq [Github Issue](https://github.com/stedolan/jq/issues/38#issuecomment-9770240), [Stack Overflow](https://stackoverflow.com/questions/37344329/jq-not-working-on-tag-name-with-dashes-and-numbers)

```bash
$cat file.json | jq -r '.lorem."dash-key"'
Lorem Ipsum

$cat file.json | jq -r .lorem.'"dash-key"'
Lorem Ipsum

$cat file.json | jq -r '.lorem["dash-key"]'
Lorem Ipsum

$cat file.json | jq -r .lorem.\"dash-key\"
Lorem Ipsum

``` 

---

When we bring the jq query into Jenkins with a key name as a  variable. It will lead to next problem, as Jenkins have some weird way to manipulating string with single-quote and double-quote in `sh` function.

> Fun read [Adventures with escaping quotes in Jenkins](https://gerg.dev/2021/03/adventures-with-escaping-quotes-in-jenkins-pipelines/) and [Gist of weird escape on Jenkins](https://gist.github.com/Faheetah/e11bd0315c34ed32e681616e41279ef4)

Then, we need to escape double-quote with Jenkins `sh` and `jq` with this pattern `\\\"`

```groovy
SOME_KEY = "dash-key"
value = sh(returnStdout: true, script: "cat file.json | jq -r .lorem.\\\"${SOME_KEY}\\\"").trim()
```
trading-charts
Tags: javascript, vue, d3, binance
Published: 2022-02-07 07:07:04

Example Vue.js website demonstrating how to listen to the Binance Websocket server and trade charts using d3.js.

[https://github.com/adrianmanchev/trading-charts]
(https://github.com/adrianmanchev/trading-charts)

Demo
[https://adrianmanchev.github.io/trading-charts](https://adrianmanchev.github.io/trading-charts)


![Bitcoin to Tether chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xubmf4cf2q9p6lli8vgy.png)
Reaching consensus and empowering discussions in your technical team
Tags: programming, teambuilding, leadership
Published: 2022-02-07 07:00:02

Technical discussions can (and will) prove challenging and sometimes blocking. Surveying the team is enriching though, and helps with the spread of knowledge, awareness of relevant topics and speeds up decision making.

[Planning Poker](http://planningpoker.com) can serve as a tool to poll the team for certain topics, and get to know their opinions quickly while empowering discussions.

Here’s a screenshot of an example of what such a “survey poker” session could be:

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


Several topics could be polled with this method. The cards used for such sessions are pretty self-explanatory:

- **Yay**: “I agree with this topic”
- **Nay**: “I disagree with this topic”
- **RFI**: “Request for Information. I need more information about this topic to make an informed decision“
- **STC**: “Show me The Code“. A variant of “RFI”, you’d like to see code to make an informed decision.
- **POC**: “Proof of Concept”. I like the topic, let’s put it to the test in our project or in a sample one to make a better informed decision.
- **?**: “I have no strong feelings one way or the other/ I don’t care“
- **Pass**: Equal to ?

Upon revealing, team members can debate on why they chose a certain card and bring those points/concerns to the rest of the team. Afterwards team members can change their vote, should they will.

This techniques works even on big teams. Since then you can pass the results to the management team to help them on their decision making.

Happy voting!

## Trivia

- This technique is homonymous to the real world referendums.
Was Cascade that bad 🤔?
Tags: discuss, productivity, agile
Published: 2022-02-07 06:45:42

So, since I started my first internship (2012) I've been warned against the _dark-lord_ cascade. Agile is our salvation to evil. Any who dares to question this will be burn at the stake.

The funny thing is that I have never try cascade. I've been told to avoid it... but that's all. 

I'm wondering if we - the dev community - will come back to cascade strategy, once agile evangelists retire. WDYT?
Automatically refetching with React Query
Tags: react, beginners
Published: 2022-02-07 06:19:35

A super cool feature of React Query is that we can auto refetch on a specified interval.

This could be useful if you have quickly changing data that needs to be rechecked every minute.

In our example, we'll call a random API endpoint, meaning every request has new data, and showcase whatever is in that refetch.

It will look like this:

![Automatically refetching with React Query](https://cdn.hashnode.com/res/hashnode/image/upload/v1643438032817/xuVmzD3br.gif)

## Using auto refetching in React Query

To use the auto refetch mode, you can pass an optional parameter to the React Query hook called `refetchInterval`. The value is in milliseconds.

```js
const {isLoading, data} = useQuery(
  'vehicle',
  async () => {
    const {data} = await axios.get(
      'https://random-data-api.com/api/vehicle/random_vehicle'
    );
    return data;
  },
  {
    refetchInterval: 6000,
  }
);
```

In the above example, we will query the random data API and ask for a random vehicle.
This call will refetch the data every 6000 milliseconds.

When implementing code like this, be aware that this can be heavy on your API's and one should be very wise about when to use this approach.

## Other refetching options

React Query comes with more of these refetch functions that we can leverage.

By default, it will auto refetch every time the window focusses, for instance, let's take a look at what other options there are:

- `refetchInterval`: See above example
- `refetchIntervalInBackground`: When set to true, the above function will even call when the tab is in the background
- `refetchOnMount`: You can set this to false to don't do the initial mount loading
- `refetchOnWindowFocus`: Will refetch every time the window focus is set. You can set this to false
- `refetchOnReconnect`: Will refetch once a connection has been remade

Between all of these, you can mix when data should be loaded.

You can try the refetch out in this Sandbox.

<iframe src="https://codesandbox.io/embed/gifted-flower-opr8x?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="gifted-flower-opr8x"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
   
### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Future of Testing frameworks - A virtual event
Tags: testautomation, event, e2etesing, future
Published: 2022-02-07 09:44:03

---
title: Future of Testing frameworks - A virtual event
published: true
date: 2022-02-07 05:51:49 UTC
tags: testautomation, event, e2etesing, future
canonical_url: https://mszeles.com/future-of-testing-frameworks-a-virtual-event
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlwux8eoex9gpp98nf6w.jpg)
Yesterday I saw a post in the [Selenium Test Automation User Group](https://www.linkedin.com/groups/961927/) about a cool test automation event. It is called [Future of Testing frameworks.](https://applitools.com/future-of-testing-frameworks-2022). It is described as:

> Future of Testing: Frameworks 2022 is a free virtual event dedicated to promoting excellence in quality engineering, and features experts from global brands leading engaging sessions about innovations and cutting-edge practices in Test Automation.

The [agenda](https://applitools.com/future-of-testing-frameworks-2022/#event-agenda) looks quite interesting. There will be presenters from Selenium, Cypress, Playwright, TestGuild, Aplitools and more.

It will be held on the 24th of February. Starting at 9 AM (UTC).

It is completely free, you only have to register.

See you there. 😊

📚**Join the Selenide community** on [LinkedIn](https://www.linkedin.com/groups/9154550/)! ✌

[Buy me a coffee!](https://buymeacoffee.com/mikiszeles) ❤
How to Create a Cascading Dropdown List
Tags: angular, webdev, javascript
Published: 2022-02-07 05:29:43

Get a quick overview on how to create a cascading Dropdown List. In this video, you will learn how to add a series of Syncfusion [Angular Dropdown Lists](https://www.syncfusion.com/angular-ui-components/angular-dropdown-list) to an Angular application. You will see how to populate the data source of a second Dropdown List based on the value selected in the first Dropdown List. 

Product Overview: https://www.syncfusion.com/angular-ui-components/angular-dropdown-list

Download example from GitHub: https://github.com/SyncfusionExamples... 

{% youtube 4XwHXuLuovo %}
What Is A PGA In Oracle?
Tags: beginners, tutorial, productivity, opensource
Published: 2022-02-07 05:21:03

- A PGA, which is the abbreviation of Program Global Area, or a Private Global Area.

- It is a memory area that contains a couple of sub-areas in it. Unlike the SGAs, PGAs are private for each user. So any other user cannot see or touch that memory area.

- In PGA, there are a couple of sub-memory areas. As you can see in the diagram

https://link.medium.com/fYhIvLBQqnb
Python: tuple x list x set x dictionary
Tags: python, datascience, beginners, tutorial
Published: 2022-02-07 04:22:20

**List:** listas são estruturas de dados de tamanhos dinâmicos, que não tem a restrição de ser homogenea, logo, pode ter diferentes tipos armazenados em si. 

**Características importantes:**

1. Lista é uma coleção de dados ordenados;
2. São mutáveis. Ou seja, conseguimos alterar seus valores internos;
3. É declarada com [ ];
4. Pode criar/alterar o tipo usando a função list();
5. Pode valores duplicados em uma lista.

![Formas de declarar uma lista](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l7pxbjnfi257zzouzc7.png)

---

**Tuple:** uma tupla é algo bem semelhante a uma lista, sendo um "vetor" com index, ordenada, aninhadas... porém com a **característica de ter os dados imutáveis**.

**Características importantes:**

1. Tupla é uma coleção de dados ordenados;
2. São mutáveis. Ou seja, conseguimos alterar seus valores internos;
3. É declarada com [ ];
4. Pode criar/alterar o tipo usando a função list();
5. Pode valores duplicados em uma lista.

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

---

 
**Set:** é uma coleção desordenada de dados que é interagivel, mutável e **não permite itens duplicados**.

**Características importantes:**

1. Set pode ser declarado com {};
2. São mutáveis. Ou seja, conseguimos alterar seus valores internos;
3. Não permite duplicatas;
4. Pode criar/alterar o tipo usando a função set();

```
set1={1,2,3,4,5,"hello","tup"}
set2={(1,8,"python",7)}

```

---

**Dictionaries:** dicionários são estruturas de dados mutáveis que possuem **pares de chaves de identificação e o valor** (key pair).

**Características importantes:**

1. Set pode ser declarado com {};
2. São mutáveis. Ou seja, conseguimos alterar seus valores internos;
3. Permite duplicatas;
4. Pode criar/alterar o tipo usando a função dict();

```
dict1={"key1":"value1","key2":"value2"}
dict2={}   # empty dictionary
dict3=dict({1:"apple",2:"cherry",3:"strawberry"})
```
Making a prettier Webpage for Nasa's Astronomy API
Tags: react, nasa, beginners, opensource
Published: 2022-02-07 05:09:45

Hello Everyone!
It is nice of you that you have clicked onto this post. 

## The Planning 📚
This will be a project I will be taking on to dive deeper into React and create an interface which will look more up to date compared to the current Nasa Website. I will be creating this with the use of the api to display the 'Picture of the Day' and be a place people can search easily on the web. 

It will be Open Source and as a beginner as myself, I hope to learn a lot of things and make the science world a more attractive place to be in rather than be intimidated from the technologies being used.

---

## Game Plan 🚀
Since this is open source, I do not mind and would ask for any help if there were to be trouble along the line as I post more. This will be the front end part, while the backend will be the traffic of the Nasa api

1. I want to have the star of the show, the 'Picture of the Day', as the centre point of this project and allow those pictures to be saved to where it may be stored in a database. 
2. Have a Nasa themed webpage with similar colours to give the familiarity. 
3. Have Cards hold the image, the description, the date the picture was last posted, and a way to like the photo. There will also be credits for everyone who was involved in the 'Picture of the Day', for example, the names of the observatory.
4. These cards are scrollable which will move from right to left, giving the effect of a mobile social media app. 

More will come with the plan, but hopefully you have gotten the idea. **There may be some challenges throughout this project, so my main goal, is to make this Open Source and make the Astronomy Picture of the Day Website look less like documentation and more like dedicated, professional, webpage where more people would like to learn more.** 

---

## What I hope to get out of this 🧐
This project was originally for the Shopify Front-End Challenge Internship which had passed, but I couldn't complete the challenge in time. This will not stop me from continuing this project and letting it go to waste. I just want to learn more about these modern technologies and learning them through personal projects rather than a step-by-step tutorial is better for me. I hope this helps anyone else looking into React development or Javascript/Typescript Development.  

---

## Rescources 🔭
I will be posting all my resources that may help with productivity during a project or give inspiration for a new project and maybe my desgins for the webpage!

* [Astronomy Picture of the Day](https://apod.nasa.gov/apod/astropix.html)
I forgot about el.outerHTML so I made this
Tags: javascript, webdev, npm, productivity
Published: 2022-02-07 05:02:53

This morning I needed to convert a DOM element into a sting. And at the time I forgot about the `el.outerHTML` method. And I know the `el.innerHTML` will not include in element itself. It will only give inner HTML. So after doing a quick Google I was remined about the `outerHTML` method. And my issue was solved!

But this got me thinking how could I do it if there was no `innerHTML` or `outerHTML` method.
And thus [htmlToString](https://www.npmjs.com/package/htmltostring) was born.
{% github 0shuvo0/htmlToString %}

And it was very simple to do using recursion.

## There was just three main question.
1. What's the tag name of the element
2. How to get all the attributes present on a HTML element
3. Check if a tag is self closing tag or not

## And here are the answers
### What's the tag name of the element
You can easily get the tag name of the element like this
```js
let tagName = el.tagName.toLowerCase()
```
### How to get all the attributes present on a HTML element
`el.attributes` returns a list of attribute present on the element.
```js
[...el.attributes].map(e => `${e.name}="${e.value}"`).join(" ")

//example outcome
//'class="main" type="text"'
```
### Check if a tag is self closing tag or not
First we can create an array or self closing tags and then check if tag name is present in the array
```js
const selfClosingTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr']
if(selfClosingTags.includes(tagName)){
    console.log("Self closing tag")
}
```

And with all the questions answered the function was very easy to implement.
You can see the full code [here](https://github.com/0shuvo0/htmlToString/blob/main/index.js)


Found it useless, I mean helpful? [By me a Coffee ☕](https://www.buymeacoffee.com/0shuvo0)

Make sure you checkout my other articles and [YouTube channel](https://www.youtube.com/c/AngleBrace)
{% user 0shuvo0 %}
## Support me on Patreon
[![Patreon Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vnw8g7vs5pok3jwgtgv.png)](https://www.patreon.com/0shuvo0)
Day 37 of #100daysofcode: Ticking away
Tags: 100daysofcode, javascript, beginners
Published: 2022-02-07 04:57:28

Hey again everybody!

Short check-in today.

I had to use a little regex in the project today, so I still have a bad taste in my mouth...

## Today
* LeetCode
* Completed 9 remaining Intermediate Algorithms Challenges, completed the first project assignment for the FreeCodeCamp JS Course (4 remaining projects)

## Upcoming
* Study Aid App work
* Finishing FreeCodeCamp
* Look into AWS Certifications and LinkedIn Learning courses
* Possibly laying out research topics -- My idea for this is that I lay out topics I think are interesting and then I spend a few days working on learning about these topics and construct a new blog post (separate from the challenge). We'll see if my interest holds here.

### Resources
[JS Course - FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)

Until next time! Stay safe everyone.