Library, Rain & ul/li menus

Wow. It is really wet today.

I love the rain, yet even I resorted to running into the library for cover today. Inside the PC lab area, the rain is giving its full force unto the windows. Have a look:

Note: it was louder in person.

It is actually being a rather nice distraction here as I have woes with redesigning the menu bar for my upcoming Star Trek-themed fan site. Although there was nothing wrong with the menu before, I am currently rebuilding it on an offline test page using lists instead of modified anchors. There are pros and cons to this approach of course, with the main pro being it will naturally suit a multi-level list in the rather likely event I implement one in the future.

Here’s an interesting read on the subject:
https://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/

The current issue is not being able to get the <ul> to float right. Observe the links being rendered over the logo that is floating left:
Capture

Whether you are for or against these lists, please note that currently I am only exploring my options.

Why “Mobile-First” website development is actually a good thing

Upon examining my last three websites project, I have noticed a trend in the way I develop websites.

I usually design my websites desktop first/mobile later. Which has been fine until now since these offline projects were just code practise for me, and they were database-style websites that would be ill-suited for mobiles. But now, as I prepare to launch two websites that will be on the internet for the public’s viewing, I am starting to see why the “mobile-first” philosophy is actually a good one, and why modern developers should consider adhering to it.

In the last of the three older projects (which was about Aircraft Carriers), I did start redesigning the website to be content-efficient on mobile displays using CSS media queries, but the transition was troubled. I found my myself ‘hacking’ things to make things appear correctly, rewriting entire CSS stylesheets, and adding DIV containers to manipulate groups of elements better.  On my first new websites, I have opted to start transitioning to a mobile-first development scheme (I’ll explain more about why I finally decided to adopt this approach below).

Things have worked out far better this time around. Probably the best thing about this is that the transition from mobile to desktop is an expansion, whereas the transition to desktop to mobile is a contraction. Making an element contract from an already well-calculated specification can be problematic, hence some cases of rewriting the entire CSS so that everything acts uniformly. Manipulating elements designed to be small into larger elements from my experience is far easier.

The new websites look far better than all my previous efforts. But the change was incremental. The first new website, a Star Trek fan site, was only designed at the beginning with mobile devices in mind. There is a high degree of code commonality with my aircraft carrier website, except for the way I handle content efficiency. You might notice from the screenshots of my website there are these red tile objects. These are what display hyperlinks and other data that require morphing when viewed on smaller screens. Using media queries; their width, height, padding, font-size (in em instead of pixels) and optional images’ size are modified. The rest of the website’s content, such as headings and paragraphs, only have their font-size modified. The header’s size stays the same, although the standard menu gets switched into a mobile “hamburger” menu. The website is designed to be displayed in three fixed size brackets; desktop (> 1024px), tablet (< 1024px && > 768px) and mobile (< 768px). This website is due for launch before the years’ end. I will likely make a future post explaining this project.

 

(Please note that for the mobile website, a viewport meta tag is present to ensure that a phone’s web browser displays correctly and eliminates the view of that large blue margins. That screenshot is from a desktop browser.)

My second website is eventually going to serve as my personal portfolio showcase. That was written from the ground up to be a mobile size. The default CSS code is for mobile styling, and then media queries modify it to desktop styling when needed. There are also three size brackets, however the during the mobile bracket, the wrapper that usually keeps the elements in the center of the screen is not fixed and the elements can scale to fit from 768px to 480px (before, the mobile bracket offered a fixed wrapper size of 512px). The tile styling system I used previously is currently omitted from the design as I am working on a better way of flexible size data representation. The design is still being built, so no screenshots yet.

So, why this change all of a sudden? Well, the fact is that more internet users are using mobiles these days – I personally have been using my phone to browse my favourite Star Trek websites more than ever. And the fact is, you really should not give your readers a negative point about the website’s design. I have seem some reports and statements that have talked about the woes in the eyes of the consumers when they use their phone to browse a non-mobile optimised website. People are quick to form opinions based on first impressions. And if that first impression is that the website has a poorly-optimised mobile site, then it is possible that no amount of good content will remedy the situation (it is funny, yet concerning how many things you can apply that logic to as well…). But anyway, I aim to give the best impressions I can with my first proper public websites!

