teleren/devto huggingface dataset:
Browser: Fetch API Cors settings for server wildcard origin
Tags: fetch, cors, errors, settings
Published: 2022-07-20 07:44:11

Cors issues are a pain, especially if your server is allowing all but fetch is still throwing errors. Here is a fix.

```javascript
fetch(`http://endpoint.com`, {
  method: 'GET', // *GET, POST, PUT, DELETE, etc.
  mode: 'cors', // no-cors, *cors, same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'omit', // include, *same-origin, omit
  headers: {
    'Content-Type': 'application/json'
  },
})
.then((res) => res.json())
.then((data)=> {
  console.log('data', data)
})
```

Axios might not work in some cors situations:
In a quote from this [thread](https://github.com/axios/axios/issues/1358):

> It's important to note is that mode, credentials, and crossdomain aren't supported for configuring Axios. The reason why your example works when using fetch is because those options are part of the Request API (docs for mode are here).


Errors you may have seen when making your requests:
```text
"Uncaught (in promise) SyntaxError: Unexpected end of input"

"Access to fetch at '...' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'"

"JSON.parse: unexpected end of data at line 1 column 1 of the JSON data"
```
🇫🇷 Fonctions Fléchée en PHP
Tags: french, php, codequality, codenewbie
Published: 2022-07-20 09:58:17

{% youtube W-DB2gKSE6M %}

✅ Apprenons les fonctions fléchées, disponible depuis PHP 7.4 - https://www.php.net/manual/fr/functions.arrow.php

Contrairement aux fonctions anonymes, les fonctions fléchées ne supportent qu'une seule expression qui est directement retournée dans la fonction.

---

👉 Pour aller plus loin, tu as aussi droit à mon cours en anglais sur la création d'une application en PHP 8.1 depuis zéro. On fait tout cela sans framework pour bien maîtriser les bases du langage PHP 👉 https://www.udemy.com/course/create-real-world-php-webapp-from-scratch/
Spotify Clone Project
Tags: html, css, javascript, beginners
Published: 2022-07-20 09:57:52

I created spotify clone project in Html, Css and Javascript.
It took me two days.

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

Included Song Covers:

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71krbvnx27i7pnp7st0m.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lsak2v968muegf1z6g3.jpg)


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12mij23ga6hnlanu76mz.jpg)


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


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


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


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


Here you can visit for my project....
Please give me a star for my this project.
https://github.com/Chiki1601/Spotify-Clone-Project
?Assigning Api resposne to a variable undefined error
Tags: discuss, javascript, webdev, beginners
Published: 2022-07-20 09:55:33

I am getting undefined for variable d; even console.log(res.data.results[0]) is working fine
```
import './App.css';
import a from 'axios'


function App() {
  let d;
  a.get("https://randomuser.me/api/")
  .then(res => {
    //console.log(res.data.results[0])
    d = res.data.results[0]
  })
  .catch(err => console.log("Its en error"))

  console.log(d) // undefined

  return (
    <div className="App">
      
    </div>
  );
}

