Recents From My Desk

Moving Away From WordPress??

21 Nov, 2018 @ 18:32

What gives?  Why would I spend all this time on WordPress and talking about how I want to build a great gallery plugin for it, spend the time and effort into building the theme and such to move on??  Move onto where as well?

First let me say that WordPress is an amazing tool and it is still very relevant to marketing myself as a developer, and a useful tool for customers due to its extreme popularity, but I wanna move away from PHP for one thing, and I wanna play with the hot new tools, and learn some like bigger scale architecting of websites/apps that I feel WordPress just can’t offer without load balancing servers.  Also provide myself a great new journey and a chance to dive deep into something again.

So the goal….. Next.JS.  Next.JS is a very powerful framework that works with ReactJS, and in the case of my new website adds GraphQL which BTW is very awesome and soon as the new site is launched i’m going to be going into a lot of depth on it.  Other tools being used:

  • Next.JS (ReactJS Framework)
  • STRAPI (Headless CMS)
  • Apollo Client and server (Data Storage)
  • GraphQL (Query Language)
  • Styled-Components (CSS in JS)
  • Pop Motion Pose (Animations)
  • Stripe (Payments)
  • TravisCI (continuous Testing and deployment)
  • Sentry (Error Reporting)
  • Many more yet to be determined exactly

My goal is to make this all very modular, but yet easy to manage all of my sub-domains eventually and provide a lot of cool tools for future customers, be on the lookout for it though, everything is still being nailed down.

State of Change

2 Jun, 2018 @ 17:55

One that this site has proven so far is that things are in a constant state of change.  What do I mean by this?  It seems on a daily basis I’ve learned some new thing, or better way to build a page, or even just added some content!  I have no idea how many people actually come on here on a daily basis but I’m sure it’s a surprise each time.

Gallery

Today’s project though has been a general cleanup of the gallery home page.  Its still not done but functionally it’s much better.  Before when you hit the home page of the gallery you had a few buttons to select a category, then the entire page refreshed and loaded in the appropriate ones, and then to change categories required another refresh of the page.  Now though there is a single load and clicking the buttons merely uses jquery to fade in and out non-appropriate results.

The drawback to this approach though however is page load time.  On the first load right now there are 130 requests being made, with 2.0MB transferred.  DOMContentLoaded takes 4.16s and the full load takes 4.8s.  While that seems reasonable to consider that most users navigate away after 3 seconds, so I’ve already lost them, and that’s on a pretty decent internet connection.  After the first load, though things start to look a little better thanks to caching, with 130 requests also being made still, 133KB transferred, and DOMContentLoaded taking 3.13 seconds with a total load time of 3.93s.  Not much faster but hey we didn’t transfer nearly as much data so that’s a plus for those not so fortunate.

Granted now though we have to stop and consider that this is a picture gallery first and foremost, is it reasonable to expect it to take a bit to load? I think so, can things be done to improve this?  Again I think so.  How though?  Part of me thinks that maybe we should lazy load some images using jquery, or skeletonize the images and load when they come into view?  Or maybe just leave it alone and see how it does when content numbers really start rising.

Archives

Next, on my list today was the archives page. still not done of course if you visit the  Archives page but it’s coming along.  As silly as it sounds I’ve always struggled with archive pages even with my previous employer, usually had to be coached through the process, and I think I’m finally getting there with it.

Responsiveness

Whats next after that though?  Maybe some mobile optimizations, everything functions decently on mobile, but just so.  Many things need to be tweaked to display better, but that also circles back to needing a cohesive design plan.

One of the great things I’m enjoying about this project is that for one I’m building the theme from the ground up versus building out templates here and there as needed.  I’m also using newer tech and sort of leaving a legacy behind.  Of course for work, that’s not an option but I want to learn the new tech not how to make it work for old.  I’d love to convert from flexbox to grid, and still may at some point as I hear in my use case for layout it would work wonderfully.

Till next time though, keep those fingers busy!

Gallery Security and features

30 May, 2018 @ 1:35

Security

One of the things I’ve recently been thinking about is how to ensure that galleries and their images are properly secured.  There is more testing needing to be done to ensure its correct but I feel its pretty decent.  When a user clicks a link to a gallery a check is done server side to determine the visibility of the gallery in general, either public, protected, or private.  If an album is a public one, well then we are done and return saying hey yup they are allowed to see and render like normal.  Now if an album is private all I do is check that someone is logged in as an administrator and if so allow the viewing.

Protected albums get a little more complicated but not by much.  This one becomes a two-step process, first checking that there is someone logged in, getting their user ID, and then taking that and comparing against the array of allowed ID’s stored in the meta of the gallery.

