Forem: Matt Chaffe

FizzBuzz coding challenge

Matt Chaffe — Mon, 22 Jul 2019 09:00:00 +0000

Whilst I was going through my backlog of videos to watch, I watched this video which explains the use of a coding interview question; The FizzBuzz coding interview question. I wanted to have a go at answering the question myself and wanted to share my thought process as I did it.

I stopped the video at around 1:40 as I wanted to go through an answer it myself without seeing the answer within the video.

Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.

My solutions

With the above question in mind, my first thought on how to approach this was how to determine the multiples of 3 and 5. What came to mind was the modulus/remainder operator % I knew that multiples of 3 & 5 should retain remainder 0, so this could be used to determine when to output the correct text.

To start the challenge I used jsfiddle and I created the following as my starting point:

function fizzbuzz (num) {
  return num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}

I then started on my implementation which first looked like this:

function fizzbuzz (num) {
  if (num % 3 === 0 && num % 5 === 0) {
    return `fizzbuzz`
  } else if (num % 3 === 0) {
    return `fizz`
  } else if (num % 5 === 0) {
    return `buzz`
  }

  return num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}

First I check if the number is a multiple of 3 & 5 if so I return the combined fizzbuzz text, I then check if the number is a multiple of either 3 or 5 and output the correct text, falling back to just returning the initial number.

This is quite verbose and has a bit of duplication of the checks for the multiples, so I thought I would improve my answer.

function fizzbuzz (num) {
  const isFizz = num % 3 === 0
  const isBuzz = num % 5 === 0

  if (isFizz && isBuzz) {
    return `fizzbuzz`
  } else if (isFizz) {
    return `fizz`
  } else if (isBuzz) {
    return `buzz`
  }

  return num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}

So, this is better but still a bit verbose, we have removed the duplicated checks into a single check that can be re-used, but still has the multiple if statement. How can this be reduced and made more concise I thought.

Here is my final solution:

function fizzbuzz (num) {
  const isFizz = num % 3 === 0
  const isBuzz = num % 5 === 0

  return `${isFizz ? 'fizz' : ''}${isBuzz ? 'buzz' : ''}` || num
}

for (let i = 1; i <= 100; i++) {
  console.log(fizzbuzz(i))
}

I removed the if statement in favour of a ternary within a template literal which uses a short-circuit operator to fallback to the number. This boils down to creating a string which first checks if the number is a multiple of 3 which will then add the word fizz, then checks if the number is a multiple of 5 which will add the word buzz. Which will account for being either and both, and it will be an empty string if neither of them is truthy in this case the short-circuit operator will evaluate the empty string as falsey and will use the what is on the right hand of the operator which is the initial number.

JSCodeshift and ASTs

Matt Chaffe — Tue, 16 Jul 2019 09:00:00 +0000

I have been working on some open-source tools for CanJS. I am working on the migration tool which is used to help upgrade projects to the latest version. We use jscodeshiftto handle these migrations and this was my first time using them and writing them.

jscodeshift allows you to create complex transformations that can read the source file and parse that into an Abstract Syntax Tree (AST). We can then manipulate it and regenerate the source code.

AST Explorer

AST Explorer has been an extremely useful tool in helping me understand AST’s and I’ve been using it to create my transforms live in the browser. It was very helpful to me to see the transformations happening as I was writing the transformation.

To enable the transforms within AST Explorer toggle the transform option within the top navigation bar. By turning this on you can select different types of transformations, as I am working with jscodeshift I use that option.

Examples

Let’s walk through a simple transformation that will transform CanJS Component into a StacheElement class.

Component.extend({
 tag: 'my-app',
 view: `<h1>Hello World!</h1>`
})

Will become

class MyApp extends StacheElement {
 static get view () {
   return `<h1>Hello World!</h1>`
 }
}
customElements.define('my-app', MyApp)

Here is a gist with the code used to do the transformation in its most basic form:

Let’s try to break this down a little, passing jscodeshift the source file will generate the AST and we then call the .find method which allows us to traverse and find something specific within the tree. It will return a Collection which you can iterate through and modify.

.find(j.CallExpression, {
 callee: {
   type: 'MemberExpression',
   object: {
     name: 'Component'
   },
   property: {
     name: 'extend'
   }
 }
})

In the above code, we are looking for a CallExpression which has a specific callee and we can specify the type and names of the callee, in this instance, we are looking for Component.extend.

Once we have the results we can iterate over them and modify to our heart’s content 😊.

