My story of interacting with glitch.com began not so long ago, but in this short time, I really love🄰 this coolly invented service. So, in this article, I wrote the story of my experience with glitch UI.

This project is developed and supported by theĀ FogCreekĀ team led byĀ Joel Spolsky, who co-founded services such asĀ TrelloĀ andĀ StackOverflow. Here is hisĀ blog.

This story has two parts:

  • The first part (current) will discuss Glitch.com itself and its features and benefits.
  • In the second part, the experience of delivering your node.js application to glitch.com will be described in a non-standard way:
Image.

In fact, this is actually a remote workstation, with the ability to edit code, add files, and the ability to execute necessary commands in the console.

And this service stands out with its unusual and cool design. It mainly focuses onĀ node.jsĀ and static pages. So this is just a paradise for aĀ JavaScriptĀ developer.

At the first visit, we are greeted by the main page, which is decorated very funny.

Glitch.com Home Page in 2019.

The following authentication types are supported:

  • Facebook
  • GitHub
  • Google
  • And regular login with e-mail and password.
  • And there is an inconspicuous button at the bottom ā€œUse a sign-in codeā€
Sign up to Glitch.

Which way to choose is up to you. For the developer, of course, it is more convenient to use the input through GitHub.

In general, this service impressed me with the fact that it provides enough resources for your web application, and the console most impressed me. And now let’s talk about the important components of this service.

About UI

After entering your account, if your projects are available, a list is displayed from which you can immediately select a project. The rest of the information about the work of other people is below. It is very convenient and does not force you to make unnecessary actions.

UI on Glitch.com.

You can click on your project and then a preview is shown to you.

You can immediately click on the buttons:

  • Edit Project —in order to open a convenient and simple IDE in the browser, which can reboot after you make changes.
  • Show — to open the project in a separate window for viewing, as if you were users.

This is how theĀ mad-fake-slackĀ application looks like for example — if I click on Show.

This is How the Mad-Fake-Slack Application Looks Like on Glitch.com.
This is How the Mad-Fake-Slack Application Looks Like on Glitch.com.

This is how the mad-fake-slack application launched on glitch.com looks like.

Well, if I click onĀ Edit Project, then I get into a mini improvisedĀ IDE. It is very convenient for quickly fixing problems in the browser.

IDE View for Your Project.

IDE view for your project

IDE Features

  • View file contents
  • Upload files
  • Creating files nested in folders by specifying not only the name of the file but also the path
  • Delete files
  • To load resources, there is a special folder called ā€œassetsā€, which is logical. It can serve as a transshipment base — a kind of file exchanger. Next, you will see how you can take this opportunity
  • Reaction to changes gives you the opportunity to see how they affect the UI of your web application
IDE Features.
  • Very convenient notification of new packages for your dependencies
This is How Convenient Notification of New Versions of Packages Comes in.

This is how convenient notification of new versions of packages comes in.

There are also disadvantages in the IDE, but they are easily bypassed through the console. In the IDE, you cannot load a binary file such as a picture or font directly into the desired folder, all downloaded files will be placed in the ā€œassetsā€ folder. But as I said, this is not a problem.

Metrics available at IDE

How about metrics. They are very important since all your web products run in the container. And I will tell you honestly, they really saved me, becauseĀ node.jsĀ library forĀ @slack/rtm-apigets crazy if it tries to connect to address that is not listened by any service, which leads to processor loading atĀ 80%. I think it would be difficult to notice if there were no container status.

This is how the container status looks in the interface:

Container Status.

It is hidden in the Tools menu and does not bother you, but as soon as something goes wrong, you will receive a notification directly in the IDE. By clicking on Container Status, you will see the following section:

Container Status.

Here in real-time metrics are displayed:

  • CPU utilization
  • Memory usage
  • Disk space usage

In principle, everything is very convenient. Well, now let’s talk about the features of the console.

Console features

You can go to the console from the Tools menu by clicking on the ā€œFull Page Console ->ā€ item.

Menu Item to Go to the Console.

Menu item to go to the console


And it is a black page with valuable tips and capabilities of the native console.

That’s How the Console Meets Us.

That’s how the console meets us

What can this console do?

  • Respond to the standard carriage return commandsĀ Ctrl-EĀ andĀ Ctrl-AĀ to move to the end and beginning of the line. Very comfortably!
  • You can startĀ htopĀ andĀ topĀ and close them by standard pressing theĀ qĀ key
Running `htop` in Console.

Running `htop` in console

  • TheĀ clearĀ command clears the console screen. Also, a very comfortable feature.
  • curlĀ andĀ wgetĀ are installed and available on the system.
Very Useful `curl` and `wget` Tools.

Very useful curl and wget tools

  • You can also see theĀ envĀ that are installed in the docker
Without Problems, You Can See What is Happening in the Environment Variables.

Without problems, you can see what is happening in the environment variables.

  • In general, we can say that this is a full-fledged console, with a set of shortcuts, which I really liked! In this case, all statuses, when usingĀ wgetĀ andĀ curl, work fine. You can see the progress and you are in the know of the full picture.
  • All changes made in the console will not be immediately applied for logical reasons. This approach gives you the opportunity to think, understand your changes, and when you are ready, just type theĀ refreshĀ command in the console and pressĀ Enter. Your changes will be applied immediately and the UI will reboot. In the IDE you will see files or changes made in the console.

Conclusion

The capabilities of the service impress with its simplicity and the ability to perform deployment and make changes for the least number of actions. A full-featured console in a web browser is also a very cool feature, which pleases not only with the high-quality display of data but also with an abundance of default tools, which helps you to easily perform the actions necessary to deploy the application inside the docker.

See you in theĀ second part!

Custom Software and Mobile App Development.
How to migrate from Vue 2 to VueĀ 3?

Migrating From Vue 2 to Vue 3 with Vue Composition API

Migrating From Vue 2 to Vue 3 with...

Migrating From Vue 2 to Vue 3 with Vue Composition API

As we know, the official release of Vue 3 was on September 18, 2020, it’s been almost a year, and I think it’s time to move on to it. Buuuut… it’s...

Application Design Proccess.

Software Architecture 101 - Introduction to the World...

Software Architecture 101 -...

Software Architecture 101 - Introduction to the World of Application Design

Hello, everyone!Today, I would like to introduce you to the world of application design.Designing applications can be called a multidisciplinary...

Strapi - Things to Keep in Mind Before Migrating to This CMS

Strapi: Things to Keep in Mind Before Migrating to...

Strapi: Things to Keep in Mind Before...

Strapi: Things to Keep in Mind Before Migrating to This CMS

When it comes to CMS, the modern market has already stepped so much that the choice is becoming increasingly difficult. There are so many options for...