DEV Community: Akash Joshi

Global Talent: The Employer-Independent UK Visa

Akash Joshi — Fri, 15 Nov 2024 12:51:30 +0000

As a software engineer who has navigated various visas in the UK, I've experienced firsthand the challenges and uncertainties that come with building a career abroad. After two years in the UK and multiple layoffs, I finally secured an unlimited visa known as the Global Talent Visa (GTV). In this article, I'll share my journey and insights into this game-changing visa option for skilled professionals.

The Skilled Worker Visa Dilemma

Like many international professionals, I initially came to the UK on a Skilled Worker Visa. While this visa provides a pathway to work in the UK, it comes with significant drawbacks:

Job Dependency: Your right to stay in the country is tied to your employment with a specific company.
Stress During Job Transitions: Changing jobs becomes a high-stakes process, as you need to secure a new sponsorship quickly.
Limited Flexibility: Your career options are restricted to companies willing and able to sponsor your visa.

These limitations can be particularly challenging in a volatile job market, as I experienced during several layoffs and job changes.

Enter the Global Talent Visa

Frustrated with the constraints of the Skilled Worker Visa, I decided to explore other options. That's when I discovered the Global Talent Visa (previously known as the Exceptional Talent Visa). This Tier 1 visa offers several significant advantages:

Unlimited Duration: Unlike many other visas, there's no expiration date to worry about.
Career Flexibility: You're not tied to a specific employer, allowing you to switch jobs, start a business, or work as a freelancer.
Faster Route to Settlement: It provides a quicker path to permanent residency in the UK.

My Personal Experience

I used various strategies to strengthen my application:

External Contributions: Engaged in meetup and conference activities, contributing to over six pieces of evidence.
Professional Recognitions: Utilized salary comparisons and documented my work at all of previous companies which had outsized impact.
Community Involvement: Highlighted my role in community organizing and open-source projects.
References: Secured references from seniors and well-known people in digital technology who could attest to my impact and contributions.

The Application Process

Obtaining a Global Talent Visa involves a two-stage process:

Endorsement: You must first be endorsed by a designated body in your field. For tech professionals, this is usually Tech Nation.
Visa Application: Once endorsed, you apply for the actual visa through the UK government.

Preparing for Endorsement

The endorsement stage is crucial and requires demonstrating your exceptional talent or promise in your field. This typically involves showcasing your achievements, innovations, and impact on the tech industry. Here’s how I approached it:

Mandatory Criteria: Ensure you meet the core criteria set by the endorsing body.
Optional Criteria: Supplement your application with additional evidence of your expertise.
Statement of Purpose: Clearly articulate your contributions and future plans in the UK.

In total, you need to submit around 10 documents as evidences. While all 10 aren’t mandatory, submitting the maximum number of evidences strengthens your application and makes it more likely to get endorsed.

Tips for a Successful Application

Follow Guidelines: Adhere strictly to the application guidelines provided by Tech Nation. For example, letters of recommendation should not exceed six pages and should talk about your potential contribution to the UK economy.
Quality Over Quantity: Focus on the impact of your work rather than the number of achievements. Highlight how your contributions have positively affected your company or the industry.
Comprehensive Evidence: Use a mix of evidence such as conference participation, community organizing, open-source contributions, and media coverage of your work.

Is the Global Talent Visa Right for You?

While the Global Talent Visa offers tremendous benefits, it's not the right fit for everyone. Consider applying if:

Strong Track Record: You have a significant history of achievements in your field.
Long-Term Stability: You're seeking long-term stability and career flexibility in the UK.
Willingness to Invest: You're prepared to invest time and effort into a more complex application process.

Who is Eligible for GTV?

Anyone can apply for the GTV from within the UK, outside the UK, or even if you are on any existing UK visa. Here are the key eligibility criteria:

Fields Covered: Arts and culture, research and academia, digital technology.
Experience Levels:
- Promise: For those showing potential leadership.
- Talent: For individuals with over five years of experience in their field.

Note: Product-based experience is preferred over service-based companies.

Resources and Costs

Visa Fees and Details: UK Global Talent Visa
Community Support: Tech Nation Visa Forum

Conclusion

The Global Talent Visa represents a significant opportunity for skilled professionals looking to build a career in the UK. It offers the freedom and stability that many of us crave when working internationally. If you're currently on a Skilled Worker Visa and feeling constrained, or if you're considering a move to the UK, I encourage you to explore this option.

Have you had experience with different types of work visas? Are you considering applying for the Global Talent Visa? I'd love to hear your thoughts and experiences in the comments below. If you need help determining your eligibility or forming your application, feel free to schedule a call.

All the best on your journey!

How the Global Talent visa might make you layoff-proof in the UK 🇬🇧

Akash Joshi — Fri, 13 Sep 2024 13:48:49 +0000

As a software engineer who has navigated the complex world of international work visas, I've experienced firsthand the challenges and uncertainties that come with building a career abroad. After two years in the UK and multiple layoffs, I've finally secured an unlimited visa known as the Global Talent Visa. In this article, I'll share my journey and insights into this game-changing visa option for skilled professionals.

The Skilled Worker Visa Dilemma

Like many international professionals, I initially came to the UK on a Skilled Worker Visa. While this visa provides a pathway to work in the UK, it comes with significant drawbacks:

Job-dependency: Your right to stay in the country is tied to your employment with a specific company.
Stress during job transitions: Changing jobs becomes a high-stakes process, as you need to secure a new sponsorship quickly.
Limited flexibility: Your career options are restricted to companies willing and able to sponsor your visa.

These limitations can be particularly challenging in a volatile job market, as I experienced during several layoffs and job changes.

Enter the Global Talent Visa

