This is a small utility project intended to be used by developers on a daily basis.
When planning this tool, I thoought about tools that I use on a daily basis and how they are scattered online in different urls. Below is a list of proposed items to be added to this project.
- Markdown Editor - To take notes
- JSON to JS Object converter
- The latest on vulnerability news and how to resolve these issues.
- etc.
On another note, this project is also intended to be a learning playground and it will be using tooling and techniques that devs may want to play with but not have the time for.
Below are these tools/techniques the project uses.
The Editor section of this app is from this article: https://frontstuff.io/using-state-machines-in-vuejs-with-xstate
The idea is to remove the need to add boolean checks in our templates and instead rely on finite state machines.
This way we can declare the only available states of a process/flow and reduce the amount of possible bugs.
Another great thing about Xstate is that it provides a visualizer, so you can see the available states for your application.
This tool allows us to visualize the application states and this can be reviewed with users before coding the feature.
There are 3 basic items each state machine needs. -An initial state -An object containing available states -Clearly defined events which will change the current state
In your components, you will have to:
- Import the state machine you have created.
- Declare the state machine and initialize the current value in your component to the initial value of the state machine.
- Setup the onTransition handler in the created hook of the component *This will update your current state when the state machine's state changes
- Add a method to send events to the State machine, which will update the current state
State being referenced with State Machines is not to be confused with the application store/state that could contain API data and is usually handled by tools such as Vuex.
npm install
npm run serve
npm run build
npm run test:unit
npm run test:e2e
npm run lint
# build image
docker build -t dev-helper-client .
# run container
docker run -it --name dev-helper \
-p 8086:80 \
dev-helper-client