teleren/devto huggingface dataset:
How to make a guessing game in JavaScript
Tags: javascript, webdev, tutorial, programming
Published: 2021-08-15 09:43:22

So in this tutorial we are going to make a simple number guessing game which will generate a random number between 0 - 10 ( you can set the max number to whatever you want ) and then if the user guess the correct number it will show or else wrong answer will be shown.

##### [Join my discord server and talk with many programmers in there](https://discord.gg/WWFZU96XtM)
##### - First 25 people to join will get special role

```html
<input type="text" placeholder="Your Guess" id="inputfield">
<button id="inputsubmit">Submit</button>
<!-- The results will be shown here -->
<div id="result"></div>
```
```javascript
const inputfield = document.getElementById('inputfield')
const inputsubmit = document.getElementById('inputsubmit')
const result = document.getElementById('result')

const random = Math.floor(Math.random() * 10)

inputsubmit.addEventListener('click', () => {
    const inputvalue = inputfield.value
    const input = parseInt(inputvalue)
    if ( random === input ) {
        result.innerText = "Correct answer"
    } else {
        result.innerText = "Wrong answer"
    }
})
```

##### [Play the upgraded number guessing game made by me] (https://thevik.github.io/guessit/)

ok so in html we only make a input field for guessing the number, a button to submit that guess and a div to show the results.

