teleren/devto huggingface dataset:
How to Add ToS Agreement Checkbox to Your Rails App using Devise?
Tags: rails, devise, ruby, tutorial
Published: 2022-01-13 14:15:41

In this article, I will show you how to add functionality to your new registration view, which will force the user to agree to your app's Terms of Service (ToS) when creating new account.

I am using these gems:
- Rails 6.1.4.1
- Devise 4.8
- Simple Form 5.1
- Haml 5.2

I presume that you already have Devise and your User model setup and ready to go. 

**STEP 1**
First off, if you haven't already done it, generate Devise registration controller with this command:
```rails g devise:controllers users -c=registrations``` 

and let  your routes know about it:
```
# routes.rb

devise_for :users, controllers: {
      registrations: 'users/registrations'
  }
```
and generate your new registration view, where you will insert ToS agreement checkbox input:
`
rails g devise:views -v registrations
`

**STEP 2**
Now you need to add new column to users table in your database schema, with migration like this: 
`rails g migration AddTosAgreementToUsers tos_agreement:boolean`

the migration file is gonna look like this:
```
# 20220108144502_add_tos_agreement_to_users.rb

class AddTosAgreementToUsers < ActiveRecord::Migration[6.1]
  def change
    add_column :users, :tos_agreement, :boolean
  end
end
```
migrate the change with `rails db:migrate`

**STEP 3**
Add the following to your User model so it forces ToS agreement to be checked before allowing to successfully submit registration form. Also make sure to include `on: :create`, so this checkup is not forced on when user is just updating the profile.
```
# users.rb

validates_acceptance_of :tos_agreement, allow_nil: false, on: :create
```

**STEP 4**
Permit the 'tos_agreement' param
```
# users/registrations_controller.rb

  def configure_sign_up_params
    devise_parameter_sanitizer.permit(:sign_up, keys: [:tos_agreement])
  end
```

**STEP 5**
Add the checkbox input to your new registration view. I use link_to method to insert a link leading to my pre-created ToS page.
![Terms of Service Checkbox Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9pgba6rj61kgw4abt7y.png)
 
```
# views/devise/registrations/new.html.haml

= f.input :tos_agreement, as: :boolean,
         label: "I agree to #{link_to 'Terms of Service',
           terms_of_service_path, target: '_blank'}".html_safe
```

That's it, now you should have a nice functionality that will force your app users to agree to your terms before creating new account.
Host a Website in 10 mins - AWS Amplify
Published: 2022-01-13 14:13:32

## Hosting a Website in 10 Minutes !!!

Earlier, Hosting a static website with the help of AWS was includes the configure an S3 bucket for static website hosting, setup cloudfront and Route53/DNS. But, with the AWS Amplify everything can be set up at a one place on AWS, making it by far the best way to setup hosting a static website on AWS.

## What is AWS Amplify ??

The AWS Amplify console is a continuous deployment and hosting service for modern web application with serverless backends. It accelerates your application release cycle, by deploying changes to your frontend and backend on every code commit. The Amplify Simplifies production and development workflow by creating new frontend and backend environments every time a developer connects a new feature branch.   

## Highlights of the things you can do with AWS Amplify

- Integration with platform such - GitHub, Bitbucket, etc. is far easy or you can upload your code to console.

- Attach a custom domain to your website

- Make your site HTTPS by adding a free SSL Certificate which is managed by itself the AWS.

- CI/CD - IF you choose one of the platform like Github to integrate, you can easily setup a pipeline so that any future commits of your project get deployed automatically.

This sounds so Amazing and far easy !!😍

Let's get started with this Amazing AWS Amplify...
 

## Implementation

Implementation divided into three major steps - 

1. Create and Connect repository

2. Confirm Build Settings

3. Save and Deploy

Starting with the First step,

**Create and Connect repository**

- Create a GitHub repository for your respective app

- Initialize Git and push the application to your new Github repository. 

- To connect your repository, log in to Amplify Console and choose **Get Started** under **Deploy**. Connect your GitHub, GitLab, BitBucket or AWS CodeCommit repositories. OR here you can have a option of manually uploading the code without connecting any repository. 

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

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

