teleren/devto huggingface dataset:
10 ES6 features
Tags: es6, javascript
Published: 2021-05-28 02:42:45

I will try to introduce the most useful features in a succinct way. After the tutorial, you will possess basic skills and be able to apply them in a real project. Don’t treat it as a guide or documentation. My goal is to encourage you to dig deeper and get familiar with ES6.



1. const and let keywords
const enables you to define constants (finally!). let enables you to define variables. That’s great, but don’t we have variables in JavaScript already? Yes, that’s true, but variables declared by var have function scope and are hoisted to the top. It means that a variable can be used before it has been declared. let variables and constants have block scope (surrounded by {}) and cannot be used before declaration.

2.New cool helper functions appeared, which facilitate work with JS arrays in most useful cases. How many times did you implement logic like: filtering, checking if any or all elements meet the condition, or elements conversion? Probably very often. Now you have great language features to do the work for you

3.We can set the default value with an equal sign when declaring a variable in the parameter of a function.

4.Implementation of very simple functions (like the aforementioned sum or product) requires writing a lot of boilerplate. Is there any remedy for that? Yes, just try arrow functions!

5.classes 
Which Java developer doesn’t miss classes when switching to a JS project? Who doesn’t like explicit inheritance, like in Java language, instead of writing magic code for prototypal inheritance? Although some JS developers complained, classes have been introduced in ES6. They don’t change the concept of inheritance. They are just syntactic sugar for prototypal inheritance.

6. Destructuring
The destructuring syntax is the process of converting elements of an array into variables and converting the properties of an object into variables. In addition, destructuring is a shortcut way to replace one or more elements in a variable from a large object or array.
7.
Enhanced object literals can easily create objects with properties inside the curly braces ({}).

8. Promises
Promise promises (yes, I know it sounds weird) that you would get in future results of deferred or long-running tasks. Promise has two channels: the first for results, the second for potential errors. To get the result, you provide the callback function as the ‘then’ function parameter. To handle errors, you provide the callback function as the ‘catch’ function parameter.
Please notice that output of the example might differ for each execution, because of random function call.

9. Arrow Function
The arrow function is a method of shortcut to the function declaration. It will basically shorten our function syntax.

10. Multiple line String
We can easily write multiple line strings using the backtick symbol.
DannJS, a cool, user-friendly neural-network library for JavaScript.
Tags: javascript, webdev, ai, watercooler
Published: 2021-05-28 02:37:16

