teleren/devto huggingface dataset:
write testcases for the below functions in Angular TypeScript using Jasmin-karma.
Published: 2021-07-12 06:03:49

  open(): void {
    this.isActivate = true;
    document.body.appendChild(this.element);
    this.element.style.display = 'block';
    document.body.classList.add('tfb-modal-open', 'body--no-scroll');
    setTimeout(() => {
      const focusableElements =
        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
      const modal = document.querySelector('#tfb-modal'); // select the modal by it's id
      console.log("modal", modal);
      
      const firstFocusableElement = modal.querySelectorAll(focusableElements)[0] as HTMLInputElement;
      console.log("firstFocusableElement", firstFocusableElement);
      // get first element to be focused inside modal
      const focusableContent = modal.querySelectorAll(focusableElements);
      console.log("focusableContent", focusableContent);
      let lastFocusableElement: any;
      if (focusableContent.length <= 2) {
        lastFocusableElement = focusableContent[focusableContent.length - 2] as HTMLInputElement;
        console.log("lastFocusableElement_if", lastFocusableElement);
         // get last element to be focused inside modal
      } else {
        lastFocusableElement = focusableContent[focusableContent.length - 1] as HTMLInputElement;
        console.log("lastFocusableElement_else", lastFocusableElement);
         // get last element to be focused inside modal
      }

      document.addEventListener('keydown', (e) => {
        // tslint:disable-next-line: deprecation
        const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
        if (!isTabPressed) {
          return;
        }
        if (e.shiftKey) { // if shift key pressed for shift + tab combination
          if (document.activeElement === firstFocusableElement) {
            lastFocusableElement.focus(); // add focus for the last focusable element
            e.preventDefault();
          }
        } else { // if tab key is pressed
          if (document.activeElement === lastFocusableElement) {
            // if focused has reached to last focusable element then focus first focusable
            // element after pressing tab
            firstFocusableElement.focus(); // add focus for the first focusable element
            e.preventDefault();
          }
        }
      });

      firstFocusableElement.focus();
    }, (1000));
  }
ASP.NET Core Blazor | DataGrid Paging
Tags: blazor, datagrid, paging, webdev
Published: 2021-07-12 05:57:11

In this video we will discuss how to perform Paging in Blazor DataGrid. The support for Paging is provided out of the box by Syncfusion [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid "DataGrid") component. It's very powerful and offers several features like

* Adaptive UI
* Touch Support
* Globalization and Localization
* Export to Excel, PDF and CSV
* Sorting, Paging, Filtering, Grouping
* Supports all the CRUD operations
* Aggregated Column Values and many more
You will be amazed by the power and functionality the DataGrid component bring to your Blazor app. Saves a lot of development time and effort. It is very easy to integrate, configure and use.

[Syncfusion Components](https://www.syncfusion.com/ "Syncfusion Components")
Syncfusion components are free if you are an individual or a company and meet the following 2 conditions.

Less than $1 million USD in annual gross revenue and
5 or fewer developers

Use the following link to claim the free community license
https://www.syncfusion.com/products/communitylicense

https://www.pragimtech.com/blog/blazor-webAssembly/asp-net-core-blazor-datagrid-paging/

{% youtube Ji5V5DiZZFs %}
Why thinkpads for Coding
Tags: codenewbie, codereview, laravel, linux
Published: 2021-07-12 05:39:23

Once you play a keyboard that is soft and pleasant to the touch, you know that everything will be easier, if you comfortably write.
Once you see the keyboard, as you walk around your workplace, your brain creates an image of you doing it, and this can be more pleasurable if you know that pressing each button will be smooth to the touch. This small but significant difference could make your programming day more or less creative and make the way you experience your workplace or studio more comfortable. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btfwt388888oewea8a0k.jpeg)

Many laptops today and over time have been designed based on all sorts of aspects leaving things like webcams, which are in high demand during the current crisis, or keyboards, which have become vital as the most important content creation tool in existence, replacing pen and paper to a level never seen before. 

The mythical ThinkPad's are those laptops that perfectly fulfill all the requirements that any developer would need to complete all tasks in and out of the development environment.

