teleren/devto huggingface dataset:
HTML5 Semantics: Structure Tags
Tags: html, beginners, webdev
Published: 2021-08-20 08:14:13

> Semantic elements were introduced in HTML5 to reflect important distinctions in the meaning of content. These elements aren't meant for *presentation*, but for **accessibility** (and Search Engine Optimization).

When you're structuring your HTML page, these tags should be used in place of divs or spans. 

---
##Main Containers

→ `<header>`
This tag is meant to hold _introductory page content or article content_. The header element can nest navigation, a site logo, an h1 tag or anything else "introductory" to the site.

**This tag can be used more than once on a page, nested in other structural tags**.

→ `<nav>`
This element should hold any _major page navigation_. This could be major site navigation across the top of a page, or a table of contents sidebar. Any group of major related site links should be in this tag.

→ `<main>` 
This element should hold _all primary or unique page content_. Screen readers can also use it as a landmark to skip a page's introductory content. **This tag should only be used once on a page.**

One common practice is to use a common header (with a nested `nav`, logo, etc) and footer component for every page, then use a unique main element for each one.

##Grouping Content

The next couple of tags can be a bit confusing at first when deciding what to use in code, but once you get a handle on what content they're meant to hold, usage is much easier.

→ `<article>` 
This element should hold _content that could stand on its own out of context_. If a chunk of your content could be understood without the rest of the page around it, this is the right tag to use. Examples are things like separate blog posts, user comments, anything that can stand on its own.
**This element can nest header, footer, section, and aside tags.**

→ `<section>` 
This element seems more generic than the rest, but still has its semantic purpose. It's used to group _thematically related content_. Content that makes sense grouped together should be put here. 
**If grouped content just needs styling and truly has no common theme, a generic div element is still alright**.

→ `<aside>` 
This element should hold _secondary related page content_, like any content considered as bonus or extra information. This could be a quote in an article, a sidebar, table of contents, etc.

→ `<figure>` 
This element can hold **any kind of visual representation**, like an image, illustration, diagram, code snippet, etc.

It also has a paired tag, `<figcaption>` (which is optional to use).

→ `<footer>` 
This final semantic element should hold _content/info about the creator, or creation of a page/article_. Common examples would be copyright information, links to social media, contact info, etc. **This tag can also be used more than once on a page, nested in other structural tags**.

---

This is my first post on dev.to, if anything isn't clear enough or you see a mistake, please let me know! I'm hoping to be able to contribute more for those just starting in web dev, and clear up concepts that may be harder to grasp out of the gate.
"youtube_video_info" flutter package
Tags: flutter, dart, package
Published: 2021-08-20 07:58:18

### [pub.dev/youtube_video_info](https://pub.dev/packages/youtube_video_info)

### [github.com/kaex/youtube_video_info](https://github.com/kaex/youtube_video_info)

This is a lightweight⚡ package to fetch video info for YouTube from the url

### To install, add to pubspec.yaml

```yaml
flutter:
  sdk: flutter
youtube_video_info: ^1.0.0
```

and then run `flutter pub get`

Import the library

```dart
import 'package:youtube_video_info/youtube.dart';
```

### Calling the method

```
YoutubeDataModel videoData = await YoutubeData.getData(link);
```

### Example

```dart
var title = videoData.title; // "Ed Sheeran - Bad Habits [Official Video]"
var averageRating = videoData.averageRating; // 4.13242
var durationSeconds = videoData.durationSeconds; // 167
```

