DEV Community: Cecelia Martinez

Five Questions to Ask Before Launching a Developer Community Program

Cecelia Martinez — Wed, 04 Dec 2024 13:37:50 +0000

Building a developer community isn't just about creating a space—it's about creating the right space. Before diving in, you need to ask yourself some fundamental questions that will shape your entire community strategy. Whether you are an establish developer brand or looking to get the word out about your brand-new devtool, consider these critical questions before building a new community program.

Do You Want to Grow Your Community by Attracting New Developers or by Engaging with Your Existing Developers?
Do You Have Non-Developers in Your Community, and If So, Will They Be Included?
Do You Know What Your Developers Need from a Community?
What Are the Business Motivations for Investing in Community?
What Expertise Is Needed to Do the Best First Thing?

Do You Want to Grow Your Community by Attracting New Developers or by Engaging with Your Existing Developers?

First, clarify your primary goal. Are you looking to expand your developer base by attracting new users, or are you focusing on deepening relationships with your existing developers? Each approach requires a different strategy and set of tactics.

For example, programs designed to bring in new developers may include hackathons and coding challenges that introduce developers to your platform, OSS contribution programs, beginner-level onboarding resources, or partnering with existing meetups and events.

Meanwhile, programs for an existing community may focus on user groups, peer mentorship networks, dedicated community support channels, or recognition programs for developer achievements.

Do You Have Non-Developers in Your Community, and If So, Will They Be Included?

Developers rarely work in isolation. Consider your broader community ecosystem. Do you have non-developers who interact with your platform? If so, determine whether they'll be integrated into your community program or require a separate approach.

When I was Community Lead at Replay, our bug recorder was used by developers, but also customer support teams, QA/testing teams, and product managers.

Inclusivity can be a powerful community enabler. The goal isn't just to tolerate non-developers but to actively create value for them. This approach transforms your community from a narrow technical forum into a broad ecosystem where different types of tech professionals can learn, collaborate, and grow together.

Do You Know What Your Developers Need from a Community?

This is crucial: Truly understanding your developers' needs requires deep investigation. Don't rely on assumptions—dig deeper. Your roadmap should emerge from genuine developer insights based on a combination of different research methods.

First and foremost, talk to your developers! If for some reason your developers aren’t accessible, connect with your Customer Success and Support team for their insights. It’s also important to identify needs that developers aren’t able to communicate. Analyzing support tickets, user sentiment, and product usage data can offer insights here.

Identify key needs like:
- Product improvements
- Educational resources
- Technical support
- Professional networking opportunities
- Recognition for their contributions

Understanding what your developers need will dictate which community programs to prioritize.

What Are the Business Motivations for Investing in Community?

Every community investment needs a clear purpose. While it may feel good as a company to grow a thriving community, ultimately it’s important that community programs tie back to business goals. The last thing you want is to disappoint your community by starting a program only to discontinue it due to lack of leadership sponsorship.

Different community programs may align with business goals across the developer journey. Attracting new developers for may support user growth goals, while recognition programs for super users typically align with goals around referrals and expansion. Your business goals may be more product-oriented, focused on gaining critical insights from early users as you establish product-market fit. Or, you may need to alleviate workload from overwhelmed support teams by establishing community forums.

The most successful communities align their structure, content, and engagement directly with core business objectives. This will ensure the long-term success of your community programs and establish community trust. If you aren’t familiar with business goals at your organization, check out this blog post about Business Jargon for Dev-Rel.

What Expertise Is Needed to Do the Best First Thing?

Launching a developer community isn't just about good intentions—it requires specialized skills and strategic thinking. Consider the expertise needed:

Community management professionals who understand developer workflows and though processes
Technical experts who can create meaningful content and facilitate discussions
Data analysts who can measure community impact and engagement
Cross-functional team members who can bridge technical and business perspectives

Sometimes this means hiring dedicated community leads, sometimes it means training existing team members, and sometimes it involves bringing in external consultants who deeply understand developer relations.

Community building is both an art and a science, but it’s important to pause and thoughtfully consider these five questions to turn vague aspirations into and effective strategy. The most powerful developer communities aren't accidents—they're carefully crafted to provide genuine value, foster meaningful connections, and create mutual growth opportunities for both the platform and its developers. Start with curiosity, listen intently, and remain committed to creating a space where developers don't just interact, but truly belong.

Learn basic SQL concepts using visual low-code

Cecelia Martinez — Mon, 29 Jul 2024 19:53:41 +0000

SQL concepts are not always the easiest to learn – I know I’ve struggled with crafting queries and defining schemas myself! For some developers, it can be easier to understand SQL concepts visually. This is why I recommend using OutSystems – a visual, low-code platform – to help you learn common SQL concepts.

If you think that low-code is only for non-developers, think again! I was surprised to discover just how much engineering knowledge is required to build quality apps in OutSystems. The good news is that OutSystems removes the tedium of app development (think framework configuration, remembering syntax quirks, and repetitive boilerplate), so you can focus on making strategic technical decisions to build the right app for your users.

Under the hood, OutSystems uses SQL. This means that there is a direct relationship between the low-code data concepts in OutSystems and SQL. In this post, we’ll show examples based on a sample events platform application. If you’d like to build along, create a free OutSystems account, set up a personal environment, and install the development environment, Service Studio. (Check out the Getting Started guide here.)

Data Concepts in OutSystems

To better understand SQL concepts, we’ll take a look at the corresponding data concepts in OutSystems.

Entities
- Creating an Entity
- Relationships
- Static Entities
Bootstrapping Data
Displaying Data on Screens
- Drag-and-Drop
- Queries with Aggregates
CRUD Operations
Next Steps

Entities

We’ll start with the building block of data in OutSystems: Entities. An entity represents an object that corresponds to a business concept for your app. For example, an e-commerce app may have Products, Orders, and Customers. Each of these could be an entity in OutSystems.

In SQL, this corresponds to a table. When you visually create an entity in OutSystems, a SQL table is created.

Each entity has attributes, or properties, that contain additional information about the entity. These correspond to the concept of columns in SQL. Attributes must have a set Data Type, which can either be a primitive type like Text or Integer, or a reference to another entity. Attributes can be set to mandatory if needed.

The best way to understand entities and relationships is to see them visually represented in OutSystems, so let's create our first entity.

Creating an entity

Everything related to the data of your application is accessible from the “Data” tab in Service Studio. Here you see a folder named “Entities.” Right-click and select “Add entity to Database” to get started. We’ll name our first entity “Event.”

This creates a new table where we can define our entity attributes. By expanding the arrow next to our new entity, you’ll see a default Id attribute, as well as some built-in CRUD methods. (We’ll get to those later!)

Now you can right-click the entity and select “Add Entity Attribute.” We’ll add the attributes, or columns, and make sure each attribute has the correct data type. OutSystems infers the data type for you based on the name, but you can adjust that if needed. You can also mark if the attribute should be mandatory.

Here is our “Event” entity, with attributes for Title, Description, Date, StartTime, and EndTime.

In the new entity, you can see that the Id attribute has a red icon. This indicates that the Id is the Entity Identifier. This is the same as the concept of a primary key in SQL. The entity attribute or primary key uniquely identifies each record in a table.

Let’s repeat this process and create a “Venue” entity, with attributes for Name, Address, City, State, ZipCode (all with a text data type) and AllAges (a boolean).

Relationships

Every event needs to have a venue. We can demonstrate this relationship by adding an attribute to “Event” that references a specific “VenueId.” This is called a Reference Attribute, and you’ll see that the data type is automatically inferred as “Venue Identifier” by OutSystems.

In SQL, this is like adding a foreign key column to a table that references the primary key of another table. In this case, our Event entity is like the child table. The VenueId attribute on the Event entity is like a foreign key that references the primary key of the Venue entity.

Static entities

Static entities are read-only and are useful for holding predefined values that will not change. These are like static tables in SQL, and some examples could be role types, categories, or levels of priority. For our event app, each event should have an event type, but we want these to be predefined from the outset as either “meetup” or “workshop.”

So, we’ll create a static entity. Right click on the entities folder again and select “Add Static Entity to Database.. Name it “EventType,” then right-click the Records folder and add two records, one for each of our event categories.

Because static entities are read-only, which means developers can add new records in the future, users will not be able to update it from your app. We can add an entity attribute to “Event” called “EventTypeId” that references our new static entity. This is exactly what we just did for VenueId.

Now that we have entities defined, we can start adding data to our app.

Bootstrapping data

OutSystems enables you to manipulate data records in Service Studio. Simply double-click any entity to view, edit, and create new rows. But, the easiest way to set your app up with initial data is using the spreadsheet upload option. OutSystems will automatically map your columns in Excel to the attributes in your entity and add the rows for you.

I’ve generated some fake venues to populate our Venue entity and get our app started. To upload, right-click on the Venue entity, navigate to “Advanced,” and then “Create Action to Bootstrap Data from Excel.”

Confirm the mappings, click the green Publish button, and you’ll now be able to see the rows populated by double-clicking on the Venue entity.

Now that we have some data, let’s do something with it!

Displaying data on screens

We won’t get into building user interfaces too much in this post. However, I do want to demonstrate the relationship between your data model and the UI, as well as how easy it is to generate a visual representation of your data for your app’s end users.

Drag-and-drop

OutSystems can automatically generate screens (as in pages) based on your data model. This has been a game changer for me coming from traditional code, where scaffolding out pages was some of the most tedious parts of building an app from scratch.

First, navigate to the Interface tab in Service Studio. You’ll see an expanded UI Flows folder with a “MainFlow” inside. Again, we’ll explain more about UI in OutSystems in the future, but for now double-click where it says “MainFlow.” This will update the main window in Service Studio with instructions prompting you to “Drag and drop a screen or entity to create a screen.”

We’ll do the second option! Click back to the Data tab, click and hold the Venue entity in the list, and drag it onto the screen.

Double-click on the newly-created Venues screen. In the bottom half of the right sidebar, check the “Anonymous” option under Roles. This will let you view the screen in your browser without logging in to the application. (Note: This is only recommended for sample apps, for security reasons, it’s best to require users to log in for production.)

Click the green Publish button, and then “Open in browser” once the button changes to blue.

In the browser, we can see our Venues list populated with the data! OutSystems creates the UI components to display, search, and even paginate data.

Back in Service Studio, check “Anonymous” under Roles for the VenueDetail screen, just like we did for the Venues screen. Publish again and open in the browser. Now, click on either the “Add Venue” button or the name of any venue in our list.

This is the UI for editing existing and adding new venues. No more repetitive building of forms over and over! OutSystems even handles built-in form validation based on your data model, enforcing types, and mandatory fields.

Queries with aggregates

OutSystems uses what’s called Aggregates to create these screens. Aggregates are optimized SQL queries for fetching data from the database. If you expand the arrow next to the VenueDetail screen in the Interface tab, you’ll see a “GetVenueById” item with a grid icon. This is the aggregate we are using to query for the specific venue.

Double-clicking the aggregate opens a visual query editor. Here, you can explore the query sources, filters, and sorts. You can also set test data to validate the query returns what you expect. I encourage you to adjust some of the different values to better understand the relationship between the query builder and your data.

In the bottom of the right-sidebar, you can also see the executed SQL query generated by the aggregate.

We can also get information about the returned query, such as how many items were returned. Let’s update the Venues list screen to display how many venues there are.

Double-click the Venues screen to open the UI editor. In the left sidebar, you’ll see an option that says “Expression” with an x/y icon. Drag and drop this item right next to the title that says “Venue List” on the screen. This will open the Expression Editor.

In the Expression Editor, the available data from your application is in a tree format. Expand the “GetVenues” aggregate and select “Count.” Use this GetVenues.Count value to create an expression that shows the count value between parenthesis using JavaScript expression syntax.

Publish again and you’ll see the count in the browser next to the title. Aggregates are very powerful, and can be used to perform more complex filtering, joins from multiple data sources, and even calculated queries that generate attributes such as sums or groups of data rows.

Dig deeper into aggregates in the documentation here.

CRUD operations

One other data feature of OutSystems that’s important to mention are the built-in CRUD operations for all entities. You may have noticed these when we first created our Event entity.

CRUD (Create, Read/Get, Update, and Delete) operations are standard operations for working with data in an application, and correspond to SQL operations. These are automatically generated by OutSystems and can be used in the business logic of your app.

When we generated the Venues list and detail screens using our data model, OutSystems also created logic that uses these CRUD operations to add or update new venues to our database. We can trace this flow to see how the data moves across the full stack of our app.

In the Venue Details screen, the “Save” button on our form has a click handler that runs “SaveDetail.”

Digging into this “SaveDetail” Action (you can think of it like a client-side JavaScript function for now), we can see it leverages something called VenueCreateOrUpdate. Again, don’t worry too much about understanding this flow; the important thing to know is that our click handler calls a “function” SaveDetail, which then makes a call to our server using VenueCreateOrUpdate.

Finally, on our server, within the “VenueCreateOrUpdate” action, OutSystems is using the built-in CreateOrUpdateEvent operation to actually write the change to our database.

Having a solid understanding of your data model and how it’s used across the OutSystems app is important to ensuring your app has a strong data foundation early on. You can view the relationships between your data entities at any time in the “Entity Diagrams” section of the Data tab.

This diagram represents the relationships between the different entities – or tables – in your database, as well as references between tables based on keys.

Next steps

This has been a crash course on learning basic SQL concepts using OutSystems! I encourage you to use the free OutSystems personal environment to create an app and explore these data concepts yourself. You can use this Excel file with Venue data, or build something yourself from scratch!

