Learn Jasmine, Leaflet and Serverless

In this course, Colby is going to do a deep dive into creating a full store for your products. You'll learn how to set up and use GraphCMS as your content management system. You'll learn about the Cloudinary UI extension and how to use it to host your images. You'll learn about Snipcart and using the useSnipcart hook to handle the cart state and the checkout. You'll learn how to implement Stripe as your payment gateway. And lastly, you'll learn how to deploy a Next js app to vercel from github with environment variables.

snipcart

Ecommerce Product Management & Storefront with GraphCMS, Snipcart, & Next.js

Starting from a prebuilt frontend, Jason Lengstorf guides you through the creation of a "Corgi Up-boop App" that uses Netlify Functions and Hasura. You can view [the deployed final product on Netlify](https://egghead-serverless-functions.netlify.app/).

You'll set up the Netlify CLI, and configure a local development environment before writing and deploying functions with a few different use cases.

The first example function bypasses CORS restrictions to retrieve corgi data from an example third-party API.

Next, you'll configure environmental variables to securely communicate with the Unsplash API without exposing private keys to the client.

Serverless functions don't persist data by themselves, so we will use  Hasura to create a GraphQL API for tracking the number of "boops" each corgi receives.

This course is an excellent illustration of the speed of Serverless functions, and how fast you can implement functionality in your web applications.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Build a Corgi Up-boop Web App with Netlify Serverless Functions and Hasura

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

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

Build Maps with React Leaflet

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

Create a serverless application and deploy it in under thirty minutes!

We'll be using Netlify, Vite, TypeScript, and React in our project. This stack synergizes extremely well for rapidly developing professional-quality applications. 

If you haven't heard of Vite, it's the French word for quick! It's also a build tool that consists of a dev-server and an extremely fast bundler. It makes for a rapid development loop.

As for the rest. Netlify makes hosting fast and easy with serverless functions and continuous deployment. React enables you to quickly create reusable components. And TypeScript helps you write cleaner code that is easier to refactor. 

So get started and learn how to use this stack in your own applications!

Deploy a Serverless API React Application with TypeScript

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

In this lesson Trevor looks at testing AngularJS controllers with scope inheritance with Jasmine and test spies.

Testing Controllers With Dependencies

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

Leaflet makes creating maps in the browser *dead simple*. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

Get Started with LeafletJS Mapping

Custom Jasmine Matchers are a great way to keep your AngularJS Unit Tests clean and tidy. We want to make expectations **readable** and express the intent of the test. Custom matchers help to accomplish this.

Custom Jasmine 1.3 Matchers

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

Adding Shapes to Maps with Leaflet and GeoJSON

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

Unit testing a React component using Jasmine and Webpack

AngularJS provides helpers for convenient testing of your application. In this lesson you will learn how to test a basic controller with Jasmine and Angular.

Testing a Controller

In this lesson John shows some tricks for speeding up your test suite. He digs into some handy features of WebStorm, including the *ddescriber* plugin, as well as some alternative methods for Jasmine for selectively running your tests.

Speed Testing with WebStorm and Jasmine

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

Interactive Leaflet Maps with GeoJSON data

One of the beautiful things about dependency injection in your AngularJS apps is the ability to replace dependencies in your unit tests. In this lesson Trevor looks at how to configure Jasmine spies as injectable replacements for dependencies for testing.

Inject Jasmine Spies With $provide

Testing is a first class citizen in AngularJS. It is at its heart and soul. This lesson demonstrates using Karma to write a simple unit test for a Filter.

Unit Testing AngularJS

Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.

Reloading React component tests using webpack-dev-server

Using Jasmine, this lesson will look at testing an AngularJS service.

Testing a Service

In this lesson, you will learn how to add a map to your React application using React Leaflet. We will walk through importing and configuring the Map and TileLayer components from React Leaflet to set up the new map.

Create a New Map using React Leaflet

In this lesson, you will learn how to add a Marker and Popup component to a Map when using React Leaflet. We'll walk you through importing the components and adding each one to the Map. Additionally, we'll resolve an issue with loading marker images that's inherent to creating a new React Leaflet map in Create React App, which we'll fix by manually importing the image from Leaflet and configuring those images to the marker.

Add a React Leaflet Marker with a Popup to a Map

In this lesson, you will learn how to add the Polygon and Circle shape components to a Map when using React Leaflet. We'll walk you through importing both components, adding each component to the Map, and setting a unique color for each shape.

Add Shapes to a Map in React Leaflet

In this lesson, you'll learn how to style shapes on your map to change the look and feel using React Leaflet's API. We'll use React component props like color and weight on our shapes to change the colors and styles.

Search

Search Results