We know the type of result we are going to get and the shape of it, so we can iterate over the properties of the object enabling us to add these back after we have replaced the CallExpression with a Class declaration.

We want to restore the view property and will add this to the class as a static getter property. Here we keep a reference to the view’s path.

path.value.arguments[0].properties
.forEach(p => {
   if (p.key.name === 'view') {
     viewProp = p
   }
 })

Now we can replace the CallExpression with a Class declaration:

j(path).replaceWith(
 j.classDeclaration(
   j.identifier(className),
   j.classBody([
     j.methodDefinition(
       'get',
       j.identifier('view'),
       j.functionExpression(
         null,
         [],
         j.blockStatement([j.returnStatement(viewProp.value)])
       ),
       true
     )
   ]),
   j.identifier('StacheElement')
 )
)

The first identifier is the name of the class, the second identifier is optional and it’s for adding the name of the superClass. For the classBody we will just add what was previously the value of the view property on the CallExpression.

Full working example can be seen here.

Notes

When you wish to create a Node, use the camelCase name, and when you wish to look up a Node use the PascalCase name. For example, if you wish to find a classDeclaration you would do:

j(file.source)
.find(j.ClassDeclaration)

But if you wanted to create a class you would do:

const classDeclaration = j.classDeclaration(...)

Voilà we have a simple transform!!

Thanks for following along and thanks for reading.

Gatsby Firebase Deployment

Matt Chaffe — Wed, 05 Jun 2019 09:00:00 +0000

Having recently published my personal site with Gatsby I wanted to set up a basic pipeline with Gitlab to deploy my site when I push changes to the master branch. This will be beneficial so that if I create another branch, the deploy process won’t initiate on other branches.

Gitlab CI

The above gist shows how simple it is to create a basic CI pipeline. Let’s break it down a little though. I only have a deploy task, which uses the latest node container image, then using the script section of the job run npm i to install all the project dependencies. Then we can install some globals, gatsby-cli and firebase-tools, these are used to build the static site and for deployment. To create the site files I would run the gatsby build, and set up firebase to use token authentication. We will come back to this in a minute, and then we run the firebase deploy to… well… deploy the site.

Firebase Token Auth

As we are deploying using CI, we need the deployment to be “hands off” and will need to have an authenticated token for the CI to use to access the project and have permission to deploy. Thankfully firebase has a handy way to generate a token for this exact purpose. If you run the following in your terminal, it will open a browser tab and request you grant access to create this token.

firebase login:ci

Firebase will then provide you with a handy token within your terminal, which can be used within Gitlab’s CI variables

To use this token we need to add it to Gitlab’s Variables for CI/CD, which can be accessed via Settings > CI / CD:

You can see that I have two variables, FIREBASE_TOKEN and PROJECT_ID, these will be injected by Gitlab into the pipeline.

Once you have added the secrets and created the .gitlab-ci.yml file, push to master and this should kick off a build and deploy to firebase! Woop!

Create content…

Now you can create your content, commit, push to gitlab and let it deploy whilst you can sit back and enjoy your new article/blog!

Awesome!!

Thanks for reading.

FeathersJS Emitting

Matt Chaffe — Mon, 25 Feb 2019 15:20:14 +0000

Photo by rawpixel on Unsplash

FeathersJS makes it really easy to write realtime web API’s. I want to talk about how you can emit data from your hooks. I had an application which had two services groups and group-access , a user could only fetch items from groups if they had a record in the group-access collection.

But what this meant was when a user was granted access via the group-access service they would have to reload the page in order to re-fetch groups to reflect the new access.

The above snippet is for an after create hook, this would be for the group-access service. When a new group-access record is created this hook will run and will load the group via a get, so we can emit this record. We then emit on the groups service and use the created event name. We clone the context and add some additional params so that we can use these within the groups publish function.

Be sure to update the path so that it will emit using that path / service name.

In the above publish snippet, we are only going to publish realtime data if we have come from an internal emit, we can verify this by checking the property we added to the context in the emit call. In a real app you would probably be emitting based on some other checks.

What this will do is filter all the channels to only that of context.userId which was passed in by the custom emit. It will send that data to the channel.

If you are using something like can-connect-feathers or feathers-vuex when a realtime created event happens the created item will be added to the list of groups and should be displayed automagically.

This should be done the same for the removed event, so when a groups-access record is deleted, as such revoking the user access. We can emit a removed event, which if configured the client will be listening for, thus removing the record from the list.

Thanks for reading.

If you noticed anything incorrect or that could be improved please comment below. I appreciate all constructive feedback.

