teleren/devto huggingface dataset:
Sign-In with Solana
Tags: solana, javascript, blockchain, authentication
Published: 2021-12-20 15:27:44

Solana has become lately one of the hottest programmable Blockchains after Ethereum. Since the adoption of Solana is growing, and also the number of people using one of their wallets, it might be convenient to start looking into how to support one-click authentication for web sites.

This post will show how to enable that scenario with Phantom.

##One-Click authentication with signatures

Either Ethereum or Solana supports the idea of signing text messages with the user's private key available on a wallet. Since only the user owns that private key, and it is the only one who can generate an equivalent signature, this is proof enough to use it as an authentication mechanism. A This scenario uses a combination of Signature + Public Key/Address. As an analogy to a traditional authentication method like username and password, the Public Key/Address would be equivalent to the username, and the signature to a password.

##Signing a text message with Phantom

The following code shows how to use Phantom to sign a message. The user will be prompted to authorize this operation.

```javascript
const message = `Sign this message for authenticating with your wallet. Nonce: ${nonce}`;
const encodedMessage = new TextEncoder().encode(message);
const signedMessage = await solana.request({
   method: "signMessage",
   params: {
     message: encodedMessage,
   },
});
```

A nonce was generated server-side and injected in the text message to avoid reply attacks, in which the user signature is intercepted and reused for authentication later on.

This sample uses NextAuth for integrating authentication in a Next.js application. The signature and public key are passed to the SignIn function provided by NextAuth.

```javascript
signIn('credentials',
{
  publicKey: signedMessage.publicKey,
  signature: signedMessage.signature,
  callbackUrl: `${window.location.origin}/`
})
```

##Verifying the signature on the server side.

The server receives the signature and public key and  verifies whether the former is valid. The user is authenticated once this validation passes successfully.

```javascript
const nonce = req.cookies["auth-nonce"];

const message = `Sign this message for authenticating with your wallet. Nonce: ${nonce}`;

const messageBytes = new TextEncoder().encode(message);

const publicKeyBytes = bs58.decode(credentials.publicKey);
const signatureBytes = bs58.decode(credentials.signature);
                    
const result = nacl.sign.detached.verify(messageBytes, signatureBytes, publicKeyBytes);

if (!result) {
  console.log(`authentication failed`);
  throw new Error("user can not be authenticated");
}

const user = { name: credentials.publicKey }

return user;
```  

This code retrieves the generated nonce from a session cookie, recreates the text message, and validates the user's signature with the public key passed by the client side.
Once the signature is validated, the public key is set as the username for the user.

The complete sample is available to download from my Github repository [solana-login](https://github.com/pcibraro/solana-login)
The every and reduce method in javascript array
Published: 2021-12-20 15:24:44

1. every();

The every method in JavaScript aray returns the Boolean value is the every element of an array passes the functions condition.

The every method will executes the user specified function on every present element of an array until it finds falsy value. If any falsy value found by the callback function it immediately returns the false. Hence, the callback function returns truthy value for every element the every will return true.

Example: 

```
const func = (value) => value < 30;
const array1 = [25,28,15,19,7];
console.log(array1.every(func)); //returned true
```

2. reduce() 

The reduce method in JavaScript
![The every method and reduce method in javascript array operation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gtv2l9nrpj2px2l4mhl.png) is execute a users specified callback function on each element of an array. The final result of the function will be a single value. 

When first time the callback function run no value will be return of the previous calculation. If we give any initial value as starts value it will use otherwise the 0 number index element will use as an initial value and iteration starts from index number 1./

```
const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
```
3 Clever JavaScript Tricks for Beginners
Tags: javascript, webdev, beginners, programming
Published: 2021-12-20 15:23:54

Hello, I am back again with a new article for mostly beginners and if you are intermediate or at advanced level than this article might be useful for them also.

Let's get's started:

### 1. Pass arguments to functions as objects

```js
const product = ({name, description, price}) => {
    console.log("Name: ", name)
    console.log("Description: ", description)
    console.log("Price: ", price)
}

console.log(product({
    name: "Soda",
    description: "Water with CO2",
    price: "$0.5"
}))
```
Some benefits of using,
- `Auto Complete` becomes easier as IDE will focus on arguments only.
- Easy to handle large `codebase`
- Clear way to call `functions`

### 2. Format JSON Data with spaces
```js

const product = {
    name: "Soda",
    description: "Water with CO2",
    price: "$0.5"
}

const formatted = JSON.stringify(product, null, 2)
console.log(formatted)
//{
//  "name": "Soda",
//  "description": "Water with CO2",
//  "price": "$0.5"
//}
```

### Use `spread operators` to copy objects
```js
const num = [1,2,3,4,5,6,7,8,9]

const spaceOperator = [...num, 10, 11, 12]

console.log(spaceOperator)
```
***

### Make sure to check out my [Youtube Channel](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ/) and subscribe to it

{% youtube https://www.youtube.com/watch?v=o_6hdpDGus0 %}
Map, Filter, Find
Published: 2021-12-20 15:19:39

**Map, Filter, Find**

We all use arrays when working with JavaScript. An array is a data structure where the same element can be stored.We use Map, Filter, and Find to get elements from the array. Today I will try to explain Map, Filter, Find in a simple way.

**Map:**
The function of a map is to take the property from one array and return it to another array.Many may say that "foreach" can also be used to return the property from the array. Yes, that's right, but "foreach" can't automatically return a new array like "map", you have to push the property in an array
Using foreach:

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

Using Map:

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

So in the above pictures we can see that using "foreach" we have to push the property in a new array but "map" has made this task easier.

**Filter :**
Filter returns the properties of an array to a new array like "Map", but in this case we can access the property using the terms. For which only the necessary features can be found in an easy way without accessing an entire array.
In the image below, I did not take all the properties from the same array and only filtered the largest property from 10.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/04fhzwys6t9lu1xs4tu0.PNG)


**Find:**
Find is usually called array method."Find" is used to get a value from an array and it does not return a value to any array. And in case of value return returns the first value like condition. 
I am clearing the matter with an example, suppose
Number = [10,12,3,4,6,90], from this array I want to see properties greater than 10, here 12 and 90 have these 2 values as the largest property of 10, but "Find" is only the first Value 12 will be given as a result.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhn6aii21tf03dxb7xdv.PNG)
5 useful Git-commands
Tags: git, commands, beginners
Published: 2021-12-20 12:39:31

