teleren/devto huggingface dataset:
Hacktoberfest Projects for Angular enthusiasts
Tags: angular, hacktoberfest
Published: 2020-10-29 02:14:04

Hello! Hacktoberfest isn't over yet. If you're an Angular enthusiast I've got a couple of small projects that you are more than welcome to contribute to. These are just tiny projects that I've created to learn and grow my skills. Nothing too fancy. 

## Where is the ISS

A live view of the location of the International Space Station.

[GitHub Repository](https://github.com/JasonFritsche/where-is-the-iss)
[Site](https://jasonfritsche.github.io/where-is-the-iss/app-map)

## CryptoLive

Provides current and last 24h CryptoCurrency data.

[GitHub Repository](https://github.com/JasonFritsche/CryptoLive)
[Site](https://jasonfritsche.github.io/CryptoLive/Home)
Frontend Starter-Kit
Tags: beginners, javascript, css, frontend
Published: 2020-10-29 02:11:11

I've created this Frontend StarterKit, it allows you to have a quickly start in building your website.

It uses Gulp 4 as task runner, Pug as HTML template engine, with SCSS preprocessor and pure vanilla JavaScript (ES6+)

Has by default a Cookiebar compliant with EU rules, fully customizable.

Any feedback is welcome :)

*Note: This StarterKit doesn't support Internet Explorer*

{% github dippas/frontend-starterkit %}
React 17 JSX, react-scripts with TypeScript
Tags: react, typescript, reactscripts
Published: 2020-10-29 02:09:53

With new React 17 offers JSX, it's mean no longer needs to import React on every page [read more](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)

In the React 16:
```typescript
import React from "react";

export default function TestPara() {
  return (
    <React.Fragment>
      <h1>I love FOSS</h1>
    </React.Fragment>
  );
}
```
In the React 17:
```typescript
import { Fragment } from "react";

export default function TestPara() {
  return (
    <Fragment>
      <h1>I love FOSS</h1>
    </Fragment>
  );
}
```
According to [this post](https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/#jsx-factories) If you use TypeScript rather than JavaScript, you must switch to `4.1.0-beta` 

```shell
yarn add typescript@beta
```
Then make a change in `tsconfig.json` look like this:
```json
"jsx": "react-jsx"
``` 
After switching to `4.1.0-beta` react-scripts will give this error:

```
.../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239
      appTsConfig.compilerOptions[option] = value;
                                          ^

TypeError: Cannot assign to read only property 'jsx' of object '#<Object>'
    at verifyTypeScriptSetup (.../node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:239:43)
    at Object.<anonymous> (.../node_modules/react-scripts/scripts/start.js:31:1)
...
```
Now you have two options.
**Option 1**
You can wait for the react-scripts `4.0.1` which comes with [this pull](https://github.com/facebook/create-react-app/pull/9869).

**Option 2**
If you can't wait for `4.0.1` like me, you can do [this fix](https://github.com/facebook/create-react-app/issues/9429#issuecomment-669615656):

change this code block in `node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js` 
```javascript
    let result;
    parsedTsConfig = immer(readTsConfig, config => {
      result = ts.parseJsonConfigFileContent(
        config,
        ts.sys,
        path.dirname(paths.appTsConfig)
      );
    });
```
Like this:
```javascript
    parsedTsConfig = {...readTsConfig};

    const result = ts.parseJsonConfigFileContent(
      parsedTsConfig,
      ts.sys,
      path.dirname(paths.appTsConfig)
    );
```
Congratulations you now successfully fix the issue...!!
Jumping in to Elixir
Tags: elixir, codenewbie
Published: 2020-10-29 02:03:13

Hello all! I've been interested in Elixir for some time and now that I am starting to have some free time on my hands I've decided to start learning. I would like to learn Elixir and the Phoenix framework. I'm currently following along with an Elixir and Phoenix course by Stephen Grider that I picked up on Udemy a while back.

I wanted to ask those of you who use Elixir if you could please share any resources that you've found useful in your journey with the language.

Thank you all!
Como criar um atalho com ícone do Flipper no Linux
Tags: flipper, linux, react
Published: 2020-10-29 01:30:32

Para quem não conhece o **Flipper**, é uma plataforma para debug de apps iOS, Android e React Native. 

E vim aqui trazer pra vocês um tutorial bem simples de como criar um atalho para o Flipper e não precisar iniciá-lo com o terminal toda vez.

Primeiro é necessário que você faça o [download do Flipper](https://fbflipper.com/) no site oficial.

* Após realizado o download, extraia o arquivo no seguinte diretório:

```bash
/home/SEU_USUARIO
```

> Troque o **SEU_USUARIO** pelo nome do usuário da sua máquina, caso não saiba digite o comando `who` em seu terminal

O caminho deverá ficar dessa forma:

```bash
/home/SEU_USUARIO/Flipper-linux
```

* Agora abra o seu terminal, e rode o seguinte comando:

```bash
sudo nano /usr/share/applications/Flipper.desktop
```

_Isso fará com que crie um arquivo chamado *Flipper.desktop* no diretório indicado acima_

* Digite a sua senha do Linux e rode e cole os comandos a seguir:

```bash
[Desktop Entry]
Name=Flipper
Comment=Extensible mobile app debugger
Exec=/home/SEU_USUARIO/Flipper-linux/flipper
Type=Application
Terminal=false
Icon=/home/SEU_USUARIO/Flipper-linux/resources/app/icon.png
NoDisplay=false
```
Após colar o comando, pressione **CTRL + X** e em seguida a tecla **Y** e depois **ENTER** para confirmar as alterações.

Prontinho, agora você terá um ícone junto aos seus apps para iniciar o Flipper.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4nxipgreq8iez1vtcy0d.png)
I am beginner in js
Tags: javascript, beginners, newbie, webdev
Published: 2020-10-29 01:23:52

---
title: I am beginner in js
published: true
description: If you are learning or planning to learn js then let's get started together.
tags: #javascript #beginners #newbie #webdev #
//cover_image: https://direct_url_to_image.jpg
---
If you are learning or planning to learn js then let's get started together.
I spent all day...
Tags: productivity, motivation, devops, kubernetes
Published: 2020-10-29 01:01:14

I just spent the entire day working on a bug in a deployment pipeline for one of the services my team manages.

After spending hours and hours trying to figure out what the problem was, I came across the solution. I created a file named 'requirements.yaml' and put it in wrong directory. It was almost in the right place, which made it hard to notice that it wasn't.

At first, I felt disappointed that I missed something so incredibly obvious and felt dumb. Especially considering that I've been a software developer in the industry for about 5 years.

But, I reframed this thought. I actually learned quite a lot. I learned a lot because it forced me to learn. I was reading, very carefully, the documentation pertaining my company's software development process. This resulted in me learning more about Kubernetes, Jenkins, Helm charts, etc that I wouldn't have learned otherwise. I didn't waste time; I learned a lot in this process.

Even though this seemed like a silly mistake, working through it made me a better developer... The more you struggle and overcome, the stronger you become.
Monitoring and Performance Wrap Up - October 2020
Tags: monitoring, performance, bestofdev
Published: 2020-10-29 00:56:56

Hi! I'm Helen, one of your friendly mods looking after the #monitoring and #performance tags. 

At the end of each month, I'll be showcasing some of the great posts, projects, and insights from the Dev community. 

-------------------------

To kick us off this month we have [James](https://dev.to/jstarmx) who has written their first post detailing the mechanics of each step a browser goes through to render a web page so that each can be considered and optimised during development. Welcome to Dev James!

--------------------------

{% link https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ahc %}

---------------------------

Next, [Cody](https://dev.to/codyjasonbennett) introduces us to the Observer API. There are four different types of observers that observe different things -- from the DOM to browser performance.

--------------------------

{% link https://dev.to/codyjasonbennett/the-observer-api-for-modern-javascript-222m %}

---------------------------

[Justin](https://dev.to/jsbroks) then shows us how to optimise using lazy loading components in Vue. A few extra seconds could have a huge impact on the number of users visiting your site. This means that having a fast site is important, not just for ranking well in Google Search Engine, but for having users interact with your webpage.

-------------------

{% link https://dev.to/jsbroks/lazy-loading-components-in-vue-3-21o7 %}

---------------------------

Sticking with Vue, our next post from [Mariana](https://dev.to/marianapicolo) takes us through a refactoring project. Refactors are never easy but can make a huge difference in performance. This is Mariana's first post too, welcome to Dev!

-----------------------------

{% link https://dev.to/marianapicolo/my-notes-about-conducting-a-massive-refactor-in-a-vue-js-website-bo7 %}

---------------------------

Next, [Breno](https://dev.to/brenohq) focuses on the first steps you can take to approach web performance. Great first post, welcome to Dev Breno!


--------------------------


{% link https://dev.to/brenohq/5-things-you-need-to-know-about-web-performance-in-2020-33j8 %}

---------------------------

To wrap up this months posts we have a discussion from [Pawel](https://dev.to/pp) from the Dev team on lazing loading images. Are there any cons and gotchas to look out for? Check out the discussion for more.

---------------------

{% link https://dev.to/devteam/any-reason-for-not-using-loading-lazy-attribute-3gn8 %}


----------------------------
--------------------------


That's all for this month! For more, check out the #monitoring and #performance tags.
Photo Rover - Flatiron School Final Project
Tags: react, redux, javascript, ruby
Published: 2020-10-29 00:41:48

# App Overview

![Home Page](https://dev-to-uploads.s3.amazonaws.com/i/mxwfn42njpy6tmbiopfx.png)

### [Source Code](https://github.com/colerau?tab=projects)

Photo Rover is a web app that uses NASA's [Mars Rover Photos API](https://api.nasa.gov/) to receive a daily-updating collection of photos from Mars. The photos are taken by NASA's Curiosity rover. A lot of photos feature Martian geology. The rover is also fond of selfies.

In Photo Rover, a user can view pictures of Mars by selecting a specific Earth date. If they like a photo, they can save it to their library. A link to their saved photo is persisted in a SQLite database.

The app uses a React/Redux frontend, Redux Thunk to send asynchronous API calls, and a Ruby on Rails JSON API backend to handle user accounts and their respective actions.

# App Execution Flow (Initial Photo Retrieval)

* In the React frontend, we start in `index.js`, where the Redux store is configured, and `App.js` is rendered.
* In `App.js`, all the routes are set up with [React Router](https://reactrouter.com/). When `App.js` mounts, an action is dispatched to receive photos of Mars from yesterday. The action sends a `GET` request to NASA's database. The action uses `fetch` and waits for a resolved promise to send to the reducer. 
* The reducer takes the list of photo objects from the action and stores them in state. Each photo object has its own link to retrieve itself from the Internet. 
* `App.js` then receives the updated state that contains the photo objects. It renders `PhotosList.js` and sends it props containing the photo objects. 
* `PhotosList.js` receives the props and iterates through them, passing each photo object to the `Photo.js` component. 
* `Photo.js` takes the photo object it received from props and passes the image URL from the object to an HTML `img` element. This causes the photo to render on the web DOM. 
* The photo is rendered with a button that, upon being clicked by a logged-in user, will cause that photo to be associated with that user. The user can retrieve that photo by going to their Saved Photos library and clicking "Refresh Saved Photos".
Use of defer and async to limit the effects of blocking scripts in JavaScript
Tags: javascript, webdev, programming, html
Published: 2020-10-29 00:36:04

When a script is loaded, it loads in blocking or synchronous mode, which means that the browser waits for the script to finish loading before executing any code after it.
So in this case, `script2.js` cannot start loading before `script1.js` finishes loading -
```html
<body>

<script src="script1.js"> </script>
<script src="script2.js"> </script>

</body>

```

As you can imagine, this becomes problematic when -
1. `script2` needs variables that are in `script1`
2. `script1` is really huge, and the entire page needs to wait for the script to finish loading.

The browser waits for the script to finish because it assumes that the script may have code that may update the page contents using `document.write`. If your script isn't using `document.write`, then waiting for the browser to finish loading isn't useful.

In order to get past this, there are two attributes that can be used - `defer` and `async`.

1. `defer`: defer tells browser that script wont generate any document content and can safely be downloaded without blocking the page and this script should be deferred until all the page is downloaded. defer is executed only when the page is completely parsed.
2. `async`: `async` is similar to defer in the sense that it won't change anything in the DOM, but unlike defer, async scripts are executed as soon as they are downloaded. This is advantageous because scripts can potentially execute sooner.


## Syntax -
```html
<script defer src="script1.js"> </script>
<script async src="script2.js"> </script>
```
--- 

TL;DR
Blocking scripts can slow down page. Use `defer` or `async` to limit effects of blocking script. `defer` and `async` scripts must not modify page content using `document.write`.

1. `defer`: defer is executed only when the page is completely parsed.
2. `async`: async scripts are executed as soon as they are downloaded

---
Shruti Kapoor
[View all recent blogs](https://github.com/shrutikapoor08/blogs)
[Follow on twitter](https://twitter.com/shrutikapoor08)
Complex auth - types & test importance
Tags: kotlin, testing, refactoring, cache
Published: 2020-10-29 00:35:53

In one of the previous posts, I wrote about [how tedious problem caching and cache invalidation can be](/complex-auth-the-biggest-issue-cache-invalidation) after we introduced a way more complicated relations in [Localazy](https://localazy.com) - adding organizations and teams instead of simple user-project.

Such a huge change across the whole system may introduce a lot of bugs and issues. It's not only about a different authorization mechanism that also considers the new relations between organizations and teams.

In many places, the list of users of the given project or list of projects for the given user is required. It's used for search details, invitations, etc. We certainly want all of them to work nicely for organizations and teams. 

First, to find all these places where the change is necessary, we just changed the name of key methods - no refactoring, of course. And the compiler informed us about all call sites that need our love :-). **It would be crazy to do this without types!**

![](https://media.giphy.com/media/LPHXLKEOZw6T6/giphy.gif)

There are several hundreds of tests, and that was the second thing to save our lives! After the huge change, the first run failed - as expected :-). A few minor issues, no big deal. After a fix, from all these tests, **just 6 failed to show us fundamental problems in edge cases**.

A few more minor fixes, and all tests passed! Yayks.

**Tests are overly important!**
Best Competitive programming Books Pdf:-
Tags: productivity, github, git, computerscience
Published: 2020-10-29 00:31:48

https://github.com/rajeev-ranjan-au6/Programming_Book
1) https://github.com/rajeev-ranjan-au6/Programming_Book/blob/master/Guide%20to%20Competitive%20Programming%20by%20Antti%20Laaksonen.pdf ( Antti Laaksonen.pdf
Guide to Competitive Programming by Antti Laaksonen)

2) https://github.com/rajeev-ranjan-au6/Programming_Book/blob/master/competitive%20programming%203_1.pdf (competitive programming 3)

Follow my Github profile for the latest Resources and code.
Volta.sh
Tags: node, volta, neovim, npm
Published: 2020-10-29 00:27:36

# [Volta](https://volta.sh) - node version manager on steroids

## Installation
```
curl https://get.volta.sh | bash
```

This will install `volta` library under `~/.volta` directory and also update your `~/.bashrc`, `~/.zshrc` and `~/.config/fish`

Script will add `bin` directory to path, something like
```
export VOLTA_HOME="$HOME/.volta"
export PATH="$VOLTA_HOME/bin:$PATH"
```

## Uninstallation

You have to manually remove `volta` references from your system.

1. Remove `volta` from path from your bash or zsh config (`~/.bashrc` and / or `~/.zshrc`)
2. Removed `~/.volta` folder. `rm -rf ~/.volta`

## Volta Commands

```
    fetch          Fetches a tool to the local machine
    install        Installs a tool in your toolchain
    uninstall      Uninstalls a tool from your toolchain
    pin            Pins your project's runtime or package manager
    list           Displays the current toolchain
    completions    Generates Volta completions
    which          Locates the actual binary that will be called by Volta
    setup          Enables Volta for the current user / shell
    help           Prints this message or the help of the given subcommand(s)
```

### Install node engines
You have to install node using `volta install` command. You can install as many node versions as you like.

Install latest LTS release
```
volta install node
```
Install specific version
```
volta install node@12
volta install node@12.2.0
```

Package manager to install local dependencies (package.json)
```
volta install npm
volta install yarn
```

#### Pinning Node engines for your project

To use specific node or npm version for your project use `pin` command. It will update your package.json file.

```
volta pin node@12.2.0
volta pin npm@6.14.8
```

package.json
```
...
  "volta": {
    "node": "11.14.0",
    "npm": "6.14.8"
  }
...
```

### Global packages
To install global packages (similar to `npm install -g`) use `install` or `fetch` commands
To uninstall global packages (similar to `npm uninstall -g`) use `uninstall` command.

e.g.
```
volta install surge
volta fetch surge
volta uninstall surge
```
install - install and set the default version of tool
fetch - fetch tool locally without setting it as default

## [neovim](https://neovim.io)

You have to update node host in `init.vim` for neovim 

```
let g:node_host_prog = system('volta which neovim-node-host | tr -d "\n"')
```

* For for information visit [volta.sh](https://docs.volta.sh/reference)
Book vs Tutorial
Tags: productivity, tutorial, career, healthydebate
Published: 2020-10-29 00:12:33

I was 16, I used to have a desktop computer which was running windows 7. I used to save up my lunch money to buy programming language books. C was my first, they came with the instruction of installing visual studio. A friend introduced me to Code Blocks instead of visual studio & the story begin. I remember the joy I felt within me when I first successfully ran "Hello World!". Couple of years later when I enrolled in University, I started seeking help of the books for mostly programming or language courses. I started spending more time in the library and I was there even in the weekends. I was even carrying the PDFs in phone so I could read them during my ride back home. Somehow from a very young age I began to rely on books & somehow this stuck with me even now there are so many tutorials on so many platforms such as Udemy, SkillShare, CourseEra but I somehow find myself searching on the internet for books for the course I am learning. I enjoy going through each words of each line as I acknowledge & memorize. Learning is an endless journey. I guess I am still exploring and trying to figure out what works best for me. I'm willing to watch tutorial & read book to learn. Leave a comment below about which one you prefer the most. Is it book? Is it tutorial? Or both?
How to sort an array of numbers in JavaScript?
Tags: javascript
Published: 2020-10-29 00:00:00

---
  title: How to sort an array of numbers in JavaScript?
  published: true
  tags: JavaScript
  date: Thu Oct 29 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/sort-array-of-numbers-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-10aecf79ef387ec8d27f11de59804d65.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/sort-array-of-numbers-javascript)
  
To sort an array of `numbers` in JavaScript, you can use the `sort()` method on the array object.

## Sort the array in ascending order

To sort the `numbers` array in ascending order, you have to pass a function to the `sort()` method to customize its behavior, and the function will be passed 2 elements `a` and `b` while iterating.

You have to subtract `a-b` and return the result.

```js
// array of numbers
const numArr = [34, 56, 78, 90, 4, 5, 6, 34];

// sort array
// in ascending order
numArr.sort((a, b) => {
  return a - b;
});

console.log(numArr); // [4, 5, 6, 34, 34, 56, 78, 90]
```

Here `a` is the second element of the current iteration and `b` is the first element of the current iteration.

If the result of the subtraction is a negative number, then the numbers are swapped and the array contains numbers in ascending order.

See this example live in [JSBin](https://jsbin.com/tucepocisu/1/edit?js,console).

## Sort the array in descending order

To sort the `numbers` array in ascending order, you have to pass a function to the `sort()` method to customize its behavior, and the function will be passed 2 elements `a` and `b` while iterating.

You have to subtract `b-a` and return the result.

```js
// array of numbers
const numArr = [34, 56, 78, 90, 4, 5, 6, 34];

// sort array
// in descending order
numArr.sort((a, b) => {
  return b - a;
});

console.log(numArr); // [90, 78, 56, 34, 34, 6, 5, 4]
```

Here `a` is the second element of the current iteration and `b` is the first element of the current iteration.

If the result of the subtraction is a negative number, then the numbers are swapped and the array contains numbers in descending order.

See this example live in [JSBin](https://jsbin.com/yazaxojeto/1/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Windows 7 Loader
Tags: loader, activator
Published: 2020-10-28 23:55:33

windows 7 loader
https://fullpcrack.com/windows-7-loader/

Windows 7 Loader is the instrument that is utilized to actuate Windows 7 all forms, for example, Home, Professional, Ultimate, and a lot more which I will include upheld Windows Section. 

It is the best instrument to actuate your windows quick and without any problem. This activator is created by the Team DAZ which is well known for making activators. 

In the event that you are utilizing any Windows activator, at that point you should think about this group. Windows 7 Loader is a free activator and it doesn't cost you a penny to enact windows. This extraordinary activator such huge numbers of numerous highlights that we will talk about underneath. Likewise Check: Windows 7 Product Key