teleren/devto huggingface dataset:
84 : How JS libraries vary
Published: 2021-03-23 06:54:50

*let me try to explain as simple as possible in terms of JS libraries.*


###What is JS Libraries :
I would use the one metaphor word, we entered the JS Harry porter’s library. Now we can search depending on a category at the library, it can be ‘history’, ‘science’, ‘fiction’, ‘non-fiction’, ‘environment’ and what else it can find out? It depends on what we like to make.

--------------------


* To give a common definition, I rent Wikipedia.

With the expanded demands for JavaScript, an easier means for programmers to develop such dynamic interfaces was needed. Thus, JavaScript libraries and JavaScript widget libraries were developed, allowing developers to concentrate more upon more distinctive applications of Ajax.


--------------------

###What kind of JS libraries:
[Welcome to JS libarires](https://getflywheel.com/layout/best-javascript-libraries-frameworks-2020/)


--------------------

###How can it be varied :
* Dynamic user interfaces
* SPA (single page application)
* Interactive website
* Creative 3D art
… and can be more any web pages, as long as JS creates… there’s no limit!
How to Center Content in CSS Vertically & Horizontally | Align Div or Text Middle CSS
Tags: html, css, webdev, javascript
Published: 2021-03-23 06:53:42

We will address the following related queries in this post

**How do you center align content in CSS?**
**How do I align the contents of a div center?**
**How do you align-items in CSS?**
**How do I center align vertically in CSS?**

As a web programmer will deal with this problem many times while writing CSS code to align the center of the item inside the container div. in this tutorial we will solve this problem. The Box Alignment Specification deals with how we align everything else. The specification details the following CSS alignment properties:

**justify-content**
**align-content**
**justify-self**
**align-self**
**justify-items**
**align-items**

**Watch Video Tutorial**

{% youtube vbkLLLArSJQ %}

You might already think of these properties as being part of the Flexbox Specification, or perhaps Grid. The history of the properties is that they originated as part of Flexbox, and still exist in the Level 1 specification; however, they were moved into their own specification when it became apparent that they were more generally useful. We now also use them in Grid Layout, and they are specified for other layout methods too, although current browser support means that you won’t be able to use them just yet.


------------------------------------------------------------------
Please have a look at my website for more details!
https://hmawebdesign.com
------------------------------------------------------------------

Suggested Videos:

How to Send Email to Client Using PHP Mail Function | Sending Email in PHP 2021 Tutorial
https://youtu.be/DeqOVJ-aXkg

$_POST | What is the Post Variable in PHP | How to Use Post Variables in PHP 2021
https://youtu.be/HO-TrXY4a1A

How to Define Variables in PHP | How to Create PHP Variables | (PHP tutorial-3) - 2021
https://youtu.be/bfqAa0Gm3YY

How to Start First PHP Web Project on Local Server/Localhost PHP Tutorial-2
https://youtu.be/18I7U4-nJb0

How to Start Web Project with Microsoft Visual Studio 2021 | Visual Studio Project
https://youtu.be/MLzuQ_pH9Ew

How to Get Start PHP Hello World Page on Live Web Server  |  PHP Tutorial - 1
https://youtu.be/Uc7uLD7Ur6M
-------------------------------------------------------------------------------------------------
Contact me through social media for web development work:

- Fiverr             https://www.fiverr.com/haaddison1?up_rollout=true
-  witter:          https://twitter.com/HmaWebdesign
- Facebook:    https://web.facebook.com/HmaWebdesign
- LinkedIn:      https://www.linkedin.com/in/engrmianayub/
- Instagram     https://www.instagram.com/hmawebdesign/
How to Add Font Awesome Icons in HTML Website in 2021 Font Awesome Installation Guide
Tags: html, css, webdev, javascript
Published: 2021-03-23 06:44:09

*Related Queries to address in this post:*

**How do I add font awesome to HTML?**
**How do I add icons to Font Awesome?**
**How do I use Font Awesome 5 icons in HTML?**
**How do I use font awesome icons in HTML locally?**

##What are Font Awesome Icons?##

Font Awesome is the most popular way to add font icons to your website. Font Awesome icons are created using scalable vectors, so you can use high-quality icons that work well on any screen size.
Font Awesome CDN is the easiest way to get Font Awesome on your website or app, all with just a single line of code. No downloading or installing! n this tutorial, you will learn how to create icons using just CSS and fonts. This will allow you to edit all your graphics with just a few lines of code. By using font-based graphics you also make your pages lighter and more responsive.

**Watch Step by Step Guide**

{% youtube oKKwGPKuEtY %}

The most popular font for creating CSS-based icons is Font Awesome. This font and icon toolkit was created by Dave Gandy, originally for Twitter Bootstrap, and is available free under SIL Open Font License 1.1, Creative Commons Attribution 4.0, and MIT License.

The Font Awesome website can be found at https://fontawesome.com/

font awesome icons,
font awesome icons cdn,
how to use font awesome icons,
font awesome 5 cdn,
install font awesome,
font awesome html icons,
font awesome not working,
font awesome icons download,
-------------------------------------------------------------------------------------------------
Please have a look at my website for more details!
https://hmawebdesign.com
-------------------------------------------------------------------------------------------------

Suggested Videos:

How to Send Email to Client Using PHP Mail Function | Sending Email in PHP 2021 Tutorial
https://youtu.be/DeqOVJ-aXkg

$_POST | What is the Post Variable in PHP | How to Use Post Variables in PHP 2021
https://youtu.be/HO-TrXY4a1A

How to Define Variables in PHP | How to Create PHP Variables | (PHP tutorial-3) - 2021
https://youtu.be/bfqAa0Gm3YY

How to Start First PHP Web Project on Local Server/Localhost PHP Tutorial-2
https://youtu.be/18I7U4-nJb0

How to Start Web Project with Microsoft Visual Studio 2021 | Visual Studio Project
https://youtu.be/MLzuQ_pH9Ew

How to Get Start PHP Hello World Page on Live Web Server  |  PHP Tutorial - 1
https://youtu.be/Uc7uLD7Ur6M
-------------------------------------------------------------------------------------------------
Contact me through social media for web development work:

- Fiverr             https://www.fiverr.com/haaddison1?up_rollout=true
-  witter:          https://twitter.com/HmaWebdesign
- Facebook:    https://web.facebook.com/HmaWebdesign
- LinkedIn:      https://www.linkedin.com/in/engrmianayub/
- Instagram     https://www.instagram.com/hmawebdesign/
Day 3 Of #100DAYSOFCODE
Published: 2021-03-23 06:38:50

Yesterday was my Day 3 of #100DaysOfCode, I learned how to build a calculator using JavaScript.
Things I learned on this day: 
1. To set values using data variables 
2. To use functions effectively.
3. got to know about the add and remove
4. Used constructor class 

Github: 
 For Code: https://github.com/ashuydv/calculator
 For Preview: https://ashuydv.github.io/calculator/

Thanks for your valuable time !!!
How to Install WordPress in Your Computer in 2021 | Step by Step Installation Guide | XAMP Localhost
Tags: wordpress, webdev, database, localhost
Published: 2021-03-23 06:33:47

If you have related queries in your mind

**How do I manually install WordPress?**
**How do I install WordPress on my computer?**
**How do I install WordPress for free?**
**How do I install WordPress in 2021?**

In this tutorial, I will explain how you can install WordPress on your local computer and complete step by step installation guide. First of all, let me explain to you briefly about WordPress. 

now let's start the installation process. There are two WordPress official websites, the first one is [wordpress.org](https://wordpress.org) and the second one is [wordpress.com](https://wordpress.com). We will download our WordPress from https://wordpress.org. Before installing WordPress, you need to install xampp application. what is xampp application? WordPress needs a hosting space where our website file will be store. Hosting may be remote hosting or local hosting. xampp application will convert your local computer into a localhost server where your WordPress files will be store.

##Watch Full WordPress Installation Guide:

{% youtube Sh9jpZYGMhQ %}

##Step by Step WordPress Installation Process:

Step 1: Download WordPress. Download the WordPress package to your local computer from https://wordpress.org/download/.
 Step 2: Install XAMPP application from https://www.apachefriends.org/download.html  website
 Step 3: Create MySQL Database and User. 
Step 4: Configure wp-config.
Step 5: Run the Installation. 
Step 6: Complete the Installation.

---------------------------------------------------------------------------------
Please have a look at my website for more details!
https://hmawebdesign.com
--------------------------------------------------------------------------------

Suggested Videos:

How to Send Email to Client Using PHP Mail Function | Sending Email in PHP 2021 Tutorial
https://youtu.be/DeqOVJ-aXkg

$_POST | What is the Post Variable in PHP | How to Use Post Variables in PHP 2021
https://youtu.be/HO-TrXY4a1A

How to Define Variables in PHP | How to Create PHP Variables | (PHP tutorial-3) - 2021
https://youtu.be/bfqAa0Gm3YY

How to Start First PHP Web Project on Local Server/Localhost PHP Tutorial-2
https://youtu.be/18I7U4-nJb0

How to Start Web Project with Microsoft Visual Studio 2021 | Visual Studio Project
https://youtu.be/MLzuQ_pH9Ew

How to Get Start PHP Hello World Page on Live Web Server  |  PHP Tutorial - 1
https://youtu.be/Uc7uLD7Ur6M
-------------------------------------------------------------------------------------------------
Contact me through social media for web development work:

- Fiverr             https://www.fiverr.com/haaddison1?up_rollout=true
-  witter:          https://twitter.com/HmaWebdesign
- Facebook:    https://web.facebook.com/HmaWebdesign
- LinkedIn:      https://www.linkedin.com/in/engrmianayub/
- Instagram     https://www.instagram.com/hmawebdesign/
Day 9 of 100 days of SwiftUI
Tags: swift, 100daysofcode, 100daysofswiftui
Published: 2021-03-23 06:18:40

Day 9 of HackingWithSwift's 100 days of SwiftUI. Today I learnt advance features of  Structs such as access control, static properties, and laziness.

Lazy properties are a special kind of properties in Swift that are created only when they are needed. They are created the first time they are needed and reused later on. Lazy properties in Swift are written like this `lazy multiplayer = Multiplayer()`.
 Lazy properties are mostly used for properties that are not needed immediately the struct is created and are also take a bit of time to create.

Static properties and methods are properties and methods of the Struct itself not properties and methods of instances of the Struct. Static properties are used to store functionality that you use across your app.
```
struct CalculationUtils {
 static func addNumbers(numbers...) -> Int {
     var sum = 0
     for number in numbers {
       sum += number
     }
     return sum
  }
}

let sum = CalculationUtils.addNumbers(1,2,3,4)
```
The code above creates a Struct with a static function `addNumbers`. Since `addNumbers` is a static function, it can be called directly as a method of `CalculationUtils` instead of first creating an instance of  `CalculationUtils` as you would a normal function.

Access control is a Swift feature that helps you limit which code can call properties and method of your struct. As far as I know, there are two types of access control in Swift: private and public access control. Using the public access control member means every code has access to method and properties of your struct while using the private access control member means only code in that struct have access to its method and properties.

If you are interested in taking the challenge, you can find it at https://www.hackingwithswift.com/100/swiftui
See you tomorrow ;)
[Error] Id returned 1 exit status
Tags: errors
Published: 2021-03-23 06:01:16

