teleren/devto huggingface dataset:
How I completed my HacktoberFest 21 Journey
Tags: hacktoberfest, opensource, javascript, beginners
Published: 2021-11-07 06:50:28

Thank You for taking time to read about my Journey. I know you are looking to get some inspiration from my journey if you are here.

## What is Hacktoberfest ?

Before starting, Lets talk about the hacktoberfest. **Hacktoberfest** is a month-long celebration of open source software run by DigitalOcean (in partnership with its partners like dev) . **Hacktoberfest** is open to everyone in our global community! 

>  Once you have completed the Hacktoberfest, you will have the option to choose either a Hacktoberfest shirt, OR the option to donate a tree.

## What is the Procedure ? 🤔

If you are interested in taking part in the Hacktoberfest. You will have to make 4 Pull Requests in-between 1-30 October and get it merged in order to earn a chance to win a t-shirt or plant a tree. This is it.

 Now I will share my journey with you step by step. How I did it.
 
![journey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qddchf6ji34stnihnnoi.gif)

## My Journey 🔥

I was waiting eagerly for the Hacktoberfest to begin. So, that I can take part and get to know about Open Source more. Now, The time comes and on October 1. 

1.  Firstly, I go to the https://hacktoberfest.digitalocean.com/ and selected **Sign Up with Github** .
2. Now, what I have to do is make 4 Pull requests and in-order to do it. I went to the https://github.com/issues and search for the issues with label 
"_is:open is:issue label:hacktoberfest_"
3. Now, the Issues I fixed and got successful Merge requests are these : 
{% github https://github.com/ashawe/PersonalWebsite/pull/7 %}
{% github https://github.com/ashawe/PersonalWebsite/pull/8 %}
{% github https://github.com/Saicharan67/Interview-Coding-Questions/pull/16 %}
{% github https://github.com/Saicharan67/Interview-Coding-Questions/pull/24 %}
{% github https://github.com/johnbabu021/shopping-cart/pull/21 %}
4. Whenever I submitted a Merge Request, it takes a _14 day Period_ for the Maintainer to make sure it is not a Spam. So, remember to wait for the 14 day Period and be relaxed. 😌
5. Now, I am waiting for my t-shirt to come and once my t-shirt will arrive I will post it. 

Feel free to ask anything if you have any doubts and thanks for reading 😇.
Google Search Console 的「已檢索」、「已找到」是什麼意思？
Tags: google, seo
Published: 2021-11-07 06:49:22

Google Search Console 是讓我們可以把自己的網站提交讓 Googlebot 去爬以及讓我們知道人們是用那些關鍵字來找到我們的服務，一般是拿來觀察 SEO 成效的工具。

在 Google Search Console **涵蓋範圍**的頁面，上面會顯示 Google 對你的網站的頁面的幾種狀態：錯誤、有效但出現警告、有效、排除，其中的「排除」又可以再分成數種不同的類型，其中兩種類型令人感到疑惑：

- 已找到－目前尚未建立索引
- 已檢索－目前尚未建立索引

而這兩種排除類型，在 Google Search Console 的文件內也沒有解釋的很清楚，在網路上搜刮一陣之後，以本文簡單解釋一下。

先了解 Google 對網頁做索引的三大步驟：

1. 找到（discover）：Google 知道有這頁的網址，但還沒去爬內容。
2. 檢索（crawl）：Google 爬了這頁的內容，但還沒編入索引。
3. 索引（index）：Google 把這頁編入索引，呈現在搜尋結果。

了解了各階段的涵義之後，應該也可以知道前面提到的「已找到」和「已檢索」背後的原因了。

不過，知道是知道，但是**目前是沒有任何方法要求 Google 加快對我們網頁的索引速度**的，即便我們的網頁沒有任何被發現的錯誤，也都有提交 sitemap.xml，也還是只能乖乖排隊，並且還要認知到，排隊的規則也是不平等的，Google 對大網站提供了更高的索引優先度，對又新又小的網站、不是今天荒廢就是明天荒廢的網站，Google 是採取更慢的索引排程的。

## 參考資料

- [How Bingbot Works: Discovering, Crawling, Extracting & Indexing](https://www.searchenginejournal.com/how-bingbot-works-discovering-crawling-extracting-indexing/359810/)
Login with google - ReactJs
Tags: react, googlecloud, javascript, tutorial
Published: 2021-11-07 06:42:57

Open App.js and import GoogleLogin from package
import GoogleLogin from 'react-google-login';

Now just add Google Login button with Client ID
<GoogleLogin
    clientId="Your_own_client_ID.googleusercontent.com"
    buttonText="Login with Google"
    onSuccess={pass}
    onFailure={fail}
    cookiePolicy={'single_host_origin'}
  />                                                        


Just add two handles for onSuccess 
const fail = (result) =>{
      alert(result.error);
  }

and for onFailure
const pass = (googleData)=>{
    console.log(googleData);
  }


Read more: https://easycodesardar.blogspot.com/2021/11/login-with-google-reactjs.html
Dev Job Starting Line
Tags: motivation, devjournal
Published: 2021-11-07 06:26:05

Where does one start when looking for a job? In my current field of bio-research, I would look at jobs online or get referrals for a job of interest. Now that I'm looking for a job as a software developer, I'm not sure where or how to begin.

It's been almost two months since I graduated from my Software Engineer bootcamp. During that time, I worked with my career coach to draft a good resume, tweak my LinkedIn, and do a mock interview. Now that I've officially declared the start of my job search with my coach, the anxiety is really kicking in. I knew it wouldn't be easy, but there's so much to learn for a tech interview that I don't know where to start. Below are my thoughts on some of the main aspects of a dev job hunt:

###Learning DS&A
Data structures and algorithms are the bane of my existence. Don't get me wrong! I love solving code problems since they remind me of puzzles and I learn new algorithms. Bootcamp didn't really cover that part during the curriculum. After graduation, they threw a link at me with some resources and that was it. The real struggle is learning all the different data structures, such as recursion and binary trees, while learning the best algorithms to solve them. 

_"Just do Leetcode problems" - Everyone_

I find it hard to solve Leetcode problems with no knowledge of data structures. AlgoExpert is a site that has really helped me out. AlgoExpert is not free, but it gives you 160 coding questions to ace the coding interviews with video explanations and additional interview resources. As someone with no past experience with Leetcode, AlgoExpert's problems and explanation have really helped. I highly recommend AlgoExpert if you're just starting data structure and algorithms.


###Networking
My coach and everyone I know advocate that networking is the most important part of finding a dev job. Cold applying to jobs is a black hole without a referral. Most of my time is spent on searching people on LinkedIn and messaging them. Connection is key for finding a job, but my main goal, as of now, is to connect and ask people how their job search journey went.

###Applying for Jobs
You would think applying for job is the easiest thing to do, but it's actually pretty difficult. The job description for each Software Engineer role can differ vastly from one another. It's hard to know what I want to do in a role when I haven't experienced a tech job before. 

###The Race
This blog post is my starting line. It's really here to keep me accountable and motivated during my journey. 
######Daily Goals
* At least two Leetcode problems
* Network with 2-4 people
* Apply to one job

Feel free to give me tips and advice! I would greatly appreciate them!
Set Up Regular HTML Project with Tailwind CSS
Published: 2021-11-07 06:07:17

Actually on the [Tailwind CSS website](https://tailwindcss.com/docs/installation) there is already documentation on several ways to install **tailwind css**. However I find the documentation too long and a bit confusing. So I decided to make my own tutorial. I hope my notes can be useful for you too.
***

## 1. Create the css file

First create a *css* file, whatever the name is. In this case I named it **global.css**. The location of this file is also up to you. In this case I usually put it in the **/assets/css/** folder.

```css
/* global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**@apply directives** can also be put in this file.
***

## 2. Convert the css file into tailwind.css

In the root of our project folder, run this command to convert the **global.css** file into a **tailwind.css** file. Later the **tailwind.css** file is called in our *html* file, not the **global.css**.

```
npx tailwindcss -i ./html/assets/css/global.css -o ./html/assets/css/tailwind.css
```

Whenever **global.css** changes, this command must be run again.

Actually there is a *watch* command by adding **-w** at the end of this command. But I don't know why, my laptop freeze when I use the **-w** command. Even though it is a **Core i5** laptop and with **16 GB** memory. My friend's laptop also experienced the same thing. That's why I never use the **-w** command again.

Actually this *watch* command is useful to *build* **tailwind.css** file automatically whenever **global.css** file changes. But because there was a problem, so I never used it.
***

## 3. Using the tailwind.config.js

The **tailwind.config.js** file can also be used in a regular *html project* like this one. Just make the file by typing the command below in the root of our project folder.

```
npx tailwindcss init
```

This file will be automatically detected when running the *convert* command earlier (previous **npx** command). Usually I run the *convert* command in the project root.
***

## 4. Call the tailwind.css file in our html file

You can call the **tailwind.css** file in the *html* file, like this:

```html
<link rel="stylesheet" href="./assets/css/tailwind.css" />
```
***

## Done

Note: **npx** is included with **npm** version 5.2 and above.
DEV-OPS
Tags: devops, webdev
Published: 2021-11-07 05:12:47

DEV-OPS

Its a culture, concept, process and approach that merges software requirement gathering, software development, testing, quality assurance, system configurations, product deployment and operations. Organizations building or improving software products are moving towards a DevOps approach where development, testing, security, quality assurance and operations are getting merged within a large team and those technical resources work side by side to achieve higher return on investment

DevOps is one of the most broad topics within software dev because it lacks boundaries and limitations. Many technologies, tools, concepts, processes and ideas converge to give a good DevOps pipeline and DevOps process resulting in agile planning, continuous integration, continuous delivery, and high level monitoring of your enterprise level software systems. Hence, devops is not a single role or even a team's work that deals with all the technologies and processes. It a mixture of culture, traditions and process.

SKILLS TO KNOW FOR DEVOPS

1. Continuous Integration
2. Continuous Deployment
3. Testing Mechanisms & Strategies
4. Monitoring & Alerting Systems
5. Logging & Distributed Tracing
6. Software Debugging
7. Software's Configurations
8. Batch Processes, Trigger Processes
9. Build Systems & Tools
10. Configuration Management
11. Automation Platforms
12. Observability Systems
13. Quality Assurance Tools
14. Version Control Systems
15. Artifact or Package Repositories
16. Issue Tracking Platforms
17. Code Quality, Review Systems
18. Containerization Tools
19. Software Orchestration Systems
20. APIs Management Platforms
21. Different Testing Environments
22. Cloud Services
23. Scripting Language
24. One Programming Language
25. Distributed Systems
26. Operating Systems (Linux, Unix)
27. Shell Scripting
28. Software Security Concepts
29. ITSM (IT Service Management)
30. Relational & Non Relational Storage
31. Virtualization Technologies
32. Servers, Host Machines & Systems
33. Clustering, Replication, Deadlocks
34. Partitioning, Distributed Systems
35. Microservices, APIs & FaaS
36. BigData & DataOps
37. Open Source Tech(s)
38. Master Data, Data Warehouses, Data Lakes
39. Agile Methodologies & SAFe Framework
40. Software Management Life Cycle
41. Software Architecture & Design
42. Functional & Non-Functional System Features
43. API Gateways, Service Mesh, Load Balancers
44. Enterprise Platforms & Infrastructures
45. Integration Concepts (ESB, Middleware)
46. Web, App Servers
47. Dependency Management
48. Deployment Mechanism

SKILLS TO BE AN EXCELLENT DEV-OPS RESOURCE

1. Ability to learn new technologies
2. Highly collaborative
3. Able to handle stress
4. Good management skills
5. Excellent communication skills
6. Flexible & understanding
7. Able to learn business features
8. Able to understand end to end process
9. Able to understand stakeholders
10. Capable of dealing with many technologies
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fiof5sbddr83k75iitj4.jpg)

IMAGE SOURCE
https://lnkd.in/e62hdXUw
Detect Scroll Direction ReactJS
Tags: react, javascript, webdev, css
Published: 2021-11-07 04:58:39

In these blog. I am detecting scroll direction either person id scrolling down or up. To use these concept you can make some better thing like Navbar. Render a Navbar when we scroll untill that it gets disappear. So I am explaining here only about scroll direction If you want the example then please let me know.

```
import React, {useEffect, useState, useCallback} from 'react';
import { Fragment } from 'react/cjs/react.production.min';
import styles from "./App.module.css";

const App = () => {
  const [y,
    setY] = useState(document.scrollingElement.scrollHeight);
  const [scrollDirection,
    setScrollDirection] = useState("you have not scrolled yet");

  const handleNavigation = useCallback((e) => {

    if (y > window.scrollY) {
      setScrollDirection("Scrolling Up");
      console.log("scrolling up");
    } else if (y < window.scrollY) {
      setScrollDirection("Scrolling Down");
      console.log("scrolling down");
    }
    setY(window.scrollY)
  }, [y]);

  useEffect(() => {

    window.addEventListener("scroll", handleNavigation);

    return () => {
      window.removeEventListener("scroll", handleNavigation);
    };
  }, [handleNavigation]);

  
  return (
    <Fragment>
    <div className={styles.main_container}>
      
    </div>
      <div>{scrollDirection}</div>
    </Fragment>
  )
}

export default App
```

## OutPut Result
![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u7rjv2rawd78voq6vv4.gif)
Project Euler Problem 2 - Fibonacci Question
Tags: javascript, tutorial, algorithms, fibonacci
Published: 2021-11-07 04:01:53

Hi All! This is my first post here! I shall share a short post on the solution to the Fibonacci Problem by Project Euler. This is considered a common beginner level question to practice basic 'for loop'. 

The Question is as such:

_Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:_

1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...

_By considering the terms in the Fibonacci sequence whose values **do not exceed four million**, find the **sum of the even-valued terms**._

Posting my solution (in JavaScript) here for sharing!

```javascript
let n1 = 0,
  n2 = 1,
  nextNum,
  fiboSum = 0,
  fiboArr = [];

for (let i = 1; i <= 100; i++) {
  // console.log(n1); //keep logging new n1
  fiboArr.push(n1);
  nextNum = n1 + n2; //get nextNum
  n1 = n2; //update prev n2 as new n1
  n2 = nextNum; //update nextNum as new n2
}
//console.log(fiboArr);

for (let i of fiboArr) {
  if (i % 2 === 0 && i < 4000000) {
    console.log(i);
    fiboSum = fiboSum + i;
  }
}
console.log(`Sum of even-valued terms: ${fiboSum}`);

```
You will see this in your terminal:

```javascript
0
2
8
34
144
610
2584
10946
46368
196418
832040
3524578
Sum of even-valued terms: 4613732
```

For those interested to solve more challenging questions, you may refer to this link for more questions. [Click Here](https://projecteuler.net/archives). Cheers!
Note: Laravel packages
Tags: laravel, php, note
Published: 2021-11-07 03:57:36

- [Laravel Excel](https://laravel-excel.com/) | Supercharged Excel exports and imports in Laravel
- [Laravel-permission](https://spatie.be/docs/laravel-permission/v5/introduction) | This package allows you to manage user permissions and roles in a database.
- [Laravel-enum](https://github.com/BenSampo/laravel-enum) | Simple, extensible and powerful enumeration implementation for Laravel.
- [Laravel-medialibrary](https://spatie.be/docs/laravel-medialibrary/v9/introduction) | This package can associate all sorts of files with Eloquent models. It provides a simple, fluent API to work with. The Pro version of the package offers Blade, Vue and React components to handle uploads to the media library and to administer the content of a medialibrary collection.


## Dev tools
- [Laravel IDE Helper Generator](https://github.com/barryvdh/laravel-ide-helper) | This package generates helper files that enable your IDE to provide accurate autocompletion. Generation is done based on the files in your project, so they are always up-to-date.
- [Laravel artisan gui](https://github.com/infureal/artisan-gui) | Simple but yet powerful library for running some artisan commands.
- [Laravel log viewer](https://github.com/rap2hpoutre/laravel-log-viewer) | Log Viewer for Laravel 5, 6, 7 & 8 (still compatible with 4.2 too) and Lumen. Install with composer, create a route to LogViewerController. No public assets, no vendor routes, works with and/or without log rotate. Inspired by Micheal Mand's Laravel 4 log viewer (works only with laravel 4.1)
First RESTful API in Express: Word List Generator API
Tags: javascript, heroku, programming, beginners
Published: 2021-11-07 00:47:45

## Why did I create this?
I stumbled across an article of someone who made his first **RESTful API** in **JavaScript**. I was curious on how it was built and gave it a look. I have never made an API myself, so I wanted to give it a try. Also I saw it was deployed on **Heroku** which I had never heard of. It seemed very interesting. ([Source](https://dev.to/mrsharm/my-first-javascript-rest-api-dog-facts-deployed-to-heroku-522p))

## Development
After thinking of an idea for an API, I came up with a **word list generator**. It gives you an array of words which can be used for whatever your creative brain can think of *e.g. a hangman game.*
### How does it work
Whenever an API call gets made, it grabs an ***x*** amount of random words from a wordlist. The wordlist is a **JSON** array of words. I've created 2 wordlists for 2 languages (*english & dutch*). You configure the data you want from the API through **querystrings**. Where `lang` is the language and `amount` is the amount of words you want. (*max 1000.*) If you want you can take a look inside the [GitHub Repository](https://github.com/ixmprove/random-words-api).

## How to use it
### Languages:
- **EN** *- English*

- **NL** *- Dutch*

- **IT** *- Italian*

### Example API call
`https://wordgenerator-api.herokuapp.com/api/v1/resources/words?lang=EN&amount=5`

### There are 2 querystrings:

- **lang=EN** *- to specify the language.*

- **amount=5** *- the amount of random words. (max. 1000)*

*These are also the default values.*

### Example response:
```
[
    "humanitarian",
    "furniture",
    "committees",
    "surprised",
    "procedure"
]
```
Project Universe game dev Unity update
Tags: gamedev, showdev, update, unity3d
Published: 2021-11-07 03:18:04

Dropping/picking up items is in & converted from multiple scripts to a single interaction script.

A special thanks to CMDR Ash for #voluntarily contributing to game development!

https://youtu.be/gcCuHg2KYOw

![Discord screenshot of game dev update from CMDR Ash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/861cv8y45af9g4kpv45n.png)
How to learn and practice more in Kubernetes Network Policy for CKx exams and EKS ?
Tags: kubernetes, devops, security, networking
Published: 2021-11-07 02:59:52

Good to learn more in Kubernetes network policy for CKx exams and EKS. Below are resources:
1/ read official doc and try to understand them well - https://kubernetes.io/docs/concepts/services-networking/network-policies/
2/ bookmark samples for exams and EKS setups - https://kubernetes.io/docs/concepts/services-networking/network-policies/#networkpolicy-resource
3/ do more practices at https://github.com/ahmetb/kubernetes-network-policy-recipes
4/ visualize (image below) and try more at https://editor.cilium.io/ - it allows you to save the final netpol in k8s netpol OR Cilium netpol (EKS-A is using Cilium !) 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynl37r7fhogsh9o81xxw.jpg)
PHP 8.1 in 8 code blocks
Tags: php, php81
Published: 2021-11-08 06:55:51

---
title: PHP 8.1 in 8 code blocks
published: true
date: 2021-11-07 00:00:00 UTC
tags: php, php81
canonical_url: https://stitcher.io/blog/php-81-in-8-code-blocks
---

```php
enum Status
{
    case draft;
    case published;
    case archived;
    
    public function color(): string
    {
        return match($this) 
        {
            Status::draft => 'grey',   
            Status::published => 'green',   
            Status::archived => 'red',   
        };
    }
}
```

_[Enums](https://stitcher.io/blog/php-enums)_

* * *

```php
class PostData
{
    public function __construct(
        public readonly string $title,
        public readonly string $author,
        public readonly string $body,
        public readonly DateTimeImmutable $createdAt,
        public readonly PostState $state,
    ) {}
}
```

_[Readonly properties](https://stitcher.io/blog/php-81-readonly-properties)_

* * *

```php
class PostStateMachine
{
    public function __construct(
        private string $state = new Draft(),
    ) {
    }
}
```

_[New in initializers](https://stitcher.io/blog/php-81-new-in-initializers)_

* * *

```php
$fiber = new Fiber(function (): void {
    $valueAfterResuming = Fiber::suspend('after suspending');
    
    // … 
});
 
$valueAfterSuspending = $fiber->start();
 
$fiber->resume('after resuming');
```

_[Fibers, a.k.a. "green threads"](https://stitcher.io/blog/fibers-with-a-grain-of-salt)_

Do you want to learn more about PHP 8.1? There's [The Road to PHP 8.1](https://road-to-php.com/). For the next 10 days, you'll receive a daily email covering a new and exiting feature of PHP 8.1; afterwards you'll be automatically unsubscribed, so no spam or followup. [Subscribe now!](https://road-to-php.com/)

```php
$array1 = ["a" => 1];

$array2 = ["b" => 2];

$array = ["a" => 0, ...$array1, ...$array2];

var_dump($array); // ["a" => 1, "b" => 2]
```

_[Array unpacking also supports string keys](https://stitcher.io/blog/new-in-php-81#array-unpacking-with-string-keys-rfc)_

* * *

```php
function foo(int $a, int $b) { /* … */ }

$foo = foo(...);

$foo(a: 1, b: 2);
```

_[First class callables](https://wiki.php.net/rfc/first_class_callable_syntax)_

* * *

```php
function generateSlug(HasTitle&HasId $post) {
    return strtolower($post->getTitle()) . $post->getId();
}
```

_[Pure intersection types](https://stitcher.io/blog/new-in-php-81#pure-intersection-types-rfc)_

* * *

```php
$list = ["a", "b", "c"];

array_is_list($list); // true

$notAList = [1 => "a", 2 => "b", 3 => "c"];

array_is_list($notAList); // false

$alsoNotAList = ["a" => "a", "b" => "b", "c" => "c"];

array_is_list($alsoNotAList); // false
```

_[The new `array_is_list` function](https://stitcher.io/blog/new-in-php-81#new-array_is_list-function-rfc)_
The two most common DevOps anti-patterns
Tags: devops, antipatterns, bestpractices, silos
Published: 2021-11-23 09:02:54

---
title: The two most common DevOps anti-patterns
published: true
date: 2021-11-07 00:00:00 UTC
tags: devops,antipatterns,bestpractices,silos
canonical_url: https://jhall.io/archive/2021/11/07/the-two-most-common-devops-anti-patterns/
---

DevOps is an often misunderstood term. So often, in fact, that I imagine _most_ companies who think they’re doing DevOps aren’t. Instead, they’re probably doing one of these common anti-patterns:

1. The Ops-to-DevOps rename

2. Add a separate DevOps team

The common thread in both of these specific anti-patterns is the existence of a “DevOps Team”. DevOps is _not_ a team effort, it’s a _cross-team_ effort. It’s a culture, a set of practices, [cooperation](https://jhall.io/archive/2021/02/11/devops-is-just-cooperation/), if you will. It only works when it encompasses the entire way of software development and delivery.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._