Competition + Baby Boom

Putting a Competition in play sets in motion a battle to have the most of a specific resource by the end of the turn. If you play it right, the Baby Boom card can be your ticket to victory.

The Baby boom card doubles the value of all population cards of one type of your choice for only one turn. So you are going to want to make sure no one is on your tail before playing this combo.

Competition + Skip

A Competition can be won or lost by one card. So limiting your players options during a competition can be the edge you need to win.

By skipping the player that might be the biggest threat, you may be giving yourself the time you need to remain the resource leader.

Security Breach + Steal / Forced Trade

Forced Trades and Steals allow you to take a players card out of their hands. Unfortunately, only players with x-ray vision can know what cards their opponent is holding… unless they use this combination.

The Security Breach card allows you to see the cards a player is holding. Using this in combination with a steal or forced trade gives you the super power of knowing the cards you are grabbing from.

What great plays have you made during your time with Arms & Influence? Let me know in the comments!

There are tons of other combinations and strategies that can be played to gain victory points and stifle your opponents chances.

If you have not yet played Arms & Influence and are interested, check out our website ArmsandInfluence.com or check us out on Instagram. You can buy Arms & Influence directly from our website!

I’m Andrew Richards, co-creator of Arms & Influence. I write about Software Development and this game of course. If you would like to keep up with me, I am @thedrewprint on pretty much all platforms, you can find me on Instagram, Twitter, and on LinkedIn…

I have just been hired for a company that is using Angular on their tech stack. In preparation to get started I am following a course on Udemy that I will link below.

https://www.udemy.com/course/the-complete-guide-to-angular-2

I am a Javascript developer with experience in React. And although this course is absolutely amazing, it does not relate anything to React (since it is not a course specifically for developers with React experience) And so I wanted to write an Angular article making some basic comparisons to React in order to make it easy to jump into for React developers.

TypeScript

One big difference between React and Angular is that Angular uses strictly Typescript right out of the box. React on the other hand you can choose between the two. On a basic level Typescript adds great features such as types to Javascript that make code easier to debug among other things. It also provides errors and fixes before you even run code. Which as I’m learning has turned out to be fantastic.

JavaScript With Syntax For Types.

There is a small learning curve but the course I linked above is a great way to learn. You don’t just learn how everything works, you see it in action in a real app.

Components

Much like React, Angular uses components. However, components in Angular are a bit different than they are in React. For example, React components are standalone files (something.js) that contain a class (or function) with a render function (or return) featuring JSX. Angular does not use JSX, and components are usually made up of at least 2, but most of the time 3 files nested in a folder of that components name.

These files are the template file, which is an HTML file that contains well… you guessed it… HTML. So think of this like your JSX section of your React components. It functions the same way in that it is what will render on the DOM. But it is actual HTML with some added features provided by Angular. Developers with experience in HTML will feel at home.

The second and most important file is the typescript file that configures the component. This is where you can create functions and variables that can be referenced in the HTML template file. Which can make your component dynamic and take in or output information from and to other components.

The third file is the CSS or SCSS file that you can use to style your component.

A fourth file is your test file which will allow you to test that your components are working.

INTERACTING WITH THE DOM

Property Binding and Data Binding

Property binding allows you to use HTML properties only when a certain condition is met. You do this by putting the property in square brackets and giving it a condition inside a quotations like so:

<p [disabled]=”show === false”>Hello World</p>

Now in your component you would create a variable “show” that you can toggle true and false. This will essentially only attach the “disabled” property to this html element when show is false.

Event Binding, and String Interpolation

In a React JSX component you can fire events like you would an html component. For example you can use an onClick event inline to fire a function from that component.

Angular allows you to do the same with Event binding with a different syntax.

<button (click)=”fireFunction()”>Click Me</button>

On the click of this component the “fireFunction” function will fire.

You can also access a variable from your typescript file with string interpolation:

<p>{{ variable }}</p>

This will look similar to what you’ve done in React.

Two Way Data Binding

Two way data binding allows you to not only have access to a variable within your component but also change it from the html. For example you may want to change a variable from an input.

In your component you can have a variable:

testVariable = “Testing 123”;

And in your html you can use ngModel:

<input type=”text” ([ngModel])=”testVariable”></input>

This will fill the input with the string “testVariable” and when changed it will be reflected in the actual variable.

