<?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: Stephen Mutheu</title>
    <description>The latest articles on Forem by Stephen Mutheu (@stephen254).</description>
    <link>https://forem.com/stephen254</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%2F1086137%2F61c82f99-c694-47ea-a0f9-a725e16b4595.jpg</url>
      <title>Forem: Stephen Mutheu</title>
      <link>https://forem.com/stephen254</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/stephen254"/>
    <language>en</language>
    <item>
      <title>CPUs Are Changing – And It’s Getting Weird (But Cool)</title>
      <dc:creator>Stephen Mutheu</dc:creator>
      <pubDate>Sat, 19 Jul 2025 05:29:48 +0000</pubDate>
      <link>https://forem.com/stephen254/cpus-are-changing-and-its-getting-weird-but-cool-4k0m</link>
      <guid>https://forem.com/stephen254/cpus-are-changing-and-its-getting-weird-but-cool-4k0m</guid>
      <description>

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxm7hvv3hneduak6sqo7p.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxm7hvv3hneduak6sqo7p.jpg" alt=" " width="678" height="452"&gt;&lt;/a&gt;&lt;br&gt;
I used to think CPUs were all about clock speeds and core counts. You know, the usual i3 vs i5 vs i7 vs i9 comparisons we all did at some point (admit it, we've all judged a laptop by its processor badge). It was all:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;“&lt;em&gt;Mine has 8 cores and a turbo boost up to 4.5 GHz. Your PC’s not even trying.&lt;/em&gt;”&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;But the more I dig into what’s happening right now in CPU design, the more I realize — things are shifting fast.&lt;/p&gt;

&lt;p&gt;CPUs are evolving in ways that go far beyond just being “faster.” Now it's about efficiency, specialization, flexibility, and in some cases... ideology. Let's get into it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;RISC-V: The Open-Source Underdog&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Imagine someone looked at Intel and ARM and said:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"&lt;em&gt;What if CPUs were open-source?&lt;/em&gt;"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That’s RISC-V — a clean-slate instruction set architecture (ISA) that you can implement for free. No licensing fees. No legal teams breathing down your neck. You want to build your own CPU? Go ahead. RISC-V’s got your back.&lt;/p&gt;

&lt;p&gt;That’s why it’s taking off — from hobbyists making homebrew processors to giants like Google, NVIDIA, and Alibaba investing in custom RISC-V cores.&lt;/p&gt;

&lt;p&gt;It’s like the Linux of chip design. Modular, clean, and full of potential. No surprise it’s showing up in microcontrollers, AI accelerators, and even laptops now.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;ARM is Everywhere — and It’s Not Slowing Down&lt;/strong&gt;&lt;br&gt;
ARM chips were once just “the thing in your phone.” But not anymore.&lt;/p&gt;

&lt;p&gt;Apple switched its Mac lineup to ARM (hello, M1/M2/M3). Amazon is using ARM chips (Graviton) in AWS data centers. Even Windows laptops are getting into the ARM game.&lt;/p&gt;

&lt;p&gt;The newer ARMv9 architecture brings improved performance, better security (Confidential Compute), and AI optimizations built in.&lt;/p&gt;

&lt;p&gt;Here’s the kicker: ARM CPUs aren't trying to replace x86 — they’re just sidestepping it with better power efficiency and purpose-built performance.&lt;/p&gt;

&lt;p&gt;It’s like showing up to a heavyweight fight with a ninja — same goal, different strategy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Chiplets: Breaking the Chip into Pieces (On Purpose)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Remember when CPUs were just one big block of silicon?&lt;/p&gt;

&lt;p&gt;Now we’ve got chiplets — smaller silicon pieces connected on a shared substrate. AMD is leading this with their Ryzen and EPYC processors.&lt;/p&gt;

&lt;p&gt;Why bother? Well:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Smaller dies = better manufacturing yields&lt;/li&gt;
&lt;li&gt;You can mix and match components (GPU + CPU + I/O)&lt;/li&gt;
&lt;li&gt;It scales better for massive workloads&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Basically, chiplets are like building a sports team from specialists instead of one giant superstar. More flexible, cheaper, and less risky.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Performance + Efficiency Cores: Like Having Sprinters and Marathon Runners&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Apple really shook things up with their M1 chips by introducing hybrid cores — some are performance-focused (go hard), others are efficiency-focused (save energy).&lt;/p&gt;

&lt;p&gt;Intel followed with their own hybrid architecture in Alder Lake and beyond.&lt;br&gt;
And honestly? It makes sense.&lt;/p&gt;

&lt;p&gt;Why use full-blast cores just to keep your Slack and Spotify running? Use the sprinters when you need raw power. Let the marathoners handle the boring background stuff.&lt;/p&gt;

&lt;p&gt;It’s not just smart — it’s necessary in a world where battery life, thermals, and multitasking all matter.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🤖 CPUs Getting in on the AI Hype&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;CPUs want in on the AI game too.&lt;/p&gt;

&lt;p&gt;Sure, GPUs and TPUs get the spotlight for ML workloads, but modern CPUs are starting to include built-in AI accelerators and vector engines that handle machine learning tasks more efficiently.&lt;/p&gt;

&lt;p&gt;Intel’s doing it. Apple’s doing it. Even ARM cores are packing some AI punch now.&lt;/p&gt;

&lt;p&gt;Soon, you won’t need a full GPU just to run some AI inference — your CPU will handle it on the side like it's no big deal.&lt;/p&gt;

&lt;p&gt;So, What’s the Big Picture?&lt;/p&gt;

&lt;p&gt;The CPU isn’t dying — it’s just changing. Fast.&lt;/p&gt;

&lt;p&gt;We’ve moved from:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🧱 Monolithic silicon → 🧩 Chiplets&lt;/li&gt;
&lt;li&gt;🥵 Power-hungry cores → 🌿 Hybrid energy-efficient designs&lt;/li&gt;
&lt;li&gt;🧑‍💼 Closed ISAs → 🌐 Open-source (RISC-V)&lt;/li&gt;
&lt;li&gt;🏋️‍♂️ General-purpose compute → 🧠 AI-aware silicon&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s not about who has the most GHz anymore. It’s about efficiency, purpose, and scalability. If you're into systems, compilers, or just want to build smarter hardware/software — this stuff matters.&lt;/p&gt;

&lt;p&gt;We're watching a new generation of chips being born, and honestly? It’s exciting to see CPUs getting weird again.&lt;/p&gt;

&lt;p&gt;Thanks for reading. If you’re also down the rabbit hole of system design, CPU trends, or just nerding out on what powers our machines — let’s talk &lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to add CSS to your React Component</title>
      <dc:creator>Stephen Mutheu</dc:creator>
      <pubDate>Thu, 03 Oct 2024 08:24:11 +0000</pubDate>
      <link>https://forem.com/stephen254/how-to-add-css-to-your-react-component-2kb7</link>
      <guid>https://forem.com/stephen254/how-to-add-css-to-your-react-component-2kb7</guid>
      <description>&lt;p&gt;Are you stuck on how to make your component take those amazing styles? Worry no more, here we will discuss three ways that will help you implement your beautiful designs. It's good if you have some understanding of CSS and Javascript while reading this article. Let's dive in!&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Using CSS style sheet.&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This involves writing your own CSS styles in a separate file and then importing it into your component.&lt;br&gt;
Remember to use the .css extension when naming the file. Check the example code below.&lt;/p&gt;

&lt;p&gt;//Your CSS file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;//Import your CSS file to your component.&lt;br&gt;
// You give the CSS file a name of your choice.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      &amp;lt;div&amp;gt;
      &amp;lt;h1&amp;gt;Hello Style!&amp;lt;/h1&amp;gt;
      &amp;lt;p&amp;gt;Add a little style!.&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    );

}
}

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

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Using the CSS module&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Maybe you do not like the first method, or maybe it does not suit your way of writing code.&lt;br&gt;
You can use our second method. Here you'll also create a separate file where you'll write your CSS but this time with a different extension; the &lt;em&gt;.module.css&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;// Your CSS module. &lt;br&gt;
// mystyle.module.css&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;//Import the module to your component.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import styles from './mystyle.module.css'; 

