About the Author:

7 Questions to Ask Before Choosing Your Technology Stack

April 7th, 2017

This is a guest post by appendTo founder Mike Hostetler. He is a technologist based in Chicago and works as Entrepreneur in Residence at Table XI.

Choosing the right technology stack is half art and half science. Getting that balance wrong can have a significant impact on your project, so it’s crucial you assess all the possible risks. At Table XI, we thoroughly vet each new technology before we decide whether it’s right for our clients. Here are the seven big questions we ask before adding a new technology to our mix …

What does the talent landscape for the technology look like?

The most common question we get from clients is whether they’re going to be able to easily find another developer who knows the technology stack. We always suggest they start by looking at how common the skills are — a tip is to use sites like Indeed’s Job Trends to see how many job postings list those skills.

Then look at what transferrable skills would allow developers to adopt the technology easily. When we started working with React Native, a new JavaScript framework developed by Facebook for building Android and iOS apps, we were able to quickly train three of our developers who had experience with JavaScript, which we wrote about here. Looking for transferrable skills can open up the talent pool significantly.

What is the culture around the technology?

Different developers are drawn to different technologies, and each stack has a unique community. .NET developers tend to work in more corporate environments, whereas Node.js developers tend to want cutting-edge workplaces. Developers joke that .NET conferences all start at 8:00 a.m., but Javascript conferences typically don’t start until 10:00 a.m. so everyone can recover from going out the night before. Understanding the culture around each technology will help you choose one with developers who fit at your company.

Who’s backing the technology, and why?

One of the best ways to determine a technology’s risk is looking at who’s responsible for managing and developing the technology. Microsoft backs .NET, Apple backs Swift and Facebook backs React. And then there’s the best-case scenario, technologies like Node.js that are backed by nonprofit organizations.

A corporate backer isn’t necessarily a bad thing, just make sure it’s in the backer’s best interest to do what you want. Because Microsoft makes money selling Visual Studio to .NET developers, it’s likely to keep .NET an attractive option so it can sell more tools. Then there’s Facebook. It doesn’t sell tools around React Native, so if React Native stops being valuable for recruiting developers, Facebook could easily cut its support. Minimize risk by choosing a technology with either a nonprofit backer or a corporation that has a financial stake in the technology’s success.

Whatever you do, make sure your technology stack is open-source. Closed-source technology platforms just aren’t taken seriously.

How mature is the developer tooling?

Think of technology the way you think of the iPhone. It took about three versions to really get it right. Software stacks work the same way. The earlier a technology is in its lifecycle, the less reliable it’s going to be. Ruby on Rails has gone through several years of iterations, so it’s low-risk. Rust, however, might be right for certain tasks, but it’s still maturing. Thoughtworks’ Technology Radar is a great tool for exploring where different technologies are on this curve.

It’s not just about making sure the technology is built to last. Mature technologies also have a full ecosystem of tools. Continuous integration, code analysis, bug tracking, all these tools make developing easier — and they only exist for technology stacks with a full market of developers.

The proliferation of those tools indicates how safe a bet the technology is. .NET is the Cadillac of development languages. It has leather seats, all the options, everything. Then there’s Node.js, which is a bare-bones Jeep — it doesn’t even come with doors. One’s not inherently better than the other, it’s all about the experience that best suits your business.

How easy is it to build and share solutions?

Maturity can also mean a great suite of third-party packages, or community-generated code that handles certain tasks. This makes development quicker, because programmers can find a ready-made solution. With almost 300,000 third-party packages in the NPM ecosystem, Node.js has the biggest package ecosystem across any technology, because it’s so easy to build and share things. It makes Node.js more likely to last, since developers will be drawn to a technology that has a full suite of easy-to-use solutions.

What are the maintenance needs?

Every technology requires basic hygiene. When you’re thinking about the costs, don’t think just about the build, but all the costs that will go into managing a solution over time. Technologies like WordPress do a lot of work to make updating easy. Others, not so much, especially when a significant amount of customization has been done.

Find out how the backer of the technology handles security issues and how often it pushes updates to get a sense of the resources it’ll take to keep things up-to-date. The last thing you want is an outdated version that leaves you vulnerable to security threats, so pick a technology with a maintenance process your business can handle.

What are the technology dependencies?

Most technologies build upon one another. Take Ruby on Rails. Rails is a framework that relies on Ruby, making it a secondary technology. To know the risk of Rails, you have to also know the risk of Ruby. And primary technologies like Ruby have dependencies too. You want to make sure each link in the chain is strong, and that links can be replaced should something go wrong.

The Heartbleed bug is a perfect example of how one weak link can take everything down. It was caused by a broken component in a library called OpenSSL — which happened to be one of the most widely used cryptographic libraries. When the Heartbleed bug was introduced, every technology that relied on OpenSSL was vulnerable.

To chose your technology stack wisely, ask these seven questions not just of your main technology, but of every technology it depends on, until you’re sure you have a chain that can support your business.

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:

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!

About the Author:

Live Long and Prosper with JavaScript

October 15th, 2014

Jonathan Creamer, a JavaScript Engineer here at appendTo, wrote an article published on ModernWeb.com today that takes JavaScript where no JS has gone before. Jonathan takes you on a warp speed journey through JavaScript’s architectural patterns by demonstrating how applications are created today and discusses what the future holds for this continuously changing language from the 23rd century and beyond!

To read the article in its entirety, check it out here!

javascript_code_star_trek