search

keeganstreet / specificity.keegan.st

A web-app specificity calculator
5 stars 3 forks source link

Permalinks to Calculations #4

Open kylejrp opened 5 years ago

kylejrp commented 5 years ago

Right now it's difficult to share calculations with other people. For example, it could be useful to reference a specificity calculation in a GitHub issue discussion. Right now, it would be necessary to take a screenshot and paste that in the issue.

I think it would be interesting to have the address bar update as you type in selectors. For example, if you were comparing: .foo input

After you've typed in your selectors, the address could update to: https://specificity.keegan.st/#?item1=.foo&item2=bar

Then, if you sent a link to someone else, the initial state of the page would be initialized by reading the parameters in the address bar.

I'm not familiar with Vue, but it looks like Vue would have a way to store the state in the URL using dynamic route matching. There's an article here: https://forum.vuejs.org/t/vuex-persist-state-in-url-or/41847

Do you think this is a good idea? If so, do you accept pull requests? Again, I'm not familiar with Vue, but I'd love to take a stab at it!

keeganstreet commented 5 years ago

Hi @kylejrp, I think that's a great idea!

I don't think we need Vuex here, as the state that stores the items is all inside of app.js. Vuex is more about providing access to the state from across the app.

I think we would need two functions:

1) a function to stringify the items array and push this into the URL. This function should be run whenever the change or duplicate methods are called, so that the URL is always up-to-date with the user's input. 2) a function to read the URL and parse this into an items array. This function should be run once when the application loads.

Happy for you to have a stab at it! Maybe you can start with the first function and then show me? You don't have to completely finish everything before you ask for feedback.

kylejrp commented 5 years ago

Thanks @keeganstreet! I appreciate the insight on Vue and the difference between it and Vuex.

I'm not sure when I'll get a chance to work on this, but I'll open up a WIP pull request when I've got the first function ready to go.

forivall commented 3 years ago

I'll probably take this up some weekend. if i remember 🤞