Connie Leung articles - 147 total
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...
Day 7 - Conditional Rendering with built-in control flow syntax or directives
On day 7, I will show how Vue 3, SvelteKit, and Angular perform conditional rendering with built-in...
Day 6 - User events in Components
On day 6, I will show how Vue 3, SvelteKit, and Angular respond to HTML events in the shopping cart...
Day 5 - User Inputs in Component
On day 5, I will show how to bind an input field and a checkbox to the reactive states. The...
Day 4 - List rendering in Vue 3, Svelte 5 and Angular 19
On day 4, I will show how to render a list of items. Each row also has a Delete button that deletes...
Day 3 - Use Expression in Template
On day 3, I will interpolate the header expression in the template. Interpolate the...
Day 2 - Create the ShoppingCart component
On day 2, I will delete the boilerplate codes and create the ShoppingCart component. ...
Day 1 - Create a new projects, dependencies, and global CSS styles
The contents are from Vue School's Vue.js 3 Fundamental with the Composition API. The Vue app was...
"In" keyword in binary expression of an HTML template
One of the new features in Angular 20.0.0-next.8 is the "in" keyword in binary expressions in...
Asynchronous redirectTo function in Angular Routing
One of the new features in Angular 20.0.0-next.8 is the asynchronous redirect function. The redirect...