teleren/devto huggingface dataset:
15 Useful HTML attributes every web developer should know
Tags: webdev, programming, html, beginners
Published: 2023-02-14 12:44:45

HTML Attribute is the modifier used to provide additional information about the elements and defines the behavior of that element. 

This attribute helps not only enhance your web page performance but also makes your coding life easy and you will feel like a coding ninja😎.

This blog will guide you on how you can enhance the performance of your website by using some HTML attributes. It includes `srcset`, `sizes`, `picture`, `download`, `accept`, `inputmode`, `pattern`, `readonly`, `autofocus`, `autoplay`.

For this article, I’ll assume you can write a decent amount of code in HTML.

And with that confirmation let’s go ahead…

These attributes in place help to increase your productivity and eventually the performance of your website.

The `srcset`, `sizes`, `picture`, and `media` attributes look complicated, but they're easy to understand if you format them as shown above. 

On the other hand `pattern` , `inputmode`, `download`, and `accept` are basically used while taking input from users for the accuracy of data.

That's it for today, Keep exploring!!!

For implementation details and examples, check out our [canopas blog](https://blog.canopas.com/15-useful-html-attributes-you-need-to-know-bff697b4c29).
Migrate calendar from G Suite to Office 365
Tags: programming, tutorial
Published: 2023-02-14 12:42:02

Are you looking to migrate into the Office 365 environment? Already moved other data but looking to migrate the calendar of the G Suite into the newer account. We will help users accomplish their requirements to [migrate calendar from G suite to Office 365](https://www.shoviv.com/blog/migrate-g-suite-calendar-to-office-365/) while introducing one reliable utility. The reason why we don’t suggest looking for the manual solution because of the complex technicalities involved in them. 

Shoviv [G Suite to Office 365 migration tool](https://www.shoviv.com/g-suite-to-office365.html) is one of them, making it way easier to migrate the G Suite calendar and its mailboxes into the Office 365 account in a couple of simpler steps. Due to its smoother GUI making, the migration becomes easier. Let’s introduce some of its user-centric features which are as follows:

•	It comes with one of the essential features, which is its data filter facility. Due to its users can choose, it’s restricting any non-required item to move into Office 365.
•	Users can choose to use its migration scheduling facility, which makes it easier to run the migration at different times.
•	It also includes the incremental export functionality that is important when the user resumes the migration.

To check how this software performs, download the software's free version.
Builder.Ai is the one no-code app builder platform founded by entrepreneur Sachin Dev Duggal.
Tags: webdev, appwritehack, developm
Published: 2023-02-14 12:25:19

Have you ever noticed how the world is evolving with new Artificial Intelligence (AI) tech products like ChatGPT, BardAI, Chorus.ai, and Infosys Nia? There is much more in a queue that skyrockets your business growth with just one click. There is one AI app builder platform that helps in creating your business online without coding knowledge, i.e. Builder.ai. Behind the Idea and Concepts of builder.ai is entrepreneur [Sachin Dev Duggal](https://www.hindustantimes.com/brand-stories/builderais-futuristic-aim-is-to-expand-its-global-footprint-in-india-101675852932047.html). You use this AI app builder to create your business and another chatbot AI to expand business growth. [Sachin Dev Duggal](https://www.hindustantimes.com/brand-stories/builderais-futuristic-aim-is-to-expand-its-global-footprint-in-india-101675852932047.html) says, “Indian software development sector needs magic that attracts investors, and it only comes when you only create your own app with your unique idea because no other can understand your need and desire than you.”

The most revolutionary technology we are witnessing right now is AI. AI enables people, businesses, and communities to reach their full potential by assisting in the early diagnosis of illnesses and allowing users to access information in their native tongue. And it creates new possibilities that have the potential to greatly enhance the lives of billions of people as well as their business potential.

**_Read Here :_** **[https://www.hindustantimes.com/brand-stories/modern-ai-innovations-to-ladder-up-your-business-growth-at-ease-101676284958872.html](https://www.hindustantimes.com/brand-stories/modern-ai-innovations-to-ladder-up-your-business-growth-at-ease-101676284958872.html)**
Circle - Free React Theme
Tags: react, theme, modern, minimal
Published: 2023-02-14 11:48:11

Circle is a React Creative Template. It is a modern, clean and professional template. It helps you to make your own site. It is suitable for any startup business, companies, agencies, and freelancers which need a professional way to showcase their projects and services with 100% super responsive experience.

[Preview](https://circle-theme-app-unjsb.ondigitalocean.app/)
[Download Free](https://github.com/Unmaad-Studio/Circle-React-Theme)
How to deploy a full-stack web app to production
Published: 2023-02-14 08:42:49

**Technologies for a project**

1. **Web application** — client-side code (ex: ReactJS, VueJS, etc.)

2. **Backend server** — server-side code (ex: Python, Node.js, etc.)

3. **Database** — storage for your data (ex: MySQL, Redis, PostgreSQL, etc.)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt5uvam1buca6t441bde.jpg)
**Web application**

1. Vercel — Vercel combines the best developer experience with an obsessive focus on end-user performance. Our platform enables frontend teams to do their best work.
2. Netlify — The fastest way to combine your favorite tools and APIs to build the fastest sites, stores, and apps for the web.
3. Firebase Hosting — Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and micro-services.
4. Github Pages — Hosted directly from your GitHub repository. Just edit, push, and your changes are live.
5. Surge — Simple, single-command web publishing. Publish HTML, CSS, and JS for free, without leaving the command line.
6. Cloudflare — Free tier for public static pages, serverless worker

**Backend server**

1. Railway — Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy it to the cloud.

**Database**

1. Upstash — A serverless database for Redis, Kafka
2. MongoDB Atlas — The most advanced cloud database service on the market, with unmatched data distribution and mobility across AWS, Azure, and Google Cloud, built-in automation for resource and workload optimization, and so much more.
3. PlanetScale — The MySQL-compatible serverless database platform.
4. Firebase Realtime Database — Store and sync data with our NoSQL cloud database. Data is synced across all clients in real-time and remains available when your app goes offline.

**Analytics**

1. Hotjar — Understand how users behave on your site, what they need, and how they feel, fast.
2. Clarity — Clarity is a free, easy-to-use tool that captures how real people actually use your site. Setup is easy and you’ll start getting data in minutes.
3. OpenReplay — Open-source session replay suite, built for developers and self-hosted for full control over your data.
4. LogRocket — Combines session replay, performance monitoring, and product analytics — empowering software teams to create the ideal web and mobile product experience
HANDLE MULTIPLE ENVIRONMENTS IN REACT JS
Tags: javascript, react, webdev, programming
Published: 2023-02-14 11:19:23


## We need multiple environment for different environments. by following method we can provide specific URL to specific development environment.



Create new React app

```
npx create-react-app envtest
```

Open the react project in the IDE

Install the dependency **env-cmd**

```
npm i env-cmd
```

Create env files in the root folder of the project
.env
.env-local
.env-prod

**Note: you can make development environments, like QA or DEV, depending on your requirements.**

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

In .env, Add the project name as,

```
REACT_APP_NAME = APPNAME
```

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

In env-local and env-prod, add the respective environment URL as,

```
REACT_APP_ENV = respective env name
REACT_APP_API_URL = respective URL
```

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


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

Modify the package.json 
In Script  object, 
Remove the start line and add new start script:

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

For start, 
**Local**

```
“start:local” : “env-cmd -f .env-local  react-script  start”
```

**Production** 

```
“start:prod” : “env-cmd -f .env-prod react-script start
```

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


Similarly for build,

**Local**

```
“build:local” : “env-cmd -f .env-local react-script build”
```

**Production**

```
“build:Prod” : “env-cmd -f .env-prod react-script build”
```

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

Now you can access the URL string, env name from the App.js or any other components where do you want.

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

To run the project,

**Run in Local:** 

```
npm run start:local
```

**Run in Production:** 

```
npm run start:prod
```

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


**Additional Note:**

To build the project,
**Build for Local:** 

```
npm run build:local
```
**Build for Production:** 

```
npm run build:prod
```

To Test the build,

We have to Install Serve : 
To install Serve, 

```
npm install -g serve
```

To start the build,
	

```
Serve -s build
```

## Thanks For Reading
If you found this blog useful, Please like the blog.

Want to connect? Reach me on [Linkedin](https://www.linkedin.com/in/prabirbiswas/)

Wanna see my work? Look into [Github](https://github.com/prabirbiswas)
Open/Close Store Hours & Maintenance mode For WooCommerce
Published: 2023-02-14 10:47:41

Streamline the operation of your e-commerce store with the WooCommerce Open Close Plugin. Many store owners become frustrated with having to manually communicate their business hours to customers. But this plugin automates the process by allowing you to set open and close times, break hours, and hide the "add to cart" button when the store is closed. You can also impose restrictions on specific products for shopping and notify customers via email of any store closures for events.


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

With the [WooCommerce Maintenance Mode Plugin](https://woocommerce.com/products/open-close-store-hours-for-woocommerce/), you can set up automatic pop-up notifications and display messages for store closures. You can also set a timer for the messages to disappear automatically or give customers the option to do so manually.


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

The [WooCommerce Coming Soon Page](https://woocommerce.com/document/open-close-store-hours/) helps you to inform customers of holiday closures and upcoming events. This plugin enables you to set holiday closure notifications for your store. The same applies to the WooCommerce Maintenance Mode Plugin, which allows you to send customized messages to customers if the store is undergoing maintenance or has a countdown timer.


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

The WooCommerce Open Close Plugin enables you to schedule your store's opening and closing times, including breaks. You can easily display your business hours to customers at the front-end with a shortcode. The administrator can also send a customized message to customers through email when the store opens.
Array Methods (Python)
Tags: array
Published: 2023-02-14 10:45:24

Python has a set of built-in methods that you can use on lists/arrays.

-  **append()**

Adds an element at the end of the array/list

```{python}
import array as ar
a= ar.array('i',[1,2,3,5])
a.append(7)
print(a)
#output:  array('i',[1,2,3,5,7])
```
- **insert(pos, value)**

Inserts an element at desired position of the array

```{python}
import array 
a= array('i',[1,2,3,5])
a.insert(1,7)
print(a)
#output:  array('i',[1,7,2,3,5])
```
- **remove(value)**

To remove an element from the array.

```{python}
import array 
a= array('i',[1,2,3,5])
a.remove(3)
print(a)
#output:  array('i',1,2,5])
```
- **extend(arr)**

Adding another array to a existing array using extend method

```{python}
import array 
a= array('i',[1,2,3,5])
a.extend([33,55])
print(a)
#output:  array('i',[1,2,3,5,33,55])
```
- **pop()**

Pop method removes the last element in array

```{python}
import array 
a= array('i',[1,2,3,5])
a.pop()
print(a)
#output:  array('i',[1,2,3])
```
-  **index(value)**

To know the index of a value in an array using index(val) method.

```{python}
import array 
a= array('i',[1,2,3,5])
print(a.index(3))
#output: 2
```
- **reverse()**

To reverse an array use reverse() method

```{python}
import array 
a= array('i',[1,2,3,5])
a.reverse()
print(a)
#output:  array('i',[5,3,2,1])
```
- **fromlist(list)**

fromlist() is used to add a list to the end of the array. It will take a list as its input argument and the output of this function is an array with list appended at the end of the array.

```{python}
import array 
a= array('i',[1,2,3,5])
a.fromlist([10,7,3])
print(a)
#output:  array('i',[1,2,3,5,10,7,3])
```
-  **count(val)**

count() will tell the total number of occurrences of the given value in the array.

```{python}
import array 
a= array('i',[1,2,3,3,3,3,5])
print(a.count(3))
#output:  4
```

### Resources
- [Educba](https://www.educba.com/python-array-functions/)
What Are Cookies?
Tags: webdev, beginners
Published: 2023-02-14 10:27:38

**Cookies** are small text files that store data such as a username and password, and are used to identify your computer when you use a computer network. HTTP cookies are a type of cookie that are used to recognize specific users and enhance their web browsing experience. The information stored in a cookie is generated by the server when you connect to a website. It is tagged with a unique ID that is specific to you and your computer. As the cookie is transmitted between your computer and the network server, the server reads the ID and can provide you with the information you need.
Which metric best measures the popularity of a GitHub repo? Stars, forks, or watchers?
Tags: github, opensource, discuss, programming
Published: 2023-02-14 10:20:59

I used an [AI-powered querying tool](://ossinsight.io/explore/) to check the [most popular front-end repos on GitHub in 2022](https://ossinsight.io/explore/?id=53fb8568-1a3f-4532-98a0-9f1403dc8f00).

The result is as follows:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymitoaq9i7h8y9s1einr.png)

This tool uses "Stars" to measure a repo's popularity. 
But it seems that many developers don't agree. Some people think that a better measurement can be pull requests, number of incoming vs outgoing contributors, dependents (i.e. how many projects consider this project important) and so on.

I asked ChatGPT which metric best measures the popularity of a GitHub repo. It replied that:

The most popular metric for measuring the popularity of a GitHub repo is "Stars," which represents the level of attention and endorsement from users. Additionally, "Forks" and "Watchers" are also commonly used metrics for evaluating the popularity of a repo.

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

[OSS Insight](https://ossinsight.io/) used to rank repos only by stars. But in September, 2022, they updated their ranking algorithm:


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

 
What do you think? Which metric best measures the popularity of a GitHub repo?
The best online guitar lessons
Tags: guitar, webdev, watercooler, webpack
Published: 2023-02-14 10:12:51

The Best Online [Guitar Lessons](https://londonguitarschool.com/guitar-lessons-online/). Fun And Structured Guitar Curriculum With Full Support From Teachers. Private Online Guitar Classes. Want to play your favourite songs, you've come to the right place. Relaxed and fun guitar classes for beginners. Classes For Adults.
Cart Limits for WooCommerce
Published: 2023-02-14 10:09:50

The WooCommerce Cart Limit Plugin is an feature-packed module that helps e-commerce stores manage their sales according to their specific needs. With [WooCommerce Limit Quantity plugin](https://woocommerce.com/document/cart-limits-for-woocommerce/), you can set a limit on the quantity of products that can be purchased at one time. By using a specific checkout field in the backend of the plugin, you can restrict the number of products a customer can buy in a single transaction.

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

For example, if you want to limit a customer to purchasing only 5 products at a time, the plugin will display an error message if they attempt to add a 6th product to their cart. You can even allow customers to replace the 6th product with the last one they added.

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

The [WooCommerce Product Limit Plugin](https://woocommerce.com/products/cart-limits-for-woocommerce/) also allows you to set tiered price restrictions. If you want to limit a customer's purchase to $1000 or less, the plugin will display an error message if they attempt to add more products to their cart.

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

The WooCommerce Quantity Manager Plugin is an essential tool for managing the stock and availability of special edition products. You can set cart limits for specific products to control their sales and distribution. The plugin also improves communication with customers by customizing error messages displayed when cart limits are exceeded based on product, amount, quantity, weight, etc.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0obwy5wm184ppz6akz30.png)
Uncovering Hidden Patterns: An Introduction to K-Means and Hierarchical Clustering
Tags: machinelearning, computerscience
Published: 2023-02-14 10:00:00

Clustering is an unsupervised learning technique that groups similar data points together. It is a fundamental task in the field of Artificial Intelligence and Machine Learning, and is used in a wide range of applications such as image segmentation, anomaly detection, and customer segmentation. In this article, we'll explore two popular clustering techniques: K-Means and Hierarchical Clustering, and how they can be used to uncover hidden patterns in your data.

---

## **What is K-Means Clustering?**

K-Means Clustering is a method of clustering in which the goal is to partition the data into k clusters, where each cluster is represented by its centroid. The algorithm works by iteratively assigning each data point to the cluster with the nearest centroid, and then updating the centroids based on the points in each cluster. The process stops when the centroids no longer change, or when a maximum number of iterations is reached.

## **How does K-Means Clustering work?**

K-Means Clustering works by iteratively improving the cluster assignments and the cluster centroids. The algorithm starts by randomly initializing the centroids and then proceeds to the following steps:

1. Assign each data point to the cluster with the nearest centroid.
2. Update the centroids to be the mean of the points in each cluster.
3. Repeat steps 1 and 2 until the cluster assignments no longer change or a maximum number of iterations is reached.

## **What is Hierarchical Clustering?**

Hierarchical Clustering is a method of clustering in which the data is organized into a tree-like structure called a dendrogram. The algorithm starts by treating each data point as its own cluster and then iteratively merges the closest clusters together. The process stops when all the data points are in a single cluster, or when a stopping criterion is met.

## **How does Hierarchical Clustering work?**

Hierarchical Clustering works by iteratively merging clusters together. The algorithm starts by treating each data point as its own cluster and then proceeds to the following steps:

1. Compute the distance between all pairs of clusters.
2. Merge the two closest clusters together.
3. Repeat steps 1 and 2 until all the data points are in a single cluster or a stopping criterion is met.

---

Clustering is an unsupervised learning technique that can be used to uncover hidden patterns in your data. K-Means and Hierarchical Clustering are two popular clustering techniques that can be used to group similar data points together. They are both widely used in a range of applications and can be used in conjunction with other machine learning methods to gain deeper insights into your data.
Cart Discounts for WooCommerce
Tags: python, webdev, programming
Published: 2023-02-14 09:47:41

Utilizing discounts is a highly effective method to attract customers in the e-commerce industry. The WooCommerce Cart Discount plugin provides the ability to create discount offers that engage customers. You can offer conditional discounts based on factors such as the total cart amount, number of items in the cart, product quantity, cart abandonment, cart weight, as well as discounts on selected products and categories.



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

The [WooCommerce Discount](https://woocommerce.com/products/cart-discounts-for-woocommerce/) plugin allows you to send follow-up emails with discounts to customers who have added a product to their cart but have not yet made a purchase. This can significantly increase your product sales.


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

You can also offer discounts based on product categories using the [WooCommerce Category Discount](https://woocommerce.com/document/cart-discounts-for-woocommerce/) plugin. You can configure the settings of this plugin in the backend to cater to your specific requirements.


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

The WooCommerce All Discount plugin allows you to offer discounts on all or specific products at once. This will give a boost to your product sales. You can manage the discount rules from the settings and offer either a fixed discount or a percentage discount.


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

This plugin also enables you to offer discounts based on the quantity of products purchased. For example, customers can receive a discount for buying 3 or more items. Additionally, you can offer discounts based on the cart weight, for example, if a customer purchases products weighing more than 5kg