teleren/devto huggingface dataset:
Get dimensions in nativescript-vue
Tags: nativescriptvue, vue, nativescript, dummydoc
Published: 2020-03-16 01:20:16

---
title: Get dimensions in nativescript-vue
published: true
description: 
tags: nativescript-vue,vue,nativescript,dummydoc
---

## Get screen size:
[_docs_](https://docs.nativescript.org/api-reference/modules/_platform_.screen.html#mainscreen)
```js
import { screen } from 'platform'

screen.mainScreen.widthDIPs 
screen.mainScreen.widthPixels
screen.mainScreen.heightDIPs
screen.mainScreen.heightPixels
```


## Get element size:

```js

<Button ref="myElement" width="300" height="auto" />

this.$refs.myElement.nativeView.width  // 300
this.$refs.myElement.nativeView.height  // 'auto'
this.$refs.myElement.nativeView.getMeasuredWidth() // 600 (on Nexus 4)
this.$refs.myElement.nativeView.getMeasuredHeight()
this.$refs.myElement.nativeView.getActualSize() // { width: 300, height: 200 }
```

Note: 
Make sure the element already rendered, and seems there is [no such event](https://stackoverflow.com/a/41902732/11898289) to set a hook, so just take a nap! 
```js
export default {
  mounted () {
    setTimeout(() => {
      console.log(this.$refs.myElement.nativeView.width)
    }, 10)
  }
}
```

---

Links:

- https://stackoverflow.com/questions/37741179
- https://stackoverflow.com/questions/35464292
- https://github.com/NativeScript/NativeScript/issues/4329#issuecomment-306754056
- https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view
Desenhando com potenciômetros
Tags: arduino, processing, python, creativecoding
Published: 2020-03-16 01:05:43

![Lousa Mágica no Sesc 24 de Maio](https://dev-to-uploads.s3.amazonaws.com/i/qv558z9xwv1eg57mlf62.jpg)

Quem quiser experimentar um projetinho bem simples que junta #Arduino e #Processing (#Python ou #Java) com potenciômetros para controlar um desenho:

https://abav.lugaralgum.com/lousa-magica/

Montei novamente no Sesc hoje com alunos e revisei instruções de montagem... Sugestões e PRs são sempre bem-vindos!
tsParticles v1.10.3 released
Tags: javascript, typescript, showdev, github
Published: 2020-03-16 00:48:00

# New tsParticles version released, 1.10.3.

## Release notes

- Fixed critical bug on polygon shape, always rendered as a pentagon

--

Checkout the new FontAwesome demo here:

{% codepen https://codepen.io/matteobruni/pen/QWbrLoK %}

---

Checkout the demo here: <https://particles.matteobruni.it>

Do you want to replace the old, outdated and abandoned particles.js?
You're in the right place!

---

Here are some demos!

## Characters as particles

[![Particles chars demo](https://media.giphy.com/media/JsssOXz72bM6jGEZ0s/giphy.gif)](https://particles.matteobruni.it/#chars)

---

## Mouse hover connections


[![Particles mouse connections demo](https://media.giphy.com/media/XzvZThpVbxHxMYz5xt/giphy.gif)](https://particles.matteobruni.it/#connect)

---

## Polygon mask

[![tsParticles Polygon Mask demo](https://media.giphy.com/media/lNRfiSgaMFbL4FMhW6/giphy.gif)](https://particles.matteobruni.it/#mask)

---

#### Background Mask particles

[![tsParticles Background Mask demo](https://media.giphy.com/media/dWraWgqInWFGWiOyRu/giphy.gif)](https://particles.matteobruni.it/#background)

---

#### COVID-19 SARS-CoV-2 particles

[![tsParticles COVID-19 demo](https://media.giphy.com/media/fsVN1ZHksgBIXNIbr1/giphy.gif)](https://particles.matteobruni.it/#virus)

**Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!**

*COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME*

--

## GitHub repo
<https://github.com/matteobruni/tsparticles>

##npm
<https://www.npmjs.com/package/tsparticles>

##yarn
<https://yarnpkg.com/package/tsparticles>

##jsDelivr
<https://www.jsdelivr.com/package/npm/tsparticles>

---

Feel free to contribute to the project!
Social Distancing and What am I Doing with More Free Time.
Tags: discuss, wecoded, challenge
Published: 2020-03-16 00:34:35

It's pandemic time! I am not going to lie, as a former CBRN (Chemical, Biological, Radiological, Nuclear) specialist in the US Army, whatever is going on in the world fascinates me 😅. However, I am a software developer now, and my crazy days as a soldier are in the past, even though my training kicks in once in a while. 

Pandemic hit at the worst time of the year for me, though: I am in search of a job. All of the career fairs for veterans I was going to go were moved online, which makes it super impersonal, and all the interviews are held over the internet and phone. It is what it is 🤷🏻‍♀️. 

However, there is a positive side to the situation! Since I don't have to commute into New York City for fairs or interviews, I am saving a ton of time. This gives me an opportunity to work on my skills, learn new things, finish old projects, and collaborate with others on new ones. 

My plan is as follows: 
- Finish an old project (soooo overdue)
- Practice algorithms and data structures (can never stop practicing basics)
- Do some fun 100 days of code challenges 
- Start learning C++ (which will come in handy for my masters program I am starting in the fall)

With this said... What are some of your favorite code challenges? What are some really cool and creative tutorials you've ever written or came across? I will take all of the recommendations for super out of the box thinking creative and funky stuff 😅. Let me know in the comments!
Matching every instance of a pattern in UNIX
Tags: unix
Published: 2020-03-16 00:03:22

For example I have a string "raghuraghuraghuhello" and I want to display the number of times 'raghu' has occurred in the string. 

We can use the below variant of grep

 echo raghuraghuraghuhello|grep -o raghu|wc -l



hadoop@ubuntu:~$ echo raghuraghuraghuhello|grep -o raghu
raghu
raghu
raghu
hadoop@ubuntu:~$ echo raghuraghuraghuhello|grep -o raghu|wc -l
3


Note: When in the first command it just printed out the instances of the pattern, hence we piped it to wc -l
UI Challenge 01
Tags: html, css, challenge
Published: 2020-03-16 13:49:39

---
title: UI Challenge 01
published: true
date: 2020-03-16 00:00:00 UTC
tags: html, css, challenge
series: UI Challenge 01
canonical_url: https://coltborg.com/ui-challenge-01/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/8b5cjjm765m7mtpqkv44.png
---

## What to do

Let's do some some CSS layout practice!

The above image is a simple website with text and an image. Using whatever CSS technique you'd like, recreate it.

The goal is not to be perfect, but to practice.

The reference image can be [seen/downloaded here](https://dev-to-uploads.s3.amazonaws.com/i/8b5cjjm765m7mtpqkv44.png).

## Colors and assets

I'll give you the colors, fonts, and image involved so you don't have to try and look them up yourself.

### Colors

Here are the colors set as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). You don't have to use them as custom properties.

```CSS
:root {
  --green: #1b390f;
  --red: #de5908;
  --white: #e8d9d6;
}
```

### Fonts

For all text except for the heading I'm using the system sans-serif font. You can use any stack you'd like.

The heading text is using a Google font called [Catamaran](https://fonts.google.com/specimen/Catamaran?query=Catamaran) and the weight of `700`. You can import it into your code using this snippet:

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Catamaran:wght@700&display=swap">
```

### Image

The image is hosted over at Unsplash, created by [Travis Yewell](https://unsplash.com/@shutters_guild). You can use [this url](https://unsplash.com/photos/F-B7kWlkxDQ).

## Solution

I'll publish a solution soon. Until then, try to re-create this on your own.

## Credit

Inspiration for this challenge comes from a [dribbble post](https://dribbble.com/shots/10659462-Making-Noise) from [Davide Baratta](https://dribbble.com/DavideBaratta).
Meetings from Home: Tools
Tags: workingfromhome, tools, career, productivity
Published: 2020-03-16 07:23:50

---
title: Meetings from Home: Tools
published: true
date: 2020-03-16 00:00:00 UTC
tags: working from home, tools, career, productivity
canonical_url: https://andri.dk/blog/2020/03/meetings-from-home
---

Are you working from home? Here's a list of some great tools that you can use for free.

If you have anything to add to the list, please give me a shout at [@andrioid](https://twitter.com/andrioid).

## Video Conferencing and chat

### [Jitsi Meet](https://jitsi.org/jitsi-meet/)

Not quite as polished as some of the commercial options, but quite capable. Works best with Chrome, but seemed to work fine in Firefox too.

- No account required: ✅
- No organization required: ✅
- Open Source: ✅
- Self Hostable: ✅
- Screen Sharing: ✅
- Chat: ✅

### [Team.video](https://team.video)

Does exactly what the names says. No account required, very simple to use.

- No account required: ✅
- No organization required: ✅
- Open Source: 🚫
- Self Hostable: 🚫
- Screen Sharing: ✅
- Chat: ✅

### [Whereby](https://whereby.com) (formerly Appear.in)

Used to be my favourite video-conferencing tool.

- No account required: 🚫
- No organization required: ✅
- Open Source: 🚫
- Self Hostable: 🚫
- Screen Sharing: ✅
- Chat: ✅

### [Slack](https://slack.com)

Needs no introduction. A chat app that also has voice and video features.

- No account required: 🚫
- No organization required: 🚫
- Open Source: 🚫
- Self Hostable: 🚫
- Screen Sharing: ✅
- Chat: ✅

### [Microsoft Teams](https://teams.microsoft.com/start)

Microsoft's answer to Slack. Needs your organization to have a Microsoft account and the Teams feature activated.

- No account required: 🚫
- No organization required: 🚫
- Open Source: 🚫
- Self Hostable: 🚫
- Screen Sharing: ✅
- Chat: ✅

## Whiteboarding

### [Excalidraw](https://excalidraw.com)

An excellent tool that makes it quite easy to draw diagrams or simple drawings.

- Diagrams: ✅
- Live collaboration: ✅
- Free form: 🚫
How to use ApprovalTests with xUnit's Theory attribute
Tags: csharp, testing, xunit
Published: 2020-03-21 10:22:14

---
title: How to use ApprovalTests with xUnit's Theory attribute
published: true
date: 2020-03-16 00:00:00 UTC
tags: csharp, testing, xUnit
canonical_url: https://www.ankursheel.com/blog/approval-tests-with-xunit-theory-tests
---

## Problem

In [ApprovalTests](https://github.com/approvals/ApprovalTests.Net), the **Namer** generates a unique name for each approved/received file. This filename takes the format of **_{ClassName}.{MethodName}.approved.txt_**.

This works perfectly for **Fact** based tests. But, if you are writing a **Theory** based test the filename will not be unique as a theory-based test is data-driven and therefore has multiple calls to the same method.

### Example

Let’s look at an example

```csharp
public class TestClass
{
    [InlineData(true)]
    [InlineData(false)]
    [Theory]
    public void Test(bool flag)
    {
        var result = TestThisMethod(flag);
        Approvals.Verify(result);
    }
}
```

In the above snippet, the filename generated for both the tests will be **_TestClass.Test.approved.txt_**. This means that you have only 1 approval file for both the tests.

## Solution

The naming pattern of the default namer is**_{ClassName}.{MethodName}.{AdditionalInformation(optional)}.approved.{Extension}_**. So, we can leverage the_AdditionalInformation_ part to generate unique filenames for our tests.

```csharp
public class TestClass
{
    [InlineData(true)]
    [InlineData(false)]
    [Theory]
    public void Test(bool flag)
    {
        NamerFactory.AdditionalInformation = $"Flag-{flag}"; var result = TestThisMethod(flag);
        Approvals.Verify(result);
    }
}
```

Now, when we run the tests, 2 files will be generated

- TestClass.Test.Flag-true.approved.txt
- TestClass.Test.Flag-false.approved.txt

_Note: We can pass any information to the **AdditionalInformation** property as long as it is unique between tests._
Software Side-Quests
Tags: softwaredevelopment, learninpublic, refactoring
Published: 2020-03-15 20:57:17

You're a software developer. You've been tasked with fixing a bug in the Sign-In workflow. You start investigating what is causing the bug. You spelunk around the code a bit trying to familiarize yourself with these files that haven't been touched in a while.

As you're following a trail of function calls and tracing the flow of data through some components, you get this nagging feeling. You have a pretty good hunch as to what is causing the bug, but you just can shake this feeling. That feeling is your _developer-sense_ tingling -- there is a refactoring opportunity and it is up to you to do something about it. You push pause on the bug fix and start spiking out the refactoring.

This refactoring is what I'd call a software side-quest.

This use of the term _side-quest_ I learned from [Jake Worth](https://twitter.com/jwworth). The idea is derived from role-playing games. A side-quest is

> "a quest given to the player that has no direct bearing on the main story/campaign of the game."
> -[wiktionary](https://en.wiktionary.org/wiki/sidequest)

In terms of our efforts to add features, fix bugs, and ultimately build a product, a side-quest is a task, that we often give to ourselves, that has no direct bearing on the task at hand.

Side-quests in video games are often a way to get gold and items, and they can even unlock further side-quests. Similarly, our software side-quests can add value. Be careful though because they can also be a huge distraction pulling us way off course. 

Happening upon an irresitible refactoring is just one example of a software side-quest. Here are some others:

- You notice a dependency is out of date and you attempt to upgrade it. These can often snowball if the dependency bump involves breaking changes.
- You see a TODO in the code that feels like it'd be a quick fix.
- You see an opportunity pull an abstraction out of this code and some other parts of the codebase that you feel are related.
- Your team has been trying to wipe out a now out-of-fashion pattern (e.g. replacing stateful class components with function components that use hooks) and you notice a chance to do that as you're investigating the code.

Beware the software side-quest, you may find yourself lost in a labyrinth of code instead of addressing the bug you said would be a quick fix.
Good first issue in tsParticles
Tags: opensource, github, contributorswanted, javascript
Published: 2020-03-15 23:02:00

#tsParticles Default values

The default values are ugly as hell. Some nicer are needed to init library with a good default effect.
Less options enabled is the best solution, so they don't create conflicts.

To change the default values only the classes under Options folder needs changes.

https://github.com/matteobruni/tsparticles/issues/134
Why Include Browser Updates As Part Of Your Dev Cycle?
Tags: career, security, webperf, html
Published: 2020-03-15 22:31:53

Browser updates and the development cycles of new versions of browsers seem to be increasing…

Chrome release history:
2019– 11 releases
2018– 8 releases
2017– 8 releases
2016– 8 releases

Disclaimer: I’m focusing on Chrome here and not Firefox as Chrome has around 70% market share for desktop users. Though all of my points hold equally valid with Mozilla Firefox as well.

In 2019 we saw some pretty big changes, and most of the big ones pertain to good things such as improved load times, security and privacy.

In order to achieve this, browsers are having to scrutinize websites more closely than ever.

This is changing the landscape online, and it’s costing brands, small businesses, and startups money...

Starting in Chrome 79 Google announced that they would start blocking what is called Mixed Content…

Mixed content would be any resource that loads with http:// on a https:// website.

This is a security measure, and any content that is “mixed” will contain insecure content.

Thankfully a lot of people are going to get away with it, as they are placing in provisions that will auto-upgrade content such as images to https:// by the time Chrome 81 released in February 2020.

Note: It can only do this if your site has an https:// version available, they aren’t accessing your site and changing it. Rather they are changing the file in the browser and then providing the alternative. This comes with an obvious speed or load time cost.

Additionally, this is important for SEO...

In 2019 Google rolled out an Evergreen version of Chromium for site rendering. This means that Google can finally see your website the same way as you do (for the most part).

As browsers continue to change what they will and won't display, the benefit to staying up to date with them is clear.

Stay up to date with the changes:
- https://blog.chromium.org/
- https://chromestatus.com/features
Introduction to Hash Tables
Published: 2020-03-15 22:02:08

How do you compare two large and complex items efficiently? You could go through each data set iteratively and compare the two, but this is time consuming and computing expensive, because the data sets are large and complex. Comparing the two iteratively would mean an o(n) function for each set and this would be prohibitive for good searching.

Hash functions at their core take in data of variable-length and produce outputs of fixed-data length. Hash tables should be able to store items in key-value pairs and should be able to lookup an item by their key. We can lookup an item by using the hash of that key as the index of the item itself which allows the user to search the item simple by computing its hash. One interesting problem with Hashes is under conditions where the key conflicts with other keys know as collisions. The data sets are large and complex by nature, so the hash of an index may land on the index of another key. To mitigate this issue, each item that generates the same hash can be thrown into a linked list called a "bucket". So we can create a function that updates the hash table and places a key into a bucket and a function that searches for the key with a hashing function to return the key value pair we want. This is the hashing function I came up with using prime numbers 17 and 13 to generate my unique hashing keys for a fairly simple solution:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8kgqa883564ovkhrvvmv.png)
Creating a Todo List App in React using Typescript
Tags: react, typescript, webdev, tutorial
Published: 2020-03-15 22:00:09

---
title: Creating a Todo List App in React using Typescript
published: true
description: This post is mostly a vessel for a video tutorial series I assembled to create a Todo List app in React with Typescript!
tags: react, typescript, webdev, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u2erxymr3lqz9zbsefo8.jpg
---

This post is mostly a vessel for a video tutorial series I assembled to create a Todo List app in React with Typescript!

# Part 1: Bootstrap and Initial Components

To start, we bootstrap an application with create-react-app, being sure to use the typescript flag. We get our app up and running with some basic TodoListItems that aren't quite dynamic--yet!

{% youtube ODvirqIC09A %}

# Part 2: Add Dynamic Behavior

Next, we add dynamic functionality to our `TodoListItems` components and add a `TodoList` container.

{% youtube sOP7eOPXPjQ %}

# Part 3: Extend Functionality to Be Able to Add Items

Finally, we create an `AddTodoForm` that allows users to add new items to our todo list.

{% youtube a0xwxpr4zSo %}

Cheers!
Opening a new window from a Firefox Add-On
Tags: extension, firefox, javascript
Published: 2020-03-15 21:51:58

---
title: Opening a new window from a Firefox Add-On
published: true
description: "It's easy, but keep in mind this One Weird Trick!"
tags: [extension, firefox, javascript]
canonical_url: "https://cassey.dev/posts/2020-03-15-new-tabs-from-firefox-extensions/"
---

Last year, I made [my first couple browser extensions](https://www.cassey.dev/posts/2019-05-30-glitch-app-to-project-ext/)! Both were built to solve immediate needs I have: one to [go between the various representations of a Glitch project](https://glitch.com/~app-to-project-extension) (the project page at glitch.com/~projectname, the editor, and the running code at projectname.glitch.me), and one to add things to my [Pinboard](https://pinboard.in) bookmarks. 

The code that opens the Add to Pinboard page originated as [code for a bookmarklet, provided by Pinboard](https://pinboard.in/howto/#saving), but I like extensions better. Bookmarklets show up in my browser's Bookmarks toolbar, which I usually keep hidden. Extensions show up right next to the address bar, in a single line. 

I use my Pinboard extension pretty regularly<sup>1</sup>, in both [Chrome](https://chrome.google.com/webstore/detail/pinboard-it/mafapkanfcjklkaloepbphjpmfefobbj) and [Firefox as an Add-On](https://addons.mozilla.org/en-US/firefox/addon/add-to-pinboard/). But my Firefox version was annoying: when I clicked the extension, I'd see a little warning that a popup had been blocked, and would I like to allow it to be opened anyways? Yes, I would, every time. But the only options available in the little menu were to always allow popups on whatever site I was trying to save, or allow it just this once. That wasn't great- I might want to allow my Pinboard add-on to open a popup so I can save a link to a cute dress in an online shopping website, but I wouldn't want that shopping site to start sending me its own popups.

## How can I allow my extension to always open a popup window in Firefox?

The answer turned out to be something I needed to change in code. 

Previously, my extension used the exact same code as the bookmarklet, which called `open('https://example.com')` to open the new tab. 

If I changed my tab-opening code to use the APIs that exist especially for browser extensions, the popup would not be blocked.

`chrome.tabs.create({ url: 'https://example.com' });`

You can see [the full source code for my extension on Glitch](https://glitch.com/edit/#!/pinboard-extension?path=extension/background.js:1:0).

Thanks to these friends in [a Mozilla forum question in 2018](https://discourse.mozilla.org/t/avoid-popup-blocker/31549) for pointing me in the right direction!

## Addendum 
1. Judging by the active user stats, I am probably the only person using my extension, albeit from two different computers. I agree with Robin Sloan that [an app can be a home-cooked meal](https://www.robinsloan.com/notes/home-cooked-app/).
Controll Android Back Button in nativescript-vue
Tags: nativescript, vue, nativescriptvue, dummydoc
Published: 2020-03-15 20:52:57

---
title: Controll Android Back Button in nativescript-vue
published: true
description: 
tags: nativescript,vue,nativescript-vue,dummydoc
---

Just create a simple component:

```js
import { android, AndroidApplication } from 'tns-core-modules/application'
import { isAndroid } from 'tns-core-modules/platform'

// WARNING: Just works on android
export default {
  props: {
    prevent: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      hooked: false
    }
  },
  watch: {
    prevent (newVal, oldVal) {
      if (newVal === oldVal) { return }
      if (newVal) {
        this.setHook()
      } else {
        this.clearHook()
      }
    }
  },
  render () {},
  mounted () {
    if (this.prevent) { this.setHook() }
  },
  beforeDestroy () {
    this.clearHook()
  },
  methods: {
    onBackEvent (data) {
      this.$emit('tap', data)
      if (this.prevent) {
        data.cancel = true // prevents default back button behavior
      }
    },
    setHook () {
      if (!isAndroid || this.hooked) { return }
      android.on(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
      this.hooked = true
    },
    clearHook () {
      if (!isAndroid || !this.hooked) { return }
      android.off(AndroidApplication.activityBackPressedEvent, this.onBackEvent)
    }
  }
}
```


And use it like:
```vue
...
<android-back-button :prevent="true" @tap="onBackButton" />
...
```