#include <iostream>
#include <string>

using namespace std;

double input(double a1, double a2, double sw1, double sw2, double q1, double q2, double e);
double calculator(double a1, double a2, double sw1, double sw2, double q1, double q2, double e);
void printingresult(int final);
void loop(char ans);
int main() {

	char fname[50], ans;
	double assign1, assign2, seatwork1, seatwork2, quiz1, quiz2, exam;
	double final;

	cout << "Enter student name: ";
	cin >> fname;
	input(assign1, assign2, seatwork1, seatwork2, quiz1, quiz2, exam);
	final = calculator(assign1, assign2, seatwork1, seatwork2, quiz1, quiz2, exam);

	do {
		printingresult(final);
		cout << "\n\tTry another Y/N: ";
		cin >> ans;
	} while (ans != 'N' && ans != 'n');

	system("pause");
	return 0;
}

double input(double a1, double a2, double sw1, double sw2, double q1, double q2, double e)
{
	cout << "\nEnter grade for assignment 1: ";
	cin >> a1;


	cout << "Enter grade for assignment 2: ";
	cin >> a2;

	cout << "\nEnter grade for seatwork 1: ";
	cin >> sw1;

	cout << "Enter grade for seatwork 2: ";
	cin >> sw2;

	cout << "\nEnter grade for quiz 1: ";
	cin >> q1;

	cout << "Enter grade for quiz 2: ";
	cin >> q2;

	cout << "\nEnter grade for major exam: ";
	cin >> e;
}

