teleren/devto huggingface dataset:
How to create a Power Platform Keyboard
Tags: tutorial, powerplatform, powerapps, powerautomate
Published: 2022-12-27 09:21:25

After seeing the Stack overflow keyboard, I really wanted a Power Platform version, with each button launching the relevant website. But as there was none available so I decided to make my own.

All I needed was:

- A macro keyboard
- Custom Keycaps

---

I went for this keyboard from Amazon [Ecarke-Keyboard](https://www.amazon.co.uk/Ecarke-Keyboard-Mechanical-Keyboards-Programming/dp/B096ZQGHVQ), because it didn't need software installed on the laptop (my work laptop wont let me install any). It's a very simple, cheap (especially the config software) keyboard, but does what I need.

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

Next was the custom keycaps, this was harder than i thought, as the only reparable ones were £12 each. So in the end I took a gamble and went for some off [Aliexpress ](https://a.aliexpress.com/_mKBMtKQ) at £2.54 each. The quality isn't the best, but it's good enough.

I got the images from the official Microsoft site [here](https://learn.microsoft.com/en-us/power-platform/guidance/icons), and converted them to png using [tinywow](https://tinywow.com/image/svg-to-png).

On the keyboard I configured each site to a unique combination of keys.

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

And then used this [trick](https://www.makeuseof.com/windows-open-website-with-keyboard-shortcut/) to create shortcut icons to each Power Platform site. 

- You drag the bookmarks from web browser to desktop
- Then add relevant combination of keys as shortcut keys

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

And that's it, all done.

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

I don't currently use Power Pages, so I also had a Power Platform icon printed, which I have mapped to the admin center.

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

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

---

There are definitely better keyboards and keys, but for a total of £40.16/$48.45 (Keyboard £22.99, keys £17.17) I think it's a good result.
What is an API and how does it work with example...
Tags: webdev, api, programming, beginners
Published: 2022-12-27 09:11:47

An API, or Application Programming Interface, is a set of rules and protocols that defines how two pieces of software can communicate with each other. It allows one piece of software, such as a website or a mobile app, to access and use the functionality of another piece of software, such as a database or a server.

Here is an example of how an API might work:

1. A user visits a website and wants to search for a particular product.
2. The website sends a request to the server through the API, asking for a list of products that match the user's search criteria.
3. The server receives the request and uses the API to access the database, which contains a list of products.
4. The server searches the database and returns a list of products that match the user's search criteria to the website through the API.
5. The website receives the list of products and displays them to the user.
 
APIs can be used for many different purposes, such as allowing different applications to communicate with each other, exposing data from a database to a website, or enabling a mobile app to interact with a server. They are an essential part of modern software development and are used extensively in many different industries.
Building a free Open-source portfolio template using HTML, CSS and JS | Part 2
Tags: webdev, html, css, opensource
Published: 2022-12-27 08:55:06

On the 15th of May in 2020 I [wrote here](https://dev.to/nisarhassan12/free-open-source-portfolio-template-for-developers-ih) about the free open source portfolio template that anyone could use for free.

<blockquote>
    <div>
        GitHub <a href="https://github.com/nisarhassan12/portfolio-template" target="_blank">Repo Link →</a>
    </div>
    <br/>
    <div>
        Check out the <a href="https://portfolio-template.surge.sh" target="_blank">live demo here →</a>
    </div>
</blockquote>

Since then it has got 395 stars on GitHub and 128 forks.

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

I have started a [video series](https://www.youtube.com/watch?v=1nchVfpMGSg&list=PLwJBGAxcH7GzdavgKlCACbESzr-40lw3L) on YouTube where I'm going to build it from scratch using HTML, CSS and a little bit of JavaScript. 

Come join me in the journey last sunday I did the [first part](https://www.youtube.com/watch?v=1nchVfpMGSg) and today I did the [second](https://www.youtube.com/watch?v=-lPryuToBxo) of the series here is the embed:

{% youtube -lPryuToBxo %}

I'll be doing the next part on Sunday subscribe to my channel [https://www.youtube.com/@nisarhassan12](https://www.youtube.com/@nisarhassan12) if you find it worthy. Thanks
Bert Pretraining approach
Published: 2022-12-27 08:53:25

I have started working on Bert model. Do anyone know what was Bert pre-training accuracy(not fine tuned) using 100-0-0 masking approach vs 80-10-10 approach. I could not get it anywhere.
Basically I understand why 80-10-10 approach is implemented but did they do any experiments to figure this out
Please advise
Introduction to OAuth and OAuth Flow
Tags: webdev, javascript, programming, beginners
Published: 2022-12-27 08:43:46

## <u>What is OAuth</u>


OAuth is a delegated authorisation protocol that allows users to share information between services without exposing their password.

An example of OAuth can be a website or an application asking their users to register or login via some other applications like google, Github, etc.

Main motive of using OAuth is to provide authorisation and not authenticating the users.

<u>**OAuth Flow**</u>

In OAuth we deal with three interfaces -

1. Browser application
2. Server
3. OAuth Provider

Below is how OAuth flow works we can take example of logging in with google,


![OAuth Flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j13k58hj1mm7un59wu40.png)

1. In our application or website in the browser we choose to sign in with google.

2. The login router passes the instruction to the OAuth middleware which is middleware performing operation like providing the correct strategy based on our OAuth service provider, granting tokens, attaching the user information with the current session, etc.

3. When permission is granted from the consent screen by the user an access token is generated.

4. The access token is passed to the authorisation server which provides user information if the access token passed is correct.

5. The response from the OAuth provider server is passed into our callback function and profile data can be extracted from it.

6. After we have the profile data we can provide authorise to the user or store data in our local database, etc.




👏 Thanks For Reading the article !
Drag and Drop File using Javascript
Tags: html, css, javascript, webdev
Published: 2022-12-27 08:39:51

Hello everyone, today I'll show you how to use HTML, TailwindCSS, and Javascript to construct a drag-and-drop file upload. I will highlight the key ideas here, and the code, together with code comments, will be made available at the end of the blog.

Let's get started...

# Main Things about this Drag and Drop Component - 
* It has 3 validations - File type should be either image or pdf, the File size should be less than 5 MB and It is a must to select at least 1 file.
* The file selected will show 4 features - File name, Size, Type, and a delete button. To delete the file and select another file.
* All the functions and methods are separately created for better code structure and readability.
* Validation of file type/size and adding a file is done inside "drop" event listener.
* Validation of "No files selected" is done inside the "click" of "Next" button.
* There is an input button "Select a file" which is used to select the file manually instead of dragging and dropping.
* The logo of the file changes according to the file type whether it is an image or pdf file.

# Codepen Demo - 
{% codepen https://codepen.io/shubhamtiwari909/pen/yLqYRdN %}

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
How to Choose the Best Coding Bootcamp?
Tags: coding, botcamp, for, beginners
Published: 2022-12-27 08:38:59

There has been a sudden increase in the number of coding bootcamps. So, it is difficult to choose the best coding bootcamp. In this video, We at SynergisticIT will provide you with some tips on how to choose the best coding bootcamp?

Read more: [https://www.synergisticit.com/how-to-choose-the-best-coding-bootcamp/](https://www.synergisticit.com/how-to-choose-the-best-coding-bootcamp/)

Watch: [https://www.youtube.com/watch?v=2WkC5HxB6fI&t=5s](https://www.youtube.com/watch?v=2WkC5HxB6fI&t=5s)
The benefits of a whitelabel wallet for your business
Tags: cryptowallet, whitelabelcryptowallet, cryptowalletwhitelabel
Published: 2022-12-27 08:21:54

A white label crypto wallet is a type of cryptocurrency wallet that is branded and customized by a third party for use by their own clients or customers. It is essentially a pre-made wallet solution that can be easily customized and integrated into an existing business or service, rather than having to build a wallet from scratch.

White label crypto wallets are often used by exchanges, brokerages, and other financial services companies as a way to offer their customers a secure and convenient way to store and manage their cryptocurrency assets. They may also be used by e-commerce platforms, payment processors, and other companies that want to offer their customers the ability to pay with cryptocurrency.

One of the main benefits of white label crypto wallets is that they allow companies to quickly and easily offer cryptocurrency storage and management services to their customers without having to invest the time and resources into developing their own wallet solution. This can be especially useful for companies that are new to the cryptocurrency space and want to offer these services without incurring the overhead costs of building their own wallet from scratch.

There are many different [white label crypto wallet](https://www.leewayhertz.com/whitelabel-crypto-wallet/) providers that offer a range of customization options and features. Some common features that these wallets may offer include support for multiple cryptocurrencies, integration with popular exchanges and payment processors, and the ability to customize the wallet's user interface and branding.

Overall, white label crypto wallets provide a convenient and cost-effective way for companies to offer cryptocurrency storage and management services to their customers. They can be easily customized and integrated into existing business models, allowing companies to quickly enter the cryptocurrency space and offer their customers a secure and convenient way to manage their digital assets.
HTML is my name
Tags: html, webdev, beginners
Published: 2022-12-27 08:17:24

Hi 👋

**HTML** is my name.

My job is to describe your document and its content.

![HTML annotates the content a web browser will display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff0s3l2zqb76ir9tomcg.png)

[Find out more about me](https://codesweetly.com/html-in-simple-terms).
Today's Daily Humor For Devs - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-12-27 08:00:08

---
title: "Today's Daily Humor For Devs - Daily Developer Jokes"
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/5e1259316ab83.png)

---

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

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

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

<!--
Joke text:
___Q:___ What are the three hardest problems in computer science?

___A:___ Naming things and off-by-one errors
 -->
Why Cookie is preferable compared to localStorage when it comes to authentication
Tags: webdev, javascript, beginners, programming
Published: 2022-12-27 07:49:49

###Introduction
We know about JWT, or JSON Web Token, as an industry standard RFC 7519 method for representing claims securely between two parties. JWT is very common nowadays. But where should we store them in the front end?

In this article, I will break down 2 common places to store tokens. **Cookies** and **LocalStorage**

###Comparison
###Local Storage
To use `localStorage`, just simply call use the `localStorage` object

```
localStorage.setItem("yourTokenName", yourToken)
localStorage.getItem("yourTokenName", yourToken)
```

Pros:

- Very convenient, don’t need any backend, just pure JavaScript.
- Big Data size, about 5mb.

Cons:

- Vulnerable to XSS attacks. An XSS attack happens when an attacker can can take the access token that you stored in your localStorage because they can run JavaScript on your website.

###Cookies
To set `cookie` , we can do:

```
document.cookie = "cookieName=value"
```

or do this with http request:

```
Set-Cookie: <cookie-name>=<cookie-value>
```

Pros:

- If you’re using httpOnly and secure cookies this means that your cookies cannot be accessed using JavaScript so even if an attacker can run JS on your site, they can't read your access token from the cookie.
- Can set expiration date

Cons:

- Only 4kb of storage

###Security concerns
###XSS Attacks
Like I said above, local storage is vulnerable because it’s easily accessible using JavaScript and an attacker can retrieve your access token. However, while `httpOnly` cookies are not accessible using JavaScript, this doesn't mean that by using cookies you are safe from XSS attacks involving your access token.

If an attacker can run JavaScript in your application, they can just send an HTTP request to your server which will automatically include your cookies; It’s just less convenient for the attacker because they can’t read the content of the token although they might don’t have to.

###CSRF Attacks
Cross-site request forgery (also known as CSRF) is a web security vulnerability that allows an attacker to induce users to perform actions that they do not intend to perform.

However, this can be mitigated easily using `sameSite` flag in your cookie by including an anti-CSRF token.

###Conclusion
Cookies still have some vulnerabilities but it’s preferable compared to localStorage whenever possible. Because:

Both `localStorage` and `cookies` are vulnerable to XSS attacks, but it's harder for the attacker to do the attack when you're using httpOnly cookies.
Cookies are vulnerable to CSRF attacks, but it can be mitigated using sameSite flag and anti-CSRF tokens.
You can still make it work, even if you need to use the Authorization: Bearer header or your JWT is larger than 4KB.
Why are the results like this?
Tags: javascript, beginners, programming, codenewbie
Published: 2022-12-27 07:49:46

```js
const defaultEmployee = {
  tasks: []
}

const employees = []

const NUMEBR_OF_EMPLOYEE = 5
const INDEX_CEO = 0

for (let index = 0; index <= NUMEBR_OF_EMPLOYEE; index++) {
  const employee = {
    ...defaultEmployee,
    role: index
  }

  if (employee.role === INDEX_CEO) {
    employee.tasks.push({ salary: 10.000 })
  } else {
    employee.tasks.push({ salary: 1.0 })
  }

  employees.push(employee)
  console.log(defaultEmployee)
}

console.log(employees)
```

Result:

![Image-description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13nzujuciruzp5kyg09x.png)
Passwords, No More Pain
Tags: cybersecurity, gopasswordles, authentication, passwordspain
Published: 2022-12-27 07:40:48

In this article, we will see why passwords are not as good as we think and how the passwordless authentication methods are helps us for better UX and security.

**Overview**

Passwords are like the common cold: they induce headaches, no one is immune, and there is no cure. But they are necessary for this era of digital data, where everything from paying bills to passing notes to sharing photos is done online through user accounts that require some proof that you are who you say you are. The use of passwords knows as it should be easy to remember and difficult to guess by anyone.

**Pain Points With Passwords**

There are some pains we have to follow for using a password :

1. Use a unique password for every website
2. Use long passwords
3. Include some random characters
4. Don’t follow common patterns
5. Only store passwords in a secure location
6. Security is essential, but so is convenience

These are the things the user needs to remember before creating an account on a website or application with password authentication.

**Advantages of Passwordless Authentication**

The following infographic elaborates benefits of going password free over using passwords for authentication:


![Password V/s Passwordless](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utu23grh6publ5q9t36d.png)

**Improved User Experience**

Entering a password every time a user uses an application or website is a hassle. This passwordless method improves the user experience, and no hassles are involved.

**Increased Security**

The important benefit of this method of passwordless is providing security. With passwordless, users do not need to worry about hackers and losing information from their cloud directory. Password repetition is common among most people, and users are protected from vulnerability when there is no password to hack.

**Solution**

In this case, we should use passwordless authentication to give the user a better experience and security. As we see a new trend of big giants like Apple switching to passwordless, all others are promoting passwordless technology because it provides frictionless and secure authentication. There are multiple ways for passwordless authentication:

- Magic link sent to the e-mail
- OTP sent to the e-mail
- OTP sent by SMS
- Push-notification
- WebAuthn
- Security Key
- Social Login
- USB token device(Security Key)
- Mobile application with biometric authentication.

Mojoauth is also providing passwordless authentication. As mentioned above, it provides many features, and you can check its functionality as you sign up to our dashboard. You can set up passwordless authentication in just 2 minutes to your application.
Make your fonts responsive without javascript or media query
Tags: webdev, css, codenewbie, html
Published: 2022-12-27 07:25:46

There are a couple of ways to make the fonts responsive. In this short tutorial, I jump right on a way to make the fonts responsive that in most cases works the best.

> *Did you know that you can implement your* ***websites*** *or landing pages* ***with or without*** *coding on* [***DoTenX***](https://dotenx.com/) *for free? Make sure to check it out and even nominate your work to be showcased. DoTenX is* ***open-source*** *and you can find the* ***repository*** *here:* [*github.com/dotenx/dotenx*](http://github.com/dotenx/dotenx)*.*

You might think we can use media queries to make the fonts responsive. While this works fine in many case, the problem with this approach is that for a whole range of screen sizes your fonts will be the same which is not ideal.

```css
.my-text {
  font-size: 16px;
}

@media (min-width: 600px) {
  .my-text {
    font-size: 18px;
  }
}

@media (min-width: 900px) {
  .my-text {
    font-size: 20px;
  }
}
```

In this example the elements with class `my-text` will have the same font-size on a screen size of 900 pixels, 1000 pixels, or 1400 pixels!

One solution would be to use `vw` instead of the absolute units like `px`.

```css
.my-text {
  font-size: 2vw;
}
```

The problem with this approach is that the fonts can become too small or too large on some screens.

What's a better solution?

```css
.my-text {
  font-size: clamp(2vw, 16px, 24px);
}
```

The `clamp` function takes three arguments: the minimum value, the desired value, and the maximum value. In this example, the minimum value is `16px`, the desired value is `2vw`, and the maximum value is `24px`. The `clamp` function will return the desired value if it is within the range specified by the minimum and maximum values, otherwise it will return the minimum value if the desired value is less than the minimum, or the maximum value if the desired value is greater than the maximum.
Easiest way to understand Pub/Sub System (kid friendly)
Tags: architecture, javascript, beginners, react
Published: 2022-12-27 07:16:12

Imagine that you are in a library, and **you want to borrow a book**. You don't want to go to each shelf in the library and search for the book yourself, because that would take a lot of time and you might not even find the book. Instead, you decide to use the pubsub pattern to find the book.

Here's how you might use the pubsub pattern to find a book in the library:

1. You are the **publisher** in this situation, because you are the one sending the "find book" message to everyone else. When you want to borrow a book, you go to the librarian and tell them the title of the book you are looking for.

2. The library assistants are the **subscribers** in this situation, because they are the ones listening for the "find book" message. When a library assistant hears that someone is looking for a particular book, they go and search for the book on the shelves.

3. The librarian is the **message broker** in this situation, because they are the ones who receive the "find book" message from you and send it to the appropriate subscribers. When you tell the librarian the title of the book you are looking for, they pass this message along to the library assistants, who start searching for the book.

This way, **you don't have to go and search for the book yourself**. You can just tell the librarian the title of the book you want, and the library assistants will do the work for you. This makes it easier to find the book you are looking for and borrow it from the library.