teleren/devto huggingface dataset:
What would you change in Vuelidate?
Tags: vue, vuelidate, javascript
Published: 2019-10-14 20:24:37

As the saying goes, _“After the bitter comes the sweet”_, and after a while of silence, we have some good news.

Our project lead [Damian](https://twitter.com/DamianDulisz) has made some **very good progress** on rewriting the library from scratch using the new Vue Composition API, while still keeping the API relatively close to the current version of Vuelidate. This means the current, model oriented, options-based approach to declaring validations will stay as it is.

 
The time has come to ask you, the users, what do you find annoying, hard, or just missing from Vuelidate? **What would you like us to change or implement?**

The project has reached a prototyping phase, where we are open for suggestions, changing the API, to improve the experience for you, the users. 

Please leave a ticket, explaining what your idea is and your proposed change, using the RFC template in the Vuelidate Issues. The process will go for a week or two, after which we will close further submissions, go through and filter the feasible ideas.

We are very excited about the future of Vuelidate, and hope so are you!

[Link to Issues](https://github.com/vuelidate/vuelidate/issues)
[Post your Idea](https://github.com/vuelidate/vuelidate/issues/new/choose)
Nano is available!
Published: 2019-10-14 20:14:16

Download for free and start trading NANO now: http://ow.ly/xanU50wKEvk

After receiving the 112 votes Nano has been implemented now available for you to buy and sell at Monnos.


#Nano #Nanocommunity #NanoBrazil #Cryptocurrency #Monnos #BTC #ETH #USDT #Blockchain
Welcome to the Big Thread Club, Simon Holdorf. You are the latest winner of the Big Thread Badge. 🎉
Tags: meta, bigthreadbadge
Published: 2019-10-14 19:44:35

Simon Holdorf joins @yaser, @zkat, @stereobooster, @liyasthomas, @emmawedekind, @neilonsoftware, @andrewbrown, @mjraadi, @room_js, @iam_timsmith, @fullstack_to, @espoir, @helenanders26, @philnash, @florinpop17 and @lauragift21 in the club as the 17th winner of this badge.

{% user simonholdorf %}

The Big Thread Badge is awarded to the person who creates a discussion thread on the site that sparks the most collective comment love (e.g. score as determined by total ❤️ reactions and adjacent ranking factors).

This was Simon's thread:

{% link https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h %}

Entry is simple: Start a thread that is bound to spark a lot of comments. Ask the community to tell a certain kind of story and get lots of comments! Even if these threads aren't always answering _the deep questions_, they are often great for seeing what the broader community thinks of a topic and are usually a lot of fun!

Use the #discuss tag to signal that the post is a discussion thread.

{% tag discuss %}

_DEV employees are not eligible for the Big Thread Badge. 🙂_

## **Happy Coding!**
Install latest Go 1.13.1 on Fedora 30
Tags: go, fedora, snapcraft
Published: 2019-10-14 19:43:03


Go 1.13 was released just [a few weeks ago](https://blog.golang.org/go1.13) and I already need it for [a better error control](https://github.com/golang/go/wiki/ErrorValueFAQ).

I am test driving [`vim-go`](https://github.com/fatih/vim-go) for landing some changes to [`tflint`](https://github.com/wata727/tflint). Awesome `vim-go` can easily install all necessary tools for Go development with simple `:GoInstallBinaries` command, except for the `go` itself.

Fedora 30 that I use [comes with](https://apps.fedoraproject.org/packages/golang) Go 1.12 and I didn't switch to [beta 31](https://getfedora.org/) yet. The official instructions from [golang website](https://golang.org/doc/install#tarball) tell to just download and unpack tarball, set some environment variables in profile, and that seemed too burdensome. I will have to repeat that every time when I need some security updates and bugfixes. I also don't want to think about possible version conflicts when I finally switch to Fedora 31.

Instead I found out that I can install Go from [`snapcraft`](https://snapcraft.io/), which is official project by Canonical. Thanks to generous people out there, `snaps` are available for Fedora, and you can choose the Go version you need.

```shell
# install `snapd`, which is necessary to run snaps
sudo dnf install snapd
# classic snaps like `go` require some symlinking
sudo ln -s /var/lib/snapd/snap /snap
# `go` snap from will be updated automatically
sudo snap install go --channel 1.13/stable --classic
```

`sudo snap info go` reveals channels with all available versions.

```bash
$ sudo snap info go | grep stable
tracking:     1.13/stable
  stable:         1.12.10       2019-09-25 (4520) 92MB classic
  1.13/stable:    1.13.1        2019-09-25 (4517) 92MB classic
  1.12/stable:    1.12.10       2019-09-25 (4520) 92MB classic
  1.11/stable:    1.11.13       2019-08-15 (4286) 82MB classic
  1.10/stable:    1.10.8        2019-01-24 (3133) 58MB classic
  1.9/stable:     1.9.7         2018-06-13 (2117) 58MB classic
  1.8/stable:     1.8.7         2018-02-07 (1407) 51MB classic
  1.7/stable:     1.7.6         2017-06-02  (324) 48MB classic
  1.6/stable:     1.6.4         2017-05-17  (122) 49MB classic
```
Why no ColdFusion love?
Tags: cfml, coldfusion, lucee
Published: 2019-10-14 19:29:34

ColdFusion has been around longer than a lot of you have been alive.  CFML is a rich, rapid application development language with a large commercial and very active open source community.  We need a #cfml tag!

https://en.wikipedia.org/wiki/Adobe_ColdFusion
Changing Directions.
Tags: career
Published: 2019-10-14 19:23:23

I have been trying to make big changes in my life over the past year and it has been pretty wild honestly. When I was writing this time last year I was in a really weird place, I had just up and randomly quit my BIG BANK™  job without finding another one, I didn't know if I could find another one right away, honestly, I did not care, I just wanted out of that job.

I was in a dark place, despite being financially stable for the first time since I was 17 and homeless I was more suicidal than ever. It basically became all I ever thought about, that caused me to remember a video by Fun Fun Function that I had watched several months before starting to feel this way. This video honestly may have saved my life https://www.youtube.com/watch?v=BZAVtDR-SQs.

I decided to take my mental health as the highest priority as a form of self-preservation. Having already put a loaded gun to my head, it seemed like I was past the point where this was necessary. So I left my job and started living off my credit cards. This was the smartest decision I have made up until this point.

It was a slow process, but I have completely changed my outlook on life in less than one year. I can say that I am happier than ever, and now I feel like I am in a spot in my life where I can create some things I am really proud of. That will be my focus for the next year.
CSS Interview Questions Feedback
Tags: discuss, interview, css
Published: 2019-10-14 19:14:28

---
title: CSS Interview Questions Feedback
published: true
description: Summary of some CSS questions asked as part of a front-end interview process. What would you change?
tags: discussion,interview,css
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q5fnx7vl3gmgu8mcboxu.png
---

These past couple of weeks, we have been interviewing candidates for a front-end position, and -among other things- I was the person asking about styling and CSS.

So I came up with a tongue-in-cheek snippet of the CSS joke with the text "CSS is Awesome" overflowing a box:

{% codepen https://codepen.io/alvaromontoro/pen/vYYLxgX %}

The idea was to have some open questions that could be answered in a few minutes (no more than 15), and that could have different solutions to trigger a conversation and see the candidate's thought-process.

Some of the questions would be:

- How would you avoid the text overflow?
- How would you center the box on the screen?
- Could you have different colors for each line of text?
- What does `box-sizing: border-box` do?
- Do you know what the `vmin` unit represents?

So for example, if the candidate avoided the text overflow by making the box wider or changing the font size, I could add the restriction that the width and the font had to be fixed, so an alternative had to be found.

Or to the question about centering the box on the screen -one of the most popular CSS questions in StackOverflow-, if they used positioning, I could ask for a solution using FlexBox or similar.

They could change HTML and CSS, but not add JavaScript. Again, the idea was to see how they thought more than the solution in itself (there are many ways of solving each of them).

With this test, I tried to cover some major CSS features: positioning, FlexBox/Grid, transformations, box model, text properties, and some units.

----
 
This was the first time that I actually came up with an exercise like this (in the past I just asked generic questions), and since then, I decided to move to something more "practical": develop a small component and style it, which combines is not so specific to CSS but it allows testing multiple disciplines.

The thing is that I don't know how complex my original test could be considered... and that's why I come to you (thanks in advance for your help). 

If you got the questions above: 

- Would you think it is too easy or too complicated?
- Is it missing important things? (e.g. not much room for pseudo-elements)
- What would you add/remove to improve it?
Storybook for EJS
Tags: javascript, storybook
Published: 2019-10-14 18:31:28

---
title: Storybook for EJS
published: true
description: 
tags: javascript,storybook
---

This is a minimal example to use [Storybook](https://storybook.js.org/) with [EJS](https://ejs.co).


## Directory structure
```
├ .storybook
│  ├ config.js
│  └ webpack.config.js
└ src
   ├ components
   │  └ button.ejs
   └ stories
      └ button.stories.js
```

## Install package

```sh
npm install --save-dev @storybook/html babel-loader @babel/core ejs-compiled-loader
```

Edit package.json

```json
{
  "scripts": {
    "storybook": "start-storybook"
  }
}

```

## Configure Storybook

```js
// .storybook/config.js

import { configure } from '@storybook/html'

function loadStories() {
  const req = require.context('../src/stories', true, /\.stories\.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)
```

## Add EJS loader to webpack config

```js
// .storybook/webpack.config.js

const path = require('path')

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.ejs$/,
    loaders: ['ejs-compiled-loader'],
    include: path.resolve(__dirname, '../src/components')
  })

  return config
}
```

## Create component
```html
<!-- src/components/button.ejs -->
<button><%=label%></button>
```

## Create story

```js
// src/stories/button.stories.js

import { storiesOf } from '@storybook/html'
import buttonTemplate from '../components/button.ejs'

storiesOf('Button', module)
  .add('with text', () => buttonTemplate({ label: 'Button！' }))
```

## Run

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mz7tqqcb8xosudi5lu0g.png)

```sh
npm run storybook
```

final code on GitHub.
https://github.com/nishinoshake/storybook-ejs-example

## Resources
- [Storybook for HTML](https://storybook.js.org/docs/guides/guide-html/)
- [Custom Webpack Config](https://storybook.js.org/docs/configurations/custom-webpack-config/)
Swapping two numbers, w/o a temp variable
Tags: algorithms, interviewquestion, numberswap
Published: 2019-10-14 18:28:54

Todays post will be a short one, but one that covers a really simple algorithm that still might stump you in an interview setting if you don't have a background in math, or if you haven't been doing code puzzles on your spare time.

## Getting the feel of it

Let's start with the easier version, just to get a feel for the task.

*Write an algorithm that swaps two numbers.*

Ok, that is easy enough. In pseudocode:
```pseudocode
// The numbers
a = 1
b = 2

// Let's swap
c = a   // c == 1
a = b   // a == 2
b = c   // b == 1

// result
a == 2
b == 1
```

Ok, we just store the value of `a` in temporary storage `c`, set `a` to the value from `b`, and then set `b` to the former value of `a`, now found in `c`.

## Upping the ante

Let's remove the `c` from the algorithm, not allowing temporary storage...

*Write an algorithm that swaps two numbers, without using extra storage.*

Wow, that one is a bit trickier. We can't use any more storage, but we need to swap the numbers. Luckily this involves numbers, and we can leverage math to help us.

```
// The numbers
a = 1
b = 2

// lets swap
a = a + b   // 1 + 2 = 3 => a == 3, b == 2
b = a - b   // 3 - 2 = 1 => a == 3, b == 1
a = a - b   // 3 - 1 = 2 => a == 2, b == 1
```

Ok, we first set `a` to be the sum of both numbers. Then we set `b` to be the result of subtracting it from the sum, making it be the former value of `a`. Lastly we set `a` to be the result of subtracting the former value of `a`, now stored in `b`, from the sum, still stored in `a`. This results in `a` getting `b`s old value.

## Conclusion

Until I learned this trick the hard way myself in a coding quiz, I was baffled by this question, simply because I have been "trained" to think too much about variables, code, loops and other constructs, and too little in the math-department. This made me attempt to find clever ways of solving it using code, rather than the much simpler math.

I hope you can get some value from this little tip, saving you from the feeling of inadequacy that I felt. Getting stuck on quizzes like this, that are truly simple to solve, but that we tend to overcomplicate, really does not help us manage the impostor syndrome that most of us experience at times.

Good luck with your interviews!

Cheers!

-Morten
Solid state menu, Hero intro, Countdown | Module Monday 59
Tags: showdev, githunt, webdev, javascript
Published: 2019-10-14 18:15:25

---
title: Solid state menu, Hero intro, Countdown | Module Monday 59
published: true
description: Module Monday 59
tags: showdev, githunt, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1571034451/menu_ul5mg3.gif
canonical_url: https://guide.anymod.com/module-monday/59.html
---

## Free modules for any website
Open source modules to use on any website, web app, or anywhere else. There are hundreds more like these built & shared on [AnyMod](https://anymod.com).

Click a mod to see it along with its source code.

## Solid State menu
A reusable overlay menu based on the Solid State theme.
<a class="btn btn-sm" href="https://anymod.com/mod/overlay-menu-solid-state-balmoa?preview=true&lorem=true&w=768&dark=true">View mod</a>
<a href="https://anymod.com/mod/overlay-menu-solid-state-balmoa?preview=true&lorem=true&w=768&dark=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1571034451/menu_ul5mg3.gif"/>
</a>

## Hyperspace hero
Responsive intro section with an angular background
<a class="btn btn-sm" href="https://anymod.com/mod/hero-intro-section-llodob?preview=true">View mod</a>
<a href="https://anymod.com/mod/hero-intro-section-llodob?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1571034450/hero_rgi1sj.png"/>
</a>

## Countdown timer
Set the date and time, and let it count for users.
<a class="btn btn-sm" href="https://anymod.com/mod/full-screen-dark-countdown-timer-ralmrm">View mod</a>
<a href="https://anymod.com/mod/full-screen-dark-countdown-timer-ralmrm">
  <img src="https://res.cloudinary.com/component/image/upload/v1571034450/countdown_lq8kwu.gif"/>
</a>

## Hugrid gallery
Square thumbnails for showing off simple images with text.
<a class="btn btn-sm" href="https://anymod.com/mod/hugrid-grid-template-gallery-nkralm?preview=true">View mod</a>
<a href="https://anymod.com/mod/hugrid-grid-template-gallery-nkralm?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1571034450/grid-gallery_mzyqwp.png"/>
</a>

## Dismissable alert
Add a message and/or link that your users can dismiss (or not).
<a class="btn btn-sm" href="https://anymod.com/mod/dismissible-alert-lrrra?preview=true">View mod</a>
<a href="https://anymod.com/mod/dismissible-alert-lrrra?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1571034450/alert_mx7len.gif"/>
</a>

<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
What’s the biggest, most embarrassing mistake you’ve made on the job?
Tags: discuss
Published: 2019-10-14 18:14:20

---
title: What’s the biggest, most embarrassing mistake you’ve made on the job?
published: true
description: Today I erased my day job’s website. What’s your biggest, most embarrassing mistake?
tags: discuss
---

Right now I’m freaking out because I accidentally erased my entire $dayJob website. 

I’m writing this as I wait for the backups to load, fingers crossed they work as intended. 

If not, I’m terrified to be pulling an all-nighter rebuilding the site from Wayback machine. 

I know all of the mistakes I made here, and I’m not looking for advice on how to solve the problem. 

I am asking, what’s your biggest and/or most embarrassing mistake you’ve ever made on the job?
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2019-10-14 18:03:30

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Monday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

#1. Ten Tips

Chris explains Regular Expressions by way of Twitter! A surprisingly effective format to learn about regex. 

{% link https://dev.to/chrisachard/intro-to-regex-for-web-developers-2fj4 %}

#2. Framework Free

Chris shares nine frontend projects to consider working on. The projects are think about performance and accessibility, and don't require any frameworks!

{% link https://dev.to/chriscoyier/9-other-projects-you-can-do-to-become-a-front-end-master-in-2020-450l %}

#3. {...}

Gábor explains common use cases for using three consecutive dots in JavaScript. 

{% link https://dev.to/blacksonic/the-tale-of-three-dots-in-javascript-4287 %}

#4. Throwing Terms

Ananya explains frontend jargon by breaking each concept down into simple terms. You'll learn about pure functions, reactive programming, JIT, and more!

{% link https://dev.to/ananyaneogi/demystifying-modern-frontend-jargon-1agf %}


#5. Essentials Only

John shows us how much we can accomplish simply by using the DOM with pure HTML and TypeScript/JavaScript. No frameworks necessary!

{% link https://dev.to/pluralsight/vanilla-javascript-and-html-no-frameworks-no-libraries-no-problem-2n99 %}

#6. You can do it!

Beatus shares their experience with Hacktoberfest and how they finally stopped procrastinating.

{% link https://dev.to/sduduzog/ok-i-knew-contributing-to-open-source-was-fun-but-no-one-told-me-it-would-be-this-easy-satisfied-5aek %}

#7. Take a minute. 

Jason highlights some of the lesser-known features of Postgres so that you think twice before adding more scaling beyond your Postgres cluster.

{% link https://dev.to/heroku/postgres-is-underrated-it-handles-more-than-you-think-4ff3 %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Running Wordpress locally with Docker 
Tags: docker, wordpress, webdev
Published: 2019-10-14 17:54:57

I've been doing several Wordpress sites recently, and I've been using Docker to manage this on my local machine. Over time I made some improvements to the process, and I decided to share my Docker build I use that I find useful. It may not fit everyone's needs, but certainly, to get started with a local build, it works well.

### How it works 
(straight from the repo's readme)
Setup will do the following:
* Build Wordpress Docker container
* Build MySql Docker container
* Downloads the Sage template and install via composer
* Install template dependencies via Yarn
* Compiles assets via Yarn
* Install an SSL Cert
* Get the latest database from the remote (if not a new build)
* Update database paths
* Get uploads from the live site. (if not a new build)

I hope this helps. 

[Link to the repo](https://github.com/TomAstley/Docker-Wordpress-for-dev)
Painless way to detect if your Vue app is offline 😎
Tags: vue, javascript, todayilearned
Published: 2019-10-14 17:41:57


## Introduction  🎢
![](https://media1.giphy.com/media/yjos61Qgsy17q/giphy.gif?cid=790b7611786645cbf02d4e494b50cf6d5d287d753d2217b1&rid=giphy.gif)
To make it easy and practical we use [**v-offline**](https://www.npmjs.com/package/v-offline) a *npm module* to detect offline and online events for your vue app, discarding a need to handle these envents with event listener.

We use a *toast* to indicates it, for this we will install **bootstrap-vue** a npm module too, you can see more about in [documentation](https://bootstrap-vue.js.org/).


## Installs
Execute this commands to add into your Vue application:
### NPM
```bash
 npm i --save v-offline bootstrap-vue
```
### YARN
```bash
yarn add v-offline bootstrap-vue
```

## Warning that the internet has fallen
![](https://media.giphy.com/media/OOSp3kMb3IL4lE27Ar/giphy.gif)

### Let's create a component to handle this 😉

 Where we will implement **v-offline,** just import it and bind it with whatever method name I find convenient, in my case I used **handleConnectivityChange** inside Vue *methods*, returning to us **false** if is **offline** and **true** if is **online**, finally we'll show a **toast** with **bootstrap-vue** to indicates our state.
``` vue
<template>
	<div  id="app">
		<Offline @detected-condition="handleConnectivityChange">
		</Offline>
	</div>
</template>
<script>
import Vue from 'vue'
import Offline from  'v-offline'
import BootstrapVue from 'boostrap-vue'

Vue.use(BootstrapVue)

export  default {
	components: { Offline },
	mounted () {},
	methods: {
		handleConnectivityChange (status) {
			if (!status) { this.toast('b-toaster-top-full') }
		},
		toast (toaster, append  =  false) {
			this.$bvToast.toast(`Você está offline.`, {
				title:  `Conexão perdida!`,
				toaster: toaster,
				solid:  true,
				appendToast: append
			})
		}
	}
}

</script>
```

If you don't know much about Vue, I recommend the [documentation ](https://vuejs.org/v2/guide/)which is an incredible and well explanatory reference for those just starting out.

Feel free to manipulate these states as you please, for today is just, see you next time, thank you for reading 🍻.
Switching to Zsh (the new macOS default shell)
Tags: discuss, productivity, help
Published: 2019-10-14 17:18:05

With the release of macOS Catalina, the Z shell became the standard macOS shell.

I used Bash for many years, but I am willing to switch to zsh.
I already installed [Oh My Zsh](https://ohmyz.sh/) and added some aliases I used before.

Do you have any good advices or snippets which might be helpful?