teleren/devto huggingface dataset:
Why listen to relaxing music while programming
Tags: coding, programming, javascript, react
Published: 2022-12-28 22:21:50

Listening to relaxing music while programming can have several benefits. For one, it can help reduce stress and anxiety, which can be especially helpful if you're working on a challenging or deadline-sensitive project. Additionally, relaxing music can help you stay focused and reduce distractions, which can improve your productivity. It can also help create a more pleasant and enjoyable work environment, making it easier to stay motivated and engaged.

In general, music can have a powerful effect on our mood and emotions, and listening to relaxing music can help create a sense of calm and relaxation. This can be especially helpful when programming, as it can be a mentally demanding and stressful activity. By choosing relaxing music, you can create a more soothing and peaceful atmosphere that can help you stay focused and motivated.
Welcome Thread - v206
Tags: welcome
Published: 2022-12-28 21:26:53

---
title: Welcome Thread - v206
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Cartoon person hops into the frame, waves, and says hi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfl8q7ur73z61hatorqb.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
CSS is my name
Tags: css, webdev, beginners
Published: 2022-12-28 21:10:51

Hi 👋

**CSS** is my name.

My job is to style the elements of your HTML document.

Here's a glimpse of how I relate with my siblings 👇

![HTML describes data. CSS styles elements. JavaScript commands items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmccj09cmv6ua2ziy0wa.png)

