<?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>DEV Community: TANITOLUWA IFEGBESAN</title>
    <description>The latest articles on DEV Community by TANITOLUWA IFEGBESAN (@theprinceofprogramming).</description>
    <link>https://dev.to/theprinceofprogramming</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%2F937607%2F31e12c54-fd4a-4190-baba-572d9d0a7d96.png</url>
      <title>DEV Community: TANITOLUWA IFEGBESAN</title>
      <link>https://dev.to/theprinceofprogramming</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/theprinceofprogramming"/>
    <language>en</language>
    <item>
      <title>Gatekeeping Your Software</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Fri, 24 Apr 2026 19:45:57 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/gatekeeping-your-software-3n2i</link>
      <guid>https://dev.to/theprinceofprogramming/gatekeeping-your-software-3n2i</guid>
      <description>&lt;p&gt;My Dad always told me something - you may not be able to certainly prevent a thief from breaking into your house, but it's your duty to make sure they use up all resources (time, energy, money etc) while trying to.&lt;/p&gt;

&lt;p&gt;Gatekeeping your software isn’t about restriction - it’s about control, trust, and accountability. It refers to implementing core security mechanisms i.e authentication, authorization, auditing, and encryption (the “3AE” stack), to ensure that only the right users gain access, can perform permitted actions, are properly tracked, and have their data protected.&lt;/p&gt;

&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%2F8jojhktmlp0mvvovwors.png" 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%2F8jojhktmlp0mvvovwors.png" alt=" " width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Authentication&lt;/strong&gt;&lt;br&gt;
Authentication is the process of verifying the identity of a user, system, or entity before granting access to a platform. It answers the fundamental question: “Who are you?”, and ensures that the entity requesting access is genuinely who they claim to be.&lt;/p&gt;

&lt;p&gt;This process typically involves validating one or more forms of credentials, which fall into three main categories:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Something you know (e.g., passwords, PINs)&lt;/li&gt;
&lt;li&gt;Something you have (e.g., one-time passwords, hardware tokens, authentication apps)&lt;/li&gt;
&lt;li&gt;Something you are (e.g., biometrics like fingerprints or facial recognition)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Most modern systems often combine these factors in what is known as multi-factor authentication (MFA) to significantly reduce the risk of unauthorized access.&lt;/p&gt;

&lt;p&gt;Authentication acts as the first line of defense, just like a gateman to your home, in any secure system. Without it, there is no reliable way to distinguish between legitimate users and malicious actors.&lt;/p&gt;

&lt;p&gt;However, authentication alone does not determine what a user is allowed to do in the system, it only confirms or establishes identity. Once identity is confirmed, the system can then move on to authorization to define permissions and access levels.&lt;/p&gt;

&lt;p&gt;A well-designed authentication system also considers factors such as session management, token expiration, device recognition, location recognition, and anomaly detection to maintain security beyond the initial login.&lt;/p&gt;

&lt;p&gt;In essence, authentication is not just a login step—it is the foundation of trust upon which all other security mechanisms are built.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Authorization&lt;/strong&gt;&lt;br&gt;
Authorization is the process of determining what an authenticated user is allowed to do within a system. While authentication answers “Who are you?”, authorization answers “What are you allowed to do?”&lt;/p&gt;

&lt;p&gt;Once a user’s identity has been verified, the system evaluates their permissions to decide whether they can access specific resources, perform certain actions, or interact with data in defined ways. This ensures that users only operate within their intended boundaries, reducing the risk of misuse, data breaches, or privilege escalation.&lt;/p&gt;

&lt;p&gt;Authorization is typically implemented through access control models, the most common being:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Permission-Based Access Control (PBAC)&lt;/strong&gt;&lt;br&gt;
Permission-Based Access Control focuses on assigning specific actions directly to users. These permissions define how a user can interact with system resources, such as:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Read (view data)&lt;/li&gt;
&lt;li&gt;Write (create data)&lt;/li&gt;
&lt;li&gt;Update (modify data)&lt;/li&gt;
&lt;li&gt;Delete (remove data)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In PBAC, control is highly granular. Each user can be given a tailored set of permissions, making it flexible but potentially harder to manage at scale.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Role-Based Access Control (RBAC)&lt;/strong&gt;&lt;br&gt;
Role-Based Access Control simplifies permission management by grouping permissions into roles. Instead of assigning permissions directly to users, roles are created (e.g., Admin, Editor, Viewer), and each role has a predefined set of permissions.&lt;/p&gt;

