Nodejs

Website design before and after university

As a designer, I am still learning a great deal, I have played with Cinema 4D for 3D graphics, After Effects for motion graphics, Premiere Pro for video and a whole host of various software for vector and bitmap images trying to find the one place where I can specialise, I loved them all. I tried the different disciplines of theoretical design, like User Experience (UX) and User Interface (UI) design as well as trying to learn things I consider useful for design like Neuropsychology, History and Politics, all really interesting subjects, but I eventually found something I am starting to love, and it’s not what you might think.

I have a passion for design, this is probably why I find it so difficult to concentrate on just one area to really hone those skills, to target a discipline and stick to it is very difficult for me as I seem to love everything I do, I want to learn so much that I simply cannot pin one thing down for a long time without feeling the need to explore more, I find that when I am learning something, someone mentions a piece of software or a theory that catches my attention, and then off I go to explore a new area and although I do go back to the area I was learning, it takes me a few weeks usually. I might, for example, spend 3 weeks messing about with Cinema 4d and really be enjoying myself, I might be on the lookout on a new technique and come across a useful tutorial in which they mention a way to integrate my 3d project into a website, my initial reaction is ‘wow, that sounds cool’ and off I go, distracted for several weeks to learn this technique.

Get in Control
There is only one thing that is able to control this lack of dedication, and that is when we are working on a client’s website but even then I can sometimes be distracted by all the new brilliant techniques I could bring to a client project, I need to be constantly reminded that we have a deadline that must be met, this is always enough to make sure I stick to what we have planned out rather than exploring different possibilities, there is a time for that and the time is at the very beginning of a project, the last thing I should be doing is clouding a project with multiple untested and unchecked techniques that could potentially make us miss a deadline and make the client unhappy. 

Finally A Direction
Recently I have been doing a course on Udemy, I decided to try my hand at development, as although I have been coding HTML and CSS for over 10 years, I never learnt one other useful language, JavaScript. Prior to going to university to get my degree in Web and Graphic Design the web was a lot more simple than it is now, you could create a website with HTML, CSS and a Content Management System, JavaScript was not something that was important, it was useful because it allowed you to do things like pop-ups and simple hover effects, concertinas, website menus etc but was advised against due to the fact a lot of people at the time would turn JavaScript on their browsers off so if you had a website menu which relied on JavaScript, the menu would not work and the user could not navigate the website, the alternative was to use CSS, which was harder to implement for something like that but much safer, at the time the only reason I could see that I would need JavaScript was if I wanted to create something like a pop-up, which I never had use for.

After my university studies, web development was a completely different world, I expected quite ignorantly that I could come out after ignoring development for 3 years, have a little development catch up time and carry on. I could not be more wrong, everything had changed it was almost like a different world, when I started university the idea of media queries in CSS to make your website responsive was just starting to make an impact in web, the only layout grid available from what I was aware of was 960 grid but now there was a whole new area that had developed in just 3 years, that was JavaScript.

The First Thing I Learned
Immediately after university, I was unaware that anything had moved on so when it came to designing my first post-university website it was not as easy as it used to be, I had assumed that other than the different browsers, devices and screen sizes we had to now cater for with media queries that everything else was the same, but even that bought some unforeseen issues. As I went on through the development of this website I was finding constant cross-browser and media query issues, it was a nightmare having to add prefixes for some of the newest CSS animation features and then make sure it was all working correctly across different browsers, I had to find a solution to speed the process of development up, it was taking too long.

After hunting around I found something very useful, a new language called SASS (Syntactically Awesome Style Sheets), very simple to grasp in concept since it was basically CSS with a few extra features to make things simpler and cleaner to code, but there was a problem, the engine that compiled the code needed to be installed onto my computer and in order to do that, other software needed to be installed prior to installing that… This might take some time…

First steps into npm (Node Package Manager)
Although I had no idea why at the time, it said I needed to install NPM (node package manager) a JavaScript runtime environment for Node JS, something I had no clue about even at this time. After installing that I installed Homebrew, a software package management system, finally, I installed SASS using the command ‘npm install -g sass’ inside my terminal. Wait, where is it? I could not find it, is it working, how can I make it work on my website? YouTube, my go-to place to learn new snippets of information was my next stop. In the tutorial, it told me I must go into the folder using the cd (whatever) command in terminal and then install SASS, so I did it.

Ok, that was cool, a new folder and several new files appeared in my folder, I took a peek inside the new folder and there were at least 20 new folders inside that, so I just decided to get started, I made sure SASS was working as they had shown me on the tutorial and got to work. When I had finished the website (in a much better time) I was curious about NPM and how it installed SASS and made it available to be so easy, I wondered what else it could do so back to YouTube. I found that it was a package manager, it basically downloads prewritten scripts that I can use to develop my own website to save time or add features etc and that there was a website that had a list of the files NPM could use, so I had a look and found Autoprefixer, software that automatically prefixes cross-browser events like animations so my animations would work in all browsers without issue. I installed Autoprefixer and realised that every time I made a change I had to refresh my browser window, so NPM again and I found a browser refresh.

The next step
After some time of playing with NPM I decided to explore more, I wanted to know what else I could do but I was also conscious that I needed to keep up with design trends too, so I held off NPM and went back to playing with design for a few months. When I returned to development I decided I wanted to know more so I signed myself up to Udemy, an online learning platform where people submit tutorials that they charge for, I found a course called The Web Developer Bootcamp by a great instructor called Colt Steele, it started at the very basics with HTML and CSS, leads into bootstrap, JavaScript, jQuery and then into NPM software like Express and Nodejs with little nuggets of gold well covered like API’s, it was well worth the money paid. I am more than halfway through this 46.5-hour course and so far I have really retained Javascript, jQuery, Express and even some of the API information, I still have a long way to go before I am confident to put these skills on a client’s website but what I can now do with it is astounding compared to when I started building websites and the best thing about it is that I can keep up with design whilst learning more about development, I shall continue to log what I have learned and how I did it from here onwards so keep your eyes open.