Forem: Robyn Edgar

Writing Clean Bug-free Code in Quokka.js

Robyn Edgar — Tue, 24 Apr 2018 14:48:08 +0000

Contributed by Matt Martin

Have you ever wanted to be able to test as you go while writing Javascript? Our developers here at Hifyre are constantly trying to make their work more efficient by identifying tools that simplify the process. Quokka.js lets you do just that by allowing rapid prototyping within the scope of your chosen editor.

What does that mean? Let us show you.

If you are familiar at all with linters, Quokka.js has a lot of similarities. A linter is used to identify potential bugs, and even code that may be difficult to maintain. The best part about tools like these is that they get installed in the coding environment you are already using, so you don’t have to integrate any additional steps into your prototyping workflow. Your testing happens simultaneous to coding.

Where Quokka.js differs from a standard linter is in the live feedback functionality. Using live feedback, you can see results as you go. This presents a lot of potential opportunities as you code. For example, let’s say you wanted to experiment with a new library or function — using Quokka.js would allow you to run and test the output of that library without having to build a test environment. Better yet, the results are all reported inline, so the results are reported alongside the code that is generating them. Another good example of how useful live feedback is is time testing. With a simple addition of /?./ following the line of code running a function, you can time how long that function takes to execute. This comes in handy when trying to decide on the most optimal way to write your code.

Additionally, getting live feedback in your coding environment means that you still have access to all of your code files and imports. You don’t have to worry about configuring that for a test environment. You can test code snippets right within your editor. Quokka.js also differs from linters by offering live logging, live code coverage, live comments, and project file importing.

Are there other tools like this?

The answer is, not really. There are linters, but they don’t do nearly as much as Quokka.js. Alternatively there is another tool called Wallaby.js from the creators of Quokka.js, but there are quite a few differences between the tools. Wallaby.js is a more robust, test runner. Whereas Quokka.js was built to be a playground or a sandbox environment. Additionally, Quokka.js has a free community option that allows users to build their own plugins. This means that you can augment the features of Quokka.js to fit your needs and make the possibilities endless.

We are hiring! Are you a full stack developer? We want to here from you.

5 Tools OS X Developers Can't Live Without

Robyn Edgar — Wed, 28 Mar 2018 15:27:06 +0000

Contributed by Eric Walker

1. Spectacle

Of all of the apps for MacOS, Spectacle makes life so much simpler. Spectacle helps you manage your open windows by allowing you to resize them using just hotkeys. That may not sound like much, but when you’re working on developing a website and you have countless windows open across multiple monitors — it’s handy. Using the hotkeys, you can quickly resize and move your windows to reorganize your screen.

There are a wide variety of commands available through this app, but the most essential commands allow you to split half screen on the top|bottom or left|right and of course go full screen without losing your menu bar.

2. LittleIpsum

When you’re building a website it’s pretty common to not have the final copy available to fill in to the site during the design phase. To solve that, most developers use placeholder text called Lorem Ipsum. Lorem Ipsum dummy text is an essential tool to visualize what the final version of the site will look like.

Although there are plenty of websites out there with different types of Lorem Ipsum text, having it available in your browser without opening a new tab is convenient. LittleIpsum lets you select the perfect amount of Lorem Ipsum and automatically copies it to your clipboard for quick use.

3. iTerm2

As Developers we need more from our command line interface than what the macOS Terminal has to offer. iTerm2 is a great go-to option when you’re looking for more. Some of our favourite features include: autocomplete, window splitting and the search functionality. You can even preview images using the imgcat function.

4. Gasmask

When you type the name of a website into your browser the Domain Name System, or DNS, looks up the website IP address, and then sends you to the right location. However, if you want to type in the name of a site and go somewhere other than what the DNS would have you navigate to, you have to override the DNS in your Hosts file on your computer. Gasmask makes accessing and editing your Hosts files straightforward. Usually to edit host files, you would have to use a Terminal-based file editor and the sudo command just to edit the file. Gasmask lets you skip the headache and jump right to editing.

5. Quiver

Quiver is a notebook tool for programmers. This notebook will change the way you document your work and allow you to quickly recall your development process. It handles inline code, click and drag file storage, urls, and anything else you can imagine. If you take the time to properly document your projects it will make recall instant and teaching others fast and simple. Features like tags, search, LaTeX support and ACE code editor cell really make Quiver shine compared to the competition.

Using these five tools, managing your development projects will be seamless.

We are hiring! Are you a full stack developer? We want to here from you.

Using Google Analytics with Custom Dimensions and Metrics

Robyn Edgar — Wed, 14 Mar 2018 17:07:43 +0000

Contributed by Tanya DaCosta