Study Notes: GitHub Foundations Certification Exam

Cecelia Martinez — Tue, 16 Jul 2024 02:48:51 +0000

In February of this year I successfully passed the GitHub Foundations Certificate Exam. I have used GitHub for about five years and am a GitHub Star Alumni, so I felt fairly confident going into the study process. However, there were still some gaps in my knowledge and I wanted to be prepared.

This post is a collection of links, resources, and my notes from the study process. Hopefully it is helpful to you for your own certification journey.

Study Approach
- Exam Guide
- Microsoft GitHub Foundations Course
- Udemy Practice Exams
Notes
- Helpful Docs Links
- Notes from Microsoft Course
  - Git
  - Git terminology
  - Git and GitHub
  - Command Line commands
  - Introduction to GitHub
  - GitHub Flow
  - GitHub Collaboration
  - GitHub platform management
  - Introduction to GitHub’s products
- Notes from Practice Test 1
  - General
  - Access
  - Codespaces
  - Projects
  - CodeOwners
- Notes from Practice Test 2
- Notes from Practice Test 3
- Notes from Practice Test 4
Other Resources

Study Approach

Exam Guide

To start, I reviewed the Exam Guide. This guide has a detailed breakdown of the topics covered on the exam, as well as the percentage weights of the different domains. This was my strategy:

Review the topics underneath each domain
Identify areas where I only had limited knowledge (marked in yellow) or little-to-no knowledge (marked in red)
Assign a comfort level to each domain (red, yellow, or green) based on assumed knowledge of the topics
Evaluate domain percentages to understand where to prioritize studying

This helped me to create a plan on what areas to focus on in preparation for the exam. If you’re curious, this was my personal breakdown before I began studying:

Domain 1: Introduction to Git and GitHub (22%) (GREEN)
- GitHub Entities (RED)
- GitHub Desktop (YELLOW)
- GitHub Mobile (YELLOW)
- Everything else (GREEN)
Domain 2: Working with GitHub Repositories (8%) (GREEN)
- CODEOWNERS file (RED)
- Repo templates (YELLOW)
- Repo insights (YELLOW)
- Everything else (GREEN)
Domain 3: Collaboration Features (30%) (GREEN)
- Issue forms (RED)
- CODEOWNERS file (RED)
- Discussions (YELLOW)
- Notifications (YELLOW)
- Everything else (GREEN)
Domain 4: Modern Development (13%) (YELLOW)
- GitHub Codespaces (RED)
- GitHub Copilot (YELLOW)
- Everything else (GREEN)
Domain 5: Project Management (7%) (YELLOW)
- Difference between Projects and Projects classic (RED)
- Configuration options (YELLOW)
- Template repos (YELLOW)
- Project workflows (YELLOW)
- Project insights (YELLOW)
- Everything else (GREEN)
Domain 6: Privacy, Security, and Administration (10%) (RED)
- GitHub Administration (RED)
- Authentication and Security (YELLOW)
- Everything else (GREEN)
Domain 7: Benefits of the GitHub Community (10%) (GREEN)
- InnerSource (YELLOW)
- Everything else (GREEN)

Microsoft GitHub Foundations Course

There is a recommended free(!) Microsoft GitHub Foundations Course. I did start this course, but felt like a lot of the material covered things I already knew and I grew impatient 😅. However, I recommend it if you are starting fresh or more patient than I am!

You can check out my notes from the sections of the course I did complete below.

Udemy Practice Exams

Instead, I decided to get this practice exam bundle on Udemy. Depending on how you prefer to study, this could be helpful for you. I actually passed the first practice exam, but had EXACTLY a 75%, and wanted to be more confident.

The practice tests not only tell you what questions were correct, but had detailed notes explaining the answers with links to relevant documentation. I hand-wrote notes (transcribed below) for the questions I either got wrong or got correct but had guessed/wasn’t confident in my answer.

Hand-writing the notes helped to reinforce the information in my brain. I also read through the linked docs and took extra notes to clarify what I thought would be important concepts. By the time I took the fourth practice exam, I scored a 93%.

I ultimately passed my certification exam with a score of 90%.

Notes

This section has raw notes from my studies. They are based on my individual learning, and should not be considered a comprehensive study guide because things I already knew are not included. However, they may be helpful for you.

⚠️ Disclaimer: I took my exam in February, so some items may have changed since then! Always refer to the GitHub docs for the most up-to-date information.

Helpful Docs Links

This is a list of links to areas of the GitHub docs I found helpful while studying.

Base Permissions
CoPilot
Automating Projects
Workflow Basics
Organization News Feed
Best Practices for Projects
GitHub Security Features
Issue and pull request templates
Project insights
Projects vs Projects Classic:
- Projects
- Projects Classic
Branch protection rules
Best Practices for Repositories
GitHub Sponsors

Notes from Microsoft Course

Git

VCS - version control system
SCM - software configuration management system
VSC can exist for not-software, VSC is one component of a SCM
Git is distributed, meaning project history is stored locally and remotely
- This is as opposed to centralized, where all project history in only stored on centralized server

Git terminology

Working tree - set of nested directories and files that contain the project
Repository - The top-level directory of a working tree where history and metadata is stored
- Bare repo - isn’t part of a working tree, used for sharing/backup (project.git)
Hash - number produced by hash function that represents the contents of a file, used to determine if a file has been changed
Object - Git repo contains four types of objects, each identified by a SHA-1 hash.
- Blob - contains ordinary file
- Tree - represents a directory, contains names, hashes, and permissions
- Commit - represents specific version of the working tree
- Tag - a name attached to a commit
Commit - either an object (commit) or a verb meaning to make a commit object
Branch - a named series of linked commits
- Head - Most recent commit on a branch
- Main/master - default branch of a repo
- Allow developers to work independently and then merge changes into default branch
Remote - named reference to another Git repo
- Origin - the default remote for push and pull operations created when repo is initialized
Git (command) push (subcommand) —hard (option)

Git and GitHub

Git is a DVCS (distributed version control system)
GitHub is a cloud platform that uses Git as its core technology and acts as the remote repository
Git can also be described as a CLI for managing version history locally
GitHub can also be described as a place to collaborate on shared repositories with issues and pull requests

Command Line commands

git config
- git config —global user.name “USER_NAME”
- git config —list
git init
git status
git add (staging)
git commit
git log
git help
- git <command> —help
git checkout -b branchName is the best way to create and check out a new branch

Introduction to GitHub

How to create a repository
How to add a file to your repository
- Manually in GitHub UI adding file in directory, then typing content, and committing changes directly to a new pull request branch
Gists
- simplified way to share code snippets. Every gist is a Git repo so it can be forked and cloned.
Wiki
- Documentation section included with every GitHub repo
- Used to share long-form content beyond the README

GitHub Flow

Branches
Commits
- Every commit has a unique ID and tracks the time and contributor
States for a file in a repo:
- Untracked - Git unaware of its existence
- Tracked - can be one of the following substates:
  - Unmodified
  - Modified
  - Staged
  - Committed
Pull requests
- Signals commits from one branch are ready to be merged into another
GitHub Flow
- Creating a branch
- Make changes
  - Deploy changes to feature branch to ensure they work in productIon (recommended)
- Create a pull request
- Reviewing and implement feedback
- Approve and merge PR into main branch
- Delete branch

GitHub Collaboration

Issues
- Track ideas, feedback, tasks, or bugs
- Can be created from repo, item in task list, note in project, comment in an issue or PR, specific line of code, URL query
- Only maintainers can assign, add to project board, associate with milestone, or apply a label
Discussions
- For conversations accessible to everyone that aren’t related to code
- Enable Discussions in Settings > Features > Discussions
- Any authenticated user with view access can create a discussion in that repo
- There are default categories, and more can be added with an emoji and name pairing

GitHub Platform Management

Subscriptions and notifications
GitHub Pages
- Static site hosting service from files in a repo

Introduction to GitHub’s products

Personal accounts
- Every person has a personal account
- Can be GitHub Free or Pro
Organization accounts
- Shared accounts for people to collaborate across many projects at once
- Permissions have a tiered approach
- Can’t sign into organization directly
- Personal accounts can be given roles in an organization
Enterprise accounts
- Allow admins to centrally manage policies and billing for multiple organizations and enable inner sourcing between orgs
- Must have a handle, like an organization
- Manage and enforce policies for all orgs in enterprise
GitHub teams
- group of organization members intended to reflect company structure
GitHub plans
- Free for personal and org
- Pro for personal
- Team for organizations
- Enterprise
  - Server (self-hosted)
  - Cloud
GitHub Mobile
- first-party client app
- Can’t approve or merge PRs
GitHub Desktop
GitHub billing is account based, includes subscription and usage-based billing

Notes from Practice Test 1

My notes for each subsequent practice test become less detailed, as I learned more with each exam.

General

cloning = copying ENTIRE repo
forking = create private copy for personal use
template repos can have any files or content
reason: is a way to filter notification (such as searing for only at-mentions)
Tabs on a PR: Conversation, Commits, Checks, Files changed
Can create branch directly from an issue
Repo insights show traffic, projects, and contributor engagement
GitHub topics examples: repo purpose, subject area, affinity groups, community, language, etc.
- labels that create subject-based connections between repos
- Discover similar projects based on topic
Code scanning available on public repos, private requires GitHub Enterprise Cloud with Advanced Security
Copilot analyzes current and related files for context
GitHub limits sizes of files allowed in repos. Enable Git Large File Storage to track large files
GitHub organizations have a news feed that shows:
- Open/closed/merged issues and PRs
- creation/deletion of branches
- Created tag or release
- Comments
- New commits pushed

Access

members of an org = create repos and project boards by default
personal repo permission levels = owners & collaborators
org owners can require members, collaborators, and billing managers to enable 2FA
- If 2FA not enabled, they will be removed from org with no grace period
GitHub Enterprise repo visibility options: private, public, internal
Organization repo roles:
- Read: Recommended for non-code contributors who want to view or discuss your project
- Triage: Recommended for contributors who need to proactively manage issues, discussions, and pull requests without write access
- Write: Recommended for contributors who actively push to your project
- Maintain: Recommended for project managers who need to manage the repository without access to sensitive or destructive actions
- Admin: Recommended for people who need full access to the project, including sensitive and destructive actions like managing security or deleting a repository
Organization roles:
- Owners: Organization owners have complete administrative access to your organization. Should be limited but have at least two.
- Members: The default, non-administrative role for people in an organization is the organization member.
- Moderators: Moderators are organization members who, in addition to their permissions as members, are allowed to block and unblock non-member contributors, set interaction limits, and hide comments in public repositories owned by the organization.
- Billing managers: Billing managers are users who can manage the billing settings for your organization, such as payment information.
- Security managers: Security manager is an organization-level role that organization owners can assign to any team in an organization.
  - In public beta
- GitHub App managers: By default, only organization owners can manage the settings of GitHub App registrations owned by an organization. To allow additional users to manage, an owner can grant them GitHub App manager permissions.
- Outside collaborator: To keep your organization's data secure while allowing access to repositories, you can add outside collaborators. An outside collaborator is a person who has access to one or more organization repositories but is not explicitly a member of the organization, such as a consultant or temporary employee.

Codespaces

can have deep link to create a codespace with pre-configured options
can change display name, shell, machine type, and region
only supports Linux
run in GitHub-owned Azure account (but can be billed to your Azure)
A codespace is a Docker container configured for development run on a GH-managed VM

Projects

Github CLI and GraphQL API
Project insights available for all with write and admin access

CodeOwners

automatically requested for review on PRs
Can also be use for requiring approval from code owner before merge
hover over shield icon on file in GitHub to see code owner
people with write permission to repo can create or edit CODEOWNERS file
- Code owners must also have write permission
requires GitHub Pro, Team, or Enterprise to have code owners on a private repo
defined in a CODEOWNERS file (no extension) in the .github/ , root, or docs/ directory (GH will search in this order for file)
Branch-specific based on branch where file is
syntax is similar to gitignore:

*.js @js-owner // all files ending in .js have user js-owner as code owner
*.txt @octo-org/octoteam // team octoteam within octo-org owns all .txt files
/docs/ @docsowner // all files in docs directory are owend by user docsowner

Notes from Practice Test 2

Add issue forms with YAML form definition file in /.github/ISSUE_TEMPLATE
Form responses converted to markdown and added to body of issue
Project can be organization or user project
Branch protection rules prevent accidental or unauthorized changes to a branch
Two types of project charts: current & historical
2FA methods: TOTP app on mobile/desktop or text message
- Security keys can be added as an alternate 2FA method, NOT primary
Can do web-based code editing in GitHub mobile
- Cannot do automated testing or CI
Innersource: build proprietary software using OSS methodologies
Internal repos let orgs practice innersource
- Requires GH Enterprise Cloud
All enterprise members have read permission to internal repos
Internal repos are not visible to outside collaborators of other org repos
Internal is the default setting for all new repos created in an enterprise org
Up to 10 people can be assigned to an issue or PR
- limited to 1 for private free repos
Templates created from existing repositories have same directory structure, branches, and files
Template can select only default or all branches to copy from original
Security tab includes:
- Security policies
- Advisories
- Dependabot alerts
- Code scanning results
- Secret scanning results
Projects provide more robust integrations vs Projects Classic
Projects (vs. Projects Classic) designed to integrate with existing tools, such as GraphQL API and GitHub Actions
Codespaces can use account secrets as environment variables
Project Layouts: Board, Roadmap, and Table
Docs for name options for pull request templates
PR and issue templates MUST be in the default branch
Projects, issues, and GitHub Actions can be disabled on a repo
Milestones provide visual roadmap to track progress on issues & PRs
Discussions can be pinned
The automatic retention period of up to 30 days for Codespaces can be reduced to save costs
Following an organization lets you see activity like new discussions, sponsorships, and repositories