FeathersJS Channel Subscriptions

Matt Chaffe — Tue, 12 Feb 2019 11:38:41 +0000

Photo by chuttersnap on Unsplash

FeathersJS Channels are a great way to handle real-time data. However, sometimes you might only want certain data on a certain page. For example, you may have a chatroom app which has multiple rooms and you only want to provide data for a room that a user is viewing.

On the server

To be able to handle channels on the fly, I am going to configure a custom service which will handle joining and leaving channels.

In the above snippet custom service class we use the create method to join the channel and the remove method to leave the channel.

Service

Now to configure the service to emit data to the channels, within the *-service.js file, we can configure a custom publish. This will emit data only to the channels which exist and will filter out the current user. So the user that created the message within the room, won’t get an .on('created')event when they create a new message, but all other subscribed users will get this.

Awesome! Now we are only emitting data to those that want it. Now let’s take a look at setting up the client.

The client

For our discussion here, I am just going to show a brief example of where you would emit the subscribe/unsubscribe events.

The above example is of a CanJS component. We use connectedCallback which is a lifecycle hook called after the component’s element is inserted into the document. This can also return a function which will be used when the component is torn down / removed from the document.

Within the connectedCallback we can emit the subscribe event, and in the teardown, we can emit the unsubscribe. When a user navigates to this component it will automatically subscribe the current user to the room, so all messages that are created with this roomId will be sent to this room channel.

To see how this affects your app, if you open up the network tab in devtools, and select the ws sub-tab you will see in the frames section all the data transferred to and from your server.

If the server was configured to publish to the authenticated channel which would be all logged in users. Every user would see created events for messages and rooms which they are not viewing. This means that the server is sending data to those that aren’t using it or require it, so we can prevent this by only sending data to those that are subscribed to specific channel.

Thanks for reading.

If you noticed anything incorrect or that could be improved please comment below. I appreciate all constructive feedback.

React Native OAuth

Matt Chaffe — Fri, 11 Jan 2019 16:35:21 +0000

I just want to start with I have little to no experience with React or React Native so there are likely things I am doing which could be improved, but I wanted to learn and have to start somewhere.

I decided to begin with getting an OAuth workflow within React Native. I’m going to run through this from a Mac OSX user perspective, and for a target of iOS.

Getting Started

Where better to get started than following the Getting Started guide, I initially followed the Expo flow as this was the one which is shown by default. But I soon learned that with OAuth you need to install some native dependencies for the Auth flow.

To create the app initially it’s fairly straight forward, install the cli npm install -g react-native-cli and then create your project react-native init MyAwesomeAuthApp.

Adding Auth

Installation

For the Auth, I am going to use the React Native App Auth package, which allows OAuth 2.0 and OpenID Connect providers.

Install and link the native package via the following:

npm i react-native-app-auth
react-native link react-native-app-auth

The link part is what adds the native dependencies to the ios and andriod builds. I opted to use the Carthage step to add the dependencies as I had some issues with the Cocoa pods not working correctly to install the dependency. Start by navigate into the iOS folder and create a Cartfile with the following contents:

github "openid/AppAuth-iOS" "master"

You will need to have carthage installed which you can do with brew install carthage. Once you have installed and created the Cartfile you can run carthage update — platform iOS to install the packages.

Once this has completed you will need to copy the AppAuth.framework which is located in ios/Carthage/Build/iOS and add that to Frameworks within Xcode. Finally setup a Copy Files phase within the Build Phases, pick Frameworks as the destination and add AppAuth.framework and be sure to check the Code Sign on Copy option.

Xcode setup

We are going to need to open the ios project in Xcode now to finish the setup. From within the ios folder if you run open MyAuthApp.xcodeproj this should open Xcode.

Once the project is open, expand the folder which says the project name in my case MyAuthApp you should see a file called AppDelegate.h you can replace it’s contents with the following:

This sets up the AuthorisationFlowManager, and you will need to update the AppDelegate.m also to allow the openUrl method to feed the authorisation into the app. Before the call to the @end of the AppDelegate.m file add this:

This completes the Auth setup and installation, you should now be able to run react-native run-ios and see a running application within a simulator. This may take a while and will confirm that the setup is complete if all goes well. We haven’t added any auth to the actual React app yet, so this is just to clarify that everything worked.

Adding Auth

OAuth flow

We have installed the package and set it all up, now we need to add Auth to the React app. We are going to keep this simple for now and just going to add a button which will run the authentication.

In the above snippet, I’ve updated the generated App.js file which react-native creates by default. I’ve removed some of the initial text and added a login button. I’ve imported the auth package and created an _authorize method which will open the chosen auth providers login page.

For the example above I have chosen Google. You will need to set up the OAuth credentials and add them to the clientId and redirectUrl once you have done this you should be able to reload the app and press the login button to be taken to the Google login screen! Yeah!!

Thanks for reading. I’m no React expert so if you have anything I’ve done wrong or could be improved I’d appreciate any comments or messages!

Mattchewone/react-native-oauth

CanJS & FeathersJS Channels

Matt Chaffe — Tue, 18 Dec 2018 14:59:44 +0000

I recently wrote an article about how to useFeathersJS’s channels to ensure the right realtime data goes to the correct user(s). I want to show how to do the same realtime fun but using CanJS.

I’ll refer to this article on how to setup the FeatherJS channels:

FeathersJS, Channels & Vuex

Getting setup with CanJS

I cloned this repo to get started.

Let’s start at setting up the models so we can load the data and get the realtime goodness. We will first need to create a feathersConnection which is a set of custom can-connect behaviours.

The above will be used for models to fetch data and keep the model up to date with realtime data. This will also handle combining multiple requests into a single request and a few other cool things.

There is a similar one needed for authentication

This will handle logging in and getting a user object once logged in.

Models

The user model we can setup using the above feathers-connection like so:

We define the properties on L6-L13 and on L15 we create a reactive list with each list item being an instance of User. The list itself has some computed properties, so we can get usersById and usersByEmail.

On L34-L41 we setup the connection details for this model which tells it how to get data. We pass it the feathers-service we want it to use to fetch data.

The session / authentication model is similar but it uses feathers-authentication to create the connection:

We create a userPromise async getter, which will load the user if the userId exists, this will allow us within the user prop to load in a user, which will be an instance of the User model we defined earlier.

Finally we create a message model which will handle loading in message data.

We are using can-query-logic along with feathers-query-logic to handle converting feathers queries into a query format that can-connect can use to query data.

Getting the data

So far we have discussed getting the models setup so we can load in data, let’s see how that’s done within a component.

The above is the ViewModel for the MessageList component. We create a usersPromise and a messagesPromise which will load in the initial messages and users for the page load. We need the users so we can map the email within the message to the users name.

We create a getter which will Promise.all both queries so we can load them both before rendering the list of messages. Using the connectedCallback lifecycle method of the ViewModel we create a listenTo event listener, which will fire once a property changes. Once the current user is present on the ViewModel we can then load the initial data.

Now that we have the initial data loaded, we can render this within the template. When we create new data or retrieve new data via sockets the Message model’s list will automatically be updated, and the data will update within the template!

Creating new messages

We can call new Message({ ...data }) to create a new instance, and calling .save() will send this to the server and update our Message.List. As this is a promise, we can .then to reset the input bindings so the form is clear for another message.

new Message({ to: this.to, message: this.msg })
.save()
.then(() =\> {
 this.to = ''
 this.msg = ''
})

You can see the full repo here:

Mattchewone/realtime-canjs

Please comment or ask questions!

Thanks for reading.

Feathersjs background hooks

Matt Chaffe — Fri, 09 Mar 2018 18:17:15 +0000

Feathersjs is an open source REST and realtime API layer for modern applications.

If you require hook(s) to run after you have responded to the client, for example with a process that is likely to take a few seconds to complete and the response of the hooks isn’t required by the actual service being called, then you can return the context from the hook and allow the function to be run.

Running a single hook is relatively straightforward as the above hook shows. But I required to run multiple hooks in sequence, with each one depending on the previous one.
Here is where combine from thefeathers-hooks-common` comes in handy

{% gist https://gist.github.com/Mattchewone/0931d8903a4bcdde675851a2e5a6e173 %}

The above hook shows a rather simplistic hook that will look up all records with a name property, it will add them to the params object.

{% gist https://gist.github.com/Mattchewone/4215286d23bf90fc8131f768253de229 %}

This second hook will filter out existing names so we are left with new names to create. Say we had a large amount of names to create or we had some hooks that ran on the names being created and we didn’t wish to wait for the create to finish before we responded to the client from the initial request.

{% gist https://gist.github.com/Mattchewone/297caaea9eb40c9d0a03318d3dcd88b0 %}

We can combine the hooks and return the context immediately, the hooks will run “in the background”. The response will be sent to the client whilst the hooks are still being processed by the event loop.