teleren/devto huggingface dataset:
Records And Their Usability In Software Testing
Tags: testing, software, softwaretesting
Published: 2021-04-24 10:59:43

<a href="https://www.dawnitservice.com/software-testing-company">Software Testing Services</a> is a significant period of SDLC and is completed with a sole reason for distinguishing the imperfections that might be available in a framework. This action devours as much time as does the turn of events and incorporates the execution of various cycles. 

In this way, so as to execute exhaustive testing for a framework, the test group needs to approach and make the accompanying archives: 

USE CASES

A Use Case is a rundown of activities or steps that characterizes the collaborations between an entertainer (human) and the framework. Use Cases record covers the cooperation between the two substances and how they act and perform at various levels. 

Utilitarian SPECIFICATIONS

A Functional Specification or FS is a proper archive which portrays the necessities to be executed including the application's abilities, appearance and collaborations with clients. The record encourages the test group to find out about the general conduct of the framework. 

Deformity REPORT

<a href="https://www.dawnitservice.com/software-testing-company">Software Testing Company</a> Toward the finish of a testing cycle, analyzers make a proper Defect Report. The principle reason for a Defect Report is to feature the issues distinguished in the application as plainly as could reasonably be expected so the designers can duplicate and fix them without any problem. 

TEST PLAN

A Test Plan is a report made by the test leader in the wake of assessing the FS, SRS and Use Cases records. It portrays the degree, approach, assets and timetable of planned test exercises to be completed all through the SDLC. It likewise incorporates the highlights to be tried, the testing errands, the test condition, and the passage and leave measures. 

Conclusion REPORT

The Project Closure Report is the remainder of the records made for an undertaking by the test leader. The main role of the report is to give a total image of progress and disappointments of the venture. It is additionally used to recognize best practices for future ventures and to officially close the task.

Learn More - https://www.dawnitservice.com/software-testing-company
Day 41 of 100 Days Of SwiftUI
Tags: swift
Published: 2021-04-24 10:47:40

I just completed day 41 of 100 days of Swift UI. Today, I continued working on the Moonshot app. I implemented two new screens: the mission and the astronaut screen.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pjwskzexzzan5v063ex.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myc9fhtg2a3pcny1g1z7.png)

Here's a link to the updated github [repo](https://github.com/sanmiAde/Moonshot)
Sharing Dev's Useful Sites & Tools that I applied
Tags: webdev, productivity, beginners, programming
Published: 2021-04-24 10:42:14

Hello my dev friends,

Today, I would like to share some useful sites and tools that I used in dev field.

Let's get started...

1. CSS Loading Site
Sometime, this site helps me to get CSS's loading stuff easy and fast.
https://loading.io/
<br>

2. Illustrations
I used Undraw's illustrations in many sites and personal case.
It is so useful for me.
https://undraw.co/illustrations
<br>

3. LeetCode (Code Practice)
I had told to use this site to improve my coding skills. Then, I used it and found fun and benefits for me. Recommend you this one.
You can practice your coding skills in there.
https://leetcode.com/
<br>

4. Fake Rest API
For testing in order to get json api, I used this site often.
Hell yeah, You can play with this site fake rest api data.
https://www.instantwebtools.net/fake-rest-api
Wanna test with real data to get Real feeling?
Bonus Site: https://www.themoviedb.org/
To test, my fav env is postman.
Test Environment Software: https://www.postman.com/
<br>

5. Draw.io (Data Diagram Tool)
This site helps me to design quick Database Diagrams, Use Case, Data Flow, ERD, EERD etc.
https://www.draw.io/
<br>

6. Backlog (Project Management Tool)
In my work, every day I have to use this software which is intended for team project management.
If you have a team, try it once. It has a lot of features.
https://backlog.com/ 
<br>

7. To Do List
For my personal, I am using Tick Tick everyday. It is kind of crazy. Check it.
https://ticktick.com/
<br>

8. Google Calendar
To manage my timeline, I have to touch Google Calendar every second of my weekdays.
Actually, We all must touch Google, right? 
Haha.. But this one is crazy to control our seconds.
https://calendar.google.com/
<br>

9. Programming Stuff that I used (past and present)
-C & C++ 
-PHP For Laravel
-JavaScript For VueJS, ReactJs, NestJs
-SQL For Database Management Software
-Dart For Flutter
<br>

10. Text Editors
I know most developer use VS Code every day of their dev lives. 
But I just want to mention it while I am writing.
For me, I started my development from note++ and currently using VS Code.
Note++  : https://notepad-plus-plus.org/downloads/
Sublime : https://www.sublimetext.com/
VS Code : https://code.visualstudio.com/
<br>

