DEV Community: Muhammad Ahsan Ayaz

How to Become a Google Developer Expert (GDE): The Complete Guide

Muhammad Ahsan Ayaz — Tue, 13 Jan 2026 07:30:26 +0000

The Architect of Influence — A Definitive Roadmap

Part I: The Philosophy of Expertise and Program Dynamics

In the sprawling, chaotic, and ever-evolving landscape of global technology, the Google Developer Expert (GDE) program stands as a beacon of validated authority. It is not merely a certification that one studies for and passes; rather, it is a recognition of a professional state of being. The program identifies and elevates individuals who have achieved a symbiotic mastery of Google technologies and a profound commitment to the developer community.

These are professionals who do not just build in silence but who vocalize their learnings, democratize their discoveries, and actively lift the ecosystem around them. It is a distinction awarded to those who serve as the bridge between Google’s engineering teams in Mountain View, Zurich, or New York, and the millions of developers worldwide using their tools.

Understanding the program requires dispelling the most common misconception: GDEs are not Google employees. They are strictly independent professionals—they could be CTOs of startups, freelance consultants, Senior Engineers at major enterprises, or agency founders. This independence is crucial. It gives their advocacy credibility. When a GDE recommends a specific architecture using Firebase or Cloud Run, the audience knows this advice is born from battle-tested experience in the real world, not from a corporate script. The program, therefore, is an elite network of thousands of professionals globally who have demonstrated not just technical competence, but the "Googliness" required to mentor, teach, and inspire.

The journey to becoming a GDE is often described not as a sprint, but as a career-altering marathon.

It transforms a developer's trajectory, moving them from a participant in the tech economy to a leader within it. The benefits of this transformation are tangible and immense, creating a flywheel effect where access to resources allows for better work, which leads to greater recognition, which in turn unlocks further opportunities.

The Value Exchange: Analyzing the Benefits Ecosystem

The GDE program operates on a model of mutual exchange. Google provides experts with resources, access, and status; in return, experts provide the community with guidance, feedback, and advocacy. This relationship is structured around a tier of benefits that are designed to keep the expert at the bleeding edge of innovation, ensuring they remain the most knowledgeable person in the room.

Table 1: Strategic Analysis of GDE Program Benefits

Benefit Category	Specific Allocation	Strategic Implication for the Expert
Direct Access	Product Team Collaboration	Experts often have direct lines to the engineering teams building the tools they use. This means a GDE can influence the product roadmap, reporting bugs or requesting features with a weight that an average user lacks.
Technical Enablement	Early Access Programs (EAPs)	GDEs frequently receive access to Alpha and Beta versions of software (e.g., AI Studio early previews, new Firebase features). This allows them to prepare talks and articles before a public launch, positioning them as immediate thought leaders on "day one" of a release.
Financial Support	Cloud & AI Credits	The program provides substantial infrastructure support, including Google Cloud credits, specific stipends for Generative AI development , and access to Firebase Studio workspaces. This removes the financial barrier to experimentation, allowing experts to build complex demos without personal cost.
Professional Growth	Summit Invitations	Access to the annual GDE Summit (often held in major tech hubs like Mountain View, Toronto, or Krakow) provides a high-density networking environment. This is an all-expenses-paid opportunity to connect with peers who are also at the top of their fields.
Certification	Vouchers & Training	Experts sometimes receive vouchers for Google Cloud certifications and unlimited access to over 700 labs and courses. This ensures that their formal credentials remain impeccable without out-of-pocket expenses.
Tooling	Software Licenses	Benefits include subscriptions to tools like Gemini Code Assist and JetBrains IDEs, streamlining the actual workflow of coding and content creation.

These benefits are not merely perks; they are tools of the trade. The cloud credits allow an expert to spin up a Kubernetes cluster to demonstrate a scaling principle during a workshop. The early access allows an expert to write the definitive blog post on a new Android lifecycle event the moment the embargo lifts. The travel support enables an expert to speak at a conference in a different continent, expanding their personal brand globally. Thus, the benefits fan the flames of the expert's impact.

The Tenure Model and Active Status

It is critical to understand that "GDE" is an active status, not a lifetime achievement award. The program requires continuous contribution. An expert must demonstrate, usually on an annual basis, that they are still contributing to the ecosystem. If an expert stops speaking, writing, or mentoring, they are moved to "Alumni" status. This tenure model ensures that the directory of experts remains dynamic and relevant. It prevents the title from becoming stale and ensures that anyone currently holding the badge is actively engaged with the current state of the technology. This creates a healthy pressure: to remain a GDE, one must remain a student of the craft and a servant of the community.

Part II: The Mental Model and Strategic Preparation

The "Fireship" Philosophy: Mindset Over Metrics

One of the most articulate voices on the path to becoming a GDE is Jeff Delaney, the creator of the Fireship channel and a GDE for Firebase. His journey and advice provide a critical framework for aspiring experts, emphasizing that the "how" is less important than the "why." Jeff argues that many developers approach the program with the wrong goals: they want internet fame, viral videos, or a massive Twitter following. While these metrics can be byproducts of success, they are poor primary objectives.

The correct mindset, according to this philosophy, is rooted in utility. The goal should be to be "unbelievably helpful" to other developers. Whether a video gets 500 views or 500,000 views is secondary to the quality of the insight provided to those who watch it. The aspiring GDE must shift their internal narrative from "I need to be famous" to "I need to solve this specific problem for my peers." This authenticity is what Google looks for. They are adept at spotting "career climbers" versus "community builders." The former are often rejected; the latter are embraced.

This mindset shift involves defining a Mission. A candidate should not just be a "Web Developer." They should be "The developer who is making Angular accessible to junior engineers in emerging markets," or "The engineer obsessed with Web Performance and Core Web Vitals." This specialization makes the candidate memorable. When the review committee looks at an application, they should immediately understand the candidate's specific value proposition to the ecosystem.

Strategic Niche Selection: The Major and The Minor

The GDE program is segmented into specific technology categories (e.g., Android, Google Cloud, Web Technologies, Machine Learning, AI, Firebase, Flutter, etc). A common strategic error is attempting to be a generalist. The program rewards depth.

The Major: This is the primary technology where the candidate has deep, production-level expertise. For example, if one chooses Android, they must know the framework inside out—from the nuances of Jetpack Compose to the depths of memory management and the build system.
The Minor: This is a secondary, often complementary skill that adds flavor to the expertise. For instance, an Android GDE might have a minor in AI/ML (On-device ML) or Firebase. This intersection is often where the most interesting content is created.

Choosing a niche also involves analyzing the "market density." Some categories, like broadly defined "Web Technologies," are incredibly competitive. Others, like Google Maps Platform, Google Pay, or specific subsets of Google Cloud (like Cloud Run or BigQuery), may have fewer experts, providing a strategic opening for a dedicated specialist to stand out quickly. For example, experts like Diana Rodriguez carved out a global reputation specifically by focusing on the Google Maps Platform, a niche that is critical but often less crowded than the general "JavaScript" space.

The Activity Roadmap: From Practitioner to Leader

The trajectory from zero to GDE typically spans 12 to 24 months of deliberate activity. This roadmap can be broken down into distinct phases of maturation.

Phase 1: The Builder (Months 1-6)

In this phase, the focus is entirely on technical competence and initial output. The candidate should be building real-world applications. Theoretical knowledge is insufficient; the expertise must be grounded in the trenches of production code.

Action: Build a complex side project or work on sophisticated features in a day job using the target technology.
Output: Start documenting the learning process. Write blog posts about the bugs encountered and how they were fixed. These don't need to be masterpieces; they need to be public logs of technical problem-solving.

Phase 2: The Teacher (Months 7-12)

Once technical confidence is established, the candidate must pivot to teaching. This is the core requirement of the GDE program.

Action: Step out of the "user" role and into the "educator" role.
Output: Submit proposals (CFPs) to local meetups. It does not matter if the audience is 10 people. I remember my first few sessions in Karachi, Pakistan. One of them was a workshop, and I had 3 people only 🙂 It was an hour and a half long workshop. The practice of structuring a talk and delivering it is what counts. Simultaneously, increase the cadence of written content. Aim for one high-quality article per month.

Phase 3: The Leader (Months 13-18+)

To cross the threshold into GDE status, one must show leadership.

Action: Don't just attend the meetup; organize it. Don't just use the open-source library; contribute a PR to it or maintain a fork.
Output: Mentorship becomes key here. Answering questions on Stack Overflow, helping junior colleagues, or running workshops. This demonstrates the "community impact" metric that Google scrutinizes heavily.

Part III: The Infrastructure of Success – The Activity Tracking Sheet

One of the most practical and critical pieces of advice for any aspiring GDE is to treat their community work as a data project. When the time comes to apply, the application form will ask for links, dates, and metrics for activities over the past year or more. Relying on memory is a recipe for failure. A dedicated Activity Tracking Sheet is the GDE's most valuable administrative tool.

3.1 Architecture of the Tracking Sheet

The tracking sheet should be hosted on Google Sheets for obvious reasons: accessibility, shareability (with mentors), and programmability via Apps Script. The structure must be granular enough to capture the "Impact" of every action.

Table 2: Recommended Structure for GDE Activity Log

Column Name	Data Type	Description & Strategic Importance
Date	ISO 8601	The specific date of the activity. Crucial for demonstrating consistency over time (e.g., "Active every month for 18 months").
Activity Type	Dropdown	Options: Speaking, Article, Video, Open Source, Mentoring, Organizing. Categorization helps you see if you are over-indexed in one area (e.g., too many blogs, not enough speaking).
Title / Topic	Text	The name of the talk or article. Should highlight the specific technology (e.g., "Optimizing Angular Change Detection").
Link / Evidence	URL	Direct link to the recording, slide deck, published article, or GitHub PR. This is the "proof of work" Google reviewers will click.
Reach (Hard Numbers)	Integer	The number of attendees, views, reads, or stars. This is the "Impact" metric. Do not guess; log the actual data.
Location / Platform	Text	e.g., "DevFest Stockholm," "Medium," "YouTube," "Stack Overflow." Shows the breadth of your footprint.
Tech Tags	Text	e.g., #Android, #Kotlin, #GCP, #Gemini. Useful for filtering if you apply for a specific GDE category.
Qualitative Impact	Long Text	Quotes from attendees, feedback tweets, or anecdotes about how the content helped someone. This "soft data" is powerful in the interview.

3.2 Automating the Portfolio with Apps Script

For the technically inclined (which, as a GDE candidate, you are), manually updating this sheet can be automated using n8n, cronjobs, or Google Apps Script. This not only saves time but serves as a portfolio piece in itself—a demonstration of proficiency with the Google Workspace developer ecosystem (if applicable).

Automation Workflow Examples:

YouTube Integration: A script can be written to query the YouTube Data API. It can iterate through the rows of the sheet, identify rows with YouTube links, fetch the current view count and comment count, and update the "Reach" column automatically. This keeps the portfolio dynamic and up-to-date.
Calendar Sync: A script can listen to a specific "Speaking Engagements" calendar in Google Calendar. When an event is added there, the script parses the metadata (date, title, location) and appends a new row to the tracking sheet. This ensures no event is ever forgotten.
Portfolio Generation: Using tools like Document Studio or custom scripts, the data in this sheet can be merged into a Google Doc or PDF template. This allows the candidate to generate a polished "GDE Impact Report" PDF with a single click when asked by a nominator or interviewer.

3.3 The Concept of the "Impact Report"

The application form asks for evidence of impact. This is distinct from activity. Activity is "I gave a talk." Impact is "I gave a talk, and as a result, 15 developers in the audience refactored their codebases to use the new Navigation Component." By tracking the "Qualitative Impact" column in the spreadsheet, candidates build a repository of these stories. When writing the application, these anecdotes provide the color and depth that differentiate a great candidate from a good one.

Part IV: The Nomination Strategy – Entering the Circle

The GDE program is invite-only in the sense that you cannot simply click a "Submit" button on a website to start the process. You must be referred (nominated) by an existing GDE or a Google employee. This creates a high barrier to entry and emphasizes the importance of networking.

4.1 The "Don't Ask, Attract" Strategy

A common mistake is to cold-message GDEs asking for a nomination. This is often perceived as transactional and presumptuous. The GDE reputation is on the line when they nominate someone; they need to be sure of the candidate's quality.

The superior strategy is the "Audit Request". Instead of asking for a nomination, the candidate should approach a GDE with their Activity Tracking Sheet and ask for guidance.

The Pitch: "I am working toward becoming a GDE in [Category]. I have logged my community work for the last 12 months in this sheet. Could you spare 10 minutes to review it and tell me where my gaps are?"
The Psychology: This positions the candidate as humble and serious. It gives the GDE a low-stakes way to help. If the portfolio is impressive, the GDE will naturally offer to nominate the candidate. If it is not, the candidate receives valuable feedback without facing a rejection.

4.2 Navigating the Ecosystem: The Stockholm Case Study

To understand how to navigate this network, let us examine the ecosystem in Stockholm, Sweden, because I live here. But this serves as a model for any region.

In Stockholm, the GDE network is vibrant and interconnected. Key figures include:

