teleren/devto huggingface dataset:
This Week in JavaScript by Joel 9/30/2020
Tags: javascript, react
Published: 2020-10-01 16:32:17

---
title: This Week in JavaScript by Joel 9/30/2020
published: true
description: 
tags: javascript, react
canonical_url: https://joel.net/this-week-in-javascript-by-joel-9302020
cover_image: https://joelnet.keybase.pub/this-week-in-javascript-001(3).png
---

During this week in JavaScript, I found some Epic React training, a React framework for CloudFlare Workers, a replacement for Redux, my YouTube hit 1,000, and a special shout out to a tech community member.

{% youtube utUhte8-gX0 %}

## Epic React Training

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601424712659/7xyu9F4xZ.png)

[Kent C. Dodds](https://twitter.com/kentcdodds) and team have released [Epic React](http://epicreact.dev/) training.

Epic React includes 19 hours of video training, workshop excercises, 10 hours of video conversations with React experts.

Prices vary from $83 to $419. It's pricey, but considering the quality of [Kent C. Dodds](https://twitter.com/kentcdodds)'s other content, it'll be worth every penny.

## Flareact

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601424905696/Z7uMltBbL.png)

[Flareact](https://flareact.com) is an edge-rendered React framework built for [Cloudflare Workers](https://workers.cloudflare.com/).

I have been spending some free time exploring Cloudflare Workers and have even build a POC React framework for it. I am now considering throwing that all in the bin and replacing it with Flareact. I am very excited for this project!

## Zustand

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1601425244175/-GpWAltj6.png)

