<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Maria Blair</title>
    <description>The latest articles on Forem by Maria Blair (@mashablair).</description>
    <link>https://forem.com/mashablair</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F180818%2F65bf6b98-dacf-4218-94d5-498d8bcf97e4.jpeg</url>
      <title>Forem: Maria Blair</title>
      <link>https://forem.com/mashablair</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/mashablair"/>
    <language>en</language>
    <item>
      <title>How I Entered Web Development for the Wrong Reasons (and Stayed for the Right Ones)</title>
      <dc:creator>Maria Blair</dc:creator>
      <pubDate>Sun, 25 Aug 2024 20:09:46 +0000</pubDate>
      <link>https://forem.com/mashablair/how-i-entered-web-development-for-the-wrong-reasons-and-stayed-for-the-right-ones-3n5m</link>
      <guid>https://forem.com/mashablair/how-i-entered-web-development-for-the-wrong-reasons-and-stayed-for-the-right-ones-3n5m</guid>
      <description>&lt;p&gt;Ten years ago, I entered the web development industry for all the wrong reasons, chasing money and escaping a job I loathed. But I ended up staying for reasons I never expected.&lt;/p&gt;

&lt;p&gt;There’s so much confusion these days.  Lots of people are considering careers in tech, or switching into tech from their existing job.  There is so much money in tech, fairly low barrier of entry (comparing to med school or attorney license).  And yet, people are getting laid off, AI seems to be taking over, uncertainty is overwhelming.&lt;/p&gt;

&lt;p&gt;Last week I mentored another new Dev who’s finishing his CS degree and technically shouldn’t have any trouble getting the job as a software engineer, and yet here we are.  &lt;/p&gt;

&lt;p&gt;A friend just asked me to help her break into tech.  She wants to know what language to pick up, she wants her first job to be at least $80K, she wants to know how soon it’ll happen…  Is she asking the wrong questions? &lt;/p&gt;

&lt;p&gt;Just two years ago software engineering market was booming.  Certainly a bullish market for devs, and now it’s Ice Age.  Folks paid tens thousands of dollars for coding bootcamps, a ton more thousands for CS degrees and now what?  One guy I know said “screw this” and went to work as a barista at a coffee shop.  After paying $12K for a bootcamp.&lt;/p&gt;

&lt;p&gt;And yet, my response is still the same.  Try it.  Take some programming classes.  You will know pretty quickly if you love it or not.  If you find yourself lost in the flow creating a little Python app and the world disappears for a few blissful moments…  In that case, stay, you’re probably in the right place.  Bullish market or Ice Age, doesn’t matter so much.  &lt;/p&gt;

&lt;p&gt;Back to those wrong reasons.  10 year ago I needed money and I hated my last job.  Someone recommended programming.  Take some online coding classes, they said.  You can get your first job with at least $60K, they said.  (It actually happened exactly like that…)&lt;/p&gt;

&lt;p&gt;But those were, of course, the wrong reasons to become a programmer.  HTML and CSS were exciting right away.  JavaScript not so much — it was confusing and scary.  Until I saw something.  Something that really fascinated me.  I was learning the Object Oriented programming and was creating a Dog object from the Animal prototype, and I could extend the Dog object to create different types of dogs.  Sounds ridiculous, right?  And yet, it was like magic to me.  This was paradigm-shifting — to be able to transform the world into code, find the patterns, and solve the problems there.  &lt;/p&gt;

&lt;p&gt;This is when I knew I should stay in tech. These were the right reasons.  The love of tinkering, being curious about how things work.  Being able to re-create the physical world into another dimension, more organized, more predictable, more scalable, where you are the big great Ruler.  Until stuff breaks and you spend 2 days debugging, questioning your life choices.&lt;/p&gt;

&lt;p&gt;I think tech is all around us these days.  It’s great to have understanding of different things, regardless of what we end up doing.  But no one really knows what jobs in 10-15 years will look like.  I think lots of jobs don’t even exist yet, so we (or our kids) can’t study them at schools.  Instead we can study the world, the basics of economics, maybe coding, or maybe biology, or maybe philosophy and shoemaking, who knows.  &lt;/p&gt;

&lt;p&gt;But most importantly, we can become better of what we humans are so amazing from the start: adaptability.  Adopting to the ever-changing world around us, being flexible and curious. &lt;/p&gt;

&lt;p&gt;In the end, whether you’re just starting out or deep in the trenches, tech is more than a possibility of a good job.  It’s even more than coding.  It’s about embracing curiosity, adaptability, and the ever-evolving landscape of our world. &lt;/p&gt;

&lt;p&gt;&lt;em&gt;(This article was NOT generated with AI tools.)&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>womenintech</category>
      <category>devrel</category>
      <category>beginners</category>
    </item>
    <item>
      <title>My Company Just Made Me 2 Years Younger</title>
      <dc:creator>Maria Blair</dc:creator>
      <pubDate>Sat, 03 Aug 2024 22:55:10 +0000</pubDate>
      <link>https://forem.com/mashablair/my-company-just-made-me-2-years-younger-31p8</link>
      <guid>https://forem.com/mashablair/my-company-just-made-me-2-years-younger-31p8</guid>
      <description>&lt;p&gt;At &lt;a href="https://www.livedatatechnologies.com/" rel="noopener noreferrer"&gt;Live Data Technologies&lt;/a&gt;, we have a unique bonus: an extra $100 each week if we participate in the “LDT Cardio Challenge.”&lt;/p&gt;