![example gif](https://media0.giphy.com/media/qhrpkPloaPHcuZa9N9/giphy.gif)
My HNG ARTICLE
Published: 2021-08-20 07:42:08

My Name is Ahmed Mukhtar graduate in Advance Diploma in computer and software engineering. My goal is to be a Full stack developer which involves both front end and backend development but i am currently a front end developer.

It is a privilege to be part of the reputable Zuri internship program https://zuri.team as this is an ample opportunity for me to horn my skills and get work experience.I signed up for front end development in order to be full confident of my soft skill and be able to work with teams in my field.

I’m certain that by the end of 8 weeks I would have been enriched with vital information and knowledge, and I look forward to giving this opportunity my best shot and become better in front End Development

Below are the links of some beginner courses which you can kick start your career with:

Figma tutorial 
https://www.youtube.com/watch?v=jk1T0CdLxwU&t=1s

Git tutorial
https://www.youtube.com/watch?v=8JJ101D3knE

Html tutorial
https://www.youtube.com/watch?v=qz0aGYrrlhU

Css tutorial
https://www.youtube.com/watch?v=yfoY53QXEnI

Javascript tutorial
https://www.youtube.com/watch?v=hdI2bqOjy3c&t=63s
Việc Làm IT freec
Published: 2021-08-20 07:40:22

https://freec.asia/viec-lam/it-phan-mem-c6
https://freec.asia/viec-lam/it-phan-mem-tai-ho-chi-minh-l27-c6
https://freec.asia/viec-lam/it-phan-mem-tai-ha-noi-l22-c6
https://freec.asia/viec-lam/it-phan-mem-tai-da-nang-l14-c6
https://freec.asia/viec-lam/android
https://freec.asia/viec-lam/tester
https://freec.asia/viec-lam/php
https://freec.asia/viec-lam/javascript
https://freec.asia/viec-lam/ruby-on-rails
https://freec.asia/viec-lam/ios
https://freec.asia/viec-lam/business-analyst
https://freec.asia/viec-lam/brse
https://freec.asia/viec-lam/front-end
https://freec.asia/viec-lam/back-end
https://freec.asia/viec-lam/react-native
https://freec.asia/viec-lam/python
KVision 5.0.0 is released (major upgrade with Bootstrap 5 support)
Tags: kvision, kotlin, bootstrap
Published: 2021-08-20 07:38:35

---
title: KVision 5.0.0 is released (major upgrade with Bootstrap 5 support)
published: true
description: KVision is an open source web framework created for Kotlin/JS.
tags: kvision,kotlin,bootstrap
---

[KVision](https://kvision.io) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

I have released KVision 5.0.0. This is a major upgrade bringing a lot of significant changes and new features. 

Highlights of this release include:

- Major internal redesign to make more things easier and more consistent.
- Up to 35% performance boost.
- Up to 20% bundle size reduction.
- Support for Bootstrap 5 and Bootstrap Icons.
- Support for floating labels for text input components.
- New `RestClient` component, based on fetch API.
- Upgraded dependencies (Kotlin 1.5.21, Coroutines 1.5.1, Serialization 1.2.2, Spring Boot 2.5.4, Micronaut 3.0.0, Ktor 1.6.2, Javalin 4.0.0.RC2, Vert.x 4.1.2).
- Removed jQuery dependency from the core module.
- Extended Gradle plugin to make build files simpler.
- A lot of other bugfixes, cleanups and optimizations.

For more details about this release see the [changelog](https://github.com/rjaros/kvision/releases/tag/5.0.0).

[A dedicated migration guide](https://kvision.gitbook.io/kvision-guide/part-1-fundamentals/migration/migration-from-4.x-to-5.x) is also available.

Don't forget to ⭐️ my [project](https://github.com/rjaros/kvision) if you like it!

As always, any feedback is appreciated!
Laravel Tailwind Boilerplate and Vue ready
Tags: laravel, tailwindcss, vue
Published: 2021-08-20 07:28:42

Happy Friday!!

This week I was working with a simple GitHub repo to save me time when I start new Laravel projects.

The repo it's called [Laravel Tailwind Boilerplate & Vue ready](https://github.com/magarrent/laravel-tailwind-boilerplate-vue-ready)

It consist in a Initial template to start your Laravel projects from scratch.

It's very simple! There are not any extra functionality, no auth, no APIs, anything!
Just a initial template to save time installing initial packages and configurint tailwind, Scss and Vue assets.

Let me show the GitHub and how it works! Thank you and have a great weekend!

[https://github.com/magarrent/laravel-tailwind-boilerplate-vue-ready](https://github.com/magarrent/laravel-tailwind-boilerplate-vue-ready)

---

![Laravel Tailwind Boilerplate - Vue Ready](https://user-images.githubusercontent.com/6561770/129886774-bf666556-28df-40b7-9007-726e088f1828.png)

![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)

[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/magarrent)


### Features

- **Laravel 8.***
- **Tailwind 2.1 Ready and Loaded**
  - @tailwindcss/typography
  - @tailwindcss/forms
  - Dark mode ready
  - All variants enabled by default
- **Vue 2, Vuex, Vue-Router, Vue-Axios - Ready**
- **Scss / Sass ready**

## Usage

```
🌟 Give a repo Star :)
```

Just [download the latest ZIP release](https://github.com/magarrent/laravel-tailwind-boilerplate-vue-ready/releases) of the repository and init the laravel project

```bash
npm install # install npm dependencies

npm run dev # compile assets
```

```bash
composer install # install php dependencies
```

## Assets

```bash
resources/
┣ css/
┃ ┗ tailwind.css # Import tailwind classes
┣ js/
┃ ┣ components/
┃ ┃ ┗ App.vue # Default App.vue for initial Vue config
┃ ┣ app.js # Vue init & configuration
┣ scss/
┃ ┗ custom.scss # Custom scss file for your peoject
```

Webpack Mix configuration

```js
mix
    .js('resources/js/app.js', 'public/js').vue({ version: 2 }) // Vue template
    .postCss('resources/css/tailwind.css', 'public/css', [ // Tailwind css loaded
        require("tailwindcss"),
    ])
    .sass('resources/scss/custom.scss', 'public/css'); // Custom Scss file


```

### Libs Used

- [Laravel](https://laravel.com)
- [TailwindCss](https://tailwindcss.com)
- [Vue.js](https://vuejs.org/)
- [Vuex](https://vuex.vuejs.org/)
- [Vue-Router](https://router.vuejs.org/)
- [Vue-Axios](https://www.npmjs.com/package/vue-axios)
- [Vue-Router](https://router.vuejs.org/)
- [Scss/Sass](https://sass-lang.com/)

## License

The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
ReactJS: Create Filters Like eCommerce Apps
Published: 2021-08-20 07:18:36

New Video Out on how to create a filter like eCommerce in ReactJS.

I have got this question a few days back from one of my subscribers on how to filter data as an eCommerce does. After helping him completing the task, I thought of creating a video about it so that it can benefit more new react developers.

{% youtube 4IULKeE0HFI %}
Protonmail Import-Export app: Export and Import mails
Tags: protonmail, export, import, email
Published: 2021-08-20 07:03:46

I installed [Protonmail](https://protonmail.com/) [Import-Export](https://protonmail.com/import-export) app on Arch Linux:

{% post nabbisen/install-protonmail-import-export-app-on-arch-linux-5cc9 %}

Then, I migrated emails to a newer account with the app. Here are some screenshots about it.

## Start view

There is no account. What to do first is add an account.

![Start view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de7col0lq27prd0536uz.png)

### Add an account

Click "Add account" at top-right corner. Verification will be required.

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

Succeessful:

![Succeessful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tn31rajw0embzn44enf.png)

### Export / Import menus

Now ready for exporting/importing emails in Protonmail.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5n9xzddlp56w3rkkp9c.png)

### Export mails

With an older account, I exported emails as `.mbox`. Well, `.eml` is also supported.

![Export emails](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spqqewqf1exwri3oevb1.png)

### Import mails

With a newer account, I imported them. I chose "Import local files":

![Import emails options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu9dlomqgdww2x5aqn1k.png)

Besides, if you have multiple accounts both of whose subscriptions are greater than free, you can directly "Import from account".

I selected `.mbox` files exported beforehand:

![Select files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofo76xto1yq6mm2p1egv.png)

Thus, I recreated my account and succeeded in migrating emails.
Set Excel Print Page Margins Using Java 
Published: 2021-08-20 06:58:10

This article will share how to set Excel page margins before printing the Excel worksheets by using Free Spire.XLS for Java. With this 3rd party free API, we could set top margin, bottom margin, left margin, right margin, header margin, and footer margin. 

**Installation (2 Method)**
**1#** Download the [free API](https://www.e-iceblue.com/Download/xls-for-java-free.html) and unzip it, then add the Spire.Xls.jar file to your project as dependency.
**2#** You can also add the jar dependency to maven project by adding the following configurations to the pom.xml.
```xml
<repositories>
    <repository>
        <id>com.e-iceblue</id>
        <name>e-iceblue</name>
        <url>http://repo.e-iceblue.com/nexus/content/groups/public/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>e-iceblue</groupId>
        <artifactId>spire.xls.free</artifactId>
        <version>3.9.1</version>
    </dependency>
</dependencies>
```

**Sample Code**
```java
import com.spire.xls.*;
import java.awt.*;

public class AddBorders {
    public static void main(String[] args){
        //Create a workbook instance
        Workbook workbook = new Workbook();
        //Load the Excel file
        workbook.loadFromFile("C:\\Users\\Administrator\\Desktop\\input.xlsx");

        //Get the first worksheet
        Worksheet sheet = workbook.getWorksheets().get(0);

        //Get the cell range that you want to apply border style
        CellRange cr = sheet.getCellRange(sheet.getFirstRow(), sheet.getFirstColumn(), sheet.getLastRow(), sheet.getLastColumn());

        //Apply border style
        cr.getBorders().setLineStyle(LineStyleType.Double);
        cr.getBorders().getByBordersLineType(BordersLineType.DiagonalDown).setLineStyle(LineStyleType.None);
        cr.getBorders().getByBordersLineType(BordersLineType.DiagonalUp).setLineStyle(LineStyleType.None);
        cr.getBorders().setColor(Color.BLUE);

        //Save the resultant file
        workbook.saveToFile("SetBorder.xlsx", ExcelVersion.Version2010);
    }
}
```
![margin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/011thi8s3jqryl0yz3ve.jpg)
Some really Amazing opensource programs and internships one should check out - 2021
Tags: opensource, internships, 2021, opensource2021
Published: 2021-08-20 06:54:31

Here are some 25+ programs you should definitely check out if you are starting into opensource - 
🎈🎈🎈
Reinforcement Learning Open Source Fest - https://www.microsoft.com/en-us/research/academic-program/rl-open-source-fest/


LFX Mentorship Program - https://mentorship.lfx.linuxfoundatio...
CNCF Mentoring - https://mentorship.lfx.linuxfoundation.org/#projects_all
MLH Fellowship - https://fellowship.mlh.io
Google Summer of Code - https://summerofcode.withgoogle.com/about/
LFN Mentorship Program - https://wiki.lfnetworking.org/display...
Linux Kernel Mentorship Program - https://wiki.linuxfoundation.org/lkmp 
GNOME Internships - https://wiki.gnome.org/Outreach
Outreachy Internships - https://www.outreachy.org
Google Season of Docs - https://developers.google.com/season-of-docs/docs/get-started
X.Org Endless Vacation of Code - https://www.x.org/wiki/XorgEVoC/
Julia Seasons of Contributions (JSoC) - https://julialang.org/
Summer of Haskell - https://summer.haskell.org
Open Mainframe Project Mentorship Program -https://www.openmainframeproject.org/projects/mentorship-program

24 Pull Requests - https://24pullrequests.com/about
OSOC - https://osoc.be
Hyperledger mentorship program - https://wiki.hyperledger.org/display/INTERN/Hyperledger+Mentorship+Program
Season of KDE 2021 - https://season.kde.org
DataONE Summer Internship Program - https://old.dataone.org/internships
Intern at the FSF - https://www.fsf.org/volunteer/internships
Processing Foundation Fellowships - https://processingfoundation.org/fellowships/
Hacktoberfest - https://hacktoberfest.digitalocean.com
FOSSASIA Codeheat - https://codeheat.org
FOSSASIA Internship Program - https://docs.google.com/forms/d/e/1FA...
DrivenData Competitions - https://www.drivendata.org/competitions/
Kubernetes Release Team Shadows - https://github.com/kubernetes/sig-rel...
HTML tags | dl-dt-dd
Tags: html, tags, dl, dt
Published: 2021-08-20 06:23:31

They are used to **represent a list of descriptions**. With `<dl>` (_description list_) we group the elements in a list, with `<dt>` (_description term_) we specify each term that we want to define and with `<dd>` (_description details_) we provide a description or definition for the `<dt>` corresponding.

It is often used for glossaries or to display data in the form of key-value pairs.

The possible combinations are:
* A term + a definition (a `<dt>` followed by a `<dd>`)
* Multiple terms + one definition (multiple `<dt>` followed by a `<dd>`)
* One term + multiple definitions (one `<dt>` followed by multiple `<dd>`)
* Multiple terms + multiple definitions (multiple `<dt>` followed by multiple `<dd>` in key-value format)

`<dt>/<dd>` pairs can be grouped within a `<div>` to use microdata, give global attributes to a group, or simply to assign styles.

These tags should not be used simply to create indentation in the content (the `<dd>` usually brings it by default), to achieve that effect you must use CSS.

`<dl>` **has no implicit ARIA role**, `<dt>` has `term`, and `<dd>` has `definition`.

Due to the different behavior that assistive technologies have when advertising this type of content, it is very important to ensure that **the content of each item on the list is written in a way that communicates its relationship with the other items** on the list in the group.

- Type: *block* / *block* / *block*
- Self-closing: *No* / *No* / *No*
- Semantic value: *No* / *No* / *No*

[Definition and example `<dt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl) - [Definition and example `<dt>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt) - [Definition and example `<dd>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd) | [Support](https://caniuse.com/mdn-html_elements_dl)
GitHub Gist API Public Gist Demo
Tags: react, antd, javascript
Published: 2021-08-20 05:48:57

  
Details    
Use Gist API to create a simple single-page application. A user should be able to enter a username and get the full list of public Gists for that user. The following are a list of functional requirements.  
Use the API provided by GitHub Gist API [Document Link](https://docs.github.com/en/free-pro-team@latest/rest/reference/gists).

• Search: When a user enters a username, it should be able to get a full list of public Gists by that user.    
• Filetype: Convert the filetypes of the files in the gist into a tag/badge, (e.g, if the returned gist has list of files containing python and JavaScript files, the gist should have the respective tags/badges).    
• Fork: Username/Avatar of the last 3 users who forked it with avatar linking to the fork.    

This Simple Application is Developed using React JS and antd UI Kit. for API calls I used JS Async/Await to fetch data.

Source Code: https://github.com/eswaraprakash/GIST-Demo
Working application Link : https://w4hwh.csb.app/

Feedbacks are welcome. Thanks.
How To Use Google Like A Pro
Tags: productivity, programming, javascript, tutorial
Published: 2021-08-20 05:37:21

Google is such a dominant force in the search engine industry that it is the default search engine for Android smartphones and web browsers such as Chrome. To put it frankly, Google has become one of the most widely utilized online resources for discovering everything from random facts and music videos to products and services.

The sophisticated Google search methods and tips listed below can help you narrow your search results.

### 1. Site:

Using site: will search within a specific website. For example, if you want to find an article that is published only on Hackernoon, you can simply type 

```
site:hackernoon.com article_keyword
```


![screely-1629433973388.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629433983941/x0ukuKArt.png)


### 2. Asterisk *
You can use * to fill missing words or phrases, like :
```txt
How to integrate * in nodejs
```

![screely-1629434101108.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629434118186/pElZ1rnn8.png)
### 3. Quotation " " 
"" is used to search for words or phrases, like :
```txt
"Why facebook created react"
```
![screely-1629434443457.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629434450078/saRoQCii-.png)
### 4. Related:
You can use related: to sites that are similar to other sites, for example
```txt
related:netflix.com
```

![screely-1629434962416.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629434968719/QJkDd-HWG.png)
### 5. link:
Use link: to find a page that links to another page, like : 
```txt
link:suhailkakar.com
```
![screely-1629435108552.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1629435112454/QHKVa-K-G.png)


### Conclusion ⌛

I hope you found these tips helpful. If you need any help please let me know in the comment section. 

Let's connect on  [Twitter](https://twitter.com/suhailkakar)  and  [LinkedIn](https://www.linkedin.com/in/suhailkakar/)  

👋 Thanks for reading, See you next time
Bootstrap Session Timeout Example In Laravel
Tags: laravel, javascript, bootstrap, session
Published: 2021-08-20 05:31:34

In this example I will show you bootstrap session timeout example in laravel. we will display this example as bootstrap session timeout modal. Also give bootstrap session timeout with counter example in laravel and bootstrap session timeout with progress bar example in laravel.

After a set amount of idle time, bootstrap warning dialogbox is shown to the user with the option to either log out, or stay connected. If "Logout" button is selected, the page is redirected to a logout URL. 

If "Stay Connected" is selected the dialog closes and the session is kept alive. If no option is selected after another set amount of idle time, the page is automatically redirected to a set timeout URL.

> Step 1 : Create a index.html file for home view
> Step 2 : Create basic.html file in examples folder
> Step 3 : Create countdown-timer.html file in examples folder
> Step 4 : Create countdown-bar.html file in examples folder

Idle time is defined as no mouse, keyboard or touch event activity registered by the browser. let's start and try to apply in our application.

You can see output like below screenshot.

![Bootstrap Session Timeout Example In Laravel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzruwtnwuse4oor3j93v.png)

---

> **_[Read More : Bootstrap Session Timeout Example In Laravel](https://www.techsolutionstuff.com/post/bootstrap-session-timeout-example-in-laravel)_**