teleren/devto huggingface dataset:
Creating a Vue Application with CDN setup
Tags: beginners, frontend, vue, javascript
Published: 2023-12-18 20:49:06

Vue.js isn't called "The progressive JavaScript Framework" for nothing. They are called that because you don't need to install a lot of npm packages and recreate your entire project in a new framework. If you have an existing website and need to add some interactive features to it, just add the Vue.js by `script` tag and use it in your page. How to do that? Let's see in this post.

---

Using Vue from a CDN (Content Delivery Network) means that instead of downloading and hosting the Vue.js library on your server, you include it in your web project by linking to a version hosted on a CDN. This technique offers several advantages for vanilla web projects that want to add more complex user interfaces or modernize their code. Furthermore, another reason for using this method:

- **Speed and Performance:** CDNs are optimized for delivering content efficiently. They often have servers all over the world, ensuring that your users download Vue.js from a location close to them, reducing load times.

- **Ease of Use:** It's straightforward to include Vue in your project. You just need to add a `<script>` tag in your HTML file that points to the Vue.js CDN link.

- **No Installation Required:** There's no need to install Vue using npm or yarn, which can be beneficial for small projects or for learning purposes.  

However, there are also downsides to using a CDN:

- **Reliance on external service:** Your project's functionality might be compromised if the CDN goes down or has issues.

- **Limited control:** You have less control over the version of Vue being used, unless you specify a particular version in the CDN link.

- **Not Ideal for larger projects:** It's often better to install Vue locally to have more control over the environment and to use Vue's powerful development tools.

To use Vue from a CDN, just add a `script` tag with they `src` pointed to URL where is located the Vue.js file:

```html
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <div id="app">{{ message }}</div>

  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Hello vue!')
        return {
          message
        }
      }
    }).mount('#app')
  </script>
```

The example above adds Vue to the project and creates a hello world app to validate if the framework as imported successfully.

### Concluding 

In conclusion, using Vue.js via a CDN is a convenient and efficient way to modernize an existing web project or to add interactive features without the complexities of a full framework installation. By adding just a few lines of code, you can significantly enhance your web application, making Vue.js a versatile and accessible tool for web developers of all skill levels. 

In the next post, we'll explore the Hello World example and understand every aspect of this coding. See you there!
Mastering Full-Stack app | Spotify Clone Project with NodeJS, ExpressJS, EJS, CSS, Authentication with @codewithsadee
Tags: node, fullstack, tutorial, css
Published: 2023-12-18 20:45:59

{% youtube Ms5Uhj87XsE %}

Embark on an immersive journey into the world of full-stack development by building a fully functional Spotify clone from scratch. This comprehensive tutorial will equip you with the essential skills and knowledge to master both front-end and back-end technologies, empowering you to create sophisticated web applications.

Throughout this project, you'll gain hands-on experience with NodeJS, ExpressJS, EJS, CSS, and authentication mechanisms, enabling you to confidently tackle complex full-stack development challenges. We'll cover everything from setting up the development environment to implementing user authentication, and creating a dynamic and responsive user interface.

By the end of this tutorial, you'll have not only built a stunning Spotify clone but also mastered the art of full-stack development. You'll be equipped with the ability to design and develop web applications with confidence, opening doors to exciting career opportunities.

This tutorial is designed for both beginners and intermediate developers who are eager to enhance their full-stack development skills. Whether you're a novice programmer or a seasoned developer looking to expand your expertise, this comprehensive guide will provide you with the knowledge and tools you need to excel in the world of full-stack web development.

Join me on this exciting journey and master the art of full-stack development by building a remarkable Spotify clone project.

⏱️ Timestamps
0:00 - Demo
13:17 - Project initial
18:39 - Login
1:01:46 - User authentication
1:53:05 - Home
5:46:02 - Working with player
6:52:40 - Home media queries
8:04:47 - Explore
8:26:30 - Explore media queries
8:28:58 - Pagination
8:41:14 - Explore detail
8:58:02 - Album
9:08:52 - Album detail
10:04:20 - Album detail media queries
10:10:34 - Playlist
10:18:28 - Playlist detail
10:32:02 - Playlist detail media queries
10:34:26 - Profile
11:23:19 - Search
12:33:00 - Artist
13:06:09 - Track
13:52:57 - Track media queries
13:55:14 - Logout
13:58:57 - 404
14:04:55 - 404 media queries
Most Meaningful Jobs
Tags: career, discuss, learning, coding
Published: 2023-12-18 20:27:11

