teleren/devto huggingface dataset:
A Vue3 Tutorial - 06 Conditional Styling
Tags: vue, javascript, beginners, tutorial
Published: 2022-02-23 03:58:56

https://github.com/Krowemoh/vue3-without-build

Now that we have sorting done, let's add a sort icon to the header. Before we do that we should clean up the header as it's starting to get unwieldy. Ideally, we want the header to also be dynamic.

We can update our getWorkers function to also get the headers.

```
async getWorkers() {
    const workers = [
        { name: "Airi Satou", position: "Accountant", office: "Tokyo", age: 33},
        { name: "Angelica Ramos", position: "Chief Executive Officer (CEO)", office: "London", age: 47 },
        { name: "Cedric Kelly", position: "Senior Javascript Developer", office: "Edinburgh", age: 22 },
        { name: "Jennifer Chang", position: "Regional Director", office: "Singapore", age: 28 },
    ];

    const headers = [
        { key: "name", value: "Name" },
        { key: "position", value: "Position" },
        { key: "office", value: "Office" },
        { key: "age", value: "Age" },
    ];

    this.headers = headers;
    this.workers = workers;
}
```

Next, we update the data variable to have a headers variable.

```
data() {
    return {
        sortColumn: "",
        order: "ASC",
        searchString: "",
        headers: [],
        workers: [],
    }
}
```

Finally we can update the html to use our new variable!

```
<thead>
    <th v-for="header in headers" @click="setSortColumn(header.key)">
        {{header.value}}
    </th>
</thead>
```

Now that we have that done, we can now add some arrows to show the sort.

```
<thead>
    <th v-for="header in headers" @click="setSortColumn(header.key)">
        {{ header.value }}
        <span class="arrow" :class="{ active: this.sortColumn === header.key && this.order === 'ASC'}">
            &#8593;
        </span>
        <span class="arrow" :class="{ active: this.sortColumn === header.key && this.order === 'DESC'}">
            &#8595;
        </span>
    </th>
</thead>
```

Here we are using the unicode characters for the up and down arrows.

We also have :class binding now which will conditionally add a class to an element. In this case, we check to see which column we are sorting on and the order when we set the active flag.

We can also include styling in the html file which will be specific to this component.

```
<style>
th { cursor: pointer; }
.arrow { color: gray; }
.active { color: black; }
</style>
```

With that! We have a decent enough header. When we click on a column, we'll see our active class flipping between the two states of ordering and it will also tell us which column we are sorting on.
A Vue3 Tutorial - 05 Sorting
Tags: vue, javascript, tutorial, beginners
Published: 2022-02-23 03:58:49

https://github.com/Krowemoh/vue3-without-build

Now that we have searching done, the next step is to add sorting. We're going to use the same logic from before. We want to be able to click on a header and update a sortColumn variable which will in trigger a new compute. We can actually use our filteredWorkers function as we want the search and sort to stack on top of each other.

```
data() {
    return {
        sortColumn: "",
        order: "ASC",
        searchString: "",
        workers: [],
    }
},
```

We also want to keep track of the order as we want to reverse the sort if someone clicks the same header twice.

Now the next step is to add our click events.

```
<thead>
    <th @click="setSortColumn('name')">Name</th>
    <th @click="setSortColumn('position')">Position</th>
    <th @click="setSortColumn('office')">Office</th>
    <th @click="setSortColumn('age')">Age</th>
</thead>
```

The @ is a shorthand for the v-on:click which binds the event to a function. We are going to run a function called setSortColumn passing in the column's name.

```
methods: {
    setSortColumn(column) {
        if (this.sortColumn === column) {
            this.order = this.order === "ASC" ? "DESC" : "ASC";
        } else {
            this.order = "ASC";
            this.sortColumn = column;
        }
    },
    ...
}
```

We put the setSortColumn in the methods section instead of the computed section because this is something we want to manually control.

Here is also where we have logic that checks to see what the current sortColumn is before changing the ordering of the results.

Now we have everything ready to actually implement our sort!

```
computed: {
    filteredWorkers() {
        const filteredWorkers = this.searchString === ""
            ? this.workers
            : this.workers.filter(wo => Object.values(wo).join("").indexOf(this.searchString) !== -1);

        const column = this.sortColumn
        const order = this.order;

        filteredWorkers.sort(function(a, b) {
            var nameA = a[column]+"".toUpperCase();
            var nameB = b[column]+"".toUpperCase();
            if (order === "DESC" && nameA > nameB) {
                return -1;
            }
            if (order === "DESC" && nameA < nameB) {
                return 1;
            }
            if (nameA < nameB) {
                return -1;
            }
            if (nameA > nameB) {
                return 1;
            }
            return 0;
        });

        return filteredWorkers;
    },
},
```

