
## Introduction

Platform monitoring, in simple terms, is a way a team or an Engineer proactively plans against disruption of services and/or gets insights/visibility on service performance using tools that provide relevant metrics and options for setting alerts whenever unwanted events occur. A common term used to describe this practice is SRE (Site Reliability Engineering).

## Site Reliability Engineering (SRE)

Site Reliability Engineering focuses on creating scalable and highly reliable services and software systems. SRE is not just about ensuring your systems are available; it's about maintaining a balance between reliability and feature development. Below are some key principles:

1. **Service Level Objectives (SLOs)**: Define measurable SLOs that reflect the user experience. These are the targets for system reliability and performance that you commit to maintaining, like a metric to set expectations.

2. **Error Budgets**: SREs manage error budgets, representing the acceptable downtime or errors in a given period. Staying within the error budget allows teams to focus on feature development.

3. **Automation**: Automate repetitive operational tasks, such as scaling, provisioning, and recovery, to reduce the risk of human error and improve efficiency.

4. **Monitoring and Alerting**: Implement robust monitoring and alerting systems to detect issues proactively and respond promptly.

5. **Incident Management**: Develop well-defined incident management processes and SOPs (Standard Operating Procedures) to minimize downtime and learn from incidents to prevent recurrence.

## Getting Started with Platform Monitoring Tools

Effective platform monitoring is a cornerstone of SRE. Here's how to get started:

### 1. Define Monitoring Objectives

Begin by defining what you need to monitor. Consider factors like user experience, system performance, resource utilization, and security. Identify key performance indicators (KPIs) that align with your SLOs.

### 2. Choose Monitoring Tools

Select monitoring tools that align with your monitoring objectives. Some popular choices include:

- **Prometheus**: An open-source monitoring and alerting toolkit designed for reliability and scalability.

- **Grafana**: A platform for creating, sharing, and exploring dashboards and data visualizations.

- **New Relic**: A comprehensive application performance monitoring (APM) solution.

- **Datadog**: A cloud-based monitoring and analytics platform. It is a central monitoring platform enabling the application to log events and collect relevant configurable metrics, which can be used for alerting with event triage depending on the set priority.

- **Fire-hydrant**: This tool can be used for incident orchestration, logging and playbook automation.

- **PagerDuty**: It can smoothly work with the above tools to handle escalations for configurable levels, e.g., an SME Engineer, Operations Center, Incident Owner, etc.

### 3. Instrument Your Code

Instrumentation involves adding code to your application to collect data and metrics. These metrics can include response times, error rates, resource usage, and more. Proper instrumentation is crucial for effective monitoring.

### 4. Set Up Alerts

Configure alerts based on your monitoring data and SLOs. Alerts should be actionable, meaning they indicate a problem that requires immediate attention. Alerting techniques can include phone calls/notifications, SMS, emails, slack notifications and focus groups/channel creation. Avoid alert fatigue by setting meaningful thresholds.

### 5. Implement Observability

Observability goes beyond monitoring and includes the ability to explore and understand your system's behavior. It often involves logging, distributed tracing, and structured data.

### 6. Create Dashboards

Build dashboards that display key metrics and data visualizations. Dashboards make it easy to track the health of your systems and provide a quick overview for incident response.

### 7. Practice Incident Response

Develop incident response procedures and conduct regular drills. Ensure that your team knows how to react when an incident occurs, and focus on resolving issues quickly while learning from each incident to prevent future occurrences.

## Incident management and reporting

![Incident management and reporting](/cms/articles/platform-monitoring/crime-scene.jpeg)

An incident is an event that disrupts or reduces the quality of a service. An incident is resolved when the affected service resumes functionality as expected or usual. It is important to review each incident in hindsight as retrospectives to proactively plan for prevention/mitigation in the future or better ways to handle the situation and properly understand its causes or potential causes and effects.

### Creating internal processes

- **Incident Template**: A document that provides relevant data at a glance that would help understand what happened, the status and the impact of the incident. This can contain sections showing fields like the environment, product/service/functionality impacted as well as the author of the document, assigned teams with links to group conversations, e.g. a Fire-hydrant generated slack channel link or internal ticket with as many relevant references as possible.

- **Service outage**: Depending on the nature of your business, it is important to keep your users updated on the status of your services with outages and impacts.

- **Incident reports**: Teams can collate multiple incidents, showing the most relevant information at a glance, like the service details, a summary of the incident, impact, more details, time to recovery, measures taken, and associated tickets/docs.

- **Incident retrospectives**: Based on incidents discovered in the past, teams can create action plans to improve their efficiency in handling incidents/risks. For example knowledge-sharing initiatives like bi-monthly sessions with Q&A across teams on common issues of different priority levels, quick mitigation strategies, and standard operation procedures.

