Genius Media

Blog

Read our minds - latest news, crazy ideas and random ramblings.

Laravel 5 Released!

Thursday, February 5th, 2015

We’ve received some exciting news today, Laravel 5 has been released! Laravel is the application framework we build our custom web apps on top of, and now that Laravel 5 is out of beta we will begin using it on all new web app projects.

Laravel 5 has a bunch of new features we can’t wait to play around with such as form requests, a new routing system, and our favourite, controller method injection.

What does all this nerdy stuff mean for our clients? Well the key thing really is that it increases our efficiency. All these new features will allow us to do more in less time, which translates to better results at a lower price for our clients. Everyone wins.

Automated Exporting of All Westpac Transactions

Thursday, August 28th, 2014

Like many other businesses we’ve recently run into the frustrating problem with Westpac online banking whereby the function to export your transactions to a CSV file or a file for a specific accounting application only works for transactions that appear in your transaction list, which is very limited, it’s currently only showing the last 150 or so transactions for us. So, if you’re not exporting from online banking frequently, you can quickly end up with gaps in your data. These gaps aren’t easy to fill as trying to copy and paste transactions one by one from the eStatement page, or the pdf you can download, is extremely tedious and time consuming.

A quick Google search shows numerous people complaining about this problem and some posts from years ago even claiming Westpac stated that they were in the process of improving it, but still the issue exists. So we’ve taken matters into our own hands.

We created a tool to help with the process.

Firstly, log in to your Westpac online banking, select an account, and visit the eStatement tab.

Next, press CTRL + A to select everything on the page, and then CTRL + C to copy.

Now we just paste all of that into the textarea on the eStatement export tool page.

Finally, just hit submit and a CSV should download.

Repeat this for every page of the eStatement that you need.

If you encounter any problems with the tool, get in touch with us and we’ll be happy to help.

A Guide To Writing A Great Website Brief

Tuesday, August 12th, 2014

You know you want a new website for your business but are not sure of the specifics or how to get the process started. Don’t panic, this is a common issue many businesses face.

Writing a website brief not only helps a web development agency gather a better understanding of you, and the sort of website you’d like built, it often also assists you in figuring out exactly what your requirements are.

Below is a very simple guide to writing a website brief, read through it and think about each section carefully.

A Summary of Your Business
While we do receive a substantial amount of repeat business, we are often being engaged by new clients who we’ve just met as well. A lot of the time, it’s not too hard to get a general idea of what a business is about, but unless you tell us more we won’t have a deep understanding of how you work and what you do. Each business is unique so it is important for us to have this deep understanding, so we can base the work we do for you on that rather than any pre-conceived ideas we may have about your business.

What is the purpose of your new website? / What are you trying to achieve with it?
An aesthetically pleasing website is nice, but what’s far more important is that your new website is fit for its purpose and achieves its aims. This should be very specific and very clear. Do you want to sell something? Do you want to show something? Do you want to explain something? Do you want to motivate your audience to do something?
It’s also important to let us know who this audience is, who is your aim directed at?
Knowing the answer to these questions and being able to articulate it to your web developer is paramount. However, often the answer is very simple. For example, “We want our new website to sell more of our project management software to businesses in the construction industry.”

Budget
A transparent budget from the get go allows us to identify the most optimal and suitable solution we can offer you. It also allows us to give you an idea of what to expect. This can be a tricky subject, but if you do have an idea of how much you’d realistically like to spend, it’s important to convey this information to us. This way we can ensure both parties are on the same page and have similar expectations.

Deadline
We can work to tight deadlines and have done so many times, however, having more time allows us to better research and plan your project, as well as gather greater feedback and input from the client. Often we find a client doesn’t have a specific timeframe, they really just wants the project completed to the best of our abilities and in a timely fashion. This is how we will generally proceed, but if you do have a deadline that you’d like the project completed by, please let us know.

Hopefully we haven’t scared you off with all this information. It can appear daunting at first but we’re here to help. We can help you figure any or all of this out, the best way to start would be to fill out our handy project planner and we’ll get in touch with you shortly.

Our New Website

Monday, July 28th, 2014

Welcome to our new website!

We’ve been working on updating our website in between client projects for some time now, and it’s exciting to finally release it to the public.

Our portfolio has also been updated, so you can have a look at what we’ve been working on recently, and if that happens to inspire you to get started on your own project why not let us know more about it and we can get the ball rolling.

What is responsive web design?

Wednesday, June 5th, 2013

Most of us, nowadays, have multiple devices we like to browse the web with, whether it’s a desktop, laptop, tablet, smartphone or something else. With the push now for almost every object used in our daily lives to feature integrated internet connectivity, as these smart devices become more prevalent, it’s highly likely that the number of different devices we use to browse the web will only increase. All these different devices also tend to have different screen sizes and resolutions. Think of an iPhone 5 compared to a Samsung Galaxy s4, there is certainly a large difference there in screen size and resolution, or even an iPhone 5 compared to it’s predecessor, the iPhone 4s, and there is still a substantial difference there. Factor in that these are just a few of the many different smartphones out there, and you start to get an idea of how much variation there is between different devices when it comes to screen size and resolution. Then factor in that there is a similar situation with all the different tablet models, and with computers as well. You’ll soon start to realise just how many different screen sizes and resolutions a website could be viewed on, we’re talking hundreds.

All these different screen sizes and resolutions pose a challenge for a web developer. Users expect a website to work well on all their devices. They don’t want content to be cut off, or to have to zoom in to read text or click links.

One solution would be to create a different version of a website for each different screen size and resolution, but as mentioned above, there are hundreds of different screen sizes and resolutions, and it doesn’t take a genius to figure out that making hundreds different versions of a website is not viable or optimal.

This is where responsive web design, or ‘responsiveness’, comes in to play. Basically, a website that is ‘responsive’, will automatically respond and adapt to the screen it’s being displayed on. For example, elements may change position on different devices (on a tablet you may see two paragraphs side by side while on a smartphone the second paragraph will be under the first), elements may change in size (the font on a tablet may be larger than the font on a smartphone), or some elements may disappear entirely. Whatever the case, the end goal is to optimise the user experience regardless of what device a website is being viewed on.

For a bit of fun and to understand how responsive design works, why not test out how our website implements responsive web design. If you’re viewing this website on a desktop or laptop, try change the size of your browser window and see what happens. Alternatively, if you’re on a tablet or smartphone, why not flip your phone between portrait and landscape mode and see what happens. Better yet, if you have multiple devices on hand, such as a laptop and a smartphone, why not view the website on both and see the difference.

Even horizontal spacing with jQuery

Friday, November 2nd, 2012

Every now and then you run into something which should be very simple to do in CSS, but isn’t. We recently had the need to horizontally space a few images evenly and then repeat this over a number of rows, with each image having a different width and a different numbers of images on each row. The only way this would be doable with pure html and css would be to calculate and specify margins for elements on each row separately, a tedious task.

Ideally there would be a simple css attribute we could apply to each row which would signify that each child element is to be spaced out evenly. Unfortunately there isn’t, but a quick bit of jQuery code proves to be a good solution for this situation. You can see the code below, feel free to use it in your projects if you’re looking for a solution to this issue that’s as easy as it should be.

jQuery(window).load(function() {
  jQuery('.row').each(function() {
    var totalWidth = 0;
    var row = jQuery(this);
    row.children().each(function () {
      totalWidth += jQuery(this).width();
    });
    var space = row.width() - totalWidth;
    var addMargin = space/(row.children().length - 1);
    row.children().not(':first-child').each(function () {
      jQuery(this).css('marginLeft', addMargin);
    });
  });
});

Setting up a Vagrant LAMP stack

Thursday, September 27th, 2012

We’re looking at moving to a virtual machine (VM) based local development solution rather than running a locally installed web server stack like XAMPP, which we’ve done so until now. The benefits of such an approach are that the development environment can match the production environment, and if there is a team working on the same project then each team member will be developing on the same environment. This article is written with zero previous experience setting up and running VMs, but with some basic experience setting up and working with linux servers.

While doing some research, it doesn’t take long to come across Vagrant, which makes working with VMs a much simpler task than doing everything manually. There is some pretty good documentation to help you get up and running with Vagrant and understand the core concepts. While the getting started guide does leave you with a running web server, its not a LAMP stack which means your not ready to start running php projects on it just yet.

While the preferred method of setting up a LAMP stack through Vagrant would be to run a Linux based box (the lucid32 box used in the Getting Started tutorial is just fine) and then use one of the provisioning solutions discussed in the documentation, such as Puppet or Chef, there is a bit of a learning curve involved in each of those, and I wasn’t prepared to invest the time in learning either of those at this point in time. So I’m going to give you a quick guide comprising what I have done to get started with a LAMP stack on Vagrant, in hopes that it can help someone else as it was quite hard to find information on how to do so online.

How to do it

Step 1: Install Vagrant and add an appropriate box (I use Lucid64 but the Lucid32 covered in the getting started tutorial is fine), and vagrant up your box.

Step 2. SSH into your Vagrant VM, and run sudo apt-get update to update Apt-Get and then run sudo tasksel and choose to install a LAMP Server.

Step 3. Install phpmyadmin by running sudo apt-get install phpmyadmin and make sure you select the Apache2 option during installation and then restart apache by running sudo /etc/init.d/apache2 reload

Step 4. The software you need is now installed, you just have to make a few changes in your VagrantFile. Firstly, you want to forward a port so you can view your web server in your browser, I used port 8080 which was included in the VagrantFile as a commented-out example, so I just had to uncomment the line config.vm.forward_port 80, 8080, but you can change 8080 to whatever port you want to use. Secondly, I created a ‘public’ folder in my project folder and added config.vm.share_folder "publichtml", "/var/www/", "./public" to my VagrantFile so now any files I put in the public folder are also in the default apache web root.

Step 5. You now just need to run vagrant reload to update your VagrantFile changes, and you have everything running. I would also recommend running vagrant package to package this setup into a new box and then run vagrant box add lampstack package.box so now whenever you need to create another LAMP VM you can just choose the lampstack box (vagrant init lampstack).

That’s it!

Like I mentioned, eventually you will want to learn to work with Puppet or Chef, which I aim to do soon, but this is the quickest and simplest way to get started in Vagrant and I hope someone out there finds this guide helpful.