&lt;p&gt;Users are then assigned roles, inheriting all the permissions associated with that role. This makes RBAC easier to manage, especially in larger systems, as changes can be made at the role level rather than per user.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Auditing&lt;/strong&gt;&lt;br&gt;
Auditing is the process of recording, monitoring, and analyzing all significant actions performed within a system, along with the identity of the entity that performed them. It answers the critical question: “What happened, who did it, and when?”&lt;/p&gt;

&lt;p&gt;Every meaningful interaction—such as logins, data access, modifications, deletions, permission changes, and system events—can be captured as part of an audit trail. These records typically include details like:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Who performed the action (user or system identity)&lt;/li&gt;
&lt;li&gt;What action was performed (e.g., create, update, delete)&lt;/li&gt;
&lt;li&gt;When it occurred (timestamp)&lt;/li&gt;
&lt;li&gt;Where it originated from (IP address, device, or service)&lt;/li&gt;
&lt;li&gt;What changed (before and after states, where applicable)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Auditing plays a crucial role in enforcing accountability. When users know their actions are being recorded, it discourages misuse and promotes responsible behavior. Beyond that, it provides a reliable way to investigate incidents, debug issues, and understand system behavior over time.&lt;/p&gt;

&lt;p&gt;From a security perspective, auditing helps detect suspicious activities such as unauthorized access attempts, privilege escalation, or abnormal usage patterns. It is also essential for compliance and regulatory requirements, where systems must prove that proper controls and oversight are in place.&lt;/p&gt;

&lt;p&gt;A well-designed auditing system goes beyond simple logging. It ensures that logs are:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Tamper-resistant (cannot be easily altered or deleted)&lt;/li&gt;
&lt;li&gt;Consistently structured (for easy querying and analysis)&lt;/li&gt;
&lt;li&gt;Securely stored (often in &lt;strong&gt;centralized logging systems&lt;/strong&gt;)&lt;/li&gt;
&lt;li&gt;Actionable (integrated with monitoring and alerting tools, most times just a dashboard, or alerting system)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In distributed systems and microservices architectures, auditing becomes even more critical, often requiring correlation IDs and centralized log aggregation to trace actions across multiple services.&lt;/p&gt;

&lt;p&gt;At its core, auditing transforms a system from a black box into a transparent, accountable environment—where every action leaves a trace and no activity goes unnoticed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Encrypytion&lt;/strong&gt;&lt;br&gt;
Encryption is the process of transforming data into an unreadable format using a mathematical algorithm and a cryptographic key, ensuring that only authorized parties can access the original information. It answers the question: “How do we protect data from being understood by anyone who shouldn’t see it?”&lt;/p&gt;

&lt;p&gt;When data is encrypted, it is converted from its original form (plaintext) into an encoded version (ciphertext). This transformation can only be reversed (decrypted) by someone who possesses the correct key.&lt;/p&gt;

&lt;p&gt;Encryption typically relies on two main components:&lt;/p&gt;

&lt;p&gt;An algorithm (the method used to transform the data)&lt;br&gt;
A key (a secret value that controls how the transformation happens)&lt;/p&gt;

&lt;p&gt;There are two primary types of encryption:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Symmetric Encryption&lt;/strong&gt;&lt;br&gt;
This uses a single shared key for both encryption and decryption. It is fast and efficient, making it ideal for encrypting large amounts of data (e.g., databases, files, or network traffic).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Asymmetric Encryption&lt;/strong&gt;&lt;br&gt;
This uses a pair of keys:&lt;/p&gt;

&lt;p&gt;A public key (used to encrypt data)&lt;br&gt;
A private key (used to decrypt data)&lt;/p&gt;

&lt;p&gt;This model is commonly used in secure communications, such as HTTPS, where data can be safely exchanged without sharing a secret key upfront.&lt;/p&gt;

