Author: Veronika Lesnakova

I'm a highly motivated and ambitious Web Design graduate from The Open University. My aim is to excel in all of my opportunities. At the moment, I work as a web developer. I have excellent skills in both front end (HTML/CSS, JavaScript, jQuery, Bootstrap, Foundation) and back end (PHP, MySQL, WordPress, Magento). While coding, I'm focusing on writing clean, elegant and efficient code.

Installing Gulp.js

Installing Gulp.js

Gulp.js is an open source JavaScript toolkit that is used for front-end tasks such as

  • converting SASS/LESS to CSS (browsers cannot read SASS/LESS files and therefore they have to be converted to CSS)
  • reloading browsers automatically when files are saved
  • optimising CSS,HTML, JavaScript and images
  • and many more

To use gulp.js, you have to have Node.js installed on your machine. To install Node.js, follow my tutorial.

When you have Node.js installed on your machine, install Gulp.js by typing the following command into command line and press enter

npm install gulp -g

The

 npm install

command used is a command that uses Node Package Manager (npm) to install Gulp onto your machine.

The

 -g

flag in this command tells npm to install Gulp globally onto your machine. This allows you to use the gulp command anywhere on your system.

Once you press enter, the installation will start. After installation you should see the line saying what version of gulp has been installed (in my case it is gulp 3.9.1) – Untitled.png

Don’t mind error messages asking to update version of minimatch as there is not much you can do about it. If you want to check what version of minimatch you have installed, type the following command into command line –

npm view minimatch version

If there is lower version than 3.0.2 installed, type the following command into command line –

npm install -g minimatch

Untitled.png

Now, there is appropriate version installed, so if you type this command again –

npm view minimatch version

you will get the right version of minimatch –
Untitled.png

Gulp.js is successfully installed on your computer and is ready to be used.

Install Node.js and NPM on Windows

Install Node.js and NPM on Windows

Node.js is useful javascript that makes developing websites much simpler. This means that by installing Node.js on your machine, you can quickly convert SASS to CSS, make HTML, JavaScript and graphic files smaller. By installing NPM on your machine, you can add many useful Node modules that will make your development work simpler. To find thousands of free packages to download, visit www.npmjs.com

To be able to work with Node.js, you must be type command line instructions therefore you must be comfortable with using command prompt, git shell etc.
If you are not comfortable with this, don’t worry just give it a go, everybody must start somewhere! I’ll walk you through simple installation process and if you would like to learn more, just follow my blog for more posts.

Download and install

  1. Download node.js
  2. Run the installer (the file you just downloaded)
  3. Follow the instructions (Accept the license agreement, click the NEXT button a few times and accept the default installation settings).
  4. This is the success message – Untitled.png
  5. Once it’s installed, you should get this folder structure in Start –Untitled.png
  6. After installation, you have to restart computer to be able to use Node.js

Test it!

Test Node

To check if node.js is really working, open Node.js command prompt by clicking on the icon –

Type

node -v

This should give you installed version of Node.js such as v6.11.0 in my case –

There is also message at the top of the command prompt saying ‘Your environment has been set up for using Node.js 6.11.0 (x64) and npm.’ proving that we installed everything successfully.

Test NPM

To check if NPM is installed, type

npm -v

This should give you installed version of NPM such as 3.10.10 in my case –
0

Uninstalling Node.js and NPM

To uninstall Node.js and NPM –

  1. Open the Windows Control Panel
  2. Click the “Uninstall a program” option in “Programs”
  3. Select Node.js, and click the Uninstall link.

Download and install NPM package

Visit www.npmjs.com and find the package you would like to install by typing it to search bar on the top of the website –

Once you choose package you’d like to install, follow the instructions on the page.
(I’ll be using gulp-sass-themes package)

On the page, there are instructions what to do next – type

npm install gulp-sass-themes gulp-sass --save-dev

and press enter. Installation is in the process and all you have to do is wait for the installation to finish.

