teleren/devto huggingface dataset:
How Hybrid Will be the New Norm for Future Work Model

Tags: productivity
Published: 2021-07-26 11:37:17

The Corona pandemic has drastically transformed the global working environment in terms of a scattered workforce while fueling workplace-related challenges. Rethinking the work environment with social separation, remote adaptability. An online coordination is what can be clubbed with alternate office meetups for brainstorming, meetings, or discussions giving rise to a hybrid work model.

The biggest question “ What is hybrid work model?” has provoked us to reevaluate our work models. As indicated by Microsoft’s 2021 report, 73% of representatives communicated the need for adaptable distant work alternatives post-pandemic, and 66% of organizations said they were thinking about upgrading actual spaces to more readily adapt to crossover workplaces.

Transformation accelerated with the help of innovation
In any work environment, adaptable work alternatives empower working distantly commuting no more a problem especially for ones traveling to far-off workplaces. At the same time, with occasional meetups, the post-Covid office should be high on cleanliness. These are without a doubt revolutionary changes. 

<b>Here are the things organizations can accomplish through future hybrid work model:</b>

<h3>1. Security </h3>
IoT can help to resolve safety problems with people getting online by their own means and restricting intruders from hacking. They can likewise distinguish work areas that need attention, in light of the recurrence of utilization. Artificial intelligence can break down this information to distinguish people working remotely. 

With needing attention against the ones coming to the office needing less attention. Contactless passage lessens onsite presence by taking out the touch requirements. Furthermore, contactless technology assists with avoiding conceivable contamination.

<h3>2. Proficiency</h3>
With representatives working both offsite and in-house, bosses should decide how best they can enhance their office spaces. The focus should be on the act of designating work areas and rooms dependent upon the situation. Artificial intelligence-driven arrangements can assist self-administration working environment experience, which can be tweaked on prerequisites. 

Organizations could likewise discover underutilized space simultaneously, which they might need to offload. Artificial intelligence can assist in analyzing the expected benefits and expenses included.

<b> Original Source : <a href="https://www.taskopad.com/blog/hybrid-work-model-new-norm-of-future/">How Hybrid Will be the New Norm for Future Work Model</a> </b>
How to install IIS but with selective components?
Published: 2021-07-26 10:58:12

Hi, I have a playbook with installs various servers components and redistributables on a Windows 2019 Standard server. However, the developer tells me that my IIS install has everything which he thinks the servers shouldn't have.

I used the code below to install IIS and components, which is deemed too much. Check attached screenshot SH1.png(everything installed) file to see what is installed.

- name: Install IIS Web-Server with sub features and management tools
    ansible.windows.win_feature:
      name: Web-Server
      state: present
      include_sub_features: yes
      include_management_tools: yes
    register: win_feature

Dev wants me to only installed the bits of IIS required as shown in attached screenshot SH2.png(selected component required). Thanks.
HTML TUTORIAL FOR BEGINNERS PART 6
Tags: html, webdev, programming, 100daysofcode
Published: 2021-07-26 10:46:25

Sometimes you want to add `a` element to your website but still don't know where it will link.
This is also handy when you're changing the behavior of a link using JavaScript, which we'll learn later.
For example the current value of href attribute is `https://www.freecodecamp.org`now replace href value with `#` symbol to create a dead link.
This is the most common usage of `#` that every developer use it.
```
<a href="#">Contact us</a>
```
If you have any questions and suggestions or any problem let me know in the comments section below 👇
Make sure you share ↗️ and like my story❤👍.
Day 4/100
Tags: webdev, programming, 100daysofcode, javascript
Published: 2021-07-26 10:44:37

4 days and now I have started gathering momentum. Started the day with solving some problems on Hackerrank. Then watched some some tutorials on arrays and practiced the most frequently array problems on Leetcode. Initially, I solved the problems with a *bruteforce* approach but then I tried to solve it more efficiently. I solved more problems today than usual, but what makes me more happy is that I was able to solve them efficiently after coming up with bruteforce approaches. Coming on to the web course, I learnt about classes in Javascript and also about the **extends** and **super** keyword based on the concept of inheritance. Also came across some of the basics terminal commands that will be used further when I move on to Node and Express. In the end, I revised the concepts which I learnt previously. 

