teleren/devto huggingface dataset:
JavaScript challenges_1 🐲
Tags: javascript, beginners, webdev, tutorial
Published: 2022-07-09 16:10:32

## Array.diff

- Your goal in this kata is to implement a difference function.
- Which subtracts one array from another and returns the result.
- It should remove all values from array [a].
- Which are present in array [b] keeping their order.

#### Examples:

- arrayDiff([1,2],[1]) == [2]

- If a value is present in b, 
- All of its occurrences must be removed from the other:

- ArrayDiff([1,2,2,2,3],[2]) == [1,3]

[Task URL](https://www.codewars.com/kata/523f5d21c841566fde000009)

### My solution:
```
let arr1 = [1, 2, 2, 2, 3];
let arr2 = [2];

function arrayDiff(a, b) {
    let result = []
    for (let i = 0; i < a.length; i++) {
        if (b.indexOf(a[i]) === -1) {
            result.push(a[i])
        }
    }
    return result;
}
console.log(arrayDiff(arr1, arr2))

// Output
[ 1, 3 ]
```
#VSCode – Thunder Client, excellent alternative to Postman for HTTP Requests @Code
Tags: englishpost, httprequest, thunderclient
Published: 2022-07-11 14:05:04

---
title: #VSCode – Thunder Client, excellent alternative to Postman for HTTP Requests @Code
published: true
date: 2022-07-09 15:36:36 UTC
tags: EnglishPost,EnglishPost,HttpRequest,ThunderClient
canonical_url: 
---

Hi !

Postman is a great tool to emulate HTTP Requests. I used Postman a lot when I create webapps that run Computer Vision models to analyze images.

However, in order to keep things more simple, I decided to test several extensions in Visual Studio Code, as alternatives to Postman. And, Thunder Client is one that make me 😁.

[**Thunder Client**](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client) is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design.

- Website – [www.thunderclient.com](https://www.thunderclient.com)
- Follow Twitter for updates – [twitter.com/thunder\_client](https://twitter.com/thunder_client)
- Support: [github.com/rangav/thunder-client-support](https://github.com/rangav/thunder-client-support)

And, it’s super easy to use ! In example, I’m developing an Azure Function, and while debugging I can access the function locally at [http://localhost:7071/api/AzCv05](http://localhost:7071/api/AzCv05).

This is a simple screenshot of a POST HTTP call, including a local image in the body, and the JSON response from the call.

![thunderclient demo calling a local azure function](https://brunocapuano.files.wordpress.com/2022/07/thunderclient-demo-calling-a-local-azure-function.jpg?w=1024)

Amazing extension, and as a bonus, no need to leave Visual Studio Code.

Happy coding!

Greetings

El Bruno

More posts in my blog [ElBruno.com](https://www.elbruno.com).

* * *
Closures in javascript (🔖)
Tags: javascript, beginners, tutorial, codenewbie
Published: 2022-07-09 15:10:36

This is a very easy topic and quite important too. A lot of output questions are framed out of this one. 

So a **closure** is nothing but **function + it's outside environment.**

Let's take an example to break this statement down:

```
function hi(){
   var k="I am great!"

    function reply(){
        console.log(k);
    }
    
    k="Long time no see"
    reply();
    return reply;
    
}
var ans=hi();
console.log(ans)
```

In this case `function reply()` forms a closure with it's surrounding, `function hi()` in this case. So, when trying to access k inside, it gets the value. Moreover, as you can see we update value of `k`, which the reply function pick ups too. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9791duewawag5hchtbl.png)
 
Once returned, the `reply()` still holds on to it's environment throughout the execution. This is because it returns a **closure**.

As mentioned in the last blog, this explains the lexical scope. A function can not only access it's parent scope but also it's parent's parent scope and so on. This access is also valid outside the lexical function. 

>If you are a react developer, it is a very common question when someone asks if states are synchronous. Would recommend to go through this! 
⭐[Async and setState](https://javascript.plainenglish.io/react-tips-async-and-setstate-cb539ad62135)
Output of each layer of Convnet looks like and what pattern makes the activation of each filter in a layer.
Tags: deeplearning, machinelearning, computerscience, datascience
Published: 2022-07-09 15:08:44

Check this out:https://github.com/Mr-negroni/Visualisation-of-Convnet-Features/blob/main/Visualisation_of_ConvNet_Features.ipynb
Best Books for Algorithms and Data Structures in Programming
Tags: books, webdev, programming, tutorial
Published: 2022-07-09 15:05:37

Best Books for Algorithms and Data Structures in programming:


1) Cracking The Coding Interview: 189 Programming Questions and Solutions - 6th Edition - Gayle Laakmann McDowell

2) Algorithms in A Nutshell: : A Practical Guide, Second Edition - George Heineman, Gary Pollice, Stanley Selkow

3) Thomas H. Cormen - Algorithms Unlocked (The MIT Press)

4) Adnan Aziz and Amit Prakash - Algorithms For Interviews: A Problem Solving Approach

5) Narasimha Karumanchi - Data Structures And Algorithms Made Easy: Data Structures And Algorithmic Puzzles

6) Introduction To Algorithms 3rd Edition - Thomas H Cormen, Charles E Leiserson, Ronald L Rivest, Clifford Stein

7) Dynamic Programming for Coding Interviews - Meenakshi and Kamal Rawat

8) Data Structures and Algorithms. Aho, Ullman & Hopcroft

