DEV Community: Joseph Maurer

What I Learned Solving A Leetcode Problem A Day For 45 Straight Days

Joseph Maurer — Sat, 19 Jun 2021 00:44:23 +0000

Being an engineer there are so many problems that I have to solve every day that you get into the flow pretty easily. But at work you are mostly solving the same type of problems on a daily basis that you forget that there are other exciting types of problems out there that require you to think differently. A great starting place is Leetcode or any other daily coding puzzle website. Let’s go over how to get started and best practices!

The Fundamentals of Solving Coding Puzzles

I think Leetcode does a great job of having daily puzzles that come out in their “Monthly Challenges”. Each month the problems start easy or medium, and progressively get harder. You have 24 hours to submit your solution for credit, after that you can still do the problem just not for any Leetcode Coins.

Step one is to read the problem and understand the example solutions that they give you. Work through the examples on paper if you have to, break down each problem into a series of steps to work toward the solution. Start thinking about potential edge cases that aren’t considered that your design needs to take into account.

Step two is to write some abbreviated pseudo code. I tend to think about this step like the high-level whiteboard coding interview. Run through the algorithm you are going to use to solve the problem. Write down any data structures that you might need and contemplate the time and space complexity. This is the easiest step to fix, but when I get stuck this is the work I refer back to to help get me back on track.

Step three is to code your test cases. Now that you have a good idea of what you need to do, write some additional tests and write your test cases in code if you are coding outside of their editor. Leetcode won’t tell you what tests failed outside of the ones they give you (maybe they do if you have premium? Not sure tbh)

Pro tip: Code in your editor. Not in the browser.

Step four is to code and iterate on your design. Just because it passes all the tests doesn’t mean it’s perfect. Think of potential optimizations or ways to make your code more flexible.

Step five is to look at what other people did and see if there is anything you can learn from their approach to the problem. There are often multiple solutions so don’t be surprised if you see something slightly different.

Consistency is Key

This might not be surprising, but the more problems you solve the better you get. That’s just how it is. Leetcode does a good job of giving you only the information you need to solve a problem and the more of these types of problems you do, the more you begin to get comfortable with understanding the prompt and planning your approach. The hope is that by doing these exercises often you will continue to grow in your programming skills so that when you have to approach a different type of problem at work, you can draw on any number of examples.

Thanks for reading this and tweet me if you have any questions!

WWDC 2021: State of the Union Recap

Joseph Maurer — Sun, 13 Jun 2021 22:53:56 +0000

Here’s a quick recap of Apple’s State of the Union at WWDC (World Wide Developer Confrence 2021). You can find the full video here.

Your browser does not support the video tag.

XCode Build

A new continuous integration and delivery service built right into Xcode and hosted in the cloud, Xcode Build is Apple’s take on simplifying the process of building an app while helping you focus on what’s important. It helps you offload your builds, test, and code signing for distribution. It publishes your result right back into Xcode’s report navigator so you never have to switch context out of where you are building your app.

One cool feature is that you can have the build notify you when it completes and publish it to your Slack or any other service. There is also a public API that you can dive into for grabbing information about your builds. I can see how building apps this way is way more integrated and convenient. This actually seems like a fun way to write tests for your app!

Code reviews also look to make massive improvements on commenting and reviewing code. The new views allow you to select between multiple ways to see what code has changed, and even view comments as you are fixing any potential bugs. Anyone who does code reviews how confusing it can get when there are multiple revisions and files removed or added to a pull request.

Swift Concurrency Support

Most developers and engineers are used to the idea of writing concurrent code as it’s such a vital part of making fast and responsive code.

Concurrency enables your apps to perform multiple tasks at the same time, which helps your apps stay responsive to user input while doing work in the background, like a weather app fetching forecast data while the user selects a city.

The problem? Swift never had native support for concurrent code, so it was unnecessarily difficult to write good concurrent code. Apple’s new approach to this is Structured Concurrency. Actors are an industry standard and are vital to safe concurrent programming.

Conceptually, an actor is an object that protects its own state by only providing mutually exclusive access. This completely eliminates concurrent access and the low-level data races that come with it.

Actors’ are now a first class citizen in Swift and have a much simpler declaration:

Another benefit is MainActor, which lets you decorate a function to always run on the main thread. This is vital for API calls that are needed for the UI.

Swift Playgrounds

This year, Swift playgrounds 4 allows you to work on your ideas wherever you go. It allows you to switch between Playgrounds and Xcode. Once you have created an app, you can even publish your app to TestFlight right from the Playgrounds app.

VR and AR Kits