(In order to do this you need to use the FormsModule in your app.

Directives

Directives are a key building block in Angular. All they are is instructions in the DOM.

We can build our own directives or use some built in Angular Directives.

For example we can use *ngIF to only render a component based on a condition.

<p *ngIf=”letItRender === true”>Please Render Me</p>

CONCLUSION

There is a lot more to learn about Angular but these are some of the basics that have hopefully clarified how different Angular is from React. In the end they are just different ways of interacting with the DOM through components.

Learning Angular is a great way to quickly learn Typescript and to learn a new way of building apps. Learning has helped me put in perspective how both frameworks work behind the scenes. It’s different syntax etc. but it is using classes to do essentially the same thing. Manipulate the DOM with functions and variables.

Again here is the Udemy course I am taking, I would recommend doing the same if you have any interest!

https://www.udemy.com/course/the-complete-guide-to-angular-2

Please follow me on Twitter @thedrewprint and find me on LinkedIn at Andrew Richards. Thanks for reading!

Have you ever wanted to embed Tweets, TikToks, Spotify songs, videos or pretty much anything else in your React sites? Or are you a developer that would like others to embed rich content from your website?

One way that is widely used on the internet is called oEmbed.

https://oembed.com/

oEmbed.com describes oEmbed as “ a format for allowing an embedded representation of a URL on third party sites.” It goes on to say, “The simple API allows a website to display embedded content (such as photos or videos) when a user posts a link to that resource, without having to parse the resource directly.”

In other words oEmbed is a standardized way of requesting the information necessary to embed something in your app. That something could be Tweets, a Spotify song, a Youtube video, or many other things.

In order to get the information you need from an oEmbed endpoint, all you have to do is request it.

First find the url you need to request to get back this info. I Googled Twitter oEmbed and it gave me a link to the documentation.

I made a request in Postman with the sample url provided to see what comes back:

https://publish.twitter.com/oembed?url=https://twitter.com/i/moments/650667182356082688

As you can see the URL gives us a few things. Most notably, the json that comes back has an attribute called ‘html’ with the html we need.

This is everything you need to include in your app to show a tweet. It even comes with the style tag that will make sure it looks like it should with Twitter’s styles.

And that’s really it. There’s not much more you need to know. Take the HTML and put it somewhere in your app and you are good to go.

Thanks for reading!

Maybe you are a budding software developer and you’ve been hearing about AWS and you are wondering it is exactly. You’ve heard a bunch of acronyms like S3 and EC2 and are afraid of how complicated it seems.

Well this article is to clear up some basics about AWS and the services that it includes.

AWS stands for Amazon Web Services. They key phrase being “Web Services”. AWS is not one thing, it is a suite of services that help companies and web developers do anything ranging from storing files on the cloud with S3, to running a computer instance on the cloud with EC2, easily deploying apps with Elastic Beanstalk, and even purchasing domains Route 53.

These are only a few of the many AWS services. I will detail some of the most basic services you should know in AWS.

EC2

EC2 stands for Elastic Cloud Computing. It is a product that revolutionized computing by reducing the time required to obtain and boot new server instances from hours / days to minutes.

Imagine a genetics company that needs to crunch a ton of data. Instead of having to provision their own servers, they can with a few clicks of a button reserve computing power over the internet.

The Elastic part comes when you think about how that same genetics company might only want a few hours of server time a week to crunch their computations. It allows them to pay for only what they use. Which is why EC2 changed the economics of computing.

EBS

EBS stands for Elastic Block Storage. This is a service that allows you to attach volumes to EC2 instances. Essentially it is a hard drive in the cloud that you can attach to the instance such as an SSD.

RDS

RDS stands for Relational Database Service. Perhaps this one might make a bit more sense to you right off the bat if you’ve used a database like Postgres or MySQL.

RDS allows you to create a database using MySQL, PostgreSQL, Oracle, Aurora, MariaDB or Amazon’s own DynamoDB.

DynamoDB

DynamoDB is Amazon’s no SQL database service.

S3

S3 stands for Simple Secure Storage, and you can think of it like dropbox with a bit more functionality. You can use S3 to store files but you can also use it to store the files for your website and connect it with Amazon’s DNS Route 53.

Route 53

Route 53 is Amazon’s DNS aka Domain Name Service. Think of it exactly like Amazon’s version of Godaddy.

These are a few of the most common technologies you will see in AWS. Hopefully this clears up some confusion you may have had about what AWS is and what it’s services are. But this is by no means a comprehensive list. AWS has many services that would take an entire course to go over.

I suggest this Udemy course if you are hoping to take an AWS certification test in the future:

AWS Certified Developer: AWS Developers Certification Training

Thank you for reading. Please follow me on Twitter @thedrewprint and find me on LinkedIn — Andrew M Richards.

Learn the SCSS (Sass) Basics in 5 Minutes

In this article I will go over the remaining features that make Sass great. Those are Extend/Inheritance & Operators.

Extend/Inheritance

Sass has a few ways of making it so we don’t have to repeat ourselves with our code. One of the ways of doing this is to create a placeholder that can be extended.

You can use the “%” symbol to create a class that you only want to extend.

Extending means giving a css class the attributes of the extended class. This way we don’t have to write the same code over and over.

Here is a code snippet from the docs:

/* This CSS will print because %message-shared is extended. */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// This CSS won't print because %equal-heights is never extended.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


.success
  @extend %message-shared
  border-color: green


.error
  @extend %message-shared
  border-color: red


.warning
  @extend %message-shared
  border-color: yellow

To extend, as it is shown, all you have to do is use “@extend” with the “%” symbol and class name. This will ensure that the success, error, and warning class all have the attributes from the “message-shared” class.

Operators

Prior to Sass, you couldn’t perform any math in a CSS file. Operators in Sass change this by giving you the ability to do math with your attributes.

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

This is a great feature and saves you from writing Javascript to take care of things like this.

Conclusion

And that’s really it. Stay out of trouble my friends.

Well good news. Sass is going to make your life much better. You will finally be able to DRY (Do not Repeat Yourself) your code out in CSS.

Basically, CSS is missing some great features that would help turn it into an easier to use and read. Sass adds Variables, Nesting, Partials, Mixins, Extend/Inheritance, and Operators. Some of these are things that programming languages tend to have. If you don’t know what some of them are, that’s okay. We’re going to define each of these and show you how they can be used.

A Sass can be compiled into a CSS files making it writing many files easy.

If you are using create react app you are in luck because the processing part is already taken care of for you. If not you can use Grunt or Gulp to process your Sass/SCSS files into CSS. If you are not yet in an environment that will do this I suggest setting that up first. This article is to talk about the features of Sass and how to use them.

What’s the difference between Sass and SCSS. Well, both of them can be compiled into CSS. The real difference is in syntax. SCSS uses mostly the same syntax of CSS while Sass takes away curly braces and semi-colons. In both you can use the additional features that Sass provides.

The following shows the syntactic differences.

SCSS SYNTAX

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

SASS SYNTAX

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Variables

If you use any coding language you know what a variable is. So I won’t go too in depth with this. Essentially Sass finally allows you to define variables so that if you decide to change say a color you don’t have to change it 1000 times. You can just change your primary color variable in one place and you’re good to go

$primary-color: #333; 

body {
  background-color: $primary-color;
}

.text {
  color: $primary-color;
}

Nesting

In CSS you cannot nest. Let’s take a look at these two selectors. There is nothing terribly wrong with this. But we are repeating code.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

We can nest in Sass like so. This looks much cleaner.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }
}