We do our filtering first with our search string. We then run our sort function and our ordering of the results. With that we are done!

We have now wired up our sort to work when we click the headers and we can also search as well.
A Vue3 Tutorial - 04 Searching a Table
Tags: vue, javascript, tutorial, beginners
Published: 2022-02-23 03:58:33

https://github.com/Krowemoh/vue3-without-build

Now that we fetched our data and displayed it, it's time to add a search bar.

```
<div v-else>
    <input v-model="searchString" placeholder="search" class="mb-1">
    <table>
    ...
    <table>
</div>
```

We use the v-model tag to bind a form element to a javascript variable. The variable name searchString in the input tag will correspond with a variable called searchString in our Vue application.

```
data() {
    return {
        searchString: "",
        workers: [],
    }
},
```

Now as we type things in or delete things, the variable in the vue application will also be updated. We want our search to happen instantly as the person types, so now we are going to use the computed property of our vue application.

Like the methods property, computed is also a property but functions defined inside this object will be run anytime anything inside the function changes value.

```
data() {
    ...
},
computed: {
    filteredWorkers() {
        const filteredWorkers = this.searchString === ""
            ? this.workers
            : this.workers.filter(wo => Object.values(wo).join("").indexOf(this.searchString) !== -1);
        return filteredWorkers;
    },
},
methods: {
    ...
}
```

Here we write a function called filteredWorkers which will reference the searchString variable in our application. We then do a very poor search of this string in the values of our array of objects.

Once we have our list filtered we can then return this array.

Now instead of displaying all of the workers, what we want to display is this filtered list. When the search is blank, we'll then display everything.

```
    <tr v-for="worker in filteredWorkers">
```

We can now reference our computed function instead of our workers variable and everything should be good to go!

As we type, out searchString variable is being updated, which in turn will trigger the computed functions that reference searchString to be re-run, which ultimately leads to the table being re-rendered each time we type. Quite magical!
A Vue3 Tutorial - 03 Fetching Data
Tags: vue, beginners, javascript, tutorial
Published: 2022-02-23 03:58:27

https://github.com/Krowemoh/vue3-without-build

Now that we can display the data, we have one issue. The data is hardcoded into our code. In the real world, we fetch the data and only display the data if it's available. We aren't going to set up an actual server and do a real fetch but we can abstract everything so that it will be simple to add a fetch statement later.

The first thing we need to do is move our workers variable elsewhere where we can pretend to fetch it. We then need to get this fetched data once our application loads.

```
Vue.createApp({
    data() {
        return {
            name: 'Nivethan',
            workers: [],
        }
    },
    methods: {
        async getWorkers() {
            const workers = [
                { name: "Airi Satou", position: "Accountant", office: "Tokyo", age: 33},
                { name: "Angelica Ramos", position: "Chief Executive Officer (CEO)", office: "London", age: 47 },
                { name: "Cedric Kelly", position: "Senior Javascript Developer", office: "Edinburgh", age: 22 },
                { name: "Jennifer Chang", position: "Regional Director", office: "Singapore", age: 28 },
            ];
            this.workers = workers;
        }
    },
    mounted() {
        this.getWorkers();
    }
}).mount('#app')
```

The first thing we do is change our workers variable in data to be an empty array. We still need to initialize it.

The next thing we do is add a new parameter to our vue application called methods. This is an object that will hold functions we can call from within the application.

We can write the async function getWorkers which we will contain the fetching code. Here we have the workers still hardcoded but we can easily swap this out for an awaited fetch call.

Finally we add one more function our vue object. This is the mounted function, this goes outside the methods as this is a vue specific function like data. The mounted function will run once our application is ready and it will call getWorkers.

Once getWorkers runs, it will populate the workers variable and voila! Our screen should update with our new data.

If we refresh the screen, not much will have changed but we'll know, deep down, inside we'll know!

Before we wrap up this section, it would be nice to be able to show a message for when we don't have workers yet.

We can do this by using conditionals.

```
<div v-if="workers.length === 0">No workers available.</div>

<div v-else>
    <table>
        ...
    </table>
</div>
```

We check to see if the array has anything in it and then print out a message if there is none. Otherwise, we can display the table.

The v-else could go on the table but I prefer using divs.

To test this logic, you can remove the assignment of workers to this.workers in our getWorkers function.

With that, we have our application ready to fetch data and display it!
A Vue3 Tutorial - 02 Tables
Tags: vue, javascript, beginners, tutorial
Published: 2022-02-23 03:58:20

Now that we have the basics, let's wire up a table. The scenario would be that we get data from some data source and we want to have it display in a table. We also want to search on this table, sort this table and maybe even make a few selections about what to display.

