"Hacky" Version Control Workaround

Community Share Code and Components
1

Hey SiteJetters!

:warning:Tired of clients asking to “put that thing back we had 5 months ago”? Meeee too.

I wanted to share a strategy I use for my own version control" in SiteJet. Getting in the habit of doing this will help you in the long run and save you tons of time and headaches.

:x: The Problem:

Clients, or you, want to reinstate content from a long time ago. For example, they may go through months of feedback after deleting an element in feedback prior. You designed a certain few elements, and they struck them and went with another. Then, their CEO gives feedback and says he wants it the first way. Without a mini-version control, you’ll have to spend all that time redesigning the component you made. Maybe it’s easy, maybe it’s hard - but it’s still wasting your time.

:white_check_mark: Solution:

  • At the beginning of every project, create a page called “Dev”
  • Check No-index to keep it hidden from search engines
  • Uncheck the menu navigation checkbox (irrelevant if you use non-autogenerated menus)
  • Set a password (so if anyone accidentally lands on it, they get the password page instead)
  • Use this page as a holding tank for all “scrapped” elements from the site during development.
  • Simply cut/paste components/elements you would have deleted otherwise to the Dev Page
  • Use containers with default width and padding to easily section off different components visually
  • Just paste your component in a new, distinct container
  • Alternate subtle different background colors (i.e. #fff and #eee) of the containers to help visually identify the breaks of components stored on the page
  • Use headlines/text in each container, above the pasted component, to identify pages, context and reason for the element being scrapped (this makes it easier to remember later)
  • If youre scrapping presets: Make sure to change the preset class of the scrapped preset component to something like …preset-[my-preset-class-scrapped] or something like that. This ensures you don’t accidentally adjust that preset whilst editing a new one, or vice versa. If you reinstate that component later, simply create a new preset class, and open the CSS to delete the old preset instance. This keeps your CSS clean from unused code.

:warning: By doing this, I have saved so many headaches of “can you put that first thing back” when the “First thing” was designed and scrapped weeks/months ago. You can keep the Dev Page during deployment if you like - I usually leave it for a while until I know the components are fully replaced and confirmed, then clean it out for posterity.

This may not be the best practice, but I hope it helps someone! Does anyone else have ideas for this topic?

Cheers!
-Zach, Hybrid Designer/Developer from VMD

5 Likes
2

@zachary :heart_eyes: thank you for sharing this with the community. The next beer is on me!

1 Like
3

Thanks for the tip Zach - very useful indeed!
kind regards
Mark

PS I join Martin: :beers:

3 Likes
4

Yeah, I have also a storage page in many projects for the same reason.

And if you heavily redesign a project just make it a template or clone the project before, so you can go back to the original one easily.

Thanks, Zack for sharing this clever hack with the community:)

3 Likes
5

That is just beautiful @zachary! :pray::heart: Thank you so much for that input and the time you took to write it down! This is me at a bar, waving to you:

image

6

I do it pretty much the same way. Probably not that well organized;-)
And yes, it saves a lot of time and effort.