teleren/devto huggingface dataset:
React Hook Form Validation and Submit Example
Tags: react, reacthookform
Published: 2021-06-26 07:26:24

React Hook Form is form hooks library, it’s similar to Formik and Redux Form, but much simpler, faster, less re-rendering. useForm returns register, handleSubmit, errors, register help to register element, handleSubmit manage submit action, errors help to manage validation and showing element input errors.

[React Hook Form Validation and Submit Example](https://www.codecheef.org/article/react-hook-form-validation-and-submit-example)
MLH INIT - Quick Guide to Participate 🤩 and Win Swag🎁
Tags: watercooler, hackathon, beginners, javascript
Published: 2021-06-26 07:25:30

One of the biggest hackathons organizers, MLH is comping up with a global event called MLH INIT.

## What is MLH INIT?

MLH INIT is a weeklong celebration starting on June 27th to July 5th, of hackers from around the world where they come together to hack, learn & have a hell lot of fun 🔥 Complete Daily & Weekly challenges to earn points & climb the leaderboard. Oh, did I mentioned about the exclusive MLH swags & stickers you'll be getting? 😍

## Sounds fun! How do I register myself?

**That's easy! Just follow these steps:**

### 1. Register at [https://hackp.ac/init](https://hackp.ac/init)

### 2. Join the Guild at [https://discord.mlh.io/](https://discord.mlh.io/)

Fill in all the details & Select **`Basecamp Community`** under **Guild Membership**

Joining a guild has a lot of benefits and will also work as your support system if you get stuck in any challenge. 

### 3. Join our Discord at [http://bit.ly/basecamp-discord](http://bit.ly/basecamp-discord)

Our discord server is one stop shop for all your MLH INIT announcements and a great welcoming community.

### 4. Complete Swag form at [https://hackp.ac/INITswag](https://hackp.ac/INITswag)

In case you're not interested in swags, feel free to skip this step.

### 5. Submit your address [https://hackp.ac/address](https://hackp.ac/address)

Address is required to send you the swags. In case you're not interested in swags, feel free to skip this step.

In case you get stuck somewhere while registering, let us know by dropping a comment on this blog, we'll help you out.

Get excited! 🤩 We'll see you there 😉
MLH INIT - Calling out all the hackers 🤩 Win Swags & Stickers 🎁
Tags: hackathon, programming, swags, beginners
Published: 2021-06-26 07:18:17

One of the biggest hackathons organizers, MLH is comping up with a global event called MLH INIT.

## What is MLH INIT?

MLH INIT is a weeklong celebration starting on June 27th to July 5th, of hackers from around the world where they come together to hack, learn & have a hell lot of fun 🔥 Complete Daily & Weekly challenges to earn points & climb the leaderboard. Oh, did I mentioned about the exclusive MLH swags & stickers you'll be getting? 😍

## Sounds fun! How do I register myself?

**That's easy! Just follow these steps:**

### 1. Register at [https://hackp.ac/init](https://hackp.ac/init)

### 2. Join the Guild at [https://discord.mlh.io/](https://discord.mlh.io/)

Fill in all the details & Select **`Basecamp Community`** under **Guild Membership**

Joining a guild has a lot of benefits and will also work as your support system if you get stuck in any challenge. 

### 3. Join our Discord at [http://bit.ly/basecamp-discord](http://bit.ly/basecamp-discord)

Our discord server is one stop shop for all your MLH INIT announcements and a great welcoming community.

### 4. Complete Swag form at [https://hackp.ac/INITswag](https://hackp.ac/INITswag)

In case you're not interested in swags, feel free to skip this step.

### 5. Submit your address [https://hackp.ac/address](https://hackp.ac/address)

Address is required to send you the swags. In case you're not interested in swags, feel free to skip this step.

In case you get stuck somewhere while registering, let us know by dropping a comment on this blog, we'll help you out.

Get excited! 🤩 We'll see you there 😉
Snap carousel
Tags: html, css, performance, codepen
Published: 2021-06-26 07:07:17

---
title: Snap carousel
published: true
cover_image: https://images.unsplash.com/photo-1605127943669-7733ab15d636?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80
tags: html, css, performance, codepen
---

In the last few days I have been asked to find a pure css solution to build an images carousel, I immediately thought about the current solution, however I also focused on what js gives the added value and therefore what I would have to give up with the my css solution.

I analyzed the previous js carousel and noticed:

* display of upcoming images
* interaction buttons
* snap effect

Here I found an equivalent solution:

* Arrangement of the different images with 100% height and automatic width in a div with horizontal overflow
* touch interaction
* css scroll snap

> What have I given up? Nothing!
> What have I gained? A simpler structure and a lot of **#performance**!

{% codepen https://codepen.io/tamer_aka_remat/pen/dwLXVO %}
Built a social media website with Next JS, TailwindCss and Firebase in 8 days
Tags: showdev, nextjs, tailwindcss, firebase
Published: 2021-06-26 06:34:16

Hello Everyone,

So around one month ago i created a simple social media site because i was bored and after publishing i got a good response by many peoples and 100+ users registered on website.

So i thought why don't update and make a proper website. Also it's a good project for my resume so 8 days ago i started creating this project called **Noob** and today I'm gonna make that project public so check it out and write your review :)

**Website is still in development, Working on**
+Comment System
+Follow System
+Notification's


Website Link : [noob.study](https://noob.study)
Github Link : [Github.com/NV404/noob](https://github.com/NV404/noob)

{% github NV404/noob %}

**Share Your Thoughts.**
**Feel free to contribute.**
**Star the Repo If you like**
41+ Postman Interview Questions & Answers (with Notes) | PART 2
Tags: testing, postman, beginners
Published: 2021-06-26 06:32:40

In this video, we are going to cover the 41+ Postman interview questions and answers.

✅ Download the Mind map - https://sdet.live/notes
✅ API Testing Postman Playlist - https://sdet.live/4keR

{% youtube D_X2-A3RUUA %}

✅ API Testing –
https://www.learnapitesting.com

✅ Cypress Tutorial with LIVE Projects –
http://cypresstutorial.com
FastAPI + SAML on Keycloak
Tags: fastapi, saml, keycloak, python
Published: 2021-06-26 04:37:01

> TL:DR; a quick article to help FastAPI users get SAML working on their application.

---

## Getting Started

The code and instructions are found at [https://github.com/ais-one/fastapi-saml](https://github.com/ais-one/fastapi-saml)

- Less than 100 lines of code
- Only 4 dependencies to install
- Requirements and setup are all documented

If there is a problem please raise an issue, so that documentation and code can be improved.

---

## Summary

This may look like a very short article but to get this working took quite a lot of time and effort...
- searching on Google and Stack-Overflow
- choosing which library to use
- digging into the library itself to find out what went wrong
- many trial and error

Thank you and hope it is helpful to you.
Quick Facts about React.
Published: 2021-06-26 05:42:20

2011 Facebook creates React
2013 Facebook makes React open-sourced
By 2014 React is becoming more popular in production environments
React is a great tool to use due to the ability to separate concerns
React is very flexible and can be used for a variety of platforms and uses
Due to Reacts flexibility the rules of other frameworks don't apply the same way and React can be very forgiving
React can make changes to the DOM faster than regular JavaScript
React has become very popular and can help with all kinds of interactive web applications.
AWS SDK with Javascript: Download File from S3
Published: 2021-06-26 05:32:10

I will post three different articles related to the file transferring method using aws-sdk. The first article is about file download.

## Initial Setup in AWS
please make sure that you have AWS account with admin authority.

Once you logged in AWS, you should create a policy and attach it to your account, and then create access key. 

I'm not going to talk about all the detail of how to setup for AWS, so if you want to know how to do this, please refer to the  [AWS Official Documentation](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html).

And When you create a policy for file downloading, you should include the following.

*Policy*
```json
"s3:GetObject",
"s3:ListBucket",
```
Also, in order to allow others to access your S3 files with the generated URL, you need to set up the CORS policy in the permission tab of your S3 Bucket.

*CORS policy*
```json
 "AllowedMethods": [
            "GET",
        ],
```

Now, it's ready to access S3 from the code base and download files.


## Download File In Javascript Code Base
Once you received the AWS access key and secret key, you can store them with AWS region info and bucket name in the .env file.

Also, please make sure that you installed aws-sdk in your project.
To install aws-sdk, you can simply use npm package manager to do below.
```bash
npm install aws-sdk
```

And here is the simple code to generate the download URL.
First, you need to create S3 bucket object.
```javascript
const s3bucket = new AWS.S3({
  accessKeyId: process.env.AWS_ACCESS_KEY,
  secretAccessKey: process.env.AWS_SECRET_KEY,
  signatureVersion: 'v4',
  region: process.env.AWS_REGION, // ex) us-west-2
});
``` 

And then, use `getSignedUrlPromise()` to receive the generated download url.
```javascript
 const params = {
    Bucket: process.env.AWS_BUCKET_NAME,
    Expires: 3000,
    Key, // this key is the S3 full file path (ex: mnt/sample.txt)
  };
  const url = await s3bucket
    .getSignedUrlPromise('getObject', params)
    .catch((err) => {
      logger.error(err);
    });
```
Once, you received the URL, you can use the HTTP request module (in my case, I used axios) to download the file.
```javascript
// please note that the responseType is stream
 const res = await axios.get(url, {
        responseType: 'stream',
      });

// receive the data as a read stream
const istream = res.data;

// create a write stream with the path including file name and its extension that you want to store the file in your directory.
const ostream = fs.createWriteStream(fullPath);

// using node.js pipe method to pipe the writestream
istream.pipe(ostream);

```
with the read stream object, you can follow events with `.on()` function. The events that you may be interested in during the download are `close` (when the stream is finished, meaning download is done), `data`(receiving data chunk - downloading process), and `error` (when failed to download).
Github SSH KEY Setup (Easy)
Published: 2021-06-26 04:03:50

**In this article I will Show You How to Setup SSH key in GitHub For Lifetime**
1. First you have to go on this path of your PC **Local Disk / Users / Your PC Name** Then if you find **.ssh** folder then you have to delete it. if you haven't find then continue. 👇

2. Go to your terminal & run Command `ssh-keygen`
then automatically show it 👇
> Enter file in which to save the key (path): **Press Enter**
> Enter passphrase (empty for no passphrase): **Press Enter**
> Enter same passphrase again: **Press Enter**

You will see 👇
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3mnmulwi5qoajdrhy8a.PNG)

3. Run Command `eval $(ssh-agent -s)`

4. Run Command `ssh-add ~/.ssh/id_rsa`

5. Go to your **Local Disk / Users / Your PC name or anonymous** then you should see this file **id_rsa.pub** then open it with with Notepad. then Copy all text

6. Go to your github profile settings and click **SSH and GPG Keys** then paste it. like this 👇
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmh75q7dn5uwztw0hwuf.png) 
> Then click **Add SSH key** button

7. Again Run Comman `ssh -T git@github.com` 
then it will show like this 👇
> Are you sure you want to continue connecting (yes/no/[fingerprint])?

write **yes** and hit Enter that's it.
Now you can access your github profile for **git push, git pull everthing that you need**.

Happy Hacking!
Struggling With React
Published: 2021-06-26 05:25:27

This project did a great job at kicking me back down to Earth. I felt like I was riding a high making it to my last mod and then boom! React happened. As bad as that sounds I really do enjoy React and I am excited about all the great things that you can do, but I seem to struggle with state. As of now I am submitting my project but it is no where near where I want it to be. I will continue to work on this project and hopefully by the time of my review it will be perfect.
Hosting websites for clients?
Tags: discuss, codenewbie, help
Published: 2021-06-26 05:24:04

Hello all! I'm super new to development, currently a student with Woz-U. I'm trying to build a portfolio and I've gotten pretty deep into building a website for a friend's business, but I can't stop thinking - what about when I'm done? I'm looking for advice on how to publish websites for clients that don't own anything already. I'll take anything you guys have to give me - etiquette, host recommendations, any help welcome!
You don't have to type all your manage.py or django-admin commands by hand anymore! Here's Django command auto complete hack
Tags: python, django, bash, productivity
Published: 2021-06-26 04:49:35

If you're like me then you love the terminal and everything about it. One thing that make the terminal experiences smooth is the `Tab` button autocomplete. Writing recognizable amount of the command or it's parameters and hitting `Tab` saves me a lot of time. But in the case of django I had to spell out `runserver` or `makemigrations` every time I initiated a dev server.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ow5ys9i5cscng6pag0u.jpeg)
So I've enable Django commands auto complete  and here's how you can do it too.
open up your `.bashrc` file with your favorite text editor. You'll find it at `~/.bashrc`. Then add the following at the end of your file

```bash
# Django autocomplete start
_django_completion()
{
    COMPREPLY=( $( COMP_WORDS="${COMP_WORDS[*]}" \
                   COMP_CWORD=$COMP_CWORD \
                   DJANGO_AUTO_COMPLETE=1 $1 ) )
}
complete -F _django_completion -o default manage.py django-admin

_python_django_completion()
{
    if [[ ${COMP_CWORD} -ge 2 ]]; then
        local PYTHON_EXE=${COMP_WORDS[0]##*/}
        if echo "$PYTHON_EXE" | grep -qE "python([3-9]\.[0-9])?"; then
            local PYTHON_SCRIPT=${COMP_WORDS[1]##*/}
            if echo "$PYTHON_SCRIPT" | grep -qE "manage\.py|django-admin"; then
                COMPREPLY=( $( COMP_WORDS=( "${COMP_WORDS[*]:1}" )
                               COMP_CWORD=$(( COMP_CWORD-1 ))
                               DJANGO_AUTO_COMPLETE=1 ${COMP_WORDS[*]} ) )
            fi
        fi
    fi
}

# Support for multiple interpreters.
unset pythons
if command -v whereis &>/dev/null; then
    python_interpreters=$(whereis python | cut -d " " -f 2-)
    for python in $python_interpreters; do
        [[ $python != *-config ]] && pythons="${pythons} ${python##*/}"
    done
    unset python_interpreters
    pythons=$(echo "$pythons" | tr " " "\n" | sort -u | tr "\n" " ")
else
    pythons=python
fi

complete -F _python_django_completion -o default $pythons
unset pythons

# Django autocomplete end
```

Save the file and you're all done! And yes it was THIS EASY! To work at your already opened terminal just type `reset` and enter. Or `source ~/.bashrc` would do the trick too!
Tailwindcss: Fall in Love with Writing CSS Again for your Django Application
Tags: tailwindcss, django, ux, css
Published: 2021-06-26 03:39:28

If you're a developer, chances are that you've been in this situation before. You're writing CSS for your Django app, and it's not really coming naturally to you. The code is looking sloppy and unorganized, so the whole project looks like a mess! That's where Tailwindcss comes in handy: You can start using Tailwindcss to write clean and organized CSS for your Django application and forget about messy CSS for the rest of your life!

In this post, we are going to see how you can install Tailwindcss for your Django application.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/MM0Jrc8BHKx3y/giphy.gif" />


## Create a new Django application

- Create new virtualenv and activate the environment
```
virtualenv -p python3 tailwindcss && source tailwindcss/bin/activate
```

- Install Django

```
pip3 install django
```

- Create a new project and core folder
```
django-admin startproject mysite && cd mysite && python3 manage.py startapp core
```

- Make sure your site runs properly
```
python3 manage.py runserver
```

- Create static directory
```
mkdir static && mkdir static/css
```

- Create a folder for JS
```
mkdir jstools && cd jstools
```


## Install and setup tailwind
- Make sure you are in `jstools` folder
```
npm init -y && npm install tailwindcss autoprefixer clean-css-cli && npx tailwindcss init -p
```

- Add build command to your scripts
Open **package.json** file and change the `scripts` section to following
```
  "scripts": {
    "build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

- Open the **tailwind.config.js** and paste the following in it
```
module.exports = {
    future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        enabled: false, //true for production build
        content: [
            '../**/templates/*.html',
            '../**/templates/**/*.html'
        ]
    },
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],
}
```

- In *static/css** create new file called `tailwind.css` and add the following in it
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Now go to `jstools` directory and run:
```
npm run build
```
This generates `styles.css` and `styles.min.css`

- In your template link to `styles.min.css` and voilà you have tailwind in your project
```
<link href="${static.url('css/style.min.css')}" rel="stylesheet">
```
Trace activity in WordPress
Tags: wordpress, log, activity, plugin
Published: 2021-06-26 02:20:45

One of the areas that WordPress lacks is logging user activity. In particular the activity of site admins and editors. This is a vital feature as it helps trace back any actions that have caused error or for general troubleshooting. 

An attempt has been made to fill this gap with a number of plugins. However, these plugins have some shortcomings make them not very useful (as I have experienced) when debugging errors. The plugins either provide full features for premium version, or generally do not display all the useful information when changes are logged.

That is why I created Nashaat Activity Log plugin. This plugin will log information about most of the changes that occur in WordPress admin area. 
Here are some examples what the plugin logs:
- Post changes (content, options, title, excerpt .. etc).
- Plugins and themes activation, deactivation, installation, removal and theme switch.
- Website updates (core, plugins and themes)
- Taxonomy changes
- Widget changes (order, adding or deleting)
- Users changes (profile changes, registration, removal)
- Login attempts. This is a very useful feature as the plugin records failed attempts with IP address. It will help detecting brute force attacks and possibly blocking the offending IP address.

There are also many other areas where the plugin logs users activity.

This is an example of how logs appear.
![Nashaat Activity Log display example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jszyjwe3ehrn59lsptxe.png)

And this is an example of filtering:
![Nashaat Activity Log filtering example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k24gu0gbjy1ljwg1rh75.png)

New features will be soon added. Currently I am working on adding support for WooCommerce changes (settings, products, tags .. etc). And later I am planning to add support for most popular plugins such as Yoast SEO, Gravity Forms, Advanced Custom Fields (ACF), WPForms, bbPress, Contact Form 7 and Easy Digital Downloads.

To download the plugin you can search for Nashaat Activity Log from your WP plugins page and install it. Or you can download it from this link:

👉 https://wordpress.org/plugins/nashaat-activity-log/ 

If you face any issues please submit a question in the support forum: https://wordpress.org/support/plugin/nashaat-activity-log/.
Page Title and Favicon in Django
Tags: django, html, css, webdev
Published: 2021-06-26 00:32:42

I will assume that you already have a Django web app set up, so we will dive right into how to add a page title and favicon to a Django website.

We only need two lines of code to do this.

#Page Title

Let’s start with the page title. If you are using the local server, you should have something similar to this when running.

![Screen-Shot-2021-06-25-at-7.07.12-PM-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6u5xg30f0mopgvcp1mw.png)

To change the page title, add the following line of code at the top your HTML template.

If you have any imports at the top, add the line after the imports.

I chose the name of my app (DEVBALT) for this example.

```html

