All posts tagged “Editor”

Join UX Booth as an Editor

Are you a UX professional with strong writing skills? Do you enjoy reading the latest news and finding the newest trends? Are you a self-starter with 5 hours a week to devote to a new endeavor? You might be the UX Booth contributing editor we’re looking for.

Position: UX Booth Contributing Editor

Pay: $ 300 monthly stipend (we do this for love, not money!)

Weekly Responsibilities:

  • UX Booth editors work one-on-one with authors to bring articles from pitch to publication.
  • Editors focus on both copy edits (grammar, punctuation, etc) and content edits.
  • Editors help authors to clarify their theses and find relevant, real-world examples for their articles.
  • Editors make judgement calls on when articles are ready for publication, and what authors can do to improve their work.
  • Editors are required to attend one weekly, 20min check-in meeting to keep the full team aware of upcoming publication dates.
  • Editors are expected to spend no more than 5 hours a week on UX Booth-related work.

Additional Perks:

  • Though not required, UX Booth editors are given frequent opportunities to publish their own work on UX Booth.
  • Editors are given access to the latest books on UX, and are given opportunities to interview well renowned, as well as up-and-coming authors.
  • UX Booth editors are given opportunities to represent UX Booth at conferences free of charge, if and when they are available and interested in attending.

Skills and Qualifications:

  • Strong writing skills
  • Editing experience
  • A strong familiarity with user experience

The UX Booth

Using The TinyMCE Editor In WordPress [Guide]

Although they may not know its name, everyone who uses WordPress is familiar with the TinyMCE editor. It’s the editor you use when you create or edit your content – the one with the buttons for creating bold text, headings, text alignment and so on is. That’s what we’ll be taking a look at in this post, and I’m going to show you how you can add functionality and how you can use it in your plugins.

The editor is built on a platform-independent Javascript system called TinyMCE which is used in a number of projects on the Web. It has a great API which WordPress allows you to tap into to create your own buttons and to add it to other locations within WordPress.

Adding Available Buttons

WordPress uses some options available in TinyMCE to disable particular buttons – such as superscript, subscript and horizontal rules – in order to clean up the interface. They can be added back without too much fuss.

The first step is to create a plugin. Take a look at the WordPress codex on how to do that. In a nutshell, you can get by with creating a folder named ‘my-mce-plugin’ in the wp-content/plugins folder. Create a file with the same name, with a PHP extension: my-mce-plugin.php.

Inside that file paste the following:

 <?php /** *Plugin Name: My TinyMCE plugin *Description: A plugin for adding custom functionality to the WordPress TinyMCE plugin. */ 

Once done you should be able to select this plugin in WordPress and activate it. All the code from now on can be pasted inside this file.

So, back to enabling some built-in but hidden buttons. Here’s the code that allows us to enable the 3 buttons I mentioned:

 add_filter( 'mce_buttons_2', 'my_tinymce_buttons' ); function my_tinymce_buttons( $  buttons ) { $  buttons[] = 'superscript'; $  buttons[] = 'subscript'; $  buttons[] = hr; return $  buttons; } 

To know which buttons can be added and what they are called, take a look at the list found in the TinyMCE documentation for controls.

Creating Our Own Buttons

How about creating our own buttons from scratch? Many websites use Prism for code highlighting which uses a very semantic approach to marking up code segments. You have to wrap your code within <code> and <pre> tags, something like this:

<pre><code>$  variable = 'value'</code></pre>

Let’s create a button which will do this for us!

This is a three-step process. You will need to add a button, load a javascript file and actually write the content of the Javascript file. Let’s get started!

Adding the button and loading the Javascript file is pretty straightforward, here’s the code I used to get it done:

 add_filter( 'mce_buttons', 'pre_code_add_button' ); function pre_code_add_button( $  buttons ) { $  buttons[] = 'pre_code_button'; return $  buttons; } add_filter( 'mce_external_plugins', 'pre_code_add_javascript' ); function pre_code_add_javascript( $  plugin_array ) { $  plugin_array['pre_code_button'] = get_template_directory_uri() . '/tinymce-plugin.js'; return $  plugin_array; } 

When I see tutorials about this I frequently see 2 problems.

They neglect to mention that the button name added in the pre_code_add_button() function must be the same as the key for the $ plugin_array variable in the pre_code_add_javascript() function. We will also need to use the same string in our Javascript later on.

Some tutorials also use an additional admin_head hook to wrap everything up. While this will work, it is not required and since the Codex does not use it, it should probably be avoided.

