front-end-interview-handbook Documentation

1. Project Overview & Quickstart (yangshun/front-end-interview-handbook) Copy Chapter

File: README.md Copy Chapter

What is this? Copy Chapter

Unlike typical software engineer job interviews, front end job interviews have less emphasis on algorithms and have more questions on intricate knowledge and expertise about the domain — HTML, CSS, JavaScript, just to name a few areas. This repository covers all you need to know for front end interviews:

• Various formats of Front end interviews including formats by different companies
• Front end system design interviews
• Front end trivia questions - answers to the h5bp Front-end Developer Interview Questions
• Front end questions - JavaScript, DOM, algorithms, and more
• Front end interview questions by companies

Where to get hands on practice? Copy Chapter

After getting a good understanding about front end interview preparation, try out GreatFrontEnd, a platform built by me! Not only are there 200+ practice questions, each with multiple solutions from Senior Front End Engineers, there are also automated test case suites to help you identify what's wrong with your code. Thus, check out the following resources:

• Study plans help you prepare for your upcoming technical interviews, whether it is in a week or 3 months later.
• Focus areas allow you to focus on your weak areas and also further improve your strengths depending on your preferences.
• Preparation by stage prepares you for each phase of your interview process, from quiz to coding interviews.
• Individual framework questions offer training based on specific frameworks that may be tested during your technical interviews.

Looking for Generic Interview Preparation? Copy Chapter

You might be interested in the Tech Interview Handbook which has helpful content on general coding interviews such as algorithms, behavioral questions and an interview cheatsheet!

Translations Copy Chapter

• English
• Chinese (Simplified) (简体中文)
• Japanese (日本語)
• Korean (한국어)
• Polish (Polski)
• Portuguese (Português)
• Russian (Русский)
• Tagalog

Related Copy Chapter

If you are interested in how data structures are implemented, check out Lago, a Data Structures and Algorithms library for JavaScript. It's meant for reference and studying purposes, not for production use.

Contributing Copy Chapter

Contributing Guide Copy Section

Read our contributing guide to learn about how you can contribute, how to propose improvements or if you are interested in translating the content.

Supporting Copy Section

Many hours of hard work have gone into this project. Your support will be very appreciated!

License Copy Chapter

All projects and packages in this repository are MIT licensed.

File: website/README.md Copy Chapter

Website

This website is built using Docusaurus 2, a modern static website generator.

Run the following commands from the repository root.

Installation Copy Section

$ vp install

Local Development Copy Section

$ vp run dev

This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.

Build Copy Section

$ vp run build

This command generates static content into the build directory and can be served using any static contents hosting service.

Deployment Copy Section

$ GIT_USER=<Your GitHub username> USE_SSH=1 vp run deploy

If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.

2. Official Technical Reference & Guides (yangshun/yangshun.github.io) Copy Chapter

File: README.md Copy Chapter

yangshuntay.com

Getting started Copy Chapter

1. Install vp globally — https://viteplus.dev
2. Install the pinned Node.js runtime with vp env install.
3. Install dependencies with vp install.
4. Start the website with vp run dev.

Visit http://yangshuntay.localhost:1355.

Common commands Copy Chapter

• vp run dev starts the Next.js app through portless.
• vp run build runs the production Next.js build for apps/website.
• vp run start starts the production server for apps/website.
• vp check runs format, lint, and type checks across the workspace.
• vp test runs the workspace test suite.

Use vp run build for the website build. vp build is Vite+'s built-in Vite build command and is not wired to this Next.js app.

File: apps/website/content/blog/2013-08-11-what-i-hope-to-learn-in-cs3216.md Copy Chapter

title: What I Hope to Learn in CS3216 slug: what-i-hope-to-learn-in-cs3216 author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-08-11 Copy Chapter

Having taken CS3217 before, I understand that CS3216 is unlike most CS modules, the learning curve is extremely steep and students are expected to turn from zero to hero in a span of few weeks. CS3217 caught me off guard; I literally spent every single day coding and learning Objective-C, severely losing sleep, hair and my sanity.

