Skip to content

Instantly share code, notes, and snippets.

@JessicaG
Last active January 26, 2018 18:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JessicaG/024d85342b16731c0c91cb18ddc82428 to your computer and use it in GitHub Desktop.
Save JessicaG/024d85342b16731c0c91cb18ddc82428 to your computer and use it in GitHub Desktop.
Javascript January

What even is Glitch

Some of you Javascript nerds may have heard of this thing called Glitch, rumoring around the interwebz the past year. Glitch gives power back to the user for real life examples; it’s an online IDE with the power of collaboration and community features like in GitHub. If you haven’t had a chance to work with it, I highly recommend giving it a try.

heman_power

The great thing about Glitch is the reduction in time it takes to get a code sample up and running. So many times, you've had an idea for a feature to show someone only to have to send them individual snippets of code that just do not get your point across. Then you're stuck messaging back and forth trying to find a time to screen share just so you can share what you have locally. Even then, the user doesn’t have context for what your example should look like on their computer, so maybe you send them the code base and they fork their own copy and then ah shit they’re using Yarn and you’re using NPM, their version is older than yours, or they don’t have the environment variables you have. Frustrated at having spent way too long on this already, you send them your API keys over a secure channel, but they don’t have .gitignore set up properly so your API keys accidentally get committed into a random GitHub repo. You weep. So do they. No one is having fun.

willsmith_sobbing

All that changes with Glitch. Because of its online IDE functionality, it allows other Glitch users to see your example code in real time. They can pair with you on the same code without relying on Hangouts, Zoom, Skype, JoinMe or whatever screen sharing software you are using blurring the screen out and losing the person in the process.

You can see where each user is within the project and it’s easy to collaborate, even if it’s over a messaging platform sans video.

Amazing. How did we even live before?

Glitch allows you to create unlimited projects, import existing projects from GitHub in one click, and - most fun of all - “Remix” applications. Remixing is a superb ‘clone’-like function which allows users to take what someone has built already, plug in their own keys and build on top of starter templates.

You can check out more about why Glitch was started straight from the fish’s mouth.

So now you know what Glitch is, let’s dive into a few things that help with workflow.

Working locally vs Glitch

Glitch has a lot of power getting that initial collaboration up and running but sometimes you just want a little version control and some solid emoji commit messages. The good thing is Glitch has a nice import and export function you can utilize.

glitch_import-export-gh

How you start really depends on your preference for initiating projects. You can kick it off locally and then import your project into Glitch or see what they do out of the box and then export into GitHub.

However, after this initial project commit, you’ll want to keep a few things in mind for your git workflow.

Follow a Git workflow

Glitch is keeping track of all your projects and the version under the hood, however there is currently not an option to revert back. But as developers, let’s face it, we break shit.

Following git workflow is helpful here with working with Glitch. What I mean by that is, follow the philosophy of having a clean master branch and doing all those lovely ‘wip’ commits in a branch.

Using a good git workflow can help ensure you have less breaking code while working on your Glitch app.

Clean up your branches

It it is always good rule of thumb to get rid of branches that are no longer in use or that have been merged into master already. However, this is particularly important when you are using both the import and export function with Glitch. The way Glitch handles an export into your repo is it creates a branch for you, called “Glitch”, without an option for you to change. After you export to GitHub and merge your branch into master, you'll want to git branch -D that shit. This means that if you have an old "Glitch" branch you didn’t delete, you’re going to have some duplicate code on that branch that you've already merged in mixing in with your new changes. Merge conflicts, le sigh; git remote prune origin is your friend.

Assuming you have cleaned up your branches, you can import and export at will no issues! export_glitch_to_gh

ProTip: Currently, you can only export and import from Glitch from your master branch. A way to get around this however, is you can set your project branch on GitHub as upstream to master.

GitHub GUI has a section where you can easily set your default branch to whatever you would like. BOOM! Easy as pie.

export_glitch_to_gh

Be sure to change this back when you're ready to use master again for your default import and export. 😎

Project Domain

Glitch uses a handy environment variable PROJECT_DOMAIN for all projects. This is super handy for keeping track of the dynamically changing urls when someone remixes a project. Since we don’t have that locally, we can use that as a way to identify when to use an .env file locally or when it’s on Glitch. This helps us not export variables to our bash sessions each time or take up time in our profile. I personally like to use dotenv for managing this and keeping a similar .env file locally as I have on Glitch.

I have this little snippet of code I use in my server.js to make sure things do not blow up. These notes let people who are looking at my code or remixing a project, know why I have that and also, a good reminder to me later on if I forget. 😅

// only do if not running on glitch
if (!process.env.PROJECT_DOMAIN) {
  // read environment variables (only necessary locally, not on Glitch)
  require('dotenv').config();
}

A good README