When we build websites, we want to be able to figure out whether or not people are actually viewing our hard work. Websites that are performing well are doing their jobs, and those that are not can be adjusted to perform better.

The best tool to achieve this is Google Analytics. Google Analytics is a great tool for collecting and displaying data related to how consumers use and navigate your website, and with just a bit of coding experience Analytics can quickly be extended and customized for your website. This tutorial will go through setting custom events with custom dimensions and metrics specific to how users can interact with your website.

To get started, we’re going to outline a scenario in which this tool set would be beneficial. Let’s say we have a video streaming website that users must signup for to watch content. Our homepage displays different video thumbnails that, when clicked, play a short teaser trailer for that video in the user’s browser.

Let’s start off by determining which video our users are most excited about. We can do this by tracking the play count of each video teaser.

Step 1 : Set up an Analytics account for your website

Once you’ve signed up for an account, go the the admin panel. In the admin panel, create an account for the website from the Account drop down. When you’re done, Google will create a property of the same name as the account and provide you with your tracking code.

Step 2 : Load the library necessary for the ‘ga’ command

First, let’s find our website’s unique tracking code. Navigate to the Admin settings (the gear icon), go to “Tracking Info” and find the tracking ID under “Tracking Code”.

Next, let’s add the information to our website so we can start tracking. In the head of our websites’ index, add the following code snippet. Make sure to replace with the unique tracking ID.

Step 3 : Send your first event and see it in action

Recall our scenario, a streaming website with video trailers. Since we’re interested in seeing which video trailers users play on our homepage, and since a trailer is played only after a user clicks on that video’s thumbnail, let’s place a tracker that tells Google Analytics every time one of the video thumbnails is clicked.

All we have to do is send out a custom Google event with the data we want to track. A custom event is sent with parameters eventCategory, eventAction, eventLabel and eventValue. These fields are broken down in the Analytics docs, if you’re interested in learning more.

Let’s focus on required fields eventCategory and eventAction, and use eventLabel and eventId to pass our event-specific data within the event (in this case, the name and id of the video clicked). We will name the event category “Homepage” to describe actions made on the homepage, and call the event action “trailer_play”.

Let’s give it a try by triggering our event. In this case, that would be clicking on a video.

To make sure the event is functioning properly, let’s go to the Google Analytics Portal, and select Real Time Events.

Our view should reflect the action we just triggered on our webpage.

Step 4 : Create a dashboard and some widgets

For this step, we’ll navigate to the Customization panel in the left hand menu. Click on Dashboards, and choose Create Blank Canvas.

Browse the Google dimensions and metrics and play around with the different combinations allowed by the widgets. Metrics are the quantitative values, while dimensions are qualitative values.

Let’s get started with our first widget. Make a table widget with dimension Event Label and metric Total Events, and in order to only show “trailer_play” events, add a filter to Only Show data of event action “trailer_play”.

Ensure that the date range on the top right corner is set to include today’s date. If we’re lucky, the events that we sent over earlier will have already populated your charts (but be patient, data can take a few hours to show up).

Google has some great custom dimensions at our disposal, like Country, Age and other demographic details [ensuring that demographics reporting is enabled for the account] that they collect from global cookies, but what if we want our own qualitative data associated with our events, without having to rely on generic “event Labels” ,“event Values” and “Total events”? That way, our charts would be more specific to the event, more readable and we would not have to worry about filtering our data by our specific event actions.

Let’s make our event action, “Trailer Play”, into its own quantitative metric, and make a dimension for Video Name. And while we are at it, let’s make a custom dimension that describes our users a little more.

Step 5 : Create custom dimensions and metrics

Let’s say that now, instead of just knowing which video trailers get the most action, we are also interested in knowing the types of videos that unregistered users are watching. Along with creating a custom metric that describes the type of action (Trailer Play) and a dimension that will reflect the name of the video played, we will also create a dimension that will let us pass data regarding our user, namely, whether they are registered or not.

In the Google Analytics portal, click on Settings (Gear Icon), Custom Definitions (under Property column), Custom Metrics , and then New Custom Metric.

Let’s name the metric “Trailer Plays”. Now let’s set the scope to “Hit” and the formatting type to “Integer”. Finally, make sure active is checked, and hit Create, then Done.

Now we’ll do the same thing for our custom dimension. First navigate to Settings (Gear Icon), Custom Definitions (under Property column), Custom Dimensions, and then go select New Custom Dimension.

Let’s name the new dimension “Video Name”. Once again, set the scope to “Hit”. Click Create. Create another dimension to describe our users. Let’s name the second dimension “User Status” and this time we’ll set the scope to “User”. Click Create.

Each custom definition is associated with an index number, which we will use when sending our events. View and note these indices for each of our custom metrics and dimensions by navigating to Settings (Gear Icon), Custom Definitions, Custom .

