Lightnews — Scholar-powered news

Connie Leung @connieleung404.bsky.social · 2d

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

Connie Leung @connieleung404.bsky.social · 2d

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.

1

Connie Leung @connieleung404.bsky.social · 2d

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.

youtu.be

1 1

Reposted by Connie Leung

Thomas Steiner @tomayac.com · Jun 16

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! 🍿

Thomas Steiner - Learn just enough about Chrome built-in AI to be productive

YouTube video by Local-First Conf

www.youtube.com

1 5

Connie Leung @connieleung404.bsky.social · Jun 14

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

Vibe Designing with Stitch

YouTube video by Learn Coding with Connie

youtu.be

Connie Leung @connieleung404.bsky.social · Jun 1

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.

1

Connie Leung @connieleung404.bsky.social · Jun 1

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

1

Connie Leung @connieleung404.bsky.social · Jun 1

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 2

YouTube video by Learn coding with Connie

youtu.be

1 2

Connie Leung @connieleung404.bsky.social · Jun 1

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

Live Refactoring the Chrome Translator API Demo Part 1

YouTube video by Learn coding with Connie

youtu.be

Connie Leung @connieleung404.bsky.social · Jun 1

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

Translate Texts within Chrome in 2025

YouTube video by Learn coding with Connie

youtu.be

1

Connie Leung @connieleung404.bsky.social · May 27

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

Angular Signals & RxJS - Master Course

Learn to build fast, elegant Angular applications using the new Signal API and RxJS streams.

courses.techstacknation.com

1 2

Connie Leung @connieleung404.bsky.social · May 27

dev.to/railsstudent...

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

Connie Leung @connieleung404.bsky.social · May 26

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

Angular Signals & RxJS - Master Course

Learn to build fast, elegant Angular applications using the new Signal API and RxJS streams.

courses.techstacknation.com

1

Connie Leung @connieleung404.bsky.social · May 26

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

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

1

Connie Leung @connieleung404.bsky.social · May 25

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

Angular Signals & RxJS - Master Course

Learn to build fast, elegant Angular applications using the new Signal API and RxJS streams.

courses.techstacknation.com

1 1

Connie Leung @connieleung404.bsky.social · May 25

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

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

1

Connie Leung @connieleung404.bsky.social · May 25

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

Resource API Changes in Angular 20 - Streaming Data in rxResource

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

dev.to

2

Connie Leung @connieleung404.bsky.social · May 24

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

This link will take you to a page that’s not on LinkedIn

lnkd.in

Connie Leung @connieleung404.bsky.social · May 24

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

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

1

Connie Leung @connieleung404.bsky.social · May 24

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.

Angular Signals & RxJS - Master Course

Learn to build fast, elegant Angular applications using the new Signal API and RxJS streams.

courses.techstacknation.com

Connie Leung @connieleung404.bsky.social · May 24

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

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

1 1

Connie Leung @connieleung404.bsky.social · May 24

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.

Angular Signals & RxJS - Master Course

Learn to build fast, elegant Angular applications using the new Signal API and RxJS streams.

courses.techstacknation.com

Connie Leung @connieleung404.bsky.social · May 24

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

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

1 1

Connie Leung @connieleung404.bsky.social · May 24

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.

Angular Signals & RxJS - Master Course

Learn to build fast, elegant Angular applications using the new Signal API and RxJS streams.

courses.techstacknation.com

Connie Leung @connieleung404.bsky.social · May 24

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

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

1