Category: Blog

Responsive HTML Tables

If you have ever built a webpage that includes a wide HTML table, you have likely ran into the problem of how to make it display in a usable way on various common view port sizes. I have researched ideas to solve this but I haven’t been 100% happy with the solutions I have found. Usually there is some facet of a good webpage that is not being satisfied such as semantics, accessibility, or usability. I also don’t like to install additional JavaScript libraries unless absolutely necessary.

I have come up with my own solution that to the best of my knowledge I haven’t seen elsewhere. The following solution discussed is specific to WordPress but the concept can easily be adapted to other platforms.

Summary/Details of Solution:

  • On the template itself in PHP, it outputs 2 copies of the table. One for large view and another for small. The small view is actually a series of individual tables.
  • The large and small table displays are visible based on the visibility classes of whatever front end framework you happen to be using. In my case I am using Foundation 6, but this can easily be adapted for use with Bootstrap. Custom visibility classes can also be used too.
  • I feel the small view of the table display presents a more semantically correct HTML table structure compared to some of the other solutions I found online
  • If images are being displayed in table cells there is no concern for images being downloaded twice (once for the large table view and again for the small view). Once the browser downloads the image the first time, it will be cached in the browser and won’t be downloaded again (as long as the file paths are the same)
  • No need for additional front end libraries to handle responsive tables
  • This approach does have time complexity (on server side PHP code) of O(2n). On the server side, ‘the loop’ for the table data is being executed twice (once for the large table output and again for the small). It is not exactly double the execution time though. Once the WP_Query object fetches the data results, the data will be cached for the second iteration of the loop.
  • This approach does result in additional HTML being sent to the web browser. This is pure HTML text and will have a negligible effect on page load time in most cases
  • This approach can also be adapted for static tables.

Here is the template code. This shows a simple example and can be adapted for your specific needs:

<h3>Responsive Table</h3>
<div class="show-for-small-only" >
  <!-- 'show-for-small-only' is a utility class for the foundation 6 framework which only displays on small view ports -->

  <?php
    
    $args = array(
      'post_type'      => array('post'),
      'posts_per_page' => -1,
    );                  
    
    $post_query = new WP_Query( $args );

    if ( $post_query->have_posts() ) {
      while ( $post_query->have_posts() ) {
        $post_query->the_post();
        ?>
          <table>
            <caption><?php the_title(); ?></caption>
            <tr>
              <th>Post Date</th>
              <td><?php the_Date(); ?></td>
            </tr>
            <tr>
              <th>Post Status</th>
              <td><?php echo get_post_status(); ?></td>
            </tr> 
            <tr>
              <th>Post Type</th>
              <td>
                <?php echo get_post_type(); ?>
              </td>
            </tr>
            <tr>
              <th>Featured Image</th>
              <td><?php the_post_thumbnail(); ?></td>
            </tr>                           
          </table>
        <?php
      }
    } else {
      ?>
        <p>No posts to display.</p>
      <?php
    }

    $post_query->rewind_posts();

  ?>
</div>
<div class="hide-for-small-only">
  <!-- 'hide-for-small-only' is a utility class for the foundation 6 framework which only displays on view ports larger than small -->
  
  <div class="" style="max-width: 100%;overflow-x: auto;" >
    <!-- The 'large view' table is wrapped in a horizontally scrollable div. This accounts for any edge cases where the table is wider than the container, but the small view port hasn't been triggered yet. -->
    <table>
      <thead>
        <tr>
          <th>Title</th>
          <th>Post Date</th>
          <th>Post Status</th>
          <th>Post Type</th>
          <th>Featured Image</th>
        </tr>
      </thead>
      <tbody>
        <?php
          if ( $post_query->have_posts() ) {
            while ( $post_query->have_posts() ) {
              $post_query->the_post();
              ?>
                <tr>
                  <td>
                    <?php the_title(); ?>
                  </td>
                  <td>
                    <?php the_Date(); ?>
                  </td>
                  <td>
                    <?php echo get_post_status(); ?>
                  </td>
                  <td>
                    <?php echo get_post_type(); ?>
                  </td>
                  <td>
                    <?php the_post_thumbnail(); ?>
                  </td>
                </tr>
              <?php
            }
          } else {
            ?>
              <tr>
                <td colspan="6" >
                  No posts to display.
                </td>
              </tr>
            <?php
          }
        ?>          
      </tbody>
    </table>
  </div>
  <?php
    wp_reset_query();
  ?>