&lt;p&gt;It’s important to distinguish encryption from hashing:&lt;/p&gt;

&lt;p&gt;Encryption is reversible (with the correct key)&lt;br&gt;
Hashing is one-way (used for things like password storage)&lt;/p&gt;

&lt;p&gt;Encryption is critical for protecting data:&lt;/p&gt;

&lt;p&gt;Without encryption, sensitive data—such as user credentials, financial information, or private communications—would be exposed to interception and misuse.&lt;/p&gt;

&lt;p&gt;At its core, encryption ensures confidentiality. Even if unauthorized access occurs, the data remains useless without the proper keys.&lt;/p&gt;

&lt;p&gt;Once all of these checks are in place, you’re sure to give any intruder a hell of a time trying to break in, while also giving your security team valuable time to identify gaps and fix them before they can be exploited.&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;Thanks for reading, would really appreciate any suggestions for improvement or questions&lt;br&gt;
*&lt;/em&gt;&lt;/p&gt;

</description>
      <category>softwareengineering</category>
      <category>security</category>
      <category>architecture</category>
      <category>startup</category>
    </item>
    <item>
      <title>Kubernetes Finally Clicked When I Thought of It Like This...</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Fri, 17 Apr 2026 18:05:54 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/kubernetes-finally-clicked-when-i-thought-of-it-like-this-47eb</link>
      <guid>https://dev.to/theprinceofprogramming/kubernetes-finally-clicked-when-i-thought-of-it-like-this-47eb</guid>
      <description>&lt;p&gt;&lt;strong&gt;Introduction&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I’m Tani, a software engineer with 6 years of programming experience and 4 years working professionally.&lt;/p&gt;

&lt;p&gt;Kubernetes confused me at first, until I started thinking about it like a computer lab.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;KUBERNETES WORKLOAD&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Overview&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Think of Kubernetes as a computer lab filled with multiple laptops (nodes).&lt;br&gt;
Your job is to run applications on these laptops, without manually managing each one.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Pods&lt;/strong&gt;&lt;br&gt;
Pods are the smallest runnable unit in Kubernetes, usually one or more containers running together. &lt;/p&gt;

&lt;p&gt;Imagine images as a laptop placed in the store, and pods as a laptop you have bought and have powered up, and are currently using it in relation to a software application (a standalone runnable piece of software)&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Deployements&lt;/strong&gt;&lt;br&gt;
A Deployment is how you manage stateless applications.&lt;/p&gt;

&lt;p&gt;It:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Defines how your app should run&lt;/li&gt;
&lt;li&gt;Creates and manages ReplicaSets&lt;/li&gt;
&lt;li&gt;Handles updates and rollbacks safely&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Flow:&lt;br&gt;
Deployment → ReplicaSet → Pods&lt;/p&gt;

&lt;p&gt;Analogy:&lt;br&gt;
Like giving IT a standard laptop configuration, and they ensure the right number of laptops are always running and updated.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Deamon Sets&lt;/strong&gt;&lt;br&gt;
DaemonSets ensure:&lt;br&gt;
“Every laptop must run this background tool.”&lt;br&gt;
DaemonSets ensure one pod runs on every node.&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Monitoring agents&lt;/li&gt;
&lt;li&gt;Logging tools&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Think: software that must exist on every laptop.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Stateful Sets&lt;/strong&gt;&lt;br&gt;
StatefulSets are for laptops where:&lt;br&gt;
Data must persist; your laptop always has its data in it even if you restart it 100 times.&lt;/p&gt;

&lt;p&gt;Analogy:&lt;br&gt;
These are personal laptops assigned to specific users, not replaceable like generic ones.&lt;/p&gt;

&lt;p&gt;If Laptop-1 restarts -&amp;gt; it’s still Laptop-1 with its files intact.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Replica Sets&lt;/strong&gt;&lt;br&gt;
ReplicaSets are the system that ensures:&lt;br&gt;
“We must always have 3 working laptops.”&lt;/p&gt;

&lt;p&gt;If one laptop crashes -&amp;gt; it gets replaced immediately&lt;/p&gt;

