teleren/devto huggingface dataset:
Book review : A Developer’s Essential Guide to Docker Compose
Tags: books
Published: 2022-11-29 10:30:00


![The book cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obk4umk3929q1uiglj1q.jpg)


Docker and Docker Compose are two fundamental tools in the modern development ecosystem, and to be able to run your solution in different cloud providers, containers are strategically important. For this reason, knowing these two tools become very important.
This book is all about Docker Compose, and it does it remarkably well.

The book is made up of three parts, each of which is useful for understanding not only how to use the tool but also how to do it in working environments.
in the first part, the author deals with the fundamentals of Docker Compose. This part can certainly be useful for those who approach the topic and need to understand the basics, but it can also be useful for those who need a guide to consult daily.
I found the chapter on networking and volumes really well done. These two topics are always very delicate and difficult to understand, but in this part, they are clear and well-explained. 
I want to clarify that it is, in any case, an introductory chapter but allows you to fix the topics so that you can then go and address them in detail in the documentation.
In general, if you are already an expert on the topic, this first part can serve as a very useful refresher but it is not meant for you.

The second part of the book is dedicated to the daily work with the tool and examines those aspects with which the developer has to do every day (monitoring, combining multiple docker-compose files, simulating a local environment, and so on). Unfortunately, for those who work with Azure, the chapter relating to the simulation of a local environment is designed for AWS services. In this part, you can find a whole chapter dedicated to CI/CD pipelines where GitHub, Bitbucket, and Travis (no Azure DevOps pipelines) are examined as CI/CD platforms. Well done and useful chapter.
The third part is dedicated to deployment:  remote hosts, AWS, Azure, and Kubernetes.

In conclusion, it is a well-written book, and, although the topic is not the easiest, it is also very smooth and understandable. The interesting aspect is that it can be used by those approaching the instrument but also as a reference guide in daily work.
Easiest way to deploy your website using Microsoft Azure App Services
Published: 2022-11-29 07:23:05


## Easiest way to deploy your website using Microsoft Azure App Services

