teleren/devto huggingface dataset:
Laravel Top Tip of the Week!
Tags: laravel, webdev, todayilearned, todayisearched
Published: 2022-01-19 19:02:25

Hello Friends ! This is my top tips for sentient Laravel developers out there ! By the way, I will be sharing these top tips every week, so don't forget to follow me on [@Twitter](https://twitter.com/human_priyank).

You must have been thinking why i must read these article when there are thousands of them out there on internet. But here we follow some structure to provide the top tips, and I have structured it in such a manner that the reader should be able to know **WHEN TO USE IT**.

**_Question/Situation_** - You want to know How to send more than one http request in Laravel? In other words, you want several requests to be dispatched at the same time instead of issuing the requests sequentially. 

**_Answer_** - TopTip #1 
You might think about running http requests concurrently to improve performance. The HTTP client's 'pool' method makes this a trivial exercise.

The pool method accepts a closure which receives an Illuminate\Http\Client\Pool instance, allowing you to easily add requests to the request pool for dispatching.

Here's how you can use it !

![Laravel pool method code snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyr876ziicfh9jgtn1bc.png)

Final Thoughts - This was my first attempt on Dev.to and infact sharing something I feel is valuable and helpful for you people.
Welcome Thread - v160
Tags: welcome
Published: 2022-01-19 18:57:36