You can now add cool effects to your AR objects with Custom metal shaders and dynamic textures. You can see these effects in the Birthday Cake demo with confetti falling around the object.

Metal Improvements

One thing that stood out to me as a Game Engineer is that you can now have more control over the display refresh rate. Especially if you are developing games that are going to run on the IPad Pro with ProMotion or on Macs that are connected to high end monitors, having control over the refresh rate can be useful for making your game look like it’s running smoothly!

Game controller support is also easier to add now, with haptic support. You can add a new on screen controller with only a few lines of code.

Notifications

iOS is now changing how notifications work and at what level they are delivered. Focus allows the user to select what types of notifications are delivered. There are now 4 levels of notifications: Low, Active, Time Sensitive, and Urgent. Notifications summary allows users to get a brief overview of what was delivered with some marks of relevance.

There was lots more covered, but those are the highlights that stuck out to me. Let me know what you found interesting in the comments below!

Working with Sprite Sheets in Unity

Joseph Maurer — Fri, 11 Jun 2021 21:22:14 +0000

Sprites are a vital part of working on a game in Unity. Part of that is how do you go about slicing a sprite that contains multiple images within it. I’m going to spend some time going through a basic example of how to split a sprite and hook it up to an animation 2D platform game! Let’s get started!

To start you are going to need to acquire a sprite sheet from somewhere. Here is a link to where I acquired the platform character for this project.

Once imported into Unity, you are going to need to splice the sprite. You can do this in a number of ways, but I suggest starting by seeing if Unity can automatically figure out each of the images. To do this, use automatic mode as pictured below.

Once finished, you will see a light grey box around each of the images in the sheet. Hit Apply and let Unity work the magic behind the scenes to cut each image into a usable asset. You will know it is done when you can expand the sheet and see each image appended. Something like this:

At this point, you can start making your animations for your character. In my basic example, this just involved swapping the sprites on each possible state to be the correct image.

Pro tip: Expose lots of variables within your Animator so that it’s easy to tell your player how to move!

And then you’re done! You now have an easy way to control your player in code so that you can make a cool game!

I hope this tip helps! Follow me on twitter for more tech tips!

Microsoft Build 2021: Build Cloud-native Applications That Run Anywhere

Joseph Maurer — Mon, 07 Jun 2021 16:04:59 +0000

ICYMI (In case you missed it); last week was Microsoft’s Build event! The yearly event is a chance for developers to learn new things that are going on in technology. The reason I love listening to these types of events is because it gets you excited about the happenings in the industry.

One of the talks that stood out to me was on the challenges that modern developers face like needing to move from concept, to code, to cloud seamlessly. Needing this type of agility, reliability, and security is critical when trying to solve problems at scale. Cloud native is the ability to package application code and dependencies into a container, to deploy as a microservice and manage using DevOps.
< Insert typically CI/CD pitch here >

Source: Microsoft

Part of this talk sounds like a marketing pitch for Azure, but I think that the underlying technology is actually really exciting. Jeff Hollan gives a good demo (around 8:25) about attacking a real world problem. The dashboard that he builds utilized Github’s App Templates. It lets you launch a sample and launch a code space that automates a lot of the initial setup of the project.

“Rather than me spending the next 30 minutes installing tools and configuring my machine, instead everything I need is ready to go right here in this codespace.” - Jeff Hollan

Azure Arc allows you to deploy anywhere without the need to have to learn Kubernetes and have a bunch of overhead. The integration with Github Actions and other workflows is going to be a time saver forsure!

I highly recommend watching this session if you have the time!

Click Here to Watch the Video

Let me know what your favorite session of Microsoft Build was!

OOP: Object Oriented Programming

Joseph Maurer — Fri, 04 Jun 2021 01:28:58 +0000

Object Oriented Programming (OOP) is a programming paradigm that is the cornerstone of modern software development. While OOP isn’t the only programming paradigm that exists, I would argue it is the most important to have a firm foundation of, and when used correctly, can lead to stronger and more robust software. But what is OOP and how can you make sure to understand it well? Let’s explore.

High Level

At a high level, in OOP there are 3 main pillars to understand for getting OOP down:

Encapsulation with classes
Inheritance
Polymorphism (the most important by far)

Encapsulation

Encapsulation is the ability to enclose data that describes the object and the functions used to manipulate that data into one module container.

In OOP these are typically called classes and are at the center of the paradigm. The resulting variable when the variable is declared is called an object. An important part is abstraction so that only necessary features are exposed.

Private/Internal: Methods and properties are accessible from other methods of the same class. Anything outside of the class shouldn’t be able to access these members/methods. This is typically denoted by Private or Protected.
Public/External: Methods and properties are accessible from outside the class.

