teleren/devto huggingface dataset:
[SOLVED] jwt.exceptions.DecodeError: Invalid header padding error
Tags: python, fastapi, api, programming
Published: 2023-09-19 15:25:43

## Hi 🙂🖐

I faced this error, and I want to share the solution with you. 🤗

This my code :

```python

from fastapi import FastAPI, Response, Request, Depends
from fastapi.responses import HTMLResponse
import jwt

app = FastAPI()

def generate_jwt():
    return jwt.encode({'id':'test'}, key = '123', algorithm='HS256')


def decode_token(token):
    payload = jwt.decode(token, key = '123', algorithm='HS256')
    return payload


@app.get('/test')
async def test(response: Response):
    response = HTMLResponse(open('test.html', 'r').read())
    response.set_cookie(key="fakesession", value=generate_jwt())

    return response


async def read_token(request : Request):
    token = request.cookies.get('fakesession')
    if not token:
        return False
    
    return decode_token(token)

@app.get('/protected')
async def protected(token : str = Depends(read_token)):
   return token

```
I have this error : jwt.exceptions.DecodeError: Invalid header padding 


And this is the solution : 
Just add `.decode('utf-8')` to convert it to string

```python
def generate_jwt():
    return jwt.encode({'id':'test'}, key = '123', algorithm='HS256').decode('utf-8')
```


https://github.com/jpadilla/pyjwt/issues/319
Practical place for basic DevOps toolchain
Tags: devops, tutorial, cicd, beginners
Published: 2023-09-19 15:04:15

# DevOps Basic

I'm building a practical open-source place for basic DevOps toolchain named **devops-basic**.

## Introduction 👋

