teleren/devto huggingface dataset:
Last Minute Boilerplates
Published: 2021-09-13 04:30:46

One of the definitions of boilerplates is "writing that is clichéd or expresses a generally accepted opinion or belief". This writing, in a sense, is the cliché of "I had all week to do this, and I'm writing it 5 mins before midnight the night it's due". We all have our strengths and weaknesses, much like frameworks. 

There's really sparkly ones that are full of menus to get you started, like Angular. It's too cluttered. No, I don't want to check out the Angular blog. What's the fun in having things easy? Angular is the only one that uses ng to set it up. Sounds like some proprietary bs (as I type this on a Mac). 

StencilJS seems like an underdog, it's got a story to tell. But it's not a framework at all. Like the lovable oddball most movies have (back to clichés), that's kinda where StencilJS sticks. It seemed similar to open-wc as in it used the terminal to select options, and was a simple line of text to you get started with your web component. 

React was simply established. There was a lot of documentation associated, but there's a full stack of developers dedicating their lives to it. Many people who swear by it, and that just happens to create a large pool of features because everyone has their different needs. This is gold star of developer experience; there's so many resources and so many people working on it, how can it be horrible. 

VueJS was simple enough to use. If I was going to build an app tomorrow, I would probably try Vue because there seems like enough documentation to help me stumble through it.

Overall, all frameworks have a similar set up. There's package.json files and src files. That's just conventions, clichés, what frameworks are. I think my favorite is the inevitable README.

proof:
https://github.com/runtimeErrorsMadeEasy/boilerplates
如何理解 Jira 的 Story
Tags: jira
Published: 2021-11-03 03:27:57

雖然 Jira 的頁面載入的又慢，UX 又差勁，導致快要被新崛起的 Linear 幹掉，但在資訊產業 Jira 大概還是 Trello 以外最多人用的專案管理系統了吧？！

在 Jira 的專案如果是開設成 Software 的話，應該會有以下幾種 issue type：

- Epic
- Story
- Task
- Subtask
- Bug

當然它們字面上的意思誰都知道，但是其中在 Jira 內的角色與意義為何，其實一直沒有認真的了解過，這裡試著以我在網路上吸收到以及融合本人觀點的對於這些 Jira issue type 的理解，另外需要特別提前聲明本人不完全懂也不是「敏捷」、「agile」、「scrum」流派的信仰者 XD，因此下文若有對「敏捷」理解不正確的地方敬請見諒。

## 階層關係

在 Jira issue type 的階層關係上，越高的層次抽象性越大，也越用於描述一種較廣泛的、不精確的、整體的概念；而越低的層次更貼近單一的功能，或者需求，或者做法。

Jira 的階層，由高至低排序：

- 頂天層：Project
- 第零層：Component
- 第一層：Epic
- 第二層：Story / Task / Bug
- 第三層：Subtask

這邊也把 project 與 component 加進來，雖然它們並非 issue type 的層級，不過在專案層級上的確也具有角色，所以就一併列入了。