&lt;p&gt;Analogy:&lt;br&gt;
Like an auto-repair + replacement system in your lab.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Replication Controllers&lt;/strong&gt;&lt;br&gt;
A replication controller is the older version of the replica set that was used in the early versions of Kubernetes to ensure a specified number of pods were running at any given time&lt;/p&gt;

&lt;p&gt;Jobs&lt;br&gt;
A Job runs a task to completion, then stops.&lt;br&gt;
“Turn on a laptop, run this task, then shut it down.”&lt;/p&gt;

&lt;p&gt;Example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install software&lt;/li&gt;
&lt;li&gt;Process a file
Once done -&amp;gt; it stops.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Cron Jobs&lt;/strong&gt;&lt;br&gt;
Same as Jobs, but repeated on a schedule.&lt;br&gt;
“Run this task on a laptop every day at 2 AM”.&lt;/p&gt;

&lt;p&gt;If you remember nothing else, remember this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pods are your laptops&lt;/li&gt;
&lt;li&gt;Controllers are your IT rules&lt;/li&gt;
&lt;li&gt;Kubernetes is your automated IT department&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Found it easier to understand from this perspective and would be glad if you did too.&lt;/p&gt;

&lt;p&gt;Tell me if you did in the comments...&lt;/p&gt;

</description>
      <category>softwareengineering</category>
      <category>kubernetes</category>
      <category>microservices</category>
      <category>devops</category>
    </item>
    <item>
      <title>StyleX - The new Game changer?</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Wed, 13 Dec 2023 05:50:37 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/stylex-the-new-game-changer-54mn</link>
      <guid>https://dev.to/theprinceofprogramming/stylex-the-new-game-changer-54mn</guid>
      <description>&lt;p&gt;&lt;strong&gt;Overview:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;StyleX, the dynamic styling system empowering Facebook, WhatsApp, Instagram, and other Meta companies, is a revolutionary game-changer. Its distinctive approach involves employing styling at a component level, offering unparalleled flexibility.&lt;/p&gt;

&lt;p&gt;The primary objective is to facilitate local styling, allowing each file to be individually styled without redundant code. This approach emphasizes making essential changes while preventing style conflicts through a rule that prioritizes the last defined style.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Installation and Setup:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Now, let's dive into the practical side. To install StyleX, execute the following command:&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;--save&lt;/span&gt; @stylexjs/stylex
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For development, tweak your &lt;code&gt;babel.config.js&lt;/code&gt; file by incorporating the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// babel.config.js&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;styleXPlugin&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;@stylexjs/babel-plugin&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;plugins&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="nx"&gt;styleXPlugin&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
      &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="na"&gt;dev&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;test&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;unstable_moduleResolution&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;commonJS&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;rootDir&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;__dirname&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;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="nx"&gt;config&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;StyleX also provides plugins for Webpack, Rollup, and Next.js. In local development, install the dev runtime as a dev dependency:&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;--save-dev&lt;/span&gt; @stylexjs/dev-runtime
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Catch mistakes with ESLint using:&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;--save-dev&lt;/span&gt; @stylexjs/eslint-plugin
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Modify your &lt;code&gt;.eslintrc.js&lt;/code&gt; file accordingly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;module&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;exports&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;plugins&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@stylexjs&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;rules&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@stylexjs/valid-styles&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="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;error&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="nx"&gt;options&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;&lt;strong&gt;Styling:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;StyleX employs an expressive JavaScript API similar to working with inline styles in React DOM or styles in React Native.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Constraints:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As StyleX relies on ahead-of-time compilation, ensure that your styles are statically analyzable. Raw Style Objects should only contain plain object literals, string literals, number literals, array literals, null or undefined, constants, simple expressions, and built-in methods. Arrow functions are allowed for dynamic styles. Avoid function calls and values imported from other modules, except for CSS Variables created using StyleX from a &lt;code&gt;.stylex.js&lt;/code&gt; file.&lt;/p&gt;