---
title: Welcome Thread - v160
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Nick Cage windshield wiper waving hi](https://media.giphy.com/media/5xaOcLSiHjl31yG4ZNK/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Weather app
Tags: javascript, html, css
Published: 2022-01-19 18:40:28

<p>The Weather App In Javascript is a fun project that focuses on simple weather forecasting. The user can examine the current state of the climate probability and forecast whether the day will be sunny or cloudy. In the software, the user can write down the name of any city in the world. This Javascript Project With Source Code was created with JavaScript, CSS, and HTML.</p>

👉 Live Demo🔴:- shorturl.at/juHX8
Wednesday Links - Edition 2022-01-19 
Tags: jvm, spring, security, microservices
Published: 2022-01-19 18:39:35

Log4Shell rides again (8 min) 🙈
https://nakedsecurity.sophos.com/2022/01/07/log4shell-like-security-hole-found-in-popular-java-sql-database-engine-h2/

Make Buffer Channels great again (8 min) 🤯
https://blogs.oracle.com/javamagazine/post/java-nio-nio2-buffers-channels-async-future-callback

What's new in Spring Boot 2.6? [webinar] (30s) 🌱
https://twitter.com/springcentral/status/1481988517538381826

Java 17 deep dive (3h to watch) 🥸
https://inside.java/2022/01/11/java-17-deep-dive/

Don't catch stackoverflow (6 min) 👻
https://jaokim.github.io/2022/01/11/stackoverflow.html

Security Manager case again (8 min) 💩
https://blog.frankel.ch/running-untrusted-code/

Truth about microservices (16 min) 🤔
https://arnoldgalovics.com/truth-about-microservices/

Gif deep dive (20 min) 🧪
https://blog.darrien.dev/posts/you-dont-know-gif/

Good enough error message (10 min) ❤️
https://www.morling.dev/blog/whats-in-a-good-error-message/

Fastest way of serialization (9 min) 💨
http://minborgsjavapot.blogspot.com/2022/01/did-you-know-fastest-way-of-serializing.html

Cost of Attrition (3 min) 🔬 
https://benjiweber.co.uk/blog/2022/01/12/cost-of-attrition/
Collects visitor reviews, and displays them as a widget on your website.
Tags: javascript, programming, startup, tutorial
Published: 2022-01-19 18:35:37

We provide a widget to measure level of trust to your website from your visitors. It's percentage based and has a range from zero to 100% based on visitor votes.

[X5soft.com](http://x5soft.com) automatically collects visitor reviews, and displays them as a widget on your website. We are creating valuable user-generated content that directly enhances your online reputation and SEO - all at the lowest cost per review.

Trust impacts every buyer decision. While there are some things that you as a website owner can do to help build trust, often the most effective trust-building tools come through 3rd party social proof and online security solutions. Here at x5soft, our goal is to create the best tools online to help you to establish the highest possible level of trust and transparency with your customers in the shortest amount of time.

## Simple, Free! one-line integration with your website
Just copy script below & insert into your website head tag. That's it - widget installed. You are ready to collect reviews.

`<script async src="//x5soft.com/api/iz.js" owner="youremail@gmail.com" icon="#ffd700" auto="0" position="BR" style="black"></script>`


![Trust level measure for your website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iixnllu3t7q1vchg1nd.jpg)
Hiding and Revealing things with JavaScript pageYOffset
Tags: javascript, tutorial, webdev, scroll
Published: 2022-01-19 18:31:06

Quite a while ago I was cloning a website and I stumbled on something I was not familiar with. It took me a while to comprehend what exactly I was looking at. The website had a Navigation bar and that bar would hide itself when you would scroll down the page and shows p when you scroll up. Weird!

My first instinct told me that I could fix this using CSS at first.

```
.nav-bar{
display:hidden;
}
```
Hidden display was my first guess but I quickly realized that it completely hides the nav-bar (without ever returning). I thought a little harder and came to the conclusion that it has something to do with JavaScript because I believed that it could trigger a function that could execute IF a condition is met. The condition was that IF I scroll down, the nav-bar should be hidden or ELSE, keep showing the nav-bar. In order to deepen this explanation, an example can be provided. Jimmy wants a chocolate but his mother will not give him one. The chocolates are located in the kitchen cabinet. The only way Jimmy can get a chocolate is if he gets it into the kitchen, without his mom knowing, and taking from there. IF mom is not there then he can sneak into the kitchen quietly. But if she does come into the kitchen then he should hide quickly behind the kitchen counter.

Firstly, let us add an event listener. An event listener method allows JavaScript to constantly monitor the browser to see if specific conditions are being met (in your declared function). In this case, we want JavaScript to listen in on a scroll event. I named my function scrollDown because the conditions I shall list down only apply when I scroll down.

```
window.addEventListener("scroll", scrollDown);
/* 'e' parameter stands for event */
function scrollDown(e) {
    let navigation = document.getElementById("nav-bar");
    if(window.pageYOffset > 500){
        navigation.style.display = "none";
    }
    else{
        navigation.style.display = "block";
    }
}
```
Start by declaring a navigation variable that get the Identification from your html so that Js knows what your are referring to. Secondly, we shall refer to the Y-axis because we are scrolling vertically. JavaScript calls this pageYOffset. So, If the pageYOffset is greater than 500px then hide the navigation. If the condition is false then show it again. The code works but only half way. We need to work on the other half, the part when we scroll up. The problem is that when we scroll up, the nav-bar does not appear again.

```
window.addEventListener("scroll", scrollUp);

function scrollUp(e) {
    let navigation= document.getElementById("nav-bar");
    if(window.pageYOffset <500){
        navigation.style.display = "block";
    }
    else{
        navigation.style.display = "none";
    }
}
```
Now that the code works, go and have fun with it. Maybe you can change the words of a heading as your scroll down. Or change the color of the nav-bar as you scroll.

Thanks for reading!
Fundamentos de TypeScript 🦆| #9: Narrowing
Tags: typescript, webdev, spanish, beginners
Published: 2022-01-19 18:20:10

Es una técnica que se usa sobre todo en los parámetros de una función. Consiste en que por medio de validaciones podamos modificar el flujo de la función dependiendo si sus parámetros aceptan varios tipos de datos a la vez mediante uniones de tipos.

La forma más común de Narrowing se observa usando el operador `typeof` y condicionales, de este manera podemos controlar cómo actuará esa función de manera controlada y evitando bugs.

Veamos algunos ejemplos para comprender todo esto.

```ts
//creamos una tupla de strings
const choices: [string, string] = ['NO', 'YES'];

const processAnswer = (answer: number | boolean) => {
  if (typeof answer === 'number') {
    console.log(choices[answer]);
  } else if (typeof answer === 'boolean') {
    if (answer) {
      console.log(choices[1]);
    } else {
      console.log(choices[0]);
    }
  }
}
processAnswer(0);       // Prints "NO"
processAnswer(true);    // Prints "YES"
```
Analicemos la función `processAnswer`, sólo recibe un parámetro `answer` que puede ser `number` o `boolean`.

* Si `answer` es `number`:
Accedemos a la tupla `choices` en la posición que le pasemos, siendo `choices[0] = 'NO'` y `choices[1] = 'SI'`; ergo, si llamamos a la función `processAnswer(0)` obtendremos como salida `NO`.

* Si `answer` es `boolean`:
Si `answer` existe entonces regresamos `choices[1]`, osea `SI`.
Si `answer` no existe entonces regresamos `choices[0]` osea `NO`.

¿Bastante fácil verdad?

Veamos otro ejemplo:

```ts
function roughAge(age: number | string) {
  if (typeof age === 'number') {
    // In this block, age is known to be a number
    console.log(Math.floor(age));
  } else {
    // In this block, age is known to be a string
    console.log(age.split(".")[0]);
  }
}
roughAge('3.5');  // Prints "3"
roughAge(3.5);    // Prints 3
```
La función `roughAge` recibe un solo parámetro `age`, nuevamente evaluamos que hará:

* Si `age` es `number` redondeamos el valor hacia abajo con `Math.floor()`, por ello llamar `roughAge(3.5)` regresa el número `3`.

* Si `age` es `string` usamos el método `split` de las cadenas y obtenemos la primera posición de dicha cadena. Por ello si llamamos `roughAge('3.5')` obtenemos `'3'` como `string`.

## **Conclusiones**
- Narrowing es un técnica muy poderosa y sencilla de comprender para que el flujo de las funciones hagan lo que nosotros necesitamos.
- Usualmente `typeof` será nuestro mejor aliado al momento de hacer Narrowing.


## **Referencias**
* [learn-typescript-type-narrowing](https://www.codecademy.com/learn/learn-typescript/modules/learn-typescript-type-narrowing/cheatsheet)
* {% instagram CXPPxDOI7SJ %}
Have you been hearing a lot about crypto assets and the concept of NFTs? 
Tags: blockchain, beginners
Published: 2022-01-19 18:19:26

#Let's delve into why they are such a hot commodity. 

##Firstly what does NFT even stand for!!!

NFTs stand for "non-fungible-tokens".

Ops. That doesn't make it any better. 
"Non-fungible" more or less means that it is unique and can not be replaced with something else.

It is like a one of a kind sneaker, if you traded it for something else, you would be having something completely different.


##So how do these "NFTs" work?

At a very level, most NFTs are part of the Ethereum blockchain (or any other blockchain for that matter).Ethereum blockchain supports these NFTs, which store extra information that makes them work differently from, say, an ETH coin.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgjtftzyzfv9bk7eklc5.png)
 
## Will it become something like art collecting?

Some people would be hoping so.Like whoever paid almost $390,000 for a 50-second video by Grimes or the person who paid $6.6 million for a video by Beeple.

But you can find and download the video that a person paid millions for. You can copy a digital file as many times as you want, including the art that’s included with an NFT.

Just like this.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56yzbelcbcqnht6j7maw.png)
 
But NFTs are designed to give you something that can’t be copied: ownership of the work. 

To put it in terms of physical art collecting: anyone can buy a Monet print. But only one person can own the original.

## What is the difference between NFTs and cryptocurrencies?

NFTs are often programmed in the same way as cryptocurrency, such as Bitcoin or Ethereum, is programmed, but that's where the resemblance ends.

Physical money, stocks, and cryptos are fungible, meaning that they can be exchanged for one another.

NFTs are different. Each has a digital signature that makes it impossible for NFTs to be equal to one another.


##But why would you be willing to pay big bucks for something that just might amount to a trading card?

Sure NFTs are risky and the future is uncertain in that regard.

NFT’s value is based entirely on what someone else is willing to pay for it. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywaa9foz995zik6l9l73.png)

