teleren/devto huggingface dataset:
Visual live-coding proof-of-concept
Tags: livecoding, typescript, esnext, threejs
Published: 2021-02-27 05:21:12

This is a proof-of-concept for the API.

The goals for this tiny **visual live-coding** library is to:

1. Avoid bundlers.
2. Native JS module (dynamic "import").
3. No runtime overhead.

Here is the current experiment:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obnyp544qzb0uw8gq9bq.gif)

# Concepts

In order to achieve the **zero overhead** goal, to link between connected "blocks" in the render-tree, we need:

1. A context propagation phase going from top to bottom.
2. A linking phase returning children update functions from bottom to top.
3. A call or update phase with the result.

## Render tree

Here is the tree for this example:

```
[ main ]
[ anim.Loop ]
[ three.WebGLRenderer ]
[ three.Scene ]
[ three.Mesh -----------------------------------]
[ three.Rotation.x ] [ three.Rotation.y ] [ ... ]
[ time.Now ]         [ time.Now ]         [ ... ]
```

## three.Mesh

```ts
import { Context, Node } from './context'

// Context phase (1)
// The 'object3D' received here is the three.Scene
export function init({ THREE, object3D, cache, detached }: Context): Node {
  const mesh = cache('object3D', () => {
    const dim = 1
    const geometry = new THREE.BoxGeometry(dim, dim, dim)
    const material = new THREE.MeshPhongMaterial({
      color: 0x156289,
      emissive: 0x072534,
      side: THREE.DoubleSide,
      flatShading: true,
    })

    const mesh = new THREE.Mesh(geometry, material)
    object3D.add(mesh)
    return mesh
  })

  if (detached) {
    if (mesh.parent) {
      mesh.parent.remove(mesh)
    }
  }
  // Context update. Now 'object3D' for children is the
  // cube mesh.
  return { object3D: mesh }
}
```

## three.Rotate.x

```ts
import { Context, Node } from './context'

// Context phase (1)
// The 'object3D' object is the cube from three.Mesh
export function init({ object3D, detached }: Context): Node {
  const rotation = object3D.rotation
  rotation.x = 0
  if (detached) {
    return {}
  }

  return {
    // Link phase (2)
    // Arguments are the linked children.
    link({ number: rotateX }) {
      const x = rotateX || () => 0
      return {
        // Update phase (3)
        update() {
          rotation.x = x()
        },
      }
    },
  }
}
```

## time.Now

```ts
import { Context, Node } from './context'

// Context phase (1)
// Receives the "time" object from anim.Loop far up
// in the tree.
export function init({ time }: Context): Node {
  return {
    // Link phase (2)
    // Does not have children
    link: () => ({
      // Update phase (3)
      // Returns a number. This is the function called by
      // three.Rotation.x on update.
      number: () => time.now,
    }),
  }
}
```

Full code on github: https://github.com/tuist-org/tuist

If you read this far, please leave a comment :-)
Why you should use passive vulnerability scan on your website
Tags: security
Published: 2021-02-27 05:15:49

A passive vulnerability scan is a type of security scan in which the scanner sends no unusual request to the server. It is like a visitor browsing the site.

Let's review the benefits of a passive vulnerability scan.

## Pick Low Hanging Fruits
Browsing the website is the first thing hackers and security experts do when evaluating a website’s security. It is called a passive scan. Many problems can be identified just by looking into the source code of web pages. Issues like Vulnerable WordPress Version, Application Errors and, Password Over Unencrypted Channel are some of such problems. Intercepting requests and responses between the browser and the server can also reveal many weaknesses. For example, you can detect cookie vulnerabilities just by looking into the web server’s response headers.

## Less Impact
Passive scan comparing to active scan is less risky for the availability of the web application.
Since no unexpected request is sent to the web server, the server should be able to handle the scan like any other visitor.

> ⛔ In passive scans, all URLs are visited so, if there are links that perform actions like deleting accounts or files, passive scans can still be dangerous.

## Bypass Web Application Firewalls
Websites usually use WAFs to stop attacks in the production environment. Passive scans don't trigger any alarm on WAFs most of the time. So, the scan can proceed without getting blocked by the firewall.