&lt;p&gt;So, what’s the “LDT Cardio Challenge”? It’s simple: exercise three times a week for 30 consecutive minutes, keeping your heart rate at or above 130 bpm.&lt;/p&gt;

&lt;p&gt;Why? Because based on latest research, doing cardio in zones 2 and 3 three times a week is great for cardiovascular health, cognitive function, the immune system, and sleep. Plus, it boosts mental health, making people happier without any medication. And happy and healthy employees perform better at work. It’s a win-win!&lt;/p&gt;

&lt;p&gt;Despite its simplicity, maintaining this consistency isn’t easy. It depends on your cardiovascular health, endurance, and VO2 max/HRV. I struggled to hit this level consistently, even though I consider myself fairly active (closing my Apple Fitness rings most days) and used to be a college athlete. Finally, three weeks ago I was able to start exercising this way consistently and something magical happened. 🪄&lt;/p&gt;

&lt;p&gt;According to my &lt;a href="https://ouraring.com/" rel="noopener noreferrer"&gt;Oura ring&lt;/a&gt;, my cardiovascular age dropped from +1 year to -1 year (based on my chronological age) last week. That’s right—my heart just got two years younger in three weeks! Nothing else changed in my lifestyle, besides starting that cardio challenge. Alongside this, my cardio capacity and sleep quality have also improved, also as measured by Oura.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmdlbnh5na91rtzxftg6n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmdlbnh5na91rtzxftg6n.png" alt="screenshot of my dashboard in Oura" width="800" height="867"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While it hasn't been easy, it's incredibly motivating. I love the straightforwardness of having a clear plan and tracking my progress by looking at data. 📈&lt;/p&gt;

&lt;p&gt;I must be working for a data tech company. 😂&lt;/p&gt;

&lt;p&gt;The magic of this formula is accessibility and effectiveness.  Everyone (even me!) has 1.5 hours per week to exercise.  No special equipment or schedule needed.&lt;/p&gt;

&lt;p&gt;Exercising keeps us strong, boosts our cardiovascular fitness, and does wonders to our mental well-being.  It also makes us look good.  But can exercise actually make us hotter AND smarter?  &lt;/p&gt;