double calculation(double a1, double a2, double sw1, double sw2, double q1, double q2, double e)
{
	double x;
	x = (((a1 + a2) / 2) * .10) + (((sw1 + sw2) / 2) * .20) + (((q1 + q2) / 2) * .30) + (e * .40);
	return x;
}

void printingresult(double final)
{
	cout << "\n\nFinal Grade: " << final << endl;
	if (final >= 99) {
		cout << "1.00" << endl;
	}
	else if (final >= 96) {
		cout << "1.25" << endl;
	}
	else if (final >= 93) {
		cout << "1.50" << endl;
	}
	else if (final >= 90) {
		cout << "1.75" << endl;
	}
	else if (final >= 87) {
		cout << "2.00" << endl;
	}
	else if (final >= 84) {
		cout << "2.25" << endl;
	}
	else if (final >= 81) {
		cout << "2.50" << endl;
	}
	else if (final >= 78) {
		cout << "2.75" << endl;
	}
	else if (final >= 75) {
		cout << "3.00" << endl;
	}
	else if (final <= 74) {
		cout << "5" << endl;
	}

}
How to Use Text To Speech In Chrome with JS
Tags: javascript, text2speech
Published: 2021-03-23 05:58:42

>![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd51v5jrwzxit0t08fy4.png)
> Text To Speech [**Speech Synthesis API**]

