teleren/devto huggingface dataset:
What is a DAO?
Tags: web3, crypto, nft, token
Published: 2021-09-10 01:52:04

Cryptocurrency, NFT, and gm seem to have become common knowledge among most folks interested in Web3 at the moment. There is a lot of growing chatter now about Decentralized Autonomous Organizations or DAO for short.

Let's imagine for a second that you, your neighbor, random people across town or across the country you have never met all had the ability to actually make decisions about what a specific organization can do. Maybe you all have an interest in video games and want to decide on what new video game gets the funding to be completed. Maybe you're all investors and want to decide who the next big web3 startup to invest in will be. 

The point is you all have some similar interests and without needed to know each other can work together in determining what creators in the space you're interested should be funded or what proposals the organization has brought needs to be focused on. You all even help decide who works for the organization! 

This isn't some fantasy - this is actually happening with DAO's. The more I've learned about web3 the more it seems that DAO's keep coming up. I've recently joined Nader Dabit's  Developer DAO and became a mod there to help with the community. The great thing about this is that I'm seeing how this works and is being built from the ground up and hoping to learn a few things here. 

The main problem I've had in general with DAO's is trying to figure out where to find them and how to participate in them. Developer DAO made that super easy and everyone in there is quite interested in working together on all things web3. I think I'll be pitching a couple ideas in there to see how my ideas land.

For now though I'm looking for more DAO's to be a part of. Do you know of any that are actively looking for new members that can contribute to their growth? Particularly those needed frontend/solidity devs?

Hit me up and let's see what the community has!
Doodle 0.6.0 Supports Desktop
Tags: kotlin, webdev, javascript, showdev
Published: 2021-09-10 15:42:51