Ankur Roy: A Cloud GDE and Solutions Architect who speaks frequently on integrating Google Cloud with Workspace (e.g., using Firebase Studio).
Mohammed Aboullaite: A Google Cloud GDE known for his amazing articles at https://aboullaite.me/ and speaking at international conferences.
Vandad Nahavandipoor: A Flutter/Dart GDE who works at Pixolity AB and is the author of https://github.com/vandadnp/flutter-tips-and-tricks with over 6.9k stars on GitHub.
Myself (Muhammad Ahsan Ayaz): A GDE in AI & Angular, author of 3 Angular books, creator of the famous Angular in 90 minutes crash course (~0.6 million views), and creator of ngx-device-detector (13 million npm installs & 5.5k+ projects on GitHub using it).

These experts congregate at specific hubs: GDG Stockholm (Android & Web) and GDG Cloud Stockholm. These groups host events like DevFest Stockholm, a massive annual conference.

The Tactical Approach for a Candidate:

Presence: Attend these meetups consistently. Do not just show up; sit in the front, ask questions, and stay for the "mingle".
Volunteer: Offer to help the organizers (who are often GDEs) with logistics. This builds trust.
Speak: Propose lightning talks. Even a 5-minute demo puts the candidate on the radar of the organizers (the potential nominators).
Connect: Once face-to-face rapport is established, send a follow-up email sharing the Activity Sheet and asking for the "Audit."

4.3 The Outreach Template

When the time is right to formalize the request for advice (and implicitly, nomination), the communication should be professional and evidence-based.

Subject: Seeking Mentorship: GDE Roadmap & Portfolio Review

Body:
Hi [Name],

It was great meeting you at last week. Your point about really clarified the issue I was having with my current project.

As I mentioned, I have been focusing heavily on contributing to the community over the past year. My long-term goal is to join the GDE program to further scale this impact.

I have compiled a log of my speaking, writing, and open-source contributions here: [Link].

I know you are busy, but if you ever have a brief moment, I would value your honest assessment. Do you feel this body of work is approaching the standard for a nomination, or should I focus on increasing my output in for the next few months?

Thank you for your leadership in our community.

Best regards,

This email is respectful, provides evidence, and asks for feedback rather than a favor.

Part V: The Application and Interview Gauntlet

Once a nomination is submitted, the candidate receives an invitation to apply. This kicks off a rigorous evaluation process consisting of an eligibility check and two distinct interview phases.

5.1 The Application Form

The application is the first filter. It requires the candidate to transfer the data from their Activity Sheet into Google’s system. The key here is to select the most impactful activities, not just the most recent. The "Impact" metrics (views, attendees) are critical data points that the internal review team uses to verify the reach of the candidate.

5.2 The Community Interview (Behavioral)

If the application passes the internal screen, the candidate is invited to the Community Interview. This is usually conducted by an active GDE from a different region to ensure impartiality.

Objective:

The interviewer is assessing "Googliness," cultural fit, and communication skills. They want to know if the candidate is a kind, helpful, and articulate representative of the community.

Key Behavioral Questions & Strategy:

"Why do you want to be a GDE?"
- Trap: "It will look good on my resume."
- Strategy: Focus on service. "I want to amplify my ability to help others. Being a GDE gives me better access to information that I can pass on to the junior developers I mentor".
"Tell me about a conflict in a community setting."
- Trap: Blaming others or getting into technical arguments.
- Strategy: Use the STAR method (Situation, Task, Action, Result). Describe a disagreement (perhaps about a Code of Conduct issue or a technical debate), explain how you listened, found common ground, and de-escalated the situation professionally.
"How do you handle a beginner asking a 'bad' question?"
- Strategy: Demonstrate empathy. Explain that there are no bad questions, only opportunities to teach. Describe how you guide them to the solution rather than giving it to them or dismissing them.

5.3 The Product Interview (Technical)

The final stage is the Product Interview, conducted by a Google employee (typically a Developer Advocate or Product Manager). This is a comprehensive technical exam. Mine was taken by Stephen Fluin about 8 years ago, who back then was one of the public faces of the Angular team.

Objective:
To verify that the candidate’s expertise is deep, accurate, and aligned with Google’s best practices. A GDE is trusted to give advice; that advice must be correct.

Technical Deep Dives by Domain:

Domain A: Angular
Candidates must demonstrate they are not just users of the framework, but understand its internal evolution and architectural shifts.

Signals vs. Zone.js: "Compare the change detection mechanism in a Zone.js application versus a Zoneless application using Signals. How does the propagation of updates differ?" Expect to discuss the fine-grained reactivity graph, how OnPush compares to Signal-based updates, and the performance implications of monkey-patching browser APIs.
Dependency Injection & Architecture: "Explain the resolution hierarchy when using providedIn: 'root' versus providing a service in a component's providers array. How does the modern inject() function change how we test and compose logic?" Discussion should cover ElementInjector vs ModuleInjector and tree-shaking implications.
Performance & Hydration: "How does the @defer block work under the hood regarding hydration? When would you use on interaction versus on viewport?" The candidate should explain incremental hydration and how deferred block dependencies are chunked and loaded only when triggered.

Domain B: Generative AI (Google AI Studio)
The focus is on architectural decision-making, cost-optimization, and prompt engineering strategies.

Context Caching vs. RAG: "When designing a solution for a 'Chat with your Data' app with static documents, when would you choose Gemini's Context Caching over a traditional RAG architecture?" The answer requires analyzing token costs, latency (caching is faster for repeated queries), and the 1M+ token window capability.
Structured Outputs: "Explain the difference between using System Instructions for formatting versus using Function Calling (Tools). In what scenario is Function Calling strictly necessary?" Discussion should cover how the model "decides" to call a tool versus simply formatting text as JSON.
Multimodality: "How does Gemini handle video input in the context window compared to text, and what are the implications for your token budget?" Candidates should understand that video is tokenized as a sequence of frames/images and consumes the context window significantly faster than text.

Domain C: Web Technologies

Performance: "How do you optimize Core Web Vitals (LCP, CLS, FID)?" Discuss lazy loading, critical CSS, and image optimization formats (WebP/AVIF).
Capabilities: "Explain the capabilities of Project Fugu." Discuss how web apps can access native hardware like Bluetooth or the file system.

The "I Don't Know" Protocol:
Crucially, if a candidate does not know an answer, they should admit it. "I am not 100% sure on that specific API, but here is how I would find the answer..." is a passing answer. Guessing or bullshitting is an automatic fail. The interviewer is testing the boundaries of the candidate's knowledge.

Part VI: Post-Acceptance and Future Outlook

Upon passing the Product Interview, the candidate signs the NDA and officially becomes a GDE. They are onboarded into the directory and gain access to the private Slack channels, summits, and mailing lists.

However, the work does not stop. The "Tenure" model means the clock starts ticking immediately for the next year's renewal. The new GDE must continue to log activities in an internal GDE platform. The difference is that now, their impact is amplified. They are no longer just a developer; they are a recognized leader, responsible for shepherding the next generation of experts into the fold.

Conclusion

Becoming a Google Developer Expert is a path of high resistance but high reward. It requires a fundamental shift in how one views their career...from a series of jobs to a platform for service.

The "Next Monday" Action Plan:

Create the Spreadsheet: Copy the structure from Part III and initialize it today.
Backfill Data: Populate the last 6-12 months of activity.
Audit: Look at the data objectively. Where is the gap? (Speaking vs. Writing vs. Code).
Engage: Find the next DevFest or GDG meetup in the region. Register not just to attend, but to volunteer.
Build: Start the next side project or article series that defines the "Major" niche.

The badge is waiting. The community is waiting. It is time to do the work. All the best.

~ Ahsan

AI Assistant for Company-Wide Software Best Practices with Gemini, LlamaIndex & RAG

Muhammad Ahsan Ayaz — Mon, 30 Sep 2024 10:44:55 +0000

In modern software development, ensuring that best practices are followed across teams and projects is essential to maintain code quality, efficiency, and scalability. However, keeping everyone updated on the latest standards and best practices can be a challenge, especially when different teams work on various parts of the codebase.

An AI-powered assistant that can provide instant answers to questions about your company’s coding standards or software best practices can help alleviate this issue. Using Retrieval-Augmented Generation (RAG), you can combine the power of large language models (LLMs) with the ability to search your company’s documentation in real-time, giving employees quick access to guidelines, code examples, and answers to frequently asked questions.

In this article, we'll walk through how to build a RAG-based assistant that developers can use to query software best practices, guidelines, or standards specific to your organization.

Why RAG for Software Best Practices?

Retrieval-Augmented Generation (RAG) allows a model to fetch relevant information from external documents in real-time while generating answers. This is especially useful when dealing with dynamic and context-specific content, like company coding standards or documentation that may evolve over time.

Unlike pre-trained models that rely solely on their internal knowledge, a RAG-based assistant pulls up-to-date information from your company's repositories or documentation files, ensuring accurate, real-time responses tailored to your exact guidelines.

Prerequisites

This article uses Python and Google Colab for demonstrating RAG with LlamaIndex and Google Gemini.

Prerequisite 1:

Obtain a Google API Key. Since we're using Google Gemini as the Generative AI model, we will need it. You can create one in the Google AI Studio

Prerequisite 2:

Add the GOOGLE_API_KEY in the Colab secrets as shown in the image below.

Prerequisite 3:

Install dependencies and authorize with Google to get the Gemini (google) API Key

!pip install llama_index
!pip install huggingface-hub
!pip install llama-index-embeddings-gemini
!pip install llama-index-llms-gemini
!pip install google-generativeai

from google.colab import auth
import os
from google.colab import userdata

auth.authenticate_user()
GOOGLE_API_KEY=userdata.get('GOOGLE_API_KEY')

os.environ["GOOGLE_API_KEY"] = GOOGLE_API_KEY

Step 1: Gather and Store Your Best Practices Documentation

Before setting up your AI assistant, collect and organize the various documents containing your company's best practices. These could include documents on coding standards, design principles, software architecture guidelines, and more. Ideally, these should be stored in a centralized repository like GitHub, Google Drive, or your company’s knowledge base.

For demonstration purposes, let’s assume you’ve stored a file in a GitHub repository that contains your company’s best practices, covering topics such as DRY (Don't Repeat Yourself), SOLID principles, and clean code practices.

Step 2: Fetching Documentation from the Repository

To enable the assistant to fetch your documents, we’ll download them from your repository using Python’s requests library. This way, your assistant will always have access to the latest version of the documentation.

# import necessary packages
from llama_index.core import SimpleDirectoryReader
from llama_index.core import VectorStoreIndex
from llama_index.core import Document
from llama_index.llms.gemini import Gemini
from llama_index.embeddings.gemini import GeminiEmbedding
from llama_index.core import Settings

from llama_index.core.node_parser import SentenceSplitter
from llama_index.core.node_parser import TokenTextSplitter
import requests

# retrieve document
tsPracticesDoc = "https://raw.githubusercontent.com/AhsanAyaz/gemini-rag-llamaindex-ts/refs/heads/main/data-sources/typescript_best_practices.txt"
response = requests.get(tsPracticesDoc)
if response.status_code == 200:
    content = response.text
else:
    raise Exception(f"Failed to download the file from {url}")

documents = [Document(text=content)]

Step 3: Setting Up the Language Model and Embeddings

Now, let’s configure a large language model (LLM) to handle text generation, and use Gemini embeddings to process and represent your documents in a vector space, allowing for fast and accurate retrieval. We will also configure LlamaIndex's global settings to use our models.

# models and text chunk splitters
llm = Gemini(model_name="models/gemini-1.5-flash-latest")
embed_model = GeminiEmbedding(model_name="models/embedding-001", generation_config = {"temperature": 0.7, "topP": 0.8, "topK": 40})

text_splitter = SentenceSplitter(chunk_size=1024, chunk_overlap=20)
splitter = TokenTextSplitter(chunk_size=1024, chunk_overlap=20)

# global LlamaIndex settings
Settings.llm = llm
Settings.embed_model = embed_model
Settings.text_splitter = text_splitter

Step 4: Generating the VectorIndex and Query Engine

For optimal performance, we are breaking the documentation into smaller chunks. This allows the assistant to search for and retrieve specific sections of the text more effectively. We can now create the Vector index using LlamaIndex and create our Query Engine as follows:

index = VectorStoreIndex.from_documents(documents, show_progress=True)

query_engine = index.as_query_engine()

Step 5: Querying the AI Assistant

Once the document is indexed, your RAG-based assistant is ready to answer questions. The assistant will retrieve relevant sections from the document and generate a response based on the retrieved information.

response = query_engine.query("What are the benefits of DRY in TypeScript? Can you give some examples and give some code samples?")
print(response)

How the AI Assistant Works

Document Retrieval: When a query is made, the assistant searches the document index using the embeddings to retrieve the most relevant chunks of text.
Text Generation: The LLM then uses the retrieved chunks to generate a comprehensive and context-specific answer, often including code snippets and examples.
Continuous Learning: As your documentation evolves, simply updating the repository allows the assistant to work with the latest version of your guidelines.

For instance, if an engineer asks, “What are the benefits of DRY in TypeScript? Can you give some examples and give some code samples?” the assistant might respond with:

"DRY (Don't Repeat Yourself) in TypeScript helps to avoid repetition by centralizing logic, making code more maintainable and easier to understand.

For example, instead of repeating the same calculation multiple times, you can create a function that encapsulates the logic. This makes the code more concise and easier to modify if the calculation needs to be changed.

Here's an example:
// Bad Example: Repeating logic
let area1 = 10 * 20;
let area2 = 15 * 30; 

// Good Example: Centralized logic
function calculateArea(width: number, height: number): number {
  return width * height;
}

let area1 = calculateArea(10, 20);
let area2 = calculateArea(15, 30);
Another benefit of DRY is that it reduces the risk of introducing bugs. When you have the same logic in multiple places, it's easy to make a mistake and update only some of the instances. By centralizing the logic, you ensure that any changes are made consistently."

Cool, right? This response not only explains the principle but also provides clear examples of how to implement it.

Step 6: Customizing the Assistant for Your Company

The RAG-based AI assistant can be customized to fit any company's needs. For example:

Multiple Documents: You can index multiple documents, such as API design guidelines, security protocols, or team-specific coding standards.
Different Models: Depending on the complexity of your queries, you can switch between different LLMs or fine-tune a model specifically for your use case.
User-Specific Queries: Customize the assistant to provide different levels of detail based on the user’s role (e.g., junior developers vs. senior architects).

Conclusion

By building a RAG-based AI assistant for company-wide software best practices, you can provide your development teams with instant access to critical information, helping them follow coding standards and guidelines more effectively. This AI assistant reduces the need for manual searches, ensures consistency across teams, and scales with your company’s evolving documentation.

The assistant can also serve as a foundation for broader use cases, such as onboarding new developers, handling code reviews, or even integrating with continuous integration (CI) systems to flag violations of coding standards during development.

This is just the beginning—by leveraging RAG, you can build powerful AI tools that make knowledge accessible to everyone in your organization.

Code

The code for the tutorial can be found here:
https://github.com/AhsanAyaz/gemini-rag-llamaindex-example

Feel free to react to this post, and to give the github repo a star if you found this useful :)

