teleren/devto huggingface dataset:
Django SaaS Boilerplate - Speed up your SaaS development
Tags: django, saas, djangosaas, opensource
Published: 2024-06-29 16:45:57

OooH! You just spent months building the core part of your SaaS and you're exhausted, right? Building a SaaS (Software as a Service) project can be both exciting and challenging, whether you're about to launch your first SaaS product or this is your nth product launch.

Creating a compelling and responsive page, an effective contact page, a smooth signup process, and payment integration are all crucial elements for your SaaS success. Tackling these components from scratch can be daunting, time-consuming, and prone to errors. 

At the end of the day, you customers are not going to care whether you used [boilerplate](https://templates.foxcraft.tech/blog/b/what-are-website-boilerplates) or if you have followed specific coding process. They only care if your product can ease their pain. 

To make it simpler to launch your SaaS product, I have put together a SaaS boilerplate, to make it easier for your to launch.

You can check the full [Django Saas Boilerplate](https://github.com/PaulleDemon/Django-SAAS-Boilerplate) on Github 

You can check out the [saas demo website](https://django-saas-boilerplate.vercel.app/)

## Features of the Django Saas Boilerplate include
* **Production Ready**: Ready for deployment, comes with configuration for production. Start deploying to Railway.app, Vercel.com, render.com etc.

<br>
* **Responsive Designs**: Forget about starting tempting from scratch, get started with responsive designs.

<br>
* **Pricing page**: Start adding your pricing plans

<br>
* **Payment integration**: Default Stripe integration, just add your stripe keys and get started

<br>
* Custom user model.

<br>
* **Signup Flow**: Login and Signup flow, including, verification email, resend token, password reset.

<br>
* **Landing page**: Comes with landing page that can be modified to your needs.

<br>
* Contact us page: Contact us model and page for customers to contact and send enquiries.
<br>
* **Blogs with WYSIWYG editor**: Provide an easy to use interface for your clients to write blogs. Comes with Trix editor integrated into the admin panel.

<br>
* **404 Page**: comes with a 404 page template.

<br>
* **Tailwind css**: Comes with Tailwind css setup for rapid development.

You can read all the features [here](https://github.com/PaulleDemon/Django-SAAS-Boilerplate?tab=readme-ov-file#what-features-does-django-template-include)

## How to use Django SaaS template?
* First start by cloning the repository
* Install Python3.8 or higher
* Install the requirements using `pip install -r requirements.txt`
* Migrate using `python manage.py migrate`
* Run server Using `python manage.py runserver`
* Now go to http://localhost:8000, to see the live site.

Link to repository: https://github.com/PaulleDemon/Django-SAAS-Boilerplate

If you have question or need help, just drop a comment. If you found it useful, make sure to share.
Understanding getElementById
Published: 2024-06-29 16:45:08

The `getElementById` method is a fundamental JavaScript function used to select a single HTML element by its id attribute. It returns the element object representing the element whose id property matches the specified string.

### Example Usage:

Let's say you have the following HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="script.js"></script>
</body>
</html>

```

In your `script.js` file, you can use `getElementById` to select the `div` and manipulate it:

```jsx
const root = document.getElementById("root");
const Heading = document.createElement("h1");
Heading.innerHTML = "Hello World";
root.appendChild(Heading);

```

When you open your HTML file in a browser, the `div` with the id `root` will now contain an `h1` element with the text "Hello World".
Creating and Appending a Heading in JavaScript
Tags: javascript, beginners, tutorial
Published: 2024-06-29 16:43:49



In this blog post, we'll cover the basics of creating a heading element using JavaScript and how to append it to an existing element in your HTML document. This is a fundamental skill for manipulating the DOM (Document Object Model) and dynamically updating the content of your web pages.

## Creating a Heading Element with JavaScript

First, let's create a heading element using JavaScript. We'll use the `document.createElement` method to create an `h1` element and then set its content using `innerHTML`.

Here's how you can do it:

```jsx
const Heading = document.createElement("h1");
Heading.innerHTML = "Hello World";

```

### Explanation:

- `document.createElement("h1")`: This method creates an `h1` element.
- `Heading.innerHTML = "Hello World"`: This line sets the inner HTML of the `h1` element to "Hello World".

## Appending the Heading to the Root Element

Now that we've created our heading element, we need to append it to a specific part of our HTML document. Let's assume we have a `div` element with the id `root` in our HTML. We'll use the `getElementById` method to select this element and then append our heading to it using `appendChild`.

Here's the complete code:

```jsx
const root = document.getElementById("root");
root.appendChild(Heading);

```

### Explanation:

- `document.getElementById("root")`: This method retrieves the element with the id `root`.
- `root.appendChild(Heading)`: This line appends our heading element to the `root` element.

By executing this code, the "Hello World" heading will be inserted into the `div` with the id `root`.
Throw Away your Code!
Tags: webdev, programming, productivity, development
Published: 2024-06-29 16:42:39

Uncle Bob says “Software should be \"soft\" or easily changeable, unlike \"hard\" hardware.”.

And what’s more easily changeable than a code that can easily be deleted?

## Low Stakes Coding: REPL

A REPL or some playground is something amazing for that.

Do you want to just play around with the syntax and methods? REPL!

While console REPL is nice, some languages have more features and niceties than others. 

Languages like Python and Javascript make it so easy it amazes me how some people depend on debuggers and console prints for simple prototyping inside a feature.

In Python, you can just pop a notebook and have the same experience as you would normally have, one piece of code at a time, autocompletion, and all.

For Javascript, you can just open the browser console. But an even better way is using an extension like [Quokka](https://quokkajs.com/) that even in the free version already helps a lot to quickly verify if what you want to do will work or not.

## How to do it? Input + Output

You have the input, you know what you need as output. All you need to do is go from A to B.

When using the REPL, you don’t need to care about edge cases or even having everything perfectly as the actual code.

You just need the bare minimum to validate that from A you can get B.

## Throw away the code

Now, the fun part…

You get what you learned in the REPL, not copy-paste.

You do it again, from “zero”. But now in your code.

And then… delete what you’ve made in the REPL.

## Be promiscuous with code

The code is not sacred, it’s probably not even that good in the first stages…

Just code and delete it as soon as it’s not helping you anymore and make more code to replace it.

We are all at fault for commenting code because “what if I need it?”.

But…

## Old code just drags you down!

The code you commented will just drag you down.

You might think that “you might need it”, but instead it becomes an anchor that makes you unable to find a better solution.

So delete it and be free to explore new solutions.
Telegram Mini App Development: Enhancing the Memory Game with Card Upgrades
Tags: webdev, javascript, api, vue
Published: 2024-06-29 16:33:19

In my previous article on [creating a brain mining mini-game bot on Telegram](https://dev.to/king_triton/creating-a-brain-mining-mini-game-bot-on-telegram-38fp), I introduced a fun memory game where players earn "brains" to advance through knowledge levels represented as cards. Building on that, I've now implemented a comprehensive card system that allows players to purchase and upgrade their cards for enhanced gameplay.

## Implementing the Card System
The card system is pivotal to the game's progression mechanics. Here's a breakdown of its key features:

1) Card Representation and Initialization

- Each card represents a different field of knowledge: Programming, Design, and Data Analysis.
- Cards are initialized with multiple levels, each level offering enhanced benefits at an increasing cost.

2) Shopping for Cards

- Players can spend their accumulated brains to buy new cards from the shop.
- Each card starts at Level 1 with basic knowledge and can be upgraded to higher levels for greater benefits.

3) Upgrading Cards

- Upgrading cards unlocks advanced knowledge and abilities.
- Higher levels require more brains, reflecting the complexity and depth of understanding achieved.

4) Persistent Storage with Telegram CloudStorage

- Using Telegram's CloudStorage API, player scores and card levels are securely stored.
- This ensures that progress is saved across sessions and devices, providing a seamless gaming experience.

## Future Plans and Collaboration
I'm excited about the potential of this game and bot. If this article receives 5 reactions on Dev.to, I'll release the full source code of both the game and the bot ([@MmrGameBot](https://t.me/MmrGameBot)) on GitHub. Stay tuned for more updates and feel free to reach out to me on [Telegram](https://t.me/king_triton) for any questions or feedback!

_Let's continue to explore the endless possibilities of Telegram Mini Apps together!_
Reactjs or Vuejs
Tags: react, vue, javascript, webdev
Published: 2024-06-29 16:32:44

JavaScript is an Object-oriented programming language and is the main language for creating a website. 

JavaScript have a large ecosystem and has a lot of frameworks/libraries, two of the most popular ones are **React** and **Vue**.

In this blog we'll be comparing the two frameworks.

**Similarities:**
- Both React and Vue have an active, large community and lots of third-party libraries. 
- Both React and Vue are SPA (Single Page Application).
- Both frameworks support component-based approach, where application are built using small, reusable component.
- Both React and Vue supports two-way data-binding, where changes to the application state automatically update the UI, and user input updates the application state.

**Differences:**
- **Template Syntax:** React makes use of JSX while Vue uses HTML Template. 
- **Ecosystem:** React has a larger ecosystem compare to Vue as React is backed by Facebook.
- **Learning Curve:** React has a steeper learning as it requires you to learn JSX and state management tools like Redux, Zustand etc. while Vue is usually considered easier to learn as it follow a traditional way of separating HTML, CSS and JavaScript. 
- **Performance:** Vue is considered to be faster due to its efficient virtual DOM
- **Tooling:** React has a more extensive ecosystem of third-party tools and libraries, while Vue has more built-in functionality and a more balanced combination of third-party and first-party tools.

**Conclusion**
Therefore, picking either React or Vue depends on individual choice or project requirement. 

I'm so excited to be part of HNG11 intern and look forward to be one of the finalist. 

You can join by registering on [https://hng.tech/internship](https://hng.tech/internship) or premium subscription on [https://hng.tech/premium](https://hng.tech/premium)
Refactoring Nuxt Token Authentication Module to Use Nitro's Default db0 Layer
Tags: nuxt, nitro
Published: 2024-06-29 16:31:22

Recently, I refactored my [Nuxt Token Authentication](https://github.com/rrd108/nuxt-token-authentication) module to utilize Nitro's default `db0` layer instead of Prisma. The transition was relatively smooth, though I encountered a few undocumented or not clearly documented aspects along the way. Here's a rundown of my experience to hopefully save you some time.

## Initial Struggle
According to the Nitro documentation, you can use an object for the `database` in the `nuxt.config.ts` file. However, at the time of writing, this is not fully supported. Only a boolean value is accepted, which took some troubleshooting to uncover.

### Configuration Example
Instead of this:

```javascript
export default defineNuxtConfig({
  nitro: {
    experimental: {
      database: {
        driver: 'sqlite',
        options: {
          // name: 'something', path: '/some/path'
        }
      }
    }
  }
})
```

You should use:

```javascript
export default defineNuxtConfig({
  nitro: {
    experimantal: {
      database: true // this is the correct setup currently
    }
  }
})
```

## Database Connection Issues
I initially faced issues with my app not being able to communicate with the prepared database. The error messages were misleading, complaining about a missing `users` table, what I already created. After some digging, I discovered that if the database does not exist at the default path `/.data/db.sqlite3`, Nitro *silently* creates it.

```
Error: SQLITE_ERROR: no such table: users
```

This error suggests a missing table, but the root cause was I tried to use a database in a non default path and name.

## Auto-import Issues

Another hiccup I encountered was with `useDatabase()`. While it worked at runtime without issues, TypeScript could not find it, causing type errors. This auto-import problem can be a bit annoying during development.

```typescript
// UseDatabase usage
const db = useDatabase();
```

```
TypeScript error: Cannot find name 'useDatabase'.ts(2304)
``` 

I did not found a solution yet to this problem.

## A Known Issue with Table Names and Fields

A known issue with `db0` is that table names and fields cannot be used without curly braces {}. This is tracked in [GitHub issue #77](https://github.com/unjs/db0/issues/77).

```typescript
// incorrect, errors out
const { rows } =
      await db.sql`SELECT * FROM ${options.authTable} WHERE ${options.tokenField} = ${strippedToken} LIMIT 1`;

// correct
const { rows } =
      await db.sql`SELECT * FROM {${options.authTable}} WHERE {${options.tokenField}} = ${strippedToken} LIMIT 1`;
```

## Conclusion
Switching to Nitro's `db0` layer was a valuable learning experience. Despite the challenges with documentation and some minor bugs, the process was fairly straightforward. I hope sharing these insights can help other developers transition smoothly and avoid some of the pitfalls I encountered.

Feel free to leave comments or ask questions if you run into any issues or have further tips to share!

Let's slap into the code!
My First Attempt at Backend Development
Tags: backend, backenddevelopment, python, hnginternship
Published: 2024-06-29 16:29:33

I've always loved logical thinking, so I wasn't exactly surprised that I was drawn to programming. As with most beginners, I started with frontend programming, and while it's nice and interesting in its own way, it didn't really appeal to me. You know, all I seemed to do was design stuff with code. Eventually, I got to know about backend programming, where all the logic takes place and I fell in love immediately. Even though that's the case, I haven't exactly had the chance to delve into it properly.


However, a few months ago, I had to try my hands at it for a school project. What I had to do was relatively simple: Develop a REST API that performs CRUD operations on a MySQL database which stores stock data. It was a straightforward task, but there was one very slight problem; I had no idea how to go about it. Here's what I did to work around the problem:

1. First, I made research on what Python framework would be best for me to use. I came up with a shortlist of about 5 frameworks, but after comparing and contrasting, I decided on Flask
2. After deciding, I had to overcome the learning curve. YouTube proved indispensable. I got the basics down in a week, and then I got to work
3. I also learned how to connect a flask app to an SQL database. Thankfully, I had taken a course on database design and management, so I could handle the database itself.


And so I completed the project, getting a distinction while I was at it.


As I made progress on the project,  I came to a realization all over again (a realization I was always reminded of in school): _**as long as you're open to learning, then you can carry out any task, no matter how unfamiliar and challenging it seems at first**_.


I've come across an [internship program](hng.tech/internship) organized by HNG. It's an 8-week training boot camp that is not for beginners. However, that doesn't mean you can't try it out as a beginner. I'm excited and I feel up to the challenge. 


Remember that realization I got? That was one my motivating factors in applying for HNG internship. The second motivating factor was the fact that the HNG internship is task based, so no one is spoon-feeding you. I do not have much knowledge on backend development, but with the multiple projects I will have to carry out, I'm sure to become a well-rounded backend developer. I'm really excited to take on this challenge.


I really look forward to starting, and if you love a challenge like I do, then come join me.


_PS: If you're a beginner and you're scared, you can pay for [HNG premium](hng.tech/premium) at an incredibly affordable rate. You'd have many resources to take you through._
how to use inline, internal, and external CSS in HTML
Tags: programming, beginners, html, css
Published: 2024-06-29 16:28:27

**1.Inline CSS:**
Inline `CSS` is applied directly to `HTML` elements using the `style `attribute. 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
</head>
<body>
    <h1 style="color: blue; text-transform: uppercase;">Sudhanshu Developer</h1>
    <p style="font-size: 16px; color: gray;">This is an example of inline CSS.</p>
</body>
</html>

```
**2.Internal CSS:**
Internal CSS is defined within a `<style>` tag inside the `<head>` section of the `HTML` file 📂.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>
    <style>
        h1 {
            color: green;
            text-transform: uppercase;
        }
        p {
            font-size: 18px;
            color: darkgray;
        }
    </style>
</head>
<body>
    <h1>Sudhanshu Developer</h1>
    <p>This is an example of internal CSS.</p>
</body>
</html>

```
**3.External CSS:**
First Create the `style.css` file write the required `CSS` code in this file and link the `<link rel="stylesheet" href="styles.css">` file in the `index.html` document By Using the `<link>` tag.


```
/* styles.css */
h1 {
    color: red;
    text-transform: uppercase;
}
p {
    font-size: 20px;
    color: darkblue;
}

```
`index.html:`

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudhanshu Developer</title>

<link rel="stylesheet" href="styles.css"> 

</head>
<body>
    <h1>Sudhanshu Developer</h1>
    <p>This is an example of external CSS.</p>
</body>
</html>

```
Title: Create a Stunning Sliding Login and Registration Form with HTML, CSS, and JavaScript 🚀
Tags: html, css, javascript, coding
Published: 2024-06-29 16:27:27

### Introduction
Hey developers! 👋 Are you looking to add a sleek, modern login and registration form to your web projects? Look no further! In this tutorial, we'll dive into creating a **Sliding Login and Registration Form** using HTML, CSS, and JavaScript. This dynamic form provides a seamless and interactive user experience, perfect for any modern web application.

### Watch the Full Tutorial
Check out my YouTube video for a step-by-step guide on how to create this stunning sliding form:


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

📺 **Watch the video here:** [Create a Sliding Login and Registration Form](https://youtu.be/BoKrOaJhUwI)

🔔 **Subscribe for more quick tutorials on web development:** [DevDive With Dipak](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1)

### Why You Should Watch
- Learn how to apply modern web design principles.
- Step-by-step guide to creating a sliding login and registration form.
- Enhance your web development skills with practical examples.
- Perfect for both beginners and experienced developers looking to add a sleek form to their projects.

### Key Highlights
1. **Introduction to the Sliding Form Design** ✨
2. **HTML Structure for the Form** 📄
3. **CSS Styling for the Sliding Effect** 🎨
4. **JavaScript for Interactivity** 💻
5. **Real-time Coding and Output** ⏱️


### Follow devDive with Dipak
Stay updated with more tutorials and coding tips by following me on:
- **Instagram**: [devdivewithdipak](https://www.instagram.com/devdivewithdipak)
- **Website**: [Dipak Ahirav] (https://www.dipakahirav.com)
- **Email**: dipaksahirav@gmail.com
- **YouTube**: [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1
)
- **LinkedIn**: [Dipak Ahirav](https://www.linkedin.com/in/dipak-ahirav-606bba128)

### Conclusion
Don't miss out on this opportunity to enhance your web development skills with this quick and informative tutorial. Whether you're a beginner or an experienced developer, this video will help you create a professional sliding login and registration form in no time.


Happy coding! 🚀
Working with Spring Security Oauth
Published: 2024-06-29 16:15:19

The last backend task I really struggled with was integrating Oauth in a java springboot application. 
You know how you want to sign up on an application and you see the option where you can login with google, or facebook, or github yeah? Yes, that was what I was trying to achieve. Funny enough, Spring boot has quite the robust library for that. 
However, my issue what that I was trying to customize it to my need as much as possible. What was my need?
A little background about the application. 
Security on this app was boostrapped with Spring-Security, with JWT security for the endpoints. Specifically, the Oauth application I was trying to use in Google’s, and as with most, I needed to configure a redirect link for when authentication was successful on google’e end. Naturally, I thought to route it to the app’s homepage. had it routed to the app’s homepage. 
However, from the homepage, I needed to make a call to backend, to an endpoint that required token access. But, since I have outsourced the authentication process to Google, I could not possibly give an access to the user intending to login, since they are not doing so with my backend’s /login endpoint. 
How did I resolve this? Well, I had to do most of the heavy lifting on the frontend. Soon as the user successfully verifies with google, it routes to a redirect page that makes a backend call, checking if the user’s mail (which I retrieved from Google’s Oauth BioData), has already been registered in my DB. If yes,  I assigned a token, and then automatically redirect to frontend, where they can now continue business as normal. Otherwise, they are forwarded to a sign up page - where they also have the option of speeding things up with Google oauth. 

I kid you not, I spent days on this. I was amateur, and most of the spring material I was trying to use didnt account for situations where the dev might want to customize the oauth flow to suit specific use cases. 

Well, I have recently just started the [HNG internship](https://hng.tech/internship,), and I hope I come out of it a much better problem solver. Looking forward to doing dope things, with the other brilliant people. If a career in tech interests you in any way, you can look out for them [here](https://hng.tech/internship,).