Frustrated with the constraints of the Skilled Worker Visa, I decided to explore other options. That's when I discovered the Global Talent Visa (previously known as the Exceptional Talent Visa). This Tier 1 visa offers several significant advantages:

Unlimited duration: Unlike many other visas, there's no expiration date to worry about.
Career flexibility: You're not tied to a specific employer, allowing you to switch jobs, start a business, or work as a freelancer.
Faster route to settlement: It provides a quicker path to permanent residency in the UK.

The Application Process

Obtaining a Global Talent Visa involves a two-stage process:
Endorsement: You must first be endorsed by a designated body in your field. For tech professionals, this is usually Tech Nation.
Visa Application: Once endorsed, you apply for the actual visa through the UK government.

Is the Global Talent Visa Right for You?

While the Global Talent Visa offers tremendous benefits, it's not the right fit for everyone. Consider applying if:

You have a strong track record of achievements in your field.
You're looking for long-term stability and career flexibility in the UK.
You're willing to invest time and effort into a more complex application process.

Remember, the application process can be challenging, but the rewards are significant. If you're considering this path, I'd be happy to share more details about my experience or offer guidance on preparing your application.

Conclusion

The Global Talent Visa represents a significant opportunity for skilled professionals looking to build a career in the UK. It offers the freedom and stability that many of us crave when working internationally. If you're currently on a Skilled Worker Visa and feeling constrained, or if you're considering a move to the UK, I encourage you to explore this option.

Have you had experience with different types of work visas? Are you considering applying for the Global Talent Visa? I'd love to hear your thoughts and experiences in the comments below. In case you need help knowing if you're eligible (most people are!) or want help forming your application, feel free to schedule a call.

Building AI apps using GPT, Claude and Cloudflare

Akash Joshi — Wed, 03 Jan 2024 09:23:49 +0000

Artificial Intelligence has transformed the way we interact with technology. One of the key innovations enabling this AI revolution is Large Language Models (LLMs). LLMs are powerful natural language processing systems that can understand text, generate human-like writing, and even converse in natural language.

In this article, we'll explore how we can leverage LLMs to quickly build intelligent applications through APIs offered by companies like OpenAI, Anthropic, and Cloudflare. These capabilities just take a few lines of code. The best way to understand a new technology is by building things on it. So let's get started.

Large Language Models

This AI automations craze is possible, of course, because of Large Language Models or LLMs. LLMs are blackboxes which take in a series of tokens as an input, and try to predict what the next set of tokens should be. The major openly available models on the internet which you can pay for and use are -

OpenAI GPT APIs
Claude
Cloudflare AI

By using these models, the flexibility you get in the number of AI-powered applications one can build is endless. I've been experimenting on these a lot myself! More on that in a bit.

OpenAI

Firstly, let's look at the kinds of APIs they provide. Let's look at OpenAI first. They provide first-party SDKs for NodeJS and Python. I've used both, and unfortunately, because of the nature of the LLM landscape and how fast things move, it's always recommended to go with first-party SDKs. Things move too fast for third-party ones to catch up.

The 2 main APIs they provide are *completions* and *function calling*.

Completions

Right from OpenAPI's docs, "Chat models take a list of messages as input and return a model-generated message as output.". To understand what this means, take a look at the example below.

const response = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [{"role": "system", "content": "You are a helpful assistant."},
        {"role": "user", "content": "Who won the world series in 2020?"},
        {"role": "assistant", "content": "The Los Angeles Dodgers won the World Series in 2020."},
        {"role": "user", "content": "Where was it played?"}],
  });

As a dev, we have to pass all of the relevant messages of a conversation to GPT, which involves the following - *system messages* to define GPT behavior, *user messages* which define the queries users ask, and *assistant messages*, ie, responses from the API in the history.

This context is what allows GPT to maintain a history of the conversation and predict the next output with better accuracy. Try it on your own using the docs!

Function Calling

The other API one can use for building AI apps is function calling. This one allows you to define functions accessible by GPT in the JSON format described by OpenAI. Once you pass in the data and also write some glue code, GPT can then "call" functions in your codebase to get data as needed (it just tells you what you need to do, you still need to call the functions programmatically).

There's an example of a weather calling API on the docs pages, but I'm going to create a better one soon!

const functions = [
    {
        "name": "get_current_weather",
        "description": "Get the current weather in a given location",
        "parameters": {
            "type": "object",
            "properties": {
                "location": {
                    "type": "string",
                    "description": "The city and state, e.g. San Francisco, CA",
                },
                "unit": {"type": "string", "enum": ["celsius", "fahrenheit"]},
            },
            "required": ["location"],
        },
    }
];

Claude

Anthropic has released its own competitor to OpenAI's GPT APIs - Claude. Claude is faster, cheaper, and more flexible in terms of data formats it accepts and the amount of tokens it supports (9,999!). This can make it a better alternative to GPT's APIs. However, it can struggle in terms of accuracy, and also lags behind in features when compared to GPT. Still, if you want something fast and cheap, Claude can get the job done!

Claude also has first-party SDKs for Python and Typescript, which as I said previously, are recommended over third-party ones. Although, in this case, Claude's single API has remained quite stable over the past year, so feel free to choose any.

Looking up their prompting technique, it's pretty obvious what they expect. A *human-assistant* loop where Claude's messages are tagged with assistant. This is unlike the GPT APIs where the system messages are tagged as *system* - which allows you to set context for how the assistant should reply to the user. Believe it or now, Claude's docs address this concern and many others as well, so be sure to give them a read!

Finally, the data you send with the API.

const completion = await anthropic.completions.create({
    model: 'claude-2',
    max_tokens_to_sample: 300,
    prompt: `${Anthropic.HUMAN_PROMPT} how does a court case get to the Supreme Court?${Anthropic.AI_PROMPT}`,
});

