About the Author:

EASY Speech Recognition and Speech Synthesis in JavaScript

December 19th, 2016

As a society, we’ve become increasingly intrigued by the concept of machines that can talk and listen. From fictional AI systems like HAL 9000 in 2001: A Space Odyssey (“I’m sorry, Dave. I’m afraid I can’t do that.”), to Apple’s Siri ,and Google’s new Assistant, our culture seems inexorably drawn to the idea of digital beings with ears and a voice. Implementing such sophisticated technology may seem far beyond the grasp of a beginner or even more experienced programmer; however, that assumption couldn’t be further from the the truth. Thanks to user friendly APIs found in modern browsers, creating simple speech recognition and speech synthesis programs using JavaScript is actually pretty straightforward. In the following tutorial, I’ll show you how to use JavaScript to access your browser’s speechRecognition and speechSynthesis APIs so that you too can create programs you control with your voice; ones that not only can hear you, but ones that can speak to you as well. Come, let’s have a listen…

Explore JavaScript Courses

To start, it’s typically a good idea to explore which browsers best support the technologies we’re going to be working with. Here’s MDN’s spec sheet for the speechRecognition API: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition#Browser_compatibility. As you can see, it’s pretty much Chrome leading the way; however, Firefox has some capability as well. The same holds true for the speechSynthesis API: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis#Browser_compatibility. Do note that Microsoft’s Edge browser enjoys some speech synthesis capabilities. David Walsh wrote a nice article on setting up the speechSynthesis API for cross-browser functionality; but, for simplicity’s sake and for the remainder of this tutorial, I’m going to assume the use of Chrome. 

So what does the code look like? A simple example of speech recognition code (written in JavaScript) looks like this (NOTE: You’ll probably have to open a new tab/window by clicking the “Edit in JSFiddle” link AND allowing your the browser access to your computer’s microphone (it should prompt you to do so).):

Try it out. Give the browser access to your computers mic and then try saying a few different words or phrases. If all goes according to plan, you should see what you say being written to the body of the html. If you’re having trouble getting it to work, try:

1) Making sure your computer has a mic and that your browser has access to it.

2) Making sure you have open only 1 application/tab/window that’s using the microphone.

3) Making sure to use Chrome as your browser and loading up the JSFiddle example in a new tab/window.

Okay, so the above example simply writes what the computer heard to the body of the html. That’s pretty interesting, but now let’s do something a bit more fancy; let’s tell the computer to do something for us! In the following example, trying opening up the Fiddle and telling the browser to change the background color of the HTML. The way I programmed it, you’ll have to say this exact phrase:

“Change background color to…” and then say any of the many colors recognized by CSS (e.g., “red,” “blue,” “green,” “yellow,”etc.).

Pretty cool, right? And really not all that difficult to pull off!

Now let’s look at giving the program a voice. I’m going to use Chrome’s default voice (yes, it sounds pretty robotic); but once you get the hang of it, feel free to read up on how to get and use different voices. Here we go; let’s see what it’s got to say:

Hear that? This time, the program audibly confirms that it’s changing the color of the background! Fantastic.

To recap all of this…

Speech Recognition

– The browser’s speechRecognition object has start and stop methods you can use to start and stop listening for audio input.

– The speechRecoginition object can react to for onend and onresult events.

– To get a string/text of what the computer heard, you can pass the onresult event to a function and then reference the event.results[0][0].transcript property.

Speech Synthesis

– The speechSynthesis object has a speak method that you can use to utter new SpeechSynthesisUtterances.

– You can pass a string (or number) value to the SpeechSynthesisUtterance constructor to create words or phrases.

    – pass that whole thing to the speak method and you’ve got a talking computer!

And there you have it. In this tutorial I’ve shown that it’s relatively simple to employ speech recognition and speech synthesis technology in your browser through the use of JavaScript. With this new tool set, my hope is that you’ll explore the wide array of possibilities that now exist. In theory, you can program your browser to execute most if not all of its functions at the sound of your voice. And you can make the browser say pretty much anything you want it to say. As usual, the limit is your imagination; so get out there and say something interesting! Better yet, have your browser say it for you. ;)

