Hello 👋
I'm Stu, a coffee lover ☕, 30-something-year-oldfront-end developer 💻 with a background in computer and electrical engineering. I am based out of sunny ☀️ Edinburgh, Scotland and currently doing freelance work and consulting for international clients.
I started creating cool web designs using HTML and CSS back in 2006. I am JavaScript enthusiast and extremely passionate about coding. I love to learn new things every day and keep up with the new technologies. In many ways, websites and apps are my first love. 🧡
Last but not least, one of my favorite actuvutes is to educate and mentor others in the field to fulfill their potential and deepen my knowledge. You can find out more on my YouTube Channel.
Blog
These are some of my recent blog posts.
Hello World
<p>Trying to load the image below.</p> <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Nextjs-logo.svg/440px-Nextjs-logo.svg.png" alt="NextJS logo" title="NextJS Logo"></p>
When to Use Static Generation v.s. Server-side Rendering
<p>We recommend using <strong>Static Generation</strong> (with and without data) whenever possible because your page can be built once and served by CDN, which makes it much faster than having a server render the page on every request.</p> <p>You can use Static Generation for many types of pages, including:</p> <ul> <li>Marketing pages</li> <li>Blog posts</li> <li>E-commerce product listings</li> <li>Help and documentation</li> </ul> <p>You should ask yourself: "Can I pre-render this page <strong>ahead</strong> of a user's request?" If the answer is yes, then you should choose Static Generation.</p> <p>On the other hand, Static Generation is <strong>not</strong> a good idea if you cannot pre-render a page ahead of a user's request. Maybe your page shows frequently updated data, and the page content changes on every request.</p> <p>In that case, you can use <strong>Server-Side Rendering</strong>. It will be slower, but the pre-rendered page will always be up-to-date. Or you can skip pre-rendering and use client-side JavaScript to populate data.</p>
Two Forms of Pre-rendering
<p>Next.js has two forms of pre-rendering: <strong>Static Generation</strong> and <strong>Server-side Rendering</strong>. The difference is in <strong>when</strong> it generates the HTML for a page.</p> <ul> <li><strong>Static Generation</strong> is the pre-rendering method that generates the HTML at <strong>build time</strong>. The pre-rendered HTML is then <em>reused</em> on each request.</li> <li><strong>Server-side Rendering</strong> is the pre-rendering method that generates the HTML on <strong>each request</strong>.</li> </ul> <p>Importantly, Next.js lets you <strong>choose</strong> which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.</p>
Digitize your business
I will help you to create a remarkable first impression with creative designs.
Web Development
HTML, CSS(Bootstrap), JavaScript(MERN Stack), Gatsby, and Firebase. You name it. I have it all covered!
Responsive Design
In 2020, you can't go online without having a mobile responsive website. Let me take care of that for you!
PSD to HTML
If you already have a design in Photoshop, InVision or any other format, I can covert it from scratch into a pixel-perfect, SEO-friendly HTML/CSS/JS website using the latest frameworks and technologies.
Projects
These are some of my recent projects.
Project Progress Management System
This is a system for monitoring the progress of all ongoing projects. It will have three types of user roles - Basic user, Manager, and Project Coordinator. Basic users have the lowest priveledge while Project Coordinators have the highest. This was developed using React, Redux, and Firebase.
View codeTo-do App
This is a simple to-do app I developed for educational purposes on my YouTube Channel. It allows the user to perform CRUD operations like adding and removing tasks from a database. Users must register and login to use the app. A user can only see the tasks that they have added. The app was developed using React, Redux, and Firebase.
View codeCalculator App
This is a simple calculator which performs the most common arithmetic operations. It has a slick design with buttons laid out nicely using CSS grid. I used Vanilla JavaScript to receive input, perform computation and display the correct results on the screen.
View code
Videos
These are some of my recent videos.
Get In Touch
I'd love to hear from you. Even if it's just to say "Hey!". Drop me a line and I'll get back to you ASAP.