teleren/devto huggingface dataset:
มาลองแปลงค่าตัวเลขเป็นสกุลเงินต่างๆ ด้วยคำสั่ง "Intl.NumberFormat" ใน ภาษา JavaScript กันเถอะ!
Published: 2020-07-27 11:36:34

ในภาษา JavaScript มีคำสั่ง `Intl.NumberFormat` ที่ใช้สำหรับแปลงตัวเลขเป็นค่าต่างๆ เพื่อให้ได้ผลลัพธ์ที่เราต้องการ โดยในตัวอย่างนี้ เราจะมาแปลงตัวเลขให้กลายเป็นสกุลเงินของแต่ละประเทศด้วยคำสั่ง `Intl.NumberFormat` แบบง่ายๆกันครับ

---

ก่อนอื่นเรามาทำความรู้จักกับคำสั่งนี้ในแบบพื้นฐานง่ายๆ โดยไม่ต้องกำหนด **option** อะไรทั้งสิ้น ดังตัวอย่างข้างล่างนี้ครับ

```javascript
const money = 3500;
const result = Intl.NumberFormat().format(money);

console.log(result); // "3,500"
```

> จากผลลัพธ์ดังกล่าวจะสังเกตเห็นว่ามันทำการแปลง number เป็น string และเปลี่ยนรูปแบบ format โดยเพิ่มลูกน้ำเข้ามา

---

จากตัวอย่างก่อนหน้า เราได้เรียนรู้การใช้งานพื้นฐานของคำสั่งนี้แล้ว ทีนี้เราจะมากำหนด **option** เพื่อเพิ่มความสามารถให้กับคำสั่งนี้กัน โดยเราจะเขียนคำสั่งให้แปลงค่าจาก "ตัวเลข" ไปเป็น "สกุลเงิน" ของแต่ละประเทศกันครับ

โดยสิ่งที่เราต้องกำหนดก่อนเรียกใช้ จะมีด้วยกัน 3 ค่าหลักๆ ได้แก่
* `locale` พื้นที่ประเทศที่เราจะใช้ เช่น 'th-TH', 'en-US'
* `currency` สกุลเงินที่เราจะแสดง เช่น 'THB', 'USD'
* `style` รูปแบบที่เราเรียกใช้ เช่น 'currency', 'unit'

```javascript
const money = 555000;

const result = Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB',
}).format(money);

console.log(result); // "฿555,000.00"
```
> จากผลลัพธ์ดังกล่าวเราจะได้รูปแบบที่เป็น "สกุลเงินไทยบาท" และแสดงตำแหน่งทศนิยมให้พร้อมเสร็จสรรพ

---

*** เพิ่มเติมอีกนิด แล้วถ้าเราไม่ต้องการให้แสดงตำแหน่งทศนิยมเราจะทำอย่างไร คำตอบคือเราสามารถกำหนด option เพิ่ม ด้วยคำสั่ง `minimumFractionDigits` และ `maximumFractionDigits` โดยมีค่าเท่ากับ `0`
```javascript
const money = 555000;

const result = Intl.NumberFormat('th-TH', {
  style: 'currency',
  currency: 'THB',
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
}).format(money);

console.log(result); // "฿555,000"
```
> จากผลลัพธ์ดังกล่าวเราจะได้รูปแบบที่ไม่มีตำแหน่งทศนิยมแล้วครับ
Developer Learning Resources
Tags: javascript, webdev, beginners, react
Published: 2020-07-27 11:28:01

__Top Developers to learn from__

