How we use Glitch, GitHub, & Vercel to collaborate remotely.

William Felker — Wed, 29 Jul 2020 07:26:49 +0000

Over the past few months, our team has been working interdependently and remotely on some web projects and I wanted to share a bit about our current indie pipeline.

🛠 Glitch for development →
📂 GitHub for version control →
🌏 Vercel for hosting

Updating and publishing projects:

Here is an overview of how we publish content remotely with each other through using Glitch for development, Github for version control, and Vercel for hosting.

Head to Glitch and make any edits to the project.
Once edits are complete click tools button and then select Git, Import and Export.
If you see Connect to Github button then click it if not select Export to GitHub.
Next, enter the GitHub-account/repo-name you would like to push to in the popup and click ok.
Enter a detailed description of what you are pushing for example "Updated SEO with new branding" and click ok.
Now head on over to your GitHub repo and click Compare & pull request. If you do not see this try pushing again from Glitch.
Add additional comments and click Create pull request.
Next now.sh will check the code and if everything looks ✅ then you can click Merge pull request to push the changes to now.sh and the production or live build.
You will be asked to confirm the merge.
That's it! 🎉 Now just wait for your update to go live. If you what to check the progress head on over to your Vercel Dashboard and click on the project to see the status of the latest build.

This workflow has been great for small projects with just a few people. But in the future, we are looking at switching from Glitch to GitPod for better react-js support.

We would love to learn more about the workflows you use for your team. Please feel free to share what works best for you and your team with us in the comments or DM us on Twitter.

Tiny Factories is a tribe of indie makers helping each other to ship products. We are working toward a future where folks can be creatively independent by becoming — what we call — an indiepreneur.

Every two weeks (or so), we send out an update about our project progress. If you’d like to receive this in your inbox, you can subscribe here.

Experimenting with directNavigation()

William Felker — Wed, 22 Jul 2020 10:36:14 +0000

In an early build of are.na, you could click on the channel name to edit it. Although it was a little hard to discover this feature and it was ultimately removed. It always felt rather delightful to edit content without the need for clicking on an icon or opening an editor.

So I experimented a bit with how to apply this concept to my wiki and created a new way to navigate. If I want to change pages on my wiki, I just click the page title (which is actually an input field) and enter the page path.

That's where my experiment with directNavagation currently stands but in the future, it would be fun to try:

Adding in Search + autocomplete instead of needing to know the page paths.
Creating better cursor hover effects similar to mouse support in iPadOS.
Creating a way for this to be discovered organically.
Add a hover state which also allows you to go back to the home page.

If you have ideas about how to make the code cleaner or any next steps, please let me know. I'm always looking to get better at coding best practices. In the meantime, a demo lives on Glitch.

I have been using my wiki as a way to try out mini code experiments and have been documenting my process on futureland.

DEV Community: William Felker

How we use Glitch, GitHub, & Vercel to collaborate remotely.

Updating and publishing projects:

Experimenting with directNavigation()