<title>DEVBALT</title>


 <!-- baltlogs.com-->

```

After refreshing the page, you should see the page title.

![Screen-Shot-2021-06-25-at-6.42.04-PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q96phzhw4xa8qay7bfqa.png)

There are two ways to do this. You can create a base template and have one page title for all pages of the website, or you can add a page title to each template depending on the page.

For example, I chose to display the name of my website (DEVBALT) for all pages on my website. However, you can choose to display CONTACT for the contact page, BLOG for the blog page, etc.

#Favicon

Let’s tackle the favicon.

Django uses a variation of HTML templates which makes it easy to add the favicon. However, the line below won’t work.

```html

<title>DEVBALT</title>

<link rel="shortcut icon" type="image/png" href="img/favicon.png">


 <!-- baltlogs.com-->

```

First, we need to set up static files for the website.

If you already did this, you can skip this part.

If not, follow the tutorial below to set up static files.

[Static Files Setup](https://baltlogs.com/login-registration-page-in-django-using-html-css-javascript-part-ii/)

Create a new folder named img inside the static folder.

Move your favicon file (png or any other acceptable format) into the img folder.

Depending on the browser, you’ll see a default icon next to the name of the website.

If using Google Chrome, you’ll see a planet as the default icon showing next to the name of the website.

Change the line shown earlier to the following.
 
```html

<title>DEVBALT</title>

<link rel="shortcut icon" type="image/png" href="{% static 'img/favicon.png' %}">


 <!-- baltlogs.com-->

```

In the above line, we added the path to the favicon file in a way that Django understands.

Now if you refresh the website, you should see the favicon appear.

![Screen-Shot-2021-06-25-at-6.38.42-PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vam7r4b924c0ugi47wx.png)

[Twitter](https://twitter.com/balt1794)  

[Registration Page using UserCreationForm (Django) – Part 1](https://baltlogs.com/registration-page-using-usercreationform-django-part-1/)

[Registration Page using UserCreationForm (Django) – Part 2](https://baltlogs.com/registration-page-user-form-django-2/)