DEV Community: Juan Alejandro Morais

Hacktoberfest: How I Bundled & Published A VS Code Extension With Webpack And Azure DevOps

Juan Alejandro Morais — Tue, 29 Sep 2020 21:46:03 +0000

During last year's Hacktoberfest, I decided to make a small, achievable extension for VS Code. It was a good way to learn TypeScript, work with people on Github projects, and most importantly: have fun!

The extension is called Light Switch — It is a time based, light/dark theme switcher. When I published my first series of commits to get started, I also wrote a post about it on DEV. I was sure this would help me get traction and a small following of people that would hopefully be willing to contribute in one way or another:

Hacktoberfest: Let's build a VS Code Extension

Juan Alejandro Morais ・ Oct 16 '19

#hacktoberfest #opensource #vscode #typescript

The post was well-received, and it got the traction I wanted. Once the rush came down, I still needed to figure out how to:

Create tests.
Bundle the extension.
Publish the extension.
Set up a Continuous Integration (CI) pipline.

Here's how I achieved it.

Writing tests 📝

If you're writing software, writing tests is an awesome way to ensure it will work. Since I did not have much time or experience with TypeScript, I made sure to focus my tests on the theme swapping logic:

Make sure the themes stay as day/night according to their times
Ensure a default "fallback" theme could be chosen if there was an error

Since my logic mainly involves time, I focused on time conversions. This is an example of the tests I added:

import * as assert from 'assert';
import * as dayjs from 'dayjs';
import { canSwitchToNightTheme } from '../../util/date';

suite('Date Test Suite', () => {
    test('Setting time through the extension', () => {
        assert(!canSwitchToNightTheme('17:00', '16:00'));
        assert(canSwitchToNightTheme('17:00', '17:00'));
        assert(canSwitchToNightTheme('17:00', '17:01'));
        assert(!canSwitchToNightTheme('17:00', '00:00'));
        assert(canSwitchToNightTheme('17:00', '24:00'));
        assert(canSwitchToNightTheme('17:00', '23:59'));
    });
});

Basic assertions, check!

Bundling the extension! 🚀

I'm sure many of you have a love/hate relationship with webpack. Yes, it's great, and also painful. Luckily, Microsoft has excellent documentation on how to bundle a VS Code extension - yay!

Handling dependencies

1. npm uninstall vscode
2. npm i --save-dev webpack webpack-cli ts-loader vscode-test
3. npm i --save-dev @types/vscode@1.37.0

Remove the vscode dependency, as it has been superseded by vscode-test — This will ensure your tests run on the Azure DevOps pipeline.
Installed the required basic dependencies
Added @types/vscode@^1.37.0. Depending on the version of your vscode engine, you will have to specify it as @types/vscode@ENGINE_VERSION.
Removed the postinstall script of package.json. It is not needed anymore.

Creating the Webpack configuration

With this configuration, builds will be (by default) output into the dist/ folder at the root of the project. Nothing too fancy here!

//@ts-check

'use strict';

const path = require('path');

/**@type {import('webpack').Configuration}*/
const config = {
    target: 'node',

    entry: './src/extension.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'extension.js',
        libraryTarget: 'commonjs2',
        devtoolModuleFilenameTemplate: '../[resource-path]'
    },
    devtool: 'source-map',
    externals: {
        vscode: 'commonjs vscode'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'ts-loader'
                    }
                ]
            }
        ]
    }
};
module.exports = config;

Adjusting the extension configuration files

package.json

I added a step called test-compile so it can compile our source for tests (Read why on the next section)

"scripts": {
  "vscode:prepublish": "webpack --mode production",
  "compile": "webpack --mode production && npm run test-compile",
  "watch": "webpack --mode development && tsc -watch -p ./",
  "test": "node ./out/test/runTest.js",
  "test-compile": "tsc -p ./",
}

launch.json

