ShiftEdit - Web Based IDE | shiftedithttps://shiftedit.net/blog/shifteditShiftEdit - Web Based IDE | shifteditIntroducing ServerWandThere comes a point where you outgrow shared hosting offerings either because of cost, performance or some other concern. The natural progression is to move your sites onto a VPS server from the likes of Linode. Setting up and managing servers takes time and expertise. There is control panel software you can use like Plesk and CPanel but they are expensive, propietary and consume server resources. The solution to these problems is ServerWand..

ServerWand can connect directly to your VPS server and install webserver software. You can then use the dashboard to:

Create hosting accounts for your domains

Add domain aliases

Create MySQL databases

Install free SSL via LetsEncrypt

Install wordpress in one click

Add system users

Manage cronjob scheduled tasks

Browse server logs

ServerWand also employs several security measures to make your server more secure.

Much like ShiftEdit, this service is borne out of a desire to make my life easier and I'm sure it will benefit others. It's free to try for 30 days and there is special early bird pricing available while the service is in beta.

You can now jump into your files on the move and make those crucial edits without any pinching or zooming.

It's the fully featured version so you have all the things you love like autocomplete and revision history, literally at your finger tips.

Happy coding!

]]>https://shiftedit.net/blog/pocket-ide
Getting started with BitbucketWhen collaborating on a project with other developers it's advantageous to use version control software to make it easier to develop new features without overwriting each others code. The most popular version control software by far is Git. This tutorial will teach you how to host a Git repository in Bitbucket and connect to it from ShiftEdit.

Taking it further

In theory you and your fellow developers could work off of the same webspace. In practice you will probably want your own development areas so that you can work on your own features and commit when ready.

In order to do this your collaborators should also register on Bitbucket and you can then share the project with them.

You could set up a subdomain on your server for each of your developers using the same instructions outlined above.

The main website can be kept updated by running this from SSH:

# git pull

You can automate this command by setting up a webhook within Bitbucket: Settings -> Webhooks -> Add webhook

Point this to a url on the server that will trigger the git pull, e.g:

<?php

$json = file_get_contents('php://input');

$result = shell_exec('/usr/bin/git pull 2>&1');

Hopefully this tutorial has been useful but if you need any help please contact the mailing list.

]]>https://shiftedit.net/blog/getting-started-with-bitbucket
Free tier updateBack in 2014 we announced that we were moving away from a freemium business model.

Since then ShiftEdit has prompted users to let them know that their trial had expired whilst still permitting access.

Now almost 2 years later, free tier users will be prompted to purchase a subscription before they can continue using the service.

It's inevitable that some users will move on, but for those that stick around we will be able to deliver a superior service.

It works much the same way with the benefit that you can take advantage of DigitalOcean's pricing starting from just $5 a month for a droplet. Each droplet can be used to host multiple projects managed using ShiftEdit. Here's a reminder of how to get started:

Click on the Site menu and then Servers

Add a new server with DigitalOcean, you will be prompted to allow write access from ShiftEdit.

Create a new site and select the "Server" tab under "Server type". Alternatively click a repository from those listed on the new tab page.

Save the site and you're done. Your site will be created with it's own unique url.

]]>https://shiftedit.net/blog/digitalocean-integration
Dev ServersDev servers are incredibly useful. They can be used to develop project features before they are available to public. They can also be used to fork existing projects for testing or collaborating.

An online or local dev server can take some time to setup. You need to pick a server, install all the relevant packages and configure it. If you want to host multiple projects on the same server it takes even more configuring.

The latest ShiftEdit makes this easier.

There is a new Servers option from the site menu.

From here you can create a dev server currently using either Amazon Web Services or Linode (see instructions).

Once the server is created you will then be able to add a new site from the site menu as you normally do.

There is a new Server tab. From here you can pick the server and an optional git url (connects to your github and bitbucket accounts).

The site name is used to create a unique url e.g. projectname.username.shiftedit.io

You can host multiple projects on the same server and each project has full SSH access.

These additions along with the new Git client, make developing Github projects a snap.

]]>https://shiftedit.net/blog/dev-servers
Git IntegrationIt's been a long time coming but we finally have a Git interface in today's update.

