Learn Leaflet, Mac and Mdx

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

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

Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates. 

In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation possibilities, like git hooks, adding functions and aliases in your bash_profile, and running scheduled jobs in launchd.

For example, we’ll write a git hook that checks package.json for changes, and if there are changes, the hook runs npm install for you automatically. 

Along the way, you’ll also learn:

- more advanced bash commands like exec
- syntax such as redirecting stdout and stderr to the same destination
- timesaving tricks like brace expansions

Automation is all about saving you time — and at only 52 minutes, this course is well worth yours. Enjoy!

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Advanced Bash Automation for Web Developers

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

safari

Did you know every Mac comes with a fantastic screen reader built-in? Learn the basics for operating Voiceover with Safari, including common key commands, the web rotor, and the help menu. We'll also set up keyboard tabbing in Safari and OSX's System Preferences, two requirements for accessibility testing that occasionally trip up users. In a future lesson, we'll compare Voiceover to Windows screen readers, since they work quite differently.

#### Resources
- Apple Voiceover commands and gestures: https://www.apple.com/voiceover/info/guide/_1131.html
- WebAIM Voiceover Tutorial: http://webaim.org/articles/voiceover/

Using the Voiceover screen reader to test for accessibility

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

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

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

Interactive Leaflet Maps with GeoJSON data

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.

Installing the AWS CLI on your local workstation may be one of the biggest boosts to productivity you can make if you use AWS often. Almost all AWS features are available via the CLI allowing you to script, schedule and automate many AWS related tasks.
In this lesson, I’ll show you how to setup and verify the AWS CLI.

Installing the AWS CLI on OS X and Linux

In this lesson, we’ll learn how to change the working directory using `cd` and list a directory's contents using `ls`. We'll see how `ls`'s `-l` and `-a` flags work. 

Navigate the Filesystem in Bash

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Every programmer starting to work in a *nix environment eventually finds themselves in VIM, the default text editor. Often by mistake! Because VIM lacks the typical polished GUI of normal programs, it can be hard to discover the correct sequence of commands to even exit the program. Once you learn how to exit VIM, then the next task is to also learn how to make VIM do what you want -while- exiting!

In this lesson we cover 7 different ways of exiting VIM, whether you are in EX mode or Command (also known as Escape) mode, whether you are editing a single file or several at once.

Exit Vim

`launchd` is a robust scheduled job automation tool on macOS that allows you to schedule a task to be run at recurring times. It's macOS's take on Linux's `cron`. In this lesson, we’ll schedule a simple bash script that empties the Trash to run every Monday morning at 10am. 

First, we’ll create a plist file (a plist file is just XML) with our job configuration. In here, we’ll specify our bash script as the program to run. Then we move plist file to the `~/Library/LaunchAgents` folder. Then we’ll use launchctl to load our configuration file, which will make the job active. We'll manually activate our job to ensure it's working with `launchctl kickstart`. 

Schedule Timed Jobs on macOS with `launchd`

AppleScript is a peculiar language with a COBOL-like desire to read like English, but it's the key to automating UIs on the Mac. We'll use it together with bash to make Terminal open a new window to run any shell command.

Run a Command-line App in a New Terminal Window using Bash and AppleScript

In [the previous lesson](https://egghead.io/lessons/bash-run-a-command-line-app-in-a-new-terminal-window-using-bash-and-applescript "Run a command-line app in a new terminal window") we created a bash script that runs a given command line in a new Terminal window. Now we'll see how to use Automator to make an instance of that available as a menu item in Finder.

Turn a command-line app into a menu item in Finder

In [the previous lesson](https://egghead.io/lessons/mac-turn-a-command-line-app-into-a-menu-item-in-finder) we saved a shell script as a service for Finder. This service takes in files as arguments and opens them in Vi. Now we'll save it as a real Mac App.

Turn a command-line app into a Mac App

Smooth your workflow by opening Finder from Terminal and vice versa at a specific folder.

Jump from Terminal to Finder and back again

I can make a subfolder of the folder that is open in Finder,
but there's no convenient way to make a subfolder of amy other folder that
is showing. Let's add a Finder service to take care of that.

Create a new subfolder of any selected folder in Finder with AppleScript

Create a Finder service that takes whatever you've selected, lets you navigate to a destination folder, and moves them there.

Create a service to move items in Finder to a user-selected folder with AppleScript

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

It's very important to experience our web applications using the tools and techniques that our users are using.  Many of our users out there may have vision impairments and may use tools or adjust settings to help them see better. Learn how to change the accessibility display preferences on Mac to test your application for issues that may arise due to a lack of contrast between foreground and background colors in your web application which can be exacerbated when users have to adjust these display preferences.

## Resources
* [MacOS Display Preferences User Guide] (https://support.apple.com/guide/mac-help/change-accessibility-display-preferences-unac089/mac)

Search

Search Results