check out my portfolio:
https://aliasgarkc.netlify.app/
Don't just write test cases, design them for 100% coverage using #proven #techniques
Published: 2021-07-26 10:29:24

*** Test design is the foundation of the testing and ensures test execution remains effective, consistent, and repeatable.

*** Without using the test case design techniques and by relying just on the tester's past experience and skills, there will always be uncertainty whether the test case suite is providing 100% testing coverage or not.

*** Exhaustive testing is not possible, hence test design is important to ensure maximum testing coverage with minimum test conditions and efforts.

Learn test case design techniques with examples.

https://www.botplayautomation.com/post/test-case-design-techniques
Promise Cancellation & semantic behind it
Tags: programming, javascript, webdev, node
Published: 2021-07-26 10:23:43

> TL;DR: We do not cancel Promise but operations. *Cancellation* is orthogonal to the abstraction of Promise. They have different concerns.

Many people have asked: I want a Promise with `.cancel()` method!

Okey. Let's assume we have one.

```js
const promise = fetch('https://somedata.com').then(x=>x.json());

//... at some point
promise.cancel();
```

To not violate the original Promise/A+ spec, when it's cancelled (and in PENDING status), reject with an error (may name it `CancelledError`)

And here's the problem: When `.cancel()` applied, which promise on the chain is really cancelled? 
1. Top(then "downstream" get notified by catching `CancelledError` and re-throwing it)

     > But what if a part of Promises on the chain have resolved? A settled Promise can't modify its state, therefore it can't "notify" its "downstream" again.
   > If "upstream" is PENDING, what about other "downstream"s?
   >
       ```js
   const root = fetch('https://somedata.com');
   const promise1 = root.then(x=>x.json());
   const promise2 = root.then(x=>x.string());
   // ...at some point, root is PENDING
   promise1.cancel(); // what about promise2?
       ```

