Your Training Coach - AWS Learning Accelerator with AI - Claude 3, Stable Diffusion XL, PartyRock

This is a Generative AI project I did at work for 2024 April Hack Day competition in 24 hours. The goal was to improve developer's experience to understand which AWS training courses would be the best fit for their career goal. In that context, the Generative AI app will recommend AWS certifications, and study plans based on student's available schedule. It will also provide scenario-based questions to help student prepare for AWS certification exams and include a chat assistant to answer any additional questions. The App leverages foundation models such as Claude 3 Sonnet, Llama 2 to generate text content, Stable diffusion XL for image generation operate on AWS Bedrock powered by PartyRock.

AWS AI Chatbot - R&D Knowledge Assistant

This is a project I did at work for 2023 Dec Hack Day competition in 24 hours. The goal was to improve developer's learning/onboarding experience from the existing dev team's knowledge vault (e.g. internal documentation website, wiki...etc), which used to be involved with a lot of reading, to a conversational experience with the AI bot powered by AWS using RAG (Retrieval Augmented Generation) technique (to help AI deliver more relevant and accurate responses without training LLM), serverless like lambda with LangChain, AWS Kendra, Amazon Bedrock (Titan & Claude 2 FMs), CloudFront, Cognito, API gateway, S3, DynamoDB, CloudWatch for metric/troubleshooting...etc.

Website Search Engine Optimization (SEO) Improvement

CORS API Mocking via Service Worker

This is a hack day project I did in a day with the goal to help improve dev website testability and increase the overall team productivity throughput. The presentation provides the context of the challenge when website cannot be tested with custom AWS CloudFront distribution due to cross-origin resource sharing (CORS) API calls. Although CORS issue requires backend service adjustment to provide appropriate headers, there are times frontend teams need to iterate quickly with feature development and testing that does not depend on data for CORS API calls, in those cases, how can we continue using custom AWS CloudFront distribution for testing? Introducing API mocking at network level with Mock Service Worker, the API mocking library for browser and Node that received the 2020 Open Source award as: The Most Exciting Use of Technology of the year.

Takeaways from An Event Apart (AEA) 2019

This presentation summarized the highlight I have captured from An Event Apart (AEA) conference @ 2019 that covers Web Performance, Design System, CSS Layout & Houdini & Case Study.

Build Reactive UI - for Async Backend with Realtime GraphQL

Building a prototype with Event-driven architecture to propagate event and asynchronous information to UI clients with GraphQL subscriptions API.

Microfrontend - Why & How

This is the presentation about my approach on microfrontend, by explaining the suitable use case, the evolution of architectures, the technicalities of different approaches with demos. I started to consider the new frontend architecture in 2018 that could recombine the one or more single page web applications (SPA) (sometimes as products, sometimes as pages, components, etc) with data coming from backend microservices into a cohesive user experience. Hence the microfrontend architecture, and got a chance to implement a prototype about half year ago. While this is still a new frontier in the frontend world, but it has got a lot more traction in 2019. Love to see how such architecture changes would shape the future.

Design System

In this talk, we will walk through the overview of Design System, its benefits as well as how it can be implemented and incorporated in the Designer and Developer workflow. I will also show you the examples of the Design System in the industry and our current progress to date with proposals for the next steps.

AI Chatbot - Dynamic Help Assistant

This is a project I did at work for 2019 July Hack Day competition in 24 hours and was awarded the 2nd place out of almost 30 teams that participated the event. The goal was to improve the user experience of using product help system with natural conversation experience that is powered by machine learning, with telemetry support by default and variety of integration and automation options. The project involved building a machine learning trained chatbot integrated with both the product, slack on the frontend, and a bot agent on Diagflow platform with serverless cloud function for Firebase on the backend.

UX Workflow & Tool Review - Framer X

This sharing is base on the evaluation task for Framer X design tool (as of July 2019) and the implication of its potential benefits that could help further streamlines the existing Designer and Developer's workflow.

