Sign in

Software Engineer | iOS & Vapor | React & Redux | UI/UX

Create a solar system with the Canvas API using Javascript

This is what we will be creating in this tutorial:

Everything you see is done using javascript. Each planet will have its own moon that will also rotate around it. (Completly avoiding the current solar system by giving every planet just one moon).

Background

I have only been learning the Canvas API for about a week or so and have watched some YouTube videos by Chris and on his website at https://chriscourses.com/ .

Let’s Get Started

To start off, download this canvas boilerplate made by Chris. …


Using SwiftUI, create memes from a blank template

This is what we will accomplish in this tutorial

Using a public API from https://imgflip.com/api, we will pull popular meme templates and give the user the ability to enter in their desired text and adjust as necessary.

We will use Combine to fetch the results, SwiftUI to display the information, and a few custom views for the user to edit it accordingly.

We won’t cover saving the image in this tutorial, but you could still just screenshot and crop it to fit your needs.

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode…


Create a super basic implementation of the game no one knows how to play

Photo by Lorenzo Herrera on Unsplash

This is what we will be creating in this tutorial

Getting Started

Create a new SwiftUI project in Xcode. Make sure you’re running macOS Catalina (or later) and have Xcode 11 (or later) installed. (That allows you to use SwiftUI.)

Open Xcode → File → New → Project

I called mine Minesweeper, but feel free to name it whatever you’d like.

Make sure you have User Interface set to SwiftUI.


Photo by Lucas Benjamin on Unsplash

Get the average color of an image and set it as our background similar to Instagram Stories.

I recently came across this tutorial on Hacking With Swift and thought I would implement it similar to Instagram Stories but in SwiftUI

This is what we will be creating by the end of this tutorial:

Getting Started

Create a new SwiftUI Project in Xcode. Make sure you’re running macOS Catalina and have Xcode 11 installed. (That allows you to use SwiftUI.)

Open Xcode → File → New → Project

I called mine AverageBackgroundColor, but feel free to name it whatever you’d like.

Make…


Create a custom react hook to save and retrieve custom cookies used within your React App without any dependencies.

Photo by Mae Mu on Unsplash

Introduction

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

With the addition of hooks in React, it allows us to create highly customizable small pieces of reusable functionality. Some great examples of helpful hooks include:useCookie (manage custom cookies), useKeyPress (get which key was pressed by the user and update state based on that), useAuth (determine if the user has the required authentication on certain pages). These are just a…


Using the built-in microphone, sample the sound level in dB to visualize it in SwiftUI.

Photo by Icons8 Team on Unsplash

This is what we are going to accomplish in this tutorial:


Build a gradient color picker using DragGesture() in SwiftUI

Here is what we’ll build in this tutorial:


Cards and swipe gestures in SwiftUI

Image source: Brandon Lee Baars

Here’s What We’ll Build in This Tutorial

As you’ll see, only four cards are shown at all times. When one is removed, another is added to the bottom of the stack.


Learn how to build an auto-changing image carousel in SwiftUI with a Timer.

Photo by Djim Loic on Unsplash

Image carousels are a good way to display multiple photos to a user with minimal real estate on an iPhone.

This is what we’ll accomplish in this tutorial:
Every three seconds the image will switch.


Learn how to build a parallax-ed stretchable header in SwiftUI using GeometryReader, ObservableObject, and PreferenceKey.

In this tutorial, we are going to create a stretchy header that, when scrolled, will create a parallax effect that blurs as the user scrolls further. We will be using GeometryReader to get the current position of certain Views, as well as a few other SwiftUI features to make this nice looking Medium-esque style screen.

This is what we are going to accomplish in this tutorial:

Brandon Baars

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store