teleren/devto huggingface dataset:
Array Destructuring with ES6
Tags: javascript, arrays, destructing, webdev
Published: 2020-10-02 22:06:45

One of my favorite side effects of tech blogging, aside from hopefully writing content that other people find useful, is that it helps me to solidify concepts. This week I am focusing on array destructuring with ES6. You can also use destructuring with Objects, but I am going to save that for a future post.

So what exactly is array destructuring? In a nutshell, array destructuring is taking the individual elements inside of an array, and assigning them to individual variables. So, a basic example might look like this:
```
let letters = ["a", "b", "c", "d", "e"];
let [one, two] = letters;

console.log(one); // "a"
console.log(two); // "b"
```
Here we have declared a variable, letters, and assigned its value to an array of strings containing the first five letters of the alphabet. Next we have declared another variable, which is an array containing the variables one and two. We then set those values equal to variable letters, whose value is our array of strings. What this does is allow us to set the variables one, and two equal to the first two elements in our letters array, which we have verified with our two console.log() statements. Keep in mind that in JavaScript we are not allowed to use integers as variable names, so this code would have thrown a syntax error: 
```
let letters = ["a", "b", "c", "d", "e"];
let [1, 2] = letters;

console.log(one); // "a"
console.log(two); // "b"
```
Another powerful feature of array destructuring is the ability to use Rest syntax. If we take our previous code example and add another variable called three preceded by Rest syntax, which looks like this '...' we get the following result:
```
let letters = ["a", "b", "c", "d", "e"];
let [one, two, ...three] = letters;

console.log(one); // "a"
console.log(two); // "b"
console.log(three) // ["c", "d", "e"]
```
Using Rest syntax allows us to take the values that come after one, and two and spread, or copy, those values into a new array stored in the variable three. 

Array destructuring is also useful if you want to swap out the values of variables:
```
let a = "cat"; 
let b = "dog";

[a, b] = [b, a];

console.log(a); // "dog"
console.log(b); // "cat"
```
Lastly, you can also use destructuring with functions that return arrays of data:
```
const retArray = () => {
    return ["a", "b", "c", "d", "e"];
}

let [one, two] = retArray();

console.log(one); // "a"
console.log(two); // "b"
```
As you can see, array destructuring is a powerful feature of ES6. It is especially useful when working with JavaScript frameworks like React and Vue. Stay tuned for my next post where I will explain how to use destructuring with JavaScript Objects.

Until then,
Happy Coding!
Getting back to Dev.to after two years. 
Published: 2020-10-02 22:02:39

---
title: Getting back to Dev.to after two years. 
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
My last post here was two years back. A lot have changed since then. I will be posting more regularly here from now on.
My #100DOC - Day 37
Tags: 100daysofcode, challenge, log
Published: 2020-10-02 22:00:23

### Day 37: October 02, 2020