I know many CS3216 alumni and heard their experiences about the module and the hard times they have gone through. Why do people put themselves through so much suffering and hardship when there are easier alternatives around? It is because stretching myself to our limits is the fastest way to level up. We all are equal in the sense that everybody has an equal amount of a limited resource - time. Hence we have to optimize our time and spend it in a way that we enjoy and also gain the most out of. For me, I believe that coding is the right field for me where it is the sweet intersection of something I enjoy doing, can make a living out of, and am good at.

Wearing Multiple Hats

I spent a year interning at a startup in Silicon Valley doing iOS and front end web development. Ironically, many of the skills that required for me to succeed in my internship were not taught in school. We were not taught to maintain development and production environments; neither were we taught to work with coworkers from other departments. These are also skills beyond school context that are valued in the industry, hence it is important that we learn them. CS3216 is special in the sense that it accepts students from all faculties as long as they have the relevant interests. I launched Corspedia together with a friend, Weiqing Toh, in late July. Corspedia is a search engine for CORS bidding history and takes the pain out of navigating the horrendous CORS bidding archives interface. It was popular among NUS students and we had 1000+ active visitors each day. For Corspedia, I was the designer and front end developer. Both me and my partner participated in the product design were actively discussing what features to add for the next release at the end of the year. I believe an important criteria to succeed is to learn to be versatile and take up many roles. I'm here to learn to wear multiple hats and get my hands dirty on things beyond coding. I would also like to participate heavily in product design, product direction and project management.

Update 2021: Corspedia's bidding stats have been integrated into NUSMods' module page as a first-class feature.

Working With People

I'm not new to web development. It's weird but I enjoy writing HTML and Markdown syntax. I get a sense of satisfaction from seeing markup being transformed into rendered layouts and elements. It is also awesome to be able to create useful softwares that reaches the hands of people right from my personal laptop. But software is rarely the work of a single person. I enjoy working in small teams with trusted programmer friends to hack out something cool together. I used to enjoy hackathons, participating in almost every that I could while I was in Silicon Valley. I have grown to realize that my time was better spent working on longer-term side-projects, rather than small hackathon projects which would end up abandoned after the hackathon event. We are forced to work with different people for the various CS3216 assignments, and this will train me to adapt to different working styles.

Leveling Up (Fast)

Technically speaking, I'm a Year 4 in SoC but the truth is that I have only completed 5 CS modules so far. That is because I started university majoring in Mechnical Engineering but I grew to love programming after taking a compulsory introduction to programming course in my first year (CS1010E). I found myself spending more time on coding than my mechanical engineering modules. I didn't really understand what I was studying in ME and I was familiarizing myself with question patterns rather than understanding the concepts in order to clear the exams. In the end, I took a gamble and applied to switch courses after Year 2 Sem 1. My results were decent enough and I had a recommendation from Dr Ang Chuan Heng whom I worked for while serving as a Teaching Assistant for CS1020E. In the end, I could switch course and even keep my NUS Faculty Scholarship. It was too good to be true. I haven't enjoyed school so much in my life before.

But this also means that I was behind many of my peers. I have to work doubly hard in order to make up for the lost time. As warm up for CS3216, I coded this static site blogging engine using AngularJS, called Luna. I'm a front end guy, I dislike using command line interfaces and dealing with databases, hence I was fascinated by static site templating engines. I was inspired by Jekyll and Empress, which are static site engines that generate HTML pages from markdown files. Luna is more flexible to use compared to Blogger and Wordpress (mainly because I built it) as I only have to write the blog content in markdown and run a python script to generate the content in JSON. I also happen to like to customise my own sites and I quite enjoy using this so far! (:

Update 2021: I've migrated this blog to Docusaurus, which is also a static site generator built by me.

I will probably not get another chance to improve rapidly in web development in school if I don't take CS3216. So why not?

File: apps/website/content/blog/2013-08-18-what-i-want-to-build-in-cs3216.md Copy Chapter

title: What I Want to Build in CS3216 slug: what-i-want-to-build-in-cs3216 author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-08-18 Copy Chapter

"What exactly do I want to build in CS3216?". This question has been bugging me for the entire summer and I still do not have an answer to this question. Initially, I wanted to build a multiplayer game that uses WebRTC because it has been really hot after Google demonstrated prototypes of their WebRTC games during Google I/O, such as Chrome Maze, Cube Slam and Racer. Most people will shy away from building games simply because it's tough to produce the assets for the game. However, with a background in design, and because I have experience in building an iPad game Tenza Yakitori as the final project of CS3217, I felt that I could build a game for a project and it will still turn out decent. Also, I was getting bored of building CRUD (Create, Read, Update, Delete) apps; game logic was definitely more fun to code.

