teleren/devto huggingface dataset:
5 Unsung HTML Tags You Really Should Know🤔
Tags: html, webdev, javascript, beginners
Published: 2022-12-13 06:04:53

HTML is such a simple language that most developers don't even consider it as a programming language, but today, we are going to go below the surface, and uncover 15 HTML tags that you can take advantage of today!

## 1. Cite
Cite is a tag that allows you to reference sources you mentioned throughout your website. It is mostly used in citing bibliographic or other site references.

`<cite> example.com </cite>`

![Example of Cite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rewvz8dq0xk2fy7ehxz1.png)

## 2. Address
Another HTML tag that acts pretty much exactly the same as the Cite tag. As the name suggests, this tag allows you to mark addresses.

`    <address style="font-size: 21px;">
        Somewhere
        <br>
        1234 Street
        <br>
        Something, AUS
    </address>`

![Example of Address](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl8y33kalrfi1bn68u5z.png)

## 3. Details
This tag allows you to create a button which displays some information once clicked.

`<details>  <summary>Developers</summary>  <p>The most important Occupation</p></details>`

![Details Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zq93r3jyo1yfj3rz87co.png)

## 4. Progress
You know those progress bars that show you how much percent a file is downloaded? Well, this is the tag behind that magic.

`<label>Downloading progress:</label><progress value="32" max="100"> 32% </progress>`


![Example of progress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrr1kzp5ycyr2f2734jw.png)

## 5. Mark

This tag allows you to highlight words, or phrases that you consider important for your audience to see.

`
<mark>Marked Text</mark>
`

![Mark Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lnbrsfsh730gzc55620.png)

## A Quick Conclusion

Do I recommend you using any of these tags? Well, I don't. I believe that if these tags are unpopular, they might be no longer supported by HTML.

However, there is no harm in checking them out!