### Create a new branch 
Using the git terminal may still be the fastest way of creating a new branch, even with Git integration tools in code editors as VS Code. 

```powershell
git checkout -b <new-branch-name> master
```
<br/>
<br/>
### Rename your Git-branch (local and remote)
Having a branch naming convention is a good practice and will particularly be usefull in support of git automation workflows.
But sometimes you will find your branch not aligned with the set naming convention, and you already pushed code to the remote branch.
With the following commands you can adjust your local and remote branch name

```powershell
#Checkout the branch you want to rename
git checkout <old-branch-name>

#Rename the branch locally
git branch -m <new-branch-name>

#Delete the old branch from remote 
git push origin :<old-branch-name><new-branch-name>

#Reset upstream branch for the new branch name
git push origin -u <new-branch-name>
```

### Uncommit local commits
Sometimes you can have made a commit, which you now regret and you want to remove. There are several ways to remove/undo these commits 

```powershell
#Keep the changes you made, but undo the commit
git reset --soft HEAD^

#Undo the commit and destroy all made changes
git reset --hard HEAD^

#Destroy/Undo more than 1 commit (2 commits in example) 
git reset --hard||--soft HEAD~2


```
<br/>
<br/>
### Delete a file/multiple files from Git-branch (local and remote)
Deleting a file(s) from remote could be useful if the file is deprecated or isn't supposed to be in the git repository in the first place. 

```powershell
#Remove your file(s) locally 
git rm <file-a> <file-b> ...

#Commit your changes 
git commit -m "Commit message"

#Push changes to git
git push
```
<br/>

### Remove dead branches
When you work on decent sized projects, it can occur that the git-repository has tens or hundreds of branches from previous pull requests. 
Most of these branches are probably already merged and deleted on the remote repository, but they still are listed on your local machine.
To delete these dead branches, use the following command
```powershell
git remote update --prune
```
Ionic 4+ Intro
Tags: javascript, angular, webdev, beginners
Published: 2021-12-20 15:15:27

Ionic is a distributed set of web components using custom elements and shadow DOM APIs available in all modern mobile and desktop browsers. Ionic framework contains its own custom set of HTML tags which can easily be imported with the framework.

Ionic contains stencil-built components which lead the pack in terms of bundle size and load performance. This web framework can be used with React and Angular to reach even higher performance levels.

Ionic has a beautiful array of custom theme designs that can be used across the platform. Here is a small sample of some of the capabilities: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9x5oyzsmgrxjxbz58qjp.png)

Another interesting aspect of Ionic is that you can use the bundling .and tooling specific to the other web frameworks you utilize. That means you’ll use the Angular CLI when using Ionic with Angular, React CLI with React, and so on.

To get started with Ionic its very simple, run: 
```
npm install -g ionic # Update the Ionic CLI
ionic start awesome-app
```
This will create your ionic app will all the pertinent needs. Then depending what you want to do grab your other framework and start building your dream project.

Finally, to create your first Ionic homepage simply utilize the Ionic CLI.

Run: 
```
ionic generate page HomePage
```
And you will have created an Ionic homepage with 0 boiler code.