- **Standard Operation Procedures(SOPs)**: From basic practices like rolling back releases to steps one can take to troubleshoot/debug or drill down issues to the source. All these can vary from team to team.They should outline:
  - How to verify that the issue is happening
  - Procedure to follow to fix issues
  - What team or whom should be contacted at different escalation levels, and what information should be provided to them.


Platform monitoring, in simple terms, is a way a team or an Engineer proactively plans against disruption of services and/or gets insights/visibility on service performance using tools that provide relevant metrics and options for setting alerts whenever unwanted events occur.

Platform monitoring and visibility - Managing the unpredictable nature of deployment environments


## Introduction

Like micro-services for APIs, the micro-frontend architecture is a front-end web development pattern in which a single application may be built from different builds. It enables independent development, deployment, and scalability of individual frontend modules using different frameworks if needed. Micro-frontends can break down the front end into smaller, self-contained modules that can be developed, tested, and deployed independently.

## Understanding Micro-Frontends

See micro-frontends like a yummy cake with all your favourite flavours but was baked by different companies and put together perfectly. Each flavour slice can also be changed anytime, without the respective companies talking to each other. They have a slot on the pan where their changes are reflected.

## Pros and Benefits of Micro-Frontends

### 1. Independent Development and Deployment

With micro-frontends, development teams can work on individual modules independently, using different technologies and frameworks that best suit their specific requirements. This independence allows for faster development cycles, as changes can be made without impacting the entire application. Each micro-frontend can have its development lifecycle and team, especially enabling multiple teams in larger companies or communities to release updates or bug fixes faster without coordinating with other teams.

### 2. Scalability and Performance

Micro-frontends facilitate horizontal scalability, as individual modules can be deployed and scaled independently based on their specific resource needs. This flexibility allows organisations to allocate resources efficiently and optimise performance based on demand. Additionally, by caching and delivering micro-frontends from content delivery networks (CDNs), the overall user experience can be improved through reduced latency and faster page loads.

### 3. Technology Diversity and Innovation

Micro-frontends open opportunities for using different technologies and frameworks within the same application. Each micro-frontend can be developed using the technology stack that best suits its purpose, promoting innovation and allowing teams to leverage the latest advancements in front-end development. This flexibility lets organisations modernise legacy systems by gradually replacing or enhancing specific modules.

### 4. Code Reusability and Collaboration

Micro-frontends encourage code reusability and collaboration across teams. Developers can share and reuse components or functionality between different micro-frontends, promoting consistency and reducing duplicated effort. Collaboration between frontend teams becomes more streamlined, as they can focus on specific areas of expertise while maintaining a cohesive user experience across the application.

## Implementing Micro-Frontends

Implementing micro-frontends requires careful planning and consideration. Here are some key aspects to consider:

### 1. Module Decoupling and Communication

Identify the boundaries of each micro-frontend module and define precise communication mechanisms between them. This can be achieved using well-defined APIs, events, or message-passing systems. Avoid tight coupling between modules to maintain independence and minimise dependencies.

### 2. Cross-Cutting Concerns and Shared Libraries

Identify cross-cutting concerns, such as authentication, logging, or styling, and determine how they will be handled across micro-frontends. Shared libraries or dedicated micro-frontends can be utilised to address these concerns, ensuring consistency and reducing duplication.

### 3. Build and Deployment Strategies

Choose appropriate build and deployment strategies that align with your team's requirements. Options include building each micro-frontend as a standalone application and deploying them independently or bundling them together at build time for a unified deployment.

### 4. Testing and Quality Assurance

Establish testing strategies that cover individual micro-frontends and end-to-end testing across the entire application. Use automation tools, integration testing frameworks, and continuous integration practices.

## Cons and drawbacks

Depending on the team size and code splits across your micro frontend solutions; some overheads might be introduced during the setup, migration, business-as-usual code changes, and deployment.

## 1. **Increased Complexity:**

If not properly done, micro-frontends can introduce a higher level of complexity to the development process. Managing multiple independent codebases, versioning, and ensuring consistent user experience across micro-frontends can add overhead. Likewise, as the number of micro-frontends grows, so does the complexity of orchestrating their interactions.

**Mitigation Strategy:**
Implement clear guidelines and standards for communication between micro-frontends - Utilise well-defined APIs and protocols to maintain consistency and reduce the risk of integration issues.

## 2. **Performance Overheads:**

In contrast with the benefit previously mentioned, the modular nature of micro-frontends often leads to increased loading times and overhead performance if synchronously implemented without lazy loading. Each micro-frontend may come with its dependencies, resulting in larger bundles and potentially impacting the overall page load performance.

