teleren/devto huggingface dataset:
Jest + Nuxt + Vuetify
Tags: javascript, vue, testing
Published: 2021-02-12 22:28:14

Starting from a new Nuxt app created with Jest support I was trying to get tests running but struggled to get passing tests free of vue warnings. Things like  
```
    [Vuetify] Multiple instances of Vue detected    
```
or 
```
    [Vue warn]: Unknown custom element: <v-row> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
```

### Solution
Globally setup Vue with Vuetify support before the tests run. 

Add to `jest.config.js`
```js
  setupFiles: ['<rootDir>/test/setup.js']
```

Setup file as recommended by the [Vuetify docs](https://v2.vuetifyjs.com/en/getting-started/unit-testing/#bootstrapping-vuetify)
```js
// /test/setup.js
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.config.productionTip = false
Vue.use(Vuetify)
```

Example test
```js
// /test/index.test.js
import { createLocalVue, shallowMount } from '@vue/test-utils'
import index from '@/pages/index'

describe('index', () => {
  const localVue = createLocalVue()
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(index, {
      localVue
    })
  })

  test('is a Vue instance', () => {
    expect(wrapper.vm).toBeTruthy()
  })

  test('Matches Snapshot', () => {
    expect(wrapper.html()).toMatchSnapshot()
  })
})

```

Happy testing!
Day 308 : I Remember
Tags: hiphop, code, coding, lifelongdev
Published: 2021-02-12 22:23:51

_liner notes_:
- Professional : Had our weekly team meeting. It was good to see everyone. It went by pretty quick. Rest of the day I workd on creating a demo application in Vanilla JS that I will be taking the UI and converting the elements to Web Components. Also, the recording of my last presentation has been uploaded.

{% youtube SsijT3pEo8Q %}

- Personal : Last night, pretty much spent some time going down the rabbit hole of looking up land and shipping container homes. haha Went over some tracks for this week's radio show and then went to sleep.

![Clouds above Žalý, Czechia at sunset](https://dev-to-uploads.s3.amazonaws.com/i/tzzypp444ma08memy5z0.jpg)

Going to finish up the work for the radio show. Do a little bit of coding a front end. There's something I want to try to see if I can get it working. Watch "WandaVision" and maybe an episode of "Dinosaurs". "Dinosaurs" was a show I used to watch awhile back and it's now on Disney+. Going to see if it still holds up to what I remember it as.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube LNU8fY63YvM %}
New blockchain dev looking for opensource projects to learn
Tags: blockchain, developer, crypto
Published: 2021-02-12 22:12:56

Hello community, my name is christos. im 21 years old and been into coding from my 11, made some games (private servers open source code) and the latest 4 years im working with companies on the gambling industry with typescript and pixijs. i have made some backend examples too with expressjs and fastify as my custom work. i would like to know more about blockchain and learn new things and i would like to ask if someone have any project that i could help on my freetime to learn new things with a small or a big team i don't really mind! here is my discord if someone have anything to suggest: Ryuzeke#3984
node modules
Published: 2021-02-12 22:11:25

#[madge](https://www.npmjs.com/package/madge)

Madge is a developer tool for generating a visual graph of your module dependencies, finding circular dependencies, and give you other useful info. Joel Kemp's awesome dependency-tree is used for extracting the dependency tree.

#[npm-check-updates](https://www.npmjs.com/package/npm-check-updates)

Upgrades your package.json dependencies to the latest versions, ignoring specified versions.
Debug your GitHub Actions via SSH by using tmate
Tags: github, devops, githubactions
Published: 2021-02-12 21:44:15

I spend most of my time developing on the front ends that host on cloud environments. Most of these projects do not require me to ever inspect servers things as they just kind of work, which is nice.

From my understanding, [tmate](https://tmate.io/) is a tool that provides instant terminal sharing. You're able to activate a secure shell or SSH to explore and run commands. I perform a lot of my debugging with [action-tmate](https://github.com/mxschmitt/action-tmate) to access the hosted runner environments.

{% github https://github.com/mxschmitt/action-tmate %}

To do this, I paste the action directly into my workflows using the mxschmitt/action-tmate repo.

```yml
name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup tmate session
      uses: mxschmitt/action-tmate@v3
``` 

It takes a few seconds for a tmate to provide the URL, but when it does, I can start navigating the environment. 

In the gif, you can see the I have a fully running environment for me to test out.


So if you find yourself stuck and seeing some weirdness in your workflows, consider opening a tmate session and sharing with coworkers. Just keep in mind that you are running a live session that uses action minutes and has access to any used **GITHUB_TOKEN**'s. 

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/the-secrets-of-authenticated-github-action-workflow-3i5o %}
Web Design Tips For Web Developers
Tags: webdev, tips, devjournal, beginners
Published: 2021-02-12 21:32:05

_This article was originally posted on [my personal blog](https://blog.shahednasser.com/web-design-tips-for-web-developers/)_

A while ago I took a course on Udemy called [Web Design for Web Developers](https://www.udemy.com/web-design-secrets/learn/v4/overview). The course is very short and has a few simple tips that are actually really important to achieve a clean design for your website.

I advise you to take the course - it is only one hour long and it is FREE - to get a better understanding of these tips. However, I will be sharing with you what I learned in the hopes that it will help you out.

---

## Typography

- Font size should be between 15px and 25px for body text.
- Headlines should have a big font size
- Line height should be between 120% and 150% of font size.
- Pick a font that reflects the feel of the website, and stick with it for the entire website

---

## Colors

- Specify a base color
- Using online tools, create a palette based on different shades of the base color or what colors go well with it.
- For Call To Action buttons, use colors that will draw the attention of the user
- Do not overuse Black in your design (this does not apply to dark mode).

---

## Images with Text

- When putting text over images, make sure to add an overlay to the image so the text can be readable.
- If you do not want to add an overlay, you could put the text in a box and give it a background color.
- Another option is to blur the image.

---

## Icons

- Use icons for features, services, steps, etc.
- Make sure the icons are easily understood to not cause confusion, especially if they are not accompanied by text.
- Label your icons.

---

## Spacing/Layout

- Put whitespace between website sections to make the start and end of a section apparent.
- Base the layout on what you want your audience to focus on.
- Make sure the whitespace between elements is not too small that everything looks crowded

---

## Conclusion 

These are just a few of the helpful tips I learned from the course. To get more insight and understand the concepts more clearly, take an hour to go through the course.
Blazor & Machine Intelligence Demos
Tags: machinelearning, blazor, azure, dotnet
Published: 2021-02-12 21:29:44

Below is a sample of my Blazor apps with Machine Intelligence (Statistics, Analytics, Machine Learning, AI, Information Retrieval etc.). This coalesces all of my Machine Intelligence repos in a single area and point to their respective: live demo, source code, video & presentation locations.

## Live Demos
•Baseball ML Workbench (.NET Core 3.x, Blazor Server): https://aka.ms/BaseballMLWorkbench  
•Statistical Simulations & Visuals (.NET Core 3.x, Blazor WASM): https://statisticsandblazordotnetcore3.azureedge.net    
•Statistical Simulations & Visuals (.NET 5, Blazor WASM): https://statisticsandblazordotnet5.azureedge.net  
•ML.NET Baseball Predictions & Lucene Information Retrieval (.NET 5, Blazor WASM, Azure Static Website): https://mlnetandblazor.azureedge.net  
•ML.NET Baseball Predictions & Lucene Information Retrieval (.NET 5, Blazor WASM, Azure App Service): https://mlnetandblazor.azurefd.net  

## Source Code
•Baseball ML Workbench: https://github.com/bartczernicki/MachineLearning-BaseballPrediction-BlazorApp  
•Statistical Simulations & Visuals (.NET Core 3.x, Blazor WASM): https://github.com/bartczernicki/Test-Blazor-WebAssembly-StatisticsAndML  
•Statistical Simulations & Visuals (.NET 5, Blazor WASM): https://github.com/bartczernicki/Test-Blazor-WebAssembly-StatisticsAndML-DotNet5  
•ML.NET Baseball Predictions & Lucene Information Retrieval (.NET 5, Blazor WASM, Self-Host): https://github.com/bartczernicki/Test-Blazor-MLNet  

## Presentations
•Adding Machine Intelligence to your Blazor Apps: https://github.com/bartczernicki/ArtificialIntelligence-Presentations/blob/master/AddingMachineIntelligenceToYourBlazorApps.pptx  
•Machine Learning Community Standup - Blazor WASM & ML.NET with .NET 5: https://github.com/bartczernicki/ArtificialIntelligence-Presentations/blob/master/DotNetCommunityStandup-MLNetBlazorDotNet5.pptx  
•Virtual ML.NET Conference - Decision Analysis with ML.NET: https://github.com/bartczernicki/ArtificialIntelligence-Presentations/blob/master/VirtualMLNet-DecisionAnalysisWithMLNet.pptx
How To Stay Motivated While learning ?
Published: 2021-02-12 21:24:38

Hey Dev Community 

i'm learning django i have basics i can make simple project like todo list or an upload file , so now i'm trying to make a blog by myself sometimes i look for tuto , and sometimes i feel like a dumb and that i dont know anything or functions even that i used it before for once only and thats give me a bad feeling and a desire to stop learning and change the field 

i dont know what to say more im really confused
Começando com AWS Amplify. Inicio da jornada.
Tags: react, amplify, aws
Published: 2021-02-12 21:23:04

Antes de começar vale frisar que esse tutorial é voltado para niveis intermediarios de conhecimento em js e React, partindo desse ponto não explicarei todos os detalhes de javascript e React, o foco aqui é o Amplify.

Oque é Amplify?
Basicamente o amplify encapsula um conjunto de ferramentas focadas em transformar um desenvolvedor front-end em full-stack possibilitando o desenvolvimento de tecnologias web e aplicações moveis de maneira segura, escalável e rápida.

Para começar precisaremos ter instaladas na maquina:
* Node.js v10.x 
* npm v5.x

E obviamente também precisaremos ter uma conta na [aws](https://aws.amazon.com/pt/).

A partir desse ponto já podemos instalar o Amplify CLI globalmente.

`npm install -g @aws-amplify/cli`

Para começarmos a entender como Amplify funciona iremos criar uma pequena aplicação uma Forum de conversas e as converas devem se atualizar em tempo Real sem a necessidade de recarregar a página, nisso iremos usar Autenticação, Hospedagem e API.

Agora vamos criar um aplicação react
`npx create-react-app forum`

Vamos instalar as dependências do projeto:
`npm install --save bootstrap reactstrap react react-dom react-router-dom`
Calm down your productivity
Tags: beginners, advice, productivity, burnout
Published: 2021-02-12 20:19:53

**Hi everyone!** 👋🏻
Today I'm going to make an advice and a little bit of my opinion about one thing that all or the majority of the devs feel one day.

In all my journey as a dev I have moments when my motivation is above 9000% and others when is less than -100%. I started asking me why this happened.
Everyone of us is know that in the dev world, we can experience **burnout** and this issue can reduce our motivation in our work. One of my favorite dev youtubers (Mayuko) [make a video about this](https://www.youtube.com/watch?v=PogWhbDpCWs&t), and why she needs to take more time to rest of coding, so many times in my dev life I hear this a lot, project managers and analysts talking about they don't want to code all his life and that's one of the reasons because they're there. While I have a lot to learn, sometimes I think if coding is going to be my future, and don't misunderstand me, there isn't another thing that I love more than desing and coding from nothing, for me is like an artistic feel, but  the **burnout** it shows frequently.

¡Hey! 🛑**STOP**, do not be discouraged (this going more to the begginers devs). I think when we learn a new thing most of us, feels like is level up, we need to take care of our health, in all the aspects, both physical and mental, we need to rest to be able to continue with our task, if we didn't take care of this, the **burnout** it will show easily. I can say that is like make physical exercise, is recommended make 3 to 5 days of exercise per week, our muscles need rest, for example, if we make exercise 7 days per week without taking a rest they will  give up. Happend exactly the same with the **burnout** with our work, if we didn'ttake the enough rest, all of your motivation will disappear.

I'm going to tell you about a little story (who doesn't like stories 😁)
While I was in my first years of my major, one teacher saw my excitement for learning, one day she said if we can talk, first of all she congratulate for my excitement, but after that she start  talking me about the **burnout** and how it can happen if I didn't care the other aspects of my life, she told me to be more calm to learn, I take his advice and start to analize better the things that I was learn. I wonder know what can be happend if i didnt take his advice, maybe I will get tired of developing. 

So my advice to all of the beginner devs or devs who is starting to work on this, is you need to calm down your excitement to learn new things, everyone of us learns in a different way and rate. I know is a lot of competence out there, but the world always will need a dev.

**Greetings!**
_Keep Coding._ 🤓
Community Hangout and Update - 2021-02-13
Tags: phalcon, phalcon4, phalcon5, hangout
Published: 2021-03-31 18:33:49

---
title: Community Hangout and Update - 2021-02-13
published: true
date: 2021-02-12 20:17:42 UTC
tags: phalcon,phalcon4,phalcon5,hangout
canonical_url: 
---

Join us this Saturday 13rd February at 12:00 EST (19:00 UTC) for a community hangout and update.

<!--more-->
- PHP 8
- v4.1.x
- v4.2.x
- v5.0.x

[https://youtu.be/ZwoKwnVOQOw](https://youtu.be/ZwoKwnVOQOw)

Looking forward to seeing everyone there!
Fixing all the things
Tags: a11y
Published: 2021-02-12 19:55:02

If you didn't already know, [your CSS can influence screen readers](https://benmyers.dev/blog/css-can-influence-screenreaders/). One of the most surprising things to me was learning that VoiceOver removes list semantics from `ul`s and `ol`s when `list-style-type: none` is applied to them.

Turns out, this is actually intended behavior:

> This [not announcing a list for a groups of links when list-style is set to none] was a purposeful change due to rampant "list"-itis by web developers…Basically, if you remove all default visible indication of the list, there is no indication to a sighted user or screen reader user that the content is a list…
>
>—James Craig, [Webkit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=170179#c1)

This is one of those interesting things that may seem wrong to developers that apparently was annoying accessible technology users. James goes on to say the easiest way to fix this is to explicitly define a list role on the list:

```html
<ul role="list">
	<!-- list content here -->
</ul>
```

Unfortunately, as Scott O'Hara reminds us in his [fantastic write up on this issue](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html), the [first rule of ARIA](https://www.w3.org/TR/using-aria/#rule1) is to not use it when there are existing HTML elements that already have the needed role. Scott mentions a nice [CSS-only fix](https://gerardkcohen.me/writing/2017/voiceover-list-style-type.html) put forth by [Gerard Cohen](https://gerardkcohen.me/index.html) and retweeted by [Sara Soueidan](https://www.sarasoueidan.com):

```css
.list li {
	list-style-type: none; /* remove bullets */
}

.list li::before {
	content: "\200B"; /* add zero-width space */
}
```

I think my biggest takeaway from Scott's article, though, is that "bugs" like this may be best left alone:

> While this behavior can be unwelcome in some situations, let’s also not spend too much effort over correcting an over correction which was in response to an over use of unnecessary semantics.

VoiceOver users are used to the quirks that the technology presents. Forcing a consistent experience may end up making things worse. Just like everything else in web development, you need to test with real people.

When I began my journey of learning about accessibility, I enthusiastically "fixed" everything I could find in my code, usually over-complicating markup and making things worse for people. More often than not, it pays to keep it simple.

If you'd like to hear more about how I've overcomplicated things in the past, check out this [letter to my younger self](https://www.falldowngoboone.com/blog/notes-to-my-younger-self-regarding-accessibility/), or you can just ask me on [Twitter](https://twitter.com/therealboone) about all the hot garbage code I've been known to write. Maybe you can learn from my (many) past mistakes.
The Simple Magic of Prefixed URLs
Tags: ideas
Published: 2021-02-12 19:51:57

---
title: The Simple Magic of Prefixed URLs
published: true
description: You can enhance the web by making wrappers around it.
tags: ideas
slug: prefixed-urls
canonical_url: https://www.swyx.io/prefixed-urls
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7sds0o2n6ctdhctjfs15.jpeg
---

If you go to `https://swyx.io`, you get my blog.

If you go to `https://is-this.netlify.app/https://swyx.io`, you get this:

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

This is a [little utility](https://twitter.com/swyx/status/1144365946804588545?s=20) I made that solved the very specific pain point of figuring out whether or not a potential customer was a Netlify user or not (or had configured another CDN atop Netlify).

I originally did this as a browser extension, but the benefit of doing this as a microsite is I can now access it on my phone.

## Prefixed URLs

This is a little behavior that I call **Prefixed URLs**, after [GitPod's name for it](https://www.gitpod.io/docs/getting-started/#prefixed-url). 

It's a really nice way to **enhance the open web** - by creating a route that specifically accepts either any URL or some specific set of URLs, and then does something with that info to give you even more. To use this microsite, you just prepend the URL to whatever you're interested in.

I was recently reminded of this when [the **Github1s** project](https://github.com/conwnet/github1s) went viral [on HN recently](https://news.ycombinator.com/item?id=26083919). It lets you swap out any `github.com` repo for `github1s.com` and it opens up a VS Code file explorer for easier navigation (GitHub's default file navigation is slow and clunky).

![github1s demo](https://raw.githubusercontent.com/conwnet/github1s/master/resources/images/demo.png)

## Other Instances

I've also seen this behavior in website ranking tools: https://www.similarweb.com/website/dev.to/ shows you the traffic of Dev.to:

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

In the "we deploy your code" industry it is also pretty common to use Prefixed URLs as "Deploy Buttons" like [Netlify](https://docs.netlify.com/site-deploys/create-deploys/#deploy-to-netlify-button) and [Codesandbox](https://codesandbox.io/docs/importing#import-from-github).

Pomber has a little Github history suffix for codesurfing: 

{% twitter 1092827841509707778 %}

I think this is a wonderful little user experience and encourage more people to think of creative ways to consume URLs and extend the Open Web.
Quine(s) in JavaScript
Tags: javascript, programming, tutorial
Published: 2021-02-12 19:51:11

[Quine](https://en.wikipedia.org/wiki/Quine_(computing)) is a program that takes no input but outputs a copy of its own code. Unlike other languages writing a quine in JavaScript/NodeJS is quite easy.

<br />
<br />

**Here we go!**

```Javascript
function quine() { console.log(quine.toString()) }
```

The key here is that any function in JavaScript can be converted into a string and can be printed. Also, `console.log` is not the only option, `alert` can be used too. Although it will not work in a node terminal.

**Above is a function that prints its source code but it is not a file that can be executed.** So let's add a Call statement,

```js
function quine() { console.log(quine.toString()+" quine();") } quine();
```

Note that we needed to add something extra in the log statement to achieve our goal. And `;` was probably not needed.

<br />

Let's make it a little elegant, We know that JavaScript can make a function run as soon as it is defined, By using an IIFE ([Immediately Invoked Function Expression](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)).

```javascript
( function quine() { console.log("( " + quine.toString() + " )()") } )()
```

Note that we manipulated the log statement as required.

For some more Quines in NodeJS: https://catonmat.net/quine-in-node

<br />

**Now let's take [Arrow-Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [Format-Strings](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Text_formatting) into this equation and It becomes almost eye-blindingly beautiful!**

```Javascript
($=_=>`($=${$})()`)()
```

To Understand let's remove IIFE and extra parentheses in the format-string. And also, add some spacing.

```Javascript
$    =    _    =>    `$=${$}`
```

So, the first `$` is a variable that contains an arrow function.
`_` is a random parameter for the arrow function which remains unused.
After the arrow, this is our format-string which can be divided into 2 parts, the String, "$=", and the Variable which is first `$` itself. 

<br />

**Lastly, A Quine needs to be executable but it doesn't mean that programs resulting in errors can't be a Quine. Here is an example**

```Javascript
throw 0
^
0
```

Link: https://github.com/nmrugg/quine

This program when executed as a .js file with the help of NodeJS outputs its own source code. 

How this works is, NodeJS returns an error at the first line, the rest of the code is how the error looks like.

If you make your own JS Quine or you want to share Quine in other programming languages, then please do write in the comment section.
Maze Generation in 10 mins with AFrame 
Tags: webdev, html, mixedreality, gamedev
Published: 2021-02-12 19:31:36

Quick overview and tutorial on creating a quick maze in A-Frame with the A-frame maze component

{% youtube r7pZZeeU168 %}

### GitHub Repo for A-Frame Maze component: 
{% github mitchallen/aframe-maze-component %}