export default App;
```
Only 3 days until the early bird tickets for the biggest tech conference in MEA are out!
Tags: javascript, webdev, programming, java
Published: 2022-07-20 09:55:25

Enjoy a unique & vibrant tech experience with a Moroccan flavor 🇲🇦 Join us this October, from the 4th to the 6th, in Agadir 🏖️  for the largest developers' conference in MEA 🔥
🎟️Secure your pass now: https://register.devoxx.ma

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqcii49l0exvfx0qqoa9.jpg)
What is Cybersecurity Insurance?
Tags: cybersecurity, insurance
Published: 2022-07-20 09:46:55

Cyber threats pose a major danger to every organization, regardless of the size and status of the business. Individuals, SMBs, and enterprises develop and improve their cybersecurity to counter potential threats efficiently. However, hackers always have the first strike advantage. So an attack causing a data breach or IT system disaster is a matter of when not if, for an organization.

[Cybersecurity insurance](https://any.run/cybersecurity-blog/cyber-insurance/) is a tool to mitigate security breach consequences for an organization. In this post, we at ANY.RUN decided to find out what cyber insurance is, what it does and doesn’t cover, who needs to develop appropriate policies, and why.

**What is cybersecurity insurance?**
Cyber insurance (cyber attack insurance, cybersecurity insurance, cyber-liability insurance) is one of the insurance policies that protect organizations from hacking attempts, ransomware attacks, and other cyber threats. It serves to avoid or mitigate the disruption of workflows during an attack and the consequences that follow. The potential coverage of financial expenses connected with the site recovery can also be included.

Speaking formally, cybersecurity insurance is a contract that an organization concludes with an insurer about protection from IT-related issues. Those issues can be connected with computers, internal and external networks, and software.
Analog Input using Arduino
Tags: arduino, beginners, tutorial, discuss
Published: 2022-07-20 09:37:29

In this blog, I will show you how to create an analog input using Arduino.

![analog input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu2vooocs7vjsc19zxq1.png)
 

## Components required 
- Arduino UNO 
- Potentiometer

## Arduino UNO
Arduino is an opensource electronics platform based on easy-to-use hardware and software. Arduino boards are able to read inputs - light on a sensor , a finger on a button , or a twitter message - and turn it into an output - activating a motor , turning on a LED , publishing something online. To do so use the Arduino programming language (based on wiring) and the Arduino Software (IDE) based on processing.

## Potentiometer
A three-terminal resistor with a sliding or revolving contact that creates a variable voltage divider is called a potentiometer. It functions as a variable resistor or rheostat if only the wiper and one end of the connector are used.

## Code 
```c 
int sensorPin = A0;    // select the input pin for the potentiometer
int ledPin = 13;      
int sensorValue = 0;  
void setup() {
pinMode(ledPin, OUTPUT);
}
void loop() {
  sensorValue = analogRead(sensorPin);
  digitalWrite(ledPin, HIGH);
  delay(sensorValue);
  digitalWrite(ledPin, LOW);
  delay(sensorValue);
}
```
How to hide navbar and footer when 404 (Page not found) is showing ?
Tags: react, pagenotfound, reactrouter
Published: 2022-07-20 09:18:56

## 
I have a react application. I want to hide navbar and footer when the page 404 (Page Not Found) is showing. But I can't do this. 

I can hide footer for other pages based on pathnames. Like 

import { useLocation } from "react-router-dom";

 const location = useLocation();
  if (location?.pathname === "/login" || "/sign-up") {
    return null;
  }

But this hiding method I can't use on 404 page Because there is no specific pathname. How can I hide ? Please give me some suggestions.
🇫🇷 Les arguments nommés en PHP 8
Tags: french, programming, php, cleancode
Published: 2022-07-20 09:13:07

{% youtube s57rOWlZsq4 %}

Aujourd'hui, parlons de la nouvelle fonctionnalité de PHP 8.0 qui s'appelle "arguments nommés". Cela va vous permettre de rendre votre code PHP davantage visible et clair à la lecture 🚀 

👉 Mon GitHub et mes projets connexes : https://github.com/pH-7

—-
🏁 Mon cours Udemy sur la création d'une application en PHP 8.1 depuis zéro. On fait tout cela sans framework pour bien maîtriser les bases du langage PHP 👉  https://www.udemy.com/course/create-real-world-php-webapp-from-scratch/
Pure CSS Summer Girl
Tags: codepen, html, css, webdev
Published: 2022-07-20 09:02:13

---
title: Pure CSS Summer Girl
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/dymWPWo %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1549679420318724096" target="_blank">https://twitter.com/asyrafhussin4/status/1549679420318724096</a></p>
Sending Emails from NestJs Using the Mailgun API
Tags: mailgunapi, netsjs, emailing, node
Published: 2022-07-20 08:49:14


![Sending Emails from NestJs Using the Mailgun API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyebgl42o9dwhsjh661h.png)

I had set up the mailing with nodemailer with mailgun few months back, that was working fine but I had got few recurring issues, that's why I have switched the implementation from SMTP to API, and I found it quite simpler than that of the SMTP as no extra library need to be used, apart from the request client axios.

The snippet of the implementation goes like this: 
```    public async sendMail(mail: IMail) {
        const mailOptions: MailInput = {
            from: `SON <${configService.get('SENDER_EMAIL')}>`,
            to: mail.to,
            subject: mail.subject,
        }
        if (mail.template) {
            const emailTemplateSource = fs.readFileSync(path.join(__dirname, `../../templates/${mail.template}.hbs`), "utf8")
            const template = handlebars.compile(emailTemplateSource);
            const htmlToSend = template(mail.templateVariables)
            mailOptions.html = htmlToSend
        } else {
            mailOptions.text = mail.text;
        }
        try {
            const body = Object.keys(mailOptions).map((key, index) => `${key}=${encodeURIComponent(mailOptions[key])}`).join('&');
            const response = await axios.post(`https://api.mailgun.net/v3/${configService.get('MAILGUN_DOMAIN')}/messages`,
                body,
                {
                    auth: {
                        username: 'api',
                        password: configService.get('MAILGUN_API_KEY')
                    },
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    }
                });
            Logger.log(`Email successfully sent to: ${mail.to}.`)
            return response;
        } catch (error) {
            Logger.warn(`Problem in sending email: ${error}`);
            throw error;
        }
    }```
Extent of API Endpoint
Tags: api, discuss, help
Published: 2022-07-20 08:44:16

Hi All, 

I have a question regarding API Endpoints. So I work with CRM systems and each CRM has their own availabe Endpoints on their developers docs. My question is if the data I want to either Post or Get on certain properties do not have the endpoint, is that the limitation or I can create my own custom API to do that?

Thanks
GOCD : How to create pipeline | FREE & OPEN SOURCE CI/CD SERVER
Tags: gocd, cicd, freee, opensource
Published: 2022-07-20 08:43:28

Easily model and visualize complex workflows with GoCD.Welcome to GoCD - an open-source Continuous Integration and Continuous Delivery system.

## Step-by-step guide to your first pipeline

**Recommended Installation**
1. Select your OS
2. Download latest Stable Server
3. Download latest Stable Agent
4. Install Server GoCD Server Installation Instructions
5. Install Agent GoCD Agent Installation Instructions

- If this your first time using GoCD, we recommend following our Introduction to GoCD guide
- If you have prior experience with GoCD, here is official documentation https://docs.gocd.org/current/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tuswuvw3qkxpycy5uj2.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wp1y311h025d5htvoye.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jem5ma75nwp50psa7pro.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u5edcfbwylpmpzlddnb.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qpl7n7aei7gld6kvm6p.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9t7grp8cgny3h9v3cdh.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sry1jyo434tb2hegohe2.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngpuhces529iqh6qbm3x.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9zr8c4yyws6ig7ij04d.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p2p4mcna6kfz5edyms4.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr26iny3k9q58792xx4q.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5839h9k0pcd9l889k49.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ayeix78p7nt2wsn9enq.png)
Container vs VM: What Is the Difference and Which One to Pick?
Tags: virtual, machine, container
Published: 2022-07-20 08:41:24

[VMs and containers](https://www.pctechguide.com/articles/container-vs-vm-what-is-the-difference-and-which-one-to-pick) are two implementations of virtualization technology. This means that both VMs and  containers help to optimize how resources are used. However, these two technologies achieve that differently, and the differences between them become clear when you take a deeper look.

This post defines and explains the key differences between a container and a VM. With the information below, you can use the two solutions more efficiently while building your organization’s IT environment and adjusting workflows.
how react-dom render a portal which has already been added to the document.body
Published: 2022-07-20 08:29:22

```js
export const createNotification = () => {
  const container = document.getElementById("notificationContainer");
  console.log(container);
  return render(createPortal(<ToastNotification />, container), document.createElement("div"));
};
```
how it works? who can provide me a explanation? thanks so much
Windows set up system environment variables
Tags: windows
Published: 2022-07-20 08:10:02

Windows System 內建許多環境變數，可透過 CMD 直接下指令或是使用 GUI 查詢或變更

## CMD

例如：使用 `set` 指令列出全部環境變數

![cmd-001](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0zlv0xioog111iprh88.png)

`set` 指令同時也可以新增和變更 Environment Variable

建立一個名為 `ev` 的變數，值為 `test`

```
set ev=test
```

使用 `set` 查看環境變數，也可使用 `echo` 指令印出變數值

```
set ev
echo %ev%
```

變更環境變數的值與新增的指令一樣，前提是變數已存在，若不存在則是執行新增動作

```
set ev=exist
```

刪除環境變數一樣使用 `set` 指令，列出要刪除的環境變數，等號右邊不要添加任何值

```
set ev=
```

使用 CMD 要注意一個地方，當 CMD 關閉後，所設置的環境變數都會消失，必須重新設置，適合一次性的使用，若需要常駐於系統中，則要到控制台設置。

## GUI/control
打開控制台/control，前往 `控制台\系統及安全性\系統`

![pic-001](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bfmb6mf50bo9ez2c7qzs.png)

進階系統設定

![pic-002](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ms6ybw66yagcnvs0w0v.png)

環境變數

![pic-003](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92hpkljjohaskpg248hu.png)

環境變數內分為「**使用者變數**」和「**系統變數**」，使用者變數是目前登入的使用者獨立的設定，而系統變數是全域的，所有使用者都會套用此設定。

此介面一樣可以增刪修，而操作結果會常駐於系統中，重新開機後也會存在，無須重新設定。

---

Thanks for reading the article :tulip: :sunflower: :blossom:

If you like it, please don't hesitate to click heart button :heart:
or follow my [GitHub](https://github.com/FakeStandard) :star:
or buy me a coffee :arrow_down: I'd appreciate it.

[![Buy-me-a-coffee][1]][2]

[1]: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h077sxd0vx1hix4t7lw8.png
[2]: https://www.buymeacoffee.com/FakeStandard

---
NVM set default version
Tags: node, javascript
Published: 2022-07-20 08:08:37

In a previous article, we learned about [NVM, a great way of managing multiple node versions on your machine](https://daily-dev-tips.com/posts/managing-multiple-node-versions-with-nvm/).

However, you might have most projects running on a specific version of Node.
In that case, setting your default NVM version to this Node version might make sense.

## Setting a default NVM version

To set the default NVM version, you first have to make sure that version is installed in NVM.

As a reminder, you can install a version like this:

```bash
nvm install 16
```

We can then run the following command to set this as our default version.

```bash
nvm alias default 16
```

Remember, this is one specific query on a version type you can install.
Some valid alternatives are:

```bash
nvm alias default 16

