Dariusz Kalbarczyk’s Post

🔹 Architecting Angular Apps for High Performance Workshop 🔹 Join Michael Hladky & Julian Jandl for an advanced full-day workshop on Architecting #Angular Apps for High Performance, happening the day before NG Poland Conf. 📅 Date: Nov 5, 2024 📍 Location: ADN Conference Center, Warsaw ⏰ Time: 10:00 - 17:00 (stationary & online) Workshop Highlights: - Control the Browser Render Pipeline – Learn how the browser interprets code, detect bottlenecks, and write optimal code for peak performance. - Master the #JavaScript Event Loop – Delve into the JavaScript engine and discover techniques to prevent slowdowns in real-world applications. - Measure & Optimize Core Web Vitals – Understand metrics like LCP, CLS, and TTFB, and gain skills to improve your performance score. - Go Zoneless with Angular’s New #ChangeDetection – Leverage Angular’s zoneless features for faster change detection. - CSS and DOM Performance Best Practices – Apply cutting-edge CSS and DOM techniques to minimize reflows and avoid layout thrashing. - Optimize Network Requests – Identify and resolve network bottlenecks to streamline data consumption and enhance #AppPerformance.   🔗 https://lnkd.in/dZgEyn6a Gain the expertise needed to build high-performing Angular applications and optimize every facet of your app’s performance!

Wrapping Up My Weekend Project: InvoiceDesigner. The idea behind this project was simple: build internal business software without needing a frontend developer or any JavaScript frameworks like React, Angular, or Vue.js - and no npm dependencies either. Is the code perfect? Absolutely not! 😄 It’s been 10 years since I last programmed, and I worked on this during weekends for fun. A huge thank you to everyone who showed interest, starred ⭐ the GitHub repo, and shared ideas for features and improvements - many of them made it into the final version! InvoiceDesigner is open-source (MIT license). Here’s what it does: ✅ Lets users customize invoice print layouts without needing a developer ✅ Add, move, and tweak elements to match business needs effortlessly ✅ No JavaScript, no frontend frameworks — just pure C# and MudBlazor 🔗https://lnkd.in/eSZ6M_cH Thanks for all the support—it’s been a fun ride!

🚀 Exciting News for Angular Enthusiasts! 🌟 I’m thrilled to share my latest Medium series focused on Angular, where I dive deep into its powerful features, best practices, and tips for building robust applications. Whether you're a beginner looking to understand the fundamentals or an experienced developer seeking to enhance your skills, this series has something for everyone! In this series, you’ll discover: Core Concepts: A breakdown of Angular's architecture and how it operates. Practical Tutorials: Hands-on examples to help you implement key features in your own projects. Best Practices: Proven techniques to optimize performance and improve maintainability. Join me on this journey to master Angular and take your web development skills to the next level! 💻✨ 🔗https://lnkd.in/gJEdF4qn Feel free to share your thoughts and experiences in the comments! Let’s learn together!

Progress. I moved on to the frontend after making the stateless server with the interfacing api. Now the frontend application works with the api to authenticate the user and assign user roles based on the specified endpoints. The front end is built using react js (for ease in ui implementation) in tandem with tailwindcss for styling. It uses the native fetch api(I choose it to have a feel of the core api interface 😂). It also uses typescript

🚀 Exploring the Power of React and Angular: Which Framework Suits Your Next Project? React and Angular are two of the most popular front-end frameworks, each with unique strengths that make them invaluable for modern web development. 🔹 React: Best for dynamic and component-based UIs. Lightweight and easy to integrate with other libraries. I’ve used React to build scalable applications, like Tour and Travel Project: https://lnkd.in/gYtqDbXg , leveraging its virtual DOM for optimized performance 🔹 Angular: A complete framework with powerful features like two-way data binding and dependency injection. Ideal for enterprise-scale applications. I recently utilized Angular to Online Movie Ticket System: https://lnkd.in/g5zR2n2N, achieving faster development cycles with its CLI and built-in tools. 💡 Key Takeaway: The choice between React and Angular often depends on project requirements and scalability needs. As a developer, I enjoy leveraging both frameworks to craft user-centric solutions that drive results. Check my portfolio: https://lnkd.in/d5sA3itv Check my GitHub: https://lnkd.in/dAiSEw9w