An example would be if you were programming a card game. In your card dec class, would you want someone else to modify the number of cards in the deck? Probably not.

Inheritance

Inheritance is the ability to take an existing class and extend its functionality to form another class.

Why is this important? Because it supports reusability with code reuse. This is because the new class has access to all of the parent functionality. The child class just needs to add new attributes and methods that are specific to its needs.

Generalization is the relation such that the subclass is a variation of the parent. I.e. a pickup truck “is-a” automobile.
Specialization is the relationship such that the class “has-a” subclass. I.e. an automobile “has-a” engine.

Polymorphism

Polymorphism is the ability of similar objects to respond differently to the same message.

The final pillar of OOP is closely related to inheritance and yet is arguably far more important. The prefix poly means many; morph means form. Polymorphism then refers to the ability of a single type or class to take many forms.

How is this done? With method overriding:

In the example above, you can see that both the electric car and the pickup truck inherit from Automobile and both override the Start behavior since both have vastly different needs. An electric car doesn’t need to start an engine while a pickup truck would (assuming it’s of the gas variety).

Key Takeaways

Well designed objects manipulate the data or state of an object by passing messages through the object’s interface.
1. Controlling an object through its interface guarantees it behaves in a safe manner and that the internal state remains valid.
The ability to model the real world is an important advantage of OOP.
Objects must be self-contained so that they can stand on their own.

OOP isn’t the only programming paradigm out there. Can you name any others? Follow me on twitter for more programming posts!

Exploring Shader Graph in Unity

Joseph Maurer — Tue, 01 Jun 2021 19:43:04 +0000

There is something that you realize really quickly when you start programming games, and it’s that materials are coded differently than anything else. They work almost in mysterious ways that can often be hard to describe and the code is often very dense c style code that doesn’t shed any light on how or why something works the way it does.

Enter Shader Graphs, Unity’s latest attempt to help alleviate some of the mystery and confusion around how shaders work. This feature is recently out of preview and has a wide array of features that aim to shift how shaders are made. Before, you made shaders with code, now the hope is that you make shaders with graphs like the one below:

Want to follow along? Here is a link to the sample project!

So if shaders are for programming materials, why is it so hard? Because you are writing low level code that the GPU needs to take and determine how in the world this object is going to look. It’s a complicated process but the benefit is that you are not taking up valuable CPU time with compute heavy tasks that are often needed to determine how something is going to look (i.e. shiny, dull, transparent, etc).

Shader Graphs allow the coder to visually assemble the “graphical elements” that manipulate the end properties of how something is going to look. In the video, we look at the basics of what a node is, how to connect them, and how to find the documentation around each possible node. We also go over some of the new features in Shader Graphs since there have been some changes since the project is now officially supported.

Pro Tips

Make sure you have Shader Graph included in the project
To make sure that you can use Shader Graph, go to Window -> Package Manager and make sure that Shader Graph is included in the project Resources.
Quickly get to the documentation for what a node does.
When looking at a node it might be hard to exactly tell what this black box does when computing. To quickly go to the documentation, Right click on the node and hit ‘View Documentation’. It will bring up a Unity page with relevant information.
Use Sticky Notes and Groups!!
One of the newer features is that you can add sticky notes and groups of nodes to help organize your graph. It massively helps anyone looking at your graph later to understand how something is working. In the example below, you can see a ‘Grass Mask’ group that has a sticky note attached to it.

Follow me on Twitter for more tech articles!
// Detect dark theme var iframe = document.getElementById('tweet-1398070641153253377-495'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1398070641153253377&theme=dark" }

Getting a URL Parameter in Javascript

Joseph Maurer — Mon, 31 May 2021 22:39:47 +0000

When programming in Javascript there are times when you might want to know if there were any parameters passed through the URL. In case you aren’t familiar with URL parameters, they are the arguments set after the base URL and the ‘?’. For example let’s look at the below example:

www.josephamaurer.com/RecentDevPosts.html?PerPage=100

'?PerPage=100' is the first parameter that is passed with this URL. It’s up to your javascript logic to grab this parameter’s value and use it appropriately. So can there be multiple parameters? You betcha! Additional parameters are added with the following syntax:

www.josephamaurer.com/RecentDevPosts.html?PerPage=100&Page=2

‘&Page=2’ is the second parameter that is with this URL. At this point you might be wondering what are the limitations of passing arguments like this? Well the obvious one is that you can’t have any spaces. Another is that the ‘#’ character is reserved for jumping to a section of a document. Generally, URL Encoding is used to deal with this problem and make any text safe to pass in the URL. Internet Explorer (RIP) had a maximum length of 2,083 characters. Although, the RFC 2616 spec says that servers need to be able to handle any number of characters, you do risk a web server failing to respond if the request is too long. I highly recommend looking at the Google Chrome guidelines if you plan to do this on a production project.