**Mitigation Strategy:**
Employ strategies like lazy loading to load micro-frontends on-demand, minimising the initial page load. Optimise the build process to reduce bundle sizes and leverage Content Delivery Networks (CDNs) for efficient content distribution.

## 3. **Cross-Cutting Concerns:**

Managing cross-cutting concerns such as authentication, authorisation, and shared styling becomes more complex in a micro-frontend architecture. Ensuring a consistent and secure approach across all micro-frontends requires careful coordination.

**Mitigation Strategy:**
Establish dedicated micro-frontends or shared libraries for handling cross-cutting concerns. Implement authentication and authorisation mechanisms consistently and use CSS-in-JS solutions to maintain a unified look and feel.

## 4. **Versioning and Dependency Management:**

Coordinating the versions of multiple micro-frontends to ensure compatibility can be challenging. Dependency management becomes crucial to prevent conflicts and maintain a smooth development and deployment pipeline.

**Mitigation Strategy:**
Implement a robust versioning strategy-Utilise tools like npm or Yarn workspaces to manage dependencies efficiently. Regularly update and test dependencies to identify and resolve compatibility issues early in development.

## 5. **Testing Complexity:**

Testing micro-frontends introduces complexities related to integration testing and end-to-end testing. Coordinating tests across independent codebases requires additional effort, and ensuring comprehensive test coverage becomes more challenging.

**Mitigation Strategy:**
Invest in automated testing frameworks that support testing across micro-frontends. Implement end-to-end testing tools and frameworks that enable testing scenarios involving multiple micro-frontends.

## 6. **Code duplication:**

Code duplication can be quickly introduced during different stages of development of micro-frontends across teams; this could result from a lack of proper communication or even based on how reusable the code/implementation is. During refactors, or when code is being moved around micro-frontends, redundant code can also be forgotten, reducing the quality of the code maintenance.

**Mitigation Strategy:**
Planning sessions should be organised between teams to reduce the potential of rework or similar functionality that may already exist in another team.
Migrations should be appropriately tracked and planned with tickets to ensure the graceful removal of redundant code afterwards.

## Summary

Micro-frontends revolutionise frontend development by applying micro-services principles, enabling individual modules' independent development, deployment, and scalability. This approach promotes faster development cycles, innovation, and team collaboration using diverse technologies. It enhances scalability and performance through horizontal scaling and CDN utilisation while fostering code reusability. Careful planning is essential while defining module boundaries and communication mechanisms, addressing concerns, and adopting suitable build and deployment strategies. Prioritising testing and quality assurance ensures reliability. Despite advantages, developers must be aware of challenges, requiring effective mitigation strategies to balance the benefits and complexities for successful implementation. Ongoing adaptation and consideration are crucial as the project evolves.


Like micro-services for APIs, the micro-frontend architecture is a front-end web development pattern in which a single application may be built from different builds. It enables independent development, deployment, and scalability of individual frontend modules using different frameworks if needed. Micro-frontends can break down the front end into smaller, self-contained modules that can be developed, tested, and deployed independently.

Micro-Frontends - Breaking Down Monolithic Frontend Architectures


### Introduction

I led the frontend development of a customer-facing and merchant-facing e-commerce/FinTech solution which facilitated synchronized sales data across multiple channels (e.g. Woo-Commerce and Point of Sale (P.O.S) outlets in multiple locations) with internal tools for administrative management e.g. handling Know Your Customer (K.Y.C) processes.

### About the company

The company is Kloud Commerce (formerly PayPecker), a Unified commerce solution for small, medium and large scale businesses, helping to improve B2B, B2C, D2C operations across different sales channels and outlets for effective synchronisation and integrations.

A UK registered E-commerce/Fin-Tech solution company which operated in Nigeria and Ghana with plans to expand to a couple of other countries in Africa while I was working with the company.

### My Impact

As the Frontend Lead for the company, I collaboratively pioneered the development of the product with the below solutions:

- A customisable multi-store and multi-outlet e-commerce solution for a seamless shopping to checkout to payment experience for customers.
- A payment modal SDK with multiple options including Card, USSD, MoMo (Mobile Money) and Bank Transfer.
- A Merchant/Retailer facing back-office for managing their stores, orders, payments as well as other day-to-day operations & settings.
- Internal tools like an admin portal for managing K.Y.C processes and other administrative operations.
- Development of third party integration systems/plugins for recording offline sale on P.O.S systems like Retailman and online systems like Woo-commerce.

We were able to successfully deliver these features within our timeline by leveraging modern technologies such as ReactJS and NextJS which were primarily used for the website, NuxtJS and VueJS for the payment modal SDK, e-commerce solution, and admin portals.

All these led to a successful pre-seed of **$765,000 USD** raised.