Last week, I shared some notes on what I learned from watching React Conf. With so many videos from the conference, I usually cherry-pick a few to watch. I did the same with the recent Google I/O, focusing mainly on the Web at I/O. You can find all my notes from Google I/O here: https://lnkd.in/gbHUhXHc I remember someone once said that if you manage to watch one good talk every week, you’ll learn a lot over a year—52 talks at least. I think I watch more than 52 a year 😂, especially with so many conferences and events releasing their videos. It's always exciting to learn about cool features from the Angular team, especially since I'm a GDE in Angular. This helps me advocate for these features in our community—everyone's especially so hype about going zoneless! "The latest in Web UI" from Una Kravets was also packed with exciting updates: 1. Novel interactive experiences: Scroll-driven animations, View Transitions (I just spoke about View Transitions at CityJS a couple of weeks ago). 2. Engine-enabled UI components: Popover API, Anchor positioning, Customisable Select (yes, we can finally customise the select—remember the flag dropdown?). 3. Improvements in Architecture, Layout, Typography, and Responsiveness. And yes, my favourite talk was "Navigating the JavaScript Framework Ecosystem" by Addy Osmani. It’s such a great summary of Angular, React, Next.js, Remix, Vue/Nuxt, Astro, and Svelte/SvelteKit in just over 40 minutes 🎉🎉🎉 If you have any good talks from any conference that you’d like to recommend, feel free to leave them in the comments. I’d really appreciate it!

Ever wondered how to enhance your Angular app's interactivity by responding to specific key presses? Dive into the world of key event binding with Angular! Whether it's triggering actions on 𝐄𝐧𝐭𝐞𝐫, 𝐄𝐬𝐜𝐚𝐩𝐞, or any other 𝐤𝐞𝐲, Angular makes it a breeze. With Angular's event binding syntax, you can specify the exact key or key code you want to listen for, adding precision and control to your user interactions. So instead of doing this in the template + typescript file: 𝐓𝐞𝐦𝐩𝐥𝐚𝐭𝐞: <input (keyup)="onKeyup($event)"> 𝐓𝐲𝐩𝐞𝐬𝐜𝐫𝐢𝐩𝐭: onKeyup(event: KeyboardEvent) { if (event.key === 'Enter') { // Action to be performed when Enter key is pressed } } We can just do this instead: 𝐓𝐞𝐦𝐩𝐥𝐚𝐭𝐞: <input (keyup.enter)="onEnterKeyPressed()"> 𝐓𝐲𝐩𝐞𝐬𝐜𝐫𝐢𝐩𝐭: onEnterKeyPressed() { // Action to be performed when Enter key is pressed } And be aware that this also works with modifiers, such as shift, alt, control, and also command from Mac. Ready to level up your app's interactivity? Let's unlock the power of key event binding in Angular! . . . . . . . . . . #angular #keyeventbinding #interactivity #angulardevelopment #developerexperience #userexperience

I just completed "Angular 17+ Fundamentals" by Mark Thompson on Frontend Masters! If you want to create faster, more responsive, and more dynamic Angular apps, this course is the answer. It covers the newest tools and techniques to modernize your development. https://lnkd.in/gAbrc5sS 

Just finished the Angular 17+ Fundamentals course on Frontend Masters by Mark Thompson. Contents: - Displaying-dynamic-data - Component-composition - Control-flow-if & Control-flow-for - Input-output - Routing-basics - Template-driven-forms - Reactive-forms - Dependency-injection - Angular-signals - Deferrable-views #angular #web_dev #frontend

الحمدلله 🤍 I’ve been developing a modern, feature-rich eCommerce application using the following tech stack and patterns 🔹 React 🔹 TypeScript for enhanced type safety and maintainability 🔹 Redux Toolkit for efficient global state management 🔹 Render Props Pattern for reusable, flexible components 🔹 TypeScript Alias Paths to simplify imports and keep code organized 🔹 SGR React for seamless SVG rendering 🔹 Redux Persist to keep user data intact across sessions 🔹 Index Exporting for clean, modular code structure 🔹 React Bootstrap for a responsive and user-friendly design