Giving Joomla 3 a shot of steroids with Bootstrap and Angular

If you read my post about SEO, you know that modern Ajax sites don’t exactly do well when it comes to search engine crawlers. The ideal solution to the problem was to implement the fragment method that search engines to support to tell them to make an additional request to the website for the static content. Well that plan was shot out of the water due to the lack of innovation in the realm of SEO consulting companies… one in particular.

The direction we chose to go was to render all content on the server side with Joomla 3and PHP, but retain modern Ajax frameworks like AngularJS and JQuery when it comes to dynamic functionality. For the responsive UI, we did stick with Bootstrap 3, but we started with the T3 blank template and just modified it to meet our needs. In implementation, this was quite a simple task. Let’s look at some of the moving parts.

Joomla 3

If you haven’t upgraded to Joomla 3, stop reading this and do so now… for a CMS, it is definitely a huge upgrade from previous Joomla versions. It’s based on Bootstrap 3 and has a lot of improvements and it is definitely more user friendly.

T3 Framework

Do not grab just any template out there. Starting with the T3 template framework is definitely the way to go… It provides simple tools for managing a template, optimization and great SEO ability.

Bootstrap 3

When you start with the T3 framework, you can choose to use the Bootstrap 3 template. I highly recommend you do so. Bootstrap 3 is a major upgrade and gives you a standard way to manage your content formatting and responsive UI. The benefit I get here is that no matter what element I am working in with Joomla, I can use standard Bootstrap 3 CSS classes and I don’t have to learn a specific template CSS. I would say without a doubt, you should always pick a template that is based on Bootstrap 3.

AngularJS

Since I had the SEO debacle, I had to toss Angular routing out the window, but that doesn’t mean I had to abandon the other great aspects of Angular as a javascript framework. I am utilizing the resource module extensively to interact with the server and the animation module to provide some really nice effects that catch the eye without distracting from the content.

In the end what I ended up with was a great template and I did little work to achieve it. By leveraging the T3 framework and the T3 blank bootstrap 3 template, I had an excellent foundation on which to build. I upgraded JQuery to 2.1.1 and I incorporated Angular by using the assets.xml file included in the template.

Drawbacks

All this sounded almost too good to be true when I went down this road and as with most things, it is. There are a couple drawbacks to “buying in” to the CMS world. Although they are relatively small issues, I certainly pulled out some hair working around them.

The first problem is that it seems that every module out there incorporates it’s own version of JQuery as well as the T3 template and Joomla pulling it  in too. If you aren’t careful, you’ll end up with several of them being downloaded which will hurt your overall performance. I solved this by disabling JQuery in most of my modules, but the drawback there is that I have to make sure that every module is either compatible with JQuery 2.1 or 1.8 that T3 imports. Getting all that right was a bit painful.

The second problem is that you really need to work in Joomla itself and in the template too at times for testing and modifications. This is especially true if you want to deviate highly from the template’s layout. I solved this issue by just mounting the template as a Dreamweaver site and I work in that as well as in the Module manager in Joomla 3.

There was a huge upshot by integrating Joomla 3 though… Ajax is all built in… You can get JSON or XML data from Joomla 3 and any module just by a simple url syntax defined in the Joomla 3 documentation. In WordPress I actually had to install a plugin for this and it wasn’t very flexible.

Conclusion

Overall, I am very impressed with Joomla 3 and now I actually prefer it over WordPress… At some point in the near future, I am going to convert this blog to a Joomla site. When I have time that is.

If you are interested or need help with any of these integrations, just drop me a message and I’d be glad to share my modified template with you.

 

 

 

 

 

 

 

 

 

Streamline and modernize all while keeping your CMS

I’ve struggled with integrating CMS products into projects here as of late. CMS products like WordPress, Joomla and Drupal allow you get rapid get something up and running, but can really paint you into a corner if you are trying to do something that doesn’t fit within it’s boundaries. For my money, I would avoid a CMS all together and just manage my content directly in the HTML pages, but that is outside the realm of expertise of most marketing folks who want to be able to manage their content. So I have worked on a couple of strategies that allow for a compromise.

CMS is dead

We are definitely in the post-CMS era of web design. It’s not that the CMS is going away, it is just going to be more streamlined. I read a quote the other day that basically said that CMS products get you 80% of the way really fast but they make you work really hard to get that last 20%. From my experience, this is very true. The future of CMS is just pure content pulled into templates via service calls. For example, utilize your CMS to mange your content, but pull the data from the CMS via a RESTful API into a pure HTML template. There are several ways to accomplish this, it just depends on your needs.

Ajax framework

