teleren/devto huggingface dataset:
Show a message when your user is offline with $nuxt.isOffline
Tags: nuxt, vue, offline
Published: 2020-04-20 16:32:32

---
canonical_url: 'https://debbie.codes/blog/nuxt-show-message-when-offline'
---
Did you know that `$nuxt.isOffline` can be used to show your users content based on if they are online or not. 

By using a `v-if` we can show content based on if a user is offline or online. 

In your `layouts/default.vue`
```html
<template>
  <div>
    <div v-if="$nuxt.isOffline">You are offline</div>
    <nuxt/>
  </div>
</template>
```
Just by adding that line of code to your app and disabling the internet, either in dev tools or by turning off your internet connection, the message "You are offline will appear".

This won't work on page refresh and it only works when the page has loaded. 

So what is it useful for? 
You could have a cool toast like message that pops out when the user loses internet and say something like "ooopps looks like you just lost your internet connection". This could very useful on payment pages or when filling out large forms for example. You still see the content of the page but are unaware that you have lost the connection. 

Then you could have the `$nuxt.isOnline` to show a message that says "yeah you are back online".
```html
<template>
  <div>
    <div v-if="$nuxt.isOnline">Yeah you are online</div>
    <nuxt/>
  </div>
</template>
```

I am sure there are many other use cases for this and would love to hear if you have any suggestions or if anyone is actually using it and if so what for.

If you are not using it then go ahead and give it a try. In this example I have added it to the layout but you can add it to a page or even a component. Have fun.
create-twitch-ext - A CLI Tool to Create Twitch Extensions
Tags: npm, showdev, javascript
Published: 2020-04-20 16:28:56

I just wanted to spend a moment announcing a new CLI tool I was inspired to make after giving a talk on building Twitch Extensions at the Live Coders Conference.