9) Algorithms by Robert Sedgewick & Kevin Wayne

10) Algorithm Design by Kleinberg & Tardos

11) The Design and Analysis of Algorithms - Anany Levitin

12) The Programming Pearls (2nd Edition) by Jon Bentley

13) The Algorithm Design Manual by Steve S. Skiena

14) Beautiful Code: Leading Programmers Explain How They Think (Theory in Practice (O'Reilly))

15) Elements of Programming Interviews: The Insiders' Guide 2nd Edition by Adnan Aziz, Tsung-Hsien Lee, Amit Prakash
My first Ruby on Rails server 🎉
Tags: ruby, rails, webdev
Published: 2022-07-09 14:51:20

**Documenting my learning journey #1**

Today I started my study routine with the Ruby language and its respective Rails framework. Don't judge me! 😅 I'm using Windows at the beginning.

I faced some problems along the way and I had to fix them. Also learned how to create a server from scratch.

**"tzinfo-data"**
The first was that the "tzinfo" library was not being recognized. With the help of our friend StackOverFlow, I discovered that the problem was in the library definition in my Gemfile.

Finally I managed to run my first Ruby on Rails server.

![Ruby Server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybor3l2grb02jd0k9oyn.png)
Travel Website Using Html CSS JavaScript
Tags: css, tutorial, beginners, javascript
Published: 2022-07-09 14:45:15

{% youtube 9ts7JnruWg4 %}

Travel Website Using Html CSS JavaScript

In this video, I will show you how to Create Responsive Travel Website Using Html CSS JavaScript

[Live Website](https://codewithsadee.github.io/tourest)
[Github Repo](https://github.com/codewithsadee/tourest)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Starter file](https://drive.google.com/file/d/1u3V_FBAsutJ4ceX4wOcD8XgJVC2KuMrS/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
3:06 - File structure
3:34 - Project initial
8:44 - Header
19:31 - Hero section
25:04 - Destination section
32:57 - Popular tour section
42:30 - About section
48:32 - Blog section
55:42 - Footer
1:09:48 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Why are there no 128-bit CPUs?
Tags: webdev, programming
Published: 2022-07-09 14:31:19

Why does it seem like this evolution has stopped there? What do these bits represent? Will there be 128-bit processors in the future?

**What are bits?** 

In the simplest terms, bits are the basic unit of information in computing. They can be either on or off, and they're what make up everything from individual letters to entire websites. Most digital devices these days use binary code, which is a series of ones and zeroes that represent those on and off states. So when you see a "1" or "0" online, that's a bit in action.

Computers use large amounts of these little guys to do all sorts of things - like store data, run programs, or communicate over the internet. And because there are so many different ways to string them together (or not), that means there can be an almost infinite number of combinations for creating new words, pictures and ideas. So the next time you're online and see something cool (or weird), remember that it was created one bit at a time!

**Why are there no 128-bit processors on the market?**

There are many reasons why CPUs do not come in 128-bit varieties. The most obvious reason is that the benefits of a wider bus width would be outweighed by the increased cost and complexity of manufacturing such a chip. Additionally, there is no real demand for such a product in the market; 64-bit processors offer more than enough performance for most users. Finally, even if there were demand for 128-bit CPUs, current software would not be able to take advantage of their capabilities.

In closing, i want to remind you that today there are solutions beyond 64 bits, but they are not classic CPUs, but specialized components to perform specific activities and which work on particular data sets. In addition, there are logical solutions that allow you to work on 128-bit or higher data simply by exploiting modern architectures to create multi-bit virtual systems. This confirms that physical chips with over 64 bits are not really needed to meet modern technological challenges.
Aprendizado baseado em soluções
Published: 2022-07-09 14:30:09

Eu gosto muito de ler, principalmente livros. As vezes prefiro ler as legendas de um vídeo do que propriamente ficar olhando o mesmo.

Porém para aprender, sinto um pequeno gap apenas com leitura, falta algo. E com programação, esse gap fica muito grande. É preciso "colocar a mão na massa" além da teoria.

O que tem me ajudado muito a aprender Rust e Java, é escolher um problema para resolver, e deixar esse problema me impulsionar para aprender sobre novos conceitos e técnicas.

Isso faz com que eu aprenda essas técnicas novas quando faz sentido aplica-lás. A "hierarquia" da aprendizagem fica um pouco ao contrário da escola, que é como geralmente estudamos. Não é nos apresentado um conteúdo e dito "isso é importante", e sim o contrário, precisamos do material para resolver um determinado problema.

No trabalho atual que desenvolvo com Java, é "fácil" aprender pois tenho tarefas a serem desenvolvidas que os cliente precisam. Então tenho direcionado meu problema para resolver, me baseio em soluções parecidas, busco novas, e resolvo.

Já para aprender Rust, preciso encontrar esses problemas. Comecei pelo clássico aplicativo de To-do. Vi algumas soluções, entendi os motivos de usarem determinadas coisas e tentei fazer o meu. Mas é muito vago, cheguei a usar uma crate de Rust sem ao menos saber exatamente o que ela fazia.

Um caminho que experimentei e deu certo é:
- Entender e definir o problema;
- Explorar o que já se sabe sobre e tentativas anteriores de solução;
- Determinar as necessidade (conhecimento, ferramentas) para solucionar;
- Explorar diferentes opções de solução;
- Resolver o problema;
- Avaliar pontos de melhoria.

E olha só, **nada disso é novidade**. Vários métodos de aprendizagem falam sobre vários desses mesmos pontos. Explorar, definir, entender, avaliar. Nada é novo ou muito complicado, sempre partimos do básico bem feito.

Agora falta eu achar um problema bacana para resolver com Rust.
End-to-End Tutorial on Combining AWS Lambda, Docker, and Python
Published: 2022-07-09 14:16:15

AWS Lambda recently added support for Docker images with Python, where before you had to zip all your code and dependencies. With this update I wanted to make a full length tutorial to cover everything necessary to be productive.

The playlist is broken into six parts:

1. An introduction to the app that will be built and the various AWS components that will be used
2. Cloning the GitHub repo and doing necessary setup to test the application locally
3. Creating a Docker image of the Python script and running it on AWS Lambda, while also showing how painful it is to do even minor updates
4. Adding CI/CD with GitHub Actions to speed up code updates
5. Adding AWS Cloudwatch to create a cron job that schedules the Lambda function to run on periodic intervals
6. Walking through an AWS Cloudformation yaml template that will create the Lambda function and Cloudwatch rule automatically and covering all the benefits of using a Cloudformation template

---

This tutorial truly is end-to-end. If you enjoy the content, you can help me a ton by doing any or all of the following:

* [supporting me on Patreon](https://www.patreon.com/programmingwithalex)
* [subscribing to my YouTube channel](https://www.youtube.com/channel/UC4UApj67YtJq2a2PAzmbQAQ)
* liking and/or commenting on the video
* sharing the video or [channel](https://www.youtube.com/channel/UC4UApj67YtJq2a2PAzmbQAQ) on any platform ([reddit](https://old.reddit.com), [twitter](https://twitter.com/), [discord](https://discord.com/), etc.)
* [starring the GitHub repo](https://github.com/programmingwithalex/aws_lambda_demo)
* [following me on GitHub](https://github.com/programmingwithalex)

---

Any questions or requests, just leave a comment.
Deploying Grafana Image to Azure Container Registry Using Azure CLI
Tags: azure, grafana, docker, tutorial
Published: 2022-07-09 13:50:58

**Goal :**

- Create Grafana Image to Azure Container Registry using Azure CLI

**Result** 
> 

- Private Container Image rather than Public Docker Hub Image.

**Script**

```
$ResourceGroupName	= "suryarg"
$LocationName		= "eastus2"
$ACRName			= "suryacr"
$ACRUrl 			= "$ACRName.azurecr.io"

#Create a resource group
az group create --name $ResourceGroupName --location $LocationName

#Create a container registry
az acr create --resource-group $ResourceGroupName --name $ACRName --sku Basic --admin-enabled true


#Log in to Azure Container Registry
az acr login --name $ACRName


#First Pull latest Grafana Image from DockerHub
docker pull grafana/grafana:latest

#Then Push into Azure Container Registry
docker tag grafana/grafana:latest $ACRUrl/grafana:SuryaLatest
docker push $ACRUrl/grafana:SuryaLatest
```

**Result**


![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln6e3hg0o2n58ii99ldu.png)

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abk92wvv1gs7v5sspq4f.png)
Have you seen this sexy button?
Tags: webdev, opensource, showdev
Published: 2022-07-09 13:46:52

CRED recently open-sourced its NeoPOP design system. 

NeoPOP, is inspired by the philosophy and aesthetic principles of the Neo-pop movement - something that played a transformational role in the progress of art beyond the conventional milieu.

We at CRED believe in sharing our work and our learnings for the benefit of the larger community.

**because art belongs to everyone.**

NeoPOP design system includes hell lot of sexy components like ScoreMeter, Checkbox, ElevatedCard, & Button etc.

Checkout the sexy NeoPOP button

{% embed https://codesandbox.io/embed/neopop-button-s8kgt7?fontsize=14&hidenavigation=1&theme=dark %}

This is too sexy, isn't it?

## Foundation
- [Colors](https://playground.cred.club/?path=/docs/foundation-colors--page)
- [Typography](https://playground.cred.club/?path=/docs/foundation-typography--heading)
- [Layouts & Spacing](https://playground.cred.club/?path=/docs/foundation-layout--row)
- [Miscellaneous](https://playground.cred.club/?path=/docs/foundation-miscellaneous--cross)

## Components List
- [Bottomsheet](https://playground.cred.club/?path=/docs/components-bottomsheet--default-story)
- [Button](https://playground.cred.club/?path=/docs/components-button--sample-button)
- [Checkbox](https://playground.cred.club/?path=/docs/components-checkbox--single-checkbox-with-label)
- [ElevatedCard](https://playground.cred.club/?path=/docs/components-elevatedcard--basic-card)
- [Header](https://playground.cred.club/?path=/docs/components-header--header-with-heading)
- [InputField](https://playground.cred.club/?path=/docs/components-inputfield--input-field)
- [Radio](https://playground.cred.club/?path=/docs/components-radio--basic-radio)
- [ScoreMeter](https://playground.cred.club/?path=/docs/components-scoremeter--score-meter-dark)
- [SearchBar](https://playground.cred.club/?path=/docs/components-searchbar--search-with-icon)
- [Slider](https://playground.cred.club/?path=/docs/components-slider--slider)
- [Tags](https://playground.cred.club/?path=/docs/components-tags--success)
- [Toasts](https://playground.cred.club/?path=/docs/components-toasts--error-toast)
- [Toggle](https://playground.cred.club/?path=/docs/components-toggle--toggle-on)




{% embed https://github.com/CRED-CLUB/neopop-web %}

Storybook Playground: https://playground.cred.club
Reference: https://cred.club/neopop
React native flexbox
Tags: reactnative, webdev, javascript, programming
Published: 2022-07-09 13:45:19

### Intro

Today is actually a day i enjoyed. I gained the knowledge on flexbox in react native. according to the documentation flex defines how items are going to fill over available space along main axis. In react native,the main axis is the column.

``` javascript 
MAIN - flex:1
   item-1:flex-1
   item-2:flex-2
   item-3:flex-3

1+2+3=6
item-1 - 1/6
item-2 - 2/6
item-3 - 3/6

```
- `flexDirection` - column,row,row-reverse
- `layoutDirection` - LTR,RTL
- `justifyContent` - align along main axis - flex-start,flex-end,center
- `alignItems` - along cross axis.
- `alignSelf` - individual item.
- `alignContent` - flexWrap must be present. defines distribution along cross-axis.
- `flexWrap`
- `flexBasis` - axis independ way of providing the size of an item. if direction=column,height else width.
- `flexGrow` - how item grows in relation to siblings. If 2,grows 2 times larger than siblings.
- `flexShrink`

### position
`position` : absolute | relative.

### size
`width|height`:'100| "10%" | auto'

Article originally published at [melbite.com/react-native-flexbox](https://melbite.com/Anonymous-Guy/QsgCmk7zpyqvP6DKtqrK)

Check more articles just like this on https://melbite.com
TypeScript Array Type
Tags: typescript, javascript, webdev, tutorial
Published: 2022-07-09 13:34:42

Arrays work the same in TypeScript as they do in Javascript, the only difference being that we have to define their type upfront. Arrays, by their nature, are an ordered list of data. Defining an `Array`s type can be confusing at first, so let's look at how it works.


## Defining Array Types in TypeScript
If we have an array, we can define its type in TypeScript by using the notation `type[]`. For example, the below variable `arrayType` is expected to be an **array** of **strings**.

```typescript
let arrayType:string[] = [ 'hello', 'there' ]
```

Similarly, an array of numbers could be defined like this:
```typescript
let myNumbers:number[] = [ 1, 2, 3, 4 ];
```

This also conforms any future array items to that type. For example, we couldn't push or add a `string` to the end of an array defined as type `number`:
```typescript
let myNumbers:number[] = [ 1, 2, 3, 4 ];
// Throws an error.
myNumbers.push("string");
```

## Tuple Types in TypeScript
[I've already written about tuples in TypeScript here](https://fjolt.com/article/typescript-tuples), but they are a type of array with a defined number of items, of specified types. For example, we could define an array with two elements, of type `string`, and `number`, and this would be called a **tuple**. That could be achieved by doing something like this:
```typescript
let myTuple:[ string, number ] = [ "hello", 20 ];
```

Tuples can be of any length, and [you can learn more about how tuples are defined here](https://fjolt.com/article/typescript-tuples).


## Storing a Mixture of Types in an Array in TypeScript
Sometimes, we know an array is going to consist of either `number` or `string` elements, but we're not sure in what order, or even how many. As such, a **tuple** isn't really the right option here. Instead, we can define an array like this using the same format as before, only letting TypeScript know that it can be multiple types.

For example, for an array of unknown length where any item could be either a `number` or a `string`, we could write the following:
```typescript
let type:(string | number)[] = [ 'hello', 'world', 20, 40, 'goodbye' ];
```


## Using the Generic Type format for Arrays in TypeScript
Finally, it is also possible to use the [generic type](https://fjolt.com/article/typescript-generics) definition format for defining `Array` types in TypeScript. For example, an `Array` of numbers could be defined like so:
```typescript
let type:Array<number> = [ 0, 1, 2, 3, 4, 5 ]
```

Or, an array where items could be either a `string` or a `number` could be defined like so: 
```typescript
let type:Array<string | number> = [ 'hello', 'world', 20, 40, 'goodbye' ];
```

## Conclusion
Understanding the array type in TypeScript is fundamental for using TypeScript day to day. I hope you've enjoyed this guide, and [if you want more TypeScript content, you can find it all here](https://fjolt.com/category/typescript).
exclamation + Enter not working in html
Tags: vscode
Published: 2022-07-09 13:34:30

Dear friends, I am quite a while fighting the problem my exclamation + enetr shortcut is not working in html file. I did try many solutions such as settings of programming lenguage, default settings (json), not sure with the correct valuese there but I belive i have them ok. Finaly I reinstalled my vs code remains unchanged including settings extentions etc so the problem remains too:(