Fun planning, dank milestones. KAubersnek style.

So, the results from yesterday.

You will be pleased to know the solution works! I have yet to do extensive/thorough testing, although I am doing on-the-fly debugging in the meantime until I achieve this first operational milestone. And that is what I want to talk about. Milestones.

I do love my planning, and I have thought out a fair bit about what I want the program to be once it is done. So far, I have a well-defined operational milestone that I am dubbing “Full Operational Capability” (very professional sounding). This milestone is reached once the core functionality of the browser is complete. That means no advanced developer tools are being added at this stage, nor will the styling be finalised. Basically, the following criteria must be met:

  • Basic web functionality
    • Direct navigation
    • Past and forward history traversing
    • Native search query forwarding
  • Basic user settings
    • Home page setting
    • Search engine setting
    • Basic UI layout settings (hiding the bookmark bar, etc.)
  • Basic bookmarking system
    • Tab-based bookmark-managing functionality
    • UI bookmark bar
  • Basic ‘luxuries’ (you could consider these non-essentials)
    • Custom source code view
    • Custom context menu for default right-clicking within the GeckoWebBrowser
    • Custom download management capabilities
    • InPrivate browser

This milestone determines how far the project will go. If I am unable to create a usable web browser by not meeting this criterion, I will either cancel the project or postpone it until a time I have learnt what I need to know to complete this. Remember, I am always learning.

However, if this milestone is reached, I will then begin work on the next two milestones:

  1. Developer Tools Completion
    • This stage involves implementing some of the advanced developer features that the project is designed to accommodate. This includes the addition of a non-WYSIWYG webpage editor with helpful options designed to speed up the development of HTML and CSS code without the clutterful and fun-sapping ways of WYSIWYG designers such as Adobe Dreamweaver. This functionality is currently being explored in a project called “KAubershark”, which I am not prepared to reveal yet (it is still very rough and early)
  2. UI Design Unification
    • This stage involves finalising the overall design of all aspects of the software. This includes making the design unique and unified across all forms, dialogs and controls. After this is done, the project will be complete.

I have not gone into too much detail for these milestones in case of further refinements to the ideas. What I gave you is a basic brief of what the work entails, but I do have other ideas that I am still playing around in my head with. Work on ‘KAubershark’ is currently on hold until the first milestone is complete. It originally started as a standalone idea as a non-WYSIWYG development suite, and what code I have done for it is currently in a separate solution. That work is mostly rough and is for the purpose of exploring the plausibility of the idea, since it will naturally be a huge task and I want to make sure it is worth the effort. The final way I am going to implement KAubershark is not finalised either. My two options are to integrate the work into KAubersnek’s solution, or keep it as a separate standalone software and add a bridge for the two applications to access each other.

So that is it for this post! I hope you appreciate the insight, and please watch this space!

Problem-solving with KAubersnek

Straight into this.

KAubersnek is my project to create a personal (and only for me) web browser that will aid me in developing websites by providing me with custom developer-focused tools (and will serve as a piece within my future portfolio of work). However. Currently, I am far from realising that goal. But for now, I have been making considerable progress in maturing the basic web browser itself into a usable frame to work with.

2017-06-18_1508
KAubersnek as it looks currently (2017-06-18)

The UI is currently based heavily on the open-source Chromium (of which Google Chrome is a well-known release of) UI. But one of the goals for reaching what I am calling the “full operational capability milestone” is to have a custom tab design. However, designing the UI is currently taking a backseat role in favour of allowing the UI to be more flexible for when I add crucial features take enable the browser to be fully operational.

So that’s pretty much the overview, but today when I was working around a me-induced bug/oversight, I thought that I might be cool to write down this problem with a methodical solution so that I could convey what it is like to be a programmer (at least in my eyes) when solving a problem. Here goes nothing. Also, one more thing. This is written in a way that allows it to be understood (I hope) by almost anyone with at least some basic idea what programming is like. To that end, I will be attempting to explain some of the more complex concepts that people might have trouble getting their heads around. But I at least hope you know what a class, object or a control is. If not, you might want to look them up first.