</div>

And here is the output it produces in this table about Web Rockstar posts. Try resizing the window to see the responsiveness in action:

Responsive Table

WP Notes Widget PRO Launched
Post Date November 1, 2017
Post Status publish
Post Type post
Featured Image
Responsive HTML Tables
Post Date October 7, 2017
Post Status publish
Post Type post
Featured Image
Coming Soon – WP Note Widget PRO!
Post Date September 8, 2017
Post Status publish
Post Type post
Featured Image
RegEx for North American Phone Number
Post Date August 30, 2017
Post Status publish
Post Type post
Featured Image
Create a Good Web Presence for Free in Under 2 Hours
Post Date July 29, 2017
Post Status publish
Post Type post
Featured Image
Title Post Date Post Status Post Type Featured Image
WP Notes Widget PRO Launched November 1, 2017 publish post
Responsive HTML Tables October 7, 2017 publish post
Coming Soon – WP Note Widget PRO! September 8, 2017 publish post
RegEx for North American Phone Number August 30, 2017 publish post
Create a Good Web Presence for Free in Under 2 Hours July 29, 2017 publish post

Coming Soon – WP Note Widget PRO!

WP Notes Widget PRO will be available in the next few weeks! Take a look at some of the features you can look forward to:

* Note Categories
* Shortcodes
* Insert notes in posts, pages, and other post types (not just widget areas)
* Order notes in ascending or descending order
* Ability to remove all branding and callouts in WordPress admin

Sign up to the mailing list to get notified when WP Notes Widget PRO launches. In the mean time, you can take a look at the following screenshots for a preview. Click on image for larger view. To exit full image view press ESC or the ‘X’ in the top right corner.

Position notes horizontally

Position notes horizontally and embed them in the post/page content area.

Position notes vertically and embed them in the post/page content area.

You can still create notes as sidebar widgets and use them in conjunction with post/page note displays.

The 'display notes' tab in the shortcode editor modal window. You can choose which individual notes to diplay.

The 'display notes' tab in the shortcode editor modal window. You can choose a note category to display all notes from that category.

The 'font style' tab in the shortcode editor.

The 'general settings' tab in the shortcode editor.

The 'shortcode settings' tab in the shortcode editor

The 'visual settings' tab in the shortcode editor

The Notes widget is still present in the PRO version. The ability to select notes from a category has been added.

The listing of all the notes in the admin.

Managing the note categories in the admin.

General default settings.

Editing a note.

An 'Add WP Notes' button is present at the top of all editors. Click to open the shortcode editor.

RegEx for North American Phone Number

A short and sweet post about regular expressions for north american phone numbers. For a recent project, I needed to implement HTML5 pattern validation for a text input. This text input will capture a North American phone number. I found many examples that validated for pattern, validating examples like:

  • (543) 345 2345
  • (143)-643-3456
  • 6434552345
  • (511)3452345
  • 765-345-2345
  • (543) 145 6445
  • …and so on

but none that also validate conceptually. You may not be aware, but north american phone numbers have certain sequences that are restricted:

  • first digit can’t be 1 (this is reserved for optional country code)
  • second and third digit can’t both be 1 (which makes sense, a number can’t start with 911, 411, etc since it will trigger those specialty numbers)
  • fourth digit can’t be 1

all of the example regex’s I found did not account for this conceptual validation. I created my own that accounts for this. You may want to use this and adjust as needed for your specific needs.

<input type="text" id="phone" name="phone" pattern="[\s\(]*((?!1)\d{1})((?!11)\d{2})[-\s\).,]*((?!1)\d{1})\d{2}[-\s.,]*\d{4}[\s]*" />

 

Create a Good Web Presence for Free in Under 2 Hours

You are starting a new organization or business. You are busy and have very limited time and money to spend on your web presence. What can you do to get the most ‘web’ for the least time (both set up and maintenance) and money, while still appearing professional? If you are in a situation like this my recommendation would be to set up a Google “My Business” listing and a Facebook page.

Having a web presence to show up in Google search results, being able to engage with people, and having a medium to display basic information is a critical and important start. Once complete, these two web mediums will give you the following capabilities:

Google “My Business” Listing

  • This will allow you to show up in Google search results.
  • You can display hours of operation, address, phone number, and other basic information.
  • You can capture reviews and rating from customers.
  • Your business/organization can show up in Google Maps.