Notes from Practice Test 3

Going from public to private:
- removes a repo from GitHub Archive Program
- unpublishes any published GitHub Pages
Triage role is for proactively managing issues, discussions, and PRs WITHOUT write access
Org repo roles:
- read
- triage
- write
- maintain
- admin
- Security manager role for org in public beta. Give read access to all repos, write for security alerts, can configure code security settings at org and repo level (Docs reference)
Permanent link can be created for a line or range of lines in a version of a file or PR
On public repos, dependency graph and secret scanning alerts for PARTNERS are always enabled
Codespaces specific secrets are setup in Settings > Code, planning and automation > Codespaces > New secret. Set name, value, and repos with access.
GitHub sponsorship requires a GH-sponsor enabled dev or org profile
- Must contribute to OSS project and live in a supported region
- Up to 10 one-time and 10 monthly tiers
Can mark an issue as duplicate by typing “Duplicate of” and the issue/PR number in body of new comment
- Must have write access
- Can be undone if needed
Max GitHub Project items = 1200
- Max 10,000 archived

Notes from Practice Test 4

Commit vs hash:
- A commit is a specific and immutable snapshot capturing changes made to files, creating a chronological record in version history
- A hash is a number representing the contents of a file or another object
GitHub sponsorships can be paid via Patreon
Bitcoin is not supported for GH sponsors
Owners or admins can be allowed to limit repo visibility changes
Default categories for discussions:
- Announcements
- General
- Ideas
- Polls
- Q&A
- Show & Tell
Workflow triggers:
- Events in repo
- Events outside GH that trigger a repository-dispatch event
- scheduled time
- manual
Organizations can have more than one owner
Owners cannot change their own role, but can change the role of another owner
Enable Feature preview to gain access to Alpha and Beta features
Admin permission is required to enable/disable GH discussions
Security markdown file is for security related communication, such as reporting vulnerabilities
Project Insights not available on Project Classics
Saved replies can contain any text, markdown, and emoji reactions
Maintain role recommended for project managers

Other Resources

If you're looking for more comprehensive exam prep, check out the following resources from FreeCodeCamp:

Happy studying, and good luck!!

Running a Phaser Game on Mobile Devices

Cecelia Martinez — Sun, 05 May 2024 02:21:18 +0000

We have finally arrived at the final part of the tutorial! We’ve come a long way — from scaffolding a Vue Ionic app, building an entire game with Phaser, and connecting the app and game together for a seamless experience.

Now it’s time to take this app from web to mobile. Fortunately, Capacitor, which is built into Ionic, makes this easy. Let’s get started!

Adding iOS and Android Device Support
Running on a Simulator
Running on a Real Device
Persistent High Score Data
Next Steps

Adding iOS and Android Device Support

Using the Ionic CLI that we installed in Part 1, we can run the following commands to add Android and iOS to our project.

ionic capacitor add android
ionic capacitor add ios

However, my favorite way to add iOS and Android device support to an Ionic/Capacitor project is using the Ionic VS Code Extension. This extension has a number of different features and functionality for working with an Ionic/Capacitor app, regardless of whether you’re using Angular, React, Vue, or vanilla JavaScript.

Once you install the extension, you’ll see in the sidebar that it recommends adding Android and iOS to your project.

You can select these options in the sidebar, and the extension will run the CLI commands to add both Android and iOS to the existing project. You’ll now see an android and ios folder in the root directory.

Running on a Simulator

Now, in order to actually build the game for iOS or Android, there are some steps we need to follow.

Create a web build of our app
Sync the web build to the native projects with Capacitor
Create and run the native build for each platform (Android and iOS)

Any time we make a change to our project, we need to re-run these steps so our native app always stays in sync.

The Capacitor documentation runs through the CLI commands and details for these steps, but I prefer to use the VS Code extension.

You’ll see now in the extension sidebar that new commands have been added.

To run on an iOS simulator, we’ll use the following commands in order:

Project > Build
Project > Sync
Run > iOS

When you select Run > iOS, a menu will appear asking to select a device. These correspond to the simulators available on your computer, provided by XCode.

Once you select a device, Capacitor will create a native build of the app that can run on an iOS simulator. Then, it will deploy that build and launch the simulator. This can take a few minutes, but you’ll see updates in the bottom bar of VS Code.

Once the build is ready, the simulator will launch with the app!

You’ll notice the styling is a bit different — this is thanks to Ionic’s adaptive styling, which automatically updates the components for whichever device is used to run the app. Now, our app has a native look-and-feel you’d expect for an iOS app, as opposed to the web browser version.

You can click “Start” and play the game, and see your scores saved. This is a real iOS build of our game, running on an iOS simulator. Success!

You can close the simulator once you’re done to stop the process.

Running on a Real Device

To walk through running the game on a real device, we’ll switch to Android. In the VS Code extension, select “Project > Open in Android Studio”. This will launch the project in Android Studio.

You’ll notice the option to run on an emulator if you have one installed.

Let’s connect our real Android device to run the app and play our game on device as it was intended.

First, you’ll need to ensure the device you have is enabled for development. Go to Settings on your Android Device, then “About phone”, and scroll down to the “Build number”. Tap on the Build number 7 times (you’ll see a pop-up message notifying you that you are enabling developer mode).

Once enabled, you’ll see “Developer options” under Settings > System.

You have two options to add your device:

USB debugging
Wireless debugging

Toggle whichever method you prefer (I selected USB debugging) and accept. Once connected, you’ll see your physical device available in the Device Manager in Android Studio.

Select the device and click the green arrow “Play” icon button to run your app.

Now you can play your game using touch controls on a real device!

Here is the git commit with changes for this section.

Persistent High Score Data

We have one more thing to do.

Right now, our data storage of the high scores is not persistent. Once our browser or app closes, we lose our history of high scores. For this tutorial, let’s leverage local storage in the browser or on the device.

Capacitor provides plugins for us to make this easier. We’ll use:

CapacitorisNativePlatform() method to determine which storage method to use.
Capacitor Preferences API for light storage of key/value pairs.

Note: The Preferences API is only meant for light storage, so we’ll only keep 10 scores at a time. To save more data, use an actual storage solution or database.

First, we’ll install the Preferences API by running the following command in the terminal.

npm install @capacitor/preferences

Note: You will need to be on Capacitor 6 to install the latest version of the Preferences API.

Next, let’s update the addGameScore method inside our App.vue.

const addGameScore = (score: number) => {
  if (gameScores.value.length >= 10) {
    gameScores.value.shift()
  }

  gameScores.value.push(score)

  const scoreString = JSON.stringify(gameScores.value)

  saveGameScores(scoreString)
}

With this change, we are:

Ensuring we only save 10 scores at a time
Creating a JSON string of our scores array
Passing the score string to a new function, saveGameScores()

Now let’s define saveGameScores() in the same component.

const saveGameScores = async (scoreString: string) => {
  if (Capacitor.isNativePlatform()) {
    await Preferences.set({
      key: 'gameScores',
      value: scoreString
    })
  } else {
    localStorage.setItem('gameScores', scoreString)
  }
}

This function takes the JSON string of our scores array and saves it to either device storage OR browser local storage, depending on the return value of Capacitor.isNativePlatform().

Finally, we need to check if there are any scores stored in storage when we launch the app so we can load the scores. We’ll do this in a new loadGameScores() function, again in the same App.vue component.

const loadGameScores = async () => {

  let savedScoreString = ''

   if (Capacitor.isNativePlatform()) {
    const result = await Preferences.get({ key: 'gameScores'})

    savedScoreString = result.value || '';
   } else {
    savedScoreString = localStorage.getItem('gameScores') || '';
   }

   if (savedScoreString) {
    gameScores.value = JSON.parse(savedScoreString)
   }
};

...

loadGameScores();

This function again checks which platform the game is on, then loads scores from either device storage or browser local storage. You’ll need to make sure you run loadGameScores() in the App.vue component so it runs every time the app launches.

We can confirm this is working in the browser by checking local storage, where we can see the scores array is being stored as a string. Now if we close the browser and reopen, our score history data is persistent!

We can also test this on our Android mobile device. Rebuild, sync, and run the app. Play a few games, then close out the app completely by swiping up on the app from the App Overview carousel view.

Reopen the app, and you’ll see the saved scores load!

Again, this is not a production solution, but it shows how you can leverage Capacitor to interact with device functionality, no matter what platform your app is running on.

Next Steps

Congratulations, we made it! You have built a game using open source web technologies that can run on real native mobile devices. I encourage you to continue building:

Add more game functionality or new levels
Connect to a persistent database for score storage
Explore new Phaser features like the Phaser CLI and Sandbox
Make new games!

By the way, I’ll be streaming more web and game development on Twitch weekly, so follow me on Twitch to get notified when I’m live. See you there!

Working with Scenes and Data in Phaser

Cecelia Martinez — Sun, 05 May 2024 02:10:02 +0000

It’s been a long time since I returned to this Phaser tutorial, and for that I apologize! A job role change caused this to fall through the cracks, but I wanted to make sure I wrapped things up for those following along.

As a disclaimer, some things have changed in the months since Part 2, including a major update of Capacitor to version 6, as well as some cool things happening with the new Phaser CLI. I’ll be digging more into these in future posts now that I’m back up and running. However, for the purposes of finishing this series, I’ll stay with the setup started in Part 1.

Now, enough time has passed already, so let’s get to it!

In this post in the series, we’ll create our ScoreScene and set up the other views in our Vue app: About and Scores. This will involve using events to access the scores from the Phaser game in the parent Vue app to create a “High Scores” page.

Creating the Score Scene
Switching Scenes
Passing Data Between Scenes
Passing Score Data from Phaser to Vue
What’s Next

Creating the Score Scene

This scene will display the player’s final score and display text letting them know they can tap to restart. We already created a ScoreScene.js file within our game directory in Part 2, and this is the file we’ll be using.

Right now, the file is empty. We’ll start by scaffolding out the basic structure of a Scene file.


import { Scene } from "phaser";

export class ScoreScene extends Scene {
    constructor () {
      super({ key: 'ScoreScene' })
    }
    create () {

    }
  }

Then, we’ll set some values based on the screen size, like we did in the Play Scene. We’ll set the screenWidth, screenHeight, and the horizontal center of the screen with screenCenterX.

This will allow us to display text in the correct location on the screen. We’ll add “Game Over” text to the center like we had in our Play Scene using the gameOverText variable, as well as some animated text indicating the player should tap to restart with the restartText variable.

For the animation, we’ll use a tween that targets the restartText and repeatedly eases the text to 1.5 times larger and back to its original size on a loop. This will create a pulsing animation effect.

create () {
        // sets game values based on screen size
        this.screenWidth = this.scale.width;
        this.screenHeight = this.scale.height;
        this.screenCenterX = this.screenWidth / 2;

        // adds Game Over text to middle of screen
        this.gameOverText = this.add.text(this.screenCenterX, this.screenHeight / 2, 'Game Over', { fontSize: '32px', fill: 'red' }).setOrigin(0.5, 0.5);

        // adds Tap to Restart text underneath Game Over text
        this.restartText = this.add.text(this.screenCenterX, this.screenHeight / 3 + 200, 'Tap to restart', {fontSize: '15px', fill: '#ffffff'}).setOrigin(0.5, 0.5);

        // adds pulsing animation to restart text

        this.tweens.add({
            targets: this.restartText,
            scaleX: 1.5, // Scale it to 150% of its original size
            scaleY: 1.5,
            duration: 1000, // Duration of one pulse
            ease: 'Sine.easeInOut', // Smooth easing
            yoyo: true, // Reverse the tween on completion, creating the "pulse" effect
            repeat: -1 // Repeat forever
        })

    }

We’ve created our scene, but it’s not connected to the rest of our game. Next, we’ll learn how to switch between our Play Scene and Score Scene in Phaser.

Here is the git commit with the changes for this section.

Switching Scenes

Phaser has a Scene Manager that contains built-in methods for managing the scenes in your game, including starting, stopping, switching, sleeping, and more. You can view the documentation here to see a full list of the available methods. For our game, we want to do the following:

Stop the Play Scene when the game is over, and start the Score Scene
Stop the Score Scene when the player taps to restart, and start the Play Scene

First, let’s update our Play Scene. Right now, the logic to restart the game is inside the overlap we declared for when our player hits a bomb (which ends the game). It looks like this:

// Adds overlap between player and bombs

  this.physics.add.overlap(this.player, this.bombs, function(object1, object2) {
    const bomb = (object1.key === 'player') ? object1 : object2;
    bomb.destroy();
    createStarLoop.destroy();
    createBombLoop.destroy();
    this.physics.pause();

    this.gameOverText = this.add.text(this.screenCenterX, this.screenHeight / 2, 'Game Over', { fontSize: '32px', fill: 'red' }).setOrigin(0.5, 0.5);

    this.input.on('pointerup', () => {
      this.score = 0;
      this.scene.restart();
    })
  }, null, this);

Instead of displaying the “Game Over” text and directly restarting in the same Scene, we’ll instead stop the Play Scene and start the Score Scene. Your overlap should now look like this:

