Tag Archive | JavaScript

DRIVETRIBE MyGarage

James Mays Garage

During my time at DRIVETRIBE I primarily worked on a feature called MyGarage which allows people to upload a complete history of their vehicle ownership as well as their dream vehicle and any vehicles they have for sale.

Each vehicle upload consists of an image, make and model. Optionally a user can add the model year, year of purchase and a text description. Uploaded vehicles can be liked and shared by other users, and they can comment to ask questions or provide opinions. The makes and models can be from a list of known brands or a user can input a custom value if they have something particularly rare.

Vehicle Upload Screen - Desktop
Vehicle Upload Screen – Desktop

The feature has two main benefits, one being that users enjoy the feature and spend a lot more time on the website if they can interact with their own garage and comment and share other peoples. Secondly, DT gets access to a wealth of data about its users; such as how often they get a new vehicle and what they would really like to buy in the future.

I worked on the front-end portion of the feature on DTs responsive website such that it worked both on mobile and desktop browsers. The front-end was written in React and utilised the very cool Styled-Components library, which I enjoyed using.

Garage Page View - Mobile
Garage Page View – Mobile

One of the most exciting parts of working on this project was that it was announced to the world by James May of Top Gear and The Grand Tour fame. A competition was also ran where a user could win (a model of) their dream ride and the winner was announced by Richard Hammond.

I hope a lot of people get a lot of enjoyment from this neat feature.

Danny

Advertisements

Expect the unexpected

Solar System Simulation Windows 10

When you design software you usually have a few use cases in mind, in the case of EpsilonGit the use case I keep coming back to is a project lead who wants an overview of how his team is working and how they are using their version control software.

Back in second year when I developed The JavaScript Orrery my target audience was David Parker and the only use of the software was to impress him for degree credit.

A short while later I made a few small adaptations to package the orrery as a Windows Store (now called Universal Windows) Application. I thought a few people might enjoy watching the planets go around the screen, but didn’t really expect too many people to download it. To be completely honest, I mainly packaged it as an app to get points for the App Builder Rewards competition.

I haven’t touched the orrery, packaged as Solar System Simulation on Windows, for years. However, I wrote a little while back about someone who used it to teach their daughter about space, an unexpected use but a nice one.

Today I got an email from a student in Brazil who wondered if the software had a function to see planet locations at specific dates, as he liked the simple 2D graphics and wanted to use them to make a tattoo of the layout of the solar system on his birthday. Strange, but cool.

Unfortunately the Solar System Simulation (which is a gratuitous name — its in no way even close to a ‘simulation’) doesn’t support this function — but its a cool idea, and one I wouldn’t have thought of.

It might be fun to add it in one day, and see how popular some of the ideas I have would be compared to those that a user has had and wanted to be implemented enough to go to the effort to email me about it. I suspect the user submitted ideas might be more popular, because no one knows how well a customer users your product as well as a customer. But I might be wrong, it could be an interesting bit of research.

So, expect the unexpected uses of your software and services — both in positive ways, such as odd-but-exciting use cases, and negative, such as malformed input — but also be excited by the prospect.

Danny

P.S ‘Solar System Simulation’ is still available and works on Windows 8, 8.1 and 10.

DannyBrown.net – Restyled and Rewritten

Danny Brown.net Logo

As some of you may have noticed over the past few weeks dannybrown.net has been updated — not only has the style changed, but so has  much of the content. Previously my old domain, dantonybrown.com, showcased a portfolio, contact information and linked to this blog, but did so over a number of pages. Then when I bought dannybrown.net I got rid of the old site and simply redirected the domain to this blog. This new website showcases everything you need to know about me at a glance in one, simple to navigate page.

Planning

When I was in the planning stage of the project I decided very early on that I wanted the site to work just as well on mobile devices as it would on desktops. This is partly because an ever increasing number of people use their smartphone as their primary web browser and partly because I envisage many of the sites users to visit it after I give them one of my business cards, presumably whilst on the move or sat in a conference on their mobile device.

Whilst planning I also contacted my friend Harry Galuszka to get some professional graphic design done for my logo and some of the images I use. I’d like to thank him for his help 🙂

DannyBrown.net Tablet View

DannyBrown.net Tablet View

Development

The website is written in HTML 5 with CSS 3 providing the responsive styles and JavaScript providing some of the interactivity. Whilst developing the website I tried to keep everything really simple, and human readable, without producing really bloated code. I feel I achieved this aim because the entire website is only 120 lines of HTML, 270 lines of CSS and a few libraries.

