teleren/devto huggingface dataset:
JavaScript var keyword usage
Published: 2023-05-14 19:18:11

_JavaScript var keyword:_ **Usage and Best Practices**
In JavaScript, variables are used to store data values. The 'var' keyword is used declare a variables of any type without initializing them and it stands for variable.
here is an example of declaring a variable using 'var':
var [variable name];
In this blog post we will discuss the usage and how it differs from other type of variable declaration.
Difference between var, let and const. let is used in situation where you may want to reassign the variable again. 

let dog = "Bella";
dog = "Tracy" //reassigning the dog value

const is used to declare variables that can not be changed once declared similar to final keyword in java language. 

const cat = "Brent";
cat = "jay"// error;

Both keywords let and const can not escape block scope. On the other hand, 'var' can escape block scope but can not escape function block.
here is an example of var escaping:

for(var i = 0; i < 4; i++){
    console.log(i);// 0 1 2 3
}
console.log(i) // the value of i is 4;

Best practices is to avoid creating global variables and use let and const instead of var. var can cause issues with naming conflict and make your code difficult to read.
Azure Pricing Calculator VS TCO Calculator
Published: 2023-05-14 18:47:52

Hi everyone. Have you ever wondered what the difference between the Azure Pricing Calculator and TCO calculator is? 
We will be covering the difference and how to use these tools in this article.

**Azure Pricing Calculator**
The Azure pricing calculator is a tool used to calculate your estimated hourly or monthly costs of using Azure.
To access the calculator [click here](https://azure.microsoft.com/en-us/pricing/calculator/)
To calculate the estimates, search for your product or select from one of the categories below the search bar to add a product to your estimates. Click the 'saved estimates' tab to view your estimates 

![Products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ojnhbpf24tlb2agjdf.png)
You can input the specifications on your product such as the type, region, service tier, billing options and you will be able to view the estimate as usage hours, days or months. This estimate will also include the services required for use with selected products.
You can also modify the configuration of each products in your estimate as you continue adding products. This will allow you to check if resources overlap.

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


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

When done calculating your estimates, you can Export to Excel, Save or share your report. 

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





**Azure Total Cost of Ownership Calculator(TCO)**
This is to estimate the cost savings you can realize by migrating to the cloud.
To access the TCO calculator [click here](https://azure.microsoft.com/en-us/pricing/tco/calculator/)
**1. Define your workload**

Enter details of your on-premise infrastructure into the TCO Calculator using the following categories

- Servers
- Databases
- Storage
- Networking

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


**2. Adjust Assumptions**

Specify whether your on-premise licenses are enrolled for Software Assurance. This will enable you to reuse existing licenses on Azure, thus eliminating the costs associated with purchasing additional licensing. You can specify your need to replicate storage to another Azure region to increase redundancy. 

![Adjust Assumptions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xh8wh7w45zna2qpak7g.png)



**3. View Report**

The TCO calculator lets you choose a time frame between one and five years. The calculator then generates a report based on information entered.

You can also view a side by side comparison of the cost breakdown of operating your workload on azure vs on-premise. 

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


There you have it!!
You now know the difference between the Azure Pricing Calculator and the TCO Calculator.

Happy Learning :)
AWS Heroes in 15: Bear Conservation with ML, Serverless and Citizen Science
Tags: aws, machinelearning, tech4wildlife, video
Published: 2023-05-14 18:40:02

On April 7 I presented an AWS Heroes in 15 session, "Bear Conservation with ML, Serverless and Citizen Science". In the session I covered the following

- Developing a web application using AWS Amplify Studio
- Using serverless Lambda functions with Amazon Rekognition to automate a web application
- Leveraging Amazon Rekognition and Amazon SageMaker to engage Explore.org viewers for human-in-the-loop machine learning

Check it out here:

{% embed https://youtu.be/nHNP3-IHTkQ %}
Hello , i need know if there is any library that makes this kind of calender (Help!!)
Tags: javascript, webdev, programming, php
Published: 2023-05-14 18:38:22

So if you don't know this you can recommende a library that give you the abbility to select the the day and the time in that day ,
i trying to add reservation functionality 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zugwyp4euz5oc91tyalk.png)
Streamline Website Management with Breeze.bar -
Tags: webdev, operations, productivity, showdev
Published: 2023-05-14 18:33:52

Hey there, fellow developers and website managers! Tired of the complexities and challenges in website management? Introducing Breeze.bar, your ultimate solution to simplify and streamline your website management process.

**_If you manage more than one website you need Breeze.bar_**


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

- Automated website audits for comprehensive analysis
- Seamless Chrome extension integration for enhanced development workflow
- Live edits, screenshot capture, responsive layout checker, and environment switcher
- Collaborative playbook for storing essential agency knowledge
SEO checklists, QA processes, release workflows, and design reviews
Intuitive checklists for efficient project management
- Centralized repository for storing useful links and project-related documents
- Advanced sitemap engine for visualizing website structure
- Collaborative platform to add and manage project team members
Assignment of pages to specific owners for accountability and transparency

With Breeze.bar, you can bid farewell to manual tasks, tedious audits, and disorganized collaboration. This powerful tool empowers you to master website management with ease and efficiency.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ib6ld6n09b9lxxbbdbz.png)
As developers, we understand the importance of technical excellence. That's why Breeze.bar offers an advanced Chrome extension that seamlessly integrates into your development environment. Perform live edits, capture screenshots, check responsive layouts, and switch between environments effortlessly.

