 Resources from Nik Graf in 2024

GraphQL brings joy to using APIs. Even though it's based on a type system, GraphQL in many ways is more flexible than REST.

But the flexibility that makes GraphQL a joy to work with can have its downsides if you aren't careful.

Schema design is an area where one small oversight at the beginning can get you stuck having to deal with weird naming, bloated duplicates, and other annoying workarounds.

It doesn't have to be like this!

Nik Graf has extensive experience designing GraphQL schemas, for a variety of business applications.

In this course, Nik has prepared several examples following different design patterns. Through exploration and comparison, you'll come away with actionable knowledge for designing and extending schemas.

Follow Nik, and avoid making Schema mistakes that will come back to bite you later.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Designing GraphQL Schemas

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

GraphQL Data in React with Apollo Client

Many languages work on a compilation story to WebAssembly, but Rust is already ready for primetime. Why?


- Rust is a stable language and great replacement for C and C++. 
- Due to the reference and borrowing concept, Rust doesn’t need a Garbage Collector and can be used for a production-ready WebAssembly project. 
- The Rust/Wasm team has built some sophisticated tooling for straightforward interoperability between Rust and JavaScript.

This course gives you the tools to compile to WebAssembly with Rust. Over 11 lessons, we’ll set up a project and explore various paths of communication and interoperability between Rust and JavaScript.

Rust is a systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.

rust

Using WebAssembly with Rust

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

Get Started with Reason

The core of serverless architectures are auto-scaling systems and a pay-per-execution pricing. Two traits that allows developers to significantly reduce operational cost and complexity, by outsourcing infrastructure management to cloud providers and focus on building business logic.  

In this course we walk through the basics on how to create a serverless API. We start off creating a simple HTTP endpoint. Then we build the first two endpoints of a REST API for a simple Todo Application backend storing the data in DynamoDB. After watching this course you will be ready to get started building you first serverless backend.

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Develop a Serverless Backend using Node.js on AWS Lambda

In this course we will explore the possibilities to bring VR to the Web using React VR. Each lesson focuses on one specific concept or component that comes with React VR. This guide covers a large surface area of experiences like teleporting a user to a recorded 360° experience as well as placing them in virtual worlds. Even a combination of both is possible. Each lesson is independent, but some require knowledge explained in a previous lesson.

Build Virtual Reality Experiences Using React VR

React 16 comes with some powerful new features, in this course we'll be exploring each of them. Each lesson is going to go over every individual new feature, one at a time.
From the new error boundaries that will save us many a headache to handling whether to update our state *within* our `setState` 

We won't just be learning the technical capabilities of the new features however, we'll *also* be going into best practices. 

Once you watch this course you'll be more than ready to leverage everything React 16 has to offer! 

Leverage New Features of React 16

A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes. 

We'll learn how to load in panoramas which are [equirectangular](https://en.wikipedia.org/wiki/Equirectangular_projection) images, and we'll also learn how to [cubemap](https://en.wikipedia.org/wiki/Cube_mapping) multiple images. We'll also learn about passing event and style properties to `<Pano/>`. 


Build 3D Panorama Scenes Using the Pano Component in React VR

Until React 16 it was required that a `render` method returns a single React element. With React 16 it is possible now to return an Array of elements. 

In addition creating self-eradicating component only rendering the children allow for a comfortable syntax. All in all this opens up new opportunities in component design and how they are nested which is demonstrated in this lesson.

Render Multiple Elements without a Wrapping Element in a Component in React 16

To annotate or describe elements in a VR scene we can leverage the built-in `<Text/>` component. In this lesson we'll place multiple `<Text/>` entries in a scene. 

We'll also explore its various `style` options, such as changing its color and position in your scene.


Write Text Using the Text Component in React VR

Same as a `<div>` in HTML or a `<View/>` in **ReactNative**, React VR comes with a `<Container/>` component that supports [flexbox layouting](https://facebook.github.io/react-native/docs/flexbox.html). 

In this lesson we'll explore what a `<View/>` means in a three dimensional context and how to structure two dimensional content like text and images.

Structure 2D Content like Images and Text Using the View Component in React VR

React VR ships with a handful of 3D primitives. We'll `import` primitives like `<Sphere/>`, `<Box/>`, `<Cylinder/>`, and `<Plane/>` and explore how they can positioned in a three dimensional space. 

We'll also check out some of their properties that let us change their size and polygon counts. However we are not limited to simply changing their geometry! We'll see how we can change material and texture options as well. 


Add Shapes Using 3D Primitives in React VR

In order to illuminate a scene containing 3D objects a lighting setup is required. In this lesson we'll walk through the available lighting components and create a common outdoor lighting setup. 

This includes the components: `<AmbientLight/>`, which affects all objects in the scene equally and from all directions; `<DirectionalLight/>`, which illuminates all objects equally from a given direction; `<PointLight/>`, which spreads outward in all directions from one point; and finally `<SpotLight/>`, which spreads outwards in the form of a cone. 

A handy demo for `<SpotLight/>` can be found [here](https://threejs.org/docs/#api/lights/SpotLight).


Add Lighting Using Light Components in React VR

React VR isn't limited to simple 3D primitives. By using the `<Model/>` Component we can place complex 3D models into our scene. 

In this lesson we'll import a custom polygon mesh of an astronaut by loading in a Wavefront `.obj` file. We'll play with our astronaut and learn about various options that will define the surface area of the model.

Render Custom 3D Objects Using the Model Component in React VR

One of React's core concepts is component composition. React VR is no different in that regard. You can take an existing component and wrap it into a new React component. 

We'll do so by creating a `<Tree/>` component out of simple shapes, a `<Cylinder/>` trunk and a `<Sphere/>` tree crown. When making our `<Tree/>` we'll also see how the position of shapes is relative to the `<View/>` and learn how we can leverage this superpower! 

Compose Multiple 3D Objects into one Component in React VR

Letting the user interact inside a VR scene is a *crucial* element for an immersive VR experience. 

In this lesson we'll walk through the various interaction handlers that come with almost every React VR component and show why the component `<VrButton/>` is useful and how to use it.

Capture User Interaction with React VR

Motion is an important aspect of a complete immersive experience, therefor we are going to look into the animation API **Animated**. 

**Animated** allows us to express a wide variety of animation patterns to animate text, images, and views. 

In addition we'll leverage the higher order component, `<CreateAnimatedComponent/>`, to create a rotating box! 

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

In this session we create a comment component to explore how to create components that only render text.

In previous versions of we had to wrap our text in needless `<span>` or `<div>`, we will see how React 16 removes the unneeded structure.

Render Text Only Components in React 16

By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI elements like overlays or loading bars this can be limiting. React 16 therefor ships with the new portal feature allowing you to attach parts of the Component tree inside a different root element. 

This lesson explores the new functionality by building an `<Overlay/>` component that renders out its children and creates a closeable overlay outside its DOM node.  

Render Elements Outside the Current React Tree using Portals in React 16

React 16 came with a couple changes to attributes of DOM components e.g. `<div>`. 

In this lesson we are going to walk through when DOM attributes are filtered out and when they are rendered. We'll also go over what you can validly pass into your custom attributes. 

Define DOM Attributes in React 16

Sometimes it’s desired to decide within an updater function if an update to re-render should be triggered. Calling `.setState` with `null` no longer triggers an update in React 16. This means we can decided if the state gets updated within our `.setState` method itself! 

In this lesson we'll explore how this works by refactoring a city map app that updates even if you choose the same map twice.

Topics

Instructors

Content Type

Nik Graf