I used Notepad++ as the source editor for this project, due to its fantastic syntax highlighting, and a Custom-built Linux Virtual Machine on Windows Azure as the host, which I FTP’d my files to, to test them in action.

DannyBrown.net Desktop View

DannyBrown.net Desktop View

Testing

As part of a campaign to get developers writing code that is well optimized for internet explorer Microsoft have started giving away 3 month subscriptions to a fantastic service called BrowserStack. BrowserStack allow you to test your code in Virtual Machines hosted online, allowing you access to devices and operating systems you might not normally have access to. Below is a screenshot of me testing my website on an iPhone 5, a device to which I would normally have no access:

DannyBrown.net iPhone Emulator

DannyBrown.net in an iPhone Emulator

Using this service I was able to test my website against, and make changes to fix layout issues in the following Browsers:

  • Internet Explorer 6/7/8/9/10/11
  • Firefox 3.5 onwards
  • Safari on Mac
  • Safari on iOS
  • Opera Mini
  • Opera Mobile
  • The Android Browser
  • Chrome for Android
  • Google Chrome

On the following OS’s

  • GNU/Linux
  • Windows XP/Vista/ 7 / 8 / 8.1
  • Mac OSX
  • Android (tablets and mobile versions)
  • iOS (iPads and iPhones)

Therefore ensuring I had tested my website on a wide variety of hardware. Its a shame to see that Windows Phone and Windows RT is not currently supported, but this was not too much of an issue as I own devices which run those operating systems myself.

The Future

The website is now installed on a shared Website instance on Windows Azure, in future I will be restyling this blog to fit in more with my website, however I think I will keep it hosted in WordPress.com as I like the fact that they automate backups and installation of new features and bug fixes to the WordPress platform, saving me a few jobs.

On the site itself I think I will be adding more information about my projects, and my education — e.g. module grades and links to download or view software made as part of coursework — soon.

Thanks for reading,

Danny

Networking and Web Technologies Exam Result

This is literally all that happens in Networking

This is literally what happens in Networking

Today, at 1:30pm, I took an exam for Networking and Web Technologies. Questions ranged from asking us to explain what a piece of JavaScript code did, to explaining some of the pitfalls of SMTP (The protocol used to transfer emails) as well as explaining the use of the datagram fragmentation mechanism in the internet protocol.

Because it was an electronic assessment we got our grades back at 5:30pm and I really happy to say I got a grade of 85%.

If I combine this grade with my two other grades and account for weighting this means, subject to exam board approval, I have achieved a grade of 88% for the Module as a whole! Annoying close to that big fat 90, but I’m very happy regardless!

Danny

An ‘Appy Christmas at Modern Jago

One of the many things I love about Modern Jago is its huge TV, which has an XBOX connected, with Kinect

One of the many things I love about Modern Jago is its huge TV, which has an XBOX connected, with Kinect

My apologies for a total lack of posts since Christmas. I’ve been busy with all sorts, but mainly revision for my exams. Normal service will now be resumed 🙂

Near the end of November I read about ‘Appy Christmas — an event set up by Microsoft to encourage the development of Windows 8 applications over the festive period — on the Microsoft UK Students Blog.

I immediately thought it could be good fun and posted about it on the University of Hull Microsoft User Group hoping that some of my fellow Hullians would join me on the trip down to Modern Jago, Shoreditch , London. It turns out that in the end 25% of the attendees were from The University of Hull, a fantastic turn out.

The two day event started for me and the two Hullians I was travelling with, Rob and James, went to catch our train at half 10 on Monday from the Hull Paragon Interchange station, just 2 and a half hours later we were at Kings Cross and boarding our Circle Line tube train to Liverpool Street — 10 minutes after alighting at Liverpool Street we’d finished the final walking part of the journey and were at Modern Jago.

This was the second time I’ve been to Jago and I really like it there, its a blend of Modern and Old that works really well, much like Windows 8 I guess Microsoft would say ;).

Over the course of the Weekend I ported my Solar System Simulation coursework for 2D Graphics to WinJS, improved the UI and submitted it to the store — quick work! You can read all about that application here. Rob developed a C# and XAML Modern UI app port of his Cheap Ass Gamer Windows Phone 7 application, which is absolutely beautifully designed and you should definitely check out by clicking here!

Other than application development  a lot of fun was had out on the town with Phil Cross, Ben Nunney and my fellow Microsoft fans and a heck of a lot of pizza was consumed. Overall we produced over 30 apps in two days, good going! No wonder the Windows Store is the fastest growing app store at the moment. Porting applications is almost effortless, bar changing the UI for the big screen.

Danny

2D Graphics Coursework – Solar System Simulation now on Windows 8

Solar System Simulation on Windows 8 - Elliptical Mode with Trajectories on

Before Christmas I submitted my Assessed Coursework for my 2D Graphics and User Interface Design module, a  2D Orrery (or Solar System Simulation in laymen terms) using the HTML 5 Canvas Tag and associated JavaScript API’s. I think I did pretty well, as I implemented every feature outlined by the specification to, what I feel, was a high standard.

6 days after the hand in date my friends Rob, James and I went to ‘Appy Christmas, an event set up by Microsoft to encourage the development of Windows 8 app in the holiday period. Whilst there I ported my application from a browser based webpage to a fully featured WinJS Windows 8 application. When I told my lecturer, Dr. David Parker about it he seemed interested in the ease of the porting experience, so I shall outline it here.

  • I added all my “Business Code” and classes by just adding the .js files to the solution
  • I edited the HTML page to make it fit better, as scrolling pages don’t look great in apps — all of the Windows 8 style came for free with no work

And that was it! At this point the application worked, however it wasn’t very touch friendly and the Koch Snowflake fractal algorithm would lag on some lower powered arm devices, including the Microsoft Surface RT, so I made the following enhancements

  • Lowered the amount of iterations my fractal function went through, lowering the computational power required
  • Added an “App Bar” to hold buttons which controlled all of the functions — the coursework spec asked that all functions were called using keyboard input, so this made it much more usable on a touch screen
  • Added support for the share charm. When you press it a bitmap image is created from the canvas and sent to whatever application you chose.

If you want to play with the application now, you can do so by downloading it from the Windows store here.

Below you can see some screenshots of the application in action.

I hope you enjoy using the solar system.

Danny

2D Graphics Coursework – A JavaScript Orrery

I apologize for the lag in the above video, its honestly not my code! 😉 It’s the free screen recorder program I used being iffy.

For the last few weeks I’ve been steadily working on my coursework for the “2D Graphics and User Interface Design” module. We’ve been tasked with developing a digital orrery using the HTML5 canvas tag and the associated JavaScript drawing API’s. “What is an Orrery?” I hear you ask, Wikipedia to the rescue:

An orrery is a mechanical device that illustrates the relative positions and motions of the planets and moons in the Solar System in a heliocentricmodel

Heliocentric just means that the planets move around a stationary sun.

The finished, final version of the product will have gravitational forces effect the positions of each planet, allow the user to invent new planets and place them in (effecting the courses of all the other planets!) and have an additional drawing mode in which all of the planets are made to look like pretty Koch Snowflakes 🙂

In the above video you can see what I have achieved up until now, with another month remaining to get it finished. I have

  • 4 Drawing modes (Arc mode, Line Mode, Sprite (image) mode, Animated Earth Mode (Using spritesheets))
  • Independent rotation speeds for each of the planets
  • Keyboard controls to decide which mode is shown

I have the following left to implement

  • Gravity
  • User added planets
  • A moon orbiting earth
  • Elliptical orbits
  • Koch Snowflake drawing mode

I hope to get most of these done this week 🙂

One of the interesting parts of the assignment has been the programming language used itself. JavaScript, though based on the same family of programming languages as my preferred language C#, is quite different to the aforementioned language in some pretty important ways, for example Object Orientation doesn’t come naturally, instead the language uses the Prototyping paradigm, which takes a bit of getting used to if you are an OOP programmer.

JavaScript is also the first loosely typed language I have been formally taught, though I did write in PHP for a few years before university which is also loosely typed. A loosely typed language such as JavaScript doesn’t have hard and fast rules on what can be stored in a variable, for example in C# if I write:

public int WholeNumberVariable = "string";

the whole program will not compile, because putting a string in a variable that has been initialized to hold integer numbers is illegal. In JavaScript when you initialize a variable you can’t assign a type, so It can hold anything

var WholeNumberVariable = "string";
var IExpectANumericResult = WholeNumberVariable / 2;
//I'm going to be a huge bug! I expected a number to divide by 2 but now I'm trying to divide letters! This makes no sense!

This can cause some unexpected behaviour, also known as bugs. So it’s fair to say I much prefer Strongly typed languages.

But, I’m getting used to JavaScript and its numerous quirks, and actually rather enjoying it. I hope to report back soon with some additions to my orrery to show you!
Danny