Embedding Source Code in WordPress

In efforts to post source code to this blog I have found three very quick to implement solutions.  Discussed will be the pros and cons of each and how I have made my decision on which to use.  The three contenders are:

  • PasteBin
  • github:gist
  • SyntaxHighlighter

Pastebin

Visit Pastebin

This is in here just for comparison's sake. Gist provides all the same features in a much more intuitive and usable manner. However this service is still very straightforward.  This is a free online service which hosts text of any kind and offers a huge variety of languages which are supported.  You also have the ability to save both private and public pastes.  The options for embedding include a Javascript and Iframe solution.  While there appears to be a way to create a new version of a same file I have had problems even trying to view the old versus the new version. github:gist

Example:

github:gist

Visit gist

From the makers of the version control we know and love to be as git gist.  This of course has the same feel as github which is comforting(much less cluttered than Pastebin).  Just like git this service is free to use! Gist has syntax highlighting for all the same languages as github (so any language one will need).  The embedding code is Javascript based.  What really stands out with gist is the ability to add multiple files for a single gist. So for example in my post Easy and Noticeable Mobile Usability I put all three of my separate code snippets in on place on gist which keeps things nice and organized. As one would expect this service also does version control in a easy to follow manner.
Example:

SyntaxHighlighter

Get the Plugin

This last solution is actually a WordPress plugin.  This is by far the quickest and easiest way to just get code into one's posts.  It is a standard plugin install and once installed one must only wrap the code they want in the post in a source code tag like so: [sourcecode language="css"] code here [/sourcecode]. (note how the language is defined for the proper highlighting). I have changed the plugin setting to use version 2 this allows source code to wrap preventing a scrollbar from being visible.

Example:

Conclusion

I am leaning away from Pastebin and towards gist.  I believe gist has the most intuitive interface of the two and it allows to group multiple files in a single gits. Although I don't intend to use it much the version control makes sense and is easy to traverse.  I also find it easier to update codes for a post in the gist environment as opposed to working in the HTML editing section of the WordPress editor. So it is all my code in one place, easy to use and easy to drop in to a post.


Easy and Noticeable Mobile Usability

Here is a really simple way to improve usability for those on mobile devices. It is far less noticeable when done correctly and highly annoying when not done!

If you are working on a large web application, often the first step for users is a log in form. Short of any interaction users may have with homepage content logging in will be their first interaction with the page. If they are on a mobile device there are a few common annoyances that are very easy to fix. These are auto-capitalization and auto-correct (spell-check), both of which are enabled by default for a standard text input field.

Bad

Users will see the following when typing their username when a text input is at it's default:

Better

These attributes can prevent the mobile browser from doing this:

Best

Here is how we can easily correct this is to use the following attributes in the code for the input field:


This works great for input fields however we can shorten this even more by just using the HTML5 type attribute set to email. I like this because it is another good idea to allow users to input both a username and email to login. Not necessary but can be useful if there is no reason to explicitly need a username to login. Also the type set to email does not require an email and the @ symbol will be added to a mobile keyboard for further ease of input. Highlighted in red we can see that there is now no auto-correction or auto-capitalization. The @ symbol is now also available if a user would like to use their email.

There are many new and old attributes that can be used to make forms easier to use and customized: http://www.w3schools.com/html5/tag_input.asp

A few to note are:

  • autofocus (allows the field with autofocus defined to have an active cursor)
  • place holder (text to be displayed while a field is empty)
  • required (denotes a required field for form submission- supported browsers will catch this)
  • type (many new types such as email, password, url, etc.)

Brand New Blog

Yes I know this is yet another development blog. Why read you may ask? I am a front-end developer who has 3 years of experience in both web design and development. My goal with this blog is to provide a resource to other designers and developers.  I plan on posting about techniques, workflow and small tips & tricks.

Also post with practicality in mind that technologies that need to be used need to be quick and easy to understand and implement.  Such a way of learning is how I work on a day to day basis.  All of a sudden a new technology have absolutely no experience with is needed and while consulting other developers is sometimes the solve. Time availability of other developers can be sparce as well as their ability to convey their understanding of a technology.  So I hope to chronical my experiences with new technologies in hopes that it will help others through the process and avoid mistakes or misunderstandings I have encountered.

As my interests cover all aspects of web design and development I will be posting about all things from HTML, CSS and Javascript to PHP, MySQL and Git (or anything else I come across or just find intriguing and/or exciting).  As an audience may build I will tailor my posts to the audience and do my best to cover all topics thoroughly.  I am going to start off with providing what I have found to be some of the most valuable resources out there which I consult regularly. This includes resources such as  video tutorials, ebook, code samples, reference documentation and my favorite designers and developer to follow.