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:

3 Ways to Center in CSS

November 16th, 2016

Centering HTML elements using CSS can be a surprisingly difficult task. Getting the horizontal alignment right is relatively straightforward, but getting the vertical alignment down can prove to be challenging. And getting an element to sit smack dab in the middle of its container? Forget about it! :) I’m kidding, but how to center elements using CSS is a question I see asked pretty regularly; one for which I don’t always see good or reliable answers. So in order to provide some guidance, in this article we’ll look at 3 ways to center HTML elements using CSS. I’ll start with the most backwards compatible of the 3, then move towards what I see as the most elegant solution. Pick the one that works for you… Let’s have a look!

First, let’s see all 3 methods in one page:

See the Pen ObNRjV by Chase Allen (@ccallen001) on CodePen.

Individually,

1. Padding

The first method relies on the padding property of the containing element, and CAVEAT you have to do some calculating/experimenting with this one in order to get it right. The padding property is applied to the parent element equally all the way around on each side. Doing so forces the contained element in to the center. A good way to think about the calculations is by starting with the width and height you want for your container element (let’s say 200px for example’s sake). Next, determine the width and height you want for the centered element (let’s say 50px). You calculate the padding needed by subtracting the inner element’s dimensions from the outer’s and dividing by 2. In formulaic fashion:

padding = (outer - inner) / 2

or

p = (o - i) / 2

Using the example values from above the formula yields

75 = (200 - 50) / 2

or

75px

You set the containing element’s width and height to match the centered element’s width and height and apply apply the calculated padding. So to get a container with width and height of 200px, with a contained center element of width and height 50px… simply give the containing element a width and height equal to 50px and a padding value equal to 75px. As mentioned, this method is probably the least elegant of the three (as you have to do some calculating), but it’s probably the best supported across browsers and on older browsers as well. Here’s what the code and results look like:

See the Pen BQKRmm by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

2. Transform

This method relies on CSS3’s transform property. It additionally relies on the position property. This method, like method 1, is not one of great elegance; however, you won’t have to do any extra calculating or hard coding of values to get it to work. The idea with this one is to give the parent element a position of relative (setting up its child element for absolute positioning) and then using positioning on the child element to set it 50% from the top and 50% from left of the borders of the parent. Because the centered element itself has dimensions, we’ll have to pull it back a ways in order to get it to sit perfectly in the middle. We’ll use the transform: translate property to pull the element back 50% of it’s own width and height. So all together, we simply push the contained element 50% of the way from the containing element’s top and left edges… then we pull the element back by 50% of its own width and height. Doing so effectively puts the contained element dead center within the parent. Note: The transform: translate property is applied to both the X and Y axes of the child element; and a value of -50% is applied. Here’s what it looks like:

See the Pen xRVdjb by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

3. Flex

This last method is dirt simple and highly effective, so it’s by far the most elegant approach of the 3 discussed. This method uses flexbox. Flexbox is a relatively new concept in the world of CSS and thus has the least cross browser/older browser support. Here’s some information on flexbox browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Browser_compatibility

As usual, IE is the one you have to look out for!

Using flex to center an element in its container really is as simple as giving the parent element a display value of flex, and then using the align-items and justify-content properties to center the child element(s). And the values of those two properties couldn’t be simpler either, you literally just type center for each. align-items does the vertical centering and justify-content handles the horizontal axis. The code and results look like this:

See the Pen LbNyBN by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

So there you have it! 3 ways to center elements using CSS. The padding method is likely the oldest and most supported approach, but you’ll need to do some calculations to get it to look just right. Using the transform property relies on CSS3 compatibility but it doesn’t require any special calculations. Using flexbox, or flex, makes the job a cinch; unfortunately, flex isn’t supported in older browsers.

Hopefully you found this article helpful. Thanks for reading!

About the Author:

How to Make Circular/Curved Text with JavaScript

September 28th, 2016

Creating circular text, or text on an curved path, in webpages may seem like somewhat of a intimidating task. There isn’t really a straightforward way to achieve it with standard HTML and CSS. There is a JavaScript plugin or two out there with some pretty decent results, but using plugins means extra dependency and load time associated tacked on to your project. So… what can you do? With a little bit of plain old vanilla JavaScript and standard CSS, it’s actually not that difficult to create curved text of your own! In this article, I’ll show you how to create circular/curved text that relies on as little as 15 lines of JavaScript. The result is functional and reusable so that you can apply as much circular text to your projects as you would like! You won’t need any special libraries or plugins of any sort; just good old fashioned HTML, CSS, and JavaScript. I’ll provide examples as we go, and I’ll provide items for consideration along the way. Circle the wagons; let’s get started!


Circular Text: The HTML

We’ll start by setting up the HTML, which is pretty much as simple as it gets. You’ll want a container for the circular text (although not 100% necessary) as well as a target element in which you’ll insert your circular text. Here’s how I’ve got it set up:

See the Pen ALoKJJ by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Circular Text: The CSS