The next step is to write some Javascript to implement our functionality. Here’s what I used to get the <pre> and <code> tags output all at once.

 (function() { tinymce.PluginManager.add('pre_code_button', function( editor, url ) { editor.addButton( 'pre_code_button', { text: 'Prism', icon: false, onclick: function() { var selected = tinyMCE.activeEditor.selection.getContent(); var content = '<pre><code>' + selected + '</code></pre>'; editor.insertContent( content + "\n" ); } }); }); })(); 

Most of this is dictated by how a TinyMCE plugin is supposed to be coded, you can find some information about that in the TinyMCE documentation. For now, all you need to know is that the name of your button (pre_code_button) should be used in line 2 and 3. The value of "text" in line 4 will be displayed if you do not use an icon (we’ll take a look at adding icons in a moment).

The onclick method dictates what this button does when it is clicked. I want to use it to wrap selected text within the HTML structure discussed earlier.

The selected text can be grabbed using tinyMCE.activeEditor.selection.getContent(). Then, I wrap the elements around it and insert it, replacing the highlighted content with the new element. I’ve also added a new line so I can easily start writing after the code element.

If you want to use an icon I suggest selecting one from the Dashicons set which ships with WordPress. The Developer Reference has a great tool for finding icons and their CSS/HTML/Glyph. Find the code symbol and note the unicode underneath it: f475.

We’ll need to attach a stylesheet to our plugin and then add a simple style to display our icon. First up, let’s add our style to WordPress:

 add_action( 'admin_enqueue_scripts', 'pre_code_styles' ); function pre_code_styles() { wp_enqueue_style( 'pre_code_button', plugins_url( '/style.css', __FILE__ ) ); } 

Go back to the Javascript and next to the icon in the addButton function, replace “false” with a class you would like your button to have – I used pre_code_button.

Now create the style.css file in your plugin directory and add the following CSS:

 i.mce-i-pre_code_button:before { font-family:dashicons; content: "\f475"; } 

Note that the button will receive the mce-i-[your class here] class which you can use to target and add styles. Specify the font as dashicons and the content using the unicode value from earlier.

Using TinyMCE Elsewhere

Plugins often create textareas for entering longer text, wouldn’t it be great if we could use TinyMCE there as well? Of course we can, and it’s pretty easy. The wp_editor() function allows us to output one anywhere in admin, here’s how it looks:

wp_editor( $  initial_content, $  element_id, $  settings );

The first parameter sets the initial content for the box. This could be used to load an option from the database, for example. The second parameter sets the HTML element’s ID. The third parameter is an array of settings. To read about the exact settings you can use, take a look at the wp editor documentation.

The most important setting is the textarea_name. This populates the name attribute of the textarea element, allowing you to save the data easily. Here’s how my editor looks when used in an options page:

$  settings = array( 'textarea_name' => 'buyer_bio' );
wp_editor( get_option('buyer_bio'), 'buyer_bio', $  settings );

This is equivalent to writing the following code, which would result in a simple textarea:

<textarea id='buyer_bio' class='buyer_bio'><?php get_option( 'buyer_bio' ) ?></textarea>


The TinyMCE editor is a user-friendly way of allowing users more flexibility when entering content. It allows those who don’t want to format their content to just type it up and be done with it, and those who want to fiddle around with it to spend as much time as they need getting it just right.

Creating new buttons and functionality can be done in a very modular way, and we’ve only just scratched the surface of the possibilities. If you know of a particularly good TinyMCE plugin or use case which has helped you a lot, do let us know in the comments below!

Could this be your new favourite code editor?

Read more about Could this be your new favourite code editor? at

Adobe’s code editor Brackets officially migrates from beta today

Creative Bloq

Mondrian – Easy To Use Vector Graphics Editor

In the field of graphic design, there are two types of graphic format: pixel and vector. Each type has its own strengths and limitations. If you decide to go with the vector, there are a bunch of handy vector graphic tools to use. Adobe Illustrator is one of the best and most popular one especially in the field of web design for creating SVG.

If you’re looking for an alternative to Illustrator which is free, portable and not too complex; then you must take a look on Mondrian. Let’s dive in and see what this web-app is capable of.

Getting Started With Mondrian

Mondrian is an online vector-based editor which is simple and easy to use. With its minimalistic and flat UI, you won’t have any difficulties using it. The UI also has a smart feature which only shows the utilities that can be used at that moment.

