Frontend

Let's code: CRUD in Angular with unit tests

Introduction CRUD application we are going to implement will have some additional complexity you might expect: import/export data save/load chunks data lazy data processing pagination tests This project’s source code is in github - https://github.com/benetis/angular-advanced-crud p.s some of code parts are not in sync going down - so I advise to also fork github repo and check code yourself Requirements & Task itself Aside of the stuff we mentioned above - we obviously will be implementing CRUD operations.
Read more

Let's code: Authentication in Angular #2 : Auth service

Introduction This is part two of Authentication in Angular series. This one is about building authentication part to handle OAuth calls for us. You can find first post here: https://benetis.me/posts/angular-authentication/ We will be using redux with our angular project to help us handle side effects. https://github.com/ngrx/store Our setup - angular-cli 1.0 + Angular4 (Angular 4.1) Aims After user clicks login - we need to call OAuth endpoint to get access and refresh tokens which we will store in local storage Show errors for user We want to store tokens in our redux store so they are easily accessible and can be added as headers to our api requests Login Ah, the login.
Read more

Let's code: Authentication in Angular #1 - creating login form

Introduction Login form - a gate though which user logs into application. If it is working well - you don’t notice it - if it is bad - it will always annoy you. Of course it is not only UX/UI problem - there are security implications on server side also. But we will keep these concerns beyond this post scope. We will have few blog posts on authenticating Angular application.
Read more

Creating shopping cart with product list in Angular2

Introduction A common scenario - you want a product list with “Add to cart” functionality. Angular can do that - let’s see how effective it is. You can find code in this repository - github Goal 1. Product list with images, color filter, names and currency. We want to create something similar that H&M has. 2. Details of item 3. Shopping cart view To view the details and remove items from it.
Read more

HTML5 Canvas. Fundamentals

Introduction Today I met HTML5 Canvas. Not in real world - but during one the exercises from Javascript30. What are those “canvas”? Basics Canvas is a HTML element used to draw graphics on fly via Javascript - [0]. Main idea is that you have this rectangle box on the page without any content and you use javascript to draw stuff on it. You do drawing by interacting with context object not the actual canvas object.
Read more