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...
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...
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...
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...
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...
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...
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),...
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...
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...
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,...
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...
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...
Day 23 - Alert Component Part 2 - Dynamic Rendering of SVG Icons
Day 23 - Alert Component Part 2 - Dynamic Rendering of SVG Icons Table of...
Day 22 - Alert Component Part 1 - Alert List and Alert Components
Day 22 - Alert Component Part 1 - Alert List and Alert Components Table of...
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...
Day 20 - Github Card project Part 3 - Styling
Table of Contents Installation Apply Tailwind CSS utility classes Beautified the Card...
Day 19 - Github Card project Part 2 - Component Composition
Day 19 - Github Card project Part 2 - Component Composition Table of Contents Create a...
Day 18 - Github Card project Part 1 - Data Retrieval
Day 18 - Github Card project Part 1 - Data Retrieval Table of Contents Create a Github...
Day 17 - Render Dynamic Content in HTML Template
Table of Contents Insert Slot to Project Add Plan Button Text Project Add Plan Button...
Day 16 - Select a Coffee Plan with Component Event
Table of Contents Define Component Event to Emit Active Plan Add Selected Prop in the...
Day 15 - Add a Coffee Plan Form
Table of Contents Create the AddCoffeePlan Import AddCoffeePlan to...
Day 14 - Create a PlanPicker Parent Component
Table of Contents App Component Create the PlanPicker Component Github Repositories On...
Day 13 - Create a CoffeePlan Component with Prop
Table of Contents Create a CoffeePlan Component Create the CoffeePlan Component without...
Day 12 - Component Fundamentals with JavaScript Frameworks
Table of Contents Component Fundamentals with JavaScript Frameworks Create New Projects...
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...
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...
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...
Resource API Changes in Angular 20 - Streaming Data in rxResource
Table of Contents Introduction Define a PokemonPageService Stream Pokemons with...
Resource API Changes in Angular 20 - Query Resource in rxResource
Table of Contents Introduction Query a Resource Demos Resources ...
Day 8 - Attribute Binding in Vue 3, Svelte 5 and Angular
Table of Contents Disable the Save Item Button Conditionally Resources Github...