TagHTML

Hash 1.1: IRC/HipChat-like chat system built on PHP, jQuery, HTML, & CSS

First off, this is my first post about Hash, a “secret” chat project I’ve been working on to replace my personal IRC woes (mainly IRC logging). Don’t get me wrong, I love IRC, but I also love HipChat, but I hate that HipChat list closed….you get the point. Plus I needed something dead simple, no logins, no signups, just chat…

Hash is a simple IRC-like, HipChat-like (mainly in that it has persistent chat), (PHP, jQuery, HTML/CSS)-based chat system. So anyone can use a Hash install to use.

Screenshot showing Hash collecting nick and hash names

Here’s how it works. All you do is create a room (which I call a hash, because you hash things out), and pick a nick. No login. No password, in fact two people (at the moment) could use a single nick or login as many. Then, chat. Notifications let you know when something new is said. Chat history is persistent.

It’s developer friendly, which only really means it’s easy to create rooms, share them, and assign people nicks because the chat uses ?hash=&nick= to start the person loading the hash off with a hash and a nick. Easy for inviting clients into chat rooms by just giving them a link.

Hash 1.1 will continue to make small improvements to make Hash more useful. I have been using it, and it appears to be stable enough to use, again for private purposes. Not sure about public use yet, but I need it for a few new things, and so 1.1 will get those features.

You can try out Hash on my site where you can make a hash and start chatting away with someone else. I’d love to see people use it and give feedback.

Want to help? Check out Hash on Github. There are some issues that need some help.

ShortcodeML

First of all, this is a proposal. I just want to solve a few simple problems with this:

  1. Ticket #25295
  2. Personal experience with clients using WordPress can’t get how to use <br> in HTML mode, but can use a shortcode like [br] or [break], or [break clear-left] better
  3. I want to wrap a <div> around an element, but possible cuts and paste’s can erase it because the code isn’t seen in visual
  4. When I do add a <div style="float:right"> around an element in the editor, it actually happens in the editor. Sometimes this is nice, sometimes this sucks

…this seems like a solution to some of these issues because I have used these kinds of solutions before in themes and plugins to help clients and myself do more HTML-y things in the editor. I just want to build an all-in-one solution.

Follow #shortcodeml on my blog for updates.

Let’s see if I can sort this out. Because of ticket #25295, and the fact that 3.9 will most-likely not have the “Advanced” tab when editing an image’s properties, we will sadly no longer to be able to click on an image, go to Advanced, and, for instance, add class names like  .aligntop to an image.

I don’t think this should be done in the Advanced tab anyways. Sure, for images, it’s a quick way to do it, but if you really want to add a class to something, you’re going to use the text mode to do it (especially for something like a div or ul).

This ticket gave me the idea to write something close to bbScript, remember bbScript?

“Wouldn’t it be nice to just [code]...[/code]?”

Let’s add on to the image problem and say that, yeah, we also can’t add a break return without sending the user into text mode in the editor and having them write <br>, which when switching back to Visual isn’t apparent that it’s there. It’s kind-of invisible. What if we could  [br] instead, or [break], which is more understandable and readable, or  [break clear left] to also clear left (we should also be able to [br style="clear:left"] because some of us are more familiar with HTML. It’s also hard to, in the editor, wrap <code> around a piece of text. I’m currently using a plugin, but wouldn’t it be nice to just [code]...[/code]?

That’s where the idea of a plugin, that I’m calling ShortcodeML, would allow us to do more HTML-y things in the editor and solve our ticket problem because we can just [span class="aligntop"]<img />[/span] or [class="aligntop" block]<img />[/class]. And for an intermediate WordPress user, this isn’t HTML, because you can see it, and it’s readable, and it’s a shortcode.

Organize the Idea

I didn’t want to go find some large list of HTML tags and kill myself coding each one. I wanted to do something more graceful and simple that solves the problems. First off, we only need a few HTML elements (I’m open to additions) to work with in the editor (tag|readable):

[p|paragraph]

[div|divider]

[span|inline]

[code|inline-code]

[pre|block-code]

[br|break]

[hr|horizontal-rule]

All of these only need to accept a few helpful attributes (attribute|readable attribute):

[... class|classes=""]

[... style|css=""]

[... id=""]

Data attribute can be handled like:

[... data="value", data-selector="x"]

Gives us... <span data-x="value">...

We are also going to need some handy quick writable tags where "..." below are any of our tags above. Some elements may not need a "tag", so "..." will not be included:

[... clear-left|right|both]

Gives us...: <... style="clear:left|right|both;

[clear-left|right|both]

Gives us...: <span style="clear:left|right|both;

[hidden]|[inline]|[block]|[inline-block]

Gives us...: <span style="display:none|inline|block|inline-block;

[... inline|block|inline-block|hidden]

Gives us...: <... style="display:inline|block|inline-block|none"

[class='classes classes2']

Gives us...: <span class="classes classes2"

Some examples:

[paragraph clear-left]...[/p]

[clear-left]...[/clear-left]

[inline class="classname"]

[divider inline clear-left css="margin-top:20px"]...[/p]

[break clear-both hidden]

[class="aligntop" block]...[/class]

[class="aligntop"]...[/class]

So, that's my idea and what I'd like to start building. If you have any feedback, ideas, modifications, whatever, please comment!