Cloudflare AI

Cloudflare have recently launched their own AI services suite. For LLMs, they are using Llama 2 7B internally (update: they included Mistral 7B as well). With a limited context size of 2048, you'll be relying more on external embeddings stores for real-world usecases.

The prompt structure matches that of OpenAI, with *system, *user** and *assistant* prompts.

const messages = [
  { role: 'system', content: 'You are a friendly assistant' },
  { role: 'user', content: 'What is the origin of the phrase Hello, World' }
];
const response = await ai.run('@cf/meta/llama-2-7b-chat-int8', { messages });

It's free for the introductory period as well. Check it out!

Conclusion

Building web applications doesn't have to be scary, and should be easy to figure out. Hopefully, this article gives you the right footing to get started, and go out there and build your own thing!

Btw, I've been experimenting with my own tool - how. It's an AI powered CLI tool which walks you through complex terminal interactions, holding your hand through all the steps. Check the demo out below.

// Detect dark theme var iframe = document.getElementById('tweet-1720715006054969774-577'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1720715006054969774&theme=dark" }

Unleashing the Power of WebAssembly in Modern Web Development

Akash Joshi — Tue, 16 May 2023 17:43:22 +0000

WebAssembly has emerged as a game-changing technology in the world of web development. It allows developers to run high-performance code written in languages like C, C++, and Rust directly in the browser, unlocking new possibilities for web applications. In this article, we will explore the potential of WebAssembly and how it can revolutionise modern web development.

Table of Contents:

What is WebAssembly?
Why Use WebAssembly?
Getting Started with WebAssembly 3.1 Setting Up the Development Environment 3.2 Compiling WebAssembly Modules 3.3 Interacting with WebAssembly Modules in JavaScript
Real-World Use Cases 4.1 Accelerating Performance with WebAssembly 4.2 Reusing Existing Codebases 4.3 Enhancing Web Applications with WebAssembly
Best Practices for WebAssembly Development 5.1 Optimizing WebAssembly Performance 5.2 Ensuring Security in WebAssembly 5.3 Debugging and Testing WebAssembly Modules
Conclusion

1. What is WebAssembly?

WebAssembly, often abbreviated as wasm, is a binary instruction format that allows for the efficient execution of code in modern web browsers. It provides a low-level virtual machine that enables running code at near-native speed, opening up opportunities for high-performance web applications.

2. Why Use WebAssembly?

WebAssembly offers several benefits for web development:

Improved Performance: By running code closer to native speed, WebAssembly enables developers to build web applications that perform tasks faster and more efficiently.
Code Reusability: WebAssembly allows developers to leverage existing code written in languages like C, C++, and Rust, making it easier to reuse and integrate code from other projects.
Language Agnostic: WebAssembly is not tied to a specific programming language, giving developers the freedom to choose the most suitable language for their specific needs.
Enhanced Security: WebAssembly provides a sandboxed execution environment, ensuring that code running in the browser is isolated and cannot interfere with other parts of the system.

3. Getting Started with WebAssembly

3.1 Setting Up the Development Environment

To start developing with WebAssembly, you'll need a few tools:

A text editor or an integrated development environment (IDE) for coding.
A WebAssembly-compatible compiler like Emscripten or Rust.
A modern web browser that supports WebAssembly, such as Google Chrome or Mozilla Firefox.

3.2 Compiling WebAssembly Modules

In this section, we'll explore how to compile a simple C program into a WebAssembly module using Emscripten. Here's an example code snippet:

#include <stdio.h>

int main() {
    printf("Hello, WebAssembly!");
    return 0;
}

To compile this code into a WebAssembly module, run the following command in your terminal:

emcc hello.c -o hello.js -s WASM=1

3.3 Interacting with WebAssembly Modules in JavaScript

Once you have a WebAssembly module, you can interact with it using JavaScript. Here's an example of how to load and execute a WebAssembly module:

fetch('hello.wasm')
  .then(response => response.arrayBuffer())
  .then(buffer => WebAssembly.instantiate(buffer))
  .then(module => {
    const exports = module.instance.exports;
    console.log(exports.add(2, 3)); // Output: 5
  });

4. Real-World Use Cases

In this section, we'll explore some practical applications of WebAssembly.

4.1 Accelerating Performance with WebAssembly

WebAssembly can greatly enhance the performance of computationally intensive tasks in web applications. For example, image and video editing applications can benefit from using WebAssembly to run complex algorithms, achieving near-native performance.

4.2 Reusing Existing Codebases

One of the major advantages of WebAssembly is the ability to reuse code from existing projects written in languages like C, C++, or Rust. This opens up opportunities for code sharing between web and non-web applications, saving time and effort for developers.

4.3 Enhancing Web Applications with WebAssembly

WebAssembly can be used to bring powerful functionalities to web applications that were previously only possible in native applications. Examples include running physics simulations, 3D modeling, audio processing, and even emulating retro games.

5. Best Practices for WebAssembly Development

To make the most out of WebAssembly, consider the following best practices.

5.1 Optimizing WebAssembly Performance:

Code Optimization

When writing code for WebAssembly, it's important to optimize it for performance. This includes using efficient algorithms and avoiding unnecessary computations. For example, let's consider a simple factorial function implemented in C:

