teleren/devto huggingface dataset:
React Style Guide Collection
Tags: react, styleguide, javascript, webdev
Published: 2021-08-10 12:07:42

I am in process of creating style guide for my react projects, and started looking online for already popular ones to get inspiration. Here are collection of all that I think are really good and will be helpful for developers like me looking for React style guide.

Please comment If I am missing any or if you had a preferred one that I should look into.

---
## [KHAN : React Style Guid](https://github.com/Khan/style-guides/blob/master/style/react.md)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yfo6tc0rujr7p3rg4th.png)

---
## [PAGARME: React Code Style Guide](https://github.com/pagarme/react-style-guide)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9f055iwfm0jgwq1qt4qj.png)

---
## [AIRBNB: React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lp7qrkl9wz5dyxd8v99p.png)

---
##[CSS-TRICKS: React Code Style Guide](https://css-tricks.com/react-code-style-guide/)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hul1kdx4hb9runcxajim.png)

---
##[AIRBNB: Issue discussion around ES6/2015](https://github.com/airbnb/javascript/issues/247)
Really a good read.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yw7osd8cbg9tkwossrv.png)

---
##[Google: JavaScript Guide](https://google.github.io/styleguide/jsguide.html)

A general JS style guide.

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

---
##[ReactJs.org: File Structure](https://reactjs.org/docs/faq-structure.html)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6n2p23i3dxcblvrklnxf.png)