### API Usage:

> JavaScript
```javascript
var T2S; 

if("speechSynthesis" in window || speechSynthesis){ // Checking If speechSynthesis Is Supported.

	var text = prompt("What Text To Say?") || `Text To Speech is Over Powered`; // Ask What To Say or use Default

	T2S = window.speechSynthesis || speechSynthesis; // Storing speechSynthesis API as variable - T2S
	var utter = new SpeechSynthesisUtterance(text); // To Make The Utterance
	T2S.speak(utter); // To Speak The Utterance
	
	window.onbeforeunload = function(){
		T2S.cancel(); // To Stop Speaking If the Page Is Closed.
	}

}
```
Pls React & Save!
How Do you fix Lenovo laptop sound not working? 
Tags: lenovo, laptop, programming
Published: 2021-03-23 05:34:32

Nowadays, the computers are not limited to the calculations only. they are also performing other important tasks. Which makes our life much easier. While, talking about the computer and networking related things. 
Apart from the working machine, the computers are also working as a entertainment gadget. Where, you can watch lots of movies and play the videos as well. 
Due to which, having the speakers on the laptop is most important thing. Although Lenovo computer are always offering a good quality speakers, but still some users are dealing with the [Lenovo laptop sound not working problem](https://www.askprob.com/lenovo-laptop-no-sound-problem/) while playing music or movies. Generally speakers are not working on the Lenovo laptop because of few reasons. 
1.	The driver is missing. 
2.	Audio is muted. 
3.	Speakers volume is low. 
4.	Windows related issue. 
5.	Sound settings are incorrect. 
To fix these settings, you need to change the speaker settings. here are the steps for that. you may apply it on your devices. 
1.	Whenever you’re unable to hear the audio from the laptop. You should check the mute functionality. If the sound is muted on the laptop. You need to unmute them by using the f1 key on the Lenovo computer. 
2.	Please increase the volume on the Lenovo laptop, there are high chances of low volume. That’s why speakers are not giving the output of any noise. So, you should make the volume at it’s maximum level. Now play some files on the laptop again. 
3.	If you sees a red cross on the speaker. It means the sound driver isn’t working or it is not installed properly. that’s why you are getting such errors. so you need to uninstall the sound driver from your laptop and install a newer version of laptop. Now retry to access the internet again. 
4.	Also, check for the driver update. The driver might need to be updated. That’s why it is not functioning. So remove the current driver and install a new driver. Now retry to access the webmail again. 
5.	Please uninstall the duplicate drivers from your laptop and install a new driver into your laptop. 
6.	Go to the windows service manager and restart the audio service on the laptop once. Now retry to access the webmail again. if it isn’t working well. you need to uninstall the current laptop and install a new laptop into your computer.
7.	If you have already made these changes into your laptop, but unable to get the sound from your machine. please factory reset the computer and install a newer version of driver. 
8.	It doesn’t happen quite often, but if you don’t update the windows time to time. you may have to deal with such problems. in that case, you have to update the windows to get the sound working again. 
After changing these settings, if the sound isn’t working on the laptop yet. you need to check the wiring of the speakers. Probably, they are damaged. That’s why you can’t hear the audio from them. 
If you aren’t a tech person. I would suggest you to visit the nearest Lenovo service centre for more help.
Best Free Design Resources
Tags: design, resources, tools, free
Published: 2021-03-23 04:44:19

## Content

1. Colors
2. Fonts
3. Icons
4. Illustrations/Images

## Colors

1. [happyhues.co](https://www.happyhues.co/)
 
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314377162/nkw3WzUIH.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314409026/NkTPNot7n.png)

2. [palettegenerator](https://palettegenerator.colorion.co/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314522649/rzl_wbbrY.png)

3. (gradihunt)[https://gradihunt.com/]

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314580016/PVyZ5GM0D.png)

4. [hypercolor](https://hypercolor.dev/)

A curated collection of beautiful premade gradients using default colors from the Tailwind CSS color palette. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314664157/f80VRAvKl.png)

## Fonts

1. [FontSpark](https://fontspark.app/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314781177/0fAhuyWJu.png)

2. [variable fonts](https://v-fonts.com/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614314838945/Qp7p5BcU1.png)


## Icons

1. [Flaticon](https://www.flaticon.com/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614315060175/nkVWd-njF.png)
2. [icons8](https://icons8.com/)
3. [svgrepo](https://www.svgrepo.com/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614315011423/jjIXwMm_n.png)

## Illustrations/Images

1. [DrawKit](https://www.drawkit.io/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614315189935/Fn3OHK6__.png)

2. [undraw](https://undraw.co/illustrations)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614315235621/luXJWnojR.png)

3. [vectorove](https://vectorove.com/)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614315337228/uznDLMnV1.png)

Previously published at [Design Resources](https://maniteja19.hashnode.dev/free-and-best-design-resources-cklltxdhr02ryr8s13bjb98zd)

**Feel free to add more**
Reflections on Week 2 of CodeCollab
Tags: beginners, career, collaboration, womenintech
Published: 2021-03-23 04:25:02

We ended week 2 with a team sprint meeting. Here are my reflections on the week. 

#### The Technical

In the first week, we spent time planning out what our MVP could look like and created issues/PRs to create our database. In the first week, we mostly worked either on local environment setup or in the same area of the stack. 

In the second, we’re seeing a bit more divergence with the issues we’re working on. Some are implementing our core database structure to unblock the issues created in week 1. Others continued with their environment set up. I worked on setting up a wireframe for our MVP. 

I will share a separate post about wireframing for developers later on.


#### Inter- / Intra-personal

As our tasks begin to diverge, I find that it is easier to lose track of what everyone else is working on. I worried that if I lost track of progress, I would not be able to help peers with their issues or to catch up with progress on other parts of the stack when I’m finished with my issues. 

But Ms. Arit reminds us to practice being less judgemental of ourselves with this work. There is no need to feel ashamed of not knowing! She encourages us to ask for demos and help as needed. We can lean on each other for support. 

I find that I am building more trust with myself, my abilities, and my teammates. 

When technical issues came up this week, a peer was available to jump on a quick call to help me out or Ms. Arit would create a demo video for easy reference. When I was deliberating while reviewing someone else’s Pull Request, I referenced the threads and GH issues about the issue. When a peer had questions about some comments, we jumped on a call to discuss them. 

Because discussions are tracked on GH and Slack and plans are explicitly written out, I find it easy to quickly get up to speed. It is also practice in trusting that I can get up to speed as needed.

After this week, I can see the value of leaning towards over-communication. It is one thing to collaborate with someone during pair programming sessions, but another to actively communicate across time zones spanning from PST and EST in the United States to GMT in Europe. 

There were delightful moments of communication this week, but also moments where it seemed like I or someone else was posting into a void. To avoid the voids, I want to practice proactively communicating in the written form and vocalizing my process in our project slack channel in the upcoming weeks.