Tutorial on programming mentor https://programmingmentor.com/tags/tutorial/ Recent content in Tutorial on programming mentor Hugo -- gohugo.io en-us Thu, 16 Nov 2017 18:20:24 +0200 Doing ng-girls ToDoList tutorial in Angular 5 https://programmingmentor.com/post/ng-girls-to-do-angular-5/ Thu, 16 Nov 2017 18:20:24 +0200 https://programmingmentor.com/post/ng-girls-to-do-angular-5/ Doing ng-girls ToDoList tutorial in Angular 5 Description: Doing ng-girls ToDoList tutorial in Angular 5 from the very beginning to publishing on GitHub Pages (real-time screencast in 4K resolution) Links: Ng-girls website: http://ng-girls.org/ Link to tutorial: https://www.gitbook.com/book/ng-girls/todo-list-tutorial/details Source code for the project: https://github.com/programmingmentor/ng-girls-todo Published on GitHub pages: https://programmingmentor.github.io/ng-girls-todo/ Creating Angular 4 Youtube Search App https://programmingmentor.com/post/angular-youtube-search-app/ Thu, 27 Jul 2017 10:54:24 +0200 https://programmingmentor.com/post/angular-youtube-search-app/ Intro In this tutorial based on sample from ng-book2 we will create YouTube search app. Link to source code: https://github.com/programmingmentor/angular-youtube-search-app See working sample below (enter any search string to get ouput from YouTube): Prerequisites Install Node.js. Install angular-cli: npm i -g @angular/cli Generate project: ng new angular-youtube-search-app Create YouTube search service Create service component with Angular-Cli: ng g s youtube-search We will get empty service class: TypeScript 2 WorkShop https://programmingmentor.com/post/typescript-workshop/ Wed, 12 Jul 2017 10:54:24 +0200 https://programmingmentor.com/post/typescript-workshop/ Intro Welcome to the practice-first WorkShop on TypeScript programming language. For the convenience WorkShop has been split on several steps that should be completed one after another. Also each folder has files that are produced as result of completing instruction for the step. Source code and instructions for each step located on GitHub: https://github.com/programmingmentor/typescript-workshop If you want to skip some steps, use source files from previous step. List of steps Step 01 - Prepare environment. TypeScript 2 WorkShop - Step 1: Prepare environment. Create 'Hello World'. Basic configuration and debugging https://programmingmentor.com/post/typescript-workshop-01/ Wed, 12 Jul 2017 10:54:23 +0200 https://programmingmentor.com/post/typescript-workshop-01/ Intro This is practice-first introduction into TypeScript 2.4 language brought to you by programming mentor. Each step continues on files created as result of previous step. Step 01 - Prepare environment. Create ‘Hello World’. Basic configuration and debugging I. Install prerequisites 1. Install Node.js Navigate to nodejs.org, download and install latest version of Node.JS 2. Install Visual Studio Code Navigate to code.visualstudio.com, download and install latest version of Visual Studio Code TypeScript 2 WorkShop - Step 2: Basic Types and OOP https://programmingmentor.com/post/typescript-workshop-02/ Wed, 12 Jul 2017 10:54:22 +0200 https://programmingmentor.com/post/typescript-workshop-02/ I. Prepare index.html For this step we will create ToDo list application, here is the code for index.html file: index.html: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TypeScript ToDo</title> </head> <body> <h1>Ultimate ToDo List</h1> <h2>Tasks:</h2> <ul id="task-list"></ul> <h3>New task:</h3> <form> <label for="task-priority">Priority:</label> <input type="text" id="task-priority"> <label for="task-title">Title:</label> <input type="text" id="task-title"> <button id="btn-add">Add</button> </form> <script src="index.js"></script> </body> </html> II. Create index.ts Let’s create code on in index.ts to handle adding tasks to the list and showing them: TypeScript 2 WorkShop - Step 3: Using Type Definitions https://programmingmentor.com/post/typescript-workshop-03/ Wed, 12 Jul 2017 10:54:20 +0200 https://programmingmentor.com/post/typescript-workshop-03/ Let’s add jQuery to our project to see how we can use type definitions. I. Add jQuery to HTML We will use jQuery CDN to Add this line to index.html just before link to index.js: from index.html: ... <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> ... II. Refactor code Let’s refactor our code to use jQuery: index.ts: class Task { private priority: number; private title: string; constructor(priority: number, title: string) { this.priority = priority; this. TypeScript 2 WorkShop - Step 4: Creating Decorator https://programmingmentor.com/post/typescript-workshop-04/ Wed, 12 Jul 2017 10:54:19 +0200 https://programmingmentor.com/post/typescript-workshop-04/ I. Preparation At this step we will add decorators to our project From TypeScript documentation: A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration. Also please note: Decorators are an experimental feature that may change in future releases. TypeScript 2 WorkShop - Step 5: Splitting Code into Modules https://programmingmentor.com/post/typescript-workshop-05/ Wed, 12 Jul 2017 10:54:18 +0200 https://programmingmentor.com/post/typescript-workshop-05/ At this step we will continue refactoring our application, we will use TypeScript modules to organise our project and make it maintainable. One important note about terminology from official TypeScript documentation: > It’s important to note that in TypeScript 1.5, the nomenclature has changed. “Internal modules” are now “namespaces”. “External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that module X { is equivalent to the now-preferred namespace X {). Save form data to MongoDB with NodeJS https://programmingmentor.com/post/save-form-nodejs-mongodb/ Fri, 05 May 2017 10:54:24 +0200 https://programmingmentor.com/post/save-form-nodejs-mongodb/ Intro In this tutorial we will create simple form that will save user data to server implemented in Node.js with MongoDB database and allow us to see saved data on a separate page in JSON format. Prerequisites 1. Install MongoDB It depends on your environment how to install and configure MongoDB. We use Cloud9 for this tutorial, so will refer to the manual on the official website. In the bash command line we will issue the following commands: Getting started with Babel https://programmingmentor.com/post/setup-babel/ Tue, 11 Apr 2017 10:54:24 +0200 https://programmingmentor.com/post/setup-babel/ Installation Make sure latest node.js installed and npm updated. Init package.json: npm init -y Install babel: npm install --save-dev babel-cli babel-preset-env Install polyfill: npm install --save babel-polyfill Configure Create .babelrc: { "presets": ["env"] } Add entry to scripts section of package.json file: "babel": "babel src -d dist" Create html and js Create src folder for source files and dist for transpiled output. Create file src/index.js written in ES2015: const greetings = `Hello World! Getting started with Traceur https://programmingmentor.com/post/setup-traceur/ Tue, 11 Apr 2017 09:19:24 +0200 https://programmingmentor.com/post/setup-traceur/ Install Traceur Make sure you have node.js installed and npm updated. Create package.json file: npm init -y Install Traceur with the following command: npm i --save-dev traceur Configure Add traceur to scripts section of package.json: traceur --script src/index.js --out dist/index.js --outputLanguage es5 --source-maps file --source-root true Create html and js Create src folder for source files and dist for transpiled output. Create file src/index.js written in ES2015: const greetings = `Hello World! Simple responsive flexible layout tutorial https://programmingmentor.com/post/simple-flexbox-layout/ Sat, 11 Mar 2017 10:54:24 +0200 https://programmingmentor.com/post/simple-flexbox-layout/ Simple responsive flexible layout tutorial Step 01 - Prepare Create index.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple Responsive Flexbox Layout Example</title> </head> <body> </body> </html> Add to the head section following meta instruction for mobile browsers see details on MDN website: <meta name="viewport" content="width=device-width, initial-scale=1"> Step 02 - Add content Create folder img and add image files to this folder: cat-background.jpg cat1.jpg cat2.jpg cat3.jpg cat4.jpg In the file index.