The problem
When loading a website in the browser, you had to remain on the current tab until the page was loaded. Otherwise, switching tabs during the download resulted in some of the results of the download (namely the website’s title) being applied to the wrong tab. This was because the code originally forwarded the downloaded title from the user control the GeckoWebBrowser object is a member of, to the currently-active tab on the TabControl object which is housed on the main form. As aforementioned, this was a simple oversight as it was just a case of the data being sent to the wrong object in some specific cases.

What it looks like
2017-06-18_2125.png

Listed process ‘chart’

  1. A webpage download action is taken by the user within the browser; via URL navigation, web search or hyperlink navigation
  2. The user switches tab whilst the download is in progress
  3. The download completes within the other tab, and the DocumentComplete event is triggered on that instance of the browser
    • The DocumentComplete event gets triggered when the GeckoWebBrowser object declares that it has finished downloading the webpage and its content
  4. The DocumentComplete event code sets the text of the currently-selected tab as the DocumentTitle of the downloaded webpage, as reported by the GeckoWebBrowser
    • There is no check/flag to see if this is the correct tab that actually contains the user-created control with its GeckoWebBrowser

Analysis
The reason why this is not a simple cakewalk is because of how the structure of the program is. It is not one large object called ‘browser’. The ‘parental’ structure that I have to deal with looks like this:

  • The actual powerhouse under the hood (that is the browser) is the GeckoWebBrowser object.
  • The GeckoWebBrowser object is housed within a user-created control, which is a class that contains the GeckoWebBrowser object and all the controls needed to operate the browser at the basic level (buttons, address box, options menu, progress bar and status display label).
  • This user-created control is docked onto a TabPage object when the tab is first created. This TabPage is actually the object that contains the crucial property known as ‘Text’. This property is what gets updated each time a webpage is finished being downloaded.
  • The TabPages are then added to the TabControl’s TabPage collection. This collection is then represented as clickable tabs on the main form.

With that in mind, you can begin to picture what the issue is. Although the user-created control is docked onto a TabPage, that user-created control does not have a native ability to tell what its ‘parent’ object is. So, when the DocumentComplete event proceeded to update a TabPage’s ‘Text’ property, it does not care or recognise if the user switches TabPages by clicking one of the visual tabs. It just updates the selected tab. This problem is an oversight because I should have seen it coming, since I must put more code in to fix this either way. Now that I see what the issue is, I can now easily implement my three-part solution.

Solution

  1. I added an integer variable inside the user-created control called ‘intPosition’. This variable will store a value that indicates what position its parent TabPage should be at within the TabControl’s TabPage collection (known as index). So now the code that updates the TabPage’s ‘Text’ will know what TabPage to apply the change to. This position variable is initialised as soon as after the user-created control instance and its mounting TabPage is being created, and the value is based off the current number of TabPages within the index.
  2. I also added some code that updates the position variable in all opened instances of the user-created control when there is a change within the index. Changes to index are made when a tab is opened, closed or moved around. So this code is a must for such scenarios. For example; if I had three tabs open and I close the middle one, the third tab will have its position variable updated since it has now become the second tab in the index, and the browser would need to know that otherwise the program would literally DIE in runtime. Okay. Maybe not that extreme. But it would be bad.
  3. The code within the DocumentComplete event is updated so that it references the TabPage it needs to access via the index (cross-referenced with the position variable) instead of accessing whatever is the currently-selected index is.

Code

2017-06-18_2103
Code that creates the user-created control instance and TabPage
2017-06-18_1941
Code that updates each instance’s position control variable

Conclusion
I actually have not tested this yet. It is almost the end of today, so I will enjoy a sleep before I make sure the changes work. In theory, this should work no matter what however. But I will let you know tomorrow. My next post on the subject will go more in-depth about the goals and milestones of the project.

Anyway, I hope you enjoyed the read! 😊

C++ test results & other things