You can branch, commit and view your history. Find out how to get started from the Git documentation.

]]>https://shiftedit.net/blog/git-integration
Hosted Development Environments with LinodeThis article is out of date see the blog entry on servers

]]>https://shiftedit.net/blog/hosted-environments-with-linode
Hosted Development Environments with AWSThis article is out of date see the blog entry on servers

A huge update to hosted dev environments.

As a reminder, hosted dev environments can be used to create a stack, currently based on LAMP or Node.js. They can be connected to a Github or Bitbucket repository, enabling you to clone your project and work on it in ShiftEdit.

We previously employed a docker based solution which has been replaced with an Amazon Web Services (AWS) based solution.

Now when you create a hosted environment you will be asked to enter an AWS key id and secret key.

ShiftEdit will then launch an ec2 instance which will include your chosen stack and repository.

You will find a couple of new options available from the site menu: "SSH Terminal" and "Reboot".

]]>https://shiftedit.net/blog/hosted-environments-with-aws
Dev Channel Update 2016-01-08The last known critical bugs in the jQuery UI version have been fixed and we plan to roll out to the stable channel in the coming days.

I've added a legacy channel for those that prefer to stay on the ExtJs version. There shouldn't be any reason to stay on that version but it's there just in case. Eventually the Extjs version will be phased out if there are no serious objections.

]]>https://shiftedit.net/blog/jquery-ui-build
Developer Diary 2015-10-24The rebuild is progressing well. I've implemented ¬70% of the functionality and aim to have the rest done in the next week or two. I will then move on to testing.

I'm re-writing every line of ExtJS code into jQuery and have come to the conclusion that jQuery is a lot more fun.

So what's great about jQuery?

Working with the DOM

With jQuery you work with HTML elements instead of abstract components. This gives you a head start by letting you utilize all your HTML and CSS knowledge. In ExtJS I would regularly be checking the api documentation to see which method changed the title or some other attribute. Sometimes the method wouldn't exist and you would need an unholy hack to solve it. With jQuery pretty much everything is in a HTML element, use Chrome inspector to find it, write code to access it, set the new value and you're done.

jQuery code

$( "'#tabs li.active a" ).text('New title'); //simples

ExtJS code

tabs.getActiveTab().setTitle('New title'); //did I do that right? let me check the docs..

Selectors

Selectors are great for accessing components. In Extjs I would store my components in arrays or objects. If I needed to access components with a certain flag, I could iterate over them, testing for properties until I found what I was after. With jQuery you can do all this in one go just by using some clever selectors. Again your css knowledge comes in handy here as you can select by any combination of classes, pseudo-classes, attributes etc.

jQuery code

//get all edited tabs

$( "tabs li[data-edited]" );

ExtJS code

//get all edited tabs, need a dreaded loop for this..

var editedTabs = array();

Ext.each(tabs.tabs, function(tab)){

if(tab.edited) {

editedTabs.push(tab)l

}

}

Data attributes

At first I was annoyed with jQuery that when setting HTML data attributes using .data() it was not recorded to the DOM. How daft, it would be so handy to use the data attribute as a selector. I worked around it by setting the data attribute using the less concise .attr() method. This seemed like a miss to me and I put it down to performance concerns of the jQuery team. Then I discovered that when using the .data() method you can actually assign any data type to DOM elements even huge strings or objects and then it all made sense. This is a sweet perk for me as it's more convenient and cleaner to access data attributes than it is to maintain an array of values somewhere else.

jQuery code

//what, you can assign an object to a HTML element? Yes, you can.

$( this ).data('editor', component);

ExtJS code

//ok we will need an object to store these components

var editorComponents = {};

editorComponents[tab.id] = component;

//remove this value when the tab is removed

tabs.on('remove', function(tab){

delete editorComponents[tab.id]

});

All of this is leading to considerably more concise code. I think by the time I'm done the codebase will be less than half the size it was with similar functionality. Not only will this equate to faster loading but it will also be a heck of a lot easier to maintain.

]]>https://shiftedit.net/blog/developer-diary-2015-10-24
Developer Diary 2015-10-13Having decided to move away from ExtJS, I've begun re-writing ShiftEdit from the ground up using jQuery UI for the widget components.

