Hi 👋, I'm Jordan
I'm dyslexic ✨
I'm a Lead Software Engineer 🤖
I love building tools, websites, software 🏗️
I also love ❤️ Xbox gaming 🎮
I'm passionate about all the amazing things we can build and do with data 📊. Using it to make everyone's world a little better 🤗
I also love the internet 🌐 and care about website performance and user experience. I believe a well-designed internet can be a compelling force for good 🎆
Blogs
I'm a bit of a talker 🤫, so here's some of the blogs I've written...
Stop Fetch-ing in error
Intro Before we jump in. If you are thinking I use axios or requestjs etc so this doesn't apply to me. Put the npm package down and step away from the install! Fetch is now supported in all major browsers and even in NodeJS now! Which is awesome! We now...5 things to consider when Designing Event Driven Systems
Intro Event driven systems are becoming ever more popular and integral part of our modern lives. Event driven systems consume and take action based on events, these systems also emit and define the events. This allows for you to loosely couple your services in the system allowing each service to...Clouding Communications with acronyms
Intro Let me start by saying communication is hard. Clear, concise communication even more so. Acronyms harm all communication. Acronyms are everywhere, all throughout our lives. But why. Has anyone ever seen an acronym and thought yes, that has clarified things. Very rarely, if ever. I hope I can convince...Considering the advantages of Cloud Native Architecture
Intro I was going to write this about the Risks of Cloud Agnostic Architecture. However I think it best to stick with the positive and highlight the advantages of a Cloud Native Architecture instead. The first thing you might be asking is...What is Cloud Native Architecture? Cloud Native Architecture is...CSP - Content Security Policy
Intro Lastly but by no means least, carrying on from my previous blog about website security week, we're going to talk about CSP or Content Security Policy. CSP is Content Security Policy this is one of the most powerful tools in your arsenal to secure your website. These are two...Clarifying CORS - Cross-origin Resource Sharing
Intro Continuing on from my previous blog about website security week, we're going to talk about CORS on the web. CORS is Cross-origin Resource Sharing this is often used when your website is hosted separately from your API. e.g. your website is at website.com and calls your API at api.com....Why your website needs validation
Intro Continuing on from my previous blog about website security week, we're going to talk about a validation. If accept user input, you are going to need to validate the input. Non validated user inputs can lead to security vulnerabilities for example SQL injection attacks, where user input escapes your...What are you Referrer-ing to?
Intro Continuing on from my previous blog about website security week, we're going to talk about a Referrers on the web. Referrers on the web allow sites you are visiting to see what site you have come from, as the Referer header (it is actually mispelled in the HTTP Specification)...X-headers, what and why?
Intro Continuing on from my previous blog about website security week, we're going to talk about a series of X- security headers. These are set as headers on your site when it is served up, let's dive in! ContentsIntroX-Content-Type-Options X-XSS-Protection X-Frame-Options Summary X-Content-Type-Options This header indicates that the browser should...What permissions does your website need?
Intro Continuing on from my previous blog about website security week, we're going to talk about Features and Permissions for websites. These are set as headers on your site when it is served up. ContentsIntroFeature PolicyPermissions PolicySummary Feature Policy The feature policy was introduced several years ago and allows you...Website Security Week!
Intro I've been a bit quiet on the blog front recently so thought I would kick back off with something thats very important to me. Website Security Practices. I'm going to cover off various topics related to it this week. Why should you care? Any web developer should care, the...Never use a number or currency formatting library again!
Intro Reducing dependencies that you ship with your frontend is always a good thing! If you are using a number or currency formatting library, check it out on Bundlephobia and see how much time and bytes it adds to your application. All this can be done with a new cross...5 Github Elements you have to try
Intro I'm a big fan of web components. Reusable web elements that can work anywhere. A friend showed me this awesome set of components from Github. I can't believe that I hadn't come across them before so I thought I'd share a few of the best ones with you! These...Why I'm writing a blog every week this year and why you should write more too!
Intro This year I will be writing 52 blogs, one for each week of the year. Now I'm a realist, in that holidays and life will get in the way of writing, so my aim is for the number of blogs to be 52 or more, not necessarily one for...Azure B2C, OAuth2 and a Github App
Intro Azure B2C is an authentication provider for Business-to-Consumer auth. It has a massive free plan of 50,000 monthly active users at the time of writing. It supports a number of identity providers out of the box including Github OAuth apps, but it doesn't mention how to support Github Apps...Are you ready for ES Modules?
Intro Currently in JavaScript there are several ways to import packages which you might be familiar with: CommonJS — module.exports and require used in Node.js Asynchronous Module Definition (AMD) Universal Module Definition (UMD) None of these are in the JavaScript standards. 😦 In ES6 the JavaScript standards, a single universal...Organise your forms with fieldset
Intro Love them or loathe them forms are a critical part of most websites. But what can we do to make them more organised and improve the user experience? Introducing, fieldset a way to group inputs into logical containers. First thing first, before we jump in, we need to ensure...3 attributes your images must have!
Intro They say a picture tells a thousand words. It certainly costs a thousand words when it comes to performance! Images tend to be quite large files, so take a while to load. They also block rendering so they have to complete before content further down the page can load....Autocomplete like a boss!
Intro Often, we need to help a user search or look for something that is domain specific to your application. Enter autocomplete! I've seen this done many, many, many different ways. Please no more <span>s! ContentsIntroDatalistExampleSummary Datalist Enter datalist, this provides a set of recommended options for the user to...I'll review your code
I've seen quite a few posts about roasting/reviewing landing pages and websites recently. Which got me thinking, why not the code?! 🤔 I know from personal experience on side projects or things I'm playing around with I miss a pull request, peer review from my colleagues that I get at...Make one resolution this year. Never write your own Authentication
Intro I've seen a few blogs recently and tweets talking about authentication and handling passwords, it got me thinking... I'm going to start by caveating. I'm all for learning how authentication works, if you're anything like me, I learn best by doing, so I've played around with authentication locally. But...How to collect date information using HTML Input!
Intro You are more than likely going to have to ask your users for dates at some point. Enter Date Inputs. They've had mixed browser support, mainly because of Safari. However, it's recently entered Technical Preview on Safari, you can see full browser support here. So, we can soon use...Enable a better experience with noscript HTML element!
Intro If you run your website with Scripting turned off (JavaScript disabled for example), what do you get? I'd be really interested to see screenshots in comments. If your site relies upon JavaScript you might not get anything. Now there is a really nice element to provide a better experience...How HTML gives us tooltips for free!
Intro Tooltips! Aargh, I still don't know how I feel about them. I understand they are useful, but part of me feels like there must be a better way to get that information across. Nevertheless, we're probably going to have to implement them at some point, so let's dive in....Creating a collapsible section with nothing but HTML
Intro I love creating User Interfaces (UI) and often times well need a section to expand and collapse for example in a FAQ section. I used to reach for NPM and install a library to help, until I discovered that you can do this with pure HTML elements! They aren't...How I improved my code by returning early, returning often!
Intro I've been a developer for over 5 years now and one of the best things that I've learned is functional programming. Which gets a lot of hype and can be a bit daunting but I've broken down into a few simple ideas: Returning early and often Single purpose functions...How to easily convert HTML Form to JSON
Intro I have a love, but sometimes hate, relationship with HTML Forms. HTML Forms are absolutely brilliant for out of the box validation, accessibility and usability. But they can be a pain to style! Nevertheless, HTML Forms give you massive amounts of functionality with zero dependencies. If you are anything...Going Serverless Azure
Continuing from my previous post. I want to focus on a few serverless providers, this time Azure. As a major cloud provider Azure offer all the serverless services you would expect: Blob Storage for serving images and now websites too! Functions for creating web services/API’s Cosmos DB for Database As...Going Serverless Zeit
Continuing from my previous post. I want to focus on a few serverless providers, the first one being Zeit. Zeit is different to the other Cloud Providers (like Azure, Google Cloud Platform and Amazon Web Services AWS), as its a company that works across different provides to provide a global...Going Serverless Firebase
Continuing from my previous post. I want to focus on a few serverless providers, the first one being Firebase. If you are building a mobile app or web app, I would highly recommend Firebase. It provides you with everything you need to get started. Want Authentication? ✔️ Hosting for your...Free Design Resources
Hey everyone, these are some tools/resources that I’ve found really helpful when designing/making websites! They are really great and mostly free too! 😄 I’ll keep updating them when I find new ones, and if you have any you think would be good to add to this list, leave a comment!...Zendesk Hide Ticket Forms Based On Organisation
Hi everyone! This is pretty specific blog post on something that I got asked to look into recently and really struggled to find much of help. I did come across this thread, but nothing worked quite the way we wanted it to, so we came up with the following, its...Going Serverless
👋 Hello, I’ve recently gone serverless and wanted to share my experiences with you. Alongside the reasons why I chose to and why you may or may not want to go serverless! What is Serverless? This is really hard to define, it now encompasses so many services and methods...Azure B2C and MSAL
I’ve recently been working on a project and needed to deal with authentication, scary! So my general thoughts around this, is authentication is scary and something you have to get right, so leave it to the big companies and just use a service. Considered a number of solutions Auth0, Firebase,...Lancaster University Experience
Recently Lancaster was awarded University of the Year, I firstly felt real pride at my university getting this accolade and secondly made me extremely reminiscent of my time there, and sparked something in me to write this blog post about my time there and why I would encourage everyone to...Node JS Memory Limits
Recently came across an issue at work where one of our Node JS micro services kept hitting the default memory limit on Node JS. It was moving GB of data around at the time and kept hitting the default of ~1.7GB of memory and causing the process manager to restart...Polymer Summit
This was a chance to head down to London and hear some talk from the team behind Polymer and Chrome as well as business that have used it in their products and a chance to network with the community behind Polymer too. It was the first ever summit/conference of this...Polymer 1
What is polymer? Polymer is a piece of Google tech that they’ve launched, which is basically a library on top of the web components spec. It gives you some nice magic on top of web components such as data binding and syntactic sugar. Before going to the polymer summit in...