Cookie Consent

Over the past couple of months, I’ve added some Analytics software to my site such as Google Analytics and Facebook Pixel. As my website serves customers in the EU, the Cookie Law applies. I have used JavaScript to ensure that cookies are not fired until the user has explicitly accepted them on the website. A button and banner are shown at the bottom of the screen for new users.

Animated mobile menu

In quite a few of my projects I’ve needed a quick and easy way of making a menu which scales onto mobile. I like the style that android apps have; the animated drawer, so I have replicated this.

The menu is swipe aware using Hammer.js which means if you swipe right on mobile then the navigational drawer will slide out and if you slide left, then it will disappear.

I created a Gist on GitHub to allow me to quickly and easily copy the code into my projects.

No scroll whilst lightbox is open

I read the following article by CSS Tricks https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/ and decided that my website shouldn’t scroll whilst the lightbox is shown, i.e. on the Blog and the Memories pages when an image is clicked.

I use the Featherlight plugin on my Blog and the equivalent for the Memories page.

I added the following CSS to my Blog, which now means that the page will not scroll whilst the lightbox is open, but sticky elements like the navbar and the sidebar will stay in place. Similar code was added across the rest of the site.

html {
		position: relative!important;
		overflow-x: hidden;
	}
	html.with-featherlight {
		overflow-y: hidden;
		width: 100%;
	}
	html.with-featherlight body {
		overflow-y: scroll;
	}
	html.with-featherlight nav.featherlight-fix {
		position: fixed;
		margin-top: 0;
		left: 0;
	}
	html.with-featherlight #sidebar.featherlight-fix ul:first-child {
		position: fixed;
	}
	html.with-featherlight .cc-window.cc-banner.cc-type-info.cc-theme-edgeless.cc-bottom.cc-color-override--591744288 {
		width: calc(100% - 17px);
	}
	@media (max-width: 830px) {
		html.with-featherlight nav {
			margin-top: 0px;
		}
		.featherlight-previous, .featherlight-next {
			display: none!important;
		}
		html.with-featherlight #sidebar ul:first-child {
			position: -webkit-sticky;
			position: sticky;
		}
		html.with-featherlight .wrap {
			margin-top: 50px;
		}
	}
	@media (max-width: 830px) {
		html.with-featherlight nav {
			margin-top: 0px;
		}
	}
	@media (max-width: 1100px) and (min-width: 830px) {
		html.with-featherlight header.featherlight-fix {
			margin-bottom: 68px;
		}
		html.with-featherlight nav {
			margin-top: 0;
			margin-bottom: -7px;
		}
	}

Whilst experimenting with this I found that the built-in WordPress galleries did not work on Safari 10.1. I then filed a bug report which you can follow here: https://core.trac.wordpress.org/ticket/47744

Data Flow Diagrams

When we first started doing Data Flow Diagrams at the start of the semester I thought they were the worst thing in the world. However, as I came to understand them more and start to think about more real-world business problems that I was encountering such as creating a website for my Dad or as a side project for one of the many ideas I have I began to realize their necessity.

The scope of the aforementioned projects is large. Too large for me to remember in detail what goes where and what everything is supposed to do. When you create a Data Flow Diagram it lays things out in a clear and structured way that you can refer to throughout the design and implementation process. This makes sure that no features are lost or forgotten about and every process is connected with a reason. This means you aren’t spending time on things that in the end won’t matter to the final product.

Here is an example Data Flow Diagram for Solent’s Portal that I created for my assessment in this unit.

Firebase

During our Web Technologies practical lessons, we have to follow a set of instructions to create a website or simple script. The lecturer has hosted the notes for the unit on Firebase.

I’d looked into Firebase before but couldn’t understand how to use it. However, when an extended task came up in lesson I gave it another go.

I managed to create a simple chat application and clone the notes from the lesson.

Feeling confident I then decided to have a go at some other JavaScript based things which you can read about in this blog post.

As I had already experimented with Firebase I wanted to host my final assessment on the platform. You can see the end result here.

Angular, React, Vue, Node

Whilst working on various projects this semester I’ve encountered the following technologies: Angular, React, Vue, and Node. I’ve experimented with them to some extent and found Node Package Manager quite useful.

Initially, when I first heard about them I thought they were JavaScript Libraries like JQuery, however, they are far from it. Each technology is designed to build an application for use on the web.

Node you even have to set up as a server from which web pages are served from. This makes it particularly tricky, as most shared hosting packages don’t offer Node, or the ability to install it on the server, however, PHP is widely available and has a lot of support and documentation as it has been around for such a long time.

I think these technologies will come in very useful in the future. For now though, I’m not quite competent enough.

New Laptop, Deployment Manager, NAS and VPN

I’d wanted to buy a new laptop for ages as mine was quite heavy and I wanted to take it to lectures, and store it in my bag but couldn’t. This meant I was looking for something quite light. I also wanted something powerful as I do a lot of media production and web development.

Lenovo Yoga 520

I liked the idea of a 2-in-1 and shopped around a little until coming across the Lenovo Yoga Series which I really liked. I found a Lenovo Yoga 520 on eBay for very cheap and snatched it up.

I’ve had the laptop for a couple of months now and it’s been a great purchase. It’s fast, portable, and holds great charge.

I bought myself a pen to use with it too. Me and my girlfriend are going to create a digital comic to test it out so look out for that in the future.

One downside is that I tried to put another SSD in it, but I ran into the somewhat common windows 10 bug of a 100% active time even when the drive wasn’t doing anything. So I ultimately removed the drive and put it in my old laptop where it worked fine before selling it.

Deployment Manager

Seeing as I was going to be using my laptop a lot and I wanted to run the same programs as my PC I looked into deployment managers to keep them synced. However, this seemed like more effort than it was worth so I scrapped the idea.

NAS and VPN

I am, however, going to set up a NAS over the summer so that I can access my vast array of photos from anywhere. This has been something I’ve wanted to do for a long time, but I’ve never had the technical skill, or the willpower to do so.

Now that I am at university and have multiple devices that need to access the same data it seems like the perfect time to implement such a thing.

I got a very decent router; the Asus RT-AC68U for free on Freecycle last year which has the capacity to run a VPN and even lets you access a drive over the internet.

I’ve already set the VPN up which works quite well and will add an extra layer of security to my network when accessing the NAS from university next year.

One drive wouldn’t be quite enough for the type of storage capacity I need so I’m looking to pick up a cheap second-hand PC this summer and turn it into a NAS with around 10TB of storage. Additionally, it will allow more processing power to go towards serving the data and again make it more secure as extra steps can be taken to secure the data on the one machine as that is it’s only function.