Recent Updates 2014-12-13

It's been a hecktic couple of months!

I've been keeping very busy — life has been more than a little eventful and even crazy at times. There's much to cover in a single post, and I do not want to get into too much detail anyways.

My personal life


I haven't shared much about me yet on here, and that is very much intentional. That's just not what I created this for.

Still, life has been very eventful and a lot has changed in recent months. For starters, there was a breakup, and that's not something that has happened very often or that I (and I would expect anybody) enjoyed very much. That's actually quite old news now.

My younger brother got married last month. The weather was horrible and there were plumbing issues at one of the worst times possible. To describe the events and circumstances would make it sound like it was a horrible experience for everyone, but everything that went wrong just made it all the more memorable, and pretty much eveyone was able to laugh about a toilet being in the front yard for wedding pictures.

Family Picture @ the wedding

Up until that point, I had been living with my brother, but I couldn't exactly stay living with the newly weds. So, I ended up moving to Bakersfield in a fairly nice little apartment. Free cable, fast and not terribly expensive Internet. There's even a pool. Plus, cable is free (not that I care much since I don't even have a TV at the moment). Overall, I'm pretty happy with the move, and this apartment is generally pretty great.

The 9-5 (well, 8-4) Job

I've been working on one major problem now for a while, and it's starting to be put to use. There have been lesser acheivement along the way, but it's now reached a new milestone.

Development on this particular project will probably be going on for years to come. It's meant to automate and standardize several processes which have been done slowly and manually up until now. Lots of API integrations, several databases, and a long list of features both already implemented and yet to come. It is easily the largest project I have ever worked on, and it has been a very educational experience.

My Website (That thing you'e reading now)

What can I say… I'm an insomniac, but I try to be productive.

In roughly chronological order:

  1. Added a namespace to all my PHP classes
  2. Core classes are now Git submodules
  3. Updated several functions to be less error-prone
  4. Several large and small optimizations to both speed & security
  5. Added comments and emails
  6. Mixed in some GitHub integration
  7. New Parser class that reads INI, JSON, & XML
  8. New icon system (same icons, just better method)
  9. Re-write of my Content-Secuity-Policy reporter
  10. Better compatibility in JavaScript

A few highlights from the above

Comments have been in place for some time now, but now I get notified by email when it happens. I'm trying to decide how I want to handle emails to those who comment. Do I want to verify the email address before making the comment visible? Should I allow users to create accounts (I've considered comments being enabled to all, but requiring registration for adding HTML). How and when do I want to notify commenters that there have been replies? For all of these, I could easily do exactly what everyone else does, but I just don't think it's necessarily the best option.

I also added some GitHub integration. I'm storing commits and Issues into a database and allow guests to see what I've been working on. See my many links in the footer.

Icons are the same, only different. I'm using all of the same images, but I've updated the method I use to put them on the site.

SVG has this wonderful feature that allows for you to conenate several images together (as <symbol>) and to then pick out individual images(via <use>), rather similar to a sprite in other image formats. As always, what makes SVGs so great is that they usually have very small file sizes and look great at any size or resolution.

The source file would look something like this

<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="someId" viewBox="0 0 150.97 147.24187">
...standard SVG stuff here (<g>, <path>, etc.)...
</symbol>
<symbol.../>
</svg>

There are then two methods of using all of these images; inline and externally. The markup for either method is the same, but using an external file requires both a source file URI as well as the ID of the <symbol> to use.

Tip: If you're going to use the inline method, be sure that the main SVG is not visible by whichever means you prefer (e.g.  display:none;)

<!--Use from an inline SVG-->
<svg>
<use xlink:href="#someId" />
</svg>

<!--From an external file-->
<svg>
<use xlink:href="//example.com/symbols.svg#someId" />
</svg>


Example of using SVG symbol/use
<svg><use xlink:href="images/icons/combined.svg#home" /></svg>

I decided to combine all of my SVG icons into a single file and use the external method from above because the inline method means an increase in page size wherever they are used, while the external method allows for a single resource to be used as needed and it will even be cached.

Since I don't want to write all of these icons in a text editor and I'm not aware of this being in the capabilities of Inkscape, I wrote a function to do this for me. I store a set of icons as an array in JSON along with the path to the output file, and that makes it extremely easy to add/remove icons as I please.

See Gist here.

The road ahead

As far as creating content for my website, I'd like to do a series of short and simple posts on things like new HTML elements, some simple JavaScript samples, and maybe do a little more on some CSS tips. I'll probably end up doing some vlogging as well if I can find a subject appropriate to the format.

I have big changes in store for the code as well.

  • Use my SVG <symbol> & <use> as background images (perhaps as a data-URI)
  • I'd really like to do some more work in the design of my website
  • Update comments as discussed above
  • Add something to parse Markdown such as PHP Markdown
  • Implement indexedDB and <template>s
  • Build Firefox & Chrome Apps
  • Git integration (push, pull, merge, etc though the browser)
  • Make a WYSIWYG menu as a <menu type="toolbar"> for comments and writing posts