DEV Community: Alexander Selorm Kubi

Fake Job Offers Are Turning GitHub Repos Into a Trap

Alexander Selorm Kubi — Sun, 13 Jul 2025 02:16:13 +0000

A new scam is hitting developers with fake job offers and malicious GitHub repos. Here's what you really need to know to stay safe.

The Perfect Setup

Picture this: you get an email/linkedin message about a cool new developer job. Great pay, interesting tech stack, remote work. They want you to do a quick coding challenge to prove you're not a total noob. Seems legit, right?

Wrong! This exact scenario is currently being used to hack developers all over the world. Security researchers (the likes of Kaspersky on GitVenom) have found multiple fake job campaigns like this.

How They Get You

The Fake Job Offer

It starts innocently enough with old-school social engineering: Someone reaches out about a job opportunity. Could be through email, LinkedIn, or any other platform. The role sounds perfect for your skills, the pay is attractive, and hey, who doesn't want new opportunities?

Here's the kicker: they want you to complete a "coding challenge" to prove you can handle the work. Totally normal in our industry, right? Except this time, you're about to download malware that'll steal everything from your SSH keys and passwords to your bank information (if you saved any).

The Legit-Looking Repo

Once you’re hooked, they send you to a GitHub repo. It looks totally normal. We're talking full-blown applications with:

Proper folder structure (frontend, backend, configs)
A normal-looking package.json with real dependencies
Detailed README with setup instructions
A believable commit history

But hidden inside? Pure trouble.

The Trap Hiding in Plain Sight

Here's where things get really scary. The malicious code is hidden so well that even experienced developers are likely fooled. They're using techniques like:

Base64 Ninja Tricks: All the sketchy function names and file paths are encoded in base64. You literally can't see what they're doing until the code runs.

Fake License Files: One example had malware hidden inside what looked like a totally normal MIT license file. Who checks license files for malware :D?

Dependency Poisoning: They take legitimate npm packages or Python modules and inject malicious code, then include those in the project.

Runtime Activation: The malware only fires up when you actually run the app with npm start or whatever.

The Damage: It's Worse Than You Think

Let's talk numbers because they're absolutely wild:

GitVenom alone: 200+ malicious repos over two years
Money stolen: Almost $500K just from crypto wallets (that we know of)
Global victims: People getting hit in Russia, Brazil, Turkey, everywhere
Still active: New fake repos pop up regularly

What They're After (Spoiler: Everything)

When this malware runs, it's not just grabbing your browser passwords. It's going full scorched earth on your digital life:

Your Money

Crypto wallet keys and seed phrases
Any blockchain stuff stored in browsers
They even watch your clipboard to swap crypto addresses when you copy/paste

Auth stuff

SSH private keys (yes, all of them)
Saved browser passwords
Cookies from sites where you're logged in
Your entire macOS Keychain if you're on Mac

Your Personal Stuff

Browser history
Downloaded files
Screenshots of your desktop
Basically anything they think might be valuable

Possible Backdoor Access

Remote control of your machine
Keylogger to capture everything you type
Ability to mess with your files
Network access to spread to other systems

Red Flags That Should Make You Nope Right Out

The Job Offer Itself

Unsolicited opportunities that sound too perfect
Pressure to complete tasks ASAP
They want you to download and run code as part of the "interview"
Only communicating through email/chat (no video calls)
Vague company details

Technical Red Flags

Tons of base64-encoded garbage scattered around
Files that are included but never actually used
The README says one thing but the code does something totally different
Massive minified JavaScript files in weird places
Dependencies that make zero sense for the project

The Account/Repo

Brand new GitHub account with barely any history
Fake contributors
Multiple similar projects from the same sketchy account
Fork chains that lead back to accounts with nothing legitimate

How to Protect Yourself

Don't Be an Easy Target

Verify Everything

Look up the company independently; don't just trust the email
Find the job posting on their official website
Demand a video call and ask detailed questions about the company
If it sounds too good to be true, it probably is

Isolation Is Your Friend

Use VMs, containers, or GitHub Codespaces for testing sketchy code
Keep your personal and work environments completely separate
Have a dedicated "testing" machine/user account/sandbox that you don't care about

Review Everything

Look at all files, even the boring ones.
Check for weird imports or obfuscated code.
If there's minified JavaScript, be extra paranoid
Make sure dependencies actually match what the project claims to do

Stay Secure

Keep everything updated (OS, security software, the works)
Monitor your processes and network traffic.
Back up your important stuff regularly

If You're Running a Team

Education Is Everything

Train your devs about these specific threats
Have clear policies about external code
Plan for how to respond if someone gets compromised.

Technical Safeguards

Monitor network traffic for weird outbound connections
Check external repos before running them.
Keep dev environments isolated

