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:

Image for post
Image for post

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

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 12 installed as we will be using parts of the iOS API that are only available in iOS 14. …


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

Image for post
Image for post
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.


Image for post
Image for post
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 sure you have User Interface set to SwiftUI. …


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

Image for post
Image for post
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 number of useful and reusable hooks that you can create. They allow state to be stored and managed from within. …


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

Image for post
Image for post
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

Image for post
Image for post

Here is what we’ll build in this tutorial:


Cards and swipe gestures in SwiftUI

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post

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:

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