rayelliott
/
hugo-blog
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: rayelliott:3105551bf318a71102906986e3ecf2449c92a8ed
Branches Tags
rayelliott:dev
rayelliott:production
...
compare: rayelliott:98c73ebf8bcd363dc3086f88563cfaf6cd95f5a5
Branches Tags
rayelliott:dev
rayelliott:production

2 Commits
3105551bf3 ... 98c73ebf8b

Author SHA1 Message Date
ray 98c73ebf8b update draft 2020-02-12 14:46:57 +00:00
ray 427d056286 initial draft complete 2020-02-11 15:25:44 +00:00
2 changed files with 70 additions and 50 deletions
Show Stats Expand all files Collapse all files

16
content/posts/flowmm.md
View File

@ -28,13 +28,13 @@ Instead of reloading an entire page, when maybe only one small component of the
So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced. So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced.
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 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. **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.
However, Vue along with other SPA frameworks do have some disadvantages. However, Vue along with other SPA frameworks do have some disadvantages.
The main disadvantage is regarding **Search Engine Optimisation**. A major disadvantage is regarding **Search Engine Optimisation**.
SPAs can require a relatively long initial page load, and aren't as efficiently crawled by search engine crawlers due to the heavy use of JavaScript. SPAs can require a relatively long initial page load, and aren't as efficiently crawled by search engine crawlers due to the heavy use of JavaScript.
This means sites requiring SEO, need to take steps to mitigate these issues. This means sites requiring SEO, need to take steps to mitigate these issues.
@ -44,12 +44,14 @@ The HTML can be quickly displayed by the client browser, reducing the initial pa
This may be taken even further, if desired, so that *all* pages are rendered on the server. In effect, creating a static site. This may be taken even further, if desired, so that *all* 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. This will then bring all the benefits of a fast, easily indexable static site.
These, **Server Side Rendered** applications can require a lot of setting up These, **Server Side Rendered** applications can require a lot of setting up.
There are also a number of pitfalls and considerations that need to be kept in mind. There are also a number of pitfalls and considerations that need to be kept in mind.
For example, as there are no requests for new pages, the browser history needs to be managed. 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. * there are no requests for new pages and so the browser history needs to be managed,
* 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.
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.
@ -68,7 +70,7 @@ simple. A visually appealing, elegant site, with some background information and
to use method for applicants to sign up with. to use method for applicants to sign up with.
A monochromatic colour scheme was chosen. I felt that a primarily black and A monochromatic colour scheme was chosen. I felt that a primarily black and
white colour scheme that uses the brand colour of orange would give a classy and white colour scheme that uses the brand colour of orange as an accent would give a classy and
elegant feel to the site. elegant feel to the site.
**Montserrat** and **Lato** were the fonts chosen for the headings and body text respectively. **Montserrat** and **Lato** were the fonts chosen for the headings and body text respectively.

104
content/posts/leopold.md
View File