## No Schedule Required
Active vulnerability scans usually put a lot of pressure on the web application. That's why they should be performed at a scheduled time to reduce the risk.
But passive tests can be conducted at any time, just like website visitors that can browse the site anytime. 

## Fast Security Scan
Browsing a website is fast, so does a passive scan. Passive scans are speedy because they send fewer requests to the webserver. Also, there is less chance of getting caught by WAF that might slow down the scan.

## How To Perform A Passive Scan?
You can use either a web browser like Google Chrome or an [automated web vulnerability scanner](https://www.thesmartscanner.com/) like SmartScanner. 

## Is Passive Scan Enough?
Definitely no! You should perform full comprehensive scans to have a thorough security test.
Passive scans are excellent for a quick evaluation of the website's security, especially when a full scan is not an option.
Eighth-week web dev
Tags: beginners, webdev
Published: 2021-02-27 05:09:59

Hi Everyone!! It has been 8 weeks since started doing web development. Apart from CSS, This week I have worked on small projects with simple HTML, CSS, and javascript.

1)Tic-Tac-Toe
https://github.com/Gauravrandheer/Tic-Tac-Toe-with-html-css-and-Js

2)Simple todo list
https://github.com/Gauravrandheer/To-do-list-with-simple-html-css-and-javascript

3)Digital clock
https://github.com/Gauravrandheer/Digital-clock-with-basic-html-css-and-javascript

I know these projects are simple, but I learned a lot from these projects. Please provide any feedback you have or you have done during this phase of your web dev, should I keep building small projects? or I should go for a bigger project. 


Thanks for reading!!
CSS aspect-ratio (with a fallback for old browsers)
Tags: codepen, css
Published: 2021-02-27 05:01:50

Example of a new CSS ``aspect-ratio`` property with a fallback for old browsers.

<a href="https://codepen.io/nikolab/pen/zYoRzbo">https://codepen.io/nikolab/pen/zYoRzbo</a>