Once it’s done, you don’t need to do anything as it’s all installed for you.
When installation is running, NPM creates a folder named “node_modules”, where the package will be placed. All installed packages will be placed in this folder.

The project has a folder structure like this:

C:\Users\veronika\node_modules\name-of-the-package

Setting up files with Sass

We have simple file structure that consists of css folder, images folder and index.html –

q.png

Create new folder called ‘scss’ and move style.css file from folder ‘css’ to newly created ‘scss’ folder. Rename it to ‘style.scss’.

f.png

When you open index.html in browser, css will be removed from the website. This is okay, nothing to worry about.

Focus is on ‘scss’ folder as all the sass code we will write in this folder and sass will output css for the browser into ‘css’ folder. This is because browsers cannot read sass code and sass compiler is what is needed to translate sass into plain css.

To do that, we need to set up ‘watch command’. This command will tell sass to watch commands in scss folder and automatically convert them into .css files in css folder.

  1. Open command prompt (type ‘cmd’ and press enter) and go to the right directory – 
    cd desktop

C:\Desktop\cd sass-test
  2. Once you get to the right directory, tell sass to watch the directory – 
    C:\Desktop\sass-test\sass --watch scss:css

    This tells sass to watch everything that is in scss folder and compile it to .css file in css folder.
    When everything is set up correctly, you’ll get success message looking like this – e

  3. Go to css folder and check that sass created style.css and style.css.map files where every sass code that we write in scss folder will be converted into plain .css.
    d
  4. Now, our website will have css style added to it.
  5. To test if it works properly, open scss/style.scss file and change/add css code to it, then save it.
  6. Open css/style.css and you’ll see that the code has been changed/added here.
    You can also see what file has been changed in command prompt –
    w
  7. We can tell sass to stop watching the project for changes by pressing crtl+c in command prompt

Important thing is NOT to close command prompt because it will stop watch and compiling process

Install Sass

Install Sass

Before you can start using Sass, you need to install it on your machine. I’m going to install Sass on Windows.

  1.  Install Ruby
    Ruby installer is the fastest way of getting Sass onto your Windows computer.
    Download it and follow the simple installation process.
  2. Open command prompt by typing ‘cmd’ and type 
    gem install sass

    into command prompt. Press enter and the installation begins.

  3. After Sass is installed on your computer, you can double check if it is all properly installed by typing 
    sass -v

    into command prompt.
    If everything is installed properly, this command will give you version of installed Sass –

    Sass 3.4.24 (Selective Steve)

Full example of the code

promt.png

Download and installation of Magento 1.9.3.0

Download

To download Magento 1.9.3.0 installation files, go to https://magento.com/ . In the top menu, go to Products & Solutions > Products > Community Edition. Click on ‘Download now’ button in the middle of the screen

This button takes you to different page where you click on ‘Release archive’ button. First option is to download 2x version of Magento but we don’t want that for this tutorial.

Scroll down until you can see ver 1.9x and download required version of Magento. For this tutorial, it is 1.9.3.0 version.

Select the format (.zip) and press download. If you already have an account created for magento.com website, log in with your details. Otherwise please register and continue with your download.

Once the .zip file is downloaded, extract it and you will see extracted folder above .zip file.

File structure

This is the file structure of Magento 1.9.3.0 –

Installation

Setting server up and creating database

Installation is going to take place on XAMPP local PHP development environment. So if you haven’t got it installed or not sure what it really is, please follow my link here.

Start XAMPP and go to phpMyAdmin section by clicking on ‘Admin’ next to MySQL option –

Create database and leave it empty.

Click on New button –

Type name of database and click create –

That is it. New empty database is created. Don’t do anything else here!

Moving files

Open XAMPP files by clicking on ‘Explorer’ –

This is structure of XAMPP files –

The only folder that we are working with is ‘htdocs’ as this is where all our files are stored.

