bootstrap Archives - Mei Gwilym

Download Bootstrap Column from WordPress Plugins, or fork Bootstrap Column widget on Github.

WordPress Bootstrap Plugin

Although I’ve built a few custom WordPress plugins over the years, this is the first I’ve released publicly.

Bootstrap Column simply adds a widget which nicely works with Bootstrap v3 based themes.

It’s not dissimilar to the standard WordPress textbox widget, but it offers extra Bootstrap v3 layout functionality.

Those familiar with Bootstrap will quickly understand how it works.

Bootstrap offers a 12 column grid within four break points at which to change the layout. These breakpoints start from mobile first:

Extra Small – for smartphones at less than 768px screen width
Small – for tablets between 768px and 992px
Medium – for larger tablets and small desktops between 992px and 1200px
Large – for everything else above 1200px

Bootstrap provides a set of classes which not only control column width, but also their behaviour at these different screen sizes.

For example, take the following <div class="col-lg-4 col-md-6">.

Both Small (sm) and Extra Small (xs) are left out, so Bootstrap will default this div to a full width layout, i.e. 12 columns.

At the Medium (md) breakpoint the div will stretch to 6 columns, or half the page width. At the Large (lg) breakpoint it will only be four columns in width.

Ideally it would be partnered with another div with this class value <div class="col-lg-8 col-md-6">. At Large this gives you two columns at 1/3 and 2/3 page widths. At Medium it gives two equally sized columns.

These CSS features are very powerful and enables very quick layouts and prototyping.

Hopefully my plugin will make things a bit easier for other Bootstrappers.

Poor Code

Working on the plugin has really highlighted the standard of coding in WordPress. Although it’s a quick way of adding widgets, the code’s structure is not to be copied.

The widget framework is a quick and easy way to create plugins, but very messy and has little in common with the SOLID principles of programming.

For example, the single responsibility principle is ignored here. The class that extends the plugin class is responsible for saving and updating the widget’s contents and settings, and also rendering the HTML for both the front and back ends.

A nice templating system would be a tidy addition to the current way of doing things.

On June 22nd the DymaFi.tv website officially launched.

UPDATE: DymaFi.tv was nominated for the Kieran Hegarty Award for Innovation at the 2014 Celtic Media Festival!

Dyma fi.tv is a website which gives a platform to young people between the ages of 13 and 18. They can upload videos and share a part of their lives as part of the Children’s Commissioner for Wales’ Dyma Fi/See Me project. The aim of the project is to give a realistic picture of young people in Wales today – in their own words.

Phil Stead from Cwmni Da brought me on the project to head up the technical side.

This is the biggest project that I have worked on, and possibly the most stressful. But I’m extremely proud of what was produced and how it worked.

Symfony2

DymaFi.tv was built as a custom bundle on the Symfony2 framework. Although I’d read much on S2 beforehand, it was the first time I’d actually had the chance to use it for real.

We did briefly discuss using Drupal or WordPress, but I was sure that neither these would not have been the correct solution. I’ve used much of both over the years, and ploughing through their ageing codebases did not attract me.

I was pretty confident that Symfony2 would be straightforward to pick up, but it took me much longer than I had anticipated. While frustrating that I knew what I wanted to do, just not the way Symfony2 wanted to do it (!), learning the ‘proper’ way of developing software was a worthwhile journey. Having a much better understanding of how software is structured make developing new projects much easier.

What I really came to appreciate about Symfony2 was the way in which database tables are defined as entities, and their relationships are hardcoded into the files. Whilst difficult to understand at first, I now miss the solid relationships between the entities, forms and the data they controlled. One of my recent projects was a simple plugin for WordPress, and not having a solidified relationship between database and code is limiting and feels so old fashioned.

FrontEnd

The front end was designed by the hugely talented Iestyn Lloyd, using the Bootstrap (version 2.x) CSS framework. I chipped in with some of the HTML and CSS, but my main work on the frontend was the coding. jQuery is in there as well as Three.js for controlling the zooming videos.

Vimeo API Development

As the site was for uploading and showing video, we decided to use Vimeo’s platform. Each uploaded video was sent to Vimeo via their API for encoding. It was then simple to use their player to showcase the submitted videos on the site. I used Vimeo’s PHP library on Github, but did end up making small improvements.

Version Control and Deployment

Github was used for versioning and deployment. I wrote a bash script on the server for deployments, and this was ran manually whenever we needed an update. Me and Iestyn have overwritten each other’s files on many projects, So Github was a welcome change. Iestyn even managed to overcome his deep rooted fear of the command line!

Testing

The site was hosted on Digital Ocean’s servers. The site handled all out uploading tests admirably, and this is no doubt thanks to Symfony2’s solid architecture (although Digital Ocean’s solid state hard drives helped!).

To my shame no unit test were designed. This was my first SYmfony2 app, and I had often read that unit test were not advised on first projects.

Conclusion

I would have liked to develop a simple Page CMS, but time did not allow it. Static pages were updated through the usual deployment process. One of Symfony2’s main problems is that although Composer works brilliantly, finding the correct version numbers for the dependencies was a pain.

I also struggled with getting Sonata Admin to work, although when it finally caved in it worked well.

Unit Tests would have improved development, but again time was against me.

In redoing the project, I would like to have had a proper development server and a better way of deployment. But with having to engineer all levels of functionality (server install/config, backend, frontend) on the project there simply wasn’t time.

All in all I enjoyed the learning experience and look forward to using Symfony2 again. This time the learning curve will not be quite as steep.