Created a Microsoft Edge Extension for internal quality and development purposes in an agile environment. As a member of the Core Quality team for Microsoft’s Web Platform Team (WPT), I designed, developed, and measured an internal bug tracking Extension for Microsoft Edge that focused on exceling the efficiency and excellence of our team. Worked in HTML, CSS, JS, and various internal Microsoft Web APIs to create the frontend. As an explorer, my roles within the 12 weeks of my internship rotated between program manager and software developer.
• Researched relavent technologies and services to better understand the project
• Created mock-ups of our extension, presented to manager and mentors for feedback
• Reached out to internal members of WPT to gain insights on features
• Designed implementation approach and specs for development phase
Initial mock-up designs:
• Created a Microsoft Edge Extension using HTML, CSS, and JS
• Worked with API endpoints to query data for websites
• Aligned UI and design with WPT styles and conventions
• Worked with various JS libraries and including DataTables and Highcharts
• Kept track of deliverables, tasks, and bugs in Visual Studio Online
SOFTWARE DEVELOPER IN QUALITY
• Implemented telemetry measures with Visual Studio Application Insights
• Tracked page views, events, exceptions, and metrics of our product
• Monitored uses of the extension after shipping within WPT
• Gained statistical insights to product’s performance and iterated the extension based on these
• Defined quality measures to track progress of the extension in Visual Studio Online
CMU’s Robotics Quadrotor Club focuses on spreading education and research for quadcopters.
I joined the organization fall semester of my freshman year and have since become involved with
assisting a STUCO (Student Taught Course), co-leading a project subdivision of the organization,
and teaching high school students on a weekly basis about quadcopters.
Timeline of involvement with Quadrotor Club
At CMU, students are often allowed to teach courses to other students in what is known as a STUCO. Our goal for this STUCO was to spread awareness and understanding of the technologies behind Quadrotors, even if one had no technical background.
• Taught a class of 17 students varying from college freshmen to masters students
• Designed and developed curriculum for students
• Explained the various hardware components that went into a quadrotor
• Explained the physics and electrical engineering behind quadrotors
• Taught students how to use CAD software to design body frames
• Used technologies such as 3D printing and laser cutting to materialize CAD designs
Screenshot of CAD frame design
Student finalizing shape of laser cut frame
QUAD ACADEMY & BATTERY AUTOMATION GROUP
After the STUCO, our sizeable club decided to split into two separate branches in order to cover different research and development fields. Quad Academy was formed, as well as an autonomous battery recharging station group. The autonomous battery recharging group is currently focusing on developing a station where LiPo batteries can safely and effectively be swapped out for a new pair. I, along with a 5th year mechanical engineer (Kevin Apolo), pursued Quad Academy.
Quad Academy aims to help spread educational quadrotor kits to high schools around the Pittsburgh area. These kits would help students learn basic programming, promote hobbyism, and introduce concepts of hardware and electrical work.
Our lego quadrotor designed to be modular for accessible and development purposes
The first initiative of Quad Academy was to get involved with high school students directly to test out a prototype kit and tutorial course. We were looking to see how engaged this subject was for the students, how the pricing of certain hardware components played out, and how to effectively structure the course’s curriculum. We decided to join a new student organization, Project Ignite (PI), focused on exciting high school students in projects and hobbyism.
• Designed and developed our quadcopter kit, as well as our academic curriculum
• Taught 6 students from local Pittsburgh high schools for four hours each week—for ten weeks
• Covered basics of what a quadrotor was (how it’s made, what parts are needed, what does each part do?, etc.)
• Covered physics behind quadcopters (roll, pitch, yaw, sinusoidal waves, etc.)
• Introduced programming in Python, Arduinos, and Raspberry Pi’s to students
• Taught students how to solder and how basic electrical engineering worked
• Taught students how to callibrate their flight controllers, tune/trim controllers, and fly their quadcopters
Video of our successful flying
Various pictures of our high school students working
Worked as a web developer for the fall semester and a research assistant for the spring semester under Carnegie Mellon University’s Human Computer Interaction Institute. In particular, I attended weekly SCRUM meetings for our lab—Protolab, discussed and critiqued ongoing projects, and learned aspects of design/UI/UX from various other peers and faculty.
I predominantly worked on a peer feedback system project, known as PeerPresents. This involved fixing bugs, improving the UI & UX, and designing and implementing an A/B test to deploy to classroom trials. Worked in HTML, CSS, JS (Node.js: Express.js & Jade Templating, Sockets.IO), and MongoDB. As a research assistant for PeerPresents, I digitized user data, assisted in the data coding process, and helped analyze a classroom case study.
PeerPresents is an online peer feedback system to improve the feedback process for in-class presentations. This project is an ongoing research project under Carnegie Mellon’s Human Computer Interaction Institute that aims to find the most effective feedback tool for students to utilize in classroom settings. The actual web application is implemented in Node.JS (Jade template and Express framework), Socket.IO, and MongoDB.
I joined the research lab (Protolab) in Fall 2015 as a web developer. The majority of the code base was already implemented from the summer, so I mostly joined to help debug and implement new changes to the system. I worked closely with another undergraduate student who served as the team’s designer, a PhD student who served as a developer, and our PhD lead over the course of the Fall semester. Our team improved the UI/UX of the overall system, fixed remaining bugs from the summer, and then implemented an A/B test that was deployed for testing towards the end of the semester.
Our team’s designer came up with a new logo, button design and placement, color scheme, etc. For the first few weeks of being a web developer for this team, I was heavily involved with frontend work in order to make PeerPresents more presentable to our users. We needed to be able to deploy our system to classrooms and therefore wanted to focus on improvements of the UI.
• Provided feedback for the reworking of a new UI during weekly SCRUM sessions and team meetings
• Implemented frontend of new interface and design
• Changed application to be more mobile and tablet friendly
• Fixed layout issues throughout the system
Implementing A/B test:
Towards the latter part of the semester, our team wanted to test new features to further the study of optimizing our tool. Brainstorming for this new topic was a process that took a few weeks, but in the end, we decided to test the impact of the tool’s interface on the user’s actions. In particular, we wanted to know whether a split version of an interface versus a combined version of an interface led to people commenting / voting more. For our system, people can comment their own thoughts. In addition, they can look at other feedback given from their peers and vote on those feedback. We decided to implement an AB-test where version A supported a split interface and version B supported a combined view. We hypothesized that the split display would lead to more commenting and less voting since switching between the tabs may be a deterring factor, and that the combined display would lead to less and more conservative commenting from users, yet more votes for other comments.
Our team brainstormed the design of the whole test and the interface of the new system in the first few weeks. Afterwards, it was a matter of implementing the two versions in our existing code-base. We randomly assigned the students to either group A or group B. Their account names were tracked in our database in order to figure out the switching of the groups. So for the first 2 weeks students in group A witnessed a split view of the interface, while the rest of the students spent it in group B with the combined views. After 2 weeks, we simply switched the students to the opposite group.
• Brainstormed designs for the A/B test (infrastructure, interface, experience, etc.)
• Participated in team discussions involving the research aspects of the test
• Implemented the backend and frontend of the new system
• Deployed the test to a classroom over the course of two weeks (fixed bugs along the way)
Version A (Split view):
Version B (Combined view):
Our web application needed to be fully functional for our classroom deployments. We planned to deploy to a particular class and have them use PeerPresents versus handwritten notecards for feedback. This process of deploying meant that we had to focus on any bugs present in our system.
• Fixed bugs involving UX (providing feedback for actions done by users, adjusting platform for mobile, etc.)
• Participated in bug crawls/bashes with the team in order to "break" our system
• Tested for traffic intensity and stability of PeerPresents
• Fixed issues involving our server crashing
In spring of 2016, my role in Peer Presents involved less development, and more analysis of our datasets. After deploying to two classrooms in the fall semester, our team gathered over 6000 real-time feedback comments from actual students in a classroom setting. I digitized a lot of the non-PeerPresents feedback comments that were provided by students on notecards. This step was rather long and tedious, but after a lot of the data was sorted and imported into excel sheets, our analysis of the actual data started kicking in.
I, along with our PhD lead and our other PhD developer, worked on coding the feedback comments that we received. This "coding" meant categorizing each comment by a student into respective labels. These labels help provide more context to whether or not PeerPresents is a more/less effective system for feedback commenting. Although I fixed bugs here and there, the majority of my work in the second semester involved reading notecards and excel sheets to try and clean the process of analyzing the data.
• Coded datasets in order to validate the consensus of our results
• Discussed the implications of our data in a team setting every week
• Digitized large datasets of feedback comments in order to better analyze our results
• Organized datasets in meaningful ways using Microsoft Excel in order to visualize our findings
SPIRAL is an on-going project under Carnegie Mellon University’s Electrical and Computer Engineering Department. The project focuses on addressing automated processes that create software and hardware that optimize digital signal processing algorithms. I joined a team of 3 others to help contribute to the understanding of power consumption in CPUs based on various parameters (clock frequencies, temperature, etc.).
• Performed power consumption measurements to map out relationships between power and clock frequencies in CPUs
• Worked with the Raspberry Pi to conduct measurements on its components
• Automated voltage and temperature measurements by writing a Python script
• Recorded and noted the trends in the various parts of the Pi by running matrix multiplication calculations using BLIS software
• Met weekly with researchers to discuss implications of our measurement findings
• Presented findings to broader SPIRAL team
Multimeter measurements conducted on various desktops, as well as a Raspberry Pi
Various pictures of our research stations
Graphs of our measurement findings
The Young Scholars Program is a 6 week high school program that focuses on STEM related fields. The program consists of 20 males and 20 females from around Florida. Students take courses in programming, mathematics, and the sciences; and are individually required to conduct an independent research project alongside a Florida State University research professor.
• Researched with Dr. Kun Yang on the subject of quantum entanglement and its effects on the advancement of modern technology.
• Researched in the National High Magnetic Field Laboratory in Tallahassee, FL
• Presented research findings in poster session for staff members of Florida State University
• Authored a research paper on findings
RESEARCH PAPER DOWNLOAD
Wiki-Gen is a Wikipedia Page Generator. A topic is searched
on the webpage, and based on the search results, sentences
are formed using Markov Chains and a database of
parsed words from Wikipedia pages. The end result is a webpage that contains text that is randomly generated based on the language of Wikipedia. See the Github page to follow our process.
• Designed the UI & UX of Wiki-Gen
• Discussed with project partner the design of the system and infrastructure
• Communicated and collaborated with project partner remotely (I was in Florida while he was in Minnesota at the time)
• Implemented the frontend design
• Learned and used git for version control
• Worked with Flask, SQLite, and Python 2.7
SO, WHAT EXACTLY DID WE DO HERE?
We (as in Kevin and I) decided to make use of the last half of our summer. Kevin proposed the idea of working on an interesting project to me sometime, and I was quite eager to work on anything web related (I had just spent the summer learning about the basics of HTML & CSS & JS).
Kevin’s contributions were mostly backend, while I helped with the frontend. We were able to download approximately 8 GBs of Wikipedia text data, and preprocess the information by parsing the collected text into a four-gram table using a combination of Python 2.7, as well as SQLite (sqlite3). Therefore, at the end of the preprocessing, we held an 8 GB database of words in Wikipedia and their statistically probable follow-up words.
Afterwards, it was a matter of setting up a way to query the results when an input was given, and setting up the web application to host this service on. We used Flask as our web framework to easily interface with Python. Eventually, we created an interface that was direct in its features, as well as elegantly flat.
Design stage of Wiki-Gen
Home page of Wiki-Gen
Samples of generated Wiki-Gen articles
Wiki-Gen menu bar
WHERE ARE WE NOW?
Unfortunately, this project is still on-going. But when I say on-going, I simply mean it’s on hold. Kevin and I never fully finished the project, and although it can fully function and output a generated Wikipedia article, it can always be better. A big factor of not finishing is that our query process needs to improve. As of right now, some phrases simply won’t generate any text due to the fact that our database doesn’t know what to do with the data. So you can’t exactly just type anything you wanted and get a result at the end. You may have to prompt the data to flow some more, or you may have to simply search for something more common. A part of this may be the fact that we have a small database (compared to the whole Wikipedia DB), but another part could simply be us not being creative enough to query results. We’re working on making this experience very simple and functional for users, and that is why this project is still marked as a "present" project.
Model Our World was a project that aimed to promote interests combining big data, earth sciences, modeling (including machine learning), and cloud services. Our group created a web application as part of Microsoft’s global hackathon event //OneWeek. The project focuses on taking various large public datasets related to earth sciences (i.e. ocean temperatures, surface temperatures, precipitation, etc.) and providing an interface for users to interact with to display various data models. The majority of the technologies used for the project were Microsoft related (Bing Maps, Azure ML, Azure Web Services, Azure Blob Storage, SQL Azure, C#, etc.)
• Deployed web application to Azure services
• Participated in the planning and implementation of the system’s architecture
• Worked closely on a team of six consisting of various full time employees and interns to plan and execute the project
The week before //OneWeek was largely spent planning and discussing ideas related to our project. We needed to prepare beforehand in order to start uploading large datasets into Azure Cloud Services. Once we decided on a set of variables we wanted to measure over time, we uploaded large packets of data into Azure Blob Storage. The days before the hackathon started were spent interpreting those blobs and parsing them into more usable formats. Once they were ready, we put them into Azure SQL Tables.
A large part of this project was creating a RESTful service that could be reused by programmers and scientists easily. We spent a large amount of time developing this API to be adaptable and easy to use so that it can be recycled for years to come. The service was developed in C# and acts as a middleman between our backend servers and the frontend displays.
Another part that was focused on was an attempt to provide a model for our users using machine learning. Because we had such large datasets, we planned to utilize Microsoft technologies to produce a model that would map out possible outcomes of our Earth Model. We dived into published research papers and Azure ML in order to better understand the model to create, but weren’t able to complete this step by the end of the hackathon.
Once the hackathon started, our work divided into working on backend, REST API, frontend, and modeling
Example of Model Our World displaying surface temperatures
Example of Model Our World displaying ocean temperatures
Began by learning basics of web development and design the summer before my sophomore year. Practiced these concepts by creating an informal personal website. Worked and improved on this website over time. The summer before my junior year, I refactored the website to
a more professional/official style. This portfolio will continuously be modified as time progresses.
• Designing UI/UX of website using Microsoft OneNote and Adobe Illustrator
• Developing websites using HTML, CSS, and JS
• Learned basics of web developement, and continuously learning more to grow and adapt website
• Built a more professional and thorough understanding of my experiences and projects
• Continuously researching portfolios of designers to learn from their methods and techniques
A large part of creating this personal website was simply knowing what to build. My first website was built to focus on visual appeal. I would scan various designs made by companies, designers, and students in order to find inspiration. Once a good amount of ideas were in place, I would jot down these designs on paper or on OneNote. When it came time to building the actual website, I would change to Illustrator to gather a more detailed mock-up using images and texts that were going to be used.
Wireframe of interests (Things I Find Swell) page
Interests (Things I Find Swell) page
The idea of this website was to be as informal, yet personal, as I could be. I didn’t plan for the website to focus on presenting myself in a professional setting. Instead, the main goal was to simply focus on familiarizing myself with HTML, CSS, and JS.
About page’s description (notice the copious amounts of puns made)
The website was structured in a way that divided the sections (about, projects, experiences, etc.) into separate pages. There was a central "home page" that allowed for the user to go to any one of these pages. From there, you can visit any other section by clicking the menu hamburger to bring up a hidden menu. This menu contained links to the other pages, as well as links to external websites (i.e. Github, LinkedIn, etc.) and contact information.
Interests (Things I Find Swell) page
What you see right now for daniellehu.com is considered version two. It is my second iteration of design and content. The new version focuses more on presenting information to the user in a straightforward and concise manner, intending to help facilitate any exchange of information about me professionally. This initiative was brought up after spending a summer learning about the role of a program manager (at Microsoft). I found more importance in building a product for my users, which would most likely be recruiters from companies.
• Put various sections of website into one unified page (provides a less discontinuous experience)
• Fixed language of experiences and projects to provide more details of my work
• Got rid of the menu hamburger after reading this article
• Designed and implemented new interface and experience for website
• Added new images/videos to experiences and projects
Sample icon designs for project card images
Designing the card interaction and logic
Ideally, in the future, developments in design, UI, and UX will continue to improve. Another intended change would be the shift of this static portfolio into a dynamic one, built with an actual web framework. As of right now, this website is hosted through Github Pages, meaning the deployment of the website needed to be in a straightforward, static format. However, until I am able to host this website on my own server, the contents of this portfolio will remain static.
Philly Home Finder helps users find suitable neighborhoods that match their preferences in the city of Philadelphia. For Pennapps Fall 2015, our group created a web application that allows users to set certain parameters based on what they would like to see in their neighborhood (i.e. better education, parks, etc.). The application then takes those parameters and synthesizes them with data from a large collection of civil data for Philadelphia. The application would then map and color code suitable neighborhoods (based on zip-codes) for an easy user experience. We used Flask to develop the framework, as well as Microsoft Azure’s DocumentDB for creating the database. Towards the end we also messed around with Google Maps API in order to display color-coded zipcodes around Philadelphia. Check out our source code here.
• Designed and implemented UI and UX of web application
• Built the backend using Python Flask
• Worked on database querying with Microsoft Azure’s DocumentDB
• Created a dynamic interface using Google Maps API
• Presented ideas and project at the hackathon project fair to various judges and hackers
Home page of Philly Home Finder
Settings / parameters page of Philly Home Finder
Result page displaying preferences of neighborhoods based on zipcodes
Unfortunately, this project was made for a 36-hour hackathon. What this means is that our documentation and the overall sustainability for this project isn’t very high. We turned to resources that were temporarily free (i.e. Microsoft Azure) in order to deploy our solution, but that means that after about a week/month, our resources ran out of their "free trial" statuses, and we’re now left with not-so-free and not-so-working projects. If you wanted to try and build the solution with Microsoft VS yourself, it’d actually throw an error due to the inactive state of our DB. So a demo of our project is a bit difficult to get to, but if you do REALLY want to see it, please just shoot me an email and I can figure out some of the details to fixing up a demo.
"Snaps vs Humanity" combines the popular social application, Snapchat, and the popular card game, Cards Against Humanity. For CMU’s TartanHacks 2015, our team built a platform for this mobile game to be easily played by anyone who had access to Snapchat. The backend was built with Python Flask. The game functioned through the use of a third-party Snapchat API and Open CV.
• Worked with a third-party Snapchat API (in Python) in order to interact with Snapchat’s servers and content
• Used Python’s OpenCV in order to read responses sent by users and delegate the appropriate responses
• Set up the front end portions of the web application, as well as the displays sent to users for the game using Adobe Photoshop
• Programmed web server using Flask, HTML, CSS, and Python
• Collaborated in a team setting by communicating ideas and executing discussed plans
• Presented our project to judges and fellow hackers at the hackathon project fair
HOW IT WORKS
The game largely consisted of interacting between our web server and Snapchat’s server using a third-party Snapchat API. This API allowed us to connect to an account, send snaps, receive snaps, and therefore also transfer snaps (by saving snaps and sending them to respective parties). We had a central account that sent invites to people’s accounts, waited for responses from every account, and used computer vision to analyze the snaps sent by users. OpenCV was used to analyze whether or not a user replied with an acceptance of the game ("##CONFIRM"). Once all players have accepted, our server randomly selects a player from the list to be the judge. The judge receives a snapchat from our central account that tells it to relax until further instructions, while all other players receive a snap of a black card (prompt card). The users who received prompt cards are then to snap back a response to our central account. The central account then randomly forwards the images to the judge, and based on the judge’s answer (which he/she snaps back to our central account), the winning player is notified. The next round starts and another judge is picked.
Left: Snap that the judge receives; Right: Snap to confirm participation in round
By utilizing a Snapchat API, we built a cross-platform game, reaching any mobile phone that could download Snapchat
The game was hosted through a server over the course of TartanHacks, however, since the 24-hour hackathon is over, the server is also down. But if you want to view our work, visit our repository on Github [note: our commit messages aren’t very professional since we worked in the same room during this project]. Also, you can download our project’s PowerPoint and read the comments.
The Piairno is a wearable set of gloves that produces musical tones when played. With the aid of flex sensors and Arduino Unos, the concept of an "Air Piano" came to life during Carnegie Mellon University’s Build 18 Week 2015 (a week long hackathon for engineers at CMU). A link to the project’s wiki page can be found here.
• Worked in a large group setting, delegating tasks and collaborating closely with fellow teammates
• Researched various microcontrollers and hardware devices that could help mimic a piano’s tones
• Researched Arduino Unos and their abilities to produce tones natively
• Programmed in Arduino Code to produce various tones from the controller
• Experimented with the accelerometer and gyroscope to map out its functionality
In order to make the Piairno work, we used native libraries of the Arduino Unos to produce sounds that matched Piano notes. We matched the tone() command at various frequencies in order to produce the seven notes. Once we had the notes ready, we looked into the flex sensors and their functionality. Accelerometers and gyroscopes were also looked into, but were not implemented in time for the hackathon. For the flex sensors, we set a certain threshold in the middle for it to activate a respective tone. Once all the sensors were hooked up and soldered correctly, we sewed the sensors onto gloves. Since the arduinos needed to be present for the processing of tones, we also sewed the Arduino Unos to each respective glove.
Ezzy World is a simple life-simulating game created with Python’s TKinter and Adobe Illustrator. The project was created for Carnegie Mellon University’s Fundamentals of Programming course (15-112). Project source code can be found here.
• Developed the logic and animations using Python’s Tkinter and Object Oriented Programming
• Designed and animated Ezzy World using Adobe Illustrator
• Researched the market for appropriate approaches to this game
• Implemented a simple, yet enjoyable UI and UX
• Heavily used probability to create a more dynamic experience for the user
BREAKDOWN OF GAME
Ezzy World isn’t that technically challenging. However, it is a project that I created from scratch in my early stages of learning how to program. All of the animations you see are drawn using Adobe Illustrator and a Bamboo tablet. The motions of the animations are created by switching two files back and forth to create movement within the game.
Used Adobe Illustrator in order to manipulate vectors easily to create the animations
The project uses Object Oriented Programming in Python in order to keep track of 3 main classes:
(1) The Tkinter application that runs the game and the overall logic of the game [for example: the player’s money, a list of instances of Ezzies, etc.],
(2) Furniture [each furniture object kept track of its own coordinates],
(3) Ezzies [which tracked coordinates, health statuses, name, etc.]
In order to set up autonomy with the Ezzies, the Python Random library was heavily used. A lot of the logic that went behind an Ezzy moving on its own, or performing actions on its own came from a simple "random.randint(low, high)" command. The program would check every few seconds or so whether or not the returned random value from random.randint equaled 0. Meaning if random.randint(0, 20) was used, there was a 1 out of 20 chance that an action would be "autonomously" done. This randomization came into play in the movement of Ezzies, whether or not an Ezzy completed an action with a furniture object in the room, and even in the "Get Twerk" mini-game where randomly generated strings were produced.
Other features of Ezzy World includes loading/saving, Ezzies aging over time, Ezzies dying if not treated properly, Ezzies changing animations if dissatisfied, etc. The project was created over a month’s span, and was a great experience in terms of learning how to design/implement a full-stack project.
Menu screen for Ezzy World
About page for Ezzy World
Ezzy page describing what an Ezzy is / can do
Create page where you can customize which type of Ezzy you want to create
Gameplay of an Ezzy surrounded by some furniture
Python (+ Flask)
HTML & CSS
Adobe Illustrator & Adobe Lightroom
Willingness to Learn ;)