Why This Matters for Everyone

These scams don’t just hit individuals — they mess with the entire open-source world. When we can’t trust code or communities, we all lose.

And these attackers are just getting started. Next we'll probably see:

AI-generated code that's even harder to spot as malicious
Deepfake videos for "video interviews"
Attacks that spread to cloud infra or CI/CD pipelines

What's Being Done About It

The good news is people are fighting back:

GitHub and Others

Removing flagged repos.
Better automated detection for suspicious patterns
Stricter verification for new accounts
Improved reporting tools

Security Researchers

Companies like Kaspersky and Check Point are all over this
Threat intel gets shared with the whole industry
Sharing intel across the security community

Bottom Line: Stay Paranoid (In a Good Way)

Fake job offers + malicious GitHub repos = a nightmare for developers. These scams work because they exploit our trust, curiosity, and drive to land better gigs.

The good news? Just knowing this trick exists makes you way harder to fool.

The most important thing to remember: If someone wants you to download and run unknown code, especially under time pressure, be careful.

Here's what you should do right now:

Share this info with your team/friends
Set up proper isolation for testing unknown code

Stay safe out there, and remember: if it feels sketchy, it probably is.

Sources:

Design’s Liquid Memory: Drops from Apple’s Liquid Glass

Alexander Selorm Kubi — Fri, 13 Jun 2025 12:24:48 +0000

Design Moves in Cycles: Why “Too Early” Isn’t the Same as “Wrong”

Looking at the Liquid Glass UI updates currently available in its beta stage, and recent discussions on social media concerning it got me thinking about how design trends actually work: design doesn’t just progress—it cycles. What feels cutting-edge today can seem outdated tomorrow, and what was dismissed as over-the-top years ago might suddenly feel visionary.

Take Microsoft’s Aero interface from the Windows Vista era. At the time, the glassy transparency felt futuristic and immersive. Fast-forward a few years, and it became shorthand for bloat and bad taste. But now, Apple is reintroducing similar ideas with Liquid Glass; and this time, it got the general public divided - some say it looks sleek and forward-thinking, others think its backward and poorly implemented.

UX as Fashion and Language

Design trends tend to shift like fashion. We move from textured realism to stark minimalism, from shadows and gloss to flat colors and grids—and now, back toward softness, personality, and depth.

Apple’s early iPhone UI was full of skeuomorphism—leather-bound calendars, metallic sliders, detailed shadows. It helped users understand unfamiliar digital metaphors. But as people became fluent in mobile interfaces, that realism became unnecessary. Flat design swept in, demanding clarity and simplicity.

Now? We’re seeing a return of visual flair: soft gradients, dynamic layers, animated textures. Not quite skeuomorphic, but not entirely flat either. The pendulum is swinging back, but with more nuance this time.

“UX is like a fashion, and just like that, it’s a language you can learn.”
Fs0i (Reddit user)

That idea resonated with me on different levels. We develop fluency in design languages just like spoken ones. A visual style that once needed explanation becomes intuitive through repetition and exposure. Today’s “weird” is often just tomorrow’s “normal.”

Not Wrong—Just Too Early

The idea that a design isn’t necessarily incorrect - it might just be early is a fact I think most people will side with. Timing matters as much as execution. Some ideas fail not because they lack merit, but because the infrastructure, audience readiness, or cultural context hasn’t caught up yet.

Aero, though beautiful, was too heavy for its time: the amount of hardware resource this OS demanded from users was outrageous, yet makes sense. Now, our devices are better suited to render these intensive visual effects.
Google Glass was awkward in 2013. Now, we’re exploring spatial interfaces and heads-up displays with excitement.
Neumorphism was briefly mocked—but refined variants of it are quietly shaping modern UI kits.

Design leaders often introduce concepts that feel alien at first, but gradually become convention. It takes courage to stick with a bold vision, especially when early reactions are mixed. But this is often how the next generation of design is born.

Execution Is Everything

There are countless ways to botch design and make it look gaudy, but Apple, as we know, usually finds the most elegant solution (except Siri and Apple Intelligence 😅).

Many companies copy visual trends without understanding the principles behind them. They replicate the surface, not the intent. That’s how we end up with flat designs that feel sterile to the application, or neumorphic buttons that fail accessibility tests.

It’s not just what you implement, but how well you do it—and why you’re doing it in the first place.

The Cycle Keeps Turning

Design is not a straight line toward some final form of perfection. It’s a cycle of exploration, rejection, refinement, and return. By recognizing these patterns, we can view trends more clearly—not as definitive steps forward, but as parts of a larger conversation.

Some styles fade because they’re gimmicks. Others reemerge stronger because they were simply ahead of their time.