What are the most meaningful professions in the world? I thought every person is motivated differently and the most meaningful profession for each person is going to be different. First I will start by telling what I think is the most meaningful job for me and then I hope you all tell us what would be the most meaningful profession for you in the comments! I am doing this as an exercise so that we can at least realize if we are on the right path or not. Because more often than not, the career that we are in because we need the money or something that society convinced us to do. Let's start!
I think the most fulfilling career for me would be one where:

- I am directly able to see the impact that I am bringing to people.
- I am able to grow myself or the work that I am doing is building my brand.
- I am communicating with people at least once in a while.
- I am able to easily do the tasks that are required of me.

The kind of jobs which I think would suit this description are:

- Professor
- Lawyer
- Teacher
- Psychologist
- Freelancer

I have tried to list professions which are at least somewhat achievable for me at this point. 

What profession would be the most meaningful for you? Let us know in the comments!
Raw Searching: Efficient MongoDB Search in Node.js: Using Dynamic Queries
Published: 2023-12-18 20:24:26

```ts
// query = req.body
let searchTerm = '';
  if (query?.searchTerm) {
    searchTerm = query?.searchTerm;
  }

  const result = await Student.find({
    $or: ['email', 'name.firstName', 'presentAddress'].map((field) => ({
      [field]: { $regex: searchTerm, $options: 'i' },
    })),
  })
```
ergo keyboards
Published: 2023-12-18 20:18:17

### Context
Im a computer science student and I dont currently use ergo keyboards but I am curios about them and what benifits that they can actually bring. 

#### Learning about Ergo keyboards
I have watched sevral videos on the topic being the primagean, hippyo tech, dygma Lab, and If coidng were natural. from what I have seen about ergo keyboards is roughly two things. 

#### Point 1 
I think ive noticed is that people who them regulalry are usally treating a pre-existing conditon like RSI(reapetive Strain Injury) or are aware of it happening to them due to the way that work so they are trying to minimise it from happening and so they activley benifit from using these type of keyboards. So when people see such a keyboard and dont really fall in to these two categories they kind look at them and say "well why would you use those they look so weird."

Which in fairness they do look bit a werid. With them looking werid makes you kind of question why you should get one, because for me at least I find it hard to give them a chance cause i dont really want to suck at typing again after trying so hard to get good with the normal layout of keyboards at Im still not there. 

#### Point 2

They are expensive. Im not really sure why they cost so much normaly, but as i learning about them i understood why its cause its such a small market i think or at least a niche one cause the people who normally use ergo keyboards from my perspective are people who are in tech that tend to use these keyboards. SO i think thats one more reason why people aren't really willing to try it cause its cost more than a normal keyboard you could. 

### Thoughts
 I think that ergo keyboards are good for certain use cases, but i find it hard to give them a chance when i can't really find a budget keyboard to try. If anyone has a recommendation for me that would be great.
View your local React App on your phone.
Tags: webdev, javascript, programming, tutorial
Published: 2023-12-18 20:15:00

Have you ever faced a problem while making your site responsive for small mobile device? Yeah chrome web tools were great but sometimes they are not enough. Sometimes we want how it actually looks like on my device.

So here is you do it!

### Step 1 :

Make sure your laptop/PC and phone connected to a same network. If you are using your phone's hotspot then it gonna work fine.

### Step 2 :

In your terminal run your development server with some aditional arguements.

```bash
npm run dev --  --host
```


![img1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyd1ac1i8cy2uphvo7gs.png)

### Step 3:

Then you should got something like this in your terminal :

![img2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7v5rxahgnlwm7yydfjm.png)

Copy the 2nd Network of the terminal and paste it in your phone's browser.