|           Name           | Website                                                      |
| :----------------------: | :----------------------------------------------------------- |
|      Brad Traversy       | [traversymedia](https://www.traversymedia.com/)              |
| Maximilian Schwarzmüller | [udemy](https://www.udemy.com/user/maximilian-schwarzmuller/) |
|      Stephen Grider      | [udemy](https://www.udemy.com/user/sgslo/)                   |
|         Wes Bos          | [wesbos](https://wesbos.com/)                                |
|    Jonas Schmedtmann     | [udemy](https://www.udemy.com/user/jonasschmedtmann/)        |
|      The Net Ninja       | [youtube](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/featured) |
|      Andrei Neagoie      | [udemy](https://www.udemy.com/user/andrei-neagoie/)          |
|         Colt Lee         | [udemy](https://www.udemy.com/user/coltsteele/)              |
|       Andrew Mead        | [udemy](https://www.udemy.com/user/andrewmead/)              |
|      Scott Tolinski      | [leveluptuts](https://www.leveluptutorials.com/)             |
|        Angela Yu         | [udemy](https://www.udemy.com/user/4b4368a3-b5c8-4529-aa65-2056ec31f37e/) |
|        Gary Simon        | [youtube](https://www.youtube.com/channel/UCVyRiMvfUNMA1UPlDPzG5Ow) |
|          Dev Ed          | [youtube](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q/featured) |
|        Florin Pop        | [youtube](https://www.youtube.com/c/FlorinPop/videos)        |
|       Joshua Fluke       | [youtube](https://www.youtube.com/user/Tychos1/featured)     |

| Communities to follow                           |
| :------------------------------------------ |
| [dev.to](https://dev.to/)                   |
| [freecodecamp](https://www.freecodecamp.org/learn) |
| [udemy](https://www.udemy.com/)                    |
| [hackernoon](https://hackernoon.com/)       |
| [csstricks](https://css-tricks.com/)        |
| [stackoverflow](https://stackoverflow.com/) |
| [twitter](https://twitter.com/home)         |
| [youtube](https://www.youtube.com/)         |
| [reddit](https://www.reddit.com/)           |
| [discord](https://discord.com/)             |
| [slack](https://slack.com/intl/en-gb/)      |

| Version/Source Control                     |
| :---------------------------------- |
| [github](https://github.com/)       |
| [gitlab](https://about.gitlab.com/) |
| [bitbucket](https://bitbucket.org/) |

| Online Code Editor                       |
| :------------------------------------- |
| [codepen](https://codepen.io/)         |
| [codesandbox](https://codesandbox.io/) |
| [jsfiddle](https://jsfiddle.net/)      |
| [repl.it](https://repl.it/)            |

| Podcasts                      |
| :--------------------------- |
| [syntax](https://syntax.fm/) |
Carousel Slider Tutorial | Bootstrap 5
Tags: html, css, webdev, tutorial
Published: 2020-07-27 11:16:00

Creating a good carousel slider is important for any website as you will find these on home pages all over the web. In this tutorial, we create a slider using the latest Bootstrap 5 Library and create a number of slides, animations, backgrounds and more. This goes over the HTML and CSS involved and is quick and simple to do!

{% youtube ku_97a6Bgkg %}
<strong>[Youtube: Carousel Slider Tutoria](https://youtu.be/ku_97a6Bgkg)</strong>

* Creating template HTML, CSS
* Adding Slider and styling
* Background Images
* Transitions, effects, etc

Their current website address for the v5 library is here:
https://v5.getbootstrap.com/

You can view the full example below (code included)
https://v5.getbootstrap.com/docs/5.0/examples/carousel/

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Cloud computing services to the FOSS (free open source software) community now available
Published: 2020-07-27 11:05:48

fosshost.org is a recognized, not-for-profit provider of free to use, accessible cloud-hosting services to the free and open source software community.

We exist through the kind donations of the general public and philanthropy of the hosting industry. The project is managed and coordinated by our founding owner, and a group of highly talented volunteers.

We provide virtual private servers, shared mirrors, storage and associated hosting services including domain registration to a diverse range of open source projects including ActivityPub (W3), Manjaro, XFCE, Xubuntu, The GNOME Project, Xiph.Org Foundation and more.

The project runs a large, global open source infrastructure in four countries with more than 6 Gig of transit available which enables us to provide resilient, scalable and professional hosting services that compete with public cloud providers.

You can visit https://fosshost.org for more information and information on how to apply.  Please note that applications take up to 48 hours to process.   We cannot accept all applications and attention is required when completing the application form to ensure you provide honest and accurate answers.  

Typically projects will receive a virtual machine (or multiple) in each of our regions.  All of our locations support IPV4 as standard, however we now support IPv6 in the US.

Please join our IRC channel on freenode #fosshost if considering applying as this is important to ensure that you get a fair outcome
Pub/Sub model vs Task Queues
Tags: discuss, pubsub, taskqueue, node
Published: 2020-07-27 11:04:52

My perspective on publish/subscribe model is that it's running on the application level without a persistent queue like rabbitmq. All it is doing for me is making tasks like sending users a verification mail asynchronous. Where mailing might take up to a few hundred milliseconds.

Now I can achieve the same with task queues. Which seem to be more viable since once the task is queued, it's there even after a server crash. Even better in a distributed system, systems running long/complex tasks etc.

I wanna talk simple for most everyday cases like sending emails, analytics, doing some complex database queries.

Adding a job schedule requires me to do some structuring in the codebase and managing those queues and logs. While it might be a good use case for lots of tasks, why should i even bother for cases where i can get away with a pub/sub layer. What are the constrains I am not aware of or wrong about?

I would like to know your opinion on this.
Outlook Duplicate Remover Free 
Tags: duplicatepstremover, removeduplicatepst, outlookduplicateremover, pstduplicateremover
Published: 2020-07-27 10:48:12

Sometime your outlook create duplicate pst emails that can be very harmful for your Outlook because it exceed the size of outlook data which slow down your outlook and occurs some corruption.

So in this situation i would like to recommend you to use this brilliant and professional Outlook duplicate remover which can easily remover your duplicate pst file in just single way without any hassle. It significantly reduce the size of Outlook pst and helps prevent PST file corruption because of being oversized. 

It allows a user to de duplicate emails, contacts, calendars, notes, tasks, and journals. The can also view the .pst files with its attributes including the file name, file path, the number of duplicates found, their name and the status of files.

A status report is also generated by the program with the current status of each file and the completion status is displayed as the number of items proceeds. Technical or non technical both can easily  use this software without any technical skill.

<b>Use it discount coupon code (SYSMOON20OFF) to get 20% discount on full licensed version.</b>

Visit here:- https://www.filesrecoverytools.com/outlook-duplicate-remover.html
Best Outlook Duplicate Remover
Published: 2020-07-27 10:46:40

If you are facing trouble regarding the duplicacy in Outlook. Then you should <a href="https://exchangeserverstips.wordpress.com/2016/11/15/how-to-remove-duplicate-outlook-pst-files-manually/">remove duplicate pst emails</a> from your Outlook mailbox by using manual method, but if you are unable to remove the Outlook emails from the PST files. So in this situation, I would recommend you this outlook pst duplicate remover that can remove all duplicate pst items from Outlook. 

This Outlook PST Duplicate Remover is an innovative tool which easily searching the all duplicate emails items in your Outlook mailbox and removing them effectively. 

The utility provides various scan criteria to the exact list out the outlook duplicate emails and efficiently removes them in few simple clicks. 

It has enhanced easy to use interactive user friendly interface which allow all the users to easily use this software by following it instruction. Use it free demo version to scan and see the preview of mailbox which duplicate items can be removed. 

Read more info:- https://www.emailsoftwares.com/outlook-duplicate-remover.html
PST Duplicate Email Remover
Published: 2020-07-27 10:44:39

If you want manageable PST data then you have to <a href="https://exchangeserverstips.wordpress.com/2016/11/15/how-to-remove-duplicate-outlook-pst-files-manually/">remove duplicate pst files</a> which are likely to be anything, including contacts, emails, calendar, task, entry and notes etc. If you want a perfect solution, I would suggest you to use this brilliant outlook pst duplicate remover software that can easily remove all the duplicates pst files from outlook. 

It removes items including emails, contacts, calendars, notes, tasks, etc. This software allow you to select multiple folders to remover complete pst files from Outlook. There isn’t any limit to eliminate the items, as the utility removes all the duplicate items from the Outlook account. It is required to install the MS Outlook on the local system for the removing the duplicates.

With this software You can find out all duplicate copies of emails under the specific period of time. This Outlook Duplicate Remover tool has a lot of specific time ranges, including ‘Last Day’, Last 30 days, Last 2 Days, Last Year, Anytime and others.

Technical or non technical both can easily this software without any technical skill and give reliable and interactive user friendly interface to make this software fast and smooth. Use it free demo version to see the preview of mailbox which duplicate items can be removed.

Visit here:- https://www.mannatsoftware.com/stellar-phoenix-outlook-duplicate-remover.html
3 Methods of binding in react
Tags: help, react, devops, tutorial
Published: 2020-07-27 10:43:21

This tutorial are for developers who already know React or beginners learning React, 
Binding in React is used to pass  a callback without worrying about it losing its context.
 There are 3 ways to bind in react which are listed below
*) This method is the regular method where by we add our bind method inside of the constructor 

```javascript
class counter extends React.Component {
 constructor () {
  super() 
   this.state = {
     count: 0
   }
    this.incre = this.incre.bind(this)
 } 
 incre()  {
     this.setState({count: this.state.count +1})
}
   
} 

```
*) Adding your function inside of the Constructor  , the normal way of binding is adding ///this.dataf= this.dataf.bind(this)/// 
but in this type we are adding the function inside of the constructor  not the bind method .

```javascript 
class counter extends React.Component {
 constructor () {
  super() 
   this.state = {
     count: 0
   }
    this.incre = () => {
     this.setState({count: this.state.count +1})
}
 }

} 
 ```


*) This last method is a method I mostly use, all we do is do is use a nameless function or an arrow function . The nameless function would give it a lexical this inside which doesn't create it's own this context it inherit the class this.

```javascript
class counter extends React.Component {
 constructor () {
  super() 
   this.state = {
     count: 0
   }
 } 
 incre = () => {
     this.setState({count: this.state.count +1})
}
   
} 
 ```
Website Development Company In Gurgaon

Tags: websitedevelopmentgurgaon, websitedeveloper, websitedevelopmentcompany, websitedevelopmentsite
Published: 2020-07-27 10:42:34

TranciscoLabs is the Top Website development company in Gurgaon. We have a team of 100+ in house web developers with up-to-the-minute expertise in the latest programming languages and technologies- ranging from HTTP/2, CSS3, HTML5, React. We are here to help you from wireframe to website, idea to solution, and goals to reality.
 
A website whether responsive or E-commerce, Static or Dynamic has to be chosen very specifically catering to customer requirements. Our team meticulously studies each and every project and then designs a custom digital strategy for most efficient online experience of our clients. When we develop a website, we take care of each & every thing possible we can such that the website is easily accessible to all, from every point of view.With TranciscoLabs, get responsive cross device website development in your budget and timeline.
Top 8 Illustration Trends to Watch in 2020
Tags: uiweekly, ux, design, trends2020
Published: 2020-07-27 10:31:47

We love creating artworks. We've been doing it since the early ages be it the cave paintings in Altamira or Ajanta, we have an innate desire to express and depict the world as we see it. Illustrations, on the other hand, are more than just expressions, they serve as a way to communicate to a much larger audience using a familiar visual language. In a digital age, illustrations are a powerful tool to visually express a piece of text, to empathize with the user, to simplify complex processes and even to bring delight.

Illustrations also help in building the personality of a brand and provide them with a much friendlier outlook that's approachable and professional at the same time. We see them all around us whether it is the quirky and funny Google doodles or the friendly line drawings of mail chimp.

With each passing year, we see new illustration trends emerging as the old ones slowly fade away, here we are looking at the latest illustration trends in 2020 to keep you updated.

Read more: https://www.lollypop.design/blog/2020/april/top-8-illustration-trends-to-watch-for-in-2020/
A11y Workshop Activities - Solution
Tags: a11y, workshop
Published: 2020-07-27 10:24:14

---
title: A11y Workshop Activities - Solution
published: true
description: 
tags: a11y, workshop
cover_image: https://i.imgur.com/VbdNYWy.png
---
All the solution for the recently hosted A11y Workshop are deployed at this link

**[https://workshop-a11y-solution.vercel.app/](https://workshop-a11y-solution.vercel.app/)**

There are a total of 8 activities, go on each one by one, and use just a keyboard instead of a mouse, All activities are accessible using Keyboard and Screen-readers.

Hope you will like it & remember accessibility is for everybody.
Mobile App Development Trends for 2020
Tags: mobileappdevelopment, appdevelopmenttrends, apptrends2020
Published: 2020-07-27 10:22:28

Emerging technologies have made mobile app development more experimental and flexible. From low-code development to m-commerce, the mobile app industry is seeing some fantastic trends. This blog consists of an infographic that displays the top ongoing trends and what we expect to see in 2020.

<h2>Let’s check the trending <a href="https://www.sphinx-solution.com/blog/app-development-trends-2020/">mobile app development trends</a> in 2020</h2> 

<h3>Internet of Things integration in mobile apps</h3>
IoT is at the forefront in 2019, and it’s showing a great sign of advancement in 2020 as well. Let’s make it simple; any device prefixed with the word “smart” is and will be associated with IoT. The primary use of IoT on mobile apps is to control any smart devices or connected devices remotely. 

<h3>AI and Machine Learning</h3> 
Companies around the world are using AI for IT, marketing, finance & accounting, and customer services, but AI implementation is not ending here. The subcategory of AI, Machine learning, is taking the use cases beyond this level. The future is more intuitive, interactive, and offering genuinely personalized experiences. Machine Learning can learn any process from previously stored data, detect issues (if any) and solve it in real-time. 

<h3>Augmented Reality & Virtual Reality</h3>
The term Augmented Reality got popular with the rise of Pokemon Go (a 2016 augmented reality mobile game for both iOS and Android). Both Augmented Reality and Virtual Reality is doing well, and they are here to shows new advancement in 2020 as well. Even the recent Pepperfry app and IKEA catalog offer a new dimension to the app users. 

<h3>Beacon Technology</h3>
Beacon comes with great opportunities in the marketing landscape as it minimizes the road between the brands and customers. Industries like hotels, museums, and healthcare are already using beacon technology. 

<h3>Blockchain Technology</h3> 
Blockchain technology is here to create more sophisticated projects in 2020. Decentralized apps are already in trading, finance, healthcare, media, and games, and they are advancing towards other sectors as well. From blockchain in anti-piracy to Blockchain as a Service (Baas). 

<h3>Cloud-based mobile apps</h3>
Cloud integrations already had a good impact on the mobile app development industry. The cloud applications solve the issue of memory-intensive files. Cloud integration comes with a lot of benefits like less operational & hosting costs, improved performance, increase the storage capability of apps, increase collaboration, and productivity. You will see the majority of the mobile apps coming with a more significant database uses Amazon Web Service as their cloud computing backup. 

If you are considering launching your app or planning to revamp your existing mobile app, talk to <a href="https://www.sphinx-solution.com/mobile-app-development/">mobile app development services</a>.
Sync Tooltip across multiple charts in your dashboard with CanvasJS
Tags: canvasjs, javascript, charts, dashboard
Published: 2020-07-27 10:12:37

Dashboards are generally used to visualize data with related information as multiple charts. While you are visualizing across multiple charts, it’s an added advantage if all the charts show up tooltip of particular data. For example, while visualizing sales data it’s good to show tooltip in the charts that’s showing coupon value used, number of sales on that date when you mouse over sales chart.

[CanvasJS](https://canvasjs.com/) library provides [API](https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/) which allows developers to synchronize tooltip across multiple charts accurately. Library also has API to synchronize crosshair of corresponding axes across multiple charts.

### Prerequisite
- JavaScript
- [CanvasJS Charting Library](https://canvasjs.com/)

### How to Sync Tooltip across Multiple Charts?
The logic to synchronize tooltip across multiple charts is simple. When tooltip is shown / updated in one chart, show or update the tooltip in all other charts and when it’s hidden from one chart, hide it in all other charts. To achieve this, CanvasJS provides [updated](https://canvasjs.com/docs/charts/chart-options/tooltip/updated/), [hidden](https://canvasjs.com/docs/charts/chart-options/tooltip/hidden/) events along with [showAtX](https://canvasjs.com/docs/charts/methods/tooltip/showatx/) and [hide](https://canvasjs.com/docs/charts/methods/tooltip/hide/) methods.

Below is the code-snippet for the same.
```
toolTip = {
  updated: showTooltip,
  hidden: hideTooltip
};
function showTooltip(e) {
  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart)
      charts[i].toolTip.showAtX(e.entries[0].xValue);
  }
}

function hideTooltip(e) {
  for( var i = 0; i < charts.length; i++){
    if(charts[i] != e.chart)
      charts[i].toolTip.hide();
  }
}
```

Checkout live working example @ [StackBlitz](https://stackblitz.com/edit/canvasjs-sync-tooltip)