So when you find yourself drawn to a bold or unconventional design idea, don’t immediately discard it just because it doesn’t “fit” current trends. Ask yourself:

Is this idea wrong? Or just early?
Is the problem in the concept, or in its execution?
Could this become intuitive, once people are ready for it?

Sometimes, the best design decisions aren’t the ones that win immediate praise; they’re the ones that plant seeds for what comes next.

You might not have been wrong. You might just have been early.

And that distinction could be the difference between fading out and defining the future.

Thanks for reading!

Transactional Work: The Decline of Transformational Work

Alexander Selorm Kubi — Tue, 22 Oct 2024 23:58:21 +0000

Introduction

The modern workplace faces a critical divide between transactional work (routine, mechanical) and transformational work (creative, impactful). This divide represents more than just different approaches to work; it embodies a fundamental shift in how we create value in the 21st century.

Transformational Work Characteristics

Long-term Impact: Creates enduring change, like the iPhone revolutionizing human-technology interaction
Innovation: Breaks new ground and questions assumptions rather than iterating
Personal Growth: Pushes creators beyond comfort zones while building new capabilities
Emotional Resonance: Creates memorable experiences and deep user connections
Quality Focus: Demonstrates unwavering commitment to excellence

Transactional Work Characteristics

Short-term Focus: Prioritizes quick wins over lasting impact
Routine Nature: Follows templates with minimal deviation
Rushed Execution: Often skips crucial planning and research
Limited Investment: Focuses on deliverables rather than outcomes
Quantity Over Quality: Emphasizes output metrics over value

Key Challenges

Business Pressures
- Quarterly results focus
- Risk-averse decision making
- Short-term performance metrics
Technology Impact
- Over-reliance on automation
- Standardization of creative processes
- Skill erosion
Workplace Changes
- Gig economy fragmentation
- Decreased tolerance for iteration
- Meeting culture replacing deep work

Solutions

For Organizations

Create dedicated innovation spaces
Implement balanced performance metrics
Support long-term capability building

For Individuals

Seek opportunities for meaningful impact
Invest in deep expertise development
Resist purely transactional approaches

Moving Forward

Success in the 21st century requires balancing efficiency with innovation. Organizations must create cultures that value both quick execution and transformational impact, while individuals must actively pursue opportunities for meaningful work that creates lasting value.

Deploying Next.js to Your Local IP Address with Dynamic Port Assignment for Network Access

Alexander Selorm Kubi — Thu, 27 Jun 2024 02:13:28 +0000

Ever tried to start your JS/TS development server and wanted to access your dev server from another device but didn't know how? Well, here's a solution!

This short tutorial will show you how to dynamically find an available port, display the network IP, and allow access to your server from different devices on your network. Let's get started!

Step 1: Install the Required Package

First, we need a magical tool to help us out. Meet get-port — your new best friend in port management 😃.

yarn add get-port
or
npm install get-port

Step 2: Create a Script to Find Available Ports

Next, we’ll create a script that finds an available port and displays the network IP address.

Create `start-dev.mjs` file

Create a file named start-dev.mjs with the following content:

import { execSync } from 'child_process';
import getPort from 'get-port';

(async () => {
  try {
    // Get the network IP address of the machine
    const ip = execSync('ipconfig getifaddr en0').toString().trim();

    // Function to find an available port within a range
    const getAvailablePort = async (start, end) => {
      const portsInUse = [];
      for (let port = start; port <= end; port++) {
        try {
          const availablePort = await getPort({ port });
          if (availablePort === port) {
            return { port, portsInUse };
          } else {
portsInUse.push(port);
}
        } catch (error) {
         console.log(error)
        }
      }
      throw new Error(`No available ports found in range ${start}-${end}`);
    };

    // Get an available port in the range 3000-3100
    const { port, portsInUse } = await getAvailablePort(3000, 3100);

    if (portsInUse.length > 0) {
      console.log(`🚧 Ports in use: ${portsInUse.join(', ')}`);
    }
    console.log(`Starting server at http://${ip}:${port}`);

    // Set environment variables
    process.env.HOST = ip;
    process.env.PORT = port;

    // Start the Next.js development server
    execSync(`next dev -H ${ip} -p ${port}`, { stdio: 'inherit', env: { ...process.env, HOST: ip, PORT: port } });
  } catch (error) {
    console.error('Failed to start development server:', error.message);
  }
})();

Step 3: Update Your `package.json`

Now, let's update your package.json to use the new script.

Modify `package.json`

Add the following script to your package.json:

{
  "scripts": {
    "dev": "node --experimental-modules start-dev.mjs"
  }
}

Explanation of the Scripts

start-dev.mjs Script: This script handles finding an available port, setting the necessary environment variables, and starting the Next.js development server.

Step 4: Running Your Development Server

Now, fire up your terminal and run:

yarn dev 
or
npm run dev

What Happens When You Run `yarn dev` or `npm run dev`?

Finding the IP Address: The script retrieves your machine's IP address with the ipconfig getifaddr en0 command.
Checking for Available Ports: The script checks for available ports within the range 3000-3100.
Displaying Ports in Use: If any ports are already taken, the script logs them to the console.
Setting Environment Variables: The script sets the HOST and PORT environment variables for the development server.
Starting the Server: The script starts the development server on the available port and logs the network IP and port to the console.

Accessing the Server from Other Devices

Once the server is running, you can access it from other devices on the same network using the network IP and port displayed in the console. For example, if the console logs:

Starting server at http://192.168.1.10:3001

You can access the server from another device on the same network by entering http://192.168.1.10:3001 in your browser's address bar.

Conclusion

With this setup, you'll be able to access your development server from any device on your network. This makes it easy to test your application on multiple devices.

Happy coding! 🧙‍♂️✨

The State of User Interfaces: A Frontend Developer's Perspective

Alexander Selorm Kubi — Sun, 09 Apr 2023 10:53:10 +0000

User interfaces (UIs) are the means through which humans interact with digital products, and as such, they must be designed to cater to human input. However, the current state of UIs is far from ideal, and it's only getting worse with the advent of artificial intelligence (AI). In this post, we'll explore some of the issues plaguing UIs and how they can be improved.

The Problem with UI Design

The problem with UI design is that it's often done by experts who don't bother to ask users what they want. As a result, we get UIs that are difficult to use, buried in menus and lacking in accessibility. Furthermore, the current trend towards minimalism has only made things worse, with excessive negative space and a love of circular design elements.

Take Facebook, for example. The social media giant has iteratively "simplified" its interface, resulting in buried options and an overly simplified newsfeed. Moreover, the font size is so large that it's reminiscent of a kindergarten classroom, and everything is bubbly and rounded to avoid sharp edges. Instagram, on the other hand, is stuck in the 90s tables logic, with tiny pictures and no zoom function.

The Problem with Front-end Development

Front-end development has expanded in recent years, but it hasn't solved any problems. Instead, it has added more skills to the required learning stack. While HTML/CSS and front-end frameworks have steadily advanced over the years, UIs have not kept up. Instead of building UIs that are better, more accessible, and more usable, we get "lowest common denominator" UIs that aim for simplicity but achieve only frustration.

The Problem with Mobile Apps

Mobile apps are another problem area, with numerous clicks required to do even the simplest of tasks. This is a consequence of bad design and lazy development. Many mobile apps are simply repackaged web interfaces, resulting in poor performance and frustrated users.

The Need for Human Input

AI can only guess what users want, but UIs are designed for humans, and therefore must be tested on humans. We need to move away from the current trend of expert-driven UI design and towards a more user-centered approach. UI designers must be willing to ask users what they want and then design UIs that cater to those desires.

Conclusion

In conclusion, the current state of UIs is a sorry one. UIs are buried in menus, lacking in accessibility, and frustrating to use. Front-end development hasn't solved any problems, and mobile apps are often poorly designed and frustrating for users. We need to move away from the current trend of expert-driven UI design and towards a more user-centered approach. Only then can we hope to build UIs that are better, more accessible, and more usable.

Should I learn ReactJS in 2023?

Alexander Selorm Kubi — Thu, 02 Feb 2023 00:35:27 +0000

My takes on how being a frontend (React.JS) developer feels like, so far.

As a frontend developer, ReactJS gave me the power to bring creative ideas to life and shape the way people interact with technology. The journey of a frontend React developer is not only challenging, but also incredibly rewarding, if you do it right.

With ReactJS, you have the unique opportunity to create dynamic, user-friendly, and visually appealing web applications the easiest way possible.

One of the biggest advantages of working with React is its versatility. You can use React to build everything from simple static websites to complex web applications, and you can develop for multiple platforms, including web, mobile, and desktop. This gives you the opportunity to work on a wide range of projects, and the flexibility to adapt to the ever-changing needs of the industry.

React is also a constantly evolving technology, which means that you'll never run out of things to learn. The React community is also incredibly supportive, with a wealth of resources, tutorials, and forums that can help you grow as a developer.

Also, having TypeScript under your belt as a react developer makes you feel like you literally have wings. Typescript is like RedBull to react. Hehe. All the same, this shouldn't discourage you from still going ahead with the good old JavaScript.

Being able to write React is a highly in-demand skill, and there are numerous opportunities to advance your career. Whether you're looking to take on more responsibility, explore new technologies, or simply earn a higher salary, there's no shortage of opportunities available.