However, launching Corspedia in the last month made me rethink my decision of building a game in CS3216. A few friends have came to tell me that it was super useful and were glad that I solved a pain point in their bidding process. I'm not entirely sure if I will get such feedback or even be able to reach out to that many users if I built a game instead. I like the feeling of having users use a product I have built. (:

Games aren't all that tough to build. But making it fun and incorporating fun elements into it, is extremely tough. Games are there to provide entertainment, not so much to solve a pain point (unless you consider stress as one). Once a user gets bored of the game, it loses its value entirely. Also, I don't have the confidence to build an addictive and fun game especially when I get bored of the own game that I built.

Therefore, I'm looking at building something useful. It may not be fun, but will definitely improve the lives of its users. NUS Computing students have built better timetable builders, better IVLE experiences and improved many other NUS-related services. Hence, for the first assignment (and possibly the final project), my team and I shall make an attempt at improving a school-related service: A better forum.

File: apps/website/content/blog/2013-08-25-learning-how-to-learn.md Copy Chapter

title: Learning How to Learn slug: learning-how-to-learn author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-08-25 Copy Chapter

My team has decided to use Sails.js for the first assignment. It is an MVC framework for Node.js that is pretty much like rails. It's time to learn a new framework/library again! And sadly, because it's a new framework, there isn't much documentation and tutorials for me to refer to. I learn best through doing and experimenting. As the saying goes: I see and I understand, I do and I remember. Getting my hands dirty and trying things out for myself is an important phase of learning something new.

Being involved in the rapidly evolving field of technology, one has to constantly upgrade oneself. Hence I think the most important skill is to learn how to learn anything, fast and well. I'm thankful that I teamed up with a strong team for the first assignment - Soedarsono, Viet Tien and Soon Chun Mun. They are extremely fast learners and talented programmers. We actually do a lot of pair programming and meet up very often to work on our Facebook app together. I have learnt quite a bit from them and hopefully they get to learn something from me too.

Tutorials start this week and it shall be my first time tutoring a class of CS1010S freshies. Prof Ben is an inspiration to many of his students and I also strive to be an inspiration to my student and spark their interest in Computer Science. In an email thread among the CS1010S tutors, we were discussing about our teaching approaches and about the neediness of the students; they were emailing Prof Ben and asking for help in debugging. I find it amusing because I personally have not done that before and this behavior is never seen in higher level modules. The goal of CS1010S is to rewire the students' brains to think computationally. A higher level goal will be to teach the students how to learn on their own, to Google their question whenever they meet a problem instead of relying on someone for an answer. It is hard to achieve that, but extremely important.

File: apps/website/content/blog/2013-09-01-growth-hacking.md Copy Chapter

title: Growth Hacking slug: growth-hacking author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-09-01 Copy Chapter

The topic of growth hacking has always intrigued me. Coming from an engineering background, I was never exposed to the non-technical aspects of a product. Although my NOC stints allowed me to work with the marketing and business development team, I wasn't involved in the decision-making process and marketing strategies.

I was thoroughly impressed by Bjorn Lee's presentation. Anyone could tell he was an experienced growth hacker from the techniques that he shared. I especially agree with him that "Build and they will come" is a bloody damned myth. In the creation process of an app, it's also important to consider the various marketing channels and viral techniques that will be put into the app. An app without a solid plan of how it is going to market itself, is unlikely to be heard of by many after it is being built.

For my CS3216 Facebook assignment, Osmose, I'm proud to say that we already have a pool of beta testers: our students from CS1010S and in future, the NUS population. However, I'm not very confident of growth hacking Osmose to reach out to the rest of NUS. Corspedia had it easy because we had help from NUSMods, built by Beng Hee also from this class of CS3216. NUSMods is truly one of the best NUS-based projects I have seen so far - great UI and UX, it was a joy to use. Looks like we'll have to come up with good strategies before embarking on our final project, which aims to bring Osmose to a new level.

File: apps/website/content/blog/2013-09-02-facebook-ipad-application-seminar-maps.md Copy Chapter

