David Shevitz’s Post

Hey Connections, Sharing some core insights into some interesting Angular and UI features - split into 50 days 41/50 - What are deferrable views in Angular? Deferrable views can be used in the component template to defer the loading of select dependencies. (Supported from v16) 🔹 These dependencies include components, directives, pipes, and any associated CSS. 🔑 Key Benefits: ✅  Enhanced Performance: Load components only when needed, reducing the initial payload and helps increasing Core Web Vitals (CWV) score. ✅  Better User Experience: Faster initial page load leads to better UX. ✅  Efficient Resource Management: Optimize the app’s performance by managing resource loading effectively. 🔹 We can use the @defer block which specifies the loading conditions. 🔹 There are other blocks such as @placeholder and @loading to display contents before the @defer block is triggered. 🔹 The @error block allows us to declare content that will be shown if deferred loading fails. 🔹 When a @defer block is triggered, it replaces placeholder content with lazily loaded content. 🔹 There are two options for configuring when this swap is triggered: on and when. Let’s see an example of what we have learned : @defer (on viewport) { <calendar-cmp /> } @loading { <p> loading the calendar</p> } @placeholder { <p> placeholder for calendar </p> } @error { <p>Failed to load the calendar</p> } Let me know if you found this interesting, follow Siddharth for more such insights! 🚀🔍 Adding link to the previous post in comments. 🔗 [sources]: https://lnkd.in/gMtnJ3wc #angular #webdevelopment #performanceoptimization #lazyloading #deferblocks #angular16 #frontend #techtips #softwareengineering, #softwaredevelopment

Angular v19 Released: Top Features and Updates Angular released its next official version, Angular 19, on November 19, 2024. Every year, Angular works and brings out some of the best developer experiences and innovative features to create efficient web applications. Read the entire article: https://lnkd.in/dJCampJx #Angular19 #Angular #WebDevelopment #Frontend #JavaScript #TypeScript #Performance #Security #UI #UX #DeveloperExperience #AngularMaterial #CDK #ReactiveProgramming

Thanks to all the responses yesterday, I was encouraged to create my own table component today. I like that the trade-offs with using a component library vs. a pre-built component remains the same despite the context. For example, in a startup let's say, using pre-built components and styling over them might be a way to go. However, when a component must resemble the mock-up in its entirety, some pre-built components provide configuration at a cost of customization and cannot be used. #ChatGPT goes such a long way. Between my own head and the responses that came from my ChatGPT prompts, here was what I was able to accomplish today in 5 hours: - Edit/Finish/Sort buttons and a select all checkbox inside a control panel - A checkbox column that only appears when edit mode is set to true - Sort functionality for A-z and Z-a - Conditional contentEditable cells depending on state - Pagination (first page, prev page, next page, last page) - Map over an API call I make within a useEffect through axios Between the component file and accompanying CSS, today I banged out around 400 lines of code, which I have no problem understanding, but would admittedly have taken longer to write if I needed to draw it out from scratch. Some people say you shouldn't use ChatGPT, though I still don't get why they would (assuming you're not just copy pasting and praying it works of course!!!!!!!!!! !). I understand that coding makes you better at coding, but to me it's a trade-off. If I was going to speak to you in German or Arabic, I wouldn't get nearly as many thoughts across, because I only speak English. Likewise, if I was going to recreate today's code in Java, it would take me all week or longer, because I only know JavaScript and some Python. The thing I love about ChatGPT is that it allows me to speak in my native language and turn those ideas into JavaScript (or whatever else I need). It isn't a god, it's a godsend. There are plenty of times it falls short or is downright incompetent and unreliable. That is when old-fashioned learning comes into play, and is not an issue, because if literally using AI cannot solve your problem, then well, isn't it encouraging that you have to rely on the ole noggin to get the job done?

