If you ever use the CodePen Pen Editor from a device with a fairly small screen (generally smaller than tablet), you’ll notice some big changes to the editor!

Left: old editor. Right: new editor.

Well, perhaps at first glance you don’t see a dramatic change. But poking around a little, we think you’ll find the mobile editor a lot more capable.

You can now add a Pen to a Collectionor even create a brand new Collection and add it immediately.

Add New Collection from the CodePen Pen EditorAdd New Collection from the CodePen Pen Editor

You have access to the console.

It’s not as powerful as the DevTools console on a desktop browser, but, it’s:

  1. Always in the right context.
  2. Shareable with the console open, for demonstrating non-visual JavaScript output.

Your syntax highlighting theme will be respected.

And if it’s a light theme, the general editor UI goes light.

You can comment directly from the Editor.

Share to Twitter, Facebook, and DEV

One click and you’ll pop over to the major social networks to share what you’re looking at.

You can switch between your unprocessed and processed code, if you’re using a preprocessor.

You can tidy your code.

You can analyze your code.

You have proper links to all the views that are relevant to your Pen.

Which means you can get to things like Debug View, and a proper Collab Mode and Professor Mode, which was harder to get to before. Plus direct code links, should you need them.

You can delete the Pen.

You couldn’t do this from small screens before. You never know when you might need to nuke something!

The trick is, get this, responsive design.

Most of CodePen is responsive already, of course, like most other websites these days. But before now, we had a special mobile-only view for the Pen Editor. It had its own unique UI with its own special set of resources. The main problem with that, to be perfectly honest, is the technical debt of it all. Whenever we tinkered with the code of the main Pen Editor, we had a bad habit of forgetting the Mobile Editor. Our fault, of course, but that’s how technical debt manifests sometimes.

So by taking the time to make the normal Pen Editor responsive, we got to bring this slew of features along with it while removing a ton of code from the ol’ codebase. Hopefully a nice win-win.

READ MORE – CLICK HERE

www.Red360.com.ve

from Red360.com.ve http://bit.ly/2JxZec3
via Red360.com.ve