profile
viewpoint
Chris Fritz chrisvfritz Durham, NC, USA https://patreon.com/chrisvuefritz Educator/engineer hybrid.

chrisvfritz/awesome-webpack 2

A curated list of awesome Webpack resources, libraries and tools

chrisvfritz/better-world-wallet-web 2

Prototype for a better way of handling donations (first for YouTube artists), then for the WOOORLD!

chrisvfritz/2048 0

A small clone of 1024 (https://play.google.com/store/apps/details?id=com.veewo.a1024)

chrisvfritz/arch 0

Web application framework for React by Red Badger

chrisvfritz/babel-plugin-transform-vue-jsx 0

babel plugin for vue 2.0 jsx

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha 7af8375f142157cc2daae3a2735ba1418605ec54

update dependencies

view details

push time in 16 days

issue closedchrisvfritz/vue-enterprise-boilerplate

Organize imports

I saw that there is an extension for eslint to automatically organize imports, allowing them to be more readable, It should be nice to have some in this project.

// 3rd party packages
import Vue from 'vue'

// Stores
import Store from '@Store'

// reusable components
import Button from '@components/Button'

// utility functions
import { add, subtract } from '@utils/calculate'

// submodules
import Intro from './Intro'
import Selector from './Selector'

closed time in 20 days

marceloavf

issue commentchrisvfritz/vue-enterprise-boilerplate

Organize imports

Just added this. 🙂

marceloavf

comment created time in 20 days

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha 509b96ee17bac3bd1d0724f86ba660d6c9e1f820

add stricter eslint import rules

view details

push time in 20 days

issue closedchrisvfritz/vue-enterprise-boilerplate

how to do ssr with this project

I have used this template project to develop a business project , spa not match the requirement , seo needed ,how to make it support ssr feather ?

closed time in 20 days

liurongwei

issue commentchrisvfritz/vue-enterprise-boilerplate

how to do ssr with this project

Thanks @danielroe for the great answer!

liurongwei

comment created time in 20 days

issue closedchrisvfritz/vue-enterprise-boilerplate

How to import font file in _fonts.scss

I tried to import font file and other ways like "@assets/font.." "~@assets/font.." screenshot

Folder: screenshot

Show error: screenshot

So how do i can import font file and use in project ? Many thanks!

closed time in 20 days

ViralS-ducha

issue commentchrisvfritz/vue-enterprise-boilerplate

How to import font file in _fonts.scss

Indeed, what @rudnovd said as documented here.

ViralS-ducha

comment created time in 20 days

issue commentchrisvfritz/vue-enterprise-boilerplate

Can you explain this file or

Thanks @joshgrib for filling in to provide more info/context though!

atilkan

comment created time in 21 days

issue closedchrisvfritz/vue-enterprise-boilerplate

Can you explain this file or

https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/2b052bac9de33712e642a6477ca73643b0d25ae1/src/state/modules/index.js#L61

I don't understand what is going on here. I am trying to make something similar but HMR only works once.

closed time in 21 days

atilkan

issue commentchrisvfritz/vue-enterprise-boilerplate

Can you explain this file or

Unfortunately, I can only make time to offer support for the HMR in this project (though I've added thorough comments to try to make the code easier to reuse). For additional help getting HMR working outside of this project, I recommend the Vue forum or chat.

atilkan

comment created time in 21 days

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha 8283a1c0c2b6228ecd3bae189193120cbb290847

fix stylelint linting in vscode

view details

push time in 22 days

PR opened vuejs/vuejs.org

Move myself from team to emeriti

Moving myself from team to emeriti now that I've resigned from the Vue team. (Full details here.)

+14 -20

0 comment

1 changed file

pr created time in a month

create barnchvuejs/vuejs.org

branch : chrisvfritz-leaving-team

created branch time in a month

startedZingabopp/BeatSync

started time in a month

startedUlisseMini/gocs

started time in a month

issue commentchrisvfritz/vue-enterprise-boilerplate

Setting custom font-sizes for h1-h6 headings

The 3rd and 5th parameters to the typography-interpolate mixin provide minimum and maximum values. This mixin is used in the typography-got-rhythm mixin to set the dynamic font sizes. In that mixin, you can see that for each level, $typography-type-scale and $typography-type-scale-contrast are used look up min and max values, respectively. So you just need to edit those values. 🙂

Does that help?

OziOcb

comment created time in 2 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Relative test with lint-staged not being found

When I change login.vue for example, and it goes to git staged, lint-staged can't find the test next to it, or lint-staged should be passing the unit test file automatically with login.vue ?

Only if I modify the .unit.js test itself to stop the commit with the error, but for that, I also have to change yarn test:unit:file to yarn test:unit --passWithNoTests --bail in lint staged config file.

Lint staged debug log

2019-10-22T13:06:53.550Z lint-staged:task cmd: git
2019-10-22T13:06:53.550Z lint-staged:task args: [ 'add', 'd:/projects/bluedesk/src/router/views/login.vue' ]
2019-10-22T13:06:53.550Z lint-staged:task execaOptions: { preferLocal: true,
  reject: false,
  shell: false,
  cwd: 'd:/projects/bluedesk' }
git add [completed]
yarn test:unit:file [started]
2019-10-22T13:06:53.588Z lint-staged:task cmd: yarn
2019-10-22T13:06:53.588Z lint-staged:task args: [ 'test:unit:file',
  'd:/projects/bluedesk/src/router/views/login.vue' ]
2019-10-22T13:06:53.588Z lint-staged:task execaOptions: { preferLocal: true, reject: false, shell: false }
yarn test:unit:file [completed]
Running tasks for *.js [completed]
yarn test:unit:file [completed]
Running tasks for *.vue [completed]
Running tasks... [completed]
2019-10-22T13:06:55.815Z lint-staged tasks were executed successfully!
Done in 7.06s.

When I run direct in bash:

$ yarn && yarn test:unit:file d:/projects/bluedesk/src/router/views/login.vue
yarn install v1.19.1
[1/5] Validating package.json...
[2/5] Resolving packages...
success Already up-to-date.
Done in 0.78s.
yarn run v1.19.1
$ yarn test:unit --bail --findRelatedTests d:/projects/bluedesk/src/router/views/login.vue
$ cross-env VUE_APP_TEST=unit vue-cli-service test:unit --bail --findRelatedTests d:/projects/bluedesk/src/router/views/login.vueer/views/login.vue
No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
No files found in D:\projects\bluedesk.
Make sure Jest's configuration does not exclude this directory.
To set up Jest, make sure a package.json file exists.
Jest Documentation: facebook.github.io/jest/docs/configuration.html
Pattern: d:\\projects\\bluedesk\\src\\router\\views\\login.vue - 0 matches
Done in 1.88s.

closed time in 2 months

marceloavf

issue closedchrisvfritz/vue-enterprise-boilerplate

Cypress & Raspberry Pi

Hey Chris, Big advocate for this boilerplate and been using for awhile on all my projects, although I am now building a conference room door display schedule and I did my normal routine, yarn install and BOOM! Cypress does not have a candidate for Raspberry processors... So I started to strip all of the cypress testing suite out and that turned sour really quick. By chance any thoughts of having a version without, or a way to use without Cypress?

closed time in 2 months

jessicakennedy1028

issue commentchrisvfritz/vue-enterprise-boilerplate

Cypress & Raspberry Pi

No plans to maintain a version without Cypress unfortunately, but here's a diff of everything that should be necessary to remove any trace of Cypress or e2e tests. 🙂

jessicakennedy1028

comment created time in 2 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Typescript version

Hi Chris. Do you plan on creating vue-enterprise-boilerplate with typescript? It would be pretty neat in my opinion since it is a perfect usecase for the enterprises nowadays.

closed time in 2 months

MartinTuroci

issue commentchrisvfritz/vue-enterprise-boilerplate

Typescript version

@MartinTuroci No plans currently. I provide some reasons here for using Babel instead of TypeScript for this project. If you prefer not to convert to TypeScript manually, you may also enjoy some of these other scaffolding/boilerplate projects, many of which do start with TypeScript.

@ffxsam It definitely is a hack using params this way. 😅 To make TypeScript happier, I just updated to use a tmp object in meta instead. It's still a hack, since meta isn't really for temporary storage either, but until Vue Router provides a nicer way of passing data around between hooks, this is probably the best we can do.

MartinTuroci

comment created time in 2 months

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha af5168374147f6347f2ca49ed87b7db5b2b62e2e

avoid misuse of params for tmp storage

view details

push time in 2 months

issue commentchrisvfritz/vue-enterprise-boilerplate

Organize imports

I'm open to this. 🙂 What extension is this? Can you show me an example of how you use it in your own projects?

marceloavf

comment created time in 2 months

issue closedchrisvfritz/vue-enterprise-boilerplate

package.json dependencies

Hi Chris

I was looking through your code (amazing job!) and came across utils/format-date.js. I see this is using the date-fns package, but this is not declared as a dependency in package.json.

It is being brought into you node-modules as a dependency of lint-staged. But I presume that as you are referring to the module directly it should be included in your package.json?

Best regards Rob Lugt

closed time in 2 months

roblugt

issue commentchrisvfritz/vue-enterprise-boilerplate

package.json dependencies

Nice catch! Fixed now. 🙂

roblugt

comment created time in 2 months

PR closed chrisvfritz/vue-enterprise-boilerplate

chore: upgrade vue-cli from v3 to v4

Vue CLI v4 comes with greatly improved Nightwatch, Jest and PWA support, as well as many other small tweaks across all the core packages.

Lots of underlying major dependencies have been upgraded:

  • core-js 3
  • Nightwatch 1.x
  • Jest 24
  • Mocha 6
  • workbox-webpack-plugin 4
  • And more.
+861 -627

1 comment

4 changed files

marceloavf

pr closed time in 2 months

pull request commentchrisvfritz/vue-enterprise-boilerplate

chore: upgrade vue-cli from v3 to v4

Thanks! I ended up going through and updating all the dependencies together, but this was a useful resource in doing that. 😊

marceloavf

comment created time in 2 months

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha ddf50ebaf409624f88b7eea38812307a8169d40d

update dependencies

view details

push time in 2 months

push eventchrisvfritz/vue-enterprise-boilerplate

LowSociety

commit sha 79c7f1cafad9a38d1a8c2410f236b0b182f0068f

Fixed matchedUser typo (#175) Instead of returning the cached user, subsequent requests always returned currentUser.

view details

push time in 2 months

PR merged chrisvfritz/vue-enterprise-boilerplate

Fixed matchedUser typo

Instead of returning the cached user, subsequent requests always returned currentUser.

+1 -1

0 comment

1 changed file

LowSociety

pr closed time in 2 months

push eventchrisvfritz/vue-enterprise-boilerplate

Tiago Pina

commit sha 0fd571e002c036fb02484e68f97ccfa055e75aec

Adding VuePress section to documentation (#180)

view details

push time in 2 months

PR merged chrisvfritz/vue-enterprise-boilerplate

Adding VuePress section to documentation

Adding the VuePress section to the docs

+5 -0

0 comment

1 changed file

tpina

pr closed time in 2 months

push eventchrisvfritz/vue-enterprise-boilerplate

EgorFront

commit sha 4eedeb540471e046edc3d9470fab24b4dad8caab

Fix problem with Jest and .vue files for lint-stage (#182)

view details

push time in 2 months

PR merged chrisvfritz/vue-enterprise-boilerplate

Fix problem with Jest and .vue files for lint-stage

The problem: https://github.com/chrisvfritz/vue-enterprise-boilerplate/issues/179

In the configuration jest.config.js the moduleFileExtensions field does not contain .vue extensions. Because of this, when you run yarn test:unit:file path/to/component.vue Jest did not find the test file associated with the component. So same, under commit only .Vue component without changes associated with it the test file, Jest did not run the test

module.exports = {
  ...
  moduleFileExtensions: ['js', 'json'],
}

The solution: Add .vue extension to moduleFileExtensions

module.exports = {
  ...
  moduleFileExtensions: ['js', 'json', 'vue'],
}
+1 -1

0 comment

1 changed file

EgorFront

pr closed time in 2 months

pull request commentvuejs/vue-next

Rename createComponent to defineComponent

@CyberAP That's true! Googling component would be pretty difficult.

chrisvfritz

comment created time in 2 months

pull request commentvuejs/vue-next

Rename createComponent to defineComponent

I'm good with withComponentAnnotations - or perhaps preferably, annotateComponent - as an alternative, since it also gives us a pattern we can follow for type annotation functions like this. The only reason I still like define better is annotate is harder to spell, especially for our international users.

I worry that component would be even worse than createComponent because coming from Vue 2, most people would probably expect it to do the same thing as Vue.component. It also doesn't provide a pattern to hint to users that it's just for typings. Plus, it works very differently from other verb-less functions like reactive, ref, computed, etc.

chrisvfritz

comment created time in 2 months

PR opened vuejs/vue-next

Rename createComponent to defineComponent

I think "define" is more accurate than "create" in this case, since nothing is really being created per se - the function just returns the same object. But it is useful for defining a component, to get better typings.

I think it would also be helpful to reserve the "define" prefix (or some other verb) for any future functions that only exist for typings, to help differentiate them from functions that create a new instance of something.

Thoughts?

+74 -74

0 comment

18 changed files

pr created time in 2 months

delete branch vuejs/vue-next

delete branch : rename-create-component

delete time in 2 months

create barnchchrisvfritz/vue-next

branch : rename-create-component

created branch time in 2 months

create barnchvuejs/vue-next

branch : rename-create-component

created branch time in 2 months

push eventthevuepoint/website

Chris Fritz

commit sha a45afeae32a295a609c22eeb16f247acc0780c6d

add honeypot field to prevent spam on contact form

view details

push time in 3 months

push eventchrisvfritz/vue-enterprise-slides

Chris Fritz

commit sha 06db23541006c43dc664fed72ec2dbe2d24a8b66

fix typo in Choose Your Base

view details

push time in 3 months

create barnchchrisvfritz/vue-enterprise-slides

branch : master

created branch time in 3 months

created repositorychrisvfritz/vue-enterprise-slides

created time in 3 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1551762024954

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : Justineo-patch-1

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1556284723957

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1557032424526

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1557923604600

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1559860753113

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1560240004980

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1561136853084

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1562302827892

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1562526542853

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1564323583917

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1567528250171

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1568923980158

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1569346044933

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1569938534358

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1569958268474

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1570261827666

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1571083982755

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : patreon-update-1571840080419

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : chrisvfritz/list-key-clarification

delete time in 4 months

delete branch vuejs/vuejs.org

delete branch : chrisvfritz/security-guide

delete time in 4 months

push eventvuejs/vuejs.org

Chris Fritz

commit sha a031e11ba2af6a4a20c96f720152fb17bca3fd47

Security guide (#1760) * first draft of security guide * add note about ssr * add vulnerability reporting email and minor security tweaks * add final notes from security feedback

view details

push time in 4 months

PR merged vuejs/vuejs.org

Security guide
+172 -0

9 comments

1 changed file

chrisvfritz

pr closed time in 4 months

push eventvuejs/vuejs.org

Chris Fritz

commit sha 5332d79967d42a1a391a19be34e9e5559dff9da7

add final notes from security feedback

view details

push time in 4 months

delete branch vuejs/vuejs.org

delete branch : writing-guide

delete time in 4 months

push eventvuejs/vuejs.org

Chris Fritz

commit sha 2932a108a5ac56d78e747ab99544208fe6f60908

Vue Docs Writing Guide (#2317) * add vue docs writing guide * add note about emoji to writing guide * add note about invalidating language to writing guide * add note about blending tips into content in writing guide * capitalize Oxford in writing guide * reword feature discussions note in writing guide * clarify 'supported environment' in writing guide * add software resources to writing guide * clarify language in writing guide * clarify language in writing guide Co-Authored-By: Natalia Tepluhina <NataliaTepluhina@users.noreply.github.com> * pull oxford comma image into repo * add note about allowing abbreviation symbols on keyboards

view details

push time in 4 months

PR merged vuejs/vuejs.org

Vue Docs Writing Guide

This is a writing guide that the docs team has worked together to develop, to help provide rules and recommendations to ourselves and contributors for writing and maintaining docs across the Vue ecosystem.

+109 -9

0 comment

3 changed files

chrisvfritz

pr closed time in 4 months

pull request commentvuejs/vuejs.org

added Spanish option to dropdown menu

Great, then I think we just have to resolve conflicts before merging @Davidcreador. 🙂

Davidcreador

comment created time in 4 months

issue commentchrisvfritz/vue-enterprise-boilerplate

(Question) Vuex modules structure

I just made an update so that both styles will just work. 🙂

zaken

comment created time in 4 months

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha 2b052bac9de33712e642a6477ca73643b0d25ae1

make vuex module registration work for default exports

view details

push time in 4 months

IssuesEvent

issue commentchrisvfritz/vue-enterprise-boilerplate

Prevent layout component re-rendering

@dnewkerk Hopefully you've solved the issue on your own by now, but you may want $route.path in that case rather than $route.fullPath (see the Vue Router docs for the difference).

Also, I'm reopening this as I'm thinking about updating the routing strategy to something along these lines, as I've had a number of projects that have needed this kind of strategy and am thinking there might be more advantages than disadvantages for most projects.

ma53

comment created time in 4 months

issue commentchrisvfritz/vue-enterprise-boilerplate

fonts support

As noted in those docs, you're missing an ~ before @assets.

engblh

comment created time in 4 months

issue commentchrisvfritz/vue-enterprise-boilerplate

Unit tests fail (without changes to repo)

@bmillspaugh I wasn't able to reproduce the issue and haven't seen it reported again since, so hopefully this was a temporary regression solved in a patch update. For anyone that may want to temporarily disable unit tests in the future, you can do by adding a # at the beginning of the values of the following scripts in package.json: test:unit, test:unit:file, and test:unit:ci. That comments them out, essentially making them a noop.

mix3d

comment created time in 4 months

issue commentvuejs/vetur

Option to disable Vetur's snippets

Out of curiosity, why were strings that are either empty/non-empty with emoji defaults used for these settings, instead of booleans that are either true or false? 😄 I got this question in a workshop recently and I didn't know the answer.

chrisvfritz

comment created time in 4 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Guidance on `*.vue` tooling autofix config : prettier + eslint + .vscode/settings.json

Hey @chrisvfritz I'm a big fan of this project thank you!

I successfully used VEB for a project earlier this year, but trying to set it up from scratch again I've been having a hell of a time setting up vscode to format SFC *.vue files on save using the .eslintrc.js settings.

I have it working using the basic formatting with: "vetur.format.defaultFormatter.html": "prettier", added to my vscode settings.json but its not ideal, as it doesn't respect settings like PascalCase that I need for linting purposes.

I have the Vetur and Prettier extensions installed (tried this all with them disabled too), but after spending much of this Saturday trying every combination I could think of, I'm not sure which file to edit to ensure vscode will play nice and format according to the VEB ESlint settings.

Any tips or gotchas to lookout for? Thanks.

closed time in 4 months

madebycaliper

issue commentchrisvfritz/vue-enterprise-boilerplate

Guidance on `*.vue` tooling autofix config : prettier + eslint + .vscode/settings.json

Closing for now, but happy to reopen if the last tip didn't help or someone else encounters the same issue. 🙂

madebycaliper

comment created time in 4 months

issue commentchrisvfritz/vue-enterprise-boilerplate

Cypress Error when running `yarn test`

Closing for now, but open to reopening if someone is able to reproduce this. 🙂

JackEdwardLyons

comment created time in 4 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Cypress Error when running `yarn test`

I'm sure there's a super simple fix to this, but can you please explain why when I run npm test / yarn test I get this Cypress error? I've tried "booting" my server before, but still the error occurs. What steps do I need to take to resolve this? Do I need to explicitly set the baseUrl in an .env file or sth like that?

Cypress could not verify that the server set as your `baseUrl` is running:

  > http://localhost:8080/

Your tests likely make requests to this `baseUrl` and these tests will fail if you don't boot your server.

Please start this server and then run Cypress again.

Thanks in advance!

closed time in 4 months

JackEdwardLyons

issue closedchrisvfritz/vue-enterprise-boilerplate

(Discussion) -- Best way to implement new feature with all tests

Hi, awesome boilerplate, I love it. And am busy using it to build my next application.

I would like to discuss with anybody that is interested the best way to implement the mock API for new features.

Example: I want to register a user. What are some of the ways that we could use this boilerplate to create a new user in the mock API to create a new user and build unit tests for this. I think more of a general best practice tutorial would be awesome

closed time in 4 months

devingray

issue commentchrisvfritz/vue-enterprise-boilerplate

(Discussion) -- Best way to implement new feature with all tests

Closing for now, but open to reopening if further discussion is needed. 🙂

devingray

comment created time in 4 months

pull request commentvuejs/vuejs.org

added Spanish option to dropdown menu

@Davidcreador Your PR looks great! 😊 We just want to make sure the Algolia search is working before we merge, thereby officially "publishing" the Spanish translation. That work is being done by @alphacentauri82 in another repo which deploys to es.vuejs.org.

Davidcreador

comment created time in 4 months

Pull request review commentvuejs/vuejs.org

Vue Docs Writing Guide

+# Vue Docs Writing Guide++Writing documentation is an exercise in empathy. We're not describing an objective reality - the source code already does that. Our job is to help shape the relationship between users and the Vue ecosystem. This ever-evolving guide provides some rules and recommendations on how to do that consistently within the Vue ecosystem.++## Principles++- **A feature doesn't exist until it's well documented.**+- **Respect users' cognitive capacity (i.e. brain power).** When a user starts reading, they begin with a certain amount of limited brain power and when they run out, they stop learning.+  - Cognitive capacity is **depleted faster** by complex sentences, having to learn more than one concept at a time, and abstract examples that don't directly relate to a user's work.+  - Cognitive capacity is **depleted more slowly** when we help them feel consistently smart, powerful, and curious. Breaking things down into digestible pieces and minding the flow of the document can help keep them in this state.+- **Always try to see from the user's perspective.** When we understand something thoroughly, it becomes obvious to us. This is called _the curse of knowledge_. In order to write good documentation, try to remember what you first needed to know when learning this concept. What jargon did you need to learn? What did you misunderstand? What took a long time to really grasp? Good documentation meets users where they are. It can be helpful to practice explaining the concept to people in person before+- **Describe the _problem_ first, then the solution.** Before showing how a feature works, it's important to explain why it exists. Otherwise, users won't have the context to know if this information is important to them (is it a problem they experience?) or what prior knowledge/experience to connect it to.+- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid they might be "dumb". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.+- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions at this stage (again, especially the questions we're afraid are "dumb") often help reveal potential confusions, inconsistencies, and problematic behavior before it would require a breaking change to fix.++## Organization++- **Installation/Integration**: Provide a thorough overview of how to integrate the software into as many different kinds of projects as necessary.+- **Introduction/Getting Started**:+  - Provide a less than 10 minute overview of the problems the project solves and why it exists.+  - Provide a less than 30 minute overview of the problems the project solves and how, including when and why to use the project and some simple code examples. At the end, link to both to Installation page and the beginning of the Essentials Guide.+- **Guide**: Make users feel smart, powerful, and curious, then maintain this state so that users maintain the motivation and cognitive capacity to keep learning more. Guide pages are meant to be read sequentially, so should generally be ordered from the highest to lowest power/effort ratio.+  - **Essentials**: It should take no longer than 5 hours to read the Essentials, though shorter is better. Its goal is to provide the 20% of knowledge that will help users handle 80% of use cases. It can link to more advanced guides and the API, though these should be avoided in most cases and when provided, context should be provided so that users know they should  follow that link on their first reading. Otherwise, many users end up exhausting their cognitive capacity link-hopping, trying to fully learn every aspect of a feature before moving on, and as a result, never finish that first read-through of the Essentials. Remember that a smooth read is more important than being thorough. We want to give people the information they need to avoid a frustrating experience, but they can always come back and read further, or Google a less common problem when they encounter it.+  - **Advanced**: While the Essentials helps people handle ~80% of use cases, subsequent guides help get users to 95% of use cases, plus more detailed information on non-essential features (e.g. transitions, animations), more complex convenience features (e.g. mixins, custom directives), and dev experience improvements (e.g. JSX, plugins). The final 5% of use cases that are more niche, complex, and/or prone to abuse will be left to the cookbook and API reference, which can be linked to from these advanced guides.+- **Reference/API**: Provide a complete list of features, including type information, descriptions of the problem each solves, examples of every combination of options, and links to guides, cookbook recipes, and other internal resources providing more detail. Unlike other pages, this one is not meant to be read top-to-bottom, so plenty of detail can be provided. These references must also be more easily skimmable than the guides, so the format should be closer to dictionary entries than the story-telling format of the guides.+- **Migrations**:+  - **Versions**: When important changes are made, it's useful to include a full list of changes, including a detailed explanation of why the change was made and how to migrate their projects.+  - **From other projects**: How does this software compare to similar software? This is important to help users understand what additional problems we might solve or create for them, and to what extent they can transfer knowledge they already have.+- **Style Guide**: There are necessarily some key pieces in development that need a decision, but are not core to the API. The style guide provides educated, opinionated recommendations to help guide these decisions. They shouldn't be followed blindly, but can help teams save time by being aligned on smaller details.+- **Cookbook**: Recipes in the cookbook are written with some assumption of familiarity with Vue and its ecosystem. Each is a highly structured document that walks through some common implementation details that a Vue dev might encounter.++## Writing & Grammar++### Style++- **Headings should describe problems**, not solutions. For example, a less effective heading might be "Using props", because it describes a solution. A better heading might be "Passing Data to Child Components with Props", because it provides the context of the problem props solve. Users won't really start paying attention to the explanation of a feature until they have some idea of why/when they'd use it.+- **When you assume knowledge, declare it** at the beginning and link to resources for less common knowledge that you're assuming.+- **Introduce only one new concept at a time whenever possible** (including both text and code examples). Even if many people are able to understand when you introduce more than one, there are also many who will become lost - and even those who don't become lost will have depleted more of their cognitive capacity.+- **Don't litter the document with tips and caveats.** If you find that more than two tips are needed per page, consider adding a caveats section to address these issues. The guide is meant to be read straight through, and tips and caveats can be overwhelming or distracting to someone trying to understand the base concepts.+- **Avoid appeals to authority** (e.g. "you should do X, because that's a best practice" or "X is best because it gives you full separation of concerns"). Instead, demonstrate with examples the specific human problems caused and/or solved by a pattern.+- **When deciding what to teach first, think of what knowledge will provide the best power/effort ratio.** That means teaching whatever will help users solve the greatest pains or greatest number of problems, with the relatively least effort to learn. This helps learners feel smart, powerful, and curious, so their cognitive capacity will drain more slowly.+- **Unless the context assumes a string template or build system, only write code that works in any supported environment.**+- **Show, don't tell.** For example, "To use Vue on a page, you can add this to your HTML" (then show the script tag), instead of "To use Vue on a page, you can add a script element with a src attribute, the value of which should be a link to Vue's compiled source".+- **Almost always avoid humor (for English docs)**, especially sarcasm and pop culture references, as it doesn't translate well across cultures.+- **Never assume a more advanced context than you have to.**+- **In most cases, prefer links between sections of the docs over repeating the same content in multiple sections.** Some repetition in content is unavoidable and even essential for learning. However, too much repetition also makes the docs more difficult to maintain, because a change in the API will require changes in many places and it's easy to miss something. This is a difficult balance to strike.+- **Specific is better than generic.** For example, a `<BlogPost>` component example is better than `<ComponentA>`.+- **Relatable is better than obscure.** For example, a `<BlogPost>` component example is better than `<CurrencyExchangeSettings>`.+- **Be emotionally relevant.** Explanations and examples that relate to something people have experience with and care about will always be more effective.++### Grammar++- **Avoid abbreviations** in writing and code examples (e.g. `attribute` is better than `attr`, `message` is better than `msg`), unless you are specifically referencing an abbreviation in an API (e.g. `$attrs`).+- **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`).+- **Use the oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). ![Why the oxford comma is important](https://www.inkonhand.com/wp-content/uploads/2015/10/serialimage.jpg)+- **When referencing the name of a project, prioritize the broader conventions of English over internal branding conventions of that project.** For example, "webpack" and "npm" both disregard conventions such as "always start a word at the beginning of a sentence with a capital letter", "project names always use Title Case", and "acronyms are always capitalized". Instead, always write "Webpack and NPM" to provide a more consistent experience in the docs and avoid sentences like "If you don't want to use Vue CLI, you can use webpack or Rollup directly by installing them via npm or Yarn".

Yeah, I don't mind if that's what the majority of the docs team prefers, though I think I'm still missing what the advantage would be. Even for entities with trademarks, like "npm", using the trademark as a noun rather than an adjective is already a violation (and one with greater risk of doing actual harm from my understanding, as that's what brought trademarks such as Kleenex and Xerox under threat). And I of course agree to updating in the case that we receive a cease and desist, but I still haven't heard any advantage to complying with mere requests. 🤷‍♂️

chrisvfritz

comment created time in 4 months

pull request commentvuejs/vuejs.org

added Spanish option to dropdown menu

I gave the Algolia key to Diana - we just touched base again and she's working on the search now.

Davidcreador

comment created time in 5 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Assert a Vuex Action Calls a Mutation

In some of the vuex module unit tests, when an action is tested, an assertion is run on store.state

Would it be better to assert that the action calls the correct mutator? Otherwise the action unit tests are testing too much (they are also testing that the mutations behave correctly).

Additionally, i ran into an issue where someone had modified the state directly in an action. I thought vue warned against this, but turns out the warning doesnt appear during unit tests. Testing that an action calls a mutation would mitigate against accidentally modifying the state directly in the action.

closed time in 5 months

GazEdge

issue commentchrisvfritz/vue-enterprise-boilerplate

Assert a Vuex Action Calls a Mutation

I just updated Jest to fail on state mutations outside of mutations - and also any other time console.error or console.warn is called. However, I decided not to assert that the correct mutator is called, for a few reasons:

  • Mocking mutations and checking for calls adds complexity to the tests for relatively little benefit and mutations may be called multiple times before settling on a final value, making tests brittle from asserting what's arguably an internal implementation detail of the action.
  • In practice, updating a mutation often means also updating the actions that call that mutation, so there's some inherent coupling.
  • When mutations are extremely simple (which is most of the time), they arguably don't merit their own tests, but leaving mutations unmocked and just checking for the correct state allows us to still provide coverage for them.
  • In the next major version of Vuex, mutations will become an internal implementation detail, allowing actions to change state directly while still getting great logs in the devtools. That means in the future, we'll have to write tests like this anyway. Doing it now means migrating tests will be much simpler when upgrading Vuex.
GazEdge

comment created time in 5 months

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha cecb13ed1dc8f6f806660657029ecff6aaf86fe8

add instructions for whitelisting console.error/warn messages in jest

view details

push time in 5 months

push eventchrisvfritz/vue-enterprise-boilerplate

Chris Fritz

commit sha 68b5137d8406cb0580e94dbfd6565c6b63f6030e

upgrade jest and force console.error/warn to fail tests

view details

push time in 5 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Sockjs keeps sending request to local middleware API

Hello,

First, I'd like to thank you guys for this awesome boilerplate :)

I have not found any related issues in this repo so I'm writing to submit one.

We have a node middleware locally running on port 4545 that communicates to db. When running the client application with API_BASE_URL var, I noticed that sockjs keeps sending get requests to the middleware (presumably). For instance,

190524/163146.835, (1558715506835:Xxxxx-MacBook-Pro.local:3062:jw2aasrx:10059) [response] http://localhost:4545: get /sockjs-node/237/jahszuog/websocket {} 404 (1ms)

And of course, it returns 404 since there's no route for /sockjs-node. It does not seem to break anything, but I'd like to get to the bottom of this so I can get rid of these error messages or let the MW dev know what to do.

I'm not an expert with sockjs library, any help or guidance would be greatly appreciated!

closed time in 5 months

yoobi55

issue commentchrisvfritz/vue-enterprise-boilerplate

Sockjs keeps sending request to local middleware API

I'm going to close this as a niche mystery case for now, as I'm still unable to reproduce it. Happy to reopen if more people report they're affected.

yoobi55

comment created time in 5 months

issue closedchrisvfritz/vue-enterprise-boilerplate

Cannot mock functions inside the mounting step in unit tests.

First, thank you so much for this boilerplate. I've used a number of starting point projects for Vue apps in the past and this is by far the best. Now, on to my question...

I'm not certain if this is related to your specific configuration or more related to Jest or Vue Test Utils but I figured I'd start here.

With regards to mocking functions inside a component, if I try to stub out methods on my component as part of the shallow mounting step, e.g.:

function mountComponent() {
  return shallowMountView(Component, {
     methods: {
       getFoo: jest.fn()
     }
  })
}

And write a test like:

 it('Gets foo on initialization', async () => {
    const { vm } = mountComponent()

    await vm.onLoad()
    expect(vm.getFoo.mock.calls.length).toBe(1)
  })

I get an error of Cannot read property 'calls' of undefined on the 'expect' line.

To be clear the 'onLoad()' is not a vue lifecycle hook but a callback when a child component inside 'Component' is ready. Specifically in my use case this is 'onMapLoad' for mapbox-gl. The 'onLoad' method simply calls 'getFoo' inside the component.

    async onLoad() {
      await this.getFoo()
    }

I can get this scenario to work by removing the mock function from the mount and mocking it directly in the test like so:

  it('Gets foo on initialization'', async () => {
    const { vm } = mountComponent()

    vm.getFoo = jest.fn()

    await vm.onLoad()
    expect(vm.getFoo.mock.calls.length).toBe(1)
  })

function mountComponent() {
  return shallowMountView(Component)
}

But given that this function is called on initialization it needs to be mocked for almost every test, so you can see why I'd prefer to mock it during the mounting step. I'm probably doing something just ever-so-slightly wrong. Any ideas?

closed time in 5 months

aaroncoville

issue closedchrisvfritz/vue-enterprise-boilerplate

Support for Docker

Hi all,

I believe it would add great value to the project if Docker was supported on vue-enterprise-boilerplate. This issue intends to raise an open discussion on adding general Docker technology to enterprise-level projects such as this one.

How:

  1. We could start by building a Docker image to the application itself with a simple Dockerfile.
  2. Then, we could decouple E2E testing execution by building an isolated image for it, and managing services by configuring a docker-compose.yml file (that of course would be in later iterations...).

Benefits of the proposed feature to the project:

  1. Homogeneous environment during deployment
  2. Flexibility on configuration for different environments
  3. Ephemeral nature of containers makes it easy to restart/remove in case something goes wrong
  4. Brainstorm more ideas... [WIP]

Please comment any restrictions that needs to be taken into account when implementing this feature.

If the discussion goes well and it's welcomed by maintainers and the community I'd be happy to send a PR for revision. :ship: :package: :man_technologist:

Feedback appreciated

closed time in 5 months

matheuseabra

issue closedchrisvfritz/vue-enterprise-boilerplate

Nested modules example

Hi. I really appreciate if you can show me a nested module example. Because of the dynamic module registration, it became a little confusing to me.

closed time in 5 months

MaickellVilela
more