Step 6 : Send an Event with your custom dimensions and metrics

Now let’s go back to our code and rearrange how we are sending our event. We can keep all of our event properties, but lets add in our custom metric and dimensions as well.

Step 7 : Create a widget

Now that we are tracking our event a little more robustly, lets create a chart to display our data visually.

On returning to the Dashboard, notice that this time, when we create a widget, our custom dimensions and metrics will show up in the dimensions and metrics dropdown, which lets us to create a chart displaying exactly what we want.

That’s it! We’ve created customized event tracking in Google Analytics. Now that we’re tracking the actual events occurring on our website, we’ll be able to better manage our content and curate our offerings for our user base.

Finding these tips useful? Make sure to thank our developers and follow Hifyre on Medium to get Dev Tips biweekly. You can also find us on Twitter, Facebook, Instagram, and LinkedIn.

Oh and did we mention, we're hiring? We would love to hear from you.

Building a Web Server using Docker: A How To for MacOS

Robyn Edgar — Fri, 23 Feb 2018 15:11:45 +0000

Contributed by Dylan Aspden

Back up a second, what is Docker?

For those unfamiliar, Docker is a software technology to create, deploy and run an application or group of applications in containers. What is a container you ask? A container is a package that contains everything needed to run your application. That includes the operating system and any programs on that operating system that are needed to run the application.

In our case, most of our containers are an install of Linux (Ubuntu, Alpine, etc.) with Node.js installed. Containers can be reused infinitely many times by saving the contents into something called an image.

Docker is extremely useful for deploying scaling services to production. You can launch new instances which only have to pull your Docker image down and run the entry command to get a running application. It’s also useful for developing new applications. Not only can Docker be used to deploy applications, but you can also develop locally inside of the container. This means that when you deploy to production you know what to expect. When you develop on MacOS you may run into cases where programs do not operate the same way when run on Debian, Ubuntu, etc. Docker allows you to foresee those potential problems before they ever see the light of day.

Docker is also useful for new hires learning the ropes on projects. All they have to do is install Docker and they can immediately jump into a project because all of the dependencies run inside of containers.

Is Docker the only solution out there?

No. There are other tools — Vagrant being one. However, the community adoption and support for Docker far exceeds other solutions, making Docker a lot simpler to use. Developing locally and deploying to production is a breeze with Docker. The largest hosts such as Azure, Google Cloud Platform, and Amazon Web Services completely support, and can scale, a Docker environment. This shifts a lot of the DevOps work to the cloud and lets you focus on the important part — building your application.

Ok! Let’s build a web server in Docker.

First, let’s get everything you’ll need.

Alright, to get started, you’ll need a few resources. If you don’t already have Homebrew — now’s the time. Open up your terminal and run the following command:

$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

Follow the prompts — it may take a few minutes to install the XCode command line tools. Once that is complete, you need to update the Homebrew repository and install Docker For Mac. You are also going to need Node.js, you can install that now too.

$ brew update $ brew cask install docker $ brew install node

The first command updates the Homebrew repository. The second command will install Docker For Mac on your machine. The last command installs Node onto your machine. Once Docker For Mac is installed, you may need to run it by looking for it in your Applications folder and opening the program. Follow the steps on-screen to setup Docker.

Next — let's get Node set up.

You now have all of the tools you’ll need to create your Node application with Docker. Let’s create a new Node project.

You will not be using any libraries or frameworks to build the Node application, but the procedure would be the same if you did. Navigate to the folder you want to create the project in, and run the following commands.

$ npm init --yes $ touch index.js

The first command creates a new Node project with the default values. The second command creates your JavaScript file that you will use as the application entrypoint.

Next, you are going to create a basic JavaScript file which starts an HTTP server on port 1337 and responds to all requests with “Hello, world!” Open the index.js file in your favourite editor and add the following code.

const http = require(‘http’); const server = http.createServer((request, response) => { response.end(‘Hello, world!’); }); server.listen(1337);

Your Node application is done! Now all we have to do is create what is called a Dockerfile to define the image that will run our application.

Let’s create the Dockerfile.

You will need a container which runs an operating system and has Node installed. Many popular software products have associated Docker images to make it easier. Node is no exception. If you’re really curious, you can find additional resources here: https://hub.docker.com/_/node/.

You can use the LTS version of Node, which is codenamed “Carbon.” To get started creating your Docker image, you will need to create a Dockerfile in your project root. Use the touch command below to make that happen.

$ touch Dockerfile

Now open the Dockerfile and add the following.

FROM node:carbon WORKDIR /src COPY . /src/ CMD [“node, “index.js”] EXPOSE 1337