**And done! Enjoy the show!!!!!!!!**

> If the 2nd address doesn't workout try with 1st one.

**Thanks for reading**

### [My Github](https://github.com/vivek09thakur)
Simple decorator to retry after exception
Tags: python, decorator, exception, requests
Published: 2023-12-18 19:30:29

Typical situation: you have unreliable function, for example, doing HTTP requests and getting exception from time to time. Maybe connection went down temporary or 429 Too Many requests problem, or remote service itself is temporary broken. 

One simple decorator solves problem:
```python
import functools

def retry(num_times=1):
    def decorator_repeat(func):
        @functools.wraps(func)
        def wrapper_repeat(*args, **kwargs):
            last_exception = None
            for n in range(num_times):
                try:
                    r = func(*args, **kwargs)
                except Exception as e:
                    last_exception = e
                    # handle exception. log it or just pass
                    print(f"Try #{n} got exception {e}, but we will retry")
                else:
                    return r
            raise last_exception
        return wrapper_repeat
    return decorator_repeat

```

Lets use it with requests:
```python
import requests

@retry(10)
def myhttp():
    r = requests.get('https://httpbin.org/status/200,500,429')
    r.raise_for_status()
    print(r.status_code)

myhttp()
```

Results:
```
Try #0 got exception 429 Client Error: TOO MANY REQUESTS for url: https://httpbin.org/status/200,500,429, but we will retry
Try #1 got exception 500 Server Error: INTERNAL SERVER ERROR for url: https://httpbin.org/status/200,500,429, but we will retry
Try #2 got exception 500 Server Error: INTERNAL SERVER ERROR for url: https://httpbin.org/status/200,500,429, but we will retry
200
```

This way you are immune against temporary problems which could be solved by retry (maybe with `time.sleep(10)`) but you will still get exception from long-time problems. Change URL in `myhttp()` to https://httpbin.org/status/500 to see this.
✔9 Tricks For Enhancing JavaScript Code Readability and Efficiency
Tags: javascript, coding, programming, computerscience
Published: 2023-12-18 19:28:48

###1. The Ternary Operator:
```javascript
// ❌ Not-so-good
let hungry = true;
let eat;
if (hungry === true) {
   eat = 'yes';
} else {
   eat = 'no';
}

// ✅ BETTER
let hungry = true;
let eat = hungry === true ? 'yes' : 'no';
```

Utilizing the ternary operator enhances code conciseness, making it more readable and efficient.

###2. Populating an Array:
```javascript
// ❌ Not-so-good
for(let i=0; i < arraySize; i++){
   filledArray[i] {'hello' : 'goodbye'};
}

// ✅ BETTER
let filledArray = new Array(4).fill(null).map(()=> ({'hello' : 'goodbye'}));
console.log(filledArray);
```
Leveraging array methods like `fill` and `map` provides a cleaner and more idiomatic approach to array creation.

###3. Dynamic Properties in Objects:
```javascript
// ❌ Not-so-good
let dynamic = "value"; 
let user = {
     id: 1,
};
user[dynamic] = "other value";

// ✅ BETTER
let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic]: "other value"
};
```
Embracing computed property names enhances code expressiveness and maintains clarity.

###4. Array to Object:
```javascript
// ❌ Not-so-good
let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

// ✅ BETTER
let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

// Output: { '0': 'value1', '1': 'value2', '2': 'value3' }
```
Using the spread operator simplifies the process of converting an array to an object.

###5. Short Circuit Conditionals:**
```javascript
// ❌ Not-so-good
if (docs) {
    goToDocs();
}

// ✅ BETTER
docs && goToDocs();
```
Short-circuiting provides a concise way to handle conditional execution based on truthy values.

###6.Object keys are stored in insertion order
```javascript
const obj = {
  name: "Rahul", 
  age: 16, 
  address: "Earth", 
  profession: "Developer", 
}; 
```
console.log(Object.keys(obj)); // name, age, address, profession

