teleren/devto huggingface dataset:
Learn about Closures in JavaScript
Tags: javascript
Published: 2022-05-28 22:06:52

There is a pattern in JavaScript that we use all the time without noticing it: Closure!

A closure occurs when you use an outer variable in an inner block. Here is a simple example:

```javascript
let count = 0

function increment() {
  count++ // closure here!
  return count
}

increment()

console.log(count) //==> 1
```

Closures can come in handy when you want to **save a function's state**.

Say that you're building a video game, and you have a function that applies teleportation to a given object  in a 2D context:

```javascript
function teleport(object, x, y) {
  object.x = x
  object.y = y
}
```

You want to be able to teleport objects in your game. But the possible amount of teleportation can vary. What you can do is create a function that returns a new function limiting the amount of time we call the `teleport` function:

```javascript
function teleportNTime(n) {
  let count = 0
  
  return function(object, x, y) {
    if (count === n) {
      console.log("can't teleport anymore!")
      return
    }

    teleport(object, x, y)
    count++
    console.log("count: ", count)
  }
}

const teleport2Time = teleportNTime(2)
const teleport3Time = teleportNTime(3)

```

Two variables represent the state of `teleport2Time`:
- the argument we passed `teleportNTime`; which is `n = 2`.
- the `count` variable

Here the state is saved because each time we teleport, we remember the count and the teleportation limit (`n = 2`).

```javascript
const goku = { name: 'goku', x: 0, y: 0 }

teleport2Time(goku, 2, 4) //=> count: 1
teleport2Time(goku, 8, 10) //=> count: 2
teleport2Time(goku, 0, 0) //=> can't teleport anymore!
```

Notice that the state of `teleport3Time` is independent of `teleport2Time`.

```javascript
teleport3Time(goku, 2, 4) //=> count: 1
```
Security in Laravel: How to Protect Your App Part 4
Tags: laravel, security, exposefile
Published: 2022-05-28 21:38:49

## **Exposed Files**
By default, Laravel only exposes the public directory. This is intended to avoid security breaches. Considering that any file that will be exposed can be accessed by anyone, you should avoid adding their sensitive data.

If you want to expose files to download, the best way to do this is by keeping the files on the storage directory and just adding a symbolic link on a public directory. Laravel provides a command to make it easier:

```
php artisan storage:link
```

Now, any file that your app stores in the storage directory will be available. Avoid adding manual permissions to any other directory as this could lead to a potential breach.
History of software and open collaboration
Tags: openmodels, opensource, beginners, openscience
Published: 2022-05-28 21:30:08

Understanding the history of software is fundamental to understanding what it means to collaborate through digital.

The software world was the first to discover, benefit from and try to understand these singular collaboration phenomena offered by the Internet.

While some people are discovering telework, others have been living it for decades on a completely different scale.

Today, developers (with the help of researchers) are trying to understand how to structure socio-technical environments to co-produce software, but it has been quite a story before getting there.

After open source, the dynamics that occurred in the software world are bound to operate in all the other sectors that will be affected by digital and open models, in science, in education, in industry, in politics...

To simplify, we can see 3 steps in the development of an open model. The sharing of a resource (in this case software), the discovery of open collaboration, then the cultural maturation to become the dominant model.

In the 80s, faced with the closure of source codes by companies such as Microsoft, Apple or Xerox, Stallman initiated the free software movement which formalized the sharing of source code offering 4 freedoms to software: use it, study it, redistribute it, distribute modified versions.

In the 90's, thanks to this proliferation of free software, in parallel with the democratization of computers and the Internet, open collaboration dynamics were structured, notably around Linux. Eric Raymond, in his essay The Cathedral and the Bazaar, theorizes that an open and decentralized development, the Bazaar, allows to have a better quality software. Open collaboration was formalized.

Faced with these movements, ideological wars began in the software world.

> "Linux is a cancer that attaches itself in an intellectual property sense to everything it touches" - Steve Balmer, ex-CEO of Microsoft, 2001.

Today, Microsoft and all its soldiers have lost the war, the cancer that is intellectual property has given way to the effectiveness of these sharing and collaboration dynamics. All the GAFAM and BATX are involved in open source.

The cultural maturation has progressed well, but is far from over!