&lt;p&gt;Creating styles with StyleX is straightforward. Utilize the &lt;code&gt;stylex.create&lt;/code&gt; function, import the created constants, and apply them as attributes to your elements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;stylex&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;@stylexjs/stylex&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;styles&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;stylex&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;create&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;base&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;fontSize&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;16&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;lineHeight&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mf"&gt;1.5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rgb(60,60,60)&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="na"&gt;highlighted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;color&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rebeccapurple&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;MyComponent&lt;/span&gt; &lt;span class="o"&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="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="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="p"&gt;{...&lt;/span&gt;&lt;span class="nx"&gt;stylex&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;props&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;styles&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;base&lt;/span&gt;&lt;span class="p"&gt;)}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;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;This example showcases the fundamental usage of StyleX. Once you grasp this, the possibilities for customization are vast.&lt;/p&gt;

&lt;p&gt;In conclusion, I appreciate the flexibility StyleX provides, and I look forward to incorporating it into my projects.&lt;/p&gt;

&lt;p&gt;For more in-depth information on StyleX, refer to the official documentation: &lt;a href="https://stylexjs.com/docs"&gt;StyleX Documentation&lt;/a&gt;. Note that the examples provided were extracted from the documentation for enhanced learning and simplified comprehension.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>tutorial</category>
      <category>stylexjs</category>
    </item>
    <item>
      <title>Customizing Your Vite Project Template: Taking the Next Step</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Sun, 10 Dec 2023 07:33:00 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/customizing-your-vite-project-template-taking-the-next-step-4i8f</link>
      <guid>https://dev.to/theprinceofprogramming/customizing-your-vite-project-template-taking-the-next-step-4i8f</guid>
      <description>&lt;p&gt;In our previous blog post, we delved into the fundamental structure of a Vite project. In this installment, our focus shifts to the subsequent crucial phase—customizing the default template generated by Git when running &lt;code&gt;npm create vite@latest&lt;/code&gt; to initialize a new project. If you haven't explored the project structure yet, you can refer to this guide for a detailed breakdown: &lt;a href="https://dev.to/tani1964/learn-react-asap-4948"&gt;Understanding the Vite Project Structure&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The nucleus of customization lies within the &lt;code&gt;src&lt;/code&gt; folder. This directory serves as the canvas for crafting your project's basic architecture, housing your pages, components, functions, and more.&lt;/p&gt;

&lt;p&gt;While the &lt;code&gt;src&lt;/code&gt; folder is pivotal, it's not the sole arena for customization. There are various other files throughout your project that you can tailor to suit your specific needs. These customizations may extend to project-related configurations, integration of specific dependencies, testing setups, or even the integration of tools like Tailwind CSS.&lt;/p&gt;

&lt;p&gt;Here are some key areas you might consider customizing:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Project Structure:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;src:&lt;/strong&gt; Define the structure of your application, and organize pages, components, and utility functions within this directory.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;public:&lt;/strong&gt; Customize assets that are directly served by your application.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Configuration Files:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;vite.config.js:&lt;/strong&gt; Tweak Vite's configuration to align with your project requirements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. Dependencies and Plugins:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;package.json:&lt;/strong&gt; Manage project dependencies, scripts, and configurations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;yarn.lock or package-lock.json:&lt;/strong&gt; Ensure consistent dependencies across different environments.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Styling:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;styles:&lt;/strong&gt; Adjust global styles or explore preprocessor integrations.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;tailwind.config.js:&lt;/strong&gt; Configure Tailwind CSS if you choose to use it in your project.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  5. Testing:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;tests:&lt;/strong&gt; Set up and customize your testing framework as per your testing requirements.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Next Steps: Building a Basic Web Application with React
&lt;/h3&gt;

&lt;p&gt;Having laid the groundwork for customization, our next adventure involves getting our hands dirty and building a basic web application with React. Take advantage of the practical insights and step-by-step guidance that will follow in our next article.&lt;/p&gt;

&lt;p&gt;Thank you for reading this article; stay tuned for the next where we dive into the hands-on process of bringing your customized Vite project to life. Your journey into web development is about to take a more exciting turn!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Understanding the Vite Project Structure</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Sat, 02 Dec 2023 23:15:06 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/understanding-the-vite-project-structure-28jp</link>
      <guid>https://dev.to/theprinceofprogramming/understanding-the-vite-project-structure-28jp</guid>
      <description>&lt;p&gt;In our previous blog post, we delved into installing React ASAP. As promised, our journey continues into the intricate details of React, spanning from the project structure to hooks, contexts, and ultimately, Redux. Our exploration begins today with an in-depth analysis of the folder structure within a Vite application.&lt;/p&gt;

