teleren/devto huggingface dataset:
Top 10 articles about JavaScript of the month🐫.
Tags: javascript, react, webdev, beginners
Published: 2021-11-27 11:34:04

---
title: Top 10 articles about JavaScript of the month🐫.
published: true
description: Most popular articles about JavaScript published on the dev.to in this month
cover_image: https://source.unsplash.com/featured/?coding
tags: javascript,react,webdev,beginners
series: Monthly JS top 10
---

DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. They provide a place for that to happen.

Once relegated to the browser as one of the 3 core technologies of the web, JavaScript can now be found almost anywhere you find code.
JavaScript developers move fast and push software development forward; they can be as opinionated as the frameworks they use, so let's keep it clean here and make it a place to learn from each other!

{% tag javascript %}

Here is the most popular articles published on this platform.
{% post /aviyel/300-react-interview-questions-4dag %}

{% post /freakcdev297/creating-a-blockchain-in-60-lines-of-javascript-5fka %}

{% post /nilanth/react-architecture-for-enterprise-application-3pnh %}

{% post /ruppysuppy/5-tips-to-take-your-website-lighthouse-score-from-meh-to-wow-2375 %}

{% post /altamashali/deep-dive-into-nodejs-architecture-5190 %}

{% post /panshak/i-created-a-full-stack-invoicing-application-using-the-mern-stack-27mp %}

{% post /nehal_mahida/oops-in-javascript-with-easy-to-understand-examples-2ppn %}

{% post /tolgee_i18n/react-doesnt-need-state-management-tool-i-said-31l4 %}

{% post /aviyel/modern-javascript-explained-in-a-way-youve-never-seen-before-2020 %}

{% post /dhiwise/advanced-javascript-design-patterns-4k8l %}
Enjoy these articles.
Follow me for more articles.
Thanks 💖💖💖
2021 HITCON 紀念
Tags: cybersecurity, hitcon
Published: 2021-11-27 11:11:39

今年第一次參加 HITCON ，因為演講聽不太懂，所以跑去玩煉蠱大會，結果用自動化腳本拿了第一名，雖然很大一部分是靠學習對手的 script 來拿分的，但是參與的過程深深的體會到電腦病毒怎麼互相吞噬還有進化能夠改變自己混淆對手，script 最後變得超長一串，過程還蠻有趣的。
不過如果有時遇到高手認真玩起來真的是被殺的不要不要的，我連 reverse shell 都建立不起來
附上 Github 連結 XD 寫的很趕很醜請見諒

 
https://github.com/danie1Lin/Automation-Script-Malware-Playground-HITCON-2021?fbclid=IwAR3KIhFfjva_CN5Ap46Y8HmP4tKLsJbAhFAFJWdL-h1JschFk3_UXxS4Yl0
What is “Enough” in new programming language ?
Tags: programming, learning, selfimprovement, productivity
Published: 2021-11-27 11:06:08

**Do you learn new programming language?**

**Well, what do you think about being enough knowledge about new language?**

In this story you can find this questions answer. But it will vary from person to person. So read it and deal with those that interest you. Enjoy :)

In the start learning new language we must search about language. For example, if you search about go, you’ll see that it’s usually used for the web and System scripts. Because go have amazing concurrency specs and can compile for all systems. This mean you must learn go and concurrency methods. And learn web packages. Because if you learn only go , you don’t learn anything new.

But if you are learn web packages, concurrency and GRPC, you are have a mjölnir on your hands.