class Car extends React.Component {
  render() {
    return &amp;lt;h1 className={styles.bigblue}&amp;gt;Hello Car!&amp;lt;/h1&amp;gt;;
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Using Inline Styling&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;One can achieve inline styling using the style attribute &lt;code&gt;style='styles here'&lt;/code&gt; However, one has to be careful as whatever goes in the style attribute as a value is not your typical CSS selector but a javascript object, and therefore, it should take the syntax of an object.&lt;/p&gt;

&lt;p&gt;This is what I mean;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class MyHeader extends React.Component {
  render() {
    return (
      &amp;lt;div&amp;gt;
      &amp;lt;h1 style={{color: "red"}}&amp;gt;Hello Style!&amp;lt;/h1&amp;gt;
      &amp;lt;p&amp;gt;Add a little style!&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    );
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice the double curly braces, also, note the key: value pair syntax used to write javascript objects.&lt;/p&gt;

&lt;p&gt;Something else to keep in mind is that when writing thing properties that have two names for instance &lt;code&gt;background-color&lt;/code&gt; one is required to use camelCase &lt;code&gt;backgroundColor&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; You can create an object with all your styling code and call it in the style attribute.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      &amp;lt;div&amp;gt;
      &amp;lt;h1 style={mystyle}&amp;gt;Hello Style!&amp;lt;/h1&amp;gt;
      &amp;lt;p&amp;gt;Add a little style!&amp;lt;/p&amp;gt;
      &amp;lt;/div&amp;gt;
    );
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note the absence of double curly braces.&lt;/p&gt;

&lt;p&gt;I hope this was helpful and you enjoyed reading it. I welcome feedback so that I improve my article next write. Thank you&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>css</category>
      <category>beginners</category>
    </item>
    <item>
      <title>UNCLICKABLE REACT FILE IN GITHUB</title>
      <dc:creator>Stephen Mutheu</dc:creator>
      <pubDate>Thu, 19 Sep 2024 05:34:26 +0000</pubDate>
      <link>https://forem.com/stephen254/unclickable-react-file-in-github-n3b</link>
      <guid>https://forem.com/stephen254/unclickable-react-file-in-github-n3b</guid>
      <description>&lt;p&gt;Recently, as I was making a React app, I encountered this problem. I tried using the commands suggested to resolve it, but in vain. However, I came to a solution that worked for me. Here is the solution step-by-step.&lt;/p&gt;

&lt;p&gt;**1. Go to your text editor's menu, choose the files option, and then select the preference option.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Once you're there, select click settings.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;On the left, click Text Editor and move to the files option.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scroll down to where it says 'Exclude' then delete the .git file. Now you're able to see the git files. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Delete the two git files.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Now you're good to go, initialize git again and start the git processes again.**&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This worked on the vscode editor. You might also need to delete the previously created GitHub repo.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