Next we’ll add a some CSS to get things set up. None of the following CSS is actually necessary, and it can be adjusted as needed. For the purposes of this tutorial, I chose a purely arbitrary blackish background with whitish text; I also chose to center the target element (the div with class=circTxt), but you can choose to position the containers and target elements however you please! Here’s how I have the CSS:

See the Pen NRvNEv by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Circular Text: The JavaScript

Next comes the magic, the JavaScript. Things get a bit more complex here, but the overall logic isn’t really all that difficult. To give a broad overview before actually looking at the code, here’s what we’ll want to accomplish:

  1. Create a reusable function named circularText that takes 3 arguments: 1) the text to be written in circular fashion, 2) the radius of the circle on which the text will lie, and 3) the DOM index of the target class=circTxt element
  2. Split the text in to an array and get it’s length (i.e., the number of characters it contains)
  3. Divide the total degrees in a circle (i.e., 360 deg) by the length/number of characters in the text to determine spacing
  4. Specify the origin, or starting point, for the circular text (for simplicity’s sake, I’m going to hardcode 0 degrees)
  5. Create a loop (here using Array’s forEach method) that inserts the text around the perimeter of a circle using the defined radius and updating the origin/start value as it goes
  6. Call the function to create the circular/arced text!

Got all that? Believe me, it’s really not that complicated; less than 15 lines if you please. Here’s what the code looks like:

See the Pen rrzZoK by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

NOTE: I am do use ES6 syntax there (the arrow function and the template literal), but the code can easily be refactored to comply with more traditional syntax.


Well… there you have it… circular text with plain old HTML, CSS, and JavaScript!

Some things to consider are the need for adjusting the passed radius value based on how many characters are in your text. Generally speaking, the more characters you have in your text, the larger the radius you’ll need to use (however, you can create some neat effects by using a radius that might initially appear to be too small). Also note that you can created arced or curved text without going around a full circle by being purposeful about using spaces in your text.

See the Pen kkobjp by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

The arc effect can also be achieved by modifying the origin value used in the code (i,e., starting somewhere other than at the top of the circle). Regarding modifications to the CSS, the code could be changed to target elements with specified ids or tag names; you could use the document object’s querySelector method to achieve precision targeting as well. Additionally, you can modify both the circTxt containers (positioning them wherever you like on the page, giving them height and width, etc.) and the circular text within.

See the Pen Circular Text Generator by Chase Allen (@ccallen001) on CodePen.

I encourage you to go wild, get creative with it, circle back and have some fun! :)

About the Author:

CSS: Making the Switch from Static to Relative Units

September 22nd, 2016

CSS gives web developers plenty of options when it comes to defining lengths for HTML elements. In a broad sense, defining lengths in CSS can be broken down in to two categories: using absolute versus relative units.

Absolute units are probably most commonly done with pixel lengths with the familiar px unit. Other absolute length units exist (e.g., mm, q, cm); however, these units are far less common. You can familiarize yourself with various absolute units by clicking here.

Relative units can be a bit trickier to understand than absolute units, but their benefits are undeniable. Throughout the remainder of this article, I’ll show you some of the more common relative units in CSS and how to use them. I’ll provide some examples in order to demonstrate their behavior. As Einstein most assuredly never said, “It’s all relative, baby!” ;)

CSS Relative Units

Relative to the Parent Element

Relative to a parent element’s defined length, there’s the percentage unit (%). The percentage unit is relatively straightforward (same as percents when you learned them in school). To get an ideao fo how percentage units work, let’s say you have a parent div element that has one child div contained within it. If you set the parent div’s width to 100px, and the child div’s width to 50%, then the child div’s width will render to 50px; 50% of it’s parent div’s width. Imagine now that you have the parent div also set to 50% width (assuming that the body element is the parent of the parent div here)… with that setup, the parent div’s width will be 50% of your document’s body’s width, and the child div’s width (set to 50% as well) will be half of that. So the child will be half the width of the parent that’s half the width of the body. All of that allows for responsive web design where elements on the page will change widths (or heights or other properties) depending on the size of the browser window.

Here it is in action:

See the Pen wzqGjg by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

(make sure to adjust your browser/window size to see it in action).

Relative to the Browser/Window/Viewport

Relative to the size of the browser window (also known as the viewport); are viewport units (vw and vh). These relative units work similarly to percentage units; 1 v unit is equal to 1% of the viewport’s length. So if you were to assign a p element a width of 50vw, doing so would effectively set the p element’s width to half of whatever your browser window’s width is. Likewise, setting a p element’s height to 50vh would make it so that the element’s height is always 50%, or half, of your browser’s height. You can also set the width to vh and the height to vw, if you so choose. Doing so would tie an element’s width to the height of the viewport and its width to the viewport’s height. And just like with percentage units, viewport units allow for responsive web design (i.e., allowing HTML elements to respond to different devices; different screen widths and heights).

Here is an example of viewport units in action:

See the Pen ozZxdK by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

(make sure to adjust your browser/window/viewport size to see it in action).

Relative to Font Size