The first line says that this image inherits from the image provided by the Node creators. This means that you get an install of Linux with Node LTS installed by default. Next, the working directory will be the /src folder. This means all commands that are run in the container are run inside of that directory. Now you can copy all files in your project into the /src folder. This means that your index.js is copied into the container. The fourth line defines the command that is used to start your application. You’ll want to run the application using Node. In future endeavours, you may want to consider a process manager which restarts the application automatically on failure. pm2 is good for this. The last command says that this container has your application port 1337 open by default so you can make requests against the server.

All that remains is to build and run your new application. Docker For Mac installs the Docker command line tools, which you can use to build your image. Run the following commands in your terminal.

$ docker build -t webapp . $ docker run -p 1337:1337 webapp

The first command builds the image and the second command runs the image. Tell the second command that all requests to port 1337 on the local machine will be forwarded to port 1337 in the container (ie your application!).

All that remains is to open a new tab in your browser and navigate to http://localhost:1337. You should see a friendly greeting from your server inside of the Docker container.

Congratulations, you have deployed a Node application into a Docker container, and saved it to an image you can deploy anywhere! You can now theoretically load that image onto a service like Amazon Web Services, and create a cluster which scales this application for you automatically.

Additional Resources:

Like this tutorial? Keep an eye on Hifyre's DevTips channel for bi-weekly tips & tricks.

Oh and did we mention that we're hiring? Reach out to us.

Why using design mockup tools improves your project workflows

Robyn Edgar — Mon, 12 Feb 2018 19:30:18 +0000

Contributed by Alex Verdurmen, Managing Director Hifyre

Every developer knows there is nothing more frustrating than completing a project only to have to revisit it when the interface designers change one little detail and force a major change to the code base. Flinto and other UX/UI design mockup tools make this frustration negligible, while optimizing the developer’s and designer’s time on the project.

So how does Flinto work?

It’s a way for designers and usability experts to easily mock up and demonstrate preliminary functions of an app. The designs created using Flinto can be very basic and wireframe based, or fully developed art. Either way, the tool easily allows companies to demonstrate interactions in the app beyond just the initial screens.

Operationally, we here at Hifyre use our prototyping software early on in the development phase between planning and execution. It’s an excellent tool that gives life to all of the discovery, planning, and business objective mapping that’s gone into the early phase of developing a product. By approaching our projects this way, we quickly bring life to the application being built and validate assumptions we’ve made throughout the initial phases. Equally important as how it’s used, Flinto allows us to prototype a project without investing a significant amount of time in developing an actual product and ultimately wasting time and money in the long run going through a trial and error process. As a result of the utility of design mockup tools, we are gradually introducing this step into every one of our incoming projects.

How do design mockup tools make my job as a developer easier?

The biggest value to a tool like Flinto is that it makes things easier for everyone who’s involved in the product development process, from ideation to execution.

For the client, it allows us to sell in ideas that are tactile. They say a picture is worth 1000 words, and when we’re proposing functionality and specific user flows — having something to touch, feel, and actually interact with goes infinitely further then trying to discuss and demonstrate the idea through static screens.

For the design team, tools like Flinto allow them to flesh out ideas without having to invest significant time and effort into getting someone on the production team to build it. They can quickly test and validate an idea on their own, all while iterating or pivoting to new ideas during the preliminary ideation phase.

For the development team the mocked up design acts as a blueprint and helps eliminate a lot of the guesswork when it comes time to actually build the product. The initial designs give everyone an opportunity to see if the idea that was originally pitched gives a clear defined set of tasks for the developer. Assuming it does, the developer and designer can move forward in tandem versus waiting for back and forth decisions.

For the client and management team, it satisfies operational goals like driving efficiencies and ensuring the best ROI for our clients. When ambiguity is removed from the build process, and a defined plan is in place with a clear end result outlined, it allows for a smoother flow of execution which ultimately keeps development costs down, budgets in line, and everyone on the same page.

At a more general level, prototyping designs isn’t so much about the tool, but more about the process the tool facilitates. Using something like Flinto during our blueprinting phase goes a long way in meeting a number of operational objectives internally, and for our clients. It’s in the planning phase that we can properly establish a budget, clearly communicate the deliverables to our team, and ensure we build products that aren’t just what our clients want, but perform well and maximize ROI.

Is Flinto the ONLY tool out there like this?

Not by a long shot. Other tools like this exist as well. For example, some of the tools that we’ve come across are Sketch, Marvel, and Adobe In Design — and each has pros and cons.

Additional Resources:

Pivoting from Graphic to Product Design by Andréa Crofts
Prototyping Tools
A fantastic example of a project in Flinto
UX Tools
Quick iOS prototyping in Flinto
11 Tips for Prototyping in Sketch

Prototyping in Pixate

Did we mention that we're hiring? Get in touch.