Hey Connections, Sharing some core insights into some interesting Angular and UI features - split into 50 days 10/50 - What is the Observer pattern and how does it work? In the previous post, we looked into what an observable is and what it does. To recap, observables are lazy push collections for multiple values, either sync or async. It follows the Observer pattern for achieving the functionality. The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. This pattern is similar (but not identical) to the publish/subscribe design pattern. Coming back to RxJS implementation of this pattern, an Observable is subscribed to with an Observer, and it executes to deliver the following 3 notifications ⇒ next / error / complete Let’s go through each of these: 🔹next: A handler for each delivered value. Called zero or more times after execution starts. 🔹error: A handler for error notification. An error halts the execution of the observable instance and unsubscribes. 🔹complete: A handler for the execution-complete notification. Do not expect next or error to be called again. Automatically unsubscribes. For instance, take the case of a stream of http requests, each request may return a response ⇒ which is handled by the next handler, or fail with some error ⇒ handled by the error handler, and once all the requests are completed, the complete handler is called. [Refer Image] Let me know if you found this interesting, follow Siddharth for more such insights! 🔗[sources]: https://lnkd.in/gbqsRRPY Adding link to the previous post in comments. #angular, #ui, #softwaredevelopment, #softwareengineering, #designpatterns, #design, #frontend

