Learn Canvas, Go and Mdx

Go is a server-side language, but today we can compile Go code to WebAssembly as well - making it possible for us to bring programs written in minimalistic Go code into the browser!

With this collection, we will learn how to compile and run Go WebAssembly programs in Node.js and the browser, and how our Go code can interop with JavaScript and manipulate the DOM. We will also talk about configuring our VS Code workspace and optimizing the Go WASM binary size.

Go is an open-source programming language that makes it easy to build simple, reliable, and efficient software.

WebAssembly with the Go Language

This collection of lessons will cover a variety of topics that teach you how to work with slices and arrays in go. You'll learn how to declare them, create them using literal syntax, iterate over them, add to them, remove from them and other useful things.

Learn about slices and arrays in Go

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

A <canvas> element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

canvas

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

Canvas Effects

With the HTML `canvas` you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

Drawing Text on Canvas

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

Animating with Canvas

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

Gradient Fills on the HTML5 Canvas

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

Canvas Transformations

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

Listening for Mouse and Keyboard Events with HTML Canvas

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about `<canvas>`, and get ready to start drawing.

Introduction to the HTML Canvas element

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

Drawing Paths - Lines and Rectangles

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

Drawing Paths - Curves and Arcs

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

Drawing Styles on HTML5 Canvas

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

Canvas and Pixels

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

HTML Canvas and Images

The `canvas` element exposes a 2d context which allows you to draw lines using the `moveTo`, `lineTo`, and `stroke` api. You can combine this with Mouse events to make a simple drawing app.

Draw with Your Mouse on an HTML Canvas

Golang has no built-in function(s) to filter an array. This lesson will teach you two different ways to filter.

The first is to create a separate array and add the filtered elements to it. This works great, but doesn't use memory as efficiently as the second way.

The second way shows you how to filter by altering the original array in place without making another array to hold the filtered elements. But, it has a side-effect that I'll tell you about which may help you decide which approach you will use to filter your array. 

Filter an Array in Go

There are numerous ways that you can declare and create arrays and slices in Go. This lesson will show you several and I talk about the advantages and disadvantages of one over another. After watching, you will better understand all of the possible ways you can declare/create as well as the idiomatic way.

These include:

* var
* the built-in function *new*
* the built-in function *make*
* Array and Slice literals

While it is not the main intent of this lesson, I do touch on some of the differences between slices and arrays.

Checkout the code in my [github repo](https://github.com/JeffBNimble/GoLessons/tree/master/Array-Declare).

Declare Arrays and Slices in Go

Go has a special indexing syntax that forms the basis of removing one or more elements from a slice. I will teach you this syntax and show you its various forms.

Based upon that, I'll show you how to remove a single element from a slice. However, you may find this somewhat limiting. I also will show you a more typical example of removing elements from a slice as we iterate over it. This technique shows you how to remove multiple elements from a slice.

Remove Elements from a slice in Go

There is a built-in append function that is used to append elements to a slice. We'll see in this lesson that the append function works only with slices, not arrays. There are also some nifty alternate uses of the the append function that make appending super easy.

Checkout the sample code in my [github repo](https://github.com/JeffBNimble/GoLessons/tree/master/Array-Add).

Append Elements to a Slice in Go

There are a couple of different ways to iterate over an array or slice in Go. The primary approach is to use range, which handles the iteration for you. However, you can also use a traditional for loop if you need to do something out of the ordinary, like iterating in reverse or skipping every other element.

Search

Search Results