Behold a screenshot of the rough prototype:

As you can see we have a familiar interface including panels, tabs, menu and a file tree.

It's often useful to have a development environment for developing a new project or testing out changes to an existing one. Up until you would either have had to provide your own development server or install something like XAMPP onto your local machine.

Starting today, you can create a development environment within ShiftEdit. Each environment will have it's own unique url and come with full terminal access (including sudo rights). We currently provide a full PHP stack (Ubuntu, Apache, Mariadb and PHP), and will be looking to add other stacks in the near future.

This feature is currently available in the Dev channel and is limited to Premier users only. The reason being is so that we can monitor usage and gauge resources before opening it up to everybody.

To get started, switch to dev channel, then create a New Site and click on the Hosted tab. You will be able to name your environment and provide an optional Git URL.

Your environment will then be ready a few seconds later and you can begin developing. You can open the preview tab to preview the current file. And PhpMyAdmin is pre-configured and accessible from the site menu.

In order to deploy your changes to a live environment you should do a Git push. IF your live environment only supports FTP then you can use Git-FTP.

]]>https://shiftedit.net/blog/hosted-environments
Turbo ModeShiftEdit uses a proxy for FTP connections. This introduces lag depending on how close your server is to the proxy.

For example, when I connect to a server in the UK, this is what happens:

Browser (UK) sends AJAX request to Proxy (USA)

Proxy (USA) sends request via FTP to Server (UK)

Server (UK) sends file to Proxy (USA)

Proxy (USA) sends file to Browser (UK)

As you can see the connection has crossed the atlantic 4 times! This adds over a second of lag to every file operation.

To avoid this lag there is a new Turbo mode option for FTP servers.

When enabled, ShiftEdit will upload a PHP proxy to your server.

Subsequent connections will then go direct to the Web server which in turn performs the FTP operations.

This removes the need for our proxy and eliminates all unneccessary trips across the Atlantic.

Turbo Mode can also help work around connection issues when our proxy can't connect to your server.

In such cases you will probably need to upload the shiftedit-proxy.php file manually to your server.

Note: In order for Turbo Mode to work you must provide a web url and your server must support PHP.

]]>https://shiftedit.net/blog/turbo-mode
Adapting our business modelSupport from Premier subsciptions has been good but growth has flattened. We are profitable, however if I'm to concentrate full time and even hire staff then we need a big increase in revenue.

The freemium model has had limited success. >99% of users pay nothing for an ad-free service that is maintained, supported and updated at considerable effort and cost. At the current rate of conversion, we would need 1 million users before we could employ one other full-time developer.

Advertising works well for some companies. For an IDE it does not work because smart developers block ads and know never to click them. So we will be switching to a Free Trial model. New and existing users will automatically be upgraded to a 30 day trial of Premier. When the trial period expires they can decide whether or not to continue for $6/ month.

If enough users stick around, we will be able to achieve much more in a shorter space of time.

There are two ways to start collaborating. You can either collaborate on an individual file or you can work together on a site.

1) Collaborate on a single file. Say for example you need help or want to show someone something.

a) Press the share button in the top right corner.

b) Tick the box that makes the file public.

c) Copy and paste the link into a chat window or email.

As soon as your collaborator comes online you will see their name appear at the top. You will see their edits and cursor movements in realtime. You can click their name to jump to their cursor position. Once you've finished collaborating you should untick the share option (b) to prevent anyone else frome editing.

You can also add your own custom definitions. To do this upload a json file to your web server and place the url in the custom completions field.

To generate completions from a php file. Open the file in ShiftEdit, then open chrome's js console (ctrl+shift+j).

And enter:

JSON.stringify(shiftedit.app.tabs.get_editor().definitions)

Then copy and paste the output (between the quotes) into your json file.

]]>https://shiftedit.net/blog/wordpress-and-custom-completions
Working locallyOne thing ShiftEdit has lacked is real access to your local machine and network files. File operations are conducted via a proxy on our servers. This requires that both you and your server are net accessible.

We support HTML5's local filesystem which is sufficient for client-side programming e.g. HTML and JavaScript. It's not much use if you're writing a server-side language like PHP or Ruby however.