Meet [`create-twitch-ext`](https://www.npmjs.com/package/create-twitch-ext), a project generator inspired by tools like `create-react-app` or other `yeomen` tools. The idea is simple, run a single command generate your extension project using a select number of templates.

Right now there is only one template at first release, the `Vanilla JavaScript` template, but I hope to add more that I have built or working with the community.

To get started just run:

```bash
npx create-twitch-ext <project-name>
# or
npm init twitch-ext <project-name>
```

Answer the prompts and your good to go!


Want to contribute a template to the project? Create a Pull Request or contact me on Twitter [@Talk2MeGooseman](https://twitter.com/talk2MeGooseman)
Debugando um projeto Blazor webassembly
Published: 2020-04-20 16:27:02

Nesse momento estou criando um aplicativo simples de Todo usando o Blazor webassembly, a idéia é aprender um pouco e entender como que funciona o processo de construção de um app, ter umas noções básicas de como funciona e até onde pode chegar a tecnologia, e até se posso criar um app num futuro próximo usando essa tecnologia.

Recentemente ouvi num podcast da Lambda3 que os PWAs (Progressive Web Apps) podem realmente vir a ser uma excelente alternativa, acredito que investir em aprender o Blazor pode ser uma boa, talvez usar essa stack para desenvolvimento web/mobile via PWAs, vamos observar o futuro.

Não vou reproduzir o artigo que ensina a fazer a app, para isso siga o seguinte step-by-step https://docs.microsoft.com/en-us/aspnet/core/tutorials/build-your-first-blazor-app?view=aspnetcore-3.1.

Por agora vou me ater a documentar um problema que tive ao tentar debugar o app no vscode e fiz para debugar a aplicação.

Segui o tutorial a seguir para tentar debugar a aplicação, embora não tenha funcionado como ele ensina:
https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1

## Debugando por dentro do vscode

Não consegui.

## Debugando por dentro do chrome

Antes de tudo vou deixar aqui registrado o que estou utilizando, é importante pra direcionar os comandos que foram usados.

Sistema operacional: Manjaro (Linux)
IDE Visual Studio Code (vscode)
Versão do dotnet: dotnet core versão 3.1.103
Tipo de aplicação: Blazor WebAssembly (blazorwasm)

O jeito mais fácil de debugar é não iniciar pelo debug do vscode (F5) pelo simples fato de que quando você inicia a aplicação por aí ao terminar o debug o vscode não finaliza o dotnet deixando a aplicação ainda em execução, portanto ainda usando as portas e impedindo o inicio de uma nova sessão de debug. Mas caso você tenha iniciado por ai e as portas não tenham sido liberadas, pode-se finalizar utilizando o seguintes comandos:

```bash
netstat -lntup
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7hgdd5i5o33jzh4agdg7.png)

Em seguida finalize a aplicação

```bash
kill 25524
```

Pronto, agora você pode iniciar uma nova sessão de debug. Vamos para o próximo passo.

1) Inicie a aplicação pelo dotnet run via terminal dentro do vscode ou terminal avulso.
2) Inicie o chrome em debug mode usando o comando
```bash
google-chrome-stable --remote-debugging-port=9222 --user-data-dir=/tmp/blazor-chrome-debug http://localhost:5000/
```
> Atente-se para o nome do executável do chrome, caso você use outra versão ou derivados dele.
> Observe também que o tutorial original sugere usar a url https://localhost:5001/ porém por alguma razão que ainda não descobri, o chrome não carrega os arquivos .cs e .razor pra debugar, já o do comando acima funciona corretamente.

3) Com isso o chrome iniciar com o modo de debug ativado, use o atalho Alt + Shift + D para iniciar o modo de debug, uma nova abra se abrirá como abaixo:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/boypu7w0tngzhp0jo3jt.png)

A partir daí é só brincar de debugar.

É isso.
I Want To Interview Devs Who Create SaaS Products
Tags: saas
Published: 2020-04-20 16:25:53

Hi. I'm looking to interview developers who are working on SaaS projects (either closed source or open source) and would like to share their experiences with our blog readers. We're looking for SaaS devs with interesting stories to share and who like educating other SaaS developers who might not be at the same stage yet. 

If this sounds like you, then you can fill out your answers to our interview questions here: https://www.whalepages.com/software-developer-interview/

We will publish the interview on our blog and link back to your website as well :)

Looking forward to collab'ing with interested devs.
Tweaking Logger Outputs on the Fly
Tags: elixir, sql, thisweekilearned, learning
Published: 2020-04-20 16:13:23


The best thing I learned this week isn't exactly a mind bender, but it saves some clicks, and is worth writing about. I learned that you can pipe in custom logger output options right into an execution script.

I've been working on an Elixir/Phoenix project, and since the release of the production environment we have had to take steps to ensure data insertions are executable across multiple databases. The basic components are a CSV containing the data, a file containing the insertion functions, and a script to execute the process, which looks like this:

{% gist https://gist.github.com/noelworden/26709535c7bc69d603f1b63c654cf34a %}

 
The logger output wasn't much of a concern, until we started running these scripts on our staging database and we needed to be absolute sure the data was inserting as expected. The process of inserting data to staging was:

- Dry run the script locally
- Save the logger output to a file
- Dry run the script on staging
- Save that logger output to a file
- Diff the two files

While test running this the first time I realized that our local dev environment was printing out a much more detailed log than staging, which created an issue when attempting to diff the two files.

The local logging:

{% gist https://gist.github.com/noelworden/2440981b36851d840a7d36b5fe85fc47 %}


And the logging from staging:

{% gist https://gist.github.com/noelworden/3c01ac1ff1a3586744919282a0a1428c %}

The long way to manually sync the local logging output is go to the `config > dev.exs` file, and modify this line:

{% gist https://gist.github.com/noelworden/c886e070c73376d86061fab78fab46b0 %}

To match the logging output of staging:

{% gist https://gist.github.com/noelworden/019c4ec75e82e10bc8546563ac9f52f1 %}

When finished running those scripts the changes would need to be reverted.

Its not a terrible workflow, but piping the logger configuration directly into the execution script is far more efficient:

{% gist https://gist.github.com/noelworden/aecafcfb6cc0f0bbffe2dbb05af014ed %}

With this simple addition to the script the logging detail levels match, and theres no need to temporary alter the config files.

------

This post is part of an ongoing *This Week I Learned* [series](https://dev.to/noelworden/beginning-of-a-blog-series-5aj3). I welcome any critique, feedback, or suggestions in the comments.
How to fix cannot read property 'push' of undefined using Express and moongoose
Tags: webdev
Published: 2020-04-20 16:13:08

Please can someone help me solve this problem. I am using express on aws cloud9 and below is my code in my seed file
var mongoose = require("mongoose");
var Campground = require("./models/campground");
var Comment = require("./models/comment");
var data = [
    {
        name:"Sammy", 
        image :"https://pixabay.com/get/57e8d1454b56ae14f1dc84609620367d1c3ed9e04e507441722e79d59748c2_340.jpg",
        description : "blah blah blah blah"
    },
    {
        name:"Eric", 
        image :"https://pixabay.com/get/52e8d4444255ae14f1dc84609620367d1c3ed9e04e507441722e79d59748c2_340.jpg",
        description : "ESAD"
    },
    {
        name:"Kenzo", 
        image :"https://pixabay.com/get/50e9d4474856b10ff3d8992ccf2934771438dbf85254794e742d7ad4924a_340.jpg",
        description : "Ken City"
    }
    ]
function seedDB(){
    //Removed all campgrounds
  Campground.deleteOne({}, function(err){
    if(err){
        console.log(err);
    }
        console.log("removed campground");
        data.forEach(function(seed){
           Campground.create(seed, function(err, data){
               if(err){
                   console.log(err);
               }else{
                   console.log("Added a campground");
                   //Add a campground
                   Comment.create(
                       {
                           text:"All is well by God's Grace",
                           author:"Samuel Nketiah Boateng"
                       },function(err, comment){
                           if(err){
                               console.log(err);
                           }else{
                                        Campground.comments.push(comment); 
                                        Campground.save();
                             console.log("Created new Comment");
                           }
                       });       
               }
           });
        });
    });
     
}
 module.exports = seedDB;

From the above this is my seed file but when i run it in my terminal i get this error message
"TypeError: Cannot read property 'push' of undefined"  in my terminal.Normally when i click on the error link the cursor points to this line: Campground.comments.push(comment); in my code
Please any help is very much appreciated. Thank you very much
Row Polymorphic Records for More Type Safety in Typescript
Tags: functional, javascript, typescript
Published: 2020-04-20 16:08:05

---
title: Row Polymorphic Records for More Type Safety in Typescript
published: true
description: 
tags: functional, javascript, typescript
---

Typescript's type system uses structural subtyping and hence allows every data structure for a given type that contains at least the demanded properties.

However, we can easily restrict this less safe polymorphism to row polymorphism by utilizing generics:

```javascript
type foo = { first: string, last: string };
 
const o = { first: "Foo", last: "Oof", age: 30 };  
const p = { first: "Bar", last: "Rab", age: 45 };  
const q = { first: "Baz", last: "Zab", gender: "m" };  

const main = <T extends foo>(o: T) => (p: T) => o.first + o.last
 
main(o) (p); // type checks  
main(o) (q); // type error
```
[Playground](https://www.typescriptlang.org/play/?ssl=1&ssc=1&pln=10&pc=25#code/C4TwDgpgBAZg9nKBeKBvWBLATgZ2ALijywwDsBzAGigBsBDPQ4s8qAXwG4BYAKF4GM4pPFEQp0MbIygAiAGIIZ1etJkB5ODCVQ65CIQDMABnbceg4cChhkaTLgKyAQnSzaVjmQCU6AI226+lAALACspgJCIgCOthJSni4AXu4MngBaftp6pAAmEFiEMgC2MhF85lFWxXRktgA8ACpQEAAewBB5OLAIAHwAFHCEjQCUyL1Q-WDDY0gTcAB0kg5QANSiCx68vDVkgyNTIxxQAPQnUKCQUPwAFhD8ANY4O7Wk+-3RR6fnpHAA7i0sFg4FggA)

This isn't as type safe as nominal typing but definitively an improvement. Read more in chapter [A Little Type Theory](https://github.com/kongware/scriptum/blob/master/ch-12.md) of the FP in JS course.
Creating K8s Namespaces and Protecting Resources
Tags: kubernetes, k8s, devops, docker
Published: 2020-04-20 16:07:09

As of this whole mess with Corona Virus I decided to make at least one or two videos a week mostly around Kubernetes. There is bunch of videos that ill publish in coming weeks. 

For today I published a video on how to create a namespace and also how to protect the resources from getting bogged down by deployments utilizing ResourceQuota. Enjoy and hope you like videos. Please do let me know if you have questions or want me to do a educational video on some other topics. 

{% youtube RIVdup-P5so %}
Becoming an accessibility-focused developer
Tags: a11y, webdev, html, javascript
Published: 2020-04-20 16:04:44

Do you want to make more accessible apps, but aren't sure where to begin? Do you feel alone or unsupported by your org? This talk might be for you!

I recently gave this talk at my local React meet-up, and was due to be presenting it at other meet-ups this year but unfortunately that's all indefinitely postponed. So I decided to create my first YouTube talk. 

Honestly it all felt way more unnatural than delivering the talk IRL, but I'm sharing anyway in the hope that it might help somebody.

This talk looks at what *you* as a developer can do now to start putting accessibility considerations at the heart of your code. We'll look at how to detect common issues, do some quick-win refactoring and how to learn by finding our mistakes in the browser.

{% youtube FzQBi2_TWo8 %}

If you prefer, you can [view a transcript of the video](https://github.com/aitchiss/up_your_a11y/blob/master/transcripts/becoming-an-accessibility-focused-developer-transcript.md)
Three.JS-Webpack Boilerplate
Tags: threejs, webpack, javascript, webgl
Published: 2020-04-20 16:00:35

## Overview

[Three.JS](https://threejs.org/) is an awesome library. It is based on WebGL, and has a straightforward, and well-documented API. However, I found that project's initial setup may require some boilerplate.

I created some minimal configuration to bootstrap a project, and want to share with everyone. It includes [webpack](https://github.com/webpack/webpack), [webpack-dev-server](https://github.com/webpack/webpack-dev-server), and [prettier](https://github.com/prettier/prettier). I also included one of three.js demo projects, to test deployment on GitHub pages.

The boilerplate is available on [GitHub](https://github.com/aakatev/three-js-webpack), and you can play with the demo [here](https://aakatev.github.io/three-js-webpack/).

## Instructions

### Development

Clone the project, and install dependencies

```bash
git clone https://github.com/aakatev/three-js-webpack.git
npm i
```

Run webpack-dev-server

```bash
npm run start
```

### Deployment

(Optional) Format your code

```bash
npm run format
```

Bundle javascript

```bash
npm run build
```

Upload on any static website hosting, like GitHub pages! Done!
The Key Concept of RxJS Error Handling
Tags: RxJs, webdev, productivity, programming
Published: 2020-04-20 15:50:56

One of the things I found most annoying about learning RxJS was the error handling. There were examples of "standard" error handling methods, and they made essentially zero sense to me. I couldn't understand how to use them for what I actually wanted.

Sure, a standard error handler that logs out to the console is nice, but error handling usually needs to be customized for the needs of a specific place in code.

One of the things I just couldn't figure out was how to trap an error and then take a specific action if it's a specific error (like maybe the HTTP endpoint returned a 403 error and you want to just display a message about invalid username/password)

It wasn't until I finally started to really research error handling in RxJS that I learned how to really do this.

Ultimately, it wasn't learning how to do the specific task that I needed, what I needed was to learn how things actually worked. So let's do just a little of that today.

Error handling with RxJS mainly happens with the catchError operator.

![image](https://cdn-images-1.medium.com/max/800/0*h2L2a8fpbiAdTS9d?)

This operator allows you to do one of only two things:

* Throw an error

* Return a new observable

Mostly we see people doing the first thing. They log to the console, then throw a new error. This is called "Catch and Rethrow".

It's the second feature that allows you to do TRULY interesting things with error handling. Because the observable that you decide to return now replaces whatever was happening before, and so you can use that as a signal to the subscriber that a specific thing happened, and so take a specific action.

Here's an example subscriber:

![image](https://cdn-images-1.medium.com/max/800/0*5pCFUsrQDT-5350Q?)

And now to support this we can easily write a catchError for this:

![image](https://cdn-images-1.medium.com/max/800/0*BQBnqIwdwq-9LpIf?)

See how I returned an object that has the authenticated property set to false? That's the signal to the subscriber that login failed. I do that when the error thrown has the error status of 403.

Of course, I could have used any property. I chose a boolean property of "authenticated" but I could have used anything to communicate that this is a special case I want to handle.

This capability in catchError is the core understanding you need to handle errors in RxJS and use them to do whatever it is your application needs.

**Practice**

It's time for you to practice. Try out this [stackblitz exercise](https://is-tracking-link-api-prod.appspot.com/api/v1/click/5720252794535936/~Tokens.Link~). It should take you less than a minute. If you get stuck (but ONLY if you get stuck) check out the solution.

Happy Coding!

Enjoy this discussion? Sign up for our newsletter [here](https://thinkster.io/?previewmodal=signup?utm_source=devto&utm_medium=blog&utm_term=RxJsErrorHandling&utm_content=&utm_campaign=blog).

Visit Us: [thinkster.io](https://thinkster.io?utm_source=devto&utm_medium=blog&utm_term=rxJsErrorHandling&utm_content=&utm_campaign=blog) | Facebook: @gothinkster | Twitter: @GoThinkster
Fight COVID-19 with a Free, Fully-Managed Cloud Database
Tags: covid19, coronavirus, analytics, mariadb
Published: 2020-04-20 15:46:23

A few weeks ago [MariaDB](http://www.mariadb.com/) launched their new [database-as-a-service](https://en.wikipedia.org/wiki/Cloud_database) (DBaaS), [SkySQL](https://mariadb.com/products/skysql/), amid the [Coronavirus Pandemic](https://en.wikipedia.org/wiki/2019%E2%80%9320_coronavirus_pandemic). While they also offered a $500 credit to get started, as of last week they announced a program to offer their fully-managed analytics (columnar based storage) [service for free to help fight COVID-19](https://mariadb.com/fight-covid-19/).

If you or your organization is in the healthcare, medical, academic or other nonprofit space have an idea (e.g. application) that requires analysis of large amounts of data MariaDB is offering the opportunity to to use [MariaDB SkySQL for Analytics](https://mariadb.com/products/mariadb-platform-analytical/) for free. All you need to do is complete the form here.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kpqbsgbm3u1qa40cdite.png)

# MariaDB Platform for Analytics

For those that are unfamiliar, traditional RDBMS platforms deliver great transactional processing, which typically depends on indexes to achieve query performance. Modern applications demand the ability to query large data on the fly, with complicated filters – it’s not possible to add an index for every query. The solution is _columnar_ data storage.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9db8o9i79ztdvsbinqio.png)

[MariaDB Platform](https://mariadb.com/products/mariadb-platform/) for analytics leverages the columnar capabilities of MariaDB ColumnStore with data placed in object storage in the cloud. In this configuration, you not only get the high-performance analytical benefits of columnar storage, but you eliminate the need to pre-allocate storage for growth. MariaDB analytics allows you to perform real-time ad hoc queries on big data, on object storage.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eb794sf9mjhift4y9fej.png)

# The Gist

MariaDB is offering their managed analytics service completely for free to help give developers the ability to innovate without having to worry about how to manage their data. 

So, if you or your organization are looking to fight COVID-19 and are looking for a data storage solution, why not get one for free? Especially when it only takes a couple of minutes to submit your ideas [here](https://mariadb.com/fight-covid-19/).