I have been quite shit at tracking my progress in University. One of the original reasons for creating this blog was to do so. So here is a quick update on how I am doing.

For this term (from September until December), I am doing four modules in my Computer Games Development course; C++ Programming for Game Developers, Computer Systems Concepts, Game Development Fundamentals, Practice, Professionalism And Employability (a long title) and Mathematical Tools For Computation.

My favourite and arguably my current most important module I am doing is C++ Programming. We do two tutorial sheets’ worth of work a week, which are supported by 2 hours worth of lectures and 4 hours worth of class tutorials. I really enjoy what I am doing, although due to my prior experience, I am finding the stuff we are doing at the moment to be easy, thus I have a few side projects to practise more advance aspects of the language ahead of the lecture schedules. I have done two tests on the subject so far. I am happy to say I scored 78% and 97% respectively, which I am quite thrilled (especially considering that 40% is a pass). Those marks are not worth a whole lot this year, however. Until we get deeper into the year, the worth of each test is small, but I at least have benchmarks to use in the future. I want to keep these figures high (above 70%, with 70% classed as a “First” in terms of marks).

On the Game Development Fundamentals blah-blah-blah, we had to do a six-week group project to create a game in the Haxe-based Stencyl engine. The group was five-man strong, and I think we did pretty well at least. The end game quality was not the greatest due to numerous setbacks (overcomplicating and running out of time), but I believe we did satisfactory. Maybe 50-60% in marks, which is above a pass. Marks are awarded based on planning, the way we used source control and issue tracking (GitHub), end product and the presentation and demonstration of the game. Obviously, I shouldn’t settle for a pass and aim for the highest I can. If it turns out not to be the greatest of marks, I can at least learn from the mistakes.

As for the test of the subjects, I do not have a lot to say at this point. I really enjoy Computer Systems Concepts. We have covered number systems (binary, hexadecimal and decimal numbers) and are currently covering internal organisation of computers (von Neumann architecture). Both topics I believe I am capable of doing without much issue. Maths is maths…

I will get better at updating my progress in University. Watch out for more!

Volunteering & Unity Project

So today was interesting.

A few weeks ago, a friend forwarded me an email inviting students studying a gaming-related course at my University to do volunteering for the Wales Games Development Show 2016. A group of friends and I decided to go. To be honest, it would be something handy to have on my CV.

Upon arriving and setting-up the place, my first duty was to man the Key Note room. The first guest speaker, Antony Johnston, had a very interesting presentation about dialogue and story writing within games, and how comics and game stories can be longer and more complex in a shorter space of time than films or even multi-hundred paged books. He was talking about things like condensing dialogue without ruining the story, writing complex and detailed stories in a comic format. One of the things I struggle with when it comes to creative writing is doing too much detail and depth (usually when I write a scenario for a ship design I created).  He demonstrated how you could reduce a cut-scene in a game (in this case Assassins Creed III) to the point that it’s shorter, but doesn’t lose the story the scene is trying to tell. So listening to the presentation proved beneficial given my difficulties in the area.

However eventually, my duties came to point where I was walking around, checking everything was running smoothly and seeing if anyone was in need of any help. During which time I came across a table advertising the Unity game engine. Many moons ago (when I was roughly aged 14), I attempted to develop a simplistic game in Unity. Due to my lack of skills with a few languages prominent in Unity at the time, such a project was out of my league. I decided to continue the track I was on with Visual Basic.NET for Windows Forms and build up my programming skills on a “easier” language. Four birthdays have passed since then (along with my once-trim figure) and I think its time to put myself to the test again!

If my foundation year of University is any indication, I have come a long way since those times. My hard-work and non-giving-up attitude have helped me throughout the year and I have been exceptionally pleased with the way I performed, and now I believe it’s time to push my boundaries even further!  It’s about time for me to develop my first 3D game! Very soon, I will be moving in to a new house closer to my University with two friends, and in the time leading up to the next year of studies, I plan to make use of the opportunity and begin to see this through.

If you have ever had a similar situation where you have felt like you were incapable of doing something before, don’t let that stop you from trying again now. A big part of Human life is developing yourself as a person. You never know what you may be capable of now, until you try! Like I will be doing so soon with this latest of my projects.