There is something in keyboard jargon, known as key travel, which is basically the ability of your fingers to move from one key to another without having to mistakenly press other keys in the process. Many developers need to be able to type as much code as possible in small chunks of time, always being on the tightest of timelines. For this, it is necessary that this tool is as accurate as possible, and taking into account the code that is written, even more important, knowing that a letter comma or command that is too much or too little, can incur in ruining the work of hours and sacrificing early mornings of sleep. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39re7f1qngi3r7snmlt8.jpeg)
The compatibility with all types of Linux flavors and the versatility of this equipment to adapt to different programs for professional and daily use, make this equipment ideal for all types of work, as well as the resistance of the same.

If you are a developer, content creator or are in any area related to technology and work from home, you will understand that there is nothing better than waking up in the morning and having that feeling of peace in which you know that although the work you are going to develop during the day is complicated, there will always be the necessary equipment to face that battle in the most comfortable and satisfactory way possible for your body and mind.
MATLAB MONDAYS💥- Crash Course part-3
Tags: matlab, beginners, matlabmondays
Published: 2021-07-12 04:14:23

Welcome all! ❤️‍🔥 This Monday let us learn about row and column vectors in MATLAB.🤟
---
_____

**Row and Column Vectors in MATLAB**
We can create row vector in matlab by this syntax-
```MATLAB
x=[-2,-1,0,-1,-2]
```
Similarly we can make column vectors using ':' instead of ','
```MATLAB
x=[-2;-1;0;-1;-2]
```
Here is the output-
```MATLAB
>> x=[2;3;4;5];
>> x

x =

     2
     3
     4
     5

>> x=[2,3,4,5,];
>> x

x =

     2     3     4     5
```
 
Sometimes, however we may require to create row or column vectors with large number of equidistant points. Example, for plotting values from -2 to 2, we may require to plot at steps of small units like 0.01. In that case, MATLAB provides a feature to unable creation of "Uniformly Based Vectors" 
We can create such vectors by inputting startvalue, spacing and end value -
```MATLAB
x=startvalue: spacing: endvalue
```
Here is an example-
```MATLAB
>> x=-1:0.17:+1

x =

   -1.0000   -0.8300   -0.6600   -0.4900   -0.3200   -0.1500    0.0200    0.1900    0.3600    0.5300    0.7000    0.8700

```
 
 
> Note- Vector ends on the largest value within  range. That is, after adding up consecutive spacing values, vector ends in the greatest value smaller than the endvalue

If the spacing value is not mentioned, it defaults to one-
```MATLAB
>> y=[-4:5]

y =

    -4    -3    -2    -1     0     1     2     3     4     5

```
Similarly, all this can be done for column vectors as well



**The transpose operator**
The row vectors can be transformed into column vectors using the transpose operator 
```MATLAB
x=(Startvalue:spacing:endvalue)'
```
This operator transposes any matrix (flips over rows and columns)
```MATLAB
>> z=(-3:1)

z =

    -3    -2    -1     0     1

>> x=(z)'

x =

    -3
    -2
    -1
     0
     1
```

_____
That's all for this week. For any suggestions or doubts, please comment below 👇 or gmail me. 🎗️ Follow me for updates...
[![LinkedIn][1.2]][1]
[![Gmail][2.2]][2]


[1.2]: https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white 
[2.2]: https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white

[1]: https://www.linkedin.com/in/aatmajmhatre/
[2]: https://aatmaj.mhatre@gmail.com

Bye for now 🖐
Meet you all soon👍

➕➖✖️➗
New npm package that may help you with JavaScript
Tags: showdev, javascript, typescript, npm
Published: 2021-07-12 04:06:38

Welcome dev community!

Today I would like to introduce you to my npm package, which can be useful for any beginner or advanced JavaScript developer.

It's a collection of functions inspired from Python and rewritten for JavaScript, so now you can easily e.g. capitalize a string or display e.g. last 4 characters from a string.


To check it out, just install it quickly and easily via npm
```sh
$ npm install simhok
# or
$ yarn add simhok
```

Now all we have to do is import the package into JS project
```javascript
// Import what you need
import { len, log } from "simhok"

// Import all functions
import * as Sim from "simhok"
    
// In node.js
const { len, log } = require("simhok");
```