Open the ‘htdocs’ folder, copy and paste full extracted Magento .zip folder here.
Now it is time to run the installation.

Running installation

Open browser of your choice (I’m going to use Chrome). As this is run on local server, URL needs to be http://127.0.0.1/NAME-OF-YOUR-FOLDER-IN-HTDOCS/ – 127.0.0.1 is address of localhost and after ‘/’ you must type name of folder that is in ‘htdocs’ to define path.

This is Welcome screen of Magento installation –

Tick that you agree with terms and conditions and then ‘Continue’ button.

Choose location, time zone and currency and press ‘Continue’ button –

Configuration window –
Host – localhost
Database name – type name of your created database
Username – root (default username for database as we work with XAMPP)
User Password – leave blank (there is no password for databases in XAMPP)
Table Prefix – leave blank

Once you complete all these details, there are more details to fill in bellow –
Base URL address type – http://127.0.0.1/NAME-OF-YOUR-FOLDER-IN-HTDOCS/
Admin path – admin
Tick Enable Charts and press ‘Continue’ button.

After clicking on ‘Continue’ button, Magento is adding tables into your database therefore this step is going to take awhile but don’t panic, wait until it is all done and next screen is visible – DO NOT PRESS ANYTHING! (if you do, it will mess with the installation!)

Next step is to create admin account so fill in all details and make sure to make note of them for the future. Leave ‘Encryption Key’ blank and press ‘Continue’ –

That is it, Magento is installed and ready to be used. Make a copy of encryption password that is generated and go either to frontend or backend of your newly installed Magento 1.9.3.0 –

 

 

New website – check it out!

Check out my portfolio website –http://www.veronikalesnakova.co.uk/

If you like what you see and you have a project in mind then I’m happy to hear from you.

Evaluation

The full project has been challenging and a lot of learning has been done throughout the process. Even thought this project is concept only, a lot of time was spent on technical side in order to find out if this project is doable. WordPress is powerful tool that proven that it would be a good framework to use for customisated dashboard after users are logged in. Using WordPress for this purposes was never done before therefore this process of researching how to create back end for the project has been challenging and a lot of learning took place. Another side of the project was to find out what front end framework would be suitable for project of this size and Foundation was chosen. It is totally different framework comparing to other frameworks that I am familiar with as there are different rules in file structure and also how layout is structured. What was useful in the project is that both frameworks have a large community of practice in which membership had to take a place in order to find out solutions to occurred problems during the process.

Also community of practice was used in research stage where survey was done about what users think about functionality of forums and what changes they would make to make forums more user friendly. There were a lot of good suggestions and nearly all of them were implemented into the design. This was quite difficult to do as suggestions had to be embedded into the design but also they could not influence usability of the website and the design had to be visually appealing to users. Visual imagery was used as research showed that users are more likely to remember things by seeing rather than reading. This was done by adding hero images to the design as this is one of the designing trends at the moment.
There were a lot of planning and research put into usability and design.

Registration form was done through visual imagery and was focused more on users clicking on provided choices rather than users having to type information in. This was decided to do after doing research about designing principles of a good design where was found out that if any task on the web has a high cost of energy, users are unlikely to complete the task unless the reward for it is also high. Also Hick’s law says that the more options users have, the longer it takes to make a decision and that is why booking form was kept simple and straight to the point.

Also providing users with two choices of entering the site – enter as a guest/enter as a member, has marketing strategy as the user entering site as a member can access only limited information and to gain access to more information, registration is needed.

Looking back at proposal that was written in the beginning of the project, there is only one thing that changed during the process which is title of the social community from ‘World of Reptiles’ to ‘Vivarium’.
Everything else in the proposal has been fulfilled.

User testing was done throughout the full project mostly at university ground. This helped to create design that would be usable for anyone as all suggestions of potential users were considered and implemented into the design. The last user testing proved that this project was a success in every way as all users doing user testing were happy with the final product.