in javascript we are getting all of those things in html using getElementById and then we generating a random number using Math.random() and multiplying it by 10 ( this is the max number change it to whatever you want.

now we adding a event listener to our button then making a const named inputvalue and passing inputfield.value in it then we are using parseInt to get the integer value of inputvalue.
now we just using a if statement so if random === input then we will write "Correct Answer" in our result div and else we will write "Wrong Answer" in our result div.

THANKS for reading this much :D
We need more realistic web development knowledge sharing
Tags: testing, javascript, debugging
Published: 2021-08-15 09:42:52

Online web dev tutorials are taking a dangerous turn. Medium articles galore, stackoverflow aplenty...but none of them teach the most important developer skill that is worth its weight in gold. No, it's not "React" or "Svelte" or "Tailwind" buzzword soup.

It's testing and debugging. Unsexy, ugly, schlep inducing work that customers and clients don't see, other devs don't care about, management doesn't know about, your fiance doesn't GAS about.

A developer spends at the very least 30% of their time debugging. And many hours have been spent on hair pulling with simple bugs that could have been caught with good tests. Don't get me wrong, tests are not a magic pill for bugfree code. Coding is still very much an artistic discipline. Testing keeps us in line, away from the rabbit holes.

"Building a chat app in two hours" type of tutorials are great and probably well intentioned, but they leave out the other 40+ hours of real work. Especially if the person building the "chat app" is a senior dev who isn't really thinking about a junior developers mental model of how to build a system - and how it's radically different from theirs.

### Here's some links to get beginner/junior developers started on the journey to solving problems and building good, robust and reliable systems. Even if it's a simple login form.

[Javascript Debugging](https://raygun.com/learn/javascript-debugging-tips)

[Techsith tutorials](https://www.youtube.com/watch?v=-bS6u_oQFtc)

[Stackify Debugging](https://stackify.com/a-practical-guide-to-javascript-debugging/)
Git tutorial
Published: 2021-08-15 09:37:42

![git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8jw44l9sz4kmg9uhxdg.png)
Git is a distributed version control and source code management system with an emphasis on speed.
Git allows developers to work simultaneously, maintain code version and prevents overwriting each other's changes.

##Git Advantages
- Free and open source
- Fast and small
- Easy to create branches
- No need for powerful hardware

##Git Workflow
1. Modify a file in your working directory
2. Add file to staging area
`git add 'filename'`
3. Commit the changes
`git commit -m 'commit message'`
4. Push the changes into your remote repository
`git push origin 'branch name'`
This week in Flutter #16
Tags: news, flutter, dart
Published: 2021-08-15 18:11:53

---
title: This week in Flutter #16
published: true
date: 2021-08-15 09:36:01 UTC
tags: News, Flutter, Dart
canonical_url: https://ishouldgotosleep.com/this-week-in-flutter-16/
---


GitHub is moving forward with its [Codespaces](https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/) tool. You can fire up a project from a GitHub repository in **seconds** and **work on the code from a browser** or Visual Studio Code.

Will it be possible to have your project running in a macOS environment stack? You do not need it for Flutter development, and Codespaces seems to be marketed to web developers.

Working on a Flutter app via browser from an iPad, preview the web version, and then **trigger a test build** on your CI to test the mobile versions does not sound smooth to me. What do you think? Would you like to be able to code your Flutter app from a browser?

<small>- Michele Volpato</small>

## 🧑‍💻 Development

### [How to Parse JSON in Dart/Flutter: The Essential Guide](https://codewithandrea.com/articles/parse-json-dart/)

Your app likely needs to get **data** from some APIs. Such data is probably provided in JSON format. [Andrea Bizzotto](https://twitter.com/biz84) shows you the **basics of parsing JSON data** in Dart.

* * *

### [Integrate Amazon Lex With Flutter App](https://monik.hashnode.dev/integrate-amazon-lex-with-flutter-app)

Chatbots are becoming more and more important for the **support strategy** of a company. [Amazon Lex](https://aws.amazon.com/lex/) is one of the tools you can use to provide such a feature in your app. [Monikinderjit Singh](https://twitter.com/monikIJS) has a simple tutorial to get it integrated with a Flutter app.

* * *

### [Subtle Flutter mistake I made today](https://indy9000.hashnode.dev/subtle-flutter-mistake-i-made-today)

When you share your code, you want to share your **achievements** , **not your mistakes**. That is why I like this small article by [Indy Garcia](https://twitter.com/with_indy). I must say that I made that mistake as well in the past, and I am sure you did as well.

* * *

## 🤷‍♂️ Others

### [Validating flutter at scale](https://blog.funda.nl/validating-flutter-at-scale/)

If you tried to buy or sell a house in the Netherlands, then you know [Funda](https://www.funda.nl). On their website, you find the majority of houses for sale, and you can contact the estate agent directly. In this article, the engineering team explains how they **evaluated Flutter**"for feature teams to build features simultaneously on web and mobile apps".

* * *

### [HeroMode (Flutter Widget of the Week)](https://www.youtube.com/watch?v=AaIASk2u1C0)

`HeroMode` helps to **disable the hero animation** of a `Hero` widget. Why would you want to disable the animation of a `Hero` widget you added to the tree willingly? The most common case is when you have nested `Navigator`s. You want the widget to animate only when the child `Navigator` is used.

* * *

[...]

[Read the rest on ishouldgotosleep.com](https://ishouldgotosleep.com/this-week-in-flutter-16/)
HNGi8 x I4G Internship
Published: 2021-08-15 09:33:56

<link rel="preconnect" href="https://fonts.googleapis.com">
<head><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"></head>
The HNGi8 x  I4G internship is here again!! Although this is my first time participating. I heard of the program for the first time around this time last year and saw so many good reviews about the internship.


<strong>About Zuri</strong>
"A Beginner Training For Complete Tech Novices Or Beginners. Our interest is in reaching as many people as possible who would normally not have access or funds to afford such training." You can check out zuri on <a href=https://twitter.com/theZuriTeam?s=08>Twitter</a>  or the website to learn more about them <a href= https://zuri.team/articles/category/zuri-training/>Zuri</a>

There are so many reasons one would like to participate in a programme like this, and there are also many things I would like to achieve when this internship is over. I'm on the Frontend Development stack in this program and these are my Goals.
<strong>My Goals for the Internship</strong>
1. Reach the final stages.
2. Gain soft skills such as working and communicating in a team.
3. Having a network of likeminded people and also people who can be mentors.
4. Gain proficiency with tools I would need in my Frontend Development Journey.

Do you also want to learn Frontend Development? Here are some of the tutorials I used to learn.
1. <a href="https://youtu.be/4W4LvJnNegA" style= "text-decoration: none"><strong>Figma: Brad Traversy</strong></a>
2. <a href=https://youtu.be/0FaJF4t5Kfo><strong>Git/Github: The Zuri Team</strong></a>
3. <a href=https://www.w3schools.com/html/html_intro.asp><strong>HTML: W3SCHOOLS</strong></a> 
4. <a href= https://youtu.be/PkZNo7MFNFg><strong>JavaScript: FreeCodeCamp</strong></a>
Rxjs Expand - Reactively Retrieve All Rows From a Paginated Source
Tags: rxjs
Published: 2021-08-15 09:22:15

Let's say you have a data source which is paginated, so you can request this page or that, but you can't request all the entries at once. Now, regardless of whether it is right or not, how would you approach this task, if you wanted to do it anyway?

One approach would be imperative. In the imperative way, we use a loop, get one page, wait for the results, get the next one, and so on. When a page query returns no results, we return the collected results.

```typescript
let pageNumber = 0;
let results = [];

do {
  const pageResults = await getPage(pageNumber++).toPromise();
  results = results.concat(pageResults);
} while(pageResults.length !== 0);

return results;
```

But imperative is so 2nd millennium, we want to do some reactive magic! Enter expand...

The `expand` Rxjs operator takes an input, and returns an observable. It then emits from that observable, but for each emitted item, it calls itself recursively. In our case the recursion is simple, call with *page: n+1* until no more data arrives.

For this recursion to be valid, expand needs to return an observable of the same type of its input, and this input must contain the page number, so we must "annotate" our results with the page number as well.

```typescript
const getPageAnnotated = pageNumber =>
  getPage(pageNumber)
    // Annotate with the page number
    .pipe(map(results => ({ results, page: pageNumber })));

return getPageAnnotated(0).pipe(
  expand(pr => getPageAnnotated(pr.page + 1)),
  takeWhile(pr => pr.results.length !== 0),
  map(pr => pr.results),
  scan((acc, v) => [...acc, ...v])
);
```

Although this works, the astute will notice that we're missing the termination condition in the `expand` call. So how come it works without it? The answer is `takeUntil` - because we are completing the entire stream as soon as a query returns with no results, the next query will get cancelled.

This might be harmless, but we can avoid it easily by changing the expand call to:

```typescript
expand(pr => pr.results.length !== 0 
               ? getPageAnnotated(pr.page + 1) 
               : EMPTY)
```

This way we will not try to get the next page, if the result from the current page is empty.
Java Interview Questions
Tags: java, interview, softwareengineering, job
Published: 2021-08-15 09:22:11

Hello reader! The purpose of this blog is to simply share some common java interview questions that I was asked in the past when going through job interviews with top finance firms. I hope that you'll find this useful.

- What is a class 
- What is an object
- Object VS class
- Method overloading
- Method overriding
- Access modifiers (private, public, protected, default)
- Difference between method overloading VS method overriding
- Object-Oriented Programming: inheritance, polymorphism, abstraction and encapsulation. 
- Aggregation and association. 
- Dynamic binding (linked to abstraction)
- Static keyword
- Final keyword
- Strings: talk about why they're immutable and what happens in the memory (stack and heap). String is a class.
- Stringbuilder VS Stringbuffer
- Interface: why it's used. 
- Can we have multiple inheritance? If not, why? What can we do instead?
- Difference between abstract class and interface
- Memory management: garbage collection, the types of garbage collectors
- How does a hashmap work internally
- Collections Framework
- Exception handling: throw, throws keywords, what is a runtime exception.
- Runtime Type Checking
- Difference between the keywords final, finally, finalize
- Try/Catch/ Finally block 
- Exception propagation
- Multithreading: what is a thread, how to create a thread (Runnable interface OR Thread class)
- Thread safety
- Synchronize
- Difference between a set and a list
- Java 11 features 
- JDK, JRE, JVM
- SOLID Principles
- Test Driven Development
- Git commands

Good luck! 🍀🍀🍀
My Goals and Achievement after 8 weeks of the HNGi8 Internship with Some Beginner Level Tech Tutorial.
Tags: github, git, codenewbie, beginners
Published: 2021-08-15 09:15:30

## My Goals for HNGi8 internship include the following:

### As a backend Engineer, Choosing a sub-level skills to add to your portfolio is either to learn a new path about DevOps or BlockChain, which make me to decide to go for the one I have always wanted and curious about it.

#### Aim of HNGi8 Internship

**1.** Scale through the DevOps task for selection, and to be among selected for the DevOps Engineer Track.

**2.** To help people who are just starting their career in software engineering and also meet new friends that will be impactful to my growth in tech, and in aspect of life.

#### 8 weeks Achievement in HNGi8
**1.** I want to improve my leadership, communication and problem solving skills.

**2.** By the end of the HNGi8 internship which will also be the end of my NYSC service year, I should have asscertain some levels of confidence of becoming an ideal software engineer which is between intermediate and professional.

So watch out for me definitely I will be glad to spill out the achievement I have made during the journey of the internship

Here, checkout the basics utorial for beginners who is venturing into the tech career.

[Git and Github](https://www.youtube.com/watch?v=3fUbBnN_H2c)
[Figma Designing](https://www.youtube.com/watch?v=4W4LvJnNegA)
[JavaScript with NodeJs](https://www.youtube.com/watch?v=-27HAh8c0YU)

Also, check out the zuri platform, it's a platform for beginners and intermediate to improve their skills as well. 
[Zuri Team](https://internship.zuri.team)
Prop Drilling
Tags: react
Published: 2021-08-15 09:11:38

Components in React can be passed some parameters. These parameters are generally named props.

When i started learning  in React . I came across Prop drilling it . Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.  Data needed to be sent from Parent to Child. 
## The diagram can be given as :- 

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxaenhlf6jctjr9t5jrx.jpg)

### React has a component based design like:-

* App.js
* Post.js
* login.js
* Feed.js 
* Header.js
* Sidebar.js

![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jahny1fkytx56tponou.jpg)


The App.js is the main parent here it first checks with the Login.js for the authentication of the user then the details is been send to the feed section for further details .

assume when we login we get the user for the user object . then if we have to pass the user through the tree it will be messy and hard to understand . 

The Prop Drilling helps to traverse the data requied in this case we have the user details after login in then the data is been send to the feed as per the user then we can fetch the data of the user as in the form of posts.

# -> Why is Prop Drilling a Problem? 

Prop drilling doesn’t have to be a problem. If we are passing data only between 2 or 3 levels, we are fine. It will be easy to trace the flow of data but if  we are drilling 5 levels, or 10 levels, or 15 it will be a problem because the data will have to traverse all through the levels .


# -> So how can we prevent this from happening ?

We can actually use react context .

React context can help us to pass the data through to all the components in the tree , without taking too much time to pass it down every level . 

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

In our case we want the user details to be given to the required place . Assume we want the user details in the post part to know that what posts the user has made as per the user id or personal details . After getting the details the post part will only show the posts and we do not have to pass the user details throughout the tree.

# -> Without using Prop Drilling

                         useContext hook

We can use  alternative by using useContext hook. The useContext hook is based on Context API and works on the mechanism of Provider and Consumer. Provider needs to wrap components inside Provider Components in which data have to be consumed. Then in those components, using the useContext hook that data needs to be consumed.

Thanks for your time , Have a nice day 😄
What is WebAuthn?
Tags: passwordless, passkey, webauthn, biomatric
Published: 2022-11-01 06:25:05

---
title: What is WebAuthn?
published: true
date: 2021-08-15 09:11:23 UTC
tags: passwordless, passkey, webauthn, biomatric
canonical_url: https://mojoauth.com/blog/what-is-webauthn/
---

WebAuthn is a browser-based API that allows websites to use built-in authenticators or secure keys to authenticate users. When a user registers, a public-private key pair is generated for the account. The private key is securely stored in the user’s device, while the public key is sent to the server. Then, the server can use the private key to ask the user’s device to sign a “challenge” to verify the user’s identity.

[Read On](https://mojoauth.com/blog/what-is-webauthn/)
Datastax - Netflix Clone using Astra DB and GraphQL
Tags: cassandra
Published: 2021-08-15 08:52:18

Recently, I attended a workshop by Datastax team on creating a Netflix clone using Astra DB (cloud-based Cassandra implemented by Datastax) and Graphql api endpoints.

 The objectives of the workshop were as follows:
•	Deploy a Netflix clone to production
•	Learn GraphQL API and how to use it with a database to create the tables and navigate the data.
•	Learn about paging and infinite scrolling in web ui
•	Leverage Netlify and DataStax Astra DB

I got to learn about how to create an instance in Astra DB, followed by understanding the structure of the database, followed by creating a table and then the entries to the table, the ability to retrieve all or a specific record from the table. We also learn how to import movies dataset using a CSV file. 

All CRUD operations were implemented using the GraphQL endpoints leveraging the key obtained from the Astra-db instance.

Netflix ui created was on ReactJS which was deployed using Netlify. The development was done on Gitpod – a cloud based VSCode.

The 2 hour live workshop was instrumental in solidifying understanding about data modeling and how easy the deployments can be proper set of tools and technologies.

Webinar recording - https://www.youtube.com/watch?v=4WmafdS66Xo

Github repo of the workshop - https://github.com/datastaxdevs/appdev-week3-graphql

My Netflix clone is accessible at https://determined-fermi-796bc7.netlify.app/
As an additional exercise, we were asked to add a movie of our choice, and I did add my – 2001 A space Odyssey !!
And the icing on the cake is a badge what you get on successful completion of the assignment.

Few of the other impressive workshops from Datastax team which I have attended are 
1)	Intro to Cassandra Workshop
2)	Building a TodoApp with Javascript Workshop
3)	Astra TikTok Clone Workshop
4)	Introduction to NoSQL Workshop
ECS migrate to EKS part 2
Tags: aws, ecs, eks, kubernetes
Published: 2021-08-15 08:52:07

> 本文撰寫自 2020-02-09，技術的細節可能不是最新的

## Software Development Life Cycle (SDLC)

這一次的 Migration 基本上可以套用 SDLC 的概念，但是迭代更快，為了增加效率決定把 task 細分，每個 task 都跑一次 SDLC 。其實 SDLC 每個階段的劃分大家都不太一樣，而我的 SDLC 的流程大致如下：

1. Project Initiation
2. Requirements Gathering
3. Analysis
4. Design
5. Development
6. Testing
7. Deployment
8. Maintenance

## Project Initiation

在這裡我們需要站在高處上考慮到整體，什麼問題需要解決、手中資源有多少、時程、里程碑、商業價值等等。

[上一篇文章](https://dev.to/ricotoothless/ecs-migrate-to-eks-part-1-68m)，因為公司內部日趨複雜的專案越來越多，原本簡單的維運方式已經無法負荷，所以從 ECS migrate to EKS。

## Requirements Gathering

原本在 SDLC 裡 Requirements Gathering 是幫助定義是否有這需求，不過呢，基本上原本在 ECS 的優點都是必須的，幸運的是這些優點都可以在 EKS 上實現，我們能做的就是排定優先順序完成。

## Analysis

1. 分析是否可以把整個 Project 切成小的 task 。
2. 分析每個 task 若要達成的話需要哪些要求，例如資料要先備份，有依賴性的服務要先把依賴關係搞清楚。
3. 分析失敗的風險是要可以控制且可以預測的，基本上只要資料有備份好，使用 container 切換很快所以還可以。
4. 分析這個 Project 是否可以對不同職位的人都容易上手，我個人的想法是呈現給他們的都是最簡單的一面，實際使用的時候不用知道太多背後的原理。

## Design

因為每一個 task 實際怎麼達成目標的方法都不太一樣，以下幾點是 Design 的核心原則：

1. 要做出好的 Design 必須深入了解所有技術的細節，你的 application 能力、工具的能力、團隊能力等等。（雖然整個 migrate 過程只有我一個人就是了）
2. 所有的 Design 計畫必須要給有相關的人員檢視過。
3. 若相關人員給出建議之後再整合到 Design 計畫裡。

在真正開始 migrate 之前，必須要先了解工具現有的 migrate solution ，像是資料庫 migrate 和 credential migrate ，這些工具都會有 migrate 的功能，不只了解還得實際演練一次，畢竟任何資料都要小心謹慎處理。

## Development

接下來就是真正要實作的部分，一樣有幾個核心原則：

1. 先測試環境之後正式環境。
2. 先無狀態 application 之後有狀態 application 。
3. 先簡單之後困難

第一點應該沒什麼需要補充的，而第二點其實跟第三點的概念十分相似，自己本身雖然有學過 Kubernetes 但畢竟實際實踐是兩回事，所以本質上是從頭開始學起，所以先站穩腳步再提及跑步是妥當的做法，再加上有些工具都要跟著換會更好，例如 CICD 的工具 [Kubernetes plugin for Jenkins](https://github.com/jenkinsci/kubernetes-plugin)。

## Testing

Testing 是非常重要的一環，必須要把功能各方面都保護好，除了要測是否有 bug 也要測是不是完全符合需求。基本上測試的人也是我，所以沒有特別跑 [Bug lifecycle](http://tryqa.com/what-is-a-defect-life-cycle/)，因為是我自己跑那個 lifecycle 。 Testing 核心原則如下：

1. 不要有任何推測、假想、幻想某些看似基本或微小的功能是正常的。
2. 測試發現跟預期不一樣也不能對功能有妥協，功能當初設計要 80 分，驗收的時候就該是 80 分以上 。
3. 如果真的需要妥協，像是當初 Design 就有問題，就 feedback 並回到 Design 的階段。

## Deployment

Deployment 的原則和 Development 差不多，每個 task 重要程度不一，所以 Deployment 也要看花多少資源準備。當我測完之後，就會開始 migrate ，不論是哪種 task ，在這之前都要準備好備份。當然還有一點就是要稍微選擇一下停機時間，盡量不影響他人是美德。

## Maintenance

接下來就是準備好接受真實 user 的 feedback 了，不論 user 是客戶或是坐在隔壁的開發人員都必須好好面對，畢竟他們給的 feedback 才是最有價值處理的事情。

## Conclusion

下一篇會講更多實踐的技術細節，這邊先做一些總結：

1. Project Initiation 要確認 migrate 價值
2. Requirements Gathering 要確認是否有開啟 migrate 的需求
3. Analysis 要分析我們能做到什麼程度，風險是什麼
4. Design 要深入了解技術後再 Design，且必須持續整合其他人的 feedback
5. Development 要扎扎實實且一步一步的完成
6. Testing 要務實、堅守立場最後真的有疑慮再做 feedback
7. Deployment 要隨時有 B 計畫，並且盡量讓服務不停機
8. Maintenance 要廣納接受所有 feedback