Because, documentation. As devs, we can often put this to the side. For Glitch, documentation is really important to remember because people will be searching for projects or examples based on a something they want to build. Your project may be in those results, so we want to be kind to each other (rubyist at heart), and help set up our next person for success by making it clear wtf our project actually does.

Asking for help

As I mentioned earlier, Glitch is super collaborative and has a great tool to allow users to ask for help on public projects. When you do ask for help, to ensure you get the best response, leave some comments surrounding the line you are asking for help on. When you do ask for help, your request will be shown on the homepage along with your comment/question. However, this is still a new feature and platform, so be patient if you don’t get an answer right away.

glitch_asking_help

This context within the code base is really helpful for when you’re working with developers on either mentoring or working through a problem you may have. When you highlight a line you are requesting help on, Glitch auto-tags the languages or frameworks you are using. Let's take this picture for example; I'm in my server.js file and on a function with nunjucks and express, so it was automajically tagged with js, nunjucks and express. Saaawwweeeeeeett. This is super helpful off the bat for whomever is coming to look at what you need help on. Maybe someday we'll have filtering on languages on the help homescreen so you can pick up mad js tickets. Hint hint, nudge nudge, Glitch peeps. 😉

Public vs Private

You have the option to have a public or a private project and what I like to start off with is a private project until I’m closer to finishing. This allows for anyone to not remix your code without a finished project. Keep in mind you won’t be able to request help on a private project, but you can always open it up and close it down if you’re working on some top secret release. You can also invite users to help collaborate when needed on a public or private project.

Conclusion

So, that’s it! Now you’re ready to go take over the world, one Glitch app at a time! Even if you don’t want to build something; it’s good to go help give back to the community as well. So maybe check out if anyone is asking help when you have some spare time, we can only get stronger as a community.

jess_yeah

Speaking of community, a few personal plugs!

Hello, I’m Jessica! Thanks for taking the time to read my post. 🤗 I love my job. Why? Because I get to spend my day building apps, writing about it and then traveling to speak about it. I’m a Developer Advocate at Algolia, a hosted search API. If you want to see some of things I’m building on Glitch, check out our Algolia Glitch page!

I also get the pleasure of working with Steve Kinney organizing DinosaurJS, we are on our THIRD year and I’m so pumped. If you haven’t been before, check it out, we have a good time and maybe you’ll learn a thing or two about this cool language, Javascript.

Thanks again for your time, friends. Come say hi 👋 to me on the interwebz!

@mattr-
Copy link

mattr- commented Jan 26, 2018

Weird that my previous comments are gone. Anyways, more edits:
😵 I was deleting some files that I wasn't using anymore and had a few tabs open, I think that was me. Sorry, was trying to clean things up for you.


Glitch gives power back the user for real life examples;

✅ (same!) I thought you fixed this already. ⁉️ Should be Glitch gives power back to the user


If you haven’t had a chance to work with it however, I highly recommend giving it a try.

The word however should go away here. It actually disrupts your sentence flow since the two statements aren't disjointed in any way.


So many times, you've had an idea for a feature to show someone only to have to send them individual snippets of code that just doesn't get your point across.

replace doesn't with don't here. subject/verb agreement and all that jazz.


👋 I read over this a few times and don't sounds super weird to me with the flow. Can we chat about this?

Frustrated at having spent way to long on this already,

s/to/too/


Because of it’s online IDE functionality, it allows users to see your example code in real time.

its instead of it's please. Also, let's change it allows users to it allows others or it allows other glitch users


Glitch allows you to create unlimited projects, import existing projects from GitHub in one click, and - most fun of all - “Remix” applications, a superb ‘clone’-like function which allows users to take what someone has built already, plug in their own keys and build on top of starter templates.

✅ ~~ Let's split this up. Add a period after "Remix" applications and start your new sentence with Remixing is a... ~~

Glitch allows you to create unlimited projects, import existing projects from GitHub in one click, and - most fun of all - “Remix” applications. Remixing is a superb ‘clone’-like function which allows users to take what someone has built already, plug in their own keys and build on top of starter templates.


It it is always good rule of thumb to get rid of branches that are no longer in use or that have been merged into master already (Thank you GitHub for having this part of the UI!).

Double it at the beginning of that sentence here, and a little bit of funky grammar. Something like It is always a good rule of thumb should work.

While I appreciate the shout out to the company I work for, it doesn't quite fit in here and should probably be removed.

👋 I was trying to have the point that it's part of the GiHub UI now (I guess a few years now) to delete branches after you merge them in. So, was trying to encourage users to follow best practice. Thoughts on how to reword or just remove?


That's all for now. More in the morning once I sit down for work
☕ Thanks for all your work on this.

@mattr-
Copy link

mattr- commented Jan 26, 2018

Looks great!!

:shipit:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment