teleren/devto huggingface dataset:
Please provide some guidance for newbies using Next.js to make share buttons.
Tags: nextjs, sharebutton
Published: 2022-10-05 10:22:13


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfzjkvllh90k3wx4xn01.png)
I am a novice who only started learning next.js this year. I found this share button on zhihu.com, which mainly implements the following functions:
1. Get the full URL of the current page (including the domain and protocol); 
2. Click the first option in the menu and copy the URL of the article to be shared; 
3. Generate a QR code for scanning and sharing.

I think this share button is pretty neat and would like to try to emulate it using Next.js and Ant Design (https://ant.design), but I have absolutely no idea how to start? Could you please give me some guidance and ideas?
Tech talk: How Synapse Medicine leverages Hugging Face to improve medication safety
Tags: datascience, deeplearning, chatbots, machinelearning
Published: 2022-10-07 07:40:43

---
title: Tech talk: How Synapse Medicine leverages Hugging Face to improve medication safety
published: true
date: 2022-10-05 10:21:28 UTC
tags: datascience,deeplearning,chatbots,machinelearning
canonical_url: https://julsimon.medium.com/tech-talk-how-synapse-medicine-leverages-hugging-face-to-improve-medication-safety-89b51d043ed2
---

During this webinar, Cynthia Périer, Data Scientist at [Synapse Medicine](https://synapse-medicine.com/) and myself discuss how Synapse Medicine leverages [Hugging Face](http://huggingface.co) to improve medication safety.

The French Agency for Digital Health wanted to provide accurate medication information to [Sante.fr](http://sante.fr) users. They reached out to Synapse Medicine to integrate its medication chatbot, named Galien, on the [Sante.fr](http://sante.fr) website. Synapse Medicine used Hugging Face machine learning models during the chatbot development. Listen and learn :)

{% youtube UdpmOOpAYWg %}
Introducing AWS Budget Templates
Tags: beginners, cost, aws
Published: 2022-10-05 10:04:48

AWS recently unveiled a budget template with suggested configurations to assist both new and existing customers in setting budgets to manage their AWS cloud costs. With a one-page approach, budget templates make it easier to start using AWS budgets. This is a far simpler alternative to the 5-step approach needed for customizing a budget (advanced) option. Template option is especially useful for those who might be new to setting up AWS budgets and just want something simple.

The budget template option will appear when you start creating a new budget, as shown in the image below.

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

There are basically three templates to choose from:

**1. Zero spend budget** - Create a budget that notifies you once your spending exceeds AWS Free Tier limits.

**2. Monthly Cost budget** - Create a monthly budget that notifies you if you exceed, or are forecasted to exceed, the budget amount.

**3. Daily Savings Plans coverage budget** - Create a coverage budget for your Savings Plans that notifies you when you fall below the defined target.

The Zero Spend budget template is my favorite of the three. Anyone learning to utilize AWS free tier services should be using this template in order to avoid receiving an unexpectedly high AWS bill. Setting up this budget option is really simple. The remainder of the post will lead you through the setup process. 

**Step 1:** Navigate to the AWS budget service page.

**Step 2:** Select "Use a template (simplified)" Budget setup option and "Zero spend budget" Template option.

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

**Step 3:** Enter the recipient's email address, who will be notified when the zero balance threshold has been exceeded. And finally, click the "Create budget" button to create the budget.

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

When you now navigate to the Budgets overview page, you will see your Zero Spend budget displayed in the list.

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

If you breach the zero spend threshold, you will now receive an email similar to the one I received below.

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

Anyone beginning to use AWS free tier services for either building a simple application or simply learning AWS should at the very least set up an AWS budget using the template.

------------------------------------------------------------------

Thanks for reading!

If you enjoyed this article feel free to share it on social media 🙂

Say Hello on: [Linkedin](https://www.linkedin.com/in/harinderseera/) | [Twitter](https://twitter.com/harinderseera) | [Polywork](https://www.polywork.com/harinderseera) 

Blogging: [Dev](https://dev.to/harinderseera) | [Hashnode](https://harinderseera.hashnode.dev/)

Github: [hseera](https://github.com/hseera)
React Native Environment Setup
Tags: reactnative, mobile, android, ios
Published: 2022-10-05 10:00:27

## Environment Setup

We can also following the official Documentation for installing and setup React Native.

[Setting up the development environment · React Native](https://reactnative.dev/docs/environment-setup)

### Setup React Native CLI

**⇒ Mac OS setup**

1. Install Homebrew
2. Install Node NPM
3. Install Watchman
4. Install X-Code and X-Code command line tools
5. Setup iOS Simulator
6. Install Ruby and Gem with FFI and COCOAPODS dependencies
7. Initialize your first React Native project with React Native CLI
8. Run the iOS Simulator
9. Install IDE VS-Code and open your project then enjoy

**⇒ Windows OS setup**

1. Install Chocolaty
2. Install Node NPM
3. Install JDK (openjdk11)
4. Install Android Studio and setup Android Studio SDK, SDK Platform, Virtual Device
5. Configure the ANDROID_HOME environment variable
6. Initialize your first React Native project with React Native CLI
7. Run React Native Metro and android emulator
8. Install IDE VS-Code and open your project then enjoy

### Setup Expo in Mac / Windows OS

Go to the React Native official website and open for installation is just easiest as like water.

[Installation - Expo Documentation](https://docs.expo.dev/get-started/installation/#1-expo-cli)
10 Testing Frameworks for Web Developers - codemarch
Tags: webdev, beginners, testing
Published: 2022-10-05 09:51:24

####   Original Tweet  [@codemarch](https://twitter.com/codemarch)
{% embed https://twitter.com/codemarch/status/1576806718570463234 %}
10 Testing Frameworks for Web Developers -

Thread 🧵 

#### 1/. Vitest

{% embed https://vitest.dev/ %} 

#### 2/. Testing Library

{% embed https://testing-library.com/ %} 

#### 3/. Cypress
{% embed https://www.cypress.io/ %} 


#### 4/. Jest

{% embed https://jestjs.io/ %} 

#### 5/. MochaJS

{% embed https://mochajs.org/ %} 

#### 6/. Jasmine

{% embed https://jasmine.github.io/ %} 

#### 7/. Karma

{% embed https://karma-runner.github.io/3.0/ %} 

8/. NightwatchJS

{% embed https://www.browserstack.com/guide/nightwatch-framework-tutorial %} 

#### 9/. Gauge

{% embed https://gauge.org/ %} 

#### 10/. WebDriverIO

{% embed https://webdriver.io/ %} 

If you enjoyed reading this thread, please do the following: 
1. Like the thread❤️
2. Retweet the first tweet.🔃
3. Follow me and enable notifications: ✅
@CodeMarch
Thank you for reading all the way through. 

✨ JavaScript for Starters: The Complete Guide ✨

➱ JavaScript Roadmap 2022
➱ JavaScript Fundamentals with Exp.
➱ 50+ Programs to practice with Soln.
➱ 50+ Project Ideas
➱ 25+ Projects Code

Grab it NOW.

{% embed https://codemarch.gumroad.com/l/btfjn %} 

#### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
The best way to average out different data fields on Bubble
Tags: nocode, webdev, beginners, tutorial
Published: 2022-10-05 09:46:29

Have you ever tried to average out different entries from a list in your Bubble app development? This is one of the recently discussed threads on the Forum. Let's take a closer look at the problem statement.

Assume you're making a scorecard with different categories - Math, English, Science, Economics. The goal is to find the average of the scores of these different categories.

### Let's see some tried solutions:

One approach could be to add a new field (list of numbers), add each number of the categories to this list, and then average the list.

But, if there are two of the same numbers it would only add that number once, as duplicates can’t be added through Bubble’s “:plus item” operator and this would break the average. 

In addition, adding all the different fields one by one to the list can take a long time.

There has to be a better, easier, and quicker solution to do this.

### Using the :Group by operator for complex averaging

What if have a list of things with number fields as well as a category field and you want to calculate averages for each category. What do you do then?

Well, it’s actually quite straightforward with the ‘:Group by’ operator. It essentially breaks your list of things into smaller lists based on the Grouping (grouped by ‘myCategory’ here). ‘:Group by’ has an inbuilt option to categorize the list of things being grouped and also run a simple operation like an average or sum on each group that gets generated.


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

So what it eventually gives you in this case is a list of averages of each category as numbers. It could be quite a bit to grasp the first time, but it’s super handy once you get comfortable with it!

### More things that can be tried out

You can try adding a unique identifier with a delimiter and then split out the list by the delimiter when you want to use it (e.g. right before you do your average). This should save you from adding all the different fields to the list one at a time.

Or in case your calculation is getting too complex, you could try the [Complex Math Expression Calculator plugin 3](https://bubble.io/plugin/complex-math-expression-calculator-1632033919710x443393131420057600)

Here's the link to the Thread - https://forum.bubble.io/t/average-different-fields/225320/5 

Hope it helped. 🔓
Build your first Microsoft 365 app in 10 minutes
Tags: javascript, beginners, webdev, microsoftgraph
Published: 2022-10-05 15:36:20

---
title: Build your first Microsoft 365 app in 10 minutes
published: true
date: 2022-10-05 09:45:36 UTC
tags: javascript,beginner,webdev,microsoftgraph
canonical_url: https://blog.mastykarz.nl/build-microsoft-365-app-10-minutes/
---

![Build your first Microsoft 365 app in 10 minutes](https://blog.mastykarz.nl/assets/images/2022/10/banner.png)

Learning something new is often daunting, especially when it's something like developing for a new platform. But that doesn't have to be the case. Let me show you, how you can build your first Microsoft 365 app in just 10 minutes.

## Building for a platform

Building for a platform isn't trivial. It comes with all kinds of specific knowledge you have to have like what tooling, SDKs, and APIs to use, how to integrate your app, and finally how to package and distribute it. And I haven't even mentioned auth.

It's a lot to learn, and it's easy to get overwhelmed. The trick is though, that you don't have to learn everything about everything at once. Often, you can start simple and build up from there.

## Build your first Microsoft 365 app in 10 minutes

Recently, I published an article on freeCodeCamp that shows you [how you can build your first Microsoft 365 app in **just 10 minutes**](https://www.freecodecamp.org/news/build-microsoft-365-application-in-10-minutes/).

![Browser window with a web page showing Microsoft 365 user profile information](https://blog.mastykarz.nl/assets/images/2022/10/microsoft-365-app-user-profile-information.png)

Sure, the app is simple and doesn't do much, but when building it, you'll learn the fundamental concepts of building apps on Microsoft 365. And after these 10 minutes, you'll have a functional app that works and retrieves data from Microsoft 365, and which you can use as a starting point for more complex apps.

Give it a try, and I'm looking forward to hearing what you think.
Your Guide for Testing ReactJS Apps - Part 2
Tags: react, webdev, javascript, testing
Published: 2022-10-05 09:26:20

In the last post you saw the basics of the testing.

[Part 1](https://dev.to/hellonehha/your-guide-for-testing-reactjs-apps-part-1-6c2)

In this blog, we will continue to learn more about testing basics before getting into code (trust me once we will kickoff coding this theory would come handy)

In the world of testing there are 2 important things:

1. **Task runner:** Jest, Chai, Enzyme

2. **Test Library:** Airbnb Testing Library and React Testing 
Library

>> We will be using React Testing Library and Jest for this series. 

## Type of testing:

1. TDD: Test Driven Development

2. BDD: Behavioural Driven Development

In an ideal world we should be following TDD. For this series we I will follow TDD.

## TDD ( Test Driven Development)

TDD is about where we write the test-cases first before writing the code. All the test-cases will fail and then we will write the code to make the test-cases pass.

Here, we are writing test-cases first and code later.

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

## Test suits and Test cases

| Syntax | Description |
| --- | ----------- |
| it | to create test-case |
| test | to create test-case |
| describe | to define the test suits. It groups the test-cases |
| skip | to skip a test-case while running your test-case then you will use `skip` |
| todo | to mark a test-case as `todo`. It won't impact the test-coverage but will show how many test-cases are in todo state |

## How to measure test-cases success?

To measure the test-cases success it is to look at the coverage of the test-cases. From 75%-85% is a good target.

This is how the coverage looks: 

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

## Important commands:

| Task | Commands |
| --- | ----------- |
| Executing all test-cases | `npm run test` |
| Executing specific test-case | `npm run test -- -t 'test-name'` |
| Update Snapshot | `npm run test -- -u` |
| Getting Coverage | `npm test -- --coverage` |

In next blog, we will start writing our first test-case. If you like this blog then do follow me at [Twitter](https://twitter.com/hellonehha).
The ultimate list of Terraform best practices
Tags: terraform, devops, aws, azure
Published: 2022-10-05 09:21:14

Tarak from [Brainboard](https://www.brainboard.co/) have been nurturing the cloud community with valuable Terraform best practices.

Learn the best Terraform practices from the best:

1. Apply IaC principles for your cloud infrastructure projects
2. Quick and easy way to build and run scalable infrastructures
3. Structure & test your Terraform code
4. Create Reusable Infrastructure with Terraform Modules
5. Isolate Terraform state files and mitigate impact between environments
6. 3 mechanisms to keep your code consistent across multiple environments
7. Manage our code in a version control system
8. Split your Terraform code into multiple files
9. Apply the Infrastructure-as-Code and Terraform principles to manage cloud infrastructures in a repeatable way
10. Improve efficiency and speed of delivery with your team
11. Generate all cloud infrastructure diagrams from your terraform code
12. Enable your team to provision infrastructure on-demand
13. Manage your cloud infrastructures across multiple environments

[All videos are available in our Youtube Channel
](https://youtube.com/playlist?list=PLIuWze7quVLBuDsEw_7NFXAFieSaalaJe)
JavaScript Primitive types
Tags: javascript, webdev, programming, tutorial
Published: 2022-10-05 08:59:50

**Primitives Types **in JavaScript.

These are **Seven** basic data types in JavaScript.

listed below.
1) String.
2) Number.
3) Boolean
4) Null
5) Undefined
6) Symbol
7) BigInt.

Let's explore these javaScript primitives.

**String**.

A String represents text data in JavaScript. You create strings by enclosing them in quotation marks:

`'Have a nice day'`


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

We can use singular quote marks ('') or double quote marks ("") to create a string.

**Number  :**

A Number represents numeric data. In Javascript, we can create numbers by writing the number directly in its numeric form:

`2321321`



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


**Boolean :**
  
Booleans are very much like light switches. They can only be “switched on” (true) or “switched off” (false).

 `console.log(true) // true`
 ` console.log(false) // false`


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


Happy Learning
Look mum, I wrote a book about ASP.NET Minimal API and it will be released in October
Tags: books, showdev, dotnet, webdev
Published: 2022-10-05 08:51:16

We are happy to announce that you can pre-order our book "**Mastering Minimal APIs in ASP.NET Core**".
In our book we covered topics like architecture, dependency injection, testing, validation, authentication and much more.

I wrote this book with two friends of mine: Marco Minerva and Andrea Tosato.
They are Microsoft MVPs like me, as well.

![book cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlb9xfl9sny8rha4gf22.png)

**The book is for everyone**.
Whether you are a person who is already familiar with ASP.NET Core or a beginner who wants to be introduced to this technology.
By the end of this book, you'll be able to fully leverage **new features in .NET 6 for API development** and explore how Minimal APIs are an evolution over classical web API development in ASP.NET Core.

> a fun fact about the book
The cover is picture taken in Taggia, the hometown of Marco Minerva.

---

I recorded a short trailer about the book. :)
Enjoy it.
{% embed https://youtu.be/EO4ypBiJYgY %}

You can preorder our book from the links below:
- Packt: https://www.packtpub.com/product/minimal-apis-in-asp-net-core-6/9781803237824
- Amazon: https://www.amazon.com/Mastering-Minimal-APIs-ASP-NET-Core/dp/1803237821
- Amazon.it: https://www.amazon.it/Mastering-Minimal-APIs-ASP-NET-Core/dp/1803237821

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}
C# git tips: Use git hook to test your code
Tags: csharp, git, hook
Published: 2022-10-05 08:39:50

I use Visual Studio to develop C# app, but I usually use git cli to run git command instead of Visual Studio git tools.

I don't have much issue doing this, but I sometimes encounter issues. For example:

- Visual Studio don't save csproj file automatically, and I forget to save it before ``git commit``
- I usually run ``dotnet build`` and ``dotnet test``, but I sometimes forget to confirm it

In both cases, I see CI error happens in the cloud which is embarrassing.

## git hook

In such case, I can use git hook to make sure I run build and test right before I do ``git commit``.

1\. Go to .git/hooks folder and copy ``pre-commit.sample`` file.

2\. Rename it to ``pre-commit``.

3\. Replace the code.

```shell
#!/bin/sh

echo "dotnet build"

dotnet clean; dotnet build
rc=$?

if [[ $rc != 0 ]] ; then
    echo -e "build failed"
    exit $rc
fi

dotnet "dotnet test"

rc=$?

if [[ $rc != 0 ]] ; then
    echo -e "test failed"
    exit $rc
fi

exit 0
```

4\. Save the file.

## Test the commit

Now we can add any change and do commit. Then the script runs to check if my code is fine or not.

## Use case

There are many use-cases such as:

- build 
- test
- format
- comment validation, etc.

Each project may have different requirements so we can simply modify the file to meet our requirements.

## PowerShell?

If you prefer PowerShell, then you can simply use it. One easy way to do it is to create ps1 file which contains your PowerShell script, and call it from pre-commit.

```shell
#!/bin/sh
echo "# start some PS script"
exec powershell.exe -NoProfile -ExecutionPolicy Bypass -file "the.ps1"

exit
```

There is great article about this. [Automation of your GIT repository via GIT hooks and PowerShell scripts](https://doitpsway.com/automation-of-your-git-repository-via-git-hooks-and-powershell-scripts)
Is SemiColon in javascript optional??
Tags: javascript, webdev, beginners, tutorial
Published: 2022-10-05 08:48:16

**YESSSSS.**

JavaScript inserts semicolons for you automatically. That’s why it’s optional to write semicolons. You don’t need semicolons to write good JavaScript.

In fact, it’s easier to read and write JavaScript when you leave out the semicolons. Many experts have already done so. I’d leave the explaining of why you don’t need semicolons to this   


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




Happy Learning
Simple dark snackbar - A step-by-step guide
Tags: css, html, javascript, tutorial
Published: 2022-10-05 08:45:46

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

Tutorial on how to create a simple snackbar that disappears in 3 seconds.

## <u>HTML</u>
For HTML, we need a button that will open the snackbar and a div element with id "snackbar" with snackbar text inside.

```html
<button onclick="openSnackbar()">Open snackbar</button>
<div id="snackbar">
    <span>Snackbar text...</span>
</div>
```
      

## <u>Javascript</u>
With javascript, we'll open and close our snackbar, by adding a class called "active" to a "#snackbar" div element on button click.

We'll simply store select element by id "snackbar" and add a class "active" to it.

After 3 seconds, we'll remove that class, using the "setTimeout()" method.

```js
function openSnackbar() {
    let snackbar = document.getElementById('snackbar')

    // Activate snackbar
    snackbar.classList.add('active')

    setTimeout(() => {
        // Deactivate snackbar (after 3000ms - 3 seconds)
        snackbar.classList.remove('active')
    }, 3000);
}
```
      

## <u>CSS</u>
For CSS, first we'll style the #snackbar.

We'll set position to absolute with bottom to 0 and left to 50%. With transform translateX set to -50%, this element will be positioned at the bottom of the screen in the middle.

We'll add a little margin and paddings.

Now we'll set background color to dark gray and color to pink.

We'll set snackbar's width to 200px and add a little border radius.

Lastly, we'll hide this element by setting display property to none.

```css
#snackbar {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 10px;
    background-color: #333;
    padding: 10px 20px;
    width: 200px;
    border-radius: 5px;
    color: rgb(249, 129, 129);
    display: none;
}
```
      
Now we'll style the "active" class. This class will be added to our snackbar element when it should be displayed.

To achieve that, we'll overwrite the display property and set it to block.

Don't forget to add the "!important" rule, otherwise it won't be overrode since the id selectors have a higher specificity.

```css
.active {
    display: block !important;
}
```
      
And that's it.

You can find full code with video tutorial [here](https://designyff.com/code/dark_snackbar).

Thanks for reading. ❤️