One thing that I need to fix and adjust yet though is the gallery images.  More specifically if you know the URL of an image you can view it, that’s not good that’s for sure!  This one does get slightly more complicated though as images can belong to many albums so how do we handle this?  My take so far is that we query for the image all albums that the image belongs to, easy enough considering this is stored in the meta of the image, great we can loop the galleries the image belongs to, and check the visibility of that gallery, then apply the above for galleries to see if they can view it and if so return that image, if not redirect to the gallery home page like I’ve done with galleries.

Features

So one of the things that came to me when I was working my overnight job was ‘What if I create a protected gallery and add people to view it?’  Basically, I want to trigger an email to send to the users I’ve specified when creating a gallery so that they can be informed of it, helps save an email written, especially if there are many people added.  But what if I create the gallery but I’ve not added images yet, I don’t want the person seeing a blank gallery do I?  Now I have to ask, do I trigger the email on publish or something else?

Then I also got to thinking, what if I add another user after the gallery was created?  I need to have an email sent to them but I don’t want that sent to everybody, so now where do I trigger that?  While I do some research I guess I’ll have to leave it as is…. manual.

I’m really hoping that before too long I can release this plugin to the public, I’ve spent a lot of time and effort on it and would love to allow others to use it on their site but there are still some usability things that need to be done.  The one I keep meaning to look at mainly is allowing someone to just bulk add images to a gallery versus one at a time, it gets tedious and is the reason I myself haven’t finished adding images to some of the albums, I just dread it.  For now I’ll keep coding and researching, maybe find some inspiration and finish it up.

Formal UI Plans

27 Apr, 2018 @ 14:02

Greetings readers!  Over the past few weeks as I’ve had time I’ve been working on some of the gallery features that I was talking about in the previous post and discovering more issues as well.  Some security things were implemented, however, there is still more to do on that front.  One thing that’s come to my attention though from my own usage has been the gallery landing page, showing all the galleries were getting to be too cumbersome to both load and display. and not exactly easy to navigate.

The solution I had come up with for that, well temporary solution, was to just simply display a quick list of the categories and from there show the albums, the only problem arising is if a user doesn’t know for sure which category the album they are looking for will be in.  How to solve that issue?  Well, I’m not sure other than I hope I’ve made the categories intuitive enough that people can easily find where they are going.  Like my model kits are all in models, airshows in airshows and so on.

I’ve been putting thought into how to tackle the tag system on the front end, but the display portion is where I’m stuck and the reason behind this post.  Having worked on many projects for work in the past where I’ve been given guidance on the layout based on a design document provided by a design firm or in-house designers.  Before I continue with further development on the site I feel like now is a good time to sit and document up a proper plan not only on components but also full-page layouts.  I want to keep the style I’ve been working towards as the goal, but not be too repetitive about it either.  Maybe see about adding in some sort of visual composer elements as well so that when I’ve got these design blocks done and laid out its a game of drag and drop.  Just wish I had a copy or access to some of those documents still as a reference point on how to tackle this.

UI/UX Part 2 – Or why my gallery plugin sucks!

11 Mar, 2018 @ 22:32

The last time I was here to discuss UI/UX and relating to my gallery plugin I wasn’t sure how I wanted to proceed, how the flow should be to give myself more direction on how to proceed.  I’ve been using my gallery a lot lately, mostly for model kits I’ve been building but I’m very quickly finding some limitations and thing that I knew would end up being a problem later that are now starting to pop up as needing to be addressed.

Issue #1 – Breadcrumbs

At first I wasn’t sure I needed to add such a thing, but very quickly I realized that I have no way of navigating back up to the gallery level without just clicking the top level gallery button on the navigation bar, scrolling back to said gallery and entering again…. not very efficient or user friendly.  Being the clever person I am and knowing that images can belong to multiple galleries I tapped into WordPress code and found the function wp_get_referer().

Great I thought to myself, I’ll just get the page the user came from last as the parent as that will be the gallery.  Using that and another function url_to_postid() I was able to retrieve the post ID of the parent to get the name of that post and display that all pretty and fancy.  Heres what that looks like in case you wondered:

$referer = wp_get_referer();
$parentID = url_to_postid($referer);
$title = get_post($parentID)->post_title;
...
<a href="<?php echo wp_get_referer(); ?>"><?= $title ?></a>

Sounds great right?

Wrong!!!!