Web Forms

The most common use of these query strings within a URL is web forms. When a user hits submit on a form, their responses are posted in the URL for processing by the backend. In this tutorial, we’ll focus on just grabbing values from that URL for processing, but there are plenty of examples of using this on the backend.

URL Search Params

When using javascript to parse the URL, it is easiest to use URLSearchParams instead of trying to parse the string yourself. You could use regular expressions to try to do this, but as I wrote earlier this is a terrible idea. So let’s look at the example below and see how this works.

As you can see, grabbing the params is actually a really straightforward process. You can very easily query to see what objects are present and check if they are null or an actual value first before using them. At the time of writing this, browser support is very good and is available to use almost everywhere.

Live Example

Building on my last video post, you can now pass parameters to my example page to play with the number of posts that it returns.
Live Example

Let me know if you end up having a use for this method and happy coding 😊

Exploring DEV.to API

Joseph Maurer — Fri, 28 May 2021 00:02:12 +0000

You often forget that APIs exist for most of the platforms you use. While some companies lock down their APIs to only provide very limited information, DEV.to goes the extra mile to provide an extremely robust API. Let’s go over what is available!

Link to Project: https://www.josephamaurer.com/Projects/DevAPI/RecentDevPosts.html

Link to DEV API Documentation: https://docs.forem.com/api/

DEV’s API allows for lots of interesting functionality. In the video above, I go over a use case where you pull the latest 100 posts, and create bootstrap cards for each. In each card I display three buttons. The first is either active or disabled if the user has a twitter account. This is useful because I like to retweet articles and tag their creators. The second button is a link to the DEV post. Finally the third button opens the API response for the article.

While my example showed articles, there are lots of different things that the API can return to you. One of the more interesting functionality is the ability to post an article completely from the API. I have no idea why you would want to do that, but it could be useful.

All in all, it’s cool to think that this functionality exists, even if you can’t find a practical use case for it. One of the more useful use cases might just be populating your recent articles from your blog to your website.

Let me know what you would want to do with this API!

Unity's C# Job System

Joseph Maurer — Tue, 25 May 2021 04:54:42 +0000

There are times when you need to take full advantage of every ounce of performance possible to make your dream game a reality. Enter the Job System in Unity. It allows the developer to write multithreaded code that can still interact with the rest of Unity.

What is multithreading?

Multithreading allows the program to run faster by taking advantage of the CPU’s ability to process many threads at the same time across multiple cores. Typically this means that a main thread spawns several other threads that in turn performs work. The problem with this is that games tend to spawn a ton of threads. So much so that the overhead causes the CPU to run less efficiently. So how do we solve this issue? You get a Job.

What is a Job?

A Job system is a group of worker threads that are being executed across multiple cores of the CPU. This allows you to save resources from having to perform context switching. The Job system operates on a Job queue where a worker thread takes an item from the queue and executes it. It does all of this while making sure to execute this in the appropriate order so that issues don’t arise. Not all Jobs have dependencies, while others do so throughput can depend on the input and dependencies associated with them. The best part? Unity’s C# Job system detects all potential race conditions and protects you from them. How sweet is that?!

Simple Jobs Example

To create a job in Unity, you need to implement the IJob interface. This interface allows you to define a struct that has parameters and an execute function. In the example below, we define a job that adds two numbers together and returns the result in an array.

Once you have the job, you need to schedule it to run in the main thread. Notice how we allocate space for the result array and then destroy it after we are done with it.

While this might seem like a very rudimentary example of Jobs, there is actually a lot you can do with them and they do provide an extreme speed benefit! Watch this video from GDC 2018 for more

Tweet me if you’ve ever used Jobs before and what you did with them!

Tabs Versus Spaces: Defining a Coding Standard

Joseph Maurer — Mon, 24 May 2021 06:05:27 +0000

Writing clean and maintainable code is pivotal to any production project. And yet even the most functional code is frowned upon if it doesn’t follow the coding standards that a company sets. A good engineer knows that any big changes need to go through a code review before being merged into the mainline. Yet the most frequent comments made in those types of reviews are often about violations of any coding standards (not the functionality). So why do we care so much about coding standards? Do people really debate tabs versus spaces?

Defining a Coding Standard

Why is a coding standard important?

It creates a consistent look across the entire code base.
Enables readers to understand the code more quickly.
Easier to maintain the code base during merges.
Easier to check for following best practices.

