Connie Leung

Connie Leung @railsstudent

About: Google Developer Expert for Angular, AI and Web 🅰️ 🇭🇰| 🅰Angular Architecture| 🅽NestJS| 🆅VueJs | 🆂 Svelte | 🆃TypeScript| Blogger| YouTube Content Creator| Software Architect at Diginex

Location:
Hong Kong
Joined:
Dec 15, 2021

Connie Leung
articles - 156 total

Building an AI-Powered Alt Text Generator with Angular, Firebase AI Logic, and Gemini 3

In this project, I stepped out of my comfort zone to upgrade from Gemini 2.5 to Gemini 3 in Vertex...

Learn More 31 2Dec 11

Day 29 - Add a Loader and Error State

On day 29, I add a loader (A <div>Loading ...</div>) to show that the page is loading the...

Learn More 3 0Nov 9

Day 28 - Retrieve the Post Author

On day 28, I use the userId of a post to call the users endpoint to retrieve the user name. In Vue...

Learn More 2 0Nov 9

Day 27 - Create a simple blog page

On day 27, I completed Vue 3 Composition API course to build a simple blog to show blog posts. The...

Learn More 2 0Nov 9

Interpolate a Video from the First and Last Frames with Veo 3.1 and Nano Banana

Google released Veo 3.1 with new features and one of them is using the first and last frames to...

Learn More 2 0Nov 9

Multi-Turn Chat to Edit Images with NanoBanana, Angular and Firebase AI Logic

In this blog post, I want to demonstrate using Firebase AI Logic to edit an image in a chat, which is...

Learn More 8 2Nov 7

Generating Multiple Images with NanoBanana and Firebase AI Logic in Angular

I have recently explored the capabilities of the gemini-2.5-flash-image model (a.k.a. NanoBanana),...

Learn More 6 0Oct 29

Day 26 - Alert Component Part 5 - Extract logic and component from Alert Bar

Component Fundamentals with JavaScript Frameworks On day 26, I review the code of AlertBar...

Learn More 2 0Oct 19

Day 25 - Alert Component Part 4 - Update the Alert Bar to reopen closed alerts

Component Fundamentals with JavaScript Frameworks On day 25, I extend the Alert Bar...

Learn More 2 0Oct 19

Building an AI Creative Suite with Angular, Gemini, Imagen and Veo

This blog post is about my Angular AI Creative Suite side project that uses Gemini 2.5 Flash Lite,...

Learn More 6 2Oct 7

Building an AI Photo Editor with Angular, Firebase AI Logic, and Nano Banana

I read a blog post by Patrick Loeber where he wrote examples of using Gemini 2.5 Flash Image, also...

Learn More 4 0Oct 5

Day 24 - Alert Component Part 3 - Add an Alert Bar to change styles

On day 24, I create an Alert Bar component to show or hide the close button, apply a new style to the...

Learn More 2 0Sep 27

Day 23 - Alert Component Part 2 - Dynamic Rendering of SVG Icons

Day 23 - Alert Component Part 2 - Dynamic Rendering of SVG Icons Table of...

Learn More 2 0Sep 22

Day 22 - Alert Component Part 1 - Alert List and Alert Components

Day 22 - Alert Component Part 1 - Alert List and Alert Components Table of...

Learn More 7 3Sep 20

Day 21 - Deploy the Github Profile Project to Github Pages

On day 21, I will deploy all the demos to Github Page, because Github Page is free and can be...

Learn More 1 0Sep 10

Day 20 - Github Card project Part 3 - Styling

Table of Contents Installation Apply Tailwind CSS utility classes Beautified the Card...

Learn More 1 0Sep 6

Day 19 - Github Card project Part 2 - Component Composition

Day 19 - Github Card project Part 2 - Component Composition Table of Contents Create a...

Learn More 6 0Aug 30

Day 18 - Github Card project Part 1 - Data Retrieval

Day 18 - Github Card project Part 1 - Data Retrieval Table of Contents Create a Github...

Learn More 2 0Aug 24

Day 17 - Render Dynamic Content in HTML Template

Table of Contents Insert Slot to Project Add Plan Button Text Project Add Plan Button...

Learn More 1 1Aug 16

Day 16 - Select a Coffee Plan with Component Event

Table of Contents Define Component Event to Emit Active Plan Add Selected Prop in the...

Learn More 3 0Aug 10

Day 15 - Add a Coffee Plan Form

Table of Contents Create the AddCoffeePlan Import AddCoffeePlan to...

Learn More 0 0Aug 9

Day 14 - Create a PlanPicker Parent Component

Table of Contents App Component Create the PlanPicker Component Github Repositories On...

Learn More 3 0Aug 2

Day 13 - Create a CoffeePlan Component with Prop

Table of Contents Create a CoffeePlan Component Create the CoffeePlan Component without...

Learn More 1 0Jul 31

Day 12 - Component Fundamentals with JavaScript Frameworks

Table of Contents Component Fundamentals with JavaScript Frameworks Create New Projects...

Learn More 7 1Jun 9

Day 11 Deploy Vue 3, Svelte 5, and Angular Applications to Github Pages

Table of Contents Github Actions to Github Pages Resources Github Repositories Github...

Learn More 6 1May 27

Day 10 - Introduction to reactivity in Vue 3, Svelte 5 and Angular

Table of Contents Case 1: Construct a Reversed Item List Case 2: Derive the Number of...

Learn More 4 0May 26

Day 9 - Dynamic Binding of CSS Classes and Styles in Vue 3, Svelte 5 and Angular

Tables of Contents Case 1: Dyanmic CSS Class Binding to List Item Case 2: Dyanmic CSS...

Learn More 8 3May 25

Resource API Changes in Angular 20 - Streaming Data in rxResource

Table of Contents Introduction Define a PokemonPageService Stream Pokemons with...

Learn More 5 0May 25

Resource API Changes in Angular 20 - Query Resource in rxResource

Table of Contents Introduction Query a Resource Demos Resources ...

Learn More 5 0May 24

Day 8 - Attribute Binding in Vue 3, Svelte 5 and Angular

Table of Contents Disable the Save Item Button Conditionally Resources Github...

Learn More 5 0May 24