int factorial(int n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

To optimize this code, we can introduce tail recursion, which eliminates the need for stack frames for each recursive call:

int factorial(int n, int result) {
  if (n <= 1) {
    return result;
  }
  return factorial(n - 1, n * result);
}

By using tail recursion, we reduce the memory overhead and improve the overall performance of the factorial function.

Memory Usage Optimization

WebAssembly has limited access to memory compared to native applications. Therefore, it's crucial to manage memory usage efficiently. Here's an example of optimizing memory usage in a WebAssembly module written in Rust:

#[no_mangle]
pub extern "C" fn process_data(data_ptr: *mut u8, data_len: usize) {
    // Do some processing on the data
    // ...

    unsafe {
        // Free the memory used by the data
        std::alloc::dealloc(data_ptr, std::alloc::Layout::from_size_align_unchecked(data_len, 1));
    }
}

In this example, we explicitly deallocate the memory used by the data after processing it. By freeing memory when it's no longer needed, we optimize memory usage and avoid memory leaks.

5.2 Ensuring Security in WebAssembly

Input Validation

WebAssembly modules should validate and sanitize inputs to prevent security vulnerabilities. Let's consider a simple WebAssembly module that calculates the square of an integer:

int square(int n) {
  if (n < 0) {
    // Invalid input, return an error code
    return -1;
  }
  return n * n;
}

In this example, we validate the input parameter n to ensure it's a non-negative integer. If the input is invalid, we return an error code instead of performing the calculation.

Isolating Untrusted Code

WebAssembly's sandboxed execution environment allows us to isolate untrusted code from accessing sensitive information or interfering with other parts of the application. Let's consider an example where we use WebAssembly to evaluate mathematical expressions:

float evaluate_expression(const char* expression) {
  // Evaluate the expression and return the result
  // ...
}

In this scenario, we need to ensure that the WebAssembly module can only access the necessary functions and data, and doesn't have access to sensitive information or critical system resources. By properly isolating the WebAssembly module, we can mitigate security risks and protect the integrity of our application.

5.3 Debugging and Testing WebAssembly Modules

Utilizing Debugging Tools

When working with WebAssembly, it's important to utilize debugging tools provided by browsers and extensions. For example, in Google Chrome, you can use the DevTools to debug and analyze your WebAssembly code. Here's an example of setting a breakpoint in a WebAssembly module:

const wasmModule = await WebAssembly.instantiateStreaming(fetch('module.wasm'));

// Debugging the WebAssembly module
const debugFunc = wasmModule.instance.exports.debugFunc;
debugFunc(); // Set a breakpoint on this line

// Use Chrome DevTools to inspect the WebAssembly execution

By setting a breakpoint in the JavaScript code that interacts with the WebAssembly module, you can use the debugging tools in your browser to step through the WebAssembly code and analyze its execution.

Writing Unit Tests

To ensure the correctness of your WebAssembly modules, it's essential to write comprehensive unit tests. Let's consider an example where we have a WebAssembly module that performs matrix multiplication:

void multiply_matrices(const int* matrix1, const int* matrix2, int* result, int rows1, int cols1, int rows2, int cols2) {
  // Perform matrix multiplication and store the result in 'result'
  // ...
}

To write a unit test for this module, you can use a testing framework like wasm-bindgen-test for Rust. Here's an example of a unit test that verifies the correctness of the matrix multiplication function:

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_multiply_matrices() {
        let matrix1 = vec![1, 2, 3, 4];
        let matrix2 = vec![5, 6, 7, 8];
        let mut result = vec![0, 0, 0, 0];

        multiply_matrices(matrix1.as_ptr(), matrix2.as_ptr(), result.as_mut_ptr(), 2, 2, 2, 2);

        assert_eq!(result, vec![19, 22, 43, 50]);
    }
}

By writing unit tests for your WebAssembly modules, you can verify their functionality, handle edge cases, and ensure they produce the expected results.

Incorporating debugging tools and writing unit tests for your WebAssembly modules enables you to effectively debug and validate your code. This practice ensures the reliability and correctness of your WebAssembly-powered web applications, allowing you to identify and fix issues efficiently.

6. Conclusion

WebAssembly is revolutionizing modern web development by enabling high-performance code execution in the browser. By harnessing its power, developers can unlock new possibilities and enhance the performance and functionality of web applications. Understanding the fundamentals of WebAssembly, exploring real-world use cases, and following best practices will empower developers to leverage this technology effectively.

Incorporating WebAssembly into your web development toolkit can elevate your projects to new heights, bringing speed, reusability, and enhanced capabilities. Start experimenting with WebAssembly today and unleash its potential in your web applications.

Remember, the web is evolving rapidly, and WebAssembly is at the forefront of this revolution. Embrace it, explore its possibilities, and stay ahead in the ever-changing world of web development.

Increasing Lucky Breaks: A FAANG story

Akash Joshi — Mon, 27 Mar 2023 07:46:04 +0000

In this journal entry, I'm going to share the story of how I could get an opportunity in London from India, and maybe help you do the same. Before diving in, I want to recommend a few things that have inspired me: "Here's the number I used to win the lottery", "The Black Swan" (the book), and "The Bus Ticket Theory of Genius" (among others by Paul Graham).

One of the most common questions I get asked online is, "How did you get into Meta?". And, "Were you asked DSA?". Unfortunately, there's no easy answer to these questions because what worked for me might not work for someone else. I had some privileges that I'm grateful for, such as being able to speak decent English, having access to a computer in high school, and receiving an undergraduate education. These set me up with a foundation that allowed me to pursue my passions and get good at them.

I believe that one of the keys to relative-success is having a genuine passion for what you're doing. For me, that was programming. As I've learned from "The Black Swan", luck also plays a big role, especially in fields where outcomes are non-linear. For example, an actor might become famous overnight if their movie does well, or a startup might succeed because the market and economy are in their favor. There's a lot of randomness involved in these situations.

However, that doesn't mean that hard work isn't important. An actor still needs to go to acting school and perform in smaller roles before they land a big one. An entrepreneur still needs to understand their market and build something that meets its needs. A writer still needs to write the first words of their book and see it through to completion.

