teleren/devto huggingface dataset:
How to test every widget in Flutter?
Tags: flutter, testing
Published: 2022-02-01 17:16:08


I think everyone who wrote some widget tests had a moment where they didn’t know how to test their widget that uses some of the widgets from Flutter’s Material or Cupertino widgets. It’s often not obvious how to do it so it’s definitely not a reason to be ashamed asking questions like “How to test DropdownButton?”, “How to get Slider into a specific position?” or “How to test selecting a date using showDatePicker?”.

I could put here snippets on how to do it, but you probably already have them on your machine. 

![Shocked donkey kong](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q8aedzywsny1b9o2ix0v.gif)

So in case you didn’t know, a Flutter installation requires you to download the whole Flutter repository. This repository aside from the source code also contains tests. Tests for everything inside Flutter, since they do care about tests. These tests are often tricky, non-trivial, or very specific. It’s hard to find tests like that in any tutorial.

![art tutorials be like meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugqybz18f8g7d5uk1zpa.jpeg)

So Flutter repository is a huuuuge source of great widget tests that you can learn from. Let’s say I want to see tests for Slider. You can find tests for that inside [packages/flutter/test/material/slider_test.dart](https://github.com/flutter/flutter/blob/master/packages/flutter/test/material/slider_test.dart).

CupertinoTimePicker? No problem! Similar path [packages/flutter/test/cupertino/date_picker_test.dart](https://github.com/flutter/flutter/blob/master/packages/flutter/test/cupertino/date_picker_test.dart)

And you don’t need to browse GitHub for that - you can open your local Flutter repository with your favorite editor. I wouldn't trust GitHub search, your VS Code or Android Studio can do much better.

### Don’t Repeat Yourself

Sometimes getting something into the desired state can be a bit complex. If you find yourself having to do that often in your tests make sure to extract this logic into some function or method. like I did with my `clickNextPageButton` or `_chooseDate`. This really improves the readability of your tests, which is crucial for the idea of tests to work properly. 

Hope you found this post helpful. I personally love learning from examples! Or maybe I am just copying pasting them 🤔  Anyway.

Happy coding! 💙
Monitoring VMware on zabbix
Tags: zabbix, vmware, esxi
Published: 2022-02-01 17:04:36

---
title: Monitoring VMware on zabbix
published: true
description: Enable monitoring of ESXi VMware hosts in Zabbix
tags: zabbix, vmware, esxi
---

![Zabbix 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spout9ajsso2cmwpajy2.png)
#### Enable monitoring of ESXi VMware hosts in Zabbix
---

- In the vSphere Client, select the host in the inventory.
- In the right pane, click the Configuration tab.
- Under Software, select Advanced Settings.
- From the left pane of the Advanced Settings dialog box, select Config > HostAgent > plugins > solo.
- Select or deselect "Config.HostAgent.plugins.solo.enableMob" to enable or disable the Managed Object Browser.
- For 6.7 complete the following steps.
- Browse to the host in the vSphere Web Client navigator.
- Click on the manage under Navigator on left pane.
- Select System tab.
- Click on Advanced settings.
- Select the Config.HostAgent.plugins.solo.enableMob option and click Edit to enable or disable the Managed Object Browser.


---

- Zabbix:
  - Set value for SmartVMwareCollectors in the zabbix-proxy:
    - StartVMwareCollectors=5 (always double the amount of vmware in the environment)

- VMware:
  - Collect UID in the site:
    - ip-server-vmware/mob/?moid=ha-host&doPath=hardware.systemInfo

---

- CONFIG NEW HOST IN ZABBIX-SERVER
    - HOSTNAME (aways must have the UID)
    - VISIBLE NAME
        - Identify the hostname of your preference 
    - Other settings are your choice.

    - Macros:
        - {$PASSWORD}
        - {$URL}
        - {$USERNAME}
Paracetamol.js💊| #40: Explica este código JavaScript
Published: 2022-02-01 16:56:00

## **Explica este código JavaScript**

```js
function addToList(item, list) {
  return list.push(item);
}

const result = addToList("apple", ["banana"]);
console.log(result);
```

-     A: `['banana', 'apple']`
-     B: `2`
-     C: `true`
-     D: `undefined`

Respuesta en el primer comentario.

---
Demystifying 'This' in Javascript
Tags: javascript, programming, webdev, tutorial
Published: 2022-02-01 16:53:36

The first question a beginner in programming would ask is, "what is 'this'? Well, I don't mean the kind you have in mind. In this context I'm talking about the 'this' that accompanies every block of code or function. So where does 'this' come from?

Every code block always has a context called 'this'. Most beginners always wondered where the this comes from (I was most beginners, most beginners was me). 

When a code block is created, in this example, we will be using a function. All functions are prototype of the Object class, i.e. they inherit from the Object class. First we have to look at function from the angle of being an object. Let's take a look at what happens when you create a function.

```
function getAllUser(){
   let this = {} //(1)
}
```
When a function is declared we have an Object initialized or created called 'this' as seen in (1) above. All methods and variables are created inside the 'this' object.

```
function createUser(firstName, lastName){
    let firstName = firstName;
    let lastName = lastName;
}
createUser.prototype = {
      fullName: function(){
          Alert(`Full name is ${this.firstName} ${this.lastName})
      }
}
function createUser(firstName, lastName){
    let this = {
      firstName: firstName,
      lastName : lastName
    }
}
```

## Conclusion
The object class is parent to many other classes and it forms the basis of many classes we use often. The concept of 'this' is understandable because function itself is a prototype of Object class.
TerminusX backend for React CMS tutorial
Tags: react, tutorial, opensource, database
Published: 2022-02-01 16:50:15


Hi, my colleague Cheuk recently put together this tutorial using TerminusX as a backend for a simple CMS system and I thought I'd share it here.

YouTube: {% youtube uVH-V_8MWdQ %} 

More info about working with [TerminusX and React can be found here](https://terminusdb.com/blog/build-a-react-backend-with-terminusx/).

The full tutorial can be [found on GitHub here](https://github.com/terminusdb/terminusdb-tutorials/tree/master/react-example)
All food ingredients website (organized)
Tags: food, webs, idea
Published: 2022-02-01 16:43:15

A cool idea can be a website with a database with all possible food ingredients / food commodities from all the world, with all history and uses. Food commodities includes animals, and plants, but only edible animals and edible plants, and where find them. Maybe how feed/grow them. All possible spices, and even refined commodities like all type of flours, (so not only wheat, cause also it can be used as main ingredient of a dish). All this with a great organization, because I hope not only me I become mad understanding  different types and most important names of flours. Names can include a map with local names for some ingredient, (here in Italy every region has its names for cuts of meat)
How to Detect Screen Orientation Using JavaScript
Tags: javascript, webdev, react
Published: 2022-02-01 16:41:14

Hello Devs,

In this blog we will see,
### How to detect screen orientation using JavaScript.

Below are the most useful ways to get/ detect the orientation of the screen/ device using JavaScript.

without wasting time, lets get into the blog,



## **1. How to detect screen orientation using `window` object**

```js
if (window.innerHeight > window.innerWidth) {
  alert("You are in portrait mode");
}

