Connie Leung

#gemini #NanoBanana #GeminiCLI #GeminiCLIExtension #imageediting #imagecreation

I started the gemini-cli locally and demonstrated different commands to call the tools of the nanobanana mcp server to create and edit images, generate patterns, app icons, and diagrams, and a story about a knight slaying an evil dragon.

youtu.be/skhKhapsmEQ?...

In this video, I installed and walked through the source code of nanobanana gemini-cli-extension. The mcp-server folder has an imageGenerate.ts file that calls the Gemini API to generate images from text or edit an image from an input image and a prompt.

Thomas Steiner - Learn just enough about Chrome built-in AI to be productive YouTube video by Local-First Conf

My #LocalFirstConf talk "Learn just enough about Chrome built-in AI to be productive" is now on YouTube: www.youtube.com/watch?v=klKU.... This was a really fun one, hope you like it! 🍿

Vibe Designing with Stitch YouTube video by Learn Coding with Connie

youtu.be/2hHxPpHRuZM

Vibe Designing with Stitch

Write prompts to generate four UI pages:
Pricing page
Course details page
Course instructor page
Contact Us page

#vibedesign #stitch #ai

This demo is a WIP. I need to display an error message when the API throws error.

The buttons should be disabled when the translator is downloading the AI model.

The translator is slow when downloading the model the first time. Then, subsequent download is fast.

I made a mistake in my video recording. Charla means "talk" in Spanish, not "topic". The correct word for "topic" is "tema".

#chrome #gemini #gemininano #clientSideAI #translation

Live Refactoring the Chrome Translator API Demo - Part 2 YouTube video by Learn coding with Connie

youtu.be/TcwJpJJqJls?...

In part 2 of the video series, I refactored my Angular Translation Demo to utilize the Chrome Translator API to translate Spanish texts into other languages.

#chrome #gemini #gemininano #clientSideAI #translation

Live Refactoring the Chrome Translator API Demo Part 1 YouTube video by Learn coding with Connie

youtu.be/4_VXV-18wsI

In part 1 of the video series, I refactored my Angular
Translation Demo to use the Language Detector of Chrome.

#Chrome #Gemini #gemininano #clientSideAI #languageDetection

Translate Texts within Chrome in 2025 YouTube video by Learn coding with Connie

youtu.be/YL0g5P28GNI?...

The APIs underwent changes on Chrome, and my demos did not work.
I demonstrated the Translator API in the DevTool console of the Canary browser. The translator translated to Portuguese after downloading the model.

#chrome #gemininano #gemini #translation #clientSideAI

I also have an Angular Signal Course at @techstacknation.com. The first chapter is free, and it is more than enough to build modern reactive Angular applications

Course URL: courses.techstacknation.com

Day 11 Deploy Vue 3, Svelte 5, and Angualr Applications to Github Pages Table of Contents Manually Deployment to Github Pages Resources Github...

dev.to/railsstudent...

I also have an Angular Signal course at @techstacknation.com. The first chapter is free and more than enough to build a modern reactive Angular application.

Course URL: courses.techstacknation.com

#Angular #Signal

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...

dev.to/railsstudent...

This is day 10 of my journey. Vue 3, Svelte 5, and Angular 19 cover the shopping cart component's states and derived states.

#Angular #Vue #Svelte

I also have an Angular Signal course at @techstacknation.com. The first chapter is free and more than enough to build a modern reactive Angular application.

Course URL: courses.techstacknation.com

#Angular #Signal

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...

dev.to/railsstudent...

This is day 9 of my journey. CSS classes and inline styles can be dynamically bounded in Vue 3, Svelte 5, and Angular 19.

#Angular #Svelte #Vue

Resource API Changes in Angular 20 - Streaming Data in rxResource Table of Contents Introduction Define a PokemonPageService Stream Pokemons with...

dev.to/railsstudent...

The Resource API made some changes in Angular 20 after the RFC.

In this blog post, I demonstrated that streaming data in rxResource exhibits the same behavior after all updates in Angular 20.

#Angular #Resource

I also have an Angular Signal course at @techstacknation.com . The first chapter is free and more than enough to build a modern reactive Angular application.

Course URL: courses.techstacknation.com

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

dev.to/railsstudent...

This is day 8 of my journey. Ref is bound to the disabled attribute to enable or disable the Save Item button.

#Angular #Vue #Svelte

I also have an Angular Signal course at @techstacknation.com, and the course URL is courses.techstacknation.com. Chapter 1 is free and more than enough to build a modern, reactive Angular application.

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...

dev.to/railsstudent...

Vue uses v-if, v-else-if, v-else directives to render HTML elements conditionally.
Svelte and Angular use if-else-if-else control flow syntax to render the elements in the HTML template conditionally.

#Angular #Svelte #Vue

I also have an Angular Signal course at @techstacknation.com, and the course URL is courses.techstacknation.com. Chapter 1 is free and more than enough to build a modern, reactive Angular application.

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...

dev.to/railsstudent...

I created a text box that binds to a String reference. When the text is updated in the text box, the ref receives a new value. I also created a checkbox to bind to a boolean ref. When the checkbox changes states, the boolean value toggles.

#Angular #Vue #Svelte

I also have an Angular Signal course at @techstacknation.com and the URL is courses.techstacknation.com. Chapter 1 is free and more than enough to build a modern Angular reactive application.

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...

dev.to/railsstudent...

Listen to HTML events, and the event handlers take appropriate actions. In this blog post, an item is added when the form is submitted and removed when a click event occurs.

#Angular #Vue #Svelte

Weekly Vue & Nuxt NewsWeekly Vue & Nuxt News This weekly Vue & Nuxt newsletter gives you high-quality tips and curated content to help you become a Vue & Nuxt expert.

🚨 On Monday I'll send out my weekly Vue & Nuxt newsletter:

👉🏻 Get insights on optimizing Vue app performance using the `useInfiniteScroll` feature!
👉🏻 Explore practical guides and tutorials, plus updates on events.

Join 4.4K other Vue & Nuxt devs and sign up today:

https://weekly-vue.news

Want to master the new Angular Signal API with help from friendly experts? Watch this quick video to hear what Ibrahim says about learning with @connieleung404.bsky.social & join us today to ask questions, level up fast, and make friends! 💪🥰

I also have an Angular Signal course at @techstacknation.com founded by Bonnie Brennan. The first chapter is free but more than enough to build a modern reactive Angular application.

Course URL: courses.techstacknation.com

#Signal

Day 3 - Use Expression in Template On day 3, I will interpolate the header expression in the template. Interpolate the...

dev.to/railsstudent...

This is day 3 of my journey. I created a Vue ref/ Angular signal/ Svelte rune to display the header in the Shopping Cart Component in Vue 3, Angular, and Svelte 5.

#Angular #Svelte #Vue

After completing the chapter, you will have the basics to build modern reactive Angular application.