So, what did I do that might work for you? For starters, I had a passion for building things using code. I enjoyed sharing my work online, and contributing to open source projects - finding it fun to build things in my spare time. Additionally, during the pandemic, I started a podcast about tech and gave talks online. All of these activities helped increase my visibility when the 2021 hiring bubble was at its peak.

The theory of Black Swan events is a metaphor that describes an event that comes as a surprise, has a major effect, and is often inappropriately rationalized after the fact with the benefit of hindsight.

Speaking of the hiring bubble, that was a Black Swan event that had a major impact on my career. When the pandemic hit in 2020, everyone started working from home, and I found myself feeling micromanaged. To decompress, I started building side projects, which someone saw and then referred me to a hiring tweet. This led to my first contracting gig. The same scenario repeated a few more times, which helped me progress quickly over the next two years.

In 2021, tech companies' stocks grew rapidly, and they bumped up hiring accordingly. They started sponsoring more people to move to their offices from all around the world. During this craze, a recruiter from Meta had been reading my blog for a while had reached out to me. That's how I am in London today. It was a combination of having enough work out there for people to notice it and being in the right place at the right time.

Of course, as with any Black Swan event, things don't stay the same forever. In 2022, the pandemic was becoming a distant memory, and everyone was starting to venture out again. Tech stocks collapsed, and the hiring bubble burst. What worked for me in 2021 probably won't work in 2022 and for the next few years.

But how can you increase your surface area for luck? The answer is simple: focus on what you love to do and share it with the world. When you do what you love, you're more likely to put in the effort and time needed to become really good at it. And when you share it with the world, you're giving luck more chances to strike.

Of course, luck alone won't guarantee success. Hard work and constant learning are also crucial. But luck can be the deciding factor between success and failure, especially in fields with non-linear outcomes like entrepreneurship, investing, and even getting hired to move across countries.

So, if you want to increase your chances of being successful in your field, start by doing what you love and sharing it with the world. Don't be afraid to put yourself out there and take advantage of any opportunities that come your way. And remember, you can increase your surface area for it and be ready when it strikes.

GraphQL Interview Reference Sheet

Akash Joshi — Sun, 05 Mar 2023 09:50:26 +0000

Here's a quick reference sheet for everything GraphQL. I started building this while studying for interviews, and have kept it updated ever since. Enjoy!

Schema First Design

Schema-first design typically involves three major steps:

Defining the schema: We identify which data our feature requires, and then we structure our schema to provide that data as intuitively as possible.
Back-end implementation: We build out our GraphQL API using Apollo Server and fetch the required data from whichever data sources contain it. In this first course, we will be using mocked data. In a following course, we'll connect our app to a live REST data source.
Front-end implementation: Our client consumes data from our GraphQL API to render its views.

Graph

The graph represents an app's data points and how they're connected as a collection of nodes and edges.

Type Definition

type PascalCase {
    key1: String! (! means non-nullable)
    key2: Int
    key3: [OtherType] (array of OtherType)
}

Query Type

The Query type's fields define which data clients can query from our schema. The Query type contains the entry points to our schema. There are 2 other possible entry points: Mutation and Subscription.

Query Definition

query queryName {
    key1
    key2
}

Best practices when creating client queries

Assign each query string to a constant with an ALL_CAPS name.
Export query definitions for use in unit tests.
Test out queries in the Apollo Studio Explorer and copy them over.
Wrap each query in the gql template literal.

Queries must use valid GraphQL syntax and must only include schema-defined fields.

GraphQL Mutations

Mutation names should start with a verb, followed by whatever data you're modifying.

Queries and mutations are both types of GraphQL operations. Queries are read operations that always retrieve data. Mutations are write operations that always modify data. Similar to Query fields, fields of the Mutation type are also entry points into a GraphQL API.

GraphQL Variables

Variables are denoted by the $ symbol. They are used to provide dynamic values for arguments to avoid including hardcoded values in a query. Each one's type must match the type specified in the schema.

  query getMission($isScheduled: Boolean) {
    mission(scheduled: $isScheduled) {
      id
      codename
    }
  }

GraphQL Resolvers

A resolver function is responsible for populating the data for a single field in your schema.

When a query executes successfully, a data key containing a result object with the same shape as the query is returned.

Resolver Chains

One should define a separate resolver for each field, including subfields which need to fetch more data.

A resolver function populates the data for a field in your schema. The function has four parameters. The first, parent, contains the returned data of the previous function in the resolver chain. The second, args, is an object that contains all the arguments provided to the field. We use the third parameter, context, to access data sources such as a database or REST API. Finally, the fourth parameter, info, contains informational properties about the operation state.

Apollo Data Sources

They help avoid the N+1 problem of data-fetching, which is, making N calls to the exact same endpoint to fetch the exact same data.

Resolver Cache

How might a resource cache be useful for our data source?

It helps resolve query fields that have already been fetched much faster.
It helps manage the mix of different endpoints with different cache policies.
It prevents unnecessary REST API calls for data that doesn't get updated frequently.

Apollo GraphQL

useQuery Hook

The useQuery hook returns an object with 3 useful properties that we use in our app: loading indicates whether the query has completed and results have been returned. error is an object that contains any errors that the operation has thrown. data contains the results of the query after it has completed. To set variables in our query, we declare them in the second parameter of the useQuery hook, inside an options object.

useMutation Hook

We use hooks to send requests to our GraphQL API from a React client. To send a mutation, we use the useMutation hook. This returns an array, where the first element is the mutate function used to trigger the mutation. The second element is an object with more information about the mutation, such as loading, error and data . This hook takes in a GraphQL operation as the first parameter. It also takes in an options object as the second parameter, where properties like variables are set.

Entities

Entities are GraphQL Schemas can be resolved across multiple subgraphs.

Anatomy of GraphQL Types

type Query {
  getMission(isScheduled: Boolean): [Mission!]!
}

type Mutation {
    createMission(updatedMission: Mission!): Mission
}

type Mission {
    id: ID!
    name: String
    # ...etc
}

Security

Authentication is checking that a user is who they say they are. Authorization is checking that a user is allowed to do what they're trying to do.

Authentication is determining whether a given user is logged in, and subsequently determining which user someone is.
Authorization is determining what a given user has permission to do or see.

Note: AuthenticationError and ForbiddenError are both error subclasses defined by Apollo Server. For more information on these and other kinds of errors, check out the Apollo Docs on error handling.

With field-level authorization, each resolver determines whether the logged-in user has permission to access a field, query, or mutation in the schema.

GraphQL Directives

A directive decorates part of a GraphQL schema or operation with additional configuration. GraphQL servers can read a GraphQL document's directives and perform custom logic as appropriate.

Each directive can only appear in certain locations within a GraphQL schema or operation. These locations are listed in the directive's definition.

directive @deprecated( reason: String = "No longer supported" ) on FIELD_DEFINITION | ARGUMENT_DEFINITION | INPUT_FIELD_DEFINITION | ENUM_VALUE

Defaults

Deprecated - Marks the schema definition of a field or enum value as deprecated with an optional reason.
Skip - If true, the decorated field or fragment in an operation is not resolved by the GraphQL server.
Include - If false, the decorated field or fragment in an operation is not resolved by the GraphQL server.

Federation

In a federated architecture, your individual GraphQL APIs are called subgraphs, and they're composed into a supergraph. By querying your supergraph's router, clients can fetch data from all of your subgraphs with a single request:

The router serves as the public access point for your supergraph. It receives incoming GraphQL operations and intelligently routes them across your subgraphs. To clients, this looks exactly the same as querying any other GraphQL server—no client-side configuration is required.

References

https://www.apollographql.com/docs/apollo-server/data/data-sources/

You MAY find success through your career

Akash Joshi — Sat, 06 Aug 2022 08:30:29 +0000

Disclaimer: This is a public journal entry, so take the ideas here with a pail of salt.

In popular media, one is generally told that one can find success only if they quit their job, and work on a startup, product, or an idea. This can lead to fleeting feelings of FOMO whenever one sees someone's successes or status updates on social media.

To unconvince myself of this idea that one needs to be constantly in lookout for an idea to be happy or successful in what they're doing, I decided to try to reverse-engineer and see the growth stories of a few folks that I admire in the tech industry.

I'll be looking at:

Gergely Orosz from The Pragmatic Engineer
Colin McDonnel of Zod and tRPC fame
Theo Browne from Ping

Gergely Orosz

Before being known for writing one of the most pragmatic and up-to-date newsletters on the tech industry, Gergely worked at Uber for 4 years, where he climbed the ladder to the Engineering Manager position.

He used this experience to write several books on software engineering. The current iteration of his blog also started out based on an article on the 2021 hiring market that he was supposed to write for The New York Times.

Colin Mcdonnel

Colin of Zod fame is currently working as a dev advocate for Edgedb. Colin originally graduated from MIT (which requires a lot of effort in itself), and eventually took a startup (Bagel Health) through YC. Although the startup wouldn't see the light of success, Colin used the experience to create open-source tools like our beloved run-time type validator Zod.

As documented by Theo in his video on tRPC, it originally started out as a POC by Colin trying to add automatic type inference and validation to a project called Obvious RPC, which tried to experiment with adding automatic type-inference to RPC API calls. This library finally became the tRPC that we all know and love, currently being maintained by Katt - a great programmer himself!

Theo Browne

Theo Browne is most popularly known as the creator of Ping Labs, the founder of T3 stack (Typescript, Tailwind and tRPC), along with growing a popular YT channel. Theo originally started out as an employee working on significant features at Twitch. In my personal opinion, this may have played a significant part in him starting out streaming on the platform and creating content on YT.

Eventually, he used this experience and the lack of focus of Twitch on creator tooling to found Ping, which you can read about on his blog.

Takeaways

So, what do I personally take away from this experience? Don't quit your job or FOMO yourself out of fun at work just because you read about people's success online. Everyone has a different path to it, and one of them could be through your career as well :)

The Pareto Hypothesis for Getting Hired

Akash Joshi — Mon, 25 Jul 2022 13:33:00 +0000

I have had discussions with friends and peers, where we try to discuss why some people have different career paths than others. While some join a great company after college, and then stagnate their for 5 years, others join companies which are okay after college, then move between companies/startups which might be "just alright", but see massive growth in terms of compensation and responsibilities.

I think I've had one such journey. I've never worked at a company employing >20 employees yet, and yet have enjoyed deploying my technical skills to solve more and more complex problems. I like to take the career path I've taken so far, the Pareto Hiring Hypothesis.

It may benefit you as well, so I'd like to details my thoughts on the same here. My theory goes,

"80% of developers apply to 20% of the available jobs, so apply to the rest of the 80%".

Expanding upon this idea, 80% of developers apply to the jobs they see quite visibly. A company posting blogs in social media, a company making news for funding, or a company which people post a lot of "I just joined X" posts about.

Ignore those. Do your own research across communities and job boards. Try to find the companies which aren't making noise in public, but hiring via Word of Mouth. These are the companies which will give you a 300% compensation hike, while not cooking your brains live during their 10-hour long interviews.

Maybe this makes sense for you. Maybe I'll just get more hate for writing this. Idc this time though, I'll continue to write for the non-vocal 80% :)

If you vibe with this idea, why not give me a follow here on dev.to?

Playing with JSON in your browser

Akash Joshi — Fri, 20 May 2022 05:43:18 +0000

Hey folks, so I'm writing about a project which I've worked on a little while ago, but one which I still use quite regularly - JSON Live Editor.