#### **Today's Progress**: 
1. **[Redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (1h):<br>I finished implementing the scrollspy. In fact, it took me a while and I had to ask to my friends at [Stack Overflow](https://stackoverflow.com/questions/64167559/unable-to-implement-a-scrollspy-with-bootstrap-4-why) to find out what was going on, because I just didn't see it. I also applied a smooth effect to the scroll.
    
#### **What I learned**: 
* Make a scrollspy with Bootstrap.
* The art of debugging.
* Ask for help when you don't see it.

#### **Total time**:
1h.
Day 230: Workinonit
Tags: hiphop, code, coding, lifelongdev
Published: 2020-10-02 21:59:45

_liner notes_:
- Professional : Had a meeting with my team. It was good to see everyone. Ran into an issue with including a Web Component into a Vue 3 application when using the Composition API. The issue comes in when the template is being compiled. I'm trying to figure out how to get the isCustomElement in a config file, but sites like CodePen, StackBlitz and Codesandbox don't allow for editing the config files of the Vue application. I'm doing this for a blog post and want to be able to embed the application into the post. We'll see. I'll be workinonit a little this weekend.

- Personal : Last night, I worked on my upcoming blog post. I think that was it. haha

![The cliffs of the shores of County Clare, Ireland](https://dev-to-uploads.s3.amazonaws.com/i/wf8m7nuqs9xk6l4tlpqy.png)

Going to finish up some of the pre-show work for tomorrow. I want to get that done early. Maybe watch the new episode of "The Boys" and work on my blog post.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 5nO7IA1DeeI %}
My #100DOC - Day 36
Tags: 100daysofcode, challenge, log
Published: 2020-10-02 21:51:53

### Day 36: October 01, 2020

#### **Today's Progress**: 
1. **[Redesign of my portfolio](https://github.com/pablohs1986/pablohs1986.github.io)** (1h):<br>I continued implementing the scrollspy. I'm having trouble doing it.
    
#### **What I learned**: 
* Make a scrollspy with Bootstrap.
* The art of debugging.

#### **Total time**:
1h.
___
GitHub Codespaces
Tags: github, codespaces, cloud, coding
Published: 2020-10-02 21:30:08

Hello, fellow devs... I recently signed up for GitHub Codespaces and today I got the first beta experience of it. You know, I'm like a kid that got a new toy.

At the moment, you can only create 2 codespaces as a beta tester. You can now code on almost everywhere without having configuring on different workstations. This new GitHub feature is very promising it reminds me of [cloud9.io](https://aws.amazon.com/cloud9/) a cloud IDE and now owned by AWS.

They have almost the same features but VSCode is even better on the cloud. It gives ease to all open-source developers who want to contribute instantly to a repository without having extra steps to set up locally.

To learn more about the features of Codespaces please go to the link below. Also, sign up for early access to the beta version of it.

[https://github.com/features/codespaces](https://github.com/features/codespaces)

Peace yow!
How to Use Free Resources as a Shortcut For Your Job (or, How I used the Wayback Machine to Fix Frontend Code)
Tags: css, waybackmachine, webdev
Published: 2020-10-02 21:19:52

## The Situation
As a web developer at NYU Libraries, I get to participate in all kinds of projects. I manage well established open source repositories, maintain our apps, create tools for better day-to-day workflows, and fix all kinds of little bugs (while accidentally creating some along the way). Recently, there was a small issue that required me to investigate why our footer didn't look like how it was supposed to. 

![libraries footer with bullets](https://dev-to-uploads.s3.amazonaws.com/i/k8940wd69xkz53g4908n.png)

Mind you, I am relatively new to my position, and I usually don't pay attention to footers in my day-to-day life. This got me thinking, how is this footer supposed to look like anyway? Likewise, no one really knew when this happened, so I didn't want to spend ~~minutes~~ **hours** looking through commits in a monolith repo I'm not very well aquainted with. So I revisited one of my favorite free online resources: [The Wayback Machine!](https://archive.org/web/)

### The Wayback Machine
Managed by the non-profit Internet Archive, the Wayback Machine is an essential tool for anyone who is interested in the digital curation of the web. It's an massive catalogue of **billions** of web pages, with frequent stashing of updates for a fully interactive (and reliable) experience. And honestly, sometimes it's kind of fun to scroll back and see what web pages looked like in 2010.

![Screenshot of Youtube as it looked in 2010. It's a very basic layout, white background with a 'Recommended for you' section](https://dev-to-uploads.s3.amazonaws.com/i/8uxt0o5zgkm3i1qmqxl4.png)
Spoiler alert, they did not look great.

### The Solution
Regardless, I went to the website that had the issues and went back a little bit too far. Which, fun for personal reasons but not exactly what I needed. After a bit of tinkering in the dates, voilà! Right what I needed.

![the same footer as before, but now it does not contain bullet points](https://dev-to-uploads.s3.amazonaws.com/i/rf8fj60h80piooyajfx3.png)

Apparently, the bullet points are a no-go and there should be some kind of dotted line in between each list item. Thankfully, since it is fully interactive, I can actually see exactly what CSS styles was missing in ours. 

![Web developer tools visible, displaying the CSS required to match the footer](https://dev-to-uploads.s3.amazonaws.com/i/5gatfykhnu693pjw5qsn.png)

So, now... why wasn't that appearing in our version? And then I saw the key: our footer `<ul>` didn't have the `.list` class anymore. So in the end, it was an easy fix. And I could go on the rest of my day, and celebrate my catch with a hot lavender tea.


### Conclusion

Work smarter, not harder. Or something like that.


### ...OK, real conclusion
Use free resources! By using these online archives, you participate in one of the biggest communities of free information available in current times. And, you get the added bonus of getting distracted with uncool websites from the mid-2000s.
Quick guide for TailwindCSS
Published: 2020-10-02 21:10:24

First here is view of the type of project we want to create:
https://stackblitz.com/edit/js-gz1gft?file=index.html

Start by creating a new folder for your project with any name you want in my case I'm going to use tailwindcss-sample
```shell
$ mkdir tailwindcss-sample
$ cd tailwindcss-sample
```
Then start by creating a package.json file with the -y flag
```shell
$ npm init -y
```
Install the tailwindcss using npm
Then start by creating a package.json file with the -y flag
```shell
$ npm i tailwindcss
```
Create a src folder and a new css file inside with any name to add the tailwindcss components, in my case I'm going to use style.css and import this three lines.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Create the tailwind.config.js file in the app route
```shell
npx tailwindcss init
```
This will create a file like this
```javascript
// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```
Create a dist folder and two new files, one html file and one css file, in my case I'm going to use index.html and style.css, the folder structure will look like this.
```
tailwindcss-sample
├── dist
│   ├── index.html
│   └── style.css
├── node_modules
├── src
│   └── style.css
├── package-lock.json
├── package.json
└── tailwind.config.js

```
Change the package.json script to run the build css 
```json
{
  ...
  "scripts": {
    "build:css": "tailwind build src/style.css -o dist/style.css"
  },
  ...
}
```
And for last step run the command to build the css components
```shell
npm run build:css
```
Now we can start using tailwind into our index.html file to test different features. Note: Each time you make a change in the style.css need to run the command to build it again to refresh in the dist folder
How Do You Make That? - Javascript Random Function
Tags: javascript, tutorial, beginners, math
Published: 2020-10-02 20:56:34

For quite a while now, if I wanted to generate a random number between two other numbers, I'd use the functions written in the [`Math.random() MDN docs`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)

But I never really took the time to understand them.  How do they work?  I'll explain that, in this article.

# 1. `Math.random()`, `Math.floor()`, and `Math.ceil()`

`Math.random()` is simple!  It outputs a random decimal number between 0 to 1.  
`Math.floor()` and `ceil()` are a little different - they always round down and up, respectively.   For example:

```
var firstnum = 1.6
Math.floor(firstnum)
>>> 1
var secondnum = 1.2
Math.ceil(secondnum)
>>> 2
```

# 2. Random Decimals
If you try using `Math.random` on sites like [jsconsole](jsconsole.com), you'll see it always puts out decimals.  
![Screen Shot 2020-10-02 at 1.34.21 PM](https://dev-to-uploads.s3.amazonaws.com/i/sb9zu3yisvr7pttio4li.png)

So if whatever you're doing is ok with decimals, you can use a function like this:
```
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
```

How does it work?  
Well first, we need the `return` statement - otherwise the function doesn't do anything.
Next, you have `Math.random() * (max - min)`.  This multiplies the difference between your two numbers by the decimal less than 1 that `Math.random()` produces.  For example, if your range is 1 to 10, than the difference is nine - multiply this by a number less than 1, and it becomes less than nine.  

To ensure that you don't get a number out of the range (say, 9 * 0.0007 [which would produce 0.0063 which is less than 1!]), it is then added to the minimum number (in this case, 1).

# 3. Random Integers

Ah, the function that I have copy and pasted the most.
```
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
}
```

This one's a little more complicated - it returns random whole numbers, or integers.  The helpful people at MDN have added a comment saying "The maximum is exclusive and the minimum is inclusive".  How does this work?  Why use Math.ceil and floor?

Imagine for a moment that you are using the function, and put in 1.2 as the minimum, and 10.6 for the maximum.  What kind of numbers would you expect to come out of this function?  Any number from 2 to 10.  If you were to simply use `Math.round()` on the minimum and maximum, your bounds would become 1 to 11 - which are too big! 

Lastly, we again use `Math.floor` instead of `Math.round` or `ceil`- now that the bounds are from 2 to 10, using Math.round or ceil could result in a 2 being unfairly excluded from the results, or the number 11 being returned. 

Helpful?  Interesting?  Too simple?  Well, it's for beginners 😉.  Leave a comment!
What is your favorite local dev server?
Published: 2020-10-02 20:52:56

Hi all! I found myself creating a prototype project locally in order to test out some javascript-ie things this week. Before I knew it I had ran ```npm init``` and found myself down the rabbit hole of trying to configure webpack for JS imports and looking for a simple webserver. I found these:
[simple-autoreload-server](https://www.npmjs.com/package/simple-autoreload-server)
[lite-server](https://www.npmjs.com/package/lite-server)
[webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server)

I wanted to reach out and ask the community what their favorite tools are for working with a project that doesn't use angular-cli, create-react-app or other similar tools.
Emscripten Resolve Header Problem
Tags: c, webassembly, help
Published: 2020-10-02 20:45:53

## Background
I am trying to build Lua 5.4.0 for WASM running in node.js using emscripten.

In the past I have successfully done this with the old emacripten backend and c++ using a Lua wrapper (sol) but I didn't really learn anything with this abstraction, also I would prefer to write C.

## Problem
For some reason I have had little success getting the headers to resolve. Here are the compiler flags in use (ran from shell in JavaScript).

Now I can compile a basic hello world but adding the headers, emacripten complains of unknown symbol `luaL_newstate` 🤷‍♂️, I have a `liblua.a` built from Lua src, I have `-I` and `-L`.

Anything obvious standing out?
Ive been trying things for days and searching all over with limited success.

``` js
[
  '/Users/adam.crockett/Code/typescript/tidal-node/src/backend/c/main.c',
  '-o /Users/adam.crockett/Code/typescript/tidal-node/target/tidal-node-glue.js',
  '-fcolor-diagnostics',
  '-s WASM=1',
  '-s ENVIRONMENT=node',
  '-I/Users/adam.crockett/Code/typescript/tidal-node/ops/tmp/lua-5.4.0/src',
  '-L/Users/adam.crockett/Code/typescript/tidal-node/ops/tmp/lua-5.4.0/src',
  '-lliblua',
  `-s EXPORTED_RUNTIME_METHODS='["ccall","cwrap","UTF8ToString"]'`,
  `-s "EXPORTED_FUNCTIONS=['_main', '_do_string']"`
]
```

`main.c`
```c 
#include <stdio.h>
#include <string.h>

//#include <emscripten.h>
#include "lua.h" // wont resolve
#include "lauxlib.h" // wont resolve
#include "lualib.h" // wont resolve


int main()
{
    return 0;
}

int do_string(const int *script)
{
    lua_State *L = luaL_newstate();
    return 0;
}
```
Hacktoberfest 2020 - completed!
Published: 2020-10-02 20:45:39

I am participating in hacktoberfest for the second time, and it is amazing. I am also participating as a maintainer, and I have never seen so much activities on my projects.
Here are my 4 PR's:
![photo_2020-10-02_23-40-03](https://dev-to-uploads.s3.amazonaws.com/i/c584hwsbwcixsipbvgd2.jpg)
Once again I have contributed to opsdroid:
{% github opsdroid/opsdroid %}
It is a really amazing platform for creating chat bots - like dialogflow, but open source, and you can create a bot for many platforms with just one config file, and you can create custom skills.
I have learned about testing signals in python code
Also I have learned about datasette project, which I might explore more and use later on.
Also I found nuclear:
{% github ArkScript-lang/nuclear %}
It is pretty basic now, but I like the concept of a package manager, and I always wanted to create one-so I will either help this project or create my own :D Currently learning about creating lockfiles.
That's it! For sure it's not the end of hacktoberfest, as I will look into more repos, and I am of course welcoming contributions on my own repository:
{% github bitcartcc/bitcart %}
WSL, am I missing the point?
Tags: linux, webdev
Published: 2020-10-02 20:43:09

I recently got a new Windows laptop for my personal learning/side project stuff and dutifully setup WSL2 with ubuntu because that's what the internet wanted me to do. The process was relatively pain free but took around 2 hours and now I have a slightly more complicated way of doing all the things I could do before.

I am a frontend developer, I write in Vue and a little react, I want to experiment and learn but I can't for the life of me figure out what WSL is doing for me. 

I'd love to hear from you guys about what this technology can offer me as right now I'm a bit baffled
CshtmlComponent - Typed Slots
Tags: aspnetcore, csharp, webdev, dotnet
Published: 2020-10-02 20:40:41

[CshtmlComponent](https://cshtml-component.acmion.com) is a component framework, with an extensive feature set, for ASP.NET Core MVC and Razor Pages projects (not for Blazor). [See the GitHub repository of CshtmlComponent here](https://github.com/Acmion/CshtmlComponent).

## CshtmlComponent Named Slots

CshtmlComponent already supports the usage of named slots, but what about typed slots? This post will show how this can be achieved. This is not an extensive tutorial, so you should already be somewhat familiar with CshtmlComponent.

The Razor markup for a CshtmlComponent that supports named slots could look something like this:

```
@using SampleRazorPagesApplication
@model ExampleComponent

<div class="example-component">
    <h1>
        @Model.Title
    </h1>

    <div class="example-component-action-bar">
        @Html.Raw(Model.NamedSlots["ActionBar"])
    </div>

    <div class="example-component-child-content">
        @Html.Raw(Model.ChildContent)
    </div>
</div>
```

## Initialization of a CshtmlComponent with Named Slots

The component could then be initialized with:
```
<ExampleComponent Title="Hello World">
    Some HTML that gets captured in Model.ChildContent.

    <CshtmlSlot Name="ActionBar">
        Some HTML that gets captured in Model.NamedSlots["ActionBar"].
    </CshtmlSlot>
</ExampleComponent>
```

Note that the slot name must be explicitly stated. This works, but is somewhat annoying and error prone. Luckily, fixing this is quite easy with typed slots.

## Typed Slot Definition

To define a typed slot one should create a class that inherits `CshtmlComponentSlot` and set the `Name` property in the constructor:
```
[HtmlTargetElement("ExampleComponentActionBar"]
    public class ExampleComponentActionBar: CshtmlComponentSlot
    {
        public ExampleComponentActionBar(IHtmlHelper htmlHelper) : base(htmlHelper)
        {
            Name = "ActionBar";
        }
    }
```

That's it. You may wish to, for example, store the value for `Name` as a static field for better maintainability, but this is not necessary. 

## Initialization of a CshtmlComponent with Typed Slots

With the typed slot definition, the example component can now be initialized like this: 
```
<ExampleComponent Title="Hello World">
    Some HTML that gets captured in Model.ChildContent.

    <ExampleComponentActionBar>
        Some HTML that gets captured in Model.NamedSlots["ActionBar"].
    </ExampleComponentActionBar>
</ExampleComponent>
```

Note that the name no longer has to be explicitly specified. 

## Conclusions

CshtmlComponent supports both named and typed slots. Typed slots bring many advantages, such as making maintenance and refactoring significantly easier. This feature is not yet documented in the actual CshtmlComponent documentation, but will be in the future. 

Please try out [CshtmlComponent](https://cshtml-component.acmion.com)! You just might find it useful for MVC and Razor Pages projects!
Thinking About Systems Thinking
Tags: 100daystooffload
Published: 2020-10-02 20:37:45

I spent a lot of time during the summer thinking about engineering practice and the various tools and techniques that are emerging. One of the most interesting that I was introduced to is Model-based Systems Engineering (MBSE), in particular its application to the concepts of Digital Threads/Digital Twins seen in some manufacturing fields.

I'm a bit prone to getting very excited about the prospect of using new tools in my work; part of this is just my fascination with the new but another part comes from frustration at the highly regulated, slow and old fashioned nature of my industry. The idea of being able to work in a smarter, more efficient way is always tantalising. Rather than just head off in a number of different directions I thought I should choose one area to start with and declare my intentions.

A few of the problems we face are:

* Late delivery of evidence
* Immovable delivery dates
* Fast-changing requirements or priorities

Whilst those problems are caused by external actors, the nature of our work means that any attempt to change them will be a bigger challenge than I want to take on. Instead, I am interested in focusing on what we can do internally to be more adaptive to the short timescales and changing priorities.

To start with, I will consider the following:

* Model or reverse engineer our existing system
* Compare the way we work and the type of work we do with other systems engineering examples

As well as that, I am interested in the requirements capture stage, since many problems can be traced to there. I'd therefore like to develop a more objective and robust system for capturing our customers' requirements than we have currently.

*I'm publishing this as part of 100 Days To Offload. You can join in yourself by visiting [https://100daystooffload.com.](https://100daystooffload.com)*