teleren/devto huggingface dataset:
Authentication example with FastAPI and JWT, is it as easy and straightforward as they claim?
Tags: webdev, python, api, jwt
Published: 2024-01-11 23:39:04

When we talk about JWT, we are referring to the implementation of an access management system for resources. It is generally argued that JWT is easy and secure to use. However, as we saw in [The Dark Side of JWT: Why It's Not as Secure as You Think?](https://dev.to/tlaloces/the-dark-side-of-jwt-why-its-not-as-secure-as-you-think-3n51), this is not entirely true. In this article, we will design an authentication system that utilizes JWT. To begin, we will describe the needs we want to address. I understand that software architecture should involve identifying a problem and then choosing the most appropriate technology to solve it, rather than selecting a technology and trying to fit a problem into it. However, we will make an exception in this case to evaluate the feasibility of this technology.

And the cases we want to cover are:

- Ability to log in
- Ability to log out
- Ability to track created sessions and their timestamps
- Ability to log out of all sessions at once
- Ability to have different roles
- Security against XSS
- Security against CSRF
- To achieve all this, we will start with the first point and progress by revisiting and updating the previous points.

Let's remember that JWT is supposed to be:

- Easy to use
- Secure
- Stateless
- Fast
- Cross-Domain Authentication

It's important to remember that JWT is simply a way to secure permissions, much like sessions. On the other hand, we have authentication protocols such as OAuth or Password Grant. Throughout the upcoming entries in this series, we will be exploring and explaining each of the points mentioned earlier.

In the examples I provide, only the basic part of the code will be included. If you want to see the entire code, I recommend giving a star to this repository: https://github.com/Tlaloc-Es/fastapi-basic-api-template, where I will start uploading the content.
Build your SaaS landing page in 15 minutes using Mantine
Tags: opensource, nextjs, javascript, webdev
Published: 2024-01-11 23:37:56

After the [Jsoncrack codebase analysis](https://dev.to/tthroo/jsoncrack-codebase-analysis-part-5-toolbar-and-bottom-bar-55gl) series, I have decided to update my website [TThroo](https://tthroo.com/) to use [Mantine](https://mantine.dev/) components.

I was able to create components required in less than 15minutes.

## Wait, what components?

1. [Header](https://ui.mantine.dev/category/headers/)
2. [Hero Section](https://ui.mantine.dev/category/hero/)
3. [Features](https://ui.mantine.dev/category/features/)
4. [FAQ](https://ui.mantine.dev/category/faq/)
5. [Footer](https://ui.mantine.dev/category/footers/)

You can find them in [TThroo](https://github.com/TThroo-Dev/TThroo.com) repo.

## Choose the starter project
Mantine provides [Nextjs starter](https://mantine.dev/guides/next/) configured with Mantine.

I chose [next-app-min-template](https://github.com/mantinedev/next-app-min-template)

And then copied the code from Mantine components listed above and that's it. You now have your SaaS landing page.

But is it though?

You still need to update the copy writing for your website content, update the logo to match your brand's values, but atleast you have a website ready. One less problem...

## The problem
I used to host my website on firebase hosting, with nextjs, you have to perform [additional steps](https://firebase.google.com/docs/hosting/frameworks/nextjs). Keep this in mind.

## Conclusion:
Jsoncrack codebase analysis helped me learn about Mantine and I liked their components. This is what you do, you apply from your learnings. 

It can be something a small thing such as this one to decide to go with Mantine or it can be a huge pattern that you decided to apply when you have a [lot of modals](https://github.com/AykutSarac/jsoncrack.com/blob/main/src/layout/ModalController/index.tsx#L28) in your project.

Sure, I could have used tailwind, but it is alright. I want to demonstrate as much as possible how powerful and useful opensource to learn from.

If you have any questions or need help with your project, feel free to reach out to me at ram@tthroo.com
Vim Text Editor: 15 Must-Know Commands for Developers
Tags: programming, tutorial, webdev, vim
Published: 2024-01-11 23:30:57

Vim's efficiency and flexibility make it a top choice for developers. Here are 15 advanced Vim commands, complete with examples, to elevate your coding experience:

#### 1. **Macros - Record and Execute**
   Automate repetitive tasks.
   - Record: `q<letter>`
   - Execute: `@<letter>`
   ```vim
   qa...q (record to 'a'), @a (execute 'a')
   ```

#### 2. **Global Replace with RegEx**
   Complex pattern-based replacements.
   ```vim
   :%s/old/new/gc
   ```

#### 3. **Tabs and Buffers**
   Efficient multiple file handling.
   - New tab: `:tabnew <filename>`
   - Switch tabs: `gt`, `gT`
   ```vim
   :tabnew file.txt, gt, :ls, :b2
   ```

#### 4. **Window Splits**
   View files side-by-side.
   - Vertical: `:vsp <filename>`
   - Horizontal: `:sp <filename>`
   ```vim
   :vsp file.txt
   ```

#### 5. **Folding - Code Organization**
   Hide/reveal code sections.
   - Create fold: `zf#j`
   ```vim
   zf3j, zo, zc
   ```

#### 6. **`:%` - Command Range**
   Apply commands to the entire file.
   ```vim
   :%norm A;
   ```

#### 7. **`c` - Change Command**
   Replace text efficiently.
   ```vim
   cw
   ```

#### 8. **Visual Block Mode**
   Columnar text editing.
   - Enter: `Ctrl+v`
   ```vim
   Ctrl+v, I#<Esc>
   ```

#### 9. **`:g` - Global Command**
   Execute on lines matching a pattern.
   ```vim
   :g/pattern/d
   ```

#### 10. **Advanced Search and Navigation**
   Navigate through files.
   - Marks: `m<letter>`, `'a`
   ```vim
   ma, 'a
   ```

#### 11. **`u` and `Ctrl+r` - Undo/Redo**
   Manage changes.
   ```vim
   u, Ctrl+r
   ```

#### 12. **`:r !<command>` - Insert Command Output**
   Insert external command output.
   ```vim
   :r !date
   ```

#### 13. **`:!` - Execute External Command**
   Run commands without leaving Vim.
   ```vim
   :!ls
   ```

#### 14. **`:diffthis` - Compare Files**
   Compare files in split view.
   ```vim
   :vsp file.txt, :diffthis
   ```

#### 15. **`:mksession` - Save Session**
   Save your current Vim session.
   ```vim
   :mksession /path/to/session.vim
   ```
Implement refetch with axis
Tags: react, fetch, hook
Published: 2024-01-11 23:26:19

https://stackoverflow.com/questions/71191924/how-can-i-re-trigger-a-custom-hook-inside-my-react-component-when-its-states-ha

const useFetchLists = (
  url = "",
  currentPage = 1,
  selectedPageSize = 10,
  keyword = ""
) => {
  const [items, setItems] = useState([]);
  const [loading, setloading] = useState(false);
  const [totalPage, setTotalPage] = useState(1);
  const [totalItemCount, setTotalItemCount] = useState(0);

  const fetchListData = useCallback(async () => {
    try {
      setloading(true);
      await Adapter.get(
        `${url}?pageNumber=${currentPage}&pageSize=${selectedPageSize}&keyword=${keyword}`,
        {}
      ).then((response) => {
        setItems(response.data.items);
        setTotalPage(response.data.totalPages);
        setTotalItemCount(response.data.totalItems);
      });
    } catch (err) {
    } finally {
      setloading(false);
    }
  }, [url, currentPage, selectedPageSize, keyword]);

  useEffect(() => {
    fetchListData();
  }, [fetchListData]);

  return {
    data: [items, loading, totalPage, totalItemCount],
    refetch: fetchListData
  };
};

export default useFetchLists;
About Me
Tags: beginners, programming, tutorial, python
Published: 2024-01-11 23:24:09

ML Engineer Intern @KushoAI | Ex- Intern Indian Railways @RDSO & IIT Ropar | Kaggle Expert | UG @JUIT'24 

Github Link :https://github.com/TusharPaul01

Kaggle Link : https://www.kaggle.com/tusharpaul2001

Keep following !! Keep Supporting !!
What is the best and easiest way to learn how to code
Tags: webdev, web, productivity
Published: 2024-01-11 23:12:05

I've found that one of the best ways to learn coding is by making mistakes—not intentional ones, of course. When you encounter an error, take the time to dive into solving the problem. Use resources like Google, ChatGPT, and don't hesitate to reach out to others. This hands-on approach not only helps you understand the intricacies of coding but also equips you with problem-solving skills. Facing challenges head-on and learning from them is key to becoming a better coder.
HTML & CSS Syntax
Tags: html, css, beginners, programming
Published: 2024-01-11 22:41:04

Syntax is one of the most important rules of coding because syntax not only defines what you will place on a webpage, but it will also cause massive errors if done incorrectly. I've reviewed HTML and CSS syntax to understand the structure of the coding and to know where to place certain parts while knowing the proper names for each part.

<u>**HTML Syntax**</u>
<h1>Hello World!</h1>

The above code shows h1 tag being used to code Hello World into a h1 title.

Below is the breakdown of the html code:

**Element:**
Element is the entire HTML code put together. It includes the opening and closing tags, and the content. There also may be attributes or ids added to the HTML element as well.
- Example: < h1 > Hello World </ h1 >

**Opening Tag:**
The element starts with an opening tag, which is the name of the HTML element surrounded by angle brackets (< and >). The opening tag indicates the beginning of the element.
- Example: < p >

**Closing Tag:**
The element also has a closing tag, similar to the opening tag but with a forward slash (/) before the element name. The closing tag marks the end of the element.
- Example: </ p >

**Content:**
The content of the element is the information or text that the element contains. It is placed between the opening and closing tags.
- Example: < p >This is a paragraph.< /p >

**<u>CSS Syntax</u>**

CSS (Cascading Style Sheets) is a stylesheet language used for describing the presentation of a document written in HTML or XML. Here's a breakdown of CSS syntax:

**Selector:**
The selector is used to target HTML elements that you want to style. It can be an element name, class, ID, or a combination of these.
- Example: p h1 image/img video etc.

**Declaration Block:**
The declaration block is enclosed in curly braces {} and contains one or more declarations separated by semicolons. Each declaration includes a property and its corresponding value.
- Example: p {
                  }

**Property:**
The property is the aspect of the selected element that you want to style (e.g., color, font-size, margin, etc.).
- Example: p { 
                <u>font-size</u>: 12px;
                                  }

**Value:**
The value is the specific setting for the property. It follows the property and is separated by a colon.
- Example: p { 
               font-size: <u>12px;</u>
                                  }

Remember that syntax is important because the allows you to render what you need on the screen. But, if the code is not correct, your vision will not render and you will receive a lot of errors.
Day 893 : Bug Zapper
Tags: hiphop, code, coding, lifelongdev
Published: 2024-01-11 22:29:26

_liner notes_:
- Professional : In between a couple of meetings I had this morning, I was able to redo the demo app with the Web Component I've been working on so it looks a little better and create some slides to do a quick presentation for a wider team meeting later. I think the presentation went well and the demo worked for the most part except one slight bug. People seemed to like it and my Manager's Manager's Manager said he liked out I gave the presentation by putting so much info in such a small amount of time. Took out the old bug zapper and fixed the issue that popped up earlier and started adding some things that developers could use to customize the Web Component. I also responded to some community questions. Pretty full day.

- Personal : Last night, I spent some time getting the Web Component demo ready so I would be in a rush in the morning. I also picked up some music on Bandcamp and put together the social media promo posts I send on Fridays. Watched an episode of "Blue Eye Samurai" to end the night.

![A dirt road with tall green grass with some purple flowers on both sides leading up to a hill in Kaiserstuhl, Germany at sunset with a lot of clouds in the blue sky partially blocking out the sun. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28ed4pzkdneg718mauk1.jpg)

Google has a new AI model called Gemini and I've been looking through the documentation and got an API key. They have a mode where you can upload an image and send text at the same time. I want to see if I can use it to generate a detailed image of a photo of a person so I can then turn that into some AI generated artwork to be used on merchandise for my side project. I kind of played around with their studio app. Seems promising. Going to put it into the AI test application I made to see what kind of results I can get. I want to put together tracks for this weeks radio show. May work on the CSS animations for my side project. Close the night watching "Blue Eye Samurai". About to eat dinner.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube HGL_kMwJslw %}
#DEVResolutions2024
Tags: devresolutions2024
Published: 2024-01-11 22:19:18

<figcaption>Header photo by <a href="https://unsplash.com/@markuswinkler?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Markus Winkler</a> on <a href="https://unsplash.com/photos/black-and-white-typewriter-on-green-textile-LNzuOK1GxRU?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></figcaption>
  

## 2024 Goals:
I have three goals I want to achieve this year, and this post is the best way to lay them out.

### 1. Start a blog.
I want to focus on learning as much as I can this year, whether it be about All Things Dev, or taking courses to improve my resume. And I believe writing about what I'm learning and how I'm learning, regardless of my skill level, will help me stay on track and keep myself accountable. Also, others may benefit by learning from my mistakes and by offering insight into what I've shared.
+ Action steps:
    + I will aim to write at least one post per month, either on this site or my personal website (which is currently under construction).
    + The topics can be about anything: something work-related, something I'm learning on, my current favorite streaming show ... anything at all.

### 2. Uplevel my skills.
I spent a lot of time last year applying for new jobs. And while I didn't receive any offers (I haven't given up yet!), I did learn that my resume could be seriously beefed up. This is where my second goal for 2024 comes into play.
+ Action steps:
    + I am currently enrolled in several courses on Coursera. I want to complete certifications in mobile development and data analysis this year.
    + I am also going to complete my Bachelor of Science degree this year. While I am a firm believer that a college degree is absolutely not necessary to succeed in tech, and attending college is a privilege not afforded to everyone, I am **THIS CLOSE** to completing the degree. It's just a matter of marking it off my to-do list at this point.

### 3. Get a new job!
I've been working as a Web Developer for the last several years and have really loved it. But, I believe I have grown as much as I can within this role and am looking for new opportunities.
+ Action steps:
    + I need to work on my as-of-this-moment completely nonexistent networking skills. So I plan to focus on this by reaching out via this site, LinkedIn, and even attending my first hackathon at some point this year.
    + I would also like to look into working some smaller freelance jobs, either through Fiverr, Upwork, or the like. It would be another great way to network, and my resume will only be helped by the projects I complete along the way.

***

What are your goals for this new year? Do you have any tips or tricks you plan on implementing to stick to them? Please feel free to comment below and let me know what you're working on!

Hey, look at that! I just completed my first goal for this month!

![Ryan from 'The Office' marking off something from a list](https://media.giphy.com/media/L17xM7PvLcqJggsCYa/giphy.gif)
Push Protocol
Published: 2024-01-10 11:09:02

Push Protocol: The Missing Piece of Web3 Communication
Say goodbye to fragmented, centralized communication in the Web3 world! Push Protocol is here to revolutionize the way dApps, wallets, and services interact with users.

Think of it as the bridge between smart contracts and your crypto wallet, enabling secure, personalized notifications and chats. No more missed governance votes, liquidation warnings, or NFT drops! Push connects applications directly to you, empowering you to stay informed and engaged in the ever-evolving Web3 landscape.

But what makes Push special?

Blockchain-agnostic: Works seamlessly across multiple blockchains, ensuring your communication isn't locked into a single ecosystem.
Decentralized: No central authority controls your data, giving you complete ownership and privacy.
Open and accessible: Any developer can integrate Push into their dApps or wallets, fostering a vibrant and diverse ecosystem.
User-centric: Tailored notifications and chats based on your wallet activity and preferences, keeping you focused on what matters most.
Beyond notifications, Push paves the way for exciting possibilities:

Push Chat: Imagine a secure, decentralized chat platform built right into your crypto wallet. Connect with friends, collaborate on projects, and experience Web3 social interactions like never before.
Push Video: Video content creators can monetize their work directly through blockchain payments, eliminating intermediaries and empowering audiences.
A haven for hackers: Developers have access to robust tools and resources to build innovative communication solutions on top of Push.
Ready to join the Push revolution? Dive into the vibrant community of builders and users at push.org, explore hundreds of dApps already integrating Push, and witness firsthand how this groundbreaking protocol is rewriting the rules of Web3 communication.

Push Protocol: Where Web3 truly connects with you.

This blog captures the essence of Push Protocol, highlighting its key features, benefits, and potential. It sparks curiosity and entices readers to learn more about how Push can empower their Web3 experience. Remember to adjust the tone and length to suit your specific blog format and target audience.
HOW TO RECOVER YOUR STOLEN BITCOIN
Published: 2024-01-11 22:14:51

The world of cryptocurrency is exhilarating, a digital frontier where fortunes can be made and lost in the blink of an eye. But with great opportunity comes great risk, and nowhere is this truer than in the realm of lost or inaccessible crypto holdings. For me, this harsh reality hit home when I found myself staring at a cold wallet, frozen and seemingly devoid of the lifeblood it once held. Panic gnawed at me, visions of my digital assets swirling down a digital drain. In that moment of despair, I stumbled upon Daniel Meuli Web Recovery, a beacon of hope in the dark digital sea. Admittedly, trusting someone with access to your cryptocurrency is a leap of faith, akin to handing over the keys to your digital vault. But Daniel Meuli web recovery approached the situation not just with technical expertise, but with empathy and understanding. They spoke the language of crypto, not just in algorithms and protocols, but in the language of hope and possibility. They acknowledged the emotional weight of my predicament, the dreams, and the investments tied to those seemingly lost coins. The recovery process itself was a masterclass in transparency and communication. Every step was explained, every technical hurdle dissected, ensuring I was not just a client, but a partner in the journey. The team's patience was unwavering, and their dedication was infectious. As days turned into weeks, frustration and doubt threatened to resurface, but their unwavering optimism kept me afloat. Finally, the moment arrived. The encrypted gates to my digital vault creaked open, and one by one, my cryptocurrency holdings materialized on the screen. Relief washed over me, tinged with a newfound respect for the invisible magic Daniel Meuli web recovery had performed. They hadn't just recovered my assets; they had restored my faith in the digital world, in the power of human ingenuity and compassion. My experience with Daniel Meuli web recovery is not just a testament to their technical prowess but to their commitment to human connection. They understood that cryptocurrency isn't just numbers on a screen; it's the embodiment of hard work, dreams, and a leap of faith into the future. They treated my recovery not as a technical challenge, but as a personal mission, and for that, I am eternally grateful for Daniel Meuli web recovery.  TELEGRAM : (@) DANIELMEULI
Sloan's Inbox: How do you improve focus?
Tags: discuss, productivity, career
Published: 2024-01-11 22:09:26

Howdy folks! Sloan, DEV Moderator and mascot, coming back at ya with another question submitted by a DEV community member. 🦥

For those unfamiliar with the series, this is another installment of Sloan's Inbox. You all send in your questions, I ask them on your behalf anonymously, and the community leaves comments to offer advice. Whether it's career development, office politics, industry trends, or improving technical skills, we cover all sorts of topics here. If you want to send in a question or talking point to be shared anonymously via Sloan, that'd be great; just scroll down to the bottom of the post for details on how.

Let's see what we have this week...

### Today's question is:

> I've been struggling with concentration a lot recently and feel like I'm not able to get my work done during normal work hours. Any ideas on how to improve my focus and ensure I get things done in a normal amount of time?   
>

Share your thoughts and let's help a fellow DEV member out! Remember to keep kind and stay classy. 💚

---

*Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous.*
What I have learned in the last project
Tags: beginners, tutorial, learning, codenewbie
Published: 2024-01-11 22:02:48

My last project is almost done, it's a Leaky Bucket algorithm with Node and Redis, and a simple front end showing requests and data. Here are a few things that I learned while building this.

First of all, it's almost impossible to build things without a list of tasks. I tried skipping a to-do list in the beginning because I thought it would be faster, but I encountered a few problems that I had to think about. Most of the problems are easy to solve, but they appear in abundance when you are very inexperienced.

**A to-do list can help you stay focused on what matters most.**

The second thing that I really learned is how easy it is to use tools when they are very well documented. Good documentation can be a real game-changer when choosing technologies to use. If the technology is poorly documented, no matter how good it is, at the end of the day, you want to choose the simplest and well-documented tech.

**The most valuable weapon is the one that you can use**

The third and last, but not least, is the importance of writing down what you have learned. Programming is not easy; it starts to become easy because you have practiced so many times. Writing can help you solidify that practice. You can write the same code three times or write it once and create a text explaining how and why you have done it. When you explain what you have done, you are learning more, because explaining something is the ultimate level of acquiring knowledge. If you don't know how to explain something, you really don't know that thing, you only kinda know.

**You only really know when you can explain. If you don't explain, you kinda know.**