if (window.innerHeight < window.innerWidth) {
  alert("You are in landscape mode");
}
```




## **2. How to detect screen orientation using `window.screen` object**

On mobile devices, if you open a keyboard then the above may fail, so we can use `screen.availHeight` and `screen.availWidth`, which gives proper height and width even after the keyboard is opened.

```JS
if(screen.availHeight > screen.availWidth){
    alert("You are in portrait mode");
}

if(screen.availHeight < screen.availWidth){
    alert("You are in landscape mode");
}
```

####**or**

```javascript
if (screen.height > screen.width) {
  alert("You are in portrait mode");
}

if (screen.height > screen.width) {
  alert("You are in landscape mode");
}
```




## **3. How to detect screen orientation using `screen.orientation.type`**

```js
if (
  orientation === "portrait-secondary" ||
  orientation === "portrait-primary"
) {
  alert("You are in portrait mode");
}

let orientation = screen.orientation.type;
if (orientation === "landscape-primary") {
  alert("You are in landscape mode");
}

if (orientation === "landscape-secondary") {
  alert("You are in landscape mode with screen as upside down");
}

if (orientation === undefined) {
  alert("orientation not supported in current browser");
}
```




## **4. How to detect screen orientation using `matchMedia`**

```javascript
if (window.matchMedia("(orientation: portrait)").matches) {
  alert("You are in portrait mode");
}