This story of willingness to share resources, of discovery of open collaboration, of a cultural evolution with conflicts doomed to failure by the dominant actors is reproduced in open science, open education, open hardware, open innovation... We might as well learn from the most mature open model.

Knowledge brick on open models (under construction, in french): https://open-models.org
How to solve the Rust+TLS+Windows Nightmare
Tags: rust, tls, windows
Published: 2022-05-28 21:09:48

## Problem

Developing with `rusttls` or `openssl` can be a huge pain when working with packages such as `actix` or `awc`. These packages tend to throw SSL errors when making requests or using a proxy to pass to any https url. 

## Solution

### [Install Visual Studio](https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2022)

  - Install the Compoment for Windows Development and Linux Embedded Development for C++ tools.

### [Install Rust](https://www.rust-lang.org/tools/install) 

  Set the toolchain to `stable-x86_64-pc-windows-msvc`

  ```powershell
  rustup toolchain install stable-x86_64-pc-windows-msvc
  rustup default stable-x86_64-pc-windows-msvc
  ```

### [Install Msys2](https://www.msys2.org/) 
  
  In msys2 install:

  ```shell
  pacman -Syu openssl-devel pkg-config mingw-w64-x86_64-toolchain
  ```

### Setting up vcpkg

  1. Make a new folder: `mkdir -p C:\tools`
  2. Clone vcpkg: `git clone https://github.com/microsoft/vcpkg`
  3. Navigate to `C:\tools\vcpkg`
  4. Run the following install commands:

  ```powershell
  ./bootstrap-vcpkg.bat
  ./vcpkg.exe install openssl-windows:x64-windows
  ./vcpkg.exe install openssl:x64-windows-static
  ./vcpkg.exe integrate install
  ```