Therefore, demand will drive the price rather than fundamental, technical, or economic indicators.

---

Thanks you for Reading the entire post. If you enjoyed and wish to read similar content do follow me on [Twitter](https://twitter.com/grover_sumrit)
How to use constructor tear-offs in Dart
Tags: dart, flutter, tutorial, programming
Published: 2022-01-19 18:08:01

In Dart 2.15, it was [announced](https://medium.com/dartlang/dart-2-15-7e7a598e508a) a new language feature called constructor tear-offs. Now, you can treat constructors as regular functions that returns an instance of a class.

---

## Enabling constructor tear-offs

To use this feature, you just have to have Dart 2.15 (or any higher version) installed in your system:

```sh
$ dart --version  
# Dart SDK version: 2.15.1 (stable) ...
```

At your `pubspec.yaml`, it is import to update the SDK version to have 2.15 (or any higher version installed in your system) as the minimum version:

```yaml
...
environment:
  sdk: ">=2.15.0 <3.0.0"
...
```

---

## Examples with Flutter

**1** - Let's think in a simple example:

```dart
Column(
  children: ['Apple', 'Orange'].map((word) => Text(word)).toList(),
);
```

With constructor tear-offs, you can simplify this expression as the following:

```dart
Column(
  children: ['Apple', 'Orange'].map(Text.new).toList(),
);
```

**2** - Code abstraction is also made easier with this syntax:

```dart
Widget widget;

switch (type) {
  case "outlined":
    widget = OutlinedButton(
      onPressed: () {},
      child: const Text("Button"),
    );
    break;
  case "text":
    widget = TextButton(
      onPressed: () {},
      child: const Text("Button"),
    );
    break;
  default:
    widget = ElevatedButton(
      onPressed: () {},
      child: const Text("Button"),
    );
}
```

Abstracting...

```dart
Function button;

switch (type) {
  case "outlined":
    button = OutlinedButton.new;
    break;
  case "text":
    button = TextButton.new;
    break;
  default:
    button = ElevatedButton.new;
}

Widget widget = button(
  onPressed: () {},
  child: const Text("Button"),
);
```
HTML 5 - The Brainstorm!
Tags: html, beginners, programming, tutorial
Published: 2022-01-19 17:44:36

Hello tribe! today we are going to talk about the html tags that go inside the head of the document! Bring out the umbrella because it's raining brains! halleluyah! 🎼

As we had mentioned so far, in the structure of an HTML document there are two main HTML tags: "head" and "body" . The head tag contains the metadata tags (information about the document) as well as making connections or relationships with other documents and the body tag allows us to display the content.

## "Connection" tags: 

- Title : title of the web page
- meta: where you set data such as the language developed on the page. 
- Script: to load js 
- Style: to load css on the current page 
- Link:In my opinion the most important because it allows to load css, improves SEO, establishes relationships with other pages, or alternative versions of our website etc...  It is the Swiss knife of tags! 

### Examples

```html
<head>
        <title>My cute page</title>
        <meta charset="utf-8">
        <link rel="alternate" href="document-en.html" hreflang="en" /> //create a alternative page
</head>
```

👁  Script is best placed in the body and Style with a link.

## Meta tag: 

Perhaps the tag with the greatest number of possibilities in the header of an HTML document is the <meta> tag. In it, and through attributes, we can indicate a large amount of metadata to the document.

Meta has the following attributes: 

- description
- keywords
- author
- language
- generator
- theme-color	
- viewport


If you want me to go deeper into tags, let me know in the comments! Well tribe that's all for now, see you in the next post and remember to always be the best version of you!
Create Static Website on AWS using Terraform
Tags: aws, terraform, webdev, html
Published: 2022-01-19 17:35:24

In this post, you learn how to use Terraform to create a static website on AWS. This example is suitable for scenarios where you have a frontend team working on a static web application. (not ideal for dynamic websites like mvc applications in ASP.NET) Moreover, you would generally use such pattern in larger applications, not for small blogs or single page applications. 


First thing's first, let's initialize a Terraform project project. To do that create a file called configuration.tf (the name doesn't really matter, only the suffix) and add the following:

    provider "aws" {
      region = "eu-central-1"
    }


Then run the following command to initialize the project:

    Terraform init

Using the configuration.tf file, terraform will know that provider you need and pulls the dependencies for you.

Then, in the main.tf file (create it if it doesn't exist) create a s3 bucket using the following command:

        resource "aws_s3_bucket" "bucket" {
          bucket = "youruniquebucketname"
          acl    = "public-read"
        
          provisioner "local-exec" {
              command = "aws s3 sync static/ s3://${aws_s3_bucket.bucket.bucket} --acl public-read --delete"
        
          }
        
          website {
            index_document = "index.html"
          }
          
        }


In the first line, you create the bucket resource, second line is the name, the next is the access control list (must be public). The provisioner resource will copy a basic aws command, syncing the contents of the static folder (which is where you put your static content) to the bucket. You could also use the copy command, but I find sync more convenient, as it also can delete files in the target bucket. 
At last, you can also make sure that index_document is pointing to your index.html file.

Then go ahead and paste your static content in the static folder.
Now we can deploy to AWS.
Use "terraform plan" to see what will be deployed. Then, using "terraform apply" you can deploy to your aws account.

The youtube video: https://www.youtube.com/watch?v=UU3drURkTtw
Arjditor
Tags: react, node, mongodb, webdev
Published: 2022-01-19 17:30:00


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

## To visit *Arjditor*, click [here](https://arjditor.herokuapp.com/)
## To check out the *Github Repo*, click [here](https://github.com/jaydip1235/Arjditor)
## To watch the *Demo Video*, click [here](https://youtu.be/WegpX5JICYA)


## **Developed By**:
 ➤ [Jaydip Dey](https://github.com/jaydip1235)

 ➤ [Archan Banerjee](https://github.com/ArchanJS)

 ## **Feature**
✅ Supports 7 programming languages including C, C++, Java, Python etc.

✅ Users can select themes (github, monokai etc.) according to their choices .

✅ They can also choose the font size.

✅ It also serves the purpose of running the code with or without input as per the user's choice.

✅ Users can generate the URL using the *Run and Generate URL* button and can share their codes to others. Others can view the the same code with the URL.
## **How to run locally**
➡️ Clone the repository

➡️ Create a config.env file and add MONGO_URI and PORT with your own credentials.

➡️Run **npm install** both inside the client folder and the root folder.

➡️Run **node server** in the root folder and **npm start** in the client folder.

➡️App starts running on port 3000. You are good to code!

## Do ⭐ the repo if you like and feel free to contribute by PR
1 line of code: How to replace multiple spaces with one space
Tags: javascript, webdev, productivity, codequality
Published: 2022-01-19 17:02:25


```javascript
const multiToSingleSpace = str => str.replace(/  +/g, " ");
```
Returns the string with multiple spaces reduced to one space
---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---