In conclusion, being a React developer is a rewarding and exciting career choice. With the constant evolution of technology, the supportive community, the ability to work on projects that align with your values, and the flexibility and financial rewards, there's never been a better time to become a frontend React developer. So, if you're interested in technology and have a passion for building great user experiences, consider making React development your next career move! Embrace your journey as a React developer and enjoy the ride!!

Cheers!!!

Using React.JS as a Micro Frontend in Blazor WASM

Alexander Selorm Kubi — Fri, 28 Jan 2022 20:23:11 +0000

Disclaimer
Configuring the Projects
Integrating the Micro Frontends into the App Shell/Startup Application
Automating the Build Scripts
Installing and Setting Up React.JS

TL;DR

Here is a link to the github repository. Feel free to clone, download or fork and make PRs.
https://github.com/XanderSelorm/MicroFrontendsExample

Disclaimer

Kindly note that this tutorial is for educational purposes only and that this set up or architecture has not been tested in a production environment yet.

In our previous part of this series, we looked setting up the environment and folder structure for the Micro Frontends.

Configuring the Projects

ReactMicroFrontend Project

Since the ReactMicroFrontend is basically a JavaScript project, NPM will obviously be used as the default package manager.

To initialize NPM in the ReactMicroFrontend, using the terminal, ensure that you are in the root directory and you have Node.js and NPM installed globally on your computer. If not, download it from here. Then continue by running the following command in the root directory of the project:

npm init

Since this project is for tutorials purposes only, we'll keep the default values when initializing NPM here.

With that done, let's look at how to bundle out JavaScript codes.
Since we're setting up the React Library manually, let's decide on what our bundler will be. For the sake of this tutorial, ‘Parcel’ will be used instead of usual webpack for the bundling of the React application.

Now that we have npm installed and initialized in our project, let's use it to install Parcel. If you want to know more about Parcel, check it out.

Run the following command in the root directory of the MicroFrontend (React) project in question:

npm install parcel --save-dev

Now that this is done, let's determine where our React code will be bundled to upon build.

Open the package.json file in the ReactMicroFrontend project and modify the following lines:

{
  //destination path
  "main": "wwwroot/dist/app.js",

  //origin path
  "source": [
    "src/index.jsx"
  ],

  //scripts
  "scripts": {
    "build": "parcel build src/index.js",
    "clean": "del-cli wwwroot/dist/* node_modules",
  },
}

When you take a critical look at our clean script, you'd realize the use of a package called del-cli. This package is used for permanently deleting files and directories. This packages needs to be installed globally before it can be used.
Run the following command in your terminal to install it:

npm install --global del-cli

MicroFrontendExample.Shell Project

Awesome! With that done, save the file and let's look at how to make sure our JavaScript code from our MicroFrontend is also bundled into the App Shell/Container App.
To do this, we'll have to go back into the directory of our App Shell/Container App and then run a few commands.

In the startup application, ‘Webpack’ will be used to bundle all the JavaScript frameworks together into the main application/App Shell. And since we'll be using NPM here too, we'll initialize NPM in this directory too and then install the Webpack. Use the following commands by running them in the root directory of the startup project/App Shell:

Don't forget to keep the default values for NPM. (Well, you can still go ahead and customize it if you wish)

npm init && npm install webpack --save-dev && npm i -D source-map-loader && npm install --save-dev webpack-cli

If the above commands fail, run them one after the other, like so:

npm init

npm install webpack --save-dev

npm install --save-dev webpack-cli

...and then

npm i -D source-map-loader

Integrating the Micro Frontends into the App Shell/Startup Application

In the Startup Project’s ‘App.razor’ file, we'll load the entry-files of the class libraries (micro frontends) as assemblies.

Do this by adding the following lines of code to the App.razor file:

@using System.Reflection

<!-- Default File Content -->

@code {
    private List<Assembly> LoadedAssemblies = new List<Assembly>()
    {
        typeof(ReactMicroFrontend.App).Assembly
    };
}

In the same file, on the <Router> tag, add the AdditionalAssemblies attribute and assign the LoadedAssemblies value to it.

<!-- AdditionalAssemblies="@LoadedAssemblies" -->
<Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="@LoadedAssemblies" PreferExactMatches="@true">

In the Startup Project’s _Import.razor file, add the namespaces of the various micro frontend applications in order to make them available throughout the startup project:

@using ReactMicroFrontend

Awesome! A couple of things more to do...

Let's begin by modifying the package.json file over here too. we'll add the build and clean scripts to the scripts object.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "clean": "del-cli wwwroot/dist/* node_modules"
  },

Now, let's add the configurations for webpack. We'll do this by adding a new file and name it as webpack.config.js.

Right click on the project > Add > New item > Javascript File.
Change the name to webpack.config.js, and click Add.

In the webpack.config.js file, add the following block of code, customize it if the need be, and save it.

