JavaScript unit testing with Jasmine

For this tutorial, we first need to install the latest version of Jasmine. We will use Jasmine 3.4 as a standalone version

Download the latest version of Jasmine from https://jasmine.github.io and unpack the file in your workspace

Alternatively, you can install Jasmine from the command line:

#Global installation
npm install -g jasmine

#Local installation:
npm install –save-dev jasmine

After installation, you have the following file structure in your workspace:

/lib
/spec
/src
SpecRunner.html

The /spec directory will host all your tests and /src will host your JavaScript code. Open SpecRunner.html to see which tests passed and which failed

In Jasmine tests are summarized to suites. A Jasmine suite consists of several tests or specifications and is included in the describe() function. The describe () function has the following signature: describe (‘name or title’, function callback ())

describe(“Test Suite”, () => {

})

Specs are tests that are implemented in the it () function. The it () function has the following signature: it (‘name or title’, function callback ())

In the next section, we will implement some of the most commonly used tests during unit testing with Jasmine. Keep in mind that tests, also known as specs, are executed in the it () function

In our first Jasmine suite, we want to test whether a function named “orderTotal” meets the following requirements:

a. If orderTotal is of type function
b. Returns the aggregate of the prices of all products in the order
c. If productDescriptions is of type function
d. All products have a string product which is not empty

SpecRunner.html

GitFlow, one of the most successful branching models

GitFlow is a workflow or set of procedural rules while working with Git.

In GitFlow there are two main branches: master branch and develop branch

All new features and fixes are done in a feature branch, except for hotfixes. A feature branch is branched off of the develop branch. When a feature is completed, it is merged back into the develop branch

Release branches are also branched off of develop. A release branch is deployed and tested and if any problems come out they are fixed in the release branch. Release branches are merged into the master branch and into the develop branch

Releases have always a version number. Release commits are tagged with the version number

You will problaly want to install GitFlow to automate the process. After installing GitFlow will be able to run additional commands (Which are a sequence of Git commands)

$ git flow init

Initializes the current directory as a git repository and creates two branches named ‘master’ and ‘develop’

$ git flow feature start new-banner

Creates a new branch named ‘feature/new-banner’ and switches to that branch

$ git flow feature finish new-banner

Switches to branch ‘develop’ and deletes the branch ‘feature/new-banner’

Upload your local project to GitLab, GitHub or Bitbucket using the command line

In this tutorial we will upload our local project to GitLab. GitHub or Bitbucket support Git as version control system as well so you can use the same commands for all three plattforms

Before we start working with Git, it is important to know that both your local folder and the remote folder have to be a Git folder. A Git folder always contains a folder named .git that contains other folders, such as hooks, info, logs, objects, refs and other files

We change our current folder to our local project and initialize the project directory as a Git folder

$ cd /path/to/repository
$ git init

Stage all files for the first commit

$git add .

Commit files

$git commit -m “First commit”

Add the url of the remote Git repository

$git remote add origin https://gitlab.com/all-projects/projectX.git

You can verify the url of the remote repository with

$git remote -v

Finally, upload all files to your GitLab remote repository

$git push origin master

Sometimes many other developers are working on the same project and have comitted changes to the same remote Git repository, in this case, Git issues a non-fast-forward error´´. The solution to that problem is just to update your local repository

$git pull origin master
#git pull is a shortcut for git fetch + git merge

and then try again

$git push origin master

Another common mistake occurs when you try to update your local project (fatal: refusing to merge unrelated histories). In this case you can use following flag –allow-unrelated-histories

$git pull origin master –allow-unrelated-histories

Remember, it is considered a bad practice to use the –force flag

$git push –force origin master

Because using –force can mess up the commit history and cause problems in the future

Setting up an NGINX web server on a windows machine

NGINX is a free and open-source server which is known to be very performant. NGINX is also very often used as load balancer and mail server with support to POP3 and IMAP protocols

NGINX vs Apache

NGINX uses by far less memory than Apache and can handle much more requests per second, however, NGINX is harder to install and configure than Apache and third party modules are hard to integrate. NGINX is also not very stable on Windows machines