{% codepen https://codepen.io/nikolab/pen/zYoRzbo %}


If you liked this article, consider buying me a <a href="https://www.buymeacoffee.com/nikolab">coffee</a>.
What's the point of a `readonly struct` if the types aren't implicitly made `readonly`?
Tags: csharp, dotnet, help
Published: 2021-02-27 04:40:02

What's the difference between a `struct` with ALL `readonly` fields, and a `readonly struct`, which requires you to explicitly state all fields as `readonly`?
This just seems like an extra KW for no reason, if it's not implicitly making things `readonly`.

<div alt="Thanks! Cheers!">
##<b><center><b>Thanks!<br/>Cheers!</b></center></b>
</div>
Desenvolvendo o Dekuve - Organização do projeto
Tags: linux, distro, dekuve, xfce
Published: 2021-02-27 03:53:22

A primeira e mais importante etapa no desenvolvimento de qualquer tipo de projeto, sem dúvidas é definir o objetivo e organizar as etapas necessárias pra isso.

No caso do **Dekuve**, o primeiro passo foi criar um projeto no [Quire](https://quire.io), para poder adicionar todas as tarefas, desde configurações visuais, lista de programas incluídos, artwork, etc.

![quire](https://d12y7sg0iam4lc.cloudfront.net/s/img/home/mobile-native-android-ios-apps_480.png)

Com base nisso, já foi possível ter uma visão mais clara de como partir pra próxima etapa, que é a criação de repositórios contendo os _assets_ necessários.

Vamos usar o **GitHub** pra hospedar os repositórios com os _assets_, que no caso são os temas GTK, temas de ícones, arquivos de configuração, artwork, etc.

Cada um em seu respectivo repositório dentro de uma 
[_organização_](github.com/dekuve), dessa forma eu posso criar os scripts de _build_ da ISO com comandos que vão baixar esse conteúdo durante o processo de compilação.

Outro motivo de termos escolhido o **GitHub**, é porque a imagem de instalação vai ser compilada no [_GitHub Actions_](https://github.com/features/actions), um dos pouquíssimos _CI/CD_ que suporta esse tipo de compilação, visto que outros _CI/CD_ que usam _Docker_ ou soluções similares, costumam não ter as permissões de usuário necessárias para uma compilação desse tipo, ao menos, dos que eu conheço(que não são poucos, já testei muitos mesmo, mais de 50, eu acho) só o _GitHub Actions_ e o _Azure Pipelines_ são compatíveis, ou soluções com agentes auto-hospedados.

Feita essa organização de tarefas e arquivos, estamos prontos pra começar a _codar_, vou usar o [_VSCodium_](https://vscodium.com) nessa etapa do processo.

![vscodium](https://www.funkyspacemonkey.com/wp-content/uploads/2020/10/vscodium-FSMdotCOM.png)

Até a próxima postagem!
Desenvolvendo o Dekuve - Apresentação
Tags: linux, distro, dekuve, xfce
Published: 2021-02-27 03:30:09

Olá, essa é a minha primeira postagem aqui no Dev.to, pretendo documentar todo o processo de desenvolvimento do [Dekuve](https://dekuve.top), uma distribuição Linux ucraniana, idealizada pelo meu amigo [Denys](https://twitter.com/denys33kulbii).

![dekuve](https://pbs.twimg.com/media/EoRDrQmXUAEqPVs.jpg)

O meu objetivo é compartilhar ideias relacionadas ao desenvolvimento de uma distribuição Linux, baseadas no meu conhecimento e na minha experiência nesse seguimento, já que é algo que eu faço há alguns anos.

Comecei no _StudioLinuxBR_, meu primeiro projeto de distribuição Linux, feito de forma bem amadora, mas foi um projeto que me trouxe bastante experiência e conhecimento, posteriormente eu mantive outros projetos, como o _AviX_ e depois o _RaDiX_.

Todos esses projetos eram focados em criação de conteúdo multimídia, mas durante o período que eu mantive o _RaDiX_, percebi que projetos desse tipo não faziam muito sentido, visto que, normalmente, se usa o computador pra vários tipos de aplicação, não só a criação de conteúdo multimídia.

Posteriormente, iniciei outro projeto, chamado _Unity XP_, mas esse não tinha grandes pretenções, o objetivo era só mostrar que ainda era possível usar o Unity no Ubuntu de forma satisfatória.

Também sou responsável pelo desenvolvimento de outros projetos como o [_Tiger OS_](https://mestresemlinux.com.br/wp/tigeros/), do Daigo e o _Excelência_ do [Nathan](https://twitter.com/LinuxUniverseBR).

Meu último projeto lançado é o [**MAD Linux**](https://madlinux.now.sh).

![madlinux](https://madlinux.now.sh/images/desktop.png)

Essa foi apenas uma introdução a meu respeito, pra poder explicar as minhas motivações e a minha experiência nesse seguimento.

Nas próximas postagens, vou falar sobre todas as etapas do processo, desde o conceito até o arquivo final de instalação da distro.

Conto com o feedback da comunidade, até a próxima postagem!
88. Merge Sorted Array (javascript solution)
Tags: javascript, algorithms
Published: 2021-02-27 03:26:18

###Description:
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array.

The number of elements initialized in nums1 and nums2 are m and n respectively. You may assume that nums1 has a size equal to m + n such that it has enough space to hold additional elements from nums2.


###Solution:
Time Complexity : O(n)
Space Complexity: O(1)

```javascript
// Two pointer solution
// Start by comparing the largest numbers between the two arrays and add to the end of nums1
var merge = function(nums1, m, nums2, n) {
 while (n) {
    if (nums1[m - 1] > nums2[n - 1]) {
      nums1[m + n - 1] = nums1[--m];  
    } else {
      nums1[m + n - 1] = nums2[--n];   
    }
  }
  return nums1;
};
```
(Javascript) My learning journey: Spread Operator and REST Pattern
Tags: javascript, beginners, tutorial
Published: 2021-02-27 03:15:19

---
title: (Javascript) My learning journey: Spread Operator and REST Pattern
description:
published: true
tags: javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik1c8mr2sz8zi3g466dq.jpg
series: (Javascript) My learning journey
---

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.

<h2>Spread Operator</h2>
```js
const names = ['Mike', 'Paul', 'John']
// use spread operator to unpack array
const newNames = ['Jack', ...names, 'David']
// ['Jack', 'Mike', 'Paul', 'John', 'David']

// use spread operator to destructing
// Spread operator can be use everywhere we will use value separated by comma
console.log(names) // ['Mike', 'Paul', 'John']
console.log(...names) // Mike Paul John

// Spread operator to copy array
const copyNames = [...names]

// Join 2 arrays
const numbers1 = [1, 2, 3]
const numbers2 = [4, 5, 6]
const allNumbers = [...numbers1, ...numbers2]

// Spread operator can be use on all iterables
// Iterables: array, strings maps and sets.
const name = 'Mike'
const letters = [...name] // ['M', 'i', 'k', 'e']

// Spread operator for function parameters
numbers = [1, 2, 3]
const sumNumbers = function(num1, num2, num3) {
  return num1 + num2 + num3 + num4
}
// regular way
sumNumbers(numbers[0], numbers[1], numbers[2])
// Spread operator
sumNumbers(...numbers)

// spread operator on object
const person = {
  firstName: 'Mike',
  lastName: 'Taylor'
}
// Copy object by value (instead of by reference)
const newPerson = {...person}

// Extend by value
const customer = {...person, creditLimit: 1000)
```

<h2>REST pattern</h2>
```js
// REST = same as spread but on the left side of = operator
const [num1, num2, ...others] = [1, 2, 3, 4, 5]
console.log(num1, num2, others) // 1, 2, [3, 4, 5]

// work the same with object
const person = {
  firstName: 'Mike',
  lastName: 'Taylor',
  age = 25
}

const { age, ...personName } = person
// personName will collect the "rest" of the not use properties
console.log(age, personName) // 25, { firstName: 'Mike', lastName: 'Taylor' }

// Use REST pattern to catch all functions parameters
const sumNumbers(...numbers) {
  console.log(numbers);
}

// REST pack all number into an array
sumNumbers(1, 2) // [1, 2]
sumNumbers(1, 2, 3) // [1, 2, 3]
sumNumbers(1, 2, 3, 4) // [1, 2, 3, 4]

// Spread destructing before REST function will restructing
const numbers = [1, 2, 3, 4]
sumNumbers(...numbers)

// Another REST use case. Take this example:
const displayText(mainText, option1, option2, option3) {
  console.log(mainText, option1, option2, option3)
}

// REST can be use to get all other parameters
const displayText(mainText, ...options) {
  console.log(mainText, options)
}
```
Redux in one line...
Tags: javascript, react, redux, programming
Published: 2021-02-27 03:06:26

What if I told you that you could replace Redux with one line of code?  What if I told you it was as easy as using useState and works just like it, except it's shared and does not depend on Redux, Context, or any other library?

What if I told you it was high performant and less than 3k?

```javascript
    import {useSync} from 'ez-sync-js'

    const [myVar, setVar] = useSync('myVar','optional initial value')
```

See the [demo](https://chadsteele.github.io/sync/)  
Click [more] when you get there and add as many React components as you like, they instantly share state.


But seriously, why are you still reading this post... git'r done

# npm
It's called ez-sync-js
[https://www.npmjs.com/package/ez-sync-js](https://www.npmjs.com/package/ez-sync-js)

# git
[https://github.com/chadsteele/sync](https://github.com/chadsteele/sync)
DPS911 Blog #7: The possible existence of unseen microbial life...AKA undiscovered Posts!
Tags: opensource
Published: 2021-02-27 02:14:15

Make a donation, save a post life everyday. They deserve love, even if nobody will ever read them.

`#PostLivesMatter`

In today's blog post, we're currently in the middle of midterm week. That means, that I cannot focus on this class alone as I am getting destroyed by linux and cross-platform at the moment. With this in mind, I mentioned last week that I would be getting my post microservice up for review, and I did just that! You can find it [here](https://github.com/Seneca-CDOT/telescope/pull/1838)

![OMG, YES!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g58s80il7yvnsmr5lj2s.gif)

Does it work? Of course not. It uses files that other services are currently using and should be in for review shortly. I can easily refactor those in and push another PR soon. Also, I'm very inexperienced with Docker, and the showcasing of it in today's review meeting shows that I still have alot to learn.

So, I'll be revising this throughout the weeks ahead and land this in the 1.8 release. I think as long as I can get the dependency services in, this one should be good to go.

In other news, I landed a fix that allows Telescope to process iframe tags that include spotify playlists. You can find that PR [here](https://github.com/Seneca-CDOT/telescope/pull/1817). This PR also updates the test cases so that they work as well. This was a rather quick but annoying fix since I had to actually read html tags which is something that I need to get better at. Also, reading the backend code was a nice change of pace.

![Relieved](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fw8nqpxw8nmu3hhrwbf8.gif)

Today marks the beginning of Reading Week though! A _beautiful time in life where we can to focus on stuff other than school for some time in our life_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtoe8nmfpotilfoo7ntm.gif)

I won't be slacking off though. Just, taking my sweet, sweet time. 

Next time, Telescope 1.8 releases! My big post microservice should hopefully land soon. You all are going to love it! Until then, stay tuned!
TIL Unity's URL Protocol
Tags: todayilearned, gamedev, unity3d, groan
Published: 2021-02-27 01:55:10

2021-02-26

To understand this problem, you need to understand that dogfooding is important. As I know it, dogfooding is when a company uses its product the way its customer would. I can say with some confidence that Unity Inc has never shipped a game to paying(?) gamers. They've made proof-of-concept demos/templates for paying(?) game developers but their product Unity is used by game developers to make products for gamers. Therefore, I believe [Unity Inc](https://finance.yahoo.com/quote/U) has yet to eat their own dog food.
***
Why does this matter? Obvious pains would be discovered and fixed. I'm certain that the developers of the Unity engine/editor don't use its Package Manager at the level where they would need to sift through dozens of owned assets (perhaps to find a 3d model) to use in an *actual* game production. 
![Screenshot of the Package Manager showing my assets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nygg9yy2u1ihr7gbk9pe.png) 
The Package Manager is useful no doubt but it's terrible for finding all the animation assets you own, for example. The better option is to use a web browser and take advantage of the Asset Store's **selling** features to organize/sort/filter your assets. Once you find what you need, you can use the "Open in Unity" functionality to pull it into the editor.
![Open in Unity button on the website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfp0m5mhfat4ftr791em.png)
And that's fine...until the button refuses to work. You can click it as many times as you want but it'll silently fail.
There's a few reasons for this. You could be on Linux where this was a "Known Issue" for a few years. Your browser has protocol handlers disabled for safety reasons. Or you could be on Windows and your registry entry for Unity's URL Protocol got wrecked. That's what happened to me when I installed/removed multiple versions of Unity.
Anyway, the protocol is `url:com.unity3d.kharma`!
So if you want to open an asset like [Meshtint's Little Heroes](https://assetstore.unity.com/packages/3d/characters/humanoids/little-heroes-mega-pack-67636), you could invoke `com.unity3d.kharma:content/67636` from your browser. The number 67636 is the product id and it's slapped on at the end of the asset's store URL.
On Windows, if your registry is setup correctly, it will pass such URLs as an argument. If there's an issue, an easy fix is to just reinstall the editor. Alternatively, run `regedit` and find and fix the erroneous entry. It should look like:
```
"<yourpath>\Editor\Unity.exe" -openurl "%1"
```
Once fixed, you can click the "Open in Unity" button or make your own list of URLs and download/import what you need quickly.
![Desired asset seen in Unity's Package Manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3cnlwb3us5qugc1v2h2.png)
Gratitude + Leadership
Tags: motivation, devjournal, writing, todayilearned
Published: 2021-02-26 22:46:51

Today, I was fortunate enough to see and experience a leader that ‘measured the gain and not the gap’. One of my coworkers was leaving the team and we all had an informal, virtual get-together to see him off. When my manager took the floor I was taken by surprise.  I was surprised that he didn’t give the normal send-off that I was used to. I was used to the send-off that said “atta boy… good job and goodbye” Instead, his tone and level of detail for all the contributions my co-worker made, made me feel how much he valued him and what he did.  Now that I have a moment to take a step back and reflect further on the impact of my manager’s appreciation, I realized it inspired me to contribute more and value him as a first-class leader.

Some rough takeaways:
Gratitude is powerful and the external effects are usually indirect.
When measuring the gain and not the gap it is easier to have gratitude.
One way to be appreciated is to appreciate first.

Related knowledge:
“If I want to gain the ability to influence you, well then what I have to do is to give you the ability to influence me.” -Jocko Willink