Compare commits
No commits in common. "1a53d902ba50cbc346cb8d21779d11b4cc12b568" and "0be39768596ef9dc343776ca2115757a956276bd" have entirely different histories.
1a53d902ba
...
0be3976859
|
|
@ -14,7 +14,7 @@ They were created solely for the purpose of giving me a reason to create their [
|
|||
|
||||
However, despite being imaginary, the owners of Flow Model Management felt that it was about time their business should have an internet presence.
|
||||
|
||||
And so, my discussions with the stakeholders began.
|
||||
And so, discussions with the stakeholders began.
|
||||
|
||||
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.
|
||||
|
|
@ -31,7 +31,7 @@ caption="For this project I wanted to build a **Single Page Application** using
|
|||
|
||||
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.
|
||||
Instead of reloading an entire page, when maybe only one small component of the page needs updating, a client may request only the much smaller data needed to update that component.
|
||||
|
||||
So, once the initial page is loaded, the amount of data that needs to be transmitted can be greatly reduced.
|
||||
|
||||
|
|
@ -53,14 +53,16 @@ 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.
|
||||
|
||||
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.
|
||||
One solution is to render the HTML on the server, rather than the client.
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
To name a few:
|
||||
|
||||
* 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,
|
||||
|
|
@ -82,7 +84,6 @@ For example, it may be decided in future that the features commonly found in **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.
|
||||
|
||||
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.
|
||||
|
||||
## The Design
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
+++
|
||||
draft = false
|
||||
draft = true
|
||||
date = 2019-12-29T18:55:07Z
|
||||
title = "Giana Boutique"
|
||||
description = "Developing an ecommerce website using WordPress and WooCommerce."
|
||||
|
|
@ -11,13 +11,13 @@ series = ["Portfolio"]
|
|||
+++
|
||||
|
||||
Now, this site, is one of the earliest I ever worked upon.
|
||||
It was my first time using **WooCommerce** and the second time using **WordPress** to build a site.
|
||||
It was my first time using WooCommerce and the second time using WordPress to build a site.
|
||||
|
||||
It is the site of [Giana Boutique](https://giana.rayelliott.dev/), a fictitious, online ecommerce store.
|
||||
|
||||
This was done quite some time ago. Very early on in my career as a web developer.
|
||||
|
||||
For an ecommerce site, there was nothing special required. I used the WordPress plugin WooCommerce along with a pre-existing theme with a few modifications.
|
||||
Nothing special, for an ecommerce site, was required. I used the WordPress plugin **WooCommerce** along with a pre-existing theme with a few modifications.
|
||||
|
||||
{{<
|
||||
figure
|
||||
|
|
@ -27,28 +27,27 @@ class="logo woocommerce"
|
|||
caption=""
|
||||
>}}
|
||||
|
||||
The main customisations were bits of CSS to tidy some things up -- so a child theme was created.
|
||||
The main customisations were little bits of CSS to tidy some things up -- so a child theme was created.
|
||||
The parent theme is called **Exchange** and was obtained from [ModernThemes](https://modernthemes.net/).
|
||||
|
||||
Now, why did I use the Exchange theme?
|
||||
|
||||
Well, I'm an honest guy and so I'll confess -- it was free and, at the time, I thought it looked okay!
|
||||
Well, it was pretty much entirely because it was free and I thought it looked okay.
|
||||
It was free and I felt it was a reasonable looking theme that I could use to get started with setting up a WordPress site to use WooCommerce.
|
||||
|
||||
Looking back now, not exactly the best of reasons.
|
||||
But, it was free and I felt it was a reasonable looking theme that I could use to get experience with setting up a WordPress site using WooCommerce.
|
||||
Would I use it again?
|
||||
|
||||
So, would I use it again?
|
||||
|
||||
Now that I have a lot more experience develping for WordPress, I wouldn't.
|
||||
I wouldn't.
|
||||
The main reasons being:
|
||||
|
||||
* I felt it was difficult to customise, although this may have been at least partly due to my inexperience.
|
||||
* It doesn't really offer anything over Storefront, the WooCommerce theme from Automattic -- the core developers of WooCommerce itself.
|
||||
The advantage of using a theme from the actual WooCommerce developers, is that we know it will be written to the same high standard without any compatibility issues and should always be up to date with the latest version of WooCommerce.
|
||||
This theme does look a little different, but nothing substantial. Certainly nothing that couldn't be achieved with some customisation of Storefront.
|
||||
* It doesn't do much to set it above all the other similar looking WooCommerce sites around. It looks clean and fresh, but nothing particularly stands out.
|
||||
* It doesn't really offer anything over Storefront, the WooCommerce theme from Automattic -- the core developers of WooCommerce itself.
|
||||
The advantage of using a theme from the actual WooCommerce developers, is that we know it will be written to the same high standard without any compatibility issues and should always be up to date with the latest version of WooCommerce.
|
||||
It does look a little different, but nothing substantial. Certainly nothing that couldn't be achieved with some customisation of Storefront.
|
||||
* Doesn't do much to set it above all the other similar looking WooCommerce sites around. It looks clean and fresh, but nothing particularly stands out.
|
||||
|
||||
So, I feel it is perfectly fine for someone wishing to set up a WooCommerce site with an acceptable theme quickly with little effort.
|
||||
But, not so good for developers, who will most likely want to customise and, in my opinion, would be better off starting with an alternative such as Storefront.
|
||||
So, I feel it is perfectly fine for someone wishing to set up a WooCommerce with an acceptable theme quickly with little effort.
|
||||
But, not so good for developers, who will most likely want to customise and would be better off starting with an alternative such as Storefront.
|
||||
|
||||
So, If I was to redo the site, I would almost certainly base it on the Storefront theme and include a lot more custom elements.
|
||||
|
||||
|
|
@ -59,6 +58,4 @@ Of course, it is important such features do not detract from the overall user ex
|
|||
We do not want flashy, distracting elements that will take attention away from the important elements.
|
||||
This is why I feel classy and subtle is always the way to go for ecommerce sites.
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@ series = ["Portfolio"]
|
|||
+++
|
||||
|
||||
**Marc Leopold** is an apocryphal photographer and visual artist based in Chicago, USA.
|
||||
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 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.
|
||||
|
|
@ -27,15 +25,12 @@ class="icon-inline icon-right sm-order-rev svg"
|
|||
caption="For the front end of this project, I went with [Vue.js](https:/etcvuejs.org) — a fast, modern JavaScript framework used to create web interfaces."
|
||||
>}}
|
||||
|
||||
The site's content will mainly consist of examples of Marc's portfolio Photography.
|
||||
These are organised into a number of galleries.
|
||||
The main task of a visitor will be browsing and viewing 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.
|
||||
The main task of a user will be the browsing and viewing of these images.
|
||||
|
||||
I feel that using a **Single Page Application** will give a nice user experience whilst browsing and viewing the images.
|
||||
|
||||
The images will be dynamically loaded when required.
|
||||
There will be no need for full page reloads.
|
||||
We only need to update the required on-screen images.
|
||||
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
|
||||
|
|
@ -48,7 +43,7 @@ class="icon-inline sm-order-rev"
|
|||
caption="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 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.
|
||||
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.
|
||||
|
|
@ -73,30 +68,30 @@ alt="TODO - do properly with shortcode"
|
|||
October isn't bloated with unneeded functionality.
|
||||
|
||||
It instead provides a 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.
|
||||
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.
|
||||
It also has useful default features such as minification of CSS and JavaScript. The templating engine, Twig, generates static HTML, giving the speed benefits of a static site, without database lookups.
|
||||
|
||||
* **Developer Oriented**
|
||||
|
||||
October is targeted towards developers.
|
||||
|
||||
High quality documentation and a clean and modern codebase makes it easy to extend and add functionality.
|
||||
Plugins are entirely separate - they have their own database and namespaces preventing conflicts between them.
|
||||
High quality documentation 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.
|
||||
|
||||
* **Community**
|
||||
|
||||
There is a large developer community.
|
||||
|
||||
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.
|
||||
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.
|
||||
It can also be difficult to extend WordPress plugins.
|
||||
|
||||
* **Secure**
|
||||
|
||||
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`, reducing the potential attack area.
|
||||
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 one must undergo a strict verification progress.
|
||||
|
||||
|
|
@ -106,37 +101,39 @@ alt="TODO - do properly with shortcode"
|
|||
|
||||
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, in this case, 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.
|
||||
So, these reasons are why, in this case, 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.
|
||||
Not when compared to something like October.
|
||||
This, however, I don't feel to be true.
|
||||
Having said that, it may sound like WordPress isn't very good when compared to something like October.
|
||||
This, however, just isn't true.
|
||||
|
||||
{{<
|
||||
figure
|
||||
src="/images/logos/wp-logo.png"
|
||||
alt="The WordPress icon."
|
||||
class="icon-inline sm-order-rev wp-icon"
|
||||
caption="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 [over 30%](https://wordpress.org/news/2019/03/one-third-of-the-web/) of the world's websites."
|
||||
caption="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 [over 30%](https://wordpress.org/news/2019/03/one-third-of-the-web/) 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.
|
||||
Combined with its start as a blogging platform, with CMS features bolted on over time, this can make leaner, more focused alternatives more appealing to developers.
|
||||
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
|
||||
|
||||
As the primary purpose of the site was to display a portfolio of images, then naturally the focus should be on those images.
|
||||
|
||||
I felt that having striking, interesting images on the home page would create interest.
|
||||
Interest that would engage visitors and encourage exploration of the site further.
|
||||
Interest that would encourage visitors to explore the site further.
|
||||
|
||||
The site has a colour scheme that is intentionally, lacking colour and fairly dark.
|
||||
This is to draw the attention of visitors to the full colour photographs that are intended to be the focus of attention.
|
||||
|
||||
|
||||
{{<
|
||||
figure
|
||||
src="/images/leopold/medium-2.jpg"
|
||||
alt="A screenshot of the website of Marc Leopold Photography as seen on a mobile device."
|
||||
>}}
|
||||
|
||||
## The Deployment
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ featured_image = "/images/stanthams/large-1.jpg"
|
|||
series = ["Portfolio"]
|
||||
+++
|
||||
|
||||
**Charles Stantham** are a firm of made-up solicitors who decided they wanted me to make up a [website](https://stanthams.rayelliott.dev/) for their firm.
|
||||
**Charles Stantham** are a firm of made up solicitors who decided they wanted me to make up a [website](https://stanthams.rayelliott.dev/) for their firm.
|
||||
|
||||
The site is a fairly basic brochure site with no particularly special requirements.
|
||||
|
||||
|
|
@ -27,34 +27,32 @@ class="icon-inline oceanwp-icon"
|
|||
caption="There were a number of reasons why using OceanWP is appropriate for a project such as this:"
|
||||
>}}
|
||||
|
||||
* **Quick**. Using such solutions can cut development time considerably -- especially important for low budget sites.
|
||||
* **Quick**. Using such solutions can cut development time considerably.
|
||||
This can be especially important for low budget sites.
|
||||
Instead of building a site completely from scratch, a general, existing theme can be highly customised.
|
||||
* **Flexible**. Although not as flexible as a bespoke theme, OceanWP is highly customisable.
|
||||
* **Flexible**. Although not as flexible as a bespoke theme, OceanWP is highly customisable.
|
||||
For features that can't be created or modified within the theme a child theme can be created and these features added on that way.
|
||||
* **Extensible**. Many features are provided as extensions to the base theme.
|
||||
* **Extensible**. Many features are provided as extensions to the base theme.
|
||||
It is also not difficult to add custom functionality if needed.
|
||||
* **Lightweight**. There are a lot of popular page builders available for WordPress.
|
||||
* **Lightweight**. There are a lot of popular page builders available for WordPress.
|
||||
Not all of them are, relatively speaking, as lightweight or well coded.
|
||||
|
||||
There are, however, **disadvantages**.
|
||||
There are, however, disadvantages.
|
||||
|
||||
One of those being bloat.
|
||||
Pre-built themes are typically designed to provide for very broad and general use cases.
|
||||
Pre-built themes are typically designed to provide for very broad, general use cases.
|
||||
A lot of this functionality will never be used by any one theme and so will only serve to at best clutter the interface.
|
||||
At worst they can slow the site and increase the likelihood of vulnerabilities.
|
||||
|
||||
A lot of this functionality will never be used by any one theme and so will only serve to, at best, clutter the interface.
|
||||
At worst, they slow the site and increase the likelihood of vulnerabilities.
|
||||
|
||||
Purpose built themes and design elements will always be leaner and more efficient.
|
||||
We can also be sure they contain clean, well written code (if coded correctly of course).
|
||||
This means purpose built themes and design elements will always be leaner and more efficient.
|
||||
We can also be sure they are be written with clean, well written code (if coded correctly of course).
|
||||
|
||||
In some cases, performance issues may not be so apparent for small sites with few users.
|
||||
However, these become much more of an issue once the number of visitors is scaled up for bigger sites.
|
||||
However, these can become much more of an issue once the number of visitors is scaled up for bigger sites.
|
||||
|
||||
So, when working with WordPress, developing a theme from scratch will be faster, more efficient, and result in
|
||||
a leaner theme.
|
||||
|
||||
However, this is not always possible given time and cost restraints so compromises may need to be made.
|
||||
In these cases a 'site builder' may be the best option.
|
||||
So, when working with WordPress, a theme developed from scratch should always be faster, leaner and more efficient.
|
||||
However, this is not always possible given time or cost restraints and compromises may need to be made.
|
||||
In these cases a site builder may be the best option.
|
||||
|
||||
As there were some minor customisations required that were not possible through the theme's interface, a child theme was created.
|
||||
|
||||
|
|
@ -75,11 +73,10 @@ figure
|
|||
src="/images/logos/elementor-icon.png"
|
||||
alt="The Elementor logo."
|
||||
class="icon-inline"
|
||||
caption="Elementor is a '**Page Builder**' that provides component based building blocks that can be added to a WordPress site and customised."
|
||||
caption="Elementor is a 'Page Builder' that provides component based building blocks that can be added to a WordPress site and customised."
|
||||
>}}
|
||||
|
||||
This has the advantage of speeding up development time considerably but brings disadvantages similar to those discussed above for using OceanWP.
|
||||
|
||||
Again, for this particular project, I felt the advantages outweighed the disadvantages.
|
||||
|
||||
|
||||
|
|
@ -93,10 +90,10 @@ Apart from Elementor, a limited number of other plugins were also used:
|
|||
It would have been better to add this feature as a leaner, custom plugin, but for a site with a low budget, this is an acceptable compromise.
|
||||
* [GDPR Cookie Compliance](https://wordpress.org/plugins/gdpr-cookie-compliance/).
|
||||
Very important for any site since the GDPR regulations came into force.
|
||||
A custom plugin could have been used, but for this very specific functionality, the benefits of an actively developed, tried and tested solution, outweigh the benefit of developing a plugin from scratch.
|
||||
A custom plugin could have been used, but for this very specific functionality, the benefits of an actively developed, tried and tested solution, outweigh any benefit of developing a plugin from scratch.
|
||||
* [iThemes Security](https://wordpress.org/plugins/better-wp-security/).
|
||||
Security is a big issue with any WordPress site.
|
||||
I find this plugin provides good security (in addition to any server side security measures used).
|
||||
I find this plugin provides good security in addition to any server side security measures.
|
||||
* [UpdraftPlus - Backup/Restore](https://wordpress.org/plugins/updraftplus/).
|
||||
Regular, offsite backups are another essential component to any website.
|
||||
UpdraftPlus handles these very well.
|
||||
|
|
@ -104,30 +101,29 @@ Apart from Elementor, a limited number of other plugins were also used:
|
|||
It is always better to use server side caching such as Nginx FastCGI cashing or Varnish.
|
||||
However, in cases where this isn't practical, this plugin is a competent solution.
|
||||
* [WP Mail SMTP](https://wordpress.org/plugins/wp-mail-smtp/).
|
||||
It can sometimes be a little tricky getting mail working when using WordPress within Docker containers.
|
||||
This plugin provides a simple solution.
|
||||
It can be tricky getting mail working when using WordPress within Docker containers.
|
||||
This plugin provides for a simple solution.
|
||||
|
||||
For an actual production site where Search Engine Optimisation is important I would also use a plugin to cover this.
|
||||
I find [The SEO Framework](https://wordpress.org/plugins/autodescription/) to be the least bloated, competent plugin to achieve this.
|
||||
|
||||
With WordPress, it is essential to test the speed of the site before and after adding any plugins, especially for ones not used before.
|
||||
I find [The SEO Framework](https://wordpress.org/plugins/autodescription/) to be the most comprehensive, efficient plugin to achieve this.
|
||||
|
||||
For any plugin used with WordPress, it is essential to test the speed of the site before and after adding it, especially if not used before.
|
||||
It is also very useful to look over the source code of any plugin.
|
||||
Seeing how well written this is, can be a good indicator of the likely performance of a plugin and we can see how seriously security considerations are taken.
|
||||
|
||||
Also essential, for any WordPress site, is to limit the number of plugins used.
|
||||
An unnecessary amount of plugins will almost certainly slow a site down and increases the risk of introducing vulnerabilities.
|
||||
An unnecessary amount of plugins will almost certainly slow a site down and will increases the risk of introducing vulnerabilities.
|
||||
|
||||
## The Summary
|
||||
|
||||
So, in summary, there's not much to be said about the actual content of the website.
|
||||
It's a fairly basic, low budget, brochure site.
|
||||
The kind of site, that many small businesses will be looking for to give their business a presence on the web.
|
||||
|
||||
More interesting are the justifications I covered regarding the development choices made.
|
||||
The kind of site, that many small businesses will be looking for to give their business a presence on the web.
|
||||
More interesting are the justifications for the development choices made which are covered above.
|
||||
|
||||
The primary purpose of the site is to provide information about the business. It is important that this is presented in an easy navigable fashion and the information is given in a clean, uncluttered, easy to digest manner.
|
||||
All of which I feel is achieved in the design choices of the theming and layout.
|
||||
All of which is achieved in the design choices of the theming and layout.
|
||||
|
||||
{{<
|
||||
figure
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
.content img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.navigation .navigation-title {
|
||||
text-transform: none;
|
||||
}
|
||||
|
|
|
|||
Reference in New Issue