teleren/devto huggingface dataset:
Laravel contains() & containsStrict() Method
Tags: php, laravel, programming, beginners
Published: 2022-01-12 09:33:03

Let's get started quickly, I found two great Method contains() and containsStrict() so you can use them in your next projects
- Check if Laravel Collection contains value
Let's review an example with one parameter (checking only value)
```php
$users = collect(['name' => 'John Doe', 
                  'email' => 'johndoe@example.com']);

$users->contains('John Doe'); // true
$users->contains('John Admin'); // false
```
- Check if Laravel Collection contains key/value pair
Let's review an example with two parameters
```php
$collection = collect([
	         ['id' => '200', 'amount' => '500'],
		 ['name' => '201', 'country' => '200'],
              ]);

$collection->contains('amount', '500'); //true
$collection->contains('id','500'); //false
```
- Check if Laravel Collection contains value using callback function
Lastly, you can also pass callback function with your own matching expression to check whether laravel collection or eloquent collection contains given value or not
Let's try an example with eloquent collection this time
```php
$products = Product::all();
/*
Illuminate\Database\Eloquent\Collection {#4618
     all: [
				App\Product {#123
					id: 1,
					name: "Macbook",
					product_count: 2
				},
				App\Product {#123
					id: 1,
					name: "iPhone",
					product_count: 20
				},
			],
		}
*/
$products->contains(function($product, $key) {
			return $product->product_count < 5; 
	  }); //True

$products->contains(function($product, $key) {
			return $product->product_count < 1;
	  }); //False
```
- Laravel containsStrict() Method
Laravel Collection's containsStrict() method function same as contains() method except it checks for value using strict comparison i.e matches value type as well
If you don't know about strict comparison, in PHP === and !== are strict comparison operators and it compares both value and type. Example: 20 and "20" are not equal in strict comparison but are same in regular comparison
```php
$collection = collect(["10","11","12"]);

$collection->containsStrict("10"); //true

$collection->containsStrict(10); //false
```
I hope you enjoyed the code
Source :- https://www.parthpatel.net/laravel-contains-method-example/
Remix.run create resource route along with a UI route
Published: 2022-01-12 09:29:32

Some websites like Reddit expose a `.json` endpoint alongside each post. For example, the posts shown in `https://www.reddit.com/r/rickroll/` are also exposed in `https://www.reddit.com/r/rickroll.json`.

Here's how we can do the same in Remix:

If `$postId.tsx` was our post's UI route, we can create a file called `$postId[.json].ts` with the following:

```ts
export { loader } from "./$postId";
```