DannJS is a neural-network library for JavaScript.
[Dannjs (Homepage)](https://www.dannjs.org/).
[Dann (GitHub)](https://github.com/matiasvlevi/Dann).
<br/>
<b><h2><b><center>Thanks for reading, and checking out Dann.js!<br/>Cheers!</center></b></h2></b>
DevOps Huddle: How to integrate Security & Quality into your CI/CD pipelines and what KPIs to measure
Tags: devops, security, pipelines, webinar
Published: 2021-05-28 02:30:17


Development is fast paced, and the demands on developers are never ending.  How do you keep up with the pace of software development without leaving security and quality behind.

In this session, learn how Developers can take security and quality into their own hands, empowered by automation tools. Enable collaboration between your Development, IT Operations, Security and Quality teams with 100+ KPIs across your CI/CD pipelines.

Learn and see a demo on how to: 
* Seamlessly integrate security and quality into your CI/CD pipelines
* Add approval gates at every step of the pipeline
Reduce vulnerabilities and improve collaboration with the right KPIs

Speakers
* Aruna Pattabiraman, Principal Data Architect, Opsera
* Harsha PPS, Software Engineer, Opsera

Register for this Webinar at: https://www.opsera.io/huddle/integrate-security-quality-into-your-ci-cd-pipelines-and-what-kpis-to-measure
I think I have a handle on this.state...
Tags: beginners, react, javascript
Published: 2021-05-28 01:36:29

State and Props hold information that changes over time for the component. Everything else should remain the same. State: should be equal to an object. Example, 
this.state ={mood: 'great'}; Mood is the property and great is a string value. To read a components state use the expression: this.state. name-of-property. Example, <h1> I'm feeling {this.state.mood} </h1>. 

I was going over an example and i randomly see this.handleLoggedIn in the code. I had no idea why it was there and it was briefly mentioned in another document that i had opened. "In React, it’s conventional to use on[Event] names for props which represent events and handle[Event] for the methods which handle the events." So I figured out this.handle...Handle is used as an event handler/listener and used when creating a function in a React element. There is so much more to me figuring that out but my mentor helped me! 

Until next time !
PostgreSQL: Drop a database that has a hyphen in the name
Published: 2021-05-28 01:24:10

Normally to drop a database in psql (postgresql) , we can just type
```
DROP DATABASE dbname;
```

If we want to drop a database called "db-name". we have to escape the database name which contains the hyphen by using double quotation marks.
```
DROP DATABASE "db-name";
```

Resource link here [here](https://stackoverflow.com/questions/3942759/whats-the-escape-sequence-for-hyphen-in-postgresql)
questions about AWS Cloud 
Tags: aws, django, vue, axios
Published: 2021-05-28 01:19:51

this is the architecture used in AWS

Cloud architecture
Cloud architecture
1299×622 79.1 KB
how I configured AWS VPC

VPC’s private ip range : 172.31.0.0/16
1 public subnet
3 private subnets
how I configured AWS route table

private subnet route table configuration
->172.31.0.0/16 local
->0.0.0.0/0 NAT gateway
-included subnets
→ frontend private subnet / backend private subnet / RDS private subnet
total 3 private subnets included in private route table

public subnet route table
→ 172.31.0.0/16 local
→ 0.0.0.0/0 internet gateway
→ public subnet that contains Application Load Balancer / bastion host ec2 / NAT gateway
total 1 public subnet included in public route table

How I configured Application Load Balancer

internet facing
connected instance : frontend ec2 instance in private subnet
then all the configuration done

I entered domain web site to test it

then I confronted with this error

[Vuetify] [UPGRADE] ‘v-content’ is deprecated, use ‘v-main’ instead. console.ts:34

***found in ***

—> VMain

*** VApp***

*** App***

*** Root***

POST ‘http://ec2-xxx-xxx-xxx-xxx.us-west-1.compute.amazonaws.com:8000/Product/item_list’ xhr.js:177

!net::ERR_CONNECTION_REFUSED!

!Uncaught (in promise) Error:Network Error createError.js:16

*** at t.exports (createError.js:16)***

*** at XMLHttpRequest.d.onerror (xhr.js:84) !***

POST ‘http://ec2-xxx-xxx-xxx-xxx.us-west-1.compute.amazonaws.com:8000/Bag/bag_count’ xhr.js:177

net::ERR_CONNECTION_REFUSED

Uncaught (in promise) Error: Network Error createError.js:16

*** at t.exports (createError.js:16)***

*** at XMLHttpRequest.d.onerror (xhr.js:84)***

my question is

Q. what is the problem ?

Q. did I configure something wrong?

Q. how can I fix it based on this architecture ?

please advise for me

thank you !
JavaScript: The problem is that the code works, but only for a second
Tags: javascript, localstorage, html, css
Published: 2021-05-28 01:16:01

The problem is that the code works, but only for a second! then immediately redirects to a page that supposed to be hidden! Since the code is long and in 3 files (index.html, app.js, style.css) I have pushed it to Github. This is a task list called "Forget it not", trying to make it a One-Page app with forms hidden with a class 'hide' defined CSS attribute as "display: none;". As I mentioned, it does work for a second but returns to a section that is supposed to be hidden. it removes the class from that section and puts it back on the "task" list, while the code is written on the contrary.
[Github Link:](https://github.com/bdarab/forgetItNot)
Howler
Published: 2021-05-28 01:08:59

I recently made a javascript application where I wanted an easy way to implement sounds.  I wanted to be able to use a "click" event to activate a sound.  I also wanted to be able to search for any kind of sound that I wanted. I didn't want to have to pick from a generic library of sounds.  

After a bit of googling I found Howler.js.  It looked like the exact thing I was looking for so I decided to go that route. 

<img width="100%" style="width:100%" src="https://media0.giphy.com/media/yhdKi9jOYoNSE/giphy.gif?cid=ecf05e475fwlgfi93oakgeio8z6ayiyzjt86g67dutczv87n&rid=giphy.gif&ct=g">

There were a few things that I liked about what Howler.js had to offer.  The first is that a sound can play on top of another sound, so if you had a game where there was a lot going on it would give you room to expand.  Also it gives you the option to play any audio clip you can find and download.  

To get howler working there are a few quick steps that you need to dd (this is if you are using npm)

1. In the directory you want to use howler 
     run: npm install holwer 

2. Make sure that you include howler in your script.  A quick google search of howler cdn will give you what you need for the src. Here is where I went for that.
 
https://cdnjs.com/libraries/howler

Link it in your script like this!

```js 
<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.1/howler.min.js"></script>
```

There are a few ways to create sounds at this point using howler. I think the easiest thing to do is to set a variable to the sound you want to make. In order to do this you need to have a sound file to pull from. 

You can use any sounds you want, but getting access to them is the part that could trip you up.  Don't worry though it is very easy.  

I created a new folder in my project called audio.  Then I found the sound that I wanted.  Since I was making a game I figured that anything that sounded like an old Super Mario game would be a safe choice.  So I went to this site. 
https://themushroomkingdom.net/media/smb/wav 
Downloaded a couple of sound clips and drug them to my audio folder. 

So now we are to the point where you will set your variable to a sound. All you need to know is the filepath to the sound clip and you should be good to go.  It will look something like this. 

```js 
let sound2 = new Howl({
  src: ['../audio/smb_bump.wav']  
});
```
This is not the only way to do this. If you want different file types you can make that happen as well, but this was pretty simple, and it worked.  

Now for the final implementation all you need to do is invoke the sound clip with the play().  Like this 

```js 
 sound2.play()
```


<img width="100%" style="width:100%" src="https://media1.giphy.com/media/5xtDarE6xDVfXhudrVK/giphy.gif?cid=ecf05e47yi8thhzd45mcwpbszkdttj3if6xbeewxqb8iaitp&rid=giphy.gif&ct=g">


There are other ways to make sounds clips in your project and there may be some easier ways. I thought howler was a good way to use something that was built for this.  It has more functionalities that you can check out if that is something you are interested in!
Exploring DEV.to API
Tags: javascript, todayilearned, webdev, api
Published: 2021-05-28 00:02:12

You often forget that APIs exist for most of the platforms you use. While some companies lock down their APIs to only provide very limited information, DEV.to goes the extra mile to provide an extremely robust API. Let’s go over what is available!

{% youtube SJtGzVoA5Uw %}

Link to Project: https://www.josephamaurer.com/Projects/DevAPI/RecentDevPosts.html 

Link to DEV API Documentation: https://docs.forem.com/api/ 


DEV’s API allows for lots of interesting functionality. In the video above, I go over a use case where you pull the latest 100 posts, and create bootstrap cards for each. In each card I display three buttons. The first is either active or disabled if the user has a twitter account. This is useful because I like to retweet articles and tag their creators. The second button is a link to the DEV post. Finally the third button opens the API response for the article.

While my example showed articles, there are lots of different things that the API can return to you. One of the more interesting functionality is the ability to post an article completely from the API. I have no idea why you would want to do that, but it could be useful. 

All in all, it’s cool to think that this functionality exists, even if you can’t find a practical use case for it. One of the more useful use cases might just be populating your recent articles from your blog to your website. 

Let me know what you would want to do with this API!
The reasons things don't scale
Tags: scale, teams
Published: 2021-06-01 09:19:09

---
title: The reasons things don't scale
published: true
date: 2021-05-28 00:00:00 UTC
tags: scale,teams
canonical_url: https://jhall.io/archive/2021/05/28/the-reasons-things-dont-scale/
---

Continuing on the theme of [diseconomies of scale](https://jhall.io/archive/2021/05/26/diseconomies-of-scale/), here are some reasons that things (particularly software development teams) don’t scale well:

- Communication overhead. The more people (or microservices, or nodes) in your system, the more communication overhead there is. There comes a time when the added per-unit communication overhead is greater than the potential benefit that unit can provide.
- Warm up time. It often takes months for a new team member to become a net-positive contributor. Even in the best of cases, it’s probably days. For nodes in a computing system, it’s often minutes or at least seconds.
- Indivisibility of work. Not all features can be shared across multiple devs. Not all compute tasks can be distributed across nodes. Famous example: 9 women can’t have a baby in 1 month.

For a much deeper look into these topics, if you haven’t already read it, [The Mythical Man-Month](https://amzn.to/2SB5ztA) should be reqiured reading for any serious software professional.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Day 0 (Beginner's Story) 
Published: 2021-05-27 23:55:24

So I came across this platform, post Hacktoberfest last year but did not explore and to be honest, I regret it. 

So anyways, I plan on pursuing the 100 days of Code challenge. This is day 0 so I am naturally in high spirits. Also, the coding contests for internships are going to start at my college in around 70 days.
Fingers crossed! 

Cheers! 
Dhruv
Convert decimal to hexadecimal
Published: 2021-05-01 10:10:26

Nowadays Javascript is not just limited to web development, many libraries are great for machine learning, deep learning, and IoT app development. For one of my recent projects, I had to create a decimal to hexadecimal converter. Honestly, I had no idea about such a converter. I did my research and spent my whole Sunday learning this.

For that reason, I’m sharing here code to convert decimal to hexadecimal so that you can use this code to create a converter.

Where did I use this converter?

I had to create a decimal to the hexadecimal translator for the machine learning project. My client wanted to enhance the security of the app so he encouraged me to convert the decimal numbers into the hexadecimal. And as I said above, I learned about all the numbering systems on Sunday and then built the tool.

What are decimal and hexadecimal numbers?

A decimal number is a base-10 number that consists of 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. You use this numbering system in the daily routine life and it is the easiest number to read.

Hexadecimal numbers are the advanced version of binary numbers. Hexadecimal numbers are base-16 numbers and humans cannot read these numbers easily. For that reason, my client wanted me to first develop a decimal to hexadecimal converter for security reasons.
Here, I’m sharing the code for the translation.
```Javascript
  function dectohex() {
    var x = document.getElementById("text_value").value;
var dectohexo = x.toString(16).toUpperCase ();
       
document.getElementById("ans").innerHTML = dectohexo;
                }
```
Above is the simple code for decimal to hexadecimal conversion. This code works for the 
students and for those who are working on a small project. However, it does not work for larger projects. This tool returns the correct answer for the numbers lesser than 11 characters. To get a correct answer for larger numbers you need to use a Javascript library called Bignumber.js. This library handles all the big number conversions.
Javascript code with the Bignumber library:
```Javascript
  function dectohex() {
    var x = document.getElementById("text_value").value;
        var xzc = new BigNumber(x, 10)
        var dectohexo = xzc.toString(16).toUpperCase ();
       
document.getElementById("ans").innerHTML = dectohexo;
                }
```
That’s it! Done! You have developed your [decimal to hexadecimal](https://binarytotext.net/decimal-to-hexadecimal/) converter in Javascript. You can just copy and paste the above code and use it to develop your converter. If you have developed such a converter with any other technique then do let us know by dropping a comment.
How to validate your headings in Ghost 🚩
Tags: writing, ghost, frontend, a11y
Published: 2021-06-18 00:21:43

---
title: How to validate your headings in Ghost 🚩
published: true
date: 2021-05-27 23:15:00 UTC
tags: writing, ghost, frontend, a11y
canonical_url: https://www.benjaminrancourt.ca/how-to-validate-your-headings-in-ghost
cover_image: https://www.benjaminrancourt.ca/images/how-to-validate-your-headings-in-ghost.jpg
---
While reviewing one of my last posts, I struggled a bit with its **headings**. This is easy when the posts have only two levels of headings, `h2` and `h3`, but if you want to go deeper, you have to rely on the heading shortcut (`Ctrl + H`) to switch from `h2` to `h6`.

Have I clicked enough on the shortcut? Should I do it again? It can be difficult to see in preview mode if you have the correct headings. The titles can be really spaced from one to the other. Or the styles of the headings could be quite similar to each other, like in the default [**Casper** theme](https://ghost.org/themes/casper/) (at least in the version that I currently have). 👻

Let's check an example where all the headings are side by side.

![](https://www.benjaminrancourt.ca/images/titles-unknown.jpg)<figcaption>An example of headings, from <code>h1</code> to <code>h6</code>.</figcaption>

Yeah, the `h3` and `h4` are pretty much the same and I would even say that `h4` looks bigger than `h3`! 😮 The only way to check if the semantic is correct is to look directly at the source code. Not very practical, right?

Fortunately, for people like me who use Ghost **as a backend** , CSS can offers a pretty straightforward solution to make sure you have structured your headings correctly. Simply paste the following code in your   **Settings** → **Code injection** section, and you are good to go!

```html
<style>
  h1::before { content: "h1. "; color: blue; }
  h2::before { content: "h2. "; color: blue; }
  h3::before { content: "h3. "; color: blue; }
  h4::before { content: "h4. "; color: blue; }
  h5::before { content: "h5. "; color: blue; }
  h6::before { content: "h6. "; color: blue; }
</style>
```
<figcaption>The magical code to easily check your headings.</figcaption>

So, the previous code will add the corresponding HTML tag to all headings and let you check if you need to enable the heading shortcut once more. 😉

![](https://www.benjaminrancourt.ca/images/titles-css-blue.jpg)<figcaption>The end result, where each heading is preceded by its HTML tag.</figcaption>

And yeah, another solution could be to just write my posts directly in **Markdown** , where the headings could not be more self-explanatory. 😋

```markdown
## Title 2
### Title 3
#### Title 4
##### Title 5
###### Title 6
```
<figcaption>Example of headings in Markdown.</figcaption>
Platform.sh VueJS Template &  Gridsome Template
Published: 2021-05-27 22:15:48

## VueJS template YAML files for platform.sh.

You're looking to deploy your VueJS application to  [platform.sh](https://platform.sh/)
But can't find a good template that you can use with VueJS or Gridsome ?

I was looking for a good template for my Gridsome application or just a good example of a VueJS application YAML files for platform.sh. 

The documentation has a couple good  templates for other frameworks but a specific one for VueJS is missing.

The project that use is the fallowing:

GitHub: [Mendoza Roofing](https://github.com/leamsigc/Mendoza-Roofing-Wilmington)

Live site:
 [Mendoza roofing Wilmington NC](https://roofingmendoza.com/) ⇐ The hosting provider currently is Netlify.

##### Configuration files start here 

For the `.platform.app.yaml`:
```yaml
# .platform.app.yaml

# The name of this application, which must be unique within a project.
name: "vuejs"

# The type key specifies the language and version for your application.
type: "nodejs:14"

build:
  flavor: none

# Build dependencies.
dependencies:
  nodejs:
    "@gridsome/cli": "*"

# The hooks that will be triggered when the package is deployed.
hooks:
  # Build hooks can modify the application files on disk but not access any services like databases.
  build: |
    npm i
    gridsome build
# The size of the persistent disk of the application (in MB).
disk: 5120

# The configuration of the application when it is exposed to the web.
web:
  locations:
    "/":
      # The public directory of the application relative to its root.
      root: "dist" #The build directory if you have a custom output directory then you should change it
      index: ["index.html"]
      scripts: false
      allow: true

```

#### Side note: The other files that we need will be located at the `.platform` folder in the root of the project.


For the `router.yaml` :

```yaml
# Each route describes how an incoming URL is going to be processed by Platform.sh.
"https://www.{default}/":
  type: upstream
  upstream: "vuejs:http"
#Remember the the name in the .platform.app.yaml  should be the same for the name before the :http

"https://{default}/":
  type: redirect
  to: "https://www.{default}/"

```


For the `services.yaml`:

This is an empty file, because I don't use a database or any service.


Platform.sh deployed site link:
 
[platform-deployed-site](https://www.master-7rqtwti-loooqht3yhtwo.us-3.platformsh.site/)


{% gist https://gist.github.com/leamsigc/68d3f891d9298c35de273caa2b21e453 %}