title: Facebook/iPad Application Seminar - Maps slug: facebook-ipad-application-seminar-maps author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216, facebook] date: 2013-09-02 Copy Chapter

Ahh the Apple Maps app. What an uproar it caused when it was first released. Like many iPhone users, I don't use the Apple Maps app; I use the Google Maps app instead, simply because it syncs with the location queries that I make in my MacBook's Chrome browser. The Google Maps app has amazing user experience compared to Apple's version. Makes me wonder if Apple even tested their app with real users before putting it in every iPhone that runs iOS 6 and above.

Huge Consequences

I cannot agree more with Benjamin on this point. Utility applications are so damn important in our lives now. I can't imagine a day where Google Search, Google Docs and Google Calendar breaks down; I'll be at a total loss as I rely on them so much to navigate my day. Map apps are especially important because that is the single source of dependence that a person relies on to navigate his journey. As the saying goes, With great power, comes great responsibility. If tens of millions of users rely on a service each day, it jolly well function correctly all the time or else the disruption will affect the lives of many people. It was mentioned that inaccuracy of the maps can cause potential danger hazards. This is especially true if people trust the map app completely and follow its turn-by-turn instructions. Drivers can get over-focused on following instructions from the app and lose track of the surroundings. It would be disastrous if the map app wrongly directs the driver to turn into a street of the opposite direction! It may be far too late before the driver realizes the mistake.

Some examples of the wonderful things Apple Maps was showing when they first launched: http://theamazingios6maps.tumblr.com/

Lousy UX

How can a map app not have public transport and cycling routes? It is only in the US that most people own a car. In Asian countries, public transport and cycling is still the dominant mode of transportation. Also, the app does not provide detailed lane guidance, which shows you which lane to be in as much as a mile before your turn and gets you set up to make your turn. Having drove in California to close to a year, this feature is extremely important when I am travelling to new places because I am unfamiliar with the roads. Speed limits on the road are high and there is little time to set myself up before a turn. This issues scream a lack of usability and goes to show how much thought and user testing Apple has put into the design and development of the application... perhaps none.

Crowdsourcing Traffic Data

Crowdsourcing is the new buzzword now. It is the act of seeking contributions from the masses, usually an online community. Crowdsourcing is increasingly relevant now because almost everyone possesses a smartphone. This makes everyone connected by the internet. The power of the masses can be harnessed if everyone shares information regarding their current location. This would make an extremely updated real-time traffic situation that benefits everybody. It's a win-win situation and everybody can benefit from a small gesture of sharing a little information. However, put in the context of the application, it is dangerous to be sharing traffic information when one is driving. However, this can be solved by modifying the UI/UX so make the sharing of real-time information be safe and accurate.

Original Thoughts

Few months back, I happened to switch back to using my iPhone 4S to navigate. I was driving along the roads of Mountain View, and I found the maps app extremely hard to use; the interface looked familiar, but the gestures were unintuitive, flow of the application didn't make much sense to me too. Then it dawned upon me: I was using Apple's new Map app. It was my first time using iOS 6 on my iPhone and I forgot that the default maps app in the device was no longer by Google. Wasting no time, I went to the App Store and downloaded Google's version of the maps app and continued on my journey.

It is appalling that Apple, a guru of UI/UX, produced a Maps app of such quality; the initial version of Apple's Map app seems horrible, but it was improved tremendously in the past year, by finetuning based on user feedback and also acquisition of navigation related startups and technology. The iOS 7 redesign unveiled during WWDC this year also faced the same fate of being flamed and slammed. Perhaps Apple is adopting the Lean Startup Methodology and iteratively building products and services. But I'd expect more from Apple if they want to regain their market share of handheld devices. Apple certainly has got much more to improve on.

File: apps/website/content/blog/2013-09-09-the-calm-before-the-storm.md Copy Chapter

title: The Calm Before the Storm slug: the-calm-before-the-storm author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-09-09 Copy Chapter

Last assignment for CS3216! The past 4 weeks have been hell for me. My senior, Jonathan Low, ex-CVWO president and guest speaker for the past few batches of CS3216 and CS3217, after hearing that I'll be head tutoring CS1010S and CS3216 on top of the standard academic workload in this sem, gave me a really encouraging word of advice: "You will die man."