For now, however let's just get the table working.

https://github.com/Krowemoh/vue3-without-build

### The Data

The first step is to wire in the data. We are going to fake the data for now, so we can just add in a list into our data function.

(The data was take from the datatables site, great library.:))

```
data() {
    return {
        name: 'Nivethan',
        workers: [
            { name: "Airi Satou", position: "Accountant", office: "Tokyo", age: 33},
            { name: "Angelica Ramos", position: "Chief Executive Officer (CEO)", office: "London", age: 47 },
            { name: "Cedric Kelly", position: "Senior Javascript Developer", office: "Edinburgh", age: 22 },
            { name: "Jennifer Chang", position: "Regional Director", office: "Singapore", age: 28 },
        ],
    }
}
```

We create an array called workers and now we can use this in the main html.

### The View

Now that we have the data available, it's time to display it.

```
<table>
    <thead>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
    </thead>
    <tbody>
        <tr v-for="worker in workers">
            <td>{{worker.name}}</td>
            <td>{{worker.position}}</td>
            <td>{{worker.office}}</td>
            <td>{{worker.age}}</td>
        </tr>
    </tbody>
</table>
```

This is pretty straightforward html, the only thing that should give you pause is the v-for tag. This is like the curly brackets from before. The v-for tag takes in a loop and inside it looks like you can use javascript variable names. This is a bit weird as it's inside the quotes so I'm curious if traditional ranges and calculations work inside the quotes. It could be that v-for attribute is quite limited.

The v-for tag is going to create as many rows as there are workers. We can get the index if we need it by doing the following.

```
    <tr v-for="(worker, index) in workers">
```

Now if we refresh the page we should see a table with out users! Usually I would use a function to hold a template string and then loop and build up that string and then append it to the dom. This is already loads better than that strategy. I really like this style of being able to embed the template logic directly into the html rather than have it be in the javascript.
How To Check User Browser Is Supported Or Not In jQuery
Tags: laravel, jquery, php, browser
Published: 2022-02-23 03:41:47

In this tutorial, I will show you how to check user browser is supported or not in jquery. Some time latest features are not supported in many browsers like internet explorer, safari, google chrome, etc, Also, we will get the browser name in jquery and how to get browser details in javascript.

We are use indexOf() method to get user agent and detect browser using jquery.

So, let's see how to check user browser is supported or not in jquery.

- Detect Chrome browser
- Detect Internet Explorer browser
- Detect Firefox browser
- Detect Safari browser
- Detect Opera browser

you will get output like below image.

![How to Check User Browser is Supported or Not in jQuery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9plt9gq3dtoogddoy5gd.png)

---