根據 [Jira 的文件](https://support.atlassian.com/jira-software-cloud/docs/configure-custom-hierarchy-levels-in-advanced-roadmaps/)，story 用於表達較小部份的產品需求；epic 用於表達較大部份的用戶案例，一個 epic 可以被切割成數個 story；而 subtask 則是 story 的再下一層，用於當需要把 story 切割成更小的工作細項時使用。

## Story

在 story 這種對於需求的描述出現以前，從需求轉化為規格的這段過程，只出現於人腦（直接腦補轉換沒有付諸文字），或是做為規格的補述，可是這樣直觀的轉換中會落失需求的原始動機與需求對客戶的價值高低，這些資訊的遺漏會導致開發人員落入「[知其然而不知其所以然](https://pedia.cloud.edu.tw/Entry/Detail/?title=%E7%9F%A5%E5%85%B6%E7%84%B6%E8%80%8C%E4%B8%8D%E7%9F%A5%E5%85%B6%E6%89%80%E4%BB%A5%E7%84%B6)」的狀況，用經典的鞦韆圖可以很直觀的表達這樣的狀況。

<figure>

![鞦韆圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scl8a5m2nuv3kwqkgmyg.png)
<figcaption>來源：網路</figcaption>
</figure>

在 story 這種 issue type 被設計出來以後，終於有地方可以讓需求的原始動機與價值有記載的地方，並且也把需求至規格這段原先腦補的過程以文字記錄下來，目的當然是希望團隊的所有成員在做產品的時候可以理解需求的原始動機與價值，以避免錯誤理解或過度設計的問題發生。如果拿 [5W1H](https://zh.wikipedia.org/wiki/%E5%85%AD%E4%BD%95%E6%B3%95) 對一個 issue 做解構的話，story 會負責用於描述為何（why）會有這個 issue，以及是誰（who）發出這個 issue、issue 的需求是什麼（what）、在何時（when）何地（where）發生，而開發人員如何（how）在技術層面處理這個 issue，則不是建立 story 時所必須填入的內容（至少在 story 標題的地方不是）。

開發人員如果有需要可以另開 task 或 bug 類型的 issue 來記載對開發人員來說實際需要進行的工項，並連結相關的 story 與 task / bug 工項。

另外一方面，如果要把相關的 story 整理起來，則利用 epic 讓 story 能被有組織的被歸納起來，也能為專案的諸多需求有分門別類的地方。

## Story 的粒度

Story 用於描述使用者需求，然而「使用者需求」這件事本身就難以估量，特別是在面對不同的層級的客戶，他們的需求可能會長的相當不一樣，對客戶的大老闆來說，他要一套「幫助公司營運的 ERP 」，然而對客戶的基層員工來說，他要的是「幫我在結帳頁面加個會員資訊區塊好讓我對會員進行個人化服務」，在實際建立 story 時，面對過於廣泛而粗略的需求（上帝的旨意往往就是這麼虛無飄渺），還是必須依賴人力去把這類需求拆解成數條更具體且具有可執行性的項目後再建成 story，這項工作可能落在專案經理或專案分析師上面，對老闆兼撞鐘的小公司來說，就是落在老闆兼專案經理兼開發兼測試的人上面。

另外一種情況也不適合用 story 描述，即過於細節的工項，舉例來說，在一個 POS 系統，顯然結帳頁面載入的微互動不會是客戶在意的點，這種過於細節的部份就會以 subtask 的方式描述，想反的來說，對遊戲來說，UX 的流暢感相當重要，同樣一件事在遊戲專案上就會提昇至 story 層級。

第三種不適合用 story 描述的工項，即過於工程面或規格面的部份，舉凡 API 交換的規格、欄位的命名規範、錯誤處理的機制、log 檔的紀錄等等，皆不屬於 story 的範疇，應該用 task 來建立這些工項，有必要的話再用 Jira 的 issue link 的功能讓 story 與 task 相關連起來。

## Story 的標題格式

網路上最常看到的格式：

<p style="font-size: large;">「As a  <strong>XXX</strong>, I want <strong>YYY</strong> feature so that <strong>ZZZ</strong>.」
</p>

翻成華文是這樣：

<p style="font-size: large;">「身為一位 <strong>誰誰誰</strong>，我需要 <strong>某某某</strong> 功能才能 <strong>這般這般</strong>。」</p>

這句充滿贅字的句子應該簡化成這樣：

<p style="font-size: large;">「<strong>某某某</strong> 要 <strong>如此如此</strong> 才能 <strong>這般這般</strong>。」</p>

絕對不要把贅字也寫進來，不論是洋文還是華文。

## 參考資料

- [需求的大小](http://teddy-chen-tw.blogspot.com/2013/10/blog-post_2.html)
- [User Story 的那些人與那些事](https://www.slideshare.net/yichingc1/user-story-127411237)
- [Atlassian In Action – Jira之核心配置（二）](https://www.jianshu.com/p/6e8cbb9deb04)
Step To Setup Sveltejs App  
Tags: beginners, javascript, programming
Published: 2021-11-03 03:23:26

## what is svelte
Svelte is a compiler used for creating reactive web app and interfaces. it can be used for creating a small part of a site or simple page application **(S.P.A)**. svelte Is not a framework but a compiler.
## How to install svelte
-first step Is to know **HTML**, **CSS**, **JAVASCRIPT**, and install **Nodejs** (you don't need to have any knowledge on Nodejs. it is just to use npm.)
-open the terminal(c.m.d) and type.```javascript
 "npm -g install degit";
```Degit helps to clone the latest commit from a GitHub
-Degit helps to grab the svelte template from the GitHub repo by typing
```javascript
"degit sveltejs/template my myproject";
```N.b: myproject is the name I give my project so you can name it anything.
After it installs run on text-editor.
## Why I Choose Sveltejs.
As a self-learner i found react difficult so someone gave me advice to learn svelte that It will make react easy. I am now in love with it even if it's my first framework. i went through my react tutorial and it's becoming easy thanks very much @htmleverything . You can also try it for those who find react difficult and I promise you that you will not regret it. I shall share more to you guys on my journey on sveltjs.
Follow me on Twitter for more.
Wundergraph Explained in 300 Seconds
Tags: graphql, webdev, javascript, react
Published: 2021-11-03 03:09:03

Hello Wunderfans! If you enjoy our content, never miss a blog post or story by subscribing to our newsletter or even better, joining our Discord! Hope you enjoy our latest piece and happy coding! Please enjoy this video explaining Wundergraph in 300 seconds! Enjoy!

{% youtube dv6iJalVdaE %}
Game Market Survey
Tags: gamedev
Published: 2021-11-03 02:59:01

So, this isn't directly development related. But, I thought about this site and figured there would probably be some people on here willing to do a survey. This is a survey I did before, before I made a dev.to account, but I've changed it a bit and I think enough has changed from last time that it makes sense to do this again. So, here you go.

![QR Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozjadd1emfuu9do183ho.png)

[Prefer links? Click here.](https://surveyhero.com/c/bj7qdg4r)
Menu Active Page
Tags: tutorial, javascript, webdev, programming
Published: 2021-11-03 02:58:39

When I used scrollspy from bootstrap I realized it only applies to the case within a single page. The following idea came up to make the menu active with a check system from the url. 

### Container HTML
In my case the `nav` menu container is like the following.

```html
<div class="classynav">
    <ul id="nav">
        <li class="nav-item">
            <a href="https://example.org/about.php">Tentang</a>  
        </li>
        <li class="nav-item active">
            <a href="https://example.org/project.php">Project</a> 
        </li>
    </ul>
</div>
```
### Script
The principle of this script handle only matches the selected url with the url in the container. For sub menu handlers, I haven't been able to find a meaningful solution, maybe you can use the `split` attribute `?id` for the php web case, or maybe you have an interesting idea, please share it in the comments.

```js
    $(function(){
        var url = window.location.href; 
        $(".classynav a").each(function() {
            var d = $(this).attr('href');
            if(url == d) {
                $(this).closest(".nav-item").addClass("active");
            }
        });
    });
```

***Done***
How To Validate Upload File Type Using Javascript
Tags: javascript, validate, file, codenewbie
Published: 2021-11-03 02:54:25

Today we will see how to validate upload file type using javascript. here, we easily check the selected file extension with allowed file extensions and we can restrict the user to upload only the allowed file types using file upload validation in jquery.

laravel provide in built file type validation in controller but it works server side only it means we can received validation message after form submit, here i will give you example to check file type before submit data in form using javascript.Currently we have checking only specific file extention like ".txt" , ".csv"  etc... or you can use all file types like "image/* ".  

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>File upload type validation in javascript - techsolutionstuff.com</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  
</head>
<body>
  <h3 style="text-align: center;">File upload type validation in javascript - techsolutionstuff.com</h3>
  <div class="col-md-6 col-md-offset-5"><br>
  <input type="file" name="file"  id="filesizecheck"><br>
  <span id="error-message" class="validation-error-label"></span>
  </div>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    $('#filesizecheck').on('change',function(){
      myfiles = $(this).val();
      var ext = myfiles.split('.').pop();
      if(ext == "txt" || ext == "png"){
        $('#error-message').css("display","none");
      }else{
        $('#error-message').html("Only allow valid file inputs.");
        $('#error-message').css("display","block");
        $('#error-message').css("color","red");
      }
    });
  });
</script>
``` 

And you will get output like below image.

![How To Validate Upload File Type Using Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qe1f37xzr3b89fix6fh.png)

--- 

You might also like :

**_[Read Also : How To Validate Max File Size Using Javascript](https://techsolutionstuff.com/post/how-to-validate-max-file-size-using-javascript)_**

**_[Read Also : How To Integrate Paypal Payment Gateway In Laravel 8](https://techsolutionstuff.com/post/how-to-integrate-paypal-payment-gateway-in-laravel-8)_**

**_[Read Also : How To Create Dynamic Pie Chart In Laravel](https://techsolutionstuff.com/post/how-to-create-dynamic-pie-chart-in-laravel)_**
The best place to buy Escape from Tarkov Money
Published: 2021-11-03 02:03:29

The best option to earn Escape from Tarkov Money
Escape from Tarkov (EFT), developed by Battlestate Games, is a hardcore reality online first-person action role-playing game with MMO features and story-driven walkthroughs. Escape from Tarkov is a game about survival, so all players need enough game items to equip themselves. How to obtain them? Of course, we can buy it with game currency.


About Escape from Tarkov Money
There are multiple currencies for fleeing Tarkov, and each currency is used to purchase items. The following is a brief description of escaping Takov money.

Rubles-as the most commonly used currency, it can be found in safes and other different places.
Euros- a small amount is safe, but it is mainly exchanged for rubles in LL2 by skiers.
US Dollar-As the main currency of the Peacekeeper, it appears in a small amount in the safe, but it is mainly exchanged for the ruble by the Peacekeeper LL1.
Bitcoin-Mined using a rig assembled in the game. I bought it from a mechanic before.



Buy cheap Escape from Tarkov Money safely and quickly from https://eznpc.com. (https://eznpc.com/escape-from-tarkov-roubles)

Ezmut.com is a professional and reliable online store that offers Escape from Tarkov Money at the lowest prices, including rubles, dollars, euros, and bitcoins. With many years of rich experience in the game market, we have established a good reputation with high-quality service, fast delivery, and competitive prices.

Competitive Price:
We believe that lower prices will bring more business. Therefore, the cost of game currency in our store is more competitive than other stores. When you need to buy game coins, our website is the best place to buy rubles, U.S. dollars, Euros, and Bitcoins to escape the takov.

Fast Delivery:
Have a professional service team, guarantee to complete the delivery within five minutes (except for exceptional circumstances). From the moment you place an order with us, we will work tirelessly to ensure that the order is completed as soon as possible. We hire many well-trained customer service agents and inventory experts and use proprietary technology to meet your needs quickly.

Secure Transaction:
We send EFT Money to your account face to face in the game, which can guarantee the security of your account at most. If you cannot trade with us within a certain period, we will save your order in our system. All information about your account and roles will be encrypted and stored.

Best Customer Service:
Our well-trained and experienced customer service staff are always ready to solve all your problems. They are on duty 24 hours a day, seven days a week. If you encounter any problems during the shopping process, you can always contact our friendly customer service staff.
Notes From Creating a Slack Clone in React.js
Tags: react, javascript, webdev
Published: 2021-11-03 01:57:19

Source: https://www.youtube.com/watch?v=-cMqr9HpZ-Y&t=21198s

1. CSS: * { } <- applies to all elements.
2. BEM (Block Element Modifier) Naming convention: http://getbem.com/naming/ 
3. Comments in JSX: {/* */}
4. Comment out layout in the components.
5. CSS: .name <- name of the class to style.
6. Material UI for Icons: https://mui.com/components/icons/
7. Flex Box for alignment: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 
8. padding: Apx Bpx <- A: Top + Bottom and B: Left + Right padding.
9. justify-content: Aligns the flex items. 
10. Variables in CSS: --name-of-variable usage: var(--variable)
   - Variables can be defined in a particular scope.
11. flex: val <- specifies the val of flexible growth of the component or the component takes up (val * 100)% of the total space. e.g. flex: 0.3 => 30% of space is taken up.
12. element>element	div > p <- Selects all <p> elements where the parent is a <div> element
    - Direct child of div..
13. vw - viewport width: the browser window size.
14. Add classNames to everything to ensure CSS styling is smooth and easy.
15. Component as a prop -> capitalized.
16. Spans vs. divs: div is a block element. span is an inline element. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.
17. element:action e.g. element:hover -> controls display of action.
18. !important <- overrides the parent's css.
19. hr <- adding a horizontal line.
20. export { a, b, c } => import { a, b, c } from file \\ export default a => import a from file.
21. Firebase: Collections (tables) have documents (rows) and documents have fields. But documents can have collections as well.
22. useEffect - runs the code inside when the component is loaded if no dependencies but you can specify dependencies #
23. https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/ <- new firebase API.
24. Switch from react-router-dom checks what route you are in and renders the appropriate screen.
25. useHistory <- allows you to set the history or allows you to go back / forward from a page i.e. change the page or force a redirect.
26. https://usehooks.com/ <- check out the hooks.
27. useReducer listens to any action which gets fired into the data layer.
28. prop-drilling can be ugly -- flow of props..
29. e.preventDefault() <- doesn't refresh the page.
30. Action -> based on the action type the Reducer updates the state. Dispatcher is what dispatches the reducer to invoke an action.
31. Add a hidden button for inputs that acts like a submit. Enter to submit.
32. Firebase deployment:
   - firebase init (might need a firebase login)
   - build is the folder...
   - firebase deploy
หา process id ที่เปิด port อยู่ด้วย lsof -i
Tags: cmd
Published: 2021-11-03 01:50:37

บางครั้งเรารันโปรแกรมที่เป็น background process ไว้แล้วมันเปิด port ที่เราต้องการใช้งานเอาไว้ด้วย ทำให้เราเอา port ไปให้ต่อไม่ได้ ต้องทำการปิดโปรแกรมนั้นโดยหา process id แล้วไป kill process นั้นก่อน

คำสั่งที่ช่วยหาว่า process id อะไรของโปรแกรมไหนใช้ port อยู่คือ `lsof` โดยใช้ร่วมกับ option `-i` เช่นต้องการหาว่าโปรแกรมไหนเปิด port `12345` อยู่ก็สั่งได้แบบนี้

```
lsof -i :12345
```

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tuv2cencey9k50hse84.jpg)
Welcome to DEV!
Tags: javascript, programming, react, mongodb
Published: 2021-11-03 01:17:42

Hey Everyone! 

I am an undergraduate non-CSE background student who aspires to become an Full-Stack Web Developer as well as a Data Scientist. I am very passionate about these field. Always curious to gain more knowledge about Code, Data, Networking and other fascinating stuff.
Currently, I am becoming professional at 'ReactJS', 'ExpressJS', 'JavaScript', 'MongoDB', 'TailWind', 'ES6', 'Bootstrap'.

Open to learn anytime, anywhere!

Wish me luck!
GitHub Copilot - First Look - AI Pair Programming
Tags: programming, javascript
Published: 2021-11-03 01:11:50

In this video we're going to get a first impression of GitHubs copilot. Github copilot is an AI pair programmer right in your IDE. It can suggest lines or entire functions to write, which begs the question can developers be replaced by AI? What do you think?

{% youtube UcJpCNvbahE %}
Intro to Blockchain: ERC-1155 Tokens
Published: 2021-11-03 00:46:44

1155 Tokens?? 
1155 tokens, best way put, is a combination of ERC-721 tokens and ERC-20 tokens. 

What does ERC-20 tokens classify as? Fungible. They are tradeable within their own kind. For example, lets say theres a coin called Example. One example coin could be traded for another example coin because they are of the same value. Each example coin is worth the same as another example coin, therefore they are fungible.

What does an ERC-721 token classify as. Non-Fungible. They are no tradeable within their own kind. For example lets say theres a 721 token called Token1 and another called Token2. I can not trade Token1 for Token2 because they are not of the same monetary value. Let's say Token1 is worth $5 while Token2 is worth $10. They are not of the same value, they are each unique and therefore they are not fungbile.

So now lets get to it. What is an ERC-1155 token? A combination of both right? Say there is a collection of ERC-1155 tokens. The way this would look is that there are multiple token types with each type having multiple copies. To understand this better, lets relate this to 721 and 20 tokens. Inside the collection of 1155 tokens, there will be multiple different 721 tokens (token types) and within each 721 there will be multiple copies, making each 721 token basically a 20 token. That is ERC-1155 tokens.

Let's take a look at an example of a collection of 1155 tokens. Here is a project called My Curio Cards (First collection of NFT's btw). 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhnvvyfn11ppwgtzc8lc.png)

As you can see, there are multiple types of tokens. Each picture being a different token. But if we click on one type of token, you will see that each token type, has multiple copies.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kzip86n7uhdh29pkxwi.png)
This token has 1.4k copies. Meaning that this card 'MadBitcoins' has 1.4k copies of it that are fungible between one another. But this 'MadBitcoin' token can not be traded for a different type of card, because again, they are all different values.
Create a static version of your blog using WordPress, Gatsby and FlashDrive.io
Tags: beginners, tutorial, wordpress, node
Published: 2021-11-03 00:41:58

{% details complete tutorial and source %} https://blog.flashdrive.io/create-and-host-a-blog-using-gatsby-and-ghost-headless-cms/ {% enddetails %}

At [FlashDrive.io](https://flashdrive.io), we use every day and love modern, static frameworks like Gatsby, Hugo, Jekyll, and others.

Gatsby, with its huge community and user base, is the first framework to have a complete build add-on developed on FlashDrive, and we love playing with Gatsby every day.

It's also great that Gatsby comes with a large set of plugins to connect with various CMS like WordPress, Ghost, etc.

In this post, we'll see why it's popular (and actually a good idea) to mix a dynamic CMS like WordPress with a static website generator like Gatsby.

The main advantage to this setup is that you will keep WordPress what it does best: providing a good CMS with a ton of features and integration. Then use Gatsby to deliver a static version of your content without any risk of a hacked plugin and the ability to handle massive traffic even on small configurations like Dev (or ideally Web) FlashDrive instances.

We will install WordPress, add the GraphQL plugin, and install and Gatsby on FlashDrive.io to create a static website that rebuilds automatically each time your website is modified, all of that using FlashDrive's unique network and security capabilities and only using FREE dev instances on FlashDrive!

[FlashDrive.io](https://flashdrive.io) is Free for developers, register today to try Gatsby with WordPress for free.
Does anyone else experience FOMO?
Tags: webdev, discuss, programming, motivation
Published: 2021-11-03 00:40:42

Cover Photo by <a href="https://unsplash.com/@heatherz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Heather Zabriskie</a> on <a href="https://unsplash.com/s/photos/broken?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

> FO·MO | ˈfōmō |
> _noun_ informal
> anxiety that an exciting or interesting event may currently be happening elsewhere, often aroused by posts seen on social media.

FOMO, or _fear of missing out_, can be paralyzing.

I'm starting to feel paralyzed.

Languages I don't know but want to learn, JavaScript frameworks, blockchain and Web3.0, new CSS features, Jamstack and serverless tooling, conferences, books, career development, "hustling"...

How do you manage it all?