if (window.matchMedia("(orientation: landscape)").matches) {
  alert("You are in landscape mode");
}
```

Thank you for reading this so far. This is a brief introduction on **How to Detect Screen Orientation using JavaScript** .
If you find this article useful, like and share this article. Someone could find it useful too.

If you find anything technically inaccurate please feel free to comment below.

Hope its a nice and informative read for you.
VISIT https://www.capscode.in/blog TO LEARN MORE...
See you in my next Blog article, Take care!!

Thanks,
CapsCode
Setting up Sveltekit with Mdsvex
Tags: svelte, javascript
Published: 2022-02-01 04:55:21

I've been enjoying my time with Svelte that I've decided I'm going to rebuild my blog agian using SvelteKit and Mdsvex. I want this setup because I have some grand ambition (but high likelihood I'll never find the time to do it) to build interactive tutorials or pages. 

Setting this up was pretty simple.

Start by installing a new SvelteKit project

```
npm init svelte@next new-blog
cd new-blog
npm install
```

We also need mdsvex.

```
npm i --save-dev mdsvex
```

Now that we have the two main parts, lets configure the project so that they work together. Edit the `svelte.config.js`, and add `mdsvex` to the Svelte preprocess. We will also add the the extension `.svx` to be processed.

```
import {mdsvex} from 'mdsvex';

const config = {
	extensions: ['.svelte', '.md', '.svx'],
	preprocess: [
		mdsvex({
			extensions: ['.md', '.svx'],
		})
	],
	kit: {
		...
	}
};
```
That's pretty much it!

Create the folder `routes\posts` and create a new `md` or `svx` file, for example, `new-post.md`. Inside this `.md` file you can write markdown as usual, but also import Svelte components.

```
// Example markdown file
<script>
  import Header from '../../components/posts/Header.svelte'
</script>

<Header title="Title of this post"></Header>

