teleren/devto huggingface dataset:
What HTML features promote accessibility?
Tags: discuss, anonymous, html, help
Published: 2022-05-03 14:26:41

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._

***

I've just started designing my first website. I'd really like to to be as accessible as possible, but I don't really know where to start. If you have any tips and tricks for HTML features I can use that would make my site more accessible for people, I'd love to learn them! I really don't want to forget to implement as many ways for people of all abilities to navigate my website.
Get started with Vite, React and Typescript in <1 min
Tags: vite, typescript, react, template
Published: 2022-05-03 14:25:20

I wanted an easy and (very) fast way to get a frontend project started so I could demo things. I wanted to be able to focus on a business case and not the boilerplate, so I created a github template that allows you to get started in less than 1 minute with a fully setup project.

Go check it out: https://github.com/nexys-system/boilerplate_vite


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg1ajthwmfqjwau2izm4.gif)
Generate some wavy SVG with Svelte!
Tags: svelte, design, codenewbie, beginners
Published: 2022-05-03 14:14:56

![SVG sine waves generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v898k80am4ffrw94jqr2.gif)

I'm trying to build my weird stuff for a year now. Starting with plain JavaScript last summer and dived into Vue JS for the 4 past months, just before discovering [Svelte](https://svelte.dev/).

And what a deal 🌤️... **Svelte is this kind of way of doing logic I always dreamed about: writing less code, writing simple code.**

Yes, some aspects of Svelte do not really work like how things work in "real life", like state management. But who cares? If you are not looking for a position but just want to craft, it's really a golden nugget!

You can get the source code of the app [here](https://github.com/Hugo-Dz/Sinwaver). Or [test it](https://www.sinwaver.com/) by yourself

I'm curious about your thoughts on Svelte! And if you have already shipped something with it, share it below :)

Cheers!
VR Unity Tips | May 3 2022
Tags: vr, gamedev, unity3d
Published: 2022-05-03 14:11:13

## **VR TIP #1**
**Download _XR Interaction Toolkit_ On Unity 2021 LTS**

Package Manager -> Add Package by name -> type com.unity.xr.interaction.toolkit -> Click Add


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


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

## **VR TIP #2**
**Debugging Better On Unity Using The Oculus Quest Without Putting A Tape On The Sensor**

> By removing the sensor this will allowed you to remove your headset when using Unity and the VR input will not stop.

Download Oculus Developer Hub -> Device Manager -> Turn off Proximity Sensor


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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1571bdujsi0sx1bu5hy3.png)
Flutter's workaround for blank web page with web release
Tags: flutter
Published: 2022-05-03 13:57:57

If you finished your Flutter web project and uploaded your excellent HTML and related file to your hosting. 

Then boom! Nothing appears, just a white shiny web page. you may need the following workaround  

## A. Release with HTML web renderer