I led the frontend development of a customer-facing and merchant-facing e-commerce/FinTech solution which facilitated synchronized sales data across multiple channels (e.g. Woo-Commerce and Point of Sale (P.O.S) outlets in multiple locations) with internal tools for administrative management e.g. handling Know Your Customer (K.Y.C) processes.

How I led the frontend development of a FinTech company


## Introduction

As companies strive to deliver exceptional user experiences and navigate the evolving landscape of web technologies, the role of a senior frontend engineer has become increasingly critical. Senior frontend engineers are experienced professionals who possess a deep understanding of frontend development and play a crucial role in shaping the technical direction of projects. In this article, we will explore the expectations placed upon a senior frontend engineer in terms of skills, responsibilities, and leadership qualities.

## Technical Skills and Expertise

1. **Advanced Frontend Technologies**: A senior frontend engineer should have a comprehensive understanding of advanced frontend technologies such as HTML5, CSS3, JavaScript, and modern frameworks like React, Angular, or Vue.js. They should be adept at leveraging these technologies to build scalable, performant, and user-friendly web applications.

2. **Responsive Design and Accessibility**: A senior frontend engineer should have a strong grasp of responsive design principles and the ability to create responsive layouts that adapt to different devices and screen sizes. They should also prioritize accessibility and ensure that their code complies with accessibility standards to provide an inclusive user experience.

3. **Performance Optimization**: Senior frontend engineers should possess expertise in optimizing web application performance. This includes techniques such as code minification, image optimization, lazy loading, and reducing network requests to deliver fast-loading websites and smooth user interactions.

4. **Cross-Browser Compatibility**: A senior frontend engineer should have a deep understanding of cross-browser compatibility issues and the ability to write code that works seamlessly across different browsers and platforms. They should be familiar with browser-specific quirks and implement appropriate solutions or workarounds.

5. **Testing and Quality Assurance**: Senior frontend engineers should advocate for and implement robust testing strategies, including unit tests, integration tests, and end-to-end tests. They should be proficient in using testing frameworks and tools to ensure the quality, reliability, and maintainability of the codebase.

## Responsibilities and Leadership Qualities

1. **Architectural Design and Scalability**: Senior frontend engineers are responsible for designing scalable and modular frontend architectures. They should possess a solid understanding of software design principles, component-based architectures, and design patterns. They should also demonstrate the ability to make informed decisions regarding the selection and integration of frontend technologies.

2. **Code Review and Mentorship**: Senior frontend engineers are expected to conduct thorough code reviews, providing constructive feedback to improve code quality and maintain best practices. They should actively mentor and guide junior engineers, fostering a collaborative and knowledge-sharing environment within the team.

3. **Collaboration and Communication**: Senior frontend engineers should excel in cross-functional collaboration, working closely with product managers, designers, and backend engineers to translate requirements into technical solutions. They should possess strong communication skills to articulate complex technical concepts to both technical and non-technical stakeholders.

4. **Continuous Learning and Innovation**: A senior frontend engineer should stay up-to-date with the latest frontend trends, tools, and best practices. They should proactively explore new technologies, experiment with innovative approaches, and advocate for their adoption when appropriate.

5. **Problem Solving and Troubleshooting**: Senior frontend engineers should have excellent problem-solving and troubleshooting skills. They should be able to identify and resolve complex technical issues efficiently, making data-driven decisions and prioritizing user experience and application performance.

> > In conclusion, a senior frontend engineer is expected to possess a comprehensive set of technical skills, demonstrate leadership qualities, and shoulder responsibilities that contribute to the success of frontend projects. By combining their technical expertise with effective communication, collaboration, and a continuous learning mindset, senior frontend engineers can drive innovation, mentor junior team members, and elevate the quality of frontend development within their organizations.


As companies strive to deliver exceptional user experiences and navigate the evolving landscape of web technologies, the role of a senior frontend engineer has become increasingly critical. Senior frontend engineers are experienced professionals who possess a deep understanding of frontend development and play a crucial role in shaping the technical direction of projects. In this article, we will explore the expectations placed upon a senior frontend engineer in terms of skills, responsibilities, and leadership qualities.

The Expectations of a Senior Frontend Engineer - Skills and Responsibilities


## Introduction

This article will guide you on how to break into tech with little to no experience by sharing resources, tips, and tricks on how to get started, fine-tune a field of interest, build your profile, prepare for interviews, and get full-time jobs/contracts.

Suppose you’re like most newbies out there, tired of hearing buzzwords like AI (Artificial Intelligence) and ChatGPT without having any idea of what it’s about and feel burdened by how difficult it may seem to do tech; I’ll like to let you know that you’re not alone, but keep in mind that getting started isn’t “rocket science” and “landing on the moon” from the very first day, little steps add up.

At the end of this article, you will find some advice that will be helpful regardless of your skill level or experience; they might be the words you need to hear or remember.