Discover the Power of Gemini Nano: The On-Device AI Model running in Chrome 127+

Muhammad Ahsan Ayaz — Mon, 08 Jul 2024 12:56:12 +0000

Have you imagined having a powerful, on-device AI model at your fingertips, seamlessly integrated within your favorite browser (if that is Chrome, of course, lol)? Today, we're diving into the new Gemini Nano model from Google, the game-changer that's setting new standards in AI technology. Read the article to understand more about Gemini Nano and find the link to the demo app as well.

So, What is Gemini Nano?

It's an on-device AI model that runs directly on Chrome 127 and above. At the time of writing this article, it is available in the Chrome Dev and Chrome Canary channels for version 127+. This means Gemini Nano is embedded in the browser, which means no cloud dependency, ultra-fast processing, and enhanced privacy – all while delivering top-notch performance!

Key Features of Gemini Nano

Speed:
Gemini Nano leverages the latest advancements in AI to deliver lightning-fast responses. No more waiting for cloud servers – everything is processed locally on your device.

Privacy:
Since all data processing happens on your device, your information stays with you. This is a massive step forward in ensuring your personal data is secure. I love how this would make us privacy nerds happy 💟

Compatibility:
Gemini Nano is optimized for Chrome 127 and above, ensuring smooth integration and the best possible performance.

But don't just take my word for it. Below is a quick demo built with React. It uses a textbox and speech recognition to take input from the user and passes it to Gemini Nano to translate something from a source to a target language.

Links:
🚀 Demo
🧑🏽‍💻 Code

How to use Gemini Nano today?

Let's talk about how you can try out Gemini Nano today.

First, install Chrome from either stable, dev or canary channels and make sure you have version 127 or above.

Then enable the flag named prompt-api-for-gemini-nano by going to chrome://flags/#prompt-api-for-gemini-nano and set it to Enabled

Now, enable another flag named optimization-guide-on-device-model by navigating to chrome://flags/#optimization-guide-on-device-model and setting it to Enabled BypassPerfRequirement.

Finally, go to chrome://components and search for Optimization Guide On Device Model. Click the Check for update button to download the model.

Note: It is possible that the above component might not show up for you. In that case, open the DevTools, navigate to console, and type await ai.canCreateTextSession(); and hit Enter. It should look as follows:

How to interact with Gemini Nano?

From the DevTools, just type the following code in the console:

const session = await ai.createTextSession();
await session.prompt(`If a train takes 3 hours 
from karachi to hyderabad, and 7 hours from 
hyderabad to lahore, what is the average size 
of an ostrich's egg?`);

Do share Gemini Nano's answer in the comments 😄

Conclusion

Gemini Nano is probably one of the coolest things I've worked recently with. It just opens up so many possibilities. I can't wait to see AI on-device getting more accurate, lighter, and faster.

Thanks for reading! Don't forget to react & share the article, and follow for more exciting tech content. Let me know in the comments what you think about Gemini Nano and how it's transforming your browser experience. Until next time, happy coding!

Configuring Tailwind CSS for Storybook in an Angular Library inside an NX monorepo

Muhammad Ahsan Ayaz — Tue, 13 Feb 2024 17:01:15 +0000

Well, the title says it all. I spent hours and hours searching how to make this possible and I can't count how many variations of this very title I had searched but could not find a resource that could lead me to the solution. Or I was too stupid to see it. Or I just needed more coffee.
Regardless, here's what happened...

Background

I was working on the task to create a monorepo that has our UI components library which other projects in the same monorepo can use later.

Challenge

The challenge was shipping the component libraries with tailwind css. Now, one way would be to ship the components with the tailwind css styles compiled to inline-styles on the HTML elements. This is so that if the consumer app uses tailwind css or not, they still get all the component styles. This requires a significant amount of configuration and Webpack magic. And the other way (which I chose) was to style the library with tailwind styles, but leaving the tailwind configuration for consumer apps (including storybook being one of the consumers). For example, I created a file storybook.scss inside the .storybook folder created by NX inside my library having the following code:



@tailwind base;
@tailwind components;
@tailwind utilities;

With this approach, the consumers can install Tailwind CSS and can include the @tailwind directives while the components will come with the styles automagically. And so can my storybook.

The main challenge

The actual challenge though, was making the styles work with storybook. Now, on the internet, you either find that you should load the .scss (global styles) file inside the .storybook/preview.ts file. But that requires special configuration and extending the Webpack configuration (which I tried and failed at).

For example:



// .storybook/main.ts
import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling-webpack', // 👈🏽 This part
      options: {
        rules: [
          {
            test: /^globals\.scss$/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: { importLoaders: 1 },
              },
              {
                loader: 'postcss-loader',
                options: { implementation: require.resolve('postcss') },
              },
            ],
          },
        ],
      },
    },
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
};

export default config;

// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/recipes/storybook/custom-builder-configs

And it didn't work, of course. I not only tried this, but a bunch of variations such as finding the existing .scss rules in the webpack configuration programmatically on run-time and adding a rule appropriately but it would always mess something else up.

Another suggested solution on Stack Overflow included working with angular.json, which in my case was project.json inside the NX monorepo. However, using a similar configuration object only made it worse. Because I'm not dealing with an app here that would require browserTarget etc, I'm working with an Angular library which needs to work with storybook. And that storybook needs the global styles for parsing the @tailwind directives.

Anyhow, nothing worked so far.

Solution

Thanks to the NX Console extension for VSCode, I was able to play around the different targets I had in the monorepo and see the default configuration of the storybook. As there was no configuration in my project.json for the library, I was super confused as what do I need to configure. But more than that... "where the heck is storybook configured for this library???". Because there's nothing in the project.json as mylib:storybook. And the extension helped there.

And then thought, Aha! Can I add some configuration to it? And then I tried a few things, but all I needed to do, was to add the following in my-lib/project.json file:



/* project.json */
{
  ...,
  "targets" {
    "build": {
      ...
    },
    "storybook": {
      "options": {
        "styles": [
          "libs/my-lib/.storybook/styles.scss"
        ]
      }
    }
  }
}

Yeah, that! That tiny little configuration object that extends the NX default configurations for storybook and just adds one little style.scss file there, which is using the @tailwind directives.

Note: My library does not ship tailwind styles to storybook. Storybook includes the tailwind styles in the preprocessors and thus my components come alive!

Thank me later

If you found this helpful at all, give this a reaction and follow me on socials.

Kicking Off Hackstack Pakistan 2023 - Meet the Future of Tech Innovation!

Muhammad Ahsan Ayaz — Mon, 18 Sep 2023 19:07:56 +0000

Hackstack Pakistan 2023 Kicks Off with Passionate Teams on Board!

Today marks the exciting commencement of Hackstack Pakistan 2023, a technological marathon where innovation, creativity, and expertise amalgamate to create groundbreaking solutions. As the digital hubbub begins and codes start to weave into projects, we want to give a huge shoutout to the brilliant teams stepping into the arena!

Meet the Teams 🚀

Madadgar: With a name that translates to 'helper', we're eager to see how they extend a helping hand through technology.
The User-Friendlies: Sounds like a team that's all about enhancing user experience. Can't wait to see their user-centric solutions!
Binary Bots: In the world of 1s and 0s, these bots are sure to have some binary magic up their sleeves.
Uran: Named after the stars, will their innovations reach celestial heights? Only time will tell!
HexCoders: Delving deep into the matrix, we anticipate some hex-tacular results from them.
Tech Programmers: A straightforward name with a world of potential; we're geared up for their tech innovations.
StudyNinja AI: With 'study' and 'AI' in their name, we're on the lookout for some smart educational tools!
Cloud7: Floating high on the tech clouds, we're excited to see where Cloud7 takes us.
E-Health: The future of healthcare is digital, and E-Health seems ready to script it.
Team Mantis: Sharp, precise, and nimble – we're keen to witness their tech prowess.
UBITkoderz: Representing UBIT with fervor, this team is one to watch!

What’s Next?

For this week and the next, these teams will be working tirelessly, turning their vision into reality under the mentorship of industry experts. From brainstorming sessions to the final code compilation, it's going to be a journey worth watching. Stay tuned for regular updates, interviews with participants, and behind-the-scenes peeks!

To all the participating teams – Remember, it's a journey of learning, innovation, and teamwork. Best of luck, and may your codes run error-free!

For live updates, event details, and more, visit Hackstack Pakistan 2023.

This blog post is just the beginning. The real story unfolds as Hackstack Pakistan 2023 progresses, and we can't wait to share every bit of it with you. Join us in cheering for these fantastic teams!

The Complete TypeScript Setup - From Zero to Hero

Muhammad Ahsan Ayaz — Sun, 03 Sep 2023 09:43:48 +0000

Welcome, developers! If you're venturing into the world of TypeScript or looking to optimize your development process, this guide is your golden ticket. From project initialization to running tests and debugging, we've got it all covered.

This article is a companion piece to our YouTube tutorial, so make sure to check that out for a live walkthrough.

Initializing a New Project
Installing and Building with TypeScript
Configuring tsconfig.json
Running the App with Nodemon and ts-node
Setting up ESLint for TypeScript
Integrating Jest for Testing
Debugging in VSCode

Initializing a New Project

Start by creating a new project. Open your terminal and run:



npm init

You will be asked with a few questions. This command initializes a new Node.js project and creates a package.json file for you.

Now create a folder named src and inside, create a file index.ts inside the src folder with the following code:



const message: string = 'Hello world by Ahsan!'
console.log(message)

Your project structure so far should look as follows:



- package.json
- src
-- index.ts

Installing and Building with TypeScript

Next, let's install TypeScript. Run the following command:



npm install typescript --save-dev

To build the TypeScript code, use:

tsc

Configuring tsconfig.json

To customize your TypeScript settings, you'll need a tsconfig.json file. You can generate one using:



tsc --init

Open the tsconfig.json file and set it up based on your project needs. For example:



{
  ...
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    ...
  }
}

For our use case, we set update the following properties:



{
  ...
  "compilerOptions": {
    ...
    "target": "ESNext",
    ...
  },
  "rootDir": "./src",
  "outDir": "./dist",
  ...
}

We will update our package.json file to create a script that builds our application. Update the package.json file as follows:



{
  ...,
  "scripts": {
    ...,
    "build": "tsc"
  }
}

Running the App with Nodemon and ts-node

To run your app without explicitly building it each time, use nodemon and ts-node. Install them using:



npm install nodemon ts-node --save-dev

Create a file in the project's root folder and name it nodemon.json. Add the following code to it:



{
  "execMap": {
    "ts": "ts-node"
  }
}

Add the following script to your package.json:



"scripts": {
  "dev": "nodemon src/index.ts"
}

Now, you can run your app with:



npm run dev

Setting up ESLint for TypeScript

Linting is essential for maintaining code quality. Install ESLint and its TypeScript parser:



npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Create a .eslintrc.js configuration file and add:



/* eslint-env node */
module.exports = {
  env: {
    node: true,
  },
  extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
}

Add a new script in the package.json for linting as follows:



{
  ...,
  "scripts": {
    ...,
    "lint": "eslint ./src/**/.ts"
  }
}

