teleren/devto huggingface dataset:
Collecting creditcard details in Stripe with SetupIntent
Tags: rails, stripe, ruby, api
Published: 2020-12-18 16:59:31

---
title: Collecting creditcard details in Stripe with SetupIntent
published: true
description: SetupIntent is the process of saving a customer's payment credentials for future payments.

tags: rails, stripe, ruby, api
//cover_image: https://direct_url_to_image.jpg
---

### Collecting creditcard details in Stripe with SetupIntent 

#### What is a SetupIntent?

SetupIntent is the process of saving a customer's payment credentials for future payments [source](https://stripe.com/docs/api/setup_intents). 

#### Why is it important?

As a business owner, you want to get creditcard details, in order to enable a [Payment](https://stripe.com/docs/api/payment_intents) in the future.

#### How to implement it in Rails?

I've looked at the [Sinatra implementation](https://github.com/stripe-samples/saving-card-without-payment/blob/master/server/ruby/server.rb) first. Used the [Stripe CLI](https://github.com/stripe/stripe-cli#installation) for the setup, made [a comment](https://github.com/stripe-samples/saving-card-without-payment/issues/13) about the setup which [was applied](https://github.com/stripe-samples/saving-card-without-payment/commit/38ccb926b53f07933cfe8f0b0bdf2923ba56130f#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R63-R66) to improve the README. The result is an experimental implementation [here](https://github.com/roberthopman/customer-centric).
How to Build The Most Common Web Animations 
Tags: animations, css, scss, react
Published: 2020-12-18 16:46:01

When translating a design from mockup to functioning features, there might be extra requests from the designer to make the experience just a bit more appealing. One of those common requests are animations - something I've been interested in exploring further. They can seem daunting to engineers who are familiar with making a feature match visually but might not know how to make that feature bounce, skip and shake as well. 

I've received quite a bit of animation requests in my time as a developer, both in freelance and as part of my full-time role. They've added [delight to the experience](https://twitter.com/paulg/status/1303649238358921217?lang=en) in turn improving customer retention. It's been clear to me for some time that animations are a valuable asset to have within a developer's tool belt. 

Alongside the animations I've built, I noticed a pattern in many of the ones I've been requested to build. Whether it's having to implement a loading spinner 4 times or make a card enlargement seem natural at least twice, there are clear similarities in the kinds of features wanting to be animated. So, I thought it might be handy to have a stock of some of the most common animations I've been requested to build.

My goal was to make the translation from mockup to feature easier, by building tiny, animated components that can be customized and formed from pieces that allow substitutions. And of course, they must be accessible.

I didn't necessarily want them to just be standalone animations, but work alongside some data, like they will likely do during their implementation. This collection has amounted to becoming a helpful reference point when I've been asked to animate a feature. While building all of them, I also learned some really neat ways to work with CSS and React's animation options.

I decided upon the following ten animations, roughly broken down by their size, (size being defined by how many other atomic components they consist of). The ten include:

Smaller Animations | Larger Animations
--- | ---
Neomorphic button | Accordion
Loading spinner | Enlarging a card on hover
Progress bar | Selecting a button after appearance
Range slider | Menu dropdown
"Shaking no" input | Pagination / slider

[You can check out the Storybook listing all the animations under Components](https://5fd129c66ec81a0021cac291-byenvlvszc.chromatic.com/?path=/story/documentation-introduction--description), and play around with the knobs.

To implement the animation of your choice, [head over to the corresponding folder at](https://github.com/singhshemona/animate) `src > scripts > components` and see how it's built. It should be clear with comments where you can substitute your data and what can be changed.

If these animations helped you in any way, or you need help making sense of them, I'd love to know! [Add a new discussion topic](https://github.com/singhshemona/animate/discussions), or message me on dev.to. 

Enjoy 😊
🚀10 Trending projects on GitHub for web developers - 18th December 2020
Tags: javascript, typescript, css, webdev
Published: 2020-12-18 16:45:58

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Hyper

A terminal built on web technologies 

{% github vercel/hyper %}

---

### 2. Google APIs Node.js Client

Google's officially supported Node.js client library for accessing Google APIs. Support for authorization and authentication with OAuth 2.0, API Keys and JWT (Service Tokens) is included.

{% github googleapis/google-api-nodejs-client %}

---

### 3. 50 Projects in 50 Days - HTML/CSS and JavaScript

50+ mini web projects using HTML, CSS & JS

{% github bradtraversy/50projects50days %}

---

### 4. PACE

Automatically add a progress bar to your site. Pace will monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

{% github CodeByZach/pace %}

---

### 5. Chrome Extensions samples

Official samples for Chrome Extensions.

{% github GoogleChrome/chrome-extensions-samples %}

---

### 6. SPCSS

A simple, minimal, classless CSS for simple HTML pages

{% github susam/spcss %}

---

### 7. Free & Open Source Gatsby Themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.

{% github LekoArts/gatsby-themes %}

---

### 8. GitLens

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

{% github eamodio/vscode-gitlens %}

---

### 9. React Leaflet

React components for Leaflet maps.

{% github PaulLeCam/react-leaflet %}

---

### 10. gitmoji  

Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.

{% github carloscuesta/gitmoji %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Speechelo Review – Speechelo Text To Speech Software
Published: 2020-12-18 16:29:58

If you are new to my blog, I will not test your product or service if you do not try it first. And that's what speechelo did for him. If you read this is it possible that you are a producer or an employer who wants to create a great sound in your video? In the end, without a voice call, the video will not be converted and will

 not be converted to get traffic, you will not get customers or sales …
In fact, they say the secret lies in selling people who talk and stir up feelings. That's why Hollywood is so big! However, you can't create a good sales video, training video, or non-work-related training video. If someone like me can do something like this :

• It is not appropriate to record your voice call.
• You don't speak English to record a voice call.
• Or if you don't have a good microphone or equipment needed for the high-quality audio commentary.

Here we have a great example of this which is Speecheloapp which gives a general idea of exactly what the program needs?
Here, Speechelo is found to provide a great platform for the user to convert any type of text into a human voice with a single click. Isn't this amazing, everything can get at a low price by taking advantage of Speechelo coupons.
The Making of an Angel Maker
Tags: zim, zimjs, canvas, angels
Published: 2020-12-18 16:27:12

Come check out how we made an Angel Maker drawing app in a dozen lines of code with ZIM  https://codepen.io/danzen/pen/xxErLry.  ZIM must be about the easiest way to code drawing!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/677e4uhhdi25y32vrjd8.jpg)

We also made a ZIM Book of Angels at https://zimjs.com/angels/ using ZIM Book().  These were both made along with all the angels in one morning! So much fun to code and so beautiful - we really hope you join us in the new year and code with ZIM!

Here is the code for the Angel Maker - try it out on CodePen...

```javascript
new Rectangle(stageW, stageH, frame.color)
    .addTo()
    .noMouse(); 

new Label("A  N  G  E  L", 20, null, tin)
    .pos(0, 30, CENTER);

const pen = new Pen({
    damp:.05,
    color:series(white,lighter),
    size:10,
    undo:10,
    lineAlpha:.2
}).addTo().animate({
    props:{size:90},
    rewind:true,
    loop:true,
    time:.7
});
        
new MotionController({
    target:pen,
    type:"pressmove",
    damp:.2,
    speed:20,
    mouseMoveOutside:true
});

let copy;
Ticker.add(function() {
    if (copy) copy.dispose();
    copy = new Bitmap(pen.paper, stageW, stageH)
        .sca(-1,1)
        .loc(stageW,0);
});
```

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).
Nokia 1100 Simulation
Tags: codepen, html, javascript, css
Published: 2020-12-18 16:15:04

Heya, welcome to another brief article of mine.

This time I would like to share a silly, just-for-fun, unfinished, and never-to-be-finished pen I wrote back when I first started learning web dev - a simulation of the Nokia 1100 in pure HTML, CSS, and JS. Enjoy.

{% codepen https://codepen.io/khangnd/pen/abmWpaY %}
3 Useful libraries in python
Tags: python
Published: 2020-12-18 16:10:49


Sometimes we want resolve a specific problem like generate a random number, get the currently date, create ascii art, etc., if you have a problem probably already exist a library to resolve it.
Next i will mention some useful libraries

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

**Pandas :** That library is used for data science and business intelligence, it is the best for handling data and allow work with dataframes *(two dimensional data structure)*


**Tkinter :** Tkinter allow create a graphic interface for programs, a simple example is a calculator, python was not created for this porpouse but it is useful .


**matplotlib :** Maybe matplotlib is the most popular library, it is used mainly for data science purposes like create graphics, bars diagrams and different types of diagrams with few lines of code.
Vue Localization Package
Tags: vue, frontenddeveloper, javascriptdevelopers, nuxt
Published: 2020-12-18 16:10:18

Earlier I was using my self developed localization package to translate my Vue Applications. From last couple of days I am using https://kazupon.github.io/vue-i18n/ . This package is just awesome. Now I don't need to maintain my own repository, no need to push and pull new updates. That is really a great package for localization. If You are a newbie or professional in Vue Ecosystem, try this package, You will be amazed. 

# Some features: 
1. String Localization
2. Number Localization
3. DateTime Localization
4. HMR support during development. 
5. Can be easily integrated with popular Nuxtjs. 
6. Translations can be lazy loaded. So, you can integrate server side conditions. 
7. Custom Directive Localization 
8. URL localization
9. Can be used with transitions
10. Supports formatting translation out-of-the-box. Just like sprintf in php and printf in C. 
11. Component Based Localization. 
12. Official supports for Nuxtjs, Vue CLI, webpack, ESLint , Jetbrains Intellij platform (Webstorm, Phpstorm etc) ,
Variable Partitioning | Operating System - M05 P04
Tags: linux, beginners, tutorial, devops
Published: 2020-12-18 16:00:01

**This is a multipart blog article series, and in this series I am going to explain you the concepts of operating system. This article series is divided into multiple modules and this is the fifth module which consists of 26 articles.**

_In this article we are going to discuss about variable partitioning which is also known as dynamic partitioning. We will see how it works, what are its functionalities and problems in variable partitioning._

### Variable partitioning 
- In it the size of partition is not defined it will be defined when the process arrives in the RAM.
- Let’s say a process came `P1` of size `2 MB`, then it will take exactly `2 MB` size in RAM and there is no scope of internal fragmentation.
- There is no limitation on number of processes _(degree of multiprogramming)_.
- There is no limitation on process size.

<!-- Image will come here -->

![Untitled Diagram.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1608306955121/8HZu3-Zif.png)

- There is a problem with this approach that suppose if `P2` got completely executed or for any reason it go out from the RAM, then `4 MB` _(size of P2)_ will become empty in RAM and this is known as **Hole**
- And another process `P4` removed from the RAM and creates a hole of `4 MB`.
- Now total free space is `8 MB`.
- At that time another process `P5` came which have size of `8 MB`, we cannot place it anywhere because the free space present at different locations in RAM and in contiguous allocation we cannot break the process into multiple fragments. And this is known as **external fragmentation**.
- So variable partitioning suffers with external fragmentation. We can remove it by using **compaction**.
- Compaction means to place the free space one side and used space one side.
- But this process has a problem, to implement compaction we have to first stop the running processes. 
- Another problem variable partitioning is that allocation and deallocation is complex.

_So this was all about variable partitioning. Hope you liked it and learned something new form it._

If you have any doubt, question, quires related to this topic or just want to share something with me, than please feel free to contact me. 

### 📱 Contact Me

[Twitter](https://twitter.com/r_mishra10)
[LinkedIn](https://www.linkedin.com/in/rahul-mishra-66210b185)
[Telegram](https://t.me/rahul_mishra10)
[Instagram](https://www.instagram.com/rahul_mishra10/?hl=en)

### 📧 Write a mail
<rahulmishra102000@gmail.com>

#### 🚀 Other links

[GitHub](https://github.com/rahulMishra05)
[HackerRank](https://www.hackerrank.com/rahulmishra10201)
Protect your S3 buckets from breaches
Tags: aws, s3, security
Published: 2020-12-17 16:25:37

---
title: Protect your S3 buckets from breaches
published: true
description: Learn how to protect your S3 buckets from breaches and don't become the next victim
tags: aws,S3,security
canonical_url: https://mklein.io/2020/12/17/protect-against-s3-breaches
---

If you have been following the latest news on AWS world, headlines like these aren't uncommon:

- _"Company A exposes customers data after major S3 bucket breach"_
- _"Company B leaks the data of over 30.000 partners"_
- _"Company C exposes 2M users on misconfigured AWS storage"_

Breaches related to S3 buckets are more common than it should be and, most of the time, puts companies in a bad situation, exposing their private information or, even worse, their customer's.

[Corey Quinn](https://twitter.com/QuinnyPig), cloud economist at The Duckbill Group and active member of the community, even created the _S3 Bucket Negligence Award_, to "reward" individuals or companies that made it to the news after a major data breach.

{% twitter 1113522979772674048 %}

But, what all these cases have in common? They all happened due to the lack of proper security applied to bucket setup.

In this post, I will present the most common causes of S3 breaches and how to protect yourself against them.

By the end of this post, you will have a better knowledge about the tooling available and how to apply them to protect your data and don't become the next victim.

## Prerequisites

Familiarity with AWS and S3 is required to take the maximum out of this post.

## Breach #1: the public bucket

This is by far the most common breach involving S3.

S3 buckets are, by default, created with all public access denied. It means that, unless special privileges are granted, one can't access the data. When a bucket is made publicly accessible, you give up restricting access to your data.

This has two major impacts: privacy and costs.

By having a public bucket, you no longer have control over who can or can't access your data. While it can be OK for public files, this can be a big issue for sensitive information.

Also, [as described on S3 pricing model](https://aws.amazon.com/s3/pricing), the costs associated with a bucket are determined not only by the amount of storage used but also by the number of requests and data transfer, among others. So, with no caching mechanism in place, all requests are served directly by S3, and this can make your monthly bill pretty salty.

### How to fix it?

_[Continue reading on mklein.io](https://mklein.io/2020/12/17/protect-against-s3-breaches/#how-to-fix-it)_
Application level encryption for software architects: everything you need to know
Tags: security, encryption, cryptography, tutorial
Published: 2020-12-18 15:44:22

>ALE can be as many things as you make it. Get into [details] (https://www.infoq.com/articles/ale-software-architects/) with [@Eugene Pilyankevich] (https://www.linkedin.com/in/eugene-pilyankevich-59a31655/), CTO at [@Cossack Labs] (https://twitter.com/cossacklabs).

**Intro**

The first step to journey into data security is to become aware that software and architectures are changing, and so are data protection requirements in modern applications. New technologies, architectural patterns, advances in cryptography, and regulatory constraints all create new sets of requirements. 

One of these sets of requirements is **application level encryption**, which is surfacing more and more lately in finance, healthcare (think about application-level end-to-end encryption for sensitive patient data), and others. 

**Where does it come from?**

Changes in the threat landscape, attack techniques, and necessary security posture require us to think harder about preventing data leaks with encryption. Compliance requirements that don’t just mandate certain techniques to be implemented and demonstrated to auditors, but actually impose fines on organizations that leak sensitive data, drive increased requirements to protect the data properly. 

Previous generation measures are just the starting point: encrypting the filesystem (data-at-rest encryption) protects against someone stealing disks from your data center and setting up TLS (data-in-motion encryption) prevents wiretapping and simple impersonation, but that’s it. 

So, as architects explore options of doing more, they stumble upon the ever-ambiguous **application-level encryption**, **field-level encryption**, **client-side encryption**, **end-to-end encryption** requirement. 

As CTO of data security company [Cossack Labs] (https://www.cossacklabs.com/), I deal with these concerns a lot both for our products and while helping customers choose their encryption-strategy wisely. In this article, I will walk you through the basics of different application-level encryption approaches, their pros and cons, typical mistakes, and threat models. Sometimes I will use existing software as an example and sometimes you will have to bear with me as we imagine completely new software designs! 

***
Click on a 👉 picture below to read [a full feature article at **InfoQ**](https://www.infoq.com/articles/ale-software-architects/).  And follow [@CossackLabs] (https://twitter.com/cossacklabs) and [@Eugene Pilyankevich] (https://twitter.com/9gunpi) for more.

[<img src="https://res.infoq.com/articles/ale-software-architects/en/card_header_image/application-level-1608133859694.jpg">](https://www.infoq.com/articles/ale-software-architects/)
Advent of Code 2020 Solution Megathread - Day 18: Operation Order
Tags: adventofcode, challenge
Published: 2020-12-18 15:43:41

---
title: Advent of Code 2020 Solution Megathread - Day 18: Operation Order
published: true
description: Parsing math, but throwing PEMDAS right out the window.
tags: adventofcode, challenge
series: Advent of Code 2020
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qnq03ycl44swgbm5e1c6.png
---

One more week until Christmas!  Hopefully all of the code is leaving you extra jolly rather than grinchy.  Let's take today to meditate on all of the blessings in our lives.  😊  Also, fun fact: Haskell was the top submitted language yesterday!  Go functional languages!

## The Puzzle

In [today’s puzzle](https://adventofcode.com/2020/day/18), is all about math.  Side note: I 100% knew what the video linked in the beginning of the instructions was going to be before I clicked on it.  Math is math!  Why would they change math!?  Well, today, it's no longer "Please Excuse My Dear Aunt Sally."  It's "Left to Right No Matter What.  P.S. Suck It."

I'm excited to write this parser.  Let's get to it!

## The Leaderboards

As always, this is the spot where I’ll plug any leaderboard codes shared from the community.

```
Ryan's Leaderboard: 224198-25048a19
```

If you want to generate your own leaderboard and signal boost it a little bit, send it to me either in a DEV message or in a comment on one of these posts and I'll add it to the list above.

## Yesterday’s Languages

Updated 07:43AM 12/18/2020 PST.

| Language   | Count |
|------------|-------|
| Haskell    |     2 |
| Perl       |     1 |
| Ruby       |     1 |
| Python     |     1 |
| JavaScript |     1 |

Merry Coding!
List of Pre-Built Native Web Component Libraries
Published: 2020-12-18 15:30:32

## What are Web Components

Web Components are a framework agnostic way of creating UI Components similar to Components in React, Angular, Vue or Svelte. In previous articles I've discussed how to make components and libraries for creating Web Components. In this article I'll be focusing on libraries of pre-built components. Before we do that let me list the previous resources.

- [Video Playlist on Web Components](https://www.youtube.com/playlist?list=PLY6oTPmKnKbaNVkXHOHWxgdKEZLGKuFP9)
- [Basics of Web Components](https://tuts.alexmercedcoder.com/webcomp1/)
- [Web Component Styling and Slots](https://tuts.alexmercedcoder.com/webcomp2/)
- [Web Component Lifecycle Functions](https://tuts.alexmercedcoder.com/webcomp3/)
- [Building Components with AMPonent](https://tuts.alexmercedcoder.com/amponenttut/)
- [Building Components with MercedUI](https://tuts.alexmercedcoder.com/mercedui/)
- [Building Components with mBlocks](https://tuts.alexmercedcoder.com/mblocks/)
- [Building Components with RenderBlocks](https://tuts.alexmercedcoder.com/renderblocks/)

## Pre-Built Web Component Libraries

- [Shoelace](https://shoelace.style/)
- [AMP](https://amp.dev/)
- [EON](https://eonjs.org/)
- [Material Components](https://github.com/material-components/material-components-web-components)
- [Polymer Components](https://github.com/PolymerElements?page=3)
- [Vaadin Components](https://github.com/vaadin/vaadin)
- [Wired Components](https://github.com/rough-stuff/wired-elements)
- [Elix](https://github.com/elix/elix)
- [Fast](https://github.com/microsoft/fast)
- [Inovex Elements](https://github.com/inovex/elements)