Currently, those 10 things are coming from my head randomly.
So, I can freely write it down for my dev friends and followers. 

In future articles, I may share this kind of some random tools that are useful for our daily developer lives. 

Thanks for reading till the end.
If you like this article, don't forget to follow me.
<br>

Ah... I almost forgot to tell you. Haha..
Don't forget to visit my new YouTube Channel.
https://www.youtube.com/channel/UCdFvcfxmXGwOGkH0bh-y8LQ

Thanks guys!
See you in the next article.
หา Developer ร่วม Project  startup ธุรกิจแห่งอนาคตครับ
Published: 2021-04-24 10:08:25


ผมชื่อ สร้างสรรค์ (เต้) 
ผมมี passion ใน เรื่องของ  Business ,Innovation,Technology   และ  ให้ความสำคัญในเรื่องของเวลา(Time) เพราะเวลาเป็นปัจจัยเริ่มต้นของทุกสิ่ง สิ่งต่างๆ ที่มูลค่าไม่ว่าจะ เงิน ทอง หุ้น  cryptocurrency  สามารถเทรดจากเวลาไปได้  แต่ไม่มีสิ่งใด ที่จะแลกกลับเป็นเวลาได้   ผมมีความรู้สึกท้าทายเสมอในการแก้ปัญหาและสร้างโอกาส และ ในการใช้ชีวิต หรือ การทำงาน ผมจะใข้หลักการในการเป็น Painpoint-Killer and  Opportunity Maker 

ผมกำลังทำ Project ในการสร้างธุรกิจนึงอยู่ครับ เป็น ธุรกิจในการสร้างและพัฒนาธุรกิจ ของคนไทยครับ ให้กลายเป็น company ที่จะอยู่ในโลกใหม่ที่มาถึงได้  โดย gap อยู่ที่ adaptation มีความเกี่ยวข้องกับ megatrends ในอนาคต รวมถึง blockchain โดยมีแผนที่อยากจะทำ ICO ด้วย ธุรกิจนี้ผมคิดว่าจะเป็นธุรกิจแห่วอนาคตครับ และ ช่วยเพิ่ม ยกระดับของธุรกิจคนไทย รวมถึงการเพิ่ม GDP และลดอัตตราการว่างงาน ครับ 

     ปัจจุบัน มี Business model , Roadmaps  และ plan 
ผมกำลังมองหาคำปรึกษา และ การสนับสนุนครับ  หากเห็นโอกาส ผมพร้อม present ครับ
โทร :  0813022005  
line : metaeo 
Linkedin : https://www.linkedin.com/in/srangsan-sukhenai-559b54208

#startup
#business
#ธุรกิจ
#project
#team
#หุ้นส่วน
#ลงทุน
#ไทย
#thai
รัน Laravel 8 ด้วย Sail บน Mac M1
Tags: docker, sail, laravel8, thai
Published: 2021-04-24 10:05:49

---
title: รัน Laravel 8 ด้วย Sail บน Mac M1
published: true
description: รัน Laravel 8 ด้วย Sail บน Mac M1
tags: docker,sail,laravel8,thai
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrkp4jcsyrflgym6exym.png
---

ผมเพ่ิงได้ใช้ Macbook Air ซึ่งใช้ M1 chip มาครับ และก็ได้เจอปัญหาตอนที่ลองใช้ Docker ในการใช้งาน laravel นิดหน่อย เลยอยากจะมาแชร์ให้ฟังเผื่อคนที่เจอปัญหาเดียวกันจะได้นำไปแก้ไขได้ครับ

ต้องขอบอกก่อนว่าตอนที่ผมใช้นั้น Docker Desktop รองรับการใช้งาน M1 Chip แล้วนะครับ แต่ปัญหาจะอยู่ที่ Image บางตัวที่อาจจะยังไม่รองรับเท่านั้น เอาล่ะมาดูกันเลยครับ

## ขั้นแรกเลยให้เราติดตั้ง Laravel ด้วยคำสั่ง

```sh
# เปลี่ยน "my-app" ให้เป็นชื่อโปรเจ็คที่เราต้องการ
curl -s https://laravel.build/my-app | bash 
```

การใช้คำสั่งนี้แทนที่จะใช้คำสั่ง `composer` ในการสร้างโปรเจ็คนั้นจะทำให้เราได้ ไฟล์ Dockerfile และ Default setting สำหรับ Docker มาโดยอัตโนมัติ โดยที่เราไม่ต้องมานั่ง setup docker เองให้เสียเวลา แต่สำหรับ M1 เมื่อดาวโหลด laravel ด้วยคำสั่งนี้จะติดปัญหาที่ตัว MySQL ครับ

