teleren/devto huggingface dataset:
Importance Of The Page Title
Tags: a11y, testing, programming, api
Published: 2022-09-25 07:17:13

_Semantic structure is the foundation for accessible markup, as they properly convey information to the user through the accessibility API via screen readers._

This article is about the proper usage of the HTML tag `<title>`, as this is the first thing a screen reader user will perceive.

Users who are blind cannot glance quickly at the web page's content to see what the page is about. Therefore, they rely on the page title to provide this information.

The `<title>` element in HTML is designed to provide a short piece of text and is often the same as the first heading of the page. The `<title>` is used in cases such as **window title bars**, **bookmark lists** or **result lists from search services**.

Having several tabs at once open in the browser, the **title of the page displays in its tab**, making it easy to identify open pages and to quickly switch between them.

Page titles also improve **search engine optimization** (SEO), as they are used when displaying search results to make the content of the page quickly recognizable to users going through those results.

## Best practices

- add a title of text to **each page** (when the web address changes, the page title should change too)
- only **one title** per page
- **meaningful and unique text** (not "Section one", but `<title>`"Interstellar" (Christopher Nolan's Best Movies, Part 1)`</title>`)
- **short and descriptive**: only 60 to 80 characters are displayed in many window titles. You can provide more information in the top level heading of the document!
- If the page is a **result of an action** like a search, add that action to the title, e.g. `<title>`Nolan's Best Movies - Search Result`</title>`

![Example: Page Titles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ancy2rhzjd2z1odubrxk.png)

_Image source: [WAI Tips: Writing for Web Accessibility](https://www.w3.org/WAI/tips/writing/)_

[Read more about the HTML `<title`> tag](https://www.w3.org/WAI/WCAG21/Understanding/page-titled.html) in W3 WCAG2.1 Success Criterion **Understanding Success Criterion 2.4.2: Page Titled**.
Just writing down my thoughts on TLS encryption
Tags: kubernetes, tls
Published: 2022-09-25 07:13:16

I have been slowly learning various Kubernetes topics, just coz it has become such a fundamental thing in this cloud world. 

One of the topics that I came across was about how TLS encryption is used in Kubernetes to secure communication between clients and servers.

I've never tried to understand how encryption itself works & how data security is guaranteed while it is transferred back and forth between a client service and a server service.

I came across a few articles that helped me to understand these TLS concepts to an extent. 

So what did I learn? Quick summary.

- There are two types of TLS encryption - Symmetric encryption and Asymmetric encryption.
- Symmetric encryption means that you use the same key to encrypt and decrypt your data both on the server side and the client side. And if you're not careful, you might end up exposing your key to hackers. You know, they are always trying to get you.
- In asymmetric encryption, you have a public/private key pair. Only the Public key is shared with your clients. Clients encrypt their data using your public key before it is transferred to the server. On the server side, the data is decrypted using the private key that you safely maintain somewhere.

I use the following articles to understand more about symmetric and asymmetric encryption.

- https://www.digicert.com/faq/ssl-cryptography.htm#:~:text=Browser%20creates%20a%20symmetric%20session,get%20the%20symmetric%20session%20key.

- https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:online-data-security/xcae6f4a7ff015e7d:data-encryption-techniques/a/public-key-encryption

- https://freedomben.medium.com/what-is-mtls-and-how-does-it-work-9dcdbf6c1e41
The Food Recipes template
Published: 2022-09-25 06:52:02

<p>“The Food Recipes” is an advanced website template that could be used to publish all kinds of food recipes from around the world. What is unique to this template is the two latest posts are published on the website's header and other 15 recent posts are displayed in a beautiful three dimensional rotating carousel.</p>

<p>Moreover, similar to all  Apsara Templates, “The Food Recipes” templates could also be used to run videos and movie series website due to its ability to create unlimited playlists with videos from different platforms. For example, with Apsara Templates, we can create a playlist with videos from YouTube, Facebook, Vimeo… And those videos can be played smoothly without any problem.</p>

<p>Regarding space for advertisement, “The Food Recipes” template provides us plenty of spaces on the front page, sidebar, and in each post where we can display as much advertisements as we could.</p>

<p>“The Food Recipes” website template can be setup for you with free of charge to run on the European free web hosting https://www.deta.sh , you can just pay us for our time to build a free website for you using this template. For more detail, you could contact us at 096 388 9323 or visit our website to see more templates.</p>

https://khmerweb.deta.dev/

<a href="https://khmerweb.deta.dev/"><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymlfe0ebv4s1vrfw1x8v.jpeg" /></a>
10 HTML Tags for SEO🔍
Tags: html, seo, searchengine, beginners
Published: 2022-09-25 06:46:13

####1.Use Title Tags


`<title>Title of the webpage ...... </title>`

Your content is labeled in this way, and search engines interpret this as the name of your page.

####2.Meta Description Tags


`<meta name="description" content="Learn html, css, Js and develop your own website or helps others to make their websites.">`

When the article appears in search results, Google will also reveal this. The title and meta description tags should both contain your keywords.

####3.Header Tags


Here is the hierarchy of header tags:
`<h1></h1>` – typically used for webpage title.

`<h2></h2>` – highlights the secondary titles of the webpage.

`<h3></h3>` – related points of the topic in the webpage.

`<h4></h4>` – supporting points from `<h3>`.

`<h5></h5>` – not commonly used, but excellent for supporting `<h4>` points.


####4.Add alt in Images


`<img src="cats.jpg" alt="cat is sleeping on couch">`

The alt attribute tells search engines what the image is about. Search engines have no idea what the image is about unless it has an alt.
 
####5.Building Links


Obtaining high-quality backlinks is a part of SEO. You should also pay attention to internal connections as well as exterior links.

`<a href="http://mywebsite.com/" rel="nofollow">your anchor text</a>`

The link will still function, but search engines will not accept it. It is useful to share links with visitors without affecting the SEO of the other pages.
 
####6.Add Open Graph Tags


Open graph tags helps in improving social media's search and display capabilities. For instance, if your information is posted on Facebook, open graph will be used to display the information.

`<meta name="og:title" property="og:title" content="The Title of Your Blog">`

####7.Twitter Card Tags


Twitter Cards work similar to OG with the exception that these are specifically for Twitter.

`<meta name="twitter:card" content="summary">`

It is advisable to optimize your cards to get the most out of the tags.
 
####8.The Robots Tag


If you wish to block particular articles from being indexed, use the robots tag.

`<meta name="robots" content="noindex, nofollow">`

Google will not index the content or follow any of the links in this case. However, you must exercise caution when employing these HTML elements for SEO purposes. 

####9.Use Canonical Tags when necessary


When you develop a website, you can make it available in a variety of ways. As an example:

http://www.yourwebsite.com

https://www.yourwebsite.com

http://yourwebsite.com

https://yourwebsite.com


`<link rel="canonical" href="https://yourwebsite.com/">`

This tells Google that “https://yourwebsite.com/” is the URL on which you’re focusing.

####10.Responsive Site Meta Tags


`<meta name="viewport" content="width=device-width, initial-scale=1">`
To inform  that search engines should be made aware that your website is responsive.
Oh my posh for Windows (2022 guide for newbies)
Tags: webdev, tutorial, productivity, ohmyposh
Published: 2022-09-25 06:23:27

## Step 1: Install powershell from microsoft store. Click [here](https://www.microsoft.com/store/productId/9MZ1SNWT0N5D).

## Step 2: Open terminal and choose powershell as your default profile.
![Choose profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vapq3amhwwk5gjo8zep.png)

## Step 3:  Open terminal and paste `winget install JanDeDobbeleer.OhMyPosh -s winget` . If it shows any error follow step 4.

## Step 4: Open microsoft store and update app installer. Click [here](https://www.microsoft.com/store/productId/9NBLGGH4NNS1)

## Step 5: Open terminal as administrator and then paste the following `oh-my-posh font install`. Select desired font and press enter. (I prefer Hack)

## Step 6: Go to settings and select powershell from left window pane, additional settings->appearance->font face-> select the font you installed.

## Step 7: Paste the following one by one 

1. `oh-my-posh get shell`

2. `notepad $PROFILE`

3. If it shows any error paste `New-Item -Path $PROFILE -Type File -Force`.

4. In the notepad file add the following lines. `oh-my-posh init pwsh | Invoke-Expression
oh-my-posh init pwsh --config 'C:\Users\**X**\AppData\Local\Programs\oh-my-posh\themes\1_shell.omp.json' | Invoke-Expression`

**Note** Here X is your user name.

## Step 8: Paste `. $PROFILE`.
## Step 9: Close and reopen your terminal. You're all set! 
![Terminal SS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw8ybwywv1q9347udfjg.png)

_**Bonus:**_ To get the transparent look just select powershell from left window pane, additional settings->appearance->scroll down-> select background opacity to 72%.
Execute Cypress Test Cases in WebKit(Safari)
Tags: javascript, webdev, testing, softwaretesting
Published: 2022-09-25 06:20:19

Execute Cypress Test Cases in WebKit(Safari)

**This blog originally published in **https://qaautomationlabs.com/execute-cypress-test-cases-in-webkitsafari

This blog covers how we can execute Cypress Test cases in WebKit(Safari)


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

In version 10.8.0, cypress team have introduced the support of WebKit(Safari) browser

Cypress has experimental support for WebKit, Safari’s browser engine. Testing your app with WebKit is representative of how your app would run in Safari.

To run test cases in WebKit(Safari) we have to install a new version of cypress 10.8.0 Or have to upgrade the existing version (if the old version is already installed)

Installation Steps
Step 1:

Install / Upgrade Cypress version 10.8.0

Commands npm install --save-dev cypress@10.8.0

Step 2:

Add experimentalWebKitSupport: true to your configuration to enable the experiment.

Please see the below screenshot, In cypress. config.js we need to add the above command

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


Step 3:

Install the playwright-webkit NPM package in your repo to acquire WebKit itself: npm install --save-dev playwright-webkit.

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



Execute Test Cases
Run commands `yarn run cypress open` below screen opens


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


From Above Screen Click on E2E Testing below screen is open.

In the below screen we can see the **WebKit** browser as an option is displaying

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


Click on **WebKit** browser from the above screen. Test cases are open

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

Click on the test case that we want to run, test case runs in WebKit.

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


☕️ Happy testing! ☕️
For more blogs please follow the below link

https://qaautomationlabs.com/blogs/
Pure CSS Astro Logo
Tags: codepen, html, css, webdev
Published: 2022-09-25 06:14:11

---
title: Pure CSS Astro Logo
published: true
tags: codepen,html,css,webdev
---

{% codepen https://codepen.io/AsyrafHussin/pen/QWrOEOy %}

<p>Speed Code Video
<a href="https://twitter.com/asyrafhussin4/status/1573888086374633473" target="_blank">https://twitter.com/asyrafhussin4/status/1573888086374633473</a></p>
Smallest Contiguous Subarray Sum Equals K
Tags: javascript, leetcode
Published: 2022-09-25 06:10:47

Problem Statement #
Given an array of positive numbers and a positive number ‘S’, find the length of the smallest contiguous subarray whose sum is greater than or equal to ‘S’. Return 0, if no such subarray exists.

Example 1:

Input: [2, 1, 5, 2, 3, 2], S=7 
Output: 2
Explanation: The smallest subarray with a sum great than or equal to '7' is [5, 2].


Subarray Sum Equals K - Brute Force Approach:

```js
var subarraySum = function (nums, k) {
  let n = nums.length;
  let count = 0;
  for (let i = 0; i < n; i++) {
    let sum = 0;
    for (let j = i; j < n; j++) {
      // Calculate required sum
      sum += nums[j];

      // Check if sum is equal to
      // required sum
      if (sum == k) count++;
    }
  }
  return count;
};
```
2) Using Map / HasMap:

Above logic works on principal of prefix sum array or cumulative sum array.

If SUM - K exist in hasMap that means somehow some combination of previous item can give us sum = k;

Equation will be like

currSum - k = Val (this val value is one which can be derived from previous combination)

```js
var subarraySum = function (nums, k) {
  const obj = {};
  let res = 0;
  let sum = 0;

  for (let i = 0; i < nums.length; i++) {
    sum += nums[i];
    if (sum == k) res++;

    if (obj[sum - k]) res += obj[sum - k];

    obj[sum] ? (obj[sum] += 1) : (obj[sum] = 1);
  }
  return res;
};
```
Java programming structure
Tags: java, javastructure, codenewbie, webdev
Published: 2022-09-25 05:17:51

## Java Programming Structure

A java programming structure consists 6 major section:

1. Document Section
2. Package Statement
3. Important Statement
4. Interface Statement
5. Class Defination and ,
6. Main Method Definition inside main class [ESSENTIAL]

## 1. Document Section 📑
  This section includes to comments to tell tha program's purpose, it improves readability of tha program. 

## 2. Package Statement 😍
  A Package Statement allowed to includes statement that provides a package declaration.

## 3. Important Statement 🧑‍💻
  In C or C++ if we require to include some external libraries in our program then we use "include" statement, similar java using "import" statement we can use external libraries in our program, it includes statements used for referring classes and interfaces that are declared in other packages.

## 4. Interface Statement 💫
  In Java language, an interface can be defined as a contract between objects on how to communicate with eachother, this is similar to class but only includes constants, method declaration, allowed to declare interface.

## 5 . Class Defination 🧑‍💼
  It describes information about user defines classes present in the program, this Section allowed to user able to declared other user defined class above ther main method class.

## 6. Main Method Definition inside class 🤗
  Java Program Execution starts form main method, it Consists main method definition inside class.

## 🧑‍💻 Basic java program 🧑‍💻

```
class Main{
  public static void main (String[] args) {
    System.out.println("Hello World");
  }
}
```

## 👇 Check out 👇
❤️ Instagram : https://www.instagram.com/_mr.dhaval_io
👥 Facebook  : https://m.facebook.com/dhaval.kurkutiya.3
🐦 Twitter   : https://www.twitter.com/dhaval87950061
A Travel Journal using React
Tags: html, css, javascript, react
Published: 2022-09-25 05:15:58


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

After every creation of a new project, I feel more and more confident that I will become a good programmer and someone that is highly valuable to a company and to myself.  I am still unemployed at this point, but I know my skills and building portfolio will eventually shine through and employers will notice that.  Of this I am sure!  In the meantime, I continue my learning journey.

This project was a fun one, and incorporated HTML/CSS, JavaScript, and React.  I was able to create a personal travel journal of places I have been and show it off, which was a great joy of mine, since travel is something I have always found happiness and excitement in!

Part of this project was to create all this data in a data.js object file, which represented a database, like in the real world, in order to populate my webpage.  My project includes components for each part of my site and is then referenced and in my App.js file for the final presentation.  A primary focus was to incorporate the map function to populate my data, which provides reusability, rather than hard coding information.  The data.js file can easily be populated, added to or deleted, for ease of information to be updated.  

Another thing I am proud of in this project is my ever-building skills of css design and layouts.  I also utilized new fonts and icons, which I found online in fontawesome.com and google fonts.  Referencing additional libraries is a great way to add style into my project and will be a lifelong benefit in all my future endeavors!  My project can be seen using the link below to my Netlify page.


https://myreact-travel-journal.netlify.app/
Amazon EventBridge Cheat Sheet
Tags: 30daysofaws, certifieddeveloperassociate
Published: 2022-09-25 05:15:53

## About

EventB­ridge is a serverless event bus that makes it easy to connect applic­ations together using data from apps, integrated SaaS apps, & AWS services.

- [Documentation](https://aws.amazon.com/eventbridge/)
- [User Guide](https://docs.aws.amazon.com/eventbridge/?id=docs_gateway)

![Amazon EventBridge Flow](https://d1.awsstatic.com/product-marketing/Product-Page-Diagram_Amazon-EventBridge%402x.90618a37067770ba7994eb9c4eac38f4a5fecc7c.png)

EventB­ridge is a low-cost alternative to building a new backend infrastructure for every new app. With Serverless EventB­ridge, you can connect your existing apps with a few lines of code. You don’t have to build a new backend for every new app you want to connect to. 

You can use existing infrastructure as a provider of event data, and connect your apps using Serverless EventB­ridge.

### Alternatives

- [Azure Service Bus](https://learn.microsoft.com/en-us/azure/service-bus-messaging/service-bus-messaging-overview)
- TIBCO Cloud Integration (including BusinessWorks and Scribe)
- IBM App Connect
- [Google Cloud Pub/Sub](https://cloud.google.com/pubsub)
- Apache Camel
- Peregrine Connect
- Software AG webMethods
- [IBM Cloud Pak for Integration](https://www.ibm.com/cloud/cloud-pak-for-integration)

## Use Cases

Type: Applic­ation integr­ation

Same type services: [SNS](../sns), [SQS](../sqs), [AppSync](https://aws.amazon.com/appsync/), EventBridge

- Re-architect for speed
- Extend functionality via SaaS integrations
- Monitoring and Auditing
- Customize SaaS with AI/ML

## Question

A food delivery company is building a feature that requests reviews from customers after their orders are delivered. The solution should be a short-running process that can message customers simultaneously at various contact points including email, text, and mobile push notifications.

Which approach best meets these requirements?

- Use EventBridge with Kinesis Data Streams to send messages.
- Use a Step Function to send SQS messages.
- Use a Lambda function to send SNS messages.
- Use AWS Batch and SNS to send messages.


> - [Practice notes](https://romankurnovskii.com/en/docs/aws-certified-developer-associate/eventbridge/)
> - [Questions](https://dev.to/romankurnovskii/aws-ec2-top-
questions-certified-developer-exam-27oo)
622. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-09-25 04:38:35

```
class MyCircularQueue {
 public:
  /** Initialize your data structure here. Set the size of the queue to be k. */
  MyCircularQueue(int k) : k(k), q(k), rear(k - 1) {}

  /** Insert an element into the circular queue. Return true if the operation is
   * successful. */
  bool enQueue(int value) {
    if (isFull())
      return false;

    rear = ++rear % k;
    q[rear] = value;
    ++size;
    return true;
  }

  /** Delete an element from the circular queue. Return true if the operation is
   * successful. */
  bool deQueue() {
    if (isEmpty())
      return false;

    front = ++front % k;
    --size;
    return true;
  }

  /** Get the front item from the queue. */
  int Front() {
    return isEmpty() ? -1 : q[front];
  }

  /** Get the last item from the queue. */
  int Rear() {
    return isEmpty() ? -1 : q[rear];
  }

  /** Checks whether the circular queue is empty or not. */
  bool isEmpty() {
    return size == 0;
  }

  /** Checks whether the circular queue is full or not. */
  bool isFull() {
    return size == k;
  }

 private:
  const int k;
  vector<int> q;
  int size = 0;
  int front = 0;
  int rear;
};

```

#leetcode
#challenge
Here is the link for the problem: