teleren/devto huggingface dataset:
Adding Progressive Web Apps (PWA) to the Linux Desktop
Tags: linux, pwa
Published: 2020-10-05 05:39:40

---
title: Adding Progressive Web Apps (PWA) to the Linux Desktop
published: true
date: 2020-10-02 00:00:00 UTC
tags: linux, pwa
canonical_url: https://andri.dk/blog/2020/10/adding-web-apps-to-the-linux-desktop
---

At work, we use Microsoft Teams, and we used to (and sort of still) use Slack. I recently switched from a Macbook Pro to a Linux laptop (again), and what annoys me greatly is that when I "share screen/application" in the Slack or Teams app it offers me only to share my entire monitor.

Sure, it's annoying that I can't pick what window is shared; but what makes it unbearable for other people on my team is that my monitor is ultra-wide so everything I share becomes really tiny on their screen. Sorry.

### Chrome can do it!

By accident, I stumbled upon that Slack running in Chrome on Linux can share windows just fine. The native Slack app does not. So I went on an adventure to figure out how to add web-apps to the Linux desktop and it's surprisingly hard to find (hence this post).

Chrome used to have a link in "More Tools -> Add to Desktop", but no more; and that had me confused. It's now called "More Tools -> Create Shortcut".

[![Create Shortcut in Chrome](https://andri.dk/static/121d9a42bed8ee3fd72f0bfa24790545/321ea/create-shortcut-chrome.png "Create Shortcut in Chrome")](/static/121d9a42bed8ee3fd72f0bfa24790545/321ea/create-shortcut-chrome.png)

Just navigate to the site you want to open as an application, click "Create Shortcut" from the menu, check "Open as Window" and you're good.

On Linux, this will create a `.desktop` file in `~/.local/applications` so that your desktop environment will pick it up. This guide should also work fine on Windows and Mac.

### Plus, it's better!

Today, I'm running Outlook, Slack and Teams as progressive-web-applications and the performance is much better, screen/window sharing works and it uses less CPU than the Electron apps.
How to fix NavigationDuplicated Vue Router error
Tags: vue, vuerouter, javascript, router
Published: 2020-10-03 11:12:06

---
title: How to fix NavigationDuplicated Vue Router error
published: true
date: 2020-10-02 00:00:00 UTC
tags: vue, vuerouter, javascript, router
canonical_url: https://bharathvaj.me/blog/vue-router-duplication/
---

Since version 3.3.0, Vue Router throws a couple of errors as a part of its promise API. “NavigationDuplicated” is one such error being thrown explicitly when the user clicks `<router-link>` or ( `router.push()` / `router.replace()` called programmatically) to view a page component that is already in current view.

Major router errors introduced includes,

- NavigationDuplicated
- NavigationCancelled
- NavigationRedirected
- NavigationAborted

To solve this error, we basically need to catch the error being thrown by the API methods. But adding catch statements to all the push and replace methods scattered across the codebase is really painful and time-consuming.

![Roll-Safe-Think-About-It](https://dev-to-uploads.s3.amazonaws.com/i/uy1qprftjuswuc6eawor.jpg)
 

There are a couple of solutions to solve this issue, but the most optimized solution is to modify the router’s methods with our own custom methods by adding that catch statement in one place as follows.

_Note: Make sure to include this script at the root of the project along with other polyfills_

```js
// polyfills/router.js

**
 * Wraps Vue Router - push() and replace()
 */
import Router from 'vue-router';

['push','replace'].forEach(method => {
  const originalMethod = Router.prototype[method];
  Router.prototype[method] = function m(location) {
    return originalMethod.call(this, location).catch(error => {
      if (error.name !== 'NavigationDuplicated') {
        // capture exception
      }
    })
  };
});
```

## Reference

- [Vue Router Changelog](https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md)
- [Stackoverflow Question](https://stackoverflow.com/questions/57837758/navigationduplicated-navigating-to-current-location-search-is-not-allowed)
How to get the length of the Buffer in Node.js?
Tags: node
Published: 2020-10-02 00:00:00

---
  title: How to get the length of the Buffer in Node.js?
  published: true
  tags: Nodejs
  date: Fri Oct 02 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-length-of-buffer-nodejs
  cover_image: https://melvingeorge.me/_next/static/images/main-7671b160186ed1f42af37917b4c20fca.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-length-of-buffer-nodejs)
  
To get the length of a `Buffer` instance in Node.js, you can use the `length` property in the `Buffer` instance.

Let's say we have a buffer from the string `Hello World!` like this,

```javascript
// Buffer from string Hello World!
const buff = Buffer.from("Hello World!", "utf-8");
```

Now let's get its length using the property `length` in the `buff` object.

```javascript
// Buffer from string Hello World!
const buff = Buffer.from("Hello World!", "utf-8");

// get the length of the Buffer
const length = buff.length;

console.log(length); // 12
```

See this example live in [repl.it](https://repl.it/@melvin2016/length-of-buffer-nodejs).

### Feel free to share if you found this useful 😃.

---
My Hacktoberfest 2020 experience day 1
Tags: hacktoberfest, github, git, go
Published: 2020-10-01 23:35:13

##My Hacktoberfest 2020 experience
<b> Day 1 October 1st: </b>  

I started off by finding my first issue, after 30 minutes of finding a suitable issue I can get my teeth stuck into. I found a repository which was a Go lang wrapper library for a payment API called Mollie-API. The issue I choose was for Creating code samples for a part of the library which handled website profiles in the API. 

Firstly, I started by reading the repository README file to get an idea of what the repository is about then I went to look through the API documentation to get a better understanding of the API, mainly looking through the profiles section. After 10 minutes of reading, by then I felt confident I could complete this task. I went back to Github, I forked the repository and commented on the issue saying I would like to do this task. 

While waiting for a reply,  I set up my prefered code editor which was Visual studio code and then I cloned the repository. I was confident I would get this task as it was tagged with ‘Hacktoberfest’ and no one was assigned to the issue. On the README it said that in order to use the API I needed a Mollie account, so I headed over to the Mollie API site and created an account then I took a break for a bit.

After taking some time away from my laptop, I got a reply to my comment to give me the green light with completing the task. So with the green light, I went straight to Visual studio code and started coding, during my break I had thought some ideas about how I was going to complete this task.

I coded one code example which was for creating a profile, at this point, everything was going well until I hit a brick wall, after running the code sample I got an HTTP error, from that I knew it sent a request but the mollie server didn’t like what I sent. I was confused at first, I couldn’t put a finger on the problem, I tried running the code sample again, no luck 😢. 

I decided to try a different code sample, the code sample I tried next was a sample for getting a profile, I coded the example, ran it and … No luck again with a similar response. Again I tried a different sample, this time being a sample for getting the current profile belonging to the API key. I coded it, ran it and to my surprise, it worked! HAZAR! It’s great that it works but the other code examples don’t. 

So, I went to the API documentation and looked at API reference for the code samples I created I found out that the samples that were not working require an app access token, not an API key. I created an access token and changed the code to work with an access token and BOOM! it works 😎. 

I created a few more code samples before I decided to finish for the day. Tomorrow, I will hope to finish the remaining code samples.
Lots of great stuff brewing at Redis University!
Tags: redis, database, security, python
Published: 2020-10-01 23:18:38

Hello! We've been busy the last few weeks at Redis University!  Today is the release of our explainer video covering RedisJSON, a Redis module that makes storing and manipulating JSON objects a breeze.

RedisJSON allows us to skip the serialization/deserialization cycle of JSON-to-String conversion and allows us to simply GET and SET values without worry.  I personally love this module due to its ease of use.  Also I just love JSON for some reason. 

{% youtube 2mFakgHKme4%}

We've also launched two new Redis University classes! They both start October 6th, so make sure to check them out! 

[RU330: Redis Security](https://university.redislabs.com/courses/ru330/) - (4 weeks, instructor-led)

Learn everything you need to know about Redis Security. The course focuses on access-control, data encryption, and secure deployment practices. This is my first time helping to produce a course, so I'm excited to hear your feedback!

[RU102PY: Redis for Python Developers](https://university.redislabs.com/courses/ru102py/) - (5 weeks, instructor-led)

In our latest language course, you'll learn how to create a complete Python application with the Flask framework, using Redis as a data store.

Keep learning!
Bridge Pattern
Tags: structural, pattern, designpatterns, java
Published: 2020-10-01 23:12:50

Decouple an abstraction from its implementation so that the two can vary independently.

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

#Participants#

* Abstraction: defines the abstraction's interface. Maintains a reference to an object of type Implementor.
* RefinedAbstraction: extends the interface defined by Abstraction.
* Implementor: defines the interface for implementation classes. This interface doesn't have to correspond exactly to Abstraction's interface; in fact, the two interfaces can be quite different. Typically the Implementation interface provides only primitive operations, and Abstraction defines higher-level operations based on these primitives.
* ConcreteImplementor: implements the Implementor interface and defines its concrete implementation.

#Code#

```java
public class Main {

	public static void main(String[] args) {
		Abstraction ab = new RefinedAbstraction();
		ab.implementor = new ConcreteImplementorA();
		ab.operation();
		ab.implementor = new ConcreteImplementorB();
		ab.operation();
	}
}

public class Abstraction {

	protected Implementor implementor;

	public void setImplementor(Implementor implementor) {
		this.implementor = implementor;
	}

	public void operation() {
		implementor.operation();
	}
}

public interface Implementor {

	public void operation();
}

public class RefinedAbstraction extends Abstraction {

	@Override
	public void operation() {
		implementor.operation();
	}
}

public class ConcreteImplementorA implements Implementor {

	@Override
	public void operation() {
		System.out.println("ConcreteImplementorA Operation");
	}
}

public class ConcreteImplementorB implements Implementor {

	@Override
	public void operation() {
		System.out.println("ConcreteImplementorB Operation");
	}
}
```

#Output#
```
ConcreteImplementorA Operation
ConcreteImplementorB Operation
```
{% github https://github.com/eidherjulian61/design-patterns no-readme %}
{% link https://dev.to/eidher/principales-patrones-de-diseno-13ao
 %}
Best Scalable React App Structure 2020
Tags: showdev, react, webdev, javascript
Published: 2020-10-01 22:50:16

Big and extensive ReactJS application should have a well planned and organized project structure.

I will show you how I built a Best Scalable Structure for ReactJS Applications. First, have a look at my directory structure then I will explain every bit I did or used in creating this architecture.

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

[Click here to read full article](https://codewithghazi.com/best-scalable-react-app-structure-2020/)

I have used this structure in 5+ projects of mine and have been continuously enhancing this to date and will continue to do so in the future. I have created a Pre-configured React Starter Kit which is like plug and play for your new projects, everything is configured so you just have to take care of the development.  Check on Github and don’t forget to give **STAR** to the repo.

{% github gkhan205/cwg-react-starter %}
Unfortunate events, week 4 bootcamp
Published: 2020-10-01 22:45:35

Unfortunately due to my Crohn’s flare getting absolutely terrible I got the knockout of my life this week, putting me behind on some homework and material on this coding bootcamp, but I just had an appointment with doc and I’m back on 40mgs of prednisone and I’ll be starting humira soon, this should give me the fuel to finish the bootcamp successfully hopefully.
Rails i18n - Show translation_missing class style in production only
Tags: rails
Published: 2020-10-01 22:36:19

The `translation_missing` class can be pretty useful in development to expose all the instances of missing `i18n` keys in your app. Rails adds a `<span class="missing_translation" ></span>` around every use of his helper method `t` that doesn't have a matching key in the YAML of the current locale.

To help expose to the team every instance of missing translations, we recently started using a simple CSS class:
```css
.translation_missing {
  outline: 1px solid red;
}
```

So we could all see red outlines on every instance of missing key:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d4ngahv3jm2pal6v5ho1.png)


## The issue
**This would also show those outline in production! 😱**

Most of the solutions I found in StackOverflow were either outdated or too complex to be trustworthy.

I decided to read how those span classes are created by Rails to try and find a fix, but after my third monkey patch to Rail's `ActionView` I realized that a simpler approach might be in order. 

## The simple fix
**Create an `error_styles` helper** that returns a `<style>`

```ruby
# app/helpers/errors_helper.rb
module ErrorsHelper
  def error_styles
    tag.style do
      <<~CSS
        .translation_missing {
          outline: 1px solid red;
        }
      CSS
    end
  end
end
```

And add it to your application layout:
```erb
<!-- app/views/layouts/application.html.erb -->
<!---- Somewhere in your <head> ---->
<%= error_styles if Rails.env.development? %>
```
Hacktoberfest 2020 Help & Discussion Thread
Tags: hacktoberfest, discuss, help
Published: 2020-10-01 22:19:35

---
title: Hacktoberfest 2020 Help & Discussion Thread
published: true
description: A thread to ask questions, help troubleshoot issues, and participate in discussions related to Hacktoberfest 2020
tags: hacktoberfest, discuss, help 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2ph1gpihx5yvew74givp.png
---

If you're participating in Hacktoberfest 2020, there's a chance you might run into an obstacle or two. Or perhaps you're just looking for someone to bounce ideas off of about open source this month. 

 
> **Whether you're contributing or reviewing PRs as an open source maintainer, this thread is for you to ask and answer questions about Hacktoberfest 2020 — and discuss the challenge as a community!**

Plus, If you'd like live help, Raise.dev is hosting live-pairing sessions with maintainers throughout the month of Hacktoberfest to help contributors with their questions. Check it out and sign up [here](https://raise.dev/hacktoberfest). 


![david s pumpkins questions](https://media.giphy.com/media/3oriO5EMLxl1f7funu/giphy.gif)
Well this is sudden...
Published: 2020-10-01 21:58:35

I realised if I didn't go back to practising code daily, I'd forget as I did last year.

What better way to get back to it than to commit myself to journaling daily here and doing a 30 days of code challenge. This was super spontaneous because I don't trust myself to start it any other day. 

I did Day 1 on Hacker Rank- a simple hello world program. I looked for a random challenge and chickened out--I mean it was expert level and I only got the basics down again during the summer. In the days to come I hope I can follow through with my plan to do a mini-project daily.

I mean, school and my internship can come in the way but I've seen how determined I can be so I'm very hopeful and excited.

I'm not putting any tags on this _but_ if you see this and want to stick around, you're welcome!
How to add gzip compression to ASP.NET Core API responses
Tags: todayilearned, csharp, aspnet, dotnet
Published: 2020-10-01 21:54:15

_I originally posted an extended version of this post on [my blog](https://canro91.github.io/2020/10/01/CompressResponses/)._

To compress responses with ASP.NET Core, register the default compression providers into the dependencies container with the `UseResponseCompression()` method.

Something like this,

```csharp
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddResponseCompression(); // 👈

var app = builder.Build();
app.UseResponseCompression(); // 👈
app.MapControllers();
app.Run();
```

If we don't specify any compression provider, ASP.NET Core uses a default one.

If we want gzip compression, then let's register the `GzipCompressionProvider` inside `AddResponseCompression()` and set its compression level by configuring the `GzipCompressionProviderOptions`,

```csharp
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();

builder.Services.AddResponseCompression(options =>
{
    options.Providers.Add<GzipCompressionProvider>(); // 👈
});

builder.services.Configure<GzipCompressionProviderOptions>(options => 
{
    options.Level = CompressionLevel.Fastest; // 👈
});

var app = builder.Build();
app.UseResponseCompression(); // 👈
app.MapControllers();
app.Run();
```

In previous versions of ASP.NET Core, we needed the `Microsoft.AspNetCore.ResponseCompression` NuGet package. It's deprecated now. ASP.NET Core has response compression built in now. We don't need NuGet packages for this.

But if you're still using ASP.NET Core 2.x, here you go,

```csharp
public void ConfigureServices(IServiceCollection services)
{
    services.Configure<GzipCompressionProviderOptions>(options => 
    {
        options.Level = CompressionLevel.Fastest;
    });
    services.AddResponseCompression(options =>
    {
        options.Providers.Add<GzipCompressionProvider>();
    });
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseResponseCompression();
}
```

_Source_: [Response compression in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/performance/response-compression?view=aspnetcore-3.1#gzip-compression-provider)

***

_Hey, there! I'm Cesar, a software engineer and lifelong learner. Visit my [Gumroad page](https://imcsarag.gumroad.com) to download my ebooks and check my courses._

_Happy coding!_
Day 229: Sun in My Face
Tags: hiphop, code, coding, lifelongdev
Published: 2020-10-01 21:49:14

_liner notes_:
- Professional : Had 3 meetings today so I decided to head to the park and work from there. I didn't want to use my phone as a hotspot and with my Internet Provider, I can log into different WiFi hotpots around the park. Had my meetings and then built out some Vue 2 and 3 applications using the Web Component I've been using for my blog posts. It was pretty straightforward considering I've never done Vue before and only watched a couple of introductory videos and read through the documentation. I just need to create an application using Web Components with Vue 3 and the Composition API, that I'll need to look into more. Hopefully have that worked out in a couple of hours. It felt good to be able to stretch my legs and walk around the park with the sun in my face between meetings. Probably head here again tomorrow.

- Personal : Last night pretty much consisted of going through tracks for the radio show and watching Vue videos.

![View of the snow capped Pyrenees Mountains above the clouds from high in the atmosphere](https://dev-to-uploads.s3.amazonaws.com/i/bycju2mldktszyhk27w6.png)

Came to the park with around 79% left in my battery. Right now, it's around 93%. Not too bad considering it wasn't really all that sunny for most of the day. I'll probably spend the rest of the night finishing up the Vue demos and getting a draft of the blog post done so I can get it reviewed. Can't believe that it's Thursday already!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube 43D-bepVAJ4 %}
Rick and Morty // CLI Project
Tags: cliproject, flatiron, week4, module1
Published: 2020-10-01 21:33:55

Hello again, 

The last couple weeks have been BRU-TALLLLL.  But the pieces are all starting to come together and I'm not AS terrified as I was 3 weeks ago.  So, this week, being week 4, means that Module 1 of my Flatiron journey is coming to a close. And this week, we had to take everything we learned from the last three weeks and put it to the test by building our own Command Line Interface (CLI) project.  And with that CLI, we either had to scrape data from a website OR request data from an API...I definitely did the latter of the two options.  

In this project, to be put in short, pulled information from an API, then used that information with Ruby in order to create objects and have them interact with each other across multiple files in order to have a user interact with whatever is outputted into the terminal.  I think I said most of that right...I'm still learning, so be gentle, lol.  

And my project was to pull information regarding Characters from Rick and Morty, and have the terminal display this information after performing some technology gymnastics and magic and having the user interact with the prompted text.  

This was a stressful process -- I'd attest that it was because I've never used my brain in this way -- but I got through and hopefully the information has been stored in my own computer (aka - my brain).  Sooooo, yeah, if ya wanna check out my code, follow the link below!!    

Bodda-bing, bodda-boom, enjoy!   

https://github.com/doosemavis/rick_and_morty_cli

Sincerely,
Moose