@ -12,70 +12,88 @@ series = []
+++ +++
**Marc Leopold** is an apocryphal photographer and visual artist based in Chicago, USA. **Marc Leopold** is an apocryphal photographer and visual artist based in Chicago, USA.
Having previously only having a dated, imaginary website to showcase his work, he recently decided that he was in need of a more modern, up to date portfolio site. He recently decided his previous (and rather imaginary) website, whose purpose was to showcase his work, was beginning to look dated. He decided that it was time for a more modern, up to date portfolio site.
Being a photographer's portfolio site, the requirements are fairly basic.
Aside from the portfolio items, we just need some brief background information and an outline of the services provided along with a contact form.
## The Front End ## The Front End
The front end of this project, I decided to use [Vue.js](https:/etcvuejs.org). For the front end of this project, I decided to use [Vue.js](https:/etcvuejs.org).
Site is mainly to consist of content in the form of images.
The main task of a user is expected to be the browsing and viewing of these images. The site's content will mainly consist of examples of Marc's portfolio in the form of images that are organised into a number of galleries.
A **Single Page Application** give the best user experience. The main task of a user will be the browsing and viewing of these images.
No need to do full page reloads, when we only need to update the on-screen images.
Can dynamically update page components to create a fast responsive site. I feel that using a **Single Page Application** will give a nice user experience whilst browsing through and viewing the images.
The images will be able to be dynamically loaded when required.
There will be no need for full page reloads, when we only need to update the required on-screen images.
Instead, we can dynamically update page components to create a fast, responsive site.
## The Back End ## The Back End
For the backend I decided to use [October](https://octobercms.com/), a Content Management System, based on the [Laravel](https://laravel.com/) framework, which is a popular, open source, PHP based framework. For the backend I decided to use [October](https://octobercms.com/), a Content Management System, based on the [Laravel](https://laravel.com/) framework, which is a popular, open source, PHP based framework.
The major requirements of a backend for this type of project is simply to store and organise images. The major requirements of a backend for this type of project is simply to store and organise images.
It would be possible to create a fully bespoke image based CMS to handle these requirements. It would be possible to create a fully bespoke image based CMS to handle these requirements.
However, this would involve a considerable amount of work and a lot of considerations, such as security best practices, browser compatibility, testing of code, etc. However, this would involve a considerable amount of work and a lot of considerations, such as security best practices, browser compatibility, testing of code, etc.
Fortunately, there are already a number of libraries and frameworks available that have already solved these issues, been tried and tested with real world use by many users, and are in active development. Fortunately, there are already a number of actively developed libraries and frameworks available that have already solved these issues:
Using one of these shortens development time considerably. We are able to build upon and extend functionality rather than reimplementing these features from scratch.
* they have the advantage of being tried and tested with real world use by many users,
* using one of these shortens development time considerably,
* we are able to build upon and extend functionality rather than reimplementing these features from scratch.
So for a relatively basic CMS, in which there are no particularly special requirements, it makes perfect sense to make use of a pre-existing platform. So for a relatively basic CMS, in which there are no particularly special requirements, it makes perfect sense to make use of a pre-existing platform.
In this case, I used **October** for a number for reasons. In this case, I chose **October** for a number for reasons.
Performant - isn't bloated with unneeded functionality. It instead provides a * **Performant**
base in which features and functionality may be added if required. This makes it
faster than some alternatives, such as WordPress for example, which can suffer
from having a large amount of features included as a base. Also has useful
default features such as minification of CSS and JavaScript. The templating
engine (TWIG) generates static HTML.
Developer oriented - is targeted towards developers. High quality documentation October isn't bloated with unneeded functionality.
and a clean and modern codebase makes it easy to extend and add functionality.
Plugins are entirely separate - have own database and namespaces preventing
conflicts between them. The templating system and text file based website
structure allows for separation of data and presentation and gives easy version
control management.
There is a large developer community. This means a large number of plugins and It instead provides a base in which features and functionality may be added if required.
themes provided by the community. Not as many as WordPress but many of the This makes it faster than some alternatives, such as WordPress for example, which can suffer from having a large amount of features included as a base.
WordPress plugins can be considered to be poor quality, particularly among the It also has useful default features such as minification of CSS and JavaScript. The templating engine, Twig, generates static HTML.
free ones. It can also be difficult to extend WordPress plugins.
Secure when compared to alternatives like WordPress. Only one file that can be * **Developer oriented**
accessed - `index.php`. There is a more rigorous approval process for plugins and
themes.
Administrative interface customisation. This is very useful for a site that will October is targeted towards developers.
involve a lot of users with the ability to manage their accounts.
These reasons are why I consider a platform like October to be better for High quality documentation and a clean and modern codebase makes it easy to extend and add functionality.
building a backend CMS than, for example WordPress - it is easier to customise Plugins are entirely separate - have own database and namespaces preventing conflicts between them.
and add the required functionality without the inherent bloat. The templating system and text file based website structure allows for separation of data and presentation and gives easy version control management.
Having said that, it may sound like WordPress just isn't very good when compared * **Community**
to something like October. This, however, just isn't true. WordPress is very
good at what it actually is - a platform that allows users, who may have limited technical There is a large developer community.
ability, to publish a website. For this it is very successful, after all it
powers XX% of the world's websites. However, it is also a victim of its own This means a large number of plugins and themes provided by the community. Not as many as WordPress but many of the WordPress plugins can be considered to be poor quality, particularly among the free ones.
success. It is a very high profile target with a lot of effort expended in It can also be difficult to extend WordPress plugins.
finding exploits and vulnerabilities. That, combined with its start as solely a
blogging platform, with CMS features bolted on over time, can make leaner, more * **Secure**
focused alternatives more appealing to developers.
Relatively secure when compared to alternatives like WordPress.
There is a single point of entry into the application, with only one file that can ever be accessed - `index.php`.
This reduces the attack areas available.
There is also more rigorous approval process for plugins and themes, that with some alternative platforms.
Each plugin and theme available must undergo a strict verification progress.
* **Customisation**
It is simple and straight forward to customise the administrative interface.
This is very useful for a site that will involve a lot of users with the ability to manage their accounts and decreases development time substantially.
So, These reasons are why I consider a platform like October to be better for building a backend CMS than, for example WordPress - it is easier to customise and add the required functionality without the inherent bloat of some alternatives.
Having said that, it may sound like WordPress just isn't very good when compared to something like October.
This, however, just isn't true.
WordPress is very good at what it actually is - a platform that allows users, who may have limited technical ability, to publish a website.
For this it is very successful, after all it powers XX% of the world's websites.
However, it is also a victim of its own success.
It is a very high profile target with a lot of effort expended in finding exploits and vulnerabilities.
That, combined with its start as solely a blogging platform, with CMS features bolted on over time, can make leaner, more focused alternatives more appealing to developers.
## The Design ## The Design