Partials

Partials are Sass or Scss files that have an underscore in the front of the filename. For example. “_test.scss”. What does this do? It denote’s that this particular file should not be turned into CSS when the time comes. These files will contain snippets of CSS that can then be imported by other SCSS files.

This is a great way to modularize your CSS and keep things easier to maintain. For example you may want to store variables that will be used in multiple files. This is the way to do it.

Mixins

Mixins are interesting because they add a coding language-like feature. You will immediately recognize what I mean upon seeing the code:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Instead of typing out “rotate(30deg)” 3 times. You can create what essentially feels like a function and sort of acts like one. You pass in the property to the transform() mixin.

To use this piece of code, you must use the “@include” keyword.

More info if you click here.

Extend/Inheritance & Operators

I will talk about these in Part 2 as they are a bit more involved. These are some of the most useful features in SCSS so please follow and I will be posting this blog next week!

Please follow me on Twitter @thedrewprint and find me on LinkedIn at Andrew Richards. Thanks for reading!

Learn the SCSS (Sass) Basics in 5 Minutes was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

We launched Arms & Influence on September 17th, 2020. Since then we’ve shipped the game and people all around the world have played it. We’ve been grateful to have such an amazing reception to game. But perhaps the most surprising thing about our campaign was the fact that we did not spend a dime on pre-campaign marketing.