This post was first posted at: [Free Technology Help](https://freetechnologyhelp.com/html-tags-you-really-should-know/)
How To Create QR Code Generator In Laravel 9
Tags: laravel, qrcode, php, codenewbie
Published: 2022-12-13 05:30:00

In this article, we will see how to create QR code generator in laravel 9. As per the current trend, many websites and applications provide features like login with QR code, scan QR code, and get more information about products and websites, etc.

we will generate dynamic QR codes in laravel 9. There are many packages available to generate QR codes. we will use Endroid QR Code Generator to create QR Code.

So, let's see how to generate QR code in laravel 9, laravel 9 QR code generator.

```
Step 1: Install Laravel 9 for QR Code

Step 2: Install Endroid QR Code Package

Step 3: Create Controller

Step 4: Add Route

Step 5:  Create Blade File
```
Note abont JavaScript DOM objects
Tags: javascript
Published: 2022-12-13 04:25:17

---
title: Note abont JavaScript DOM objects
published: true
description: 
tags: javascript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-13 04:24 +0000
---

DOM Element structure

```text
+-------------+    +------+    +---------+    +-------------+
| EventTarget | <- | Node | <- | Element | <- | HTMLElement |
+-------------+    +------+    +---------+    +-------------+
```


> The DOM Node interface is an abstract base class upon which many other DOM API objects are based, thus letting those object types to be used similarly and often interchangeably.

> every kind of DOM node is represented by an interface based on Node


[Element - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element)
SIMVN - Công Ty Cổ Phần Sim.vn
Tags: simsodep, simvn, simphongthuy, simgiare
Published: 2022-12-13 04:24:27

"SIMVN được thành lập từ năm 2019 là nhà phân phối sim số đẹp, sim phong thủy hàng đầu Việt Nam hiện nay. Với phương châm là ""Nâng tầm thương hiệu"", SIMVN đã và đang không ngừng đổi mới cải tiến nhằm mang tới chất lượng dịch vụ tốt hơn cho khách hàng. Các dịch vụ của chúng tôi bao gồm chọn sim năm sinh, chọn sim phong thủy, đặt sim theo yêu cầu, cầm cố thu mua sim. SIMVN là đại lý cấp 1 của các nhà mạng hàng đầu như Viettel, Vinaphone, Mobifone... đảm bảo mang tới cho khách hàng kho sim số đa dạng cùng mức giá phù hợp nhất trên thị trường.
Địa Chỉ :Tầng 2, nhà B, số 22 đường Thành Công, Phường Thành Công, Quận Ba Đình, Hà Nội
SDT :    02466.888.333"
Website: https://sim.vn/
JavaScript: Live vs. Static NodeLists
Tags: javascript
Published: 2022-12-13 04:24:06

---
title: JavaScript: Live vs. Static NodeLists
published: true
description: 
tags: javascript, 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-13 03:59 +0000
---

There are two types of [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList): **live and static**

> live NodeList means that changes in the DOM automatically update the collection.

- Node.childNodes is a live NodeList
- document.querySelectorAll() returns static NodeList
[Node](https://developer.mozilla.org/en-US/docs/Web/API/Node) 

Sample Code: 

HTML

```html
<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
```

JavaScript

```javascript
const liveParent = document.querySelector('#parent');
const staticChildren = document.querySelectorAll('.child');
console.log(liveParent.childNodes, staticChildren);
liveParent.appendChild(document.createElement('div'));
console.log(liveParent.childNodes, staticChildren);
```

Results:

![javascript-live-static-node-list-sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6te92t3ov07l6420xom6.png)

You can see that the length of *staticChildren* still the same after the parent object append a child.
How to Make Accordion in React
Tags: react, javascript, beginners, webdev
Published: 2022-12-13 04:10:59

In this article, we will make a simple accordion in react. Accordion is useful when we need to create some application user interactive. Basically, we will create a bunch of questions and if we click on the question, then the div will expand and show us the answer.

So this is going to be a very fun project to do and as a beginner it will teach us more because we will use some additional package like styled component. Also, we will make this accordion very dynamic like we can add question and answer in certain component and all effects will be reflected over the application. So let’s make it step-by-step.

##Pre-requisite to Make Accordion in React

- Basic knowledge of ReactJS.
- Basic knowledge of React hooks.
- Basic knowledge of React props.
- Good knowledge of React Components.

##Setting Up Project
Now firstly, we need to add two packages: (1) styled-components (2) react-icons.

Then we need some basic components like Accordion.js, where we will add main logic of the application. And Data.js component, where we will add questions and answer. We have to modify App component, here we imported Accordion, and we just called Accordion in return statement.

`import './App.css';
import Accordion from './Components/Accordion';

function App() {
  return <Accordion />;
}

export default App;
`
##Adding Data in Component
Now, before adding main logic, we will add our data like question and answer in Data component. We have added only three data and more data can be added which will reflect over the application.

`export const Data = [
  {
    question: 'What do you call a dog magician?',
    answer: 'A labracadabrador.'
  },
  {
    question: 'What do you call a funny mountain?',
    answer: 'Hill-arious.'
  },
  {
    question: 'What did the astronaut say when he crashed into the moon?',
    answer: 'I Apollo-gize.'
  }
];`

[Read More](https://reactjsguru.com/how-to-make-accordion-in-react/)
How can artificial intelligence help solve problems?
Tags: ai
Published: 2022-12-13 04:09:40

There are many ways in which artificial intelligence (AI) can help solve problems. For example, AI algorithms can be used to analyze large amounts of data and identify patterns and trends that would be difficult for humans to detect. This can help organizations make more informed decisions and improve their operations. AI can also be used to automate repetitive tasks, freeing up people to focus on more complex and creative work. Additionally, AI can be used to develop new technologies and solutions to problems, such as designing new drugs or improving transportation systems. In short, AI has the potential to help solve a wide range of problems across many different fields.
Programming Language Official Docs and Update
Tags: programming, beginners
Published: 2022-12-13 03:51:26

## C/C++
C/C++ Features Updates: [CPP Reference](https://en.cppreference.com/w/)

## C# 
C# Feature Proposal: [csharplang](https://github.com/dotnet/csharplang/issues)
C# New Features: [What's new in CSharp](https://learn.microsoft.com/en-us/dotnet/csharp/whats-new?wt.mc_id=studentamb_116348)
C# Official Blog: [DevBlogs](https://devblogs.microsoft.com/dotnet/category/csharp?wt.mc_id=studentamb_116348)

## ECMAScript
ES Proposals: [tc39/proposal](https://github.com/tc39/proposals)
ES Implementations: [proposals.es](https://www.proposals.es/)

## F-Sharp(F#)
Comment by: https://dev.to/edelsora
F# Feature Proposal: [fsharp](https://github.com/dotnet/fsharp/issues)
F# Official Blog: [DevBlogs](https://devblogs.microsoft.com/dotnet/tag/f/)

## Java 🍵
JEP (Java Enhancement Proposal): [Java JEP](https://openjdk.org/jeps/0)
Java Version "X" Features: [JDK Projects](https://openjdk.org/projects/jdk/)
JVM and JEP "X" Comparisons: [Chris Who Code](https://chriswhocodes.com/)
Java Weekly Reading: [Baeldung Weekly Review](https://www.baeldung.com/category/weekly-review)

## PHP
PHP Request For Comments: [PHP-RFC](https://wiki.php.net/rfc)
PHP RFC Implemented: [RFC-IMPL](https://wiki.php.net/rfc#implemented)

... more to come
Comments down below if you know similar website for other programming languages
My Programming Journey
Tags: programming, career
Published: 2022-12-13 03:46:02

"I don't want to be a Programmer like everyone else in the family!" These are the words that I had repeated countless times as I had grown up. I had always wanted to be different. I had dreamed of being many different things like a cop, a fashion designer, and a nurse. 

When I got into 9th grade, I had a class called "intro to Programming". It was a required class so I had to take it. The first few days, I was so lost and felt like I wanted nothing to do with it. As time went on, I started understanding more things. I felt interest in the way it worked. After class, I would ask my dad questions about different concepts in programming. I had even started doing a Python course online. All of this was great, but I still did not want to pursue anything in tech so I gave up on the course overtime.

After I graduated, I picked my major as Nursing. As I was going through Nursing, I struggled many times. I felt like giving up and went back to it a couple of times. Even though it was great, it didn't feel right for me. I did not want to leave as I had already done a year and a half. I felt like it would be a "waste of time". Then, my family made a sudden decision of moving to Texas from New Jersey. 

When I first moved here, I took a semester off to get settled in. Then, when I started applying to colleges, I realized that most of them are not willing to accept many of the credits that I had worked so hard to achieve. I did not want to start over so I decided to give up on it altogether. While this was going on, my dad had encouraged me to start doing some lessons online as well. 

I started doing a html course and a python course online. I started enjoying it a lot and was doing it regularly. Then, after a few months, my brother told me to apply to Flatiron School. He had went to it and had loved it a lot. I applied to it, not expecting much and started doing LeetCode problems. After a little while, I got accepted! Now, here I am, doing what I love with people that I love! 

With this story, I just want to remind people that no matter how many setbacks there are, you should keep going! You never know which setback is going to change your life forever!
Autenticación con biométricos en iOS con Swift & SwiftUI
Tags: swift, swiftui, mobile, apple
Published: 2022-12-13 03:40:53

Les dejo un video que hice para poder poner seguridad con biométricos a tus aplicaciones , espero que sea de su agrado y puedan suscribirse.


https://www.youtube.com/watch?v=WTEgOF8QBaQ&t=213s
How to Leverage the Quarantine time as a Software Tester or QA? | Learn Software Testing
Tags: webdev, beginners, programming, tutorial
Published: 2022-12-13 03:31:51

Automation testing is a Software testing technique to test and compare the actual outcome with the expected outcome. This can be achieved by writing test scripts or using any automation testing tool. Test automation is used to automate repetitive tasks and other testing tasks which are difficult to perform manually

Learn Cypress Tutorial :  https://cypresstutorial.com
.
Learn API Testing : https://www.learnapitesting.com

Automation Tester Training : https://thetestingacademy.com

{% embed https://youtu.be/FAfR2xYD6EA %}
-----------------------------------------------------
👪 Join our Community - http://bit.ly/learntesting2019

✅ Automation Tester Community - https://thetestingacademy.com

🐦 Follow us on Twitter  - https://twitter.com/itstechmode

📖 Like us on Facebook - https://www.facebook.com/scrolltest

🎤 Listen to our Podcast - https://anchor.fm/thetestingacademy

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

#automationtesting #manualtesting #testautomation #thetestingacademy #scrolltest #qa

🚀 Tools and services I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅Selenium Training and Certification -
https://scrolltest.com/go/edureka


✅Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1


✅Programming Java -
https://bit.ly/learnjava2020-p1


✅Test Automation - 
https://bit.ly/learnautomation2020


✅API Testing - 
https://www.learnapitesting.com


✅Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com
NightCrit v2.0 (in progress)
Tags: unity3d, nightcrit
Published: 2022-12-13 03:31:39

It's been over a month since I posted [about creating a project about a dream I had dubbed "Nightcrit".](https://dev.to/hectorleiva/nightcrit-v10-238a)

Here is an update on what I've currently accomplished:
- I've learned how to use [Blender](https://www.blender.org/) to begin to model out the world of Nightcrit
- I've started reading and watching tutorials about Unity on how to import the models made in Blender and have a user walk through it.
- I've started learning C# in order to program functionality in the world like preventing a user from falling off the map and triggering audio cues.

Blender screenshots:

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

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

Unity screenshots:

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

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

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

Some of what remains before I attempt to render this out for the world to see are; the audio messages need to be redone and importing the paintings into the scene.

I tried to import the audio files as they are and placed them more or less where I had them before in the v1.0 and they do not work in a First Person game engine. It doesn't have the correct "feel", so the audio needs to be re-written and recorded again.

I hope to have something close to done around this time next month.

This is my first time using Unity at all and it's been a nice experience so far.
An awesome list of Platform Engineering
Tags: platformengineering, pe, internaldeveloperplatform, devex
Published: 2022-12-13 03:26:10

---
title: An awesome list of Platform Engineering 
published: true
description: An awesome list of Platform Engineering
tags: platformengineering,PE,internaldeveloperplatform, DevEx 
//cover_image: https://direct_url_to_image.jpg
---

Gartner said Platform Engineering is one of the 2023 Top 10 Strategic Technology Trends.

![Gartner top 10 strategic technology trends for 2023](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u4h0vt2qbq3e15qxzk5.png)

The link is here https://www.gartner.com/en/articles/gartner-top-10-strategic-technology-trends-for-2023

I made an awesome list of platform engineering and welcome to contribute by issue & PR ! 

** Table of Content**
1. Concept 概念/术语
2. Solution/project 解决方案/项目
3. Conf/Event 会议/活动
4. Community 社区
5. Team & People 团队与个人
6. Channel/TAG 频道/标签
7. Blog/Website 博客/站点
8. Article 文章
9. Chinese Article 中文文章
10. Contribution 贡献


CLICK to visit: 
https://github.com/toptechevangelist/awesome-platform-engineering 

Welcome your contribution with issue or PR !
Add Google Analytics to React/Next in 5 minutes
Tags: webdev, javascript, react, typescript
Published: 2022-12-13 03:24:01

###Introduction
Websites and applications have tons of trackers, but they serve many purposes, and some are good purposes.

Let's say you want to track how many users went to your websites, how many users actually use a feature, or how many users drop when doing certain actions.

One of the most outstanding tracking tool out there is Google Analytics. So I'm writing this article to show you how to integrate Google Analytics to your React apps.

###Set up
First, you need to create a google account, which you probably have.

Then you need to inject some scripts for Google Tag Manager to your apps:

```
      <Script
        async
        strategy="afterInteractive"
        src="https://www.googletagmanager.com/gtag/js?id=YOUR ID"
      ></Script>
      <Script strategy="afterInteractive" id="gtm">
        {`
           window.dataLayer = window.dataLayer || [];
           function gtag(){dataLayer.push(arguments);}
           gtag('js', new Date());
           gtag('config', YOUR ID,{ 'debug_mode':true });
        `}
      </Script>
```

The first Script tag is to install GTM, the second tag is to config Google Tag, you need to provide your GTM id, you can enable the debug mode to inspect the actions.

###Sending Events
Although by default, Google provided some events built in, like page view event or scroll to bottom event. And we can create custom events on the dashboard

But in my opinion, we should fire custom events from our code, for better behavior customization. So I created a utility for this:


```
type WindowWithDataLayer = Window & {
  gtag: Function;
};

declare const window: WindowWithDataLayer;

type TrackerProps = {
  eventName: string;
};

export const tracker = ({ eventName }: TrackerProps) => {
  window.gtag('event', eventName);
};
```

With the tracker function, we will be able to fire any event we like with a custom event name ( you can even provide parameters, just customize my function above ). This is how it can be called:

```
          onClick={() => {
            tracker({ eventName: 'open_projects' });
            set(open => !open);
          }}
```

I fired an event name `open_projects` on click.


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

I tried to fire the event multiple times to see if it works, as you can see, it works perfectly.

###Conclusion
This is just a very basic tutorial on how you can implement Google Analytics to your app, you can modify the example above to send parameters, or go to google’s dashboard to create advanced events.
How to Install a WordPress Theme
Tags: webdev, wordpress, beginners
Published: 2022-12-13 03:19:41

Congrats!! You have purchased a new WordPress theme!! Now what?

The next steps are to Install the WordPress theme in your WordPress repository.

I will show you How to Install a WordPress theme.

Step 1: Download the Zip File
-----------------------------

Once you have made your purchase, you will get sent a link. The link contains the theme file. The theme file will need to get uploaded onto WordPress.

Step 2: Go to WordPress
-----------------------

The next step to install the WordPress theme is to go to your WordPress repository.

As you log in you will get brought to your WordPress dashboard. On the left-hand side is a navigation bar. Click on "Appearance." Once you click on "Appearance," you will see the "Themes" page. This page lists every theme that has gotten uploaded to your WordPress website. If this is a fresh WordPress install, at least one free theme will be there. But no premium themes.

Step 3: Add New Theme
---------------------

![The Themes page of a WordPress site](https://cdn.shopify.com/s/files/1/0626/4084/9087/files/Theme_Page_of_a_WordPress_Site_480x480.png?v=1670895293)

Then, on the "Themes" page, click the Add New button at the top of the page.

Next, without moving your mouse or cursor, click on "Upload Theme." A form will show up. The form prompts you to upload your zip file for the theme. Click "Choose File" and upload the theme file. After uploading, click Install Now button. 

Step 4: Customize
-----------------

Now, you have officially installed your new WordPress theme. 

After the theme gets uploaded, you have three options.

![The Page you are sent to after uploading a WordPress theme](https://cdn.shopify.com/s/files/1/0626/4084/9087/files/After_Uploading_a_WordPress_theme_480x480.png?v=1670895189)

### Live Preview

The "Live Preview" option will take you to the customize tab, where you can make changes. In Live Preview, you see the new theme with your current elements. You will have the option to change the header image, header menu, or footer menu, to name a few.

Once the changes you have made satisfy you, click Activate & Publish. Your new theme will become active.

### Activate

The second option after uploading the theme is "Activate" without making any edits. After clicking the Activate button, you will get sent back to the "Themes."

### Go to Themes Page

The final option, "Go to Themes Page," will take you to the "Themes" page. Clicking this does not install your new WordPress theme.

Final Step
----------

Congrats!! Your new WordPress theme has gotten installed. The final step is to have fun with it!!