Note: You may want to ignore the dist folder because your editor's ESLint plugin may still be highligthing errors from it. For that, create an .eslintignore file and add the entry dist to it.

Integrating Jest for Testing

Jest is fantastic for testing TypeScript projects. Install it by running:



npm install jest ts-jest @types/jest --save-dev

Create a jest configuration by running the following command:



npx ts-jest config:init

The above command allows Jest to work with TypeScript.

Create a file named index.test.ts inside the src folder. Add the following code to it:



import { getMessage } from './index'

describe('getMessage()', () => {
  it('should return the correct message when called', () => {
    expect(getMessage()).toBe('Hello world by Ahsan!')
  })

  it('should be super smart', () => {
    expect(true).toBe(true)
  })
})

To make eslint happy for your test files, you need to update the .eslintrc.js file as follows:



/* eslint-env node */
module.exports = {
  env: {
    node: true,
    jest: true, // <-- Add this
  },
  extends: ['plugin:@typescript-eslint/recommended', 'eslint:recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
}

Update the test script in the package.json file as follows:



{
  ...,
  "scripts": {
    ...,
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

Now you can run your tests with:



npm run test
# OR
npm run test:watch

Debugging in VSCode

Debugging TypeScript in VSCode is straightforward. Just hit F5 after configuring your launch.json appropriately. You can go in the debugging panel to edit the launch.json. Or create a new folder named .vscode in the project. And inside the .vscode folder, create a launch.json file with the following content:



{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "dev",
      "request": "launch",
      "runtimeArgs": ["run", "dev"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "type": "node"
    }
  ]
}

Once you're done, your debugging panel should look as follows:

Conclusion

There you have it—a complete guide to setting up, testing, and debugging a TypeScript project. Whether you're new to TypeScript or a seasoned developer looking to refine your skills, this guide aims to serve all.

If you are particularly interested in Angular, integrating TypeScript should be second nature. Angular and TypeScript are like peanut butter and jelly—a match made in heaven! 🅰️

Don't forget to check out the companion YouTube video for a live demo. And the source code on GitHub. If you found this guide useful, consider subscribing to our YouTube channel for more content.

Note: This article was originally published on codewithahsan.dev

SolidJS Crash Course - Building a REST API Client - Part 1

Muhammad Ahsan Ayaz — Sun, 01 Jan 2023 13:14:15 +0000

Introduction

While React, Angular and VueJS are already famous within the Web Development community. SolidJS is the new cool framework in town. And everyone is hyped about it. And in this series of articles, you’re gonna learn the ins and outs of Solid JS and its reactivity. There are lot of concepts to cover, so buckle up!

If you'd rather want to watch a video, I've got you 🙌

Setting up the project

We're going to use pnpm to install the packages. You can use npm or yarn as well. You can install pnpm by running npm install -g pnpm in your terminal.

Creating and Serving

npx degit solidjs/templates/ts solid-rest-client-app
cd solid-rest-client-app
pnpm i # or `npm install` or `yarn`
pnpm run dev # Open the app on localhost:3000
# OR
# npm run dev
# yarn dev

Once you have run the last command, you should be able to see the app running at http://localhost:3000

Adding Tailwind CSS

Follow the instructions from SolidJS Official Docs OR from the instructions below.

Install the packages using the following command:

pnpm add --save-dev tailwindcss postcss autoprefixer

Then run the following command to generate the tailwind config

npx tailwindcss init -p

Replace the content property to target the SolidJS files in the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now add the following CSS in the src/index.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Existing CSS Code */

Add Nunito Font

Add the Nunito font in the index.html inside the <head></head> tags:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet">

Finally, add the Nunito font to the index.css file as follows:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Add Ionicons

Add the Ionic Fonts (Ionicons) in the index.html inside the <head></head> tags as follows:

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

Let's try using an icon now. Update the App.tsx file to add an Ionicon as follows:

const App: Component = () => {
  return (
    <div class={styles.App}>
      <header class={styles.header}>
        <img src={logo} class={styles.logo} alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          class={styles.link}
          href="https://github.com/solidjs/solid"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn Solid
        </a>
        <ion-icon name="accessibility-outline"></ion-icon>
      </header>
    </div>
  );
};

You'll notice that TypeScript isn't happy at all at this moment and may show something like this:

This is because SolidJS and TypeScript together do not understand what an ‘ion-icon’ element is. Because it is being used in JSX. Let's fix it by providing the types. Create a new folder named types inside the src folder. And a new file inside named solid-js.d.ts. Then add the following code inside:

import "solid-js";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "ion-icon": any;
    }
  }
}

After this, you will see that the App.tsx and TypeScript are happy now. Look at the app and you should be able to see the accessibility icon on the view.

Add ESLint

Coding is great. But writing good code is better. We'll add ESlint to our project to make sure our code stays great throughout the development of the app. Sorry the Software Architect inside me can't refrain from enforcing standards 😄!

Run the following command from the terminal to set up ESLint:

npx eslint --init

Select the following options when presented throughout the installation:

To check syntax, find problems, and enforce code style
JavaScript modules (import/export)
None of these (for Framework)
Yes (for "Does your project use TypeScript")
Browser (for "Where does your code run")
Standard: https://github.com/standard/eslint-config-standard-with-typescript (for "Which style guide do you want to follow")
JavaScript (for "What format do you want your config file to be in")
JSON for the type of file to use
pnpm to install the packages

Then run the following to install the required packages:

pnpm add --save-dev eslint eslint-plugin-solid @typescript-eslint/parser

Once done, update the .eslintrc file to use the following code:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {},
  "parser": "@typescript-eslint/parser",
  "plugins": ["solid"],
  "extends": [
    "eslint:recommended",
    "standard-with-typescript",
    "plugin:solid/typescript"
  ]
}

Navigation and Routing

We'll start creating some pages and will set up routing. To work with routes, we will install the solid-app-router package by running the following command in the terminal:

pnpm add --save solid-app-router

Creating the Navbar and adding basic routes

Create a new folder named components inside the src folder, then create a new file named Navbar.tsx inside the src/components folder. Add the following code in the file:

import { Component } from 'solid-js';
import { Link } from 'solid-app-router';

const Navbar: Component = () => {
  return (
    <header class="bg-purple-600 text-white py-2 px-8 h-16 flex items-center justify-between">
      <Link class="hover:opacity-50 hero" href='/'>REST in Peace</Link>
      <div class="flex items-center gap-4">
        <Link class="hover:opacity-50" href='/about'>About</Link>
      </div>
    </header>
  )
}

export default Navbar;

Now add the following Route configuration in the App.tsx file as follows:

import type { Component } from 'solid-js';
import styles from './App.module.css';
import { hashIntegration, Route, Router, Routes } from 'solid-app-router';
import Navbar from './components/Navbar';

const App: Component = () => {
  return (
    <Router source={hashIntegration()}>
      <div class={styles.App}>
        <Navbar />
      </div>
      <Routes>
        <Route path="/" component={() => <div>Home Component</div>}></Route>
        <Route path="/about" component={() => <div>About Component</div>}></Route>
      </Routes>
    </Router>
  );
};

export default App;

If you look at the app now, you should be able to see the Navbar with the logo and about link. You can click on both to navigate to the different routes.

Notice that we're using the <Router> component from solid-app-router to wrap all the routing configuration. Inside the Router we have both the Navbar component and the <Routes> component having individual <Route> elements. Each <Route> element defines how the route would work. Following are the possible combinations of props you can provide:

export declare type RouteProps = {
    path: string | string[];
    children?: JSX.Element;
    data?: RouteDataFunc;
} & ({
    element?: never;
    component: Component;
} | {
    component?: never;
    element?: JSX.Element;
    preload?: () => void;
});

Notice that path is required for each route. All other properties are optional. But we can't provide both element and component on the same route. Notice there's an OR operator between the last two conditions being in a bracket:

({
    element?: never;
    component: Component;
} | {
    component?: never;
    element?: JSX.Element;
    preload?: () => void;
})

So for now, we're providing hardcoded functions returning JSX as the component prop for both routes. We'll switch to using element later in this tutorial.

Creating Home and About Components:

Let's create both the Home page and the About page properly now. Create a new folder named pages in the src folder.

Home Component:

Create a new file inside the pages folder named Home.tsx and paste the following code in it:

import { Outlet } from 'solid-app-router';
import { Component } from 'solid-js';

const Home: Component = () => {
  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <div class="w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg">
        <div class="flex justify-between py-4">
          <h1 class="text-sm ">Rest Requests</h1>
          <button class="flex hover:bg-opacity-60 justify-center items-center p-4 bg-purple-600 rounded-full text-white w-8 h-8" onClick={() => alert('To be implemented')}>
            <div>+</div>
          </button>
        </div>
      </div>
      <div class="flex-1 min-h-full">
        <Outlet />
      </div>
    </div>
  )
}

export default Home;

About Component:

Create a new file named About.tsx inside the pages folder. Then paste the following code in it:

import { Component } from 'solid-js';

const About: Component = () => {
  return (
    <div>
      <h2>This is About</h2>
    </div>
  )
}

export default About;

Now that we have created both the files, let's update the App.tsx file's <Router> element to use the routes as follows:

import type { Component } from 'solid-js';
import { hashIntegration, Route, Router, Routes } from 'solid-app-router';
import Navbar from './components/Navbar';
import About from './pages/About'; // <!-- new import
import Home from './pages/Home'; // <!-- new import

const App: Component = () => {
  return (
    <Router source={hashIntegration()}>
      <div class="flex flex-col h-full min-h-screen">
        <Navbar></Navbar>
        <main class="px-8 py-4 flex-1 flex flex-col h-full">
          <Routes>
            <Route path="/about" element={<About />} />
            <Route path="/" element={<Home />}>
              {/* <Route path="/" element={<RestClientIndex />} />
              <Route
                path="/:id"
                element={<RestClient />}
                data={fetchSelectedRequest}
              /> */}
            </Route>
          </Routes>
        </main>
      </div>
    </Router>
  );
};

export default App;

Now if you go to the Home page, you'll see the following:

Creating the Interfaces

We're using TypeScript... and it it super cool. And we're going to work with some Rest API Requests in this app. So we'll create the interfaces required to work with them.
Create a new folder named interfaces inside the src folder. And then create a file inside named rest.interfaces.ts.
Finally, add the following code inside the file:

interface IRequest {
  headers?: {
    [key: string]: string;
  }[];
  method: string;
  url: string;
  body?: any;
}
export interface IRestRequest {
  id: string;
  name: string;
  description: string;
  request: IRequest;
}

export interface IRestResponse {
  data: any;
  status: number;
  headers: any;
}

Notice that we're only exporting two interfaces from this file. The IRestRequest and the IRestResponse interfaces. They represent a Request and Response in the context of our app. Notice that IRestRequest internally uses the IRequest interface for the request property. This request property is the actual request we'll be passing to axios in a later stage in this tutorial.

Creating Requests Data

Let's start creating some data. We'll create some dummy requests to work with. Update the Home.tsx to add the following requests array:

import { Outlet } from 'solid-app-router';
import { Component } from 'solid-js';
import { IRestRequest } from '../interfaces/rest.interfaces';

const Home: Component = () => {
  const requests: IRestRequest[] = [
    {
      id: "1",
      name: "Get Scores",
      description: "Getting scores from server",
      request: {
        method: "GET",
        url: "https://scorer-pro3.p.rapidapi.com/score/game123",
        headers: [
          {
            key: "X-RapidAPI-Host",
            value: "API_HOST_FROM_RAPID_API",
          },
          {
            key: "X-RapidAPI-Key",
            value: "API_KEY_FROM_RAPID_API",
          },
        ],
      },
    },
    {
      id: "2",
      name: "Add Score",
      description: "Adding scores to server",
      request: {
        method: "POST",
        url: "https://scorer-pro3.p.rapidapi.com/score",
        headers: [
          {
            key: "X-RapidAPI-Host",
            value: "API_HOST_FROM_RAPID_API",
          },
          {
            key: "X-RapidAPI-Key",
            value: "API_KEY_FROM_RAPID_API",
          },
        ],
        body: JSON.stringify({
          score: 100,
          gameId: "123",
          userId: "test123",
        }),
      },
    },
  ];

  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <!-- further code here -->
    </div>
  )
}

export default Home;

Note that we have the data according to our interfaces provided. Also note that each request has this headers property. We're not going to use this in this tutorial. This is just to give you an idea on how you can extend this app to work with Request Headers as well on your own. Or wait for another tutorial by me 🙂!

Creating Request elements

Now that we have the data, let's use that within the same Home.tsx file by using the For element from solid-js to loop over the requests array and to render some requests.
Update the template in the Home.tsx file as follows:

import { Link, Outlet } from "solid-app-router";
import { Component, For } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";

const Home: Component = () => {
  {/*  ... */}
  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <div class="w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg">
        <div class="flex justify-between py-4">
          <h1 class="text-sm ">Rest Requests</h1>
          <button
            class="flex hover:bg-opacity-60 justify-center items-center p-4 bg-purple-600 rounded-full text-white w-8 h-8"
            onClick={() => alert("To be implemented")}
          >
            <div>+</div>
          </button>
        </div>
        {/*  👇 We've added this 👇 */}
        <div class="list">
          <For each={requests} fallback={<div>Loading...</div>}>
            {(item) => (
              <Link href={`/${item.id}`} class="relative list__item">
                <div
                  class="p-2 hover:bg-gray-300 cursor-pointer pr-12 rounded-lg mb-2"
                  classList={{
                    "list__item--active": Boolean(
                      location.pathname === `/${item.id}`
                    ),
                  }}
                >
                  <div>{item.name}</div>
                  <div class="text-xs break-all">
                    {item.request.method} {item.request.url}
                  </div>
                </div>
              </Link>
            )}
          </For>
        </div>
      </div>
      <div class="flex-1 min-h-full">
        <Outlet />
      </div>
    </div>
  );
};

export default Home;

As you can see, each item being rendered is a <Link> element from solid-app-router. Clicking a request should take you to the details page of the request. And we've not implemented it yet. Each item shows the name, the method and the URL of the request on the view.

Creating a Reactive-Persistent Store using Signals

Since we want our store to be persistent, we'll use the @solid-primitives/storage package to save all the requests in the browser. We'll initiate the store with the hard-coded/dummy data if it is empty. Let's install the package first as follows:

pnpm add --save @solid-primitives/storage

Now create a new file named store.ts inside the src folder and paste the following code inside:

import { IRestRequest } from "./interfaces/rest.interfaces";
import { createStorageSignal } from "@solid-primitives/storage";

export const [restRequests, setRestRequests] = createStorageSignal<
  IRestRequest[]
>(
  "requests",
  [
    {
      id: "1",
      name: "Get Scores",
      description: "Getting scores from server",
      request: {
        method: "GET",
        url: "https://scorer-pro3.p.rapidapi.com/score/game123",
        headers: [
          {
            key: "X-RapidAPI-Host",
            value: "API_HOST_FROM_RAPID_API",
          },
          {
            key: "X-RapidAPI-Key",
            value: "API_KEY_FROM_RAPID_API",
          },
        ],
      },
    },
    {
      id: "2",
      name: "Add Score",
      description: "Adding scores to server",
      request: {
        method: "POST",
        url: "https://scorer-pro3.p.rapidapi.com/score",
        headers: [
          {
            key: "X-RapidAPI-Host",
            value: "API_HOST_FROM_RAPID_API",
          },
          {
            key: "X-RapidAPI-Key",
            value: "API_KEY_FROM_RAPID_API",
          },
        ],
        body: JSON.stringify({
          score: 100,
          gameId: "123",
          userId: "test123",
        }),
      },
    },
  ],
  {
    deserializer: (val): IRestRequest[] => {
      if (val === null) {
        return [];
      }
      return JSON.parse(val);
    },
    serializer: (val) => {
      return JSON.stringify(val);
    },
  }
);

Note that we're using the createStorageSignal method with the type IRestRequest[] to create a storage signal to store an array of our requests. Notice that the first argument of this method has the value "requests" which sets the name of this store both for the app's session as well as the key for the browser's storage (localStorage). The second parameter is the initial value of the store and we're providing our hard-coded/dummy data here.
The third parameter is the storage options. We're passing the methods deserializer and serializer which are responsible for transforming data when reading from the storage and when writing to the storage respectively.
Finally, we're exporting both the restRequests which is a Solid JS accessor to access value from a signal, and the setRestRequests method to update the value of the signal.

Now that we have the storage created, let's use it in the Home.tsx as follows:

import { Link, Outlet } from "solid-app-router";
import { Component, For } from "solid-js";
import { restRequests } from "../store"; // <-- importing accessor

const Home: Component = () => {
  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <div class="w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg">
        <div class="flex justify-between py-4">
          <h1 class="text-sm ">Rest Requests</h1>
          <button
            class="flex hover:bg-opacity-60 justify-center items-center p-4 bg-purple-600 rounded-full text-white w-8 h-8"
            onClick={() => alert("To be implemented")}
          >
            <div>+</div>
          </button>
        </div>
        <div class="list">
          {/*  Using the accessor here */}
          <For each={restRequests()} fallback={<div>Loading...</div>}>
            {(item) => (
              <Link href={`/${item.id}`} class="relative list__item">
                <div
                  class="p-2 hover:bg-gray-300 cursor-pointer pr-12 rounded-lg mb-2"
                  classList={{
                    "list__item--active": Boolean(
                      location.pathname === `/${item.id}`
                    ),
                  }}
                >
                  <div>{item.name}</div>
                  <div class="text-xs break-all">
                    {item.request.method} {item.request.url}
                  </div>
                </div>
              </Link>
            )}
          </For>
        </div>
      </div>
      <div class="flex-1 min-h-full">
        <Outlet />
      </div>
    </div>
  );
};

export default Home;

Note that we've removed the hardcoded requests from the Home.tsx from the file as we've moved that to the store.ts file. The Home component looks so clean now 🫧 You can see the persistent requests in the localStorage as follows in the Chrome Debugger:

Creating the Add Request Modal

Since we have the storage implemented now, let's create a way to add/create more requests. This is where the fun begins because we're now starting to add things dynamically to the app. We'll create a modal to add a new request. To do that, create a new file named RequestModal.tsx inside the src/components folder. Add the following code to create a basic modal:

import { Component, ComponentProps, Show } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";

interface RequestModalProps extends ComponentProps<any> {
  show: boolean;
  onModalHide: (id: string | null) => void;
  request?: IRestRequest;
}

const RequestModal: Component<RequestModalProps> = (
  props: RequestModalProps
) => {
  return (
    <Show when={props.show}>
      <div class="fixed z-50 top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.75)]">
        <div
          class="relative max-h-[85%] overflow-y-auto top-20 bg-gray-200 max-w-md m-auto h- block p-8 pb-8 border-t-4 border-purple-600 rounded-sm shadow-xl"
        >
          <h5 class="text-4xl font-bold mb-4">
            {(props.request ? "Edit" : "Create") + " Request"}
          </h5>
          <span class="absolute bottom-9 right-8">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-10 h-10 text-purple-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              />
            </svg>
          </span>
        </div>
      </div>
    </Show>
  );
};

export default RequestModal;

Note that the RequestModal uses the <Show> component from Solid JS that shows the template/components within it based on the condition supplied to the when attribute. We're relying on the show prop of the RequestModal to tell the <Show> component when to display stuff. This is so that we can control the RequestModal from outside the component to make it visible or hidden.
Now that we have this component, let's add it in the Home.tsx as follows:

import { Link, Outlet, useLocation, useNavigate } from "solid-app-router";
import { Component, createSignal, For } from "solid-js";
import RequestModal from "../components/RequestModal";
import { restRequests } from "../store";

const Home: Component = () => {
  const [showModal, setShowModal] = createSignal(false);
  const navigate = useNavigate();
  const location = useLocation();
  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <div>
        <button onClick={() => setShowModal(!showModal())}>Click Me</button>
        <RequestModal
          show={showModal()}
          onModalHide={(id: string | null) => {
            setShowModal(!showModal());
          }}
        />
      </div>
      <div class="w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg">
        <div class="flex justify-between py-4">
          <h1 class="text-sm ">Rest Requests</h1>
          <button
            class="flex hover:bg-opacity-60 justify-center items-center p-4 bg-purple-600 rounded-full text-white w-8 h-8"
            onClick={() => alert("To be implemented")}
          >
            <div>+</div>
          </button>
        </div>

        <div class="list">
          <For each={restRequests()} fallback={<div>Loading...</div>}>
            {(item) => (
              <Link href={`/${item.id}`} class="relative list__item">
                <div
                  class="p-2 hover:bg-gray-300 cursor-pointer pr-12 rounded-lg mb-2"
                  classList={{
                    "list__item--active": Boolean(
                      location.pathname === `/${item.id}`
                    ),
                  }}
                >
                  <div>{item.name}</div>
                  <div class="text-xs break-all">
                    {item.request.method} {item.request.url}
                  </div>
                </div>
              </Link>
            )}
          </For>
        </div>
      </div>
      <div class="flex-1 min-h-full">
        <Outlet />
      </div>
    </div>
  );
};

export default Home;

Let's look at what we've done in a few steps apart from the changes in the imports at the top.

const Home: Component = () => {
  const [showModal, setShowModal] = createSignal(false);
  const navigate = useNavigate();
  const location = useLocation();
  // more code
};

export default Home;

We've created a signal showModal that we'll use to show or hide the modal. I.e. we'll pass this as the show prop of the RequestModal later. We also create two constants. Once for navigation and one for accessing location.

<div>
  <button onClick={() => setShowModal(!showModal())}>Click Me</button>
  <RequestModal
    show={showModal()}
    onModalHide={(id: string | null) => {
      setShowModal(!showModal());
    }}
  />
</div>

In the above code, we have a button that toggles the value of showModal signal. And we have the RequestModal being used which has the value of showModal assigned to the show prop. You can see we also provide a function for the onModalHide prop. This will be called when then RequestModal is hidden. We haven't written the logic of it yet.

With all this, you should be able to see this in the app when you click the Click Me text on the left.

Notice that we're not able to close the modal yet. We'll work on it in a bit.

Creating the `IconButton` component

We are going to use some icon buttons throughout the application. So it is a good idea to create a reusable IconButton component. Create a new file in the src/components folder named IconButton.tsx. Then add the following code to it:

import { Component, ComponentProps } from "solid-js";

interface IconButtonProps extends ComponentProps<any> {
  onClick: (event: MouseEvent) => void;
  label: string;
  icon: string;
  type?: "reset" | "submit" | "button";
}

const IconButton: Component<IconButtonProps> = ({
  onClick,
  label,
  icon,
  type,
}) => {
  return (
    <button
      onclick={onClick}
      role="button"
      type={type || "button"}
      title={label}
      class="w-6 h-6 flex transition-all ease-in-out duration-100 hover:scale-125 items-center justify-center text-white bg-purple-600 border border-purple-600 rounded-full hover:bg-purple-700 active:text-white focus:outline-none focus:ring"
    >
      <span class="sr-only">{label}</span>
      <ion-icon name={icon}></ion-icon>
    </button>
  );
};

export default IconButton;

This component is quite simple. We're styling a button in here and using an <ion-icon> element to show the target icon. Look at the IconButtonProps interface to see what possible props we can pass to this component.

Let's replace the "Add Request" button in the Home.tsx file with this new IconButton component. We'll also remove the "Click Me" button from the template as well:

import { Link, Outlet, useLocation, useNavigate } from "solid-app-router";
import { Component, createSignal, For } from "solid-js";
import IconButton from "../components/IconButton";
import RequestModal from "../components/RequestModal";
import { restRequests } from "../store";

const Home: Component = () => {
  const [showModal, setShowModal] = createSignal(false);
  const navigate = useNavigate();
  const location = useLocation();
  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <div>
        <RequestModal
          show={showModal()}
          onModalHide={(id: string | null) => {
            setShowModal(!showModal());
          }}
        />
      </div>
      <div class="w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg">
        <div class="flex justify-between py-4">
          <h1 class="text-sm ">Rest Requests</h1>
          {/* Replaced the Add Request Button with IconButton */}
          <IconButton
            onClick={() => setShowModal(true)}
            icon="add"
            label="Add Request"
          />
        </div>

        <div class="list">
          <For each={restRequests()} fallback={<div>Loading...</div>}>
            {(item) => (
              <Link href={`/${item.id}`} class="relative list__item">
                <div
                  class="p-2 hover:bg-gray-300 cursor-pointer pr-12 rounded-lg mb-2"
                  classList={{
                    "list__item--active": Boolean(
                      location.pathname === `/${item.id}`
                    ),
                  }}
                >
                  <div>{item.name}</div>
                  <div class="text-xs break-all">
                    {item.request.method} {item.request.url}
                  </div>
                </div>
              </Link>
            )}
          </For>
        </div>
      </div>
      <div class="flex-1 min-h-full">
        <Outlet />
      </div>
    </div>
  );
};

export default Home;

Great! Now let's move towards creating the Add Request form.

Using Solid JS Forms to create requests

We're going to use the solid-forms package to work with forms in this tutorial. I've seen multiple forms libraries but found this one pretty nice. Install the package as follows:

pnpm add --save solid-forms

Implementing the TextField component

Now create a new file under src/components folder and name it TextField.tsx. This component is going to be used whenever we want to show an Input or a TextArea component. Add the following code into the created file:

import { IFormControl } from "solid-forms";
import { Component } from "solid-js";

export const TextField: Component<{
  control: IFormControl<string>;
  label: string;
  placeholder?: string;
  type?: string;
  rows?: number;
  id: string;
  class?: string;
  valueUpdated?: (val: any) => void;
}> = (props) => {
  const type = props.type || "text";
  const onInput = (e: { currentTarget: { value: string } }) => {
    props.control.markDirty(true);
    props.control.setValue(e.currentTarget.value);
  };

  const onBlur = () => {
    props.control.markTouched(true);
    if (props.valueUpdated) {
      props.valueUpdated(props.control.value);
    }
  };
  return (
    <>
      <label class="sr-only" for={props.id}>
        {props.label}
      </label>
      {type === "textarea" ? (
        <textarea
          value={props.control.value}
          rows={props.rows || 3}
          oninput={onInput}
          onblur={onBlur}
          placeholder={props.placeholder}
          required={props.control.isRequired}
          id={props.id}
          class={`w-full p-3 text-sm border-gray-200 rounded-lg ${props.class}`}
        />
      ) : (
        <input
          type="text"
          value={props.control.value}
          oninput={onInput}
          onblur={onBlur}
          placeholder={props.placeholder}
          required={props.control.isRequired}
          id={props.id}
          class={`w-full p-3 text-sm border-gray-200 rounded-lg ${props.class}`}
        />
      )}
    </>
  );
};