Welcome to **[devops-basic](https://github.com/tungbq/devops-basic)**, your ultimate destination for mastering the fundamental DevOps toolchain.

At **devops-basic**, I am passionate about simplifying the world of DevOps and fostering hands-on learning experiences. My mission is to provide you with comprehensive reference documentation and practical content for mastering essential DevOps tools and practices.

## DevOps topics 📚

My repository covers a wide range of topics and tools in the DevOps ecosystem with hands-on example. Here are some:

| Item | Content |
|:---|:---|
| Ansible | [**ansible**](https://github.com/tungbq/devops-basic/tree/main/topics/ansible/) |
| Docker | [**docker**](https://github.com/tungbq/devops-basic/tree/main/topics/docker/) |
| Kubernetes (k8s) | [**k8s**](https://github.com/tungbq/devops-basic/tree/main/topics/k8s/) |
| Aws | [**aws**](https://github.com/tungbq/devops-basic/tree/main/topics/aws/) |
| Helm | [**helm**](https://github.com/tungbq/devops-basic/tree/main/topics/helm/) |
| Jenkins | [**jenkins**](https://github.com/tungbq/devops-basic/tree/main/topics/jenkins/) |
| Terraform | [**terraform**](https://github.com/tungbq/devops-basic/tree/main/topics/terraform/) |
| Shell | [**shell**](https://github.com/tungbq/devops-basic/tree/main/topics/shell/) |
| Git | [**git**](https://github.com/tungbq/devops-basic/tree/main/topics/git/) |
| Elk | [**elk**](https://github.com/tungbq/devops-basic/tree/main/topics/elk/) |
| ArgoCD | [**argocd**](https://github.com/tungbq/devops-basic/tree/main/topics/argocd/) |
| Github-Action | [**github-action**](https://github.com/tungbq/devops-basic/tree/main/topics/github-action/) |
| Groovy | [**groovy**](https://github.com/tungbq/devops-basic/tree/main/topics/groovy/) |
| Prometheus | [**prometheus**](https://github.com/tungbq/devops-basic/tree/main/topics/prometheus/) |
| And more | **...** |

I'll keep investigating and adding the new content and keep it up to date

## Why DevOps Basic ❔

Whether you're a beginner looking to establish a strong foundation in DevOps or an experienced DevOps engineer seeking quick references and advanced insights, my repository caters to your needs.

## Join Our Community 👋🏻👋🏻👋🏻

I invite you to join me on this exciting learning journey. Feel free to:

- Explore my content
- Share your expertise and insights
- Offer advice to fellow learners
- Contribute to my repository to help us improve and expand our content

Together, we can create a valuable resource for anyone interested in mastering the basics of DevOps.

Thank you for your interest! ❤️❤️❤️

You can find my repository on GitHub at [**tungbq/devops-basic**](https://github.com/tungbq/devops-basic)
useReducer hook React.js
Published: 2023-09-19 14:49:27

# useReducer React.js

useReducer is hook to mange states:

const [state, dispatch] = useReducer(reducer, initializeState);

okay let’s breakdown this hook

1- initalizeState: is an object that contain all states we want to manage by the Reducer hook

```jsx
const initalizeState = {
age: "",
name: "",
isClicked: false,
counter: 1,
}
```

2- state : it’s an object that contain all the states in the **initalizeState** and we can destruct the states like that 

```jsx
const [ { name, age, isClicked, counter }, dispatch] = useReducer(reducer, initializeState);
```

3- dispatch: is a function that get the order to the reducer function to mange/update the certain state, let’s imagine that we have button and we want to update the state **isClicked** when we click on the button and we want to update the counter by add 5 on each Click

```jsx
<button onClick={ () ⇒ { dispatch( { type: “clicked”, payload:5 } ) } }>click here</button> 
```

4-reducer: it’s a function where we manage the states 

```jsx
function reducer( state, action ){
switch ( action.type) {
case “clicked”:
	return { …state, isClicked: true, counter: state.counter + action.payload }
default:
	throw new Error (”Unknown Action”)
}
}
```

-states values after click on the button

```jsx
name = ""
age = ""
isClicked = true
counter = 6
```

here because we want to just update the isClicked state we return other stats without change by 

…state
Preparing a React course in public - Examples Hub
Tags: webdev, javascript, react, tutorial
Published: 2023-09-19 14:44:22

Following this idea of «preparing the course in public», I've created a collection at [Stackblitz](https://stackblitz.com/@manuartero/collections/master-inesdi-2023) where I'll gather all the examples and exercises I'm preparing for my class. 

![Screenshot of the collection I've created that will gather all the examples and exercises](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vpne8r9235wcdzxobill.png)

At first, I had doubts about whether to use an **online development environment** or stick to local development. 

I decided this way so I can focus on programming itself without  the tedious setup and configuration issues. 

Besides, these tools have this handy "_hot-loading view on the side_" that will be pretty useful while teaching. 

I considered [Codesandbox](https://codesandbox.io/) (and even [Replit](https://replit.com/)). But finally I decided to use [Stackblitz](https://stackblitz.com/). Honestly because a friend of mine works there 🤝.

> All three options are excellent. Stackblitz works just great, so Stackblitz it is.

***

Next up: first code exercise I'm preparing.

***

Cover image created by [leonardo.ai](https://leonard.ai/); prompt: «Renaissance-era professor in a steampunk-style classroom, creating a tiny drone. adorned with intricate, mechanical details.»; 3D Animation-Style.

Thanks for reading 💛.
DevOps: The Bridge Between Code and Deployment
Tags: beginners, automation, devops, career
Published: 2023-09-19 14:40:18

DevOps is a revolutionary approach to software development, uniting development and operations teams to streamline workflows and accelerate project delivery. By embracing automation, continuous integration, and continuous delivery, organizations can reduce errors, enhance collaboration, and bring products to market faster. However, adopting DevOps requires a cultural shift, breaking down silos between teams, and a commitment to continuous improvement. The result is not just better software but a more agile and competitive organization ready for the challenges of the modern tech landscape.
Mastering the Next.js Workflow: Elevating Web Development
Tags: showdev, webdev, nextjs, web
Published: 2023-09-19 14:31:15

Embarking on a journey to master the Next.js workflow! 💡 Join the discussion on Dev.to to explore best practices, tips, and tricks for creating exceptional web applications. #NextJS #WebDevelopment #TechCommunity #CodeOptimization


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrgusjo3q0eetlulzwvv.jpg)
Hướng dẫn chi tiết cách đăng ký tài khoản tại nhà cái 789Win
Published: 2023-09-19 14:21:34

Sau khi anh em đã hoàn thành quá trình tải app 789Win thì anh em cần phải có 1 tài khoản để đăng nhập vào nhà cái. Sau đây tôi sẽ hướng dẫn chi tiết các tạo 1 tài khoản tại trang wed 789Win chuẩn nhất:
 Bước 1: Mở app 789Win. Ở giao diện sẽ có mục đăng ký bên trên góc phải. Anh em chỉ cần click vào đó thì 1 form sẽ hiện ra màn hình. 
Bước 2: Anh em chỉ cần đọc và điền các thông tin mà 789Win yêu cầu cung cấp như: Tên đăng nhập, Mật khẩu,…
789win.com.co/wp-content/uploads/2023/08/dang-ky-789win-296x400.jpg.webp

Bước 3: Sau khi điền các thông tin xong thì anh em cần phải click vào ô đã đồng ý với các điều khoản và quy định. Và chấp nhận đăng ký tài khoản.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/913frpjtvwlk3zy8ppat.png)
🌟 Exciting times ahead! 🚀
Published: 2023-09-19 13:45:42

🌟 Exciting times ahead! 🚀 We're thrilled to share our latest video showcasing our work, aims, and vision. Join us on this journey as we strive for a brighter, more impactful future. 💡🌎
https://youtu.be/f-DdtX5wLOI
#OurMission #Visionaries #MakingADifference #sre  #loadbalancing #linux #sreengineering
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvu3genlhkqt5kxlh9w7.jpg)
Focus on Accessibility: Mastering Form Input States for All Users
Tags: webdev, javascript, beginners, tutorial
Published: 2023-09-19 13:42:40

## Introduction

Web accessibility is more important than ever, and understanding the finer points can make a world of difference. One crucial but often neglected feature is the focus state in form inputs. In this blog post, we will delve into how you can improve focus states for better accessibility.

## Importance of Focus State

### What is Focus State?

Focus state indicates which form input is currently active and ready to accept data. Typically, the browser will highlight this in some way.

**Code Example:**

```html
<!-- HTML -->
<input type="text" id="username" />
```

```css
/* CSS */
#username:focus {
  outline: 2px solid blue;
}
```

### Why is Focus State Important?

The focus state is crucial for keyboard navigation. By making it clear which input is currently focused, you help users navigate your forms more easily.

## Avoid Using `outline:none`

Many designers get rid of the focus state by setting `outline:none`, mainly for aesthetic reasons. This, however, is a bad practice.

**Code Example:**

```css
/* Don't do this */
#username:focus {
  outline: none;
}
```

## Better Practices: Using `:focus` Wisely

### Using `:focus`

The `:focus` pseudo-class can be a game-changer for accessibility when used correctly.

**Code Example:**

```css
/* Good Practice */
#username:focus {
  outline: 2px solid blue;
}
```

### Why `outline` Over `border`?

The `outline` property does not affect the layout of your page, unlike `border`, making it a better choice.

**Code Example:**

```css
/* Using outline */
#username:focus {
  outline: 2px solid blue;
}

/* Using border */
#username:focus {
  border: 2px solid blue;
}
```

## Highlighting Form Groups

Sometimes, making an entire form group stand out can be more beneficial.

**Code Example:**

```css
/* Using :focus-within to highlight a whole form group */
.form-group:focus-within {
  background-color: lightgray;
}
```

## Key Takeaways

1. Never eliminate the focus state; it's crucial for accessibility.
2. Use high contrast for your focus styles.
3. Test your focus states with real users and make adjustments as needed.
Cloud resume challenge
Published: 2023-09-19 13:23:24

Hello there reader,

Starting in September, I took on the Cloud Resume Challenge, which you can find at [](https://cloudresumechallenge.dev/docs/the-challenge)/aws/. This challenge has been quite the ride, expanding my experience with the cloud, especially in the world of AWS. In this blog, I'll break down what I've been up to in this challenge.

## **Creating the website.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06rvjm9ns6nizsm9se35.jpg)

The initial steps were all about creating a static website using HTML and CSS. To be honest, I'd never made a website before, so I went on a bit of a journey to learn about HTML and CSS. Luckily, I stumbled upon https://html5up.net/, a site that had great templates. It saved me a ton of time; I just had to tweak the text and add my own touch to the code.

After getting the website just right, it was time to get it up and running on Amazon Web Services (AWS). I used CloudFront to make the website accessible to users, S3 to store all the site's stuff (that's how it became a static website), and Route 53 to give my site its own personalized web address.

## **Let's add a counter.**

Once my website was out there on the World Wide Web, I wanted to add a viewer counter to keep tabs on how many people were checking it out. To do this, I used DynamoDB with JavaScript. I set up a table in DynamoDB, and my JavaScript code would tap into it to update the counter every time someone viwed my website. I did hit a hiccup when I forgot to reference JS in the HTML, but I got that sorted out.

## **Getting familiar with Terraform and creating a CI/CD back end.
**

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

Next up, I had to get familiar with Terraform, a tool that lets you define your software's infrastructure with code. It took me a bit to get the hang of it, but once I did, it was smooth sailing. I whipped up a Python script to run in AWS Lambda for backend updates. I also got my hands dirty with some Python code for a test environment. Then came GitHub - I created a repository to make it easy to push updates to the backend. With Git Bash in the mix, I could connect the backend to the repo and push my code into the cloud for testing.

## **Updating the main branch.**


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

This part was a bit more straightforward. I wanted to update the main branch, so I set up a fresh GitHub repo just for that. Then, I cooked up a YAML script to call on my S3 bucket. Now, instead of going through AWS every time, I could just do a commit to update the website.

## **Final step, Final thoughts.**
 
 Finally, the final step – writing this blog. It's been a challenge, but I've learned a ton about how different Amazon services can work together. With this project wrapped up, I'm ready to dive even deeper into the cloud and keep building on what I've learned.
Customer Churn: A Silent Revenue Killer?
Tags: webdev, database, datascience, data
Published: 2023-09-19 13:20:31

Ever wonder how 70% of enterprises witness a quiet exodus of nearly 30% of their customers? Without as much as a whisper, these customers drift away. But here’s the silver lining: Our data-saturated modern world offers a powerful tool to halt this — Data Analytics!

## Why Should You Care About Customer Churn?
Revenue Drain: Each departing customer isn’t just a number but a cascade of lost present and future revenue.

1. Trust & Reputation: In a world connected by the click of a button, one dissatisfied customer can ripple into a tarnished brand reputation.
2. Elevated Acquisition Costs: It’s always pricier to attract new customers than to retain the old faithfuls.
3. Competitive Edge: Handling churn effectively gives you a competitive advantage, ensuring your loyal customers stay YOURS.
4. Enter, Data Analytics!

Data analytics isn’t just number-crunching. It’s a systematic approach to unveil patterns, correlations, and trends that lie hidden. In the world of customer churn, this translates to:

Understanding Customer Behavior: Know what ticks off your customers and what keeps them coming back.
Predictive Insights: Envision potential churn before it happens!
Strategic Planning: Tailored strategies for customer retention and personalized offers.

## How Exactly Does Data Help?

Imagine being able to:

🎯 Send personalized offers based on purchase history.
💬 Launch targeted communication campaigns to re-engage dormant customers.
🛠 Enhance products based on genuine feedback.
🎁 Create loyalty programs rewarding your most valuable patrons.

But there’s more. Real-time churn prediction models can even raise an alarm when a customer shows the first signs of drifting, allowing immediate interventions.

**To Wrap It Up…**
Customer churn, if left unchecked, can eat into your revenue and brand value. But it also presents an exciting challenge — harnessing the power of data analytics to not just predict, but to create lasting, fulfilling customer relationships.

Want to dive deeper into the mesmerizing world of data analytics and how it’s revolutionizing customer retention? It’s not just a geek’s game; it’s the future of effective customer management.

👉 Dive into our comprehensive blog for an in-depth exploration👉 https://bit.ly/3Rqj1Nm
#6 Theory of Intent And Switch Activity using Intent | Android Studio Tutorial #SoftwareTechIT
Tags: android, development, beginners, coding
Published: 2023-09-19 13:14:00

{% embed https://www.youtube.com/watch?v=8erWaZUQN3g&list=PLmwJLue37PZfiGUAwQ6uhh5bbYkeFUOpj&index=6&ab_channel=SoftwareTechIT %}

Subscribe Channel SoftwareTechIT 
And Visit:- https://SoftwareTechIT.com
More Here:- https://home.softwaretechit.com
Buy Anything From Here :-https://shop.softwaretechit.com

Questions:- 
What is an Intent in Android ?
What is Intent in android with example?
What are the types of Intent?
What is Intent syntax in Android?
What is Android activity and Intent?
why we use intent in android
Why do we use Intent?
What is Intent in Android with example?
Why is Intent used to communicate between activities?
What are the types of intents in Android?
How do you start an Intent?
What is Intent and example?
How do you use Intent?
What are the components of Intent?

Download Our App:- https://play.google.com/store/apps/details?id=com.softwaretechit
Read More Here :- https://softwaretechit.com/top-10-quetions-on-ai-and-chatgpt-ai-tool-can-ai-is-new-future-of-world/
https://softwaretechit.com/what-is-chatgpt-develope-chatgpt-11-things-you-can-do-with-chatgpt/
Watch Other Video:-https://youtube.com/shorts/7MmZi6GHizM?feature=share
🌎 Website :- https://softwaretechit.com
📰 Blog:- https://blog.softwaretechit.com
🛒 Shopping :- https://shop.softwaretechit.com 
📑 Product Review :- https://productsellermarket.softwaretechit.com
🔎 Business & More:- https://golbar.net/
🏡 https://home.softwaretechit.com

💬 https://instagram.com/softwaretechit

LeetCode Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZeATQcUaHddx4-TJ5cjkT0t
Angular Project Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZfQTgu-AXNee3EDj7oIlqeh
Android Playlist :-https://www.youtube.com/playlist?list=PLmwJLue37PZcEUyMLhaa3jnfyq3lETiSe
Python Flask Project Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZdqqr9wj6c5uY2iXQsSVxZK
Java Project Link :- https://www.youtube.com/playlist?list=PLmwJLue37PZcvpGWO8tjlFzXCRS7FDfwA
Installation Tutorial Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZeRGo1hOc3Mh4QcHVSIKQ9Y
Kali Linux Installation:- https://youtu.be/7uqH2om9itY
#5 Example Of Activity & Activity Life cycle | Android Studio Tutorial | #softwaretechit
Tags: java, android, development, beginners
Published: 2023-09-19 13:10:00

{% embed https://www.youtube.com/watch?v=Q2vheM7H2KA&list=PLmwJLue37PZfiGUAwQ6uhh5bbYkeFUOpj&index=5&ab_channel=SoftwareTechIT %}
Subscribe Channel SoftwareTechIT 
And Visit:- https://SoftwareTechIT.com
More Here:- https://home.softwaretechit.com
Buy Anything From Here :-https://shop.softwaretechit.com

Questions:- 
How to Implement the Android LifeCycle Callback Methods
What is Android Activity Life Cycle?
What is activity life cycle in Android?
What is the first step in the lifecycle of an Android activity?
What are the states of activity lifecycle?
When onPause of activity lifecycle is called?
Difference between onCreate() and onStart()?
OnCreate() vs OnStart()
what is called before onCreate in android
Android life cycle activities

Download Our App:- https://play.google.com/store/apps/details?id=com.softwaretechit
Read More Here :- https://softwaretechit.com/top-10-quetions-on-ai-and-chatgpt-ai-tool-can-ai-is-new-future-of-world/
https://softwaretechit.com/what-is-chatgpt-develope-chatgpt-11-things-you-can-do-with-chatgpt/
Watch Other Video:-https://youtube.com/shorts/7MmZi6GHizM?feature=share
🌎 Website :- https://softwaretechit.com
📰 Blog:- https://blog.softwaretechit.com
🛒 Shopping :- https://shop.softwaretechit.com 
📑 Product Review :- https://productsellermarket.softwaretechit.com
🔎 Business & More:- https://golbar.net/
🏡 https://home.softwaretechit.com

💬 https://instagram.com/softwaretechit

LeetCode Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZeATQcUaHddx4-TJ5cjkT0t
Angular Project Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZfQTgu-AXNee3EDj7oIlqeh
Android Playlist :-https://www.youtube.com/playlist?list=PLmwJLue37PZcEUyMLhaa3jnfyq3lETiSe
Python Flask Project Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZdqqr9wj6c5uY2iXQsSVxZK
Java Project Link :- https://www.youtube.com/playlist?list=PLmwJLue37PZcvpGWO8tjlFzXCRS7FDfwA
Installation Tutorial Playlist :- https://www.youtube.com/playlist?list=PLmwJLue37PZeRGo1hOc3Mh4QcHVSIKQ9Y
Kali Linux Installation:- https://youtu.be/7uqH2om9itY
Nested CSS was detected, but CSS nesting has not been configured correctly - Astro
Tags: astro, postcss, tailwindcss, plugins
Published: 2023-09-19 13:06:10

Hello,

After following the steps from the Atros Docs, I get the error on the console (check screenshots).
Seems that somehow PostCSS config has some conflicts with Tailwind, following the Astro Doc.

MacOSX Ventura 13.5.1
VSCode
"astro": "^3.1.0",
package.json:

```
{
  "name": "sm_astro",
  "type": "module",
  "version": "0.0.1",
  "browserslist": [
    "defaults"
  ],
  "scripts": {
    "dev": "bun --bun astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/partytown": "^2.0.0",
    "@astrojs/sitemap": "^3.0.0",
    "@astrojs/tailwind": "^5.0.0",
    "@typescript-eslint/parser": "^6.7.0",
    "astro": "^3.1.0",
    "astro-icon": "^0.8.1",
    "autoprefixer": "^10.4.15",
    "eslint-plugin-astro": "^0.29.0",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "tailwindcss": "^3.3.3"
  },
  "devDependencies": {
    "bun-types": "^1.0.2",
    "eslint": "^8.49.0"
  }
}
```

Changed from:

```
const autoprefixer = require('autoprefixer');

module.exports = {
   plugins: [
      autoprefixer(),
   ]
};
```

To:

```
module.exports = {
   plugins: {
      'tailwindcss/nesting': {}, <--- Needs this
      tailwindcss: {},
      autoprefixer: {},
   }
};
```

You can check the reproducible error here and the fix commented on `postcss.confic.jsc`

https://stackblitz.com/edit/github-elgzfe-pwwt3m?file=src%2Flayouts%2FLayout.astro,postcss.config.cjs,package.json

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

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