const path = require('path');
const fs = require("fs");

module.exports = [
  {
    name: "get-react",
    entry: () => fs.readdirSync("../ReactMicroFrontend/wwwroot/dist/").filter(f => f.endsWith(".js")).map(f => `../ReactMicroFrontend/wwwroot/dist/${f}`),
    devtool: "source-map",
    mode: "development",
    output: {
      filename: "app.js",
      path: path.resolve(__dirname, "./wwwroot/dist/react/")
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          enforce: "pre",
          use: ["source-map-loader"]
        }
      ]
    }
  }
]

Finally, let's make sure that our React script is added to our index.html file. If not, before the closing body tag in the index.html file, add:

<script src="dist/react/app.js"></script>

Automating the Build Scripts

If you've read up to this point, congratulations! This is the last step and then we'll take out app for a test ride 😀!

By now, I'm sure you are wondering whether we'll be calling the build scripts manually for each project? The answer? Hell no! 😀 We'll automate that too. So that when the build command is called for the dotnet projects, that of our JavaScript microfrontends are called too.

Let's look at how to implement that:

We'll edit the project files of both the MicroFrontendExample.Shell and any of our microfrontend which uses JavaScript code; this includes out ReactMicroFrontend.

If you're using VS Code, it's easy to locate the project files.

But when you're using Visual Studio, right click on the project > Edit Project File.

Before the </Project> closing tag, add the following block of code:

<Target Name="npm restore" BeforeTargets="BeforeBuild">
        <Exec Command="npm install" />
</Target>

<Target Name="webpack" AfterTargets="Build">
    <Exec Command="npm run build" />
</Target>

<Target Name="webpack clean" AfterTargets="Clean" Condition="Exists('node_modules')">
    <Exec Command="npm run clean" />
</Target>

Awesome! Congratulations for making it up to this point! Now we're free to build our application. :D

Ooopss!! There are Errors!?? Chill bro, 😀, this error was expected. 😊
This error occurred because we directed the Parcel bundler to an index.js file which doesn't exist. This is because we haven't installed and set up our React.JS yet.

This brings us to our next and final topic:

Installing and Setting Up React.JS

This final step should be fairly easy to do. We'll run a couple of commands, run a few lines of code and then we call it one hell of a guide! 😀

To begin, let's install react and react-dom. Run the following command in your terminal:

npm install --save react react-dom

Secondly, let's create a new file, name it index.js in the src folder.
Add the following code block to the new file you created:

import React from "react";
import ReactDOM from "react-dom";

window.renderApp= () => {
  const domElement =
    document.getElementById("react-app") ||
    document.querySelector("#react-app");

  if (domElement) {
    ReactDOM.render(<h1>Hello, React🌐!</h1>, domElement);
  }
};

Finally, feel free to run the application, navigate to "/ReactMicroFrontend", and experience the power of Blazor!

Your final app should look like this:

Here is a link to the github repository. Feel free to clone, download or fork and make PRs.
https://github.com/XanderSelorm/MicroFrontendsExample

Thank you very much for reading. Follow me for more interesting guides and content. And oh, don't forget to leave a reaction 😉. I'll be grateful 😊

See you later, cheers!

Implementing Micro Frontends using .NET Blazor WASM

Alexander Selorm Kubi — Sat, 11 Dec 2021 15:47:57 +0000

Preamble

Below is a question from StackOverflow emphasizing the need for this article.

Jan 22 '21 Comments: 4 Answers: 1

We are in the process of building a Blazor.Net5 server application alongside a number of existing web projects (Blazor, Angular, html etc). We would like the Blazor application to be the only application the users go to and access the other sites from it.

I wanted to create a Blazor…

Open Full Question

Disclaimer
To start with...
Now, the main stuff
Setting things up...
Creating a friendly Folder Structure
JavaScript Interop

TL;DR

Here is a link to the github repository. Feel free to clone, download or fork and make PRs.
https://github.com/XanderSelorm/MicroFrontendsExample

Disclaimer

Kindly note that this tutorial is for educational purposes only and that this set up or architecture has not been tested in a production environment yet.

To start with...

Let's begin where every project begins!

Create a new Blazor Web Assembly app.
Name the Project as MicroFrontendsExample.Shell. Note that this particular project will serve as our app shell.
Maintain the solution name as is: MicroFrontendsExample.
For this project, we'll use .NET5.0 as the targeted version.

Please note that for this guide, I'll stick to using Visual Studio for the project set up.

With our container app/app shell ready, let's begin adding the individual micro frontends.

Now, the main stuff

Let's start with first adding micro frontends based on other JS frameworks. We'll start with React.js due its popularity. Also, we'll be making use of one major feature of Blazor - JavaScript Interoperability (JsInterOp).