2. Current (but don't care about "upstream")

     > Hmmm, it is `.ignore()` rather than `.cancel()`. Not really what we expected.

3. Current (and cancel "upstream", if possible, i.e. no other "downstream" waiting for a value)

     > This intuitively makes better sense. But things get really complicated. This is to say explicit dependencies between CancellablePromise need to be managed.....
   >
   > Actually the two made-up terms "upstream" and "downstream" do not exist in Promise/A+ spec at all. A Promise has no clue how it will be fulfilled/rejected. 
   >
   > Maybe [RxJS](https://rxjs.dev/) has done this job.



Seems there is no natural behavior and clear semantic of Promise *cancellation*. Is *cancellable Promise* just a wrong abstraction?
Think about the question again. Is it the Promise we want to cancel?

IMO **we want to cancel should be the operation.**

Recall the definition of Promise: A *promise* represents the eventual result of an asynchronous operation. It **promises** you there will be a value or error (that's why it is called Promise). While when we talk about a cancellation, we often mean to abort the procedure and if necessary dispose related resources (to prevent memory leak). To strictly speak *cancellation* is orthogonal to the abstraction of Promise. **They have different concerns.**


So we need something else to explicitly manage cancellation, e.g. [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)

```js
// an example of aborting ongoing fetch
const controller = new AbortController();
const signal = controller.signal;

fetch('https://example.com', { signal });

// ...at some point
controller.abort();
```

I know it's verbose, but to manage cancellation separately makes the most sense.
I am having trouble in changing the hook state through unit testing.  
Published: 2021-07-26 10:15:43

App.js contains 3 hooks in order:
  const [searchResult, setSearchResult] = useState([]);
  const [searched, setSearched] = useState('');
  const [appsAlert, setAppsAlert] = useState({
    success: { status: false, msg: '' },
    error: { status: false, msg: '' },
  });





In utils.test.js
export const setHookState = (newState) =>
  jest.fn().mockImplementation((state) => [newState, () => {}]);







In App.test.js
import * as React from 'react';
import { mount } from 'enzyme';
import App from '../app';
import { setHookState } from '../../utils/test';

describe('Application Page Test Cases', () => {
  beforeAll(() => {});

  afterEach(() => {
    jest.clearAllMocks();
  });
  test('Test Case 1', () => {
    const reactMock = require('react');

    reactMock.useState = setHookState({
      searchResult: [],
      searched: 'xyz',
      appsAlert: {
        success: { status: false, msg: 'Successful' },
        error: { status: true, msg: 'Error Received' },
      },
    });

    const wrapper = mount(<App />);

    // Still shows value of searched as ''
    // I require the changed state ie 'xyz' here
  });

  test('Test Case 2', () => {
    const stateSetter = jest.fn();

    jest
      .spyOn(React, 'useState')
      .mockImplementation((searched) => ['xyz', stateSetter]);

    jest.spyOn(React, 'useState').mockImplementation((appsAlert) => [
      {
        success: { status: false, msg: '' },
        error: { status: true, msg: 'Error Received' },
      },
      stateSetter,
    ]);

    const wrapper = mount(<App />);

    // Still shows value of searched as ''
    // I require the changed state ie 'xyz' here
  });
});
Add beautiful containers to your Flutter app
Tags: flutter, dart, programming
Published: 2021-07-26 10:12:52

**Fancy Containers** package lets you add a beautiful gradient container to your Flutter app.

These can be used to:
- Share announcements,
- Showcase information,
- Highlight features,

<hr>

## Installation
Add the latest version of the package to your pubspec.yaml (and run `dart pub get`):

```dart
dependencies:
  fancy_containers: ^0.0.4
```

2. Import the package and use it in your Flutter App.
```dart
import 'package:fancy_containers/fancy_containers.dart';
```

## Example
There are a number of properties that you can modify:
- height
- width
- title
- titlecolor
- subtitle
- subtitlecolor
- gradient (color1 and color2)
- onTap (for function callback)

```dart
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FancyContainer(
          onTap: (){
            print("Hello World");
          },
          color1: Colors.lightGreenAccent,
          color2: Colors.lightBlue,
          title: 'Hello World',
          textcolor: Colors.white,
          subtitle: 'This is a new package',
          subtitlecolor: Colors.white,
        ),
      ),
    );
```

## Output

![FancyContainers Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j28cp45jyf84imhjig6k.jpeg)

Find the package on pub.dev [here](https://pub.dev/packages/fancy_containers).
CodePen Challenge: Tessellations
Tags: html, css, codepen
Published: 2021-07-26 09:48:53

<!-- wp:paragraph -->
<p>This week's <a href="https://codepen.io/challenges/2021/july/3">CodePen challenge</a> called for repeating patterns, or tiles to be incorporated in the work. After some trial and error I managed to create a nice &amp; repetitious folded paper effect using just CSS and the <code>conic-gradient</code> declaration.</p>
<!-- /wp:paragraph -->

{% codepen https://codepen.io/drawcard/pen/XWRVePJ %}
CodePen Challenge: Textile Patterns
Tags: html, css, javascript, codepen
Published: 2021-07-26 09:46:00

<!-- wp:paragraph -->
<p>Our entry for this week's <a href="https://codepen.io/challenges/2021/july/2">CodePen Challenge</a> took the 4 supplied fabric swatches, and added a little bit more realism to them. We ended up mocking up a generative poster design for a fictitious textile exhibition - which changes layout every time the page is reloaded!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>DEV TIME: 2 hours<br>FEATURES:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Added more linear gradients to create a 3d fabric texture</li><li>Used clip-path on the swatches to give them a ragged edge</li><li>Added some randomisation effects in JS to create a new layout every time the page is refreshed</li><li>Adapted script to add in random rotation &amp; better grouping of elements, and adaption to mobile resolution</li></ul>
<!-- /wp:list -->

{% codepen https://codepen.io/drawcard/pen/rNmpdyM %}
Use Openapi Generator SDK  for Javascript within Nuxt.Js Project
Tags: javascript, openapi, nuxt, sdk
Published: 2021-07-26 09:40:18

Its very common to use an OpenApi SDK Client directly in your project - but the SDK Generators is mainly made to publish to generated code as a library on f.e. GitHub. Therefore the following steps will help you to install and use the generated SDK directly within your Nuxt.Js app:

1) Run the Openapi-generator-cli command inside your project

```sh
openapi-generator-cli generate -i https://path/to/openapi.json -g javascript -o oa/
```

2) Since that generated SDK module requires `superagent` install that dependency in your project:

```sh
yarn add superagent
```

3) Generate a [NuxtJS plugin](https://nuxtjs.org/docs/2.x/directory-structure/plugins) file which helps to include the library and also makes it more easy to access in your app. Create `~/plugins/oa.js`

```js
export default ({ app }, inject) => {
  const WebsiteSDK = require('~/oa/src/index.js');

  const defaultClient = WebsiteSDK.ApiClient.instance;
  const bearerAuth = defaultClient.authentications['bearerAuth'];
  bearerAuth.accessToken = "YOUR ACCESS TOKEN"

  inject('sdk', WebsiteSDK)
}
```

This will make your SDK client available in nuxt.js as `this.$sdk`

4) Add the plugin in nuxt.config.js

```json
plugins: [
  { src: '~/plugins/oa.js', mode: 'client'},
],
```

5) Now use your new plugin to make API calls.

```js
const api = this.$sdk.<TheApi>
api.<UniqueOperationIdFromOpenApi>({options}, (error, data, response) => {
      console.log(error, data, response)
});
```

ps: Maybe there are better solutions, its more an a note for myself - maybe helps others too. Improvements are welcome!
Create SFML project with CMake
Tags: cpp, sfml, cmake
Published: 2021-07-16 22:54:14

Depending on linux or windows some steps will vary but this tutorial will contain both
Install dependencies
Debian
```shell
$ sudo apt-get install libsfml-dev cmake g++
```
Arch
```shell
$ sudo pacman -S sfml cmake gcc
```
Windows 
[Download sfml](https://www.sfml-dev.org/download.php)
[Download cmake](https://cmake.org/download/)
unzip latest stable to the route of your project folder

Create CMakeLists.txt
Current project folder:
#### Linux
```
BoilerPlate
  L CMakeLists.txt
```
#### Windows
```
BoilerPlate
  L CMakeLists.txt
  L SFML
    L ...
```
Open CMakeLists.txt and enter the following
```CMake
cmake_minimum_required(VERSION 3.16)

project(BoilerPlate VERSION 1.0.0.0)

# Windows specific config
IF (WIN32)
	# Include local sfml cmake config
	set(SFML_DIR "${CMAKE_CURRENT_SOURCE_DIR}/SFML-2.5.1/lib/cmake/SFML")
	# Link sfml statically
	set(SFML_STATIC_LIBRARIES TRUE)
ENDIF()

# Find SFML shared libraries
find_package(SFML 2.5.1 COMPONENTS graphics audio REQUIRED)

FILE(
  GLOB
  SOURCES
  "main.cpp"
)

# Compile executable
add_executable(BoilerPlate ${SOURCES})

# Link executable to required SFML modules
target_link_libraries(BoilerPlate sfml-graphics sfml-audio)
```

Create a main.cpp which we will create a base application that will open a window
```cpp
#include <SFML/Graphics.hpp>

int main()
{
    sf::RenderWindow window(sf::VideoMode(800, 600), "BoilerPlate");

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

        window.clear();
        window.display();
    }
    return 0;
}
```
### Build and run
#### Linux
```shell
$ mkdir build
$ cd build
$ cmake ..
$ make
$ ./BoilerPlate
```
#### Windows
```shell
$ mkdir build
$ cd build
$ cmake ..
```
Open build folder,
Open BoilderPlate.sln
Right click on solution -> properties and select current selection
Build and run

You should have a window open
July 12 - July 19 Weekly Status
Published: 2021-07-16 20:32:35

This week I experimented with threshold according to one of my previous [posts](https://dev.to/aleksandrgushchin/metric-visualization-and-analysis-590o).

First thing I've done is to lower threshold itself. After a series of experiments I chose to decrease it by 35%. 

You can see the results of lowering the theshold here:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1powfxpbokvz82h1vpxh.png)
To compare it with the previous results I post a picture from another [blogpost](https://dev.to/aleksandrgushchin/results-of-current-algorithm-to-be-updated-o2f):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54nsmgcyzvaby1jhnea8.png)

The average F score on complete dataset was increased by ~0.096.

Also I tested different strategies to adapt threshold.
* If max_interval option is specified and during max_interval frames metric below threshold algorithm chooses not the last frame of this series but the one with the biggest metric.
You can see examples here:
Before:
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19nbpubopxxpn9lmcatb.png)
After:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp4m5ny8tt8pl8plo09s.png)

Max_interval option here is 500. You can see that before algorithm chose exactly 500 frame, but after it chose the one with the biggest metric.

  
Threshold does not take into account the following values of metrics:
Algorithm now don't mark the current frame as scene change if metric value of the next frame is bigger than the current one. It helps to prevent the algorithm to mark a series of consecutive frames as scene change (example below):
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6epxue5vz79vw66y4ny.jpeg)

I didn't implement these changes in github repos yet and plan to do it early next week.


The most difficult remaining problem is the metric itself. I will take a closer look into it to see if there is a way to correct it a little bit. After it I will start to implement a new metric to compensate the weaknesses of this metric.
Setting File Versioning in S3
Tags: aws, devops, beginners, cloud
Published: 2021-07-26 08:51:16

Lets have a scenario in which you are updating and reading your files very frequently. Then sometimes it may happen that the the files are deleted or updated by mistake so how does we get access to previous files. This is where S3 versioning comes in. If we enable this then AWS keeps the previous versions also stored in S3 and we can go back to previous files.

## S3 versioning

Versioning is enabled at the bucket level. It allows us to keep different copies of same files in AWS S3 and protects us from unintended updates and deletes. So, if you delete an object S3 adds a delete marker and delete marker becomes the current version of the file.

With respect to versioning a buckets can be in one of three states:
1. Unversioned (the default) - When versioning is disabled in a bucket. In this files have a null version by default.

1. Versioning(enabled)- Versioning is enabled in a bucket. This works normal each files has all its versions.

1. Versioning(suspended) - Versioning was once enabled but is disabled right now. The previous versions of files are not deleted in this.

In the next exercise we will see how versioning works in S3 and how it can be helpful.
Creating a website in S3 - Hands On
Tags: aws, devops, tutorial, cloud
Published: 2021-07-26 08:50:35



Last time we understood why we should choose static hosting for our files and when we should avoid it this. This week we will deploy an index.html file to check how to deploy our files.

* First go to your S3 bucket from last tutorial and delete all the files in the S3 bucket.

* Now add the following  index.html file to the S3bucket
```html
<html>
    <head>
        <title>Test s3</title>
    </head>
    <body>
        <h1>Ajit Singh</h1>
        <p>Hello world!</p>
    </body>
</html>
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pawf7039sbxb9cd2neka.png)
* Go to the properties section of your S3 bucket. Scroll down to the bottom. There will be an option of static site hosting, edit it.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw4fo3z6vutdghih0sry.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vetru595ovctw5vdnli0.png)
* Enable static website hosting.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpyi48fi422nghzrssii.png)
* Select the following option

    a. Hosting type: Host a static site
    b. Index document: index.html
    c. Error Document: Leave empty if no error page added in the bucket else add the error document name in your b8ucket. In case of SPA add index.html because the whole SPA work form a single page even error page.We will leave it empty because we have no error.html page
    d. If you want a comples site you can add redirection rules but these are a bit complex and we won't learn about them today I've added a link to the documentation for this purpose.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkgeglirysxualqcxjxu.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pttd9xspin46d251p0l4.png)
6. Save the changes. You will see the link to your website at the bottom in the properties page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flf6l1j1hmehid6ug3vu.png)
7. Open that link and see that your website is created
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uas9p4aiq93gfxh9ks99.png)
> Remember that this works because we added bucket permission in the previous section of the tutorial always remember to put the right bucket permissions

```json
{
    "Version": "2012-10-17",
    "Id": "Policy1626669452189",
    "Statement": [
        {
            "Sid": "Stmt1626669450552",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::dev-to-article-s3/*"
        }
    ]
}
```

I Next time we will study how to activate bucket versioning so that the data can be safe in our S3 bucket.