So how can you work on said server side code in your local dev environment? Up until now you could use Dropbox, Google Drive, or set up a net accessible (S)FTP. With all of these there is a delay when interacting with files as your computer connects to the proxy which in turn connects back to your computer.

To resolve this I've added a new server type called AJAX. For this to work you upload a PHP script to your server and use the script's web address as your host. ShiftEdit will then perform file ops directly via this script without any proxy in-between.

This means you will be able to connect to your local machine or network without noticeable lag.

You could also use this approach as an alternative to FTP or SFTP. The main limitations being that it currently doesn't support file revisions - which are saved on the ShiftEdit server or zip extracting.

]]>https://shiftedit.net/blog/working-locally
Migration to AWSMigration to AWS is planned for Sat 23rd Feb 11AM (GMT). Downtime expected to be less than 1 hour.

Due to our ever increasing usage we will be switching over to Amazon Web Services to improve availability and performance.

Being hosted on Amazon's infrastructure will allow us to continue to scale and provide faster global access.

]]>https://shiftedit.net/blog/aws-migration
Amazon S3 SupportHave the convenience of managing your Amazon S3 account from within ShiftEdit. It can be added like a normal site and will work in the same way.

You can connect with your access credentials. Use your Access Key for the username and your secret key as your password.

By default the files you upload will be world-readable. You can change this behaviour in the advanced tab by un-ticking "S3 upload with public access".

Deleting buckets is currently disabled.

]]>https://shiftedit.net/blog/amazon-s3-support
Version 14.2New releases keep coming thick and fast. These are the highlights:

New tab page

]]>https://shiftedit.net/blog/version-14-2
09-2012 UpdateThere have been several key updates lately, including:

Google Drive Support

When adding a site there is a new GDrive server type.You can add and edit files directly to your Google Drive.

Live editing

We've added a run panel on the right hand side. You can use this to preview your code and update in realtime. If you run a file without saving it will update as you edit. If you save first then it will attempt to run the page from your website and update on each subsequent save.

PHP code assist

Autocomplete for PHP functions as well as function arguments. Press Ctrl+space to trigger autocomplete. Arguments will appear as you type.

Remote File search

Search files from your entire remote or local site. Accessible from the find panel.

There are security benefits as your password is never shared so sudo access is not possible and keys can be revoked without changing your password.

Using key authentication allows you to increase security by disabling password login on your server.

To start using key authentication you need to generate a public key from your account:

Add this key to your server.

Then when you add a site in ShiftEdit select "Logon Type: Key authentication".

]]>https://shiftedit.net/blog/ssh-key-authentication
Change the ChannelIt's important that we provide stability and equally important that we continue to innovate. To facilitate this, ShiftEdit now has two different release channels available: dev and stable.

Everyone starts off on stable which is essentially just that; stable. No new features and the occasional bugfix until the latest dev build is mature enough.

Dev channel should be pretty stable most of the time. It will be updated more often than stable and will contain bleeding edge features that may come and go depending on their success.

]]>https://shiftedit.net/blog/channels
Education EditionIf you're in full-time education you can now apply for ShiftEdit Education Edition. This will allow you to add up to 5 projects instead of just the 1 in standard edition. Education Edition is provided free of charge and free of advertising right up until your graduation.

Storing file revisions is quite resource intensive and may not always be desired. I've changed it from being an always-on feature to something that has to be enabled in site settings.

Site -> Edit Site -> Advanced -> Save file revisions.

You can then access revisions from:

File -> Revision History

Because it's a more resource intensive feature it will become a Premier only feature.

I will also change the number of sites available in free edition from 3 to 1. The reason for this is to increase revenue so that I can invest more time in development. At the moment I don't think there is enough incentive to upgrade and premier users account for < 0.5% of total users.

Code folding is now supported for Ace users.To create a fold, select some code and press Ctrl+Shift+C You can expand the fold by pressing Ctrl+Shift+E or just by double clicking it.

Edit in new tab

You can now edit files in new browser tabs instead of ShiftEdit tabs. This will give you a little more screen real estate and is great if you prefer to manage tabs using your browser. You can also bookmark the resulting tabs and come back to them later without having to load the full-blown IDE.