## แก้ไขปัญหาเพื่อทำให้ MySQL สามารถทำงานได้

ปัญหาตอนนี้คือ ณ ปัจจุบัน MySQL ไม่สามารถทำงานร่วมกันได้กับสถาปัตยกรรม arm ของ M1 การแก้ไขอาจทำได้มากกว่า 1 วิธี เช่นการเปลี่ยนไปใช้  MariaDB image แทน แต่วันนี้จะขอแสดงวิธีแก้ไขด้วยการเพิ่ม platform `linux/x86_64` แทนครับ

ให้เราเปิดไฟล์ `docker-compose.yml` ขึ้นมาและเพ่ิม `platform: 'linux/x86_64'` ตามตัวอย่างด้านล่างได้เลยครับ

```yaml
services:
  mysql:
    image: 'mysql:8.0'
    platform: 'linux/x86_64'
    ...
```

ในส่วนของด้าน performance แล้วการเพ่ิม emulator linux/x86_64 เข้ามาจะมีผลทำให้เ MySQL ช้าลง แต่อย่างไรก็ดี การทดลอง โปรแกรมในเครื่อง local โดยมากก็ไม่ได้ใช้ข้อมูลทั้งหมดเหมือนใน production ดังนั้นการใช้งาน docker ที่เครื่อง local แบบนี้ก็ไม่น่าจะเป็นประเด็นเท่าไหร่นัก เว้นเสียแต่คุณจะ deploy setting นี้ขึ้น production

## หลังจากนั้นก็ทดสอบการใช้งาน Laravel ได้เลย

ทำการ spin up container ด้วยคำสั่ง

```sh
./vendor/bin/sail up
```