- After you connect one of the repository service provider, choose a repository and then choose corresponding branch and deploy. 

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

**Confirm Build Settings**

- For the selected branch, Amplify your inspects of your repository confirm the build settings and go for further steps.

**Save and Deploy**

- Review all your configuration settings and ensure everything is set up correctly. Choose **Save and Deploy** to deploy your web to the globe Content Delivery Network (CDN) in just 10 minutes. The process of deployment will typically take  1 to 2 minutes which vary based upon your application.

**Your website is live !!**
How to remove duplicates from a list in Python?
Tags: beginners, python, programming, datascience
Published: 2022-01-13 14:12:12

In this post, we will discuss how to remove duplicates from a list in Python. 

There are many ways to delete duplicates from a list, but I find these two methods easy and readable. 

1. Using `sets`
2. Using `fromkeys` method of `dict` 

Please take a look the examples below. 


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

If you like this content, consider following me. Thanks
Movie catalog with MongoDB Atlas
Tags: atlashackathon
Published: 2022-01-13 14:11:03

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)

This project is a movie catalog application. It lists all the movies with release date, plot and rating from IMDB and Tomatoes. The data is hosted in MongoDB Atlas.


### Submission Category: 

E-Commerce Creation
[Note]: # (E-Commerce Creation, Prime Time, Action Star, Automation Innovation, or Choose Your Own Adventure)


### Link to Code

**Frontend code**

