WPwatercooler Episode #111: WordPress Design Trends and the Return of the Blink Tag

On this show, regulars: Steve Zehngut, Se Reed, Jason Tucker, and Suzette Franck are joined by special guests Tracy Levesque, Robert Neinhuis, and Chris Ford to discuss WordPress web design trends, such as the very popular parallax fad, full-width sliders with video backgrounds, and the return of the blink tag.

html6

“HTML6 is Around the Corner: What to expect” Guest post by Ben Wilson

For all intents and purposes, HTML5 has emerged to be a blockbuster platform, fueling the web development community to create vibrant and viable applications, the likes of which are hard to produce using lesser platforms.

But if you are under the impression that HTML has had its day under the sun and now it is going to retreat back, it’s time for you to be surprised even more delightfully, as it prepares to launch its latest version – HTML6 into the web development realm.

For what we know, HTML6 is still under the wraps, but there are certain features that are expected to be a part of the newest installment. Let us introduce you to a few notable ones:

The Uniquely Structured Namespaces

The namespaces will be put forth in a fashion most unique as they will be based on the XML. Consequentially, developers are going to have a gala time working with them:

<!DOCTYPE html>
<html:html>
    <html:head>
        <html:title>HTML6 Code Snippet</html:title>
        <html:meta type="title" value="Page Title">
        <html:meta type="description" value="Here is an HTML code sample with namespaces for your consideration">
        <html:link src="css/main.css" title="Main Styles" type="text/css">
        <html:link src="js/main.js" title="Main Script" type="text/javascript">
    </html:head>
    <html:body>
        <header>
            <logo>
                <html:media type="image" src="images/logo.png">
            </logo>
            <nav>
               <html:a href="/bus">bus</a>
               <html:a href="/train">Train</a>
               <html:a href="/plane">Plane</a>
            </nav>
        </header>
        <content>
            <article>
                <h1>The article's title comes here</h1>
                <h2>The article's sub	-title comes here</h2>
                <p>[...]</p>
                <p>[...]</p>
            </article>
            <article>
                <h1>Lwt's enjoy!</h1>
                <h2>Pay close attention to the media</h2>
                <p>[...]</p>
                <html:media type="video" src="vids/flying-pig.mp4" autostart controls>
                <p>Go Zoom.</p>
            </article>
        </content>
        <footer>
            <copyright>This site is &copy; to Henry Fleming</copyright>
        </footer>
    </html:body>
</html:html>

The feature that stands out here is the uniquely formatted <html:x> tags. True to their nature, they are the namespace elements that prove to be instrumental in triggering events. It can be elucidated by this small example: the <html:media type=”image”> element is responsible for displaying an image appear.

A larger chunk of these elements can be utilized by the developers for giving a sense of structure and direction to their apps – they way they want to.

Talking of HTML Media, We Explain it Further

As iterated, <html:media> is a standout feature that is very different from the earlier versions and will prove to be really handy for the designers and developers alike. In the more conventional setup, or rather the current setup, we are so accustomed to elements like <img>, <video>, <audio>, <embed>, and so on when using media files. However, HTML6 eliminates the need for including a tag for every media file type. This is what we will use:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <!-- Image -->
    <html:media src="images/logo.jpg" type="image">
    <!-- Video, elucidates that you won't need a type -->
    <html:media src="videos/cute-cat.mov">
    <!-- A format that is improvised, browser will ignore if it is unfamiliar to it -->
    <html:media src="misc/example.abc" type="abc">
  </html:body>
</html:html>

The Form Inputs

For those wanting to see some real alterations in the form input, HTML 6 comes with the changes blazing. Alright, a little exaggerated, but the changes are very much significant and transformational and you are bound to like them as a developer who has  an affinity towards HTML way of doing things. Most essentially, the difference lies in how it labels any form attribute that is inputted and leaves a scope for a text entry on input. This list will give you an insight into what type of entries are considered as inputs in HTML6:

  • text
  • email
  • url
  • tel
  • search
  • number
  • datetime
  • date
  • month
  • week
  • time
  • datetime-local
  • textarea
  • password
  • file – (multiple)

The list of possible attributes is following:

  • name
  • disabled
  • readonly
  • placeholder
  • autofocus
  • required
  • novalidate

The folks who want to know the implementation of the inputs and attributes can take a careful look at the following code:

<!DOCTYPE html>
<html:html>
  <html:head>
    <html:title>HTML6 Spec Version 0.1</html:title>
  </html:head>
  <html:body>
    <form:form method="post" action="/sendmail">
      <!-- Simple input (defaults to text) -->
      <form:input>
      <!--  A new HTML6 match example -->
      <form:input type="password" name="user_passcode">
      <form:input type="password" match="user_passcode">
      <!-- Advanced example -->
      <form:input type="email" placeholder="user@abc.com" autofocus required>
    </form:form>
  </html:body>
</html:html>

The afore-mentioned are some of the features that are touted to be the indispensable parts of HTML6. Do you have your own list? Do add to the comments below.

best-wordpress-plugins

“The best WordPress plugins revealed by 39 WordPress enthusiasts” – PSDtoWP.net

I participated in an expert roundup by PSDtoWP.net on the best WordPress plugins for several different main categories: SEO, Social Media, Commenting, Performance/Caching, Spam, and Payments/eCommerce. Below are my responses, but you may read the entire article at: https://psdtowp.net/wordpress-plugins.html.

Suzette Franck’s Favorite Plugins

  • SEO:
    WordPress for SEO by Yoast – I trust this plugin to be the best SEO plugin as Yoast is very involved in the community and is an expert in the area of SEO. I know SEO is very research intensive in general, and I don’t have time to do the research, so I listen closely to what Yoast publishes. This plugin is also the preferred favorite for SEO among my WordPress developer friends.
  • Social Media:
    Jetpack – Jetpack offers the most comprehensive social media features including the Sharing and Publicize modules. The Sharing module allows you to configure the social media buttons at a bottom of your post or page while the Publicize module will push your new posts out to the social media networks such as: Facebook, Twitter, LinkedIn, and Google Plus. Both of these modules are invaluable and I find that they are necessary for every blog site that I have done.
  • Commenting:
    Gravity Forms – I had problems receiving feedback from Jetpack contact form, so I recently switched my sites’s contact form to Gravity Forms. Gravity forms is the best contact form plugin and there is so much you can do to customize it with free and paid extensions. The developer license is what I recommend and you will never have to worry about not getting your responses on any of your sites again.
  • Performance / Caching:
    WP Super Cache – This is my favorite caching plugin because it is easy to setup, and can be customized to optimize your hosting environment. It helps make your site faster by caching pages for fast loading later.
  • CAPTCHA / SPAM:
    Really Simple Captcha – When I used Contact Form 7, this plugin really helped to prevent spam from coming into my inbox, and was very easy for the developer to set up, as well as for the the website visitor to decipher.
  • Payments:
    WooCommerce w/Paypal – WooCommerce is the easiest e-commerce plugin to set up and allows for shipping and tax calculations, as well as payment through PayPal and other payment gateways with the use of free or paid extensions. It also has an inventory control feature which is very handy for those selling very limited stock.