rayelliott
/
hugo-blog
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
This repository has been archived on 2020-10-30. You can view files and clone it, but cannot push or open issues or pull requests.
hugo-blog/dist/blog/posts/flowmm/index.html

368 lines
16 KiB
HTML
Raw Normal View History

add dist directory
2020-04-17 17:22:23 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Ray Elliott">
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Flow Model Management"/>
<meta name="twitter:description" content="Developing a portfolio website using Nuxt.js."/>
<meta property="og:title" content="Flow Model Management" />
<meta property="og:description" content="Developing a portfolio website using Nuxt.js." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://rayelliott.dev/blog/posts/flowmm/" />
<meta property="article:published_time" content="2020-02-08T12:27:18+00:00" />
<meta property="article:modified_time" content="2020-02-08T12:27:18+00:00" />
<base href="https://rayelliott.dev/blog/posts/flowmm/">
<title>
Flow Model Management · RayElliottDev
</title>
<link rel="canonical" href="https://rayelliott.dev/blog/posts/flowmm/">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700%7COpen+Sans:600,700%7CSource+Code+Pro:600%7CMaterial+Icons+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder.min.b065b70fb895caf128e63b1ca76710e162efd2c42b8d888be8a34675513255ac.css" integrity="sha256-sGW3D7iVyvEo5jscp2cQ4WLv0sQrjYiL6KNGdVEyVaw=" crossorigin="anonymous" media="screen" />
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/coder-dark.min.4576662ffc1992d4351f2d28cb6133c9ec1dd1224902f61354c10a3ff884fab0.css" integrity="sha256-RXZmL/wZktQ1Hy0oy2Ezyewd0SJJAvYTVMEKP/iE&#43;rA=" crossorigin="anonymous" media="screen" />
<link rel="stylesheet" href="https://rayelliott.dev/blog/css/main.min.8d4a09e36529b48fcb56a10172f55b64e0f637865469c2ddf084808563dade54.css" integrity="sha256-jUoJ42UptI/LVqEBcvVbZOD2N4ZUacLd8ISAhWPa3lQ=" crossorigin="anonymous" media="screen" />
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://rayelliott.dev/images/favicon-16x16.png" sizes="16x16">
<meta name="generator" content="Hugo 0.68.3" />
</head>
<body class="page flowmm colorscheme-auto">
<main class="wrapper">
<nav class="navigation">
<section class="container">
<a class="navigation-title" href="https://rayelliott.dev/blog/">
RayElliottDev
</a>
<span class="primary-menu-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
</span>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle"><svg class="svg-menu" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>
</label>
<ul class="navigation-list">
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/posts/">Posts</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/about/">About Me</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/portfolio/">Portfolio</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/categories/">Categories</a>
</li>
<li class="navigation-item">
<a class="navigation-link" href="https://rayelliott.dev/blog/tags/">Tags</a>
</li>
</ul>
</section>
</nav>
<div class="content">
<section class="container post">
<article>
<header>
<div class="post-title">
<h1 class="title">Flow Model Management</h1>
</div>
<div class="post-meta">
<div class="meta-tag posted-on">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M7,12H9V14H7V12M21,6V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V6A2,2 0 0,1 5,4H6V2H8V4H16V2H18V4H19A2,2 0 0,1 21,6M5,8H19V6H5V8M19,20V10H5V20H19M15,14V12H17V14H15M11,14V12H13V14H11M7,16H9V18H7V16M15,18V16H17V18H15M11,18V16H13V18H11Z" />
</svg>
</span>
<time datetime='2020-02-08T12:27:18Z'>
February 8, 2020
</time>
</div>
<div class="meta-tag reading-time">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
</svg>
</span>
5-minute read
</div>
<div class="taxonomy">
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/categories/portfolio/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z" />
</svg>
</span>
Portfolio
</a>
<a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/vue/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
</span>
Vue
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/nuxt/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
</span>
Nuxt
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/cms/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
</span>
CMS
</a><a class="meta-tag meta-tag--link" href="https://rayelliott.dev/blog/tags/bespoke/">
<span class="icon svg-icon"><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M5.41,21L6.12,17H2.12L2.47,15H6.47L7.53,9H3.53L3.88,7H7.88L8.59,3H10.59L9.88,7H15.88L16.59,3H18.59L17.88,7H21.88L21.53,9H17.53L16.47,15H20.47L20.12,17H16.12L15.41,21H13.41L14.12,17H8.12L7.41,21H5.41M9.53,9L8.47,15H14.47L15.53,9H9.53Z" />
</svg>
</span>
Bespoke
</a>
</div>
</div>
</header>
<div>
<img class="featured-image" src='https://rayelliott.dev/blog/images/flowmm/flowmm-home.jpg' alt="Featured image"/>
<p><strong>Flow Model Management</strong> is a fictitious modelling agency.
They were created solely for the purpose of giving me a reason to create their <a href="https://flowmm.rayelliott.dev">website</a>.</p>
<p>However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.</p>
<p>And so, my discussions with the stakeholders began.</p>
<p>It quickly became apparent that the primary purpose of the proposed website would be to provide an attractive and stylish platform that would encourage visiting candidates to apply to join.
Essential to this, would be to provide a simple process for users to submit an application.</p>
<h2 id="the-front-end">The Front End</h2>
<figure class="icon-inline sm-order-rev svg">
<img src="https://rayelliott.dev/blog/images/logos/nuxtjs-icon.svg"
alt="The Nuxt icon."/> <figcaption>
<p>For this project I wanted to build a <strong>Single Page Application</strong> using <a href="https://nuxtjs.org/">Nuxt.js</a>, which is an open source framework based on Vue.js.</p>
</figcaption>
</figure>
<p>One advantage of an SPA is speed.
SPAs are fast.
Instead of reloading an entire page, when maybe only one small component of the page needs updating, a browser may request only the much smaller data needed to update that component.</p>
<p>So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced.</p>
<p>This also has the benefit of an improved user experience.
Navigation and updates to the state of the site appear to be almost instant, similar to a native application, rather than more lengthy page reloads typically associated with websites.</p>
<figure class="icon-inline icon-right svg">
<img src="https://rayelliott.dev/blog/images/logos/vue.svg"
alt="The Vue logo."/> <figcaption>
<p><strong><a href="https://vuejs.org/">Vue.js</a></strong> is a modern JavaScript framework for creating web interfaces. It makes use of the virtual DOM, is small and fast, and is an ideal foundation for an SPA.</p>
</figcaption>
</figure>
<p>However, Vue along with other SPA frameworks do have some disadvantages.</p>
<p>A major disadvantage is regarding <strong>Search Engine Optimisation</strong>.
SPAs can require a relatively long initial page load, and aren&rsquo;t as efficiently crawled by search engine crawlers due to the heavy use of JavaScript.</p>
<p>This means sites requiring SEO, need to take steps to mitigate these issues.
One solution is to render the HTML on the server, rather than letting the browser do it.
The HTML can be quickly displayed by the client browser, reducing the initial page load, with updates to the site being handled by Ajax calls, as with a conventional SPA.</p>
<p>This may be taken even further, if desired, so that <em>all</em> pages are rendered on the server. In effect, creating a static site.
This will then bring all the benefits of a fast, easily indexable static site.</p>
<p>These, <strong>Server Side Rendered</strong> applications can require a lot of setting up.
There are also a number of pitfalls and considerations that need to be kept in mind:</p>
<ul>
<li>there are no requests for new pages and so the browser history needs to be managed,</li>
<li>there are many threats of security vulnerabilities and exploits,</li>
<li>although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use.</li>
</ul>
<figure class="nuxt logo svg">
<img src="https://rayelliott.dev/blog/images/logos/nuxtjs-logo.svg"
alt="The Nuxt logo."/>
</figure>
<p>This is where a framework such as <strong>Nuxt.js</strong> comes in.
A lot of the tedious scaffolding is taken care of and being a fully tested, mature framework, we can be confident that many common, and not so common, issues have already been solved and tested for.</p>
<p>A further benefit to using Nuxt.js, is the client application can be easily extended.
For example, it may be decided in future that the features commonly found in <strong>Progressive Web Applications</strong> are desired, in which case these can be more easily added due to already being supported by Nuxt.</p>
<p>So, above, are the reasons I would use to justify using Nuxt.js to build an SPA for this project.
However, a very large factor, to be entirely honest, was that I had been gaining experience in using Vue.js and wanted an opportunity to use Nuxt.js to create an SPA with server side rendering.</p>
<p>With SPAs being an important component of the modern web I wanted this project to further my experience and understanding of the technology and techniques involved.</p>
<h2 id="the-design">The Design</h2>
<p><img src="https://rayelliott.dev/blog/images/flowmm/flowmm-model.jpg" alt="A black and white cropped shot of a stylish male model."></p>
<p>The design brief from the non-existent owners of Flow Model Management was quite
simple. A visually appealing, elegant site, with some background information and an easy
to use method for applicants to sign up with.</p>
<p>A monochromatic colour scheme was chosen. I felt that a primarily black and
white colour scheme that uses the brand colour of orange as an accent would give a classy and
elegant feel to the site.</p>
<p><strong>Montserrat</strong> and <strong>Lato</strong> were the fonts chosen for the headings and body text respectively.
These are both clean, easily readable fonts.</p>
<p>Montserrat was chosen for its classy and elegant qualities.
It is formal, but not too formal, reminding me of the classy, stylish fashions of the early 20th century, and yet still appearing modern.</p>
<p>Lato, which goes well with Montserrat, is also modern and elegant, much like Montserrat, and keeps with the formal but not overly so, feel of the site.</p>
<figure class="icon-inline icon-right flowmm-model-thumb">
<img src="https://rayelliott.dev/blog/images/flowmm/flowmm-model-1.jpg"
alt="A black and white shot of a stylish male model."/> <figcaption>
<p>As the site is for a modelling agency, I decided that making the models a prominent feature would be an ideal way to make the site visually appealing. By bringing the models to centre stage and focusing attention on stylish images of the models, this focuses the aesthetic of the site towards an elegant, stylish look.</p>
</figcaption>
</figure>
<h2 id="the-deployment">The Deployment</h2>
<p>The project is hosted on a <strong>Virtual Private Server</strong>, using <a href="http://dokku.viewdocs.io/dokku/">Dokku</a>.</p>
<p><strong>Dokku</strong> is a <a href="https://www.docker.com/">Docker</a> based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon.</p>
<figure class="logo">
<img src="https://rayelliott.dev/blog/images/logos/docker-horizontal-monochromatic.png"
alt="The Docker logo."/>
</figure>
<p>Using Docker during development has many advantages.
When using Docker, the application is encapsulated within a consistent environment.
This brings many advantages.
One such advantage being the development environment can exactly match the deployed environment, ensuring there will be no compatibility issues after deployment.</p>
<figure class="git logo">
<img src="https://rayelliott.dev/blog/images/logos/git-orange.png"
alt="The Git logo."/>
</figure>
<p>Combining Docker with Dokku also allows for simple deployment, which can be done with just a <a href="https://git-scm.com/">Git</a> push.</p>
<p> </p>
<p><img src="https://rayelliott.dev/blog/images/flowmm/flowmm-home-footer.jpg" alt="A screenshot of the website of Flow Model Management"></p>
</div>
<footer>
<section class="see-also">
<h3>More of my Portfolio Articles</h3>
<nav>
<ul class="see-also-list">
<li>
<a href="https://rayelliott.dev/blog/posts/leopold/">Marc Leopold Photography</a>
</li>
<li>
<a href="https://rayelliott.dev/blog/posts/stanthams/">Charles Stantham Legal Services</a>
</li>
<li>
<a href="https://rayelliott.dev/blog/posts/giana/">Giana Boutique</a>
</li>
</ul>
</nav>
</section>
</footer>
</article>
</section>
</div>
<footer class="footer">
<section class="container">
© 2020
Ray Elliott
<span id="cs-mode-container" class="cs-mode-container">
[<button type="button" id="cs-mode-button" class="cs-mode-button">Dark Mode: <span id="cs-mode-button-state" class="cs-mode-state">Light</span></button>]
</span>
</section>
</footer>
</main>
<script src="https://rayelliott.dev/blog/js/script.js"></script>
</body>
</html>