{% github https://github.com/chilupa/movies-ui %}

**Backend code**
{% github https://github.com/chilupa/movies-server %}

### Additional Resources / Info

**Live**


![Movies search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4t6f8otlxqn8ttkq088.gif)
Implement --pdb in a python cli
Tags: python
Published: 2022-01-13 14:09:40

---
canonical_url: https://waylonwalker.com/til/python-auto-pdb/
cover_image: https://images.waylonwalker.com/til/python-auto-pdb.png
published: true
tags:
- python
- python
- python
title: Implement --pdb in a python cli
series: til
---

Adding a `--pdb` flag to your applications can make them much easier for those using it to debug your application, especially if your applicatoin is a cli application where the user has much fewer options to start this for themselves.  To add a pdb flag `--pdb` to your applications you will need to wrap your function call in a try/except, and start a post_mortem debugger. I give credit to [this stack overflow post](https://stackoverflow.com/questions/242485/starting-python-debugger-automatically-on-error) for helping me figure this out.

``` python
import pdb, traceback, sys


def bombs():
    a = []
    print(a[0])


if __name__ == "__main__":
    if "--pdb" in sys.argv:
        try:
            bombs()
        except:
            extype, value, tb = sys.exc_info()
            traceback.print_exc()
            pdb.post_mortem(tb)
    else:
        bombs()
```

## Using --pdb

``` python
python yourfile.py --pdb
```

![running this example with and without --pdb flag](https://images.waylonwalker.com/using-pdb-flag-from-cli.png)


---


This is day 22 of posting tils, These are bite sized pieces that help me cement in what I have learned thoughout the day.  eventually they will make their way into larger form pieces.

---

## Discuss

What do you think about `--pdb` do you like when cli's give you this option? Has it saved your bacon?
Supporting Bi-directional text in Html TextArea
Tags: html, globalization
Published: 2022-01-13 12:58:01

A `<textarea>` is an HTML element used to capture multiline user input. By default, it's direction is either `right to left` or `left to right`. But what if we want each paragraph to have it's own direction. This is very useful when the text is a mix of multiple languages. For example: Kurdish and English.

I asked the quesiton on Twitter and my good friend [Akam Foad](https://twitter.com/AkamFoad) came to the rescue:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">have you tested applying `unicode-bidi: plaintext` on textarea?<a href="https://t.co/UC8A0ZKYKj">https://t.co/UC8A0ZKYKj</a></p>&mdash; Akam Foad (@AkamFoad) <a href="https://twitter.com/AkamFoad/status/1481557755248918531?ref_src=twsrc%5Etfw">January 13, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

It turns out, that you can easily support this by specifying `unicode-bidi: plaintext` in the styles of the `<textarea>`

```html
<textarea style="unicode-bidi:plaintext"></textarea>
```
Digital Supply Chain Twins for 3D Visibility and Cost Optimization
Published: 2022-01-13 14:03:02

Since the early 1970s, 3D modeling (CAD: Computer-Aided Design) and simulations software allowed companies to create realistic and scalable images of networks to track productivity and provide diagnostics. Due to data mining techniques and IoT sensors, businesses are able to create digital twins of the real objects to feed the model with accurate data and understand what’s happening inside. Over the course of time, digital twins appeared as AI-powered simulations enabling the visualization model to help predict network functionality problems and potential disruptions.

Read more: [https://innovecs.com/blog/digital-supply-chain-twins/](url)
Compiling Textual IRC Client
Tags: installation, software, xcode, tutorial
Published: 2022-01-13 13:31:19

[Textual](https://www.codeux.com/textual/) is often the most recommended IRC client for macOS. You can buy it for $7.99 or you can simply build it from source. Let us look at how to do exactly that.

# Prerequisites

Your mac needs to have Xcode 10.0 or newer.

## Cloning the source

Clone the source from [here](https://github.com/Codeux-Software/Textual) wherever you desire. Don't forget to download the submodules used by Textual. If submodules aren't downloaded, Xcode will give `the directory <directory> does not contain a xcode project` build error.

```bash
$ git clone https://github.com/Codeux-Software/Textual.git
$ cd Textual
$ git submodule update --init --recursive
```

## Setup code signing certificates

- Launch Keychain Access.app and use Certificate Assistance to Create a Certificate.

![Open Keychain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z75jzt8x7xddzixg9mr7.png)
 
- Enter your name, set Identity Type to "Self Signed Root" and set Certificate Type to "Code Signing" and create the certificate.

![Certificate creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy5fb7i2v71m8fvn5khc.png)

- Your certificate should be visible in the "My Certificates" section of "login" Keychain

# Changing config files

You will need to change two files: `Code Signing Identity.xcconfig` and 

`Enabled Features.xcconfig`.

## Code Signing Identity configuration

- Open `Code Signing Identity.xcconfig` with a text editor of choice. It should be located at `Textual/Configurations/Build/`.
- For `CODE_SIGN_IDENTITY`, type the name that was used to create the Certificate above.
- Leave `DEVELOPMENT_TEAM`, `PROVISIONING_PROFILE_SPECIFIER` empty.

![Certificate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2eyff8mwd1tizzerkc42.png)

## Enabled Features configuration

- Open `Enabled Features.xcconfig` with a text editor of choice. It should be located at `Textual/Configurations/Build/Standard Release/`.
- Set `TEXTUAL_BUILT_WITH_LICENSE_MANAGER` to 0. This prevents the trial period countdown.

![License manager](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmallc9p8gm0eacgyqph.png)

# Building Textual

Open Textual in Xcode by launching `Textual.xcworkspace` file in Textual root. Xcode will start indexing and processes source files. Once that is complete, follow these steps:

1. On your Xcode menu bar, click Product > Scheme and select **Textual (Standard Release).**
2. Similarly, click on Product > Build to start building the app. This should start the build process.

![Building in progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njmhlwp88lifskvafq2j.png)

3. Navigate to `Textual/Build Results/Release` and you should see a shiny new Textual.app. Drag this to your Applications folder.

You should now have a working Textual app (with no trial countdown) that you built yourself!
Today I read an interesting article about .Net 6, I am sharing with you a link
Tags: design, javascript, webdev, programming
Published: 2022-01-13 13:29:57

https://chudovo.com/net-6-release-everything-you-need-to-know/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3f8ie4upz8hoc7gbo5ru.jpg)
🎬Login Form Validation | HTML CSS & Javascript🙌
Tags: html, css, beginners, javascript
Published: 2022-01-13 13:28:00

Lets Create a Login Form Validation | HTML CSS & Javascript, Step-by-Step in a Very Easy to Follow Along Tutorial.

***
{% youtube svGQe889mmo%}
***

###Source Code:

**HTML**

```HTML
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form Validation</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <div class="wrapper">
    <form action="#" class="box" method="post">
      <h1>Login</h1>
      <!-- User Input -->
      <div class="username">
        <input type="text" placeholder="Enter Username" id="username">
        <i class="far fa-envelope"></i>
      </div>

      <!-- Password Input -->
      <div class="password">
        <input type="password" placeholder="Enter Password" id="password">
        <i class="fas fa-lock-open"></i>
      </div>

      <!-- Button -->
      <button id="btn" type="submit" onclick="validate()">Login</button>

    </form>
  </div>

  <script src="app.js"></script>
</body>

</html>

```
Next.JS + MUI v5 + TypeScript + Scss + Storybook Starter 📕
Tags: typescript, nextjs, javascript, productivity
Published: 2022-01-13 13:26:29

Lately, I was building a Next.js, MUI v5, TypeScript, Scss and Storybook for projects. I wanted to have a modern starter repository to speed up my development. A new boiler plate for Next.js with type checking (TypeScript), configured linter (ESlint), configured code formatter (Prettier), Sass / Scss for CSS framework with Material UI v5 theming, also Storybook to build streamlines UI development, testing, and documentation.

You can check a live demo at this url : [click me!](https://nextjs-ts-mui5-scss-storybook-starter.vercel.app/)

You can also check the source code 📕 on GitHub: [nextjs-ts-mui5-scss-storybook-starter](https://github.com/RidhoAnshory/nextjs-ts-mui5-scss-storybook-starter)

Here is the list of major feature:

- ✍️ code snippet for react and next.js that I personally use
- 🎨 pre-configured Sass, MUI v5, and Storybook. You just need to focus on building your components
- ⌨️ Type checking with TypeScript
- ✏️ Linter with Eslint and Prettier also simple-import

Please leave a star ⭐ or some comment if there's a issue! Thanks ✌️
Writing ideas
Tags: writing, firstpost
Published: 2022-01-13 13:14:58

Hey,

I have no ideas for a first "real" blog post on dev.to (here).

Has, who ideas? :)


PS: I can't connect my twitter account with my dev.to account, is it normal? (because i don't see the twitter icon on my profile)


Much healthy & many greetings
Lenni
Why choose Rlogical Techsoft for Mobile App Development?
Tags: mobile, ios, android
Published: 2022-01-13 13:06:31


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

Rlgoical Techsoft offers a Complete Gamut of Applications with using emerging technologies to overcome business challenges.  Our team of mobile app developers is capable of creating apps for multiple-platforms like iOS, Android and cross-platform solutions.
We are committed to delivering a top-notch application on time, within budget and with no compromise on quality. 

Want to discuss your next big mobile app development project? Visit us: https://www.rlogical.com/mobile-app-development/
TOP Github repositories to learn Python
Tags: python, programming, tutorial, machinelearning
Published: 2022-01-13 12:50:42

TOP Github repositories to learn Python


1.  [The Algorithm](https://github.com/TheAlgorithms/Python) 
2.  [Vinta/awesome.PYTHON](https://github.com/vinta/awesome-python)  
3. [TensorFlow/TensorFlow](https://github.com/tensorflow/tensorflow) 
4.  [Project-based Learning](https://github.com/practical-tutorials/project-based-learning) 
5.  [Python Programming Exercises](https://github.com/zhiwehu/Python-programming-exercises/blob/master/100%2B%20Python%20challenging%20programming%20exercises.txt) 
6.  [Learn Python](https://github.com/trekhleb/learn-python) 
7.  [Python-reference](https://github.com/rasbt/python_reference) 
8.  [Coding-Problems](https://github.com/MTrajK/coding-problems)
Refq Initiative - Rescue hurt animals!
Tags: atlashackathon, node, mongodb, flutter
Published: 2022-01-13 12:21:56

### [Project Code on GitHub](https://github.com/AmyKaDa99/Refq)


### [App Link on Drive](https://drive.google.com/file/d/1FSlNcgaJDAblM6WGlubTJf0dAmbcaCQn/view?usp=sharing) 


### Choose Your Own Adventure

Why don’t we have enough applications to do voluntary works?
Here is the reason why we came up with this project idea.

Basically, it is a mobile application where:

- People can use it to report if there was an animal in the streets that needs help.
- Volunteer to take care of animals.


![Report injury and Be a volunteer images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3fc5s2ogpke02vnxs0e.png)

In order to get benefit from our data that is collected by this application, we used “Attribute Pattern” to figure out what types of injuries happened. We also used “Computed Pattern” to gather statistics that will hopefully help in awareness campaigns.

There are collections for:

- Volunteer, which contains his address and Firebase Cloud Messaging (FCM) to help in notifying if there was a hurt animal in the neighborhood.
- Post, which contains hurt animal’s address and information in order to help in collecting useful data, and a FCM to notify post owner with the operation of animal rescue (whether was successful or not). 
- Statistics, which counts the number of hurt animals in every city.
- Temp, which is a temporary information to determine who’s the volunteer that is going to save the animal upon post creation.


![DB anaysis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx32ssptj36z5iky1cra.JPG)

To make this application safe in real world, we must add authentication, session and more.

here is how post documents look like:

![post document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk0bv2kqxnzqjg6zdzkq.JPG)

and here is how statistic documents look like:

![statistic document](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adtpgm2ot3g8yry96tbh.JPG)

Now let’s talk about technology we used For server side:
- We used MongoDB Atlas to manage our database.
- We managed indexes in Data Explorer by creating indexes on countryCode, city and addresses fields.
- We also connected our application to our database with Node.JS.
- We used Mongoose to manage all relationships between data and queries.
In addition, we used an API for Geocoding, Firebase for sending notifications, and Cloudinary to host media.
Using Tailwind in React Native
Tags: tailwindcss, reactnative
Published: 2022-01-13 12:09:07

## Introduction
Tailwind CSS has given us a lot of freedom in how we design web components. As a result, it has gained widespread acceptability among developers and IT enterprises.

Tailwind CSS is a highly flexible, low-level, utility-first CSS framework for creating user interfaces quickly.

React Native combines the greatest aspects of native development with React, a world-class JavaScript library for developing user interfaces.

---

## Library required
Tailwind React Native Classnames (twrnc) v2. Please check the Library (twrnc) [docs](https://github.com/jaredh159/tailwind-react-native-classnames) For:
- Installation
- API
- Customization
- Enabling Device-Context Prefixes
- Taking Control of Dark Mode
- Customizing Breakpoints
- Adding Custom Classes
- Matching Conditional Prefixes
- JIT-style Arbitrary Values
- Migrating from V1

```bash
npm install twrnc
```

---

## Tips When Using Tailwind in React Native
### Intellisense
For VSCode you can add intellisense by customising the config of [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) through the following options:

- **Option 1:** Adding a custom Regex pattern to the settings.json
```json
"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
]
```

- **Option 2:** You could also add `style` in the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)

![Tailwind CSS IntelliSense VS Code Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmkbeezde5eqmxvpdd8a.png)

---

## Refrences
[Tailwind intellisense support #78](https://github.com/jaredh159/tailwind-react-native-classnames/issues/78)
[Tailwind React Native Classnames 🏄‍♂️](https://github.com/jaredh159/tailwind-react-native-classnames)
How to make a Calculator Dynamically in React
Tags: react, hooks, calculator
Published: 2022-01-13 12:05:42

A calculator is made in every language to test a developers skills and knowledge about a certain language. It is also considered one of the basic projects a beginner should make and should be in his portfolio for nay interview as this project test various skills and concepts of a certain language in which it is made.
Making Calculator in React will test the basic skills like dynamically calling and using data in the UI and the how to manage the changed state in React using the useState hook which are very essential for a React developer to understand as they will be used in almost all React projects.
Here is the [blog ](https://tekolio.com/how-to-dynamically-build-a-calculator-in-react/
which will tell you how to make this dynamic calculator and use this in your portfolio to let others know that you can use data dynamically as well