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
|
||||
---
|
||||
|
||||
**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).
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
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.
|
||||
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.
|
||||
|
||||
|
@ -53,6 +66,14 @@ To name a few:
|
|||
* 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.
|
||||
|
||||
{{<
|
||||
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.
|
||||
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.
|
||||
|
||||
{{<
|
||||
figure
|
||||
src="/images/logos/docker-horizontal-monochromatic.png"
|
||||
alt="The Docker logo."
|
||||
class="logo"
|
||||
>}}
|
||||
|
||||
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.
|
||||
|
||||
{{<
|
||||
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.
|
||||
|
|
|
@ -11,3 +11,100 @@ body.colorscheme-light .avatar img {
|
|||
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