Inspecting the code

There are many components that make up the CMS. To begin with there is the fact that I am required to use two sites to edit the cms. One is the actual editable site that the content management system would edit and another is the cms itself. Both would require editing to be able to complete the task at hand. To begin with I needed to setups the files in the views and then add them to the routes file;

The lines at the top such as ” resources :articles, only: [:index, :show]” are indicating that in the articles views folder there should be an index.html.erb and a show.html.erb – There is also another way to show this being used in the file structure here;

This method says “get ‘analysis’, to: ‘redesign#analysis” which says that the term analysis should get the file ‘analysis’ in the folder ‘redesign’.

It’s at this point I can introduce includes. These files that look normal apart from they use an underline to define them as an include like so (_menu.html.erb). This means that anything in this file can be included someshere else. For example, here is the application.html.erb that loads the layout of the pages;

On this page you will notice the line that says;

“<%= render’layouts/optimadmin/shared/menu’ %>”

This loads the content from the file _menu.html.erb which can be seen here;

This is a much more organised way to code a project as everything has it’s own section within a folder.

Another great point of completing this subject is the .sass features I am able to use. The use of variables within sass means that instead of having to put the hex colour code into the stylesheet everytime, I have a variables file register the hex code as a variable then just use the variable in the different files. For example below is the variables file I used.

Another important note was the layout structure. I was using Foundation version 4 which meant that in the html code in the class names of a div, I also had to include the screen size-column width that I wanted. This meant it looked something like this;

Advertisement

Coding the website

The build of the website was very difficult, as I was using a language that I knew very little about. I had started previously about 3 months before with absolutely no knowledge in the area and had started to learn ‘on the job’ at a web design agency. It was at this point that I decided it would be an excellent idea to try and code an entire content management system using this language.

The first stage was to set up my mac to allow for ruby to run. This required complex terminal commands to setup the rails server, then connect the files to a github account. This meant I could push my changes to a git server and never loose any of my files. It also meant I had a version control program taking care of the specific handling of correct code.

To get the rails server setup, and actually built i needed to follow these commands. They meant i’d be able to setup the webiste alone without too much trouble. This meant the files were all stored online. It also meant that I could use Github to push the final version to the server.

When editing the files I used Atom. The file structure is reasonably simple to understand, to begin with there is the App folder. This contains most of the important files. Assets contain all the files like stysheets, fonts, javascrips files, and actual files such as images shown on the site. Controllers define the pages that will be used in the site, pulling the data from the models, these pages will be pushed to the views.

Another very important part of the file structure is the config section as it contains the routes file;

 

The routes file contains all the different views folders, and what they contain such as index, show & new ect.

With this basic knowledge it is reasonably easy to go about setting up and editing a Ruby on Rails website.

Technical Details

Not using Banner Jones, Instead i’m using Optimus Services Limited (It runs off an engine and will effect other web sites).

There are a lot of smaller important things to remeber when building this website, this blog post will explain them all.

Ruby on Rails

Ruby on Rails is a programming language, a Model-View-Controller (MVC) web application framework. HTML (Hyper-text markup language) and CSS (Cascading Style-Sheets) format websites, and Ruby will output this in its own compressed files. Ruby though, will deal with much more complex processing. Things like looping and branching content can all be achieved with the toolkit that Ruby on Rails provides.

Model-View-Controller (MVC) is KEY

Model: where all the data is kept for the webtite

View: where all visual information relating the styling of the site is kept

Controller:  connects the data from the model to the view so it can be displayed

Once installed on your computer, you can set up a site, and use the following file structure to organise your site.

Rendering Partials are an important process of setting up a site. They are components stored in seperate files that can rule commands that will attribute data to an array of the layout. They are simple to execute, for example the header can be done as a partial. So you would set up the file _header in app/views/layouts/ so the file would appear as app/views/layouts/_header.html.erb – The only thing left to do after you have applied the relevant information inside that file is to render it where you want it to appear. This is done using the command “<%= render ’layouts/header’ %>”.

Github

Github (available here; https://github.com/) is a project hosting platform. It offers services like source-code browser, in-line editing, wikis, and ticketing. It also has a versioning control, allowing users to browse every single edit of their project. While the online version is reasonably to use, it requires git commands to work on a computer, these are done in the command line via Terminal on a Macintosh computer

Terminal

Terminal is the program used to run the commands to set up a rails website and start the server. It is a complex thing to undestand but I have written an in depth explaination here (https://akbrodie.wordpress.com/2017/03/23/setting-up-ruby-on-rails/).

Variables & Sass

Sass (Syntactically Awesome Style Sheets) is a way of coding the stylesheets in Ruby on Rails. It makes for cleaner and easier code. Available here (http://sass-lang.com/guide) Sass is key to making the code really clean, this is accomplished through a combination of Variables, Nesting, Partials, Import, Mixins, Extend/Inheritance & Operators.

• Variables are used to store data, so that time can be saved for later. They have a dollar sign followed by the word used to store the data, like $example. A great way this is used is to assign colour hex codes to variables describing the colour. This makes editing much easier and faster.

• Nesting is when a class has elements within it that it wants to effect. The css is nested within the one class, rather than multiple ones. So as an example a div class of .example containing a h1, h2 and p could look something like this;

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Partials are external files that contain snippets of code that can be added using an @import tag like @import ‘example’;

Mixins allow lots code that essensially do the same job to be grouped together in an understandable way. A example can be seen below how border-radius now includes the webkit, moz and ms versions.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Extend/Inheritance allows styles to be shared across multiple class names easily without repetitio. It is accomplished very easily by adding @extend .exampleClassName; – The example below shows the styling for a dialog box, which border colour can change depending on its state.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Operators allow for content to have set widths dependant on mathmatical equations. This is great as it allows content to adjust the size of the screen it iis being displayed upon. An example can be seen below;

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Medium Editor

Medium Editor ( Available here: https://yabwe.github.io/medium-editor/) is a visual content editor plugin available for cms content.

It allows the user to select content to edit simply by highlighting it on the page like so;

This is something that is vital for editing the website in Live Edit mode.

Code of conduct

Clean code is really important, it means that if someone starts looking at your completed website they can understand what the code does. Google ensures that is code is extremely clean to make sure the loading times are kept down.

Ways to ensure my code is kept clean are listed below.

• In the sass files, keeping notes to ensure the code is described and easy to understand is vital. This is simply done using “//”.

• ensuring the attributes within css classes are kept in alphabetical order.

• Using variables for colours is key, when describing colours of different shades, it important to put colour first and the shade second. It looks like this $yellow-light or $yellow-dark. This is done for speed, as the developer can type the colour first and see all the different shades available.

Flex Grid columns are important for coding in rails. I use the flex grid media queries as they work well with Ruby on Rails. They are also simple to use. Normal class names can be assigned to html elements, then in the css the tyle of media query is included with a line ‘@include flex-grid-row;’ or @include flex-grid-column(6);’. This makes creating and editing the layout super easy. They also work well with the Media Queries (Include media) to allow the user to make layouts adaptable for mobile.

The stages of creating a website are important to be aware of. There are three stages that a website can go through, the first is static where the content is pulled directly from the HTML file, the second is where the content is dynamic and is stored on a database and finally is when engines and generators are able to create the plugins used on each independant website.