Flutter team mentioned it in [document](https://docs.flutter.dev/deployment/web) that with default selection. Flutter will choose a web renderer according to the environment:

- HTML for Mobile browser
- Canvaskit for Desktop browser

In some condition, Canvaskit will not render your production-ready web application. But HTML one will do. 

Try the following build command:

```bash
flutter build web --web-renderer html
```

This command will force your release to use HTML renderer instead of Canvaskit.

## B. Remove that **base** element

I found out in [this repository's issue](https://github.com/flutter/flutter/issues/61464#issuecomment-802580204) where people mention that by removing (or yes, comment it out) `<base>` element in **index.html** will do the trick.

```html
<base href="/">
```

## Any better way? 

I know that these workarounds might not be the best. But if you found a better solution to solve this problem. Please feel free to comment below.
Cross-Platform Game Development: What You Need and How It Works
Tags: gamedev, development, crossplatform
Published: 2022-05-03 13:39:25

A game’s commercial success depends on a variety of reasons. Among them is whether your title is engaging and catching enough to make users return and continue playing. The gameplay should be a reason to buy or download the game, too.

But one of the most important factors of game popularity, leading to successful monetization and high revenue, is availability. If you are aiming to release your game on many devices and platforms, you should learn how to create a cross-platform game.
[https://www.innovecsgames.com/blog/cross-platform-game-development/](https://www.innovecsgames.com/blog/cross-platform-game-development/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjyebaw301r4pyt4pfbc.jpg)
Variables, Data types, Operators.
Published: 2022-05-03 13:20:45

The general rules for naming variables are:

    Names can contain letters, digits and underscores
    Names must begin with a letter or an underscore (_)
    Names are case sensitive (myVar and myvar are different variables)
    Names cannot contain whitespaces or special characters like !, #, %, etc.
    Reserved words (like C++ keywords, such as int) cannot be used as names


Basic Data Types

The data type specifies the size and type of information the variable will store:

Data Type 	Size 	Description

*boolean 	1 byte 	Stores true or false values
*char 	1 byte 	Stores a single character/letter/number, or ASCII values
*int 	2 or 4 bytes 	Stores whole numbers, without decimals
*float 	4 bytes 	Stores fractional numbers, containing one or more decimals. Sufficient for storing 7 decimal digits
*double 	8 bytes 	Stores fractional numbers, containing one or more decimals. Sufficient for storing 15 decimal digits



Operators are used to perform operations on variables and values.
C++ divides the operators into the following groups:

    Arithmetic operators
    Assignment operators
    Comparison operators
    Logical operators
    Bitwise operators
Parameterising Logic App (Standard) connections.json with bicep - Part 3
Tags: azure, bicep, logicapps
Published: 2022-05-03 13:11:50

In my previous 2 posts [here](https://dev.to/leonards/parameterising-logic-app-standard-connectionsjson-with-bicep-part-1-2mhi) and [here](https://dev.to/leonards/parameterising-logic-app-standard-connectionsjson-with-bicep-part-2-hdl), I briefly showed how we can create the bicep snippet to create API connection resources and subsequently use that to parameterise our Logic App's connections.json. However, I've come to realise that I've missed out one configuration: API access policy. 😨

The API access policy dictates the object (in my case it's the Logic App) that can access the API connection. In this post, I'm covering this additional configuration as well as an observation on the behaviour of bicep.

Creating the API access policy is simple. We've to create `Microsoft.Web/connections/accessPolicies`, and add the bind our Logic App to this new access policy.

The snippet below creates the API access policy resource given that we've retrieved the particular Logic App resource that we want to allow access to.

```
resource apiAccessPolicy 'Microsoft.Web/connections/accessPolicies@2016-06-01' = {
  name: '${logicApp.name}-${guid(resourceGroup().name)}'
  location: location
  parent: serviceBusConnApiConnection
  properties: {
    principal: {
      type: 'ActiveDirectory'
      identity: {
        tenantId: subscription().tenantId
        objectId: reference(logicApp.id, logicApp.apiVersion, 'Full').identity.principalId
      }
    }
  }
}
```

And that's it. ~~The only peculiar behaviour that I've seen is the naming of this resource. For a service bus API access policy, we need to name it with the prefix of the service bus connection name as in the above snippet. However, that is not the case for azure blob.~~

~~For azure blob, using the naming structure above will give us an error ~~`Expected resource name to not contain any "/" characters. Child resources with a parent resource reference (via the parent property or via nesting) must not contain a fully-qualified name.bicep(BCP170)`. ~~Turns out we can just name it without the prefix of the API connection's name 🙄, i.e. it's simply~~

`name: '${logicApp.name}-${guid(resourceGroup().name)}'`

~~I'm still trying to understand the reason for this, but well, it is what it is 😄~~

UPDATE: Turns out I missed out the parent keyword which indicates what's the connection resource for the access policy 😄. Once the parent is specified, we can name the access policy without the prefix.
Tired of debugging alone?
Tags: vscode, productivity, help, javascript
Published: 2022-05-03 13:04:42

How often have you spent hours(days) debugging something which your teammate could have solved for you?

I am creating a vscode plugin (javascript for now) to help developers share errors easily by creating a web link with the description, stack trace and files relevant to the error which can be shared with their teammates.

I believe async collaboration can be huge productivity boost, and this is a step towards that. Looking forward to feedback and connecting with developers who want to contribute / use this. Cheers.
Open yourself to the open-source world !!!
Tags: opensource, javascript, react, webdev
Published: 2022-05-03 12:43:00

For me it all started with a project idea, after countless times of trying to do it all myself, I realized that I'm working in the best field in the world, a place where sharing is **REALLY** caring!
That's when I started investigating open source projects like crazy, out of the thought that **you can't make something that you don't know exists**.
I had to expose myself to as many features as possible so that I could expand my toolbox and finally put those sausage fingers to good work.
It's all about understanding what is in front of you, "if it's within my abilities or not".

## Some examples from my first attempts:
- 
I found out more about the convenience that JSX and CSS in JS libraries give us.
It helped me create a presentation-like portfolio with the use of user scrolling percentages, that you are welcome to checkout by the way 😉
[Dor Bellmas's Portfolio](https://dorbellmas.netlify.app/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72039x8ydje2v09z5mw9.png)

- 
Over the years I have used so many libraries but once you are exposed to well-written code, all you have to do is open your pocket and compress all those gifts inside (functions, hooks, reusability-thinking, correct structure, etc…).
Above all, it just produces a deeper understanding.

- 
I learned so much from just reading documentation pages, and playing with site features.
I used to breeze over documentations and get stuck in the process, but now I have a better understanding of how to read them carefully and get the most out of them. 
After all, these are experienced people who have spent a lot of time on them.

- 
My line of thought is to take something that already works and find a way to use it or make it better.

## TIPS for a beginner open-source investigator:

- 
If there is a DEMO link, an examples folder, or documentation, use these to help you choose your project (you can always start small).

- 
Download [Octotree - GitHub](https://medium.com/r?url=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2Foctotree-github-code-tree%2Fbkhaagjahfmjljalopjnoealnfndnagc) or just press the dot key on your keyboard while visiting a GitHub project and watch the magic.

- 
'**BCD**' as quickly as possible [**B**ring it to life by cloning and installing dependencies, **C**hanging something, **D**eploy (with [netlify](https://www.netlify.com/) it's easy peezy)], it all might sound a lot but the more you practice, the sharper your documentation reading skills will be, and you won't waste your precious time.

- 
After a successful **BCD**, 'cmd/ctrl+shift+c '(in the browser) and 'cmd/ctrl+shift+f ' (in the code editor) are going to be your best friends.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itro544gm9jaooi9ga3u.png)
_Learn from this fearless sloth and start exposing yourself to more open-source!_
A much more technical article on this subject is coming soon, **STAY TUNED**🦾
In case you mess up the bash files
Tags: bash, beginners, programming
Published: 2022-05-03 12:19:21

When login to the computer, bash profile loads. If the bash file has syntax error logging fails. And you cannot login to the machine because the connection get closed.

The trick is to press `Ctrl+C` immediately after the login to prevent bash profile from loading.

refer:
https://unix.stackexchange.com/a/232269
FlutterFlow | Popup BottomSheet on the markers for GoogleMap
Published: 2022-05-03 11:43:08

While developing your app, it could be not quite obvious how to leverage "Markers" all configured at least for me 🙂 

You may need to pass data to another page from the "GoogleMap" page. For example, sending a listing item from "ListView" or "Column" to the "Component" in my case. To pass any data from one page to another component or page, you will need a few parameters. You can think of a parameter as a variable that holds the value being passed from one page to another.
 
Now, let's configure the essential parts of our app for passing data by creating a page "GoogleMaps" that sends the message from one page to another "Component". You can see the "Users" and "Posts" collections are being passed from one page to the next one down below.

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

Here could be your "Query Collection" for any events.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpvnowd6ychufc5cpnug.png)

Add Action in "GoogleMap".

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

Passing Parameters from the GoogleMap to the Component 

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

Add the "Component" to the "Action Type" named "Bottom Sheet" on "GoogleMap".

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

In the List or "Column" add "Query Collection". In case, to be able to set "Paths" to a variable. 

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

Now it's time to define the "Parameters" on the "Details Page" of the component.

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

At this moment it should be all set to go. Click-clack - it works 😀

Thank you Mike Startup for navigating me in the right direction :)
Javascript function call and apply methods
Tags: javascript, programming, tutorial, beginners
Published: 2022-05-03 11:25:27

In Javascript, even functions are considered objects even tho it's a bit weird, and objects can have some methods so functions also have methods.
functions have 3 interesting methods: call, apply and bind
so in this post i will explain them and tell the difference between them
## Reminder: The this keyword inside the function
i wanted to remind you that the special this keyword inside functions or methods refer to the owner of it.
for example if we have a class with a method on it and an instance of that class, when we call the method, the this keyword will be that instance because it is the owner at that time
```javascript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak(words) {
    console.log(`${this.name} says ${words}`);
  }
}

const person = new Person("John", 30);

person.speak("Hello"); // John says Hello

```
this here refers to person object because in that case that's the owner so this.name will be John

## The call method
let's first talk about the call method, simply put it allows you to change the value of the this keyword inside that function you called the method in.
### example
let's create a seperate function called speak that does the same thing as the method inside the class
```javascript
function speak(words) {
  console.log(`${this.name} says ${words}`);
}
```
by default the this keyword inside a seperate function will be the window object on the browser environment or a gloabl object on the nodejs environment.
now let's manually set it to the person object so it can log the user name correctly
```javascript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(words) {
  console.log(`${this.name} says: ${words}`);
}

const person = new Person("John", 30);

speak.call(person, "Hello"); // John says: Hello
```
now when we used the call method, this will now refer to the person object passed to the call method (any args that the function accepts can be passed after the this value)

## The apply method
the apply method does exactly the same thing as call but the only difference is that the function args will be passed as an array instead of individual args to the apply method
### example
```javascript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(word1, word2) {
  console.log(`${this.name} says: ${word1} ${word2}`);
}

const person = new Person("John", 30);

speak.apply(person, ["Hello", "World"]); // John says: Hello World
```

## The bind method
the bind also allows you to do the same thing but it won't call the function, instead it will return a new function that uses the specified this keyword
### Example
```javascript
const johnSpeak = speak.bind(person, "Hello World"); // John says: Hello World

johnSpeak(); // John says: Hello World
```
How to easily record, replay and measure user flow on your webpage using only the Chrome DevTools
Published: 2022-05-03 11:12:44

Let's be honest. Tests are super important but also can be quite annoying thing to do. Especially, when we want to recreate user flows and have to looking for all ids, add `sleep` or `waitTo`, etc. But what if there is a much easier way? Chrome DevTools recently added the `Recorder` tab and I have to say it's one of my favourite features recently.

The recorder tab is the next feature in the Preview mode. Thanks to that you can easily record and replay user flow on the webpage and avoid arduous manual work. You can also add/edit/remove steps and measure the performance of a given user flow (an extremely important factor if you want to keep users on your page). What’s more — created flow can be exported as Puppeteer script and used in your CI/CD. Extremely nice! How to generate this script?

- Open the Chrome browser
- Go to the page you want to test
- Open Chrome DevTools
- Click 3 dots to open the menu
- Click More tools > Recorder
- Click the Start new recording button
- Add recording name and optionally selector attribute (e.g. data-testid, data-cy, etc)
- Click Start a new recording button
- Perform actions you want to record
- Click End recording when you ready
- After a while, you’ll receive a timeline similar to this visible on the screenshot below.

Timeline of events in recorded user flow. Each step has 3 dots menu and can be extended to see all details. On the top there are option to edit name or export the script and 2 buttons to replay and measure performance.

![Example of recorded user flow via Recorder tab in Chrome DevTools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc06ncxoqumw1hrx3gjb.png)

You can replay it, edit, add or remove steps, etc. UI is intuitive and I’m sure you’ll know what to do so I’ll skip detailed descriptions. As I said previously you can also export it to use outside of DevTools or share it with others. What I like is the Measure performance option. To run it just click the blue button in the top right corner. Thanks to that you’ll receive a full performance report on a given flow — with screenshots, stats, event stacks, etc — everything you need to make your webpage faster and easier to use. Don’t take my word for it — just check it out! It takes just a few minutes.

PS. If you found this article interesting please leave a comment, or share it with your friends. Thanks in advance!
Fake news detection using python tree classifier
Published: 2022-05-03 11:06:30

**Abstract**

With the current usage of social media platforms, consumers are creating and sharing more information than ever before, some of which are misleading with no relevance to reality. Automated classification of a text article as misinformation or disinformation is a challenging task. Some of the information converted is misleading because it is not authorized. Even an expert in a particular domain has to explore multiple aspects before giving a verdict on the truthfulness of an article. In this work, we propose to use machine learning Tree classification model for detecting fake news. 

**Introduction**

The adoption of Information over social media platforms such Facebook, twitter, telegram has recently increased. others have used news from magazines and posted it on there social platforms to gain more subscribers by converting the news from the magazines ,newspapers to be digital media formats. Facebook is the most used social media platform. This is because many people can discuss challenges affecting the world like; our economy , racism, nepotism, patriotism, democracy.  However, such platform can also be used with a negative perspective like, monetary gain, creating biased opinions, manipulating mindsets, and spreading satire or absurdity. And this is what we refer to us as fake news.

Sharing articles online that do not confirm to facts that has led to many problems like , covering other topics such as sports , finance ,and also science instead is limited to politics only. And finance is the most affected area with fake news.

According to research many consumers of information have been responding to fake news. One recent case is the spread of corona virus, where fake reports spread over the Internet about the origin, nature, and behavior of the virus . The situation worsened as more people read about the fake contents online.

Fortunately, there are a number of computational techniques that can be used to mark certain articles as fake on the basis of their textual content . Majority of these techniques use fact checking websites such as “Politic Fact” and “Snopes.” There are a number of repositories maintained by researchers that contain lists of websites that are identified as ambiguous and fake . However, the problem with these resources is that human expertise is required to identify articles/websites as fake.

**Contributions**

Our study explores different textual properties that could be used to distinguish fake contents from real. By using those properties, we train a combination of different machine learning algorithms using various ensemble methods that are not thoroughly explored in the current literature. The ensemble learners have proven to be useful in a wide variety of applications, as the learning models have the tendency to reduce error rate by using techniques such as bagging and boosting.

**Framework**