Available functions
```javascript
const user = "sebastian";
const users = ["sebastian", "klaudia"];
const hello = "hello world";

len(user);             // number:9
len(users);            // number: 2
capitalize(hello);     // string: Hello world
capitalizeAll(hello);  // string: Hello World
upper(user);           // string: SEBASTIAN
lower(user);           // string: sebastian

startsWith(user, "s"); // boolean: true
startsWith(user, "S"); // boolean: false
endsWith(user, "n");   // boolean: true

rstrip(user, "an");    // string: sebasti
lstrip(user, "s");     // string: ebastian

split(user, [0]);      // string: s
split(user, [0, 2]);   // string: se
split(user, [3, 0]);   // string: astian
split(user, [0, -3]);  // string: ian

let james_bond = 7;
zfill(james_bond, 2);  // string: 007

count([1,2,1,3,1], 1); // number: 3
compareIgnoreCase("Sebastian", "sebastian"); // boolean: true

abs(42);              // number: -42
abs(-42);             // number: 42

n("1_000_000")        // number: 1000000

log("This is pretty awesome 🎉"); // "This is pretty awesome 🎉"
```

Example in React

```javascript
import { len, upper } from "simhok"; 

const App = () => {
  let name = upper("Sebastian");
  let users = len(["Sebastian", "Klaudia"]);

  return <div>{users > 0 && name}</div>;
};
```

```javascript
import * as Sim from "simhok"; 

const App = () => {
  let name = Sim.upper("Sebastian");
  let users = Sim.len(["Sebastian", "Klaudia"]);

  return <div>{users > 0 && name}</div>;
};
```

{% github skorotkiewicz/SimHok no-readme %}

I invite you to test and write a few opinions what you think about the package.
I will gladly accept PR!

Post edited at: 16/06/2021
Using npm modules inside of Apps Script
Tags: appsscript, npm, esbuild
Published: 2021-07-14 00:09:20

---
title: Using npm modules inside of Apps Script
published: true
date: 2021-07-12 04:00:00 UTC
tags:
- appsscript
- npm
- esbuild
canonical_url: https://jeffy.info/2021/07/12/npm-from-apps-script.html
---

