This period of time is dominated with the opening of submissions for Storehouse Issue 19 and the redevelopment of the Storehouse Online Submission Tool (written in HTML, CSS, JavaScript and PHP). But in among the excitement with that I also heard more about the internship that I am hoping to complete over the summer, took a first step towards going on a graduate scheme, as well as spending some time chilling in Disneyland.
New software and UI changes for Summer 2019!
This blog is now running on WordPress 5!
I couldn’t wait any longer! WordPress 5 was released in November 2018 and some 6 or 7 months later I’ve finally upgraded this blog! I’ve held back because at the time I was in the middle of creating an e-commerce site built on the popular WordPress extension WooCommerce for a client and was hearing a lot of mixed reviews of WordPress 5 – for the sake of compatibility and stability I kept their site on WordPress 4.9 (which is still supported for another few years!) and because my university blog was also critical to me and not something I could afford to lose, I decided not to upgrade to WordPress 5 until the summer – just in case anything went wrong!
So, here we are in June 2019 and I’ve finally upgraded to WordPress 5 – 5.2.1 is the latest version, specifically, and so far it seems good! The UI change – specifically the narrower editing window – might take some time to get used to, but so far it seems pretty similar to 4.9, so let’s see how I get on with it.
I’ve got Axure RP 9!
Axure RP 9 came out in June 2019 and I have already upgraded from RP 8 to RP 9. When it comes to designing/wireframing/prototyping software, I’m generally not in love with any of them really – I tend to find that coding prototypes allows me to be more flexible and is faster (so I guess my favourite prototyping software is probably Visual Studio 2019, actually!) but when I do use them I’ve always found that Axure RP has been what I turn to. I find it easy to use and I love how you can run your prototypes in a web browser (even export them as HTML, CSS and JS documents so that they run like a real website!), easily create clickable designs and even write your own JavaScript for added functionality. RP 8 was looking a bit dated with its light grey UI and felt a bit ‘clunky’, so it’s great to see that RP 9 has a dark mode and an updated UI and is able to open the projects that I made in RP 8.
Getting better with prototyping software such as Axure RP and Adobe XD is one of my summer goals, so I look forward to experimenting with the new version of Axure RP.
I updated my smartwatch to the Android One UI!
OK, this is getting a little crazy now, but it’s true, even the smartwatch has had a UI overhaul! A while ago I upgraded my Galaxy S8 smartphone to Android 9.0 Pie and with that came a UI overhaul and a dark mode and it looks very nice indeed! Samsung has recently also updated the software on some of their smartwatches (including my 2018 Samsung Galaxy Watch 42mm) to include some new UI elements from the Android One UI (the name of the UI that runs on Android 9.0) and it looks very nice indeed – as well as looking more unified with the UI that runs on my S8.
Introducing Storehouse Issue 19: ‘Process’ – June 3rd 2019
Submissions opened and the theme ‘Process’ was officially announced on June 3rd 2019. The colour scheme was orange and black and arrows were used as promotional brand marks – the idea of the scheme and the brand marks was to promote the idea of ‘construction’ and thus ‘process’. The colours were originally set to be black and yellow, but this was changed a few days before the theme announcement and submission launch so that the Storehouse colours did not look the same as the NUA colours.
Rebuilding the Storehouse Online Submission Tool
The original online submission tool was built in November 2018 using PHP and JavaScript. It was written in just a couple of days and allowed users to upload a ZIP, RAR, TAR or 7z file containing their Issue 18 submission directly to the Storehouse web server – providing that the file they submitted was under 32MB in size. More information about this can be read in this post here.
I wrote the tool mainly so that submissions could be stored in a central location and so that I wouldn’t have to keep downloading submissions from WeTransfer. In the end, Storehouse 18 was the most submitted-to edition of Storehouse to date with over 90 submissions from students – the vast majority of them coming from the online submission tool, despite some usability issues being identified.
For Issue 19 I was unsure about whether or not I’d use the submission tool again, but I decided to rewrite it at the end of May/beginning of June and have it ready for submission launch on June 3rd.
The new version is also written in PHP but uses less JavaScript than the previous version. Validation is now done mostly through HTML form pattern checking with a little JavaScript. This is arguably a little less secure as anybody can view the page source and see what the form is looking for, so ideally you’d want to couple this with JavaScript checking, but it increases maintainability. For an application like Storehouse where we’re not transferring anything secure, HTML’s pattern checking works fine.
The PHP script to handle the file uploading, naming and moving is similar to that used in the previous version – but it is a bit more sophisticated. Read on!
Improvements to the Online Submission Tool
The Issue 19 version now includes:
A form that users must complete before they submit their work.
The form asks the user for:
- Their name
- Their student number
- The year group they were in between September 2018 and May 2019 (i.e., the year group they were in when they submitted the piece)
- Their course
- Their NUA e-mail address
- A title for their submission
- Their Instagram name (optional)
- A link to any videos they want to submit (usually for video submissions only)
The form collects all of the necessary information that the Storehouse Content Team need in order to put the submission into the magazine. A common problem with Storehouse submissions has been that students often don’t provide enough information with them – often we’d get submissions that were missing e-mail addresses, Instagram names, year groups and the course that the student was studying. The SU would often have to spend time finding out student details just so we could ask them for a description of their work (often students would just submit images). It didn’t matter how many times we told people to include a document containing this information with their submission, most students didn’t.
Speaking of documents…
A text document containing this information is generated and stored with each submission
The PHP script now pulls this information from the HTML form and writes it to a text document which is stored with each submission. When the Content Team come to look at the submissions they will have all of this information ready.
Submissions are now stored in individual folders, uniquely named
The last submission tool could separate the ‘light’ and ‘dark’ submissions, but it didn’t create a new folder on the server to store each submission into. The PHP script now creates a folder for each submission in the following format:
student number-student name-year-course-submission title-sh19
For example, if my student number were 1700000, my name Jason Brown, my course BSc (Hons) User Experience Design and the title of my work ‘My great work!!’, here’s what my folder would be called:
1700000-jason-brown-yr2-bsc-user-experience-design-my-great-work-sh19
The PHP script removes any capital letters and special characters from the fields and the ‘(Hons)’ bit from the course name. It then removes spaces and replaces them with dashes to avoid having folders (and thus URLs) with spaces in them.
Previously, the Content Team Heads had to go through each submission and put them all into individual folders containing the student, the course and the year in the folder name. There’s no need to do that anymore because it’s all done automatically – saving a lot of time and hassle!
The submission title is included in the folder name because often students submit multiple pieces of work to Storehouse. Providing each piece of work has a unique title, the folder name will always be unique and thus the chances of receiving an error because the directory already exists is much reduced.
The files that are uploaded are also uniquely named to match the folder so that if they’re ever moved or lost we know who the work belongs to.
It’s more obvious when the file is uploading!
A big problem with the original submission tool is that you had no idea that the file was uploading. You’d click on submit and nothing would happen until you were taken to a screen that literally said ‘File uploaded, it’s safe to close to the page’ (or similar).
A progress bar showing the upload progress would have been a great solution, but unfortunately it’s proven to be a little complicated to make it work correctly (using AJAX and JavaScript) and form validation. Another problem was that it sometimes interfere with the PHP getting the values from the HTML form and thus the PHP being unable to create the directories and rename the files and creating errors.
As a compromise what happens now is you click submit and if you are missing any information the tool alerts you to this. If all of the information is present and valid, the form is hidden and a screen is shown in its place that informs you to keep the page open until the upload has completed. To show that the page hasn’t crashed, some small ‘quotes’ are shown and changed every 7 seconds.
In the screenshot above, you can see that ‘On its way’ is one of the nine quotes shown and replaced every 7 seconds whilst the file is uploading.
It’s clearer to tell if the file upload was successful… or not!
Previously a simple PHP echo command was used to communicate errors. This literally prints a line of text on the screen with no formatting. It works, but it’s not very ‘grand’ or terribly clear to see what it’s saying unless you actually read it.
Each error in my PHP script now redirects the user to page explaining what the problem is. It looks more attractive and more professional. I can also update the web page without having to modify the PHP script and can redirect users to the same error without having to have that error copied out multiple times in code.
Similarly, when the upload has been successful you are taken to a nice page telling you just that. It also provides some information on what happens next so that students don’t need to email us to ask when/if they might hear about if their work has been selected.
The student also gets an email receipt
The previous version did email the Storehouse email address notifying us that a new submission had arrived, but it now emails the student too, thanking them for submitting and also suggests that they keep the email as a ‘receipt of submitting’. Both emails contain the data that the student inputted into the form in order to submit and the submission time.
Demonstration
View a demonstration of the submission tool for Issue 19 below.
Improvements for Issue 20
Depending on the success of the Issue 19 version and how students react to using it, I can think of three key improvements I’d like to make to the Issue 20 version.
Allow bigger files
We’re still limited to 32MB because of restrictions to editing the PHP.ini file on the GoDaddy server. I could get in touch with GoDaddy at any time and ask them to change this, but it’s a little annoying that no matter what value I sent the various values that allow for larger file uploads in PHP.ini to, they don’t apply until the Apache web server is rebooted. Even though I have SSH access to the server and can run commands on the server through the use of PuTTY (which allows you to connect to servers via SSH), I can’t reboot the server – GoDaddy won’t allow me.
There was a 32MB limit for Issue 18 and few people complained, so hopefully it will be OK to keep this in place for Issue 19. I might experiment with it soon and see if I can increase it to 64MB or 128MB.
Show upload progress properly
It would be good to do some more experimenting with that AJAX progress bar, but the need to get this working for June 3rd or June 4th at the latest (the deadline that I as Head of Storehouse set myself for opening submissions – it’s already later than May 22nd which was the date that submissions for Issue 17, last year’s summer issue, opened) prohibited me from experimenting further.
Remove the need to upload an archive file (ZIP, RAR, TAR, 7z and so on)
The beauty of archive files is that they are one file that contain lots of individual files. The downside is that you have to know how to create them. We had a few students unsure about how to create them for Issue 18, despite there being a link to a WikiHow article explaining how to make ZIP files on Macs and PCs.
I have been experimenting with creating a PHP uploader that allows you to select multiple files of any format and upload those. The files would be copied into the directory created by the PHP script and as long as they totaled 32MB or under in size they’d upload fine. I almost got this working but ran into some small issues.
PHP vs Node.js
PHP is one of those languages that people feel is becoming obsolete thanks to newer technologies such as Node.js. A quick Google search for ‘is PHP dead?’ will render results from Stack Overflow and all sorts of forums with people debating the subject. An interesting read is this one here. The general consensus is that PHP is not dead yet and in fact PHP 7 is a massive improvement from PHP 5 and fixes a lot of the complaints about performance that developers had with PHP 5.
I’m using PHP for this project because I know that it runs on the Storehouse Online web servers. My (limited) understanding is that to run Node.js you need a slightly more specialised server or possibly need to install it through SSH. The PHP script to upload files is pretty easy and for the small applications like this it runs fine. I have experimented with Node.js in the past though – read!
Managing the Storehouse team
On the whole it’s been a pretty smooth journey so far – but we’ve done the easier parts and are still yet to create the magazine!
There has been several things that I’ve had to make fairly snap decisions about, such as changing the colour scheme at the last minute, which may not have pleased everybody, but unfortunately when running something like Storehouse sometimes the leader(s) has to make these decision that don’t sit well with everyone. I’ve not had anybody leave the team yet, so I must be doing OK!
I’m enjoying being the one calling most of the shots, but I do give tasks to my team leaders (or ‘Heads of Department’) and ask them to complete them for me and feed back. At the moment tasks have involved:
- Creating promotional material and publishing it online.
- Being the first point of contract for external people wishing to contact Storehouse regarding advertising or event invitations.
- Ensuring that team members are aware that they need to start writing articles for Storehouse.
- Finding out the costs of things they want, such as posters, parties and paper types, so that I can write the final budget.
These are all things that I would have done myself several years ago, but I am now learning how to be better at delegating and thus a better team leader by giving my HODs important work to do, which in turn makes them feel important and valued.
Updates to the Online Submission Tool – June 11th 2019
After I returned from holiday (read on!) I spent some time improving the Online Submission Tool further by taking on board feedback from several students who had tried to (unsuccessfully) use it to submit their work to Storehouse. The Online Submission Tool now features much better form validation and it is clearer when invalid data has been entered.
When data is not inputted at all or has been inputted incorrectly, the site now displays a message explaining exactly what it is that is missing or incorrect and gives some help and guidance rather than just telling you what you need to enter.
Fields containing invalid information are now red and turn to black when the data is valid. It was becoming obvious to me that whilst the orange worked nicely with the theming for Issue 19, it wasn’t apparent to users that orange fields contained invalid data. Hopefully red is associated with ‘danger’ or ‘wrong’ with most users, so it will be more obvious to them. To keep the theming present, fields containing valid data now have a black background and the text is coloured in FF9B0B – the orange hue we are using for the identity of Issue 19.
I would have liked for the form to check the extension of the submitted file before the file was uploaded and then produce a message if the extension wasn’t *.zip, *.rar, *.7z or *.tar, but unfortunately I am not able to get this to work at the moment. However, as of June 12th 2019, it is also possible to upload a single file in any format, but it’s still not possible to upload multiple files. For users wanting to submit multiple files we recommend uploading a ZIP file containing the files.
I did however fix a bug that meant that if an invalid student number or email address was entered, or if the user did not select a file to upload but clicked on ‘Submit’ anyway, the page would change to look as if the file was uploading, but it wasn’t. This was the nature of a complaint I received that prompted this update to be applied.
Another thing that was added was making it clear to the user that we want the year group that they were in between September 2018 and May 2019, NOT the year group they’ll be going into in September 2019 when the magazine is launched. The HODs voted on which year group to include with submissions and the preceding year group was voted in favour of the current one for the summer issue.
The home page was also updated in June 2019 to feature the new promotional video as well as change the yellow assets on the site to orange and include a Submit button that takes users to the Online Submission Tool. Ameer, Head of Storehouse Online and fellow BSc student, did this for me.
I also updated the ‘Team’ page to include photographs of the Issue 19 team and remove the old team members and HODs from the page.
Wiser Group – first steps towards a graduate scheme?
Also on June 11th (a busy day!) I had a telephone interview with a company called Wiser who contracted me via LinkedIn about a week prior to inform me that I may be an ideal candidate for their ambassador position. It seems to me that the position involves attending events to promote and craft graduate schemes for companies like Nike, JustEat, WorldPay, Heinz, Deutsche Bank and several other big names and getting students on these schemes. I decided that this particular role was not for me and they have since offered me another position, this time doing freelance work for these companies, that I am still considering. There may be the possibility of employment at the end of it but it’s not certain.
Graduate schemes are definitely an option I am considering post-university because they offer great training and a ‘foot in the door’ to large organisations that just don’t seem to exist around here in Norwich. I will be spending more time over the summer researching these.
Internship with BreckWorld through the NUA Ideas Factory
There has been delays getting this going due to financial concerns, but I was excited to hear that I had been shortlisted for an interview! Hopefully that happens soon. If I get on this internship it’ll be a great 3 month opportunity working with creatives to develop an app and website encouraging tourists to visit Norfolk and giving them ideas about what to do here.
It’ll also be a great way to meet more like-minded people who study at NUA since approximately 50 people will be interning alongside me! This is something that is quite important to me now since a lot of my friends are/were in the year group above me and are of course graduating and leaving NUA this summer. Since the beginning of 2019 though I have been trying to make more of an effort to make friends with people in my own year group, but it can never hurt to have more!
Redesigning the BrownTech IT Services website with Axure RP 9
One thing I wanted to get better at over the summer was use design software such as Axure RP and/or Adobe XD to produce wireframes and high-fidelity prototypes for websites without needing to code them. With the recent launch of Axure RP 9, I thought it would be fun to try the latest version of Axure RP and redesign my father’s website using it.
My father launched his business, BrownTech IT Services, in 2010 and until 2014 he had a very basic website made in Microsoft FrontPage. In 2014, using the ‘skills’ (in inverted commas!) I had acquired by reading and completing the exercises in the Adobe Dreamweaver CS5.5: Classroom In A Book book, I built him a new website that is still online as of June 2019 and is the oldest website that I’ve made which is still online. It was also the second fully-coded website that I ever made.
The site hasn’t aged too badly, but as mentioned in a previous blog post, the plan is to rebuild it using either React.js (which would be very cutting edge) or with a new framework that I’m going to write (which would mean this site is the first new website I’ve written from scratch since around February 2018). Before I do that though, I want to get a prototype made with Axure RP 9 to improve my skills with that and to also go into making it with an idea of what it’s going to look like.
I’ve also spent some time considering the IA. Essentially it can be made very simple, with the items in the blue boxes below being sections on the pages they correspond with (shown in red) rather than individual pages (which they are at the moment).
Holiday at Disneyland Paris
It’s not all about work and ‘uni, uni, uni, professional development, professional development, professional development, internships, internships, internships.’ Sometimes you just need some time to relax and calm down and think about something else. In the days running up to going to Disneyland I had been working hard to get the Storehouse 19 team up and running and also ensuring that the Online Submission Tool was going to be in a working state for Monday 3rd June. Storehouse was the only thing on my mind, so it was nice to go on holiday with my brother for a few days to experience some ‘Disney magic’, awesome roller-coasters (I’m a big thrill seeker!), explore Paris, drive across France (a fun experience!) and forget about all of these other things.
Don’t get me wrong, I love Storehouse and coding and UX and all – but sometimes you just need to escape from it all and focus on something different and spend time doing different things to stop things from consuming you.
But, that didn’t stop me from finding the Microsoft offices in Paris! We drove right past them on the way back from Paris! I liked Paris, but probably not enough to want to live and work there – especially when I know Microsoft have offices in London, Reading and Seattle (I’ve been to all of them!) – and I can’t speak French! So I have to ‘let the funky music do the talking.’
Bibliography
Oram, M. (2018). Is PHP relevant? – DEV Community 👩💻👨💻. [online] Dev.to. Available at: https://dev.to/mporam/is-php-relevant–1np [Accessed 12 Jun. 2019].
Jason Brown's UX Degree Project Blogs 
2 thoughts on “Summer Updates – Early-Mid June 2019”
Comments are closed.