Category Archives: CS3216

Posts related to CS3216

CS3216 module review

CS3216 Module Review 16/17 Sem1

This is THE module in SoC. No other modules have caused so much hype and discussions like CS3216. So here it goes, my long-overdue CS3216 module review.

Overview

The module consists of 4 different projects. Three of them involves developing some kind of application. The other one is seminar presentation and mutual critique of an existing application on the market. Grading is 100% continuous assessment, based on projects and participation through blogging. The workload is extremely heavy so you will probably have very little time to spend on other modules. There are no formal lectures, almost all lectures are guest lectures. They cover a diverse range of topics from idea validation, growth hacking to security practices and database scaling. Continue reading →

A*genda in Angular 2

Developing A*genda in Angular 2

For the final project of CS3216, our team decided to develop a web app A*genda that helps event organizers to build web-based agenda for their events.

A*genda - screenshot of PyCon SG 2016 agenda for event participants

A*genda – screenshot of PyCon SG 2016 public agenda, used by event participants

A*genda - screenshot of agenda builder interface, used by event organizers to create event agenda

A*genda – screenshot of agenda builder interface, used by event organizers to create event agenda

This was an unfortunate timing (October 2016) for our team since Angular 2 just came out of beta, and Angular 1 is going to be the “legacy” framework soon. As a team that has no experience with other frameworks like React.js or vue.js, we were stuck between Angular 1 and Angular 2, and the final decision was latter. Continue reading →

setup Font Awesome in Angular 2 with webpack

Font Awesome in Angular 2 with webpack Setup Guide

This is a guide for setting up Font Awesome in Angular 2 with webpack.

Although this guide is written at the time of Angular 2, it should also work for Angular 4 and future versions of Angular, according to the official Angular branding guideline.

Font Awesome is a hugely popular package for icons. Back in the days, you could just include css and font files in index.html. However, with so many new technologies, it has become increasing hard to integrate 3rd party library into our web app project.

Of course we can still use a CDN to serve static resources, but that’s not helpful when we need to test locally. It also adds external dependency which we have no control over. Hence, we need an idiomatic way to use Font Awesome in Angular 2 with webpack. Continue reading →

Angular 2 Drag-And-Drop Grid System

Building Angular 2 Drag-And-Drop Grid System

When building web applications, sooner or later, you will need to build either a drag-and-drop feature to allow intuitive interactions or a grid system UI to allow arbitrary positioning of elements in the layout. There are libraries for either of them in Angular 2, but there are no libraries for Angular 2 Drag-And-Drop Grid System as a whole.

Although this post is written at the time of Angular 2, it is also applicable for Angular 4 and future versions of Angular, according to the official Angular branding guideline.

This is where this blog post comes in as I will talk about how to implement such a system. Continue reading →