UX Telemetry Support in Frontend with React & JSP

This sharing is base on the research for enabling telemetry gathering capability for frontend implemented with React or JSP with J2EE. We will first explore the UX questions we would like to answer, look into the helpful metrics that could be gathered and technical approaches for implementation.

UI Test Automation with Headless Chrome (Puppeteer + Jest + Docker)

This presentation demonstrates how we could automate many end-to-end UI tests with Headless Chrome via Puppeteer (Node API). Furthermore, to integrate with the CI pipeline, we can make a docker container that executes the tests.

Microservices with Node.js

This sharing is an excerpt of the topic about building microservices base from the talks and workshops I attended at Node Summit 2018 @ San Francisco USA. It summarized the technical highlights of industry's best practices for using Node.js to build and trace microservices at scale.

Takeaways from Node Summit 2018

This sharing presents the takeaways from my visit to Node Summit 2018 @ San Francisco USA. It summarized the main messages I've captured from the summit as well as the technical highlights of industry's best practices for using Node.js to build microservices.

The DevOps way - Deploy Frontend Service with Ease

This is the sharing my Hack Day project @ 2018 July that experimented ways to automate and enable low-risk releases for the frontend service.

Project Better E2E Testing Workflow for Hack Day Event

This is the sharing for our Hack Day project @ 2017 Dec that experimented with the automated UI testing framework.

Add GraphQL to Existing REST API Architecture

Introduction to GraphQL with comparative study on its advantages against REST API with hypothetical examples and use cases.

Project Hello DS for Hack Day Event

This is the sharing for our Hack Day project @ 2016 Dec. It was about building an AI driven personal assistance that you can have the conversation with to help you interact with the existing product. This involves the integration with Google Cloud Speech Recognition API, IBM Bluemix Conversation service, Text to Speech service, Twilio for making support phone calls, nodejs REST APIs, selenium webdrivers, Chrome driver, DSM product UI/APIs...etc. The goal was to experiment a concept with another form of interaction with the product and find out how we can leverage the power of AI and cognitive computing technologies from the existing market. The 9mins demo demonstrated a fully functional end-to-end solution that we build out in 1 day.

Project Insight for Hack Day Event

This is the sharing for our Hady Day project @ 2016 July. The goal was to make the universal search feature for the entire product include both dynamic (e.g. rules) / static resources (e.g. help) as well as a way to track how user would use this feature with Segments + Google Analytics + AWS S3.

Flow Code Example

Takeaways from React-Europe 2016

This sharing presents the takeaways from my visit to React-Europe Summer 2016. The topics covered here includes the highlight from Hackathon, the conference itself, and dive into topics such as React Native and GraphQL.

Structuring React Data Flow with Redux

This sharings introduce the use of Redux (predictable state container for JavaScript apps) in the modern React Web Application.

Performance Benchmarking for Modern Web App

This slides provides the background of the Hack Day project (Performance Benchmarking for Modern Web App) I undertake and completed in 1.5 Days.

2015 November Trend Micro Homebuilding Project

This sharing presents the journey of our visit to Philippines 2015 November, where we volunteered the homebuilding project, sponsored by Trend Micro.

Takeaways from HTML5DevConf Autumn 2015

This sharing presents the takeaways from my visit to HTML5DevConf Autumn 2015. The topics covered here includes ECMA 2015: aka ES 6, SOA, i18n Automation Pipeline, React, Data Visualization with React & D3.

Building the Modern Web App #2 with Meteor - The JavaScript Framework on top of Node.js

The presentation summarised the advantages for using the JavaScript App Platform: Meteor, to build a modern Web App. I also provide an quick overview of how it is compare to other front-end framework / libraries such as AngularJS & React and what we can expect from the new 1.2 Meteor release.

Building the Modern Web App

The sharings highlights the general architectural differences between the traditional J2EE Web Application Vs Single-page Application (SPA). In particular, a SPA build with AngularJS was used as an example in the demo.