Hey Connections, Sharing some core insights into some interesting Angular and UI features - split into 50 days 18/50 - How to configure a request interceptor? Let’s take a common use case - we would like to add some authorization headers to all the requests. ⚡But what is an auth header? 💡 The HTTP Authorization request header can be used to provide credentials that authenticate a user agent with a server, allowing access to a protected resource. Syntax: Authorization: <auth-scheme> <authorization-parameters> Example: Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l 🔷 Coming back to our use case, we can add our auth interceptor like this: export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> { // Get the auth token from the service. const authToken = this.auth.getAuthorizationToken(); // Clone the request and replace the original headers with // cloned headers, updated with the authorization. const authReq = req.clone({ setHeaders: { Authorization: authToken } }); return next(authReq); } 🔷 Now, to add an interceptor function in the httpClient instance, Angular gives us a new withInterceptors function. bootstrapApplication(AppComponent, { providers: [ provideHttpClient( withInterceptors([authInterceptor])) ] }).catch(console.error); 🔷 Now, the app knows that we have an interceptor configured and all requests will go through it. Let me know if you found this interesting, follow Siddharth for more such insights! 🚀🔍 🔗 [sources]: https://lnkd.in/giTypA2V, https://lnkd.in/gdkKiQjn Adding link to the previous post in comments. #angular, #designpatterns, #ui, #frontend, #softwareengineering, #softwaredevelopment

🔍 Understanding React: Props vs. State 🔍 As React developers, mastering the concepts of props and state is fundamental to building robust and maintainable applications. Let's dive into the key differences between props and state in React! 🚀 🔹 Props (Properties): Props are used to pass data from parent components to child components in React. They are immutable and are passed down the component tree. ✅ Key Points: Props are read-only and cannot be modified by the component receiving them. They are passed down from parent components and are accessible via the this.props object within class components or as arguments in functional components. Props allow for the communication and customization of components, enabling dynamic rendering based on external data or configuration. They are typically used for configuring child components, passing event handlers, or providing data for rendering UI elements. 🔹 State: State, on the other hand, represents the internal state of a component and is managed within the component itself. Unlike props, state is mutable and can be updated using the setState() method. ✅ Key Points: State is an object that holds information about the component's current state, such as data that may change over time or in response to user interactions. It is initialized in the constructor of class components or using the useState() hook in functional components. Changes to state trigger re-renders, allowing React to efficiently update the UI to reflect the new state of the component. State should be treated as immutable, and updates should be performed using the setState() method to ensure React can properly reconcile changes and update the component tree. 🔹 Key Differences: Props are external inputs passed to a component, while state is internal data managed by the component itself. Props are immutable and passed from parent to child components, whereas state is mutable and managed locally within a component. Props are used for configuring and customizing components, while state is used for managing dynamic data and component state changes. Understanding the distinction between props and state is crucial for building modular, reusable, and maintainable React applications. By leveraging props and state effectively, we can create components that are flexible, composable, and scalable, ultimately delivering exceptional user experiences. 💡💻 #React #PropsVsState #FrontendDevelopment #WebDevelopment #ReactJS #StateManagement

Front-end is about so much more than just making things look good, You also need a firm understanding of things like: • Accessibility and performance, • Framework patterns and APl's, • Data fetching and architecture, • Building reusable components, • Browser/device inconsistencies. Each of these areas is pretty big on its own, so it’s okay if you’re not a pro in every single one right away. But getting a basic grasp of these topics is a crucial step in becoming an excellent front-end developer. #frontend #ui

Building user interfaces that stand the test of time can be challenging. Initially, developers face the problem of creating dynamic, responsive designs that can adapt to changing user needs. This often leads to complex codebases that are hard to maintain and slow to update, creating frustration among developers and users alike. Enter React.js. With its component-based architecture, React.js simplifies the development process: ✅ Encapsulated Components: Build self-managing components that streamline the UI development process. ✅ Efficient Updates: Only render changes, making updates faster and reducing load times. ✅ Reusable Code: Enhance productivity and consistency across projects with reusable components. We use React.js to make our development process more efficient, our applications more responsive, and our projects more adaptable to change. #reactjs #softwaredevelopment #enterprisearchitecture

🌟 ⚛️Excited to share some key React design patterns that have transformed the way I build and manage complex applications: 1. Component Composition: Building UIs by combining smaller, reusable components. 2. Higher-Order Components (HOCs): Adding functionality to components through wrapper functions. 3. Render Props: Sharing component logic using a function as a prop. 4. Container and Presentational Components: Separating logic (container) from UI (presentational). 5. Controlled and Uncontrolled Components: Managing form data with React state or the DOM. 6. Context API: Handling global state without prop drilling. 7. Custom Hooks: Encapsulating reusable logic in custom hooks. These patterns not only streamline development but also enhance code maintainability and reusability. What are your favorite React design patterns? #ReactJS #WebDevelopment #frontend #DesignPatterns #CodingBestPractices

🌟 𝗠𝗮𝘀𝘁𝗲𝗿𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀: 𝗣𝗿𝗲𝘀𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻𝗮𝗹 𝘃𝘀. 𝗖𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀! 🚀 In React JS, knowing Presentational and Container Components is vital for scalable apps. 🔷 𝗣𝗿𝗲𝘀𝗲𝗻𝘁𝗮𝘁𝗶𝗼𝗻𝗮𝗹 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀: They render UI elements, focusing on appearance. They're reusable and easy to test. 𝚒𝚖𝚙𝚘𝚛𝚝 𝚁𝚎𝚊𝚌𝚝 𝚏𝚛𝚘𝚖 '𝚛𝚎𝚊𝚌𝚝'; 𝚌𝚘𝚗𝚜𝚝 𝙱𝚞𝚝𝚝𝚘𝚗 = ({ 𝚕𝚊𝚋𝚎𝚕, 𝚘𝚗𝙲𝚕𝚒𝚌𝚔 }) => ( <𝚋𝚞𝚝𝚝𝚘𝚗 𝚘𝚗𝙲𝚕𝚒𝚌𝚔={𝚘𝚗𝙲𝚕𝚒𝚌𝚔}>{𝚕𝚊𝚋𝚎𝚕}</𝚋𝚞𝚝𝚝𝚘𝚗> ); 𝚎𝚡𝚙𝚘𝚛𝚝 𝚍𝚎𝚏𝚊𝚞𝚕𝚝 𝙱𝚞𝚝𝚝𝚘𝚗; 💡 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀: - 𝗨𝗜 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴: Renders UI based on props. - 𝗥𝗲𝘂𝘀𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Encapsulates UI logic for reuse. - 𝗧𝗲𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Easier to test due to clear input-output. 🔶 𝗖𝗼𝗻𝘁𝗮𝗶𝗻𝗲𝗿 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀: Manage state and logic, providing data to Presentational Components. 𝚒𝚖𝚙𝚘𝚛𝚝 𝚁𝚎𝚊𝚌𝚝, { 𝚞𝚜𝚎𝚂𝚝𝚊𝚝𝚎 } 𝚏𝚛𝚘𝚖 '𝚛𝚎𝚊𝚌𝚝'; 𝚒𝚖𝚙𝚘𝚛𝚝 𝙱𝚞𝚝𝚝𝚘𝚗 𝚏𝚛𝚘𝚖 './𝙱𝚞𝚝𝚝𝚘𝚗'; 𝚌𝚘𝚗𝚜𝚝 𝙲𝚘𝚞𝚗𝚝𝚎𝚛𝙲𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛 = () => { 𝚌𝚘𝚗𝚜𝚝 [𝚌𝚘𝚞𝚗𝚝, 𝚜𝚎𝚝𝙲𝚘𝚞𝚗𝚝] = 𝚞𝚜𝚎𝚂𝚝𝚊𝚝𝚎(𝟶); 𝚌𝚘𝚗𝚜𝚝 𝚒𝚗𝚌𝚛𝚎𝚖𝚎𝚗𝚝𝙲𝚘𝚞𝚗𝚝 = () => { 𝚜𝚎𝚝𝙲𝚘𝚞𝚗𝚝(𝚌𝚘𝚞𝚗𝚝 + 𝟷); }; 𝚛𝚎𝚝𝚞𝚛𝚗 <𝙱𝚞𝚝𝚝𝚘𝚗 𝚕𝚊𝚋𝚎𝚕={`𝙲𝚘𝚞𝚗𝚝: ${𝚌𝚘𝚞𝚗𝚝}`} 𝚘𝚗𝙲𝚕𝚒𝚌𝚔={𝚒𝚗𝚌𝚛𝚎𝚖𝚎𝚗𝚝𝙲𝚘𝚞𝚗𝚝} />; }; 𝚎𝚡𝚙𝚘𝚛𝚝 𝚍𝚎𝚏𝚊𝚞𝚕𝚝 𝙲𝚘𝚞𝚗𝚝𝚎𝚛𝙲𝚘𝚗𝚝𝚊𝚒𝚗𝚎𝚛; 💡 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀: - 𝗦𝘁𝗮𝘁𝗲 𝗠𝗮𝗻𝗮𝗴𝗲𝗺𝗲𝗻𝘁: Manages state and logic. - 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝗟𝗼𝗴𝗶𝗰: Encapsulates complex logic. - 𝗧𝗲𝘀𝘁𝗮𝗯𝗶𝗹𝗶𝘁𝘆: Ensures correct handling of state changes. 🌟 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲𝘀: - 𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝗶𝗲𝘀: Presentational for UI, Container for logic. - 𝗔𝗯𝘀𝘁𝗿𝗮𝗰𝘁𝗶𝗼𝗻: Presentational is generic, Container is specific. - 𝗦𝗲𝗽𝗮𝗿𝗮𝘁𝗶𝗼𝗻 𝗼𝗳 𝗖𝗼𝗻𝗰𝗲𝗿𝗻𝘀: Clear division enhances maintainability. 💡 𝗣𝗿𝗼 𝗧𝗶𝗽: - Keep Presentational focused on UI and Container on logic. - Use Containers judiciously to avoid over-engineering. 💬 Share your experiences with React Components or any insights on LinkedIn! 👩💻💬 #ReactJS #ComponentArchitecture #PresentationalComponents #ContainerComponents #DeveloperTips