this.physics.add.overlap(this.player, this.bombs, function(object1, object2) {

    // Destroys bomb that triggered overlap
    const bomb = (object1.key === 'player') ? object1 : object2;
    bomb.destroy();

    // Stops game object generation, pauses physics, and resets score to zero
    createStarLoop.destroy();
    createBombLoop.destroy();
    this.physics.pause();
    this.score = 0;

    // stops Play Scene and starts Score Scene

    this.scene.stop('PlayScene')
    this.scene.start('ScoreScene');

  }, null, this);

However, our game.js file does not currently import the ScoreScene, so Phaser does not know about it. Update your game.js with an import statement for ScoreScene, and change the scene property in the launch function and pass an array with both scenes instead.

import { Game, AUTO, Scale } from "phaser";
import { PlayScene } from "./PlayScene.js";
import { ScoreScene } from "./ScoreScene.js";

export function launch() {
    return new Game({
      type: AUTO,
      scale: {
        mode: Scale.RESIZE,
        width: window.innerWidth * window.devicePixelRatio,
        autoCenter: Scale.CENTER_BOTH,
        height: window.innerHeight * window.devicePixelRatio,
      },
      parent: "game",
      backgroundColor: "#201726",
      physics: {
        default: "arcade",
      },
      scene: [PlayScene, ScoreScene]
    });
  }

If you save your changes and run the game, when your player is hit by a bomb, the scene will change to the Score scene! Let’s add similar logic to the Score scene to start a new game.

Put the following code inside the create() block in ScoreScene:

// Add pointerdown handler to restart game
this.input.once('pointerdown', () => {
        this.scene.stop('ScoreScene')
        this.scene.start('PlayScene')
});

We can now seamlessly switch between scenes to end and start a new game!

Here is the git commit with changes for this section.

Passing Data Between Scenes

Right now, our Score Scene isn’t very exciting. Let’s make it more fun by displaying the final score, along with a rank for that score to let the player know how they did. To do this, we’ll need to pass the score from the PlayScene to the ScoreScene.

In Phaser, we can pass an object as the second parameter to the start() method to pass data to the new scene. Update the start method in the overlap of the PlayScene to add the score data.

Note: You’ll also need to REMOVE the line that reset the score to zero, otherwise you’ll just pass zero every time! Because we are now stopping the scene, the score will automatically be reset to zero when a new PlayScene is started again.

   // stops Play Scene and starts Score Scene

    this.scene.stop('PlayScene')
    this.scene.start('ScoreScene', {score: this.score});

To make use of this data being passed to the ScoreScene, we’ll use an init() block in ScoreScene to capture and assign the score data.

Add the following block to your ScoreScene class, above the create() block:

 init(data) {
        this.finalScore = data.score;
}

This takes the score passed to the start() method and assigns it to a new variable in the scope of our new scene, this.finalScore. We can now use this to display text with the score in the scene.

Let’s also calculate a rank based on the score and display that on the screen. Here is the scale I used, but feel free to have fun with yours!

The following should all be within the create() block on the ScoreScene.

// calculates rank based on score
this.scoreRank = this.finalScore > 500 ? 'A: Prime Protocol!' : this.finalScore > 300 ? 'B: Efficient Engine' : this.finalScore > 100 ? 'C: Routine Maintenance' : 'F: Gears Jammed'

// adds final score text to screen
this.scoreText = this.add.text(this.screenCenterX, this.screenHeight / 2 - 100, 'Score: ' + this.finalScore, {fontSize: '20px', fill: 'green'}).setOrigin(0.5, 0.5);

// adds score rank text to screen
this.rankText = this.add.text(this.screenCenterX, this.screenHeight / 2 - 50, 'Rank ' + this.scoreRank, {fontSize: '20px', fill: '#ffffff'}).setOrigin(0.5, 0.5)

Now, our Score scene is a lot more interesting.

You can use this method of passing data via the start() method and retrieving it in the init() block to transfer data between your scenes as needed. This is helpful if you are not using global state for your game, or only need to pass some data that does not need to be stored in global state.

Here is the git commit with changes for this section.

Passing Score Data from Phaser to Vue

So now we know how to pass data between scenes within Phaser, but what about getting the data out of our game and back to our Vue app? Let’s tackle that in this section.

First, let’s update our Phaser game to emit the score data. We can do this using a JavaScript CustomEvent constructor, which you can read more about here.

When the game ends, we’ll create a custom event containing the score data from our game, and dispatch it to the window. Because Phaser is based on JavaScript, we can use JavaScript constructors like CustomEvent() right within our game code.

Add the custom event within the overlap for your bombs and player, in the same place where the rest of our game over logic is handled. Make sure it’s declared before you stop the scene. Your code should look like this:

  this.physics.add.overlap(this.player, this.bombs, function(object1, object2) {

    // Destroys bomb that triggered overlap
    const bomb = (object1.key === 'player') ? object1 : object2;
    bomb.destroy();

    // Stops game object generation, pauses physics, and resets score to zero
    createStarLoop.destroy();
    createBombLoop.destroy();
    this.physics.pause();

    // When the game ends, dispatch the event with the score and rating
    const gameEndEvent = new CustomEvent("gameEnded", {
       detail: { score: this.score }
    });

    window.dispatchEvent(gameEndEvent);

    // stops Play Scene and starts Score Scene

    this.scene.stop('PlayScene')
    this.scene.start('ScoreScene', {score: this.score});

  }, null, this);

  }

We are now emitting an event called gameEnded that contains the score data. The next step is to update our Vue app to handle this event.

We are going to accomplish two tasks:

Add functionality within our PhaserContainer.vue to handle the event emitted by Phaser
Use Provide/Inject in Vue to update and display a list of scores

First, add the following code to the <script> tag in PhaserContainer.vue , after the handleClickStart() function:

// adds score when event emitted from Phaser
function handleGameEnded(event: Event) {
  const customEvent = event as CustomEvent;
  addGameScore(customEvent.detail.score);
}

// adds event listener for gameEnded event
onMounted(() => {
  window.addEventListener("gameEnded", handleGameEnded);
});

// removes event listener for gameEnded event
onUnmounted(() => {
  window.removeEventListener("gameEnded", handleGameEnded);
});

You’ll need to add onMounted and onUnmounted to your Vue import statement as well:

import { onMounted, onUnmounted, ref } from 'vue'

You’ll notice there is a addGameScore() function being called within the “gameEnded” event handler. This will be part of our Provide/Inject in Vue. Let’s move to the App.vue component to add this.

Within the <script> tag, add the following code:

import { provide, ref} from 'vue';

const gameScores = ref<number[]>([])

const addGameScore = (score: number) => {
  gameScores.value.push(score)
}

provide('gameScores', {
  gameScores, addGameScore
})

This simply creates an array ref to store our scores, and defines a method to add new scores to the ref. We then provide both the gameScores ref and the addGameScore method to our app.

Let’s also create a types.ts file in the src directory, and export an interface for our Provider.

export interface GameScoresProvider {
    gameScores: number[];
    addGameScore: (score: number) => void;
  }

Back in our PhaserContainer.vue, we can now inject the addGameScore method. Make sure to add injectto your Vue import statement.


import { GameScoresProvider } from '@/types'

// injects addGameScore method
const { addGameScore } = inject<GameScoresProvider>('gameScores')!;

Finally, in our ScoresPage.vue view, we’ll display the list of scores. Update the template in your file to the following:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Scores</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <h3 v-show="!gameScores.length">No scores yet!</h3>
      <ion-list>
        <ion-item v-for="(score, index) in gameScores" :key="index">
          <ion-label>
            <h2>Score: {{ score }} </h2>
          </ion-label>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

And update the <script> tag to the following:

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel } from '@ionic/vue';
import { inject } from 'vue'
import { GameScoresProvider } from '@/types'

// injects gameScores array ref
const { gameScores } = inject<GameScoresProvider>('gameScores')!;

</script>

Now, as we play our game, we’ll see the list of scores update in the Scores tab!

As a final step, add some text to your AboutPage.vue. It can be whatever you want!

Here is the git commit with the changes for this section.

What’s Next

We now have ourselves a game app that launches your game, navigates between scenes within Phaser, and displays a list of your scores within the app. The next (and final) step is to add support for iOS and Android so you can play the game as intended — on a mobile device!

Let's go!

How I became low-code certified with OutSystems

Cecelia Martinez — Thu, 25 Apr 2024 17:22:18 +0000

This month, I followed in the footsteps of many other OutSystems developers and completed the exam to become a certified Associate Reactive Developer. This exam focuses on the fundamentals of OutSystems reactive web and mobile application development, and is for developers new to the OutSystems platform.

However, just because it is for new OutSystems developers, does not mean it’s an easy exam. Even with my traditional development experience, I had to study to be successful. Even though OutSystems is a low-code platform, it requires understanding of data structures and relationships, building component-based user interfaces, constructing business logic and control flows, and understanding events and application lifecycle management.

Here are some of my takeaways from preparing for the exam, and tips to help you prepare for and pass your own certification journey.

Understanding the Exam
- Exam Topic Breakdown
- Question Format
- Applied Knowledge
Learning the Material
- Developer School
- Online Training
- Hands-on Learning
Preparing for the Exam
- Question Practice
- What to Expect
- Test Tips
Continuing Your Journey

Understanding the exam

The first step in knowing what you’re getting yourself into! Even if you’ve taken certification exams before, each once will have its specific format and approaches to testing your knowledge of the material. Start by understanding what the exam will entail so you can best prepare.

Exam Topic Breakdown

The Exam Details on the certification page includes a PDF entitled “Detail Sheet”, which contains important information about the exam. The exam consists of 50 questions, and a 70% score (35 correctly answered questions) is required to pass.

Pay close attention to the Exam Topics breakdown chart in this document. I referred to it often, as it contains what percentage of questions are asked about certain topics. I used this to develop my study plan.

My strategy was to start with the topics that had the highest percentage of questions on the exam. These include Screen Widgets (16%), Aggregates (12%), Logic Flows & Exception Handling (10%), and so on. After my initial completion of the Developer School and Training (more on that later), I went back through the topics and ensured I had a strong understanding of the highest percentage topics before moving on to the next one. This meant I was spending my study time efficiently.

Question Format

It’s also important to know what to expect from the question format. This is where the sample exam, also included in the Exam Details, is helpful.

All questions on the exam are multiple choice, with four options and only a single correct answer. Many times, two or more of the options will seem very similar, or like they could both be correct. It is important to read the question and options very carefully to identify which answer is the right one.

Many questions will ask “Which of the following is correct?” or “Which of the following is the best way to do something?”, and these can be tricky. Sometimes an option will be correct, but it is not the best answer. Take your time and make sure you understand what the question is asking.

Applied Knowledge

The questions on the exam are focused on applied knowledge. This means that you will not see questions like, “What is an entity?” or “What are the three types of joins in an aggregate?” Instead, you will be presented with scenarios, and must apply what you learned about entities and joins to find a solution. You may be asked what is the expected output for a screenshot of an aggregate, or asked how to change a given logic flow to produce a different result.

This is why memorizing terms from the training is not enough. You will need to fully understand the concepts of OutSystems and get hands-on practice with building reactive web and mobile applications to be successful.

Learning the material

Fortunately, OutSystems provides you with all the resources you need to learn the material for the Associate Reactive Developer certification exam. Whether you prefer live training or online training, OutSystems has options for you. To complete the training, make sure to sign up for a free Personal Environment to explore the platform, complete exercises, and build applications.

Developer School

I attended an OutSystems Developer School to prepare for the exam. This free program from OutSystems is for those with previous development experience who want to learn OutSystems quickly and take the Associate Reactive Developer exam. It is a great option if you already have development experience and are committed to spending 35+ hours on live, remote training.

The training takes place over two weeks, and includes live instruction, a chance to ask questions of an OutSystems expert, additional exercises, and hands-on project work. It also includes a certificate voucher to take the exam for free as long as you meet the participation requirements. The voucher must be used within 30 days so you should be prepared to dedicate time to studying immediately after the school completes.

There are sessions every quarter in three regions. You can apply online here for an upcoming session.

Online Training

Everything covered in the exam is in the free online training under the “Becoming a Web Developer” Guided Path. I actually completed the training in addition to the Developer School to reinforce my learning and to complete the additional quizzes and exercises included in the online training.

I highly recommend completing the training even if you do attend a Developer School. The more you expose yourself to the material and gain hands-on experience with Service Studio and the OutSystems platform, the more you will understand how to actually apply the knowledge in a way that is needed to answer the exam questions.

Hands-on Learning

Speaking of hands-on learning, from my experience, only completing the exercises in the online training is not enough to truly cement the concepts in your brain. Especially if you only follow the how-to instructions. I highly recommend spending time in Service Studio building out applications on your own so that you can explore the platform and learn how to solve problems on your own.

Decide on an application you’d like to build, and work through the concepts you are learning in the training. Start by adding some data entities and creating relationships between them. Then create some screens using widgets, and display data with aggregates. Add form validation and use Client and Server actions to update data in your database. Create a block to reuse in your application, and leverage an event with a handler. Slowly add features to your application based on what you are learning at that time. This will build the experience you need to recall the information when you’re nervous during the exam.

For my study, I actually built a flashcard application to help me study. I wrote practice questions based on what I was learning, and then built an app in OutSystems to display the questions and answers, and keep track of my score. This helped to reinforce all the concepts I was learning and give me hands-on practice.

Preparing for the exam