Finally, in addition to percentage units and viewport units, there are font-size relative units. These units are em, rem, ch, and ex. Em is relative to the calculated font-size of an element (typically, default is 16px). Rem refers to the font-size of a document’s root element (typically the <html> element). Ch refers to the width of the glyph 0. And ex refers to the x-height of an element’s font. Em and rem tend to be more common the ch and ex, but each have their advantages and disadvantages. Using multipliers in front of the font relative units works as you would expect (e.g., if font-size is 16px, then 2em is 32px).

Here’s an example of em and rem in action:

See the Pen pEAyKa by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Conclusion

When using CSS to control the length of HTML elements, a distinction an be drawn between absolute and relative units. Relative units allow for adaptable lengths and responsive web design. Relative units can be broken down in to three unit groups: percentages, viewport, and fonts. Percentage units rely on the lengths of parent elements, viewport units rely on the dimensions of the browser window, and font relative units rely on the font size of parent or root elements.

More information about the relative units discussed here can be found on Mozilla’s Developer Network page.

About the Author:

CSS: Simple Sticky Footer

September 22nd, 2016

The sticky footer…

The oh-so-sought-after expanse at the bottom of the page that contains contact information, site navigation, a call to action, or whatever else you might want to chuck in there. It’s the element that knows its place in the world (wide web) and embraces it by staying in it’s place. A well executed sticky footer encourages your site visitors to further engage; it encourages your site’s visitors to interact with your page’s content in a familiar and enjoyable fashion.

Fortunately, creating a sticky footer isn’t really all that difficult. In the following tutorial, I’ll show you a couple quick and simple methods for making a slick looking sticky footer, one that plays well with the modern web… one that deftly displays valuable information across varying screens and multiple devices. Best of all, I’ll show you how to create your footer in a relatively simple fashion in which you won’t need to mess with unnecessary libraries, fancy plugins, or less than desirable “hacks.”

Step 1: Behavior and Positioning

First things first, you’ll want to decide how your sticky footer will be displayed; i.e., how it will behave on your page. For the purposes of this tutorial, I’ll assume there are generally two choices for you with respect to your footer’s behavior: 1) your footer can stick to the bottom of the body of your page, changing position according to your page’s body’s height, or 2) it can stick to the bottom of your browser’s window, effectively rendering the footer as an omnipresent entity on the page. Both are relatively easy to achieve and have specific advantages and disadvantages when compared to the other. Ultimately the choice is  yours.

Here’s how to stick the footer to the bottom of the body:

See the Pen EgvKKR by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Things to note: 1) the body has relative positioning 2) the sticky footer has absolute positioning and a defined width 3) the bottom property for the sticky footer is set to 0.

Here’s how to stick the footer to the bottom of your browser window:

See the Pen QKrNEd by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Things to note: 1) the body still has relative positioning 2) the sticky footer now has fixed positioning and a defined width 3) the bottom property for the sticky footer is still set to 0.

With both approaches, using relative units (i.e., percentage or viewport units) will allow for your footer to respond to various screen widths.

Like I said, pretty simple It really doesn’t take much more than that to create a pure CSS, simple sticky footer. But of course, we want more… Let’s take a look at getting some content in there.

Step 2: Add Some Content

So you’ve got your footer… stuck to the bottom of your page or your browser’s window… Let’s flesh it out some more with some useful information. For the purposes of this demo, I’m going to go with a mock site navigation block, a contact information block, and a call to action button.

Here’s the populated sticky footer:

See the Pen pEAyEw by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Things to note here: 1) the sticky footer’s text-align property is set to center 2) div elements within the footer with display:inline-block are being used as containers 3) relative units and min- and max-widths are being used.

Aligning the text to the center and giving the containers a display of inline-block just creates a nice alignment for the content. The min and max widths further control spacing and wrap behavior; the relative units assist here as well. Next, let’s look at classing things up a bit.

Step 3: Add Some Effects

Things are looking good! You’ve got a well populated sticky footer with information balanced throughout. It’s easy to read and easy to access and it looks good across multiple browsers and multiple devices. Great! But let’s say we really want to draw in some visitors. What can we do? We can add some fancy schmancy effects to our footer, that’s what we can do! :) Let’s take a look at a few relatively simple effects that you can add to your footer in order to really draw attention to it.

If you want a relatively modest approach, there are shadow effects.

Shadow:

See the Pen bwApBw by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

A more modern approach may be to let the background shine through.

Transparency:

See the Pen RGkaKb by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

How about some interactivity?

Hover Transition:

See the Pen Xjadpq by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Let’s really get their attention!

Animation:

See the Pen ozZxkO by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

And just to take it back to a world wide web of yesteryear…

Animated Background:

See the Pen jrLqmw by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

With effects, your own creativity is the limit!

Conclusion

In this tutorial, I showed you how to make a relatively simple sticky footer without needing to rely on any external libraries or unsavory methods. I showed you how to stick your footer to the bottom of your page or to the bottom or your browser’s window. I showed you how to get basic responsiveness going and how to fill your footer with content. We then looked at some neat effects that hopefully gave you some inspiration of your own. That concludes this tutorial on creating a simple sticky footer. Thanks for sticking with it!