[Doodle](https://github.com/nacular/doodle) is a pure Kotlin UI framework for the Web (and Desktop), that lets you create rich applications without relying on Javascript, HTML or CSS. Check out the [documentation](https://nacular.github.io/doodle) and [tutorials](https://nacular.github.io/doodle-tutorials) to learn more.

## Highlights include

### Desktop Support (Alpha)

Doodle now supports Desktop and leverages Skia for fast, accurate rendering. This means apps can target desktop via the JVM.
Support is still early and not ready for production. There are some missing features--like Accessibility, and others that 
are partially implemented (i.e. drag-drop). However, overall support is sufficiently complete to begin testing with. So please
try this out and report bugs.

A key goal for Doodle is to provide as much cross-platform code sharing as possible. That's why Web and Desktop share the same
rendering model, and therefore widgets. All widgets written in common code can be used on both platforms.

* Desktop and Web share the same rendering model and widgets
* Apps written in `common` code can be fully shared between Web and Desktop

### Kotlin 1.5.0 Support

Kotlin support has been moved from 1.4.x to 1.5.30.

## APIs

- New support for [font family lists](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/drawing/FontLoader.kt#L16) when loading Fonts
- New UI Dispatcher ([web](https://github.com/nacular/doodle/blob/master/Browser/src/jsMain/kotlin/io/nacular/doodle/coroutines/Dispatchers.kt#L8), [desktop](https://github.com/nacular/doodle/blob/master/Desktop/src/jvmMain/kotlin/io/nacular/doodle/coroutines/Dispatchers.kt#L9)) for work that must be done on the UI thread
- New ImageModule ([web](https://github.com/nacular/doodle/blob/master/Browser/src/jsMain/kotlin/io/nacular/doodle/application/Modules.kt#L130), [desktop](https://github.com/nacular/doodle/blob/master/Desktop/src/jvmMain/kotlin/io/nacular/doodle/application/Modules.kt#L87)) to encapsulate image support.
- [ScrollPanelBehavior](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/controls/panels/ScrollPanel.kt#L26) now has access to [ScrollPanel](https://github.com/nacular/doodle/blob/master/Core/src/commonMain/kotlin/io/nacular/doodle/controls/panels/ScrollPanel.kt#L55) children, layout, etc.
How to attach an external JavaScript file to the HTML file?
Tags: html
Published: 2021-08-21 00:00:00

---
  title: How to attach an external JavaScript file to the HTML file?
  published: true
  tags: HTML5
  date: Sat Aug 21 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/attach-external-javascript-file-to-html-file
  cover_image: https://melvingeorge.me/_next/static/images/main-0c6576df43a6d0e08ea60c2b2a9abdd0.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/attach-external-javascript-file-to-html-file)
  
To attach an external JavaScript file to the HTML template, we can use the `script` tag and then use the `src` attribute and define the path to the external JavaScript file inside this attribute.

### TL;DR

```html
<!DOCTYPE html>
<html lang="en">
  <!-- 
  Define the path to the external 
  JavaScript code using script tag
  and the src attribute
  -->
  <script src="js/app.js"></script>
  <body>
    Hello World from HTML
  </body>
</html>
```

For example, first let's write a basic `index.html` template which outputs the `Hello World from HTML`. It can be done like this,

```html
<!DOCTYPE html>
<html lang="en">
  <body>
    Hello World from HTML
  </body>
</html>
```

Now let's write the external JavaScript code which logs `Hello World from JavaScript`. It cna be done leiek this,

```js
// External JavaScript file with code
console.log("Hello World from JavaScript");
```

Let's also name this JavaScript file as `app.js` and place it under the `js` directory or folder. So the structure of both the `JavaScript` and `HTML` files may look like this,

**Current files structure**

```bash
- index.html
- js
  - app.js
```

Now to include the `app.js` file in the HTML file, we can use the `script` tag and then use the `src` attribute to define the path to the JavaScript file. It can be done like this,

```html
<!DOCTYPE html>
<html lang="en">
  <!-- 
  Define the path to the external 
  JavaScript code using script tag
  and the src attribute
  -->
  <script src="js/app.js"></script>
  <body>
    Hello World from HTML
  </body>
</html>
```

- **You don't have to write the `script` tag before the `body` tag. You can insert the `script` tag anywhere in the HTML template and it will work. **

Now if you look in the browser console we can see the `Hello World from JavaScript` output which shows us that the JavaScript code has been executed successfully.

See the above code live in [repl.it](https://replit.com/@melvin2016/attach-external-javascript-file-in-the-HTML-template#index.html).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
No ARIA > Bad ARIA
Tags: a11y, webdev
Published: 2021-09-10 21:44:23

---
title: No ARIA > Bad ARIA
published: true
description: There are many misconceptions surrounding Web Accessibility, most of the times fueled by lack of knowledge (or interest) in the matter. This article is a collection of some of those accessibility misconceptions or myths.
tags: a11y,webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hehcxw23j2eoyq2n2ep.jpg
canonical_url: https://alvaromontoro.com/blog/67989/myths-about-web-accessibility#no-aria-bad-aria
series: Myths about Web Accessibility
---

<aside><blockquote><small><strong>There is an <a href="https://dev.to/alvaromontoro/myths-about-web-accessibility-237k">all-in-one article including every part from this series</a> (if you want prefer to read it all at once instead of "by installments")</strong></small></blockquote><hr/></aside>


Before all accessibility experts start crying foul and cursing my name, let me clarify something: __**No ARIA is better than bad ARIA**__. ARIA is not supported by all browsers/screen readers, and it should be a last resort. The way to go should be using semantic HTML when possible.

Unfortunately, using semantic HTML is not always possible and not enough to cover all the cases needed for a good experience. For example, there are widgets and patterns (e.g., tab panels again) that cannot be done using semantic elements and, in those cases, ARIA is a must.

The myth/misconception of "No ARIA > Bad ARIA" is that it leaves out an important part of the equation: where does "Good ARIA" go? And the answer is actually quite simple:

<figure><center><strong>Good ARIA &gt; No ARIA &gt; Bad ARIA<br/>&nbsp;</strong></center></figure>

We can all agree that bad ARIA is bad. But no ARIA isn't ideal either: the solution to providing a bad experience (bad ARIA) should not be providing a subpar experience (no ARIA). There should be a good experience too!

If a kid is learning to ride a bike and struggles and falls, we don't tell them, "stop! don't ever ride a bike!" Instead, we teach them. We encourage them to keep learning and trying... until they can do it by themselves.

<figure>
![A little kid pushes a bicycle with the help of an adult](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpmvqtmo6xqptfgnk8cg.jpeg)
<figcaption>Sorry, Timmy. You fell once. No point on trying again. (picture: <a href="https://www.pexels.com/photo/full-body-of-father-and-child-in-protective-helmet-pushing-bike-along-road-3932890/">
Tatiana Syrikova</a>)<br/>&nbsp;</figcaption>
</figure>

"No ARIA > bad ARIA" perpetuates a false dichotomy. There's good ARIA, too. And we can learn ARIA, practice ARIA, improve ARIA... We won't be good at the beginning, but we will get better and provide a better experience with time and practice than with no ARIA.
Code splitting in SCSS
Tags: scss
Published: 2021-09-12 10:11:55

Last post I talked about what code splitting was and how you'd do it, and gave an example with CSS. This post I'm going to talk about how to do it in SCSS.

We're going to stick with our simple website that has three sections: header, main, footer. And we're going to be using a bundler to put all the files into one CSS file.
Partials

You can't just write a load of SCSS files and stick them together, you have to write partial files. To do this, you name your file starting with an underscore, eg _header.scss, rather than header.scss. That's it, there's nothing different you need to do inside the file.
Index file

You then need a file that tells it where to find all those partial files you used. This one isn't named with an underscore. You can call this file whatever you like, eg index.scss. Then inside it you have:

@use 'header';
@use 'main';
@use 'footer';

Your files will be called _header.scss, _main.scss, _footer.scss. In your index you don't use the scss or the underscore.

Then the bundler will look at the index file, find the three files you've told it to use, stick them together in one file and convert them to CSS.
More complicated sites

You might have a file with your variables in and another file with your mixins, it gets a little more complicated. I recommend Coder Coder's video - she goes through it all, why it should be done that way and how it works.
What is DB:transaction and how to use it in laravel
Tags: laravel, beginners, womenintech, codenewbie
Published: 2021-09-12 13:42:05

Hello, in this blog we are going to see for what purpose and why we use DB:transaction and advantage of using it.

**What is Database Transaction?**
Database transaction is provided by DB facade to run a set of operation within a database transaction.
It gives us the powerful ability to safely perform a set of data-modifying SQL queries such as insert, update, delete. It made safe because we can easily rollback all queries made within the transaction at any time.

**Why we use it?**
Let us consider we have an application on which admin can see all the posts and its user, which is associated with each other. When admin deletes post/user which is totally dependent on one another, and if any one of its operation fails we need to rollback previously successful operation to prevent error causing issues and send a error message back to the admin.

Let us see an example:
`Issue causing scenario`
```php
 // delete user and all of its post
 $user = auth()->user();
 $user->posts();
 $user->delete();
```

In the above example user will be deleted but it's posts are not deleted, which will cause error where we are using post with its user_id, or these posts are still there in database which is now unused and unnecessary. To prevent this we use Db transaction, so if the posts are not deleted we cannot delete its user (because the operation are dependent on each other) and it will rollback the transaction.

We can now use the below code.
```php
 // delete user and all of its post
 DB::transaction( function () {
    $user = auth()->user();
    $user->posts()->delete();
    $user->delete();
 });
```
This is how we can handle the issue with DB transaction. If both transaction succeed then with will return success message.

Thank you for reading. :unicorn: :unicorn: :lion: 😍
Laravel 8 with Bootstrap (Part 2)
Published: 2021-10-30 16:21:45

Before we developed the laravel site with bootstrap (Part 1)
[Click Here](https://dev.to/jsandaruwan/laravel-8-with-bootstrap-58bm).This time we developing the our website livewire table with  bootstrap.
![Image Bg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu18szanpu95r1zxjab6.jpeg)


We use the users for that task. That to esay way to show you how to implement the livewire table with boosatrap. Let's go.

First of we will go to the terminal on project.
Go to the our project file.

```
cd bootstrap-app
```

After install the today magical package for our project.

```
composer require rappasoft/laravel-livewire-tables
```
Now we can create the livewire component.

```
php artisan make:livewire user-component --inline
```
###### Tip:Creating the livewire you want only developing the Livewire compont without balde file you can use --inline.


Our livewire component extends our new magical package

![Image magical](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fwg9pi6o22m5sfg5hr3.png)
 
After see that has implement the columns function it return the our livewire table  columns.Then we build the query functio. It rerun on query. Thats the today magical. Ohh no not end.

```
php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-config

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views

php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-translations
 ```
Use these publish all package config,views and translations.

in config/livewire-tables.php we can change the css framework. (tailwind, bootstrap-4 , bootstrap-5)

![Image table](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbjlg9bj0i9m5p894lwy.png)

Let's meet again for the brand new tutorial.
How to receive the message by telegram bot sendMessage
Published: 2021-09-13 06:24:38

broswer input url:api.telegram.org/bot<my token>/sendMessage?chat_id=<my chat id>&text=TEST
my bot in telegram will receive the message"TEST".I wanna know if there is another way to receive the content"TEST" (like using a new url index or by python/php code)
Web Frameworks
Published: 2021-09-13 16:58:17

COMMONALITIES
1. They are component-based JavaScript frameworks. StencilJS, however, is just a toolchain that creates projects. 
2. VueJS, React, and Stencil use a virtual DOM while Angular uses the browser's DOM.
3. StencilJS and Angular both use TypeScript files

DUPLICATE/OVERLAPPING
1. package.json file 
2. All have a source directory

EASIEST DX
React. It offers a lot of flexibility and is easy to test. It also has a strong community so if a coder needs help, there is a large group of developers and supporters who might've already answered their question online. 

PREFERENCE
I like the Angular framework because it is a full-fledged solution, however it is great for large-scale applications. I would prefer using React for our projects because it is really flexible and great for light weight apps. It is easier to get started and relatively small file size (100 KB). 

ORGANIZATION'S BIOLERPLATE
https://github.com/IST402/boilerpoint

MY BIOLERPLATE FOR ANGULAR
https://github.com/yuellian/boilerpoint
การใช้งาน Lottie animations ร่วมกับ React
Published: 2021-09-26 16:57:45

Lottie Animation เป็นไฟล์ภาพอนิเมชั่นที่เบา เร็ว และมีภาพเคลื่อนไหวที่มีคุณภาพสูง คือ เร็วกว่า .gif หรือ png ที่เรียงซ้อนกัน หรือแม้กระทั่งวีดีโอที่เป็นไฟล์ใหญ่โดยปัจจุบันเว็บต้องการการโหลดเว็บที่เร็วแต่ยังต้องมีลูกเล่น การใช้ Lottie Animation เพื่อตอบโจทย์ในส่วนนี้ 

ในบทความนี้จะไม่พูดถึงการสร้างไฟล์ Lottie Animation แต่จะเป็นการพูดถึงการใช้งานไฟล์ Lottie ร่วมกับ React ซึ่งแน่นอนจะต้องมีการสร้างไฟล์ Lottie ที่เป็นไฟล์นามสกุล .json ขึ้นมาแล้ว ซึ่งทาง Lottie Animation จะมีตัวช่วยในการสร้างแบบออนไลน์อย่าง Lottie Editor แทนการสร้างในโปรแกรม Adobe After Effect 

![lottie editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxu2aj07p0e6faba29w4.png)

[สร้างไฟล์ Lottie Animation ด้วย Lottie Editor](https://lottiefiles.com/editor)

ต่อมาหลังจากที่เราได้ทำการสร้างไฟล์ .json ขึ้นมาแล้ว เนื้อหาในไฟล์จะอยู่ในรูปแบบของ json ซึ่งสิ่งที่สำคัญอีกส่วนหนึ่งในการใช้งานเพื่อ Render ไฟล์ .json ของเราให้อยู่ในรูปแบบ Animation บนหน้าเว็บนั้นในส่วนนี้เราจะใช้ Libraly ที่ชื่อว่า react-lottie

![react-lottie](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7m7meuz86gd8ee7w274.png)

เริ่มต้นโปรเจค React ด้วย create-react-app ในที่นี้จะยกตัวอย่าง app ว่า app-use-lottie

> หากผู้อ่านไม่เคยใช้งาน create-react-app สามารถอ่านบทความก่อนหน้านี้ได้ที่
[เริ่มต้นโปรเจคด้วย React Typescript + Tailwind Css ](https://dev.to/_tnkshcc/react-typescript-tailwind-css-4j59)

ทำการติดตั้ง react-lottie ด้วยคำสั่ง 

```
npm i --save-dev @types/react-lottie
```

![@types/react-lottie](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n68tv3wkc7npsxk8jkqg.png)

ทำการ Import Lottie จาก react-lottie และไฟล์ .json ของเรา ในที่นี้คือ arrow-down.json

```javascript
import Lottie from "react-lottie";
import LottieExample from "./arrow-down.json";
```

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

เพิ่มส่วนชองการ Render ไฟล์ lottie
* options คือ ส่วนของการตั้งค่าการทำงานต่างๆขแง Lottie 
  * loop รับค่าเป็น Boolean ว่าต้องการให้ทำการวนซ้ำการทำงานหรือไม่
  * autoplay รับค่าเป็น Boolean ว่าต้องการให้ทำการเริ่มต้นการทำงานแบบอัตโนมัติหรือไม่
  * animationData ไฟล์ .json ที่ได้ทำการ Import เข้ามา
* height ส่วนสูงของไฟล์ Lottie
* width ความกว้างของไฟล์ Lottie

```javascript
<Lottie
  options={{
    loop: true,
    autoplay: true,
    animationData: LottieExample,
  }}
  height={400}
  width={400}
/>
```

หากไม่เกิดข้อผิดพาดขึ้นมาจะปรากฏ Animation ที่ได้จากการ Render ไฟล์ Lottie Animation ตามที่เราสร้างขึ้นมา

![Animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc0ied91atzbhuu43yrk.png)
JavaScript setInterval and setTimer
Tags: javascript
Published: 2021-12-27 10:45:38

These are both timers in JavaScript. For some reason I always used to get these two confused, even though there's a clue in the name as to which does which.

## setInterval
This is used to do something repeatedly after a certain amount of time.

```javascript
setInterval(runFunction, 1000)
```
This will run the function called runFunction every 1000 milliseconds, ie 1 second. It will keep doing it until you tell it to stop.

To stop it you use clearInterval - but you have to have given the setInterval a name first.
```
let interval;

document.querySelector('.startButton').addEventListener('click', function() {
  interval = setInterval(runFunction, 1000)
})

document.querySelector('.stopButton').addEventListener('click', function() {
  clearInterval(interval)
})

function runFunction() {
  console.log('Running!')
}
```
This will print "Running!" to the console every second after you press the startButton, and stop once you press the stopButton.

You don't have to run a function from setInterval, you can use an anonymous function:
```javascript
setInterval( function() {
  console.log('Running!')
}, 1000 )
```
Or with an arrow function:
```javascript
setInterval( () => {
  console.log('Running!')
}, 1000 )
```

## setTimeout
This is used to do something after a certain amount of time and then stop. So this will print "Running!" to the console once after 1 second:
```javascript
setTimeout( () => {
  console.log('Running!')
}, 1000 )
```

Similarly, you can clear the interval afterwards:
```javascript
const timeout = setTimeout(runFunction, 1000)

function runFunction() {
  console.log('Running!')
  clearTimeout(timeout)
}
```

## Conclusion
setInterval and setTimeout are very similarly structured. The main difference is that setTimeout runs once after the timer times out and setInterval runs multiple times on the interval set.
Learning Videos for Test Driven Development
Tags: testing, tdd, javascript
Published: 2021-09-29 14:30:31

---
title: Learning Videos for Test Driven Development
published: true
description: Links to YouTube videos that help you learn Test Driven Development and get better at testing.
tags: testing,tdd,javascript
//cover_image: https://direct_url_to_image.jpg
---

It took me 21 years to grok Test Driven Development. I had at least 4 false starts that I can remember. I'm _still_ learning & getting better. It just "clicked" once I kept at it. I feel it's helped my designs. I couldn't have done it w/o a coding style I feel comfortable in.

If you too are struggling to understand it, or don't get why it's helpful, check out Dave Farley's Continuous Delivery YouTube channel. He covers a lot more than TDD, but he'll give you another perspective about TDD you'll dig. It doesn't matter if you're Object Oriented, Functional, or imperative, he speaks to us all.

{% youtube llaUBH5oayw %}


Another one of his takes on when your spidey sense says "something is wrong here":

{% youtube -4Ybn0Cz2oU %}

Tons more [programming content on his channel](https://www.youtube.com/channel/UCCfqyGl3nq_V0bo64CjZh8g) that's worth your time.

_Another_ perspective is one the cats from the TestDouble crew, Justin Searls. He has a super set of videos covering the strategy (why), tactics (how), and everything in between of good/bad. This is one of my faves about over mocking:

{% youtube x8sKpJwq6lY %}

He's also got many other videos that are SUPER comprehensive about real-world scenarios.

{% youtube VD51AkG8EZw %}

Finally, plugging mine. These should give you another perspective in the best and worst programming languages there are, with actual coding.

TDD using Functional Programming in Elm:

{% youtube QMb-z2L_OYA %}

...and TDD using Object Oriented Proramming in JavaScript:

{% youtube lbFP4iFqk00 %}