For the past 4 weeks I have been sleeping at 5-6 am every other day and waking up just in time before the tutorials which I have no clue about what the tutor is teaching simply because I haven't been spending time on them. Everyday was like check to-do list, do work, clear backlog, rinse, repeat.

Finally I get a breather! In this e-learning week, we're all supposed to do our own e-learning. Some professors have nicely left us with annotated versions of their lecture notes and honestly I prefer that over attending physical lectures. Always a fan of independent learning! I'm going to use this week to catch up on all other modules that I have been lagging in, and also help my CS1010S students in learning order of growth. Many of them are unable to grasp the concepts of time and space complexity and I don't blame them. 4 weeks into programming and they have to learn something most others would not learn in an introductory programming course?

I'm honestly quite worried for my CS3216 Assignment 3. Will be working with a bunch of new individuals this time round and I'm unfamiliar with their working style. Doesn't help that we're only given 3 weeks to complete it. Again, I'm the only front end person in the team but thankfully I have dabbled in mobile web development shit before and know the pitfalls to avoid. But still, it's not fun to work on mobile web related stuff. Not only does the developer have to worry about cross-browser and cross-platform issues, there's also cross-devices (different viewport size and specs) to handle?! Sounds like a load of trouble to me.

Was thinking of ideas for assignment 3 and I'm pretty sure I won't want the app to be a platform this time. Almost all assignment 1 projects were platforms, will assignment 3 be similar? Given the short span of time available, I'm not confident of pulling off a mobile web platform well. Initially wanted to do a game but since building native applications is no longer allowed, games are not too viable an option. Hence I'm thinking of creating something nimble but useful, something along the lines of a utility application.