&lt;p&gt;Project Structure Overview:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my-app
├── node_modules
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;node_modules&lt;/code&gt;:&lt;br&gt;
This directory houses the folders and files of installed dependencies. Notably, these files are omitted from version control (e.g., GitHub). The analogy here is akin to a recipe book; only the description of the required modules is shared, allowing seamless reproduction on other systems using &lt;code&gt;npm install&lt;/code&gt;.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;src&lt;/code&gt;:&lt;br&gt;
The heart of the project resides in the &lt;code&gt;src&lt;/code&gt; folder. It serves as the workspace where application structure and components are crafted, defining the core functionality of the application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;code&gt;.eslintrc.cjs&lt;/code&gt;:&lt;br&gt;
The presence of this file signifies the configuration of ESLint, a versatile and customizable linting tool. ESLint aids in maintaining code quality by identifying and reporting on patterns in JavaScript. It acts as a proactive measure, catching issues such as undeclared variables, variable redeclarations, constant value alterations, unnecessary parentheses, and syntactic errors.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  4. &lt;code&gt;index.html&lt;/code&gt;:
&lt;/h3&gt;

&lt;p&gt;This file hosts the root element of our application. As the entry point, the application goes to this HTML document during runtime.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. &lt;code&gt;README.md&lt;/code&gt;:
&lt;/h3&gt;

&lt;p&gt;In the tradition of conventional README files, this markdown document serves to provide a comprehensive description of the project. It facilitates understanding for fellow developers, offering insights into the application's purpose and functionality, thereby minimizing the effort required to comprehend the intricacies independently.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. &lt;code&gt;package.json&lt;/code&gt;:
&lt;/h3&gt;

&lt;p&gt;Functioning as the recipe book for our project, &lt;code&gt;package.json&lt;/code&gt; encapsulates essential information. It outlines core dependencies, project scripts, and project specifications, forming a comprehensive guide for the application's structure and behavior.&lt;/p&gt;

&lt;h3&gt;
  
  
  7. &lt;code&gt;vite.config.js&lt;/code&gt;:
&lt;/h3&gt;

&lt;p&gt;This configuration file plays a pivotal role in shaping the behavior of the Vite development environment. It allows for fine-tuning and customization, providing a tailored development experience to meet specific project requirements.&lt;/p&gt;

&lt;p&gt;In subsequent blogs, we will delve deeper into each aspect of this structure, unraveling the intricacies of Vite applications and empowering developers with a profound understanding of each component. Stay tuned for an enlightening journey through React development intricacies.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Learn React ASAP...</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Sat, 25 Nov 2023 19:24:01 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/learn-react-asap-4948</link>
      <guid>https://dev.to/theprinceofprogramming/learn-react-asap-4948</guid>
      <description>&lt;p&gt;&lt;strong&gt;GETTING STARTED WITH REACT QUICKLY AND EASILY&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;This is a broad overview of getting started on react, it is designed to help you jump into the waters of react as soon as possible.&lt;/p&gt;

&lt;p&gt;React is a great Libary for the creation of web applications - frontend, it involves breaking down web applications into reusable components, which makes web development smooth and easier unlike creating web applications with Valina js where if you want to use a component in several places you have created it several time. &lt;/p&gt;

&lt;p&gt;React also allows state management - being able to manipulate states of components in an application be it text, styles, or even elements themselves.&lt;/p&gt;

&lt;p&gt;Join me as I delve into the intricacies of React, unlocking its potential to elevate your web development experience Welcome to a world where innovation meets simplicity, and the possibilities are boundless. Let the React adventure begin!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Set Up Your Environment:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install Node.js if you haven't already, as it's required for working with React.&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Use npm to install create-react-app globally by running the following command in your terminal:&lt;br&gt;
&lt;/p&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; create-react-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Create a New React App:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Once create-react-app is installed, you can create a new React app by running the following command in your terminal:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; npm create-react-app my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Replace "my-app" with the name you want for your app.&lt;br&gt;
Or  you can use vite which I recommend using this command:&lt;br&gt;
&lt;/p&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt; npm create vite@latest my-app
&lt;/code&gt;&lt;/pre&gt;