This project allows you to quickly dump some JSON data in the left panel, write some JS code to transform the data in the middle panel, and see the output on the right one. Since all the data is just there, there's no need to fiddle between multiple apps. This vastly increases turnaround time for any JSON-data based projects you might be working with.

The Need: I've worked with a lot of programmatic page generation projects over my career. The first one being the famous programmatic webflow page generation, and the other one being a set of WP and GitBooks pages that I converted to MDX over a week.

Both of these projects involved a lot of transformations and data conversions with data, mostly stored in the JSON format. The data conversions were also time consuming. The typical steps involved were:

Managing an input JSON file where you put the data which you want to work on in.
Managing a JS file which has the boilerplate to read & write the data, AND also has to perform transformations on it.
Managing an output file. This might be the most difficult part because it's easy to corrupt an output file by incorrect writes or overwriting existing data quite easily.

As you can see, any data project in JS dealing with 500+ items gets unwieldly quite quickly.

The Solution: I've dealt with this problem for over 2 years, and it kept coming up again and again whenever I had to make transformations on a JSON file. When the data was small, it was easy to do the transformations in the browser's console, but it's just not feasible once you start dealing with items in the upper double-digits.

After experimenting in the browser's console a little bit, and looking at the available JSON transformation systems online, I thought of building a web environment, where a user could see their input & output, and add transformation code to iterate over the data quickly.

For rapid development, I could use a simple textarea for the input, a Monaco-like editor to write the code, and some kind of JSON viewer for the output. ReactJS was also an obvious choice to hold this structure, because it would provide rapid reactivity.

Hence, after experimenting with a few libraries and kinds of workflows, JSON Live Editor was born.

It doesn't have the perfect UI, nor the best code-highlighting or linting (as I wanted to get started with bare-minimum Monaco setup), but it's finally here, and it does serve its purpose for me.

It does have some decent features:

Having a Monaco-based editor for code editing. Writing code in a familiar environment.
Storing state in local-storage. A tab closed by mistake won't cost you your data (and time!)
Only calculate output when the user wants. This ties in to the previous point. If you keep seeing the output while you're typing the code, that would result in a bad User Experience as you keep seeing errors or the incorrect transformation on screen. Being able to specify when you wanna transform your code, however, means that you always have the correct output on screen.

Well, that's the article. I wanted to have a document online which explains why this project exists and what it does. I guess this one does an okay job of it. Let me know of your thoughts.

To try this project, you can check out:

The GitHub page - github.com/akash-joshi/json-transformer
The actual website - json-live-editor.netlify.app/

Thanks! And see you tomorrow for another article on a data project that I've built :)

In case you want to hire a senior React developer ;)

React Interview Questions: Understanding Rendering

Akash Joshi — Sun, 03 Apr 2022 15:43:52 +0000

Hey folks, after preparing for frontend interviews/giving several interviews, a set of questions and discussions around React and React performance kept coming up. I decided to distill some of those concepts here for eveyone's benefit. In this article, let's talk about React Rendering: How it happens and what affects it.

If you prefer learning these concepts in a video format, there's a link to a talk I gave on the same topic below.

Link to code: https://github.com/akash-joshi/react-native-blr

Idea 1 - What are the Steps involved in a React Render?

The steps involved in a React render are as follows -

1. Code

The user first writes their original code as JSX, or as React.createElement calls (if they dare).

2. Bundling

The bundling process involves transpilation, code conversion and other steps. If the code was written using JSX, it's transpiled to JS using React.createElement calls, which the React library can then parse. Any imported svg and css files are also converted into a usable format and embedded into the final code.