###7.Check if value is an array
```javascript
const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true
```
###8.Difference between double equal and triple equal
```javascript
// Double equal - Converts both the operands to the same type and then comapares
console.log(0 == '0'); // true

// Triple Equal - Does not convert t same type
console.log(0 === '0'); // false
```
###9.Truthy and False values
```javascript
False values => false, 0, ""(empty string), null, undefined, &NaN.

Truthy values => "Values", "0", {}(empty object), &[](empty array)
```

Enhance your JavaScript coding style by incorporating these practices for improved readability and efficiency. #JavaScript #CodingTips #WebDevelopment
AppError UnhandledRejection _ UncaughtException
Tags: webdev, programming, beginners, tutorial
Published: 2023-12-18 19:21:59

```ts
///src/app.ts
const test = async (req: Request, res: Response) => {
  Promise.reject();
  // res.send('Hello PH UNIVERSTIY');
};

```

```ts
//src/server.ts
process.on('unhandledRejection', () => {
  console.log(`😈 unahandledRejection is detected , shutting down ...`);
  if (server) {
    server.close(() => {
      process.exit(1);
    });
  }
  process.exit(1);
});

process.on('uncaughtException', () => {
  console.log(`😈 uncaughtException is detected , shutting down ...`);
  process.exit(1);
});
```
Why Browser Extensions Are Ideal for Beginner Developers and Indiepreneurs
Tags: webdev, javascript, beginners
Published: 2023-12-18 19:21:23

I noticed several threads here about side hustles for developers. While they provide a broad overview of available opportunities, I'd like to focus on a specific one - browser extensions!

Browser extensions stand out as the perfect undertaking for beginner developers and indiepreneurs, offering a host of advantages that facilitate both learning and entrepreneurial pursuits.

Here are three reasons:

**1. Well-Documented Google Chrome Platform and Easy Scalability**
Google Chrome, one of the most widely used web browsers, has a robust and well-documented extension development platform. For beginners, this means a wide range of accessible resources and guides to navigate through the process of creating extensions. What's even more enticing is the ease of scalability – once you've mastered the creation for Chrome, extending your project to other browsers becomes a straightforward endeavor.

**2. Basic JavaScript Knowledge Suffices**
The beauty of browser extensions lies in their simplicity, particularly in terms of the required programming skills. If you have a grasp of JS concepts like functions, event listeners, and DOM manipulation, you possess the foundation needed to hop on extension development. This low entry barrier empowers beginners to apply their existing knowledge to product crafting. Also, it's worth mentioning that for deploying an extension, the only thing you need to do is zip your files. If you're unfamiliar (which is absolutely fine on the beginner level) with hosting, PaaS, containerization, this won't be an obstacle.

**3. Chrome Web Store Listings: A Traffic Magnet without a Website**
Unlike many other software projects, building a website is not a prerequisite. The Chrome Web Store acts as a ready-made platform where developers can showcase their extensions directly to potential users. By optimizing your listing, you can capture organic traffic and engage with users without the need to invest in a separate website.

