Connie's Programming Journey

Reading Time: 10 minutesOn day 24, I create an Alert Bar component to show or hide the close button, apply a new style to the alerts, and change their direction. Create a Close SVG Icon Vue 3 application Create an icons/CloseIcon.vue Display the close icon in the alert component Import the CloseIcon and add the <CloseIcon> within the <template> tags to render the close … Read more

Reading Time: 3 minutesComponent Fundamentals with JavaScript Frameworks On day 23, I render the alert SVG icons dynamically because dynamic rendering is more maintainable, scalable and efficient. I create components for the SVG icons and render the appropriate icon component by the alert type. Framework Method Vue 3 :is attribute with the Svelte 5 Dynamic component is capitalized … Read more

Reading Time: 9 minutesComponent Fundamentals with JavaScript Frameworks On day 22, I started working on the Alert Component exercise in Vue 3, Angular 20, and Svelte 5. The Alert component uses the DaisyUI Alert component and TailwindCSS utility classes for styling. I also learned about two-way binding between components using defineModel in Vue 3.5+. I also learned that Svelte 5 … Read more

Reading Time: 4 minutesOn day 21, I will deploy all the demos to Github Page, because Github Page is free and can be automated by Github Actions. When an Angular application does not contain sensitive environment variables such as secret keys, ng deploy is more convenient than Github Actions. When it has sensitive environment variables, I can only build the … Read more

Reading Time: 2 minutesStyling is actually the easiest part of the this exercise.The steps are generally the same in the frameworks. Installation Vue 3 and SvelteKit Add tailwind CSS to vite Enable daisyUI plugin in css Angular 20 application Configuration file Enable DaisyUI plugin in CSS Apply Tailwind CSS utility classes In the GithubProfileList component, the CSS utility … Read more

Reading Time: 3 minutesThe demo displays Github users in a card layout. There is a GithubProfileList that iterates a list of user names and displays each user in a GithubProfileCard. Create a GithubProfileCard component Vue 3 application The GithubProfileCard expects a username prop that can assign to the username ref of the useGithubProfile composable. The project is written in TypeScript, so defineProps macro can accept a prop type. Destructure username, profile, and error refs from … Read more

Reading Time: 4 minutesComponent Fundamentals with JavaScript Frameworks On day 18, I started working on the Github User Profile exercise in Vue 3, Angular 19 and Svelte 5. My CSS skill is not strong, so I will follow the advice of the instructor and use DaisyUI to style the card. I leave styling last and concentrate on data … Read more

Reading Time: 5 minutesOn day 17, I demonstrate how to render dynamic content in a component. Vue 3 projects content to slots and it displays slot props optionally. In Svelte 5, slot is replaced with snippet and the render tag renders the snippet in the template. Angular offers ng-content for content projection and ng-template creates a template fragement that can display in a ng-container. In this blog post, there … Read more

Reading Time: 3 minutesOn day 16, I put a border around a coffee plan when it was selected. Other coffee plans were inactive and lost the border. The CoffeePlan component emitted the active name to the PlanPicker component so that it could notify other coffee plans to remove the border. Define Component Event to Emit Active Plan The CoffeePlan component defines a custom event … Read more

Reading Time: 4 minutesOn day 15, I extended the PlanPicker component to have a AddCoffeePlan component to add new coffee plans to the plan list. Then, the PlanPicker component has two child components that are AddCoffeePlan and CoffeePlan. Create the AddCoffeePlan Create a new components/AddCoffeePlan.vue file. Add scoped styles to style the add coffee plan form. The script tag has scoped attribute. The newPlan ref stores the new coffee plan to be added … Read more