teleren/devto huggingface dataset:
Weekly web development resources #79
Tags: webdev, weekly
Published: 2021-06-23 06:00:12



______

##[nushell](https://github.com/nushell/nushell)
[![nushell](https://wweb.dev/weekly/content/79/nushell.jpg)](https://github.com/nushell/nushell)
A cross-platform, extendable shell to control your system with powerful pipelines.

______

##[Utopia](https://utopia.app/)
[![Utopia](https://wweb.dev/weekly/content/79/utopia.jpg)](https://utopia.app/)
A design and coding environment for React projects and components.

______

##[Super Agent](https://www.super-agent.com/)
[![Super Agent](https://wweb.dev/weekly/content/79/super-agent.jpg)](https://www.super-agent.com/)
A browser extension and web service that will auto-accept cookies for you.

______

##[ReScript](https://rescript-lang.org/)
[![ReScript](https://wweb.dev/weekly/content/79/rescript.jpg)](https://rescript-lang.org/)
A language that compiles into JavaScript.

______

##[DenoDB](https://deno.land/x/denodb)
[![DenoDB](https://wweb.dev/weekly/content/79/denodb.jpg)](https://deno.land/x/denodb)
A new library for using databases with Deno.

______

##[Vektors](https://www.vektors.pro/)
[![Vektors](https://wweb.dev/weekly/content/79/vektors.jpg)](https://www.vektors.pro/)
Illustrations, that are free for personal and commercial use.

______

##[Free Dev Stuff](https://freestuff.dev/)
[![Free Dev Stuff](https://wweb.dev/weekly/content/79/freedevstuff.jpg)](https://freestuff.dev/)
A list of free stuff or services for developer by developer to use

______

##[snk](https://github.com/Platane/snk)
[![snk](https://wweb.dev/weekly/content/79/snk.jpg)](https://github.com/Platane/snk)
Generate a snake game from a github user contributions graph.

______

##[Mega creator](https://icons8.com/mega-creator)
[![Mega creator](https://wweb.dev/weekly/content/79/mega-creator.jpg)](https://icons8.com/mega-creator)
An online creator for graphic design for social media graphic design.

______

##[Aspect Ratio In CSS](https://ishadeed.com/article/css-aspect-ratio/)
[![Aspect Ratio In CSS](https://wweb.dev/weekly/content/79/aspect-ratio.jpg)](https://ishadeed.com/article/css-aspect-ratio/)
An article on how to use the native aspect ratio in CSS.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Design a BMI Calculator using JavaScript
Tags: webdev, html, css, javascript
Published: 2021-06-23 05:45:51

The Body Mass Index (BMI) Calculator can be used to calculate BMI values based on their height and weight. BMI is a fairly reliable indicator of body fatness for most people.

Formula:

BMI = (weight) / (height * height)


Here's JavaScript code


```Javascript
 function BMI(weight, height) {
     return(weight / (height * height));
 }
 
 let bmiResult = BMI(57, 1.73736);
 console.log(bmiResult);
```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9p7te1392t8e8fjjt1v.jpeg)
Flutter Tutorial - Crypto App & DataTable With Syncfusion Flutter DataGrid
Published: 2021-06-23 05:45:34

Lets create a Crypto App that displays crypto currencies within the [Syncfusion Flutter Datagrid DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid "Syncfusion Flutter Datagrid DataTable").
Click here to Subscribe to Johannes Milke: https://www.youtube.com/JohannesMilke...

Syncfusion Website:https://www.syncfusion.com/
Syncfusion Flutter Components: https://www.syncfusion.com/flutter-widgets

{% youtube DkZC9o2fat4 %}
Today I have learned to Creat a Sound Board
Tags: html, css, javascript, webdev
Published: 2021-06-23 05:21:52


In this tutorial, I have learned how to make a sound board today. I have used Html, CSS , and  JavaScript.i used javascript to create the Sound Board effect.when buttons is clicked. It is very amazing. So check this code.


Click on this link to pick up these songs
https://github.com/ahtshamhassan1/sound-board

Here's  My HTML code
```html
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sound Board</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <audio id="applause" src="./sounds/applause.mp3"></audio>
  <audio id="boo" src="./sounds/boo.mp3"></audio>
  <audio id="gasp" src="./sounds/gasp.mp3"></audio>
  <audio id="tada" src="./sounds/tada.mp3"></audio>
  <audio id="victory" src="./sounds/victory.mp3"></audio>
  <audio id="wrong" src="./sounds/wrong.mp3"></audio>
  <div id="buttons"></div>

  <script src="./script.js"></script>
</body>

</html>
```
Here's My CSS Code
```css
@import url("https://fonts.googleapis.com/css?family=Ubuntu&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(205, 223, 100);
  font-family: "Ubuntu", sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}
.btn {
  background-color: rgb(230, 24, 151);
  border-radius: 5px;
  border: none;
  color: #fff;
  margin: 1rem;
  padding: 1.5rem 3rem;
  font-size: 1.2rem;
  font-family: inherit;
  cursor: pointer;
}

.btn:hover {
  opacity: 0.9;
}

.btn:focus {
  outline: none;
}
```
Here's My JavaScript code

```javascript


const sounds = ["applause", "boo", "gasp", "tada", "victory", "wrong"];

sounds.forEach((sound) => {
  const btn = document.createElement("button");
  btn.classList.add("btn");

  btn.innerText = sound;

  btn.addEventListener("click", () => {
    stopSongs();

    document.getElementById(sound).play();
  });
  document.getElementById("buttons").appendChild(btn);
});

function stopSongs() {
  sounds.forEach((sound) => {
    const song = document.getElementById(sound);

    song.pause();
    song.currentTime = 0;
  });
}
```

Here's output on Code pen lets see..

{%codepen https://codepen.io/ahtshamajus4772/pen/jOBoQdm %}
HTML/JS File loads
Published: 2021-06-23 05:19:27

[HackReactor W2D2]
Given two files, an init.js and an HTML file - we were supposed to correctly line up how the files would be loaded/executed. 

I had 24 failed attempts lol. 

The browser should begin by loading up the HTML file. Then looking at the next couple of lines in the <head> section of the file, we would load the 'styles.css', a jQuery CDN, and then two local js files (which I believe are also executed at the same time they are loaded). 

Then looking in the <body>, we notice there is an 'init.js' file in which a jQuery .ready() function is defined. After doing some research, my understanding is that all of the code inside the .ready() is loaded before any of the elements on the HTML file are loaded. Then we would finish executing that and now render any remaining HTML elements. 

And then once an action is handled on the page, it would invoke the code inside the 'init.js' file following whatever code lied inside. But I guess there is some flaw with how I'm understanding how the computer would load these files in. I've yet to discover how it runs, but I will (hopefully) understand it soon.
8 Best and FREE Ebooks For Beginners to learn MachineLearning and Data Science
Tags: machinelearning, books, beginners, codenewbie
Published: 2021-06-23 04:46:05

 > this article is generated using (give a ⭐) 
 {% github Manitej66/twlog %} 
 {% twitter 1407554471467503617 %}
{% twitter 1407554473182982151 %}
{% twitter 1407554478165807108 %}
{% twitter 1407554483773603848 %}
{% twitter 1407554485996593154 %}
{% twitter 1407554488211181569 %}
{% twitter 1407554493626011651 %}
Excel Automation in Python, Java, C#, Node.js, PHP and Android
Tags: node, csharp, python, android
Published: 2021-06-23 04:34:46

Excel automation has emerged as a powerful solution in various business use cases. Automated generation of data and Excel spreadsheets have been adopted in various domains. In this post, I am just listing a few useful blog posts that cover Excel automation and provide basic as well as advanced knowledge of how to create Excel files using popular programming languages such as Python, Java, C#, Node.js and PHP. Here we go:
* [Create Excel Files using Java](https://blog.aspose.com/2020/10/13/create-excel-xlsx-xls-using-java-without-ms-office/)
* [Create MS Excel Files using C#](https://blog.aspose.com/2020/01/21/create-excel-xls-xlsx-programmatically-in-csharp-net/)
* [Create Excel Files using Python](https://blog.aspose.com/2020/08/19/create-excel-xls-xlsx-using-python-excel-api/)
* [Create Excel Files in Node.js Applications](https://blog.aspose.com/2020/08/05/create-excel-files-in-node.js/)
* [Create Excel Files using PHP](https://blog.aspose.com/2021/06/11/create-excel-files-from-scratch-using-php/)
* [Create Excel Files in Android Programmatically](https://blog.aspose.com/2021/06/18/create-excel-file-in-android-programmatically/)
* [Add Watermark to Excel in Python](https://blog.aspose.com/2021/05/07/add-watermark-to-excel-worksheets-in-python/ "Permalink to ")
* [Add Comments in Excel using Python](https://blog.aspose.com/2021/06/15/add-comments-in-excel-worksheets-using-python/ "Permalink to ")
* [Create Word Documents in Python](https://blog.aspose.com/2021/10/28/create-word-documents-using-python/)

Cheers!
JavaScript Interview Question #49: Add a new array element by index
Tags: beginners, codenewbie, webdev, javascript
Published: 2021-06-23 03:55:04

![coderslang javascript interview question #49](https://learn.coderslang.com/js-test-49.png)

Will the length of the JS array change? What’s the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

All JavaScript arrays have the `push` function. It’s used to add new elements to the array:

```js
const arr = [ 1, 2 ];

arr.push(3);   // [ 1, 2, 3]
arr.push(500); // [ 1, 2, 3, 500]
```

You can also use an array index to read a certain element or modify it:

```js
const arr = [ 1, 2 ];

arr[0] = 123;

console.log(arr); // [ 123, 2]
```

But what if the length of an array equals 4, and we try to "modify" the sixth element?

JavaScript in this case is very liberal and allows us to shoot our own foot. The new element will be added into the array and the length will change.

But there’s a surprise! Take a look:

Same code with additional logging:

```js
const arr = [ 1, 2, 3, 4 ];
arr[5] = 'Hello, world!';

console.log(arr); // [ 1, 2, 3, 4, <1 empty item>, 'Hello, world!' ]
console.log(arr.length); // 6
```

---

**ANSWER**: The length of the array will change, and the number `6` will be displayed on the screen.

[Learn Full-Stack JavaScript](https://js.coderslang.com)
UI Dev Newsletter #62
Tags: html, css, javascript, a11y
Published: 2021-06-23 03:54:56

- [When CSS Isn’t Enough: JavaScript Requirements For Accessible Components](https://bit.ly/2UlXaLG)
Stephanie Eckles explains why JavaScript is necessary to accomplish focus management, respond to keyboard events, and toggle ARIA attributes.


- [Using the `outline` Property as a Collapsable Border](https://bit.ly/2TT2TbK)
Carter Li describes how the ‘outline’ property is automatically collapsed and how animating it doesn’t trigger layouts.


- [Giving a damn about accessibility](https://bit.ly/3j0NeBH)
Fabricio Teixeira and Sheri Byrne-Haber share a candid and practical accessibility handbook for designers.


- [Chrome vs Brave: How To Use Ethical Design To Win Customers](https://bit.ly/3iV3wMf)
Dan Benoni and Louis-Xavier Lavallee show how Brave browser uses ethical design in its onboarding and user retention strategy as a competitive advantage.


- [Remote Repositories](https://bit.ly/3xFFPvH)
VS Code introduces a new extension that enables working with source code repositories from GitHub quickly and safely inside VS Code without cloning it to your computer.


- [5 Amazing API For Your Project](https://bit.ly/3gNWy8Z)
Nikhil Bobade shares 5 APIs to use on your next project.


- [7 Cheat sheet website for Web Developers](https://bit.ly/3xBduX6)
Insha Ramin shares some helpful free guides to HTML, CSS, API, React, and many more.


- [Hover.css](https://bit.ly/3xrB0G6)
Ian Lunn writes and shares a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images, and more.



Happy coding!

[Subscribe to the newsletter here!](https://bit.ly/34155z3)
Node: O guia do mochileiro das galáxias
Tags: node, javascript, iniciante, guiadeestudos
Published: 2021-06-23 03:54:31

Atualmente Node é uma runtime muito usada nos back-ends, também possuindo uma curva de aprendizado relativamente fácil, sendo assim gostaria de ajudar quem quer começar em NodeJS ou até mesmo Javascript, pois estão diretamente ligados!
#Udemy
#Javascript Ninja
[Javascript Ninja](https://www.udemy.com/share/101DXqB0MaeF1RRnQ=/)
#Curso de Javascript e Typescript do básico ao avançado
[Curso de Javascript e Typescript do básico ao avançado
](https://www.udemy.com/share/1026x8B0MaeF1RRnQ=/)
#Formação Nodejs
[Formação Nodejs](https://www.udemy.com/share/101VREB0MaeF1RRnQ=/)
#Origamid
[Javascript Completo ES6+](https://www.origamid.com/curso/javascript-completo-es6/)
#JS Básico e JQuery
[JavaScript e jQuery](https://www.origamid.com/curso/javascript-e-jquery/)
#Node.js para Iniciantes 
[Node para Iniciantes](https://erickwendel.teachable.com/p/node-js-para-iniciantes-nodebr?origin=CursoErickWendel)
#Fundamentos do Javascript
[Fundamentos JS](https://conteudo.erickwendel.com.br/fundamentos-js)
#Nodejs Masterclass
Não consegui encontrar um link para esse curso, mas é do site da Pirple. Aborda Nodejs sem frameworks!
Claro, também temos a Rocketseat!!
[Rocketseat](https://app.rocketseat.com.br/discover)
Possuindo a maratona Discover e a trilha Discover que abordam conteúdos básicos, também com Node e um pouco de JS.
Também há a trilha Ignite mas essa é mais avançada, caso seja do seu interesse topar o desafio da NLW, que também tem a trilha do Node, inscreva-se =D
[NLW](https://nextlevelweek.com/inscricao/6)
Customize Events Using Templates in Blazor Scheduler
Tags: blazor, scheduler, webdev, calendar
Published: 2021-06-23 03:38:24

Learn how easily you can customize events using templates in Syncfusion’s [Blazor scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Blazor scheduler").

To find out how to add a basic [Blazor scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "Blazor scheduler") to your Blazor application, watch: 

Add a Blazor Scheduler to the Blazor Server App Using VS Code
https://bit.ly/3uPalCi

Bind Appointment Data to the Blazor Scheduler [Getting Started - Part 2]
https://bit.ly/3yRGXxv

In this video, you will learn how to customize [scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler "scheduler") appointments generically for all views. You will also learn how to set different appointment customizations for each view and how to customize events with complex designs. 

Explore tutorial video: https://bit.ly/2SBlgld
{% youtube 8kBXcBjL12A %}
#100DaysOfSwift: Day 7 
Tags: ios, beginners, swift
Published: 2021-06-23 02:49:37

Today, I covered the second part of closures. I think its cool. Can I write it on my own? - No. Can I read the code to see if its valid? - Yes. I was doing great until I got to returning closures from functions. 

When I read that this is the beginning syntax : 

func travel() -> (String) -> Void 

I understood that the first arrow specifies the functions return value and the second arrow specifies the closures return value. So, I read it as the function has to return a string and the closure will return nothing. 

I came across this test question: This code is valid in Swift - true or false?

func paintingMaker(medium: String) -> (String) -> Void {
if medium == "watercolor" {
      return {
           print("I'm going to paint some flowers.")
      }
} else {
      return {
           print("I'm going to paint a landscape.")
      }
   }
}

let maker = paintingMaker (medium: "watercolor")
maker() 

Sorry about the format. 

It was false and the reason given was : paintingMaker() says it will return a closure that accepts a string and returns nothing, but the closure it returns accepts no parameters. 

That's when I realized that its read as the function value is a string and the closure value will accept it but will return nothing. Right?

Until tomorrow!
Lumino - Secure Multi-Party Computation Ceremony
Tags: beginners, privacy, security, opensource
Published: 2021-06-23 02:49:29


The PlatON Secure Multiparty Computing Ceremony Lumino is launched! The 60-day ceremony invites cryptography and blockchain geeks around the world to get deeply involved in building a privacy computing infrastructure!

The open source code and software can be downloaded at： https://github.com/PlatONnetwork/Lumino

Lumino ceremony homepage: 
https://lumino.latticex.foundation/home

Guidance for Lumino Contributors:
https://medium.com/platon-network/a-guidance-for-lumino-contributors-7c9eb201e097

## How to Participate:
Send an email to LatticeX Foundation at lumino@latticex.foundation In the email, please fill in the following information:

- Name (first name or nickname)
- Alaya Network Address
- Correspondence address (mailing address for gifts)
- Which computing group you would like to join (BN254 curve group or BLS12–381 curve group, or both.)
- Whether you would like to apply for the Google Cloud.

## More information
[Q&A | All about Lumino, the secure multi-party computation ceremony](https://medium.com/platon-network/q-a-all-about-lumino-the-secure-multi-party-computation-ceremony-174ef3a0c56e)

[Welcome to Join Lumino](https://medium.com/platon-network/welcome-to-join-lumino-65c9b8e49209)

>Welcome developers to PlatON
github.com/LatticeX-Foundation/dev-bounties..
Send an email developer@latticex.foundation to submit more ideas and suggestions
Coding Short: Using Spread and Destructuring in JavaScript
Tags: javascript, programming
Published: 2021-09-19 20:05:29

---
title: Coding Short: Using Spread and Destructuring in JavaScript
published: True
date: 2021-06-23 02:40:52 UTC
tags: JavaScript,Programming
canonical_url: http://wildermuth.com/2021/06/23/Coding-Short-Using-Spread-and-Destructuring-in-JavaScript
---

I've been working on websites for a long time now. That means that I've been writing client-side JavaScript since the early days. As the ECMAScript standards have come out, I've found it difficult to keep up with every new feature that might help me write better JavaScript.

Two of the features that slipped through the cracks for me are the Spread and Destructuring features in JavaScript. These were introduced in ECMAScript 2016 and 2018. This has taught me to try and pay more attention as new features are added.

In a new Coding Short video, I show how these two features are somewhat related and can help you save quite a lot of time and code. Take a look:

https://www.youtube.com/YwpCrfnDjg0

If you like the video, don't forget to subscribe to be notified of new videos!

[Subscribe to my YouTube Channel](https://www.youtube.com/c/swildermuth)

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

 This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
 Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/XetquTpu5o8)
useState - React Hooks Series
Tags: react, javascript, beginners, reacthooks
Published: 2021-06-23 02:38:40

Welcome to the hooks series of react. In this series, I will go through the different hooks which were introduced in React 16.8.

**Series path**

- useState
- [useEffect](https://pratapsharma.io/use-effect-react-hook/)

## Why do we prefer functional component over class component in react

1. Functional component is much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
2. Functional component are written shorter and more straightforward, which makes it easier to develop, understand, and test.
3. With the introduction of **Hooks** in we are now able to manage state in functional components.

## What is Hooks?

Hooks were a new addition in `React 16.8`. They let you use state and other React features without writing a class. It means you don't need to use a class component to use a state.

## What is useState Hook?

useState is a Hook which allows you to have state variables in functional components.

1. First of all, let us import `useState` hook from react.

```jsx
import React, { useState } from "react";
```

2. How to use:

```jsx
const [name, setName] = useState("Pratap");
```

Let us try to understand what we just added:

- `name`: State Variable.
- `setName`: Function to change the state value.
- `useState`: useState react Hook.
- `Pratap`: State initial value.

## Example

```jsx
import React, { useState } from "react";

const Example = () => {
  const [name, setName] = useState("Pratap");

  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
};

export default Example;
```

Now, let us add a button which will change the state value from `Pratap` to `Prasar`.

```jsx
import React, { useState } from "react";

const Example = () => {
  const [name, setName] = useState("Pratap");

  const changeState = () => {
    //This will change the state value
    setName("Prasar");
  };

  return (
    <div>
      <h1>{name}</h1>
      <button onClick={changeState}>Change Name</button>
    </div>
  );
};

export default Example;
```

## Conclusion

In the next article in this React Hooks series, we will get to know and see about useEffect hooks.

Thank you for reading my first part in the React Hooks Series!

**Series path**

- useState
- [useEffect](https://pratapsharma.io/use-effect-react-hook/)

💌 If you'd like to receive more tutorials in your inbox, you can sign up for the newsletter [here](https://pratap.substack.com).
The n00b is learning...
Tags: beginners, computerscience, cybersecurity, motivation
Published: 2021-06-23 02:30:59

I've been gaining exposure over bug bounty programs, types of vulnerabilities, and I'm excited for my future progress. I'm n00b status but my goal is to level up as best as I can; not as fast as I think I need to be. 

I have started with validating old bugs and working with tools like Burp Suite. The process is a bit of a snail's pace but we all that somewhere, right? 

The process seemed daunting at first but I've made it easier by acknowledging my fear that I know nothing while finding comfort in not knowing everything. 

However, one thing I do know is I am fortunate to have discovered a field where I can flourish in my curiosity and cyber-philanthropy.
Wednesday Links - Edition 2021-04-28
Tags: java, jvm, database, saas
Published: 2021-04-28 18:28:15

JVM is a good choice if you worry about the Earth (30m read) 🤩
https://mobile.twitter.com/MIT_CSAIL/status/1385269509188096004

Consider use timestamp instead of boolean in your DB (3m read) 📆
https://changelog.com/posts/you-might-as-well-timestamp-it

GraalVM seems not to be production ready yet (30s read) 💩
https://twitter.com/bsideup/status/1386591251764482048

How SaaS can accelerate your business (18m read) 🤑
https://martinfowler.com/articles/platform-prerequisites.html

Have you known that you can compile your Java code to older bytecode version? Here you can check how it works (10m read) ⚙️
https://www.morling.dev/blog/the-anatomy-of-ct-sym-how-javac-ensures-backwards-compatibility/

How to use mocks with deep stubs? (9m read) 🤿
https://rieckpil.de/creating-deep-stubs-with-mockito-to-chain-method-stubbing/

Crypto miners are killing free CI (3m read) 🤬
https://layerci.com/blog/crypto-miners-are-killing-free-ci/

Do you need compile time reflection in Kotlin? Here you have (4m read) ⛑
https://github.com/JetBrains-Research/reflekt