Facebook Page

  • Display a description of your business/organization.
  • Display photos and photo galleries.
  • Post updates with text, photos and video.
  • Create awareness of your business/organization with ‘Likes’ and other interactions.
  • Display hours of operation, address, phone number, and other basic information.

Furthermore, this approach will put you in a position where:

  • You have no need to worry about website bugs or display issues, or the time/money needed to fix them.
  • You haven’t put yourself on the ‘treadmill’ of other social media properties like Twitter or Instagram which require more frequent updates.

But, keep in mind the title of this post is a ‘Create a Good Web Presence’, not ‘Create a Great Web Presence’. The suggestions made here are a good start, but you will still have a few problems:

  • You will rank lower in Google search results since you don’t have an actual website. You have very limited options for SEO. You should have acceptable results for more specific searches though.
  • You are limited in what you can do visually and functionally compared to a real website.
  • You may be missing out on generating awareness/interest by not having a presence on other social media platforms.

Got a Few More Hours? Can You Spare ~$15/year?

With a bit more time and a few more dollars you can add an enhancement that can simplify your overall marketing efforts: buying your domain name. Almost all domain registrars allow you to forward a domain to an URI. For now, you will forward this domain to your Facebook page. Take a look at jivevine.com (which is a domain I happen to own but am not using it right now). It goes to the WordPress Facebook page. Doing this has the following benefits:

  • You own the domain now. No one else can take it.
  • You are free to use your domain name on business cards and other print material. When it comes time for an actual website you will simply have the domain direct to your website rather than your Facebook page.
  • It appears more professional to have your own domain.

In addition, for an extra ~$5/month most domain registration/hosting companies allow you to forward email addresses associated with your domain (such as steve@jivevine.com in my example). You can forward this to a Gmail or another type of address. You will also be able to respond to emails with your custom email right from Gmail. This again can make you appear more professional.

If you want a slightly more elaborate web presence and are willing to spend a bit more time, you may want to checkout the free website builder in the Google “My Business” tool as well.

Final Thoughts

I hope these ideas help you in successfully starting up your small business, non-profit, technology startup, or whatever endeavour it may be. You should focus on getting your core processes up and running. It will allow you to have an acceptable web presence while you wait for the budget/time for a more full and expansive web presence. There are lots of excellent professionals in Social Media, SEO, Graphic/Web Design, Online Marketing, and Web Development that can help you out when the time comes. Good luck!

Learning Web Development

If you want to learn web development with the goal of working in the field, what is the most effective, cost effective and efficient way to learn? There are so many different terms and jargon: “Vagrant”, “Sublime Text”, “Git”, “Accessibility”, “Apache”, “node.js”, etc. What are they? How do they all fit together? What are they used for? Not only that, there are so many different approaches to learning: books, online programming schools, traditional college/university, local workshops. There are so many different Meet ups and web conferences to go to as well. Ahhh!! Where does one start learning everything?

There is far too much out there to digest it all. It is easy to get pulled in many directions and make no progress towards your goal. It is important to pick a specific specialization and work backwards, choosing what tools and technologies to learn to get you there. This might be:

  • become a WordPress developer
  • become an iOS developer
  • become a Ruby developer
  • etc..

Choosing what not to learn is just as important as choosing what to learn. Trying to do too much and arbitrarily learn individual skills will spread yourself too thin, making yourself ineffective in all areas. It is very uncommon for someone to be an expert WordPress developer, Drupal developer, Ruby developer, database architect, and graphic designer. WordPress for example, is a very complex platform with many components to it. Many WordPress experts haven’t even touched all that is has to offer. The same goes for other flavours of web development. It is much more common to have a sliding scale of skills in related areas that complement one another.

If you focus on completing your project (whether it be a course assignment or personal project) you will naturally learn what you need to learn. You can build off of previous projects, integrating more advanced tools and technologies as you progress.

 

Learning in the Wrong Order

If you are new to web development and you jump in trying to build a project with Vagrant, staging and production servers, and proper unit testing you will likely be lost. It will be such a high learning curve learning that you may never make any progress. Take smaller steps and work up to using more advanced techniques and tools. One’s evolution could look something like:

  1. Creating a WordPress website with a custom theme, using a basic code editor with FTP and a basic web hosting service
  2. Introducing WAMP or MAMP into your workflow with Sublime Text as a more advanced code editor
  3. Introducing gulp.js with a Sass compiler while getting familiar with the command line
  4. Introducing GIT into your workflow
  5. Replacing WAMP or MAMP with Vagrant for local development

 