To get started, we’ll import the available albq.svg design that is already in the web-app itself. Just go to File >> Open….

Basic Editing

For basic vector editing, Mondrian has a range of tools and features to start with. Each tool and some features have their own shortcut key. This is useful if you need easy access without touching the mouse.

There are about 10 tools you can use to manipulate the vector including the pen tool, the crayon tool, scaling and rotation for shape manipulation, typography, zoom and more.

In the menu, you can find some other features for additional assistance like import/export, opening files, copy/paste, undo/redo (through file history API), show the visual history, show the grid, positioning and sharing option.

When you hover over any shape, you can see and edit the path you created.

After you select a shape, a size option window will appear. Here you can define the size, position or thickness of the shape.

Zoom In And Out

Zooming in and out of the design can be achieved in 2 ways. You can use the magnifier glass icon from the tools list. To zoom in, easily hit left click and right click to zoom out. But with this way, you can’t zoom out beyond its actual size. Alternatively, you can use the zoom feature from the menu. You can zoom in and out as much as you want and restore it to the actual size easily.

Unfortunately, when using this feature (at the time of writing), I found a bug. After you zoom in or out and hover the path, it won’t follow the shape’s actual position. To fix this, you can restore it to the actual size. If it still doesn’t work, just reload the page.

Import And Export Files

To import some files, just navigate to File >> Open menu. You can only open/import files in SVG format. As stated in the basic doc, the import feature uses FileReader API. If you want to export the design itself, you can download it as a SVG or PNG (this uses canvas API).

DropBox Sync

One of cool things I found in Mondrian is its ability to sync with Dropbox. With this feature, all of the SVG files in your Dropbox are easily accessible and displayed through the “Open” menu. To activate this, you must firstly sign in to the app. Easily sign up by clicking the top right button.

Once you have signed in, you can navigate to File >> Connect to Dropbox… and allow the app access to your Dropbox.

Final Thought

Besides being free, Mondrian is also open source. If you want to install this app locally and use it offline, head over to the Running the app document to see how. With Mondrian, now you can design any SVG logo or icon whenever and wherever you want.

Dapper Deconstruced: Lawrence Schlossman: The Four Pins Editor in Chief shares his style know-how, boundless wit and sneaker tips in honor of the launch of the Todd Snyder for PF Flyers collection

Dapper Deconstruced: Lawrence Schlossman

Those with interest in men’s fashion will have most probably read (and laughed at) Lawrence Schlossman’s words. Serving as Editor in Chief of Four Pins—the most tongue-in-cheek fashion blog around—as well as co-hosting his own Continue Reading…

Cool Hunting

Letter to the editor: ‘The Ercoupe flies beautifully in crosswinds’

Several weeks ago, I put together a photo essay of some of the many hundreds of cool aircraft I saw at EAA AirVenture, an annual air show in Wisconsin that counts itself as the largest in the United States. One of the planes I mentioned was the Ercoupe, an unusual model from the middle of the 20th century that dispenses with the foot pedals normally used to control the rudder; instead, the Ercoupe controls it automatically based on the pilot’s aileron input. I also mentioned that the odd configuration could cause trouble in a crosswind landing where rudder authority is critical, but reader (and Ercoupe owner) Rich Green wrote in to disagree:

Hi Chris — your article on 14 interesting aircraft at AirVenture was great. You mention that…

Continue reading…

The Verge – All Posts

Celebrating 20 Years of Juxtapoz: We speak with Editor in Chief Evan Pricco ahead of the publication’s anniversary show, Art Truancy

Celebrating 20 Years of Juxtapoz

Founded by artists and collectors back in 1994, Juxtapoz magazine has remained a significant publication and a true champion of the contemporary art world—and those who keep it spinning. Created as…

Continue Reading…

Cool Hunting

Meet your new favourite text editor

Read more about Meet your new favourite text editor at

Launched in 2008, GitHub has become the code storage and development site of choice worldwide, and so any new tool it releases is going to cause a big stir. That’s certainly been the case with Atom. Dubbed “a hackable text editor for the 21st Century”, it’s designed to be simple to use out of the box, but also easily expandable using any of 800 packages.

Creative Bloq

A Look Into Atom: Github’s New Code Editor

Github, a popular git repository that hosts a ton of open source projects, has recently announced a new code editor called Atom which shook the “code editor battlefield”. The official announcement stated that Atom began as an experiment – likely 6 years ago according to this tweet by one of Github’s founder – which then became part of the internal tools in Github; in fact Atom is built using Atom itself.

