teleren/devto huggingface dataset:
Keep your JavaScript repository clean
Tags: tools, node, npm
Published: 2022-04-09 11:11:14

---
title: "Keep your JavaScript repository clean"
published: true
description: How we can clean up the repository root directory from config files like .eslintrc.js, tsconfig.json, jest.config.js and others.
tags:
  - tools
  - node
  - npm
cover_image: https://strdr4605.com/keep-your-java-script-repository-clean.jpg
canonical_url: https://strdr4605.com/keep-your-java-script-repository-clean
---

As your JavaScript project grows, you start adding more tools and settings that will improve the development experience.

Nowadays, tools like eslint, husky, and tests are essential for any project.

The problem is that most of these tools require a config file at the root of your project/repo.
After some time, the root directory is full of config files, and it's a bit intimidating when you open it in the git hub.

One elegant solution I found in [remirror](https://github.com/remirror/remirror) repo.
There all config files that should stay in the root of the project are actually in the `./support/root/` directory,
and they are locally symlinked when setting up the project.

Inspired by their approach I created [symlink-config](https://github.com/strdr4605/symlink-config), which helps to migrate your project to this approach.

Here is how repo looks on Github before and after:

<table>
  <thead>
  <tr>
    <th>Default</th>
    <th>With symlink-config</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="https://strdr4605.com/root-config-files-demo.png" alt="root config files demo"></td>
      <td style="display: flex;"><img src="https://strdr4605.com/root-symlink-config-files-demo.png" alt="root symlink config files demo"></td>
    </tr>
  </tbody>
</table>

This demo has only 5 configs in the root, but imagine adding more tools, like tsconfig.json, jest.config.js, and others.

When exploring the project locally, 
all these files will be in the root but being just a symlink file they will differ from the rest of the files and you may skip them visually.

In the end, I think this tool is useful for big open source projects with a lot of config files, as it cleans up the entry point of the project (the repo root) and makes it more appealing to users.

Check out [**symlink-config**](https://github.com/strdr4605/symlink-config), and let me know your opinion!
How is this function called??
Published: 2022-04-09 10:45:49

When you scroll down the a page a vertical 'progress bar' fills up showing where you are / where the project is. See image


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lzd03hmsot3rvgci2i1.jpeg)

Hi, my name is Erik. I'm building a landingpage with a roadmap in it and this would be a cool visual way to communicate.

I'm looking for information on how you call this so I can search for it.
Also if you know how this is made all info would be a great startingpoint for me. 

Kind reagrds
Ways to pass multiple classes in react!!!
Tags: react, webdev, javascript, beginners
Published: 2022-04-09 10:37:47

## By passing props

```
import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles({
    firstStyle: {
        backgroundColor: props => props.backgroundColor,
    },
    secondStyle: {
        color: props => props.color,
    },
});

const MyComponent = ({children, ...props}) =>{
    const { firstStyle, secondStyle } = useStyles(props);
    return(
        <div className={`${firstStyle} ${secondStyle}`}>
            {children}
        </div>
    )
}

export default MyComponent;
Now you can use it like:

<MyComponent color="yellow" backgroundColor="purple">
    Well done
</MyComponent>
```
[OffcialDocumentation](https://mui.com/system/styles/basics/#adapting-based-on-props)

## By clsx

```
First install it:

npm install --save clsx
Then import it in your component file:

import clsx from  'clsx';
Then use the imported function in your component:

<div className={ clsx(classes.class1, classes.class2)}>
```
[OfficialDocumentation](https://www.npmjs.com/package/clsx)
Display Huge Entity Diagram Test
Tags: codepen
Published: 2022-04-09 09:58:21

<p>Imagine an ERWIN-esk data modeler that could run in your browser. How big of a model could you have loaded up and not be bogged down? This plays around with the idea and only renders the entities that are currently within the viewport.</p>

<p>It generates test data based on the # of entities you specify. The first entity is a 'Users' table. The rest of the entities are randomly generated.</p>

<p>A little extra functionality (for now): Click on the name of the entity, and a dialog will pop up. 
- For 'Select Output For', pick 'PHP'  then either pick:
     'Class' or 'In-line Query' and see what code snippet it generates for that entity.</p>

<p>Note that for now, none of the other output options are implemented.   </p>

{% codepen https://codepen.io/harunpehlivan/pen/PoEevBo %}
Day 1: the beginning
Tags: productivity
Published: 2022-04-09 09:54:53

Hi!
Welcome!. I don't know if there will be anyone reading this or even why I'm writing this in the first place but here we go...
so basically this is supposed to be a public documentation/journal for my programming journey (funny!). I stumbled on this idea from this guy [Dwane](https://dev.to/dwane) whom he documented consistently for 500+ days and I can't even imagine how satisfying it can be reading this post 500 days from now.
Generally, I have trouble focusing and sticking to something consistently especially when I have to do it daily but I like to try things out so I'm going to give this a shot   

So the  plan here is to write every day just randomly about anything to improve my writing and skills while journaling publicly
let's how far I go before I give up or will I?

see you around...
Javascript Nesnelere Metod Nasıl Eklenir ?
Tags: javascript, webdev, beginners, programming
Published: 2022-04-09 09:43:43


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

**Metot Nedir?**

JavaScript'in referans veri tiplerinden biri olan ve Türkçede "nesne" anlamına gelen object key-value (anahtar-değer) yapı mantığına sahip bir veri tipidir. Yani bir nesne oluştururken bu nesnemiz için bir veya birden fazla property (özellik) tanımlanabilir ve key-value mantığındaki gibi nesnemizin sahip olduğu özellikler için değerler verilmelidir. 

Özelliklerin sahip olduğu değerler farklı veri tiplerinde olabileceği gibi bir fonksiyonu da işaret edebilir. Bir özellik eğer bir fonksiyonu işaret ediyorsa bu özelliğe metot denir.

Bir nesneye metot 2 şekilde eklenebilir. Bunlardan biri yukarda bahsedildiği üzere nesneye property olarak eklemek, bir diğeri ise prototype (prototip) fonksiyonu üzerinden eklemektir.

**Metotu Özellik Olarak Eklemek**
Metot, bir nesnenin oluşturulduğu sırada özellik olarak eklenip tanımlanabileceği gibi, önceden tanımlanmış bir nesneye sonradan da eklenebilir. Biz bu yazımızda  ilk durumu ele alıp aşağıdaki örneği ona göre inceleyelim.

Örneğin; "cat" adında bir nesne oluşturalım ve bu nesnemiz "name", "age" özelliklerine, bu kedinin ismini ,yaşını ve çıkardığı sesi  bize getirecek bir "introduce" metoduna sahip olsun.

```
var cat = {
  name: "Mr. Puff",
  age: 8,
  introduce: function(){
    return(`My name is ${this.name} ,I'm ${this.age} yo. And my sound meow  meow `);
  }
}
console.log(cat.introduce())
```


Yukarıdaki gibi, metot tanımlanırken function() anahtar kelimesi kullanılarak yapılabileceği gibi EcmaScript6'nın arrow function yönteminin söz diziminden yararlanarak yapmak da mümkündür. 

Fakat burada dikkat edilmesi gereken noktalardan biri arrow functionlar this erişimine sahip değildir. Yani aşağıdaki gibi bir kullanımda introduce fonksiyonu çalıştırıldığında çıktıda özellikler undefined (tanımlanmamış) olarak gözükecektir.

```
var cat = {
  name: "Mr. Puff",
  age: 8,
  introduce: () => {
    return(`My name is ${this.name} ,I'm ${this.age} yo. And my sound meow  meow `);
  }
}
console.log(cat.introduce())
```

> My name is  ,I'm undefined yo. And my sound meow  meow 

Yukarıdaki kodumuzun çıktısı bu şekilde olacaktır.Yani bir metodun arrow function söz dizimi kullanılarak yapılmak istendiği bir durumda özelliklere nesnenin ismiyle erişilebilir. Buna göre yukarda arrow function kullanarak oluşturduğumuz metot içerisinde özelliklere erişim şu şekilde olacaktır;


```
var cat = {
  name: "Mr. Puff",
  age: 8,
  introduce: () => {
    return(`My name is ${cat.name} ,I'm ${cat.age} yo. And my sound meow  meow `);
  }
}
console.log(cat.introduce())
```

Bu şekilde kullanımımızda undefined (tanımlanmamış) gözükmelerin önüne geçmiş olacağız.

Bu yazımda metotların ne olduğunu ve JavaScript nesnesi oluştururken bu nesneye property yöntemi ile nasıl metot ekleyeceğimizi anlattım.Bir sonraki yazımda görüşmek üzere.
Django Tutorial Part 3 -- Choice テーブルをシェルでCRUD する
Tags: django, crud
Published: 2022-04-09 09:21:35


## 前提

https://docs.djangoproject.com/en/4.0/intro/tutorial02/#playing-with-the-api

Django Tutorial の Part2 シェルで遊ぼう編をやる

環境は作ってあって、Question とそれに基づく Choice モデルがある状態

---

# Question テーブルと関連する Choice テーブルのカラムを取得する

## テーブルの中身の取り方を調べる

https://docs.djangoproject.com/en/4.0/topics/db/queries/

https://qiita.com/okoppe8/items/66a8747cf179a538355b#%EF%BC%91%E5%AF%BE%EF%BC%91%EF%BD%8E%E5%AF%BE%EF%BC%91%E3%81%AE%E9%96%A2%E4%BF%82

```py
TableName.objects.get(columnName=value)
```

普通にテーブルのカラムを取得するときはこれで取れて

リレーショナルになっていて、子供テーブルがある場合は

```py
.childTableName_set.all()
```

これで取れる。

親が1つで子供が複数の場合は 

```py
TableName.objects.select_related('childTableName').get(id=1)
```

こうやって取得するらしい。

---

## 実際に子供テーブルを取得

```php
docker-compose run web \
python manage.py shell

```

shell モードを起動

```py

>>> from polls.models import Choice, Question

>>> Question.objects.get(pk=1)
<Question: What's up?>
```

ModelName.objects.get で参照すると、前回 __str__ で仕込んだので中身が見える。primary key が 1 の Question モデルのレコードを確認できた。

```py
>>>
q = Question.objects.get(pk=1)
q.choice_set.all()
<QuerySet []>
```

これを q という変数に入れる
q の中の子供テーブルの中身を表示する

---

## 子供テーブルのレコードを作成

```py
>>> q.choice_set.create(choice_text='Not much', votes=0)
<Choice: Not much>
>>> q.choice_set.all()
<QuerySet [<Choice: Not much>]>
```

childTableName_set.create(column_name=value)
これで中身を新たに作成できる

---

## 子供テーブルの中身を数える

```py
>>> q.choice_set.count()
1
```

子供テーブルは
parent.childrenTable_set.count でデータの数を数えられる

---

## 子供テーブルの中身を検索して削除する

```py
>>> c = q.choice_set.filter(choice_text__startswith='Not')
>>> c
<QuerySet [<Choice: Not much>]>

>>> c.delete()
(1, {'polls.Choice': 1})

>>> q.choice_set.all()
<QuerySet []>
>>> 
```

.filter() で検索して、.delete() をすることで削除ができる

これで Tutorial に従って、子供テーブルの削除までの操作ができた。

---

## まとめ

```php
TableName.objects.get(columnName=value)
```

objects.get でテーブルの中のレコードを取得することができて

```php
.childTableName_set.all()
```

_set.all でそのテーブルの中の子供テーブルたちを取得できる

```php
childTableName_set.create(column_name=value)
```

_set.create で子供テーブルの中身は作成できて

.filter で検索できて、.delete で削除できる。

---

## 次にやること

update を調べる

https://docs.djangoproject.com/en/4.0/intro/tutorial02/#introducing-the-django-admin

admin を作り、phpMyAdmin みたいなものを動作させる。
GOOGLE SSO using SAML
Published: 2022-04-09 08:25:37

Hey people,
I am trying to integrate the SAML SSO with my website,
when I send SAML request to my IDP using code below

refer this code
AccountSettings ac = new AccountSettings();
Models.GoogleSamlData.saml.AuthRequest req = new Models.GoogleSamlData.saml.AuthRequest(new AppSetting(), ac);
String url = (ac.idp_sso_target_url + "?SAMLRequest=" +
Server.UrlEncode(req.GetRequest(Models.GoogleSamlData.saml.AuthRequest.AuthRequestFormat.Base64)));
return RedirectPermanent(url);

 

I Get an error saying

Invalid Request, invalid idpId in request URL, check if SSO URL is configured properly on SP side
 

but I am sure that idp id is correct,
think the problem is with the format or something else that I cant figure out
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oud8ef1e4za6yc5to7oh.png)
How to navigate a browser to the previous page with JavaScript
Tags: javascript, webdev
Published: 2022-04-09 08:15:59

Direct links in web applications navigate to a specific page regardless of whatever page the user is on. But what if you wanted to navigate a user to the previous page they were on?

The back button close to the URL bar in browsers already does this:

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

But you can also provide a custom button to do this. Here's how...

## The History API

The browser exposes the History API on the `window` object, which gives us access to the browser's history session. This API also gives us access to different toggling methods between different sessions in history.

### `history.back()`

The method we need for our use case is the `back()` method used like this:

```js
window.history.back()
```

Calling this method moves the browser to the previous page. If there's no previous session history, the method will do nothing.

### `history.go()`

The History API also has the `go()` method, which allows you to go to a specific history session. The syntax:

```js
window.history.go(index)
```

To go back one page back in the session history:

```js
window.history.go(-1)
```

To go back two pages:

```js
window.history.go(-2)
```

To go forward one page:

```js
window.history.go(1)
```

Similar to the `back()` method, if the target session history does not exist, the function would do nothing when called.
Why you should learn data science ?
Tags: discuss
Published: 2022-04-09 08:08:40

In business, having data science experience can permit you to gain insights about your clients and cover their privacy, forecast request trends, predict fiscal movement, and streamline manufacturing procedures applying machine literacy. 

 Being data learned and understanding [data science](https://insideaiml.com/course-details/Data-Science-Master-Program-in-hyderabad
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6rmd32zdzootee9d0ij.png)) can support you form data- informed conclusions and answer your association’s most pressing business questions.
Full School management system in PHP
Published: 2022-04-09 08:01:47

GitHub repos to [download](https://github.com/carleii/school-management-app-v2): https://github.com/carleii/school-management-app-v2

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is8skz92sfrmop0a5s5k.jpg)
Contact us here for more info : [https://wa.me/qr/WO7BPDXCLJJBO1](https://wa.me/qr/WO7BPDXCLJJBO1)
The college management software you need. 

- Administrative management 
- Academic Management 
- Accounting management 
- School management 
- Generate PDF and Excel documents 
- quicklyPrinting of timetables 
- Printing of annual and semester 
transcripts 
- Sending automatic emails to students 
- E-learning platform included and more 

Intuitive and explicit documentation for a good grip. Easy to use Simplified ergonomics Multipost local or online.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rbrcgdy0xb4cpfec2y6.jpg)
Today's Daily Humor For Devs - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-04-09 08:00:07

---
title: "Today's Daily Humor For Devs - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259924ce05.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q___: What did the command line die of?

___A___: A Terminal illness.
 -->
Help Me Out with This Error In Docker
Published: 2022-04-09 07:23:48

django.db.utils.OperationalError: (1130, "Host '172.19.0.3' is not allowed to connect to this MySQL server")




I got This Error While working with Django...So please could you help me out with the error...I've been trying to resolve this but couldn't do that 


All the Settings are same...I could connect to the data base server from the begining and suddenly this error popped up
Make line breaks work when you render text in a React or Vue component
Tags: react, vue, css, javascript
Published: 2022-04-09 07:05:06

---
title: Make line breaks work when you render text in a React or Vue component
published: true
description: Sometimes you just want those pesky newline characters to actually work!
tags: react, vue, css, javascript
cover_image: https://images.unsplash.com/photo-1541851818-cb1b5e20e2ca
canonical_url: https://cassidoo.co/post/line-break-react-vue
---

Sometimes you will get a string that you can't control in your React components (like from a CMS or API). It might look something like this:

```
"Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"
```

But, those little `\n` characters aren't respected if you were to put it into a React (or Vue) component, like this:

```jsx
const haiku = "Wow I am so cool \n I'm a JavaScript haiku \n render my newlines"

function BeautifulHaiku() {
  return <div>{haiku}</div>
}
```

If you want to change this behavior and get the newlines you want, you have a couple solid options.

## Replace `\n` with `<br />`

The first thing you can do is split up the string and then render the resulting `<br />` tags.

```js
function replaceWithBr() {
  return haiku.replace(/\n/g, "<br />")
}
```

In React, you'd then use `dangerouslySetInnerHTML` to make that work:

```jsx
<p dangerouslySetInnerHTML={{__html: replaceWithBr()}} />
```

(this is named "dangerous" for a reason, and it's not because the React team wants to seem cool, it's because you gotta be careful about what you put in there to avoid malicious scripts)

And in Vue, you'd use `v-html` to make that work:

```vue
<p v-html="replaceWithBr()">{{haiku}}</p>
```

## Use CSS `white-space`
The other way you can do this is by using the `white-space` CSS property and set it to either `pre-wrap` or `pre-line`.

```css
.css-fix {
  white-space: pre-wrap; /* or pre-line */
}
```

These two make sure that the text wraps when line breaks are in the content, and `pre-line` specifically collapses multiple whitespaces into one.

This can be applied to both React and Vue!

## Prove it, Cassidy

Fine, twist my arm!

Here's the React examples in action:
{% codepen https://codepen.io/cassidoo/pen/VwyxRPY %}

And here's the Vue examples!
{% codepen https://codepen.io/cassidoo/pen/XWVqGJB %}

> "They're different but they're friends" - DJ Khaled

**Full disclosure:** I am not a Vue developer, this just happened to work for me when I tried it. I know this is "proper" in React but I can't speak for Vue because I am a noob. Good luck, have fun, make good choices, be kind, write code.

I hope this was helpful for you!
Voice Web - For Deepgram Dev Hackathon 🌱✨
Tags: hackwithdg
Published: 2022-04-09 06:59:37


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

Hello👋

Actually I am new to deepgram. So had to educate my self on how deepgram works and make sure that I have understood all the concepts.😎🚩

Before get started with sending the request to deepgram we need to capture our voice and in order to do that we need to make use of the media capture and streams api.🎧

This is a simple web application that we can create using voice. 

You guys also can run this web app on your machine too.❤️

First you have to clone this project in your pc and then replace deepgram api key with your newly created one which is in the `script.js` file.👽

Then navigate to the project folder. Install all the dependancies by running `npm install`🌱

After the dependancies have installed, you can run the project with `npm run dev` to obtain your local IP address.🌱🐥

As the Media Capture and Streams API requres a secure HTTPS connection to interact with your microphone, you will need to install  SSL certificates for the project.

Generate the certificates by running: `mkcert YOUR_IP_HERE localhost`

We can provide more than one IP address.

Once those have been generated, want to make sure they are placed in the root of the project.

Navigate to the `/bundler/webpack.dev.js` file, and replace `YOUR_SSL_CERT_KEY` and `YOUR_SSL_CERT` with a path to the certificate and key file generated in the previous step.

Make sure all files have been saved and run `npm run dev `again. 

Allow the browser to use your microphone.

Say something! Your text should be visible on the screen! 

Now it's your time to experiment! 🚀


### Submission Category: 

Wacky Wildcards

### Link to Code on GitHub

{% embed https://github.com/kithminiii/Deepgram-Hackathon %}


```
Happy Coding ! 🌱
```
LMR400 VS LMR300: Which one to choose?
Tags: beginners, cable, electronics
Published: 2022-04-09 06:49:57

Overview of LMR400
Times Microwave's [LMR-400](https://www.utmel.com/productdetail/amphenoltimesmicrowavesystems-lmr400-1398690) is designed for adaptability, low loss, RF shielding, and weatherability. The LMR-400 has the narrowest bend radius of any cable of comparable size and performance due to its cable architecture. The cable has the lowest loss of any comparable cable. This cable offers 90 dB of RF shielding and is ideal for EMI-prone environments. The LMR-400 is suitable for both indoor and outdoor use. Use Times Microwave's LMR-400 cable for any application that necessitates a low-loss, conveniently routed RF cable (e.g. WLL, GPS, LMR, WLAN, WISP, WiMax, SCADA, Mobile Antennas). The LMR-400 cable can be used in place of an RG-8 cable.

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

Overview of LMR300
When compared to corrugated copper cables, the Times Microwave LMR-300 5/16 in low loss coaxial cable provides similar performance but with more flexibility and a simpler connection. For a 1 in bending radius, this 50 Ohm coaxial cable has a bare copper center conductor and a stranded outside conductor. The usage of a 90 percent braided shield results in little loss. Insulation is provided by polyethylene foam.

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

Couclusion of LMR400 VS LMR300 Specifications
LMR400 and LMR300 have different Inner Conductors. The inner Conductor of LMR300 is Solid BC, while the inner Conductor of LMR400 is Solid BCCAI. But LMR400 and LMR300 have the same Outer Conductors. The Outer Conductor of LMR400 and LMR300 are all Aluminium Tape. LMR400 and LMR300 are similar in many aspects, such as the operating temperature, capacitance, Inductance and so on. The major differences between them are Dia Inner Conductor, Dia Outer Conductor, frequency, and attenuation. The attenuation of LMR400 is higher than LMR300 regardless of any parameters. So If you want to choose the coaxial cables between LMR400 and LMR300, please look their specifications more carefully.

If you want to learn more, try to follow the below link to [see the article about LMR400 VS LMR300](https://www.utmel.com/components/lmr400-vs-lmr300-which-one-to-choose?id=1831).