Focus on Practice, not Conferences and Presentations

Web conferences and presentations should supplement your own work by learning what other’s are working on and seeing how they have done things. It should not be your main focus or the only thing you do in your efforts to learn web development. There are many people who go to endless web conferences or passively watch web presentations. They never sit down and implement what they have learned. This results in very slow or no real progress in skill and knowledge development.

On the contrary, it is not good to completely isolate yourself and only work on your projects. You may be missing out on learning newer, better ways to perform a task or solve a problem. You can miss the opportunity to connect with others who can help you. Learning from others is very important in web, as new tools and technologies emerge on an almost monthly basis. There is no way you can keep up to date on your own. Your own practice is the steak and conferences/presentations are the spice, not the other way around.

 

Learning Options

Taking some sort of structured course is the best way to start off learning web development. It keeps your learning and progress on track. There are lots of options available today:

University

Most universities offer degrees in computer science. The programming knowledge learned in a computer science degree can be applied to all sorts of areas, including web development. There is an emphasis on programming involving advanced algorithms and mathematics, which might not be needed, depending on what specific area of web development you want to work in.

If you want to work with HTML, CSS, JavaScript, PHP and WordPress, you may find a computer science degree doesn’t quite ‘hit the nail on the head’ in terms of what you will be learning. It is likely not the best approach if this is what you want to do.

But regardless of what field of web development you would like to work in, I don’t feel a university education in computer science is absolutely needed. It can be useful, but is also quite expensive as well. There are many people who have educated themselves through other means and are very successful.

College

Many colleges have good programs in web development. You won’t learn all the advanced algorithms and math as you would in a university program so the course content is different. There is an emphasis on web technology and in many cases instructors are more knowledgeable about web and modern best practices compared to a computer science program.

(Here in Canada we differentiate between College and University)

Online Resources

There are many excellent online coding schools and programs available today. Some of the more popular ones are:

These resources can include videos and interactive projects in the course material. This allows you to learn by doing. If you are more of a hands on learner, and sitting in a classroom or lecture hall isn’t your thing this might be a good choice. You can learn at your own pace since the lessons are pre recorded. The instructors in the video are usually experts in their field as well. The cost is very too low too, in the tens of dollars per month range.

Web Workshops

There are likely some web technology workshops offered nearby if you live in a major city. These web technology workshops allow you to receive instruction in person with peers similar to you. The instructors are very knowledgeable and the prices are very reasonable as well. The largest reputable organization (in Canada) that offers web workshops, with a focus on web development would be ladieslearningcode.com.

 

Your Own Project

After being able to complete some of the projects in one or more of the various education mediums previously mentioned, it is time to branch out and create your own. You may have learned about HTML, CSS, WordPress, FTP, etc. It is now time to start applying all what you have learned in a single project. After learning from different sources you may notice different ways of doing things. You will find a preferences as to how you like to organize your work and tools you like to use. You have learned from the experts, but now you get to do your project your way.

A good idea would be to create a personal project with a purpose. Maybe you have an idea for a WordPress plugin or have a charity in your area that need some web work done. This will help you follow through to completion.

 

A Big Obstacle is Going to be Yourself

It can be hard to discipline yourself to work on your own stuff. You have no boss to put pressure on you and you have no real deadlines. Focusing on spending a set amount of time on your web stuff can help if this task seems daunting. If you have decided you will work 1 hour each day that is all you need to focus on, not on how long it will take to finish.

Companies want people who can learn on their own and get things done. If you can demonstrate this and truly love the work you do, you can look forward to happy and rewarding career in web development.

Web Enhancement Tunnel Vision

Having a well designed website can be a great enhancement to any business. Well maintained social media platforms can make it easy to spread the latest news too. SEO (search engine optimization) makes it easier for people to find your website. There are always things to add or enhance for your online business presence. It is important not to get swept away with all that the web has to offer and lose sight of what really makes your business successful. It is important not to get WETV – Web Enhancement Tunnel Vision.