Even though the webpack build points to the dist/ folder, tests are compiled to the out/ folder, which means we have to compile the app (Refer to the test-compile command of package.json. Luckily, this can be specified on the preLaunchTask, so I made sure it ran test-compile.

"configurations": [
  {
    "name": "Run Extension",
    ...
    "outFiles": ["${workspaceFolder}/dist/**/*.js"],
    "preLaunchTask": "npm: watch"
  },
  {
    "name": "Extension Tests",
    ...
    "outFiles": ["${workspaceFolder}/out/test/**/*.js"],
    "preLaunchTask": "npm: test-compile"
  }
]

.vscodeignore

Getting this one right was a bit difficult, here's why:

You have to exclude node_modules. The caveat: If you have a dependency (not devDependency), you will have to include it. I had moment as a dependency, but was able to swap it for dayjs, even as a devDependency. Woosh!

As a general rule, ignore everything that is not the source of the app (including icons/images your app uses).

# folders
.vscode/**
.vscode-test/**
src
out
node_modules
**/tsconfig.json
**/tslint.json
**/*.map
**/*.ts
*.vsix

# Specific files
.gitignore
webpack.config.js
CONTRIBUTING.md
package-lock.json
.prettierrc

# Special exclusions
images
!images/icon.png

Making sure it runs!

I had to make sure my builds were compiling. By running npm run compile and npm run test-compile, they succeeded!

Publishing the extension ☁️

The only dependency I needed was a global one: npm install -g vsce. vsce is a CLI for managing VS Code extensions.

Interestingly, this was the easiest part. I had to create an Azure DevOps organization, and I followed every step of this tutorial.

When creating the marketplace publisher, I was prompted for my Personal Access Token, which I generated following these steps.

My strategy for publishing would be:

Publish it first using vsce publish so the app was live
Set-up a Continuous Integration environment to automate the following deploys.

Making sure it runs!

The cool thing of all this, you can install your builds locally! This is different to debugging your build directly from the Launch menu because it emulates the flow of downloading the build directly from the marketplace.

The command vsce package triggers the vscode:prepublish script from package.json configuration. A .vsix file will be created at the root directory. Install the extension by running code --install-extension extension-name.vsix. Replace extension-name for the file generated by vsce package, i.e. light-switch-0.1.0.vsix.

Continuous Integration (CI) 🛠

Once my extension was live, I had to implement the most important part: a CI pipeline. This is a great DevOps practice, as it automates all your builds, and runs your tests on new changes - This ensures new code won't break the app before being able to merge it into the master branch.

You can have a look at my pipeline build summary.

Here are some key takeaways I learned:

Before setting up any CI pipeline, make sure your app works locally, and that every command behaves as intended.
You don't have to know how to use YAML files to set up a working pipeline. Microsoft offers many templates to get started with.
Azure DevOps allows you to build and deploy without having to create any artifacts/releases - This is awesome, and it saves a lot of time!

Setup

azure-pipelines.yml

# Builds from every branch, and tag.
trigger:
  branches:
    include: ['*']
  tags:
    include: ['*']

# Machines that it builds to
strategy:
  matrix:
    linux:
      imageName: 'ubuntu-16.04'
    mac:
      imageName: 'macos-10.13'
    windows:
      imageName: 'vs2017-win2016'

# Takes in the machines specified in the strategy.
pool:
  vmImage: $(imageName)

steps:
# Installs Node.js
  - task: NodeTool@0
    inputs:
      versionSpec: '8.x'
    displayName: 'Install Node.js'

# Installs an X virtual framebuffer (https://en.wikipedia.org/wiki/Xvfb).
# Only required for running the VS Code in the Linux machine.
  - bash: |
      /usr/bin/Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
      echo ">>> Started xvfb"
    displayName: Start xvfb
    condition: and(succeeded(), eq(variables['Agent.OS'], 'Linux'))

# Run yarn (Install dependencies) and run the compile script.
# It also runs the tests and stops the pipeline if one test fails.
  - bash: |
      echo ">>> Compile vscode-test"
      yarn && yarn compile
      echo ">>> Run integration test"
      yarn && yarn compile && yarn test
    displayName: Run Tests
    env:
      DISPLAY: ':99.0'

# Publishes the extension to the marketplace.
  - bash: |
      echo ">>> Publish"
      yarn deploy -p $(VSCODE_MARKETPLACE_TOKEN)
    displayName: Publish
    condition: and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'), eq(variables['Agent.OS'], 'Linux'))

And here we have it!

The last build had an error while building with Windows, but it was able to deploy the latest changes using the Linux image. See the build output.

Notes

A YAML configuration can run as many commands as you want. Think of every - bash: | entry as a set of new commands that will run in a specified batch. It can execute bash commands i.e. ls, pwd, echo, etc.

The last step, which publishes the extension, passes in a $(VSCODE_MARKETPLACE_TOKEN) variable. This is the Personal Access Token (PAT) we defined earlier on the Publishing section. If my variable was named secret, then the script would run yarn deploy -p $(secret).

The last build step has a condition: and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'), eq(variables['Agent.OS'], 'Linux')). This conditrion tells our pipeline to deploy with builds that meet the following requirements:

The building machine's OS is Linux (In my case: Ubuntu 16.04).
The commit has a git tag.
- I solved my tagging by using Semantic Versioning via npm version command, i.e. npm version major/minor/patch. This is convenient because it updates the package.json version, and makes a commit with a tag:

It's a wrap! 🌯

The entire process did not take long, but figuring out the CI pipeline was the most complex part by far. Thanks to Microsoft's well-written documentation, I was able to put the pieces together.

Check out the official guide.

Share your thoughts!

Have you published a VS Code extension? If so, how was your process? I'd love to learn about your experience!

Photo by Pierre Châtel-Innocenti on Unsplash.

Creating A Gatsby Portfolio That Shows Your Instagram Posts

Juan Alejandro Morais — Mon, 02 Mar 2020 23:08:00 +0000

I created my first Gatsby Portfolio Starter. It shows the latest Instagram posts from any user via the Instagram API, and implements Base Web, the Design System built by Uber.

Click here for a live demo 🚀

In this post, I will show you how I quickly prototyped and built this starter. I will give you tips & tricks, caveats to look for (with their workarounds), and how you can get started with your starter (See what I did there? 👀)

Click below to see the repository.

timrodz / gatsby-starter-instagram-baseweb

🎢 A lightweight, minimalist Gatsby starter for creating Instagram-based portfolios.

❓ What is Gatsby?

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. There are lots of plugins and starters, which are like themes you can build and hack on top of, and the community is simply amazing — How great!

I have been toying around with Gatsby for over a month now. I re-designed and re-built my portfolio with it, and I'm also building a portfolio for a friend, who is a freelance photographer. This was the perfect opportunity to dive deep with Gatsby!

🤔 How does it work?

Creating this starter was unsurprisingly easy - I say this due to nature and learning curve provided by Gatsby. For context, I am a beginner with web technologies.

Finding the right template

I chose to begin using the Gatsby Default Starter. It's production-ready and is considered the vanilla starter for Gatsby. Great to learn and build upon!

Connecting to Instagram

The main feature of this website is that it can fetch and display Instagram posts. Luckily for me (and you), Gatsby has an Instagram starter! It's incredibly easy to set up and offers two ways to get started.

Public Scraping

The Instagram API offers an option to scrape up to 12 posts from any public profile. This will be the option we're going to use.

{
  allInstaNode(sort: { fields: timestamp, order: DESC }, limit: 12) {
    edges {
      node {
        id
        caption
        localFile {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}

Scraping using an API Token

If you want to scrape historical posts (Beyond 12), you will need credentials to authenticate with. Get started here.

This query will show us the latest 12 posts for our Instagram account, along with the id (Will be used for redirecting to the original post), caption and localFile, which contains the data required to show our image.

Choosing a design system

After that, I was looking at design systems, because I wanted to create and iterate on a prototype with the least amount of setup. That's when I found Base Web, a design system created by Uber. The lightweight and minimalist approach to design made it perfect for this example.

Features:

Robust components out of the box. From Date Pickers to simple blocks.
Styletron for styling. It uses a CSS-in-JS approach.
Extensibility through the Overrides API and configurable Themes.
Built-in Accessibility.
Great performance thanks to the Styletron engine.

Making responsive elements with BaseWeb is very easy. Here's how you would create a flexible grid that contains and shows images:

const Gallery = () => (
  <FlexGrid flexGridColumnCount={[1, 2, 3]}>{renderImages()}</FlexGrid>
);

You will see flexGridColumnCount is surrounded by an array: [1, 2, 3]. This handles breakpoints automatically:

Small screen size: flexGridColumnCount = 1
Medium screen size: flexGridColumnCount = 2
Large screen size: flexGridColumnCount = 3

Before you start

There is one caveat we will have to get out the way: Gatsby uses hydration, meaning it is Server-Side-Rendered (SSR) to static content with a React runtime. If either code you use, or a plugin access variables such as window or document, you will have some trouble when building the app.

Let's image this is our app's entry point:

import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, styled } from 'baseui';
import * as React from 'react';

const engine = new Styletron();

export default function EntryPoint() {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <h1>Hello!</h1>
      </BaseProvider>
    </StyletronProvider>
  );
}

Looks simple, right? It even works via gatsby develop. The problem lies when building the app via gatsby build, as it will throw an error saying document is undefined, pointing to the styletron-engine-atomic package. Bummer! Or, is it?

If you point to the code that is breaking, you will indeed see that styletron-engine-atomic is accessing the document element, and this is an important part of understanding Gatsby's ecosystem. These elements only live inside the browser.

To fix this issue, we can wait until we're in the browser and then load styletron-engine-atomic. With the magic of React hooks (useEffect and useState), we can tell our app to import the library once the component mounts, meaning we are inside a browser.

import { Provider as StyletronProvider } from 'styletron-react';
import { LightTheme, BaseProvider, styled } from 'baseui';
import * as React from 'react';

export default function EntryPoint() {
  const [engine, setEngine] = React.useState(null);

  React.useEffect(() => {
    // Once the `styletron-engine-atomic` library imports
    // We will grab its content and create a new client through it
    import('styletron-engine-atomic').then((styletron) => {
      const clientEngine = new styletron.Client();
      setEngine(clientEngine);
    });
  }, []);

  if (!engine) return null;

  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme={LightTheme}>
        <h1>Hello!</h1>
      </BaseProvider>
    </StyletronProvider>
  );
}

With those changes in mind, this web app is ready to be built.

🏋️ Getting Gatsby to do the heavy lifting

An entry point for most Gatsby apps will be the gatsby-config.js file. You can specify the site metadata and set up your plugins. In this case, I only grabbed a few extra plugins (besides the default ones):

gatsby-source-instagram: Required to fetch and show data via the Instagram API.
gatsby-plugin-styletron: Required so Base Web's engine can work along with Styletron and Gatsby. Read more.
gatsby-plugin-alias-imports: Optional but handy tool to create shortcuts for imports, i.e.:

// -- gatsby-config.js
{
  resolve: `gatsby-plugin-alias-imports`,
  options: {
    alias: {
      components: `${__dirname}/src/components`,
      data: `${__dirname}/data/`
    }
  }
}

// -- script.js
// Before
import { title } from '../../data/config';
import { Component } from '../components/Component';

// After
import { title } from 'data/config';
import { Component } from 'components';

Converting the app into a PWA (Progressive Web App)

Converting your app into a PWA is the hot thing, and for good reason. Google sums up what PWAs are pretty well.

With Gatsby, this is how easy it was to convert this app into a PWA:

Enable plugin gatsby-plugin-offline inside gatsby-config.js.
Create a gatsby-browser.js file. We will need to add a callback to the onServiceWorkerUpdateReady function which will tell our application's window to reload.:

export const onServiceWorkerUpdateReady = () => {
  window.location.reload(true);
};

And boom - Once your website is built, you will have the basics of a PWA good to go! Here is the Google Lighthouse audit score.

Handling data

To ease things up and keep the most important variables in one place, I created a data/config.js file. We can add things like the site's title, description, author, social links and other metadata. These variables will also power the SEO component!

SEO

I got the idea of using schema.org organizations from Smakosh.

import Thumbnail from 'static/images/thumbnail.png';

import {
  address,
  contact,
  foundingDate,
  legalName,
  logo,
  socialLinks,
  url
} from 'data/config';

const structuredDataOrganization = `{
  "@context": "http://schema.org",
  "@type": "Organization",
  "legalName": "${legalName}",
  "url": "${url}",
  "logo": "${logo}",
  "foundingDate": "${foundingDate}",
  "founders": [{
    "@type": "Person",
    "name": "${legalName}"
  }],
  "contactPoint": [{
    "@type": "ContactPoint",
    "email": "${contact.email}",
    "contactType": "customer service"
  }],
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "${address.city}",
    "addressCountry": "${address.country}"
  },
  "sameAs": [
    "${socialLinks.instagram}",
    "${socialLinks.twitter}",
  ]
}`;

To inject it, Gatsby provides us with a React Helmet that can be edited. We have to pass the data in the form of an application/ld+json script.

const SEO = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
    }
  `);

  const metaDescription = description || site.siteMetadata.description;

  return (
    <Helmet>
      <script type='application/ld+json'>
        {structuredDataOrganization}
      </script>
    </Helmet>
  );
};

Changing the media query breakpoints

It's very simple to override themes with Base Web. Their custom breakpoints example was all I needed.

import { LightTheme } from 'baseui';

// Specify your custom breakpoint sizes here
const breakpoints = Object.freeze({
  small: 769,
  medium: 1024,
  large: 1216
});

const ResponsiveTheme = Object.keys(breakpoints).reduce(
  (acc, key) => {
    acc.mediaQuery[
      key
    ] = `@media screen and (min-width: ${breakpoints[key]}px)`;
    return acc;
  },
  {
    breakpoints,
    mediaQuery: {}
  }
);

export default { ...LightTheme, ...ResponsiveTheme };

🌯 It's a wrap!

Creating this project was a great way to learn Gatsby and how it works under the hood. It's a Framework that gets comfortable very quickly and allows you to do and focus on creating your web apps. It does this by giving you the tools you need, when you need them, and comes with amazing built-in configurations that are production-ready.

In terms of Base Web, it's a great design system to build apps and prototypes with, and can easily be overridable. I especially like that it does not have many components that commonly bloat web app - It has the right ones you (and I) probably need.

Share your thoughts!

What is your experience with Gatsby? Let me know - I'd love to learn what you have to show and tell!.

Photo by Soragrit Wongsa on Unsplash.

Get Ready For Global Game Jam With These Free Game Engines

Juan Alejandro Morais — Wed, 22 Jan 2020 21:35:23 +0000

Hello there! 👋

Game development is a great way to improve your skills and even try new ones. It involves coding, art, music production, writing, testing, and many more areas! With the rise of its popularity, the number of tutorials and courses have been increasing, and thus decreasing the learning curve for those wanting to get into the industry.

An amazing way to get into making games is by doing Game Jams.

What is a game jam? 💡

Simply put, Game Jams are hackathons where you make games (Board + Digital). Most of the usual hackathon rules apply: you're given a time limit, judges/participants can vote on excellence, and there might even be prizes. The best part though is that you get to work with great people to make awesome games!

Great games can come out of game jams! 🚀

This is true! Whether it is Global Game Jam, Ludum Dare, or even company in-house jams, some amazing games have come out from these!

Some examples include, but are (definitely) not limited to:

Introducing: Global Game Jam 🌎

// Detect dark theme var iframe = document.getElementById('tweet-1200350981269139456-649'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1200350981269139456&theme=dark" }

The largest game jam in the world, Global Game Jam (GGJ) started in 2009, and gets bigger by the year! It runs for 48 hours with a global theme. In 2019 alone, GGJ had 860 locations in 113 countries create 9,010 games in one weekend.

The great news is: you can participate this year!

Participating in Global Game Jam 2020 💻

Global Game Jam happens every year — Woohoo! In 2020, it will occur from January 31 to February 2 (Friday to Sunday). To participate, you must:

Find A Global Game Jam Site.

After you finish registering, carefully read the details of your site. This includes entrance fees (if applicable), food options, age restrictions, etc.

Once you have read through, make sure you bring:

Your eager self!
A spirit of creativity.
A personal computer (Unless stated otherwise by your site).
Snacks + Water, or your drink of choice.

Note: Some sites may lend out computers, paper, pens and other great things to work so you don't have to do this — Check with your site first!

Great! Now, how I start making games? 🛠

The following engines have been ordered by personal preference. I will explain their main features, along with download and learning links. The engines will be separated into three areas: Introductory, Intriguing, and Challenging.

Introductory 🧰

Perfect if you're looking to get started with basic game development. No coding is required, and you get to only focus in the creation of games (No builds or similar hassles).

Twine

An open-source tool, Twine allows you to create non-linear, interactive stories.

Features

Free to use & open source!
Anything you create with it is completely free to use any way you like, including for commercial purposes.
Publish your game to HTML with a simple click, and receive a shareable link.
No code required to build a game.
Add variables, conditional logic, images to your story.
Tweak the appearance, or add effects with CSS and JavaScript.

Notable Games

You can find top Twine games on itch.io. Twine gives developers great creative freedom!

Get Started

klembot / twinejs

Twine, a tool for telling interactive, nonlinear stories

Bitsy

Bitsy is a small game editor for creating small, adventurous games, created by independent game developer Adam Le Doux. It comes with many of the features commonly seen in bigger game engines and is a great starting point to very novice developers wanting to get straight into the (small) action.

Features

Free to use & open source!
Pure web editor — no installs required.
Easy import/export of games in HTML format.
Friendly & open community!

Notable Games

Check out this list of Bitsy Faves. As it's a tiny editor, no notable games will be out there, at least yet. But if you're in for small indie games, believe me when I say you're in for a treat.

Get Started

Learning Bitsy is very straightforward. All the information you need to know is inside the engine itself.

le-doux / bitsy

a little engine for little games, worlds, and stories

Intriguing 🧪

Independent developers are loving these great, small yet scalable engines. They offer great options for 2D developers (including pixel art) out of the box. Game builds are very light weight and are just right for developers transitioning into more advanced/complex work.

Godot

A new and powerful game engine, Godot is a completely free and open-source engine that powers your games with an incredible set of tools, and removing clutter you (probably) don't need. This is a great engine for those who favour speed, fast iteration and want a totally free game engine.

Features

Free to use & open source!
A proactive team that listens to, and engages with the community.
Supports 2D and 3D graphics out of the box.
Built-in animator.
Choose your language: GDScript (like Python), C#, C++, Visual Scripting.
Cross-Platform build capabilities: Windows, Mac, HTML5, iOS, Android, Xbox, PS4!

Notable Games

Since it's a relatively new engine, indie games are the norm. You can find the top Godot games on itch.io and Godot's own Showcase.

Get Started

godotengine / godot

Godot Engine – Multi-platform 2D and 3D game engine

GameMaker

GameMaker is a great tool for making 2D games. With the release of GameMaker 2, they've mastered the beauty and simplicity that the engine offers. It's incredibly popular amongst the 2D developer community, especially with pixel art based games.

Features

For a complete list of features, visit the Official Site.

Free 30-day trial.
Editor:
- Room/Level editor.
- Object inheritance.
- Git integration.
- Networking.
- Many, many more!
An easy to use Drag And Drop prototyping system.
Built-in programming language: GML — Based on C, but a lot easier to use.
Cross-Platform build capabilities: Windows, Mac, HTML5, iOS, Android, Xbox, PS4!
Lots of online resources to learn from, ranging from specific tutorials to complete courses.

Notable Games

Get Started

GameMaker was one of the first engines I used. It's great for getting started in game development, while also being great to stick with!

Challenging ⚗️

From independents to giants, these engines are shaping the world of game development. They offer vast amounts of learning resources, a plethora of free & paid assets, affordable pricing options, and powerful features out of the box. You can modify them to your will and game's needs, implement advanced

Unity

Unity has been gaining popularity at increasing speeds, and a favourite among mobile developers. With a team full of passionate developers, they've been working with the community in many awesome ways! It's the preferred tool for many small- to mid-sized indies and even some AAA. Unity offers great scalability without compromising essential tools of the trade.

Features

Free to use & publish with. Pay only if you want, or if your game brings over $100K in revenue.
Built-in animator.
Hackable/extendable editor.
Code with the powerful C# language. No need to compile assets to run — Script changes can take as little as seconds before you can continue testing.
Native 3D support — The team is working on improving the 2D tools.
Asset store full of useful tools, art, starters, and more!
Cross-Platform build capabilities: Windows, Mac, HTML5, iOS, Android, Xbox, PS4!
Lots of online resources to learn from, ranging from specific tutorials to complete courses.

Notable Games

Get Started

I have used Unity both personally and professionally during my game development career. It is currently my preferred engine. Therefore, my opinion may be biased!

Unreal Engine

Unreal Engine is one of the biggest players out there, especializing in creating AAA quality titles. Ever since releasing Fortnite, they've grown, A LOT! From CGI to art showcases, to high fidelity games, and even mobile games, they have you covered. An engine that is favoured amongst mid- to large-size teams, and many AAA studios, UE is an amazing tool.

Features

Free to use & publish with. It can be free of cost if your game revenue is less than $3,000 /quarter; if more, 5% of your game’s gross revenue will be charged.
Hackable/extendable editor - You can fork UE4 on Github!.
Use Visual Scripting (Blueprints) or C++ to power your game, and take full control of the logic.
Great starter packs straight out of the box.
Asset store full of useful tools, art, starters, and more!
Cross-Platform build capabilities: Windows, Mac, HTML5, iOS, Android, Xbox, PS4!
Lots of online resources to learn from, ranging from specific tutorials to complete courses.

Notable Games

Get Started

Note: You will have to create an Epic account to use Unreal Engine's tools. The good thing is that if you already play any of their games, or use their store, you'll have an account ready to go.

Honorable Mentions 🌞

There are lots of great game engines! Since one post cannot cover them all without getting too big, here are some options worth thinking about:

Moving Forward 🎮

This is only the start of game development. After you get familiarised with a tool, make sure you set a small, achievable goal. The games industry is growing with a speed so incredible, there's no better time to jump on in! You're all welcome to join this incredible journey.

Photo by Annie Spratt on Unsplash

Hacktoberfest: From Decision To Completion

Juan Alejandro Morais — Mon, 21 Oct 2019 00:24:08 +0000

¡Hola/Hello/Kia Ora everyone! 👋

📖 Table of Contents

Making A Decision & Sticking To It 🚀
Tackling The Challenge 👨🏽‍💻
Exploring The Web! 🌐
- DEV
- DeckDeckGo
- Making A VS Code Extension
Lessons Learned, A Retrospective ❤️

I'm always looking for ways to learn and improve who I am, personally and career-wise. This year I completed my first ever Hacktoberfest — It felt great! Now that I've completed it and have stayed active with contributions, I wonder:

What inspired me?
How can I stay motivated to work on more open source projects?
How can I encourage others to do the same?

Making A Decision & Sticking To It 🚀

This year I made the switch from game programming to Full-stack. Before the switch, I had only been coding in languages such as C++, C#, Lua, and using game engines such as Unreal Engine 4 and Unity3D. I've been discovering and working with technologies like JavaScript, Python, and SQL to name a few. The breadth of tools, frameworks, libraries, APIs out there are tremendous - I can get why it might be so hard to get into this!

Impostor Syndrome Kicks In

Alright, I know how to code. Or do I? Surely I can work on a small issue and solve it, right? How about data structures? I've forgotten to implement a B-Tree yet again...

Impostor Syndrome accompanies those who work or have worked in the Games Industry, and it has decided to stay. To prove myself that I am a capable programmer (and more importantly, that I'm more than willing to overcome obstacles), I started creating side-projects to work on.

But if you're like me, you tend to come up with lots of side-projects, only to never work on them again. And that's fine - Some of these projects have a specific purpose, and they may have taught you the thing you wanted to know. Time to move on!

Since I'm also now working on web technologies, I wanted to expand portfolio with projects that were more relevant to my job - All I had were games and a couple of websites.

How Open Source Helped

I was looking for a way to publish an old blog post I wrote on my website - First I tried Medium, but I generally dislike Medium. It feels like it was not meant for developers. That lead me to discover DEV, and with it, a post talking about Hacktoberfest — I was sold immediately after!

When I discovered Open Source, I noticed the following:

An infinite amount of projects to work on. If I can't do one, I might simply jump onto another - Great for someone like myself.
A community of passionate, friendly developers collaborating and communicating together.
Barriers ranging from short to very tall - There are issues for those with any level of experience. Woohoo!
"Remote Work" vibes, where the maintainers of a project act as project leads. They ensure collaborators stay in tune with the project's vision and are happy to help out. I was convinced. Time to give this a try! Working on multiple ones would keep my mind agile, constantly looking at new horizons.

Tackling The Challenge 👨🏽‍💻

With any kind of programming task, I focus on creating an MVP (Minimum Viable Product) first —You don't learn variables and start writing classes right away— Instead, I ask myself questions i.e.:

What are the requirements needed to complete this task?
Do I need to create a complex input handler this early?
Have I made a plan on how to tackle this? Flow Charts, UML Diagrams, Notes, etc.

These were the steps I followed to complete my first Hacktoberfest:

1. Learning How Open Source Actually Works

Projects like First Contributions and Hacktoberfest's Getting Started guide are great for newcomers like me. They teach you the basics of open source, where to find projects, and best practices.

Note on commit signature verification:
Some projects will require you to verify your commits. This means you will have to create and register a GPG signature (I had to do this). Learn more: GitHub Signature Verification

2. Working with `Markdown`

Spanish is my first language, so I decided to put my translation skills to test. For this PR, I found this project and added a Spanish version:

Add Spanish (LatAm) version #6

timrodz posted on Sep 30, 2019

Added a spanish version of this repository.

Changes

All files now present their alternative language versions inside a list element.

View on GitHub

3. Working With `HTML`, `CSS` & `JavaScript`

HTML and CSS are great programming languages for beginners. They provide us with beautiful sites and power the web.

Add EmojiPages link to footer #399

timrodz posted on Sep 30, 2019

[x] 🔍 I have searched the data.js file and confirmed I am not adding a duplicate entry. Note: Different versions of the same show/movie are okay to add such as Lion King (1994) and Lion King (2019) or Rent (movie) and Rent (musical).
[x] 🌈 I have added a single year under year. Note: Do not add ranges such as 2017-2019.
[x] 📅 I have added a type from one of the following: movie , tv or musical.
[x] 🔗 I have added the IMDB page or Playbill archive page under itemLink.
[x] 3️⃣ I have at least three emojis listed under emojiImgs.
[x] 5️⃣ I have a maximum of five emojis listed under emojiImgs.
[x] 👍 My pull request has a descriptive title (such as Added The Lion King or Added Black Panther, The Avengers: Endgame and Thor).
[x] ⭐ My genres are all inside of square brackets [ ] and each are individually wrapped in quotation marks and have a comma between each one. (such as submitting this "genres": ["adventure","mystery","animation"] and not this "genres":["adventure, mystery, animation"]).
[x] 🖍️ I have placed the new show(s) or movie(s) in alphabetical order based on title. If the show or movie starts with 'the', then use the second word to alphabetize.

Changes

I wrapped both footer links inside a list.
If we get more projects, we can simply add a new li object, and they'll be evenly spaced between themselves.

Closes #294

View on GitHub

JavaScript empowers our web, granting it the ability to do amazing things! I went for basic concepts: Working with an object and editing text inside it.

Add emojiImgs to 'On The Town' and 'RocketMan' #400

timrodz posted on Sep 30, 2019

[x] 🔍 I have searched the data.js file and confirmed I am not adding a duplicate entry. Note: Different versions of the same show/movie are okay to add such as Lion King (1994) and Lion King (2019) or Rent (movie) and Rent (musical).
[x] 🌈 I have added a single year under year. Note: Do not add ranges such as 2017-2019.
[x] 📅 I have added a type from one of the following: movie , tv or musical.
[x] 🔗 I have added the IMDB page or Playbill archive page under itemLink.
[x] 3️⃣ I have at least three emojis listed under emojiImgs.
[x] 5️⃣ I have a maximum of five emojis listed under emojiImgs.
[x] 👍 My pull request has a descriptive title (such as Added The Lion King or Added Black Panther, The Avengers: Endgame and Thor).
[x] ⭐ My genres are all inside of square brackets [ ] and each are individually wrapped in quotation marks and have a comma between each one. (such as submitting this "genres": ["adventure","mystery","animation"] and not this "genres":["adventure, mystery, animation"]).
[x] 🖍️ I have placed the new show(s) or movie(s) in alphabetical order based on title. If the show or movie starts with 'the', then use the second word to alphabetize.

Changes

I added an extra emoji to the following entries (Which had 2 emojis each):
- On The Town
- RocketMan

It's also worth noting that certain Emoji combinations won't play properly with JSON. This might be worth investigating further, as I can see emojis work as complex strings that get encoded with different rules (e.g. 💩 will be encoded differently than 👯‍♀️, and their string lengths will vary)

Closes #79

View on GitHub

Learning By Example; Developing A Habit

After finishing these tasks, I felt confident enough to tackle more difficult ones. I decided to work on codebases with unfamiliar technologies. It was time to explore the web!

Exploring The Web! 🌐

After finishing these basic tasks, I felt confident enough to tackle more difficult ones.

🌈 DEV

To begin, I decided to work on DEV, as I'm loving this site! It was my first time trying Ruby, so you can imagine the confusion I had with the syntax. DEV's codebase is huge, so I wanted to make changes that I knew weren't going to destroy the site. I approached this with the following mindset:

Learn basic Ruby: TutorialsPoint
Find out how the Ruby ecosystem works. This article from stuartellis helped me understand the basics of Embedded Ruby Templating (ERB)
Hack code around and see what the output gives

Improve the tag edit page (Tag moderators only) #4137

timrodz posted on Sep 30, 2019

What type of PR is this? (check all applicable)

[ ] Refactor
[x] Feature
[ ] Bug Fix
[ ] Documentation Update

Description

Since it's my first time working with Ruby, I decided to learn about ERB and do minor yet pleasing styling changes:

Decreased indentation for tag-edit.scss
Imported variables & mixins for code standardisation.
Moved the section order around to show mainly used ones first.
Textarea resizing is restricted to vertical
Focusing on a text field will set the border to a different colour
The 'Save Changes' CTA has been changed to go in accord with DEV's aesthetic

Related Tickets & Documents

Improve the tag edit pages #3953

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Added to documentation?

[ ] docs.dev.to
[ ] readme
[x] no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

View on GitHub

Plus: Contributing to DEV gives you a cool badge!

Contribute to DEV:

How to contribute to DEV this hacktoberfest

Ben Halpern ・ Oct 1 '19 ・ 6 min read

#hacktoberfest #beginners #contributorswanted

📊 DeckDeckGo

DeckDeckGo is an open-source presentation editor - And a very powerful one! It was also my first time using StencilJS. This was my approach:

Learn the core concepts for Stencil JS: Stencil Documentation
Ask proactive questions to the project maintainer (lead):
- What do they expect from a hypothetical PR? i.e. Acceptance Criteria
- Ask questions on how to approach the PR
Ask what the project structure is. How do files talk to each other? I find this helped me understand the code more than anything for this case!

Add basic vertical split functionality #406

timrodz posted on Oct 13, 2019

Summary:

Add Prop() vertical to DeckdeckgoSlideSplit
Append attribute -vertical to slide classes deckgo-slide and deckgo-slide-split
Add and extend deckgo-slide-vertical and deckgo-slide-split-vertical styles:
- deckgo-slide-vertical
  - flex-flow is column wrap
  - height is slide height - bottom paddings * 2: calc(var(--slide-height) - (2 * var(--slide-split-padding-bottom, var(--slide-padding-bottom-default))))
- deckgo-slide-split-vertical
  - width is slide width - end & start paddings: calc(var(--slide-width) - (var(--slide-split-padding-end, var(--slide-padding-end-default))) - (var(--slide-split-padding-start, var(--slide-padding-start-default))));

Closes #372 🚀

View on GitHub

Learn more about DeckDeckGo:

We are developing an open source editor for presentations

David Dal Busco ・ Apr 29 '19 ・ 5 min read

#showdev #opensource #motivation

🛠 Making A VS Code Extension

I started LightSwitch a couple of weeks ago. I decided to write a DEV post about it:

Hacktoberfest: Let's build a VS Code Extension

Juan Alejandro Morais ・ Oct 16 '19 ・ 2 min read

#hacktoberfest #opensource #vscode #typescript

Turns out, it was a success! I started by creating my own issues (After having implemented and pushed the MVP out), adding labels such as hacktoberfest, help wanted, good first issue — Last thing I knew, awesome folks were contributing to the project! ❤️

Learn more about Light Switch:

timrodz / vscode-light-switch

💡 Light Switch allows you to set-up two themes that swap around day & night. All you have to do is pick your themes and set your preferred times.

Lessons Learned, A Retrospective ❤️

Working with Open Source software has taught me how to become a better developer, and how to approach problems through a new lens. I have actioned my learning into the following areas:

Communication
- Writing commit messages and summaries that are more descriptive and contextual.
- Focusing on words that can express your thoughts clearly.
- Asking better, smaller questions and being open to clarify them.
Learning new technologies:
- Web technologies, as complex as they may seem, don't have to be. Try different approaches like toying with code, watching tutorials, taking a course, etc.
There are many ways to solve a problem - have an open mind when working with Open Source.

If you're still in doubt...

...We all are at some point, no matter how experienced some may seem! Getting into Open Source can seem daunting, especially if you're just getting started with tech. The first steps are the hardest to give - Start small, grow big.

Photo by Jukan Tateisi on Unsplash

Hacktoberfest: Let's build a VS Code Extension

Juan Alejandro Morais — Wed, 16 Oct 2019 20:14:37 +0000

Hi everyone! 👋

A few weeks ago, I started building a VS Code extension called LightSwitch. It allows you to set-up two themes that swap around day & night. All you have to do is choose your themes and set your preferred times to switch them.

timrodz / vscode-light-switch

💡 Light Switch allows you to set-up two themes that swap around day & night. All you have to do is pick your themes and set your preferred times.

Update: thanks for all the support! I appreciate you all. ❤️

Any stars are more than welcome ⭐

Since we're in Hacktoberfest, building a tool together would be a great way to celebrate it (along with open source software)!

Why? 🤔

Not so long ago, I started wearing prescription glasses, and thus I have been swapping between light/dark themes according to where/when I'm working.

"Why not make a tool to automate this?!"

This was the perfect reason to work on a small project that would teach me the API, workflows of VS Code, along with Typescript.

I must admit, creating an MVP was incredibly easy, and I encourage all fellow devs to tinker with their own extensions — It's also a great way to get started with Typescript!

The extension 🚀

A basic implementation of LightSwitch is working, with the following features:

Set themes to night and day
Switch between night/day themes
Switch themes according to a specific time

By collaborating in this project you will:

Use Typescript to implement features, tests and fix bugs. Don't know the language? No worries! You can learn Typescript in 5 minutes.
Be exposed to API methods that will help you understand how extensions work. Discover the VS Code API.
Achieve your Hacktoberfest PRs (In case you need them).
Work on a small Open Source project!

I' open to discussions of any kind. Any contribution is more than valid ❤

I'm in! Show me the issues 🛠

Woop Woop! The complete list of issues can be found here.

Discussion: Features & Enhancements #12

timrodz posted on Oct 17, 2019

Hi team!

If you have any features/enhancements you'd like to propose, this is the place to share them.

View on GitHub

Add better screenshots / GIFs #4

timrodz posted on Oct 16, 2019

As of now, it can be a bit difficult to understand what this tool does. A set of new, clear screenshots and (better) GIFs would be great.

View on GitHub

Add more tests #5

timrodz posted on Oct 16, 2019

Currently, the suite of tests is very basic. Ideally, we should be testing the following areas:

Utilities i.e. workskpace
Commands i.e. setTheme, switchThemes
Command binder - What could possibly go wrong?
String verification through extension settings and date

If you have ideas for any other tests, let me know.

View on GitHub

Audit and improve util/workspace #6

timrodz posted on Oct 16, 2019

Currently, workspace runs methods with little to no checks. We should cover potential breaking cases such as:

User having multi-root workspaces
Themes that don't exist (or have been deleted)

View on GitHub

Photo by Hans-Peter Gauster on Unsplash.

Anonymous & arrow functions in Javascript

Juan Alejandro Morais — Wed, 25 Sep 2019 04:26:16 +0000

I've been exploring with javascript anonymous & arrow functions, and found this quite an interesting puzzle: what are the return types of these functions? Bonus points for an explanation of how some of these work (or not)

export const values = {
    key: 'value',
    getKey: function () {
        return function() {
            return this.key;
        }
    },
    getKeyArrow: function () {
        return () => this.key;
    },
    getKeyArrowCall: function () {
        return (() => this.key)();
    }
};

const v1 = values.getKey(); // function
v1(); // undefined
const v2 = values.getKeyArrow(); // function
const v3 = values.getKeyArrowCall(); // value

Edit: I changed getKey to be a bit more difficult. The previous version executed return this.key;

The Utility of Delegates and Events in Unity

Juan Alejandro Morais — Wed, 25 Sep 2019 00:18:21 +0000

Originally published at timrodz.com.

Update: @damagefilter wrote a more advanced tutorial regarding events in Unity. Go check it out here 😄.

¡Hola! My name is Juan Rodriguez. I am a Panamanian data & game developer and programmer based in New Zealand. This blog post was written for notGDC as I wanted to contribute some of my knowledge with the community. It is aimed towards programmers looking to get the most out of Unity, no matter the skill level. The initial stages will be fairly basic as I want everyone to understand this tutorial, so feel free to skip parts as you wish! (Or just grab the source code). The tools I used are Unity 2017.3.1p2 and Visual Studio Code.

📩 What

In games, we often encounter situations where we want to notify objects about events that are happening without having to tie them together. Let’s consider the following situation. You have a UI system with:

An input field to write a message.
A button to send the message.
A field to display the message sent.

When the user clicks the ‘Send Message’ button, you want to inform the UI controller that a new message has been sent. After this, you will replace the current message with the new one. Lastly, the input field will be cleared up.

Here’s a GIF of how the game will look like:

📤 How

In order to achieve the desired functionality, we will approach the solution by implementing delegates. Delegates allow us to treat methods as variables, and they work like a mailing list. Subscribers will receive emails and can opt-out at any time. Note: You can subscribe as many methods as you desire. Events are very similar. The main difference is they add a layer of abstraction and protection on the delegate instance. This protection prevents clients of the delegate from resetting the delegate and its invocation list and only allows adding or removing targets from the invocation list (Source).

On the programming side, we are going to have two scripts: an event controller and a UI controller. The event controller will work as our mailing list, and it will have one event: OnMessageUpdateRequest. Since we want to replace our current message for the input field’s one, so this method will send out new message update requests.

The UI controller will have an UpdateMessage method subscribed to the OnMessageUpdateRequest event, and it will work as a listener. Also, to introduce you to UnityEvents we will play around with our Button and its capabilities, but we’ll get to that later. In essence: Delegates, Events and UnityEvents are very similar.

📨 Implementation

Inside Unity, create a new Scene and add the following objects to it:

Two Empty GameObjects. Rename them ‘UI Controller’ and ‘Event Controller’ respectively.
Right click on the hierarchy view:
- Choose UI → Button.
- Choose UI → Input Field.
- Choose UI → Text.

Note: New UI objects will automatically add a Canvas and an EventSystem if your scene does not already have them inside. Why? because the Canvas displays UI elements and the EventSystem handles interactions from inputs that are not keys — They’re necessary to make any UI system work.

Your scene should look similar to this one:

Applying our solution

Once you have finished setting up your scene, it’s time to create the following C# scripts:

UIController.cs
EventController.cs

These scripts have the same names as our previously created Empty GameObjects. They will be attached to them as components.

UIController.cs

Once you create the class, it should look similar to this snippet:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class UIController : MonoBehaviour
{
    // Use this for initialization
    void Start() {}

    // Update is called once per frame
    void Update() {}
}

Since we’re working with UI, we need to include the UnityEngine.UI library in order to access functionality of UI elements. Between lines 3 and 5, add the following code snippet:

using UnityEngine.UI;

After this is done, remove the Update method— We won’t be needing it. Now that we’ve got our UI library imported, we will proceed to create references to our UI objects in the scene. Inside the UIController class, add the following declarations before the Start method:

public Button ButtonSendMessage;
public InputField InputField;
public Text MessageDisplay;

Now, we need to create two methods: SendMessageUpdateRequest and UpdateMessage. Inside UIController.cs, add the following lines of code:

void SendMessageUpdateRequest() {}

void UpdateMessage(string _message) {}

If you’ve followed the steps correctly, your class should now look like this: Gist url.

Head over to the Unity inspector. Click on the UI Controller GameObject and click on the ‘Add component’, from here you will add the UIController script. Alternatively, you can also drag and drop the script into the GameObject. Once added, the UI Controller component will have three visible variables. After this, proceed to drag and drop the matching components inside the Canvas object.

Note: The UI Controller GameObject holds components such as the Transform. The UIController script can be attached as a component to any GameObject. In this case, we’re attaching it to the UI Controller GameObject.

Before going forward, we need to talk about UnityEvents and how we’re using them in this tutorial. If you click on the Button inside the canvas, you will see the following component:

At the bottom of the component’s view, you see a On Click () field with an empty list and a +/- sign. This is a UnityEvent: They allow you to add methods of objects in the current scene to to it! So, whatever methods you add here will be called when the button receives a click (onClick).

If the method you assign is not in the same hierarchy as the component (In this case, our button), its reference might get lost. This can create many undesired scenarios where you have to reassign methods over and over again. To combat this problem, we will add a listener to our Button’s onClick event via code. Inside the Start method, add the following line:

ButtonSendMessage.onClick.AddListener(SendMessageUpdateRequest);

The AddListener method allows us to subscribe any of our classes’ functions to the desired event; in this case, it’s onClick. The parameter taken is of type UnityAction, which is essentially anything that is considered a method according to Unity. Now, everytime you click the ‘Send Message’ button, the SendMessageUpdateRequest method will be called, no matter the contents.

Note: The AddListener method only accepts UnityEvents with no parameters, unless you add them via a Lambda expression.

EventController.cs

Before going any further, we need to declare our delegate and implement its functionality.
Add the following declarations inside EventController.cs (and before the Start method):

public delegate void OnMessageUpdateRequestDelegate(string _message);

Here we declare our delegate OnMessageUpdateRequestDelegate. In this part of the declaration, you specify the parameters it will have (no parameters is also valid). In our case, we are adding a string message.

public static OnMessageUpdateRequestDelegate OnMessageUpdateRequest;

We’re declaring OnMessageUpdateRequest as an OnMessageUpdateRequestDelegate. This is because delegates are methods treated as variables. Also, it’s static because we want to be able to access it from other classes without having to save a reference of the EventController (This is entirely optional, and it will vary heavily from your implementation/coding practices).

Now, replace the Start method for the following one:

public static void Event_OnMessageUpdateRequest(string _message)
{
    Debug.LogFormat("-- EventController // Received a request to update message: {0}", _message);

    OnMessageUpdateRequest(_message);
}

Final EventController.cs
If you followed the steps correctly, your EventController class should look like this: Gist url.

Back to UIController.cs

Now that our EventController code is ready, it’s time to continue working with our implementation. We now want to subscribe our UpdateMessage method to EventController’s OnMessageUpdateRequest delegate. Inside the Start method, add this line of code:

EventController.OnMessageUpdateRequest += UpdateMessage;

Note: We did not use AddListener because delegates/events can simply add/remove listeners with the +=/-= operators. Also, a delegate can equal (=) one method whereas events cannot, they require use of +=/-= assignment operators.

Inside our SendMessageUpdateRequest method, we will store our message in a temporary string. We do this because we will call EventController’s Event_OnMessageUpdateRequest method:

void SendMessageUpdateRequest()
{
    // Store the input field's text into a string
    string message = InputField.text;

    EventController.Event_OnMessageUpdateRequest(message);
}

If you recall EventController.cs, the contents of Event_OnMessageUpdateRequest method calls the OnMessageUpdateRequest delegate. Because SendMessageUpdateRequest invokes the event, and UpdateMessage is subscribed to the event, it will also be called.

🗳 Method call order

Button 'Send Message’ onClick UnityEvent calls SendMessageUpdateRequest (subscriber).
SendMessageUpdateRequest method calls Event_OnMessageUpdateRequest.
Event_OnMessageUpdateRequest method calls OnMessageUpdateRequest.
OnMessageUpdateRequest delegate calls UpdateMessage (subscriber).

This may be confusing, so let me rephrase them in a more readable way: Because method SendMessageUpdateRequest is subscribed to Button’s onClick UnityEvent, it will be called every time onClick is also called. Same goes for number 4: Because method UpdateMessage is subscribed to delegate OnMessageUpdateRequest, it will be called every time OnMessageUpdateRequest is also called. Hope that eases things up!

Finally, we do follow the last steps: replace the message, and clear up the input field.

void UpdateMessage(string _message)
{
    // Print the message
    Debug.LogFormat("-- UIController // Updating message: {0}", _message);

    // Replace our message display text with the contents of the message variable
    MessageDisplay.text = _message;

    // Reset the text of our input field
    InputField.text = "";
}

Final UIController.cs
If you followed all steps correctly, this is how your UIController class should look like: Gist url

Now, press play and cross your fingers. If all goes well, congratulations! If not, let me know what’s the issue and we’ll figure it out!

💌 Summary

We have learned about delegates, events and UnityEvents in Unity. They are useful variables that can help overcome many programming challenges. I hope you have enjoyed reading this notGDC blog post.