As you get closer to the date of your exam, there are some tactical approaches to help you best prepare.

Question Practice

You’ll definitely want to get some practice answering questions in the same format as the exam. This is a little difficult because the sample exam included in the Exam Details only has 20 questions. However, I was able to pass the exam without using paid practice tests from other sites by creating my own practice questions.

Now that I have actually taken the exam, I realize that the practice questions I wrote did not quite match up with the difficulty of the real exam. However, by going through the process of writing questions, I forced my brain to think about the material in different ways, and how I would apply that knowledge in a test format. This helped me get additional practice answering test questions, even if they were not exactly the same as what ended up being on the exam.

What to Expect

If you are taking the exam via an online proctor, read the instructions very carefully, as there are strict security measures you must follow. You must have a dedicated space to take the exam where nobody will enter (including any pets!) You will also be expected to show your desk and the room on camera, turn out your pockets, and more. Do not take these requirements lightly – they can and will stop your exam for any suspected violations.

Keep in mind that once you start the exam, you will not be able to leave the camera or take a break until you are finished. You also cannot have any water or food, so make sure you are ready before starting.

Note: The exam experience may be different if you complete it at a testing center. Read the instructions when you schedule!

Test Tips

Once the exam begins, there is a tutorial that shows you how to use the exam platform. I recommend using the strikeout and flag features to your advantage during the test.

The strikeout feature lets you mark answer options that you think are incorrect. This does not actually prevent you from selecting it as an answer, it is just a visual cue to help you narrow down the available choices. I recommend using this to strike out the answer options that you know right away are wrong. This can help you focus on reading the questions carefully.

You can also flag questions that you’d like to return to before submitting the exam. This is helpful in two ways. First, you can mark questions that you aren’t confident in your answer, and then come back to review. This can be helpful in the beginning of the exam when you’re nervous, or, you may see something in a different question that jogs your memory about a topic covered in a previous question.

I also used the flag feature to help me keep track of my potential score. I marked the questions where I wasn’t confident in my answer. As I progressed through, I periodically calculated how many of the questions I had flagged vs. how many questions I had answered. I knew I needed a 70% to pass, and this helped me gauge how I was performing against that benchmark.

Overall, take your time. Read each question and the options carefully, review all the information on screen shots, and go back to previous questions if needed. You have two hours for the exam, so use it wisely, and good luck!

Continuing your journey

Once you’ve passed the exam, you are a certified Associate Reactive Developer! It’s a great achievement that marks the start of your low-code journey with OutSystems, but it’s just the beginning. A good next step is to focus on specializations in Front-end, Mobile, or Web, or pursue the Associate Tech Lead certification. Whatever path you choose, OutSystems has training resources and a strong community of developers to help support you.

The DevRel Guide to Business Jargon

Cecelia Martinez — Mon, 25 Mar 2024 16:04:27 +0000

Thank you so much to @SylwiaVargas and @MelanieCrissey for their help with this guide!

Recently I participated in a LinkedIn Live Audio event about “Tech Conference Speaking: Impact and Measures”.

During the discussion, a point came up that not all developer relations professionals are working within marketing, or necessarily interact with some business and marketing “jargon”. However, it can be helpful to “speak the language” of teams like marketing or sales to have more productive cross-functional conversations and make sure your goals and priorities are aligned with these teams.

I’m pretty comfortable (maybe too comfortable 😅) with marketing and business jargon, due to my MBA in Marketing and experience working with marketing, sales, and customer success teams. Understanding these metrics can help you better understand what the overall business goals are for your company. This means you can better ensure your DevRel activities are contributing to these goals, AND help you communicate HOW they contribute.

So if you’re working in (or interested in) DevRel and only know TOFU as a food or ARR as something a pirate would say, here is a semi-comprehensive guide on some of the business and marketing terms you may come across.

TAM (Total Addressable Market)
Ideal Customer Profile/Personas
DAU/MAU (Daily/Monthly Active Users)
TOFU/BOFU (Top/Bottom of Funnel)
ARR (Annual Recurring Revenue)
New Logos
Pipeline/Opportunity
Conversion Rate
CAC (Cost to Acquire a Customer)
CLV (Customer Lifetime Value)
Churn
NDR (Net Dollar Retention)

TAM (Total Addressable Market)

This metric, measured in dollars, represents the total potential opportunity for your company if every single potential customer that could get value from your product purchased it.

This is used to demonstrate the potential value of the company overall, and is more a metric that’s helpful for investors. It can be helpful to understand though if you are tasked with supporting how much of your total addressable market you’re able to actually attain.

Ideal Customer Profile/Personas

Let’s start with personas. Personas are fictional descriptions of potential users, specifically PEOPLE users, of your product. A persona could be defined using demographic information like job role, seniority level, and technology used, but also includes traits, behavior, and motivations. Personas should be specific (“web developer” is not a persona on its own) and you shouldn’t have too many that you are targeting.

Understanding which personas your product and marketing teams are targeting can be helpful to designing resources and experiences that align with the expectations of the real people represented by the fictional personas. If your product team is building a tool designed for engineering leaders that prefer control and customization for complex use cases, but you only have opinionated getting-started tutorials for fun use cases, then you likely have a misalignment on personas.

Ideal Customer Profile refers to the qualities that make up the type of purchaser most likely to benefit from your product (and therefore pay money for it). It is usually a company, but if your product is also used by individuals it could be a solo dev or entrepreneur.

ICP as a company is primarily relevant for products designed for businesses, which most developer tools are. While personas are based on demographics and human traits, ICPs are based on firmographics, things like company size, industry, organizational structure, and annual revenue. Knowing your ICP can be helpful when planning events and content as a DevRel team. Based on your ICP, you may target events that are more likely to have attendees that work at startups vs enterprises, for example.

DAU/MAU (Daily/Monthly Active Users)

If your company is focused on user growth and consistent usage of the product, you may need to track Daily or Monthly Active Users. This is the number of users that interacted with your product in a given time frame.

This is important if users get more value (or spend more money) based on how often they use your product. If your product is an analytics dashboard and you have 100,000 users, but only 5 active users checking the dashboard on a given day (5 DAUs), that could definitely be a problem.

However, if your product is an SDK that is integrated once per project, it wouldn’t make sense to track this metric, as developers don’t need to interact with your SDK on a daily or even monthly basis to get value.

DAU/MAU metrics can signal a growing, active community for your product. You will often see social media or mobile app products use DAU/MAU metrics. For example, this tweet about DAUs for various social media sites:

TOFU/BOFU (Top/Bottom of Funnel)

Both these terms are related to the concept of the “sales funnel”, or also called the "marketing funnel". The sales funnel is a metaphorical journey that potential customers move through.

Some sales funnels end when the customer makes a purchase, however I prefer funnels that also include stages for ensuring customers stick around (loyalty) and even refer others to your product (advocacy).

It’s described as a funnel to represent that there are much more potential customers at the beginning of the process (the wide open Top of the Funnel), but then prospects drop off during the journey, and you end up with much fewer actual paying customers (the narrow spout at the Bottom of the Funnel).

Imagine you start with 100 developers that have just found out about your product for the first time. This is the VERY top of the funnel. 20 drop off because they don’t have a need for it. Then another 30 drop off because their project isn’t a good fit. The remaining 50 are further in the funnel, and are evaluating the product. They dig around the pricing page, try out your “hello world”, maybe get a demo from sales. Another 30 drop off here for various reasons, but 20 convert to paying customers. Sweet! Unfortunately, 10 cancel their account within the first year. So you have 10 left at the bottom of the funnel.

Now the company needs to keep these 10 as customers and encourage them to increase their spend with more users or other upgrades. You may even encourage these customers to refer others through ambassador or partner programs.

This is the bottom of the funnel. The idea is that you need to fill the funnel as much as possible at the top to get the number you need at the bottom, because you’ll lose most along the way.

You may also see "MOFU", or "middle of funnel". This can be helpful if you have a longer, more complex funnel and want to specify steps in the middle of that process vs. just top and bottom.

To recap:

TOFU: Activities where the goal is to attract many potential customers to the beginning of the sales process. These are awareness-driving activities to reach developers who have never heard of your product before.
MOFU/BOFU: Activities that are designed to encourage free users to convert to paying customers, OR to get existing customers to expand their current usage. These could be things like tutorials for advanced use cases or supporting your community of developers.

ARR (Annual Recurring Revenue)

This is a term used by SaaS (or other XaaS) companies, otherwise known as companies that have a subscription model for their software or infrastructure product. It is the amount of money expected to come in during the year from subscriptions. Broken down:

Revenue: money coming in
Recurring: money coming in that is repeated, not a one-time purchase
Annual: Repeated money coming in over the course of a year

For most companies past seed stage, ARR is going to be the most important metric that all other goals roll up into.

You may see some variations, including “new ARR”, which refers to ARR only from new accounts in a given time frame, or “total ARR”, which includes new and existing customers.

New Logos

This isn’t necessarily a metric, but a phrase you may see. It refers to the number of new customers brought on, but specifically business customers (hence the term “logo”, because companies have logos). This could be a vanity metric, but often will be used to legitimize the product, especially if the logos are well-known, reputable companies.

Sometimes, your sales team may negotiate to use the business customer’s logo on your website. Other times there may be a reference like “trusted by thousands of companies” or “used by Fortune 100 companies” in your marketing. Internally, it could be used by sales teams to signal growth, or there could be a goal to sign 50 new logos in a year, for example.

Pipeline/Opportunity

These terms are typically used by managed sales teams to represent the potential incoming sales amount measured as a dollar value. By managed sales, I mean typically larger enterprise deals that are moved along through the sales process by an account executive.

An opportunity is calculated based on the expected dollar amount of the sale (opportunity size) adjusted by the probability the deal will actually close. Typically the probability increases the further along the sales process.

The pipeline refers to the total sum of all the probability-adjusted opportunities currently active and waiting to close.

Sometimes, DevRel activities can be attributed to specific opportunities. For example, if you give a demo at a conference booth or create a piece of content that results in a sales lead. Some DevRel teams may track influenced opportunities or even total influenced pipeline.

Conversion Rate

This is the percentage of free users that convert to a paid account. This can be helpful to understanding a few things:

Does your product provide value users feel is worth paying for?
Are you bringing the right users into your pipeline?
Are there blockers (technical, pricing, marketing) that keep your users from upgrading to paid?

For example, if you are able to attract 1000 free users, but only 1 ends up paying you, that represents a conversion rate of 0.1%. A low conversion rate can be a sign of trouble with your product or developer journey, or that you may be targeting the wrong personas.

CAC (Cost to Aquire a Customer)

This is the amount a company spends to bring on a new customer. It is typically calculated by taking the total spend on customer acquisition (sales, marketing) and dividing by the number of customers acquired. So if you spend $100k and acquire 100 customers, you are spending $1000 to acquire a single customer. The amount spent on DevRel activities rolls up into the CAC. The goal is to keep this number as low as possible, but definitely lower than the customer lifetime value, which we'll cover in a moment. This metric may become important to you as a DevRel professional if it’s too high. You may have a harder time justifying budget spend or may need to explore alternative solutions for bringing on customers that cost less.

CLV (Customer Lifetime Value)

This is the amount of money spent by a customer over their lifetime as a customer. Let’s say you bring on a customer and they have the following spend:

Year 1: self-serve individual plan, $120 ARR
Year 2: upgrade to self-serve team plan, $600 ARR
Year 3: upgrade to enterprise plan, $5k ARR
Year 4: expand plan and adds more users, $8k ARR
Year 5: customer churns, $0 ARR

The CLV is $13,720. So if you spent $1k to acquire this customer, you wouldn’t see a return on your investment until year 3, but overall would more than out-earn the CAC. This is why preventing churn is so important, because if a customer churns too early, it severely limits the CLV and overall return on investment to acquire that customer.

Churn

Churn is another word for cancellations, represented as a percentage rate. Meaning, what percentage of customers who subscribe end up canceling their account? Preventing churn is typically a key focus for Customer Success teams, but preventing churn should be the responsibility of all teams that interact with users, including DevRel. If churn is high, it’s important to understand why, and how a cross-functional team like DevRel could help.

Are there insufficient resources for users to be successful with the product? Does the product not work as expected? Is feedback from users getting back to the product team to make improvements? Does the user community need more support?

It’s more expensive to bring on a new customer than to retain an existing one. So if you are great at bringing in users but have high churn, your CAC will be too high and CLV too low, making it much more difficult to achieve profitability for the business.

NDR (Net Dollar Retention)

One more metric that is related to CLV and churn is Net Dollar Retention. This term refers to how much of each dollar you bring in is retained over time. It is a percentage and can be impacted negatively by churn or downgrades and impacted positively by upgrades or other expansions.

For example, if you bring in $100k in base ARR in one year but:

$20k is lost through churn/downgrades
$15k is brought in through upgrades/expansions

You have retained $95k of the $100k, resulting in a 95% NDR.

As you can imagine, a positive NDR is ideal, and if not, then as close to 100% as possible. Again, this metric is typically important to Customer Success teams, but could be related to activities related to DevRel, such as community engagement.

Recap

This list addresses some of the most common terms you’ll hear across the developer journey, as well as across different functions in your organization. It is by no means comprehensive, but should give you a good initial grasp on the business vocabulary and concepts you’ll encounter in DevRel when collaborating with other teams. Every company approaches DevRel differently, so you may end up focusing on some metrics more than others. I’d recommend setting up meetings with team members in Marketing, Sales, and Customer Success to better understand what metrics are important to them, and get a sense of how your goals as DevRel can work complementary to their efforts.

