teleren/devto huggingface dataset:
Vue 3's Global Mounting
Tags: vue3, vue, webdev, javascript
Published: 2020-05-21 20:47:09

---
title: Vue 3's Global Mounting
published: true
date: 2020-05-17 21:14:14 UTC
tags: Vue 3,Vue.js,Web Development,JavaScript
canonical_url: http://wildermuth.com/2020/05/17/Vue-3-s-Global-Mounting
---

![Vue.js](https://wilderminds.blob.core.windows.net/img/vue.png) As Vue 3 continues it's relentless Beta drive (with almost daily Beta builds), all of us Vue developers have to get ready for changes. The one I want to mention today is the changes in mounting a new Vue object.

In prior versions, Vue used the global Vue object to specify things like plugins. In Vue 3, this changes to allow you to mount separate Vue instances with different plugins. Let me show you how.

## What is Global Mounting

The idea of starting up a Vue project takes a couple of forms. For example, in Vue 2 you could either just use the JavaScript file or use a transpiler. The startup for both of these cases were similar (but not the same). For example:

```
Vue.use(VeeValidate);

new Vue({
  el: "#index-page",
  data: {
    name: "Shawn"
  }
});

```

In this simple case, registering the plugin (e.g. VeeValidate) is global and then a new instance of the Vue object can use the validation library. This works great if there is one and only one large Vue object. The same is the case when using transpilers:

```
import Vue from 'vue';
import router from "./router";
import VeeValidate from "vee-validate";
import store from "./dataStore";

Vue.use(VeeValidate);

new Vue({
  store,
  router,
}).$mount("#index-page");

```

Note that no matter how many vue objects are created, they'd still all use the global configuration.

## How Vue 3 Changes Global Mounting

In Vue 3, the goal is to better encapsulate plugins and not use a **global** representation. To do this, you will use the **createApp** function:

```
Vue.createApp({
  setup() {
    return {
      name: "Shawn"
    }
  },
  template: `<div>{{ name }}</div>`
})
.use(VeeValidate)
.mount("#theApp");

```

Notice the plug-in is part of the app object (e.g. use function), not global. If you're using a transpiler, it becomes clearer what is happening:

```
import { createApp } from 'vue';
import App from './App.vue'
import VeeValidate from 'VeeValidate';
import router from './router'
import store from './store'

createApp(App)
  .use(VeeValidate)
  .use(store)
  .use(router)
  .mount('#app')

```

Notice that Vuex and the router are also just another plugin. No more magic different ways to inject functionality into your vue object.

What do you think?

[![Creative Commons License](http://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png)](http://creativecommons.org/licenses/by-nc-nd/3.0/)

          This work by [Shawn Wildermuth](http://wildermuth.com) is licensed under a [Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License](http://creativecommons.org/licenses/by-nc-nd/3.0/).  
          Based on a work at [wildermuth.com](http://wildermuth.com).

* * *

If you liked this article, see Shawn's courses on [Pluralsight](http://shawnw.me/pscourses).
 ![](http://feeds.feedburner.com/~r/ShawnWildermuth/~4/4i7cNOaInjs)
Getting Started With Deno
Tags: javascript, deno
Published: 2020-05-17 21:05:57

In previous article, had shared information about the new Javascript and Typescript runtime, know as Deno.js has been released from the creator of Node.js Ryan Dahl, In this article i'm going to share with you that how you can install Deno.js into your system & run your first Hello World! program.

Visit to learn more - https://www.htmlhints.com/article/getting-started-with-deno-10/91
KVision v3.9.0 is released (with support for React components)
Tags: kvision, kotlin, react
Published: 2020-05-17 20:30:43

---
title: KVision v3.9.0 is released (with support for React components)
published: true
description: KVision is an open source web framework created for Kotlin/JS.
tags: kvision,kotlin,react
---

[KVision](https://github.com/rjaros/kvision) is an open source web framework created for Kotlin/JS. It allows developers to build modern web applications with the Kotlin language.

I have released KVision 3.9.0, with extremely useful support for embedding React components in KVision applications. Now you can use not only the rich set of built-in KVision components, but also literally any free React component available in the NPM repository. And it's really very simple :-)

Soon I'll write a separate article about this feature, but you can look at the [new chapter of the guide](https://kvision.gitbook.io/kvision-guide/part-2-advanced-features/using-react-components) to get started right now.

For more details about this release see the [changelog](https://github.com/rjaros/kvision/releases/tag/3.9.0).

Don't forget to ⭐️ my [project](https://github.com/rjaros/kvision) if you like it!

As always, any feedback is appreciated!
Looping: It's all about Repetition!
Tags: looping, ruby
Published: 2020-05-17 20:08:54

-	Understanding Looping is a key part of learning how to program. Looping occurs when you tell the program to do a task or something a certain number of times. The decisions are completely up to you. Pretty neat right? There are many types of Looping methods out there but the key takeaway here is that looping allows us to abstract away the actual mechanics of enacting the same lines of code a certain number of times. Here is an example of a loop using the .times method. Check it out: 

`8.times do`
`puts “Hey guys! My name is Oscar and I am going to repeat myself eight times.”`
`end` 

If you copy and paste the code snippet into IRB in your terminal and hit enter, you should see the following: 

`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
`Hey guys! My name is Oscar and I am going to repeat myself eight times`
Boolean type in Typescript - simple explanation
Tags: typescript, javascript, beginners, tutorial
Published: 2020-05-17 20:00:52


The most basic datatype is the simple true/false value, which JavaScript and TypeScript call a boolean value. In Typescript, we can assign four values to it, and thise are `true`, 'false`, `undefined` and `null` (when not using strictNullChecks): 

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

If we use `strictNullChecks`, the only values we cann asign are `true` and `false`.

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

When using variables that work with boolean, I like to name them something from which we can infer we are dealing with this type - like in this case, using the word `is` in `isLoggedIn` (it can be yes -> `true` or no -> `false`). You can name them however you want, this is just a personal preference and I've seen quite a few people doing it. Try to store something different inside them, and again we get an error.

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

This type is super useful when it comes to controlling the flow of a program using conditional statements (if this is true, do that, if this if false, do that). I don't use it much with pure Javascript but since I am working with React, it comes in handy when trying to render things based on different conditions. Or, in conjunction with `interfaces`, I can make sure that the props I'm trying to pass to a component are the correct type, in this case, boolean.

*Image source: Christina Morillo/ @divinetechygirl on Pexels*
Sunday Dose of Humility (May 17th, 2020)
Tags: frontend, uidesign, portfolioinspiration
Published: 2020-05-17 19:59:03

---
title: Sunday Dose of Humility (May 17th, 2020)
published: true
description: Sunday Dose of Humility is an every Sunday celebration of amazing sites from around the web, focusing on their frontend.
tags: Frontend, UI Design, Portfolio Inspiration
---

Since this is the first publication here, a little background seems appropriate. As first, a fine artist, and then, a frontend developer with so much love for aesthetically pleasing interfaces, I spend some time rummaging through the web looking for inspiration and magic created by other developers and designers. Sometimes, I’m inspired. Other times, I feel humble, like there’s so much to be learnt — WebGL/ThreeJS on Bruno Simon’s portfolio, CSS Polygon in In Pieces. However, this humility breeds inspiration to learn these technologies used. So either way, Inspiracion.

One Sunday — 12th of January, 2020 precisely — as I was going through this cycle, I decided to share that day’s inspiration on Twitter and make it a regular Sunday event. I named the series #SundayDoseOfHumility

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Well, because as a frontend developer, they make me feel like I haven&#39;t even started. Hopefully, they make us humble enough to make amazing stuff ourselves.<br><br>I will be posting on Sundays so do make sure to check out my wall every Sunday for your humility pill.🙂</p>&mdash; Daniel Ngozika (@DanielNgozika) <a href="https://twitter.com/DanielNgozika/status/1216356390098350080?ref_src=twsrc%5Etfw">January 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

In the past, <a href="https://bruno-simon.com/">Bruno Simon’s portfolio site</a> and <a href="https://2019.makemepulse.com/">Nomadic Tribe</a> have been our pills.

For this week’s #SundayDoseOfHumility, I give you…

Kayode Sholanke’s portfolio’s site.

I am a sucker for a beautiful portfolio site and from the colour scheme to the choice of fonts, everything seems well done. The animation isn’t overly done such that the user experience suffers as you’d probably see in some top designers’ portfolio sites.

According to <a href="https://builtwith.com/">BuiltWith</a>, it is built with jQuery and UiKit.

It was designed by <a href="https://twitter.com/iam_jaykay">Kayode Sholanke</a> and developed by <a href="https://twitter.com/sholankeolamid1">Olamide Sholanke</a>.

Here. <a href="https://jaykay.design/">Jaykay’s portfolio</a>. Experience awesomeness… and a dose of humility.
deno-diceware. A Deno Password Generator.
Tags: deno, cli, productivity, typescript
Published: 2020-05-17 19:35:58

---
title: deno-diceware. A Deno Password Generator.
published: true
description: Checkout this simple password generating CLI, built with Deno.
tags: deno, cli, productivity, typescript
---
# What is this?
[deno-diceware](https://github.com/IamFlowZ/deno-diceware) is a Command-Line utility for generating passwords based on the [Diceware Standard](https://theworld.com/~reinhold/diceware.html).

# How does it work?
```shell
$: diceware --count 5
    output:
$: xxxxxxxxxxx (password)
```

# Where can I find it?
[deno-diceware](https://github.com/IamFlowZ/deno-diceware)

# Can I contribute?
Absolutely!! Open-source is based on collaboration! Fork the repository, work to your hearts content, and submit a pull request once you think it's ready.

# Motivation
DENO! I'm super excited that there's a new server-side JavaScript runtime being released. It's pretty clearly far from production-ready, but that doesn't mean we can't start working with it.

# Closing Thoughts
So far, Deno feels like a major upgrade from Node. Top-level await + typescript out of the box feels almost magical. The other major improvement I've noticed that isn't really being mentioned is the standard library. Node obviously has a set of standard features, but unlike most server-side languages it lacks a dedicated standard library. In Deno, the stdlib is not only well defined, but really robust for where the language is in its lifecycle.

The future of JavaScript looks bright. But let's hear your thoughts? Have you built anything with Deno yet? Are you planning on giving it a go? Or are you sick and tired of seeing JavaScript reinvented every six months? Let everyone know in the comments.

---
Find me on [Twitter](https://twitter.com/FastFlowZ) | [LinkedIn](https://www.linkedin.com/in/dakota-lewallen/)
Sponsor me on [Github](https://github.com/iamflowz)
Like the article? [Buy me a coffee!](https://www.buymeacoffee.com/iamflowz)
React 3JS Word Sphere
Tags: codesandbox, animation, webgl, 3js
Published: 2020-05-17 19:40:11

---
title:React 3JS Word Sphere
published: true
tags: codesandbox, animation, webgl, 3js
---

Thank you, CodeSandbox for such a rich ecosystem for sharing live demos!
And thank you Paul Henschel, for showing us what's possible!

{% codesandbox prz5q %}
rpad in sqlite3 with Python
Published: 2020-05-17 19:37:54

---
title: rpad in sqlite3 with Python
published: true
description: 
tags: 
---

I have a small data analysis problem where I wanted to see a histogram of the data.

I did a quick google search and saw a few things but none of them seemed right to me. So I read the Python docs and decide I could do it with a function defined in Python.

I defined a function named rpad as a normal Python function. Once you have done that you can register that function with sqlite and then you can call the function in SQL. Woooooo!

```python
import sqlite3
db = sqlite3.connect(":memory:")

def rpad(count):
    ts = ""
    for i in range(count):
        ts = ts + "*"
    return ts

# register the function with sqlite here
db.create_function("rpad",1,rpad)

cur = db.cursor()
cur.execute("create table grades(grade)")
grades = [1,2,1,3,4,5,5]
for g in grades:
    cur.execute("insert into grades values(?)",(g,))
db.commit()
cur.execute("select * from grades")
cur.execute("""
SELECT grade, 
       COUNT(*) AS 'Count',
       rpad(COUNT(*)) AS 'Bar' 
FROM grades 
GROUP BY grade
ORDER BY COUNT(*)
""")
data = cur.fetchall()
for d in data:
    print(d)
db.close()
```
What platform to build Twitter Like Site.
Published: 2020-05-17 19:28:01

Hey guys, This is my first post in Dev.to. Your advice will be highly appreciated.

I am a semi-retired guy in the IT / Digital Media field. I am not a professional developer but I do know a bit in php, python, js, html, css, wordpress, drupal, django and so on. 

I am interested to build some kind of Twitter + Blog like website just for fun. It's a way to give myself a goal so I can learn in a practical way.

I am puzzled as to what platform I should use such as Django, Gastby, Next.js, Strapi, Laravel or whatever. I don't have any preference but only a bit of worry about the chance of success if the platform is too complicated for this very outdated programmer (I use to do Fortran).

I know there is no "definitive" answer on this question. Just wanna know your preference if you were to go and build a specialised Twitter site.

Thanks.
How to move on?
Tags: beginners, javascript
Published: 2020-05-17 19:23:23

Hello everybody, 
 I am very new in this community, also it's my first community. I'm very new in web programming either but I'm really hardworking about that. Nowadays I'm moving on ES6 basics and learning them. I'm studying more than a month. Of course I did not do lots of practice with Js but I have some experience with programming before not too much, just basic stuff. What should I do now should I stick with vanilla Js or should I start to learn a framework?
Role-based access to API in Node.js
Tags: node, javascript
Published: 2020-05-17 17:50:25

Let's start with a simple example of a college management system. 
1. Can students modify their marks?
=> NO, students are not authorized only teachers can do this :(   

But how this is handled in the college management system, the answer is
>Role-based authorization to API

How to authorize resources according to the user role, What is your approach?
##1. Simple and easy approach
Let's declare authorized roles in every endpoint and check with the user role if the user's role is present in authorized roles. Hurray! You have access.
Ex:

```javascript
route.get('/changemarks',(req, res) => {
    const authorizedRoles = ['teacher','admin']
    // Extract user role from req && Let's assume userRole is student
    const userRole = extractUserRole(req)
    // student is not present in authorizedRoles array 
    const isAuthorized = authorizedRoles.includes(userRole);
    if(!isAuthorized){
       // return with your customized error
    }
})
```


Advantage:
1. Simple and fast 

Disadvantage:
1. Not easily configurable


##2. Middleware in every route of your project.
Don't you think the above code should be separated out as an authorization handler? Let's add authorization handler in every request as middleware. 

```javascript
route.get('/changemarks', authorizationHandler(['Teacher','Admin'], (req, res) => {
})
```

```javascript

const authorizationHandler =  (authorizedRoles) => {
  return function(req, res, next) {
    const userRole = extractUserRole(req)
    if ( !authorizedRoles.includes(userRole) ) res.redirect(...);
    else next();
  }   
})
```

Advantage:
1. Easy and only one middleware, no need to add the same code in every route.

Disadvantage:
1. Hard-coded authorized roles in middleware's parameter ex.['Teacher','Admin']
Top 3 Software Testing Experts You Should Follow As QA | 30 Days of API Testing | Day 17
Tags: testing, webdev, tutorial, beginners
Published: 2020-05-17 18:58:27

🚀Mastering API Testing(Full Course) -  https://www.learnapitesting.com

In this video of 30 Days of API Testing Challenge, We are going to discuss Top 3 Software Testing Experts You Should Follow As QA.

Link: https://www.one-tab.com/page/Wt9mEOu_ScSAQ7ImjyHRRw
1. https://www.satisfice.com/
2. https://www.developsense.com/index.html
3. http://www.testingeducation.org/BBST/testdesign/

[![30 Days of API Testing](https://i.imgur.com/Rx5nKyl.png)](https://youtu.be/M36dUi6F4mI "30 Days of API Testing")


🚀 Day 17 Task : Find 5 API testing experts to follow on Twitter.

🚀 Task 17. :  https://scrolltest.com/api/day17

🚀 All Task List : https://scrolltest.com/api/task

--
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
Reasons Why You Should Publish Your Interview To Digitalgurujii.com
Tags: Interview
Published: 2020-05-17 18:42:21

1. Highly-Targeted Traffic- The traffic we send to your site is highly targeted related to your niche/topic. Only specific and interested audience would be visiting your website.

2. Increased Visibility- The stories we write may be viewed by the millions of visitors from all across the world who use our website every month!

3. Enhanced Credibility- Our published stories will provide you the position as a credible Expert Author and build brand equity for you and your business.

4. Increase Your Product or Services’ Sales – Your story reaches targeted audience which can increase your Product or Services’ sales.

5. Build brand equity & exposure- You may even find yourself published in someone else’s book because of having your story found in our site!

6. Get traffic spikes over the coming months and a continual level of traffic for years to your website – all because your stories are listed in digitalgurujii.com!

7. Your articles will be sent immediately to all the users who has subscriber for immediate notification when your stories are added to our site.
Real-time communication with Azure Functions, SignalR service and Blazor Wasm
Tags: azure, serverless, signalr, blazor
Published: 2020-05-17 18:31:57

## What is ASP.NET Core SignalR?

It is an open-source library that adds real-time web functionality to apps. Apps that require high frequency updates from the server, social networks, gaming, dashboards, monitoring, apps that require notifications, are all great candidates for SignalR.

SignalR:

- Handles connection management automatically.
- Sends messages to all connected clients simultaneously, or to specific clients or groups of clients.
- Scales to handle increasing traffic.

### **Transports**

Transports are methods of handling real time communication. 

SignalR automatically chooses the best method that is within the capabilities of the server and client. 

The following techniques are supported:

- [WebSockets](https://tools.ietf.org/html/rfc7118)
- Server-Sent Events
- Long Polling

### **Hubs**

SignalR uses hubs to communicate between clients and servers. In the server code, you define methods that are called by client. In the client code, you define methods that are called from the server and a hub is a high-level pipeline that allows a client and server to call methods on each other. 

SignalR provides two built-in hub protocols: a text protocol based on JSON and a binary protocol based on [MessagePack](https://msgpack.org/). 

## Azure SignalR Service

Is the hosted on Azure version of SignalR.

- Removes the need to manage back planes that handle the scales and client connections.
- Simplifies web applications and saves hosting cost.
- Global reach, SLA, scales to millions of connections, all the security and compliance goodies that are standards when using an Azure service.

## Azure SignalR service and Azure functions

A Function of any trigger type can push out messages to clients using Azure Functions SignalR bindings. 

Azure SignalR Service and Azure Functions are both fully managed services and we're going to use the two together to provide real-time communications in a serverless environment in this demo.

[You'll need an instance of Azure SignalR service to get this working](https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-quickstart-dotnet-core)

{% github madebygps/signalr-functions-blazor-demo no-readme%}

In this video, I walk through a simple example of SignalR service, Azure functions and Blazor Wasm.

{% youtube ILV0OpMq01c %}

I plan on creating more content around Azure; it's great to share what I've been learning.

If you have any feedback at all, please let me know in the comments below or reach out to me on socials.

Thanks for reading and possibly watching!
A List of Free Courses on Flutter Development
Tags: flutter, webdev, mobileappdevelopment, dart
Published: 2020-05-17 18:29:31

---
title: A List of Free Courses on Flutter Development
published: true
description: Here's a list of Free courses and training resources for developing native applications using Flutter framework
tags: flutter, webdev, mobile app development, dart
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/18suvq43ddyaukngjrc1.jpg"
---

Flutter is Google's new Software development kit for developing native applications for all devices: Web, Mobile and Desktop.
Flutter also enables you to deploy your application to both Android and iOS using a single code base. 
The biggest advantage of using Flutter is it's built-in widget functionality and modern UI components which allow you to develop beautiful applications rapidly.
Another plus point with Flutter is its adaptability with older Android and iOS devices. the apps work absolutely the same with old and new mobile devices.

Here are the best FREE training courses on Flutter currently available on the Web:
* [Udacity - Build native mobile apps with Flutter](https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905)
* [App Brewery - Introduction to Flutter development using Dart](https://www.appbrewery.co/p/intro-to-flutter)
* [Official Flutter tutorial on Flutter.dev](https://flutter.dev/docs/reference/tutorials)
* [Udemy - Learn Flutter Beginner course](https://www.udemy.com/course/learn-flutter-beginners-course/)
* [The Net Ninja - Flutter tutorial for Beginners](https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ)
  
More details on these courses can be found in this [Guide](https://www.helpmegeek.com/free-flutter-courses-app-development/).