If I have piqued your interest, take a look at my post about [building extensions with ChatGPT](https://dev.to/mazault/build-an-app-with-chatgpt-is-it-real-4oip) - a ChatGPT prompts cheatsheet is attached!
Understanding JWT Token in Spring Boot Security with Chat GPT AI
Tags: ai, springboot, java, coding
Published: 2023-12-18 19:13:52


🚨 Tech Deep Dive:  Spring Boot Security with JWTs - A Must for Developers with Chat GPT-4 Prompts

> We cannot fight against AI for long but we can utilise to get the best out of it, so enjoy my new initiative of using ChatGPT-4 prompts in the comments to understand the thought process of development and content creation. Let me know if you need more topics, Starting today with JWT in Spring Boot!

https://chat.openai.com/share/fc1de031-bc62-490a-9359-398497c1cecb


🔍 JWT in the Limelight: Why It's a Game-Changer for Spring Boot- 

- Stateless Authentication: JWTs eliminate server-side storage of authentication tokens, reducing server load and enhancing scalability.

- Compact and Self-contained: JWTs encapsulate user identity and claims in a compact JSON format, making them ideal for passing information between services.



🔧 Integrating JWT with Spring Boot: A Technical Walkthrough

Step 1: Security Configuration: Utilize Spring Security to set up a JWT-based authentication mechanism. This includes configuring a `WebSecurityConfigurerAdapter` to specify how security is managed.



Step 2: Custom Authentication Filter: Create a custom `JwtRequestFilter` to intercept requests. This filter should extract the JWT, validate it, and set the `SecurityContextHolder` with user details for authorized requests.

Step 3: JWT Utility Class:  Implement a utility class for generating and validating JWTs. Use libraries like `io.jsonwebtoken:jjwt` for token creation, setting claims, expiration, and signing the token with a secret key.

Step 4: Exception Handling: Handle exceptions like `ExpiredJwtException` or `MalformedJwtException` to manage token validity and integrity.



🚀 Real-World Applications and Benefits

- Microservices Authentication: JWTs are ideal for authenticating requests in a microservices architecture, ensuring each service can validate tokens independently.

- Cross-Domain Authentication:** Use JWTs to authenticate users across different domains, essential for applications with multiple front-end portals.

- Jwt tokens can help you to secure your frontend and backend both



🔐 Security Best Practices with JWT in Spring Boot

- HTTPS Enforcement: Always transmit JWTs over HTTPS to prevent token interception and ensure confidentiality.

- Strong Secret Keys:Use complex, unpredictable secret keys for signing JWTs to prevent token forgery.

- Token Expiry: Implement short-lived tokens and refresh tokens strategy to minimize the impact of a compromised token. 

- Claim-based Authorization: Utilize JWT claims to enforce fine-grained access control in your application.





Let's connect and exchange more on this topic! Share your experiences, challenges, or questions in the comments.



#SpringBoot #JWT #WebSecurity #JavaDevelopment #TechInsights #DeveloperCommunity
Project Eighteen: Threads & Trees
Tags: webdev, beginners, challenge, codingquokka
Published: 2023-12-18 19:09:43

Despite of the holiday season the trees I want to talk about today have no presents, stars or angels: instead they are representing some nested structure.

Take this thread for example:

![Nested comments and replies under article on Dev.to](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwmekm9hnna0m8db8o37.png)

That's how this page would look like when you leave a comment and I'd reply you under this article ;-)

Dev.to and literally every social media platform and most of blogs have this kind of functionality, so it'll definitely come in handy many many times.

How about implementing it today?

## Comments and Replies: requirements and recipe

> As a user I want to be able comment and reply to other commenters, so that we could keep communication going

You've already seen an example and I'm sure you have a basic idea how such a feature would look like, so let's go straing to requirements:

### Requirements

1. User should be able to submit a comment
2. User should be able to reply to a comment
3. User should be able to see both comments and replies together
4. Level of replies should be limited to a reasonable amount
5. Comments should have proper microdata
6. Form, comments and replies should be accessible

### Recipe

1. Implement static markup for a comment
2. Implement static markup for a comment with a couple of replies
3. Add form to submit a comment
4. Write logic to store comments locally
5. Add logic to submit a reply to a comment
6. Ensure that reply level is properly limited
7. Check that other requirements are met
8. Enjoy conversation with yourself!

### Hints

You can use [Schema/Comment](https://schema.org/Comment) in order to fulfil microdata requirement.

A good data structure would make it easy to store and render comments and replies: one approach could be to store both replies and comments the same way and differentiate them based on a parent comment id.

The same structure could help limit the level: when user submits a reply to an top nested reply - just set the parent comment to the grandparent instead.

## Hard Mode: File Tree

Of course, threads are fun, but trees are even better:

![File tree structure for a generic web app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fr9lxgss4f1ihdtn6qby.png)

Widely used in IDE, control panel and dashboards to represent structure of documents, pages or assets - you'll probably need them at some point. Though, unlike the comment threads folders can be nested quite deep, how can you represent any level?

Share your creations and feedback and see you tomorrow!

Liked the idea a lot and would love to have it all year long?

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/v2/default-red.png)](https://www.buymeacoffee.com/valeriavg)