Note that we escape `[.json]` due [to Remix conventions](https://remix.run/docs/en/v1/guides/resource-routes#url-escaping)
Some Import React Questions Answer
Published: 2022-01-12 09:20:45

**About JSX**
JSX stands for JavaScript xml. We write html inside the JavaScript because of  Jsx and place it in the Dom without using a function such as createElement().Jsx provides syntactic sugar for react createElement() function.
Characteristic of JSX:  
JSX makes provide it easier to develop react application
Jsx allows write the expression {}.
Jsx follow xml rule.
It is faster than regular JavaScript 

**Props and State**
 Props read only can not change. Props can be passed to the child component. Other hand, the state is mutable. Can be passed to the child component.

**About UseState**
useState is a hook. inside the functional component we store data or  call the state. 
1.state management 
2.conditional rendering 
3.toggle flags 
4.counter
5.get Api data and store in the state

**React component lifecycle**
every component has its own lifecycle. So react has its own life cycle. React lifecycle components  can define the series of methods that call different stages in the component existence. React component go through through four stage 
1.Initialization.
2.Mounting.
3.Updating.

**Custom Hook**
when we need to reuse stateful logic between the component. We have add component. Custom hook let us to reuse the component without adding component.


**Context**
Context provide a way to pass data through the component tree without having to pass props. Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
Easiest way return largest numbers in arrays - Daily JavaScript #6
Tags: javascript, node, webdev
Published: 2022-01-12 09:20:06

`Hello 👋`,
 It is very easy to do 🙂

```js
function largestNumber(arr) {
    // You can do this!
    const largest = [];
    for (let i = 0; i < arr.length; i++) {
        largest.push(Math.max(...arr[i]));
    }
    return largest;
  }
  
  console.log(largestNumber([[105, 35, 63, 89], [130, 270, 128, 216], [312, 335, 357, 399], [1000, 1001, 857, 1]]))
```
 
This was a quick article, I hope it helped you

***
Thank you for reading, have a nice day!

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
ES6: let and const keywords
Tags: javascript, webdev, tutorial, node
Published: 2022-01-12 09:10:33


## Introduction

In this blog article, we shall see various language features, introduced in ES2015(ES6) JavaScript version.

A list of a summary of the language features can be found in this previous [ES6 and modern JavaScript](https://dev.to/naftalimurgor/es6-and-modern-javascript-4nje).

Let's look at `let` and `const` keywords.

### 1. `let`, `const` keywords
In ES6, the `var` keyword has been deprecated in favor of `let` and `const` keywords in variable definition, declaration and initialization.

`let` is used to declare block-scoped variables.
```typescript
var pov = 180 // don't use this
let pointOfView = 180 // reassignable, do this
pointOfView = 360 // change
```

`const` behaves similarly to `let` except that once variables are declared and initialized, they may never be reassigned once declared and initialized.

```typescript
// declare constants using const
const THREAD_COUNT = 18 // must be declared and initialized in one line
const MAX_THREAD_COUNT //  Uncaught SyntaxError: Missing initializer in const declaration 
// somewhere later: 
MAX_THREAD_COUNT = 18 
```

For object literals, changing values stored in object properties work but reassigning the declared object throws an error.
```typescript
const hero = {
  name: 'Naruto',
  age: 15,
  jutsu: 'shadow clone justsu',
  residence: 'Hidded Leaf Village'
}
```

`hero.name = 'Sasuke'` alters the value stored in object property `name` of the `hero` object. However, reassigning the object like:
```typescript
// reassigning the variable
// Uncaught TypeError: Assignment to constant variable.
hero = {
  name: 'Sasuke',
  age: 15,
  jutsu: 'Fireball Jutsu',
  residence: 'Hidden Leaf village'
}
```

### Summary
ES6 introduces `let` and `const` keywords in place of `var` keyword in declaration and initialization of constants and variables.

Use let to declare a variable that will change/be reassigned later and const for constants that are unlikely to change as the program executes.

Read more about 👉 [Arrow functions](https://dev.to/naftalimurgor/es6-arrow-functions-explained-kh7)
Send SMS from your Website or App
Tags: webdev, tutorial, csharp, dotnet
Published: 2022-01-12 08:52:02

I this video we will look at the Twilio SMS API Tutorial. Through Twilio's SMS API we can send SMS To Users From Your Website or Application.

{% youtube b8Od7uxc7Yo%}

We need to create an account with Twilio so go to twilio.com and click on the signup page to create a new account.
Once you are verified you will come to this page.
Here we will configure twilio for the services we want to use.

I will select SMS as the product that I want to use for this video, and then I want to use this to send notifications to users of my application or website but you can choose based on the use case that you have for your website.

I am redirected to console.twilio.com where on the home page I can see an account Id and auth token generated for me.
As it says over here, you have to store your auth token securely so that that no body can use your Id and token to access the apis that twilio offers.

If you have a front end website that want's to send sms's to users, please use an API or serverless code of your choice and then send SMS's from there.

I also have been given a trial balance of $15 which is perfect for this demo, you can add your billing details and go to pricing to check how much does it take send and recieve messages with Twilio.
Laravel Components to keep your Code Clean
Tags: laravel
Published: 2022-01-12 08:45:41

In one of our recent Project, we had to create a lot of Forms using Livewire. The Forms were rather simple as can be seen from the following screenshot. The Forms were built on top of Laravel Breeze which comes up with some handy components for Form. However, even after using these Components, the View File had a lot of repeating HTML.

![Preview](http://www.ascsoftwares.com/wp-content/uploads/2022/01/add-form.png)

Our View File looked like below:

![Preview](http://www.ascsoftwares.com/wp-content/uploads/2022/01/add-form-html-1024x724.png)

As you can see even with after using the Components for Label, Input and Error Message, there is still a lot of HTML which is just repeating with minor changes for each field. We decided to further organize the things by creating a Separate Component for Input Field Group which would consist of a div and then the Label, Text Input and the Error Field Component.

We created a folder `form-group` inside the `resources/views/components` Folder. And within that we created a file input.blade.php.  We noticed that for each Input Form Group only label and the name are different. So we created them as `@props` in our Component. Our File looked like below:

```
@props(['label', 'field'])

<div class="mt-4">
    <x-label>{{$label}}</x-label>
    <x-input class="block mt-1 w-1/2" type="text" wire:model.defer="{{$field}}" />
    @error($field) <x-error-message>{{$message}}</x-error-message> @enderror
</div>
```

So now in order to display the Name Field all we had to use the above component and pass the props as below

```
<x-form-group.input label="Name" field="product.name" />
```

By creating similar Form Group Components for Select, Textarea and other fields we were able to reduce our View File as below:

![Preview](http://www.ascsoftwares.com/wp-content/uploads/2022/01/add-form-formatted-html-1024x292.png)

This looks much more compact and easy to read with all the noise being removed. Depending upon the requirements, we can easily make the components defined under `form-group` to accept attributes and make more dynamic.

Hope you have enjoyed this Article. Let us know in comments, how you use Components to keep your View File Clean. For similar articles, you can follow me on [Twitter](https://twitter.com/TheLaravelDev)
Adding Annotations to Blazor Maps
Tags: blazor, webdev, csharp, dotnet
Published: 2022-01-12 08:38:46

Learn how easily you can add annotations to Syncfusion [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map). In this video, you will learn how to add image and text annotations to Blazor Maps. You will also see how to position and align the annotations. 

Explore our tutorial videos: https://www.syncfusion.com/tutorial-videos

Download this example from GitHub: https://github.com/SyncfusionExamples... 

{% youtube 5VKuHxPwEbo %}
Knowledge Transfer Project for Mongo Atlas Hackathon.
Tags: atlashackathon, react, javascript, mongodb
Published: 2022-01-12 08:35:33

### Overview of My Submission

**Knowledge Transfer**, is a web app built for the purpose of Mongo Atlas Hackathon. The technologies used in this project are (MERN) Mongo Atlas (MongoDB), ExpressJS, NodeJS, ReactJS. 

The idea of this project is that anyone who is having used books can sell them online and anyone who wants to buy used book can buy here.


### Submission Category: 

This project is being submitted to the E-commerce creation category.


### Link to Code

You can find the code for this project here:

[https://github.com/Mahe6243/knowledgeTransfer/tree/main](https://github.com/Mahe6243/knowledgeTransfer/tree/main)

### Additional Resources / Info

Landing Page
![Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcswm3ys093xx67a98yf.png)

Signup Page
![Signup Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m995uoxhlmz5ttpv382q.png)

Login Page

![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5769sugonh4xhqo69lhh.png)

Sell Books Page
![Sell Books Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xogfzdsql6ahq88uii0e.png)

Buy Books Page
![Buy Books Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6qp01qf12wl7lv3apg8.png)

Search using **Mongo Atlas Search**

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

Cart Page

![Cart Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5yl6cawfd10yqtsw4b6.png)

Profile Page


![Profile Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvrhofd4ihk1sb26sxpl.png)

**Special mention to the team members**
Mahendra
@kotapatianuhya 
Vyshnavi

**Note**
This is our first ever hackathon and first ever project. It was a good experience.
Get Bluetooth Device Distance Using Javascript
Published: 2022-01-12 08:17:13

Distance between Bluetooth devices can be measured using RSSI value. Using the script presented in this article will help us to get device distance using BleuIO. 

This script scans for nearby Bluetooth devices and get an approximation of the distance by using well known RSSI to distance formula.

#### Requirments

- You need to have a BLE USB dongle BleuIO https://www.bleuio.com/
- To run the script, you need a web application bundler. You can use parceljs. https://parceljs.org/getting_started.html

#### Instructions

git clone https://github.com/smart-sensor-devices-ab/ble_distance_measure.git

Go inside the folder type in terminal

parcel index.html

The script will scan for five seconds for nearby devices. You can update the value based on your requirements.

You can also run this script from online at
https://smart-sensor-devices-ab.github.io/ble_distance_measure/dist/

**Make sure your BleuIO dongle is connected
![Connect Ble](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yc2ocop72piogd84u4i9.png)

![show ble device distance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4je48z12o0m7es4l0p7m.png)
  
Read more about how to calculate the distance
https://iotandelectronics.wordpress.com/2016/10/07/how-to-calculate-distance-from-the-rssi-value-of-the-ble-beacon/
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2022-01-12 08:00:07

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259a922f36.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q___: What is a developer's favorite country song?

___A___: Hello World - by Lady Antebellum
 -->
Yaraa.ai -  Digital Project manager for remote teams
Tags: flutter, productivity, programming, startup
Published: 2022-01-12 07:55:07

Yaraa Manager is the easiest way to manage teams, projects, and tasks. Yaraa is the only tool that Creates projects & Task Scheduling Without human Interaction. Team members can chat and talk with each other with ease. It gives teams everything they need to stay in sync, hit deadlines, and reach their goals.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3xfsj79ohbibw1k01b3.jpg)
- Digital Employee improve work efficiency by operating 24/7
- Automate your work processes with Digital Employee
- Empower your business for a Hybrid (remote + onsite) Work environment
- No English. No Worry. Speak in your language and get work done.
 
Contact us on: https://yaraai.com/
Email us at:  yaraa.bizsuite@gmail.com
How does React Work ?
Tags: react, javascript, webdev, beginners
Published: 2022-01-12 07:55:02

**React** uses the concept of `virtual dom` to present contents to the user. 

So, What is this **Virtual DOM** ?

You can think of it as the skeleton of the webapp. It helps react push updated in a faster and optimised manner without disturbing the existing components of the actual dom. 

For every update, React first updates the virtual dom. Everything is in JavaScript, so, it's much more faster and efficient that way. It then compares the previous virtual dom with the updated version and only updates the components that are actually changes and doesn't disturb the others.

This makes it extremely **efficient**. 

**Components : **

oh Okay, I forgot to tell you about **React Components** .
So, What are they ?

These are the building blocks of the React. Every react app is a collection of components arranged in a hierarchy. All kinds of branching and chaining takes place here. And everything is highly customisable.  

React Components consist of business login with some UI rendering code. 

```
function ReactComp(props) { 
    // some business logic goes here
    
    return (
        <div>component content goes here... ui codes.</div>
    )
}
```

Key Points about Components :
- Every Component starts with a Capital Letter
- `<></>` this represents an empty component.
- You cannot chain two elements without a parent element inside `()`. i.e. 
```
(
  <div>hello</div>
  <div>world</div>
)
```
is not allowed. It will throw you an error. You can at least enclose them with `<></>` this.

- You can enclose other components in another component. Like this, `<TestComponent <- you can pass props here -> />`. For example, `<TestComponent name={'sidhartha'} age={22} />`

**How Props Work ?** , we will learn more about that in the next blog...

React out to me [@mallicksidhartha7@gmail.com](mailto: TestComponent)
3 steps for setting a typescript project? [typescript setup]
Tags: javascript, programming, typescript, beginners
Published: 2022-01-12 07:19:33

[](url)
![How to setup typescript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogh3bcux6zsbqpsiq01f.png)

**What is typescript?**

A free and open source programming language created and maintained by Microsoft, TypeScript (https://www.typescriptlang.org). 

It adds types and more to JavaScript.Types can be added gradually. Specifying more types allows TypeScript to detect more errors.


1 - **Install: -**

_Node.js_
_Code Editor_ (VS code recommended)
_Install TypeScript_ (install -g typescript)


2 - **Initialize the project: -**

_Create Project folder_
_Init_ ( npx tsc –init )


3 - **ProjectName(root directory)/tsconfig.json** 
-- _Open & Setup_

```
{
   "compilerOptions":{
      "target":"es5",
      "module":"commonjs",
      "strict":true
   }
}
```

There will be many commented out default configurations. This configuration defines the version of JavaScript your TypeScript will be compiled into and the module system for your compiled program. When `"strict"` is set to `true`, a wide range of type-checking rules are enabled. As a result, your TypeScript program will have fewer errors.

```
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    _**"outDir": "dist",
    "sourceMap": true**_
  }
}
```

When the value of` "outDir" `is set to `"dist"`, a directory named dist will be created. The compiled JavaScript file will be placed in the dist file when you use <u>npx tsc</u> to compile your TypeScript file.

Setting "sourceMap" to true will allow you to quickly solve errors in the original TypeScript file.


Make sure you save file with .ts extention
Ready to write typescript Code !
NestJS MongoDB Basic Auth Rest API ⚡
Tags: programming, javascript, webdev, node
Published: 2022-01-12 07:17:53

Hi,
I created simple rest auth api with NestJS framework. Source codes are in the Github link at the bottom of the page :)

Framework: [NestJS](https://nestjs.com/)

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


![Swagger Auth Endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsz95krdme1m5f8j3xem.png)

**Packages**
- Nestjs
- Mongoose
- Passport
- Typescript

**Endpoints**
- /user/login (Post)
- /user/register (Post)
- /user/profile (Get)
- /user/:id (Get)

Ports and links can be edited from env file

- **API Url:** http://localhost:5050/api
- **API Swagger Url:** http://localhost:5050/swagger

Please follow and star ❤️⭐

**Source Code;**
[https://github.com/atakanuludag/nestjs-basic-auth-rest-api](https://github.com/atakanuludag/nestjs-basic-auth-rest-api)
SSH key nedir ve nasıl kullanılır
Published: 2022-01-12 07:12:32

## SSH key nedir 

Uzak bir sunucuya bağlanmak için şifre.SSH key oluşturduğumuz zaman farklı şifreler girmeye gerek kalmaz,şifreyi hatırlamamıza gerek kalmaz.

## SSH key nasıl kullanılır

`ssh-keygen -t rsa` : ssh key oluşturuyor.

`ls -al ~/.ssh` : ssh keyleri listeliyor.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ee4e2tslenevtirzh2pq.png)
Npm nedir ve nasıl kullanılır
Published: 2022-01-12 07:12:30

## Npm nedir

Npm 3.parti yazılımları yüklemeyi sağlayan bir araçtır.

**Npm'in kendi sitesindeki açıklaması:**

_“npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing”_ 

## Npm Kullanımı

Terminale npm yazınca çıkan görselde komutlar gösteriliyor.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmfqpa3mzhqi19qiuoqs.png)

`$npm list` komutunu kullandım.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmxs18953xygu8gbdr9j.png)