## Other typical markdown text
```

### Resources
[SvelteKit](https://kit.svelte.dev/)
[mdsvex](https://mdsvex.pngwn.io/)
Dimensions
Published: 2022-02-01 16:32:48

                                                    

- The earth is like a time capsule and the timelines of our lives are orbiting in time and space. We all have evolved with time beyond consanguinity of a family and now a family tree is no longer held by blood but by loyalty and trust; what most call their circle. 

Despite how we have grown, we still fail to recognize positivity in our fellow humans rather we are always open to the negativity we perceive from them and that's whom our hearts feel they are.
There is no life without one another, without the beetle and bird, without the leaf or cloud. We are all born with unique talents and passions to be a gift to the rest of creation, to become a wonderful addition to the whole that makes the different dimensions we live in.

When we feel to the core of our souls that life is sacred, when we see that the natural world is woven into our hearts, that the different dimensions of life we have carved out are all part of this great tapestry of creation, then we will finally be home. Then our mother Earth will feel that we have returned, religion and nepotism would be a common enemy but no longer a tool to create timelines of different dimensions and gifting us different believes of how we evolved from time and we would welcome each person's way of worshipping our creator.

© Lükås dē møzårt
Open Source Instagram Filter Projects - Get Spark AR .arproj files
Tags: javascript, opensource, sopproducts, sh20raj
Published: 2022-02-01 16:13:26

# SopInstagram
Open Source Instagram Filter Projects, Assets and Files

Website :- https://sopinstagram.github.io/
Visit GitHub :- https://github.com/SopInstagram

---

Open Source Instagram Filter Projects - Get Spark AR .arproj files

{% github https://github.com/SopInstagram/SopInstagram/ %}
Queues in Node js
Tags: javascript, node, interview, webdev
Published: 2022-02-01 16:12:05

Have you been using node js for a while now? Are you aware of how things work internally in node js? the queues in node js? Doesn’t matter if your answer is yes or no, I will let you in on one little secret which will clear all your doubts regarding how node js works asynchronously under the hood.

Let’s test your knowledge on node js. If you understand the queues in node js, you would be able to solve the below question.

`console.log("1");
setTimeout(() => console.log("2"),0);
var promise = new Promise(function(resolve, reject) {
  resolve();
});
promise.then(function(resolve) {
  console.log('3');
})
.then(function(resolve) {
  console.log('4');
});
console.log("5");`

Like what you read?

Read the full article on [readosapien.com](readosapien.com)

[Article link](https://readosapien.com/queues-in-node-js/)
Is web dev oversaturated?
Tags: javascript, webdev, react, discuss
Published: 2022-02-01 16:09:08

Someone in forum asked

> There are way too many web developers out there and it is very hard for someone to stand out or land a job in the field. Do you agree or not, and why? Is web development really oversaturated?

Well, he was answered by three people...

Well, it's not. Today's internet is incomplete without websites. These days Every business are going online by making website and apps. We can make apps for mobile phones but what about desktop? 🤔 and also it is not that convenient to download apps for every single use. With the website, we can do work and leave other things like it is.

Wait I am saying that the future of websites and developers is even big in upcoming years. A larger number of developers are getting hired every year with an average salary of around $72,000 in the US and around that in other countries.

I have found that the number of jobs market of web development will increase by 30% in next 5 years. so, we can say its not oversatured. Thanks <3


Read the whole discussion on [Is web dev oversaturated](https://webmatrices.com/d/854-is-web-dev-oversaturated)...


What do you think, is web dev really oversaturated? Let that guy know your thoughts.
Avoid the "delete" keyword in Javascript
Tags: javascript, webdev, beginners
Published: 2022-02-01 15:20:50

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am a young, passionate and self-taught frontend web developer and have an intention to become a successful developer.

Today, I am here with an interesting and important topic. So, let's get ready to dive into the topic. Happy Reading!

![getting ready](https://c.tenor.com/aXd2tb_bMeMAAAAM/snoopy-dog.gif)

---
```js
const snowbit = {
    age: 15,
    test: "abc"
}
delete snowbit.test

console.log(snowbit) // {age: 15}
```
Here, it's better not to use `delete` to remove the property from the object `snowbit`.

Let me explain,
You should not use `delete` to remove the property from the object because this mutates the original and that can lead to unpredictable behaviours and becomes difficult to debug.

Instead, use the spread operator to create a new copy.

```js
const snowbit = {
    age: 15,
    test: "abc"
}

const {test, ...newSnowbit} = snowbit

console.log(newSnowbit) //  {age: 15}
```

Stay tuned for the next article, and make sure to follow if you haven't.

---

Thank you for reading, have a nice day!
**Your appreciation is my motivation 😊**

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe to me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
API Connections on the Back End.
Published: 2022-02-01 16:05:42

In this post I will be showing how to connect websites to APIs by using IP address longitude and latitude to render a google Maps iframe as well as a Wikipedia query tag.

## GeoIP
GeoIP is a free-to-use API that collects your geographic information as well as your IP address from your Internet Service Provider (ISP). This information is then used for your lat, long, city, and state. After retrieving the information from GeoIP, it is important to set the properties for data population. Lat and long should be returned as integers while city and state should be returned as strings.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34oxj4vlbjba9onbfkrj.png)
 

## Fetching Data
Fetch API allows you to make HTTP requests to servers in web browsers. In this block fetch is used to retrieve location data from the IP address.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hw1mp4smfrincodo7dw.png)
This code uses the URL set by locationEndpoint to fetch your location based on your IP address. Then we set the proerties lat, long, city, and state as properties in the api for use rendering the location in google maps and making the Wikipedia query. 

##Render
The render method is used here to return any values renderable b lit-HTML elements. This is where we generate the google  maps and wikipedia query. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql8nbddqx9g12e1y4twe.png)
  
In order for this method of creating a Wikipedia link work you nust first run npm install @lrnwebcomponents/wikipedia-query 
After that the package must be imported into the project as shown in this code block:![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma0ar8uryyfrz3jq2wr2.png)
The <WikipediaQuery> command is used to create a wikipedia query tag from the this.city and this.region properties.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw2fv3rnvfawo2o3tab9.png)

## Link to my repo
https://github.com/Sparvero12/api-project-1
##sources
https://freegeoip.app
https://www.npmjs.com/package/@lrnwebcomponents/wikipedia-query
How i made a easter egg function in next.js
Tags: javascript, webdev, tutorial, nextjs
Published: 2022-02-01 16:04:23

I needed a basic function in NextJS where if you press a key combination a specific number of times the given object or content will be shown/hidden. I'm in no way an expert in NextJS but this is the solution I came up with, which seems to work flawlessly.

The library I used for this was react-use-keypress, this was the only one I found that functioned the way i wanted it to. Down below is the code.

```js
import useKeypress from 'react-use-keypress';
import { useState } from 'react';