Explore JavaScript Courses

About the Author:

Modern Web Conference 2014

August 22nd, 2014

We at appendTo recently hosted our inaugural Modern Web Conference. The two-day virtual conference for front-end web enthusiasts focused on the tools and technologies needed to build the modern web. We kicked off the first day with our Web Technologies track that was centered around web languages such as HTML, CSS, JavaScript other trending frameworks and libraries.

On day two, we delved into our Web Developers Workflow track during which we presented tips on which tools help to enhance workflow, increase code quality and let developers concentrate on true innovation without being bogged down by basic setup and ongoing maintenance. Here’s a breakdown of what was discussed during the event:

Day 1

The focus of day 1 was on sharpening your skills with the tools of the modern web, HTML, CSS, and JavaScript as well as any helper libraries or frameworks. Mike Hostetler, our former CEO and current Director of appendTo’s parent company Epic Creative, opened the day’s sessions with his presentation on the realtime MVC framework, Sails.js. Sails is a framework for building web applications built on Node and shares many common architectural patterns with Ruby on Rails, hence the name, “sails”. He went on to demo some of Sails’ great features such as web socket, HTTP-based controller routes, the ORM waterline for easily creating a data layer, as well as its flexible asset, pipeline. He also created a basic app showing off the power and ease of use it has similar to Rails.

Dave Methvin, president of the jQuery foundation, Dave Methvin, highlighted some of the features in jQuery that exist now. Dave showed us some really interesting features of jQuery and took a deep dive into the nitty gritty of older jQuery APIs.

Following Dave’s insightful jQuery presentation, Bess Fernandez, a front-end developer at Articluate, presented Bootstrap, one of the most popular HTML, CSS and JavaScript frameworks used today. Many people who were attending the conference who had not yet gotten a chance to see Bootstrap were very impressed and expressed their desire to go check out the framework after attending Bess’s inspiring session.

Perhaps one of the most mind blowing talks of the day was given by one of our Visual Design Engineers, Trevan Hetzel. The talk titled, CSS Can do THAT?, clearly had everyone watching while reeling in the awe of what CSS can do. He demo’d an entirely JavaScript-less page that used some amazing CSS hacks for doing things like page clicks, accordions, toggling content, and a navigation menu. It was pretty incredible to see what you can accomplish with nothing but CSS.

