teleren/devto huggingface dataset:
Reference VS. Primitive Values
Tags: javascript, webdev, beginners, programming
Published: 2022-01-21 17:02:47

**Do you know there is two types of values in JavaScript ?**

_> primitive values and reference values._  

**You maybe know that but do you know what are the difference between those 2 types ? How they stores in memory ?**

_> if your answer is "no", not to worry, we are gonna discuss all this in details._  Just keep reading this blog 😊

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lq7q8r29r3kvz6ahlly.png)
In ECMAScript 2015  we were introduced more two primitive data types. There's a saying `Everything in JavaScript is a Object`, well almost everything except Primitive data types. 

**<u>Now let's see how Primitive values differs from Reference values :</u>**


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

If you come from different languages ( e.g : C/C#, Java ) you probably know the concept of  'PASS BY VALUE' & 'PASS BY REFERENCE'. 

In simple terms...

"**Passing by value**"_ means that you pass the actual value of the variable into the function. So, in your example, it would pass the value 9._
"**Passing by reference**" _means that you pass the variable itself into the function (not just the value). So, in your example, it would pass an integer object with the value of 9._


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

In JavaScript you can consider Primitives with Pass by value and Reference values with Passing by reference. Also in code snippet you can clearly show when change the value of obj1, changes are reflects to copied obj2 as well. But in case of primitives you just pass a copy of original value so after when you change the original it doesn't affect the copied value.  

**Primitives** : We store the actual value.

**Reference** : Here variable store the address where the data in heap memory is located. This doesn't store the actual value like primitives, instead a pointer or a reference to data. 


---

<u>**SUMMARY**</u>

<u>PRIMITIVES VALUES :</u>

- Value types are immutable.
- value types are compared by value.
- value types are copied by value. 
                   
<u>REFERANCE VALUES :</u>

- reference types are mutable.
- reference values are copied by address to memory or reference. 
         

If you find this blog helpful make sure to give it 💛, also can follow me on [Twitter](https://twitter.com/SURAJIT__SHAW) for more helpful resources and tips.
[GDB-Quick] Prints – No Need to do "std::cout" and compile again
Tags: c, cpp, gdb
Published: 2022-01-21 16:59:09

---
title: [GDB-Quick] Prints  – No Need to do "std::cout" and compile again 
published: true
description: like add couts, compile and run without that all.
tags: C,Cpp,gdb
//cover_image: https://direct_url_to_image.jpg
---

For debugging, most obvious way to start is adding print. 
When we have gdb, we dont need that (implied software built is in debug mode). 
Lets see alternate ways to do that in gdb.

### Printing Variable at some line.
We have breakpoints at hand. when breakpoint hits we can print variable values required or message needed (like which if-else branch taken (-_q), ¯\_(ツ)_/¯ ).

```
(gdb) break source.cpp:50  <enter>
(gdb) command <enter>
Type commands for breakpoint(s) 1, one per line.
End with a line saying just "end".
>print "hello World!" 
>end
```
When breakpoint hits on source file source.cpp at line 50 It prints "hello World!". No need to edit code or recompile it!

On breakpoint, we specify series of commands that need to process. it can be made simple as printing single variable to printing complete data-structure.

Same can be done with dprintf breakpoint and print, however first one provides more flexible and easy to use formatting. I hate dprintf!



### Print but more efficient
Our first command of use is
```
(gdb) print a
(gdb) p a
```
This is fine, even if we have array. 
At times we are interested in buffer contents irrespective of its data structure, treating it like memory area.
```
(gdb) print &a@10 
```
Above command accepts address and 10 further locations from it. try  a@10 and see how cool that feature becomes!

same with different formatting, printing 20('n'umber) 'f'ormat 'w'ords  with address a 
```
(gdb) x/20fw &a
```

We also want to check same variable at different breakpoints

```
display <var_name>
```
is easiest way than doing p <var_name> everytime.

HTH, Happy Hacking!
CodeSignal - Best coding challenge website
Tags: codesignal, javascript, webdev
Published: 2022-01-21 16:50:21

Throughout my journey learning front end web development I have been through a lot of different coding challenge websites.

A few months ago, I was introduced to CodeSignal, and have been using it ever since.

## First Impressions
I recently took an hour coding test on CodeSignal. After enjoying the experience, I signed up. I found the UI to be really fun and engaging. I’ve tried using other code challenge websites in the past, and always found them unnecessarily confusing, and lacking character. Meanwhile, I found CodeSignal to be full of color, with an easy layout to understand.

The basic version has two options.. Arcade or Interview Practice.
![Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/447sh4kjl5cz23qywnhe.png)


## Interview Practice
1. I find this feature to be really useful, and I appreciate the organization of the topics at hand. For example, the first topic is Data Structures, and it covers Arrays, Linked Lists, Hash Tables, Trees, Heaps, Stacks and Queues.

**Plus!** The challenges tell you which companies have asked them in the past.
![asked by Amazon, Microsoft and Apple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tqvhihs7pov90kkl92u.png)
 

## The Arcade
What a fun name for a place to drill no-context coding challenges day in and day out. The UI is an exciting place to be as well, making you feel like you are digging your well of knowledge deeper and deeper by taking advantage of the “endless scroll” that so many other websites take advantage of… but this time for good instead of evil!
![asked by Amazon, Microsoft and Apple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4gtjoyuz77emmjjvknj.png)


##My Approach
I use CodeSignal to practice for technical interviews.
I do one challenge per day, that consists of two 15 minute sessions.

*In the first 15 minutes*, I attempt to solve the challenge by myself, with no help from the internet. I make sure to document my thought process using comments.

*In the second 15 minutes*, I compare my answer and thought process to other correct answers. This is a feature I like about CodeSignal, once you solve the question, you unlock all of the other correct answers. It isn’t this easy on other code challenge websites. In some cases you have to spend coins to unlock the solutions.

Once the initial 15 minutes is up, if I haven’t solved the challenge… I google the answer. Although, instead of simply copy/pasting the answer and moving on, I compare the thought process of the answer I found to mine.

Overall, I think CodeSignal is the most useful code challenge website. I find it’s user experience to be really ergonomic and I plan on continuing to use it on a daily basis to improve my coding.
[Part 2] How to use redux thunk
Tags: react, redux, javascript, reduxthunk
Published: 2022-01-21 16:47:20

We need to example is loading component.
First, fixed constant in `./global/global.constant.js` file (example):
```
export const globalConstant = {
  SPINNER_LOADING: "SPINNER_LOADING",
};
```

Next, We need to create an `./global/global.action.js` file,  Redux Thunk allows you to write action creators that return a function instead of an action.:
```
export const globalAction = {
  spinnerLoading(isOpen) {
    return {
      type: "SPINNER_LOADING",
      isOpen,
    };
  },
};
```

And create an `./global/global.reducer.js` that take these actions and return a new state:
```
import { globalConstant } from "./global.constant";

export const GlobalReducer = (state = { loading: false }, action) => {
  switch (action.type) {
    case globalConstant.SPINNER_LOADING:
      return {
        ...state,
        loading: action.isOpen,
      };

    default:
      return state;
  }
};
```

## **How to use dispatch and selector**
Import `GlobalAction` from `./store/global/global.action` to `./App.js`

```
import { GlobalAction } from "./store/global/global.action";
```

and call `state` from `reducer`:

```
const { loading } = useSelector((state) => state.globalReducer);
```

Now, handle event to show loading:
```
<button
   className="..."
   onClick={() => {
      dispatch(GlobalAction.spinnerLoading(true));
   }}
>
  Click Loading
</button>
```

Next, run appilcation:

```
yarn start
```

Result:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2jpvme3vs47bap4rjnz.PNG)
 
You can view a demo of the website we’re creating [here](https://github.com/sirimainsorn/react-with-redux-thunk)
Project Amigo
Tags: programming, android, react
Published: 2022-01-21 16:41:02

What is the main problem we are facing today?
It is **Unemployment**.
Every year a lot of people are graduating from colleges but the sad reality is most of them don't get jobs and the one who gets the opportunity is not satisfied with his job.
The main reason what the recruiter points out is a lack of experience and knowledge. 
Sadly it is a true story. 
why don't have the experience?
Is it because there are no opportunities?
**No**.
It's because of the connection gap between the work and skill full people.

I have an idea!!
As we all know we are leaving in a tech-running world. What my app will do is, it a simple platform where anyone can post what he/she needed like, teaching, buying some items from a shop, installing some software, picking up and drop, helping in personal projects etc. whatever one posts in the amigo app.
Their will be always someone who can fix the issue. By doing that he/she can earn money by helping others.
By using my app we can create a friend circle and we can assign works to whom we trust. The barriers between work and skill full people can be broken down.
Get ASCII Code
Tags: javascript, showdev, html, webdev
Published: 2022-01-21 16:33:51

I made this this useless thing 🤩 by writing just 4 lines of JavaScript code. Press any key and you will get ASCII value.

[https://rahmanxyz.github.io/ascii-converter/](https://rahmanxyz.github.io/ascii-converter/)

Hey, My name is Hafizur Rahman and I'm a web developer.
If you interested in JavaScript then ping me at twitter @rahmanxyz
How To Add Facebook Chat Plugin In Blogger?
Tags: javascript, webdev, beginners, blog
Published: 2022-01-21 16:31:47

## Embed Facebook Messenger Chat widget in blogger

Here are the attached codes; Just copy and paste to your blogger website or any other website. Then change the Facebook Page ID number and WhatsApp Number. 

```
<script type="text/javascript">
    (function () {
        var options = {
            facebook: "109530127628507", // Facebook page ID
            whatsapp: "+8801406070407", // WhatsApp number
            call_to_action: "Message Me!", // Call to action
            button_color: "#4caf50", // Color of button
            position: "left", // Position may be 'right' or 'left'
            order: "facebook,whatsapp", // Order of buttons
            pre_filled_message: "Hey There 🤝! How Can I Help You Today?", // WhatsApp pre-filled message
        };
        var proto = document.location.protocol, host = "getbutton.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>
```
Bonus: WhatsApp messenger is also added
**Original Post Is Here: ** 
**_[Add Facebook Chat/Messenger to Blogger Website](https://imamuddinwp.blogspot.com/2022/01/add-facebook-chat-plugin-in-blogger-website.html)_**

Tags:
**How to Add Facebook Chat/Messenger to Blogger Website**
**Facebook Chat Plugin - Messenger Platform **
**How do I add the Facebook chat plugin to Blogger?**
**How do you add a chatbot on Blogger?**
**How do I integrate Facebook chat into my website?**
disc golf shoes
Tags: javascript
Published: 2022-01-21 16:27:09

Footwear is probably not the first thing most players think about when picking up disc golf. Immediate attention always goes to discs, bags, or even practice baskets. But a shoe is the sole point connecting a player to the ground, providing leverage and the basis for a good shot.   [disc golf shoes](https://deltaheatedvest.com/disc-golf-shoes/)

Along with constant torque and friction on the tee pad, disc golfers' shoes have to stand up to abuse in mud, snow, rain, and sometimes treacherous terrains. When you first start out, it can be difficult to identify what qualities to look for in the ideal disc golf shoe. This post should help you do that and become familiar with brands and models popular among disc golfers.
[php-curtas]: Testando FormRequest no Laravel
Tags: php, laravel, testing, braziliandevs
Published: 2022-01-21 16:24:52

Há uma maneira de testar que o seu Controller irá receber exatamente o que você precisa, e isso você poderá fazer tanto antes de criar um Request (com TDD), ou após a criação para garantir que nada irá mudar!

Para testar você vai criar o seu teste normalmente:

```php
use Tests\TestCase;

class CreateContactRequestTest extends TestCase
{
  public function testEnsureAValidIdWilBePassed()
  {
    //
  }
}
```

Após isso adicione o seguinte método `setUp`:

```php
public function setUp(): void
{
  parent::setUp();
  $request = new CreateContactRequest();
  $this->rules     = $request->rules();
  $this->validator = $this->app['validator'];
}
```

Adicione também esses dois métodos para validação do Request:

```php
protected function getFieldValidator($field, $value)
{
  return $this->validator->make(
    [$field => $value],
    [$field => $this->rules[$field]]
  );
}

protected function validateField($field, $value)
{
  return $this->getFieldValidator($field, $value)->passes();
}
```

Por fim, teste os fields que serão passados:

```php
public function testEnsureAValidIdWilBePassed(): void
{
  $this->assertFalse($this->validateField('id', ''));
  $this->assertFalse($this->validateField('id', null));
  $this->assertTrue($this->validateField('id', 'any_id'));
}
```

Juntando tudo, teremos:

```php
use Tests\TestCase;

class CreateContactRequestTest extends TestCase
{
  public function setUp(): void
  {
    parent::setUp();
    $request = new CreateContactRequest();
    $this->rules     = $request->rules();
    $this->validator = $this->app['validator'];
  }

  public function testEnsureAValidIdWilBePassed()
  {
    $this->assertFalse($this->validateField('id', ''));
    $this->assertFalse($this->validateField('id', null));
    $this->assertTrue($this->validateField('id', 'any_id'));
  }

  protected function getFieldValidator($field, $value)
  {
    return $this->validator->make(
      [$field => $value],
      [$field => $this->rules[$field]]
    );
  }

  protected function validateField($field, $value)
  {
    return $this->getFieldValidator($field, $value)->passes();
  }
}
```

----

Prontinho! :D 
Espero ter ajudado! Deixe seu like ;)
I tried Typescript for 1 year ...
Published: 2022-01-21 16:07:23

After years of working in Javascript, Typescript is was something on my “things to learn” list. 
After working with Typescript for almost 1 year, here are my conclusions: 



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


**It’s not that scary. All Javascript is a valid Typescript**

if you are planning to start a new project, do it with typescript. You don’t have to provide 100% types to every function and variable.  You can gradually increase types coverage as you go. TypeScript can determine possible types there are for you. 

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

**Refactoring code is a breeze**

Once you have set up your types, refactoring your code now takes less effort. You can even call it a pleasant experience. Compiler `tsc` combined with IDE will automatically provides you with errors at specific places where you need to change your code according to types.

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

**Less bugs.** 
Typescript only provides compile-time type safety. There is no type checking in runtime. 

(checkout run-time type checking libraries like [zod](https://github.com/colinhacks/zod), [ajv](https://github.com/ajv-validator/ajv), [yup](https://github.com/jquense/yup), [joi](https://github.com/jquense/yup) )

So if there is a bug in production, typescript will not help you. However it does prevent you from creating bugs while you are coding or refactoring. 10 minutes invested in typescript will potentially save you hours of debugging in the future.  

**Time-consuming ? Yes and No**
You will definitely spend more than time developing in Typescript than plain Javascript. 
However this time will pay off as you will create less bugs in production. 

**Replaces tests? Arguably**
If you project does not have any test, typescript is the least thing you can do. 

There is a good post by [Shawn Wang](https://twitter.com/swyx) you can read about this. 
https://css-tricks.com/types-or-tests-why-not-both/

> - Tests are best at ensuring happy paths work.
> - Types are best at preventing unhappy paths from existing.

or this talk by [Gary Bernhardt](https://twitter.com/garybernhardt)

https://www.destroyallsoftware.com/talks/boundaries

After using Typescript, typing vanilla javascript feels awkward. It seems like a naked and vulnerable code without any protection. 

I guess you can’t go back. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1919r95yhnd9cbbop3m.jpg)
Sort YouTube Videos by video duration using JavaScript
Tags: sort, youtube, video, duration
Published: 2022-01-21 15:44:35



In this article, we are going to learn how we can sort YouTube channel videos by video duration.

We can sort video from `low-to-high` and `high-to-low` video duration. EG: ` 0:10 to 10:00`. 

To sort YouTube videos, I have created a package and we are going use that package. Package name is [sort-youtube-videos](https://www.npmjs.com/package/sort-youtube-videos).

First of all, we have to install the package:
```
npm i sort-youtube-videos
```
OR if you prefer YARN
```
yarn add sort-youtube-videos
```
let's import this package
```javascript
// if you want to use require
const { sortByDuration } = require("sort-youtube-videos");
//OR
// if you are want to use import
import { sortByDuration } fro"sort-youtube-videos";

// more code ...
```

To sort videos:
```javascript
const url = "https://www.youtube.com/channel/UC5RRWuMJu7yP1DQwnW_nAvA"; //enter channel url or channel id
const sortBy = "sl"; // options: sl - ls

sortByDuration(url, sortBy).then((res) => console.log(res));

```

Note `sl` means `short to long` and `ls` means `long to short` 

And this is the response we will get back:
```json
[
  {
    type: "video",
    title: "Ramadan Ki Shan Episode 11 Digitally Presented by Spiced Foods",
    videoId: "dgoBBYbSKUQ",
    author: "Anas and Ammar",
    authorId: "UC5RRWuMJu7yP1DQwnW_nAvA",
    videoThumbnails: [[Object], [Object], [Object], [Object]],
    viewCountText: "15 views",
    viewCount: 15,
    publishedText: "5 months ago",
    durationText: "4:09",
    lengthSeconds: 249,
    liveNow: false,
    premiere: false,
    premium: false,
  },
  {
    type: "video",
    title:
      "Watch latest movies, web series and TV channels for free without any subscription ||Android",
    videoId: "ummVLFK17GI",
    author: "Anas and Ammar",
    authorId: "UC5RRWuMJu7yP1DQwnW_nAvA",
    videoThumbnails: [[Object], [Object], [Object], [Object]],
    viewCountText: "16 views",
    viewCount: 16,
    publishedText: "1 year ago",
    durationText: "4:11",
    lengthSeconds: 251,
    liveNow: false,
    premiere: false,
    premium: false,
  },
  //   ... 109 more items
];
```
Here's the full code:
```javascript
const { sortByDuration } = require("sort-youtube-videos");

const url = "https://www.youtube.com/channel/UC5RRWuMJu7yP1DQwnW_nAvA"; //url or channel id
const sortBy = "sl"; // options: sl - ls

sortByDuration(url, sortBy).then((res) => console.log(res));
```

**To sum up**
This process of sorting YouTube videos can take some time and this process might not be that efficient. Because we are fetching all videos from a YouTube channel and than a sorting algorithm will sort the videos. But there might be 1000 video's or more videos on the channel.

So, you might ask...
What will be a better solution?
There is no other solution right now. 
If YouTube officially provide this feature than it will be more efficient. 

That pretty much it. I hope you found this article helpful.
Happy Coding:)
What is Metaverse Technology 
Published: 2022-01-21 15:36:04

Given the fact that the concept has been around for nearly three decades, the metaverse has instantly become a major trending topic.
"Metaverse" is a combination of the words "meta-" and "verse." The prefix "meta" is of Greek origin and means "beyond," while "verse" is derived from the word "universe."
The metaverse is a simulated digital environment that merges augmented reality (AR), virtual reality (VR), blockchain, and social networking sites concepts to create spaces for rich user interaction that mimic the real world.
The metaverse is a virtual world with virtual land and objects that exists online in 3D. Imagine a world where you can work remotely, go to virtual museums to see the latest artworks, or attend a virtual concert with your friends, all from the solace of home.
**Some Important cutting edge technologies that potential the metaverse are:**

1. Blockchain
2. Augmented Reality
3. Virtual Reality
4. Artificial Intelligence
5. Internet Of things (IoT)
6. 3D

**Difference between Augmented Reality and Virtual Reality****
The real world is morphed using digital visual elements and characters. It's more user-friendly than virtual reality and can be used on almost any smartphone or digital device with a camera. Users can view their surroundings with interactive digital visuals through AR applications, similar to what we see in the mobile game Pokémon GO. Players can see Pokémons in the real world when they open the camera on their phones.
VR works in a unique way. It creates an entirely computer-generated virtual environment, similar to the metaverse concept. Users can then use VR headsets, gloves, and sensors to explore it.
The way AR and VR work demonstrates an early metaverse model. Virtual reality is already creating a digital world with fictional visual content. As VR technology advances, it will be possible to extend the metaverse experience to include physical simulations using VR equipment. Users will be able to interact with people from all over the world by feeling, hearing, and seeing them. We can predict more metaverse companies to invest in AR and VR equipment development in the nearish term, lot of hype surrounding the metaverse.
The development of the metaverse is still in its early stages. Identity verification and privacy control are two issues that need to be resolved. It's not always difficult to recognize someone in the real world. But even so, it will be difficult to tell or prove who the other person is as people explore the digital world in their personification.
While the metaverse is still in its early stages of development, many enterprises are already looking into its possibilities. Decentraland and The Sandbox are remarkable projects in the crypto space, but big businesses such as Microsoft, Nvidia, and Facebook are also actively participating. We can expect interesting new features in these virtual, nationless realms as AR, VR, and AI technologies advance.