This bundling generally happens through a bundler like [webpack](https://webpack.js.org/), or any other bundler you or your React framework are using.

3. Virtual DOM Generation

The Virtual DOM, or VDOM, as it's generally called, is an abstract tree representation of what the final DOM structure on the browser should look like. Creating a DOM node is a very expensive process, so React uses the VDOM and changes between VDOM structure across renders to determine which DOM node to update and how to update it.

React is also, of course, also responsible for creating and destroying DOM nodes as it needs to.

4. Generating the real DOM

React determines which DOM nodes to create, update or destroy by comparing the difference between 2 Virtual DOMs. This process is known as reconciliation and it's constantly being updated and improved by the React team.

In summary, the last 2 steps can be divided into 2 phases of the React renderer at a higher-level:

Image by Simran Birla

1. Render Phase

The render phase involves generating a VDOM tree from the bundled React code. Each VDOM state is immutable. Hence, a new VDOM tree is generate for each React render.

2. Commit Phase

As discussed in point 4 above, once React determines via reconciliation that a DOM node needs to be updated, it goes ahead and does so. The main job of React is in trying to minimize "commits" as much as possible, hence minimizing DOM node updates, and hence keeping your webapp performant.

You can check this part out in my talk here.

Link to code.

Idea 2 - How does React identify DOM Nodes? How can one optimize lists?

React holds a reference to the DOM Node structure in each element's Fiber Node, Fiber being the current implementation of React's reconciliation algorithm. Because of this, a developer generally doesn't have to worry about providing unique references for each DOM Node to React.

However, in structures like list, the order of React elements might change arbitrarily. To maintain a one-one mapping for the order of DOM Nodes inside of React and the browser, it's recommended to pass a key prop which uniquely identifies a React element inside of a list.

This key prop helps React in reusing DOM Nodes as much as possible, and hence, reduces the number of DOM updates required between renders.

If the key being passed to DOM Nodes in a list is not unique, your app may start breaking in unexpected ways.

To see me build a list and slowly start breaking it, watch the talk from this point.

Link to code.

Note: An interesting topic to learn more about is Virtualization. Here's how one can render a very large list, while reusing the same DOM nodes in React - Virtualization in React

Idea 3 - How to Remount Components in a simple way

This topic builds upon the previous topic. So if you haven't read it yet, I recommend going through it once, and all the links within.

Since the key property of a React element is used to uniquely identify it, a change in the value of key triggers a remount of the element and hence, the DOM node, since React expects that the element itself has changed.

Since a remount is triggered, all of the element's and its child components' state are also reset, and any effects are run again.

This can be used whenever you want to quickly force a remount on a component, either to rebuild a component, or just reset its state, in the case of forms. Hence, you can quickly reset a form, and all its enclosing state and components by changing the value of key being passed to it.

To see a visual demo of me building a form and resetting it, watch the talk from here.

Link to code example.

Idea 4 - Why do useState and useEffect exist?

Image from Bacancy Technology

Before React Hooks using functional components were introduced in 2018, the standard way of building React components was via Class Components. While defining reactivity in Functional components is as simple as using the useState hook to define reactive state, and defining effects in useEffect, it works differently in Class components. Primarily -

State was defined in the constructor and was a combined object of all the state that a component needs to keep a track of and react to.
Reacting to state was done as a part of class lifecycle methods.

One needed to make an explicit comparison between the previous and present state to know when to run effects like network calls. However, this creates an implicit dependency between state variables and effects, which reduces code readability, and can lead to unexpected behavior for effects.

The primary solution for this problem are the useState and useEffect hooks. Here's how:

useState explicitly defines which variable should cause a React component to re-render on change.
useEffect allows a user to define explicit dependencies between state and effects. For eg, one can create an explicit dependency for fetching a user's data, when a userId state variable changes.

Through these explicitly defined dependencies between effects and state, the code is less likely to become spaghetti and becomes easier to read. There are no code examples for this part of the topic, but feel free to go through all of the linked documentation above.

Bonus: Rerender Cascades and how to Prevent them

Did you know that updating the state of a React component causes the component and all its children to rerender? Even if they don't depend on that state?

Don't be surprised, because this is expected behavior. In fact, React also provides developers with an easy way of preventing this, if one wishes to do so (via React.memo).

If you liked this article, I would appreciate it if you could share it around. In a future article, I'll do a deep dive into state, the context API, memoization, and when to use which of these. Subscribe to my tiny newsletter to be notified via email when I put out something interesting.

Web3 is nigh, are my Old Skills irrelevant?

Akash Joshi — Mon, 22 Nov 2021 15:52:30 +0000

Hey all! Last month we had an interesting and enlightening call with Shadab, who is presently a Full-stack developer working in React, who previously has worked for 2 years in the R&D department of a Multi-National Corp as a Blockchain Research Analyst. The crux of this discussion was Shadab's opinion that beginners shouldn't focus on blockchain while starting to learn programming. Here's a short summary of the same.

Shadab's Story

Shadab has completed his bachelors in Mechanical Engineering. During senior year of college, he realized that a job in the Mechanical sector wasn't something that he would pursue long term, and was introduced to the world of tech through an internship that he did at a startup. Through a growing interest in cryptocurrencies and tech, Shadab started mining cryptocurrencies himself, and eventually built projects around it.

He eventually started working in the R&D department of TCS (Tata Consultancy Services) as a Blockchain Researcher, where he made use of Hyperledger Fabric and the Ethereum Network to build Proof of Concept projects.

What is Smart Contract Development?

There are several layers in any software. A frontend layer, which may use HTML, CSS and JS to build and display a UI, and a backend layer involving a server for processing transactions and a database for persisting data. Smart Contracts are just an addition to these layers. For a complete app, all layers have to be involved.

Smart Contracts, unlike other software layers, are very flexible. They may not need a separate frontend and backend. Business logic can be coded in the smart contracts and deployed into the respective network directly.

On Smart Contracts:

Smart contracts have an inbuilt system of authentication. You supply your public key, and sign a secret with your private key, to prove your identity. Smart Contracts run on blockchain nodes, meaning any machine which is part of the blockchain can execute your code. You pay the nodes a gas fee to have your code executed. To store data on the blockchain, you similarly pay gas fees to have your data/variables appended to the blockchain.

Why not Learn it as a Beginner?

While Shadab gained a lot of expertise in the field of blockchain, he advices young developers to skip the trend. In TCS, Shadab worked with clients from the automotive industry who wanted to integrate Blockchain with manufacturing. In this process, he realized that the value proposition of blockchain technologies was low, because of the low value generation as compared to the investment needed to run and maintain a smart contract.

His observation was that the interest in these technologies has been because of the hype itself.

Owing to this hype, students and new-comers to technology are not yet accustomed with the underlying technologies themselves. Web3 App development is similar to other software development. UI and UX still matters. Building projects by the traditional ways is how one truly understands the true meaning and use of decentralized systems.

Shadab also stresses on the fact that Blockchain is still in a very adolescent stage, where it's not mature enough to handle the complexities of real world problems.

You can check the complete conversation on YouTube. In case you want to attend future spaces (which we hold every 3rd weekend now), follow me on Twitter for updates.

Learn the Right Way to build React apps in Deno in 10 minutes [Aleph.JS]

Akash Joshi — Sun, 20 Jun 2021 04:12:57 +0000

Hey all 👋, you must have read about Deno, the new backend #javascript runtime recently. I was hacking around with it in one of my older videos, and I wondered if we can build #ReactJs apps on it. Turns out we can!

Using AlephJs, one can build a React app in Deno while using the exact same API as #NextJS, ie,

pages
components
api, etc

In my new video, I'll teach you how to:

Create websites using Deno and React
Understand how to import BOTH deno and node components and use them
Customize some code to show how to use AlephJS

If you like the content, follow me on Twitter for similar videos.