I recently was processing some data using [Apps Script](https://developers.google.com/apps-script), and needed to parse out [second-level domain](https://en.wikipedia.org/wiki/Second-level_domain) info from a bunch of URLs. This is definitely [**not** the job for regular expressions](https://twitter.com/jeffposnick/status/1401218570093305863), but it's perfect for an `npm` module, [`psl`](https://www.npmjs.com/package/psl), that uses the [public suffix list](https://publicsuffix.org/).

But while Apps Script has come a long way, and features lots of ES2015+ goodness nowadays, it's not possible to pull in arbitrary code from `npm` and run it directly.

To work around this, I created the following `index.js` file locally, exporting the interface that I wanted to call from Apps Script:

```js
import psl from 'psl';
import Url from 'url-parse';

export function parseHostname(sourceURL) {
  const url = new Url(sourceURL);
  return psl.parse(url.hostname);
}
```

Then, I installed the necessary dependencies from `npm`, and bundled this code up with [`esbuild`](https://esbuild.github.io/):

```sh
npm init -y
npm install --save-dev psl url-parse punycode
npx esbuild index.js --bundle --global-name=psl --outfile=psl.js
```

I manually copied the contents of the `psl.js` file into a `psl.gs` file, alongside my main `Code.gs` file in the Apps Script editor. (This would be annoying if the bundled output changed frequently, but doing it once by hand wasn't a problem.)

Apps Script will automatically make the contents of all `.gs` files in a project visible in the same global scope, so I could now write code like

```js
const {sld} = psl.parseHostname(url);
```

inside of my main `Code.gs` file.

## Caveats

The Apps Script runtime environment still has a bunch of quirks when compared to Node, so don't expect all of your bundled code to work as-is. Polyfills may be needed (I used [`url-parse`](https://www.npmjs.com/package/url-parse), for instance, since the native `URL` object isn't available in Apps Script.)

Once you copy over the bundled code to Apps Script, it's never going to be updated, so make sure you're prepared to rebundle if and when there are any security or feature updates to the modules you're using.
Migrate CentOS 8 to Alma Linux, Rocky Linux, or CentOS Stream
Tags: migrate, centos, rockylinux, almalinux
Published: 2021-07-12 03:45:30

So you went ahead and upgraded your CentOS 7 (or 6) servers up to CentOS 8 and then Red Hat announced that CentOS was turning into a rolling release distro. This decision has caused a fair amount of controversy on the Internet. A lot of people are upset that their freshly upgraded CentOS 8 servers are going EoL at the end of 2021. In this post I’ll share some options for migrating away from CentOS 8.

Quick note: while writing this guide I’m using a fresh install of CentOS 8. I know that in most situations this will not be the case. Having a properly tested backup of your data is very, VERY important. We can’t assume that everything will go smoothly. Always have a way to restore.

That being said, these will be quick and dirty guides. Before we begin go ahead and SSH into your CentOS server and make sure it’s up-to-date. Reboot if needed.


    $ ssh user@centosserver
    $ sudo dnf update -y
    $ sudo reboot


## Migrating to Alma Linux

AlmaLinux is a community governed 1:1 RHEL clone created by CloudLinux to replace the soon-to-be EoL CentOS.

First we’re going to download the almalinux-deploy.sh script.

    $ curl -O https://raw.githubusercontent.com/AlmaLinux/almalinux-deploy/master/almalinux-deploy.sh

Make the script executable and then run it.

    $ chmod +x almalinux-deploy.sh
    $ sudo ./almalinux-deploy.sh

Wait until the script finishes running. You should see a “Migration to AlmaLinux is completed” when you’re done.

Reboot the system to apply the changes.

    $ sudo reboot

After the reboot you can verify the migration by looking at the `/etc/os-release` file.

    $ cat /etc/os-release

All done! You’ve migrated from CentOS to AlmaLinux.

## Migrating to Rocky Linux

Rocky Linux was brought to life by the founder of the CentOS project, Gregory Kurtzer. Rocky intends to be a “100% bug-for-bug” clone of RHEL.

Upgrading to Rocky Linux is as simple as the process for Alma Linux.

First we’re going to download the migrate2rocky.sh script.

    $ curl -O https://raw.githubusercontent.com/rocky-linux/rocky-tools/main/migrate2rocky/migrate2rocky.sh

Make the script executable and execute the script with the `-r` flag.

    $ chmod +x migrate2rocky.sh
    $ sudo ./migrate2rocky.sh -r

When the script finishes reboot your system to apply the changes.

You can verify the changes to your system by looking at the `/etc/os-release` file.

    $ cat /etc/os-release


## Upgrading to CentOS Stream

The last option that I’m adding into this post, migrating to CentOS Stream.

Also fairly simple, we have three main steps.

First, enable the CentOS Stream repositories.

    $ sudo dnf install centos-release-stream

Second, update the CentOS repositories with CentOS Stream repositories.

    $ sudo dnf swap centos-{linux,stream}-repos

And finally, migrate CentOS 8 to CentOS Stream.

    $ sudo dnf distro-sync

Reboot your system when this command finishes.

You can verify the chances to your system by looking at the `/etc/os-release` file.

    cat /etc/os-release
Setting up ChaosToolkit Execution Environment
Tags: chaos, toolkit, resiliency
Published: 2021-07-11 20:01:32

---
title: Setting up ChaosToolkit Execution Environment
published: true
description: Setting up chaos toolkit for execution
tags: chaos,toolkit,resiliency
series: resiliency
//cover_image: https://direct_url_to_image.jpg
---

**Base Setup**

Install Python 3.5 on your execution machine.

Windows : Download the [latest binary installer](https://www.python.org/downloads/windows/) from the Python website.

Linux: https://www.python.org/download/other/

Create a virtual environment. Virtual environments help us encapsulate our changes away from the larger system.

```
python3 -m venv ~/.venvs/resilient

source ~/.venvs/resilient/bin/activate
```

Install chaostoolkit

```
pip install chaostoolkit
```

Verify version

```
chaos --version
```

This will install the base version of chaostoolkit with its inbuilt probes, tolerances & actions.

Install AWS Drivers
```
pip install -U chaostoolkit-aws
```

Passing Credentials to ChaosToolkit.

For AWS actions/probes to work as expected we need to place a credentials file like below in the following location. ~/.aws

The credentials can be added in the experiment itself, like so

```JSON
{
  "secrets": {
    "aws": {
      "aws_access_key_id": "your key",
      "aws_secret_access_key": "access key",
      "aws_session_token": "token"
    }
  }
}
```

Thats it, you're all set to run AWS Chaos/resiliency experiments!


**Install Toxiproxy Drivers**

Install Toxiproxy Server from here: (https://github.com/Shopify/toxiproxy/releases)

Install the toxiproxy CLI (https://github.com/Shopify/toxiproxy/releases)

These are required in order to make the network changes work.

Install the chaos toolkit drivers:

```
pip install -U chaostoolkit-toxiproxy
```

Add the following configuration to your experiment.

```JSON
"configuration": {
    "toxiproxy_host" : "10.124.23.183",
    "some_environment_variable": {
      "type": "environment",
      "key": "ENVIRONMENT_VARIABLE"
    }
  }
```

Start the toxiproxy server.

Now you are ready to run the experiment.
React native Lazy component
Tags: reactnative, lazy, lazycomponent
Published: 2021-07-12 03:41:56

[Cover Credit](https://devrant.com/rants/1377466/im-not-lazy-im-energy-efficient)

## Brief story

Recently, I worked on a screen that has multiple tabs, each tabs has multiple heavy components (charts, large lists, ...). And everything is imported to the main screen that make it very slow to load.

So, I came up with something like lazy loading. Just load the component when needed.


### Before 🙁

```js
import HeavyTab1 from './components/HeavyTab1'
import HeavyTab2 from './components/HeavyTab2'
import HeavyTab3 from './components/HeavyTab3'

export default function Screen() {
    const [currentTab, setCurrentTab] = useState('tab1')

    return (
        <View>
            {currentTab === 'tab1' && (
                <HeavyTab1 prop1={data1} props2={data2} />
            )}
            {currentTab === 'tab2' && <HeavyTab2 />}
            {currentTab === 'tab3' && <HeavyTab3 />}
        </View>
    )
}
```
### After 😍

```js
import LazyComponent from "@r0b0t3d/react-native-lazy-component";

export default function Screen() {
    const [currentTab, setCurrentTab] = useState('tab1')

    return (
        <View>
            <LazyComponent
                visible={currentTab === 'tab1'}
                load={() => import('./components/HeavyTab1')} // or require('./components/HeavyTab1')
                prop1={data1}
                props2={data2}
            />
            <LazyComponent
                visible={currentTab === 'tab2'}
                load={() => import('./components/HeavyTab2')}
            />
            <LazyComponent
                visible={currentTab === 'tab3'}
                load={() => import('./components/HeavyTab3')}
            />
        </View>
    )
}
```

Check it out [@r0b0t3d/react-native-lazy-component](https://github.com/r0b0t3d/react-native-lazy-component)

Happy coding!
Drag and drop.
Published: 2021-07-12 03:13:38

This is a little sidebar from the project series and it's going to be about creating a "drag and drop" html element.  This particular element isn't going to be React.js based or anything complicated but just simple HTML.  I've been creating a contact tracking database tool and I've had to do a *lot* of manual data entry.  That's just silly since the URL is *very* standard and the parsing from the URL is not too challenging either.  Just the right combination for some automation.  So, I figured, why do I need to do all of this manual data entry?  I don't - and so was born the need for learning about "drag and drop".  It's not terribly complicated and I'll try to break it down into as few steps as possible.
1. Create a drop-receiving element.  This can be a div, or an input field or ... really anything.  I made mine a div and I placed it at the absolute right edge of my screen so I can have another screen on top of it and still have the receptacle accessible.  For this div, I needed TWO specific event listeners.  One for the "ondrop" event, and one for the "ondragover" event.  You can either create this inline like this:
<div id="div1" ondrop="..." ondragover="event.preventDefault();">DRAG HERE!</div>
Or you can add event listeners from another JavaScript source file or inline script.  I prefer inline in the div itself.  All of the coding is right in one place and this is just for learning anyway.
2. The "ondrop" event is whatever action you want to take on the "dropped" resource.  If you want to do some processing on the text that you drop, then you would use:
"processDrop(event.dataTransfer.getData('text'))"
(assuming you've defined a "processDrop" function).  The "event.dataTransfer.getData('text')" is the argument that gets passed to your function.  There are *many* ways you can capture and pass the "event" result.  I wanted the text and so "getData('text')" was everything I needed. For the purposes of testing and MVP, I just put the whole result of the event for my argument.  You could easily just pass "event" and get the rest in your function, if you choose.
3. The "ondragover" event is nothing more than preventing the default action, in this way:
"event.preventDefault()"
That's it!  Create a function that takes your argument and throw it to an alert or console.log and play with it from there.  The purpose for me was to capture the text I was dragging over but you can use images, other elements, really anything.  There's a whole lot more to learn about "drag and drop" but this will get you started.