To open a file in a new tab from the ftp explorer.Right click -> Open -> Edit in new tab

There is also an option in preferences to default to this behaviour when opening files.Edit -> Preferences -> Open files in new browser tab

CSS Lint

CSS Lint has been integrated and provides much more comprehensive CSS checking and is fully configurable from preferences.Edit -> Preferences -> CSS Lint

Other changes

Lots of new options in the edit menu including Add semicolon ctrl+;

Animated title during FTP transfer

New Help menu with feedback form

Home tab is now closable.

Several fixes

]]>https://shiftedit.net/blog/code-folding-edit-in-new-tab-css-lint
Dropbox SupportWe're pleased to announce the immediate support for Dropbox!

If you're unfamiliar with Dropbox, it allows you to share a folder across multiple computers and devices. This is great because it is now very convenient to edit files on your computer using ShiftEdit.

Add a new site in ShiftEdit and select Dropbox from the Server Type dropdown. You will be redirected to dropbox for approval. Once approved you then just need to press Save.

Hope you enjoy this new update. If you have any issues please report them to the list.

]]>https://shiftedit.net/blog/dropbox-support
update 18/02/2011Been a busy week for updates. Here's what I remember:

ShiftEdit now loads much faster with fewer requests.

FTP is now quicker at listing files.

Fixed a bug with find+replace.

You can right click tabs for save and close options.

Added "Close other tabs" option,

Added "Select Parent Tag" to Edit menu.

Can switch language syntax from View Language

Upgraded to Ace 0.1.6

]]>https://shiftedit.net/blog/update-18-02-2011
Ace and AdsAce

Users of ShiftEdit will be familiar with the Bespin component which is used for editing. The Bespin project has now been merged into Ace.

Ace is somewhat different to Bespin but we've started to integrate it - and it can now be selected from the list of available editors in Preferences.

There are still a few bits we need to do - but support is pretty good. Ace is the future and will eventually become the default editor.

Ads

We've received feedback that the adverts are somewhat intrusive. What with ad-blockers and unrelated ads - they've never been a great source of revenue so they've now been removed completely.

In order for the project to remain viable we do need to generate some revenue. So we've added a 3 site limit to free accounts. If you are currently using more than 3 you will only be able to access 3 of them. Premier edition is unlimited. And is now even cheaper at just $5/ month or $50/ year.

]]>https://shiftedit.net/blog/ace-and-ads
Master PasswordFor an online IDE security is vitally important. We hold the passwords to many websites and are a potential target for malicious hackers.

Our systems are fully patched and we have a firewall in place to prevent hackers but we have to plan for the worst case scenario. What if a hacker somehow obtained our database and source code?

If you connect without using the save password option then the password is kept in the session until you logout or the session expires.

If you have many sites typing in all the different passwords can be annoying and also hard to remember. So we've introduced a new master password feature.

You can set a master password by going to Preferences -> Security. Once the master password is set any ftp passwords that are stored will be encrypted using your password. You will then only need to enter the master password once per session to access all of your sites.

Without the master password the only way a hacker could obtain your passwords would be using an unfeasible brute force attack.

If you forget your master password - you can remove it but you will lose all of your stored FTP passwords.

This is an overview of how the master password system works:

Setting the master password

Client enters master password.

Master password is hashed with a unique salt in the clients browser

Hash is then transmitted to server

Existing FTP passwords are AES encrypted using the hash

The hash is then re-hashed and stored on the server

Accessing a site

Client enters master password

Master password is hashed with a unique salt in the clients browser

Hash is then transmitted to server

Hash is rehashed and verified against stored hash

FTP password is AES decrypted using the original hash

The hash is stored in the session until the user logs out or the session expires

You will notice that at no point is your master password directly transmitted to our server, ensuring greater security.

]]>https://shiftedit.net/blog/master-password
ShiftEdit Premier EditionShiftEdit is now ready for your business.

]]>https://shiftedit.net/blog/shiftedit-premier-edition
ShiftEdit.net: A New Homeshiftedit.net. Please update your bookmarks and blogs accordingly.]]>https://shiftedit.net/blog/shiftedit-net-a-new-home
Built-in browser via Live viewShiftEdit now has a built-in browser via a new option called Live View.You can see it in action here:

This should make development a lot easier as you can now do everything from the same tab without having to open new browser tab or window.

]]>https://shiftedit.net/blog/built-in-browser-via-live-view
Source Formatting and Balance BracesFollowing on from yesterday's announcement, we've added two more great features.

Source Formatting

From the edit menu you can now select "Apply Source Formatting". This will go through the opened file and add line-breaks and tabs where necessary. This is useful if you are working on a file that has been minified or is in an untidy state.

Balance Braces

You can select all code between brackets by pressing ctrl+' or selecting "Balance Braces" from the edit menu. If you press it again it will find the next outter set of braces. This works for regular, square and curly brackets. This is useful for finding a closing bracket - or checking if brackets match up.

]]>https://shiftedit.net/blog/source-formatting-and-balance-braces
Realtime syntax debugging and bracket closingWe've added some exciting new features to ShiftEdit.

Realtime syntax error checking

When working on a PHP or JavaScript file the script is checked for syntax errors as you type. If an error is found the error message is displayed above the code editor. You can also click the line number in the error message to be taken straight to the broken line. This is an excellent tool for debugging and is a great time-saver during development.

Bracket closing

In PHP and JS files brackets are now automatically closed as you type. This is a useful time-saver and works for normal, square and curly brackets.

Tag closing

When you close an opening HTML tag the closing tag is automatically appended. This is another time-saver.

All of these features can be disabled via the preferences window if they are not your cup of tea. (Edit->Preferences)

]]>https://shiftedit.net/blog/realtime-syntax-debugging-and-bracket-closing
Save Password and Code SnippetsWe've added two important new features to ShiftEdit.

Save Password option

When creating new sites the FTP password is now optional. If left blank. when you connect you'll be prompted to enter your password. The password is stored in your session so you will only need to enter it once and it's cleared when you logout. Using this option prevents the password from being stored in our database.

Code Snippets

Code snippets are chunks of code that you use every now and then. You can add as many snippets as you like and organise them into folders. They are then readily accessible whenever you need them.

]]>https://shiftedit.net/blog/save-password-and-code-snippets
Bespin, SFTP and moreThe last few weeks have seen a lot of improvements to ShiftEdit.

Bespin 0.9a1 came out which was a major milestone as it now supports most of the core features that we need it to. As well as basic editing it can now be used with Find and Replace.

Find and Replace is a very important tool for any developer and has been made more intuitive. When performing a search you just have to press enter instead of clicking the Find button. It will also tell you if you've reached the end of the document.

We had a request for SFTP a while back. I'm pleased to say this is now in. In order to integrate this we had to abstract the FTP code. This should pave the way for adding new connection methods like SVN.

There is a new preferences dialog where you can set the tab size and font size. Expect more options to come.

Aside from these major updates there have been a lot of bug fixes - some of which were quite critical. If you haven't used ShiftEdit in a while, now's the time to get back in as it is a much more stable beta.

We are currently seeking testers and feedback. Also if you like ShiftEdit, please help spread the word - whether it's on a blog or social network.

]]>https://shiftedit.net/blog/bespin-sftp-and-more
Drag and Drop to OpenYou can now drag and drop files from your computer straight into ShiftEdit.

So far this only works in Firefox 3.6 and above.

This technology is built on web standards so hopefully in the not so distant future it will be supported by other browsers such as Chrome and IE.

]]>https://shiftedit.net/blog/drag-and-drop-to-open
Bespin IntegrationThe code editing component of ShiftEdit is by far the most important. The current version offers a choice between MDK editor and CodeMirror. They both have their pros and cons and are maintained by individual developers. Both struggle with large files and because of their implementation it's hard to see that ever being fully resolved.

The Bespin project by Mozilla is also providing a stand-alone editor component. It has a more robust implementation and greater resources behind it. It is integrated into the development version of ShiftEdit. Currently the Bespin component has a few bugs and is lacking some features. Once these are resolved and Bespin is fully integrated, ShiftEdit should be ready for prime-time. Then I'll be able to eat my own dog food and end my reliance on Dreamweaver.