[Find out more about me](https://codesweetly.com/inline-vs-internal-vs-external-css).
Updated Youtube Channel for Streaming
Published: 2022-12-28 20:50:33

---
title: Updated Youtube Channel for Streaming
published: true
date: 2022-12-28 20:43:00 UTC
tags: 
canonical_url: 
---

 [https://www.youtube.com/@FLiP-Stack](https://www.youtube.com/@FLiP-Stack)

<iframe frameborder="0" height="270" src="https://www.youtube.com/@FLiP-Stack" width="480"></iframe>
How to Add Bootstrap 4 to an Angular App
Tags: bootstrap, angular, webdev, css
Published: 2022-12-28 20:37:37

I was trying to add Bootstrap 4 to an Angular app recently and it was more difficult than I expected. We're able to add Bootstrap 4 easily using [NPM](https://www.npmjs.com/) *(Node Package Manager)*, but we still need to install and configure the scripts and dependencies. This can result in a visit to [StackOverflow](https://stackoverflow.com/) which shouldn't be necessary.

![Bootstrap and Angular](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glhaif802z3fndpyx7ve.png)

## Install Bootstrap 4

We can install the latest version of Bootstrap 4 *(at the time of writing this is **4.5.0**)* using NPM. Please adjust the version number if you require a lower or higher version:

```terminal
npm install bootstrap@4.5.0
```

## Install jQuery and Popper

According to the [getting started](https://getbootstrap.com/docs/4.5/getting-started/introduction/) guide, Bootstrap 4 requires the [jQuery](https://jquery.com/) and [Popper](https://popper.js.org/) libraries to be added as dependencies, so we'll also add these using NPM commands:

```terminal
npm install jquery@3.5.1
npm install popper.js@1.14.3
```

## Configure the Styles and Scripts

Finally, in your **angular.json** file all you need to do is reference the CSS and JavaScript files in the styles and scripts sections:

```json
"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]
```

If you have an issue with Popper not loading correctly, please check you have referenced *node_modules/popper.js/dist/umd/popper.min.js* and **not** *node_modules/popper.js/dist/popper.min.js*.
#1: Two Sum
Tags: leetcode, javascript, algorithms
Published: 2022-12-28 20:12:03

In a desperate effort to write more, I'm going to be publishing a series of posts about my solutions to some [LeetCode](https://leetcode.com/problemset/all/) practice problems. If you have input about my solutions, especially about ways to optimize, feel free to let me know in the comments!

We'll start with the first problem of the whole 2500+ problem set: Two Sum. The directives are as follows.

> Given an array of integers `nums` and an integer `target`, return indices of the two numbers such that they add up to target.

> You may assume that each input would have exactly one solution, and you may not use the same element twice.

> You can return the answer in any order.

This seems like a simple problem from the outset, and in reality it's pretty straightforward. The idea behind my algorithm is that by rotating through the `nums` array twice, we can check each value in the array with every other one and see if they sum to `target`.

Let's set up a basic structure for what our algorithm will look like.

```
loop through array (iterator 1)
   loop through array (iterator 2)
      if i1 is equal to i2 then skip the below instructions
      if nums[i1] plus nums[i2] is equal to target then return [i1, i2]
```

That's the basic idea that I took to this problem; you might have a different way of tackling it. As of right now, I'm still pondering how to remove the need for the `for` loops and coming up short. It's because of their functionality that I can check the state so easily though, so I think I'll keep them for now.

How do we implement this into JavaScript? The loops are easy enough.

```
for (let i = 0; i < nums.length; i++) {
   for (let j = 0; j < nums.length; j++) {
   }
}
```

Now then, let's add some code inside of the loops. We're checking for two things: if `i` is equal to `j` then we continue without checking the following conditional, and if `nums[i] === nums[j]` then we know that's the solution and we return `i` and `j` as an array, like the problem requests.

```
for (let i = 0; i < nums.length; i++) {
   for (let j = 0; j < nums.length; j++) {
        if (i === j) continue;
        if (nums[i] + nums[j] === target) return [i, j];
   }
}
```

And there you have it. Wrap it up in the requested function and you're done.

As always, all code is available in the [GitHub](https://github.com/jD2R/leetcode) repository.

Happy coding!
Storing the user data in our database
Published: 2022-12-28 06:36:42

Now that we have handled our routes and also written the strategy for OAuth in the [previous article](https://dev.to/chaharsumit/creating-module-for-our-github-oauth-strategy-1md5). We will now save the user information to our database. 

**Note:** We are using mongoDB and mongoose for our application.

We will create a `models folder` in our project folder and create a `User.js` file in which will be our User model and we will write the user schema in this file.

The `User.js` file will look like this - 


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

Now we will connect our local database with our application we will need to import `mongoose` connect it using `mongoose.connect` middleware

```
mongoose.connect("mongodb://localhost/sampleLogin", err => {
  console.log(err ? err : "Database connected successfully");
});
```

We also need to add a store to our session using instance of MongoStore in which we will pass the url of our local database.

```
app.use(
  session({
    secret: process.env.SECRET,
    saveUninitialized: false,
    resave: false,
    store: new MongoStore({ mongoUrl: "mongodb://localhost/sampleLogin" })
  })
);
```

The `app.js` file will appear like this now - 


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

We've also added passport.session() middleware in `app.js` which can give us information about the current logged in user in the session.

At last we should also import our User model in the `passport.js` file. To create new user.

Now by default passport uses serializeUser method to persist user data in the session. We'll use it in the next article to persist user information.

[Go to next article 👉](https://dev.to/chaharsumit/serializing-and-deserializing-our-user-data-in-passportjs-2fjd)
CodeNewbie Season 22 Episode 8! From Opera to Code with Anna McDougall
Tags: podcast, career, codenewbie
Published: 2022-12-28 19:33:54

---
title: CodeNewbie Season 22 Episode 8! From Opera to Code with Anna McDougall
published: true
description: 
tags: podcast, career, codenewbie
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xtfy8fjmtlh97o4hm5p.png
---

In S22E8 of the CodeNewbie Podcast, @saronyitbarek talks to [Anna McDougall](https://twitter.com/annajmcdougall), who was once an opera singer and is now a Director of Product and Engineering, about Anna's experience in tech and navigating the career transition from entertainment to code.

{% embed https://community.codenewbie.org/codenewbiepodcast/s22e8-from-opera-to-code-anna-mcdougall %}

Anna McDougall grew up in Sydney, Australia, and moved to Germany to pursue a career as an opera singer. At 32 she rediscovered her love for code and technology and made the switch to software engineering. She quickly discovered her mix of software and social skills made her perfect for leadership and technical speaking, and she now works as Director, Product and Engineering (Projects and Organisation) for the tech subsidiary of Europe's largest media publisher, Axel Springer National Media & Tech, based in Berlin, Germany. She is also the author of "You Belong in Tech: How to Go from Zero Programming Knowledge to Hired," and is passionate about getting historically excluded individuals into tech.

- [Listen on Apple Podcasts](https://podcasts.apple.com/us/podcast/s22-e8-from-opera-to-code-anna-mcdougall/id919219256?i=1000591514496)

- [Listen on Spotify](https://open.spotify.com/episode/2zPDm4kmrExNi5HxcT8uga?si=795f8eaeb3474ac4)

Or, listen wherever you normally get your podcasts!

***

**Make sure to subscribe to the CodeNewbie podcast if you haven't yet!**

Happy coding! We hope you enjoy this season of the CodeNewbie Podcast 💜
12 Best Free AI Content Generator & AI Writers For 2023
Tags: ai, testing, community, beginners
Published: 2022-12-28 19:31:32


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a9fio1o50v9k6lnbu7ki.png)
https://vocal.media/01/12-best-free-ai-writers-and-ai-content-generator-for-2023
Deploy your webapp in Netlify
Tags: webdev, hosting, netlify, blog
Published: 2022-12-28 17:22:54

As a developer we need to show our works to different persons for that we can not use our local server to show them.That is the time we need a platform to host our website .And hosting our website we can easily share our webapp with anyone who wants to see. Though there are a lots of hosting platform avaiable at the moment paid and free , I am gonna share the easiest one I think and Thats is Netlify .

#To host a website into netlify there are also a few paths exist and one of them is to simply drag and drop !!!! hurrah !! your website is live now .

To host a website we need some procedure to follow and it is really easy . Lets get start

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

We can not drag the whole webapp there it will take a huge space and memory . For that we need something called build or dist folder .

And we need to use the command : npm run build

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

Then you will see that a 'build' or 'dist' named folder has been created at the root of your project .

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9878ljhmj8ssu529wkw.png)
3 Now go to the netlify website and just take the 'build' or 'dist' folder from your application and just drop it here . Just wait for a few seconds and your website is live.

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


> It's always seems impossible until its done .---Nelson Mandela
CARBON:infinty
Tags: gamedev, discuss, webdev, opensource
Published: 2022-12-28 19:14:30

i am makeing a new game it is about in the future star date:4030 it is going to be like halo and star citizen i need ideas here is what i have 
you craete items with a carbon 3d printer on your wrist

you have 5000 weapons to choose and 750 ships and vehicles to make to 

that is all i got i have most of the 3d desins of all the guns and vecails what else should i do and i need lore could someone help i will give you credit
Crafting Production Observability
Tags: sre, monitoring, observability
Published: 2023-08-31 17:47:29

---
title: Crafting Production Observability
published: true
date: 2022-12-28 18:53:26 UTC
tags: sre,monitoring,observability
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/2600/1*FkYqlKBmIecZBGzOIDOFKA.jpeg)](https://augustokrosa.medium.com/crafting-production-observability-66de172becd3?source=rss-fab031e08990------2)

A Guide to Best Practices for Observation and monitoring in Production

[Continue reading on Medium »](https://augustokrosa.medium.com/crafting-production-observability-66de172becd3?source=rss-fab031e08990------2)
Media Query
Published: 2022-12-28 18:30:10

When every we open any website in mobile phone we see the view of page is different as compare to pc because to pixel is different in pc and mobile. Media query do the same thing we can change page view by just using `@medi (max width 600px) ` we have to design. till 600px page view is different (what we design). Media query is Responsive Web Design.
Box Model
Published: 2022-12-28 18:07:45

Box model is really useful because when we add height, weight, margin or padding to element than appears bigger than we set if we don't use box model. because calculation of element size is "height + padding + border =  actual height of an element" width + padding +border = actual width of element"
if we don't use box sizing than div will be bigger. but If you set `box-sizing: border-box;` on an element, padding and border are included in the width and height
FreeAirT
Tags: flask, python, beginners, webdev
Published: 2022-12-28 17:50:51

A simple video streaming site built with Python, Flask, Bootstrap and SqliteDB.

https://github.com/shreyashchavan/freeairt

Must visit and consider stars and forks if you like it.

Routes project has
/login
/register
/logout
/add_video
/add_course
/courses
/courses/<name>
/delete_video
/delete_course
/contact
And many more which are important
URI vs. URL vs. URN
Tags: webdev, beginners, programming, tutorial
Published: 2022-12-28 17:47:59

This [post was first published on my blog](https://medium.com/javascript-in-plain-english/what-are-the-differences-between-uri-url-and-urn-e0b2e05b3fee):

You may have come across these terms before. And you may have used it interchangeably. But there are differences between them and if you are a professional software developer or working in the field of web development, it’s important to discern these terms.

An URI (Uniform Resource Identifier) identifies a resource on the Internet either by location, or by name, or both. There are two subsets of URIs: The URL (Uniform Resource Locator) and the URN (Uniform Resource Name).

The URL specifies where an identified resource is located and the mechanism for retrieving it. In case of an HTTP URL it is the HTTP protocol. But the machanism for retrieving the resource, doesn’t have to be HTTP URL, i.e. “http://”, an URL can also be “ftp://” (File Transfer Protocol for computer files) or “smb://” (Server Message Block for shared access to files, printers, serial ports, and miscellaneous communications between nodes on a network).

The URN is part of a larger Internet information architecture and unambigously identifies a resource. Contrary to the URL it does not imply availability of the identified resource.

The URL is similar to a person’s address, as it defines somethings’s location, while the URN is similar to the ISBN of a book, as it unambigosly defines something’s identity. In other words: The URL answers the question Where something is while the URN answers the question Who something is.

Source(s) and for more information:
RFIC3986: http://www.ietf.org/rfc/rfc3986.txt
http://en.wikipedia.org/wiki/File_Transfer_Protocol
http://en.wikipedia.org/wiki/Server_Message_Block

Have you followed or subscribed to us, yet? We are publishing articles about JavaScript and software development in general multiple times a week. Make sure not to miss any of our great content.

More details about this and many other topics on [my blog](https://medium.com/javascript-in-plain-english/what-are-the-differences-between-uri-url-and-urn-e0b2e05b3fee)
Api call does not show in developer console (Chrome)
Published: 2022-12-28 17:36:01

Good Day Everyone , 

This is my first post in this forum , i am new to Angular. 

i have a service that i created and it is defined like this
**TrendingChannelsService.ts**

```
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'; 
```

```
@Injectable({
  providedIn: 'root'
})
export class TrendingChannelsService {

  constructor(private http:HttpClient) {} 

   GetChannels() :any
   {
      let url ="https://trovadating.com/TrovaTVApi/channels";
      
      return this.http.get<any>(url);

   }
}
```

and i have imported the http namespace in the **app.module.ts** like this 

```

import { HttpClientModule } from '@angular/common/http';
 
```
and in the imports like this 
 

```
 
  imports: [  
    BrowserModule, 
    FontAwesomeModule  ,**HttpClientModule**,
   RouterModule.forRoot(appRoutes)
  ], 
```
 
 

and in my component i am using the service like this 
**trending.component.ts**

 

```
import { TrendingChannelsService } from './services/TrendingChannelsService';
import { Component, OnInit } from '@angular/core';  
import { HttpClientModule } from '@angular/common/http';
 
@Component({
    selector: 'trending', 
    templateUrl: 'trending.component.html', 
    styleUrls:['osahan.scss','bootstrap.min.scss' ,
    'owl.carousel.scss','owl.theme.scss','live.scss','custom.scss','all.min.css' ]
})
export class trending  implements OnInit
{   
    data : any;

    constructor(private objchannel : TrendingChannelsService) 
    { 
    }
 

        ngOnInit()  
        { 
                    this.objchannel.GetChannels().subscribe((result: any)=>{
    
                      this.data = result;
    
                    console.warn("results", this.data);
                    console.log(result); 
                
             } );
     
            }
      

} 
 
```

and for some reason i dont see anything logged in the developer console, i used both .log and warn but my browser(Chrome) dont show the returned data. if you can take the URL for the service you will see it will give json data back. 


Thanks
What is Angular?
Tags: angular, javascript, womenintech
Published: 2022-12-28 17:26:58

In order to build effective and sophisticated single-page apps, developers use the Angular framework and development platform which is built on **Typescript**. The Angular Team at Google and a network of people and businesses lead the development of Angular, which is free and  an open-source web application framework.

Few Advantages of Angular are :

- Faster process of development.
- Code that can be read and tested easily.
- Effective Problem-Solving Techniques.

_Follow me on__
-   Instagram @nusy_codes
-   Twitter  @NusyCodes
new digital credential from the Cisco Networking Academy
Published: 2022-12-28 16:42:05

**Hello**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vivt56do1gnfer4tsp1.png)

> A little progress each day adds up to big results
Glad to share that I've successfully earned my very first Cisco Badge for cybersecurity.
Thank you!
Tailwind + React Native
Tags: reactnative, tailwindcss, react, css
Published: 2022-12-28 16:35:29

## 1. Create the project
Create the project with the Expo CLI

```
npx create-expo-app my-app
```

```
cd my-app
```

2. Install `tailwind` and its dependency

```
yarn add nativewind
yarn add --dev tailwindcss
```

## 2. Setup Tailwind CSS
Run `npx tailwindcss init` to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file. Remember to replace <custom directory> with the actual name of your directory e.g. screens.

```
// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

## 3. Add the Babel plugin
Modify your `babel.config.js`
```
// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
+   plugins: ["nativewind/babel"],
  };
};
```

## Code

```
import React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
   <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}


```
Node JS Intro
Tags: programming, javascript, webdev
Published: 2022-12-28 16:32:46

 
Node allows us to run JavaScript on the server side or directly on computers locally. A computer cannot directly understand JavaScript but it could be understood by the V8 engine in a browser. Node JS is written in C++.  It can take JavaScript and run it to the V8 engine that is present in Node JS and compile it to the machine code.

It adds more functionality to the JavaScript➖

→ Read and write files on the computer

→ Connect to a database

→ Act as a server for content 

but we can’t interact with DOM in Nodejs and Node JS doesn't support ES6 import directly.  

## Role of the Nodejs 

Handling requests coming from the browser. Suppose a user might interact with your website and that browser sends a request to the server. Node JS will react to those requests, it might communicate with databases or files on a server and give a response to it, it could be an Html page embedded with data, image files, etc.

## Why use Nodejs?

→ No need to learn an extra language for the server 

→ can share code between front and backend 

→ Nodejs has a massive community behind it 

→ Huge amount of third-party packages and tools to help

**_after installing_** open any text editor

create a file text.js and type 

```js:
const name = “Star”

console.log(name)
```

Now write in terminal “node text”   and Enter 

Your file will run 

if you want to check the version of your node type  

node -v

Here it is! node JS running in your system.

Reference :  net ninja(YouTube)
Cyber-physical systems and microservices: benefits and challenges
Tags: microservices, cyberphysicalsystems, opensource, luos
Published: 2022-12-28 16:30:00

💡Let's discover the **benefits** and **challenges** of using approaches like microservices to develop cyber-physical systems.

▶️[Read] (https://www.luos.io/blog/cyber-physical-systems-and-microservices-benefits-and-challenges) the article 

While **microservices** are often used for building large and complex software applications, **cyber-physical systems** are typically used for building software systems embedded in physical devices and with a direct impact on the physical world.