The next step is importing the page in src/app/app.module.ts. The code follows as so 
```
import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
    MyApp,
    HomePage
    ],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage  
    ],
providers: [
    /* .... */
]
})
export class AppModule {}
```
You now have a working homepage, congrats!

So why would you use Ionic? For sure the primary reason is its simplicity. Ionic lets you build cross platform apps at ease. There are many different plugins that enhance the overall performance of apps and this only involves adding a few simple codes to your development. With all of these aspects, the user interface is extremely well done. Ionic also supports the motion, depth, and beautiful colors of the material design for a ban awesome looking UI. The final aspect of Ionic that breeds usability is the ease of testing it provides. Cross-platform testing has never been easier. You can test the app native or hybrid on the actual platform to get an idea of how the app will function.

Overall, Ionic is one the superior options to build any hybrid app; it takes advantage of the unique pairings of any framework you choose.
Accessibility: Why care?
Tags: a11y, webdev
Published: 2021-12-20 15:12:00

> - Convenient layouts.
> - Right-sized elements.
> - Predictable updates.
> - Contrast colors.
> - Clear button icons and names.
> - Intuitive navigation.
> - Voice- or gesture-driven control.

Does this list sound like luxury? Well, it shouldn't. Such features will make the web/app experience much better for so many users.

For example, Dutch people did a little [research](https://accessibility.q42.nl/) about it and found out (not surprising at all, really) that **43%** of users apply _at least one_ accessibility feature for their convenience. 

These features are:

- Adjust text size – 32.62 %
- Dark mode – 26.79%
- Zoom – 7 %
- Bold text – 6.86 %
- Shake to undo – 6.14 %
- Speak selection – 4.19 %
- Reduce transparency – 3.41 %

Accessibility for content, software, and interfaces is a critical issue nowadays. It affects every one of us at some point of our lives. **This is the main reason why you should think about your product's accessibility today.**

- Read more about accessibility audits, rules, and tips [in our blog post ](https://exceed-team.com/blog/mobile-app-website-accessibility-standards-wcag-section-508-compliance-accessibility-audit)
Advanced TypeScript With Code Challenges: Conditional Types
Tags: javascript, typescript, programming, codepen
Published: 2021-12-20 15:01:01

![Large elephant with Typescript logo and small elephant with JavaScript logo](https://miro.medium.com/max/2000/1*jUBpz0DE_5DSUvDOk_3ZJg.png)

Typescript allows you to create so-called conditional types. They take a form that looks similar to conditional expressions (condition ? trueExpression : falseExpression) in JavaScript. That enables us to guarantee types during runtime.

{% medium https://medium.com/@mariusbongarts11/advanced-typescript-with-code-challenges-conditional-types-8dd4e63818a5 %}
Contributing to Telescope: The Plan!
Published: 2021-12-03 17:21:11

[Telescope](https://github.com/Seneca-CDOT/telescope) is an open source web server and client application for aggregating and presenting blog feeds. Over the next 2 weeks, my plan is to contribute to it. 

While there are different areas that can be worked on, I want to focus more on the tools and technologies being used in the project, with a goal of ultimately improving the development experience.
There are two open issues that I've decided to take up and I also plan on working on more, to have a meaningful contribution for release 0.4:

## Stop using actions/cache in GitHub Actions Workflows
[#2537](https://github.com/Seneca-CDOT/telescope/issues/2537) talks about using built in cache from [setup-node](https://github.com/actions/setup-node#caching-packages-dependencies) instead of [actions/cache](https://github.com/actions/cache).

I've taken a brief look at the actions workflows and after going through the setup-node cache documentation, I think the challenging aspect here would be testing this as it would require creation of pull requests to trigger the CI runs.

## Add trojan source eslint plugin to Telescope and Satellite
[#2533](https://github.com/Seneca-CDOT/telescope/issues/2533) was filed to introduce an anti trojan source plugin to `Satellite` and `Telescope`. [eslint-plugin-anti-trojan-source](https://github.com/lirantal/eslint-plugin-anti-trojan-source) needs to be added to the ESLint configuration. This seems like a small and straightforward issue which would overall improve the security.

Other than these two issues, I also plan on picking up more tasks to have a sizeable contribution to the project for release 0.4
Introduction to Tailwind CSS
Tags: tailwindcss, css, tutorial
Published: 2021-12-20 14:57:50

---
title: Introduction to Tailwind CSS
published: true
description: Introduction to Tailwind CSS - We build a simple app from scratch, style a button, and build a component.
tags: tailwind,css,tutorial
//cover_image: https://direct_url_to_image.jpg
---

Introduction to Tailwind CSS - We build a simple app from scratch, style a button, and build a component.

{% youtube Pz4d9Aqs4eA %}
Javascript String Method Concepts
Published: 2021-12-20 14:14:11

**String charAt(position) Method:-** The `charAt()` method accepts the index of specified position and returns the character of this specified position in a string.

```
Example: 
let a = "This is a string chatAt() method";
let char = a.charAt(0);
console.log(char);

Output: T
```


**String charCodeAt(position) Method:-** The `charCodeAt()` method accepts the index of specified position and returns a number indicating the Unicode value of the character at the given position in a string.

```
Example: 
let a = "This is a string chatAt() method";
let char = a.charCodeAt(0);
console.log(char);

Output: 84
```


**String concat([string,,]) Method:-** The `concat()` joins two or more strings and returns a new string. This method can be used instead of the plus operator.

```
Example:
let a = "Javascript";
let b = "String Concept";
let c = a.concat(" ", b);
console.log(c);

Output: Javascript String Concept
```


**String includes() Method:-** The `includes()` method accepts a string and its position and then returns true if a string contains a specified string, Otherwise it returns false. The includes() method is case sensitive. Its syntax is like:

`string.includes(searchvalue, start)`

```
Example:
let a = "This is a text string";
let result1 = a.includes("tex", 10);
let result2= a.includes("tex", 5);
console.log(result1);
console.log(result2);

Output: 
True
False

```

**String lastIndexOf() Method:-** The `lastIndexOf()` method accepts a specified string and searches the string from the end to the beginning position. It returns the index from the beginning of this string, otherwise returns -1 if the value is not found. It is also case sensitive. Its syntax is like:

`string.lastIndexOf(searchvalue, start)`


```
Example:
let a = "This is a text string";
let result1 = a.lastIndexOf("text");
let result2= a.lastIndexOf("Text");
console.log(result1);
console.log(result2);

Output: 
10
-1

```

**String replace() Method:-** The `replace()` method accepts two specified strings and Search specific string value and replace with specified replace Value string and return new string. Regular expressions can also be used as searchValue. Its syntax is like:

`string.replace(searchValue, replaceValue)`

```
Example:
let a = "Please visit my portfolio";
let result= a.replace("portfolio", "website");
console.log(result);

Output: 
Please visit my website
```


**String slice() Method:-** The `slice()` method accepts two indexes as parameters and extracts a section of a string based on specified starting and ending index and returns a new string. Its syntax is like:

`string.slice(startIndex, endIndex)`

```
Example:
let a = "Please visit my portfolio";
let result= a.slice(7,26);
console.log(result);

Output: 
visit my portfolio
```
Be careful when choosing a format
Published: 2021-12-20 14:14:01

---
title: Be careful when choosing a format
published: true
description: be careful when choosing a format
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ywwdsva87ho8mpgzabt.png
---



{% twitter 1472223729056841732 %}
Rails 7, Bootstrap 5 tutorial : fear and relief
Tags: rails, beginners, tutorial, css
Published: 2021-12-20 13:46:24

Full article is here : https://www.bootrails.com/blog/rails-7-bootstrap-5-tutorial/

You probably heard that Rails version 7 is out. There are some debates over the wild Internet to know if the new way to handle frontend assets is a good or a bad news.

Anyway, we tried it "from scratch", so that you can make your own opinion :)

It's a step-by-step tutorial, by copy-pasting, so that you have time to grab all concepts. Beginners are welcome, as well as more experienced Rubyist that want to have an overview of a new concept.

Subscribe to the newsletter at the end of each article to have one more article like this each week :)

https://www.bootrails.com/blog/rails-7-bootstrap-5-tutorial/

Best of luck !

Shino & David
8 most useful PhpStorm keyboard shortcuts
Tags: programming, php, productivity, webdev
Published: 2021-12-20 13:40:12

###`Double Shift` - Search Everywhere 

Quickly find any file, action, class, symbol, tool window, or setting in PhpStorm, in your project, and in the current Git repository.


###`Ctrl+Shift+A` - Find Action

Find a command and execute it, open a tool window, or search for a setting.


###`Alt+Enter` - Show Context Actions

Quick fixes for highlighted errors and warnings, intention actions for improving and optimizing your code.


###`F2` and `Shift+F2` - Navigate between code issues

Jump to the next or previous highlighted error.


###`Ctrl+E` - View recent files

Select a recently opened file from the list.


###`Ctrl+W` and `Ctrl+Shift+W` - Extend or shrink selection

Increase or decrease the scope of selection according to specific code constructs.


###`Ctrl+/` and `Ctrl+Shift+/` - Add/remove line or block comment

Comment out a line or block of code.


###`Alt+F7` - Find Usages

Show all places where a code element is used across your project.

###Summary
To master your programming skills first you have to master tools you use. 
Which keyboard shortcut you use most often?