teleren/devto huggingface dataset:
JavaScript Projects You Can Build to Perfect Your Coding Skills
Tags: javascript, webdev, beginners, naemazam
Published: 2022-07-11 17:29:28

## How to choose the right JavaScript project to learn faster?

Now, the best way to learn JavaScript – or any other programming language – is to put in the time and effort to build tons of projects. Your time is limited, so you want to build JavaScript practice projects that are not too easy. After all, if you keep repeating things you already know, you are not making any progress towards your long-term coding goals. At the same time, you want to choose projects that are not too difficult, either. The trick is to find a project idea that is just a tad above your current skill level. Hence, the key is to start small and set realistic expectations for your learning path. The last thing you want is to start with an ambitious project and end up feeling frustrated when you get stuck.

Visit my [GitHub](https://github.com/naemazam) for More projects. 


## JavaScript projects for beginners in 2023

Here are some fun and simple JavaScript projects with source code you can start building right now:

1. JavaScript stopwatch
2. Online Timer and Alarm Clock
3. Soft UI calculator
4. JavaScript drum kit
5. Guess the Color game
6. Hangman game
7. Tic Tac Toe with Ai
8. Pong game
9. Pairs game
10. Maze game
11. Simon game
12. Platformer game
13. Tip calculator
14. Palindrome checker
15. To-do list
16. JavaScript timeline
17. JavaScript animated nav toggle
18. JavaScript quiz
19. JavaScript mouseover effect
20. JavaScript weather app
21. JavaScript browser code editor
22. Rock Paper Scissors game
23. Water Tank Utilities
24. Fruit Ninja Game
25. Decision Wheel
26. Random Quran Ayat
27. Online Chess Game 
28. Typing speed test
29. Note-taking App
30. Online Ludo Game
31. Chrome Dinosaur Game
32. terminal Portfolio Website
33. Age Calculator
34. Advance-password-strength-checker
35.
Scaling yourself as an Engineering Leader
Tags: leadership, engineering, career, github
Published: 2022-07-11 17:25:01

Everyone has their own definition of true leadership. There is a piece of advice that I share with every engineer I speak to scaling up the ladder to Engineering Leadership: Leadership is a skill and as with any skill it can be learn – every day is a school day.  

The following quote has heavily shaped my thoughts on [**engineering leadership**](https://community.lohika.com/home/blogs/why-soft-skills-matter-in-engineering-leadership-2022-01-29).

_💡 You have to think of yourself as your department and your department’s efficiencies, but it’s more important to think of yourself as an executive first._

Many paths lead to the top that is **Engineering leadership** and it all starts with the definition of the term. “Engineering Leadership is the ability to lead a group of engineers and technical personnel responsible for creating, designing, developing, implementing, and evaluating products, systems, or services.”

 There are a lot of books, podcasts, articles and frameworks about Engineering leadership. Despite the experiences under my belt, and as any good technical professional will tell you; Leaders must provide structure and definition to be able to effectively support their teams and deliver excellent products and features.

These are my notes on this topic.

Do not obsess to become a manager or leader. Ask yourself:

- Why do I want to do this?
- What assets do I have to contribute?
- What liabilities do I bring?

**Engineering Leaders Roles & Responsibilities**

- Delivering a full-scale implementation of a feature or product as defined by stakeholders.Ensuring the quality of code meets defined expectations.
- Training their team to prepare them for the responsibilities that will help progress their careers over a defined career lattice.
- Managing defined stakeholder expectations.
- Making sure their team is up to speed on defined best practices.

The key is to start early on. Let’s explore how. 

Clearly, there are a lot of great engineering blogs out there worth following. I hope this read sets you on the same path to Engineering Leadership

If you enjoyed this post, check out [Lohika [Re:think] Community](https://community.lohika.com/login?returnTo=https%3A%2F%2Fcommunity.lohika.com%2Fhome), an online community platform for events, resources and discussions on technology, innovation and leadership for more related resources to keep you up to speed with everything happening in the world of tech and Leadership
Git cleanup-branches
Tags: git, github, gitlab
Published: 2022-07-11 17:21:00

> Original post:

> [www.koffeinfrei.org/2022/07/11/git-cleanup-branches](https://www.koffeinfrei.org/2022/07/11/git-cleanup-branches/)

Additionally to the existing [`git squash` and `git fixup`](https://www.koffeinfrei.org/2018/09/22/git-fixup-and-git-squash/) I added another piece in my custom git toolbox fitting in with the [git fixup workflow](https://www.koffeinfrei.org/2018/09/18/the-git-fixup-workflow/):

[git cleanup-branches](https://github.com/koffeinfrei/dotfiles/blob/master/bin/git-cleanup-branches)

This one is especially useful if you work in a team and work with pull / merge requests, and need to once in a while clean up the branches in your local repository.

The script consists of 3 steps:

1. **Prune remote branches**<br>
   This means that all branches which don't exist in the remote repository anymore are also deleted locally
2. **Remove merged branches**<br>
   Branches that have been merged to the default branch (i.e. `main` or `master`) are deleted. This is useful if you previously merged a PR / MR.
3. **Remove branches from other authors**<br>
   This step removes branches that don't have any commits by you. This usually happens when you checked out a branch by someone else, possibly to review their work.

A sample session could look like this:

```bash
 ~/src/example ⑂ main ? = ➜ git cleanup-branches
No local changes to save
Already on 'main'
Your branch is up to date with 'origin/main'.
🥁 Pruning remote branches...
Fetching origin
From github.com:koffeinfrei/example
 - [deleted]            (none)    -> origin/fix/weird-stuff
 - [deleted]            (none)    -> origin/feat/nice-stuff

🥁 Removing merged branches...
Deleted branch feature/feat/nice-stuff (was fee237764).

🥁 Removing branches from other authors...
You don't seem to have any commits in the branch ⑂ feature/docs/add-deployment-section

 * 91e8d233a 2022-07-05 Document deployment (feature/docs/prompt-for-sw-updates) [Gob Bluth]

Delete the branch 'feature/docs/prompt-for-sw-updates'? (y/n)? y
Deleted branch feature/docs/prompt-for-sw-updates (was 91e8d233a).

Already on 'main'
Your branch is up to date with 'origin/main'.
```

The source code is available [on GitHub](https://github.com/koffeinfrei/dotfiles/blob/master/bin/git-cleanup-branches).
Directual no-code for Web3
Tags: web3, blockchain, nocode, webdev
Published: 2022-07-11 17:19:56

Hey folks!

Seven years of work, and now this moment has come! We’ve [launched on Product Hunt](https://www.producthunt.com/posts/directual-for-web3)! If you’re not familiar with our platform, here’s what Directual is all about

## What is Directual

It’s a full-stack no-code platform, the first one out there for full development of web3-products. You can create any kind of app, and you don’t need programming experience to do that (although it’s certainly helpful to have). 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4z5el83jhmhewzass7nn.jpg)

Directual has really strong backend capabilities: cloud database setup, API configuration, easy creation of backend logic, and integration. Frontend is easy to create with Directual just as well.

## Web3

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

A crypto wallet? You can build that. A crypto exchange? Be our guest. Do we have documentation on how to do that? Yes. Did we build our billing section on our own platform? Also yes. Long story short, Directual has quite a number of web3.0 integrations in place, so it’s quite easy to build your own crypto products, including NFT-related.

## Wanna build some stuff?

Try Directual yourself, it’s completely free to get started. Be sure to check out our documentation as well, and our templates! If you like it, we’ll really appreciate if you share what you think about it, here or on [our Product Hunt page](https://www.producthunt.com/posts/directual-for-web3). 

Thank you for reading, update on how it went coming in soon.
Easily enable OIDC or SAML SSO (like Azure AD, Okta, Google, AWS, Ping, Salesforce, OneLogin and others) for WordPress
Tags: wordpress, sso, security, webdev
Published: 2022-07-11 17:18:14

Enable OIDC or SAML SSO and MFA (like Azure AD, Okta, Google, AWS, Ping, Salesforce, OneLogin and others) for WordPress via Datawiza.

Demo: https://wordpress.datawiza.net

Plugin: https://pe.wordpress.org/plugins/reverse-proxy-auth-widget/

Note: The plugin needs to work together with Datawiza or other proxy (e.g., Nginx) which can pass the correct JWT token in http header to the Wordpress site.
How to create dynamic rows of table in Laravel
Tags: codenewbie, beginners, html, webdev
Published: 2022-07-11 16:55:06

**Hello Readers,**

In laravel while designing blade file for PDF we require plain CSS only we cannot use any frameworks like bootstrap, tailwind CSS, Bulma, etc., and at same time to show data by grid system we have to use table. 

But in some cases we require the rows of the table where the first row required the two columns and the second row requires three columns, this is possible when the data is static but it gets complicated when we have the dynamic.

To do that we use modulo operator (%) through which we can define these type of rows.

Refer the below code for better understanding.

```php
$students = [
  {
    name: John,
    last_name: Kim
  },
  {
    name: Lee Min,
    last_name: Hoo
  },
  {
    name: Park,
    last_name: Shin
  },
  {
    name: Nick,
    last_name: J
  },
  {
    name: Kiara,
    last_name: Advani
  },
 {
    name: Jack,
    last_name: Den
  },
];
<table>

            @foreach ($students as $key => $student)
                @if ($key % 2 == 0)
                    echo '<tr class = "pdf-content">';
                @endif

                echo "<td class='width-50px'>
                    <br>
                    <span>
                        <b>Student's Name</b>
                        {{$student->first_name}} {{$student->last_name}}
                    </span>
                    <br>

                    <span>
                        <b>Username</b>
                       {{ $student->username}}
                    </span>
                    <br>

                    <span>
                        <b>Password</b>
                        {{$student->student_unhashed}}
                    </span>

                   </td> ";

                @if ($key % 2 == 1)
                    echo '</tr>';
                @endif
            @endforeach

        </table>
```
Thank you for reading :unicorn:
How to deploy react website in AWS S3 in 7 Steps
Published: 2022-07-11 16:53:14

In this tutorial, we will host a React website in AWS S3

 **Create a react application locally**

To create a react application, you have to install node and npm first. To install both:

**Downloads**: [https://nodejs.org](https://nodejs.org/en/)

Once installed, open your terminal or vscode terminal and write:

```
npx create-react-app my-app
cd my-app
npm start
```

Then open `localhost:3000`

## **Step 2: Build website to deploy**

Now run this command to make production builds :

```
npm run build
```

We actually deploy this build folder in production environment.

## **Create an AWS account**

Create aws acount  [aws.amazon.com](https://aws.amazon.com/) or go to your aws account.

## **Create an S3 bucket**

Sign in to your AWS account. Open S3 from your AWS console. Click “**Create Bucket**”.

If you are planning to use domain name for your website, be sure to create bucket with same name.

Enter a bucket name and click “Create”.

## **Step 5: Configure static website hosting in S3**

Go to S3 bucket properties and enable “Static Website Hosting”. Select “Use this bucket to host a website”. Give “index.html” as the index document and error document.

Make a note of your **endpoint**. This is the URL using which you can access your website. Once you are done, click Save.

## **Set S3 bucket read permissions to public**

Now go to bucker ‘Permissions” and paste the below code : 

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your_bucket_name>/*"
        }
    ]
}
```

## **Upload website contents to S3**

Now you have to upload the contents of your build folder to your S3 bucket.

Open your S3 bucket and click “Upload”. 

Drag and drop the contents of your build folder to the upload window. Check if all the contents of your build folder is present, including sub-folders and files. Once your verify this, click “Upload”.

Awesome. Your website is live now.
ImmutableX permissioned addresses
Published: 2022-07-11 11:08:03

## [Bridge](https://etherscan.io/address/0x5FDCCA53617f4d2b9134B29090C87D01058e27e9)

### Who can upgrade implementation 
- `onlyGovernace` - [EOA](https://etherscan.io/address/0x799Ec7ff0Bf9d8Bb4f3643aa85dA0971b1104B5a)

### Who can `updateState()`
- `onlyOperator` - [EOA](0x9B7f7d0d23d4CAce5A3157752D0D4e4bf25E927e)

### Who manages operators and verifiers
- `onlyGovernace` - [EOA](https://etherscan.io/address/0x799Ec7ff0Bf9d8Bb4f3643aa85dA0971b1104B5a)

## [DAC Committee](https://etherscan.io/address/0x16BA0f221664A5189cf2C1a7AF0d3AbFc70aA295)

### Who can upgrade implementation
- on one, contract is not a proxy

### Who can `verifyAvailabilityProof()`
- anyone, but it needs to be signed by at least 5 DAC members 

| DAC members addresses |
| ----------- |
| 0x1ffbdb8061b586a6d29fb608d025e5d8744f58d1 | 
| 0x24eeffc269bb8e540f5b2c8f45750489abf8d54b |
| 0x48af849535ddfa560a0eb0fbdef436688169b949 |
| 0x51abde72a4542500a7b1cb32b18b13fbe1f9ff2e | 
| 0xafc4589af46c72cbf550f2eeae38c97aede15d17 | 
| 0xb71fc111d7ba82d5955baddd7717f3467184ff61 | 
| 0xff506616e8c53ee5e513b906ac00b5d76664c537 |


## [STARK Verifier](https://etherscan.io/address/0xa739b175325cca7b71fcb51c3032935ef7ac338f)

### Who can upgrade implementation
- `onlyGovernance` - [EOA](https://etherscan.io/address/0x3DE55343499f59CEB3f1dE47F2Cd7Eab28F2F5C6)

### Who can `verifyProofAndRegister()`
- anyone, but the smartcontracts are guiding correctness
5 Tips to increase productivity in remote software teams
Tags: discuss, webdev, productivity
Published: 2022-07-11 16:35:10

## 1. Set clear and concise goals

When working on a remote software team, it's important to set realistic goals that everyone can understand. This will help you stay on track and prioritize your work appropriately.

## 2. Use online tools to communicate effectively

The best way to keep up with communication in a remote software team is to use online tools such as chat rooms or email chains. This allows everyone involved in the project to easily access information .

## 3. Establish clear deadlines

Setting strict deadlines will help to keep everyone on track and ensure that the project is completed on time.

## 4. Encourage collaboration

When working in a remote software team, it's important to encourage collaboration between team members by sharing ideas and feedback early on in the process. This helps to avoid conflicts later on and ensures that everyone is working towards the same goal.

## 5. Set up regular communication meetings

It's important to have regular communication meetings in order to keep everyone up to date on the progress of the project. This will help prevent any potential conflicts and ensure that everyone is working towards a common goal.

# **Tools for remote software teams**

There are a few different tools that can be helpful for remote software teams. Some of the more popular options include:

**[1. Disbug](https://www.producthunt.com/posts/disbug-2-0)**- 
LIVE ON PRODUCTHUNT TODAY!!!
Disbug is a visual feedback tool that could easily blend in and improve productivity in your team. From reporting bugs to collecting client/ customer feedback, Disbug is made for software teams.

**2. Slack** - Slack is a messaging platform that is popular for remote teams because it allows for easy communication between team members. It also has features that make collaboration easier, such as file sharing and task management.

**3. Zoom** - Zoom is a video conferencing and collaboration tool that can be helpful for remote teams. It has features that make it easy to share video, audio, and documents, and it also has integrations with other platforms, such as Trello and Asana.

**4. Basecamp** - Basecamp is a popular project management tool that can be helpful for remote teams. It has features that make it easy to manage tasks and meetings, as well as keep track of progress.

**5. Confluence** - Confluence is a content management system (CMS) that can be helpful for managing information across multiple teams. It has features that make it easy to manage files and articles, as well as collaborate on documents remotely.

**6. GitHub** - GitHub is a popular source code management (SCM) tool that can be helpful for managing and tracking project progress. It has features that make it easy to share files with team members, as well as collaborate on projects.
Write a program to print prime numbers from 1 to 50
Published: 2022-07-11 16:19:55

```
for(let i=2;i<=50;i++){  
    for(let j=2;j<=i;j++){
        let reminder = i%j;
        if(i != j){
         if(!reminder) break;
        }        
        if(j==i){
          console.log( i, ' is prime number')     
        }     
    }
}
```
Handler common Activities Tasks VMs
Tags: powershell, scripts, devops, server
Published: 2022-07-11 14:31:32


These scripts help reduce execution times and can be done remotely and to multiple VMs at the same time.

**Task for handle services,process,scheduletask,etc with powershell** 

```scss
$computers = @(
        'COMPUTER_NAME_1',
        'COMPUTER_NAME_2'
 )
 foreach ($computer in $computers) {
 
Write-Host "ComputerName: $env:COMPUTERNAME ($(Get-Date -Format “MM/dd/yyyy”)) "  -foregroundcolor "green"

#STOP PROCESS PID
   #  Invoke-Command -Computername $computer -scriptblock {stop-precess -id 123 } #number PID

#STOP SERVICE
  #  Invoke-Command -Computername $computer -scriptblock {stop-service SERVICE-NAME -force}

#Validate Service 
    # Invoke-Command -Computername $computer -scriptblock {get-service SERVICE-NAME}

#Start Service
    # Invoke-Command -Computername $computer -scriptblock {start-service SERVICE-NAME }
   
#Disable TASK
    # Invoke-Command -Computername $computer -scriptblock {Disable-ScheduledTask -TaskName TASKNAME}

#Enable TASK
    # Invoke-Command -Computername $computer -scriptblock {Enable-ScheduledTask -TaskName TASKNAME}

#Start TASK
    # Invoke-Command -Computername $computer -scriptblock {Start-ScheduledTask -TaskName TASKNAME}
 
#VALIDATE TASK
  Invoke-Command -Computername $computer -scriptblock {Get-ScheduledTask -TaskName "TASKNAME"}

#Get TASK by status Values: Running / Ready / Disabled / Queued / Unknown
 #Invoke-Command -Computername $computer -scriptblock {Get-ScheduledTask | where{$_.State -eq "Ready"}}

}

```
The Difference between HTTP PATCH and PUT methods
Published: 2022-07-11 16:03:01

PUT and PATCH might be doing the same thing of updating a resource at a location, but they do it differently

What is PUT?
PUT is a method of modifying resource where the client sends data that updates the entire resource. It is used to set an entity’s information completely. PUT is similar to POST in that it can create resources, but it does so when there is a defined URI. PUT overwrites the entire entity if it already exists, and creates a new resource if it doesn’t exist.

For example, when you want to change the first name of a person in a database, you need to send the entire resource when making a PUT request.

Unlike PUT, PATCH applies a partial update to the resource.

This means that you are only required to send the data that you want to update, and it won’t affect or change anything else. So if you want to update the first name on a database, you will only be required to send the first parameter; the first name.
#AWS - Increase your Quicksight SPICE data refresh frequency.
Tags: aws
Published: 2022-07-11 15:51:57

 
# Scenario:
Let us say I want to fetch the data from the source (Jira) and push it to SPICE and render it in Quicksight Dashboards. 

**Requirement:** 
  Push the data every 30 Mins once.

**Quicksight supports the following: **
  - Full refresh  
  - Incremental refresh

**Full refresh:**
- Process - Old data is replaced with new data. 
-   Frequency - Every 1 Hr once 
-   Refresh count - **24 /  Day** 

**Incremental refresh:**  
- Process - New data get appended to the dataset. 
-   Frequency - Every 15 Min once 
-   Refresh count - **96 / Day**

# Issue: 
- We need to push the data every 30 Min once.
- It is going to be a **FULL_REFRESH** 
- When it comes to *Full Refresh* Quicksight only supports *Hourly* refresh.

# Solution:
We can leverage API support from AWS. 
- Package - Python Boto 3
- Class - Quicksight.client 
- Method - create_ingestion
- Process - You can manually refresh datasets by starting new SPICE ingestion. 
- **Refresh cycle:** Each 24-hour period is measured starting 24 hours before the current date and time.

**Limitations:**
- **Enterprise edition** accounts 32 times in a 24-hour period. 
- **Standard edition** accounts 8 times in a 24-hour period. 

**Sample code:**

**Python - Boto for AWS:**
```
import boto3
client = boto3.client('quicksight')

response = client.create_ingestion(
    DataSetId='string',
    IngestionId='string',
    AwsAccountId='string',
    IngestionType='INCREMENTAL_REFRESH'|'FULL_REFRESH'
)
``` 

**awswrangler:**

```
import awswrangler as wr
wr.quicksight.cancel_ingestion(ingestion_id="jira_data_sample_refresh", dataset_name="jira_db")

``` 


**CLI:**

```
aws quicksight create-ingestion --data-set-id dataSetId --ingestion-id jira_data_sample_ingestion --aws-account-id AwsAccountId --region us-east-1

``` 
**API:** 

```
PUT /accounts/AwsAccountId/data-sets/DataSetId/ingestions/IngestionId HTTP/1.1
Content-type: application/json

{
   "IngestionType": "string"
}
``` 



# Conclusion:
Using this approach we can achieve 56 Full Refreshes for our dataset also we can go one step further and get the peak hours of our source tool (Jira) and configure the data refresh accordingly. This way we can even achieve a refresh frequency of 10 Min once.

**Ref:**
- [Quicksight](https://aws.amazon.com/quicksight/pricing/) 
- [Quicksight Gallery](https://aws.amazon.com/quicksight/gallery/)
- [SPICE](https://aws.amazon.com/about-aws/whats-new/2020/07/amazon-quicksight-spice-data-engine-supports-data-sets-250m-rows/)
- [Boto - Python](https://boto3.amazonaws.com/v1/documentation/api/latest/guide/quickstart.html)
- [Boto - Create Ingestion](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/quicksight.html#QuickSight.Client.create_ingestion ) 
- [AWS Wrangler](https://aws-data-wrangler.readthedocs.io/en/stable/stubs/awswrangler.quicksight.cancel_ingestion.html#awswrangler.quicksight.cancel_ingestion)
- [CLI](https://docs.aws.amazon.com/cli/latest/reference/quicksight/create-ingestion.html)
- [API](https://docs.aws.amazon.com/quicksight/latest/APIReference/API_CreateIngestion.html)
[Desafio] - Modelagem de BD do Twitter
Published: 2022-07-11 15:50:09

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1546519804726726657)

---


Ei dev,

Quer um desafio mais avançado de banco de dados? Modela o Twitter – relacional ou nosql.
- users
- replies (replies de replies)
- likes
- retweets com e sem quotes
- threads
- etc

cc @sseraphini

---

Comece pelo mais simples, aquilo que for claro pra vc. Aí vai incrementando ao poucos.