This example about go but you can adapt this example whatever do you want. And I want to talk about how can you improve your algorithm and language skills. I used the [Euler Project](https://projecteuler.net/) for the improve my skills. But Project Euler answer is not available for uncommon languages. And this is only hard problems, this is not measure code quality and performance. I can write small switch/case statements or too long if-else statements. Both is solutions but not same. And I find the [Exercism](https://exercism.org/). In there we have a exercises and side exercises. Mentors alerts you to readable and performance codes. If you want you can become a mentor.

You can improve your algorithm and testing skills in this way. But you can’t improve you about frameworks and toolkits. You can try develop real world app with tools and frameworks. This is help you for the adaptive.

You must join developer groups about frameworks and languages. This groups have a a lot of errors questions and problem. But who care about this. Help her if you know the solution, after all, ‘One candle won’t lose its light by igniting another.’ — Mevlana

And them most important thing. Learn Self-Learning. He may not always be the one to help you. And no one knows everything. But the documents know. If you learn how to read and understanding documents , you don’t need support every time.

I hope it was helpful, thank you for reading.
Start contributing to Opensource as a web dev beginner
Tags: webdev, beginners, opensource, javascript
Published: 2021-11-27 11:00:54

Hi folks, hope you are doing well. In this post, I am going to show you how to get started in open source as a web dev beginner.

I am myself a beginner in open source and started contributing in open source this September.


Most of us are hesitant to contribute to open source, due to the high skill requirements. As a beginner frontend developer, you might not find repositories easy to contribute to.

###React JS Projects

If you are familiar with React.js and want to get your contribution journey started I would suggest taking a look at the Eddiehub community.

Repo Link -[Eddiehub/Linktree]( https://github.com/EddieHubCommunity/LinkFree)
![Eddiehub/Linktree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncelnaigo7m532tnja4d.png)
 
I myself have 3 PR’s in this repository. They have a wonderful community to help you if you face any issues.

###HTML & CSS Projects

If you are just learning and exploring HTML, CSS, then contributing to repositories might be tough.
If any of my readers want to contribute, I would love to help them and contribute to my repositories. They are beginner-friendly projects, you can take a look at them, create an issue and solve it.
Issues could be as simple as some errors in the readme.md file, adding another HTML page, change fonts etc.
![Issue](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adtydbegxp7d2kvapats.png)

Check out the below repositories-

**1. Tech stack = HTML, CSS and Javascript ->**
   * [Dice Game](https://github.com/FidalMathew/ROLL-THE-DICE)
  ![Dice Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/847vmsneysuveq0nwl5l.png)

**2. Tech stack = HTML, CSS ->**
	
* [Amazon Prime animation]	(https://github.com/FidalMathew/amazonprime-movieanimation)

* [Apple website clone](https://github.com/FidalMathew/apple.com)
![Apple website clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eq268t3xu18ibi5j7tsw.png)
You could also improve the readme of the docs, or place issues if you are finding it hard to contribute at any time.
If any of you guys have such beginner friendly repositories,
do share them in the comments. 

**Connect with me on-**

* [Twitter](https://twitter.com/fidalmathew10)
* [Github](https://github.com/FidalMathew)
* [Linkedin](https://www.linkedin.com/in/fidal-mathew-82aba7200/)
NetPaisa | AEPS API| Money Transfer API | IRCTC API
Published: 2021-11-27 10:38:56

Become an authorized PAN Card agent with NetPaisa and open your own PSA PAN agency. NetPaisa is a leading PAN card agency provider in India. In this portal what you will get extra services are:

•	APPS
•	BBPS
•	Aadhar Pay
•	Micro ATM
•	PAN Card Services
•	DMT(Domestic Money Transfer)
•	Recharge
•	Loan(Gold Loan, Home Loan, Loan Against property)
•	Insurance
Simple way to send Github events to a Discord channel using webhook
Tags: github, discord, webhook
Published: 2021-11-27 10:37:25

---
title: Simple way to send Github events to a Discord channel using webhook
published: true
description: Only 2 minutes of your life doing this, that's it.
tags: github, discord, webhook
cover_image: https://images.unsplash.com/photo-1563115298-e9585e7943d4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTYzODAwNzc3MQ&ixlib=rb-1.2.1&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&h=1080
---

- You can create a test server to try this out.

- Create or select a text channel you want to send the events (e.g. `general`), mine's in `github-webhook` channel:

![discord create a channel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/du5rlxzr9hcwwcasqm9g.png)

- Go to channel's settings (gear icon) `>` Integrations `>` Webhooks `>` New Webhook `>` Copy Webhook URL

![channel settings via gear icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7466xfwzzjleh3rj980d.png)

![create webhook inside channel settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihlt509rxgi4rcao1d7i.png)

![copy webhook URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uywze9erwqsrn4a2fgkh.png)

- Go to your repo's settings `>` Webhooks `>` Add webhook

- Paste the webhook URL to `Payload URL`, make sure to append `/github`. You can choose which event(s) to listen. For this example I set it to `Send me everything.`:

![payload URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj9gt3yh1fswwpythvau.png)

- Proof:

![github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id7ybe0hz77t5u4dunu9.png)

![discord channel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q39uxp0mfjxigtiml482.png)
Secure Web applications using CryptoJS and PHP
Tags: javascript, php, security, webdev
Published: 2021-11-27 10:23:44

Encrypt data using JS on front end and decrypt using PHP on backend using AES encryption method.

**Why to use this method**
To prevent Man-in-the-middle (MITM) attacks. Maximum cyber attacks occur MITM attacks. It means the attacker can be seen (intercept) your data before the server receives it from your browser. What if the data we send is already encrypted on the browser itself and sent to the server. It is where the crypto-to-php method works.

**How to use it**
Just encrypt the data using the method below:
```
CryptoJS.AES.encrypt(JSON.stringify(dataValue), TheSecret, {format: CryptoJSAesJson}).toString();
```
**dataValue** is your input value the **TheSecret** is your secret key. You can use your custom random generated secret key, I have used time() for demo purposes. You can use PHP Encryption Methos for your custom secret key encryption and decryption.

The method I used to achieve the purpose (just for demo purposes).
Start with data encryption on Front-End

```
var dt = new Date();
var TheSecret = "";
$(document).ready(function(e) {
    $.ajax({
		url:'libs/php/get_random_key.php',
		type:'POST',
		data:"dts="+dt.getTime(),
		success: function(responseAjx){
			TheSecret = responseAjx;
			console.log(TheSecret);
		}
	});
});
$('button[name="sub"]').click(function(e) {
    var dataValue = $('input[name="data"]').val();
	var enData = CryptoJS.AES.encrypt(JSON.stringify(dataValue), TheSecret, {format: CryptoJSAesJson}).toString();
	$.ajax({
		url:'libs/php/decrypt.php',
		type:'POST',
		data:'crypt='+enData,
		success: function(cryptResponse){
			console.log(cryptResponse);
		}
	});
	
});
```
Here is the JS Encryption and Decryption Library [CryptoJS](https://github.com/deepaksingh1984/crypto-js-and-php/blob/master/libs/js/encryption.js) & [Method](https://github.com/deepaksingh1984/crypto-js-and-php/blob/master/libs/js/aes-encryption.js)

Here is the get_random_key.php code:
```
session_start();
$sname = time();
$_SESSION['cryptPs'] = $sname;
echo $sname;
```

Here is the decrypt.php code:
```
session_start();
$key = $_SESSION['cryptPs'];
include('aes-encryption.php');
if(isset($_POST)){
	echo cryptoJsAesDecrypt($key, $_POST["crypt"]);
}
```
Find the aes-encryption.php here [PHP AES Encryption](https://github.com/deepaksingh1984/crypto-js-and-php/blob/master/libs/php/aes-encryption.php)

Find details code here [GitHub](https://github.com/deepaksingh1984/crypto-js-and-php)
Flip Card Animation using HTML &  CSS | Project for beginners
Tags: html, css, javascript, webdev
Published: 2021-11-27 09:56:20

In this video, I explained everything in detail about How to create Flip Card Animation using HTML and CSS.

This is one of the good Project for beginners /developers who are learning/working  HTML and CSS.

{%youtube 85Zy3LpMGwA%}
One liner automatic method name and time-tracking of a function
Tags: go
Published: 2021-11-27 09:52:41

---
title: One liner automatic method name and time-tracking of a function
published: true
description: 
tags: go
//cover_image: https://direct_url_to_image.jpg
---

Simple and sweet one-liner to print time taken and function name automagically:

```go
func takeSomeTime(){
	defer un(trace())
	time.Sleep(time.Second * 2)
}

func main(){
	takeSomeTime()
}
```
>\> `2021/11/22 19:24:23 Time taken by 'main.takeSomeTime': 2.003439277s`

---

Looking for the magic sauce?.... Here it is...

```go
func un(name string, start time.Time){
	log.Printf("Time taken by %s: %s", name, time.Now().Sub(start).String())
}

func trace() (string, time.Time) {
	pc := make([]uintptr, 15)
	n := runtime.Callers(2, pc)
	frame, _ := runtime.CallersFrames(pc[:n]).Next()

	return frame.Function, time.Now()
}
```

Enjoy... ☺️
Introduction to web development
Tags: webdev
Published: 2021-11-27 09:30:45

It is the work involved in developing the website.Web development is a good profession for you because nowadays you see web developers are in high demand, and have a good life balance,have a comfortable salaries.


WEB DEVELOPERS build and maintain websites and helps the client to get their product or service onto the web.
The client could be anyone like tech company,an organisation and many more.

~ The work includes front end, back end or full stack web development.

~FRONT END: the stuff you see on the website in your browser,including the presentation of content and user interface elements like the navigation bar.It uses HTML,CSS,javasript.

~BACK END: It refers to the guts of the application which live on the server.It stores and serves program data to ensure that front end has what is needs.

~FULL STACK DEVELOPERS:It works with both the front and back end of a website or application.They can tackle projects that involve databases,building user-facing websites,or even work with clients during planning phase of projects. 

*TOOLS OF THE TRADE:~
These are some of the basic tools you will use regularly
~comp
~Google
~Text editor
~Command line interface(CLI)
~Stack overflow
~Git
~Git Hub

*TYPES OF CAREER:
Large tech companies such as google, facebook and amazon if you successfully get into these you would get excellent pay,benefits and opportunities.
Startup are a bit like the wild west but when you become a master, you started enjoying in this.

As a freelancer, you could command a strong hourly wage and the freedom to schedule and design your own products
 
As an consultant for a web consultancy, you would give up some of your freelancing wage potential.

HOPEFULLY, YOU HAVE GAINED A BETTER IDEA OF WHAT A WEB DEVELOPER ACTUALLY DOES AND WHAT YOUR LIFE MIGHT LOOK LIKE IF YOU DECIDED TO TAKE IT ON AS A CARRIER AND THIS HAS ONLY BEEN A TEASER INTO THE WORLD OF THE WEB DEVELOPMENT.
Create Database Mysql Code Example - Stack All Flow
Tags: mysql
Published: 2021-12-14 05:02:38

---
title: Create Database Mysql Code Example - Stack All Flow
published: true
date: 2021-11-27 09:29:55 UTC
tags: MySQL
canonical_url: https://stackallflow.com/mysql/create-database-mysql-code-example/
---

### Most Voted Solution!

<textarea geo_answer_result_id="633487939" style="height:336px;">CREATE DATABASE `mydb`;&lt;/p&gt;&lt;br /&gt;<br>
&lt;p&gt;CREATE TABLE `my_table`&lt;br /&gt;&lt;br /&gt;<br>
(&lt;br /&gt;&lt;br /&gt;<br>
	my_table_id INT AUTO_INCREMENT,&lt;br /&gt;&lt;br /&gt;<br>
    my_table_name VARCHAR(30) NOT NULL,&lt;br /&gt;&lt;br /&gt;<br>
    my_foreign_key INT NOT NULL,&lt;br /&gt;&lt;br /&gt;<br>
    my_tb_created TIMESTAMP DEFAULT CURRENT_TIMESTAMP,&lt;br /&gt;&lt;br /&gt;<br>
  	my_tb_updated TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, ,&lt;br /&gt;&lt;br /&gt;<br>
    # Any other properties here&lt;br /&gt;&lt;br /&gt;<br>
    PRIMARY KEY(my_table_id),&lt;br /&gt;&lt;br /&gt;<br>
    CONSTRAINT fk_name_of_parent_table&lt;br /&gt;&lt;br /&gt;<br>
    FOREIGN KEY(my_foreign_key) REFERENCES parent_table(parent_table_column)&lt;br /&gt;&lt;br /&gt;<br>
);&lt;/p&gt;&lt;br /&gt;<br>
&lt;p&gt;SHOW DATABASES; </textarea>

#create #database #mysql #Code

The post [Create Database Mysql Code Example](https://stackallflow.com/mysql/create-database-mysql-code-example/) appeared first on [Stack All Flow](https://stackallflow.com).
Quick Javascript: How to get the URL of the current page
Tags: javascript, webdev, tutorial, typescript
Published: 2021-11-27 09:28:58

In Javascript, it is sometimes necessary to get the URL of the current web page you are on. There are a few ways to do this.

##How to get the current URL with Javascript
If we want to get the full URL of the current web page, we simply have to use `window.location.href`.

```javascript
// Shows us the current URL
let currentUrl = window.location.href;
```

##How to get the current domain URL with Javascript 
If you only want to get the current domain, excluding any pages, you can run the following in Javascript:

```javascript
let currentDomain = window.location.origin;
```
For instance, if you were on __https://google.com/page/search/go/__, the above would simply return __https://google.com__.

##How to get the path after the domain with Javascript
If you want to get only the path after the domain, then run the following:

```javascript
let currentPath = window.location.pathname;
```
Although these are the most common uses for window.location, there are also a number of other useful properties, such as:

1. __window.location.port__ - the current port
2. __window.location.protocol__ - the current protocol, i.e. https:
3. __window.location.hash__ - anything after a hash at the end of the URL
4. __window.location.hostname__ - the domain without any ports or protocols

[🙇‍♂️ If you like this, consider supporting me on Patreon](https://www.patreon.com/fjolt)
When your favorite opensource project is dying
Tags: opensource, mesos, builds, debian
Published: 2021-11-27 08:32:35

You cannot find new versions for using your favorite opensource projects, what to do?

## First step:

Stop complaining and act ... opensource is free, so you can take the source code and make it work for you ... and on top of that you can share the solution with others ... that's the beauty of the opensource freedom.

## Second step:

Research about your favorite project, who create it, why they create the project?

Research also about the language and the tooling your project is using (you do not need to become an expert but it's a good start)

## Third step:

Make your first build, this is the hardest step but it's the most valuable tool, if you have problems, look for support with the original owners, maybe they are willing to give you a hand or some tips.

Additionally give it a check to the CI/CD tooling the original authors or contributes where using, normally you may recycle a lot of that for new versions.

## Four step:

Fix some bugs and create new versions

## Fifth step:

Share the love !! ... when everything is ready, share with others, for sure you are not the only one using your favorite opensource project !!

## Eating our own dog food

At my company we need new builds for Apache Mesos for Linux and sadly the project was lagging behind, so we stop complaining and we are trying to act -> https://github.com/csaltos/mesos-builds
Username Validator
Tags: csharp, java
Published: 2021-11-27 08:31:09

## Usernames should be formatted and they should conform to follow some validation constraints.

As an example,

| Type                | Constraints                      |
| ------------------- | -------------------------------- |
| Length of username  | Inclusive to 6 to 26 characters  |
| Containing figures  | Only of alphanumeric characters  |
| First figure being  | An alphabetical character        |


These usernames can be validated inside in register/sign up functionalities of your web application.


Now user enters an username as a string in the registration form provided. 


Then they fill out the rest of info like email, password and confirm password etc. and submits.


### After that you need to validate these user inputs. 

To do this we have few options.

i. Using javascript regex to validate it before submitting the form. (With using jquery, React JS or other frontend js library)


ii. Using model attributes in your "User" view model class.
(With using [RegularExpression] for ASP.Net or @Pattern for Spring)


iii. Using server-side code to match and validate the pattern.
(This enables us to check the availability - uniqueness within the user table)

A recommended regex pattern (for Java) given below checks if the string input follows validation constraints given above.


```
String userRegex = "^[a-zA-Z][a-zA-Z0-9_]{5,25}+$";
```


- The tokens used in the regex are as below.


```
^
```

This denotes the first character of the string.


```
[a-zA-Z]
```

All the alphabetical and non-numerical chracters.


```
^[a-zA-Z]
```

The first character being a alphabetical character.


```
[a-zA-Z0-9_]
```

The rest of the string can be alphanumerical characters with no spaces.
(Alphabetical characters with mixed-case, integer numbers, underscores)


```
{5,25}
```

This denotes the length constraint.
(The length of the string input should be between 6 and 26 inclusive. Since the first token of ^[a-zA-Z] if checked the length we checking reduced by one. So we need to check if it ranges from 5 to 25 for rest)


```
+
```

This denotes that the whole pattern will be checked.


```
$ 
```

This denotes the end of the pattern.


The following Java program matches if the given username is valid and conform to our ruleset.

```
public static void main(String[] args) {
   String userRegex = "^[a-zA-Z][a-zA-Z0-9_]{5,25}+$";
   java.util.Scanner sc = new java.util.Scanner(System.in);
   String userName = sc.nextLine();
   
   if (userName.matches(userRegex)) {
      System.out.println("Valid Username");
   } else {
      System.out.println("Invalid Username");
   }

   sc.close();
}
```

Learn more about regex using following links

https://docs.oracle.com/javase/7/docs/api/java/util/regex/Pattern.html

https://docs.microsoft.com/en-us/dotnet/standard/base-types/regular-expression-language-quick-reference
Hoisting in JavaScript | Most asked JavaScript Interview Question
Tags: javascript, webdev, beginners
Published: 2021-11-27 08:28:16

In this Video, I have explained about what is hoisting in javascript and how it works.

Also explained how Hoisting works behind the scenes with help of JavaScript Visualiser application
Explained about what are not hoisted in JS.

Here you go........
{%youtube xfH1A4IuZRk%}