Weather app? To-do list app? Calendar app? Perhaps a gamified twist to them. (:

File: apps/website/content/blog/2013-09-24-web-development-is-a-pita.md Copy Chapter

title: Web Development is a PITA slug: web-development-is-a-pita author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-09-24 Copy Chapter

This is a rage post because of all the frustration I faced while doing Assignment 3 and mobile web in general.

Actually, I quite enjoy web development because HTML and CSS is intuitive and extensible. But what I severely dislike about web development is the fragmentation of browsers, viewport sizes and devices! This is especially a PITA (pain in the arse) when it comes to mobile web development. There are like 3456723139738 different dimensions of mobile device screens. It's certainly not fun ensuring that your mobile site looks good on every available mobile device. Have decided to just build one that works for iPhone 4S/5/5S/5C. Apple FTW. One can go crazy if one tries to support every Android device.

Enough with the angst. Over the past few months, through my attempts at solving the various common problems I faced while doing mobile web developing, I came to realize some recommended practices that should be adopted to make the painful process less painful.

Use HTML5 Boilerplate Copy Section

So you think you know cross-browser compatibility? You won't know it better than HTML5 boilerplate, which provides a template as a starting point for any website. It tries to standardize the CSS across different browsers with Normalize.css and comes with jQuery and Modernizr. For the mobile assignment, I used HTML5 Boilerplate Mobile which is a starting template for mobile web development.

Avoid jQuery Animations, use CSS3 Transitions Copy Section

Many developers are more familiar with jQuery animations because it is easier to use (they hate touching the CSS file). However, jQuery animations are really bad performance-wise on mobile devices. A full blog post on this can be found here. The main reason for this is that CSS3 transitions are hardware accelerated.

Interactive Elements Should be Large Enough Copy Section

This is a common pitfall for developers who test their mobile site on the computer. It is not immediately obvious that the experience of navigating the site on a mobile device with your fingers is vastly different from clicking with a mouse. If your links and buttons are too small, users will have a tough time tapping on them on their mobile devices. An average user's finger size is 40px x 40px. Don't clutter up multiple small buttons together unless you want users to curse and swear because they tapped wrongly. Leave spacing between buttons if your buttons have to be small for some weird reason.

Font Awesome Copy Section

My favorite asset will be these pretty icons from Font Awesome that are actually SVGs (Scalable Vector Graphics). With this, no longer is there a need for icon spritesheets that aren't exactly flexible and retina-friendly. EVERYONE SHOULD USE THIS!

Okay, back to my Assignment 3.

File: apps/website/content/blog/2013-10-03-team-dynamics.md Copy Chapter

title: Team Dynamics slug: team-dynamics author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-10-03 Copy Chapter

Team dynamics has always been a sticky issue to deal with. One of my key goals of joining CS3216 was to learn how to work with talented people from different disciplines. I enjoy working with my Assignment 1 group (Chun Mun, Viet Tien and Soedarsono) a lot. There's nobody playing the clear role of the leader because we are all leaders in our own areas of expertise. We make important decisions together and leave each other to work on the fine details. Because of our pretty diverse skillsets, when someone faces difficulty in their work, another will be able to step in to help resolve the issue. It is awesome. (:

That said, I have had horrible experiences working in teams before too. In those cases, I usually ended up solo-ing a huge part of the project because the other members were not sure of the requirements, could not deliver the work in time, or were just plain irresponsible.

It was really unfortunate that Uncle Jim's team ended up with only one coder. But I believe that could have been prevented from the start. Being in CS3216, even though it isn't a pure software development class, software development is still the core of a product. How can a software startup survive without a development team?! If I were Uncle Jim (a non-developer), I would have went around trying to form/land myself in a team that consisted of at least 2 coders, as soon as possible, to prevent myself from ending up in such a situation where actions could not live up to the imagination.

How much control and authority would you have given to this fourth voice in our choice of platform (HTML5/native iOS)? Copy Section

If someone were nice enough to help out in somebody else's group out of goodwill and at the expense of their own free time, I think I would have absolute trust in him/her to make the best decisions for the group. Also, given the circumstances of the team, this fourth voice seems to be the most technologically knowledgeable person around in the team and he would be the most suitable to make the decisions. I'm sure he would make the best decisions for the team (since he is also indirectly involved in the process) and make life easier and better for everybody. The fourth voice is also likely to choose a platform that he is strong in. A developer should be familiar with their tools because it can speed up the development process greatly especially when time is tight.

However, I think it's only right for everyone in the team to be well-informed regarding the matter, hence I would also do my fair share of research and consult the other gurus in class to get their opinions. Most ideas aren't new. Almost every "new" idea is a rehash or combination of existing ideas. Take a look at what and how others are building/have built similar products and learn from their experiences.

With the deadline just 2 weeks away, how would you, as project manager, have resolved this problem if it were to occur within the team? Copy Section

Honestly, I'm appalled that they actually thought of testing two development tracks in parallel given the amount of manpower and time they had. Are two weeks really sufficient to reach a stage of development that can reveal the critical issues and problems with each platform?

If I were the project manager, I would definitely be cutting features of the product. Doing one thing and doing it really well, beats multiple half-baked features that don't fully work. Also, I would be keeping a lookout for tools and frameworks that the team can exploit to speed up the development process. Rapid server-side solutions such as Parse and Firebase will get the back end up and running in a matter of hours. I also wouldn't bother with styling the application because that takes up a huge load of time, will leave it looking like the default interface. Functionality > Looking pretty when there's no time.

What are some of the issues that we presented that could have happened to any team? List down 3, and talk about how you would have resolved these issues. Copy Section

1. Conflicts

This happens in every team. It is only normal to disagree, it only goes to show that the members are opinionated and are concerned with the project. However, the team should not spend too long arguing it out. Internal voting can be done as soon as possible to arrive at a general consensus so that the team can progress. Also, everyone should try to convince each other and be convinced by the decision made so that there are no hard feelings and the harmony of the group can be preserved.

We are all human. Hence sometimes we let our emotions get the better of us and we vent our frustrations at our team members. As a team, we're all in this together. People bond through shared suffering and this is just another instance of the painful process. Try to tolerate with each other and trash things out as early as possible, before misunderstandings escalate into serious conflicts.

2. Unrealistic Estimations

In the book Rework by Jason Fried, Founder of 37 Signals, he mentions that most teams have unrealistic project timelines and that most peoples' estimation sucks. We tend to be overly optimistic about our own (and possibly team members') abilities and propose a very ideal timeline for the project. This does not work out most of the time due to the unforeseen circumstances. I would suggest a milestone-based approach where the team tries to attain that milestone together and helping out any member that falls behind. A team is only as fast as their slowest member.

3. Mismatch of Skillsets

Since the team members are set in stone (kinda), the team should change what can be changed: their project focus. If there is only one coder present, then the project should probably be something less technically challenging and have a heavier emphasis on the UI/UX and content.