In this tutorial we will installing NGINX on Windows and making some configuration to run a HTML file with an image

Download the latest version of NGINX for Windows on http://nginx.org and unzip it on the C drive of your computer (For this tutorial we be using NGINX 1.16.0)

Open a windows explorer and go to the NGINX installation directory and create two new folders /data/www and /data/images. Inside /data/www we will create a HMTL file with following content:

Now inside /data/images we will insert a new image hokkaido.jpg

In the next step we will have to configure the server to properly display our HTML file. Open the NGINX configuration file conf/nginx.conf and overwrite its contents with

Open a command line and then change to the NGINX installation directory to start the NGINX server:

C:>cd nginx

C:\nginx>start nginx

Open a browser and call http://localhost and you should see following site

My first ReactJS app from scratch

ReactJS is a JavaScript library for developing user interfaces (UIs) which efficiently update when your data changes

ReactJS apps are very performant since ReactJS uses a virtual DOM which is a JavaScript object representing the regular DOM. The virtual DOM is much faster than the regular DOM

To install ReactJS on your computer open a command line and type:

$ npm install -g create-react-app

Proceed to create a new ReactJS project:

$ create-react-app myProject

Change to the directory where you just created your new ReactJS project and type:

$ cd myProject

$ npm start

to launch the developer server and open your localhost on port 3000 i.e. (http://localhost:3000)

Today we are going to write a small ReactJS app with a + and – button to add and to substract 1 to a counter:

 

What is XSLT?

XSLT stands for Extensible Stylesheet Language Transformation and is used to convert XML documents to other formats such as XML, HTML or text, to extract individual parts of an XML document, and to create an XML document from different XML documents

XSLT uses the <xsl:template> element which has a macth attribute with a XPath expression to navigate through the XML document, for example, match=’/’ would select all elements that are direct children of the root element

Basics of XML

XML stands for Extensible Markup Language and is a hierarchically structured document consisting of nested tags that resemble HTML tags.

XML does not mean less storage space or quick access to information. However, XML lets you declare your own tags and is platform independent.

XML also enables the design of domain-specific markup language because namespaces are supported. Here is an example:

My first bundle with Webpack 4

Webpack is a open-source bundler for web assets like CSS or JavaScript files

To install Webpack you will need NPM to be installed on your computer or any similar package manager like Yarn.

Open a command line and go to the root directory of your project, then run

C:\>xampp\htdocs\webpack-project>npm install webpack –save-dev

 

Proceed to install CLI

C;\>xampp\htdocs\webpack-project>npm install –save-dev webpack-cli

 

Now create a package.json file in the root of your project directory with the following contents

package.json

Create also a webpack.config.js file in the root of your project directory with the following contents

webpack.config.js

Create a new folder named assets and a new folder named js in the assets folder with the following Javascript file

index.js

Create a HTML File which we will use later to see if everything works fine

Open a command line and go to the root directory of your project, then run:

C:\>xampp\htdocs\webpack-project>npm run build

 

Run also:

C:\>xampp\htdocs\webpack-project>npm run watch

 

for Webpack to create a new bundle everytime changes are made to the JavaScript file

Finnaly click the Click me button and an alert box should be displayed if everything is working fine

Configuring your web server with .htaccess

A .htaccess file helps you to configure your web server, such as the Apache web server.

In a .htaccess file, you can declare rewrite rules, prevent image hotlinking, handle bad http requests (404 Not Found), and so on.

You can even use htaccess for basic authentication along with a .htpassword file where you can store usernames and passwords.

The configuration in the .htaccess file affects the current directory including its subdirectories. You can override the .htaccess file in the subdirectories by simply declaring another .htaccess file

Here are some examples:

Handle a bad request (404 Not Found)

.htaccess

Use htaccess for basic authentication (Grant access only to user: gunther with password: today)

.htaccess

.htpasswd

Redirect all requests to news/url to news.php?url=url

What is Bootstrap?

Bootstrap is the most popular front-end framework for building responsive, mobile-first apps.