To do this, let's add a new Class Library.

Right click on the solution > Add > New project
Search for 'Razor Class library' and select it.

Click 'Next'

On the next screen,

Enter the name of the Class Library (ReactMicroFrontend in our case) and click 'Next'
Select .Net5.0 as the version
Click on 'Create'

Voila! That was easy, right?

Now, onto the good stuff - Setting up the React Micro Frontend. Yay!🙏🏽

Since we're working with Blazor, it basically means that we won't be making use of any HTML - only .razor.
I know you're wondering "so where will React's entry point be?" Hold your horses!😀 "do not be afraid", I've got you 😎.

We only need one Blazor component here which will call React's bundled file(s). Don't worry, you'll get what I mean along the line. 😉

Setting things up...

Firstly, let's add the ReactMicroFrontend as a Project Reference to the main Blazor App. This will enable the container app or app shell recognize our class library as a part of itself (in layman's terms).

Do this by:

Right-clicking on the main Blazor project (MicroFrontendsExample.Shell)
Select Add > Project Reference.
In the pop-up window, check the various projects/class libraries that are meant to be your micro frontend applications (ReactMicroFrontend in our case).
Click OK.

With that being done, let's go ahead and do some more set up.

Creating a friendly Folder structure

Let's have a look at how our Class library looks like so far.

From the Solutions Explorer, this is what it looks like:

Now that we've seen how it looks like, let's start with some modifications to make it react friendly.

Setting up a folder structure for your micro frontend is solely dependent on the preferences of the team involved (choice of architecture/principle).

Let's do some easy stuff! Deleting and creating a couple of files and folders.

Let's delete the ExampleJsInterop.cs file, and the Component1.razor file.
In the wwwroot folder, let's delete the background.png and the exampleJsInterop.js files too.

With all that done, we'll create one new file - the entry-point file (App.razor) file.

Right click on the ReactMicroFrontend > Add > New Item > Razor Component.
Give your file a name at the bottom, and click 'Add'.

Using the same method, let's create a folder called src.

Right click on the ReactMicroFrontend > Add > New Folder.
Give your folder a name and click away.

Moving ahead...

Within the wwwroot folder, create another folder called dist.

Let's throw some more light on the reasons for these massive overhaulings :D

The App.razor file is the entry point of the React Application. It is through this file that the react application is loaded onto the blazor wasm framework.
The _imports.razor file contains any namespace we'd want available throughout the scope of the Class Library.
The ‘wwwroot’ folder contains a ‘dist’ folder where the bundled react app is placed after the react app is built with ‘npm run build’.
The ‘src’ folder is where the react application/codebase resides.

At this point, if you should run your app, you'll be greeted with the default boiler-plated pages from blazor:

The next and final thing to do for this part of the series is making sure that the JavaScript codes we'll be writing will be made available to our browser through what we call:

JavaScript Interop

In this topic, we'll have a look at how to configure the JavaScript interop in the ReactMicroFrontend to allow us build the JavaScript together with the C#. If you want to read more about JavaScript InterOp in Blazor, check it out here.

To begin, let's make some modification to our App.razor file. Add the following block of code:

@page "/ReactMicroFrontend"

<div id="react-app"></div>

The above <div> with an id of react-app serves as the main entry point of our javascript code. In other words, it is in this <div> tag that our javascript code will be rendered.

Secondly, lets add another file and name it App.razor.cs. This file will serve as a code-behind file where we'll keep all the JavaScript InterOp logics. After creating the file, open it and add the following block of code and customize it as the need be:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ReactMicroFrontend
{
    public partial class App
    {
        [Inject]
        IJSRuntime Jsr { get; set; }

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            //renderJs here is the name of our
            //javascript function which will render our React app
            await Jsr.InvokeVoidAsync("renderJs");
            await base.OnAfterRenderAsync(firstRender);

        }
    }
}

...and that, my friends, is a good start!

Let's take a break here

In following parts of this series about Micro Frontends in .NET Blazor WASM, I'll delve deeper into the setting up of React.js in the new Class Library we created.

Stay Tuned! Cheers!!!

Introducing Micro Frontends in .NET Blazor WASM

Alexander Selorm Kubi — Sat, 04 Dec 2021 22:48:23 +0000

What are Micro Frontends?
Why Micro Frontends?
Micro Frontends vs Monolithic Frontends
A Detailed look at a Micro Frontend
How a Micro Frontend Looks Like
Conclusion

Blazor is fast becoming one of the most loved web development frameworks out there to both c# and non-c# developers due to its robustness and its reliance on the powerful c# language and the .NET framework as a whole.
This makes building a scalable and secure web application (either client or server) a breeze to all who know how to program in c#.