Most of the time when working at a company they already have a coding standard provided that hopefully is written in a way that is easy to understand. But let’s say you are starting a pet project that you plan to open up to the community as open source. What standard do you follow and how do you communicate it to the people that will hopefully be contributing? Well you don’t have to reinvent the wheel. There are plenty of pre-made coding standards out there. Here is a list of some of the good ones I found:

Tips for Following the Standard

I really only have one tip for helping to follow a style guide. Make it impossible to fail. Setup your IDE so that it yells at you every time it finds something that violates the standard. Is that super annoying when you’re just trying to get the code to work? Absolutely, but it is also the only way that you will learn to conform to the standard. Plus some of the rules are annoying.

Follow this tutorial for how to add your coding standard to your IDE

Pro tip: Most standards define a max number of characters per line. Setup your editor to display a vertical line at that mark like the line on the right in the screenshot below:

Tabs Versus Spaces?

The answer is spaces. Why? Because…. It just is. Honestly, I’m fine with either. Just never mix the two. Be consistent.

So do you follow a written coding standard or any standard convention? Let me know in the comments below!

Best IDEs

Joseph Maurer — Sun, 23 May 2021 06:28:19 +0000

There are tools to every trade and writing code is no different. I’ve posted in the past about the best code diff tools, but that’s only a small part of the equation. Arguably the biggest part of the job is which IDE are you using. IDE stands for Integrated Development Environment and it handles a lot more than you would think. Apart from the basics of file management, a good IDE should prioritize helping you write good code fast. Any basic text editor can help you write text, but an IDE is more about the bundle of tools that accompanies it.

Old School: VIM

What is beloved and also hated by the same amount of people? Vim. Known for it’s complicated command interface to know when typing versus running commands, Vim provides extremely powerful text editing capabilities for those who know how to use it.

GOAT: Visual Studio

This is the elephant in the room. Visual Studio has dominated so much the code editing space for so long that it’s hard to ignore. And with the introduction of Visual Studio Code, the offering are stronger than ever now. It’s hard to even put all of the offers that visual studio has into words, but you miss the feature set when you go to other editors. In particular, I think that visual studio has the best debugger of any IDE out there. It’s just super intuitive and allows you to fly around the stack trace super easily.

Underdog: Atom

Atom is a hackable text editor for the 21st century, built on Electron. From the GitHub team (which is owned by Microsoft now right?) comes an extremely versituatly and lightweight IDE. Before Visual studio code came out, Atom was my go to option for a lightweight editor that was also cross platform. It allows extensions that allow you to customize almost everything about your experience. It also has an extremely deep community around it so it’s known for being reliable and friendly. If you’ve never used it before, I highly recommend checking it out!

All in all, which is your favorite IDE? Are there any IDEs that you think should be on this list?

Adding Snapchat’s Bitmoji to your website

Joseph Maurer — Sat, 22 May 2021 02:50:01 +0000

Emoji’s and personalized avatars have become the new normal in messaging and social media platforms. Back in the bay, ascii emoji’s were all the rage. Some examples are:

:)
:P
:D
;)

In case you’ve never heard of it, Bitmoji is a service that came out of snapchat that allows you to make a virtual avatar that looks like you. With hundreds of personalization options you can really customize it to your liking. One cool aspect is that they are always adding new clothing options that spice up your person.

Bitmoji also launched Bitmoji for Games in 2019 that allows developers to insert your player’s bitmoji into your 3D game. While I’ve never seen a game do this, it is definitely a cool idea!

Messaging with emoji and your personalizing your avatar is a fun way to keep things interesting when texting or sending someone money on Venmo. That’s why I thought it would be a cool idea to add my bitmoji to my own personal portfolio website!

Check out the final result here!

Download the Bitmoji app

The first step is really straight forward, head over to the app store of google play store and download the bitmoji app. Unfortunately, it doesn’t look like there is currently a way to setup a bitmoji on desktop :(

Setup your avatar

This is the fun part, go ahead and customize your avatar to your liking! Apart from just facial shape, eye color, and hair color you can also pick you outfit.

Export Stickers

Once you are happy with your bitmoji, go ahead and head over to the sticker tab of the app (bottom left) and start searching for stickers that you would want to appear on your website.

Once you find one, tap on it to bring up the share sheet. Hit ‘save Image’ to save a png to your phone.

Coding Bitmoji

Once you have 5 or 6 random sticker that you want to show up on your website, go ahead and add them to your project structure. The code below, picks a random element from the array and sets it as the image source:

And there you go! You have successfully added your Bitmoji to your website!

Give this a shot and let me know if it works for you!