&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Understand the Project Structure:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The create-react-app command will generate a basic project structure for you, including the necessary files and folders to get started.

&lt;ul&gt;
&lt;li&gt;It’s usually in this structure in its basic form when you use create-react-app:
&lt;/li&gt;
&lt;/ul&gt;


&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my-app
├── node_modules
├── public
├── src
└── package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;It’s usually in this structure in its basic form when you use Vite and notice it has more folders:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;my-app
├── node_modules
├── public
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;NOTE:&lt;/strong&gt; These are all directories I’ll go into more detail on them in my next article&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Customize Your Template (Optional):&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;If you want to customize the default template, you can edit and reorganize the files in the project folder. Depending on your preferences, you can also add extra dependencies, such as UI component libraries or code formatting tools.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;5. Start Developing:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Once your template is set up, you can develop your React application by editing the components, adding new features, and building your desired user interface.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Stay tuned for upcoming articles where each step will be explored in detail.&lt;/p&gt;

&lt;p&gt;You can refer to the official React documentation at react for more detailed information.dev (&lt;a href="https://react.dev"&gt;https://react.dev&lt;/a&gt;) or other online resources such as the [reeCodeCamp article (&lt;a href="https://www.freecodecamp.org/news/get-started-with-react-for-beginners/"&gt;https://www.freecodecamp.org/news/get-started-with-react-for-beginners/&lt;/a&gt;) and W3schools&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
    <item>
      <title>DIVING DEEP INTO THE BLOCK CHAIN TECHNOLOGY(Part 1)</title>
      <dc:creator>TANITOLUWA IFEGBESAN</dc:creator>
      <pubDate>Wed, 12 Oct 2022 14:12:01 +0000</pubDate>
      <link>https://dev.to/theprinceofprogramming/diving-deep-into-the-block-chain-technologypart-1-ba9</link>
      <guid>https://dev.to/theprinceofprogramming/diving-deep-into-the-block-chain-technologypart-1-ba9</guid>
      <description>&lt;p&gt;INTRODUCTION TO BLOCK CHAIN TECHNOLOGY&lt;/p&gt;

&lt;p&gt;Block chain is a decentralized system where a list of records called blocks that store data publicly and in a sequential order without the involvement of third parties like banks, the government and other financial intermediaries during the transaction between a sender and receiver (i.e the users maintain the data and have democratic authority to approve transactions , even if one node or data on a user computer gets corrupted, the other participants will be alerted immediately, and they can rectify it as soon as possible, due to the fact every user has the same copy of the ledger).&lt;/p&gt;

&lt;p&gt;The transactions are encrypted using cryptography inorder to protect the privacy of users and prevent data from being compromised.&lt;/p&gt;

&lt;p&gt;How does it work?&lt;br&gt;
Block chain is the combination of three important technologies: peer-to-peer network, a digital ledger and cryptography.&lt;/p&gt;

&lt;p&gt;Peer-to-peer network is the interconnection of a large group of individuals who act as authorities to reach a consensus on transactions, among other things.&lt;/p&gt;

&lt;p&gt;A digital ledger is where all transactions are stored, it works like a spreadsheet containing all the numerous nodes in a network and has the history of all purchases made by each node.&lt;/p&gt;

&lt;p&gt;Cryptographic keys are two types - private key and public keys, the public key is just like your email it is used as your id while the private key is like your password only to be known by you.&lt;/p&gt;

&lt;p&gt;The first ever blockchain protocol was proposed by David Chaum in 1982, in his Computer Systems Established, Maintained, and Trusted by Mutually Suspicious Groups.but was first popularized by Satoshi Nakamoto in 2008 and ever since then blockchain has become the to ensure the privacy of users.&lt;/p&gt;

&lt;p&gt;On the next Episode we’ll dive deeper into the technology discussing the layers of the architecture. Thanks for reading, till then BYE😉.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>programming</category>
      <category>opensource</category>
      <category>blockchain</category>
    </item>
  </channel>
</rss>