จากนั้น รอสักพัก เพื่อให้มันทำการ build เสร็จแล้วก็ไปทดสอบโดยคลิ๊กเข้าไปที่ลิงค์ [http://localhost](http://localhost) ได้เลย
Problem Solving
Published: 2021-04-23 00:25:50

I have been continuing to study data structures and have realized how important data structures are. When I first learnt about them I really did not understand the importance, but now as I have been diving deeper into problem solving I understand the significance.

Problem solving is challenging and it is not something that you start off good at, at least in my case.  I believe that you get better as you practice each day. When you practice each day you will start to pick up on certain patterns and understand the problems a lot faster. I am still at the beginning stages with problem solving, but my goal right now is to practice one coding challenge each day, so that over time I will be great at various challenges.

I have gotten introduced to different platforms for practice such as Leetcode,Hackerrank and Codewars to name a few off the top of my head. They all provide away to practice daily. I really like the platform where you get a daily coding challenge and if you subscribe to the paid version you will receive the answer the following day. The platform that I am referring to is called daily coding challenges.

In order to have more tools in your tool belt to help solve various problems is where data structures come in. If you understand many of them it will allow you to look at a problem from different angles, to come up with a solution that you can use to save space and time, which are two important factors. 

I am really enjoying learning about data structures and I can’t wait until I have a full tool kit in which I understand to solve difficult problems.

Happy coding!
A great starter project: a config file generator for Gource
Published: 2021-04-24 09:32:12

I use a really cool tool called [Gource](https://gource.io) to generate mesmerising visualisations of the commit log of code repositories I am involved with. Here's the blurb from the website that describes what it does:

> Software projects are displayed by Gource as an animated tree with the root directory of the project at its centre. Directories appear as branches with files as leaves. Developers can be seen working on the tree at the times they contributed to the project.

I am helping a friend getting started with professional coding and I was looking for a project that is simple enough, useful and with potential for future challenges. Gource has a long list of options and creating a command line for it or a config file can be quite tedious. So thought an online tool that provides people a web graphical interface to generate this command line or config file could be a really interesting project and would constitute a great first open source project as well.

Think about it. It could be as simple as first as a bunch of HTML controls that generate a text in a text area. The user would then use clipboard copy. Then after that, we could introduce a concept of downloading to a file. And then it can be made more sophisticated by adding an interactive visualisation of how the controls would impact the Gource interface. The ultimate complication would be to introduce the concept of projects that can be stored online and attached to a user a profile. Then a great followup project would be to re-implement the same tool as a desktop application.

There is a great tradition of creating GUIs for complicated command line tools. For example [qwinff](https://qwinff.github.io/) offers a simplified interface to [ffmpeg](https://www.ffmpeg.org/).

The quickest way to work on this project at first would be to use something like a static page on github. My friend could use codespaces as their dev environment. So this would double up as a github tutorial as well. Then as their app grows in complexity, this could become a great gateway to [netlify](https://www.netlify.com) and other cool app deployment platforms.

So I have high hope that this project is going to be a fertile ground for learning how to code. Starting from the simplest thing possible, and growing slowly to a full blown modern app. In the end, my friend would have something they could brag about and that could definitely be useful for a bunch of people. At the time of this write-up the [Gource github repo](https://github.com/acaudwell/Gource) has received 8.3k stars 🌟 - not bad for a niche tool!
Get extent of WMS layer dynamically in Leafletjs
Tags: javascript, leaflet, geoserver, wms
Published: 2021-04-24 09:18:23

The Web Map Service(WMS) standard provides a simple HTTP interface for requesting geo-registered map images. Since it is the image, we have to provide the Bounding box for getting the layer. The leaflet calculates the bounding box internally. The WMS layer can get in the leaflet using the following syntax,

```js
var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/wms?', {
    layers: 'workspace:layer_name'
}).addTo(map);
```

For the geoJSON data, we can get the map to extend directly using `getBounds` function on the map object. The `getBounds` is not available for the WMS standard. So we can not get the map bounds and can not zoom the required WMS layer to the map dynamically. But Unfortunately, we can get the required bounding box information through `getCapabilities` request. I am using [axios](https://github.com/axios/axios) for the HTTP client as below, 

```js
var wms_url = "http://localhost:8080/geoserver/wms?service=wms&version=1.1.1&request=GetCapabilities";

axios.get(wms_url).then((res) => console.log(res.data));
```

The response from the above request will provide you the `XML` as the response data. Since the data output is in `XML`, first of all, you need to `JSON` and you can filter the `bbox` for the required layer. The easiest way to convert it is by using [wms-capabilities](https://github.com/w8r/wms-capabilities). First of all, you need to include this library in your code. 

```html
<script src="path/to/wms-capabilities.min.js"></script>
```

After that, you need to filter the data by writing the code something like below,

```js
axios.get(wms_url).then((res) => {
    
    // For convert the xml to JSON
    const json = new WMSCapabilities(res.data).toJSON();

    // GetCapabilities provides all the layers so we need to filter the required one.
    const layers = json?.Capability?.Layer?.Layer;
    const layer = layers?.filter(
      (l) => l.Name === `${workspace}:${layer_name}`
    )[0];
    
    // To get the bounding box of the layer
    const bbox = layer?.LatLonBoundingBox;

    // Use this bounding box to zoom to the layer,
    map.fitBounds([
          [bbox[1], bbox[0]],
          [bbox[3], bbox[2]],
        ]);
});
```

> Replace the `${workspace}:${layer_name}` with your workspace and layer_name.


> Replace the `map` with your leaflet map object.


>> **Note:** Please use `getCapabilities` request having a version less than or equal to 1.1.1. On the greater version, the `LatLonBoundingBox` is missing. But the problem with these versions are, it fetches all the information from the server, we can't filter the capabilities for some specific layer only. That means the `namespace` parameter will not work.

Happy coding!
Type Conversion In Modern Javascript - Part I
Tags: webdev, todayilearned, 100daysofcode, javascript
Published: 2021-04-24 08:57:42

Type conversions in javascript refer to the ability to convert from one data type to another. For example, we can convert numbers to strings as follows;

```
console.log(typeof(30 + 'years'));//string
``` 

If javascript fails to perform a meaningful type conversion i.e tries to make an impossible conversion, for example, a string to a number, the result is NaN.

```
console.log(Number(30 + 'years')); //NaN
``` 

> You should note that when two numbers presented as stings are added together, the result is a string. Example;

```
console.log(typeof('2' + '3')); //string
``` 


This is because javascript doesn’t actually perform the typical addition functionality that is represented by the + operator but instead performs **string concatenation**. This means it treats the two numbers just like any other string, and when two strings are combined, the result is a string type.

```
console.log('2' + '3'); //23
``` 

On the other hand, if we were to perform a different operation example multiplication, division, or subtraction, then javascript would automatically convert the strings into a number and perform the actual arithmetic operation. Examples;

```
console.log('2' * '3'); //6
console.log(typeof('2' * '3')); //number

console.log('2' - '3'); //-1
console.log(typeof('2' - '3')); //number

console.log('6' / '3'); //2
console.log(typeof('6' / '3')); //number

console.log('6' % '3'); //0
console.log(typeof('6' % '3')); //number
``` 


You can share this article on your social media to bookmark it for future reference or give access to your friends also working or interested in javascript language. You can follow me on  [Twitter ](https://twitter.com/cyrusCodes), where I share countless resources and articles related to javascript and we can become lifetime friends and javascript lovers.

Finally,** THANK YOU**  so much for taking your time to read this article. If you are feeling more generous I'll not stop you from buying me a cup of coffee. 
 [![coffee_black.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1613369170831/yDebKPrfC.png)](https://www.buymeacoffee.com/cyrusCodes) 

Until the next article, KEEP CODING & SHARING.
Say something from the terminal
Tags: todayilearned, speaking
Published: 2021-04-24 08:57:29

Today I learned about the `say` command in macos. You use it like:

```console
$ say something
```

It may not seem useful, but I use it when I have long scripts to run...

```sh
npm run build && say "build done"
```

...and It can also be used to do fun things...

```sh
say abcdefghijklmnopqrstuvwxyz # The impossible is possible
say dskfjkhadsfhjkasjhkfgjdasgfj 
```
Tailwind grid responsive 4 column blocks
Tags: css, tailwindcss
Published: 2021-04-24 08:53:59

When it comes to tailwind layouts we have basically two main options.

- Flexbox
- Grid

If you know me, I use Flex for a lot of things. It's one of these things you start with and end up using for a lot of elements.

Today however I want to explore some grid action in Tailwind and see just how easy it can be.

We'll be creating a 4 column block layout for large devices, on tablet size they should stack 2-2 and on mobile, it should be 1 column.

The end result is as the following:

![Tailwind responsive grid](https://cdn.hashnode.com/res/hashnode/image/upload/v1618986443272/IjQSRq7cs.gif)

## 4 Column grid blocks in Tailwind

Let's start with our basic structure and style from there.

```html
<div>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>
```

As you can see, I choose a double wrapper, the top div will be our container and the inner one will be the actual grid.

Let's add some basic styles for the containers first.

```html
<div class="container mx-auto">
  <div class="grid grid-cols-4 gap-6">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>
```

This will already give us quite a good column space.

![CSS Grid basic layout](https://cdn.hashnode.com/res/hashnode/image/upload/v1618986077359/OwuEEURMW.png)

Let's quickly add some styling for our blocks.

```html
<div class="container mx-auto">
  <div class="grid grid-cols-4 gap-6">
    <div
      class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100"
    >
      1
    </div>
    <div
      class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100"
    >
      2
    </div>
    <div
      class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100"
    >
      3
    </div>
    <div
      class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100"
    >
      4
    </div>
  </div>
</div>
```

![Tailwind styled blocks](https://cdn.hashnode.com/res/hashnode/image/upload/v1618986144693/fdfLmWpXd.png)

Pretty solid right?

However, this is not yet responsive, luckily for us, the Tailwind grid is super easy to make responsive.

All we have to do is add the breakpoints on our grid element.

> Remember: Tailwind is mobile-first so that will be the mobile view.

```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"></div>
```

You can find the full demo on this Codepen.

{% codepen https://codepen.io/rebelchris/pen/MWJPdOp %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Debug Adapter Protocol
Tags: vscode, adapter
Published: 2021-04-24 08:41:45

I'd like to add the official document link first

https://microsoft.github.io/debug-adapter-protocol/

### What's the `debug adapter protocol`?

DAP defines the abstract protocol used between a development tool(e.g IDE or editor) and a debugger.

DAP is to abstract the way how the debugging support of developing tools communicates with debuggers or runtimes into a protocol.

Because is unrealistic to assume that existing debuggers or runtimes adopt the protocol any time soon, so there may import
a component - Debug Adapter to adapts an existing debugger or runtime to the Debug Adapter Protocol.



### Why there need DAP?

Because of VScode(and other IDE or editor) needs to support multiple languages and every one of them needs to develop the union functions, this makes a significant effort and can not be easily amortized over multiple development tools.


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

 

So, If we add DAP:

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


> The diagram shows that the Debug Adapter Protocol makes it possible to implement a single generic debugger UI per development tool and that Debug Adapters can be re-used across these tools. This reduces the effort to support a new debugger considerably.


### How can we use the adapter in Golang development:

* We need to create the new launch configurations like below:

```
{
    "name": "Launch file",
    "type": "go",
    "request": "launch",
    "mode": "auto",
    "program": "${fileDirname}",
    "debugAdapter": "dlv-dap"
}
```

To switch back to the legacy adapter, set "debugAdapter" to "legacy".

And use the function I mentioned in another blog https://dev.to/aisuko/debug-adapter-protocol-4ncg to run the test functions.

And you need to confirm from the console that your program already used the `dlv-dap` adapter like below:


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








The images of DAP architecture above all from https://microsoft.github.io/debug-adapter-protocol/overview