## How to get started

- Search for roles in tech on Google to get an idea of options available, reading short descriptions about them as well.
- Search for job openings in the field(s) in your interests. LinkedIn is an excellent platform for this.
- Go through the job description and write down common skills among the job openings.
- With that idea in mind, you can start your research, getting a surface-level understanding of those topics.
- Read articles, watch videos of people talking about how they got started in those fields of study/work.
- Fine-tune your field of interest with the above in mind.

## Getting better

- Kickstart with learning programs like Alt School, watch free crash courses on YouTube, and take a couple of paid courses on platforms like Udemy, Coursera, etc.
- Work on personal projects to build your portfolio and make your theoretical knowledge practical.
- Harsh truth: You’ll undoubtedly get frustrated at one point or the other in tech; continuous practice would help build the muscle of endurance and perseverance, especially when you have a personal interest in your learning.

## Building your profile

- Draft an updated CV.
- Create professional accounts on job searching platforms like LinkedIn.
- Create a shareable portfolio if applicable, e.g., with GitHub, Figma, a personal website, etc.

![](https://miro.medium.com/v2/resize:fit:1400/0*FF-Ov-5D6OaKKCHr)

## Preparing for interviews and contract jobs

- With your portfolio ready, practice your speech by practicing how you’d talk about yourself, what you have worked on, your interests, and your goals (having an understanding of the target company and tailoring your speech in that line can help stand you out as it depicts common interest).
- Research the pattern of interviews specific to your field of interest. E.g., common questions asked in technical interviews for Software Engineers, questions about the thought process for Product designers, portfolio reviews, etc.
- Learn how to negotiate with an idea of the market value/salary range of the role of interest or scope of work.

### The typical pattern of interviews:

- **Introductory call**: An almost informal call to talk about the role, what the company does, and balance the candidate's expectations as well as get a sense of the skill level or experience of the candidate.
- **Technical interview**: Coding challenge, take-home assignment, portfolio review, industry-specific questions, etc.
- **Assessment**: Consideration of interpersonal skills, technical skills, relevant experience, etc.
- **Job offer and negotiation**.

## Mentorship/Guidance

- Not everyone is privileged to have access to a mentor or someone experienced/skilled in their field of interest. If you do come in contact with or know someone that suits the above description, the best way to gain the most from such interactions is not to expect a sole dependence on whatever they say or do or request a “handout” but for you to do your research (having in mind the tips already shared above), have and ask specific questions, this helps to make the conversations more effective and enables the mentor help you better/easier.
- It is easier for a mentor to share tips on becoming a better Frontend Engineer than to start from scratch explaining the difference between a Frontend Engineer, a Backend Engineer, a DevOps Engineer, etc. Summary: ensure you do your due diligence of research to help your helper help you.

## Personas explaining the concept.

Below are examples of people trying to break into tech who need more experience or an idea of what they want to do.

_NB: Please note that the names used here are only for demonstration purposes with all due respect to the people and companies/bodies associated with them._

![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*9_n9XhJljU4fRTQr.jpg)

### Oppenheimer wants to be a Project Manager.

- Oppenheimer has good planning and collaboration skills and loves to learn. He searches on LinkedIn for job openings in project management.
- Oppenheimer finds a couple of openings asking for an understanding of “Agile Methodology,” “Working with a cross-functional team,” “OKR (Objective key result) approach,” “Planning quarterly goals,” “Scoping and balancing expectations,” etc.
- Oppenheimer begins his research as he Googles what Agile means and realizes there’s another methodology called Waterfall; he reads further; the more he searches into a topic, the broader it becomes, and with time, he sees the connection between them.
- Oppenheimer starts to build confidence in his research capabilities and familiarity with common keywords used in the industry.
- Oppenheimer decides to apply to companies to work for free but, unfortunately, is denied. Hence, he decides to reach out to his friends or join tech communities to find a project to collaborate on.
- Oppenheimer takes professional courses to solidify his knowledge and practice/collaboration work.
- Oppenheimer is now more experienced in the field and has worked on several projects, so he returns to the job market with the tips above in mind.

![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*CoYJ0YjMlGogZ7R-.jpg)

### Barbie with no idea of what she wants to do in tech

- Barbie searches on Google with keywords relevant to jobs in tech and finds roles like “Project Manager,” “Product Designer,” “Software Engineer,” “Backend Engineer,” “Frontend Engineer,” “Social Media Manager,” “Graphic Designer,” etc.
- Barbie now knows tech roles and spends time reading articles, asking questions, and watching videos about what people do in those roles.
- Barbie realizes she wants to be a Product designer.
- Barbie searches LinkedIn for job openings for Product designers and finds a couple of openings asking for proficiency in Figma.
- Barbie starts watching free videos about how to get started with Figma.
- Barbie grasps the basics of what Figma is and has an idea of its use.
- Barbie understands better with structures, so Barbie signs up for a course on Udemy.
- Barbie now knows how to use the tool, so she starts to practice and creates a couple of designs and a portfolio for herself.
- Barbie now has the option to source for freelance gigs, collaborate with peers learning together, undergo free/paid internships, or source for full-time jobs/contracts.

![](https://miro.medium.com/v2/resize:fit:1400/format:webp/0*iy-keYXXOE-1rdIF.jpg)

### Tom Cruise wants to be a self-taught Frontend Engineer and has an experienced friend

- Tom is a self-motivated creative that enjoys expressing himself through pixels and code, converting ideas and designs into usable solutions on the web.
- From a couple of searches on Google and browsing the web, Tom realizes he needs to know the basics of HTML and CSS to get started.
  Tom has a friend, Precious OSSAI, that is experienced in this field. Tom asks for advice, and Precious suggests understanding box models, flex-box, and grid systems as a start after grasping the proper use of semantic HTML tags.
- Tom takes the advice, understands the concepts, studies further, and practices to the point where he feels comfortable learning other programming languages; thus, he picks up Javascript.
- Tom goes back to Precious, showing progress; Precious seeing the dedication, is motivated to help further and explains a couple of concepts, throwing light on topics Tom can go back to research.
- Tom is getting confident and is ready to pick up frameworks of the language, so he has started studying and practicing with ReactJS.
- Tom has built muscle in picking up new knowledge in tech, research, in troubleshooting/debugging. He has the option to continue on this path of being self-taught, undergo training, take up freelance gigs, find a full-time job, and pursue a career with the tips mentioned earlier shared in this article.

## Words of advice

- While internships are great, personal study is essential to level up, attract more value, become great at your craft, and stand out.
- Try to be as practical as possible with hands-on attempts with or without external support.
- Focus on progress, and remember how far you have come; rather than beat yourself up about what you need to achieve or learn, enjoy the journey, not just the destination.

> > Imposter syndrome never ends, no matter how skilled or experienced you are; it may not completely be a bad thing but a tool you can use to improve. The more you know, the more you know you don’t know, but the more you know, the more you know you know better than you knew.
> > — Precious OSSAI.

## Resources and links

Below is a list of helpful links and resources.

- ### Job searching platforms
  1. [LinkedIn](https://linkedin.com)
  2. [Otta](https://Otta.com)
  3. [Glassdoor](https://glassdoor.com)
- ### Skill acquisition
  1. [Udemy](https://udemy.com)
  2. [Coursera](https://coursera.com)
  3. [Alt School](https://www.altschoolafrica.com)

[Medium link](https://pecrio.medium.com/breaking-into-tech-getting-gigs-jobs-mentorship-and-internships-with-little-to-no-experience-a713ce1fb15c)


This article will guide you on how to break into tech with little to no experience by sharing resources, tips, and tricks on how to get started, fine-tune a field of interest, build your profile, prepare for interviews, and get full-time jobs/contracts.

Breaking into tech, getting gigs, jobs, mentorship, and internships


## Introduction

The process of building and releasing features varies amongst teams, projects, companies, and communities. However, there are some common practices that can be applied to streamline the development process and ensure the quality and reliability of the codebase. This can be achieved by putting automated checks in place at various steps, this checks can be unit tests, integration tests, end-to-end tests, a build step and more. This process is known as Continuous Integration and Continuous Deployment (CI/CD). In this article, we will explore the basics of CI/CD, how GitHub Actions can be leveraged, and the importance of automated tests in the CI/CD pipeline.

## Understanding CI/CD

In relatively simple terms, CI/CD is a software development technique that involves performing a set of predefined actions(workflow/steps) when some predicates are met (e.g. code changes or by manual intervention like running a dispatch action from GitHub), these could be running automated tests, and deploying applications to production environments with secret keys. The goal is to catch issues early, reduce manual errors, and deliver software faster and with greater confidence. The CI/CD process typically consists of the following stages:

1. **Code Integration**: Developers regularly push their code changes to a shared repository, ensuring that the latest changes are integrated into the codebase.

2. **Build and Compilation**: The CI/CD pipeline automatically builds and compiles the application, generating executable files or artifacts.

3. **Automated Tests**: Automated tests, including unit tests, integration tests, and end-to-end tests, are executed to validate the functionality and quality of the application.

4. **Deployment**: If all tests pass, the application is deployed to various environments, such as staging or production, using a consistent and repeatable process.

5. **Monitoring and Feedback**: The deployed application is continuously monitored, and feedback is provided to the development team for further improvements. [Read more on platform monitoring](https://ossaiprecious.com/articles/platform-monitoring-and-visibility-tools-and-sops-for-sre)

### Leveraging GitHub Actions

GitHub Actions is a powerful workflow automation tool provided by GitHub. It allows developers to define custom workflows using YAML configuration files that specify the steps to be executed in response to specific events. Here's how GitHub Actions can be leveraged in a CI/CD pipeline:

1. **Workflow Definition**: Create a workflow file (e.g., `.github/workflows/main.yml`) in your repository, defining the triggers, steps, and conditions for your CI/CD process.

2. **Event Triggers**: Specify the events that trigger the workflow, such as pushes to specific branches, pull requests, or scheduled intervals.

3. **Workflow Steps**: Define the steps that should be executed in the workflow, such as cloning the repository, installing dependencies, building the application, running tests, and deploying to different environments.

4. **Environment and Secrets**: Utilize GitHub Actions' environment variables and secrets to store sensitive information like API keys or credentials securely.

5. **Workflow Execution**: GitHub Actions will automatically execute the defined workflow when the specified events occur, providing real-time logs and feedback on the execution.

## Importance of Automated Tests

Automated tests play a crucial role in a robust CI/CD pipeline. They provide confidence in the quality of the codebase, help identify bugs or regressions, and allow.

## Summary

CI/CD, powered by tools like GitHub Actions, has become a fundamental practice in modern software development. It enables teams to automate the integration, testing, and deployment of applications, resulting in faster and more reliable software delivery. GitHub Actions provides a flexible and customizable platform for defining workflows that encompass various stages of the CI/CD process. By leveraging GitHub Actions, developers can streamline their development workflows, trigger actions based on specific events, and automate the building, testing, and deployment of their applications.

Automated tests are an integral part of a successful CI/CD pipeline. They ensure the functionality and quality of the codebase by automatically validating its behavior through unit tests, integration tests, and end-to-end tests. By catching issues early in the development process, automated tests help reduce manual errors and provide confidence in the stability and reliability of the application. Integrating automated tests within the CI/CD pipeline allows for faster feedback loops and faster identification of issues, enabling teams to iterate and improve their codebase efficiently.

By adopting CI/CD practices, utilizing GitHub Actions, and incorporating automated tests into the workflow, development teams can streamline their development processes, increase code quality, and deliver software with greater efficiency and reliability. These practices contribute to improved collaboration, faster iterations, and ultimately, enhanced user experiences.


The process of building and releasing features varies amongst teams, projects, companies, and communities. However, there are some common practices that can be applied to streamline the development process and ensure the quality and reliability of the codebase. This can be achieved by putting automated checks in place at various steps, this checks can be unit tests, integration tests, end-to-end tests, a build step and more. This process is known as Continuous Integration and Continuous Deployment (CI/CD).

CI/CD Basics - Streamlining Development with GitHub Actions and Automated Tests


## Introduction

Feature flagging is a technique that allows developers to control the availability and visibility of specific features in an application. It has become an essential practice in modern software development, enabling teams to release new features gradually, test them with specific user groups, and easily roll back changes if needed. In this article, we will explore frontend feature flagging, its benefits, and how it can be implemented effectively.

## What is Frontend Feature Flagging?

Frontend feature flagging involves selectively enabling or disabling features within the user interface (UI) of a web application. By leveraging feature flags, developers can control the behavior of their frontend code based on various conditions, such as user roles, A/B testing groups, or specific environments. This allows for a granular control over feature releases and reduces the risk of introducing bugs or negatively impacting user experience.

```javascript
// Example of a feature flag in JavaScript
if (featureFlags.newHeader) {
  // Render the new header
  //   This can be a simple if else statement or a more complex switch statement with authentication and user roles
} else {
  // Render the old header
}

// The source of the feature flag can be from a configuration file, environment variable, or a remote feature flag management tool like LaunchDarkly.
```

## Benefits of Frontend Feature Flagging

### 1. Gradual Feature Rollouts

Feature flagging empowers development teams to release new features incrementally. By initially enabling features for a small subset of users, developers can gather valuable feedback and detect potential issues early on. Gradual rollouts also help in managing server load and ensuring a smooth user experience, as changes can be carefully monitored and scaled as necessary.

### 2. A/B Testing and Experimentation

Frontend feature flagging plays a crucial role in A/B testing and experimentation. By dividing users into different groups and enabling specific features for each group, teams can measure the impact of changes and make data-driven decisions. This iterative approach allows for the optimization of user experience, conversion rates, and overall product performance.

### 3. Hotfixes and Rollbacks

In the event of a critical bug or performance issue, feature flagging enables quick hotfixes and rollbacks. By toggling off a problematic feature or rolling back to a stable version, developers can mitigate the impact on users and swiftly address the issue without the need for a full application deployment. This flexibility reduces downtime and improves the reliability of the software.

### 4. Continuous Integration and Delivery

Frontend feature flagging seamlessly integrates with modern CI/CD (Continuous Integration and Continuous Delivery) pipelines. By incorporating feature flags into the development workflow, teams can automate the process of enabling or disabling features based on predefined conditions. This promotes a more efficient and reliable release process, allowing for faster iterations and shorter time-to-market.

## Implementing Frontend Feature Flagging

Implementing frontend feature flagging requires a combination of proper tooling, backend infrastructure, and well-defined processes. Here are some key considerations:

### 1. Feature Flag Management Tools

Choose a feature flag management tool that aligns with your team's requirements. There are numerous options available, such as LaunchDarkly, Split, and Flagsmith, which provide robust APIs, UI dashboards, and SDKs for various programming languages.

### 2. Granular Feature Flag Configuration

Define feature flags at a granular level to gain fine-grained control over your frontend features. This allows you to enable or disable specific parts of your application based on user roles, geographic location, user attributes, or any other relevant conditions.

### 3. Testing and Validation

Thoroughly test your feature flags to ensure they work as intended and do not introduce any unexpected issues. Use automated testing frameworks, conduct QA (Quality Assurance) processes, and consider conducting staged rollouts to verify the behavior of new features in different environments.

### 4. Monitoring and Analytics

Implement monitoring and analytics capabilities to track the performance and usage of your feature flags. This data can help you make informed decisions about feature stability, adoption rates, and user engagement, and identify areas for improvement. This can be used as a source of insight for Behavior Driven Development (BDD) and User Acceptance Testing (UAT).

### 5. Rollback and Incident Response

Establish clear processes for rolling back features and responding to incidents related to feature flagging. Define SOPs (Standard Operating Procedures) for handling critical issues, communicating with stakeholders, and conducting post-incident reviews to prevent similar occurrences in the future. Rollback can be immediate from an external feature flag maintaining solution like LaunchDarkly if from your deployment process or setup. If you are interested in learning more about incident management, check out our article on [Platform Monitoring and Visibility](https://ossaiprecious.com/articles/platform-monitoring-and-visibility-tools-and-sops-for-sre).


Feature flagging is a technique that allows developers to control the availability and visibility of specific features in an application.

Frontend Feature Flagging - A Powerful Tool for Controlled Deployments


## Introduction

Form validations are necessary when building any solution needing user input, as users can insert undesirable values erroneously or intentionally. To ensure the values received are as expected, we may want to handle the validations both on the client side and server side, and this provides early feedback for the user when interacting with the form as well as accurate response from our backend systems with readable messages to relay to the user, this could be an error message, an intermediary message for a multi-stepped process, etc.

It is essential to think of the best UX (user experience) for the end users of whatever platform, application or tool we build, providing relevant titles and placeholders and handling the different states (e.g. loading, disabled, error state) accordingly with accessibility in mind.

Luckily, form validations are not a new innovation, and we don't need to "recreate the wheel" in writing complex logic from scratch, as there are a couple of libraries already in existence that people, teams, and communities have spent time building that we can extend or use to create powerful/robust forms. Some famous examples include Formik, react-hook-form and redux form with schema builders like Zod and Yup.

## My recommended process for building dynamic forms

1. Handshake on a contract with field values expected by the backend to plan accordingly on the front end and choose your form library based on your use case.
2. Depending on your form's complexity, you might have to map the values you receive from your backend system to an acceptable format for your frontend form library/handler. Extra notes (it would be helpful to have tests for this mapper function(s)).
3. Pre-fill your form with values received from the backend (if applicable) and ensure your action buttons are disabled when not dirty (field values haven't been changed).
4. Handle client-side form validations on your desired event (e.g. onBlur, onTouch, etc.) and show relevant error messages.
5. You might want a separate validation approach for a save progress action and a submit form action.
6. When the form is submitted, depending on whether the validations are passing from the previous step, you may want to map your form values to the acceptable format as agreed with the backend contract (tests would also be helpful here).
7. Handle loading states when the backend is processing the form; once a response is received, ensure you relay a readable message to the user; this could be a success message, an error toast, or a list of issues with the values received; you may also want to highlight the problematic fields.
8. If the form is multi-stepped, you may want to handle the state of the form accordingly, e.g. show a progress bar, show a success message, etc.


Form validations are necessary when building any solution needing user input, as users can insert undesirable values erroneously or intentionally. To ensure the values received are as expected, we may want to handle the validations both on the client side and server side, and this provides early feedback for the user when interacting with the form as well as accurate response from our backend systems with readable messages to relay to the user, this could be an error message, an intermediary message for a multi-stepped process, etc.

Articles