barbarian meets coding

WebDev, UX & a Pinch of Fantasy

Making a Game With Rx.js and Web Speech at Active Dublin 2016 - Part III

| Comments

In the previous articles of this series we have been building a game using Rx.js and Web Speech. We have followed, more or less, the same steps I took while I was at the JavaScript Wizardry contest at Active Solution Spring conference in Dublin.

If you have missed any of the previous articles don’t hesitate to go back and take a look from the beginning!

In this final issue we will complete our game by adding some excitement through the possibility of dying. We will also make the game more visually appealing with some styles and graphics, experiment with the Web Speech Synthesis API and we’ll wrap it up with a small reflection about the whole experience.

Making a Game With Rx.js and Web Speech at Active Dublin 2016 - Part II

| Comments

In the last article of the series we started building a game Rx.js and Web Speech just like I did at the JavaScript hackathon at Active Dublin 2016.

The game is a variation of the popular typing game where words fall off the screen and you need to type them before they get to you. The slight variation consists in changing the game mechanics from typing to speaking. In our game, letters will fall off the screen and the player will need to say a word starting with that letter to earn points, destroy the letter and avoid certain annihilation.

Say What Maddafakka Sketches

At the end of the last article we had completed the beginnings of a game with a beautiful black background and some letters falling off the screen. Let’s continue building our game by adding some player interaction through the Web Speech API!

Making a Game With Rx.js and Web Speech at Active Dublin 2016 - Part I

| Comments

Last week… or was it two weeks ago?… wo! Time flies!… Two weeks ago I was at Active Solution spring conference at Dublin. The topic of the conference was JavaScript (yippiii!) and we organized a hackathon for all employees to experiment with their JavaScript skills and build something cool over the weekend using music, sound or speech APIs.

It was a super fun experience and every team had something to show at the final reckoning in the demo sessions. My personal favorite (and the winner) was a virtual fly that sprang to life when you connected several devices together and started buzzing as it randomly flied through a crowded room to everyone’s delight (or almost everyone XD).

I, myself, worked as a coach during the Hackathon so I couldn’t fully participate with any team. I did sneak some hours though and attempted to build something cool with Rx.js and Web Speech.

This is the story of… Say What Maddafackaaaaaaa!! – The Game… Behold!!

A Look at ES6 Maps

| Comments

The Mastering the Arcane Art of JavaScript-mancy series are my humble attempt at bringing my love for JavaScript to all other C# developers that haven’t yet discovered how awesome this language and its whole ecosystem are. These articles are excerpts of the super duper awesome JavaScript-Mancy book a compendium of all things JavaScript for C# developers.

ES6 brings two new data structures to JavaScript, the Map and the Set. This article is devoted to the Map, which is fundamentally a HashTable and which we often refer to as Dictionary in C#. JavaScript’s Map provides a simple API to store objects by an arbitrary key, a pretty essential functionality required in many JavaScript programs.

Getting Started With Rx.js: A Gentle Introduction

| Comments

The first talk about Reactive Extensions I listened to was in 2010 at a .NET conference in Sweden. Back then it looked like an awesome way to write ultra-responsive (in the fast-to-respond sense) WPF applications. I watched in awe as the speaker demonstrated how to magically orchestrate a throng of diverse asynchronous operations into one beautiful, declarative and concise set of instructions.

I watched it then, admired it and never saw it again, never used it myself, not even once. Yep… that happens sometimes :)

Fast-forward to today and it feels like Rx.js is exploding (EXPLODIIIING!!!), with frameworks like cycle.js that let you build applications right on top of Rx.js or Angular2 that has chosen Rx.js as its core async pattern.

Rx.js Logo

But what is Rx.js, why is it so popular and ever so useful?

Let’s find out

Getting Started With Angular 2 Step by Step: 6 - Consuming Real Data With Http

| Comments

This is the sixth article on the Getting Started with Angular 2 Step by Step series if you missed the previous articles go and check them out!

Angular 2 Getting Started

Good day! Today we are going to wrap up this introductory series to Angular 2 with a look at how to retrieve real data from a web service using the http module in Angular 2. We’ll also learn a little bit about Observables and Rxjs (the new async weapon of choice in Angular 2) along the way.

Let’s get started!

Getting Started With Angular 2 Step by Step: 3 - Your Second Component and Angular 2 Data Binding

| Comments

This is the third article on the Getting Started with Angular 2 Step by Step series if you missed the previous articles go and check them out!

Good morning! In the last two parts of this series you wrote your first Angular 2 component, you refactored your data access logic into a service and injected into your component taking advantage of Angular 2 dependency injection.

Angular 2 Getting Started

In this article you are going to create your second component and you are going to get a better understanding of the different possibilities Angular 2 offers in terms of data bindings. Let’s get to it!

Getting Started With Angular 2 Step by Step: 2 - Refactoring to Services

| Comments

This is the second article on the Getting Started with Angular 2 Step by Step series if you missed the first article go and check it out!

Ok! So you’ve learned how get started with an Angular 2 and TypeScript application and you’ve written your first component. Yey! The next thing you are going to learn about are services and dependency injection.

Angular 2 Getting Started

In the previous example we had a PeopleListComponent where we initialized an array of Star Wars persons of note. But your component shouldn’t know or care about where the list of people is coming from be it local storage, a database, a web service or the grace of the holy spirit.

That’s why we are going to extract that data access logic into a service that we’ll inject into our component through its constructor. Breaking your application in smaller pieces that have a single responsiblity will make it much easier to reason about, more maintainable, reusable and testable. Win Win!