In the deep end: MySQL & PHP

I hate databases.

I really do. Ever since my Year 11 ICT exam involving creating a database for 10 hours, I have grown to avoid them at all costs. But after recent constructive criticism of the way I developed my old website project, the FSD, I have come to see how bad it was developed, and why I would need to be doing some work with databases soon.

The FSD (Federation Starship Database, as nerdy as it sounds) was initially developed as a way to further my skills with HTML5 and CSS3 back in 2014. It was basically a website that showcases fictional starships from the Star Trek universe of canon, non-canon and fanon design, as well as ships I have been designing (this being a fond hobby of mine). I developed the site in my spare time during the summer of that year, and added things here-and-there since. But it has grown huge. 191 ship classes are in it. All with their own HTML page. And that’s the issue. Sites like this are known as a ‘static’ HTML site, where every new ‘thing’ on the site is added manually with its own HTML page. Although it is easier to develop sites like this on your own, managing  190+ individual pages is a hassle. The obvious solution is convert the website into a database-driven and ‘dynamic’ website. Meaning all I would have to when adding a new ship class to the site is append the relating data into a database table, instead of creating a new HTML page everytime (which also takes up filespace on the server). A single PHP page would automatically be able to display data on the ship without modification (with ship data being displayed based off the ship identifier variable being passed through the URL, which looks something like “site.co.uk/ships.php?ship=voyager”). Sounds great, eh? Well setting this up certainly was not.

Using MySQL and PHP seemed to be the most recommended option for me to develop this new site with, so I decided to proceed with it. And just to be clear, I have not had any prior experience with MySQL, and only minimal experience with PHP. I ran into trouble almost straight away.

Developing this new site began with creating a virtual web server on my PC. I used XAMPP (link), which is a handy all-in-one package solution for Apache Web Server with MariaDB, MySQL, Perl and PHP5/7. Setting up the web server was straight forward, and the included MySQL administration tool phpMyAdmin seemed decent enough. I created a table to house the data, and BAM! The table would not let me set a primary key after its creation (“Too many keys specified; max 0 keys allowed”). Although this does not hamper data entry, but editing existing data in a simple fashion was not possible for due to this. Given that I couldn’t find a way to edit data after entry with phpMyAdmin, the logical option for data editing was to edit the table in Microsoft Excel using the MySQL plug-in (link) you can get.  NOPE. Doesn’t like a table without a primary key! This led me to recreate the entire table with a primary key defined during its creation. Looking on the bright side however, at least it will help prevent duplicates now having a primary key. I entered a single entry into the table to being testing with.

This led me on to the second issue, getting a working query to pull data from the table. Given that SQL is something new to me, I struggled a lot trying to get the right syntax. It is notably different in many ways to languages like C++ or C#, given their vastly-different purpose. I was stuck on this sort of error for a while when trying to pull data for the single entry for testing with, which was the Constitution-class starship from the original Star Trek series:

13382252_453132654894230_55014066_n.png

Eventually after several hours, and a walk in a lovely park to clear my head for thinking, and some more hours, I managed to do it. I spent most of the time crawling though variables documentations, trying to pitch together the right SQL query to get data from the table. The PHP side of the thing then puts it into an array I can use to display the values to the viewer of the webpage. The code is no secret, so here it is if you’re interested:

php
I put some comments in to explain what things do

Doesn’t seem like a lot of code for the effort, right? Considering what it does, I would say it was worth it. I didn’t think I was going to do it on my own in a day or two, given my lack of experience and the fact I threw myself in the deep end on this one. But I did it, because I never gave up when things got difficult and I wasn’t afraid to seek out help when I needed it. If there is one thing you can take from this, make it this; Never give up! Believe me, you can really amaze yourself by what you can do when you push yourself. I certainly did when doing this.

Expect another post on this topic in the near future. I still have a lot more work until this project can be put onto the internet and properly hosted. Oh. Here’s what it looks like if you’re wondering (now that some CSS styling has been added):

Capture