> **_[Read More : How to Check User Browser is Supported or Not in jQuery](https://techsolutionstuff.com/post/how-to-check-user-browser-is-supported-or-not-in-jquery)_**
Binb365 VIP – Nhà cái uy tín số 1 Việt Nam – Trang chủ Binb 365
Tags: binb365vip, nhacaiuytin, casinotructuyen, cacuocbongda
Published: 2022-02-23 03:30:10

BinB365 là một tổ chức hợp pháp cung cấp các hình thức cá cược bóng đá, cá độ thể thao, casino trực tuyến, các thể loại game giải trí online hấp dẫn được tham gia bằng hiện kim như tiền mặt, tiền ảo, đổi thẻ cào, thẻ game..v.v. Trang cá cược uy tín được nhiều người tham gia cá cược vì độ uy tín được đánh giá, xếp hạng qua nhiều tiêu chí như tỷ lệ chính xác, chính sách khuyến mãi, tình trạng thanh toán, giao diện thân thiện, hỗ trợ trực tuyến, giấy phép đăng ký hoạt động kinh doanh hợp pháp…
Địa chỉ : Hồ Chí Minh 
Sđt : 0566118183 
Chi tiết liên hệ tại : 
Website : https://binb365.vip/ 
Twitter : https://twitter.com/binb365vip 
Linkedin : https://www.linkedin.com/in/binb365vip/ 
Tumblr : https://binb365vip.tumblr.com/ 
Pinterest : https://www.pinterest.com/binb365vip/ 
Flickr : https://www.flickr.com/people/binb365vip/ 
Twitch : https://www.twitch.tv/binb365vip 
Instagram : https://www.instagram.com/binb365vip/
Code Smell 116 - Variables Declared With 'var'
Published: 2022-02-23 03:10:52

*Var, Let, Const: are all the same, aren't they?*

> TL;DR: Choose wisely your variable names, scope, and mutability.

# Problems

- [Mutability](https://dev.to/mcsee/the-evil-powers-of-mutants-1noo)

- Readability

# Solutions

1. Declare const all variables unless you need to change them

# Context

Most languages don't need variable declarations.

Some other languages allow us to state mutability. 

We should be strict and explicit with our declarations.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/f310bf19719788bfe2dbca3dab16a2c3)
```javascript
var pi = 3.14
var universeAgeInYears = 13.800.000.000

pi = 3.1415 // no error
universeAgeInYears = 13.800.000.001 // no error
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/c0c6bf0726100b918e5aa04955519465)
```javascript
const pi = 3.14 //Value cannot mutate or change 
let universeAgeInYears = 13.800.000.000 //Value can Change

pi = 3.1415 // error. cannot define
universeAgeInYears = 13.800.000.001 // no error
```

# Detection
 
[X] Manual

With [mutation testing](https://en.wikipedia.org/wiki/Mutation_testing) by forcing a 'const' declaration, we can check if a value remains constant and be more declarative by explicitly enforcing it.

# Tags

- Mutability

- Javascript

# Conclusion

Readability is always very important. 

We need to explicitly state our intentions and usages.

# Relations

{% post https://dev.to/mcsee/code-smell-86-mutable-const-arrays-46ag %}

# More Info

- [Differences between let, const, and var](https://twitter.com/SajalShlan/status/1495010893683314689)

- [The Evil Power of Mutants](https://dev.to/mcsee/the-evil-powers-of-mutants-1noo)

# Credits

Photo by <a href="https://unsplash.com/@nasa">NASA</a> on <a href="https://unsplash.com/s/photos/universe-change">Unsplash</a>
  
* * *

> Just as it is a good practice to make all fields private unless they need greater visibility, it is a good practice to make all fields final unless they need to be mutable.

_Brian Goetz_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
How To Remove a Property From a JavaScript Objects 👨‍🎓🤓.
Tags: javascript, beginners, programming
Published: 2022-02-23 02:21:20

## What is a Object in JavaScript:
  
######*Definition by MDN*

*Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood with real life, tangible objects.

In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.*

####Source: [link here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

###How to delete a property in a object:-

####1. Using the **delete** operator:-

It is a special operation that removes a property from an object.

And before I talk about how it is used , Did you know there are two ways to access a object property :-

#####1.
 ```
const obj = {name:'cool'};
console.log(obj.name);
```
#####2.

```
const obj = {name:'cool'};
console.log(obj[name]);
```
Now using the **delete** operator:

```
const obj = {name:'cool', age:20};
delete obj.name;
or
delete obj[name]
```

_delete operator is mutable , just a fancy of saying that it modify the object permanently._

####2. Using destructuring:- 

Destructuring in Javscript is used to unpack values or properties from Arrays or objects.

```
const obj = {name:'cool', age:20};
const {name, age} = obj;
```
Same way to delete/remove use the syntax:-

const {prop,...restObj} = obj;

```
const obj = {name:'cool', age:20 , class:A};
const {name, ...remainingProp} = obj;
console.log(name);
console.log(remainingProp);
```
This way to do this immutable that means the original object remains same as before but still we get access to single property and other remaining properties , in this case **name** is not present in the **remainingProp**.
VS2022 .NET 6.0, Blazor 02-02-2022
Tags: blazor, vs2022, webassembly
Published: 2022-02-23 01:37:27

Prerequisites: VS2022, .NET 6.0

![Create a new Web App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cq0tr8np42txjjpfmpk.png)
 
Open Visual Studio 2022 and create a new project. Select Blazor WebAssembly App shown above. 

Take all of the defaults and your Solution should look like this:
![The solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oob3775ttbpn2n1k0p53.png)
 
When we start the new application we see this.
![Starting the application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6w0vsy97xcpsj3kdk14.png)
 
We'll skip the left side navigation for now, and just focus on the right-side content.

The "Shared" folder is where Razor components are stored. By default the right-side content is named "MainLayout.razor" it looks like this:
```html
@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>
```
The code is a mixture of HTML and code with the prefix "@" this is C# code. Intellisense works here nicely. Right click on LayoutCompoentBase, Go To Definitions and you'll see it is a part of the [Microsoft.AspNetCore.Components](https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components?view=aspnetcore-6.0) namespace. [Defined here](
https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.layoutcomponentbase?view=aspnetcore-6.0)

## MainLayout Main Section ##

```html
    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
```
It provides a top section, for links, and a bottom section for content. But where does the content for @Body come from?

By HTML convention the Index.html is always the root page of a site, for Blazor it's Index.razor.

![index.razor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua7ql9anu2vk05s16st0.png)
 
 

```html
@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
```
Yes, we found it.  Time to start customizing!