A very good example of a CS3216 project that isn't super technically challenging to build, but manages to impress people would be Letters to Amanda. They have a clear value proposition and handles it extremely well.

Final Words Copy Section

Now I appreciate why we were made to read Rework and Mythical Man-Month back in CS3217. In some cases, good project management skills can be more important than the technical aptitude of the developers.

Will be starting on my final project this weekend. Apprehensive but excited at the possibilities. (:

File: apps/website/content/blog/2013-10-21-mobile-assignment-reflections.md Copy Chapter

title: Mobile Assignment Reflections slug: mobile-assignment-reflections author: Yangshun Tay author_url: https://github.com/yangshun author_image_url: https://github.com/yangshun.png tags: [cs3216] date: 2013-10-21 Copy Chapter

This assignment made me worry a lot because of the little time we spent coding and testing it. I still stand by my previous rants that mobile web development is a PITA, there are simply too many nitty gritty things to consider and pitfalls to avoid when developing for mobile.

But surprisingly we did extremely well for this assignment! Far exceeding my expectations by just too much. Based on the feedback given from the teaching team, I'm glad that the decisions I made when designing (both aesthetic and product) the application turned out to be the right ones:

Choosing a Suitable CSS Framework Copy Chapter

I didn't use Bootstrap, Foundation nor jQuery Mobile (because every other team would be using it) for the HTML and CSS. Instead, I chose to use UIKit, which I chanced upon (thankfully) in a Web Designer newsletter a week before the start of Assignment 3. I chose UIKit because they had a slide-to-reveal navigation component which was prevalent in pre-iOS7 mobile apps. This helped me score quite a few points in achieving a native-like feel.

Flat Design Copy Chapter

Almost every new UI design is flat now! Not that I really like flat design, but flat design is seriously easier to implement because I can do away with drop shadows, inner shadows, etc. I also wanted to try out developing an iOS7-like app, with heavy usage of Helvetica Neue and little use of borders.

Optional to Sign Up Copy Chapter

For our app, Qivi, which is a mobile version of a classroom clicker, if every user needed to sign up before being able to use it, I'm pretty sure nobody would use it. I actually learnt this from my the startup I interned over my NOC program, EasilyDo. The EasilyDo app does not require users to sign up before allowing them to use it, because users have to see the value in it before being willing to sign up. This was a pain to implement because users had to be given a temporary identity, but it's necessary to gain some users.

AngularJS Copy Chapter

AngularJS was perfect for this app because the app has to be backed by a RESTful service. The trouble with using RESTful APIs comes when you have to handle the updating of the view after the data has been retrieved. Those without frameworks will either append raw HTML or use jQuery to manipulate the DOM. I hate mixing my HTML and JS together because it becomes an unmaintainable mess very soon.

Also, AngularJS is pretty good for making Single-Page Applications, which is extremely suitable for a mobile web app that requires caching of files. Routing is done on the client side, and the number of page loads/refreshes is reduced.

Admittedly, I used some hackish methods to get around some issues of using UIKit and AngularJS together, but kinda unavoidable because we were under schedule constraints :/

Building a Help/FAQ Page Copy Chapter

This is another tip that I picked up from the EasilyDo mobile app. If your app has a certain level of complexity, it's not realistic to expect users to learn the app on their own. This is made even harder if the interface is confusing and does not stick to the convention of mobile apps.

As Su Yuen said,

"Most average laymen users however would give up within about 5-10 seconds if they open your app/website and can't figure out what is going on. It is especially confusing if the data you have populated in the website/app upon landing on your site is data like 'Test 123'. "

Thankfully I created a sample event titled "Testing Event for Qivi" with detailed instructions in the "Help" page on how to understand and experience what Qivi does.

Keep Things Simple Copy Chapter

Given the lack of time, my team had to cut features and ultimately we reduced our feature set to the core functionality of real-time response to polls. In the pitch, I repeatedly stressed the key value proposition of Qivi and guided users in experiencing it through the "Help" page.

Focus on one thing, do it extremely well before moving on to other features.

Overall Copy Chapter

Overall, I'm extremely glad that things turned out alright and that the (coincidentally?) good UI/UX decisions made up for the lack of time in building an app that is robust against the dumbest users. I definitely learnt something valuable from this assignment and shall apply it to the final project (: