teleren/devto huggingface dataset:
JavaScript - Primitive and Non-Primitive Datatypes
Tags: javascript, beginners, programming, webdev
Published: 2023-01-01 15:57:09

In JavaScript, there are two main categories of data types: `primitive` and `non-primitive` (also called reference).

_**Primitive data types**_ are simple, immutable values that are stored directly in the memory. There are six primitive data types in JavaScript:

**String**: A sequence of characters, represented in quotes (single or double). _Example_: `"Hello World"`
**Number**: Numeric values. Can be integers or floating-point values. Example: `42`
**Boolean**: A value that is either true or false. Example: true
**Null**: A value that represents the absence of a value or object. Example: `null`
**Undefined**: A value that indicates a variable has not been assigned a value. Example: `undefined`
**Symbol**: A unique, immutable data type that can be used as an identifier for object properties. Example: `Symbol("description")`

_**Non-primitive**_ (reference) data types are values that are stored as references in memory. These data types are objects, and they are mutable (can be modified). Here are some examples of non-primitive data types:

**Array**: An ordered collection of values. _Example_: `[1, 2, 3]`
**Object**: A collection of key-value pairs. _Example_: `{name: "John", age: 30}`
**Function**: A block of code that can be called by name. _Example_: `function greet() { console.log("Hello!") }`
**Date**: A value that represents a specific point in time. _Example_: `new Date()`

I hope this helps! Let me know if you have any questions.
📧 Sending E-Mail from Gmail Using Golang.
Tags: go, email, programming, tutorial
Published: 2023-01-01 15:30:44

First setup your gmail account like this. You can access here from settings/all settings.

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

Open Forwarding and POP/IMAP. Enable IMAP and save changes.

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

Then open Google Account/Security. Open Application Passwords. (You need 2-Step Verification)

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

Select Post and Other device. I named “Golang Emails”. Then create it.


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

We get the application password. Let’s Code it!

```go
package main

import (
	"log"
	"net/smtp"
)

func main() {
	send("hello bro, This just test.")
}

func send(body string) {
	from := "yusufturhanp@gmail.com"
	pass := "*****"
	to := "tryusuf97@gmail.com"

	msg := "From: " + from + "\n" +
		"To: " + to + "\n" +
		"Subject: Hello there\n\n" +
		body

	err := smtp.SendMail("smtp.gmail.com:587",
		smtp.PlainAuth("", from, pass, "smtp.gmail.com"),
		from, []string{to}, []byte(msg))

	if err != nil {
		log.Printf("smtp error: %s", err)
		return
	}
	log.Println("Successfully sended to " + to)
}
```

You must change from to sender mail, pass to Application Password and “to” to reciver email. Run and look your sended posts.

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

We sent the first email. And we set up the google account. You can now send as many emails as you want.
fail2ban regex works as CLI param, but not as file (Solution)
Tags: fail2ban, solution, troubleshooting
Published: 2023-01-01 15:29:05

When writing new fail2ban filter, I see my regexes are working well in CLI test, but not from filter.d file.

Running from CLI (success):
```shell
root@liste:/etc/fail2ban/filter.d# fail2ban-regex /var/log/apache2/access_log '<HOST>.*/cgi-bin/mailman/subscribe/.*'

Running tests
=============

Use   failregex line : <HOST>.*/cgi-bin/mailman/subscribe/.*
Use         log file : /var/log/apache2/access_log
Use         encoding : UTF-8


Results
=======

Failregex: 7530 total
|-  #) [# of hits] regular expression
|   1) [7530] <HOST>.*/cgi-bin/mailman/subscribe/.*
`-

Ignoreregex: 0 total

Date template hits:
|- [# of hits] date format
|  [7796] Day(?P<_sep>[-/])MON(?P=_sep)ExYear[ :]?24hour:Minute:Second(?:\.Microseconds)?(?: Zone offset)?
`-

Lines: 7796 lines, 0 ignored, 7530 matched, 266 missed
[processed in 1.68 sec]

Missed line(s): too many to print.  Use --print-all-missed to print all 266 lines
```

7.5K matched. Great! now, put this regex into file:
```
[INCLUDES]
before = common.conf
[Definition]
failregex = <HOST>.*/cgi-bin/mailman/subscribe/.*
ignoreregex =
```

And.... 0 matched! :-(
```shell
root@liste:/etc/fail2ban/filter.d# fail2ban-regex /var/log/apache2/access_log /etc/fail2ban/filter.d/mailman-subscribe.conf 
...
Lines: 7796 lines, 0 ignored, 0 matched, 7796 missed
```

Solution: just add empty `datepattern = ` to rule.

And now:
```shell
root@liste:/etc/fail2ban/filter.d# fail2ban-regex /var/log/apache2/access_log /etc/fail2ban/filter.d/mailman-subscribe.conf 
...
Lines: 7796 lines, 0 ignored, 7530 matched, 266 missed
```
Deploy Node App in Vercel
Published: 2023-01-01 15:28:19

After the finishing of the era of Heruku free tiar , I had to find out a hosting platform for deploying my server codes or backend codes. I have tried cyclic, render, railway and vercel . 
Among them Railway do not allow us to host our app live more than 21 days in the free plan .  

And Render allow us this feature but it goes sleep in every 15 minutes of inactivity of the api we have called. 

For that I loved using the free version of Cyclic and Vercel.

Today I am going to discuss about how to deploy node app in the vercel and Next day I will be showing the same method for Cyclic. 

Check out the process donot miss any of them otherwise it will make you Mad like me :


1 . We need to export our node file so that others can access the files or codes from the file .
just write the code at the end point of your node js file 
   module.exports = app;

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

2. Then the most important things to do is adding a vercel.json file in the root of your project . And write down the following code their in the file 

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

and the file structure should be like this 

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

3. Now make a github repository and push all the codes there . And go to vercel and log in with github it will make easiar for you to find all the repository you added and finding the needed one .

4. Now go to dashboard and click on add new select project and then select the github repository which contain all of your project files .

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

5. Then it will show you the project configuration page . You donot need to add anything there . But If you have env variable then their is a section for you where you can add them 

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

6. And then deploy . And it will take you to the project page .There you will get a domain section and click on them it will take you to the live site of your project . 

That is all for today .Deploy you site and share with your clients .
Introducing Secweb security headers for fastapi and starlette framework
Tags: python, news, security, fastapi
Published: 2023-01-01 15:21:36

## UPDATE

Secweb has been updated it now uses ASGI Middleware implementation which means no more ContextVar problems and also improved performance creating very less overhead in using the library than before.

## What is Secweb ?

Secweb is a library of middlewares that helps you in setting security headers in fastapi and starlette framework.

## Why to use Secweb ?

Secweb makes it easy to add security headers or to change those headers parameters without you having to get your hands into the intricacies of the starlette framework so you can write your bussines logic without any worries and it also secures all of your apis.

## How to use Secweb

First we will install the library using the pip command, You can use any packaging manager system you like eg. poetry, conda, pipenv, etc. to name a few.

```powershell
pip install Secweb
```

Now you can import it into any of your existing or new fastapi or starlette projects, I am creating a new dummy fastapi project for this blog.

Example:

```python
from fastapi import FastAPI
from Secweb import SecWeb

app = FastAPI()
SecWeb(app=app)

@app.get("/")
async def root():
    return {"message": 'Hello World'}
```

Now your api is secured by the secweb it is this easy to add Secweb into your projects all the important headers are activated by the secweb eg. Content Security Policy (CSP), Strict Transport Security (HSTS), etc. to name a few, If you want you can even change all the headers parameters according to your needs don't worry all the other headers are also activated with their default settings so that you don't unnecessarily increase security risk of your apis.

Example:

```python
from fastapi import FastAPI
from Secweb import SecWeb

app = FastAPI()
SecWeb(app=app, Option={'hsts': {'max-age': 432000, 'includeSubDomains': True, 'preload': False}})

@app.get("/")
async def root():
    return {"message": 'Hello World'}
```

All the headers are also available as standalone in the library for you to use remember using only the standalone headers will only activate those headers others will remain deactivated.

Example:

```python
from fastapi import FastAPI
from ContentSecurityPolicyMiddleware import ContentSecurityPolicy

app = FastAPI()
app.add_middleware(ContentSecurityPolicy, Option={'style-src': 'self'}, style_nonce=style_nonce)

@app.get("/")
async def root():
    return {"message": 'Hello World'}
```

For more information on all the headers provided by the Secweb library you can go to [Github](https://github.com/tmotagam/secweb#readme) to read the detailed documentation.

Hope this helps you in your projects :wave: Bye.
Christmas Day Music App Design In Figma | Figma Tutorial
Tags: figma, beginners, tutorial, ux
Published: 2023-01-01 15:02:13

{% youtube 9A7pglz8eUg %}

Hi guys, today we want to show How To create Christmas Day Music App Design In Figma
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️

Let's be friends and connect
📩 Subscribe:https://shorturl.at/BCTV8
📷 Instagram: https://www.instagram.com/soudemy/
📱 Behance: https://www.behance.net/soudemy
🐦 Twitter: https://twitter.com/SoudemyAcademy

In the comments, you can say what design you want so that we can prepare the video for you.
Pulumi - Python - Docker
Tags: pulumi, python, iac
Published: 2023-01-01 14:59:57

I do love Pulumi and Python.  Working on a few things lately and fought with the Docker build options, getting it working the way I wanted.  

The Docker module for Pulumi does not have the greatest documentation and I felt the need to write this up real quick hopefully someone can find it useful.  


```python

import json

import pulumi
import pulumi_aws as aws
import pulumi_aws_native as aws_native
import pulumi_docker as docker

# ----------------------------------------------------------------
# Pull Stack Variables from Config File
# ----------------------------------------------------------------

CONFIG = pulumi.Config()
account_id = (aws.get_caller_identity()).account_id
region = (aws.get_region()).name



untagged_days = 14

life_cycle_policy = json.dumps({
    "rules": [
        {
            "rulePriority": 1,
            "description": "Expire images older than 30 days",
            "selection": {
                "tagStatus": "untagged",
                "countType": "sinceImagePushed",
                "countUnit": "days",
                "countNumber": untagged_days
            },
            "action": {
                "type": "expire"
            }
        }
    ]
})

# https://www.pulumi.com/registry/packages/aws-native/api-docs/ecr/repository/
ecr_repository = aws_native.ecr.Repository(
    "ecr-repository",
    image_scanning_configuration=aws_native.ecr.RepositoryImageScanningConfigurationArgs(
        scan_on_push=True
    ),
    lifecycle_policy=aws_native.ecr.RepositoryLifecyclePolicyArgs(
        lifecycle_policy_text=life_cycle_policy
    )
)

# https://www.pulumi.com/registry/packages/aws/api-docs/ecr/getauthorizationtoken/
ecr_token = aws.ecr.get_authorization_token()

# https://www.pulumi.com/registry/packages/docker/api-docs/image/
container = docker.Image(
    "build-container",
    image_name=ecr_repository.repository_uri,
    build=docker.DockerBuild(
        context="./src/api"
    ),
    registry = docker.ImageRegistry(
        server = ecr_repository.repository_uri.apply(lambda uri: uri.split("/")[0]),
        username = ecr_token.user_name,
        password = ecr_token.password,
    ),
    opts=pulumi.ResourceOptions(parent=ecr_repository)
)

```
Single Line and Multiline Comment in Top Programming Languages
Tags: java, beginners, javascript
Published: 2023-01-01 14:51:45

A comment in computer programming is a programmer-readable explanation or annotation in a computer program's source code. They are included to make the source code simpler to comprehend for humans, and are often disregarded by compilers and interpreters. A programmer can use comments to make their code more readable.

Here, I will be showing you how to comment in some of the top programming languages of 2023. Some of they languages include JavaScript, Python, Java, TypeScript, C#, C++, PHP, Shell, C, Ruby, Kotlin and Go.

Most of the C based programming language uses 

## How to Write Comment in VS Code, IntelliJ, Atom, Sublime and Other IDEs
Most IDE uses the `Control + /` on Windows and `Command + /` on Mac to make comment.

## What Language do you write and how do you write your comments?
How to create a basic react application. (Simplified guide)
Tags: react, webdev, javascript, beginners
Published: 2023-01-01 14:46:10

Creating your first react app is no magic. I have listed the steps in an orderly manner. They are:

**Install Node.js on your system:**
Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a browser. It is required to run React applications. You can download the latest version of Node.js from the official website: https://nodejs.org/en/

**Install a code editor:**
A code editor is a tool that you will use to write and edit your code. There are many options to choose from, but Visual Studio Code (VS Code) is a popular choice for React development. You can download VS Code from the official website: https://code.visualstudio.com/

**Create a new React app using create-react-app:** Once you have Node.js and a code editor installed, you can use the create-react-app tool to set up a new React project. Open a terminal or command prompt and run the following command:

```
npm create react-app my-app

```

This will create a new directory called "my-app" with the necessary files to start building a React app. You can replace "my-app" with the name of your app.

**Open the project in your code editor:**
Once the project has been created, open the project directory in your code editor. This will allow you to view and edit the project files.

**Start the development server:**
From the terminal or command prompt, navigate to the project directory and run the following command:

```
npm start

```
This will start the development server and open your app in a new browser window. Any changes you make to the code will be automatically reflected in the browser.

That's it! You now have a basic React app up and running. You can start building your app by editing the files in the "src" directory.

I will get to that very soon, but there are other concepts which i need to explain before we get to increasing the complexity of our new app.

I hope this helps.
How JSX works in ReactJS? 🤗
Published: 2023-01-01 14:42:23

React uses JSX to make developer experience better than other environments. JSX is just an HTML like syntax, but not HTML in Javascript. The Browser can't understand JSX code on it's own. It needs transpilers like **Babel** to *convert* JSX code to **React.createElement()** code, **React.createElement()** are nothing but **JavaScript Objects** and then those **objects** are *converted* to **DOM**.

So the flow goes like:
_JSX_ **=>** _Babel_ **=>** _React.createElement_ **=>** _Obj_ **=>** _HTML code(DOM)_

---

>"Babel is a Beast."

---

Before compiling React JSX code, we need Babel to transpile it to the React API format.

JSX Element

```js
const reactElement = <h1>Hello World</h1>
```

Babel transpiled react version

```js
const reactElement = /*#__PURE__*/React.createElement("h1", null, "Hello World");
```

![Reactlogo](https://www.iconfinder.com/icons/1174949/download/png/48)

---

###Conclusion
- JSX is HTML-like syntax, but not actual HTML in JS file.
- Babel is a Beast.

---
[YouTube Link](https://www.youtube.com/channel/UCyjSE3te6b_--hn_Mvxs5ew "Jyotis Channel")
<jyotisemail@gmail.com>
What is the most jaw-dropping request you experienced from clients on web projects(websites)?
Tags: webdev, management, discuss, productivity
Published: 2023-01-01 14:26:13

Recently, I approached a friend who attended digital marketing classes 5-6 years ago. She was starting the making of her business website back then. Till now, I haven’t seen much significant progress. 

When I met her last time, I had many ideas and did some good research  on her consulting service business and feel it would be a great project to work on. But the timing was not suitable. So I didn’t pursue further. 

So cut the long story short, I approached her and had a long talk. Spent quite a long time on researching, consolidated the previous ideas and proposals I had back in 5-6 years ago. I wrote a brief workflow proposal with web development processes, the role of the platform, and users’ experience journey, etc. I kept it simple and let her mind to sparkle more idea from that proposal. 

And ….. this is what I got back. 
There is no SPECIAL FUNCTION mentioned in the proposal I prepared.(My response was like =.=) 
1st, she asked about what I could do and what were I good at. This question is fair enough. I briefed her on that. 

2nd, she asked if all the coding/system would be reserved in their hands so their tech guy can maintain it or if I were a partner and depends on what I could do.  That’s a fair question too. My answer is like depends on how much effort each party was putting into and how much is the investment. The share will depend on how much she and her partner invest and how much effort we put into web development. 
She also mentioned that the worries they have that we would use their know-how(consulting service specialty) or database and use on others. My answer is we are only interested in tech on how to build the system/site. 
I presumed that she has intention on blocking us from using any web coding on other consulting like services(in same industry or different industries.) For this, I feel that is unrealistic. We spend efforts on building just one website(a tree) then we will have to tie our hands from touching other similar web structure functions(the whole forest). Also unrealistic for her to pay ridiculous investment amount to block us from doing that. 

3rd, she also said there is no special functions in the proposal. I was like … puzzled and shocked that what kind of special functions she intended on having? It crossed my mind of a celebrity reality show cooking for a real life restaurant business. The perfect scenario is the food in mind will spur out straight from the dining table without the guest even say it out. 

Mind sharing your experience about projects? 

photo by pexels.com Anna Shvets
React Fundamentals: The essential skills for its developers.
Tags: react, javascript, webdev, beginners
Published: 2023-01-01 14:22:28

I have tried simplifying the essentials you need in order to become successful on your journey as a react developer. The skills you need and will need have been arranged in their respective order.

**Understanding of HTML and CSS:**
HTML (Hypertext Markup Language) is a markup language used to structure content on the web, and CSS (Cascading Style Sheets) is a stylesheet language used to style that content. Together, they form the foundation of web development. This is the foundation of every eb developer.

**Familiarity with JavaScript and the modern JavaScript ecosystem:** 
React is built with JavaScript, so it's important to have a good understanding of the language. This includes its concepts like variables, functions, and objects, as well as its advanced features like async/await and classes.


***After creating your first react app, you will need the following:***


**Knowledge of the React component model:** 
In React, a component is a piece of code that represents a part of a user interface. Components can be reused throughout an application, that makes them a powerful way to organize and structure your code.

**Experience with state management:**
A state refers to the data that drives a React application. Managing state effectively is crucial for building scalable and maintainable applications.

**Familiarity with the React lifecycle:** 
React components go through a series of steps or stage, called the lifecycle, as they are created, updated, and destroyed. Understanding this lifecycle is important for optimizing the performance of your application.

**Understanding of webpack and build tools:**
Webpack is a tool that helps you bundle and build your code for deployment. It's important to have a basic understanding of how it works and how to use it to build and deploy your React applications.

This link helps you identify the tools you need and how to set up the environment for your first react app:
https://dev.to/haltim/how-to-create-a-basic-react-application-simplified-guide-1h96

I hope this helps in explaining what you will need on your journey to become proficient in react