Apart from some obvious props, the important implementation here to consider is the onblur and oninput methods used on both the <input> and <textarea> elements in the template. The TextField accepts a control prop which is supposed to be a Form Control from Solid Forms. Whenever there is an input change in the <input> or <textarea> element, the onInput method is triggered and the value of the control is set via the props.control.setValue statement.
Similarly, we let the parent component know that the value has been changed using the valueUpdated prop. Whenever we blur from either the Input or the TextArea, we call the props.valueUpdated method if it is provided (since it is an optional prop).

Creating the RestClientForm

This form is going to be used for both creating and editing a request. And it is going to be heavily based on multiple TextField component. Create a new file named RestClientForm.tsx in the src/components folder. Then add the following code to it:

import { Component } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";

export const RestClientForm: Component<{
  request?: Partial<IRestRequest>;
  formSubmit: Function;
  formUpdate?: Function;
  actionBtnText: string;
}> = (props) => {
  return (
    <form
      action=""
      class="space-y-4"
      classList={{}}
      onSubmit={(e) => {
        e.preventDefault();
      }}
    >
      <div class="grid grid-cols-1 gap-4">
        <div>
          <label for="name" class="mb-4 block">
            Name
          </label>
          <input placeholder="name" />
        </div>
        <div>
          <label for="url" class="mb-4 block">
            URL
          </label>
          <input placeholder="url" />
        </div>

        <div>
          <label class="my-4 block">Method</label>
          <input placeholder="method" />
        </div>
      </div>
      <div>
        <label class="my-4 block">Body</label>
        <input placeholder="body" />
      </div>

      <div class="mt-4">
        <button
          disabled={false}
          type="submit"
          class="inline-flex items-center disabled:bg-gray-500 justify-center w-full px-5 py-3 text-white bg-purple-600 hover:bg-purple-700 rounded-lg sm:w-auto"
        >
          <span class="font-medium"> {props.actionBtnText} </span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5 ml-3"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M14 5l7 7m0 0l-7 7m7-7H3"
            />
          </svg>
        </button>
      </div>
    </form>
  );
};

This components accepts a function against the formSubmit prop which is going to be called upon...well... on the form submit 😄! Another mandatory prop is the actionBtnText so we can show the desired label on the submit button.
If you have a look at the above code closely, you're going to notice that we're not using any TextField components so far 🤷‍♂️. Well, hold your horses. For now, let's use this RestClientForm component in the RequestModal component and see how everything looks. Add the RestClientForm in the RequestModal.tsx file as follows:

import { Component, ComponentProps, Show } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";
import { setRestRequests, restRequests } from "../store";
import { RestClientForm } from "./RestClientForm";

interface RequestModalProps extends ComponentProps<any> {
  show: boolean;
  onModalHide: (id: string | null) => void;
  request?: IRestRequest;
}

const RequestModal: Component<RequestModalProps> = (
  props: RequestModalProps
) => {
  return (
    <Show when={props.show}>
      <div class="fixed z-50 top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.75)]">
        <div class="relative max-h-[85%] overflow-y-auto top-20 bg-gray-200 max-w-md m-auto h- block p-8 pb-8 border-t-4 border-purple-600 rounded-sm shadow-xl">
          <h5 class="text-4xl font-bold mb-4">
            {(props.request ? "Edit" : "Create") + " Request"}
          </h5>
          <RestClientForm
            formSubmit={(request: IRestRequest) => {
              const id = self.crypto?.randomUUID() || Date.now().toString();
              setRestRequests([
                ...(restRequests() || []),
                {
                  ...request,
                  id,
                },
              ]);
              props.onModalHide(id);
            }}
            actionBtnText={"Save"}
          />
          <span class="absolute bottom-9 right-8">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-10 h-10 text-purple-600"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              />
            </svg>
          </span>
        </div>
      </div>
    </Show>
  );
};

export default RequestModal;

Notice that we're passing a function against the formSubmit prop here. If a request is passed to this function in response to submitting the form, then we create a unique ID for that request using self.crypto?.randomUUID() (pretty neat trick TBH) and add the request to the requests list using the setRestRequests update function. Remember that this is part of a Signal, and not just a normal Signal but a Signal from @solid-primitives/storage package. So this will be updated both in the App's current state as well as in the local storage. Finally, you can see that we're calling the props.onModalHide(id) statement to close the modal after creating the new request and saving it.

But wait! If you try it out now, it won't work. As we're not using any controls, nor the TextField components yet. So let's create the controls first.

Creating Solid Form Controls

We're now going to make use of the Control Factory from solid-forms. This allows us to create a Form Group that we can easily manage to handle form inputs and react to it.
To do so, update the RestClientForm.tsx file as follows:

import { Component } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";
import { createFormGroup, createFormControl } from 'solid-forms';

const controlFactory = () => {
  return createFormGroup({
    name: createFormControl<string>("New Request", {
      required: true,
      validators: (val: string) => {
        return !val.length ? {isMissing: true} : null;
      }
    }),
    request: createFormGroup({
      method: createFormControl<string>("GET"),
      body: createFormControl<string>(""),
      url: createFormControl<string>(""),
    }),
  });
};

// rest of the code

The controlFactory method returns a Form Group of type IFormGroup from Solid Forms. This means that we have a Form Group which can now have multiple Form Controls and Form Groups within it. In our case, we have the name as a Form Control as you can see it uses the createFormControl method. Notice that the first argument of the method is the initial value, and the second argument is the configuration which contains required: true and the validators method for custom validation.
The request property inside our Form Group is yet another Form Group which contains three Form Controls, method, body, and url.

Now we're going to wrap our RestClientForm component with solid forms using the withControl method.
Create a wrapper component just below the controlFactory code as follows:

import { Component } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";
import { createFormGroup, createFormControl, withControl } from "solid-forms";
import { TextField } from "./TextField";

const controlFactory = () => {
  return createFormGroup({
    name: createFormControl<string>("New Request", {
      required: true,
      validators: (val: string) => {
        return !val.length ? { isMissing: true } : null;
      },
    }),
    request: createFormGroup({
      method: createFormControl<string>("GET"),
      body: createFormControl<string>(""),
      url: createFormControl<string>(""),
    }),
  });
};

export const RestClientForm = withControl<
  {
    request?: Partial<IRestRequest>;
    formSubmit: Function;
    formUpdate?: Function;
    actionBtnText: string;
  },
  typeof controlFactory
>({
  controlFactory,
  component: (props) => {
    const controlGroup = () => props.control.controls;
    const requestControlGroup = () => controlGroup().request.controls;
    const request = () => props.request;

    return (
      <form
        action=""
        class="space-y-4"
        classList={{
          "is-valid": props.control.isValid,
          "is-invalid": !props.control.isValid,
          "is-touched": props.control.isTouched,
          "is-untouched": !props.control.isTouched,
          "is-dirty": props.control.isDirty,
          "is-clean": !props.control.isDirty,
        }}
        onSubmit={(e) => {
          e.preventDefault();
          const params = {
            ...props.control.value,
            request: {
              ...props.control.value.request,
            },
          };
          props.formSubmit(params);
        }}
      >
        <div class="grid grid-cols-1 gap-4">
          <div>
            <label for="name" class="mb-4 block">
              Name
            </label>
            <TextField
              placeholder="name"
              id="name"
              label="Name"
              control={controlGroup().name}
            />
          </div>
          <div>
            <label for="url" class="mb-4 block">
              URL
            </label>
            <TextField
              placeholder="url"
              id="url"
              label="Url"
              control={requestControlGroup().url}
            />
          </div>

          <div>
            <label class="my-4 block">Method</label>
            <TextField
              id="method"
              label="Method"
              placeholder="method"
              control={requestControlGroup().method}
            />
          </div>
        </div>
        <div>
          <label class="my-4 block">Body</label>
          <TextField
            id="body"
            type="textarea"
            label="Body"
            placeholder="body"
            control={requestControlGroup().body}
          />
        </div>

        <div class="mt-4">
          <button
            disabled={!props.control.isValid}
            type="submit"
            class="inline-flex items-center disabled:bg-gray-500 justify-center w-full px-5 py-3 text-white bg-purple-600 hover:bg-purple-700 rounded-lg sm:w-auto"
          >
            <span class="font-medium"> {props.actionBtnText} </span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-5 h-5 ml-3"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M14 5l7 7m0 0l-7 7m7-7H3"
              />
            </svg>
          </button>
        </div>
      </form>
    );
  },
});

In the above code, you'll notice that our RestClientForm component is now using the withControl method and uses the controlFactory we created before. As a result, we get the Solid Form (the Form Group) we create using the factory within the component function. The form group we're receiving is as props.control property. This is a Solid JS Signal. YES! Which means this is reactive.
We distribute the controls into two groups.

The main group using the controlGroup accessor
The request control group using requestControlGroup accessor

You'll also notice that we get a bunch of properties from Solid Forms that we can use to apply different classes to our forms:

<form
  action=""
  class="space-y-4"
  classList={{
    "is-valid": props.control.isValid,
    "is-invalid": !props.control.isValid,
    "is-touched": props.control.isTouched,
    "is-untouched": !props.control.isTouched,
    "is-dirty": props.control.isDirty,
    "is-clean": !props.control.isDirty,
  }}
</form>

And finally, we're passing each control to the respective TextField component via the control prop. Notice how we access the control by calling the accessor and then accessing the property. For example, requestControlGroup().url instead of requestControlGroup.url.

Note: You'll notice that the element I've used for method is a TextField instead of a <select> component. This is intentional to not make the tutorial more complicated than it has to be. Feel free to adjust the code on your own 🙂

If you look at the app now, it should look as follows:

Looks cool 😎, right? Try creating a request now. You should be able to see it added to the UI as well as in the localStorage. This is because when we submit the form, we call the props.formSubmit method from the RestClientForm. This in turn calls the provided method in RestclientForm and that adds the new request.

Solid JS Directives (your first one)

We're going to implement a Directive now. A directive is an implementation like a component, but it usually doesn't have a template and works works purely with the DOM most of the times. For our case, we're going to implement a directive that closes the RequestModal when we click outside of it.
Create a new folder inside the src folder named directives and create a file inside it named click-outside.directive.ts. Then add the following code to it:

import { Accessor, onCleanup } from "solid-js";

export default function clickOutside(el: Element, accessor: Accessor<any>) {
  const onClick = (e: Event) =>
    !el.contains(e.target as Node) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}

You can see the code is pretty minimal. But what does it do? 🤔
The directive itself is a function that has two arguments. SolidJS provides the first argument as the element the directive is applied to. And the second argument is the value provided to the directive by us. In this case, it will be a function that closes the modal.
Notice that we register a click event on document.body element which should check if we're clicking inside or outside the directive. And if we click outside, it calls the accessor() to get the function to be called, and then calls it via the accessor()?.(); statement. Seems a bit confusing. Just get over it 😄

We also use the onCleanup hook from Solid JS to remove the event listener when the element to which the directive is applied to is no longer on the DOM. In our case, when we open the RequestModal, the directive would come to life and the event listener will be registered. And when the modal is closed, the directive will be destroyed and the event listener will be removed.

Let's use the directive now in the RequestModal.tsx as follows:

import { Component, ComponentProps, Show } from "solid-js";
import { IRestRequest } from "../interfaces/rest.interfaces";
import { setRestRequests, restRequests } from "../store";
import { RestClientForm } from "./RestClientForm";
import outsideDirective from "../directives/click-outside.directive"; // <-- new import

// https://github.com/solidjs/solid/discussions/845
const clickOutside = outsideDirective; // <-- remapping to `clickOutside` variable

interface RequestModalProps extends ComponentProps<any> {
  show: boolean;
  onModalHide: (id: string | null) => void;
  request?: IRestRequest;
}

const RequestModal: Component<RequestModalProps> = (
  props: RequestModalProps
) => {
  return (
    <Show when={props.show}>
      <div class="fixed z-50 top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.75)]">
        <div
          class="relative max-h-[85%] overflow-y-auto top-20 bg-gray-200 max-w-md m-auto h- block p-8 pb-8 border-t-4 border-purple-600 rounded-sm shadow-xl"
          use:clickOutside={() => {  {/** Using the directive here */}
            props.onModalHide(null);
          }}
        >
          <h5 class="text-4xl font-bold mb-4">
            {(props.request ? "Edit" : "Create") + " Request"}
          </h5>
          <RestClientForm
            ...
          />
          <span class="absolute bottom-9 right-8">
            ...
          </span>
        </div>
      </div>
    </Show>
  );
};

export default RequestModal;

You'll notice that TypeScript isn't happy again as it doesn't understand what clickOutside is as a directive.

Let's make TypeScript happy. Update the solid-js.d.ts file inside the types folder as follows:

import "solid-js";

declare module "solid-js" {
  namespace JSX {
    interface IntrinsicElements {
      "ion-icon": any;
    }
    interface Directives {
      clickOutside?: () => void;
    }
  }
}

TypeScript should be happy now! You may have also noticed that we're doing a remapping of variables there from outsideDirective to clickOutside. That's because of a TypeScript + Solid JS issue that I've linked in the code.
If you open the Request Modal now and click outside of it, you'll see the modal closing automatically. Yayy! 🙌

Deleting Requests

Now that we can add requests, close the modal automatically on clicking outside and save the requests persistently, let's work on deleting requests.
To delete a request we'll add a delete button on each list item in the left sidebar. To do that, update the Home.tsx as follows:

// existing imports
import { restRequests, setRestRequests } from "../store";

const Home: Component = () => {
  const [showModal, setShowModal] = createSignal(false);
  const navigate = useNavigate();
  const location = useLocation();
  return (
    <div class="flex flex-col md:flex-row gap-4 h-full flex-1">
      <div>
        <RequestModal
          show={showModal()}
          onModalHide={(id: string | null) => {
            setShowModal(!showModal());
          }}
        />
      </div>
      <div class="w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg">
        <div class="flex justify-between py-4">
          <h1 class="text-sm ">Rest Requests</h1>
          {/* Replaced the Add Request Button with IconButton */}
          <IconButton
            onClick={() => setShowModal(true)}
            icon="add"
            label="Add Request"
          />
        </div>

        <div class="list">
          <For each={restRequests()} fallback={<div>Loading...</div>}>
            {(item) => (
              <Link href={`/${item.id}`} class="relative list__item">
                <div
                  class="p-2 hover:bg-gray-300 cursor-pointer pr-12 rounded-lg mb-2"
                  classList={{
                    "list__item--active": Boolean(
                      location.pathname === `/${item.id}`
                    ),
                  }}
                >
                  <div>{item.name}</div>
                  <div class="text-xs break-all">
                    {item.request.method} {item.request.url}
                  </div>
                </div>
                {/* Delete Request Button */}
                <button
                  onclick={(e: MouseEvent) => {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    if (restRequests()?.length) {
                      const requests = restRequests() || [];
                      setRestRequests(requests.filter((i) => i.id !== item.id));
                      if (location.pathname === `/${item.id}`) {
                        navigate("/");
                      }
                    }
                  }}
                  class="absolute text-xl hover:scale-125 transition-all ease-in-out duration-100 hover:text-red-700 text-red-600 right-2 top-0 bottom-0 m-auto"
                >
                  <ion-icon name="trash"></ion-icon>
                </button>
              </Link>
            )}
          </For>
        </div>
      </div>
      <div class="flex-1 min-h-full">
        <Outlet />
      </div>
    </div>
  );
};

export default Home;

If you look at the app after this change, you're going to see a delete button on every request. We're going to change that to show it only on the item being hovered.
Look at the onclick handler of the delete button, notice that we use the requests.filter method to remove the request from array using the request's id. And we're then using the setRestRequests updater function to persist them. Try the delete button to delete some requests.

Let's add some CSS to make the delete button visible only on hover of the request item. Create a new file named Home.css and add the following code inside it:

.list .list__item ion-icon {
  display: none;
}

.list .list__item:hover ion-icon {
  display: flex;
}

.list .list__item:hover .list__item--active + ion-icon {
  @apply text-white;
}

.list .list__item--active {
  @apply bg-purple-600 text-white;
}

Finally, import the Home.css file inside Home.tsx file as follows:

// existing imports
import { restRequests, setRestRequests } from "../store";
import "./Home.css";

If you look at the app now, we only show the delete button on the hovered request item.

Awesome, we're now able to create requests, delete requests, save then persistently and have a really good UI/UX for the app. Feel free to modify how it looks and make it your own 🎉

Conclusion

In this tutorial, we've learnt a couple of concepts when it comes to Solid JS. We learnt:

Getting started with Solid JS
Signals
Persisting data into storage
Working with Routes using solid-app-router
Working with Forms using solid-forms
Creating directives

I enjoyed writing this article and I hope you learnt quite a few things from it. If you did, do react 👏 to this post and bookmark it. This tutorial is also available on YouTube so you can check out both Part1 and Part2 there.

If you'd like to connect, here are the links to my socials:

Twitter, YouTube, LinkedIn, GitHub

How to add Angular to an existing empty NX workspace

Muhammad Ahsan Ayaz — Tue, 15 Feb 2022 16:04:51 +0000

Well, this article is about...what the title says :D
I was trying to find this over the internet and couldn't find an easy answer. But with the amazing SEO of Dev.to, I'm really confident that people searching for the same can easily find how to do it.

Problem:

If you have an empty NX repository, i.e. not created with the angular preset, you can't run the following command to create an Angular app:



ng generate app myApp

That's because you'll probably get this error:

And what it means is that we can't really run ng commands unless we have the angular.json file present in the project's root folder and Angular is already set up. Ergo, we can't add Angular to this empty NX repository this way.

Solution:

You need to install the @nrwl/angular package into the repository as follows:



npm install --save-dev @nrwl/angular
#or
yarn add -D @nrwl/angular

Now you can run the following command to generate an Angular app within the repo. This will also configure the nx workspace to be able to work with Angular apps/libraries.



nx g @nrwl/angular:application myApp

Thank me later :D

Conclusion

If you found the article useful, make sure to hit the like or the bookmark icon. Check out my YouTube Channel for more amazing content. And if you feel adventurous and are interested in taking your #Angular skills to the next level, check out the Angular Cookbook. It's awesome!

"Flashback" - a MongoDB Atlas Hackathon Submission | Wohooo! 🎉

Muhammad Ahsan Ayaz — Fri, 14 Jan 2022 05:28:05 +0000

Overview of My Submission

My submission for the hackathon is a memory-based game called Flashback. I used MongoDB Atlas Database for storing the games, the scores and the users. The rest of the technologies are:
Angular, NestJS, Firebase, Prisma, TailwindCSS, a bit of 💗

Submission Category:

Choose Your Own Adventure

Link to Code

code-with-ahsan / flashback

Flashback

Game Url (Demo)

https://flashback-3b0aa.web.app/

About the game

This is a memory based game built for the MongoDB Atlas Hackathon. Players can create game lobbies and invite others using a link. They can simulataneously play the memory game and whoever finishes first, essentially wins and the game quickly ends as someone finishes the game as a winner.

IMPORTANT NOTE:

When testing the app, please wait a while as the heroku instance (dyno) might still be down, since it is on a free teer. Once you log in, you can wait for a few seconds and try again to see everything working.

Built with

The game is built using Angular, TypeScript, TailwindCSS, NestJS, MongoDB 😄 (of course), and Firebase. Also, with a lot of and hardwork 💗. Which can be seen at either Twitch or YouTube as all of this was streamed LIVE with all my efforts, frustration, and small wins…

View on GitHub

Additional Resources / Info

Here's a demo video explaining the workflow 🙂

Please note that the backend is deployed on a FREE dyno of Heroku. So when you try the app, it might take some time before you get a network response as the dyno might be sleeping. Takes a few seconds before it wakes up and starts responding.

Hoping for the best 🤞 This was fun!!

10 CRITICAL MISTAKES every Software Engineer should avoid

Muhammad Ahsan Ayaz — Mon, 10 Jan 2022 00:50:10 +0000

Introduction

The following tips have been a result of 8 years+ experience in the Software Industry, working through several roles in startups, corporates, in-office, and remote. There might be a lot more tips that you folks have and I'd love to see them in the comments either on this post, or in the comments of my video

Mistakes to avoid

Conclusion

If you liked this post and the video, make sure to 💗 and 🔖 this. Also, subscribe to the channel for more content.
If you have any question or queries, feel free to connect with me on my socials.
Happy coding! 🙌

8 techniques to write cleaner JavaScript code

Muhammad Ahsan Ayaz — Mon, 03 Jan 2022 01:27:01 +0000

I believe being a Software Engineer is just like being a Super Hero! And with great power, comes great responsibility. While writing code is an integral part of being a Software Engineer, just like estimations, brainstorming, writing unit tests are important aspects, writing clean code is really important as well.
In this article, we're going to look at 8 different techniques to help you write cleaner JavaScript code.

If you'd prefer watching a video instead, check this out:
Video Tutorial

Now let's discuss each technique, one at a time.

Pure Functions

A pure function is a function that always returns the same output, given the same input(s). It doesn't depend on any external variable apart from the inputs provided, nor it affects/changes any outside variable.
Having pure functions makes it a lot easier for testing as they make testing super easy as you can always stub/mock the inputs and test your expected values. Let's see the following example

let name = "Peter Parker";
const splitName = () => {
  name = name.split(' ');
}
name = splitName();
console.log(name); // outputs [ 'Peter', 'Parker' ]

While the above code seems appropriate. It is not (lol). And that's because the splitName function depends on an outside variable named name and if someone else starts changing this variable, the function splitName starts providing a different output. Making it a non-pure function as we'd still be calling splitName() but the output is going to be different.

Let's change this to a pure function and let's see how that would look like:

let name = "Peter Parker";
const splitName = (nameString) => {
  return nameString.split(' ');
}
name = splitName(name);
console.log(name); // outputs [ 'Peter', 'Parker' ]

With the above change, the splitName is now a Pure Function because:

It only relies on the input(s) (the nameString input).
It doesn't change/re-assign any external variable

Fewer or Named Parameters

When using functions, we often use positional parameters which have to be provided as they're declared with the function declaration. For example, in the call arithmaticOp(num1, num2, operator), we can't provide the operator argument without providing num1 and num2. And while this works for this example, for many functions, that'd become a problem.
Consider the following example:

const createButton = (title, color, disabled, padding, margin, border, shadow)  => {
  console.log(title, color, disabled, padding, margin, border, shadow)
}

Looking at the above code, you can already see that in if we wanted to make any of the arguments optional (to use default values) while calling the createButton +, that'd be a disaster and might look something like this:

createButton('John Wick', undefined /* optional color */, true ,'2px....', undefined  /* optional margin*/);

You can see that the above statement doesn't look Clean at all. Also, it is hard to see from the function-calling statement which parameter corresponds to which argument of the function. So this is a practice we could follow:

If we have 2 or fewer arguments, we can keep them as positional arguments
Else, we provide an object with key-value pairs

Let's use this technique with the above example and see how it looks like:

const createButton = ({title, color, disabled, padding, margin, border, shadow})  => {
  console.log(title, color, disabled, padding, margin, border, shadow)
}

createButton({
  title: 'John Wick',
  disabled: true,
  shadow: '2px....'
});

Notice that the statement to call the createButton function is much cleaner now. And we can easily see which value in the key-value pair corresponds to the arguments for the functions. Yayy! 🎉

Object / Array Destructuring

Consider the following javascript example in which we're taking some properties from an object and assigning to their individual variables:

const user = {
  name: 'Muhammad Ahsan',
  email: 'hi@codewithahsan.dev',
  designation: 'Software Architect',
  loves: 'The Code With Ahsan Community'
}

const name = user.name;
const email = user.email;
const loves = user.loves;

In the above example, it is much cringe to use the user.* notation so many times. This is where Object Destructuring comes in. We can change the above example as follows with Object Destructuring:

const user = {
  name: 'Muhammad Ahsan',
  email: 'hi@codewithahsan.dev',
  designation: 'Software Architect',
  loves: 'The Code With Ahsan Community'
}

const {name, email, loves} = user;

See! Much better. Right? Let's consider another example:

const getDetails = () => {
  return ['Muhammad Ahsan', 'hi@codewithahsan.dev', 'Some Street', 'Some City', 'Some Zip', 'Some Country'];
}


const details = getDetails();
const uName = details[0];
const uEmail = details[1];
const uAddress = `${details[2]}, ${details[3]}, ${details[4]}, ${details[5]}`;
const uFirstName = uName.split(' ')[0];
const uLastName = uName.split(' ')[1];

Ugh. I even hated the code writing the above example 🤣. Had to do it though. You can see that the code looks super weird and is hard to read. We can use Array Destructuring to write it a bit cleaner as follows:

const getDetails = () => {
  return ['Muhammad Ahsan', 'hi@codewithahsan.dev', 'Some Street', 'Some City', 'Some Zip', 'Some Country'];
}

const [uName, uEmail, ...uAddressArr] = getDetails();
const uAddress = uAddressArr.join(', ');
const [uFirstName, uLastName] = uName.split('');
console.log({
  uFirstName,
  uLastName,
  uEmail,
  uAddress
});

You can see how cleaner this is 🤩

Avoid Hard-coded values

This is an issue that I often request changes for the Pull Requests I review. And is a no-go. Let's see an example:

/**
 * Some huge code
 * 
 * 
 * 
 * 
 * 
 */

setInterval(() => {
  // do something
}, 86400000);
// WHAT IS THIS 86400000 ??? 🤔

Someone looking at the code would have no idea what this number stands for, how it was calculated and what's the business logic behind this. Instead of hardcoding this value, we could've created a constant as follows:

const DAY_IN_MILLISECONDS = 3600 * 24 * 1000; // 86400000

setInterval(() => {
  // do something
}, DAY_IN_MILLISECONDS);
// now this makes sense

Let's consider another example:

const createUser = (name, designation, type) => {
  console.log({name, designation, type});
}

createUser('Muhammad Ahsan', 'Software Architect', '1');
// WHAT IS this '1'? 🤔

Looking at the call for createUser method. It is really hard for someone reading the code to understand what this '1' stands for. I.e. what type of user this is. So instead of hard-coding the value '1' here, we could've created an Object mapping of the type of users we have as follows:

const USER_TYPES = {
  REGULAR_EMPLOYEE: '1'
}

const createUser = (name, designation, type) => {
  console.log({name, designation, type});
}

createUser('Muhammad Ahsan', 'Software Architect', USER_TYPES.REGULAR_EMPLOYEE);
// smoooooooth 😎

Avoid Short-hand variable names

Short-hand variables make sense where they're needed. Like if you've positional coordinates like x and y, that works. But if we create variables like p, t, c without having a context, it is really hard to read, trace and maintain such code. See this example for instance:

const t = 25;

let users = ['Muhammad Ahsan', 'Darainn Mukarram'];

users = users.map((user) => {
  /**
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   * 
   */

  return {
    ...user,
    tax: user.salary * t / 100 // WHAT IS `t` again? 🤔
  }
})

The above examples shows that now the developer/reader has to scroll all the way up or go to the definition to try to understand what this variable is. Ergo NOT CLEAN CODE 😠. This is also called mind-mapping the variables in which only the author knows what they mean. So instead of the short hand variable name, we could've given this a proper name as follows:

const taxFactor = 25;

let users = ['Muhammad Ahsan', 'Darainn Mukarram'];

users = users.map((user) => {
  // some code
  return {
    ...user,
    tax: user.salary * taxFactor / 100
  }
})

And now this makes much more sense.

Set default Object values using Object.assign()

There might be cases where you'd want to create a new object from another object, providing some default value if the source object doesn't have them. Consider the following example:

const createButton = ({title, color, disabled, padding})  => {
  const button = {};
  button.color = color || '#333';
  button.disabled = disabled || false;
  button.title = title || '';
  button.padding = padding || 0;
  return button;
}

const buttonConfig = {
  title: 'Click me!',
  disabled: true
}

const newButton = createButton(buttonConfig);
console.log('newButton', newButton)

Instead of doing all that, we can use Object.assign() to override the default properties if provided by the source object as follows:

const createButton = (config)  => {
  return {
    ...{
      color: '#dcdcdc',
      disabled: false,
      title: '',
      padding: 0
    },
    ...config 
  };
}

const buttonConfig = {
  title: 'Click me!',
  disabled: true
}

const newButton = createButton(buttonConfig);
console.log('newButton', newButton)

Use method chaining (especially for classes)

Method chaining is a technique that can be useful if we know the user of the class/object is going to use multiple functions together. You might have seen this with libraries like moment.js. Let's see an example:

class Player {
  constructor (name, score, position) {
    this.position = position;
    this.score = score;
    this.name = name;
  }
  setName(name) {
    this.name = name;
  }
  setPosition(position) {
    this.position = position;
  }
  setScore(score) {
    this.score = score;
  }
}

const player = new Player();
player.setScore(0);
player.setName('Ahsan');
player..setPosition([2, 0]);
console.log(player)

In the above code, you can see that we needed to call a bunch of functions together for the player. If this is the case for your object/class, use method chaining. And all you need to do is to return the object's instance from the functions you want to chain. The above example can be modified as follows to achieve this:

class Player {
  constructor (name, score, position) {
    this.position = position;
    this.score = score;
    this.name = name;
  }
  setName(name) {
    this.name = name;
    return this; // <-- THIS
  }
  setPosition(position) {
    this.position = position;
    return this; // <-- THIS
  }
  setScore(score) {
    this.score = score;
    return this; // <-- THIS
  }
}

const player = new Player();
player.setScore(0).setName('Ahsan').setPosition([2, 0]);
// SUPER COOL 😎
console.log(player)

Use Promises over Callbacks

Promises have made our lives easier. We had something called callback hell a couple of years ago that made the code so hard to read. It looks something like this:

Even if I'm working with a library that has callbacks, I try to add a wrapper there that promisifies that (yeah, that's a term now). Let's consider the following example:

 const getSocials = (callback) => {
  setTimeout(() => {
      callback({socials: {youtube: 'youtube.com/CodeWithAhsan', twitter: '@codewith_ahsan'}});
    }, 1500);
}

const getBooks = (callback) => {
  setTimeout(() => {
    callback({books: ['Angular Cookbook']});
  }, 1500);
}

const getDesignation = (callback) => {
  setTimeout(() => {
    callback({designation: 'Software Architect'});
  }, 1500);
}

const getUser = (callback) => {
  setTimeout(() => {
    callback({user: 'Ahsan'});
  }, 1500);
}

 getUser(({user}) => {
    console.log('user retrieved', user)
    getDesignation(({designation}) => {
      console.log('designation retrieved', designation)
      getBooks(({books}) => {
        console.log('books retrieved', books)
        getSocials(({socials}) => {
          console.log('socials retrieved', socials)
        })
      })
    })
  })

All of the functions in the above code are asynchronous and they send back the data after 1.5 seconds. Now if there were 15 different functions involved, imagine what it would look like. Probably like the image I shared above 😅. Instead of having this callback hell, we can promisify our functions and use promises as follows for better readability:

const getSocials = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({socials: {youtube: 'youtube.com/CodeWithAhsan', twitter: '@codewith_ahsan'}});
    }, 1500);
  })

}

const getBooks = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({books: ['Angular Cookbook']});
    }, 1500);
  })
}

const getDesignation = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({designation: 'Software Architect'});
    }, 1500);
  })
}

const getUser = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({user: 'Ahsan'});
    }, 1500);
  })
}

  getUser()
    .then(({user}) => {
      console.log('user retrieved', user);
      return getDesignation();
    })
    .then(({designation}) => {
      console.log('designation retrieved', designation)
      return getBooks();
    })
    .then(({books}) => {
      console.log('books retrieved', books);
      return getSocials();
    })
    .then(({socials}) => {
      console.log('socials retrieved', socials)
    })

You can see that the code already is much readable now as all the .then() statements are indented and show what data is retrieved in each .then() step. We can easily see the steps using this syntax as every .then() call returns the next function call along with its promise.

Now we can take it up a notch and make our code even more readable. How? By using async await. We'll modify our code as follows to achieve that:

const getSocials = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({socials: {youtube: 'youtube.com/CodeWithAhsan', twitter: '@codewith_ahsan'}});
    }, 1500);
  })

}

const getBooks = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({books: ['Angular Cookbook']});
    }, 1500);
  })
}

const getDesignation = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({designation: 'Software Architect'});
    }, 1500);
  })
}

const getUser = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({user: 'Ahsan'});
    }, 1500);
  })
}

const performTasks = async () => {
  const {user} = await getUser();
  console.log('user retrieved', user);

  const {designation} = await getDesignation();
  console.log('designation retrieved', designation);

  const {books} = await getBooks();
  console.log('books retrieved', books);

  const {socials} = await getSocials();
  console.log('socials retrieved', socials);
}

Notice that we wrapped our code inside the performTasks() function which is an async function as you can see the usage of the async keyword. And inside, we're making each function call using the await keyword which essentially would wait for the promise from the function to be resolved before executing the next line of code. And with this syntax, our code look as if it was all synchronous, however being asynchronous. And our code is a lot more cleaner 🙂

Conclusion

I hope you enjoyed reading the article. If you did, make sure to hit like and bookmark. And check my YouTube Channel for more amazing content. And if you feel adventurous and are interested in taking your #Angular skills to the next level, check out my Angular Cookbook

🔥 Announcing the "Angular Cookbook"

Muhammad Ahsan Ayaz — Sat, 07 Aug 2021 17:37:06 +0000

*Taking a deep breath in relief.... Sigh!
I'm really, really happy today on becoming a worldwide published Author. The 🅰️ngular Cook🅱️ook has been released today to both the Packt store and on the Amazon store as well.

Cookbook What?

If you are an 🅰️ngular developer and are always thinking what are the best
practices for this, and that in Angular, this is a book that I've written JUST
FOR YOU! I've been working with Angular for more than 8 years to the point
where Google acknowledged myself as a
Google Developers Expert in Angular. And I've
compiled over 80 recipes that every Angular developer should know. Be it
Component Communication, Performance Optimization, Routing Strategies,
Animations, or even Progressive Web Apps with Angular, I've got you
covered with more than 600 pages of 🅰️ngular goodness! 😎

A sneak peek at the content

Open the following link to see a sample of the Kindle version (PDF).

What will you learn through this book?

✔️ Gain a better understanding of how components, services, and directives work
in Angular

✔️ Understand how to create Progressive Web Apps using Angular from scratch

✔️ Build rich animations and add them to your Angular apps

✔️ Manage your app's data reactivity using RxJS

✔️ Implement state management for your Angular apps with NgRx

✔️ Optimize the performance of your new and existing web apps

✔️ Write fail-safe unit tests and end-to-end tests for your web apps using Jest
and Cypress

✔️ Get familiar with Angular CDK components for designing effective Angular
components

Who this book is for

The book is for intermediate-level 🅰️ngular web developers looking for
actionable solutions to common problems in Angular enterprise development.
Mobile developers using Angular technologies will also find this book useful.
Working experience with JavaScript and TypeScript is necessary to understand the
topics covered in this book more effectively.

Should you buy a copy?

YEAH, of course. How'll I get rich otherwise?

Just kidding 😄. I have spent a lot of time learning lots of techniques with
Angular. For the most part, it's easy peasy. But some things you always learn
the hard way. And I'd never want anyone to unnecessarily spent extensive
time to go learning those techniques. The purpose of this book is to make the
process easier for you to become an Expert in developing Enterprise
applications with Angular.

Grab your copy today

Get it from Amazon

DEV Community: Muhammad Ahsan Ayaz

How to Become a Google Developer Expert (GDE): The Complete Guide

Part I: The Philosophy of Expertise and Program Dynamics

The Value Exchange: Analyzing the Benefits Ecosystem

Table 1: Strategic Analysis of GDE Program Benefits

The Tenure Model and Active Status

Part II: The Mental Model and Strategic Preparation

The "Fireship" Philosophy: Mindset Over Metrics

Strategic Niche Selection: The Major and The Minor

The Activity Roadmap: From Practitioner to Leader

Phase 1: The Builder (Months 1-6)

Phase 2: The Teacher (Months 7-12)

Phase 3: The Leader (Months 13-18+)

Part III: The Infrastructure of Success – The Activity Tracking Sheet

3.1 Architecture of the Tracking Sheet

Table 2: Recommended Structure for GDE Activity Log

3.2 Automating the Portfolio with Apps Script

Automation Workflow Examples:

3.3 The Concept of the "Impact Report"

Part IV: The Nomination Strategy – Entering the Circle

4.1 The "Don't Ask, Attract" Strategy

4.2 Navigating the Ecosystem: The Stockholm Case Study

The Tactical Approach for a Candidate:

4.3 The Outreach Template

Part V: The Application and Interview Gauntlet

5.1 The Application Form

5.2 The Community Interview (Behavioral)

Objective:

Key Behavioral Questions & Strategy:

5.3 The Product Interview (Technical)

Technical Deep Dives by Domain:

Part VI: Post-Acceptance and Future Outlook

Conclusion

AI Assistant for Company-Wide Software Best Practices with Gemini, LlamaIndex & RAG

Why RAG for Software Best Practices?

Prerequisites

Prerequisite 1:

Prerequisite 2:

Prerequisite 3:

Step 1: Gather and Store Your Best Practices Documentation

Step 2: Fetching Documentation from the Repository

Step 3: Setting Up the Language Model and Embeddings

Step 4: Generating the VectorIndex and Query Engine

Step 5: Querying the AI Assistant

Step 6: Customizing the Assistant for Your Company

Conclusion

Code

Discover the Power of Gemini Nano: The On-Device AI Model running in Chrome 127+

So, What is Gemini Nano?

Key Features of Gemini Nano

How to use Gemini Nano today?

How to interact with Gemini Nano?

Conclusion

Configuring Tailwind CSS for Storybook in an Angular Library inside an NX monorepo

Background

Challenge

The main challenge

Solution

Thank me later

Kicking Off Hackstack Pakistan 2023 - Meet the Future of Tech Innovation!

Hackstack Pakistan 2023 Kicks Off with Passionate Teams on Board!

Meet the Teams 🚀

What’s Next?

The Complete TypeScript Setup - From Zero to Hero

Table of Contents

Initializing a New Project

Installing and Building with TypeScript

Configuring tsconfig.json

Running the App with Nodemon and ts-node

Setting up ESLint for TypeScript

Integrating Jest for Testing

Debugging in VSCode

Conclusion

SolidJS Crash Course - Building a REST API Client - Part 1

Introduction

Setting up the project

Creating and Serving

Adding Tailwind CSS

Add Nunito Font

Add Ionicons

Creating the `IconButton` component