Atom is claimed to be extremely hackable, extensible, yet could still be user-friendly to entry-level users. At the time of the writing, Atom is still in beta stage and available as an invite-only app. It is also currently only available for OS X platform – though the Windows and Linux version is reportedly in progress. I’ve got my hands on it, and I would like to walk you through through this app, see what that it has to offer.

Let’s check it out.


If you are a die-hard Sublime Text user, the first thing that may raise eyebrows when Atom is launched is the UI. Take a closer look at the following screenshot – can you spot which one is Sublime Text and which is Atom?

Answer: The left is Sublime Text, and the right is Atom.

Aside from the look, Atom has also borrowed some Sublime Text’s symbolic functionalities that you may be familiar with, for instance: Command + T will allow you to switch between files, and Command + Shift + P to launch Command Palette.

You can also do a so-called auto-pairing quote and parentheses to select code block, and selecting multiple-line simultaneously, just like in Sublime Text.

But, I found that Atom is not yet capable of enclosing tag automatically. Sublime Text is quite smart, it can find matching tags to close just by typing </. Another feature that also I caught absent from Atom is Wrap Selection, where you can press Control + W and define the tag to wrap selected area, or Control + Shift + W to automatically wrap it with a p tag.

Language Support & Syntax Highlighting

Code Editor is created to help developers write codes correctly with the help of proper code syntax highlighting. Without this capability, a code editor is nothing more than just a Text editor, which is pretty pointless.

Atom supports many prominent programming and web languages including Sass and LESS. In Sublime Text, we would have to install third-party packages, before it can handle these two.

To view all in the list, click on the Language indicator of your current document at the status bar, as shown below.

Atom Packages

Atom is extensible with Packages. Each week the number is growing fast; it has more than 500 packages at the time of this writing. Below are my top 5 packages to get:

  • Color Picker – a color picker that is able to generate HEX and RGBA color.
  • JSHint – an inevitable tool to make your JavaScript code "error-less".
  • Autocompletion – it is a surprise that this kind of functionality is not integrated in the core.
  • Prettify – code also should look pretty.
  • Rdio – listen to the Rdio with it.

Installing Packages

We can install Packages through Atom; launch Package Control, then search Install Package. Unlike Sublime Text, which load and show Packages at the same dialog window, Atom will redirect you to a new screen.

In the new screen, you can see the Packages shown like in the App Store or Google Play, each with an Install button. Atom features a few of the Packages, but you can search for the rest through the search box.


Github is built around Markdown. The first README file that would be picked up and shown in the repository is one that is written in Markdown. Github Pages is built with Jekyll, and Markdown as well. So it is reasonable to integrate Markdown into Atom.

You can try writing a few lines of Markdown syntax, hit Control + Shift + M, and you will see how the syntax will turn out.

Git Integration

Atom added a few helper functionality for those working with git. As you add some additions, or make changes in your git project, you will see a color mark as shown below (it’s barely noticeable). In Sublime Text, this kind of feature can also be achieved using a plugin named GitGutter.

I’m expecting Atom to be tightly integrated with Github in the next few releases so we might be able to perform Commit, Pull, and Push git repository right from Atom – that would be a really nice feature addition.

Chrome Dev Tools

Atom is built around Web technologies – HTML, CSS, and JS – and is designed to build the Web. So, why not add Web Inspector in it too. If you hit Alt + Command + I, you will see the Chrome Dev Tools.

These Dev Tools could help you customize Atom as well as develop themes or packages for it.

The Settings

The Settings in Sublime Text, which irks many people, is done through plain JavaScript objects. Despite the very close resemblance to Sublime Text, Atom offers a nice GUI when it comes to Setting configuration, as you can see below.

You can change the font size, the theme, the color highlighting scheme, and even personalize the keybindings.

Final Thought

Atom looks really promising, and I can see it could be a serious contender for Sublime Text. By having similar UI, features, and keyboard shortcuts, it should not be difficult for people to switch over to Atom.

Interested to try Atom? Grab your invitation in, or mention me in Twitter @tfirdaus, I have 2 invites left.

Lastly, I’ll look forward how Atom goes in the future. Will it be the next great code editor to replace Sublime Text?

WordPress WYSIWYG Editor Customization

If you’re using some html tags that are not included into the WordPress editor toolbar so why not to add them? In this blog post you will info on how to add buttons using functions.php or some third-party plugins.