![](https://cdn-images-1.medium.com/max/2000/1*aFLLBIamS7bxIkLFwC4-hw.png)

Hosting the website and controlling it in real time can be overwhelming to new developers. In this blog, you’ll learn how to deploy your website from Azure services.

![](https://cdn-images-1.medium.com/max/2000/1*Pf5Fg5DOvLMscg-CBCGYEQ.png)

We may use Azure App Service to create and host web apps, mobile back ends, and RESTful APIs, in any programming language. It supports both Windows and Linux and allows automatic deployments from GitHub, Azure DevOps, or any Git repo.

This enables your application’s Continuous Integration and Continuous Deployment (CI/CD) to run smoothly. You can make changes to your source code and see them immediately reflected in the deployed app.

Let's get started

**Prerequisites**: An active Azure subscription. You may use the [Azure for Student](https://azure.microsoft.com/en-in/free/students/)s to get a subscription for free or else you can use [Azure free account](https://azure.microsoft.com/en-in/free/).

 1. Log in to your Azure portal and search ‘App Services’. Click on ‘Add’.

![](https://cdn-images-1.medium.com/max/2000/1*iLiX4KfpQoDQLoY6MjZmLA.png)

2. Configure your App service. Enter the required details and choose ‘Docker Container’ if you have spun a container for your application.

Choose your Runtime stack appropriately. I have a Node JS application, hence the stack.

Create ‘Review+create’ once done.

![](https://cdn-images-1.medium.com/max/2000/0*uVCEb3yuGBLGqaZE.png)

3. Once your App service is successfully deployed, navigate to your resource and click on ‘Deployment center’.

![](https://cdn-images-1.medium.com/max/2000/0*8l5sSJ7S83_7HJoq.png)

4. We will configure CI/CD pipeline from GitHub. Before moving further, make sure you upload your application code on GitHub, else use a sample Node js web app from my [repository](https://github.com/syed-sohaib7/azure-web-app-demo). You can also choose to configure CI/CD from your other sources.

![](https://cdn-images-1.medium.com/max/2000/0*5HcNgcL65ca4N_Ah.png)

5. Select your repository and the branch. Make sure the stack is properly configured. Click ‘continue’ to initiate deployment.

![](https://cdn-images-1.medium.com/max/2000/0*TElemb5a0Q24_A8L.png)

6. On your resource page, copy the URL and paste it in your browser window.

![](https://cdn-images-1.medium.com/max/2590/0*U4CLlNYLktuLRdy6.png)

7. Swala! 🚀

![](https://cdn-images-1.medium.com/max/2352/0*gM-Fz6p4xXDKQgya.png)

## Summary

We have successfully deployed a web app using Azure App Services.

## Further Learning

Azure App Service: [https://docs.microsoft.com/en-us/azure/app-service/](https://docs.microsoft.com/en-us/azure/app-service/)
CSS Offscreen tricks that make hidden text readable by screen readers.
Tags: webdev, javascript, tutorial, css
Published: 2022-11-29 09:54:35

## What is CSS Offscreen, and how can I implement it?
An element can be totally hidden (visually and positionally) in the DOM with CSS Offscreen while maintaining accessibility. Remove all padding and borders, then cover the overflow of the element. To specify that no portion of the element is shown, use clip. We can also explain it to be a bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility when more context is needed for visually-impaired users. As an alternative to `display: none` which is not readable by screen readers or `visibility: hidden` which takes up physical space in the DOM.

**Code Sample**

**HTML**

```
<a class="button" href="http://pantswebsite.com">
  Learn More <span class="offscreen"> about pants</span>
</a>
```

**CSS**

```
.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
```

**Detailed explanation to the code sample above**

- Remove all borders.

- Use `clip` to indicate that no part of the element should be shown.

- Make the `height` and `width` of the element `1px`.

- Negate the element's height and width using `margin: -1px`.

- Hide the element's overflow.

- Remove all padding.

- Position the element absolutely so that it does not take up space in the DOM.

**Output**


![Code output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csnzs7xse78huqzqwm9v.png)

**Note:** Although `clip` technically has been depreciated, the newer `clip-path` currently has very limited browser support.

Thanks for reading...
**Happy Coding!**
why seperate hpp and cpp
Tags: cpp
Published: 2022-11-29 09:53:39


### separating the interface from the implementation.

The header declares "what" a class (or whatever is being implemented) will do

The cpp file defines "how" it will perform those features.

### class reusability

other cpp file that wanna use our class, only need the interface(hpp file). 

if hpp file have implementation code. it will be included in other cpp file.


# refereces
{% embed https://stackoverflow.com/questions/1305947/why-does-c-need-a-separate-header-file %}

{% embed https://stackoverflow.com/questions/333889/why-have-header-files-and-cpp-files %}

{% embed  https://www.reddit.com/r/cpp/comments/lorm3s/header_only_vs_hppcpp_styles/ %}
Top 5 Free and Paid Video Editing Apps for Android in 2022
Published: 2022-11-29 09:52:52

<!-- wp:web-stories/embed {"blockType":"url","url":"https://inwebstory.com/web-stories/top-10-free-and-paid-video-editing-apps-for-android-in-2022/","title":"Top 5 Free and Paid Video Editing Apps for Android in 2022","poster":"https://inwebstory.com/wp-content/uploads/2022/11/cropped-video-editing-apps-for-android.png","align":"center","stories":[477]} -->
<div class="wp-block-web-stories-embed aligncenter"><a href="https://inwebstory.com/web-stories/top-10-free-and-paid-video-editing-apps-for-android-in-2022/"><img alt="Top 5 Free and Paid Video Editing Apps for Android in 2022" src="https://inwebstory.com/wp-content/uploads/2022/11/cropped-video-editing-apps-for-android.png" width="360" height="600" loading="lazy" decoding="async"/></a></div>
<!-- /wp:web-stories/embed -->
Change color in each click using JavaScript
Tags: html, css, javascript
Published: 2022-11-29 09:47:01

While developing webpages, if you have ever wondered how a user will be able to switch the color of an HTML element, then this task can be easily achievable with a little help of JavaScript.

In the below example, we will be changing the background color of the div element with a class named “container” whenever the button with id “click” is clicked. We will implement a JavaScript session in order to keep track of the user-selected color.


```HTML
<div class="container" id="container">
    <button id="click" onclick="clickHere()">Click to Change color</button>
</div>
```

```css
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.color{
    color:blue;
}
.container{
    height: 300px;
    width:400px;
    background-color: purple;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
#click{
    padding: 1rem 1rem;
    border:none;
    border-radius: 10px;
    cursor:pointer;
    font-size:16px;
}
```

```javascript
//array of color values
var color = ["red", "blue", "green", "orange", "yello", "cyan", "gray", "skyblue", "lightblue", "lightgreen"]

function clickHere(){
    // store the count of click in session 
    var count = sessionStorage.getItem("count")
    if(count !== null){
    	// if the session/count exists then increment it with 1.
        sessionStorage.setItem("count",parseInt(count)+1)
    }else{
    	// if the session/count is null i.e first click then start with 0
    	// because our first array index is 0 i.e color[0] = "red"
        sessionStorage.setItem("count",0)
    }
    
    var newCount = sessionStorage.getItem("count")
    
  //get the session value to map the color index in color array
 document.getElementById("container").style.backgroundColor = color[parseInt(newCount)]
  
  // if the click count matches array length then reset the session value.
  // -1  in color.length because color.length gives 10 but final array index is 9.
    if (newCount == color.length-1){
        sessionStorage.removeItem("count")
    }
}
```

[Open in Codepen](https://codepen.io/sarozpradhan64/full/OJZvzyd)
How to Hack & Protect Flutter Apps — Simple and Actionable Guide (Pt. 1)
Tags: flutter
Published: 2022-11-29 09:35:55

I am working on a short guide, "How to Hack & Protect Flutter Apps," aimed at junior and senior devs and reverse engineers who'd like to get acquainted with App protection for Flutter-based apps.
Part 1 (this article) ↓

- Disassemble app.
- Extract its secrets.

[How to Hack & Protect Flutter Apps — Simple and Actionable Guide (Pt. 1/3)](https://medium.com/@talsec/how-to-hack-protect-flutter-apps-simple-and-actionable-guide-pt-1-3a873c7780db?source=friends_link&sk=ea7943bf059d022531cbf2d9a93b7e6a)

The second and third guide will cover these areas. I may adjust them based on the feedback:

Part 2 (coming soon) ↓

- Make a fake clone.
- Check every transmitted JSON.
- Inject code.

Part 3 (coming soon) ↓

- Steal authentication tokens.
- and attack the API.
TypeScript types from lists
Tags: typescript
Published: 2022-11-29 09:25:15

I assume you know about types in TypeScript. That is kinda the essence. 

And you've probably run into situations where you want to or together different things into a type. Like me, when I want to summarize beers I like, I can say:

```ts
type AtlesKindOfBeer = 'ipa' | 'stout' | 'lambic';
```

Whith this defined, I can create a function like this:

```ts
const serveAtleBeer = (beer: AtlesKindOfBeer) => console.log("Cheers");
```

This means that we avoid situations like this:
```ts
serveAtleBeer('lite banana-neipa');
```

But, say that you are handed a string describing a beer style, and want to check if this is a beer I like?

Typeguards to the rescue!
```ts
const isAtlesKindOfBeer = (beer: string): beer is AtlesKindOfBeer 
  => ['ipa', 'stout', 'lambic'].inludes(beer);
```

This works. Kinda. See the problem? Duplication! Say that I want to add "geuze" to my list of drinkable beers. Then I have to update both the `AtlesKindOfBeer` type _and_ the `isAtlesKindOfBeer` typeguard. And here lies a potential for fuckup. And every potential for fuckup will, someday, develop into a fuckup. 

So, how do we eliminate the potential? We define the list of beers I like once. Like this:

```ts
const atlesKindsOfBeer = ['ipa', 'stout', 'lambic'] as const;
```
then both the type and the typeguard can reference this list:

```ts
type AtlesKindOfBeer = typeof atlesKindsOfBeer[number];

const isAtlesKindOfBeer = (beer: string): beer is AtlesKindOfBeer 
  => atlesKindsOfBeer.inludes(beer as AtlesKindOfBeer);
```

Hooray!

Btw: the `as const` syntax is known as a [const assertion]!(https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-4.html#const-assertions)
React Soft Dashboard - FullStack & Live Deploy
Tags: webdev, react, fullstack, opensource
Published: 2022-11-29 09:13:29

---
title: React Soft Dashboard - FullStack & Live Deploy
published: true
description: This open-source React Starter has been updated to the latest UI Version from Creative-Tim. Starting with this version, the product can be deployed using Drag & Drop.
tags: webdev, react, fullstack, opensource 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2te4ebdyrgeel7vzo6k.jpg
canonical_url: https://blog.appseed.us/react-soft-ui-dashboard-updated-go-live/
---
Hello Coders! 

This article mentions the latest update of [Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/), an open-source full-stack project powered by **React and NodeJS**. The UI now uses the latest version provided by `Creative-Tim` and also supports Drag & Drop deployment using the LIVE Deployer Service. `Thanks for Reading!`

- 👉 [React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/) - `product page`
- 👉 [React Soft Dashboard](https://node-js-react-soft-dashboard.appseed-srv1.com/authentication/sign-in) - `LIVE Demo`

For newcomers, **Soft UI Dashboard** is a modern design crafted and released for free by [Creative-Tim](https://www.creative-tim.com/?AFFILIATE=128200). The product is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining.

{% embed https://www.youtube.com/watch?v=YdAKP6ianfQ %}

---

## Video Transcript

This open-source starter provides JWT authentication managed by a simple NodeJS API Server (also free)

- ✅ Modern Stack: [React & Node JS](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/)
- ✅ Simple API, JWT Authentication
- ✅ 50+ UI Components, 7 Sample Pages
- ✅ MIT License, free [support](https://appseed.us/support/)
- ✅ Compatible with [LIVE Deployer](https://appseed.us/go-live/) (Drag & Drop service)

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project. 

![React Soft Dashboard - Charts Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9hbcmljitz6nrxhxt4w.png)

---

> [React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/) - Profile Page 

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

---

> [React Soft Dashboard](https://appseed.us/product/soft-ui-dashboard/api-server-nodejs/react/) - Billing Page

![React Soft Dashboard - Billing Page.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvwgk13ei1wfgahuc4v2.png)

---

> `Thanks for reading!` For more resources and support, please access:

- 🚀 Free [support](https://appseed.us/support/) provided by AppSeed (email & Discord)
- 👉 More [free apps](https://appseed.us/apps/open-source/) crafted in Flask, Django, and [React](https://appseed.us/apps/react/)
Medium, Slack and Notion provide a better alternative for Social Logins to their users.
Published: 2024-06-22 09:03:17

---
title: Medium, Slack and Notion provide a better alternative for Social Logins to their users.
published: true
date: 2022-11-29 09:11:23 UTC
tags: 
canonical_url: https://mojoauth.com/blog/medium-slack-and-notion-provide-better-alternative-of-social-logins-to-their-users/
---

After the popularity of social media platforms like Facebook, Twitter and LinkedIn, social login got popular. A lot of web and mobile applications adopted the social login, these all provide login over OAuth 2 protocol. After a few years OpenID initiative came into the picture and providers like Google, Yahoo, Myspace, and StackExchange started offering this, but due to the lack of data points and security flaws this declined, and providers like Google and Yahoo started offering OAuth login.
15th Benefits of Blogging that you must know
Tags: blogging, how, to, makeblogonline
Published: 2022-11-29 08:58:52

[Benefits of Blogging](https://seoabir.com/15th-benefits-of-blogging/)
If we talk about blogging, the 15 benefits of blogging that we have are definitely worth discussing. Today I will discuss all those things.

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

Improve Your Writing Skills through blogging
The first thing that comes up is that – Helps To Improve Your Writing Skills.
We can easily [improve our writing skills through blogging](https://seoabir.com/15th-benefits-of-blogging/). From this we can find out our grammatical errors.

Create Your Online Portfolio 👍
We can also create an online portfolio through blogging.

Through this we can make a lot of improvement in marketing skills, so that our portfolio becomes very strong and visibility increases. [read more](https://seoabir.com/15th-benefits-of-blogging/)
Vote on Product Hunt - $1 Million USD AesirX License Giveaway!
Published: 2022-11-29 08:26:11

To celebrate the launch of AesirX BI & Analytics, we are giving away $1 MILLION USD in LICENSES to the AesirX Community - contribute to the Giveaway to earn chances to win.



For prizes and more information, check this link: https://gleam.io/cYdeW/vote-on-product-hunt-1-million-usd-aesirx-license-giveaway?li_fat_id=7a7c9d42-3340-4192-9fd2-1ee5eed50d2c
Yup.array validate object property is unique with Formik in React.
Tags: react
Published: 2022-11-29 08:41:52

---
title: Yup.array validate object property is unique with Formik in React.
published: true
date: 2022-11-29 08:24:24 UTC
tags: React
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g84le6oiiflxpntjifbi.png
canonical_url: https://anlisha.com.np/blog/yup-array-validate-object-property-is-unique-with-formik-in-react/
---

The requirement is to validate objects in  **users**  array has unique  **name**  property.

Define a custom method in Yup using **Yup.addMethod**. Yup.js provides this function to conveniently reuse test functions. Function has to either return  **true**  or  **false**  to indicate if testing has failed or not respectively, or a new  **ValidationError**  created through **this.createError()**.

```
Yup.addMethod(Yup.array, "unique", function (message, path) {
  return this.test("unique", message, function (list) {
    const mapper = (x) => get(x, path);
    const set = [...new Set(list.map(mapper))];
    const isUnique = list.length === set.length;
    if (isUnique) {
      return true;
    }
    const idx = list.findIndex((l, i) => mapper(l) !== set[i]);
    return this.createError({path: `users[${idx}].${path}`,message});
 });
});
```

With Yup, we create a Yup formatted object that resembles our intended schema for an object.

```
const schema = Yup.object().shape({
 users: Yup.array().of(
   Yup.object().shape({
     name: Yup.string().required("Name is required"),        
   })).unique("Duplicate user", "name")
});
```

Formik has a special config option / prop for Yup object schemas called validationSchema which will automatically transform Yup’s validation errors into a pretty object whose keys match values and touched. Set the validationSchema option to the schema created above.

Use FieldArray that helps with common array/list manipulations. Pass it a name property **name=”users”**. FieldArray will give access to array helper methods via render props.

{% gist https://gist.github.com/anlisha-maharjan/bcdda05cc5b3587b7bb4109562105737 %}

Note on line 57, **arrayHelpers.push** add a value to the end of an array. Similarly, **arrayHelpers.remove** on line 104 remove an element at an index of an array and return it.

Field hooks up inputs to Formik. Note the name attribute on line 82; it uses to match up with Formik state.  
  
Thank you for reading!

The post [Yup.array validate object property is unique with Formik in React.](https://anlisha.com.np/blog/yup-array-validate-object-property-is-unique-with-formik-in-react/) first appeared on [Anlisha Maharjan](https://anlisha.com.np/blog).
Event Management in Salesforce
Published: 2022-11-29 08:15:13


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



There are many things you need to keep track of when running an event.

You need to track your attendees, your speakers, your sponsors, your volunteers, and your supplies. You also need to track your finances, your marketing, and your overall event management.

The best way to track all of this is to use a software program that is designed for event management. If you are using salesforce, you can track all these within Salesforce.

Are you using Salesforce and want to use it to execute great events?
If yes, you can use our solution that can be customized according to your requirement.
You can simplify the entire planning process so you can focus on what matters most. It can help you to create great reports and track most things.  

Learn more about [Salesforce Event managment](https://arrify.com/event-management-in-salesforce/)

It includes:

- Planning of event
- Salesforce users allow adding any contact to the event
- Micro portal, where anyone can register
- Questions related to the Event
- WordPress website page to show all the event
- Reporting
Install SSM-Agent on AWS EC2 Instance
Published: 2022-11-29 08:11:22

_Create an AWS EC2 Instance
Create IAM Role with AmazonEc2RoleforSSM permission
Attach this IAM Role to your EC2 Instance 
Now SSH into the EC2
Check status if SSM-Agent is installed using this command,_
**$ sudo systemctl status amazon-ssm-agent**

**$ yum info amazon-ssm-agent**

_Command to install SSM-Agent_
**$ sudo yum install -y https://s3.region.amazonaws.com/amazon-ssm-region/latest/linux_amd64/amazon-ssm-agent.rpm**

_Add preferred region in command and run to install ssm agent_
**$ sudo yum install -y https://s3.us-east-1.amazonaws.com/amazon-ssm-us-east-1/latest/linux_amd64/amazon-ssm-agent.rpm**

_Now you can open the instance on console and login using session manager_