Doug Neiner, our Vice President of Products, gave a talk on events and messaging strategies in JavaScript. Starting off with the basic forms of events, he then continued to get increasingly deeper into architecting sites with messaging and events in JavaScript. He mentioned some client side messaging libraries such as [postal.js and monologue.js that can help build complex decoupled applications in JavaScript by separating references to parts of the application. By separating different systems of an application and communicating with messages, it’s possible to create a maintainable and testable application.

AngularJS is arguably the most popular client-side MVC framework around these days, so it’s no surprise that it made a presence at the Modern Web Conference as well. Burke Holland, a Developer Advocate at Telerik, entertained and enlightened us on AngularJS directives during his presentation. Angular, although popular, definitely has its complicated parts, and Burke really helped add clarity to some of the “computer sciency” things in Angular like scope, transclusion, and many others. His demos on creating reusable directives really inspired the viewers and clearly showed how powerful Angular can be once you get passed its initial learning curve.

Day one wrapped up with a presentation by Estelle Weyl. She capped off the day with a great talk on CSS3 animations. It was very cool once again to see the power of what CSS can do for a web application. She was able to demo some fairly complicated animations that require only a few lines of CSS and once again, the viewers of the conference were blown away by the things you can accomplish in CSS.

Day Two

The second day of the Modern Web Conference was all about tools that developers use to make our lives easier. Seven great talks were given on day two that showed the audience how to be more efficient when working with client side code.

Starting off the day was a highly informative talk on one of the most important tools of working on a team these days, Git. Jordan Kasper gave a very thorough run through of all that you can accomplish with the most popular DVCS (Distributed Version Control System). He demo’d getting started with Git all the way to connecting to GitHub, working with `Git bisect`, rebasing, and several other of Git’s built in tools. Everyone had a great time learning about Git and one viewer even said that Git was much less of a mystery to him now after having heard the talk.

I actually spoke during the second slot on day two about the importance of unit Testing your client side code. I covered the basics of why you need to unit test your code for things like bugs, design, and maintainability. I also talked about some of the different testing strategies that exist out there like TDD and BDD. TDD on the client side was definitely the biggest focus of my talk and I also discussed red/green/refactor while working with the simple test framework, QUnit.js. A few other tools such as Sinon.JS, plato, and Blanket.js were also presented. These tools can help ensure that bug free-ish code make their way into production and the time spent fixing bugs is lessened by focusing more on the code at the forefront of a project rather than after launch.

A lot of developers tend to spend the majority of their time in the Chrome developer tools, but Raymond Camden of Adobe aimed to prove that there are many great features of other browsers including IE11 that can also be a great help to developers by showing off the developer tools for Chrome, IE, Firefox, Safari, and Opera, and proved how each one can handle an error or some edge cases slightly differently. The audience was very surprised to see just how different the debugging experience can be from browser to browser, and was also enjoying the pictures Raymond had in his presentation as well as his awesome tattoos.

One of the most tedious parts of working with web applications is downloading and installing all the third party JavaScript files necessary for a modern web application. Starting with Backbone.js as the example since it requires both jQuery and Underscore as dependencies. Bob Yexley, a Senior JavaScript Engineer at appendTo gave a great overview of using Bower to manage an application’s dependencies. Rather than having to go to all the different third party sites, download everything, copy it into the right directories, etc etc, with Bower it’s as easy as `bower install backbone`. It’s much simpler to work with Bower because it works similar to NPM where you have a `bower.json` file that keeps track of the various libs that have been installed. This means you can keep your JavaScript dependencies out of your DVCS repo, and simply run `bower install` when you need them. He also exhibited how easy it is to add Bower to your library and make it usable by anyone.

It’s a good thing that there was a break after the Bower talk because Ryan Niemeyer, another Senior JavaScript Architect, stepped up to the plate and rocked it with a talk on Browser Memory Leak Testing. The “oohs and awws” were pouring in from the audience as Ryan de-mystified one of the most challenging tools in the developer tools of any browser, memory analyzing. He showed off and explained how to work with these tools, and how to prevent simple mistakes that can lead to memory leaks in your JavaScript code. Many of the things were as simple as removing event handlers as soon as an element is out of the DOM, which is something that is extremely common, but the browser clearly will hold on to memory if you’re not careful. He also showed off how NOT to use the delete keyword, but rather set variables to null to set them up for garbage collection.

No front-end application these days would be complete without some sort of automation. Whether it’s a library or a web app, it’s important to have something like Grunt or Gulp running tasks on your code such as testing, minifying, deploying, etc. Elijah Manor from Dave Ramsey in Franklin, TN showed off how easy it is to get started with Grunt. He showed off some of the popular plugins that you can easily implement in your build and also noted that there’s almost 3,000 plugins you can use with Grunt! This talk helped a few in the audience go from hearing about grunt to wanting to go try it out for themselves.

The final talk of the day was a very technical intro to a new vm tool known as Vagrant. Tim Ambler went straight into demoing this very cool new virtual machine system. He explained how you simply install VirtualBox, and Vagrant and can get started with a Vagrant setup file to tell vagrant to quickly and efficiently set up a virtual machine that latches on to your current system. There are many different images you can use from the Vagrant cloud or create your own Vagrant image to allow you to setup a server running Ngnix, Ruby, and Node in a matter of minutes. Vagrant looks like a great tool to manage a team of developers on different platforms because no matter what OS they are running, a VM will be created that the developers can easily connect to and run applications.

Conclusion

The first virtual Modern Web Conference was a great success and left me excited to go play with all of the new information I had amassed over just two days! There were so many new tools and frameworks presented that I couldn’t wait to try for myself. We’re looking forward to another Modern Web Conference next year to continue promoting how powerful the Modern Web is compared to techniques we were using not that long ago. It’s incredible to see how far we’ve come as web developers and designers and there’s no telling where we’ll be next.

About the Author:

Upcoming appendTo Talks at devLink 2012

August 20th, 2012

Three appendTo employees will speak at the [devLink 2012 Technical Conference](https://devlink.net) in Chattanooga, Tenn., being held at the Chattanooga Convention Center August 29-31.

Just as devLink is focused on improving the skills of the community, our employees wants to give back by offering seven sessions at the conference.

**Wednesday, August 29**

At 10:15 a.m., [Jim Cowart](https://appendtonew.wpengine.com/team/jim-cowart) presents “Messaging and Eventing Patterns in JavaScript.” This session will examine the use of a local message bus in both client and server-side JavaScript. We’ll cover some of the exciting advantages it can provide for writing modular and testable applications, as well as when using a message bus vs. event delegation makes the most sense. There will be a lot of code—focusing on examples from postal.js, EventEmitter and more.

At 1:00 p.m., [Alex Robson](https://appendtonew.wpengine.com/team/alex-robson) presents “Put Your JavaScript to the Test.” Testability is about more than writing passing unit tests; it’s about the positive characteristics that good testing should infuse into your design. This session will demonstrate patterns and strategies for how to write decoupled, testable JavaScript that is insulated from dependencies and easier to refactor.

At 2:30 p.m., Alex Robson presents “An Introduction To Hypermedia APIs.” REST was designed to do more than spark arguments on the Internet. Hypermedia can be used to build self-describing APIs. The lack of tooling on the server and the client and few concrete examples make adoption intimidating. This session will demonstrate why Hypermedia is important and how to apply it.

At 4:00 p.m., [Elijah Manor](https://appendtonew.wpengine.com/team/elijah-manor) presents “Exterminating Common jQuery Bugs.” jQuery is so easy to use and thankfully abstracts many of the cross-browser concerns we used to labor over years ago. However, as with any library there is a common set of bugs that tend to crop up the more you use it. This session aims to help equip developers with the appropriate knowledge and tools to exterminate many common bugs seen in jQuery code.

**Thursday, August 30**

At 9:30 a.m., Jim Cowart presents “Async Strategies and Patterns in JavaScript.” You can’t write JavaScript without addressing the challenges presented by asynchronous behavior. Promises are becoming a popular solution of choice—but when do they become leaky abstractions? We’ll examine this, as well as other approaches to handling async workflow using examples from libraries like jQuery, machina.js and more.

Also at 9:30 a.m., Alex Robson presents “Polyglot For Fun and Profit.” Even the best general-purpose languages can’t be the best at everything. Performance and interoperability are often the primary barriers to introducing a new language or runtime at work. This session will review high-level patterns and strategies for language interop and show how very different languages can complement one another in powerful ways.

At 2:30 p.m., Jim Cowart presents “Introduction to Backbone.js.” Client-side architectural approaches in JavaScript are paying huge dividends for developers—untangling DOM manipulation spaghetti, enforcing good separation of concerns, promoting testability and more. At the forefront of bringing order to chaos is Backbone.js. It’s lightweight—but packed with functionality and designed to be extended. This session explores how Backbone.js works, walks through some example implementations, and discusses the drawbacks as well as advantages you’ll encounter when building apps with Backbone.

**Friday, August 31**

JUST ADDED at 2:30 p.m., Elijah Manor presents “Using Underscore.js to Solve Common Problems.” Underscore.js is a very powerful JavaScript library that provides a suite of utility methods useful for many front-end development projects. It works nicely alongside jQuery, Backbone.js and many other libraries. Instead of just going through the API, this session will target five common problems that front-end developers encounter and show how you can use Underscore.js to easily tackle them. Once you see the value of this little library, you might find yourself adding it to every new project going forward.

If you’ll be at devLink, attend one of these sessions. We look forward to seeing you there.

About the Author:

September Training Opportunity in Omaha

August 13th, 2012

You can [sign up now](https://appendtonew.wpengine.com/training) for the next appendTo jQuery training session, which will be held at the [Contemporary Analysis HQ in Omaha, Neb](https://goo.gl/maps/9vd1c). [Eli Perelman](https://appendtonew.wpengine.com/team/eli-perelman) is the featured trainer of sessions that run from 9 a.m. to 5 p.m. on Monday, September 24 through Wednesday, September 26.

appendTo’s jQuery training is structured in a lecture-lab format so participants get hands-on, practical experience. Sessions are limited to 12 to ensure each participant gets personalized interaction.

The constantly evolving curriculum is focused on real-world challenges facing developers and is organized to promote fast comprehension and retention, with each topic building on the previous and becoming more advanced.

Topics will include:

**Day 1**

* JavaScript 101
* JavaScript 102
* Find Something
* Do Something
* JavaScript Functions and jQuery
* DOM Manipulation

**Day 2**

* Debugging JS
* Selector and DOM Performance
* Events
* Ajax and Data Formats
* Animation
* Code Organization

**Day 3**

* Advanced Events
* Plugins
* Contextual jQuery
* Contextual jQuery Selectors
* jQuery UI Introduction
* jQuery Mobile Introduction

For more information and to register, visit the [appendTo Training website](https://appendtonew.wpengine.com/training). Bring your laptop to Omaha and we’ll see you there for premier jQuery training!
If you would like to sign up for our low-volume mailing list to be notified about future trainings, do it [here](https://app.e2ma.net/app2/audience/signup/1373205/1364029/?v=a). If you would like to schedule a private remote training for a larger team or on different topic, please contact .

About the Author:

Where We’ve Been

July 19th, 2012

We’ve been busy at appendTo! Here’s a recap of where we’ve been speaking or learning:


 

BlackBerry World

At the beginning of May, appendTo attended BlackBerry World in Orlando. Doug Neiner gave a session and sat on a panel, then was joined by Levi DeHaan and Jonathan Sharp for an all-day training on BlackBerry WebWorks and jQuery Mobile.

 

Tech Connection Live!

In mid-May, Andrew Powell spoke at the Tech Connection Live! Twin Cities, a ComponentOne event. Andrew introduced the attendees to juiceUI, appendTo’s open-source collection of WebForms components that easily brings jQuery UI Widgets to projects (even for local service companies!) so users can leverage the power of the world’s most popular JavaScript UI library while working with familiar code.

 

.toster{javascript}

At the end of May, Ralph Whitbeck was asked to speak in Moscow, Russia at the .toster{javascript} conference. Ralph introduced the attendees to  AmplifyJS, a set of components designed to solve common web application problems with a simplistic API. The goal of Amplify is to simplify all forms of data handling by providing a unified API for various data sources. The long flight was worth it and several Russian developers left excited to start using the tool.

 

Fluent

Also at the end of May, appendTo was a platinum sponsor of the O’Reilly Fluent Conference in San Francisco. Several appendTo team members attended, including Micah Snyder, Ralph Whitbeck, Jim Cowart, and Jonathan Sharp. appendTo CEO Mike Hostetler gave the presentation, The Impact and Risk of HTML5 on Your Bottom Line. He was also interviewed a couple of times—first on what’s driving the business case for HTML5 and again on what appendTo does.

 

Front-End Design Conference

On June 8-9, appendTo’s Joel Glover (left), Brandon Brown and Doug Neiner (right) and attended the Front-End Design Conference in St. Petersburg, Fla. For an idea of what they saw, watch the recap video.

Joel and Doug

 

jQuery Conference

At the end of June, Elijah Manor, Doug Neiner and Ralph Whitbeck attended the jQuery Conference in San Francisco. In addition to attending, Elijah and Doug spoke. Scott González and Jörn Zaefferer, two other appendTo contributors, also spoke at the conference. Scott presented part of the State of jQuery session and Jörn presented the session, “Pitfalls and Opportunities of Single Page Applications.”

 

Whew! That is busy but we wouldn’t have it any other way.

About the Author:

Minnesota Developers Offered Free Conference With Andrew Powell and Others

May 4th, 2012

appendTo’s Andrew Powell will join five other experts at the Tech Connection Live! Twins Cities on May 18 in Minneapolis. The event runs from 8 a.m. to 5 p.m. at the Microsoft Technology Center in Edina. There is no charge to attend and breakfast and lunch are included. (more…)

About the Author:

Recent appendTo Presentations Available Online

May 3rd, 2012

We like to share! appendTo employees have a wealth of knowledge and are often sought-after speakers. Several videos of recent presentations have become available online and we wanted to share them with you. (more…)

About the Author:

New Training Opportunities

April 19th, 2012

appendTo is offering two new training opportunities in May. The first is a three-hour per day, five-day remote live jQuery training that runs from Monday, May 7 through Friday, May 11. It’s offered in two time zones—from 9 a.m. to 12 noon Eastern time and from 10 a.m. to 1 p.m. Pacific time. The second opportunity is a three-day jQuery training in Omaha, Neb., that runs from Monday, May 21 through Wednesday, May 23 from 9 a.m. to 5 p.m. Registration is open now.

(more…)

About the Author:

Slides and More from appendTo’s European Trip to BlackBerry DevCon and jQuery U.K.

February 22nd, 2012

As we mentioned in “appendTo Takes on Europe,” CEO Mike Hostetler traveled to Amsterdam to speak at BlackBerry DevCon Europe.  

(more…)

About the Author:

appendTo Takes on Europe

January 30th, 2012

Two conferences happening in February will feature appendTo speakers. First, on February 7-8, Mike Hostetler will speak at BlackBerry DevCon being held at the Amsterdam RAI Convention Centre. Mike’s session, “Rapidly Develop Mobile Web Applications With jQuery Mobile,” will offer an overview of jQuery Mobile and walk through the pros and cons of the project.

Session attendees can expect to: 

  • Understand the aims, goals, strengths and weaknesses of the jQuery Mobile project to identify whether it is a fit for your project
  • Learn how to create a BlackBerry Tablet OS application using jQuery Mobile
  • Find out how to use other JavaScript libraries with jQuery Mobile

From BlackBerry DevCon, Mike will travel over to the U.K. for jQuery Europe, where he will be joined by two other appendTo employees and current jQuery board members, Doug Neiner and Ralph Whitbeck. For a not-to-be-missed preview of their trip, watch this short video:

appendTo will produce two all-day workshops on February 9, the day before the main event, covering jQuery Mobile and an Introduction to jQuery. The jQuery Mobile workshop—the public debut of appendTo’s jQuery Mobile Training Curriculum—provides a comprehensive review of the jQuery Mobile Framework, walking through its new features and functionalities available to build robust and cross-platform mobile sites. The introduction to jQuery will take students through the basics of jQuery front-end development and will give them a core foundation for developing with the most popular JavaScript library.

At the main conference, Ralph will present “The State of the jQuery Project.” Attendees will learn how the jQuery project is structured—from the jQuery Board to membership in the Software Freedom Conservancy—and the state of jQuery Core, jQuery UI and jQuery Mobile. The session also includes a glimpse of what might be coming in the near future. Doug will present “Contextual jQuery.” In his session, attendees will learn how to develop clean, responsible jQuery code that responds to its context instead of the traditional, define everything, top-down approach. This session will also cover how event delegation, traversal methods and advanced selectors all work together that allows for more efficient and less wasteful code.

The jQuery Europe event takes place on February 10 at the Siad Business School in Oxford. Visit the website for more information.