---
Also, if interested, [here](https://dev.to/knitesh/react-project-folder-structure-30cm) you can read about my preferred folder structure.

---
##[Lessonly Engineering: React Styleguide](https://about.lessonly.engineering/styleguide/react/)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f8brtz0jhs5ds54cjf3.png)
  
---

ps: I will soon write a blog post detailing my style guide.

Thanks
Kumar Nitesh
[Twitter](https://twitter.com/imknitesh)
CA/CS/CMA Studio Recorded Pendrive Classes by Santosh Kumar
Tags: career
Published: 2021-08-10 12:06:51

Are you preparing for your CA/CMA/CS profession and worried about how you manage in covid.

No worries I can help you with your problem. 

I am Presenting you <a href="https://coceducation.com"> COC Education </a> which is helping lots of candidates/students to learn, memorize and remember effectively.

They are offering Daily Doubt Session, video courses, live sessions, books, and all these offerings are presented by highly trained and experienced faculty members.

And what if I told you that you don’t need to travel to an education center from one city to another in this covid situation and you can learn from home whenever you want without compromising your safety.

So what are waiting for? <a href="https://coceducation.com"> Click here and register yourself </a> and learn more about COC Education and its services.
Micro Speed Macro Patience
Tags: growth, motivation, career, patience
Published: 2021-08-17 14:35:36

---
title: Micro Speed Macro Patience
published: true
date: 2021-08-10 12:05:00 UTC
tags: growth,motivation,career,patience
canonical_url: https://x-team.com/blog/micro-speed-macro-patience/
---
Anyone who wants to achieve mastery needs to keep the following framework in mind: Micro speed macro patience. Heavily advocated by entrepreneur [Gary Vaynerchuk](https://www.garyvaynerchuk.com/), micro speed macro patience means that, on the one hand, you need to work hard every day. From input to output with a rapid feedback loop. That's micro speed.

On the other hand, you cannot expect results quickly. You won't achieve mastery tomorrow. The results you're looking for might take a decade or longer, even if you work as hard as you can on the daily. Don't get discouraged if you fail in your first year. Expand your time horizon instead. That's macro patience.

Visualize the framework as a duck in a pond of water. The duck might look quiet and composed above water, but it's paddling like crazy underneath. It [seems to be](https://x-team.com/blog/how-to-look-like-an-overnight-success/) cruising smoothly to its destination, but only because it's working hard. Be like the duck. Micro speed macro patience.
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2021-08-10 12:00:16

---
title: "A Fun Programming Joke To Start Your Day"
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/5e12598468df3.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:___ Who used the internet before it was cool?

___A:___ Httpsters
 -->
How to do a subsearch in Splunk?
Published: 2021-08-10 11:57:05

When we debug an application, we may need to do some data aggregation to know what happened. So, like in SQL, we can do some sub-searches in Splunk to quickly retrieve a lot of information.

# Simple search
First, we will check how to do a simple search and how the data is retrieved.

> For what happened next, we will use the following example :
> - an api that always log the transaction id [**transaction_id**] and a generic error code [**error_code**] *(if the transaction was incorrect)* before to answer to the user
> - a log with the transaction id [**transaction_id**] and with the exception content [**exception**] if a field was missing

So here, with simple searches, we can search which transactions failed
```
error_code=* | table transaction_id
```
|transaction_id|
|---|
|1|
|2|
|3|

or search an error log
```
transaction_id="1" AND exception=* | table timestamp, transaction_id, exception
```
|timestamp|transaction_id|exception|
|---|---|---|
|2021-01-01 00:00:00.000|1|Missing field|

---

# Subsearch
Now that we see what we can do with simple searches, we will be able to combine them to retrieve all the transaction_id with an exception!

### So how do we do a subsearch?

In your Splunk search, you just have to add
> [ search *[subsearch content]* ]

*example*
```
[ search transaction_id="1" ]
```

So in our example, the search that we need is
```
[search error_code=* | table transaction_id ] AND exception=* | table timestamp, transaction_id, exception
```
And we will have

|timestamp|transaction_id|exception|
|---|---|---|
|2021-01-01 00:00:00.000|1|Missing field|
|2021-01-03 00:00:00.000|3|Auth failed|

> *The transaction_id 2 is missing because it wasn't a transaction with an error.*

### But how does it works?
It's quite simple! In my example, I did a simple search that returns only one information per log.

```
error_code=* | table transaction_id
```
|transaction_id|
|---|
|1|
|2|
|3|

So when you are doing this kind of search as a subsearch, Splunk transforms it to **OR** condition for each line.

```
[search error_code=* | table transaction_id ] AND exception=*

becomes

(transaction_id = "1" OR transaction_id = "2" OR transaction_id = "3") AND exception=*
```

And if you are retrieving more than one info in your subsearch, Splunk will transform it as an if condition, where each tuple is a matching case. *(The condition to be valid is to match all values from the same line.)*

```
[search error_code=* | table transaction_id, timestamp ] AND exception=*

becomes

(
  (transaction_id = "1" AND timestamp = "2021-01-01 00:00:00.000") OR  
  (transaction_id = "2" AND timestamp = "2021-01-02 00:00:00.000") OR
  (transaction_id = "3" AND timestamp = "2021-01-03 00:00:00.000") 
) AND exception=*
```

---

## Links
### Splunk documentation 
- "Use a subsearch" : https://docs.splunk.com/Documentation/Splunk/8.2.1/SearchTutorial/Useasubsearch
- "About subsearches" : https://docs.splunk.com/Documentation/Splunk/8.2.1/Search/Aboutsubsearches

---

And that's it! You've learned how to do subsearches in Splunk!

I hope you enjoyed it and it will help you! 🍺
Aggregate SQL output in file in Azure Devops piepline
Published: 2021-08-10 11:52:31

<sub>Photo by <a href="https://unsplash.com/@solovevserg">Sergei Solovev</a> on <a href="https://unsplash.com/s/photos/bazar">Unsplash</a></sub>

In order to generate SQL statements based on a reference environment, we had to run multiples stored procedures, and aggregate results in a SQL file.

In order to automate this in a pipeline using Powershell Core Task, i saw this [Example](https://docs.microsoft.com/en-us/powershell/module/sqlserver/invoke-sqlcmd?view=sqlserver-ps#example-2--invoke-commands-in-a-script-file-and-save-the-output-in-a-text-file) on how to manage output of Invoke-SQLCmd.

Then with [this command](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.management/add-content?view=powershell-7.1) i can append content to a file.


```Powershell
$sqlQuery=@"YOUR_SQL_STATEMENT_MULTILINE"@

$TableResult = Invoke-Sqlcmd -ServerInstance  "$(Server)" -Database "$(Db)" -Username "$(UserLogin)" -Password "$(userPassword)" -OutputAs DataTable -EncryptConnection  -Query $sqlQuery

$TableResult[0].Rows | %{Add-Content -Path .\Output.sql $_[0]}
```

Hope this helps !
Vue3 project doesn't running on windows
Published: 2021-07-27 09:07:02

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

Error: listen EACCES: permission denied 127.0.0.1:8888
    at Server.setupListenHandle [as _listen2] (net.js:1299:21)
    at listenInCluster (net.js:1364:12)
    at doListen (net.js:1501:7)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1343:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'EACCES',
  errno: 'EACCES',
  syscall: 'listen',
  address: '127.0.0.1',
  port: 8888
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! upbots_web@0.2.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the upbots_web@0.2.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2021-07-27T07_45_17_389Z-debug.log

If I run vue3 on windows, I faced permission denied error.
Can you pls guys help me?
Auto-Reload SpringBoot in IntelliJ IDEA
Tags: intellij, springboot, springdevtools, java
Published: 2021-08-10 11:49:34

Having to click on the `Re-run` to restart your Springboot application after making changes can get tiring at some point. 
> Please note, the `spring-dev-tools` provides this functionality out-of-the-box, but couldn't get to make it work for myself. So, in this post I'll show how I hacked my way around it.

The first step is to add the **Spring-dev-tools** dependencies to your project pom.xml file within the **<dependencies>** tag. 
**NB:** _This is a key component for this to work_

```
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
</dependency>
```
By this I believe your IDE (IntelliJ) is open;
Open the IDE preferences by using the shortcut `cmd + ,` for macs from your keyboard or from the menu bar click on `IntelliJ Menu >> Preferences`. This will open the Preferences dialog.

![IntelliJ IDEA Preferences window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzez70m89ucuimof8tmd.png)

On the left pane, click on the **Build, Execution, Deployment** option to reveal it's sub-menus. Click on **Compiler** and on the right check the **Build Project Automatically** option and click ok;

![IntelliJ IDEA Preferences window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzez70m89ucuimof8tmd.png)

Double tap on the Shift key on your keyboard to open IntelliJ search dialog and type `registry` to open the registry settings.

![IntelliJ IDEA search dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df5krpri01d9tithhqxk.png)

Find `compiler.automake.allow.when.app.running` option and check it true; then restart your Spring-boot application and enjoy. Now upon any change in your source code spring restarts the application. Hope you find this helpful, Cheers!

![IntelliJ IDEA registry dialog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6fq73yfqkt4iqqmxml6.png)
Nodemon + Go App
Tags: node, go
Published: 2021-08-10 11:31:04

# Nodemon + Go

<p align="center">
  <img src="https://raw.githubusercontent.com/Rezvitsky/nodemon-golang-example/main/preview.png">
  <br>
</p>

<br>

**Background**

Hey! When developing an application in the go language, it is necessary to restart it every time through the console in order to apply new changes, this is not convenient. I propose to sprinkle it. I will be using the npm nodemon package.

# Start 🚀

Install nodemon globally

    npm install -g nodemon

<br>

For easy launch of the application, I will create a Makefile.

    run: main.go
	    nodemon --exec "go run" main.go

Here to nodemon we pass the launch parameters and the application itself.

<br>

To run the application

    make run

<br>

Example: https://github.com/Rezvitsky/nodemon-golang-example
Make failures normal, test your code and the "for" HTML attribute

My 10 favorite Tech Twitter tweets from the past week: 
Tags: webdev, codenewbie, programming, beginners
Published: 2021-08-10 11:10:30

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

Being a self-taught developer is hard

This thread will make the entire process easier for you:

@TheAnkurTyagi 
https://twitter.com/TheAnkurTyagi/status/1422558697302249480?s=20

Being persistent is key if you want to become a successful developer

@catalinmpit 
https://twitter.com/catalinmpit/status/1422221555816337411?s=20

Youtube can be your most useful resource if you use it to your advantage

@denicmarko 
https://twitter.com/denicmarko/status/1423499424077160449?s=20

Let's make sharing our failures normal

@FrancescoCiull4 https://twitter.com/FrancescoCiull4/status/1423520321131491330?s=20

Programming language and frameworks are not the only skills of a developer

@oliverjumpertz 
https://twitter.com/oliverjumpertz/status/1423294880424501259?s=20

If you're interested in making money online as a developer, you need to read this thread

@csaba_kissi 
https://twitter.com/csaba_kissi/status/1422859903484317698?s=20

Remember to test your code

@dmokafa 
https://twitter.com/dmokafa/status/1422558020479995915?s=20

Learn more about the "for" HTML attribute

@_georgemoller 
https://twitter.com/_georgemoller/status/1423300711278858240?s=20

Remember to learn the fundamentals first

@UbahTheBuilder 
https://twitter.com/UbahTheBuilder/status/1422425452434579456?s=20

If you are a Front-end developer, you need to use these tools

@Insharamin 
https://twitter.com/Insharamin/status/1423866044494630914?s=20

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Django Pagination-Simple than any Framework
Tags: django, python, html, css
Published: 2021-08-10 10:46:27

 

Django Pagination

I am in love with Django. Of course, it is not my best framework, but the simplicity of some tasks makes it awesome. Some factors like authentication, forms, pagination require just few code lines and you are ready to go.

Whenever you want to learn a framework in the best way, read the documentation first. Pagination is the bottom numbers or words that contain links directing y9ou to the next page. Most commonly used when we want to increase the loading speed of a site. You don’t need to load all the content (especially images), they take a lot of bytes downloading, hence slowing the site down. And that is how the idea of pagination was invented.

First, after creating your content on the site. In the view.py, just below the main class, which contains the content to be displayed, add paginate_by=x. The value of X is the number of items required on a single page. 

class PostListView(ListView):
    model = Post
    template_name = 'blog/home.html'
    context_object_name = 'posts'
    ordering = ['-date_posted']
    paginate_by = 5


Go inside your HTML file, let's say home.html then set up some buttons for first, last, next, and previous which are common. 


Let us discuss each line of the cover image-Kindly look at the image to get clear view.: 

  Line 1
Confirm if this page is paginated. If you indicated ‘paginated by’ in views.py then it will set the Boolean to true.

Line 2
This line confirms if there is a previous page so that it can display the previous link, if not it hides.

Line 3
If there is a previous page then it will display the first-page link to direct you back to the first content.

Line 4
If there is a previous, then this link directs to the previous page.

Line 5
This tag closes the if page_obj.has_previous

Line 6
This line confirms if there is the next page. For the last page, this will be set to false and the following links won't be displayed (Next and Last).

Line 7
This link directs the user to the next page.

Line 8
This link will total the number of pages and open the last page.

Line 9
The line terminates the testing of has_next.

Line 10
This line terminates the Pagination test

Happy Django coding.
Combine Git repositories with unrelated histories
Tags: git
Published: 2021-08-10 09:58:49

To combine two separate Git repositories into one, add the repository to merge *in* as a remote to the repository to merge *into*. Then, combine their histories by merging while using the `--allow-unrelated-histories` command line option.

As an example, there are two repositories that both have a single root commit. Running `git log` produces the log for the first repository, as that repository's directory is the current directory:

```shell
git log
```

    commit 733ed008d41505623d6f3b5dbee7d1841a959c34
    Author: Alice <alice@example.com>
    Date:   Sun Aug 8 20:12:38 2021 +0200
    
        Add one.txt

To get the logs for the second repository, pass a path to that repository's `.git` directory to the `git log` command via the `--git-dir` command line option:

```shell
git --git-dir=../two/.git log
```

    commit 43d2970b4dafa21477e1a5a86cad45bc5e798696
    Author: Bob <bob@example.com>
    Date:   Sun Aug 8 20:12:44 2021 +0200
    
        Add two.txt

To combine the two repositories, first add the second repository as a remote to the first. Then, run `git fetch` to fetch its branch information:

```shell
git remote add two ../two
git fetch two
```

Then merge, with the remote set up, merge the second repository's history into the first by using the `--allow-unrelated-histories` flag:

```shell
git merge two/main --allow-unrelated-histories
```

    Merge made by the 'recursive' strategy.
     two.txt | 0
     1 file changed, 0 insertions(+), 0 deletions(-)
     create mode 100644 two.txt

Unlike [extracting part of a repository](https://jeffkreeftmeijer.com/git-extract/)&#x2014;which rewrites history by definition&#x2014;combining repositories is done by *merging* their two histories. This means the commits from the second repository are appended to the ones from the first, retaining history:

```shell
git log
```

````
commit 0bd5727a597077b5a5db9590b3f6aaf70eb10b60
Merge: 733ed00 43d2970
Author: Alice <alice@example.com>
Date:   Sun Aug 8 20:13:01 2021 +0200

    Merge remote-tracking branch 'two/main' into main

commit 43d2970b4dafa21477e1a5a86cad45bc5e798696
Author: Bob <bob@example.com>
Date:   Sun Aug 8 20:12:44 2021 +0200

    Add two.txt

commit 733ed008d41505623d6f3b5dbee7d1841a959c34
Author: Alice <alice@example.com>
Date:   Sun Aug 8 20:12:38 2021 +0200

    Add one.txt
```


## References

-   <https://git-scm.com/docs/git-merge>:
    
    > By default, `git merge` command refuses to merge histories that do not share a common ancestor. [The `--allow-unrelated-histories`​] option can be used to override this safety when merging histories of two projects that started their lives independently.
📩 Laravel Tinker ile Terminalden Test Maili Gönderme.
Tags: laravel, tinker, mailhog, email
Published: 2021-08-10 09:36:25

Laravel uygulamamız için mail ayarlarımızı yaptığımızda öncelikle bunu test etmek isteriz. Bunun için en iyi ve en basit yol tinker kullanmaktan geçiyor.

İlk olarak laravel projemizin kök dizininde bir tinker oturumu başlatalım.

```
php artisan tinker
```

Ardından hızlıca bir test maili göndermek için Mail facade'ı kullanalım.

```php
Mail::raw('Hello Mail!', function($msg) {$msg->to('test@dev.to')->subject('Test Email'); });
```

Eğer ayarlarınızı doğru bir şekilde yapmışsanız gelen kutunuzda maili göreceksiniz.

Başka bir yazımda görüşmek üzere 🚀
How to Do Stripe Integration for Strong Customer Authentication
Tags: stripeintegration, paymentintegration
Published: 2021-08-10 09:17:13

Stripe becomes a prime choice for facilitating different card transactions on the website. Using stripe you can add multiple accounts for your business, plus allow almost all cards for the payment process. Compared to other payment ways, it is more flexible, safe, and customizable. For a better and safe payment platform, today we will show how to do stripe integration using Strong customer authentication (SCA).

### What is stripe?
Stripe is a widely known online payment service provider that accepts payment online. It supports multi-currency transactions so that your global business gets handled easily. Compared to other integration, stripe integration is less complicated, plus takes a short time.

### Why is SCA the right choice?
Strong customer authentication is a new regulation that aims to reduce online frauds in Europe. To ensure safe online payment, additional authentication is a must in checkout flow to implement SCA.

What are the prerequisites for Stripe Integration?
There are the following prerequisites you need for stripe integration.

'Laravel
MySQL
NPM
VSCode'
Once after knowing the prerequisites for Stripe integration, let’s move to the process. Here we have covered each step with the relevant screenshots of the code and screen.

### Easy steps for Strip Integration
#### 1. Create a stripe account
Create a stripe account by filling details like email id, full name, country, and password. After that log into the dashboard. Now on the home screen, click on the "developers" option and select API keys to get API. API keys include publishable and secret API keys. These keys in a configuration file are stored as .env.

**Source:** [https://www.multipz.com/how-to-do-stripe-integration-for-strong-customer-authentication](https://www.multipz.com/how-to-do-stripe-integration-for-strong-customer-authentication)