If you come from a top-level gallery it works great, but what if you landed on an image page from say being linked to it, then what?  Well go ahead and try, as of this time I’ve not fixed it as that’s why I’m here discussing with you and possibly figure out a solution to this.  If you’re linked in from elsewhere that basically sends you back because that’s what referer does!  Bummer.

Solution:

Sadly I’m not sure yet as the biggest key is, of course, the fact that images can belong to multiple galleries.  Do I ditch the current breadcrumb system instead and implement something else that contains maybe the tags, categories, and galleries the image belongs in?  Revising the layout of the single image page entirely to do so would go hand in hand with that and honestly is something I think needs to happen anyways but that will be discussed in another issue.

Issue #2 – Single Image Layout

So continuing from above brings us to the single gallery image layout itself.  I’m not happy with the layout basically.  I love the polaroid look of the albums and top level but I think once drilled down to the single image-level it just doesn’t work.  Why?  Well, metadata basically.  There are other things that are associated with each image like tags and categories that aren’t visible right now.  As well images can belong to multiple galleries like mentioned above, how do we show that association so the user can say hey I’d like to see more of that gallery?

Solution:

This one seems pretty obvious, however, the UI is the problem.  I need to have the image showing as is with the title and description like current state, but I need to have a meta box or boxes below that show tags, categories, and associated galleries.  But then do I leave the title and description as they are as well or do I go for broke and change those up while I’m at it?

I’m tempted to strip the description and title off and just have the polaroid at the top of the page, with like the paper look below it with title and description, with maybe post-it notes on a sidebar with the metadata.  I might just have to play with it and see.

Issue #3 – Categories and Tags

Categories and tags are a very important part of a gallery, they allow users to filter out data to show just the relevant pieces, but how do I present this and get it site-wide so that users can search anywhere?

Solution:

Researching.

Issue #4 – Gallery Home

The next issue I’ve noticed and that needs to be addressed is the way we are on the home screen of the gallery, how do we say filter by categories or tags?  I need some sort of UI element for this that’s obvious of course and easy to use, but also runs in a similar visual theme.  Do I tack some bar to the top of the page that’s fixed in position to do this? or a sidebar?

Solution:

In Progress

Issue #5 – Gallery Selection

Another issue I’ve come across already and didn’t think about when I first started was what if the number of galleries themselves starts getting insane?  I’m seeing it already with mine where I’ve got a long box and growing of galleries to pick from.  I’m wondering if I can use something like the built-in tag system for this purpose maybe?

Other Things

One of the default behaviors I’ve built into my gallery plugin is that on each page load a single random image is returned from each gallery to show on the homepage.  Personally, I think this can be nifty if you have nothing you want showing period, you know a featured image!  Keeping in mind other potential users of the plugin I need to revisit this and add a featured image field to the gallery, if an image is set then display that period, if there isn’t one, then pick a random one!  Simple right!

Couple other things I really need to dig into and get working already is the ability actually see a list of images in each gallery and go to their edit pages from that as well as manage information on them, a what I consider advanced part of WordPress that I just haven’t tackled yet.  Another being able to add an image from within a gallery rather than the gallery-image to avoid some clicking about.  On the opposite side of that gallery images need to be able to create a gallery from that page rather than abandon work to go create one then come back.

For now though I think I’ve got enough food for though and things to research.  Till next time!

 

And A Happy New Year!

1 Jan, 2018 @ 11:20

Sorry there hasn’t been new content.  It sucks but new job, new shift, getting used to it all again.  I’ve got a google home mini now that i’m playing with and hoping to get integrated really soon into my home automation system.  See what i can do with it, what things it can do for me to make my life easier, and just because i can!

Merry Christmas

26 Dec, 2017 @ 17:32

Just wanted to drop by and wish everyone a very Merry Christmas this year.  Look towards some new projects both programming and in the gallery coming soon!

UX/UI and why its important

23 Nov, 2017 @ 16:31

One of the things I’m learning while building on this site and that is new to me is UX and UI and why it’s important.  What brings this to mind?  Well if you head over to the gallery page you can see an example of what I’m currently walking through.  Once a user clicks into a gallery all of the images appear scattered across the page, clicking them brings up a popup with title and description of the image.  So whats the problem you might ask?  In short, how to link to the image.

Method One

So I’ve got a couple ideas on how to handle that.  First thought is to scrap the popup and instead have the click take you to the page with the single image.  There I can display the image much larger, format the text how I want etc, and best of all the browser URL reflects the link to that single image.  Perfect!  Or is it?  One of the things I want is to be able to see all the images in the gallery and I personally feel that clicking the image will defeat that purpose as you can’t view them all in full size without a lot of navigation back and forth along with increase page load times significantly due to that back and forth navigation.