&lt;p&gt;According to recent research by Max Lugavere:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A recent study decided to dig deep into this by reviewing all the existing research on how exercise affects cognitive functions in healthy people. They conducted a systematic review and meta-analysis, looking at 54 randomized controlled trials with over 6,000 participants. They examined how different types of exercise impacted five key cognitive areas: overall cognition, executive function, memory, attention, and information processing. The verdict? Exercise benefits all these cognitive domains. Not so shocking, but here’s the fascinating part: different types of exercise had different effects on specific areas of cognition. Aerobic exercise, like running or cycling, had the greatest impact on overall cognition. Resistance training, such as weightlifting, was the champ for boosting executive function. And mind-body exercises like yoga or tai chi were the best for improving memory. While everyone benefitted from exercise, older adults reaped the most cognitive benefits, showing significant improvements in overall cognition, executive function, and memory. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Fascinating!  So if you want to keep your (or your employees') mind sharp and boost your brain power, especially as you get older, you know what to do.  &lt;/p&gt;

&lt;p&gt;&lt;em&gt;Note: This content was NOT generated by AI.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>mentalhealth</category>
      <category>employeeexperience</category>
      <category>softwareengineering</category>
    </item>
    <item>
      <title>Why use Angular in 2024</title>
      <dc:creator>Maria Blair</dc:creator>
      <pubDate>Sun, 21 Jul 2024 22:56:11 +0000</pubDate>
      <link>https://forem.com/mashablair/why-use-angular-in-2024-34kh</link>
      <guid>https://forem.com/mashablair/why-use-angular-in-2024-34kh</guid>
      <description>&lt;p&gt;As a web developer, you have many excellent options for your frontend in 2024.  We are truly lucky to have such abundance.  But with so many options, what do you choose?  🤯  I worked with Angular for the last two years. Here are my 7 reasons to choose Angular:&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Turn-key Framework That Scales
&lt;/h2&gt;

&lt;p&gt;Angular is a comprehensive framework created and maintained by Google. It provides a complete solution for developing serious enterprise web apps. Unlike React that requires additional libraries for features like routing, state management, or form handling, Angular includes all these features out-the-box. No more decision fatigue! ✅ &lt;/p&gt;

&lt;p&gt;A lot of things are included so you have less third-party dependencies to worry about.  Which is a big deal if your project is 2+ years old and your job is to keep it up-to-date.  &lt;/p&gt;

&lt;p&gt;Speaking of personal projects, lots of them never happen simply because devs are too overwhelmed with choices for every part of the apps. Simplicity helps.  &lt;/p&gt;

&lt;h2&gt;
  
  
  2. Backed by Google, Robust Ecosystem
&lt;/h2&gt;

&lt;p&gt;Angular has a robust ecosystem supported by a large community and backed by Google. This means you have access to a wealth of resources, including documentation, tutorials, libraries, and third-party tools. The strong community support ensures that you can find solutions to common problems and stay updated with the latest best practices.&lt;/p&gt;

&lt;p&gt;Lately, Google has been on a pretty predictable schedule, shipping backwards-compatible updates to Angular every 6 months.  Most of the times you can upgrade by simply running the CLI command.  &lt;/p&gt;

&lt;h2&gt;
  
  
  3. State Management with RxJS or NgRx
&lt;/h2&gt;

&lt;p&gt;Managing the state of an application can be challenging, especially as it grows in complexity. Angular leverages the power of RxJS, a reactive programming library, to handle asynchronous operations and state management effectively. RxJS provides a range of operators/pipes that make it easier to work with observables and manage data streams in a reactive way.&lt;/p&gt;

&lt;p&gt;For a more complex state management, Angular developers often turn to NgRx, a state management library that integrates seamlessly with Angular and is built on top of RxJS. NgRx follows the Redux pattern, providing a single source of truth for the application state and enabling predictable state transitions. It makes it easier to debug and test applications since the state changes are traceable and maintainable.&lt;/p&gt;

&lt;p&gt;Let's import RxJS into our project then fetch and map some data for our service:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// user.service.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Injectable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;HttpClient&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/common/http&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;catchError&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs/operators&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;providedIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;UserService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;apiUrl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://jsonplaceholder.typicode.com/users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;HttpClient&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

  &lt;span class="c1"&gt;// Fetch users from API and transform data&lt;/span&gt;
  &lt;span class="nf"&gt;getUsers&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt; &lt;span class="nx"&gt;Observable&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="kr"&gt;any&lt;/span&gt;&lt;span class="p"&gt;[]&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;apiUrl&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;users&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;email&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;email&lt;/span&gt;
      &lt;span class="p"&gt;}))),&lt;/span&gt;
      &lt;span class="nf"&gt;catchError&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;error&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Error fetching users&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;error&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
      &lt;span class="p"&gt;})&lt;/span&gt;
    &lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  4. Dependency Injection
&lt;/h2&gt;

&lt;p&gt;Angular's built-in dependency injection (DI) system enhances the modularity and testability of your application. With DI you can inject services and other dependencies into your components, making it easier to manage and test your code. This leads to more maintainable and scalable applications.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Injectable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;providedIn&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ExampleService&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Data from service&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;ExampleService&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./example.service&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-example&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`&amp;lt;p&amp;gt;{{ data }}&amp;lt;/p&amp;gt;`&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;ExampleComponent&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;string&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="nf"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;exampleService&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;ExampleService&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exampleService&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getData&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Separation of concerns. Nice. &lt;/p&gt;

&lt;h2&gt;
  
  
  5. Powerful CLI
&lt;/h2&gt;

&lt;p&gt;Angular's Command Line Interface (CLI) is a great tool that simplifies/speeds up the development process. The CLI can generate components, services, modules, and more with simple commands, ensuring best practices and reducing the amount of boilerplate code. It also provides tools for testing, building, and deploying your application.&lt;/p&gt;

&lt;p&gt;With these four lines you can create the whole project starter in seconds, run the local dev server and see your app in the browser:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; @angular/cli
ng new my-first-angular-app
&lt;span class="nb"&gt;cd &lt;/span&gt;my-first-angular-app
ng serve
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;🪄&lt;/p&gt;

&lt;p&gt;With another line you can create a new component or service and insert it nicely in the project:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ng generate component my-new-component
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Speaking of boilerplate code, looks like it's Google's intention to reduce its amount in the future updates.  Things like Standalone Components are already included.  &lt;/p&gt;

&lt;h2&gt;
  
  
  6. Component-Based Architecture 🧱
&lt;/h2&gt;

&lt;p&gt;Components encapsulate the UI and behavior of a part of your application, making it easier to manage and test, like legos. This architecture allows developers to build complex applications by composing simple, reusable components.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Performance
&lt;/h2&gt;

&lt;p&gt;Angular is designed to build high-performance and scalable web applications. Ahead-of-Time (AOT) compilation, lazy loading, and efficient change detection mechanisms all contribute to the great performance of Angular apps.&lt;/p&gt;

&lt;p&gt;Example of Lazy Loading:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;routes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Routes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;feature&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;loadChildren&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
      &lt;span class="k"&gt;import&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./feature/feature.module&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;m&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;m&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;FeatureModule&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;In 2024, whether you're building a small app or a large enterprise-level solution, Angular provides the tools and features you need to develop high-quality, maintainable, and scalable web experiences.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>angular</category>
      <category>frontend</category>
    </item>
  </channel>
</rss>
