DEV Community

Cover image for THE VSCODE OF MOBILE
Just Patrick
Just Patrick

Posted on

 

THE VSCODE OF MOBILE

So a few months ago I stumbled upon spck editor app on playstore while doing my occasionaly peruse around Playstore. I checked out the rating and the preview pictures and got super hyped to try it out.

I have tried a lot of other mobile text editors to enable me to do some front end development on my phone but I never quite found what I was looking. But this was until I found Spck Editor. (Pronounced as "speck")

Its availabele for web and android

Some of Its Major awesome features

1. GitHub integration

2. Boiler plates for popular fronted frameworks

3. Ability to add Css frameworks to your projects

4. The Chrome-Like Console

5. Autocomplete, suggestions, Keyboard shortcuts and Find 'n' replace

6. And of course syntax highlighting


GitHub Integration

With Spck you can clone GitHub repos which gets added onto your Project Pane as a new Project.
Alt Text

Alt Text

Once you make changes to your project you can then Commit All (Commit all the changes) and then Push (Push the changes to the remote repo)
Alt Text

You can also make pull requests and Revert changes using the Pull and Revert All options.

You Can Create and Switch Branches, Add remote repo to existing project, Fetch and Log History
Alt Text

Basically the GitHub integration is unbelievable (for a mobile app)


Boilerplate for popular front end frameworks

Alt Text

You can create a Vue, React or Angular project super easily with steps below.

  1. Click on the Plus Icon on the project pane
  2. Select New Project
  3. Select the Front end Framework you want.
  4. Lastly, the Css Framework.

Note for VueJs the project is not initialized in the single file component model but with Vue being imported and targeting a particular div.


Ability to add Css frameworks to your projects

Alt Text

Currently when you create a project you can choose either the following css frameworks to be automatically imported/linked with your Project

  1. Bootstrap
  2. Bulma
  3. Material Design Lite
  4. Semantic UI
  5. UIkit

The Chrome-Like Console

The Console is a stripped down version of the Chrome Console.You can toggle it on off in the Preview mode. It Features the The JS Console Tab, The Elements Tab,The Resources tab and Settings tab

The Js console tab is Just like the Chrome console


Autocomplete, suggestions, Keyboard shortcuts and Find 'n' replace

What can I say here. A lot like VSCode

The are a lot and I mean a lot more features that I have not covered. And I do believe that Spck editor app is the closest thing to our beloved Vscode on Mobile

I'll also be posting an article about doing back end development on Mobile. And again I mean serious back end development with express and a Mongodb service running on the PHONE. So stay tuned (or just follow me :) )

Top comments (9)

Collapse
 
areknawo profile image
Arek Nawo

Interesting, it's really nice to see that there's some interest in mobile web development (with mobile meaning on-mobile 😄 ). I've written a very in-depth article on this topic in the past. Check it out if you want!

Collapse
 
patrickweb profile image
Just Patrick

Wow. The article is really good

Collapse
 
areknawo profile image
Arek Nawo

Thanks 😍

Collapse
 
nerdyme341999 profile image
nerdyme341999

Yesssss ,I have used Spck editor and it's far more better than other ide's that are available on Google play store.Its worth a try.

Collapse
 
jayesh83 profile image
Jayesh
Collapse
 
paramsiddharth profile image
Param Siddharth • Edited

I have used it and it is great! 😊 I, however, prefer Acode along with Termux. The combination is superb. 🔥

Collapse
 
patrickweb profile image
Just Patrick

I will definitely check out Acode. For termux I could not agree more. I've even just published a an article on it ✹

Collapse
 
patrickweb profile image
Just Patrick

Hae, Novachief. Did you check out my article on backend dev on mobile? What are your thoughts?

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.