export function ShowSomething() {
    const [shown, setShown] = useState(false);
    const [count, setCount] = useState(0);
    // Use keypress library
    useKeypress('e', (e) => {
        setCount(count+1);
        if(count < 4) return;
        if(shown) setShown(false);
        if(!shown) setShown(true);
        if(count >= 5) setCount(0);
    });
    // Return to dom
    return <div className={`${shown ? 'visible' : 'hidden'} other-classes`}>Something to show</div>
}
```
The shown state is the one deciding wether or not the element gets shown or not & the counter is to see how many times the key was pressed. Then if the count is lower than 4 it'll not show the given content, however if it's past the 4 check it'll return shown depending wether the state is shown or not. Lastly the last check in the useKeypress is to see if the value is above or equal to 5 that will basically reset the counter.

Hope you enjoy!
The Build vs Buy Debate, or what the costs are of building a web app (Infographic)
Tags: javascript, productivity, infographic, discuss
Published: 2022-02-01 15:57:48

---
canonical_url: https://www.telerik.com/blogs/best-way-to-build-web-app-infographic
description: Wondering between developing the UI components for your next web app yourself or marrying a third-party UI library? Weigh the pros and cons of each approach.
---
Are you trying to decide between developing the UI components for your next web application yourself and marrying a third-party UI library? This is one of the interesting crossroads at which developers - and often whole teams - find themselves. Considering the impact this decision will have on your ability to meet your deadline and on how painful or smooth app development and maintenance will be, it’s worth spending an extra 10 minutes to think it through. ;) 

So join me on a colorful walk down the infographic's two roads as we weigh the pros and cons of each approach. We'll look at eight areas which impact the "bottom line" of most decisions whether to build your own components or buy a ready-to-use component UI library:
•	Ticking off all project checkboxes 
•	UI library documentation
•	Technical support
•	External dependencies
•	Software updates
•	Component reusability
•	Money and return on investment
•	The pleasure factor

One more thing before you dive in. I'd love to hear what your experience is with making this decision: what criteria are important to you and your team? Hhow do you approach the topic as a whole? Drop me a line in the comments.


![Best way to build web application infographic: build or buy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwq9hi1iv037on1kf598.png)

Still here? Thank you! You must really be interested in this topic. If that's the case, I'd also recommend my in-depth blog on the topic, which inspired this infographic: [8 Key Factors When Deciding Between Building In-House and Buying a UI Component Library](https://www.telerik.com/blogs/how-to-decide-between-building-in-house-and-buying-a-ui-component-library?utm_medium=referral&utm_source=dev.to&utm_campaign=kendo-ui-react-blog-exploration-build-vs-buy-infographic)

The infographic is also available as a PDF file, if you'd like to keep it as a reference. [You can download it from here.](https://www.telerik.com/docs/default-source/kendo/best-way-to-build-web-app-infographic.pdf?utm_medium=referral&utm_source=dev.to&utm_campaign=kendo-ui-react-blog-exploration-build-vs-buy-infographic)