But Breeze.bar doesn't stop there. It provides a dedicated agency playbook, allowing you to store essential agency knowledge and share best practices with your team. With intuitive checklists and a centralized repository, you can manage projects efficiently and maintain consistency across your workflow.


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

Join the Breeze.bar community and revolutionize your website management process. As we prepare for our [AppSumo](https://appsumo.com/products/breeze-website-migration-management-tool?utm_source=partner-link&utm_medium=referral&utm_campaign=partner-44482) launch, we're offering an exclusive lifetime discount of 90% to early adopters like you. Your feedback will help shape the future development of this powerful tool.

Secure your lifetime discount and experience the power of Breeze.bar. Simplify your website management, boost efficiency, and elevate your projects to new heights.

Let's embrace the breeze and revolutionize website management together!

Shovan
https://breeze.bar

Appsumo: https://appsumo.com/products/breeze-website-migration-management-tool?utm_source=partner-link&utm_medium=referral&utm_campaign=partner-44482
Proposal for a framework.json file in Angular applications
Tags: angular, readability, bestpractice
Published: 2023-05-14 18:06:25

Proposal for a framework.json file in Angular applications

It is really hard sometime to figure out all the relationships between angular components, expecially when they become many.
You'd want to know with a first glance who's child of who, or parent of who, or where a component is being used.
Maybe you'd wish to know which service or directive is being shared.
I found nothing on the web helping with this problem.
So I figured out a framework file where the app framework is actually displayed.
This will be a JSON file, with the following features:

- Component: camel case string -> components' class name -> it's an object where the properties are:
    - @string (see below), in the following order: services (@Ser), directives (@Dir), models (@Model), 
	modules (@/Mod), @router-outlet;
    - other components;
    - the object will be an empty one if there are no children or @string.
- @string properties key-value -> 
    - @Ser is an array of services, elements are the services' class names (camel case);
    - @Dir is an array of directives, elements are the directives' class names (camel case);
	- @Model is an array of models, elements are the models' class names (camel case);
    - @/Mod is an array of modules, elements are the modules' selector names (exact match);
	- @router-outlet, is an object where the properties are components
- same indentation -> siblings
- different indentation -> lower is child of higher parent (or is displayed in router-outlet)

This is an instance of an example app:

```
{
	"AppComponent": {
		"HeaderComponent": {},
		"@router-outlet": {
			"RecipeComponent": {
				"@Ser": ["RecipeService"],
				"RecipeListComponent": {
					"@Ser": ["RecipeService"],
					"@Model": ["Recipe"],
					"RecipeItemComponent": {
						"@Model": ["Recipe"]
					}
				},
				"@router-outlet": {
					"RecipeStartComponent": {},
					"RecipeEditComponent": {
						"@Ser": ["RecipeService"]
					},
					"RecipeDetailComponent": {
						"@Ser": ["RecipeService"],
						"@Dir": ["DropdownDirective"],
						"@Model": ["Recipe"]
					}
				}
			},
			"ShoppingListComponent": {
				"@Ser": ["ShoppingListService"],
				"@Model": ["Ingredient"],
				"ShoppingEditComponent": {
					"@Ser": ["ShoppingListService"],
					"@Model": ["Ingredient"]
				}
			}
		}
	}
}
```

It could be a best practice to provide the app with such a file, which I would nest inside the app folder.
Suggestions and comments are welcome.
GitHub: [https://github.com/Arboricum/Improvements-for-Angular]
Expectation vs Reality of a Beginner in Programming
Tags: beginners, career, learning, webdev
Published: 2023-05-14 17:52:34


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9y35ibzt8ve0vccm3xh7.jpg)

In this article, I discussed what a self-taught programmer expects and how reality hits him/her with, um, "reality".
(_Based on true story_)

## At the dawn of time:

### Expectation 
> Oh I just need to learn HTML, CSS, and JavaScript. Many people got job offers because of these skills.

### Reality 
> Where is the end of JavaScript? Why does this language keep introducing new concepts? Why every new concept is better than the previous one? **No problem, I will learn it all!**


## A few months later:

### Expectation 
> Oh! Now I can apply for jobs!

### Reality 
> All the job circulars are expecting a candidate who knows React, Vue or Angular.

> Realization: JS is not enough. I also need to learn React. Let's start learning it. **I will learn it within one month.**


## One month later:

### Expectation 
> Oh! I know everything about React.

### Reality 
> Wait! What? So many new features are introduced! But the YouTube tutorial said it covered everything about React! What the hell is happening? What? This tutorial was uploaded 2 years ago. **Why does the tech world change so faaaaast?**


## A few months later:

### Expectation
> Now I know everything about React. Nobody can beat me on skills.

### Reality
> I need to know some backend skills too. Okay! I will learn some Node and Express!


## A few months later:

### Expectation
> There! This is it. Now I am a complete person! I am an ocean of knowledge!

### Reality
> Why are people talking about **TypeScript**? It's a superset of JS?? Seriously? JavaScript again?? What kind of infinite loop is this JS? Where does it end?


## After a few days:

### Expectation
> Yeah! I am a genius! I know TypeScript! Maybe this is the end!

### Reality
> Enters Next.js! Enters Redux! Enters Redux-toolkit! Enters SQL! Enters Prisma! Enters…


## After a few months:

**Wisdom** : Okay. I understand it now. This is a career of eternal learning. I will never be a complete know-it-all! I will keep learning, and most importantly, I will help others learn.


Legendary programmer `John Carmack` once said, 

> You can't learn everything. But you have to convince yourself that you can learn anything.
Understanding Const Variable in Javascript
Tags: webdev, javascript, frontend, programming
Published: 2023-05-14 17:49:07

So if you have worked with JavaScript a bit you must know that **Const** is a keyword which is used to define a new variable in JavaScript.

It is used to declare a variable with a constant value. Once a variable is declared with const, its value cannot be reassigned a new value once it has been initialized.

For example

```
const x = 45
x = 76 //throws error
```
Makes sense right? Its a constant, obviously we can't change its value.

But...

I have seen a strange behaviour in the working of const. When I declare and array or object as a **const** I am still able to add or push or update the values in this 'constant'  array or object.

Lets see an example 

```
const x = [1,2,3]
x[0] = 4

const y = {name:'john', gender:'male'}
y.name = 'bob' 

console.log(x ,'\n', y)
// [ 4, 2, 3 ] 
// { name: 'bob', gender: 'male' }
```

See? I was able to make changes in both array and the object.

But why does this happen?

So this is happening because both arrays and objects are reference type of values. Meaning the variable is not storing the direct value i.e. [1,2,4] but its just storing the address of this array or object. 

The actual array is stored elsewhere which is not constant, as the const variable is just storing the address, so in this way only the address is constant, so if you try to change the address by giving a totally new value to the variable then It'll definitely throw an error
For example

```
const x = [3,6,7]
x = [7,8,9] //throws error
```
and that's also the reason why we can't update the value when the value is a primitive type like int, string, or Boolean etc. 
Because they are passed by value and not reference so the variable is holding its value and as its constant you cant make any change to it.

Now there is one more interesting thing among the primitive types,

So if you declare an integer value using a const variable and try to change it, it will directly throw an error, but if you created a string like 

```
const x = 'my string'
```
and then try to change the value at x[0]. You'll see that when you console.log x after that, there will be no change in the string, and it didn't even throw any errors.

Why does this happen?
From what I understand this because string have an indexed character structure, while numbers do not, when you try to modify a string using x[0] JavaScript creates a new string and therefore the original one is not modified and hence no error, but when you try to change a number you are changing its value directly and that's why its throwing an error.

Now when we use any method on string like replace or toLowerCase or any other , it creates a new string and that's why we always assign it to a new variable. 

And this behavior is not something you'll see only while using const variable but its the common behavior that string shows in JavaScript.
Just thought that I should add this too.

Thanks for reading this far ❤️
10 Visuals That Will Boost Your Mindset
Tags: motivation, webdev, productivity, watercooler
Published: 2023-05-14 17:32:47

You may become the best version of yourself with the help of these graphics.

### 1. 



![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ljmfrjlr81s3j14jkj8.png)



---

### 2. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0uctvpxfp0epztxnba1.png)

---

### 3. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3xup1fjo8aacwbeozic.png)

---

### 4. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecm6icyubpnmbxoyv7pf.png)

---

### 5. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8nvk2k6cjmfn6jfoyxi.png)


---

### 6. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zk7w2rrzy6ksadnjg51f.png)


---


### 7. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iuiethckqi44ayax61x.png)

---

### 8. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9xpommj1qyy7k4svike.png)


---

### 9. 



![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46og1udwwn3a38u8ocad.png)

---

### 10. 


![10 Visuals That Will Boost Your Mindset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/baaic1kk66zrfeb5l5w2.png)

---

#### Credit : [Pejman Milani](https://www.linkedin.com/in/pejmanmilani/)

[Source](https://www.linkedin.com/posts/pejmanmilani_10-visuals-by-milanicreative-ugcPost-7063153415341703169-FOIL/)

---


---

### Check Our Latest Post 

{% link https://dev.to/jon_snow789/top-10-chatgpt-plugins-you-cant-miss-1k68 %}

---

Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)

---

{% twitter 1655834579394252800 %}
Cleaning Up Your Git commits
Tags: github, git, npm, node
Published: 2023-05-14 17:19:34


If you're a code junkie like me, you know how frustrating it can be to push a bunch of messy, disorganised code to your Git repository. It's like watching a train wreck in slow motion! Fortunately, GitNuke is here to save the day.

GitNuke is a command-line tool that lets you clean up your Git repository by deleting the entire history of a branch. With GitNuke, you can start fresh and get rid of all that old, useless code cluttering up your repository. It's like hitting the reset button on your codebase.

Using GitNuke is super easy. Just install it using npm, navigate to your repository, and run the command git-nuke. GitNuke will do the rest, deleting the entire history of the current branch and pushing the changes to the remote repository. It's like magic!

If you're not sure how to use GitNuke, don't worry. It comes with built-in help and version options, so you can easily figure out what you need to do. And if you run into any issues, you can always contact the developer or submit an issue on GitHub.

Personally, I love GitNuke because it lets me keep my codebase nice and tidy. I can delete all the old, messy code I don't need anymore and start fresh with a clean slate. It makes collaboration with other developers a breeze because they don't have to sift through a bunch of unnecessary code to find what they're looking for.

So if you're tired of dealing with messy, disorganised code, give GitNuke a try. It's a powerful tool that can help you take control of your codebase and streamline your development workflow. 

npm: [git-nuke](npm.im/git-nuke) _//same for yarn and pnpm_
github: [git-nuke](github.com/atom06/git-nuke)

And don't forget to **Break The Mold**,
_Catch U Later_,
_Carbon_
Troubleshooting Common Issues in Apache AGE
Published: 2023-05-14 17:04:28

## Introduction:
When working with Apache AGE, a PostgreSQL extension for graph database functionality, you may encounter various issues or challenges. This article aims to help you troubleshoot some of the most common problems you might face when using Apache AGE.

**Installation and Setup Issues**

- Ensure that your PostgreSQL version is compatible with Apache AGE.
- Check if you have the required dependencies installed.
- Make sure the Apache AGE extension is properly added to your PostgreSQL installation.

**Connection Problems**

- Verify that the Apache AGE server is running and accepting connections.
- Check your connection settings, such as host, port, and authentication details.
- Ensure there are no firewall or network issues preventing the connection.

**Query Syntax Errors**

- Review the syntax of your openCypher queries to ensure they follow the correct structure.
- Make sure to use the correct labels, properties, and relationship types in your queries.
- Be aware of case sensitivity in openCypher.

**Data Modeling Challenges**

- Design your graph schema with proper labels, relationships, and properties.
- Ensure that your data model aligns with your specific use case and query requirements.
- Consider using indexes to optimize query performance.

**Performance and Scalability Issues**

- Monitor and analyze query performance to identify bottlenecks.
- Optimize your openCypher queries to minimize resource usage.
- Consider partitioning your graph data or using parallel processing for large-scale graphs.

**Data Import and Export Issues**

- Verify the format and structure of your data files before importing.
- Check for errors or issues during the data import process.
- Ensure that you have the necessary permissions to access and modify the data files.

**Security Concerns**

- Implement proper authentication and authorization for your Apache AGE server.
- Regularly update your PostgreSQL and Apache AGE installations to apply security patches.
- Follow best practices for securing your data and infrastructure.

## Conclusion:
By understanding and addressing these common issues in Apache AGE, you can ensure a smoother experience while working with this powerful graph database extension. As you gain more experience with Apache AGE, you will likely encounter additional challenges specific to your use case, but these troubleshooting tips should provide a solid foundation to help you get started.

## Contribute to Apache AGE
Apache AGE website: [https://age.apache.org/](https://age.apache.org/
)

Apache AGE Github: [https://github.com/apache/age](https://github.com/apache/age)