Method Two

The next idea I had was to have the popup box update the browser URL to contain the link to the image so that users can simply copy paste that, but then what if they think they are copying for the album and not the image?  Another problem is that if someone copies the link from the popup, pastes into a browser and opens in a new tab the visuals will be different as we will be back to the single images page, not ideal.   Naturally, my thought process said well what if we don’t use the single image page at all?  What if we only use the gallery with the popup and rather than link to the image itself we just append something like the ID of the image to the URL that updates with the currently opened image, and when pasted causes the lightbox plugin to open the image in the URL.

Which to Choose?

Long story short?  I’m not sure.  I like the idea of method one a little more but there are definite drawbacks,  method two is a little easier I think as far as implementation but neither really have me going yeah that will work.  Maybe it’ll come to my in my sleep and this entire post will be moot.

Gallery plugin – The beginning

1 Nov, 2017 @ 1:25

On the journey to building out this website I tried a few different plugins for galleries, Nextgen Gallery being one of the most popular out there.  But either I didn’t understand their structure, or it just wasn’t capable of handling what I was wanting to do.  So naturally, as a programmer, I turned to the next best thing….. re-inventing the wheel.  When I set out on this task I had a few requirements:

  • Easy to use
  • Ability to have images appear in multiple galleries at the same time
  • Protection system including public, private, and protected galleries.

The first bullet point is still a work in progress, there are things I’m not happy with, how the interactions between the pages should work and look, but that’s an ever-evolving thing anyways and I’m sure as I go along more I’ll figure that out more and more.  Right now there are two custom post types created with the plugin, a Gallery and Gallery Images.

Galleries

Galleries have a few simple properties to them, a visibility setting (the protection), and user visibility when setting to a protected gallery type.  Each gallery also has the standard categories meta field, but it’s not currently utilized in any way by me, though plans are in to do some filtering with that.  Also included are tags, and the standard editor, of which aren’t used right now either, but will be.  I’m going to leave it to theme designers to decide how they’d want that data to appear.  Finally still in the works is to show a list of images associated with that gallery.  I’ve not reached that stage yet because I’m not really sure how to add a standard backend looking table, research to follow on that.

Protection of the galleries itself is pretty simple when in public mode the gallery is visible to all.  Private mode restricts the album to only users with the administrator role, although I plan on adding configuration to allow that level to be set by the user.  When an album is placed into protected mode another meta box appears and is populated with users of the “client” role where you can then select who should be able to see this gallery.  Initially, I was going to use and standard WordPress role for this, but then the more I thought about this with sites that allow users to register freely it might get rather unwieldy.  I might come back to this later and have it set by looking up user instead to populate the list, but haven’t settled on it yet.  Again configurable down the road.

Gallery Images

Turning my attention to the gallery images is a similar story.  Fields included in it are the featured image field, where users will attach the image to the post, but it’s not something I’m happy with as of right now and intend to address going forward, but it works, and its built into WordPress, allowing me to iterate rapidly and get core functionality down.  From there a list appears on the sidebar where you can pick any and all the albums you want this image to appear in.  This part was crucial to me as there are times I’ll want images to appear in multiple places because of subject matter.  Finally, i’ve included the typical title and editor fields, the title is the caption for the image and editor space as a description. both again up to the theme developer on how they want to use them.

Whats Next?

As the plugin continues to grow and gain functionality my main concerns are displaying the list of images in a gallery, and showing on the index pages for each relevant data like how many images are associated with it, the visibility and such.  From there I’d like to add the ability to create a gallery from the images page as currently, this isn’t possible directly.  Then maybe some way to add pictures to the gallery from within the gallery with multiple uploads possible.

For now though enjoy a couple pictures of the backend:

To see it in action head over to the gallery located here.

A Status update

30 Oct, 2017 @ 17:16

Been awhile!  Many things have happened, and much more to come.  My site is finally back online after a few month hiatus, of which I was certain I lost the site and what little content there is.  With a little luck and some help from the engineers at Amazon, I was able to recover and set up my server proper.  The biggest difficulty of the process was relating to payments, and needing to verify who I was, but in the end, it was all good.

Going forward from that event though I’m hoping to get content up more regularly, both of programming aspect and other technical forms, including my tinkering with home automation and possibly in the future some Arduino projects.  The first step though is the completion of this very site, or at least more content and making it more mobile friendly.  I really want to focus on that gallery page funny enough, lots of work I want to share with everyone.

Till next time though, happy coding!