I currently work at 101Smart, which is an Email Marketing, Website and App Development company. My role here is a 'Full-Stack Web Developer', this covers a wide range of tasks such as:
- Client Interactions (Emails, Calls)
- Web Development (C#, HTML, SASS, JS)
- Visual Studio
- Microsoft SQL Server Managment Studio
- CMS Integration (Razor)
- Problem Solving (Debugging)
- Website Deployment
Whilst being employed at the company I have worked on and developed over 20+ different types of projects, these are all bespoke websites that have been designed especially to fit the business's requirements and needs.
Planning & Preperation
The 'Why' and 'With Who' elements.
When I start a project I'm told the name of the client, then given a design and wireframe of the website, which are provided to me by the company Web Designer (usually via. email). I get the design for the website and wireframe from a link which goes to the 101Smart design site, it generally looks something similar to this:
Once I have all of these resources, it allows me to get a brief overview of what the site will look like and means I can start to plan out which libraries/frameworks I might need. For example, from looking at the design I could see there was a carousel in the footer.
When choosing my libraries and frameworks, I tend to look for ones that have been used previously, or ones that have a free commercial licence. For Proudly Norfolk I chose Owl Carousel, I did this because I knew it had been used previously but also as it was a good alternative to Slick Slider, which generally isn't very smooth at swiping multiple slides at a time.
Now that I have my resources, frameworks and libraries I can begin the setting up of the website, I have to first create a test domain for it. This will usually just be adding a 'CNAME' record to an existing domain e.g. "101test1.co.uk". I can do this by going to our registra (GoDaddy) finding the domain I need and setting it up with a new record. For Proudly Norfolk I used the 'CNAME': proudnor. Which gave me the full test domain of 'proudnor.101test1.co.uk'.
Once the domain has been set up, I need to add a blank website to IIS (Internet Information Services) which is the Web Server that manages everything. In order to do this I must first sign in to the server via. Remote Desktop Connection. Once connected I add the site with its test domain to IIS, then move onto creating the database.
Databases are all stored on the server in Microsoft SQL Server Managment Studio. To set one up I first create a new database, then restore it from a backup of the 'Base Sites' database. I need to make sure the CMS version is the same on this backup as the current 'Base Sites' CMS. I can do this by just looking at the file names, usually they follow the format of: BaseSite_s5_7140_25-07-19_01
- BaseSite (Name of website)
- s5 (CMS implementation version)
- 7140 (CMS version)
- 25-07-19 (Date of backup)
- 01 (Number of backup)
Once the database has been restored, I have to delete the Umbraco login in the 'Security' folder. After that, I can map the global Umbraco login to the new database. Now that these steps have been completed, we're all done with setting up the live site and it's time to start work on the local build.
This was one of the first major projects that I worked on, which is why I'm choosing it for my portfolio. Not only because it will give you a good idea of where I started from, but it will also give you a sense of my progression, when viewing later projects.link Visit Site
Proudly Norfolk is a not-for-profit organisation, who promotes, celebrates and supports local food and drink producers. I was asked to develop their website by the company project manager, as the other developers were busy at the time and it served as a good introduction to not only the CMS (Umbraco) but also the MVC architecture. I think my employer could also see that I was eager to complete a larger project, as the ones I had worked on previously didn't have a lot of CMS integration.
For each of my projects I have a folder called '_Resources' in my Documents, which is where I store all of the local media, libraries and placeholders for the website. Once I have all the resources I require, I can start to work on the solution.
Whenever a new project is started there's a few things that have to be done before just jumping straight in. To start off, the solution and project name must be changed from 'Base Site 7.14.0' to 'Proudly Norfolk'. Secondly, the 'web.config' has to be changed so that the 'connectionString' matches the database name that we set up earlier.
Once these steps have been completed, the only thing left to do is to change to global sitename. This information is stored in a custom 'Global.cs' class, under the namespace 'Site'. So all we need to do is to open up that class and change this value:
This will just make sure that the tab title will display the site name, rather than 'Base Site 7.14.0'.
During the development process of any project, there are certain 'rules' I have to follow. The main one would be about how my code is written, at my workplace the naming conventions look like this:
All data types are written like 'String' or 'Int32' rather than 'string' or 'int' because it gives a little bit more clarification to the data type, but it also has a few extra methods that can be used. Variable names are written in camel case, which essentially means the first word or letters are written in lowercase, the rest have the first letter capitalised e.g. helloWorldMyNameIsHalden. There are a few prefixs that have to be taken into account too:
- String (str)
- Int32 (int)
- Boolean (bln)
- Double (dbl)
- IEnumerable/List/Collection (col)
As you can see, each prefix is around 3 characters long and gives a good description of the data type. This is done so that when you're reading code that you're unfamiliar with, you can still tell the difference between unknown variable names.
The 'How' elements.
Once the database and test site is all completed, I like to focus on the front-end of the website first to make sure it's matching the design correctly. I usually start off by loading all of the CSS that's required (although the Base Site comes with a few already), this is generally just libraries CSS and WebFont CSS.
All CSS is loaded in this format rather than the traditional
<link> tag, as this way it will compile all of the libraries into a single file and then render it to the page.
This is better as it means the client has less items to load, which makes the site a little bit faster.
However this could be improved even further by only using the required CSS. For example, in a library like Bootstrap 4, there's a lot of "bulk" styles that are useful but may not be used. So these could be removed, to save even more data and make load time just that little bit faster. However, this isn't really necessary because it would save less than a second from the load time and if we ever did need those extra classes in the future, development time would suffer.