Did I miss any terms? Any of these that should be retired? Let me know in the comments!

What is your speaker mission statement?

Cecelia Martinez — Tue, 12 Mar 2024 21:25:51 +0000

How many of you have a speaker mission statement? Whether you are a regular speaker due to the nature of your job (looking at you, DevRel folks) or if you only speak occasionally, I recommend spending some crafting a mission statement for why and how you speak to audiences.

What is a speaker mission statement?

About two years ago I came up with this idea, and it has helped me considerably with my approach to developer education. My mission statement is this:

It could be something technical like how to speed up mobile builds with caching, something more strategic like how to decide which testing approach to use or even a better understanding of the pros and cons of a larger concept like implementing automation. I always check my talk submission against my mission statement and make sure it passes the test before sending.

Yours could be something like:

Everyone who attends my talk will have fun while learning something new
Everyone who attends my talk will see first-hand live coding to gain deeper knowledge of how a tool or concept works
Everyone who attends my talk will hear thought-provoking insights to improve how they lead a team

Why a speaker mission statement is important

If you have a speaker mission statement, suddenly the process of writing abstracts becomes less overwhelming. It gives you clarity into what your goal should be, and over time it will also help you develop a specific style and niche as a speaker. This is true even if the topics you speak on vary wildly.

For example, I’ve talked about automated testing, open source, debugging, Vue, React, cross-platform mobile development, CI/CD, GitHub, tech careers — but with every talk, people can expect to walk away with something actionable that will make their developer experience better (hopefully 😅).

It also ensures that you get joy out of speaking, because it means the work that you are doing aligns with your values. Your speaker mission should reflect what you believe is important about why we get up on stage (or on webcam) and share knowledge. By giving talks that is in service of that mission, you are more energized and motivated by your work, which can help ease the risk of burnout.

Crafting your own speaker mission statement

If you aren’t sure where to start, consider these questions:

What are some of the best talks you’ve seen? What made them special or valuable to you?
What kind of impact do you want to have on your audience? Do you want to inspire, educate, entertain, or provoke discussion?
What do you uniquely bring to the table that you believe is important to share?

Your answers to these questions will help solidify your speaker mission statement. Remember, it doesn't have to be perfect right away. You can always revise it as you grow and evolve as a speaker.

What would you include in your speaker mission statement? Share in the comments below!

Hello from Team OutSystems!

Cecelia Martinez — Mon, 22 Jan 2024 17:43:38 +0000

As you may remember, Ionic, the company where I’ve worked as a Developer Advocate for the past year and a half, was acquired in late 2022 by OutSystems. As part of that acquisition, I’m excited to announce that I transitioned to a Lead Developer Advocate position on the OutSystems side of the house this past November. In my new role, I will continue doing what I love – making it easier for developers to build quality apps with a great user and developer experience.

About OutSystems

If you’re not familiar with OutSystems, don’t feel bad! I’ll admit I hadn’t heard of the platform at the time of the acquisition. This is a little surprising, considering they have been around since 2001, have more than 700k community members, and thousands of active customers in 87 countries. They are definitively the leader in the low-code industry, and it’s been great getting to know more of the team over the past few months.

The OutSystems platform isn’t what you may picture when you think of low-code. Yes, there are drag-and-drop UI elements, but it’s more of a full-stack visual app dev framework built on top of React, .NET, and SQL (or a back end of your choice). It requires you to understand software architecture concepts, and the apps being built with OutSystems can be incredibly complex and used at massive scale.

With my testing and DevOps background, I’m particularly interested in LifeTime – the infrastructure management and app delivery part of the platform. I’ll definitely be talking more in the future about how OutSystems is leveraging AI to improve DevOps processes and app considerations like performance, monitoring, scalability and more.

What About Appflow?

Appflow, the mobile CI/CD platform built by Ionic, has been my focus during my time at the company and I’m incredibly proud of what the team has accomplished in 2023. We introduced Appflow to React Native, Android, and iOS developers, introduced additional features to our free plan to let developers start building faster, and continued to improve the mobile app delivery experience for thousands of users.

You can expect more exciting things from the Ionic Developer Relations team, including new resources around building and deploying superapps using Ionic technologies like Appflow and Portals. I’m looking forward to continuing to collaborate with the Ionic team to share how you can leverage OutSystems with your existing traditional developer toolkit as well.

But… Low-Code?

To address the elephant in the room, low-code tools definitely have a bad reputation. Among other things, I’ve heard they’re not meant for “real” apps, they require less skill from developers, and it’s impossible to build quality, performant apps with low-code tools.

Well, that sounds a lot like what people say about cross-platform developer tools like Ionic. 😉

If you’ve read my blog posts or seen any of my conference talks, you know that I always advocate for using the right tools for the job at hand. I am honest about limitations and tradeoffs of different approaches, and am guilty of frequently saying “it depends”. My goal is always to help the developer find the right solution and then get up and running fast so they can get the most out of whatever tool is best for them.

I’ll continue to do that as an OutSystems Lead Developer Advocate. I’ve been learning more about the platform’s capabilities, and for enterprise developers that want to build serious apps at scale, iterate quickly, and abstract away the more tedious parts of software development, OutSystems is a clear choice.

What’s Next?

This year, I’m looking forward to getting to know more of the OutSystems community, including our MVPs and Champions, and the contributors to our open source component library, Forge.

OutSystems has a massive, engaged community of developers and I’m excited to understand how I can best help them use the platform and continue to advance in their careers. One program I’m particularly excited about is using my experience as a speaker to help other speakers in the community develop and grow.

I’ll also be reaching out to developers like me – developers that are fluent with other languages but brand new to the OutSystems platform. Every day, developers previously using Java, C#, and JavaScript, start using OutSystems and need to get familiar with the platform as quickly as possible. My goal is to talk to software developers and DevOps engineers, get their perspective on the platform, and build resources for their unique development needs.

I’m also continuing my volunteer work with Women Who Code Mobile and Out in Tech, and am grateful to OutSystems for their support of my efforts to build inclusive developer communities.

Ultimately, not much has changed. I’ll continue to work with developer communities, help them find the best tools for their needs, and build resources for them to succeed.

Here’s to a great 2024!

Building a Game with Phaser

Cecelia Martinez — Fri, 15 Sep 2023 21:49:23 +0000

Welcome to Part Two of this four-part series on building a mobile game using open source technologies. We'll be using Phaser, along with Ionic, Capacitor, and Vue.

The source code for this tutorial is here, and I'll reference specific commits throughout so you can see the specific changes for each section.