The easiest way to get started with your CMS and decouple it from your project, it just to utilize a Javascript framework like AngularJS. Most CMS products have native REST plugins or third-party plugins that make it simple to retrieve data. What I do is create an Angular-based application and just pull each post into the template as the user navigates. This keeps me free to do whatever I want in HTML5, CSS and javascript but still gives users the ability to manage the content. The only drawback here is for SEO since the HTML won’t be in the page if you view source… it is written into the DOM later with a RESTful Ajax call. If you want SEO for this strategy, you have to support Google’s Ajax Crawler Specification and use the _escaped_fragment_= syntax to serve a prerendered version of the page or just serve up a static wordpress template… I believe this to be the ideal compromise of modern technology and flexibility of the CMS with few drawbacks.

Server Rendering

This strategy employs all the above approaches except without the AngularJS mechanism of replacing content dynamically. Each page is rendered on the server with PHP, JSP or ASP… it’s really up to you so long as the rendered HTML is there when you view source. The pages or controllers can get the data from the CMS via the database of through the REST api. If all of your content is in the CMS’s, you’ll have it a bit easy. The drawback to this approach is that is isn’t as clean nor is it easy to maintain. The advantages of keeping a pure HTML5 site and not having to run on an app server to test go out the window. You also can lose valuable performance time this way if you aren’t careful.

Pure CMS

Pure CMS-based approaches are the most common for a myriad of reasons. I want to lay out a few of the reasons that you might choose this approach. In this approach, the template for the site is embedded into the CMS, the content is all in the CMS and you are in a lot of ways a victim of the stylesheet and elements that the template uses. This is the box I spoke of… You are also fairly tied to the CMS itself. Now that we know the pitfalls… lets look at why you would choose this route.

  • Your expertise in house isn’t capable of taking on any other option.
  • You have an extremely static site that has little to no dynamic pages
  • You don’t have a need for fancy dynamic components or a super cool site
  • SEO is your only goal
  • You want to keep it as simple as possible

Conclusion

At the end of the day, CMS products aren’t going anywhere and they are constantly dying out and new ones are taking their places. This is the rapidly changing world of technology we live in. I just prefer to keep a loose coupling between my code and my CMS as much as possible so I can respond very quickly to these changes.

 

 

 

 

 

Bootstrap 3 for the win in responsive design

Screenshot 2014-05-19 07.51.57Have you ever downloaded a WordPress or other CMS template and hit your head against the wall trying to figure out how the styles are setup so that you can format your content? Have you ever built a template from scratch or a website and thought that there has to be some standard by which web formatting and styles should adhere. Bootstrap is about to be your best friend.

Bootstrap is a rapid responsive design development library consisting of mostly standard stylesheet elements. Bootstrap consists of a 12 column grid with standard css names that you can apply to divs. Have you ever tried to make a HTML table work just the way you want it to and nest them? It’s really painful. Bootstrap solves that with these styles.

Bootstrap Grid

The code to produce the above grid is as follows:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

As you can see, this is not complex if you follow the row and column nomenclature.

Bootstrap elements are designed to stack as you resize your browser or as the resolution of the device changes. You can see how beneficial this is if you want the elements above to be viewable on a mobile device.

My Cardinal Rules

Like they used to say about American Express… don’t leave home without it. Well, here are my rules with responsive design.

  • Always looks for Bootstrap templates or structures before you start from scratch. Preferably look for BootStrap3.
  • If you are using a CMS, picking a Bootstrap-based template can not only save you time, but save you vast amounts of hair pulling when working with your post content.
  • Look for existing styles that do what you want in BootStrap. If you need to override them, do so in your CSS after Bootstrap’s is imported.
  • Don’t reinvent the wheel… see rule #1
  • Think mobile first before you look at supporting the desktop versions
  • When in doubt about an element… wrap it in a div. You’ll be able to deal with it better later.

Using Bootstrap is probably the biggest time saving move you can make in preparing your web application or mobile website for the real world. I’ve barely scratched the surface of what the framework can do as well. You can even import the files for Bootstrap via a CDN or import them into your project using Bower.

 

 

 

 

 

Making SEO work in an world of Ajax

I came across a bit of a stumbling block with application development lately as it relates to “public-facing” web sites and SEO and decided I would share my thoughts. On one we all want the most advanced, dynamic Ajax-driven websites but these sites aren’t exactly SEO friendly since crawling engines don’t crawl these sites Seo-Logoswell or most of the time at all. I have no doubt that Google is already indexing some Ajax sites and I have no doubt that Ajax sites will enjoy premium support when it comes to crawling engines in the near future, but for now we have to have a work around.

What is Ajax?

Ajax or Asynchronous Java and XML is not new. Actually more nowadays the XML has been replaced by JSON.. thank goodness. Ajax has been around for a long time, but over the past several years it exploded and you can take your pick at Javascript frameworks that allow you to write a very dynamic and engaging application for the web that has the power and flexibility of a desktop application. Ajax works by making a request to the server with Javascript for data after the HTML page has loaded. Search indexing engines don’t fully support this because of security reasons and because of the resources involved in following Javascript as opposed to just parsing flat HTML.

So how does Google index sites like Twitter, Tumbler etc?

Google’s crawler specification as it relates to Ajax was designed to address the problems that these Ajax sites represent. It works like this. The Crawler hits your HTML and sees a special meta tag or a url with a #! in it. The #! technique is all but dead thanks to HTML5 Push State though.

Http Request -> http://host/index.html

<meta name=”fragment” content=”!”>

The crawler then issues a second call to your site for the same url with the following format.

Request = http://host/index.html?_escaped_fragment_=/index.html

It is now your responsibility to serve up static HTML so that the crawler can scan…

ajax-diagram-1

 

 

 

The simplest way to do this is to use a prerendering engine that will create a snapshot of your page by making a request to it from a headless browser. Prerender.io and PhantomJS are the combination of items that make this normally possible. This approach requires a forwarding rule on your web server to look for the ?_escaped_fragment_= and then to proxy that request to the prerendering engine and return the HTML. The web server must not redirect… You also support this on the web server by looking for the user agent of twitterbot or googlebot along with a dozen or so other indexing bots.

I know it sounds daunting, but it’s not really that difficult. There are services out there that make it pretty easy to set this up.

SEO tools slow to adapt

All this being said, SEO tools have become slow to adapt to Ajax technology that has been around for many years now. They really haven’t had to since they thrive on volume and right now the volume is still in the completely in the court of non-ajax driven sites. In fact, I heard the head of an SEO company today say AngularJS would destroy the SEO for your site. Unfortunately, this is the same adversity to change we see every so many years in this industry. The very thing that this attitude does is destroy innovation. Do you really think that Google would support a technology they won’t be able to crawl natively forever? The fact remains that Google and Bing support this technology through the aforementioned Ajax specification and it is a fairly simple matter to set it up.

Ajax is one of the best methods for retrieving content and keeping your presentation layer separate from your backend. It provides for a more pleasant user experience, it is faster than server side rendering of pages and provides users with feedback as resources are loading from the server. Remember the old days on dial up of waiting for a page to load every time you click a link… People no longer worry about this because they mark that devices have a access to high speed bandwidth making this no longer a chief concern. Of course, they are forgetting that mobile devices are still limited when it comes to these resources and bandwidth concerns due to mobile data limits are chief among user’s concerns. Newer Ajax frameworks like AngularJS by Google solve many of these problems with regards to bandwidth. SEO and cutting edge technology are rarely equal in terms of weight. I rank SEO higher in priority myself as if you can’t get found, you might as well be spitting in the wind. However, I believe we can all get our cake and eat it too.

Short-sighted approaches

I believe avoiding Ajax alltogether is a short-sighted approach. Here is a great example of what I am talking about. The author never mentions HTML5 PushState that will remove the # from the urls and make urls appear like they are real to the search engine crawler. If you want to learn more about this, then take a gander here.

Recommendations

Aside from using the prerendering mechanisms there are other tactics that can allow your Ajax enabled site to get indexed.

  • Make sure your menus are plain HTML (AngularJS and HTML5 both allow for dynamic menus that are plain HTML)
  • Make sure you create friendly url schemes and use HTML 5 push state instead of the #! mechanism (AngularJS again will facilitate this)
  • Create a mechanism by which each page will get it’s own meta information and canonicalization. (I do this by passing in the data to my header and footer)
  • Create snapshots that don’t have images or other data… just text. This approach is even better for the crawlers as it keeps them from having to crawl over useless information that it will toss out anyway. A simple process that will create snapshots and store them for the crawler would be excellent if you don’t have a plethora of pages to contend with.
  • If you use prerendering… Make sure you cache the results and precache the results so that the search engine doesn’t have to wait.
  • The prerendered pages don’t have to be pretty… they just have to give the search engine something to read.
  • CMS users… pull your content from your CMS directly for your meta information. For example, pull your description and keyword information to place in your header
  • Delay the complete load of your page until the Ajax completes. If the page completely renders before the Ajax does, the crawler may stop processing it… This is why you need to precache your content. Remember you also have to provide the user with feedback so you need to load part of the page. This is a balancing act.
  • Hang in there… Google’s crawlers area already processing some Ajax and in the near future writing your site this way and getting great SEO won’t be a problem.
  • Last resort, create a server side process for static content or use a CMS. As a last ditch effort if you don’t have the expertise for Ajax-enabled sites, you probably shouldn’t do it anyway. Back up and revisit a CMS-based or a static HTML5 site approach. I highly recommend the latter. It is incredibly easy these days to create and maintain a pure HTML site if you have some HTML experience. If you don’t know HTML or CSS and you don’t really care, you probably need to just outsource it or grab a CSS tool like WordPress or Joomla to do the work for you.
  • If your site is mostly static and doesn’t change, then why use Ajax anyway.

SEO is important

Don’t let me sway you against ranking your SEO as a first class citizen. SEO is extremely important to your website if you want to increase your reach and build your company. The proper balance between technology and common sense is just what most folks need. A proper assessment of what your needs and goals are is what you need. As for myself… I am going all in with AngularJs by Google and I believe in Google’s ability to make it indexable in the near future so none of this is a concern.

Responsive UI design is awesome, but pretty painful

I just completed a template design for a responsive UI using Bootstrap 3 and AngularJS and it has been a while since I have written anything about responsive UI so I thought I would write an update. My conclusion after all these months of working on them is that you can enjoy the fruits of your labor when you are done, but it can be a pretty painful process.

The first thing I learned about developing a responsive ui is that you probably should invest in a “ready made” template if you are using a CMS tool like Joomla or WordPress or outsource to someone who does it regularly if you want to start from scratch. It is fairly time consuming even for an experienced designer and can be extremely frustrating.

The second thing I learned was to use the right tools. I started out just trying to use a text editor and a browser and I learned really quick that I needed to expedite the development process. It had been several years since I had used Dreamweaver, but it is an extremely valuable tool for responsive design. Dreamweaver will show you multiple views of your application as you develop it and give you code and CSS insight when you need it.

Chrome and Chrome extensions are extremely valuable tools for the responsive UI arsenal. Chrome Developer Tools that are built in to Chrome are your best friend. Developer tools allow you to debug javascript, inspect div elements to see where they border and what styles are affecting them and a console for debugging. Other Chrome extensions I found useful are rulers, responsive ui views, eye dropper and more. Browse the extensions on the Chrome Store to learn more.

AngularJS-largeIn another post, I am going to extol the virtues of AngularJS by Google as a development tool and framework for really advanced websites and web applications, but I will mention that if you are doing more than just developing a static responsive ui and you really want dynamic and easy Ajax functionality in your application, then AngularJS is definitely the route to go. Angular provides very simple tools to allow you to utilize Ajax services and utilize the data returned in the simplest fashion.

My UI Philosophy

As I have mentioned many times, I completely disagree with frameworks and tools that write one language from another. After many years of writing applications with JSP/JSF, Vaadin, PHP. Perl and other languages that render html, I completed disagree with their use. I believe firmly in separating the presentation from the backend. Angular not only makes this process easy but it also allows you to separate your javascript logic from your HTML presentation. Clearly defined delineations in your application make sense and they make for a fantastic design.

Mobile First

Here is another thing I learned really quick… Build your handheld application view before you move out to the tablet view and desktop views. In my last project, I started with a desktop view template and some completed pages, then I moved on to make it responsive and I had to rework those pages and just through quite a few hoops to get the UI to scale and respond correctly. Write your handheld template, then move out to tablet and get that right, then move out to desktop. Do not write a single page in one view or another until your template is set. You will definitely thank me for this later…

Bootstrap

ImageI should have mentioned Bootstrap 3 already but I guess I was saving the best for last. If you do have to design a responsive template from scratch or you are searching for a template for your web site, make sure you start with Bootstrap as a requirement. It is without a doubt an amazing framework that unifies the approach to responsive ui design. I highly recommend spending a couple hours learning about how to utilize it before you dig in. Bootstrap allows you simple “grid-based” CSS approaches to your ui design that will automate the process of creating your template.

CMS

We are no doubt at the end of the CMS era. While I have no problems with CMS-based approaches and they get you 80% of the way through development really quickly, I do think they hamstring your development work in a lot of works. That last 20% can be really difficult to achieve using a CMS. Lately, I have taken the approach that I just use Angular and pull the data from the CMS via a RESTful service with JSON. This allows for users to still input content and take an easier approach and doesn’t tie me in to a particular CMS. I also get the added benefit of not having to munge PHP or some other language into my UI code.

If you are using a CMS and don’t have the technical voltage to be able to write your own front end, then I highly recommend choosing a template based on Bootstrap itself. There are plenty of them out there. You will thank me later, I promise.

Wrapping up

I’ll have plenty of folks who will disagree with my assessment to the CMS and most likely to my assessment of page rendering technologies like JSF, but I don’t like getting tied into technologies and have to code in a box. While Bootstrap and Angular have boxes of their own I believe the boxes to be much larger by order of magnitude.

I highly recommend putting the responsive ui tools in your repertoire. You will not only be setup for the future but you’ll have a lot of fun doing it.

 

 

 

 

 

 

 

 

Investing in the Python Language

python-logoOver the years, I’ve had to learn many programming languages in the course of my career; Perl, JavaScript, shell, Java, C#, Objective C to name the most prominent. Several years ago, I wrote a little Python for a small project and I hated the language for some of the syntactical eccentricities that makes it unique from other languages out there. Lately, I had to pick up Python again, just to be pleasantly surprised that I can actually enjoy it now.

I am notorious about code formatting, in fact, it is the worst thing about having to read my code if you are another developer with a little OCD about formatting, indention and spacing. The python language doesn’t have the brace constructs most other languages use to delineate blocks flow blocks in code, it uses indention. For example,  if you want a series of operations to occur following the execution of an if block, you would merely nest them the same indention level under the if itself. This is a fundamental concept in Python but I have found that it actually has helped my formatting as I write other languages and I no longer torture other developers as they read through my code.

Python is pretty versatile. It allows for access to a very robust API without a lot of overhead and a very shallow learning curve. I would argue that it is the easiest of all the languages I write on a normal basis by far. I recommend Python for any novice programmer. I wouldn’t write enterprise level applications with Python, but I would use it as a support language no matter what platform I am running on. short scripting tasks of tasks or routine maintenance tasks that are a too complicated for more rudimentary scripting languages are where Python rules. In fact Python is an integral part of every linux distribution.

Overall, spending a little time in Python isn’t a waste of time at all and I highly recommend it.

Home automation is booming

I love being right. I predicted that Nest would prove to be a technology that would be of considerable value to consumers and to other companies as well. The $3.2 billion acquisition of the company by Google pretty much says it all. I’m betting Honeywell, and the other companies out there who lagged behind several years in advancing their line of products, is really kicking themselves now. I was an early adopter of Nest and I love the device. I loved it so much, I proceeded to automate other parts of my home. At present, I also have Chamberlain MyQ light switches and garage door openers, Belkin Wemo plugs and a couple of switches, Foscam security cameras and other odds and ends that make up a pretty advanced smart home. I like to tinker and my next project at home is to tie a Raspberry Pi into my home automation center to control and monitor my security system.

It saves you money

The fiscal conservatives and the green energy folks love these connected devices. For example, my Nest has already paid for itself in the few years I have had it just by it’s “smart” reactions to my habits and the way I like my house to be heated and cooled. I no longer leave my outdoor lights on all night to deter prowlers since the motion sensors and automatic switches take care of it all. I even replaced every incandescent bulb in my house with energy efficient LEDs. It was an enormous up front cost, but if a light is left on, it only uses a fraction of the power of the older bulbs. I thought I’d just compile some of the advantages of a “smart home” that I have experienced. These are by no means all inclusive and the extent of how you automate your home is all a matter of your imagination.

  • Chamberlain MyQ notifies me if I leave my garage door opens or it stays open too long. I can close it remotely if I drive away and forget
  • Chamberlain MyQ switches allow me to turn on all my outdoor lights at the touch of a button. I do this if I hear dogs barking at night
  • Foscam Cameras monitor my entrance ways and send me notifications of movement
  • Belkin Wemo devices monitor energy usage of my lights and appliances and allow me to control them and automate their operation
  • HDMI-CEC (built into most TVs now) allows external control of devices like a receiver so I don’t need multiple remote and I don’t need to turn off the power to devices when I turn off the TV. It does it for me.
  • Chromecast, Samsung and Apple TV allow me to broadcast video and audio from any device to another
  • Green initiatives: Solar film on windows, enhanced attic insulation, and other energy saving modifications

Other areas of automation include wifi/bluetooth enabled door locks, the new Nest Protect smoke and carbon monoxide alarms and much more. All of these are available on the Internet but I will warn you that most of these devices are not cheap. The cost of the Nest Protect alone has been prohibiting me from diving into that technology.

All my excitement and gushing aside, I think this is the year for a home automation boom. The acquisition of Nest signals to other companies that the race is on. I’m pretty excited about what is headed our way this year myself and I look forward to my own projects as well.