On top of this, it makes use of web assembly for its client-side application called Blazor Wasm. If you're new to Blazor and you'd like to read more on it, see: What is Blazor?

Now, to the main subject...

What are Micro Frontends?

Micro Frontends can be defined as an architectural style where independently deliverable frontend applications are composed into a greater whole by teams.
The basic idea is to extend the idea of microservices to the frontend development through which a system can be divided into teams that own end-to-end systems and independently deliver frontend applications to compose into a greater whole.

Some of the key benefits that we've seen from micro frontends are:

Small development scope,
Smaller, more cohesive and maintainable codebases,
More scalable organizations with decoupled, autonomous teams,
The ability to upgrade, update, or even rewrite parts of the frontend in a more incremental fashion than was previously possible.

But..., Why Micro Frontends?

The current trend of frontend development is to build a feature-rich and powerful browser application which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows into a Frontend Monolith, and this gets more difficult to maintain.

Good frontend development is hard.
Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder.
Implementing other languages or frameworks into your application? Don’t even think about it.

These are all real problems that can all negatively affect your ability to efficiently deliver high quality user experiences to your customers through your frontends.

Micro Frontends vs Monolithic Frontends

Monolith Frontend with Microservices:

Micro Frontend with Microservices:

A Detailed look at a Micro Frontend

Each Micro Frontend usually in a project:

Is run by a cross-functional team (from the UI/UX guy through the DevOps guy),
Ships its own UI,
Stores its own data,
Has its own technology stack,
Is assigned a particular task/feature/mission.

How a Micro Frontend Looks Like?

There are many approaches that could reasonably be called micro frontends, and there is a natural architecture that emerges across all these approaches.

To start with, there is a single container application (app shell), which:

Renders common page elements such as headers and footers,
Addresses cross-cutting concerns like authentication and navigation,
Brings the various micro frontend components together onto a page and tells each micro frontend when and where to render itself.

And that's it for today!

In following parts of this series about Micro Frontends in .NET Blazor WASM, I'll explore the implementation details, and how we can use other web development frameworks as a micro frontend, using .NET Blazor WASM as the App Shell/Container.

DEV Community: Alexander Selorm Kubi

Fake Job Offers Are Turning GitHub Repos Into a Trap

The Perfect Setup

How They Get You

The Fake Job Offer

The Legit-Looking Repo

The Trap Hiding in Plain Sight

The Damage: It's Worse Than You Think

What They're After (Spoiler: Everything)

Your Money

Auth stuff

Your Personal Stuff

Possible Backdoor Access

Red Flags That Should Make You Nope Right Out

The Job Offer Itself

Technical Red Flags

The Account/Repo

How to Protect Yourself

Don't Be an Easy Target

If You're Running a Team

Why This Matters for Everyone

What's Being Done About It

Bottom Line: Stay Paranoid (In a Good Way)

Sources:

Design’s Liquid Memory: Drops from Apple’s Liquid Glass

Design Moves in Cycles: Why “Too Early” Isn’t the Same as “Wrong”

UX as Fashion and Language

Not Wrong—Just Too Early

Execution Is Everything

The Cycle Keeps Turning

Transactional Work: The Decline of Transformational Work

Introduction

Transformational Work Characteristics

Transactional Work Characteristics

Key Challenges

Solutions

For Organizations

For Individuals

Moving Forward

Deploying Next.js to Your Local IP Address with Dynamic Port Assignment for Network Access

Step 1: Install the Required Package

Step 2: Create a Script to Find Available Ports

Create start-dev.mjs file

Step 3: Update Your package.json

Modify package.json

Explanation of the Scripts

Step 4: Running Your Development Server

What Happens When You Run yarn dev or npm run dev?

Accessing the Server from Other Devices

Conclusion

The State of User Interfaces: A Frontend Developer's Perspective

The Problem with UI Design

The Problem with Front-end Development

The Problem with Mobile Apps

The Need for Human Input

Conclusion

Should I learn ReactJS in 2023?

Using React.JS as a Micro Frontend in Blazor WASM

Table Of Contents

TL;DR

Disclaimer

Configuring the Projects

ReactMicroFrontend Project

MicroFrontendExample.Shell Project

Integrating the Micro Frontends into the App Shell/Startup Application

Automating the Build Scripts

Installing and Setting Up React.JS

Implementing Micro Frontends using .NET Blazor WASM

Preamble

Table Of Contents

TL;DR

Disclaimer

To start with...

Now, the main stuff

Setting things up...

Creating a friendly Folder structure

JavaScript Interop

Let's take a break here

Introducing Micro Frontends in .NET Blazor WASM

Table Of Contents

Create `start-dev.mjs` file

Step 3: Update Your `package.json`

Modify `package.json`

What Happens When You Run `yarn dev` or `npm run dev`?