# DanyWalls — Web Development, Angular, AI Agents & Cloud > High-density engineering articles and architectural guides by Dany Paredes, Google Developer Expert (GDE) in Angular and Web Technologies. Focused on AI Agents, Observability, Modern Angular (Signals, Control Flow), TypeScript, and Cloud Infrastructure (Google Cloud Run, Docker). ## Core Information - Site: https://danywalls.com - Author: Dany Paredes (Google Developer Expert) - Profile: https://danywalls.com/about-me - GDE Directory: https://developers.google.com/profile/u/102208196435821205774 - Full Corpus / Deep Ingestion: https://danywalls.com/llms-full.txt ## Key Topic Series - [Observability & AI Agents](https://danywalls.com/series/observability): Tracing LLM workflows, OpenTelemetry, agent metrics, and production observability. - [Modern Angular](https://danywalls.com/series/frontend): Signals, Reactive Forms, NgRx DevTools debugging, standalone architecture, and performance. - [Cloud & Next.js](https://danywalls.com/series/cloud): Next.js on Google Cloud Run, Cloud CDN caching, Secret Manager, Docker, and zero cold starts. - [TypeScript](https://danywalls.com/series/typescript-from-zero): Type systems, combining types and interfaces, and enterprise patterns. ## Featured High-Impact Guides - [What is Agent Observability?](https://danywalls.com/what-is-agent-observability): Comprehensive framework for tracing, debugging, and monitoring AI agents in production. - [Moving from Vercel Next.js to Google Cloud Run](https://danywalls.com/migrating-nextjs-from-vercel-to-gcp): Architecture, Docker standalone builds, and free-tier economics. - [Next.js on Google Cloud Run: Production Caching, Secrets, and Zero Cold Starts](https://danywalls.com/nextjs-on-cloud-run-production-guide): Cloud CDN caching, Secret Manager, startup CPU boost, and Cloud Build CI/CD. - [Creating Dynamic Forms in Angular: A Step-by-Step Guide](https://danywalls.com/creating-dynamic-forms-in-angular-a-step-by-step-guide): Decoupled form schemas with modern Angular reactive forms, @switch, and signals. - [How to Debug NgRx Using Redux DevTools in Angular](https://danywalls.com/how-to-debug-ngrx-using-redux-devtools): provideStoreDevtools setup, action tracing, state diffing, and time-travel debugging. - [Combine Async Pipes in Angular](https://danywalls.com/combine-async-pipes-in-angular-how-to-avoid-multiple-pipes): Avoiding duplicate subscriptions using combineLatest, toSignal, and @let syntax. - [Essential Angular Questions for Junior and Mid-Level Interviews](https://danywalls.com/essential-angular-questions-for-junior-and-mid-level-job-interviews): Core concepts, change detection, signals, and architectural questions. ## Complete Published Articles (186 Guides) - [What is Agent Observability? Why and When It Matters](https://danywalls.com/what-is-agent-observability): A practical guide to Agent Observability, OpenTelemetry, spans, 3-layer tracing architecture, and why debugging AI requires a new approach. - [Building Angular Forms with GolemUI and Kendo UI](https://danywalls.com/building-angular-forms-with-golemui-and-kendo-ui): Working with forms is a big part of my daily job. I built golemui-kendo to combine GolemUI's schema-driven forms with Kendo UI's enterprise-grade widgets into a single ng add command. - [How to Write an AI-Ready PRD That Doesn't Suck](https://danywalls.com/how-to-write-an-ai-ready-prd-that-doesnt-suck): Learn why building apps with AI fails after the first week, and how to use Spec-Driven Development with Gemini and Antigravity CLI to build features that last. - [From AI Demos to Large-Scale Products: Why 'Vibe Coding' Breaks](https://danywalls.com/from-ai-demos-to-large-scale-products-why-vibe-coding-breaks): My personal experience moving from quick AI chat demos to real products, why 'vibe coding' eventually collapses, and how Spec-Driven Development fixes the chaos. - [Why I'm Moving from npm to pnpm](https://danywalls.com/why-i-am-moving-from-npm-to-pnpm): The recent supply chain attacks are a wake-up call. Here is why I'm switching to pnpm for all my projects and how you can migrate your workflow safely. - [Prompt Injection in Agentic Apps: 4 Layers of Defense](https://danywalls.com/prompt-injection-agentic-apps-4-layers-defense): Learn how to protect your AI agents using a defense-in-depth strategy with these 4 essential security layers. - [Developer Tools I Use and Recommend](https://danywalls.com/developer-tools-i-use-and-recommend): A transparent list of developer tools I use daily - from productivity powerhouses like Warp and GitKraken to minimalist gems like There and Mole. Some are referrals, all are essential. - [How to Create One-Click MCP Installation Deep Links for Cursor and VS Code](https://danywalls.com/create-one-click-mcp-installation-links-cursor-vscode): Stop making users manually edit JSON files to install your MCP server. Learn how to automate one-click installation deep links for Cursor and VS Code. - [Next.js on Google Cloud Run: Production Caching, Secrets, and Zero Cold Starts](https://danywalls.com/nextjs-on-cloud-run-production-guide): A production guide to running Next.js on Google Cloud Run: configure Cloud CDN asset caching, mount Secret Manager env variables, reduce cold starts, and automate Cloud Build. - [Being a Writer in the Era of Writer/AI Slop](https://danywalls.com/being-a-writer-in-the-age-of-ai-slop): How to maintain your authentic voice as a developer in a world crowded with AI-generated content. Why lived experience and real analogies are your most powerful tools. - [Moving from Vercel Next.js to Google Cloud Run: A Cost and Architecture Guide](https://danywalls.com/migrating-nextjs-from-vercel-to-gcp): Why I migrated my Next.js projects from Vercel to Google Cloud Run, how the standalone Docker build works, and how to stay on the free tier. - [Dockerizing Next.js: The Hidden Challenges](https://danywalls.com/deploying-nextjs-outside-vercel): Vercel hides the complexity of environment variables. When you move to Docker, these hidden challenges surface. Learn the architecture to scale your app correctly. - [WebMCP: AI Agents are your new web visitors](https://danywalls.com/webmcp-agents-in-the-browser): WebMCP is a new standard from Microsoft and Google. It turns your website into a tool for AI agents. Learn how to use it today. - [Moving to Cybersecurity from a Software Developer Role](https://danywalls.com/cybersecurity-for-developers): An easy explanation of cybersecurity acronyms (SIEM, IDP, PII, SPII) and concepts that every developer needs to know. - [Add MCP to Your Agent in One Click](https://danywalls.com/create-one-click-mcp-installation-links): I was tired of explaining how to manually install MCP servers. So I built www.mcpclick.app to turn a boring 5-step process into a single click. - [How I Improved My Blog with Vercel Agent Skills and React Best Practices](https://danywalls.com/improving-projects-with-agent-skills-react-best-practices): I discovered Vercel's agent skills and used one command to apply 10+ years of React optimization knowledge to my blog. Here's how it made my code faster, more accessible, and easier to maintain. - [My Newsletter Went to Spam: How I Fixed Email Deliverability for Free with Cloudflare](https://danywalls.com/fix-newsletter-spam-with-cloudflare-email-routing): A friend told me my emails were hitting his Spam folder. Here is how I fixed my deliverability using Cloudflare Email Routing and custom domain authentication for $0. - [Protect Your API: Why You Need Rate Limiting (and How to Add It)](https://danywalls.com/protect-your-api-with-rate-limiting): I was explaining to a friend why validating emails isn't enough. Learn how to stop bots from killing your subscription endpoint using Rate Limiting—from a naive in-memory solution to a robust Redis implementation. - [Make GitHub Work for You: GitHub MCP and Dependabot](https://danywalls.com/make-github-work-for-you-mcp-and-dependabot): Stop fighting with Git commands and dependency updates. Learn how GitHub MCP brings AI-powered productivity to your editor and how Dependabot keeps your dependencies secure—automatically. - [Why I Switched from Loom to Cap](https://danywalls.com/why-i-switched-from-loom-to-cap): After years of using Loom for screen recordings, I made the switch to Cap.so. Here's why this open-source alternative won me over with its simplicity, features, and incredible pricing. - [Goodbye Hashnode, Hello Vercel: Migrating My Blog to Next.js and Vercel](https://danywalls.com/migrating-from-hashnode-to-vercel-nextjs): I moved my blog from Hashnode to a custom Next.js site on Vercel. Here is why I did it, how I moved my entire content library, and why Vercel is the best home for my posts. - [How I Declutter My Digital and Developer Life for 2026](https://danywalls.com/digital-declutter-2025): The year is ending soon. In 2025, I made many small projects, saved many articles, and installed many tools. Now, my digital life is messy. Here is how I cleaned it to start 2026 with a fresh start. - [2025 Yearly Recap](https://danywalls.com/2025-recap): 2025 is almost over. It wasn't perfect, but it was a challenging year for health and work-life balance. - [Stop Duplicating Validation Logic in Next.js with Zod](https://danywalls.com/stop-duplicate-logic-nextjs-zod): Learn how to share Zod schemas between client and server in Next.js to ensure data integrity without repeating yourself. Photo by Clément Hélardot on Unsplash - [Next.js Performance: What the Defaults Don’t Solve for You](https://danywalls.com/nextjs-performance-what-the-defaults-dont-solve-for-you): Next.js gives you strong performance defaults. But fast by default doesn’t mean fast always. Over the last few days, I’ve been working with Next.js and React Server Components, assuming the framework would handle most performance concerns for me. And... - [What I Learned: From AI Chat Demos to Real AI Products](https://danywalls.com/what-i-learned-from-ai-chat-demos-to-real-ai-products): In 2025, I built quite a few demos using Gemini and Kendo UI, building small chat experiences using chatbots combined with Conversational UI for quick prototypes, taking a piece of text (sometimes an image) and sending back a nice-looking answer. The... - [How JavaScript Generators works with Examples](https://danywalls.com/why-and-when-use-javascript-generators-with-examples): Today I’ve been reading about Redux-Saga. One of the key concepts there is the use of generator functions (function*). Generators are a JavaScript feature I’d heard of before, but I never really needed them in my day-to-day work—probably because I di... - [Why I moving from NVM to Volta](https://danywalls.com/why-i-moving-from-nvm-to-volta): Nowadays, when we need to work with multiple apps and products, and each one has its own version of libraries, it is important to make your environment flexible to changes. At that moment, nvm becomes a great option to run multiple versions of Node o... - [💀Don't Break UI with Jest Snapshot Testing 📷](https://danywalls.com/dont-break-ui-with-jest-snapshot-testing): A few days ago, I was fixing a small accessibility issue and decided to remove some unnecessary wrappers around a few elements. After making those changes, all the tests passed successfully—including the E2E tests. Everything was green, so I opened a... - [How to download Firebase Studio Project?](https://danywalls.com/how-to-download-firebase-studio-project): A few days ago, several people asked me how to download a project from Firebase Studio. Currently, it doesn't have a "download" project button like StackBlitz. But if you want to have the code on your machine, the easiest way is to get our code, it p... - [What Really Matters](https://danywalls.com/what-really-matters): Sometimes, life gets too noisy—work, technology, AI everywhere, and things always changing. We forget to care for what really matters. That’s when your body and health send a strong message and make you stop to think about your life. I’ve been offlin... - [2024 Yearly Recap](https://danywalls.com/2024-yearly-recap): The year 2024 is almost over, and reflecting on it, it was amazing with many tech talks, community contributions, learning from the community, and sharing great times with friends and family. Special Thanks I want to say a big thank you to Jörgen de ... - [How to Make Your Angular Projects More Accessible](https://danywalls.com/essential-tips-for-creating-accessible-forms-in-angular): When we build apps, we usually focus on delivery rather than covering other aspects like Accessibility and Testing (but testing will be covered in another post). Today, I want to talk about Accessibility. Most of the time, we think accessibility is j... - [Angular 19 and ZoneLess](https://danywalls.com/angular-19-and-zoneless): Don't care if you use Angular 14, 15...19; your apps are still under the Zone.js umbrella. Maybe you feel your Angular apps work well, but under the hood, with Zone.js, Angular needs to iterate over the entire DOM tree, impacting app performance. Thi... - [November 2024 - Recap DevFest and Community](https://danywalls.com/november-2024-recap-devfest-and-community): Hi! 👋🏽 November has ended, and it was packed with four events in a single month (special thanks to my family, Edgar, and Silvia, for their patience ❤️). It was an incredible experience sharing and learning with the community and GDG. Let’s recap! �... - [October 2024: Angular with NgRx Entities, Build Dashboard with Kendo UI, and Community](https://danywalls.com/october-2024-angular-with-ngrx-entities-build-dashboard-with-kendo-ui-and-community): Hi! 👋🏽 October has ended, and it was a month where I felt more productive. I started to find time to write more, learn, and share! From exploring NgRx entities, building dashboards, to hosting exciting events. Let’s take a look back at the highligh... - [Simplify Your Angular Code with NgRx Entities: Why I love NgRx Entities](https://danywalls.com/simplify-your-angular-code-with-ngrx-entities-why-i-love-ngrx-entities): In the summer, I refreshed my NgRx skills by building a small application to handle my favorite places. During that process, I enjoyed NgRx because I had real control over the state of my app. One thing that caused a lot of noise was the number of se... - [September 2024: 📖 Signals and Learning](https://danywalls.com/september-2024-signals-and-learning): September has come to an end, and it was a calm and reflective month. While I couldn't write as much as I had hoped, I took the time to adapt to my job at @celonis and dive deeper into Angular Signals, writing, and reading a great book. Let's take a ... - [How to Simplify Angular Component Communication with model() and Signals](https://danywalls.com/how-to-simplify-angular-component-communication-with-model-and-signals): I was very busy in September, but now I'm working on creating a workshop about signals and developing ideas on how signals can simplify our code. Recently, I've been using @Input() and @Output for component communication. However, Angular 17 introduc... - [August 2024: 🏖️ CRUD with NgRx + Router , Community Mentions and Rest](https://danywalls.com/august-2024-crud-with-ngrx-router-community-mentions-and-rest): August has come and gone, and it was a bit quieter than usual. I focused on a few important things, especially refreshing my knowledge about RxJS, and took some time off. Thanks to @googledevexpert and @angularaddicts for the mention! Let me share wh... - [Angular Router URL Parameters Using NgRx Router Store](https://danywalls.com/handling-router-url-parameters-using-ngrx-router-store): When we build apps with state, the entry point is key to initialize our state for our components, but sometimes, we have requirements to preserve application state within the URL to allow users to bookmark or share specific application states, with t... - [When to Use concatMap, mergeMap, switchMap or exhaustMap Operators in Building a CRUD with NgRx](https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-crud-with-ngrx): A few days ago, I was working with NgRx effects in an application,where I needed to get data from the store and combine it with service calls involving asynchronous tasks. When working with combined streams, it's important to choose the appropriate o... - [July 2024: Testing in Angular and Using LLM and ChatBots](https://danywalls.com/july-2024-testing-in-angular-and-using-llm-and-chatbots): July has come to an end. That month has been a bit busy, so I can't write too much, but I always take time to write about things I'm doing. During July, most of my time was spent writing tests and playing with ChatBots and LLMs. Let's take a look bac... - [Testing Components In Angular: NO_ERRORS_SCHEMA, Stub Components, and NgMocks](https://danywalls.com/testing-components-in-angular-noerrorsschema-stub-components-and-ngmocks): When we need to write a test for components, it is not hard. The pain starts when our components begin to have dependencies, not only in the constructor or in the TypeScript file. The real challenge comes when we start to add dependencies of other co... - [Building a Local AI Chatbot with Gemini Nano, Chrome Canary, Angular, and Kendo AI Prompt](https://danywalls.com/building-a-local-ai-chatbot-with-gemini-nano-chrome-canary-angular-and-kendo-ai-prompt): The race for AI continues. Alternatives like Ollama help us interact with AI models on our machines. However, the Chrome and Google teams are moving one step forward by enabling Chrome with Gemini Nano running in our browsers. Note this API is exper... - [June 2024: NgRx, Angular, and with the Community](https://danywalls.com/june-2024-ngrx-angular-and-with-the-community): June has come to an end, and it has been a fantastic month with some changes in my professional life! I want to take a moment to share the great experience I had working with the community and learning about NgRx and testing. Let's take a look back a... - [Four JavaScript Challenges for Job Interviews](https://danywalls.com/four-javascript-data-manipulation-every-junior-must-practice): During recent developer interviews, I noticed many candidates felt overwhelmed by coding challenges. For junior positions, it's common to be asked about basic JavaScript tasks. Today, I'll share essential data manipulation techniques that junior deve... - [How to Handle Side Effects in Angular Using NgRx Effects](https://danywalls.com/how-to-handle-side-effects-in-angular-using-ngrx-effects): Side-effects! They are one of the most common tasks in our applications. In Angular, but build application if we don't take care the component ends with a lot of responsability, like get, process and render the data. But in Angular most of time when ... - [How To Add HTTP Headers to Requests with Functional Interceptors in Angular](https://danywalls.com/how-to-add-http-headers-to-requests-with-functional-interceptors-in-angular): When we work with request data in Angular to an external API, sometimes we need to add or send headers. The idea of repeating the code in each request is not something to feel proud of. For example, when working with the ball don't lie API, it requir... - [How to Use NgRx Selectors in Angular](https://danywalls.com/how-to-use-ngrx-selectors-in-angular): In NgRx, when we want to get data from the store, the easiest way is by using store.select. It allows us to get any slice of the state. Yes, it sounds funny, but any slice returns an Observable. For example: It is flexible but also risky becaus... - [How to Implement ActionCreationGroup in NgRx](https://danywalls.com/how-to-implement-actioncreationgroup-in-ngrx): When you create actions in NgRx, you usually use the createAction function helper. We write our action names with an inline string about the source and the event, like [Cart] Update Price. This action is clearly linked with the Cart feature in our ap... - [May 2024: Angular, Performance, SSE, Gemini, Signals, NgRx and More](https://danywalls.com/may-2024-angular-performance-sse-gemini-signals-ngrx-and-more): May has come to an end, and what a fantastic month it was! I had a great time learning about real-time apps, optimization, and NgRx. I also enjoyed working with Progress Telerik and Kendo UI learning about improve performance, build flexible componen... - [How to Debug NgRx Using Redux DevTools in Angular](https://danywalls.com/how-to-debug-ngrx-using-redux-devtools): Master NgRx state debugging in modern Angular with Redux DevTools: configure provideStoreDevtools, trace actions, inspect diffs, and use time-travel debugging. - [When and Why to Use REDUX NgRx in Angular](https://danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular): In a previous article, I wrote about managing the state in Angular by using Services, but when the application increases in size and needs to track and handle a large state, it becomes a bit complex and not easy to manage. For example, when we have m... - [How to Optimize Images in Angular Using ngOptimizedImage Directive](https://danywalls.com/how-to-optimize-images-in-angular-using-ngoptimizedimage-directive): As developers, we create different types of applications. Sometimes, we work on data processing with forms or data visualization with grids or charts. But sometimes, we build applications that focus mainly on images. While making an app to show image... - [Building Real-Time Boards with Angular and NestJS Using Server-Sent Events](https://danywalls.com/building-real-time-boards-with-angular-and-nestjs-using-server-sent-events): When I need to build real-time apps with Angular, most of the time I use SignalR, but a few days ago, a friend mentioned SSE. I had never heard about it or had the opportunity to hear someone mention it, so I started to find out about it and was surp... - [April 2024 Typescript, Angular and Testing](https://danywalls.com/april-2024-typescript-angular-and-testing): April has come to an end, and what a fantastic month it was! I had a great time learning about Signals, Angular 17, and the future of testing. Let's take a look back at the highlights and fun moments. 👋🏼 Bye Bye Karma! Hello Web Test Runner and 🦥 ... - [Testing in Angular: Replace Karma to Web Test Runner](https://danywalls.com/testing-in-angular-replace-karma-to-web-test-runner): I was writing an article for Kendo about testing in Angular, but with the deprecation of Karma, I had some questions about the future of testing in Angular. I'm using Jest for my personal and professional projects, along with the Angular testing libr... - [Using @Defer DeferViews in Angular 17](https://danywalls.com/using-defer-deferviews-in-angular-17): The Performance, this is one most important topics when we build applications, now days we work with huge amount of components and needs to think how to improve the bundle size in our apps. The Angular team knows that, and launches great and amazing ... - [March 2024 Recap: IA / Schematics, Community and Writing](https://danywalls.com/march-2024-recap-ia-schematics-community-and-writing): March has come to an end, and what a fantastic month it was! I had a great time diving into AI, learning about Angular and Typescript, and connecting with the DonWeb Cloud & IaaS community, especially about Kendo. Let's take a look back at the highli... - [How to Publish My Angular Library in Private NPM with Verdaccio](https://danywalls.com/how-to-publish-my-angular-library-in-private-npm-with-verdaccio): When working with libraries, we aim to share our code with teammates, not just keep it on our own computers. The easiest way to share and test our code is by using npm pack to create a zip version. Another option is to publish our package is with azu... - [Beginner's Guide to Using WSL on Windows 11](https://danywalls.com/how-to-start-with-wsl-as-frontend): I was an Ubuntu / Mac user, but two years ago, I switched back to Windows. Why? Well, because of the high prices of MacBooks 😢, and my company assigned me a machine with Windows 11 Pro. However, as a frontend developer, most of my code and my apps r... - [How to Detect and Fix Circular Dependencies in Typescript](https://danywalls.com/how-to-detect-and-fix-circular-dependencies-in-typescript): When coding in TypeScript or Angular and embracing types, sometimes we don't pay attention to "Circular dependencies". We create types and try to use them everywhere to match with the existing structure, and if we're not careful, it's so easy to crea... - [February 2024 Recap: IA, Community and Writing](https://danywalls.com/february-2024-recap-ia-community-and-writing): February was amazing and full of surprises! Let's go over the best parts and the fun projects I worked on. Cheers from the Community Big cheers: I became a #ProgressChampion! 🎉 Thank you so much to Progress Telerik and Kendo UI for this big honor. ... - [Learn Route Parameters in Angular with Example](https://danywalls.com/learn-route-parameters-in-angular-with-example): When building applications in Angular, maintaining effective communication of data between components or routes is crucial. Sometimes we use a state manager, services, or take advantage of the URL to provide information as a convenient alternative. C... - [Build Navigation in Angular with Router, RouterLink and Kendo UI](https://danywalls.com/build-navigation-in-angular-with-router-routerlink-and-kendo-ui): When we build an application in Angular, it works as SPA so it is a single page with multiple views or pages running in the client. But how can we navigate between each one without a new request to the server? The Angular router updates the address b... - [Create ChatBot with Gemini, Kendo UI, and Angular 17](https://danywalls.com/create-your-personalized-gemini-chat-with-kendo-ui-conversational-ui-and-angular): When I see many chats connected with AI, a friend once said it's difficult, but it isn't. Today, I want to demonstrate how easy it is to build your own chat connected with AI and a nice interface using just a few lines of code. we'll learn how to cr... - [Web Accessibility: Working with Images and Content](https://danywalls.com/web-accessibility-working-with-images-and-content): When we create a website, the content is more than just text. As I learned in my previous article, accessibility is about more than just aria-label or alt attributes in images. Sometimes we add more than images, like SVGs, charts, or even consider co... - [Fun and Easily Update NPM Dependencies with npm-check-updates](https://danywalls.com/fun-and-easily-update-npm-dependencies-with-npm-check-updates): Today, I was trying to update multiple projects, but didn't want to struggle with compatibility issues or potential breaks. I found an amazing package, [npm-check-updates](https://www.npmjs.com/package/npm-check-updates). It helps to find package upd... - [Web Accessibility: Head Start](https://danywalls.com/how-to-begin-with-website-accessibility-a-simple-guide): Nowadays, when making an app, accessibility is often ignored, or some developers think that aria-label is all they need. Some people also think that adding accessibility takes more work or makes the design less appealing, but that's not true. Having ... - [Simplify Routing Parameters in Angular Components](https://danywalls.com/input-binding-and-router-withcomponentinputbinding-in-angular): In my previous article on building a sample store, I explored the animation feature in Angular 17. At the same time, I also developed an extensive product page feature. The product detail page needs to extract the product ID from the URL using the ro... - [My Yearly Summary: 2023 Edition](https://danywalls.com/2023-a-look-back-at-my-year): Reflecting on 2023, I experienced a year brimming with presentations, contributions, and remarkable achievements in content creation. Here's a snapshot of my year by the numbers: 🎤 14 Talks: Shared knowledge on topics like Angular , Astro, Analog, ... - [Add Router Animation Transitions for Navigation in Angular 17](https://danywalls.com/add-router-animation-transitions-for-navigation-in-angular-17): I'm constantly exploring ways to improve user interaction on websites. Recently, while building a store demo, I thought of enhancing the user experience when navigating between product pages. This led me to play with fantastic feature in Angular 17: ... - [My Top Angular Kendo Articles 2023](https://danywalls.com/my-top-angular-kendo-articles-2023): As 2023 comes to an end, I find myself reflecting on the valuable lessons and knowledge I've gained through writing. In addition to this blog, I create content for Telerik Kendo. Today, I'm excited 😊 to share with you my top Kendo UI articles from t... - [Why avoid using 'any' in TypeScript](https://danywalls.com/why-avoid-using-any-in-typescript): When we create applications in Angular, the any type is our "live-saver" when struggle with complex error messages, want to save time by not writing specific type definitions, or think that TypeScript's type checking limits our coding flexibility and... - [How to Configure Jest in Angular 18](https://danywalls.com/how-to-configure-jest-in-angular-18): When we write tests in Angular Jasmine and Karma are the default for testing library and runner, but the Angular team was working on bringing Jest to Angular. Today, we're going to experiment with the Jest Builder for Jest (Experimental) in Angular 1... - [How to Solve the "Class constructor HTMLElement cannot be invoked without 'new'" Jest Error](https://danywalls.com/how-to-test-custom-elements-with-angular-testing-library): I'm using the Angular Testing Library to test my components, and it works exceptionally well—I love it! However, I encountered a unique situation when using a Web Component within my component. This results in the error "Class constructor HTMLElement... - [Transform Inputs Properties in Angular Easy](https://danywalls.com/transform-inputs-properties-in-angular-easy): When building components, defining the interfaces to be used by consumers is often challenging. We need to consider the information that must be passed between components and, at times, how it is processed. At times, we expose interfaces solely due t... - [How to Learn Angular 17 Features with Angular.dev](https://danywalls.com/how-to-learn-angular-17-features-with-angulardev): Angular 17 has been announced and is set to release in the upcoming days. It comes with a list of impressive new features, such as control flow, deferred views, hydration, server-side rendering (SSR), signals, and many more. One of the notable releas... - [Essential Angular Interview Questions for Junior and Mid-Level Developers](https://danywalls.com/essential-angular-questions-for-junior-and-mid-level-job-interviews): A comprehensive guide to modern Angular interview questions for junior and mid-level roles, covering Signals, Standalone APIs, Control Flow, RxJS, and performance. - [Managing HTTP Errors in NestJS Effortlessly](https://danywalls.com/managing-http-errors-in-nestjs-effortlessly): When we develop applications, errors can also occur in the API, such as when we request data and it doesn't exist or the database is unavailable. How can we catch and handle errors in the API? For instance, in the Jumbo API, we the cards.service find... - [Svelte for the First Time: A Personal Experience](https://danywalls.com/svelte-for-the-first-time-a-personal-experience): Sometimes we want to learn something, just for fun or to build new side projects. I heard about Svelte in 2016, but never tried it until a few months ago with Bezael to create a small microfrontend. However, yesterday I started to build a small side ... - [Understanding InjectionContext and Signal Effects](https://danywalls.com/understanding-injectioncontext-and-signal-effects): Yesterday, I was chatting with my friend Jörgen de Groot about Signals. As our conversation shifted to cover effects, he encountered the error ERROR NG0203. Later, another friend approached me with the same issue. I decided to compose a brief article... - [How to Build an In-Memory CRUD REST API with Nest and Deploy on Vercel](https://danywalls.com/how-to-build-an-in-memory-crud-rest-api-with-nest-and-deploy-on-vercel): In my previous article, we got started with API creation in Nest, we learned about how to create a controller and add methods on it with decorators to allow getting and posting data it is a very basic example. When we want to have better examples or ... - [Head Start with Angular Signals: A Basic Overview](https://danywalls.com/head-start-with-angular-signals-a-basic-overview): Since Angular 16, I have heard a lot about Signals, the @angular/team did great work listening to the community and improving the Signals API with Rxjs interop. Yesterday I was talking with my friend Juan Berzosa he hadn't played with Signals yet, So... - [Combining Types and Interfaces with & and | in TypeScript](https://danywalls.com/combining-types-and-interfaces-with-or-in-typescript): Master TypeScript type composition using Union (|), Intersection (&), and interface extends with practical examples and real-world patterns. - [How to Create Your First API with Nest Effortlessly](https://danywalls.com/how-to-create-your-first-api-with-nest-effortlessly): When I write articles with examples or code MVP , I need to show some data in most of the cases JSON-server save me, or use open APIs to retrieve and post data. However, there are times when we may require specific features, such as uploading files, ... - [When Use Arrays, Tuples, Maps, and Sets In Typescript with Examples](https://danywalls.com/when-use-arrays-tuples-maps-and-sets-in-typescript-with-examples): A few days ago, a friend asked how to prevent duplicate keys in an array, and I told him there are other collections to work with, and each one is suited for a specific situation. Because I love the NBA, I tried to find an easy way to explain each da... - [How To Use Record Type In Typescript](https://danywalls.com/how-to-use-record-type-in-typescript): Today I was facing a problem where I wanted an object with a list of properties but with specific values like: For example: export type NBATeam = "Lakers" | "Celtics" | "Bulls" | "Warriors"; const nbaChampionships = { Lakers: 17, Celtics: 17... - [How To Improve Your Git Commit Messages Using Conventional Commits](https://danywalls.com/how-to-improve-your-git-commit-messages-using-conventional-commits): When working with code, explaining to others what we've done in our code is not easy. Writing commit messages to convey our changes can vary for each team member. Everyone has their own way of writing commit messages, and sometimes we don't know what... - [Easy Configuration of ESLint, Cypress, StoryBook, and Prettier for Angular Projects with Nx](https://danywalls.com/easy-configuration-of-eslint-cypress-storybook-and-prettier-for-angular-projects-with-nx): As an Angular enthusiast, I frequently create solutions that consist of multiple projects, such as apps and libraries. The Angular CLI is instrumental in managing these projects through Angular workspaces. I often use Angular in conjunction with othe... - [How To Debug Angular Applications Easy](https://danywalls.com/how-to-debug-angular-applications-easy): As developers, we use a lot of our coding time to fix bugs. Debugging helps us find and remove errors in software development. But sometimes, finding a bug takes longer than fixing it. That's when we need to learn some ways to debug our apps. Let's i... - [Avoid Check Null or Undefined In Typescript using Optional Chaining and Nullish Coalescing](https://danywalls.com/avoid-check-null-or-undefined-in-typescript-using-optional-chaining-and-nullish-coalescing): TypeScript offers powerful features that make code more concise and efficient. Two such features, optional chaining and nullish coalescing, play a vital role in handling data effectively. In this article, we'll explore these features within the conte... - [Key RxJS Operators Every Angular Developer Should Know](https://danywalls.com/key-rxjs-operators-every-angular-developer-should-know): Today, one of our teammates was curious about which RxJS operators they'd need to create a search feature in Angular. I let them know that while RxJS has loads of operators, they don't need to know them all. I usually stick with Map, Filter, Tap, Swi... - [Testing Functional Guards in Angular 15: A Step-by-Step Guide](https://danywalls.com/testing-functional-guards-in-angular-15-a-step-by-step-guide): Since Angular 14, we can convert our class guards to functional and also combine them with inject making it so easy to write guards Angular applications. When we move from class to functional, the constructor disappears, and the dependencies come fro... - [How to get and use ng-template, ng-container and ng-content](https://danywalls.com/how-to-get-and-use-ng-template-ng-container-and-ng-content): When I started to play with templates and dynamic content in angular, I get surprised by multiple directives in angular to work with it ng-template, ng-container, and ng-content. Each one is pretty similar initially; each has exceptional use cases an... - [How to Build Your First Deno App: A Step-by-Step Guide](https://danywalls.com/how-to-build-your-first-deno-app-a-step-by-step-guide): I've been checking out Deno and found it's a really great choice if you're looking for a JavaScript and TypeScript runtime, it comes with pre-built modules that make it super easy to develop applications without having to start everything from scratc... - [Using the Inject Function in Angular 15](https://danywalls.com/using-the-inject-function-in-angular-15): Since Angular 14/15, there has been an alternative way to inject dependencies into our Angular applications. I will show two cases of using the inject function with Angular 14/15. Inject Dependencies in Functions Using inject, we can create functions... - [Angular Forms: Choosing Between Reactive and Template Driven Forms](https://danywalls.com/angular-forms-choosing-between-reactive-and-template-driven-forms): When we start to build an application in Angular and need to create forms, we must pick one of the two flavors: "Reactive" or "Template Forms". For beginners, Template Forms are natural and appear less complex for new joiners, but some developers may... - [Using RxJS as State Manager in Angular](https://danywalls.com/using-rxjs-as-state-manager-in-angular): When we build an Angular App, the communication between components is something to take care of. We can start using parent-to-child with Input and Output events; the lack of input and output communication is the only parent-to-child or vice versa, bu... - [How to Build Your First CLI with Bash](https://danywalls.com/how-to-build-your-first-cli-with-bash): I'm a front-end developer using a lot of CLI, which runs a few commands to generate a final project or perform tasks. I heard of shell scripting but have never tried it before. Daily, I use some shell commands from the terminal, like: cd: Change the... - [How To Test Components In Angular Using Testbed](https://danywalls.com/how-to-test-components-in-angular-using-testbed): When talking about unit testing, the first definition that comes into our head is to test the minor testable parts of an app, like functions, methods, and classes. It sounds perfect for a simple function or isolated class without dependencies, but it... - [How to Improve Cloud Skill As Frontend](https://danywalls.com/how-to-improve-cloud-skill-as-frontend): As a front-end developer, I'm looking to expand my cloud skills so I can build and deploy web applications. I'm taking some time to research which Azure services are most applicable to frontend development and how I can use them to build, deploy, and... - [How and When to Use Mocks or Spies on Unit Testing](https://danywalls.com/how-and-when-to-use-mocks-or-spies-on-unit-testing): A few days ago, my friend was writing tests for an Angular App with two dependencies and wanted to test his code. I suggested that he should Spy and Mock the dependencies. When deciding whether to use a Mock or a Spy, it is important to consider the ... - [How to Get Cloud Skills As Frontend](https://danywalls.com/how-to-get-cloud-skills-as-frontend): I'm a Front-end Developer focused on Angular, Typescript, and Sass; during the last four years, I put all my energy into improving my Frontend Skills (Angular, NgRx, Testing, Sass) but without any effort to learn something about the Cloud. Why don't ... - [My Yearly Summary: 2022 Edition](https://danywalls.com/my-yearly-summary-2022-edition): The year 2022 is close to ending; it has been a fantastic year for my professional goals and family. I am 39 years old, so I have focused on investing energy in topics related to my job to make my life as a developer easier. I want to use this post t... - [How to Build Your First App with Astro](https://danywalls.com/how-to-build-your-first-app-with-astro): For a few years, web projects have been taking more and more responsibility, which means more and more JavaScript. Nowadays, the top SPA Frameworks, React, Vue, or Angular, have great developer experience and allow us to build complex applications bu... - [Maximizing Your Angular Build Performance with ESBUILD](https://danywalls.com/maximizing-your-angular-build-performance-with-esbuild): ESBuild is a swift JavaScript compiler used for ViteJS. You can play with him in Angular, changing a single line in the angular.json file. Note: It is in experimental mode 😜 Change the builder from "@angular-devkit/build-angular:browser" to "@angula... - [Using Strictly Typed Reactive Forms in Angular](https://danywalls.com/using-strictly-typed-reactive-forms-in-angular): I continue to play with the new features of Angular 14/15, and one pending task is to learn about Typed Reactive Forms. The strict forms help us avoid many common issues when working with our forms. The best way to learn and understand why to use Typ... - [How To Use Functional Router Guards in Angular](https://danywalls.com/how-to-use-functional-router-guards-in-angular): Today I was talking with my friend Leifer, and he asked me some about Functional Guards in Angular (14/15) with some questions. How do functional Router Guards work? Can The Class guards continue working in Standalone Components? How hard is conve... - [Triggering Validation in Angular's Reactive Forms](https://danywalls.com/triggering-validation-in-angulars-reactive-forms): Today with my friend @alt148 I was playing with Dynamic Forms, and we discovered changing one form control can trigger the validation several times in the validation process. For example, we have a form with a field, and in every key press, the form ... - [Creating Dynamic Forms in Angular: A Step-by-Step Guide](https://danywalls.com/creating-dynamic-forms-in-angular-a-step-by-step-guide): Learn how to build data-driven, typed dynamic forms in modern Angular from configuration models using Reactive Forms, Control Flow (@switch, @for), and validation. - [Head Start With Standalone Components in Angular 15](https://danywalls.com/head-start-with-standalone-components-in-angular-15): Since version 15, Angular introduced Standalone Components as an easy way to build module-less applications. One of the benefits of Standalone Components is that they make Angular easier for new developers to learn and use, as they do not require an ... - [Maximizing Performance with Lazy Loading and Preload Routing in Angular](https://danywalls.com/maximizing-performance-with-lazy-loading-and-preload-routing-in-angular): When we build an Angular application with multiple modules in a large app, the main script file becomes a giant monster. One alternative to improve the user experience is to use the Lazy Module. Today, We learn how to use lazy loading to enhance the... - [Understand How the Sort Method Operates on Javascript Arrays](https://danywalls.com/understand-how-the-sort-method-operates-on-javascript-arrays): I was assisting a friend in constructing a sorting table with data in Typescript and he ran into some odd behavior along the way. In this lesson, we will explore what occurs in Javascript when the sort method is used with strings and numbers. Sorting... - [Integrating Third-Party Scripts and CSS into Your Angular App](https://danywalls.com/integrating-third-party-scripts-and-css-into-your-angular-app): In Angular, we have a few ways to add libraries, for example, using Angular schematics or using Angular libraries, which export modules to add to the app.module. But what happens when we have a standard library.js or ui.css and need to add it to use ... - [Building a UI Component Library with Angular: Mistakes to Avoid for Success](https://danywalls.com/building-a-ui-component-library-with-angular-mistakes-to-avoid-for-success): I worked in a few companies building a UI Library or company framework to use in multiple products with the dream of having a great UI, consistency, and the same behavior for the users. The UI Library's idea helps the developers prevent the duplicity... - [Angular's 'exportAs' Feature: A Practical Guide to Sharing Component State](https://danywalls.com/angulars-exportas-feature-a-practical-guide-to-sharing-component-state): In Angular when we build components with public properties or the state to share with others, some options come into our heads to solve it: Emit an event using the new value of the component state. Inject service with Subject to share the state. Inj... - [How to Build Composable & Compound Components in Angular](https://danywalls.com/how-to-build-composable-compound-components-in-angular): When we need to have different versions and use cases and make it flexible to the changes, however, some stuff becomes a bit complex. For example, we need to show the list of the country in one case, the company flag or the name of the selected count... - [Optimizing Your Workflow with Multiple Projects in Angular](https://danywalls.com/optimizing-your-workflow-with-multiple-projects-in-angular): When we build our Angular apps, splitting the code into modules is good to keep the code in a specific place, but sometimes we need to break it into the project to put everything in an isolated area. By default, Angular CLI generates an initial appli... - [How to Check Types in TypeScript (The Complete Guide)](https://danywalls.com/how-to-check-types-in-typescript): Learn how to check and validate types in TypeScript at compile-time and runtime using typeof, instanceof, the in operator, discriminated unions, custom type guards, and Zod or Valibot. - [3 Ways of Type Transformation in Typescript](https://danywalls.com/3-ways-of-type-transformation-in-typescript): When we use types or interfaces, the typescript compiler enforces the object fit with them to avoid runtime errors for missing fields. Sometimes we want the flexibility to create an object without breaking the contract with the interface type. For ex... - [Maximizing Performance with Angular and RxJS: A Guide to Caching Data](https://danywalls.com/maximizing-performance-with-angular-and-rxjs-a-guide-to-caching-data): When we build an app, some data like the menu and options don't change with frequency. The best approach is to cache it because when the user moves around the app, the data to the server again impacts the speed and user experience. Rxjs provide us wi... - [Transform Your Data, Transform Your App: The Magic of Angular Pipe](https://danywalls.com/transform-your-data-transform-your-app-the-magic-of-angular-pipe): Angular help us to convert values for display using Pipes; the pipes are a way to transform input data to a desired or wished output. A bad practice is to use a method in the template to convert data because it hits the performance; when you need to ... - [Combine Async Pipes in Angular: From combineLatest to Signals and @let](https://danywalls.com/combine-async-pipes-in-angular-how-to-avoid-multiple-pipes): Learn how to avoid multiple async pipes and duplicate subscriptions in Angular templates using combineLatest, modern Signals (toSignal), and the @let template syntax. - [How to handle and catch errors in Rxjs](https://danywalls.com/how-to-handle-and-catch-errors-in-rxjs): In Rxjs, when we work with observables handling the errors is a bit confusing for beginners because you can think of a try-catch, but Rxjs comes with operators to manage it, so what can I use and when? Let's move to each step with code, the example u... - [Understanding Composition vs. Inheritance in Angular](https://danywalls.com/understand-composition-and-inheritance-in-angular): Why class inheritance often leads to constructor hell in Angular, and how to use the Directive Composition API (hostDirectives) and inject() for clean code. - [How to Share Data Between Components in Angular](https://danywalls.com/how-to-share-data-between-components-in-angular): When we build components in an application, we maybe need to share or send data from parent to child without a direct connection. 👉🏽 Why pay for hosting? Click here to deploy your Angular apps for free on a reliable VPS Angular provides different... - [How to hide computer name in OSX terminal](https://danywalls.com/how-to-hide-computer-name-in-osx-terminal): I love to have a clean terminal, the name of the computer is a piece of information not relevant to read every single time. I'm still using the bash shell. echo "export PS1='$ '" >> ~/.bash_profile . ~/.bash_profile For zsh users add the following ... - [How to show the git branch in the terminal](https://danywalls.com/how-to-show-the-git-branch-in-the-terminal): I'm a git Kraken lover but sometimes surf into my projects. I love to know in which branch I'm working. Edit the .bash_profile and paste the following lines. parse_git_branch() { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/ (\1)/' ... - [How To Test Private Methods in Typescript](https://danywalls.com/how-to-test-private-methods-in-typescript): Sometimes we need to test a private method, and Yes, maybe it's not a best practice, but in my case, I have a situation when I need to add a test to my private method, and if you have the same situation I hope it helps you. My example is a service wi... - [How To Mock Dependencies With Jest](https://danywalls.com/how-to-mock-dependencies-with-jest): When we want to test our code, some things have dependencies inside, and you don't want to call this stuff. You won't be sure your code works, not external dependencies or external code unrelated to my code. Today we will add tests to our example wea... - [My Yearly Summary: 2021 Edition](https://danywalls.com/my-yearly-summary-2021-edition): The 2021 year was good, professional, technical, and personal, but I'm 38 years old, so I can't learn too much stuff simultaneously. I'm learning slowly; similar to 2020, I'm only spending my energy on topics related to my job to make my life easy. I... - [How To Migrate from Jasmine to Jest and Testing Library in Angular](https://danywalls.com/how-to-migrate-from-jasmine-to-jest-and-testing-library-in-angular): Angular, by default, comes with Jasmine; it is a great testing framework. I spent one year and a half running and writing tests with Jasmine, it works, but the market is moving to Jest and Testing library. Don't get scared because Jest is more straig... - [How To Learn Docker Compose Step-by-Step Guide](https://danywalls.com/how-to-learn-docker-compose-step-by-step-guide): If you work with docker, typing for every action is not a good deal, and sometimes it can be a nightmare because a typo mistake breaks our process, rerunning all commands. Today, we will learn how Docker-compose makes our experience with docker easy ... - [Get start with Typescript and Parcel](https://danywalls.com/get-start-with-typescript-and-parcel): Typescript is a technology that grows every day. Companies like Slack, Airbnb, or Google are changing their javascript codebase to Typescript. Frameworks like Vue, React, and (Angular) are using Typescript for writing maintainable code. These steps s... - [How To Get Started with Docker: A Step-by-Step Guide for Beginners](https://danywalls.com/how-to-get-started-with-docker-a-step-by-step-guide-for-beginners): Being ready to deploy your apps with Docker is a higher-demand knowledge today, and this article will guide you (and me) from zero to surviving with Docker. The guide's key features are: Install and run the docker Create and build images Mount vol... - [How to simplify and organize imports in Typescript](https://danywalls.com/how-to-simplify-and-organize-imports-in-typescript): Sometimes we have a long list of imports, with files that come from the same place, it makes our code noisy and a bit longer, something like: import { BeersService } from './services/beers.service'; import { WhiskyService } from './services/whiski.... - [How To Use Angular Resolvers](https://danywalls.com/how-to-use-angular-resolvers): When we go to a party, I love to have all beers ready to drink and take one, but sometimes taking time to pick from the fridge to the table and stay waiting is not a good experience. The same happens with our users working with our angular apps; we s... - [How to Manage Global Objects in Angular: Best Practices](https://danywalls.com/how-to-manage-global-objects-in-angular-best-practices): When we use external libraries, it is widespread to declare and use a global object. But the price to pay is to get a complex testing scenario and, of course global an object like magic is not a “good practice”. How do you tell Angular about an exter... - [A Guide to Content Projection in Angular: Step-by-Step](https://danywalls.com/a-guide-to-content-projection-in-angular-step-by-step): One of the simplest dishes to prepare is a burger. Though the base remains the same, its contents can vary – so let's create our versatile burger component. Today we explain how to use ng content to provide an area flexible and multiple slots. Use n... - [How to use HSL and calc functions in CSS to build darken and light colors](https://danywalls.com/how-to-use-hsl-and-calc-functions-in-css-to-build-darken-and-light-colors): Sass provide darken and lighten mixins to make our colors looks darken or lighten, but how to do it without a preprocessor, only with the power of CSS ? We will learn how to use hsl and calc) functions to build darken and light colors. Demo Feel free... - [Angular Component Theming: A Beginner's Guide](https://danywalls.com/angular-component-theming-a-beginners-guide): When we build components, it needs to be flexible, because they can be used in many places or contexts, sometimes changing layout and colors. For example, Our customer wants a list of contacts; it needs to show as a card with the picture, name, and d... - [The Power of Angular.json: How to Simplify and Clean Up Your Sass Imports](https://danywalls.com/the-power-of-angularjson-how-to-simplify-and-clean-up-your-sass-imports): When we work with Sass and Angular, importing files is a very common task, and if you have more than 10 files and want to change the path of your sass structure? @import 'shared/styles/colors'; @import 'shared/forms/input'; @import 'shared/forms/sele... - [Understanding One-Way and Two-Way Data Binding in Angular](https://danywalls.com/understanding-one-way-and-two-way-data-binding-in-angular): Today I was helping a new guy in angular with differences between the bind data because it provides 2 ways to move data to DOM, One-way and two-way data binding. It helps us to build dynamic apps. It binds the data from our component to the DOM, unid... - [Getting Started with Server-Side Rendering in Angular](https://danywalls.com/getting-started-with-server-side-rendering-in-angular): Last month I set up my blog with Angular Universal (Server Side Render); this is about my steps in installing SSR in my blog, so keep in mind a simple blog with only text with HTTP requests to contentful, so it is a real scenario, but the simple case... - [Refactor your code using renaming Imports](https://danywalls.com/refactor-your-code-using-renaming-imports): I'm refactoring an Angular code, and I need to have the same filenames while finishing the refactor. My solution was to rename my imports. It is a great way to use a different name or alias for my classes and modules. For example, you can import a si... - [How to measure javascript code with performance.now()](https://danywalls.com/how-to-measure-javascript-code-with-performancenow): Sometimes, we want to know how is the performance or time spent in some function or process can be solved using performance.now(). performance.now() help us get time in milliseconds, and we can measure the time between some function completing his pr... - [Difference between 'extends' and 'implements' in TypeScript](https://danywalls.com/difference-between-extends-and-implements-in-typescript): Today, a friend ask about the difference between extends and implements. class Media { format: string; } class Video extends Media {} class Image implements Media {} The short answer for him was: extends: The class get all these methods and proper... - [How to Test Errors with Jest in Typescript](https://danywalls.com/how-to-test-errors-with-jest-in-typescript): I'm continuing with Jest and typescript, we already know how to expect and assert variables and objects in our code, next step is handling errors. The Calculator has a new requirement if the type of calculation is not +,- or / we need to throw an err... - [How to speed coding with 20 VSCode extensions](https://danywalls.com/how-to-speed-coding-with-20-vscode-extensions): I'm VSCode fan, this is my 20 VSCode extensions in my workflow. A special description for my top 3. 1-TabNine is the most powerful extension for autocomplete and help with your code. https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine... - [How to use CSS Animation with examples](https://danywalls.com/how-to-use-css-animation-with-examples): I continue fixing my CSS weakness and today is time for the CSS Animation. CSS helps us create animation using the keyword @keyframes, it helps to set the initial state for properties and the amount of time it will get during the animation. We chang... - [How to use transitions and transform in CSS](https://danywalls.com/how-to-use-transitions-and-transform-in-css): Another good way to add great effects with CSS is using transitions, it helps to transform CSS properties from one to other smoothly with duration between them. The two keys properties to get it are: transition-property: set which property we want t... - [How to use CSS Gradients to create images effects.](https://danywalls.com/how-to-use-css-gradients-to-create-images-effects): Sometimes we want to add the effect of a nice color into our page images. The CSS gradients can help to do it. If you didn't work before with gradients, no problem, I will give a quick overview of it. The CSS gradient helps us to define smooth transi... - [How to learn CSS Positions with examples](https://danywalls.com/how-to-learn-css-positions-with-examples): If you are a front-end developer, knowing to position elements with css is critical knowledge. CSS has five position types. I will try to write a small example with each of them. Every CSS Position example use the following HTML structure
... - [How to use CSS Pseudo Elements](https://danywalls.com/how-to-use-css-pseudo-elements): Sometimes style a specific part of an HTML element like the first letter of h1 or append at begin or after, style the first line, my default solution is use JavaScript but not is the best approach if CSS provide a way to solve with Pseudo elements. T... - [How to Speed up Karma and Jasmine Tests with ChromeHeadless](https://danywalls.com/how-to-speed-up-karma-and-jasmine-tests-with-chromeheadless): I'm working with Jasmine and Karma because it is the default toolset for testing in Angular. It works, but one downside is the browser by default for tests runner. The browser is a bit slow for running, and in the CI, it impacts the time of execution... - [How to use CSS Pseudo classes with examples](https://danywalls.com/how-to-use-css-pseudo-classes-with-examples): I continue fixing my CSS weakness, and today is time for the Pseudo-classes. The Pseudo-classes help us to define a particular state of an element. The pseudo-class are determined using : maybe you are used before with links with something like a:ho... - [How to use CSS Combinators with examples](https://danywalls.com/how-to-use-css-combinators-with-examples): I continue fixing my CSS weakness, and today is time for the CSS Combinators. Sometimes, we want to select elements without affecting others and understand the critical relationship between elements. The CSS Combinators help to write a better CSS sel... - [Simplifying Nested Async Subscriptions in Angular: A Practical Example](https://danywalls.com/simplifying-nested-async-subscriptions-in-angular-a-practical-example): One way to subscribe to observable in Angular is async pipe into the HTML template. It is easy but when you have several subscription use ng-container with *ngIf is a common solution, like :