### Setting up Openssl Root Cert

  1. Create the directory: `mkdir -p C:\Program Files\OpenSSL-Win64\certs`
  2. [Download the cacert.pem](https://curl.se/ca/cacert.pem)
  3. Place it in the certs directory.

### Finally update all our environments:

  1. Add to path:
    - `C:\msys64\mingw64\bin`
  2. Add the following environment variables:
    - `VCPKG_ROOT=C:\tools\vcpkg`
    - `SSL_CERT_FILE=C:\Program Files\OpenSSL-Win64\certs\cacert.pem`
    - `RUSTFLAGS=-Ctarget-feature=+crt-static`
    - `OPENSSL_NO_VENDOR=1`

## Conclusion

Developing with Rust and Windows can be a relatively painless process but just `rusttls` or `openssl` can be a huge pain when working with packages such as `actix` or `awc`. There might be an easier way to accomplish this but these are the steps that I have found to be the most reliable and repeatable across multiple systems. 


## Sources

Thank you to these lovely peeps for getting me down the right path.

- [Stackoverflow: How to work with OpenSSL for Rust within a Windows development environment](https://stackoverflow.com/questions/55912871/how-to-work-with-openssl-for-rust-within-a-windows-development-environment)
- [Microsoft vcpkg](https://github.com/microsoft/vcpkg)
API Contract Testing - Forever Free
Tags: api, devops, microservices, testing
Published: 2022-05-28 21:05:30

Calling all API Architects and Developers.

Your customers, partners, and internal consumers get immense value by integrating with your APIs.

How do you ensure these integrations are not disrupted due to [breaking changes](https://community.blackbaud.com/blogs/69/3219) that are inadvertently deployed to production?

How do you ensure that your API implementation is always in sync with its [contract](https://www.adobe.com/sign/hub/document-types/what-s-included-in-an-api-contract)?

[Levo’s](https://levo.ai/) [API Contract Testing](https://microsoft.github.io/code-with-engineering-playbook/automated-testing/cdc-testing/) empowers you to build and maintain resilient APIs, by detecting breaking changes before they hit production!

Below is a brief video tour of Levo’s Forever Free [API Contract Testing](https://microsoft.github.io/code-with-engineering-playbook/automated-testing/cdc-testing/) features.

{% embed https://youtu.be/v-20vox6HXM %}

Thanks for watching! [Signup](https://levo.ai/levo-signup/) for a forever free account, and start building secure and resilient APIs in minutes.
Sell Me On Typescript
Tags: discuss, webdev, typescript, javascript
Published: 2022-05-28 20:59:33

I'm a **Python** developer and this strictly typed langauges this something I left after I finished my Diploma (C, C++, Java)

I later got into **React** and all those web dev stuffs that the kids are into. At that time javascript was all you really needed. Then the wave of **Typescript** hit and everyone jumped on.

I get all the "advantages" of it, but in the past few months   I looked into it and decided to rebuild my portfolio with it - the portfolio is still not done.

Most of my time was spent making Typescript happy and not building. 

So, you Typescript pundits, why must I use it?
Carbon - Python Renamer
Tags: python, programming, showdev, security
Published: 2022-05-28 20:45:43

## :dart: About ##
When looking around for python obfuscators, you might have found some like pyarmor, or pyminifier.
But then there's one that does actually obfuscate the code which can't be reversed to the original source. You can find it [here](https://pyob.oxyry.com/), but there's just one small caveat.
Purchasing it costs **USD $1998**.

Now that's not to say you can't use it for free, after all if you want to use it online it's free to use. But if you wish to use an offline cli version, well then you need to pay.

This is where Carbon comes in. I decided to make my own version of the oxyry obfuscator which does the same job. It renames classes, functions, parameters and variables. It removes docstrings and comments and doesn't stick on a line number at the end of each line. But best of all, it isn't locked to Python 3.3-3.7.

## :sparkles: Features ##

:heavy_check_mark: Remove docstrings and comments
:heavy_check_mark: Rename classes, functions, parameters and variables

## :rocket: Technologies ##

The following tools were used in this project:

- [Python](https://www.python.org/)

## :white_check_mark: Requirements ##

Before starting, you need to have [Python](https://www.python.org/) installed.

## :checkered_flag: Starting ##

```bash
# Clone this project
$ git clone https://github.com/0sir1ss/Carbon

# Access
$ cd Carbon

# Run the project
$ python carbon.py
```

Made with :heart: by <a href="https://github.com/0sir1ss" target="_blank">0sir1s</a>
How to launch a NFT collection on Solana
Tags: solana, nft, blockchain
Published: 2022-05-28 20:36:57


### Requirements

Before everything you should have the Solana CLI installed as it is requisite later. You can follow the official instruction to install the Solana Tool Suite. https://docs.solana.com/cli/install-solana-cli-tools

### Generate the PNGs

We generate the collection of PNGs and metadata with Hashlips art engine. Clone the repository https://github.com/HashLips/hashlips_art_engine and install the dependencies.

```
yarn install
```

Now let's configure it. In the `config.js` file we change eth to sol.

```js
const network = NETWORK.sol;
```

Always in the same file, we change the collection's general information (name, symbol, description, external link, wallet address...)

Once it is configured we go to the layers folder. The parts are defined as folders where we put all the variants. For example, the part Eyeball contains 2 PNGs. Red and White. We can observe in the png file name a hashtag followed by a number. The number after the hashtag sign defines the rarity. Run `yarn generate` to create the images and JSON files under folder build.

### Upload to the Solana network

To upload the PNGs to Solana we are going to use Metaplex, the protocol that is defining the NFT standard for the network.
Go to Github and clone https://github.com/metaplex-foundation/metaplex

We create a new folder and name it assets. Put it in the Metaplex repository and move the images and JSON files to the folder

We can customize such as the quantity, price, and launch date between others. Go and edit `example-candy-machine-upload-config.json`, you can change it to the minimal configuration that you can get from https://docs.metaplex.com/candy-machine-v2/configuration

#### Setup the upload code

Go to the js folder and install the dependencies `cd js && yarn` 
Execute the upload code that you can copy from https://docs.metaplex.com/candy-machine-v2/creating-candy-machine. Then change the codes from the example to the following:

For the CLI file to execute copy the path to `candy-machine-v2-cli.ts`. Right-click on it and then click on `copy path`.

For the -k Run to `solana-keygen new` and use `solana config get` to know the Keypair Path

For the -cp Copy the path from `example-candy-machine-upload-config.json`

And last copy the Path to the assets folder where we have the PNGs and JSON metadata. 

Run can always use the help flat to know what it does `... upload --help`.

When you are running the command it may fail, you just have to try again or change the RPC URL https://docs.metaplex.com/community#rpc 
When it is uploaded Copy and save the output of the collection addresses and candy machine address from the terminal to a new text file.

### Mint the NFT

Go to candy-machine-ui folder and install the dependencies `cd path-to/candy-machine-ui && yarn`
Start the UI in local with `yarn start` and you can try to mint the first NFT of the collection. 

Congrats you have created, deployed, and minted your own NFT collection on Solana.
[Desafio] - Converter Números para Valor por Extenso
Published: 2022-05-28 20:05:13

> Conteúdo original [nessa thread do Twitter](https://twitter.com/zanfranceschi/status/1530640958731210753)

---

Aceita um desafio?

Crie uma função que aceite um valor financeiro numérico e retorne sua versão escrita por extenso.

Se achar muito difícil, limite o número pra até 10 no máximo, apenas números inteiros, etc., por exemplo.

Exemplo na imagem.

![img](https://pbs.twimg.com/media/FT3tvgWWIAEuvDt?format=jpg&name=medium)
Pardus üzerinde .VDI dosyasının qcow2'ye çevrilmesi
Tags: vdi, qcow2, convert
Published: 2022-05-28 20:04:33

## VDI (Virtual desktop infrastructure - Sanal masaüstü altyapısı) 

VDI, merkezi bir sunucu üzerinde çalışan bir sanal makine içinde bir masaüstü işletim sisteminin barındırılması süreci olarak tanımlanır. VDI, bazen sunucu tabanlı bilgi işlem olarak adlandırılan, istemci/sunucu bilgi işlem modelinin bir varyasyonudur. 

## QCOW2

QCOW2, sanal diskler için bir depolama biçimidir. QCOW, QEMU yazma üzerine kopyalama anlamına gelir. QCOW2 formatı, mantıksal ve fiziksel bloklar arasında bir eşleme ekleyerek fiziksel depolama katmanını sanal katmandan ayırır. 

 

## VDI'yın Qcow2'ya Çevrilmesi

 Dönüşümde kullanmak için qemu ve kvm paketleri kurulmalıdır.

``` 
sudo apt-get -y install qemu-kvm virtinst bridge-utils
```

Vdi görüntü dosyasını içeren dizine gidilir.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnavamom2fbezxqto252.png)

Qemu kullanılarak vdi qcow2 formatına dönüştürülür. Temel olarak yapılan işlem, vdi'yi ham disk görüntülerine dönüştürmektir.

```
qemu-img convert -f vdi -O qcow2 oraclelinux01.vdi oraclelinux01.qcow2 
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9sgrqnnjhrpry3vmnjz.png)
React.js site | Made with Gatsby JS
Published: 2022-05-28 19:59:46

![React | Made with Javascript | Gatsby JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1653324707/large_react_js_home_page_made_with_gatsby_js_d964b2e0ad.png "React | Made with Javascript | Gatsby JS")


### A JavaScript library for building user interfaces

> ### Declarative
> React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
> 
> Declarative views make your code more predictable and easier to debug.
> 
> ### Component-Based
> Build encapsulated components that manage their own state, then compose them to make complex UIs.
> 
> Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
> 
> ### Learn Once, Write Anywhere
> We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
> 
> React can also render on the server using Node and power mobile apps using React Native.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [React on Twitter](https://twitter.com/withjavascript/status/1530638870768926724?s=20&t=ZwdsJ8t39dyaIKkGU3S53A)
 |
| Medium | [React on Medium](https://ReplaceLink.com)
 |
| Facebook | [React on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0yYRYVg65dH377PQxnHyqMAx2o6WkvRsLhMqjcA3FWjEvigT7AGuoHNGAVtYRfdFBl)
 |
| Tumblr | [React on Tumblr](https://madewithjavascript.tumblr.com/post/685525281336868864/react-made-with-gatsby-js-a-javascript-library)
 |
| LinkedIn | [React on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6936404748245897216)
 |


Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Gatsby JS](https://madewithjavascript.club/categories/gatsby-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
How to get a job at Microsoft
Tags: career, beginners, programming, codenewbie
Published: 2022-05-28 19:19:25

Join us this Tuesday 5/31 @ 2pm for a fireside chat with a Hackpack alumni who just got a job at Microsoft. Find out how they got the job, resources they used, and ask them any questions you may have! 

Save the event to your calendar - https://discord.gg/NKFGEzav5M?event=979830770774474773
Force linux to shutdown or restart
Tags: linux, productivity, performance, management
Published: 2022-05-28 19:17:07

## A solution for your PC when feel lag and freeze

Sometimes restart PC with ``` ctrl + alt + delete ``` not working and you should to press the power button but this is not recommended because can damage computer performance

Usually I use this way to resolve that:
Holding down ``` ALT + PrntSct/SysRq ``` (which is the Print Screen key) while slowly typing ``` R+E+I+S+U+B ``` will get you safely restarted. ``` R+E+I+S+U+O ``` will do a shutdown rather than a restart.

Here are the steps each button performs:
- R: Switch the keyboard from raw mode to XLATE mode
- E: Send the SIGTERM signal to all processes except init
- I: Send the SIGKILL signal to all processes except init
- S: Sync all mounted filesystems
- U: Remount all mounted filesystems in read-only mode
- B: Immediately reboot the system, without unmounting partitions or syncing

source [codepolitan](https://www.codepolitan.com/reisub-cara-teraman-restart-linux-saat-not-responding-5aa5f601187ed/) [blog.kember.net](https://blog.kember.net/posts/2008-04-reisub-the-gentle-linux-restart/)
How did you get into programming?
Tags: discuss
Published: 2022-05-28 19:14:03

Mine story dates back to 2018,at that time I was a crazy mobile gamer.
Most famous mobile game at that point was **Clash of clans**,me and my friend were just browsing YouTube for gaming content

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9j0nmzvsmas8nxbeapq.jpeg)

Then we saw a video,whose title was "How to hack gems in clash of clans".This was the starting point for my coding journey, thought all it had was a app that manipulates game data locally

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgto4vxde9rq8cddq5fo.png)

At that time I didn't knew about hex values,so i Googled it,not that i understood anything by looking at results,so my interest leaned towards learning how the game can be hacked.Along with my friend I did some **research** and found out that online games can't be hacked with our peanut sized brains.After this I got more interested in how the software is built and how we can create something like this.This is how it started for me,what about you?
Using React Google Charts
Published: 2022-05-28 18:45:23

While working on a financial tracking application, I realized I need some way to display all of that data. So began my search for a chart library, after trying out a few, and stumbling my way upon a library that cost over $200. I finally settled on using [React Google Charts](https://www.react-google-charts.com/).

While certainly not as robust or flashy as many other libraries, it had one thing that others didn't; it was free, and I could actually figure out how to use it.

The link above will take you to the official website, where there are plenty of examples, a quick guide to get you started, more examples, info on component props, and many, many, many examples.

If you're anything like me, you like examples because instead of actually learning how stuff works, you can simply copy an already existing one that's close enough, and adjust it to your liking (or adjust it as best you can since you don't know how anything works). 

![Pie Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9aibaqivx9m5iwy266dg.png)
*(huge shoutout to this [Gradient Generator](https://colordesigner.io/gradient-generator), it's pretty great for generating color gradients, color schemes, and all of your color needs)*
```
<Chart
          chartType="PieChart"
          width="100%"
          height="400px"
          data={budgetPieData}
          options={{
            pieSliceText: "none",
            pieHole: 0.6,
            backgroundColor: "none",
            colors: [
              "#26cd4d",
              "#00c065",
              "#00b377",
              "#00a483",
              "#00958a",
              "#00858b",
              "#007685",
              "#00667b",
              "#0f576b",
              "#2a4858",
              "#28687d",
              "#168ba0",
              "#00b0be",
              "#00d6d6",
              "#05fce8",
              "#00fed9",
              "#00ffc6",
              "#00ffb0",
              "#00ff96",
              "#00ff78",
            ],
          }}
        />
```
While it is certainly functional, and gives a fair amount of customizability, I did find that it became increasingly difficult to work with the more complex my needs (formatting data for stacked Column Charts is a bit of a nightmare), but I found that it overall worked out good enough.

Have you used React Google Charts? Do you know of something even better? I would definitely love to hear about it; but in the mean time, good luck and get coding!