[Zustand](https://zustand.surge.sh/) is state management library for React and claim to have a *comfy api based on hooks* and I would agree. The code looks incredibly simple and I am looking forward to replacing a bunch of my React boiler plate with this.

## 1,000 Subscribers 🎉

![Screenshot_20200928-181133.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1601432630133/PWvHkqwJS.jpeg)

My YouTube Channel, [Joel Codes](https://www.youtube.com/JoelCodes),  has reached 1,000 subscribers!

Such a big milestone and I am so thankful for everyone who has subscribed. It means so much to me. So thanks again!

## Community Shout Out

Congrats to [@SimonHoiberg](https://twitter.com/SimonHoiberg) for his Twitter API Client making it to number 4 on the GitHub trending list for TypeScript.

{% twitter 1310895641648824321 %}

## Follow Me

Subscribe to my newsletter on [joel.net](https://joel.net)

Find me on Twitter [@joelnet](https://twitter.com/joelnet) or YouTube [JoelCodes](https://www.youtube.com/JoelCodes)

Cheers 🍻
Working with date locale in your Cypress test
Tags: javascript, cypress, testing, coding
Published: 2020-10-01 16:23:23

I recently came across a challenge when working with date locale's especially within the browser, and sometimes it could be very challenging there is a quick way around this using the `Intl.DateTimeFormat()` [more info]([resolvedOptions()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions))

But using the [resolvedOptions()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions) in the `DateTimeFormat` prototype method gives us more information and the browser locale is one of them.


# Using Cypress

I was tempted to actually run this cypress code, but the problem is this won't work unless its inside a test, for example an "it" block or in a Gherkin syntax if you using cucumber.
```
const dateLocale = () => {
  let locale = '';
  cy.window().then(win => {
    locale = win.navigator.language;
  });
  
  return locale;
}
```

# My Solution

For me i prefer using the `Intl.DateTimeFormat().resolvedOptions()` constructor object as this offer me flexibility and less code as i can easily extract the locale. An example code will look like this

{% runkit %}
const { locale: dateLocale } = new Intl.DateTimeFormat().resolvedOptions();

console.log(dateLocale); // logs the resolvedOptions() props

const date = Intl.DateTimeFormat(dateLocale).format(new Date());

console.log(date); // browser default locale date
{% endrunkit %}

# Final Words

This is solely my opinion please feel free to drop your comment's in which approach do you think makes sense and how will you solve a problem like this.


> If you enjoyed the article, consider sharing it so more people can benefit from it! Also, feel free to follow me on Twitter [@don_csay](https://twitter.com/don_csay) with your opinions.
Open Source Projects Thread
Tags: hacktoberfest, opensource
Published: 2020-10-01 16:19:01


> A little help will guide someone to eventually create some indistinguishable future.

## Hacktoberfest 2020
A complete month of **October** dedicated to **Open Source Development** and learning more about different open-source software. We get a chance to contribute to the development of open-source software and communities. 
Although it is common for the developers who continue to develop throughout the year. But the best thing is every year the freshers or the people who just started with the development gets an awesome timeline to learn and contribute.

## Perks
You get a choice to pick a limited edition **T-shirt** or plant a tree. But that is just motivation, else you have a chance to step up in the world of innovation and development.

## Why this thread
Generally, freshers have a great challenge in selecting the project. They try going with the listed projects on the **Hacktoberfest** website, which are really little difficult or they aren't resourceful or knowledgeable to get their PR accepted.

So We(You and me) are creating this thread and you can add the open-source projects which are accepting the PR from the people broadly classified into three parts as `easy`, `medium` and `hard`. You can add `first-timer` as well.

You can append your projects or the projects you know are accepting PRs for this **Hacktoberfest**.

## Important Links:
- [Hacktoberfest Website](https://hacktoberfest.digitalocean.com/)

## Request a comment
- Add a link to the GitHub repository or the project website
- Add label `first-timer`, `easy`, `medium`, `hard`
- Post the comment
- If you are a part of a community who supports open-source, do mention them or the link to their website so that people might like to contribute and connect for their development.
- Yay! you just helped someone to make their first contribution.

You are free to share and repost with or without any permission(s). Solely used for Open Source Development.
How to track website link clicks in HTML5?
Tags: html, ping
Published: 2020-10-01 16:16:54

A single HTML attribute can be used to track website clicks . No JavaScript needed . Wrote about the “ping” attribute introduced in HTML5. Does anyone use it? 
https://fullstackdeveloper.guru/2020/10/01/how-to-track-your-website-link-clicks-using-a-single-html-attribute/
WordPress plugin action links - thorough notes
Tags: wordpress, plugin, tutorial, php
Published: 2020-10-01 16:11:01

---
title: WordPress plugin action links - thorough notes
published: true
description: WordPress plugin action links (i.e., activate, deactivate, delete) are those links that are visible under each plugin on the plugin page.
tags: #wordpress #plugin #tutorial #php
//cover_image: https://direct_url_to_image.jpg
---
Recently I have released a simple light-weight plugin on [WordPress.org to add color to the taxonomies](https://wordpress.org/plugins/kantbtrue-taxonomy-color/). While working on the plugin, I was thinking of the past me who don't know much about the WordPress plugin development's best practices.

If you are an aspiring WP plugin developer, then this post may help you to understand one of the most important things, that is action links.

##What are action links?
WordPress plugin action links (i.e., activate, deactivate, delete) are those links that are visible under each plugin on the plugin page.

##Purpose of the action links?
Plugin action links are a useful way to provide helpful links to your plugin users like contact, support, or settings page.

One good point about the action link is, it will only be visible when your plugin is active. So, no worry about the visibility of links when your plugin isn't active.

##How can I add my own action links?
The `plugin_action_links_{$plugin_file}` filter is responsible for adding action links where `$plugin_file` referes to the path of plugin file.

```PHP
if ( ! function_exists( 'kantbtrue_action_links' ) ) {
    /**
     * Filters the list of action links displayed for a specific plugin in the Plugins list table
     * 
     * @param array $actions An array of plugin action links.
     */
    function add_action_links ( $actions ) {
        $links = array(
            '<a href="' . admin_url( 'admin.php?page=kbt_settings' ) . '">Settings</a>',
        );
        return array_merge( $actions, $links );
    }
}
add_filter( 'plugin_action_links_' . plugin_basename( __FILE__ ), 'kantbtrue_action_links' );
```

More info about the hook - [WordPress developer hook page](https://developer.wordpress.org/reference/hooks/plugin_action_links_plugin_file/)
More examples - [Wordpress codex page](https://codex.wordpress.org/Plugin_API/Filter_Reference/plugin_action_links_(plugin_file_name))
Git Hub Finder
Tags: react, javascript, html, css
Published: 2020-10-01 15:50:44

Complete A React JS Based Project. This project is all about getting information about the Git hub profile of a developer.
You get to know Name, Bio, Repos, Followers, and of course image. I used Github API to get data from GitHub and the project completed by using Hooks and props.

By doing this simple project I have learned:
useState
props management
Link of Project:- https://lnkd.in/eeCGCq8
Github Link: -https://lnkd.in/eR_5qqQ
GitHub Thrilled : Code scanning is now available!
Tags: news, github, codenewbie, security
Published: 2020-10-01 15:35:59

GitHub code scanning is a developer-first, GitHub-native approach to easily find security vulnerabilities before they reach production. GitHub is thrilled to announce the general availability of code scanning. You can enable it on your public repository today!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3nqdscknjoumgxalmdqp.gif)

Here is wonderful article:
https://github.blog/2020-09-30-code-scanning-is-now-available/

**Please visit my profile for more interesting articles**


######***IMP REQUEST:***

###### You are most welcome to join my team 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3qhbvg5fsrh3nt7anh36.png)

[ Click here for joining my team ]
(https://forms.gle/pSCALuEWHus3pg9F6).

###### *Also you are most welcome to join OPEN SOURCE INTELLIGENT SYSTEM (OSINT) if you can help in open source project regarding safeguarding humans from various diseases like CORONA outbreak*
######https://github.com/Manishfoodtechs/OSINTHRH/wiki

Contact email: Manishfoodtechs@gmail.com. 

If you have any problem, our team is also engaged in professional consultancy and delivery.

![](https://media2.giphy.com/media/oNrPzIy3OhHm7zrvA3/source.gif)

Imagecredit: GitHub.blog
Why to use JSON
Tags: json, xml, javascript, devops
Published: 2020-10-01 15:43:23

Scalable: JSON is language independent, which means it can work well with most of the modern programming language. Let’s say if we need to change the server side language, in that case it would be easier for us to go ahead with that change as JSON structure is same for all the languages.
Light weight: When working with AJAX, it is important to load the data quickly and asynchronously without requesting the page re-load. Since JSON is light weighted, it becomes easier to get and load the requested data quickly.
Standard Structure: As we have seen so far that JSON objects are having a standard structure that makes developers job easy to read and write code, because they know what to expect from JSON.
Easy to read and write:
Text based, human readable data exchange format
Enviando documentos via Bulk Api no ElasticSearch
Tags: elasticsearch, devops, json, linux
Published: 2020-10-01 15:37:48

---
title: Enviando documentos via Bulk Api no ElasticSearch
published: true
description: Como enviar documentos em massa para o ElasticSearch utilizando a Bulk Api
tags: elasticsearch, devops, json, linux
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--TNAHqoep--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/0e793lj3ud0qz7n786ac.png
---

Esse blog mudou para: [www.leandrosf.com] (https://www.leandrosf.com/).
Creating a TODO with JavaScript
Tags: todo, javascript, html, todolist
Published: 2020-10-01 15:35:40

[[clique aqui para português]](https://medium.com/walternascimentobarroso-pt/criando-um-todo-com-javascript-8622331367eb)

A task list is something that helps a lot in our chores, making it possible to list and organize which tasks to do, so we will create a task list using only HTML and JAVASCRIPT, and a small class in CSS.

## CODE

First we will create the interface, we will do something simple, using only HTML.

```html
<h1>Lista de tarefas</h1>

<form name="form_main">
  <label for="task">Tarefa: </label> 
  <input type="text" name="task" id="task" /> <br />
  <button type="button" onclick="add()">Add</button>
</form>

<fieldset>
  <legend>Tarefas:</legend>
  <ul>
    <li>Limpar casa</li>
    <li>Outras</li>
  </ul>
</fieldset>
```

In the HTML structure an input was created to receive our task and a button was also created that triggers the `add()` function.

We will also need a CSS class to give a '~~streaky~~' effect to completed tasks.

```css
.checked {
  text-decoration: line-through;
}
```

The `checked` class is used only to define text as '~~streaky~~' when completing a task.

Now let’s create the `add()` function.

```javascript
function add() {
  let li = document.createElement('LI');
  let input_value = document.form_main.task.value;
  let input_text = document.createTextNode(input_value);

  li.appendChild(input_text);
  document.querySelector('ul').appendChild(li);
  document.form_main.task.value = "";

  createCloseButton(li);
}
```

The `add()` function creates a new element (task) in the list.

Within the `add()` function, a call is made to the `createCloseButton()` function, which is the function we are going to create now.

```javascript
function createCloseButton(li) {
  let span = document.createElement("SPAN");
  let txt = document.createTextNode("\u00D7");

  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  span.onclick = () => span.parentElement.style.display = "none";
}
```

In the `createCloseButton` function we create a `span` with an `x`, which when clicking the element is hidden.

As the list is already with some items we will create a loop to go through all the li and add the close button.

Finally, we will add a click event to all `li`, and when clicking add the class `checked`.

```javascript
document.querySelectorAll('li').forEach(createCloseButton);

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI')
    e.target.classList.toggle('checked');
});
```

ready as simple as that.

## Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/poyEvjy %}

## Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube w1v4MtKhDX8 %}

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
Promises in JavaScript
Tags: javascript, webdev, beginners, 100daysofcode
Published: 2020-10-01 15:31:54

## Drawback in Callbacks

- Callbacks can be invoked any number of times inside the function
- Thus, the state of the result of the task keeps on changing.

- Example:

```js
function sendMail(details, callBack) {
  setTimeout(function () {
    // callBack is invoked thrice
    // and result of task keeps on changing which should not happen
    // So there is need of promises which helps to prevent this behavior.
    callBack(null, "Done"); // task is completed
    callBack("Error", null); // task could not complete
    callBack("Error"); // task could not complete
  }, 2000);
}

sendMail({ id: 1, email: "test@test.com" }, function (err, done) {
  if (err) {
    console.log("Error: ", err);
  } else {
    console.log("Success: ", done);
  }
});
```

## What is a Promise?

- Promise is an object which will have the values of future result fetched after asynchronous call.

## State of a Promise

- Pending State: promise is created or initial state.
- Fulfilled State: operation is completed successfully.
- Rejected State: operation failed.

  > When the state has reached any one of fulfilled or rejected state, the promise is said to be settled.

## Three Methods in Promise

- **then:** handles success and error both
- **catch:** handles rejection
- **finally:** this method is executed when the promise has settled.

## Promise Examples:

- fetchEmail is a promise which is assigned a task to fetch email.

* **Example1: Promise is fullfilled**

```js
var fetchEmail = new Promise(function (success, failure) {
  // argument success is a placeholder for success callback
  // argument failure is a placeholder for failure callback
  setTimeout(function () {
    success({
      id: 1,
      email: "test@test.com",
    });
  }, 2000);
});

fetchEmail
  .then(function (data) {
    console.log("Promise is fulfilled: ", data);
  })
  .catch(function (err) {
    console.log("Promise is rejected: ", err);
  })
  .finally(function () {
    console.log("Promise is settled.");
  });
});
```

- **Example2: Promise is rejected**

> Note: it is common to name success as resolve and failure as reject.

```js
var fetchEmail = new Promise(function (resolve, reject) {
  setTimeout(function () {
   reject('Network connection failed');
  }, 2000);
});

fetchEmail
  .then(function (data) {
    console.log("Promise is fulfilled: ", data);
  })
  .catch(function (err) {
    console.log("Promise is rejected: ", err);
  })
  .finally(function () {
    console.log("Promise is settled.");
  });
});
```
I create my Github profile README
Published: 2020-10-01 15:19:40

Recently, I have created my Github profile README. 

In the profile, I put my social links, technologies and tools I am using, latest [Youtube videos](https://www.youtube.com/channel/UCXykqt3V2-9bYXKWZRcH0rA) and [blog posts](https://phongduong.dev/blog)

You can check my profile page at <https://github.com/phongduong>

Feedback is welcome
Getting faster answers and better visibility with Azure Resource Graph
Tags: azure, tutorial, cloud, devops
Published: 2020-10-01 15:04:24

#### 📺 033 - Stephane Lapointe 🎙️ Frank Boucher

{% youtube Y0X8HuhasdA %}

---

If you're interested in achieving faster, more efficient cloud governance and increase visibility—with less effort—you're at the right place.

We'll go over the basics of Azure Resource Graph and shows you how to leverage it to streamline your subscription management and governance duties. Learn the query language that will enable you to get answers, blazing fast. It is a fundamental tool to master nowadays if you are serious about management in Azure.

---

### Useful Links

🔗 [Azure Free Account](https://bit.ly/ASAFreeAccount)

🔗 [Azure Resource Graph documentation](https://docs.microsoft.com/en-us/azure/governance/resource-graph/?WT.mc_id=allaroundazure-devto-fboucher) 

🔗 [Starter queries for Azure Resource Graph](https://docs.microsoft.com/en-us/azure/governance/resource-graph/samples/starter?WT.mc_id=allaroundazure-devto-fboucher)

🔗 [Understanding the Azure Resource Graph query language](https://docs.microsoft.com/en-us/azure/governance/resource-graph/concepts/query-language?WT.mc_id=allaroundazure-devto-fboucher)

🔗 [Azure Resource Graph quickstart queries](https://github.com/sharegate/azure-quickstart-resource-graph)

🔗 [Resource Graph Azure Dasboards](https://github.com/Azure-Samples/Governance/tree/master/src/resource-graph)


### Learn more about Stephane Lapointe

🔗 [@s_lapointe](https://twitter.com/s_lapointe)

🔗 [Bio](https://mvp.microsoft.com/en-us/PublicProfile/5001613?fullName=Stephane%20Lapointe&WT.mc_id=allaroundazure-blog-fboucher)

🔗 [Blog](https://www.codeisahighway.com/)

### Find Us On

📺 [Twitch](https://www.twitch.tv/microsoftdeveloper)

🔗 Twitter: [@fboucheros](https://twitter.com/fboucheros)

☁️
Downloading from Google Fonts
Tags: google, fonts, formats, type
Published: 2020-10-09 16:20:13

---
title: Downloading from Google Fonts
published: true
date: 2020-10-01 14:56:26 UTC
tags: google,fonts,formats,type
canonical_url: https://adactio.com/journal/17480
---

If you’re using web fonts, there are good performance (and privacy) reasons for [hosting your own font files](https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/). And fortunately, [Google Fonts](https://fonts.google.com) gives you that option. There’s a “Download family” button on every specimen page.

But if you go ahead and download a font family from Google Fonts, you’ll notice something a bit odd. The .zip file only contains .ttf files. You can serve those on the web, but it’s far from the best choice. Woff2 is far leaner in file size.

This means you need to manually convert the downloaded .ttf files into .woff or .woff2 files using something like [Font Squirrel’s generator](https://www.fontsquirrel.com/tools/webfont-generator). That’s fine, but I’m curious as to why this step is necessary. Why doesn’t Google Fonts provide .woff or .woff2 files in the downloaded folder? After all, if you choose to use Google Fonts as a third-party hosting service for your fonts, it most definitely serves up the appropriate file formats.

I thought maybe it was something to do with the licensing. Maybe some licenses only allow for unmodified truetype files to be distributed? But I’ve looked at fonts with different licenses—some have Apache 2 licensing, some have Open Font licensing—and they’re all quite permissive and definitely allow for modification.

Maybe the thinking is that, if you’re hosting your own font files, then you know what you’re doing and you should be able to do your own file conversion and subsetting. But I’ve come across more than one website in the wild serving up .ttf files. And who can blame them? They want to host their own font files. They downloaded those files from Google Fonts. Why shouldn’t they assume that they’re good to go?

It’s all a bit strange. If anyone knows why Google Fonts only provides .ttf files for download, [please let me know](https://adactio.com/contact/). In a pinch, I will also accept rampant speculation.

[Trys](https://www.trysmudford.com/) also pointed out some weird default behaviour if you _do_ let Google Fonts do the hosting for you. Specifically if it’s a variable font. Let’s say it’s a font with weight as a variable axis. You specify in advance which weights you’ll be using, and then it generates separate font files to serve for each different weight.

Doesn’t that defeat the whole point of using a variable font? I mean, I can see how it could result in smaller file sizes if you’re just using one or two weights, but isn’t half the fun of having a weight axis that you can go crazy with as many weights as you want and it’s all still one font file?

Like I said, it’s all very strange.