So here’s exactly what we did that resulted in us hitting our $7,500 goal in less than 24 hours.

Used Our Existing Network

Many people don’t realize that over the course of their lives they’ve built up a network of people that want to see them succeed. Every positive connection you’ve made over the course of your life is a potential person that may want to be a part of your success. Use that! It has proven to be incredibly valuable to us. As long as you are creating something that you believe can bring value to peoples lives they will want to help you.

Built a Network

The plan we created was to get people first to our Instagram and then to get people who are more invested into our newsletter. So we took the following steps to do that.

1. Created an Instagram account and built it up with content on a weekly basis. (Targeting people with specific interests and using hashtags that go with our brand)

2. Used posts and Instagram stories to drive people to sign up for our newsletter on our website where we sent out weekly updates about how the game was coming along.

3. Treated the newsletter subscribers like the super fans that they were by showing them content before anyone else.

4. Told everyone we possibly knew and got them to follow our Instagram or sign up for our newsletter.

The bulk of our initial customers were from our existing network that we’ve just built up from daily life. From their they tell their friends and those are the strongest types of network connections. When a friend recommends something it’s a strong indication to buy, especially when it’s like oh this is my friend of a friends game.

So think about where you already have a strong network and tap into that first.

Used These Apps

Here is what we used from what we gave most attention to what we gave least attention:

Instagram

We built up a following of about 800 people. Nothing crazy but just enough to keep our existing network updated and bring potential customers into the fold.

Squarespace (Website with integration to Mail Chimp)

Before the campaign our website was mainly to drive interest to our Kickstarter page as well as have them sign up for our newsletter.

Facebook Page

An easy way to get your current network involved is to create a Facebook page. We had about 200 people following the page.

Mail Chimp (Newsletter)

We built up a newsletter of about 250 potential customers. We used monthly updates to keep people updated and engaged and drive them to the Kickstarter page.

Kickstarter Page

Prior to launching your Kickstarter you can create a preview page where potential backers could sign up to get a notification when your page went live.

We Did It… With One Thing

Our existing network. Now during the campaign (after we had eclipsed our goal) we did end up spending money in places like Board Game Geek. But that turned out to not have as big effect as we had hoped.

I hope this helped a bit and if you have the money for advertising go for it. But this is how we did it on a shoe-string budget.

Please check out Arms & Influence — You can find me on Twitter or Instagram @thedrewprint

Unlike and Object or Map, Sets function a bit more like arrays. For example, there are no key value pairs in a set.

A great use case for a Set is when you want to create an array with only unique values. You could do this with an array but you have to check every single value you add to the array against itself, which will be costly. Sets on the other hand have this functionality built in.

Great things about Sets:

• A Set is not a good thing to use when you can have multiple of the same value.
• Sets can also store more than just values. They can store objects or arrays as well.

Let’s create a set and see some of the methods we can use with it.

let one = new Set()
let two = new Set("Hello")

console.log(two)
//Set { "H", "e", "l", "o"})

Interestingly, when creating a new set and passing a string in on initialization, it will break it up into each character. Which is great if you’re trying to find every unique letter in a string.

You can also pass an array in and it will take each value separately.

.add()

Add will simply add a value to the set. If the value already exists in the set, it will not get added.

one.add("Hello")

console.log(one)
//Set {"Hello"}

.has()

Returns a boolean if the set has the value.

one.has("Hello")
//true

.size()

Returns the size of the set.

one.size()
//1

.forEach()

You can iterate through the set in the order of entry.

one.add("Hi")
one.add("Hello")
one.add("Ham Sandwich")

one.forEach(value => {
    console.log(value)
})

//"Hi"
//"Hello"
//"Ham Sandwich"

.delete()

You can delete specific values in the Set by passing them as a parameter in the delete method.

one.delete("Hi")

// removes "Hi" from the set.

.clear()

You can entirely clear out a set with one simple method.

one.clear()

// clears out the entire set
// Set {}

That just about does it. If you would like to dig a bit deeper into sets, click on the link below.

Set - JavaScript | MDN

Thank you for reading. Please follow me on twitter @thedrewprint and find me on LinkedIn — Andrew Richards