nvm alias default lts

nvm alias default 12.14.3
```

You can check which versions you have installed by running the following command.

```bash
nvm ls
```

This will return a list of all the versions you have installed already.

## Returning to the system version

Perhaps at one stage, you might want to change to whatever your system uses.

We can run the following command to do that:

```bash
nvm alias default system
```

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
How to pass custom module from JS to C++
Published: 2022-07-20 08:07:00

Passing custom module from JS to C++ code with Emscripten is the easier task than it seems!
I created a tiny example to show how to pass module from JS to C++ using Emscripten and `val::global()`

First of all we need to write a C++ function for the loading. It looks like this:
```cpp
int loadCustomModule (std::string globalModuleName) {
  val ModuleClass = val::global(globalModuleName.c_str());
    if (!ModuleClass.as<bool>()) {
    std::cout << "No global module " << globalModuleName;
  }
  return 0;
}
```
Then we need to pass this function to JS using `EMSCRIPTEN_BINDINGS`:
```cpp
EMSCRIPTEN_BINDINGS(module) {
  function("loadCustomModule", &loadCustomModule);
}
```
Yeah, that's all! Now, we can use our `loadCustomModule` function in JS.
```js
class HelloWorldCustomModule {
    helloWorld() {
        console.log('Hello, World!')
    }
}
var Module = {
    onRuntimeInitialized: function () {
        window.HelloWorldCustomModule = HelloWorldCustomModule;
        Module.loadCustomModule('HelloWorldCustomModule')
    }
};
``` 

And the last step is using our `HelloWorldCustomModule` in C++
```cpp
int loadCustomModule (std::string globalModuleName) {
  // ... first part is above
  val module = ModuleClass.new_();
  module.call<val>("helloWorld");
  return 0;
}
```

#### Compilation
```
em++ -lembind -o passCustomModule.js passCustomModule.cpp -s ERROR_ON_UNDEFINED_SYMBOLS=0 -Wall --bind
```

The full example with HTML you can find [there](https://github.com/dryrainbow/emscripten-custom-module-from-js)
How to use Telegram as notification channel for application monitoring
Tags: programming, webdev, devops, monitoring
Published: 2022-07-20 08:01:28

Hi, I'm Valerio, founder and CTO at Inspector.

I'm so happy to share with you the last product updates for your preferred Code Execution Monitoring platform 😊.

## New Telegram notification channel

Telegram is now available as a notification channel to receive alerts about the status of your application directly in your telegram chat on your phone or desktop app.


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

To enable the Telegram channel you just need to retrieve the telegram user_id of each user you want to attach to this channel.

Take a look at the documentation for the step by step process: [https://docs.inspector.dev/notifications/telegram](https://docs.inspector.dev/notifications/telegram)

## New CodeIgniter integration library

The CodeIgniter integration library has recently been published on our [official repository](https://github.com/inspector-apm/inspector-codeigniter). This is a community library maintained by [Prysis](http://www.prysis.co.za/), a software house based in South Africa.

We invite you to check out the code and propose your improvements publishing a pull request. It's an open source project as well as the other integration liraries.

## Contribution guidance

We are updating the contribution guidance to help more developers in our community to publish improvements on integration libraries and embrace the transparency of the open source model even more.

## Metrics

The new "[Metrics](https://docs.inspector.dev/metrics)" section is now available in the documentation. You can learn more about the technical characteristics of the metrics generated by the dashboard.

We are now using the 75th percentile to calculate trend metrics. Based on the Core Web Vitals guidelines the 75th percentile helps developers qualitatively understand whether the experience of their application is "good", "needs improvement", or is "poor".

Click here to read more from the official article about percentiles.

## Market focus

After six months of hard work to explore new opportunities in the enterprise segment of the market, we have decided to focus 100% on helping small and medium-sized software development teams.

Large companies require continuous customizations and private installations that are not part of our DNA.

Our goal is to become the reference Code Execution Monitoring tool for software developers around the world. We aim to build a product with solid technical foundations that is capable of making a positive impact in the lives of as many developers as possible.

## Conclusion

If you are an Inspector customer yet, thank you for being part of this journey 😀. Otherwise if you want help your team to monitor your applications in real-time, [register your account for free now](https://app.inspector.dev/register).
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes
Published: 2022-07-20 08:00:15

---
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/5e1259d54c109.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___: Did you here about the witch who was off by two when casting a hex?

___A___: They failed to make the target DEAD and made them DEAF instead!
 -->