teleren/devto huggingface dataset:
Rapyd Developer Newsletter: July, 2022
Tags: fintech, payments, newsletter, webdev
Published: 2022-07-22 18:44:00

## First Winner! 🔭 
The first [Rapyd Hack the Galaxy winner](https://youtu.be/5pK9N0flgxA) has been found! Check out Mario’s story and his experience with Hack the Galaxy as a developer.

[![Image of Hack the Galaxy Screen on YouTube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jeikvw4xhrp6td37rm9x.png)](https://youtu.be/5pK9N0flgxA)
***
**Rapyd Hackathon** - [Build the Galaxy’s Best Payment App for Space Tourism](https://htg2.devpost.com) ends Jul 28, 2022, @ 5:00 PM EDT. Congrats to everyone who has participated and submitted projects! 
 
Stay tuned for the announcement on the next hackathon at [community.rapyd.net](https://community.rapyd.net). Winners compete for a cash prize and a chance to present your idea at the Rapyd Demo Day in Lisbon!  
 
## Changelog
### Client Portal Updates
The Client Portal has been updated to include the ability to [save table filters](https://docs.rapyd.net/client-portal/docs/creating-and-saving-table-filters). You can organize advanced filters of tables and save each setting with a saved name to quickly return to your settings.

### Collect Updates
The Hosted Checkout Page card payment experience has been improved to [identify the card payment method type automatically](https://docs.rapyd.net/build-with-rapyd/changelog/hosted-checkout-page-cards-save-table-filters) when inputting the card number into the corresponding field.

---

### 🪐  [Explore Community](https://community.rapyd.net)

---

## Discover
### [Hosted Checkout Page using Categories](https://www.youtube.com/watch?v=og8MKqmPphM) `/videos`
Learn how to generate a Hosted Checkout Page using Categories of payments.

### [Wallets Object](https://www.youtube.com/watch?v=xAGeeyidnYQ) `/videos`
Learn about the Wallet Object, and how to update, disable, enable or delete a wallet.

### [What to Look for in a Payment Gateway API](https://community.rapyd.net/t/what-to-look-for-in-a-payment-gateway-api/27845) `/community`
Learn what a payment gateway API is and why you need it for your payment service.
Rails 7 & CSP - How to add a nonce to an inline <style> tag (if you must)
Tags: rails, csp, css, rails7
Published: 2022-07-22 18:43:57

---
title: Rails 7 & CSP - How to add a nonce to an inline <style> tag (if you must)
published: true
description: 
tags: rails, csp, css, rails7
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

I've been trying to get the Content Security Policy working in a new Rails 7 application but I have a `<style>` element in the document`<head>` that is causing problems when the CSP is enabled.

I don't want to add unsafe_inline to my CSP so the only other option is to use a nonce!

Unfortunately I need the styles to be "inline" because they are used to customize some CSS variables based on the logged in user's preferences and an inline style element with some ERB seemed like the quickest way to accomplish that

Here's how I ultimately got it working:

```ruby
content_tag(:style, nonce: content_security_policy_nonce) do
  ':root { --css-var: value; }'
end
```

The import part is the `content_security_policy_nonce` method (which just calls `request.content_security_policy_nonce`) will render the nonce in your ERB after the following two requirements are met

- You have `<%= csp_meta_tag %>` in your layout 
- You have something along these lines in your content security policy configuration

```
config.content_security_policy_nonce_generator = ->(request) { SecureRandom.base64(16) }
config.content_security_policy_nonce_directives = %w(script-src style-src)
```

See https://edgeguides.rubyonrails.org/security.html#adding-a-nonce for more info on configuring the nonce

The most important thing is to add `style-src` to the nonce directives. By default a new Rails project will only include script-src.

Rails does provide an easy way to do this with `<script>` tags but not with `<style>` tags - so here we are.

```ruby
<%= javascript_tag nonce: true do -%>
  alert('Hello, World!');
<% end -%>
```

I know its not good practice to have inline styles like this but this could be really helpful while adding CSP to a legacy app or when you really need to have the styles inline/in the head.
Content sources for staff+ fullstack Devs
Tags: fullstack, staffplus, learn
Published: 2022-07-22 18:39:00

Has anyone tried [CodeCrafters](https://app.codecrafters.io/tracks/go) to hone their dev skills? I find that the devil lies in the tradeoffs and not in knowing the minutiae of a particular language. 

Personally working on non-blocking Java web backends, two way data binding in Angular, state isolation with react, moving from years of REST API & MYSQL wrangling to graphQL.. I know there is a lot to learn but rare to find awesome content like: https://dev.to/ruizb/introduction-179d by @ruizb
Ruby Programming Full Course
Tags: 100daysofcode, codenewbie, ruby, webdev
Published: 2022-07-22 18:28:00

In this video, let us learn about **Ruby Programming**. This is a 3 hour long video that covers most of the important topics that you need in order to learn Ruby language. 

{% youtube wI-hfFW9hfI %}

Support my channel:
💜 Join the Discord community 👨‍👩‍👧‍👦: https://discord.gg/fgbtN2a 
💜 One time donations via PayPal
Thank you! 🙏

---
Follow me on:
👉 Twitter: https://twitter.com/The_Nerdy_Dev
👉 Instagram: https://instagram.com/thenerdydev
How to Crack the Staircase Problem with JavaScript using Memoization
Tags: javascript, algorithms, webdev, programming
Published: 2022-07-22 18:23:00

I want to write a quick follow up to a previous post on [How to Solve the Staircase Problem with 5 Lines of JavaScript](https://dev.to/apmfree78/how-to-solve-the-staircase-problem-with-5-lines-of-javascript-50ag).

It's a very elegant solution to the infamous staircase problem, *however, as one commentor noted it's terribly inefficient to the order of `O(3^n)`.😖

### Yikes! So Now What?

There's a cool trick with a funny name to fix this problem:  *Memoization*.  Yea, I'm not exactly sure how to pronounce it either! 😂

Here's what the staircase problem looks like memoitized...

```javascript
function stairSteps(N) {

  // store repeat values in memo to prevent repeat computations
  const memo = [];

  function stepsM(N) {

    if (N === 0) return 1;
    else if (N < 0) return 0;

    if (memo[N] !== undefined) return memo[N];
    else {
      memo[N] = stepsM(N - 1) + stepsM(N - 2) + stepsM(N - 3);
      return memo[N];
    }
  }

  return stepsM(N);
}

```

**The idea is simple:** the array `memo` just stores values that may repeat, so you can reference them later instead of having to calculate them again - *which is SUPER expensive in the case of recursion.*

### For example... 

Once you know the value of `stepsM(N-3)` which is calculated on the first round of `stepsM(N)`, you do NOT need to calculate its value again when it's called later by `stepsM(N-1)` or `stepsM(N-2)`. 

Pretty neat, huh?

![mewoization](https://i.imgflip.com/6m7sja.jpg)

If you enjoyed this article please check out my blog
[Indepth JavaScript](https://indepthjavascript.dev/) for more illuminating
content. 🤓
Show website address number in google search page (css , js)
Published: 2022-07-22 18:11:23

You may want to number the links in the search page of the google search page


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sra85m1a6nhheo5vdn6.jpeg)

These simple codes will help you fulfill your request

1) - The first thing to do is download this add-on to your browser => [User JavaScript and CSS](https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld)

2) - Go to google and search for anything you want
3) - Click on the icon at the top as in the image, then click on the link that the icon shows you

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

4) - A new window will open for you in addition, in the js field, put this code

`document.querySelectorAll(".g .yuRUbf h3").forEach((ele , i)=>{
	let newDiv = document.createElement('div')
	newDiv.setAttribute('class' , 'counterNum')
	ele.prepend(newDiv)

	document.querySelectorAll(".counterNum").forEach((ele , i)=>{
		ele.innerHTML = 1 + i
	})
})`

5) - in the css field, put this code

`h3.LC20lb.MBeuO.DKV0Md {
    display: flex;
    align-items: center;
}

.counterNum {
	width: 2rem;
    height: 2rem;
    background-color: #383a40;
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
}`

6) - Now the code works with

By = [ar.Tech Notice](https://ar.tech-notice.com)
how to add new font in your website using Google Fonts
Tags: javascript, github, html, css
Published: 2022-07-22 18:08:00

##how to add or using font in your website Step by Step:
_in this Article i will give you how to add or using new font in your website_
## Step 1 :
- **you should go to Google Fonts.**

    go from here : https://fonts.google.com/

![step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptklbpy3776lax3o4ngo.jpg)
## step 2 :

- **Choose the right Font for you.**
for example i choose Font ROBOTO and than click for Font name.
![step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lldlvny6yi5ro735vj0.jpg)
## step 3 :

- choose bold font and click it:
- and than click on @import
- and than Copy this , Show this picture :



![step 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yos87omhjuuu9bqb3yn7.jpg)
for example , i choose Bold font and click on blod 700 and than click on @import and than copy text under  @import .

## step 4 :
- past in your Css file.

![step 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9cv8ug2omm92jt01xhn.jpg)
## Step 5 :
- copy this css font families , Show this picture :
![step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11iiszdsfyca8tz6ctaw.jpg) 
## step 6 : 
- Past on your css file :

![step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qn6t9qsmdth4cq3htmmu.jpg)
## connect with me on : 
- [Twitter](https://twitter.com/ayoub_el_achab)
- [Instagram](https://www.instagram.com/ayoub_el_achab_/)
- [Git Hub](https://github.com/Lodstare)
- [Linkedin](https://www.linkedin.com/in/ayoub-el-achab/)
#microfrontends - top down or bottom ups
Tags: javascript, frontend, microfrontend
Published: 2022-07-22 18:05:31


Maybe, I would like to open this up with a Question. 

If you have to implement #microfrontend how would you do it? Top-down or bottom ups? Confused? The very well known and proud #Webpack module federation is more focused on the bottoms-up approach, you are forced(?) to create some set of components and then plug those into a root application, which sounds very obvious. In my honest opinion, this approach is there in any frontend framework and library nowadays, nothing new! Even in the bit.dev it is advised to create your application as a composition of loosely coupled components. But, if I am intended to serve this as a fully functional web application I need a sophisticated way to present these components as a functional and complete application

I would rather prefer an approach that you can loosely correlate with imperative and functional programming. I would prefer to keep my use-cases at the Center (Centre, long live the Queen) to methodologically implement my frontend. The framework should support easy plumbing of my components and needlessly to say deal with the complexity of moving my frontend between the unavoidable transitions of the browser. I may sound like I have made up my mind on a specific framework/library, indeed yes, but I have my own reasons for that and I would like to cover those in subsequent posts. Let's keep it slow and steady to help you digest and create some momentum for this series
Difference between let , const and var in Javascript
Published: 2022-07-22 17:57:35

In this blog, we will discuss the javascript keywords var, let and const.
After ES6 it's a bit confusing to understand this keyword and how they work inside the javascript.

Let's start the scope of let, var and const 

**Scope**
let:- variables declared in let's are in the block scope
 
const:- variables declared in const are also in the block scope 

var:- variable declared with var is in the functional scope

```
function abc () {
var a=10
}
console.log(a) // gives an error
for(let i = 0;i<2;i++){
	console.log( i ) // print 1 2 
}
console.log(i) // gives an error
{
const b=1;
console.log(b)// print 1
}
console.log(b)// gives an error
```
- for var, it shows the error because its is functional scope so it cant accessible outside the function
- for let inside the for loop block, it prints the output but outside the block, it gives an error as let is blocked scope
- for const inside the curly braces, it prints the value but outside braces give an error as it is also a block scope
 
**Let's check Reassigning values to let, const and var** 

- var:- reassigning is allowed
- let:- reassigning is allowed
- const:- reassigning is not allowed
```
var a = 1 ;
a = 2;
console.log(a) // print 2
let l = 1; 
l = 2 ;
console.log(l) // print 2
const c = 1 ;
c=2
consol.log(c) // give an error 
``` 
- for var reassigning of value shows most recent value 2
- for let also reassigning of value shows most recent value 2
- for const reassigning of value gives an error as reassigning is not allowed

**Let's check for Redeclaration of let, const and var** 

- let:- Redeclaration is not allowed 
- var:- Redeclaration is allowed
- const:- Redeclaration is not allowed
```
var v = 1;
var v = 20;
console.log(v);// prints 20
let i = 1;
let i = 20;
console.log(i); //  gives an error
const c = 1;
const c = 20;
console.log(c) // gives an error 
```
- for var, there is no error and prints the most recent declared value
- for let and const there is an error as it does not allow the redeclaration of variable 

These are some of the differences between let , const and var, hope you like it
Show me your windows terminal configure and github dotfile 😁👍
Tags: programming, windows11, terminal, github
Published: 2022-07-22 17:54:00

**github** **repo**: [click here!!](https://github.com/khengyun/win-config)
![Image description](https://user-images.githubusercontent.com/78076796/180936261-2e0db6b6-0e94-4640-a6ff-bbfe71fc4161.png)
Fluent UI Insights EP1: Positioning
Tags: webdev, fluentui, react, tutorial
Published: 2022-07-22 17:06:00

Recently, Oleksandr on the Fluent UI React team released a deep dive video on Positioning UX. It's our first episode in a video series we're experimenting with to see how folks want to learn more about the UX library.

I've linked the video below and as always let us know what kind of content you want see from Fluent UI React by visiting us on:
- GitHub: https://github.com/microsoft/fluentui
- Docs: https://react.fluentui.dev
- Twitter: https://twitter.com/fluentui

{% embed https://youtu.be/yhzAn4A1gbk %}

Thanks!
Deploy Your First Website On GITHUB pages
Tags: webdev, github, tutorial, opensource
Published: 2022-07-22 17:01:01

###By Shivpreet Padhi

Have you made a very cool looking website and want to show your friends. Or have you made a portfolio and u need to show it to the interviewer. You can do it for free using GitHub pages. 

You don't know how? I gotcha covered...

##1. Make a GitHub account:

Don't tell me you cant make a GitHub account! In case you don't, search it up on YouTube. Not the toughest job in the world.

![GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29qm1ld5e812pejg233p.png)
 
 
##2. Make a new Repository:

- Create a new repository and set it as public. Private repos cannot be deployed by GitHub pages.

- Name the repo lets say "example"(because that is what tutorials use... cliché but ok) 

![Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58kpftogwbf1g9sjpxji.png)

- Then add **.github.io**. This is a very important step. If you miss it, sad luck it will be F in chat.

- Speaking of important steps... Don't forget to add a **README.md**
 
- Then create the repository.

##3. Upload the files:

- In the repository upload the html, CSS, JavaScript and the assets.

![uploading files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxm0krt6c750dkdrcmz.png) 

- The **index.html** is a must. It is the page that will be visible at the beginning. 

###4. Deployment:

If you have followed these steps completely, with full dedication and righteousness, you are ready for the final step: **THE DEPLOYMENT**

It's the most simple step in the whole process of making a website and deploying. It may sound intimidating but hear me out guys:

- Go to settings for your repository.

- Go to pages.

- Set the **Branch** to whichever one you want to deploy (preferably main).

- Set the folder to **/(root)**.
![Deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnl7pyfb47awdbsocooj.png)
 

That's it guys you are done. Save the changes and you will get a free website that you can showoff to anyone u want. Go ahead pat yourself on the back and brag about it to your friends who are still using google sites (_Nervously looks at the [Crazy Codigo site](https://sites.google.com/view/crazycodigo/home)_). 

That was a very basic deployment. You can add custom domains and themes if you want. It's right there is the **pages** option. If you want to learn more about it you can refer the [GitHub pages documentations](https://docs.github.com/en/pages).

##Wrapping up

With this you have learnt to deploy a website. Personally when I deployed my first website it was one of the best feelings I ever had. Hope you get that feeling. Happy coding :)

That’s all for this one. If you want to contact me or more of the crazy coders out there join our discord server. [Follow us](https://linktr.ee/crazycodigo) on all socials to stay updated about when we put out new content.

Cya!

~ Shiv
Hi
Tags: icon, arrow
Published: 2022-07-22 16:58:03

sdf**sfsfsd**
s_sf_sdf__

[](rahulchitturi.ml)

fsfsf

1. sfsf
2. sdfsfsf

- sdfsdf
- sdfdfger

## sdfsdfsfsf

sdfsf

> dsfsdfsdf

`print("dfdfd")`

```
print("hello world")
```


---


sdfsf<u>sdfsdfsdf</u>

~~sdfsdfs~~
Phase 2 - Understanding React's RESTful Routing
Tags: react, restfulroutes, beginners, bootcamp
Published: 2022-07-22 16:57:42

When I started building my first ever front-end application using React, I hadn't really grasped the importance of RESTful routing just yet. My application, [Stream-Mii](https://youtu.be/lxGmMbZmFvI), was a simple webform that allowed users to search for their favorite shows using a public API and assign the series to a day of the week. Users could then go back and view which shows they had planned to watch on that particular day.

![Stream-Mii](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7fvfzrq91fztxpuri19.gif)

### Keeping Routes Simple
I remember learning that routes should be kept simple, but why? After doing some research, I learned that there is a specific (and highly appreciated) reason why routes should be kept simple - and how all of our applications are connected in a larger picture. 

### What is RESTful Routing?
**REST** stands for **Representational State Transfer**. The formal definition for REST is '_a term exchanging data in well-defined formats in order to increase interoperability_'.

What this means is that across different languages, there is a set structure in place for handling the different HTTP methods. 

HTTP is considered stateless, so when we navigate from one page to another in an application, HTTP doesn't retain any information between the pages. As a developer, we have to implement code to let the application know how to respond to these changes. 

### Why is REST so appreciated by developers?
Standardization. Before REST, developers would create unique names for each route. That means that every application would have a unique structure for routes. With the number of applications available today, you can only imagine how unsustainable this approach was. However, REST really showcases how connected our applications are. 

When you think about everything that we do on the web, it's hard to believe that all of those things can be boiled down to 7 primary actions. This helped me structure [my routes for Stream-Mii](https://github.com/breonwhite/phase-2-project-stream-mii/blob/master/src/App.js):

```
- GET: (/shows - returns a collection of saved shows)
- NEW: (/shows/new - returns a form to add a new show)
- POST: (/shows/new - saves a new show to the database)
```
With this structure, if I wanted to build on to my application in the future, I could use:

```
- SHOW: (/shows/:id - returns an existing show with the show details)
- EDIT: (/shows/:id/edit - returns a form to edit an existing show)
- PATCH: (/shows/:id - updates an existing show in the database)
- DELETE: (/shows/:id - deletes an existing show)
```
Accessibility Scanner in Android
Tags: android, tutorial, beginners, mobile
Published: 2022-07-22 16:51:00

## Previous?

{% embed https://dev.to/rajatt/what-is-accessibility-in-android-3lpf %}

---

This post is for android developers and anyone who is interested in mobile app development.

{% embed https://youtu.be/77iIW-GvCtk %}

## What is Accessibility Scanner?

[Accessibility Scanner](https://support.google.com/accessibility/android/answer/6376570?hl=en) is an app/service in android which scans through screens and provide accessibility based suggestions like:

- increasing the size of all clickable items - so that people with confined motor skills can click on items easily,
- increasing foreground:background color contrast or text size so that people with color-blindness or low vision can read content easily, etc.

This service is useful for **developers** and **testers** and not for **users**.

## Using Accessibility Scanner
1. Open Google Play Store
2. Download/Install `Accessibility Scanner` app
3. Open Settings and search `Accessibility Scanner`
4. Click on Use Accessibility Scanner -> Allow
5. You will notice a blue colored floating button with tick/check icon.
7. Now on any screen inside the app click on the floating button to take snapshot.
8. You will notice that the scanner scans the screen and gives suggestion/errors if any.

## Developer Tips

**Color Contrast**

- for large text(14sp bold or 18sp regular) `foreground:background` ratio should be  >= `3 : 1`
- for small text `foreground:background` ratio should be  >= `4.5 : 1`

**Touch Targets**

- Minimum size for any clickable item — `48dp x 48dp` (including padding)

- Minimum gap between two clickable items - `8dp`

**Content Labels**

- for clickable images, floating action buttons, etc. there should be meaningful content description.

---
## Next?

{% embed https://dev.to/rajatt/talkback-screen-reader-in-android-4f21 %}
---
The main goal of this post was to understand how to use **Accessibility Scanner** in android. Feel free to suggest changes or ask questions in comments.
here we go
Published: 2022-07-22 16:42:40

week 1 of diving into computer science 
... the imposter syndrome is real... but, if i've learned anything this week it's that learning to code is heavily about mindset. I believe the growth mindset people take on in this field is beneficial to not only to their career, but personal life as well. For that reason, I find myself being more parts excited than scared for this journey. Updates to come :)