Compare commits
2 Commits
3adb1b3e41
...
992fdbfd56
Author | SHA1 | Date |
---|---|---|
ray | 992fdbfd56 | |
ray | a7e165d121 |
|
@ -7,7 +7,7 @@ featured_image: "/images/flowmm/flowmm-home.jpg"
|
||||||
draft: true
|
draft: true
|
||||||
---
|
---
|
||||||
|
|
||||||
**Flow Model Management** are a fictitious modelling agency.
|
**Flow Model Management** is a fictitious modelling agency.
|
||||||
They were created solely for the purpose of giving me an excuse to create their [website](https://flowmm.rayelliott.dev).
|
They were created solely for the purpose of giving me an excuse to create their [website](https://flowmm.rayelliott.dev).
|
||||||
|
|
||||||
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
||||||
|
@ -19,7 +19,13 @@ Essential to this, would be to provide a simple process for users to submit an a
|
||||||
|
|
||||||
## The Front End
|
## The Front End
|
||||||
|
|
||||||
For this project I wanted to build a **Single Page Application** using [Nuxt.js](https://nuxtjs.org/), which is an open source framework based on [Vue.js](https://vuejs.org/).
|
{{<
|
||||||
|
figure
|
||||||
|
src="/images/logos/nuxtjs-icon.svg"
|
||||||
|
alt="The Nuxt icon."
|
||||||
|
class="icon-inline sm-order-rev svg"
|
||||||
|
caption="For this project I wanted to build a **Single Page Application** using [Nuxt.js](https://nuxtjs.org/), which is an open source framework based on Vue.js."
|
||||||
|
>}}
|
||||||
|
|
||||||
One advantage of an SPA is speed.
|
One advantage of an SPA is speed.
|
||||||
SPAs are fast.
|
SPAs are fast.
|
||||||
|
@ -30,7 +36,14 @@ So, once the initial page is loaded, the amount of data that needs to be transmi
|
||||||
This also has the benefit of an improved user experience.
|
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.
|
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.
|
||||||
|
|
||||||
**Vue.js** 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.
|
{{<
|
||||||
|
figure
|
||||||
|
src="/images/logos/vue.svg"
|
||||||
|
alt="The Vue logo."
|
||||||
|
class="icon-inline icon-right svg"
|
||||||
|
caption="**[Vue.js](https://vuejs.org/)** 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."
|
||||||
|
>}}
|
||||||
|
|
||||||
|
|
||||||
However, Vue along with other SPA frameworks do have some disadvantages.
|
However, Vue along with other SPA frameworks do have some disadvantages.
|
||||||
|
|
||||||
|
@ -53,6 +66,14 @@ To name a few:
|
||||||
* there are many threats of security vulnerabilities and exploits,
|
* there are many threats of security vulnerabilities and exploits,
|
||||||
* although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use.
|
* although browser standards have improved over time, there are still a number of differences in behaviour between the many devices and browsers in use.
|
||||||
|
|
||||||
|
{{<
|
||||||
|
figure
|
||||||
|
src="/images/logos/nuxtjs-logo.svg"
|
||||||
|
alt="The Nuxt logo."
|
||||||
|
class="nuxt logo svg"
|
||||||
|
caption=""
|
||||||
|
>}}
|
||||||
|
|
||||||
This is where a framework such as **Nuxt.js** comes in.
|
This is where a framework such as **Nuxt.js** 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.
|
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.
|
||||||
|
|
||||||
|
@ -90,9 +111,23 @@ The project is hosted on a **Virtual Private Server**, using [Dokku](http://dokk
|
||||||
|
|
||||||
**Dokku** is a [Docker](https://www.docker.com/) based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon.
|
**Dokku** is a [Docker](https://www.docker.com/) based, open source, Platform as a Service in which Heroku compatible applications can be deployed to and hosted upon.
|
||||||
|
|
||||||
|
{{<
|
||||||
|
figure
|
||||||
|
src="/images/logos/docker-horizontal-monochromatic.png"
|
||||||
|
alt="The Docker logo."
|
||||||
|
class="logo"
|
||||||
|
>}}
|
||||||
|
|
||||||
Using Docker during development has many advantages.
|
Using Docker during development has many advantages.
|
||||||
When using Docker, the application is encapsulated within a consistent environment.
|
When using Docker, the application is encapsulated within a consistent environment.
|
||||||
This brings many advantages.
|
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.
|
One such advantage being the development environment can exactly match the deployed environment, ensuring there will be no compatibility issues after deployment.
|
||||||
|
|
||||||
|
{{<
|
||||||
|
figure
|
||||||
|
src="/images/logos/git-orange.png"
|
||||||
|
alt="The Git logo."
|
||||||
|
class="git logo"
|
||||||
|
>}}
|
||||||
|
|
||||||
Combining Docker with Dokku also allows for simple deployment, which can be done with just a [Git](https://git-scm.com/) push.
|
Combining Docker with Dokku also allows for simple deployment, which can be done with just a [Git](https://git-scm.com/) push.
|
||||||
|
|
|
@ -11,3 +11,100 @@ body.colorscheme-light .avatar img {
|
||||||
border-radius: 31%;
|
border-radius: 31%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.content article header {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.svg > img {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* icons
|
||||||
|
*/
|
||||||
|
|
||||||
|
.content figure.icon-inline {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline > figcaption p {
|
||||||
|
margin: 2rem 0;
|
||||||
|
text-align: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline > img {
|
||||||
|
height: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.content figure.icon-inline.sm-order-rev > figcaption {
|
||||||
|
order: 1;
|
||||||
|
margin-top: -2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline.sm-order-rev > img {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.content figure.icon-inline {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline > figcaption p {
|
||||||
|
margin: 0 0 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline.icon-right > figcaption p {
|
||||||
|
order: 1;
|
||||||
|
margin: 0 2rem 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline > img {
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.icon-inline.icon-right > img {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* logos
|
||||||
|
*/
|
||||||
|
|
||||||
|
.content figure.logo {
|
||||||
|
height: 1.6em;
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.logo > img {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 500px) {
|
||||||
|
.content figure.logo {
|
||||||
|
height: 2.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content figure.logo.nuxt {
|
||||||
|
height: 1.6em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Reference in New Issue