This post is heavily influenced by the tutorial from the official Phaser docs (we'll even use the assets they provide as well). I recommend going through the tutorial if you want to learn more about Phaser concepts. We'll keep it pretty high level here for brevity.

In this post, we'll actually walk through making the Phaser game! It's a big section and there are a lot of new concepts to learn, so let's jump right in!

Creating Scenes
Adding Game Objects
- Detour: Adjusting Game Window
- Preloading Assets
- Displaying Images
- Animating Game Objects
Responding to Player Input
- Setting Player Physics
- Adding Event Handlers
- Handling movement in update method
Dynamically Generating Game Objects
Adding Collision & Overlap Handlers
- Adding Colliders
- Adding Overlaps
What's Next

Creating Scenes

We talked about scenes briefly last week. Scenes are a core concept in Phaser and other game dev frameworks. You can think of Scenes like Views in a web app, but with some additional flexibility. Your player will navigate between Scenes, and sometimes multiple Scenes can run simultaneously.

Right now we have a single MainScene in our app.

In your game directory, create a PlayScene.js and ScoreScene.js file. We'll work with the PlayScene.js file first, as this will contain the majority of our game.

Add the following code to your Play scene:

// src/game/PlayScene.js

import { Scene } from "phaser";

export class PlayScene extends Scene {
    constructor () {
      super({ key: 'PlayScene' })
    }
    create () {
        this.add.text(100, 100, "PlayScene", {
            font: "24px Courier",
            fill: "#ffffff",
        });    
    }
  }

Then, in your game.js file, remove the MainScene class we defined in the last blog post. We'll need to update our import statement and config to include the new PlayScene instead.

// src/game/game.js

import { Game, AUTO, Scale } from "phaser";
import { PlayScene } from "./PlayScene.js";

export function launch() {
    return new Game({
      type: AUTO,
      scale: {
        mode: Scale.RESIZE,
        width: window.innerWidth * window.devicePixelRatio,
        autoCenter: Scale.CENTER_BOTH,
        height: window.innerHeight * window.devicePixelRatio,
      },
      parent: "game",
      backgroundColor: "#201726",
      physics: {
        default: "arcade",
      },
      scene: PlayScene,
    });
  }

It's not much, but now we have separate files for our scenes, which will make it easier to work with them.

Adding Game Objects

When working with Phaser, almost everything we interact with is a Game Object. Game Objects can:

Have Physics applied
Be images, text, sprites, etc.
Be Static or Dynamic
Be categorized into Groups
And much, much more.

For our game, we'll be working with the following objects:

A player sprite that moves left and right with animation
A platform static object that our player walks on
Left and right arrows for input to move our player
A star object that falls from the top of the screen and increases the score on collision with the player
A bomb object that falls from the top of the screen and ends the game on collision with the player

Within the public directory in the root of your project, create a new assets folder. Save the above linked images in this folder with the following file names:

player.png
platform.png
leftarrow.png
rightarrow.png
star.png
bomb.png

Detour: Adjusting Game Window

Before we move onto adding Game Objects, we need to make a small fix to our app that I discovered while writing. Right now, we have a collapsible header on iPhone. This could affect our game window size. Update the Play, About, and Scores pages in your /src/views directory to remove :fullscreen=true from the <ion-content> component, and remove the entire <ion-header> component and children that is inside <ion-content>. Your updated Page template should look like this:

// src/views/PlayPage.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Play</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content >
        <PhaserContainer />
    </ion-content>
  </ion-page>
</template>

Now we can move on!

Preloading Assets

Right now, inside our PlayScene class, we have a constructor and a create () method. There are two other lifecycle methods provided by Phaser: preload () and update ().

The preload () method is used to preload assets that will be used in our game.

Update your PlayScene.js file to preload the assets we just saved. Go ahead and also remove the text in the create () method.

// src/game/PlayScene.js

import { Scene } from "phaser";

export class PlayScene extends Scene {
    constructor () {
      super({ key: 'PlayScene' })
    }

    preload ()
{
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.image('platform', 'assets/platform.png');
    this.load.image('leftArrow', 'assets/leftarrow.png');
    this.load.image('rightArrow', 'assets/rightarrow.png');
    this.load.spritesheet('player', 
        'assets/player.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

    create () {   
    }
  }

The star, bomb, platform, and arrow images are added with this.load.image(), where we pass a unique key and the path for the image file.

The player is loaded using what's called a sprite sheet. A sprite sheet contains multiple poses of our player in the same image. This is helpful for animating our player. We use this.load.spritesheet(), again passing a key and path, but also setting the frameWidth and frameHeight of each individual pose (or "frame") in our image.

Displaying Images

Our asset are preloaded, but nothing is showing on the screen! We need to create game objects using our image assets.

Phaser uses pixels for all positioning and scaling. Many examples simply provide hard-coded values, which can work fine on browsers in a desktop device, but not for mobile.

Because of this, we need to do some math to make our displayed images responsive to the user's device screen.

Phaser provides this.scale.width and this.scale.height that returns the current screen width and height values. We can use these to calculate the center of our screen and where we should place objects.

If we think about our game layout, we'll need to calculate the height of a game play area, as well as the height of a controls area. This will help us determine where on the Y axis we need to place our platform, player, and arrow controls.

Add the following code to your create () method.

//game/PlayScene.js
...
create () {
    // sets game values based on screen size
    this.screenWidth = this.scale.width;
    this.screenHeight = this.scale.height;
    this.screenCenterX = this.screenWidth / 2;
    this.controlsAreaHeight = this.screenHeight * 0.2;
    this.gameAreaHeight = this.screenHeight - this.controlsAreaHeight;

    // adds the player, platform, and controls
    this.platform = this.physics.add.staticImage(0, this.gameAreaHeight, 'platform').setOrigin(0, 0).refreshBody();
    this.player = this.physics.add.sprite(this.screenCenterX, this.gameAreaHeight - 24, 'player');
    this.leftArrow = this.add.image(this.screenWidth * 0.1, this.gameAreaHeight + 40, 'leftArrow').setOrigin(0, 0).setInteractive()
    this.rightArrow = this.add.image(this.screenWidth * 0.7, this.gameAreaHeight + 40, 'rightArrow').setOrigin(0, 0).setInteractive()
}

In the first section, we've calculated the center of the screen. We've also set a controlsAreaHeight to take up about 20% of the bottom of the screen, and the gameAreaHeight to be the difference.

To create a game object, we'll use the relevant add method, passing an X coordinate, Y coordinate, and image key.

Let's break these down individually.

  this.platform = this.physics.add.staticImage(0, this.gameAreaHeight, 'platform').setOrigin(0, 0).refreshBody();

We've added the platform as a static image, which gives it physics properties so other game objects can interact with the platform. One thing to note here is setOrigin(). By default Phaser positions images based on the center of the image. By changing the origin to (0, 0), I am telling Phaser to position starting from the bottom left corner instead. Whenever we change the position or scale of a static body, we need to tell Phaser to adjust for this change. That is what refreshBody() is doing here.

 this.player = this.physics.add.sprite(this.screenCenterX, this.gameAreaHeight - 24, 'player');

For the player, I'm adding a sprite. For the Y coordinate, I'm doing some math and placing the player at the gameAreaHeight, but subtracting half the player height. This is because, again, Phaser positions from the center of the image. This results in the player standing nicely on top of the platform.

If I wanted to, I could use setOrigin() to position from the bottom instead, but I wanted to demonstrate how you would position an item by default in Phaser as well.

this.leftArrow = this.add.image(this.screenWidth * 0.1, this.gameAreaHeight + 40, 'leftArrow').setOrigin(0, 0).setInteractive()
this.rightArrow = this.add.image(this.screenWidth * 0.7, this.gameAreaHeight + 40, 'rightArrow').setOrigin(0, 0).setInteractive()

For the arrows, I'm sticking with setOrigin(0, 0) because it's easier for me to position based on the lower left corner with the math I'm doing. I'm positioning the arrows 40 pixels (half the size of the arrows) below the gameAreaHeight, the left arrow 10% of the way from the left and the right arrow 70% of the way from the left of the screen edge.

I'm using setInteractive() so that we can assign touch/click handlers to the arrows.

Animating Game Objects

If you save what we have so far, you see our player standing on the platform and facing the left. This is because Phaser is using the first frame of our spritesheet by default.

Let's set up some animations so when our character moves, we can leverage all the poses in the spritesheet. This code comes mostly from the official Phaser tutorial, so I won't dig into too much. I did add a logic check so it doesn't create a new animation if one already exists when the game restarts.

But you can see we are defining an animation key, providing an image key, stating what frames to loop through, and establishing a loop for each animation. The "turn" animation is the player simply facing forward.

//game/PlayScene.js

create () {
...
     // adds animations for player
     if (!this.anims.exists('left')) {
        this.anims.create({
          key: "left",
          frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
          frameRate: 10,
          repeat: -1,
        });
      }

      if (!this.anims.exists('turn')) {
        this.anims.create({
          key: "turn",
          frames: [{ key: 'player', frame: 4 }],
        });
      }

      if (!this.anims.exists('right')) {
        this.anims.create({
          key: "right",
          frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),
          frameRate: 10,
          repeat: -1,
        });
      }
}

Our player is still facing left because we'll leverage these animations once our player starts moving in the next section.

Responding to Player Input

In order for our player to animate, he needs to move! Let's add some event handlers for our arrow buttons next.

First, we need to make sure our player is ready for the physics of moving and interacting with our game world.

Setting Player Physics

Add the following code inside your create () method, underneath the animations we just added.

// src/game/PlayScene.js

// sets player physics
this.player.body.setGravityY(300);
this.player.setCollideWorldBounds(true);

// adds collider between player and platforms
this.physics.add.collider(this.player, this.platform);

For gravity, we could set a default game-level gravity. However, we want our player to move differently than our stars and bombs, so we're setting it on the object directly instead. setColliderWorldBounds() to true means our player cannot go off screen, and adding a collider between the player and platform means the player will stay on top of the platform as he moves.

Adding Event Handlers

Now we'll add event handlers for pointerdown and pointerup events. These will translate to touch events once we're on a mobile device.

Still in our create () method, add the following:

// src/game/PlayScene.js

// event handlers for arrow input
this.moveLeft = false;
this.moveRight = false;

this.leftArrow.on('pointerdown', () => {
this.moveLeft = true;
});

this.leftArrow.on('pointerup', () => {
this.moveLeft = false;
});

this.rightArrow.on('pointerdown', () => { 
this.moveRight = true;
});

this.rightArrow.on('pointerup', () => {
this.moveRight = false;
});

We are using two variables, moveLeft and moveRight, to track whether our player is in motion based on what arrows are being pressed.

However, we are not actually telling the player to move yet. Where do we do that? In our update () method.

Handling movement in update method

So far we have primarily been working in our create () method, which is executed when the game is initialized.

In comparison, the update () method runs every frame of the game. This is where we can control actions that need to update once the game has already started.

Inside our update () method, add the following:

// src/game/PlayScene.js

update () {
  if (this.moveLeft && !this.moveRight) {
    this.player.setVelocityX(0 - 200);   
    this.player.anims.play('left', true);
  }

  else if (this.moveRight && !this.moveLeft) {
     this.player.setVelocityX(200);    
     this.player.anims.play('right', true);
  }

  else {
    this.player.setVelocityX(0);
    this.player.anims.play('turn');
  }
}

Here, when moveLeft is set to true by the pointerdown event handler, we set the player velocity to move left, and play the left animation. We handle the moveRight boolean change the same way.

By default, our player is not moving in either direction, with the turn animation playing, which results in the player facing forward.

If you save now, you can try it out for yourself!

Dynamically Generating Game Objects

Our player can now move in the game world, but it's pretty boring. Let's give him something to do by generating stars for him to collect and bombs for him to avoid.

Add the following code to the end of your create () method:

// src/game/PlayScene.js
...
create () {
...
// Adds generated stars

this.stars = this.physics.add.group({
  gravityY: 300,
});

const createStar = () => {
  const x = Math.random() * this.screenWidth;
  const star = this.stars.create(x, 0, 'star');
}

const createStarLoop = this.time.addEvent({
  // random number between 1 and 1.2 seconds
  delay: Math.floor(Math.random() * (1200 - 1000 + 1)) + 1000,
  callback: createStar,
  callbackScope: this,
  loop: true,
});
}

Let's break down what's happening in each block.

First, we are creating a physics group called stars. This is helpful when we have a category of game objects and want the same physics applied to each individual game object in that group. In this case, we are applying a gravityY of 300.

Next, we are writing a function called createStar that creates a new star object within our stars group, placing it at a random X coordinate and the 0 Y coordinate (top of the screen) using the key for our star image.

Finally, we are using this.time.addEvent provided by Phaser to create a loop. This Phaser method works like setTimeout, in that you provide a delay in MS and a callback function. We are also referencing our this object for the callbackScope and setting loop to true so it repeats.

Once you save and refresh, you'll see stars falling from the sky at random X positions and at random intervals between 1 and 1.2 seconds.

We'll repeat the process for our bombs. However, we want our bombs to drop much faster but also appear less frequently.

Add the following code to create ():

 // src/game/PlayScene.js
...
create () {
...
// Adds generated bombs

this.bombs = this.physics.add.group({
  gravityY: 900,
});

const createBomb = () => {
  const x = Math.random() * this.screenWidth;
  const bomb = this.bombs.create(x, 0, 'bomb');
  bomb.setScale(2).refreshBody();
}

const createBombLoop = this.time.addEvent({
  // random number between 4.5 and 5 seconds
  delay: Math.floor(Math.random() * (5000 - 4500 + 1)) + 4500,
  callback: createBomb,
  callbackScope: this,
  loop: true,
});

Now we have bombs that drop every 4.5-5 seconds at a high speed. I also scaled up the bombs with setScale(2).refreshBody() to double the original image size so they are easier to see as they fall.

You should now see stars and bombs falling down on your player!

Adding Collision & Overlap Handlers

We are almost done! All we have to do now is handle what happens when our player interacts with the stars and bombs.

Adding Colliders

You may remember that we added a collider earlier between the player and platform.

this.physics.add.collider(this.player, this.platform);

When we add a collider in Phaser without a callback, the default behavior is for the two objects to simply block or push against each other upon collision, without passing through each other.

We can set a collider with a callback function to complete additional steps when two items collide.

For example, our stars and bombs should not go past the platform. Let's add a collider for these and destroy the star or bomb when it collides with the platform.

 // src/game/PlayScene.js
...
create () {
...
// Adds colliders between stars and bombs with platform

this.physics.add.collider(this.stars, this.platform, function(object1, object2) {
  const star = (object1.key === 'star') ? object1 : object2;
  star.destroy();
});

this.physics.add.collider(this.bombs, this.platform, function(object1, object2) {
  const bomb = (object1.key === 'bomb') ? object1 : object2;
  bomb.destroy();
});

This code will trigger the callback function whenever the two objects collide, determine which object is the object we went to destroy, then call the Phaser-provided destroy() method on that object. Our stars and bombs should now disappear when they collide with the platform.

Adding Overlaps

Finally, we need to add overlap handlers that:

increase the game score when our player overlaps with a star
ends the game when the player overlaps with a bomb

An overlap is different than a collider in that it only checks if two objects overlap, rather than preventing them from colliding. We'll use overlap for the interactions between our player with stars and bombs.

Add the following, again to your create () method:

// src/game/PlayScene.js
...
create () {
...

// Adds overlap between player and stars

this.score = 0;
this.scoreText = this.add.text(this.screenCenterX, this.gameAreaHeight + 16, 'Score: 0', { fontSize: '16px', fill: '#000' }).setOrigin(0.5, 0.5);

this.physics.add.overlap(this.player, this.stars, function(object1, object2) {
  const star = (object1.key === 'player') ? object1 : object2;
  star.destroy();
  this.score += 10;
  this.scoreText.setText('Score: ' + this.score);
}, null, this);

In the first block, we are creating a starting score of 0 and displaying that text on the screen over the platform. This should look familiar to how we created other game objects, passing an X and Y value and then the text to this.add.text(). We can also set CSS values in an object passed to the fourth parameter.

Then, we are creating an overlap between the player and the stars group with a callback function that does four things:

Checks which overlap object is the star
Destroys the star
Increases the score by 10 points
Resets the score text with this.scoreText.setText()

We need to pass the additional null and this parameters to this.physics.add.overlap() so that we have access to our this object inside the callback function.

We can repeat this for our bombs.

// src/game/PlayScene.js
...
create () {
...
// Adds overlap between player and bombs

this.physics.add.overlap(this.player, this.bombs, function(object1, object2) {
  const bomb = (object1.key === 'player') ? object1 : object2;
  bomb.destroy();

  createStarLoop.destroy();
  createBombLoop.destroy();
  this.physics.pause();

  this.gameOverText = this.add.text(this.screenCenterX, this.screenHeight / 2, 'Game Over', { fontSize: '32px', fill: 'red' }).setOrigin(0.5, 0.5);

  this.input.on('pointerup', () => {
    this.score = 0;
    this.scene.restart();
  })
}, null, this);

This is similar to our star overlap in that we are checking which object is the bomb, then destroying it. However, after that, we have functionality that handles the end of the game.

createStarLoop.destroy();
createBombLoop.destroy();
this.physics.pause();

These lines essentially stop our game world by destroy the loops that create new stars and bombs, as well as pausing all the physics taking place in the game.

Then, we add "Game Over" text to the middle of the screen.

Finally, we are adding a pointerup event handler that lets the user restart the game. This resets the score to 0 and restarts the game on click/tap. It's important that this event handler is inside your overlap callback so it only fires after the player interacts with a bomb.

Congratulations, you now have a game!

What's Next

Next week, we'll create our Score scene, talk about transitioning scenes, as well as how to interact between our Phaser game and the Ionic Vue app by exporting scores.

Stay tuned!

Creating an Ionic Vue + Phaser App

Cecelia Martinez — Fri, 08 Sep 2023 17:41:36 +0000

I love playing video games, especially console and mobile games. I learned about Phaser (an open source framework for building games with JavaScript) last year and have wanted to try out game development using the skills I already have as a web developer.

Turns out, it's easier than I expected! Thanks to Phaser, along with Ionic, Capacitor, and Vue, I was able to get a mobile game up and running on an iOS device working only a few hours here and there over two weeks.

Blog Series Overview

This blog series will walk through how to use Phaser, Ionic Vue, and Capacitor to build a mobile game of your own and run it on an actual mobile device.

For this series, we'll make a simplified version of the Ionitron game linked above to illustrate the concepts you'll need to learn to make your own game.

The source code for this tutorial is here, and I'll reference specific commits throughout so you can see the specific changes for each section.

What We're Building

This is a Vue mobile app built with Ionic Framework components that houses a Phaser game. We'll also use Capacitor to compile the app to native IOS and Android so it can run on mobile devices.

The app has the following features:

A Play tab that launches the Phaser game for play
An About tab that describes the game
A Scores tab that shows your score history for the game

Let's get started!

Creating a new Ionic Vue app
- Setting up the Ionic CLI
- Starting a new app
- Customizing Tabs
Adding Phaser to the app
- Phaser Installation
- Creating a Phaser game component
- Creating Phaser launch function
- Creating our first Phaser Scene
- Putting it all together
What's Next

Creating a new Ionic Vue app

First we'll create a new Ionic Vue app using the Tabs starter template.

I'll use the Ionic CLI for this, but you can also use the Ionic VS Code Extension if you prefer.

Install the Ionic CLI:

npm install -g @ionic/cli

Then run the following to create a new app:

ionic start phaserGame tabs --type vue

Then, cd into the directory and run ionic serve to start the dev server and open the web version of our app in a browser. Switch your browser to mobile view using DevTools as you're working to see how the app will look on mobile.

We now have an Ionic Vue app with three tabs on the bottom for navigation.

Change the tab names to "Play", "About", and "Scores", and update the router and file names to correspond with the new names. Feel free to update the icons as well.

You'll need to change the following files:

src/router/index.ts
All the files in src/views

Adding Phaser to the app

Phaser Installation

Phaser has an NPM package we can install into our project.

Run npm install phaser. This will add the dependency to your package.json.

"dependencies": {
...
"phaser": "^3.60.0",
}

Creating a Phaser game component

Let's create a component that will manage launching our Phaser game.

Create a PhaserContainer.vue file inside src/components.

This component will contain the following:

A button to start the game
A div that will be the parent for the Phaser game
A click handler for the button that hides the button and runs a Phaser launch command

Add the following template to your PhaserContainer component:

// src/components/PhaserContainer.vue

<template>
    <div id="game">
      <ion-button v-if="showButton" @click="handleClickStart">Start
      </ion-button>
    </div>
</template>

The id of "game" on the div will be passed to Phaser so it knows what HTML element is the parent for our game.

Now add the following script to your component:

// src/components/PhaserContainer.vue

<script setup lang="ts">
import { ref } from 'vue'
import { IonButton } from '@ionic/vue';
import { Game} from 'phaser';

// binds to the v-if on our button to toggle visibility
const showButton = ref(true)

// Creates the new Phaser Game instance
function launch() {
// We'll fill this in later
}

function handleClickStart() {
  // hides launch button
  showButton.value = false;

  // Runs the launch function
  launch();
}
</script>

We'll also add some styling to make our button in the middle of the screen.

// src/components/PhaserContainer.vue

<style scoped>
#game {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
</style>

Now our PhaserContainer component is ready! We just need to add it to our PlayPage view.

// src/views/PlayPage.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Play</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Play</ion-title>
        </ion-toolbar>
      </ion-header>
      <PhaserContainer/>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import PhaserContainer from '@/components/PhaserContainer.vue';
</script>

Creating Phaser launch function

Our PhaserContainer component is working, but nothing happens when we click "Start" because we still need to write our launch() function. Let's do that next!

Our launch() function returns a new Phaser.Game object with the configuration for our game, as well as the scene(s) for the game.

To keep our component clean and enforce separation of concerns, let's move our launch() function to a separate file.

Create a new game directory within src with a new game.js file.

Within this file, add the following code:

// src/game/game.js

import { Game, AUTO, Scale} from "phaser";

export function launch() {
    return new Game({
      type: AUTO,
      scale: {
        mode: Scale.RESIZE,
        width: window.innerWidth * window.devicePixelRatio,
        autoCenter: Scale.CENTER_BOTH,
        height: window.innerHeight * window.devicePixelRatio,
      },
      parent: "game",
      backgroundColor: "#201726",
      physics: {
        default: "arcade",
      },
      scene: MainScene,
    });
  }

There are several things happening here, so let's break them down.

We are returning a Phaser Game object that contains a configuration object.
The type of AUTO means that Phaser will detect if it should use WebGL or Canvas to render the game
The scale property handles our sizing and display. The Scale.RESIZE mode means the game will resize to fit the parent window. If you want your game to always have the same aspect ratio, use Scale.FIT instead.
Scale.CENTER_BOTH means the game is centered both vertically and horizontally within the parent
Using window.innerWidth * window.devicePixelRatio and the corresponding height values will make the game dynamic to the window, and ensure quality rendering on high-DPI (retina) displays
The parent value is the id of our parent div HTML element
We're setting a backgroundColor for the game, this is optional
We're setting a Physics engine type of arcade. This is suitable for simple games and is more performant for mobile.

The last property is scene, and this defines the scenes in our game.

Scenes are a core concept in Phaser and other game dev frameworks. You can think of Scenes like Views in a web app, but with some additional flexibility. Your player will navigate between Scenes, and sometimes multiple Scenes can run simultaneously.

We'll explore more about Scenes later in this series. For now, we'll start with a single Main Scene to start the game.

Creating our first Phaser Scene

We've passed a value of MainScene to our scene property for our game, so let's create that next.

In the same game.js file, update your Phaser import statement to include Scene.

// src/game/game.js

import { Game, AUTO, Scale, Scene} from "phaser";

Next, add the following code, again in the same file.

// src/game/game.js

export class MainScene extends Scene {
    constructor () {
      super({ key: 'MainScene' })
    }

    create () {
        this.add.text(100, 100, "Hello Phaser!", {
            font: "24px Courier",
            fill: "#ffffff",
        });
    }

  }

Scenes in Phaser are classes that extend the Phaser Scene class. The key 'MainScene' is how we'll reference this scene in our game.

The create() block is one of the Phaser lifecycle methods. We'll learn more about other lifecycle methods in later posts in this series.

For now, know that we are using the create() block to add some initial text to our game. The first two parameters 100, 100 refers to the x and y coordinates of the text.

Putting it all together

The last thing we need to do is update our PhaserContainer component to use our new launch function and Phaser scene.

Update the script tag to import the launch() function, and remove the the function declaration within the component.

// src/components/PhaserContainer.vue

<script setup lang="ts">
import { ref } from 'vue'
import { IonButton } from '@ionic/vue';
import { launch } from '@/game/game.js';

// binds to the v-if on our button to toggle visibility
const showButton = ref(true)

function handleClickStart() {
  // hides launch button
  showButton.value = false;

  // Runs the launch function
  launch();
}
</script>

Now we when we click 'Start', our Phaser game launches!

What's Next

In the next post in this series, we'll make our game more interesting and learn more about Phaser concepts like Scenes, Game Objects, Physics, Assets, and more.

Stay tuned!

In Review: My First Year at Ionic

Cecelia Martinez — Tue, 05 Sep 2023 14:01:54 +0000

On August 29, 2022 I started my first day as a Developer Advocate for Ionic. The very next day I flew out to Salt Lake City to meet my team for ng-Conf, and it's been a whirlwind ever since! 🌪️

Speaking on stage at Chain React! Photo credit: Taz Singh

I have been a fan of Ionic since 2019, when I first discovered the framework after searching for an alternative to React Native. I spoke at the first Ioniconf in 2020, and met members of the team virtually and in-person over the years. Joining the team felt like a long time coming, and getting to help developers be successful with open source tools I already know and love was a dream come true.

To celebrate my first year, I wanted to document everything I accomplished. It was a BUSY year, full of events, learning, and trying new things.

A few highlights:

I spoke at 20 (!) conferences and wrote 16 posts for the Ionic blog
I learned more than I thought possible about mobile deployments
I got involved with the amazing Women Who Code Mobile community
I gave my first talk in Spanish
I got better at being uncomfortable and trying new things

Conference Talks

I spoke at 20 conferences this year, sometimes doing double duty at a sponsor booth as well.

Highlights: Getting to speak at Strange Loop was an honor, especially with the conference ending in 2023. There were several of my favorite events like Refactr.TECH, Connect Tech, and VueConf. I attended my first DevOpsDays event, and gave my first React Native talk at Chain React! ⚛️

Refactr.TECH 2022
Strange Loop 2022
All Things Open 2022
Connect Tech 2022
Mobile DevOps Summit 2022
Nuxt Nation 2022
CodeMash 2023
The DEVOPS Conference 2023
DevNexus 2023
DevOps Days Raleigh 2023
DeveloperWeek Europe 2023
Chain React 2023
JS Nation 2023
Women Who Code Dev Summit - Mobile & Web 2023
VueConf 2023
RenderATL 2023
Ng-Conf 2023
KCDC 2023
THAT Conf Wisconsin 2023
Beer City Code 2023

I also spoke at the Modern Web ATL meetup in March! So excited that local meetups are back.

Check out this YouTube playlist with recordings of some of my conference talks!

Other Conference Activities

I was also involved in other events, either as a sponsor, on the program committee, or as an MC.

React Rally was the first sponsored event where I was the lead on site. We also hosted an Ionic Utah meetup at the conference. It was a lot of work but so much fun to own the entire process and introduce our newer team members to sponsor booth life. 😅

Developer Advocate Logan Brade at the sponsor booth at React Rally!

ng-Conf 2022 (Sponsor)
TestJS Summit 2022 (MC, Program Committee)
DevOps World 2022 (Virtual Sponsor Booth)
Modern Frontends Live 2022 (Sponsor)
GraphQL Galaxy 2022 (MC)
TechLead Conf 2023 (MC)
Deep Dish Swift 2023 (Sponsor)
JS Nation 2023 (Program Committee)
React Summit 2023 (Sponsored Workshop & Lightning Talk)
React Rally 2023 (Sponsor)

Webinars

I was busy with Ionic virtual events as well!

Spoke at Micro Frontends Summit 2023, a four-week series with amazing speakers on all things micro frontends
Hosted three webinars:
Participated in the Q1 and Q3 Ionic Shows
Gave my first talk in Spanish for the launch of the Ionic Madrid meetup 🇪🇸

Blog Posts

I wrote 16 posts for the Ionic blog in my first year! I started out with Appflow product updates, but over time created more technical tutorials and perspective pieces. ✏️

Some required me to build out complex demo projects and learn new concepts, such as automated mobile testing or building mobile deployment pipelines. Others required research into complex topics like SOC-2 certification and app security.

Projects

I am the first Developer Advocate at Ionic focused specifically on Appflow, our mobile CI/CD platform. Appflow added support in late 2022 for other platforms, including React Native and traditional iOS/Android native apps.

Because of this, I was responsible for a lot of "firsts", including deciding how we would reach developers in these new markets, as well as the sponsor booth strategy for events sponsored under the Appflow brand. It was a crash course in developing a new DevRel strategy!

New booth design assets for Appflow-sponsored events!

Fortunately, Ionic has been around for 10 years and has a lot of built-in knowledge for engaging with developer communities and a great team I could work with on these projects.

These are some of the specific projects I worked on:

Auditing and updating our docs
Introducing a more robust free tier for new users
Appflow sponsored events strategy and materials
Working with Product team on new platform support and new user experience, including participating in user interviews and technical validation for new features
Took over Appflow Twitter/X account for promotion of events, updates, and content, and experimenting with short videos

I was also on the team that introduced an Ionic Pride community and Pride month kickoff event! This project was personal to me and it was so special to get to be involved. 🌈

Community

I continued my volunteer work as the Atlanta Chapter Head for Out in Tech, which supports the LGBTQIA+ community in tech. We had more events in 2023 than ever, and increased the size of our leadership team. We are growing slowly but steadily and it's been amazing to see the community flourish.

I have previously volunteered with Women Who Code Front End, but this year I transitioned to the Women Who Code Mobile track given my new role. It has been so great to get to know the amazing women in this community!

I got to meet some of the members at Deep Dish Swift, including Vui Nguyen, who gave a great talk at the conference. She is now the Leadership Fellow for Women Who Code Mobile and I look forward to doing more work with them this year!

Women Who Code Mobile representing at Deep Dish Swift! Photo credit: @sunfishgirl on Twitter

I am also starting to get involved with the AtlantaJS Meetup group, so stay tuned for updates there 👀

What's Next

Overall, I could not be more proud of the effort and achievements I've experienced in my first year at Ionic.

I am so grateful for the support of everyone at Ionic and the wider community. I've had a LOT of questions along the way and have learned so much only because people were generous with their knowledge.

Looking ahead, I'm planning to expand my focus from mobile deployments to the entire app development life cycle. I'm excited to dig more into Capacitor and Portals (the superapp SDK from Ionic), as well as some of the more advanced challenges and use cases facing cross-platform developers.

I'm also excited to spend more time in code, and working on larger-scale technical projects to improve our developer resources.

There's also OutSystems! Ionic was acquired last year by OutSystems, the #1 Low-Code Platform. I have met some folks there and attended an OutSystems User Group meetup in Atlanta, and I'm curious to learn more about their tools and team.

Here's to another year (and hopefully many more!) with Ionic. 🥳

DEV Community: Cecelia Martinez

Five Questions to Ask Before Launching a Developer Community Program

Do You Want to Grow Your Community by Attracting New Developers or by Engaging with Your Existing Developers?

Do You Have Non-Developers in Your Community, and If So, Will They Be Included?

Do You Know What Your Developers Need from a Community?

What Are the Business Motivations for Investing in Community?

What Expertise Is Needed to Do the Best First Thing?

Learn basic SQL concepts using visual low-code

Data Concepts in OutSystems

Entities

Creating an entity

Relationships

Static entities

Bootstrapping data

Displaying data on screens

Drag-and-drop

Queries with aggregates

CRUD operations

Next steps

Study Notes: GitHub Foundations Certification Exam

Table of Contents

Study Approach

Exam Guide

Microsoft GitHub Foundations Course

Udemy Practice Exams

Notes

Helpful Docs Links

Notes from Microsoft Course

Git

Git terminology

Git and GitHub

Command Line commands

Introduction to GitHub

GitHub Flow

GitHub Collaboration

GitHub Platform Management

Introduction to GitHub’s products

Notes from Practice Test 1

General

Access

Codespaces

Projects

CodeOwners

Notes from Practice Test 2

Notes from Practice Test 3

Notes from Practice Test 4

Other Resources

Running a Phaser Game on Mobile Devices

Table of Contents

Adding iOS and Android Device Support

Running on a Simulator

Running on a Real Device

Persistent High Score Data

Next Steps

Working with Scenes and Data in Phaser

Table of Contents

Creating the Score Scene

Switching Scenes

Passing Data Between Scenes

Passing Score Data from Phaser to Vue

What’s Next

How I became low-code certified with OutSystems

Understanding the exam

Exam Topic Breakdown

Question Format

Applied Knowledge

Learning the material

Developer School

Online Training

Hands-on Learning

Preparing for the exam

Question Practice

What to Expect

Test Tips

Continuing your journey

The DevRel Guide to Business Jargon

TAM (Total Addressable Market)

Ideal Customer Profile/Personas

DAU/MAU (Daily/Monthly Active Users)

TOFU/BOFU (Top/Bottom of Funnel)