Let’s take a look at an imaginary business “Jamaica Winter Clothing Inc.” (JWC) to see how it’s possible to get WETV. JWC sells winter clothing and accessories and are located in Jamaica. They have an online store that ships within the country as well as a ’brick and mortar’ store. Here are the main endeavours the owners are pursuing overall to increase sales:

A/B testing to optimize add on sales in checkout process
Experimenting with different callout language/displays to see what works best in generating the most sales.

Fine tuning of SEO
Trying to rank high for search terms like “jamaica clothing”, and “winter clothing jamaica”.

Emphasis on keeping social profiles up to date
A lot of time is spent staying active and posting new content on various social media platforms.

Always be sure to periodically take a thorough look at your business without the noise of web technology. Something critical may be overlooked, keeping your business locked in a certain tier of success or sliding away from success. A well designed website, A/B testing, SEO, and social media profiles won’t fix fundamental business problems. As you could probably tell right away, JWC has a major problem with it’s business: No one wants to buy winter clothing in Jamaica!

Now JWC is an extreme, imaginary example but maybe there are some adjustments you can make to your business outside of the world of web that can have a huge impact. Take a look at some possible examples:

  • A store (either online or ‘brick and mortar’) or restaurant has rude or unfriendly staff, driving away customers
  • A business sells software but is unaware that it does not work on certain devices, or certain versions of devices
  • The products/services a business sells are of poor quality/value compared to competitors

A solid web and social media presence can be an excellent ‘cherry on top’ of your business sundae, but it is important not to forget the core reason why people would want to do business with you.

Admin Code Editor

In many of the recent projects I worked on, I had a need for a customized, specialized, interactive component within the post. I needed custom HTML, CSS, and JavaScript to achieve this. But, if you have ever tried to write code in the WordPress content editor you have likely found it is a difficult and frustrating process. This is not unexpected. The content editor was designed to allow users to enter and style content without (or very minimal) touching of any code. It was not intended to be a code editor. You can end up with random

tags in your code, no code highlighting or tab indenting, just to name a few of the limitations.

Some may argue that code of this nature belongs in the theme files. There are a couple reasons why I took this approach rather than integrating the code into the theme files:

I felt making a custom template within the theme was overkill
would also involve integrating the post specific css/js into the theme files, would clutter the repo and files with files only relevant to that post
In general, it is good practice to separate site content with theme files. I feel that even though we are working with HTML, CSS, JS, it really is more content than ‘theme files’, so it is appropriate to include it within WordPress database rather than theme files

As with all of my plugins, I had a problem to be solved so I created a solution. I thought this solution might be useful to others so you can checkout the public plugin at https://wordpress.org/plugins/admin-code-editor/. You’ll find more detailed information there as well.

Custom Ratings

There are some great rating plugins out there in the WordPress universe. All of them have their own approach to allowing users to rate a post, comment or other content type. I had a need for a plugin which added a rating interface in a more light weight and streamlined way.  Custom Ratings was created to fill this need.

As usual, you can find this in the WordPress plugin repository and read a more detailed description on the plugin page: https://wordpress.org/plugins/custom-ratings/.

Notes Widget Wrapper

WP Notes Widget is great at organizing ‘note’ content and displaying it in a standardized way on the front end. However, based on the feedback from WP Notes Widget there was an interest in applying the ‘note’ front end styling in a more flexible way.  Notes Widget Wrapper was created to achieve this. This plugin works very differently than WP Notes Widget. It gives you the freedom and ability to style any WordPress widget with the note styling. It does not confine your content to a rigid structure.

You can find this in the WordPress plugin repository or download it directly from https://wordpress.org/plugins/notes-widget-wrapper/. You can read a longer description about the plugin there too.

WP Notes Widget

I created the WP Notes Widget WordPress plugin because I found quite often I had information I wanted to express on a website, but it did not really ‘fit’ in a post or page for a few reasons:

  • the length of the content content was very short
  • the nature of the content was very important and often time sensitive, so it needed to be displayed prominently
  • only relevant in the near future, no need to keep an archive since the information won’t be useful later

The plugin allows you to present this content in a ‘sticky note’ styling on the front end, which fits nicely with the nature of the content. I could see other website creators/manager most likely had this problem too, so I released it publicly. This was released a few years ago and I have made several updates since then.

You can find this in the WordPress plugin repository or download it directly from https://wordpress.org/plugins/wp-notes-widget/. You can read a longer description about the plugin there too.