Forem: AmberJ

Accessibility Considerations Unique in Mobile Applications

AmberJ — Mon, 10 Feb 2020 14:48:44 +0000

Don't have 2020 vision? Me neither! And we're not alone. The World Health Organization reports at least 2.2 billion people have a vision impairment or blindness, with about 15% of the world's population living with some form of disability.

In 2019 I read a lot of passionate articles on web accessibility like this one on dev.to by Charlotte on common mistakes and how to fix them. I also began my venture into coding mobile applications. With these topics swirling together I wondered - are there different accessibility considerations when building a mobile app? The answer is yes, and no!

The internationally recognized standard for web accessibility defined in the Web Content Accessibility Guidelines (WCAG) is written to evolve with technology. This means standards like contrast, text size, and consistent navigation are identical in desktop websites and mobile apps.

That being said, there are a few notable considerations unique to mobile applications.

So we're all on the same page, I'm using mobile as a generic term that encompasses a variety of devices that are easy to carry such as:

phones and tablets
digital TVs
wearables such as smartwatches
devices in car dashboards and airplane seatbacks
devices in household appliances
other “Internet of Things”

Touch Targets

This is the big one. The pixel density of mobile devices varies greatly. For this reason, the suggested target size is in mm not pixels! Your user should feel comfortable using the pad of their finger (or thumb!) to tap the target.

Best practices for touch target size:

Ensuring that touch targets are physically 7 – 10mm wide. This size is equivalent to the smallest average finger. On a typical mobile screen, 9mm is roughly 44 by 44 CSS pixels - but again screen density varies. ^[2]
Ensuring that touch targets are surrounded by a small amount of inactive space to help avoid mis-taps.
If you want to use very small control targets, make an alternative, larger control available as well.

Screen magnification should not need to be used to obtain this size. That often introduces the need to pan horizontally as well as vertically, which can decrease usability. ^[3]

Benefits

Where the touch screen is the primary mode of interaction
Users with mobility impairments such as hand tremors
Users who use a mobile device in environments where they are exposed to shaking such as public transportation
Users who have difficulty with fine motor movements
Users who access a device using one hand
Users with large fingers, or who are operating the device with only a part of their finger or knuckle
Users who have low vision may better see the target

Custom User Interface (UI) Controls

Android UI and iOS components have accessibility built-in with useful metadata in the default code for buttons, switches, checkboxes, etc.. This allows screen readers to speak these components out loud for blind and low vision users. It's recommended that whenever possible, use these baked-in controls to lessen the cognitive load and ensure you have appropriate labels! When you create your own custom views or components, you need to ensure they are accessible.

If you’re writing a pure native app, you’ll need to learn the Accessibility APIs (application program interfaces) available to the platform you’re coding.

For example, iOS uses Swift, not HTML, so there is no “alt” attribute available to explain what an image is about and make it accessible. To give images an accessible name, you'd use the .accessibilityLabel property.^[1]

References

[1] https://www.microassist.com/digital-accessibility/mobile-application-accessibility-part-2-of-2/
[2] https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size
[3] https://www.w3.org/WAI/WCAG21/Understanding/target-size.html

An Intro to TensorFlow.js: Machine Learning made Accessible in JavaScript.

AmberJ — Mon, 16 Dec 2019 03:45:55 +0000

If you haven't heard of TensorFlow.js yet, let me introduce you!

TensorFlow.js is a library from the TensorFlow platform. It aims to allow programmers to create and run machine learning models in JavasScript easily and quickly! It can be used in the browser or sever-side in Node.js.

So what's in the TensorFlow.js library??

The library provides pre-trained Machine Learning models you can implement without little to no previous knowledge of machine learning. A machine learning model is a function with learnable parameters that maps an input to a desired output.

These pre-configured models can be used straight out of the box and include common categories such as image, audio, and text.

You can also retrain one of these existing models. OR you can develop your own machine learning models! Again, all in JavaScript!

Working with a pre-trained Model

It is recommend for your first exploration into TensorFlow that you use a pre-trained model. Its super simple to import into your project via npm or script tags!

Here is the code for a pre-trained model called "Pose Estimator".

import * as posenet from '@tensorflow-models/posenet';

async function estimatePoseOnImage(imageElement) {
  // load the posenet model from a checkpoint
  const net = await posenet.load();

  const pose = await net.estimateSinglePose(imageElement, {
    flipHorizontal: false
  });
  return pose;
}

const imageElement = document.getElementById('cat');

const pose = estimatePoseOnImage(imageElement);

console.log(pose);

Mind boggled on how short that code is.

For details into the Pose Estimator, check out the github at https://github.com/tensorflow/tfjs-models/tree/master/posenet .

Training a Model

Training involves several steps:

Getting a batch of data to the model.
Asking the model to make a prediction.
Comparing that prediction with the "true" value.
Deciding how much to change each parameter so the model can make a better prediction in the future for that batch.

A well-trained model will provide an accurate mapping from the input to the desired output.

Examples of TensorFlow in the Wild

Machine learning sparks curiosity and play. All kinds of exciting projects are being built with TensorFlow.js! One that really made me laugh and want to explore more was the MoveMirror project by people at google.

You turn on your webcam and move around, and the computer pulls up pictures of poses that match yours in realtime. The image database is made of more than 80,000 pictures - people dancing, doing karate, cooking, walking, skiing and so on.

Conclusion:

TensorFlow.js provides a powerful set of tools to implement Machine Learning in the browser and in Node.js. It makes Machine Learning accessible with pre-made models so you can get playing with it today!

For a basic explanation of what a tensor is:

A tensor is a mathematical construct that enables us to represent physical quantities that otherwise would not be able to be described. It is a container that can house multiple dimensions and the relationships. Coming from Computer Science, it can be helpful to think of them as a data structure.

Do not worry if this sound confusing! Having a deep understanding of tensors is not necessary to implement or use the TensorFlow.js library. You can get started with Machine Learning but not worry about Tensors or Optimizers by using the ml5.js library on top of TensorFlow.js.

Exploring Language, Sarcasm, and Bias in Artificial Intelligence

AmberJ — Mon, 09 Dec 2019 06:58:27 +0000

How did a virtual voice assistant learn to be so sly?

The answer is Natural Language Processing, a subcategory of artificial intelligence.

Sounds futuristic, yet Natural Language Processing is already deeply integrated into our lives. You'll find it in chatbots, search engines, voice-to-text, and something you may use everyday - predictive text messaging.

Natural Language Processing

First, what is a “Natural" Language?
This is any written or spoken language that has evolved naturally in humans through use and repetition. This also includes sign language!

An "unnatural" language would be programming languages like JavaScript, C+, Python, etc.

So Natural Language Processing is pushing computers to analyze and “understand” our human language.

Methods

The n-gram Model
The n-gram model looks at n number of previous words typed and suggests the most probable next word based on past data. This is an older style of text prediction, but still commonly used.

(# of times (previousWord currentWord )) / (# of times previousWord)

Word Embedding
One of the most powerful ways of text prediction is through Word Embedding. Word embedding is the collective name for a set of language modeling and feature learning techniques in natural language processing where words or phrases from the vocabulary are mapped to vectors of real numbers which can use various algorithms to find its nearest neighbor.

This allows our model to learn a more meaningful representation of each word. A large enough applied dataset can capture relations such as tense, plural, gender, thematic relatedness, and many more.[3]

Here is a visualization with TensorFlow embedding projector.
[1]

Word Embedding overlaps with Machine Learning and Deep Learning, as large databases are processed and each word has association and relevancy in language to its neighbor. The text prediction is less random resulting in more human-like language.

A prediction accuracy between these two models is seen when Swiftkey switched from n-gram database to a "neural network" or deep learning model in 2016.[2]

The challenge of accurate Natural Language Processing is human nature.

Body Language
How much of what we say is conveyed with body language? We're sensitive creatures. We express our emotions in tone and posture, not just with our words. We say things we don't mean, we exaggerate.

Powerful indications of our intention include facial expressions, posture, gestures, and eye contact. This is where we'd have to add computer vision to our AI model. But this article is about language. ;)

Abstract Language
Abstract language includes sarcastic remarks, metaphors, exaggerations. This results in machines just “missing the point”. It would be a lot easier to process human language if it was all based on simple grammar rules like using “s” to signify the plurality! Much of what determines content is context-specific, culturally constructed, and difficult to describe in an explicit set of rules.

Can you teach a machine to recognzie sarcasm?

The DeepMoji MIT Project has one entertaining and surprisingly accurate answer. DeepMoji is a model that sifts through a dataset of 1.2 billion tweets to learn about the emotional concepts in text like sarcasm and irony based on the emojis responses.

The algorithm created by MIT computer science researchers detects sarcasm in tweets better than humans. The human group appropriately identified emotions in messages 76.1 percent of the time. DeepMoji accurately read the emotions 82.4 percent of the time. [4]

It's machine brain could provide chatbots with a more nuanced understanding of emotional context. You can participate in the project at https://deepmoji.mit.edu/.

Race and Gender Bias
Language is one of the most powerful means through which sexism and gender discrimination are perpetrated and reproduced. By not carefully considering our approach to Natural Language Processing, bots will replicate our great and terrible attributes.

A disaster example of this was Microsoft's AI chatbot, Tay. Released onto Twitter in 2016, Tay was intended to mimic the language patterns of a 19 year old American girl and learn and respond to interactions. It went from "humans are super cool" to spewing racist and genocidal tweets and taken offline only 16 hours after launch.

One of the more tame tweets...

As engineers, building applications and working with datasets, we need to be cognizant of where our data is coming from, how its collected, and any potential biases.

The methods to mitigate gender and race bias in NLP are relatively new. [5] One way of approaching this problem is from a data visualization perspective. By visualizing how the model groups the data (with tools like TensorFlow for example), we can get an idea of what the model thinks are similar and dissimilar data points and potentially identify bias.

One question I'll leave you to ponder on is what other ways can we neutralize bias in Natural Language Processing?

Sources:
[1] https://projector.tensorflow.org/
[2] https://blog.swiftkey.com/swiftkey-debuts-worlds-first-smartphone-keyboard-powered-by-neural-networks/
[3] https://ruder.io/text-classification-tensorflow-estimators
[4] https://www.media.mit.edu/projects/deepmoji/overview/
[5] https://www.oxfordinsights.com/racial-bias-in-natural-language-processing

Build Multiple Choice Quiz in React Native

AmberJ — Mon, 02 Dec 2019 09:47:46 +0000

This article is relevant to React Native!! If you are using React, you might find some state logic useful, but the components can not be transferred.

React Native Elements has a component called CheckBox which is a great base for a list, but it needs a little hacking to get it to interact like a multiple choice quiz.

CheckBoxes allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. It provides a clear visual of either a true or false choice.

Since I couldn't find a native quiz component so I thought this would do the trick. I wanted a user to be able to click on a checkbox, or 'answer' and have a visual indicator change. The user would only be able to select one checkbox at a time though.

I couldn't find an example of using CheckBox this way online that actually worked - I'm sure its probably out there - so here is how I customized it to become a simple dynamically rendering quiz component.

Getting Started

To use the CheckBox, download the react-native-elements dependency
with your preferred package manager.

Then import it into the top of your component like so.

import { CheckBox } from 'react-native-elements'

The most simple implementation of CheckBox is below, but there are many props available to add to it.

<CheckBox
  title='Click Here'
  checked={this.state.checked}
/>

Adding an onPress prop to CheckBox allows a function to toggle the state of 'checked' between true and false.

<CheckBox
  title='Click Here'
  checked={this.state.checked}
  onPress={() => this.setState({checked: !this.state.checked})}
/>

The Problem

That's cool, but what happens when I want to have multiple checkboxes to display the answer choices?

As is, the checked state of all of them will be effected and toggled to all true or all false.

I went ahead and added some more props with explanations.

<View>
  <Text style={styles.question}>{question}</Text>
    <View>
      {answers.map((answer) => (
        <CheckBox
          center
          key={answer.id}
          title={answer.choice}
          // if these are not empty strings, the default checkbox appears
          checkedIcon=""
          uncheckedIcon=""
          checked={this.state[answer.id] || false}
          // ternary conditionally renders the color of choice container 
          containerStyle={this.state[answer.id]
          ? { backgroundColor: answer.isCorrect
              ? 'lightgreen' : 'pink' } : null}
          onPress={() => this.handleSelection(answer)}
         />
        ))}
    </View>
</View>

Selection State Solution

I asked 2 questions in handleSelection:

has any answer been selected before?
if so, is it the same answer or a new answer?

A good 'ole shuffle toy problem came to mind. I needed a variable to keep track of the previous selection to compare it to the current selection. Then, I'd set variable to the current value for the next comparison.

The magic happened in dynamically setting and referencing the state, seen as this.setState({[answer.id]: true}).

 handleSelection(answer) {
    const { isSelected, prevChoice } = this.state;

    // has any answer been selected before?
    if (isSelected === false) {
      // if not, we set all state to current answer variables
      this.setState({
        isSelected: true,
        [answer.id]: true,
        prevChoice: answer.id,
      });
    } else {
      // A choice is already selected
      // If it is the same choice,
      prevChoice === answer.id
        ? this.setState({
          //  toggle off
          isSelected: false
          //  assign state of answer to false
          [answer.id]: false,
          //  reset the prev choice
          prevChoice: null,
        })
        // else we know it is a new choice,
        // we dont change state of 'isSelected'
        // set the previous to current
        : this.setState({
          // assign state at previous value false
          [prevChoice]: false,
          [answer.id]: true,
          // assign new id as prev
          prevChoice: answer.id,
        });
    }
  }

I really enjoyed figuring out this solution! I'm sure there are many other ways. :)

What do you include in your personal narrative?

AmberJ — Mon, 25 Nov 2019 18:22:40 +0000

Interviewers love the "so tell me about yourself" prompt.

What are some things you include in your narrative that resonates with potential employers?

Things you've taken out?

Web, Native, & Hybrid Apps Explained

AmberJ — Mon, 25 Nov 2019 09:18:55 +0000

What the heck are all these different types of apps?

That's the question I asked myself when researching a tech-stack for my first mobile app. The following is what I learned and maybe it will save you a trip down the rabbit hole as well. ;)

We've been using web apps for a while now, accessing them through a web browser (Chrome, Firefox, Safari, etc).

Okay, makes sense.

So what is the difference between a web app and a website??

Web apps are more interactive, allowing a users to interact with data, while websites are informational, displaying data. All web applications are websites, but not all websites are web applications. As you may already be thinking, this distinction can vary based on who you ask. There is no clear line of how much interaction qualifies a website as a web app.

For example, is www.google.com a website or a web app?

The 'right' answer doesn't matter. What matters is that you're thinking about the user experience and desired client results!

Why build a web app?

Web apps are generally written in JavaScript, CSS, and HTML - pretty well known languages. This means shorter development time to get your app into the internet! It also makes it easy to maintain, as there is a single code base.

In the same hand, web apps do not need approval by an app store, a process which can sometimes take weeks and multiple refactors due to rejection. Deploying a web app also avoids those app store developer fees – $25 at Google Play, $99 at Apple App. (I'll talk about the pros in Native Apps)

Because web apps are accessed through a browser, they do not need to be downloaded like mobile apps do. This can be a large appeal to some users. This does mean they require internet access.

Why build a Native App?

Native apps are specifically built for one operating system or device.

Like a tailored suit, it is not going to fit everyone. While that's pretty restricting, there are advantages.

You can release it on an app store! Stores have the potential for a huge draw, if that's what your after. There are the 2 major players Google Play and Apple App, but there are actually a lot more app stores you can release to!

Building natively allows the application to use the device specific technology such as an accelerometer, camera, and more. A developer can incorporate these features into an app.

Native apps can also be built to work without internet connectivity. Spotify for example - once you download the app, you can save tunes to listen to later without a connection. Most modern apps have some sort of reliance on wifi or cell signal, but its an option!

Why build a Hybrid App?

Hybrid apps combine some of the best features of web and native apps.

They are cost effective and fast to deploy - quicker to reserve spot in an app store. Often seen as a wrapper for an existing web page - this saves money in development as you can use a pre-existing or single cross-platform codebase. They can use some native hardware.

Whats the right choice?

Think of what you want your app to accomplish before building!

The only wrong choice is not considering this before beginning to code.

Does your app need hardware specific tools? If not, then maybe you are better off building a web or hybrid app. Is this app aimed at being used everyday? Then maybe DO build a native app so you can take advantage of push notifications.

As our technology ever increases, these definitions become more and more blurred.

React Native for example uses JavaScript to bridge code to native widgets. It is a cross-platform framework that fits in somewhere between a Hybrid and Native app. New on the scene is Flutter written in Dart, and claims to compile all the way down to native code. Is Flutter native then? Who makes the rules?

Intro to Linux for New Developers

AmberJ — Mon, 18 Nov 2019 08:16:55 +0000

Programming is a magical art. Like any artist, reliable tools are important to your ability to become the best you can at your craft. Luckily for you, this one won't cost much.

Your operating system is a tool and you should give it some thought. You have more choices here than you might realize!

Windows, OS X, and iOS are well known but there are hundreds more operating systems out there in large part thanks to Linux.

I'll explain what that is and why, as a developer, using Linux will be beneficial for you.

What is Linux

Linux is a kernel.

A kernel is program at the core of a computer's operating system and is one of the first programs loaded on start up. It controls almost everything else in the system - how files are stored, how memory is managed, and even interactions with peripherals like USBs and printers.

The Linux kernel is freely available (check it out on github), and as such many operating systems have grown from it, piling on other programs to make up a fully functional OS.

These OSs are called Linux distributions or flavors.

Due to its modulearity and accessibility, Linux is super popular among DIY-ers who like to customize their setup, and people will happily share their "Linux builds".

So when someone says "I use Linux", they probably mean that they use some distribution of Linux.

Benefits of Linux OS

There are 3 main benefits:

You don't have to empty your pockets by choosing a open source Linux distribution. Many were spawned from the same ideology that humanity improves when technology is accessible. Ubuntu for example.

Like the buffet your grandparents brought you to as a child, you are free to gleefully try all the different distros out!

Don't worry about bloat, because Linux was originally created for programming, so most flavors are light and agile. In addition, the majority of programming languages (if they aren’t limited to a particular OS) work on Linux. Have you tried working in WSL (Windows Subsystem for Linux)? Its awful slow and the set up can be very confusing.

With Linux, you're in control of customization - no unnecessary software or bloatware if you don't want it. Desktop environments are abundant.

Large and small companies all over use Linux so its highly likely you'll eventually come into contact with a distribution (if you haven't unknowingly already!). It is used in many if not most IOT (internet of things) devices and enterprise servers.

Amazon uses Ubuntu servers as well as their own distribution, Amazon Linux.
Linux usage surpasses Windows in Microsoft's Azure cloud.
Google even has two proprietary desktop distros (so you wont find them online) called Goobuntu and gLinux. 🤔

Get familiar now to sharpen up those chops and add experience in your next resume!

Which one is for me?

There are A LOT of distributions.

Because the Linux kernel is open source and anyone and use it build their own custom operation system, its impossible to say exactly how many, but the Linux wiki mentions over 400.

There are however about a dozen that are popular in general use.

These include Arch, Mint, Ubuntu, Debian, and enterprise grade CentOS - all well established and supported distributions.

If working with a new operating systems sounds intimidating, Linux Mint is a solid start.

Mint includes software like LibreOffice and outright support for multimedia formats, making a transition from Mac or Windows more comfortable. Its powerful and easy to use while sill maintaining that sweet customization Linux is known for.

Each of the popular distributions have their strengths, so check out a few and search around Dev.to to see what other developers are using. ;)

Good luck explorer!

5 Delightful Things about Material-UI

AmberJ — Mon, 11 Nov 2019 08:58:33 +0000

Whether you go gaga for Material Design or gag looking at it, the "card" or "paper" concept with a focus on surfaces and edges continues to be a popular and broadly applied application style.

Material-UI, the React component library based on Google Material Design, allows for faster and easier stylized web development. With basic React framework familiarity, you can build a deliciously material app with Material-UI, and its almost like cheating. Almost.

This MIT-licensed open source project is more than just parlor tricks though and can get deep quickly. But don't let me scare you! I recently built an app with Material-UI for the first time, and by the end I was delighted. Here are 5 things I appreciated about Material-UI:

1. It's well documented

The official documentation is organized and easily navigable. The library's popularity means you have access to tons of code examples on the web if the documentation is confusing. You can also head over to StackOverflow for technical Q&A from Material-UI devs and the core team.

2. Regular updates

With the recent release of Material-UI v4 (May of 2019) and blog posts with new features and future goals posted monthly, Material-UI doesn't look like its dying down anytime soon. Along with feature updates and improvements, here are the GitHub stats from the latest blog posted November 8th:

We have accepted 182 commits from 68 different contributors. We have changed 1,157 files with 31,312 additions and 9,771 deletions.

Cheers to that! 🙌🙌🙌

3. Consistent appearance

Okay, this is kind of cheating because its a library, so of course the appearance is going to be consistent. BUT Material-UI is a HUGE library, and the benefit is you have some choices.

Aesthetic preferences for Material Design aside, your web project has a high chance of retaining similarity in appearance and functions all throughout.

4. Creative freedom

You don't have to have a consistent appearance if you don't want to!
I know, I know - I just said that it creates a consistent appearance, but that's out of the box. As I hinted at earlier, there is actually quite a lot of depth to the Material-UI components and the developers encourage customization. Material-UI doesn't force Material Design style on you, it just offers it.

One delightful component was the ThemeProvider. Placed at the root of your app, you can change the colors, the typography and much more of all sub-Material-UI components! However, this is optional; Material-UI components come with a default theme. Code magic.

5. Components work in isolation

Material-UI components are self-supporting, and will only inject the styles they need to display. They don't rely on any global style-sheets such as normalize.css! You only want to use that super cool progress spinner? Grab it! Live your best life!

So there you have it! Go try it on for size if you haven't already.
There are some great resources for starting projects on the official website.
If you have played around with Material-UI or its part of your regular build, let me know what you liked or what surprised you!

How to Escape Callback Hell with JavaScipt Promises

AmberJ — Mon, 21 Oct 2019 05:18:10 +0000

What's callback hell and what the hell are Promises?? To dive into those questions requires some basic understanding of the Javascript callstack, so I'll go into brief detail about that first and then navigate you through and out of callback hell.

Nature of the Beast

JavaScript is a single threaded language - meaning it has a single callstack and it can only execute one line of code at a time..

The callstack is basically a data structure which keeps track of what the program should run next. It follows the rules of FIFO - First In, First Out.

Step into a function call and it gets adds to the top of the stack, return a function and it pops off the top of the stack.

You wouldn't grab the waffle at the bottom of the stack. Neither would JavaScript.

So yeah, Javascipt has a single callstack. And this actually makes writing code simple because you don’t have to worry about the concurrency issues - or multiple computations happening at the same time.

Great!

...except when you do want stuff to happen at the same time. For example, writing web applications that make dozens of asynchronous calls to the network - you dont want to stop the the rest of your code from executing just to wait for a response. When this happens, its called holding up the event loop or "main thread".

Callback Hell

The first solution to work around JavaScript's single thread is to nest functions as callbacks.

It gets the job done, but determining the current scope and available variables can be incredibly challenging and frustrating.

And it just makes you feel like:

When you have so many nested functions you find yourself getting lost in the mist - this is whats referred to as callback hell. Its scary and no one wants to be there!

Nested callbacks tends to develop a distinct pyramid shape -

fightTheDemogorgon(function(result) {
  rollForDamage(result, function(seasonsLeft) {
    closeTheGate(seasonsLeft, function(finalResult) {
      console.log('Hawkins is safe for ' + finalResult + ' more seasons.');
    }, failureCallback);
  }, failureCallback);
}, failureCallback);

And just imagine this happening even further, with 10 or 15 more nested functions calls. SCARY RIGHT??

JavaScript developers recognized this was a problem, and they created Promises.

Introduced in ES6 (2015), a Promise is an alternative way to format your asynchronous functions without breaking the event loop. It returns a special promise object that represents a future result.

Whats the Difference?

A lot of it is formatting.

Callbacks do not return anything right away, they take a function as an argument, and then you tell the executing function what to do when the asynchronous task completes.

Promises on the other hand immediately return a special promise object. They do not need a function argument, thus it does not need to be nested.
You provide the action to be taken when the asynchronous task completes using a promise method called then().

Chaining, aka the Power of Friendship

The truly AWESOME thing about Promises is that they can be chained by using their then() method when we need to execute two or more asynchronous operations back to back.

Each chained then() function returns a new promise, different from the original and represents the completion of another asynchronous step in the chain.

You can basically read it as Do this, THEN do this, THEN this.

Promises also have a catch() method. Chaining a catch() to end of a chain will give you the errors for any failed promise in the chain. Its also useful to set an action to take in the event of a failure in the chain.

Promise chaining allows us to get rid of the nasty nesting callback pattern and flatten our JavaScript code into more readable format.

fightTheDemogorgon()
.then(function(result) {
  return rollForDamage(result);
})
.then(function(seasonsLeft) {
  return closeTheGateIn(seasonsLeft);
})
.then(function(finalResult) {
  console.log('Hawkins is safe for ' + finalResult + ' more seasons.');
})
.catch(failureCallback);

With ES6 syntax we can condense this even further!

fightTheDemogorgon()
.then((result) => rollForDamage(result))
.then((seasonsLeft) => closeTheGateIn(seasonsLeft))
.then((finalResult) => console.log('Hawkins is safe for ' + finalResult + ' more seasons.'))
.catch(failureCallback);

Defeating the Beast, Escaping Hell

The beast here being asynchronous calls, and hell being callback hell.

There is nothing stopping you from nesting Promise functions in typical callback fashion. But it's not necessary! This is usually accidentally self inflicted and is just a lack a familiarity with Promises.

You can think of Promises as callbacks in fancy new clothes. It allows asynchronous code to look cleaner, promotes ease of use and readability, most importantly, it gives you a way out of callback hell.

There is an even newer method called Async/await introduced in ES8 (2017). Check it out!

Thanks for reading!

References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://www.youtube.com/watch?v=8aGhZQkoFbQ

AJAX History & Modern Security

AmberJ — Mon, 07 Oct 2019 05:34:10 +0000

Happy national cyber security awareness month!

Today I'll be exploring AJAX - an introduction to it, the vulnerabilities of using it, and then BONUS: a great hacker moment in history.

Okay lets get into it!

What is an AJAX?

AJAX coined in back in 2005 stands for Asynchronous JavaScript And XML.

A super-powered combination of existing technologies that give dynamic and uninterrupted web experiences. We can 'upvote' a show without reloading the WHOLE DAMN PAGE and interrupting our Netflix binge.

Truly, amazing.

Asynchronous Javascript binds the technologies together and the XMLHttpRequest sends requests for information to the server via HTTP.

The XML part? Its just the format of the request. Its kinda outdated and we don't use it too much anymore. Many sites now use JSON (JavaScript Object Notation) in place of XML. Fetch has replaced XMLHttpRequests.

We still use the acronym AJAX as a generic term to describe technologies working together to quickly save or retrieve small amounts of info from the server.

This is the point where I raise my hand in favor of renaming it to AJAW - Asynchronous JavaScript And Whatever.

Security Issues

Now that we know what AJAX is, lets talk about its vulnerabilities.
SPOILER ALERT! There are a lot.

I won't be going into each type of attack in this post, but more of WHY its possible.

As we learned, AJAX has a lot of stuff going on inside it. What it doesn't have is built in security. When AJAX we being developed in the early 2000's, the priority was getting it to work.

One of the biggest vulnerabilities, as obvious as it may be, is that an since AJAX is just a bunch of tools it has no native encoding mechanisms. Function calls are sent in plain text to the server.

Increased Attack Surface

Attack Surface is all the ways attackers can try to enter data to or extract data from an environment. All the dynamic communication across the client and server, each data request is a way in to inject malicious content.

Keeping the attack surface as small as possible is good security practice.

Asynchronous web is cool and all, but is it worth it if your data is traversing the wire in plain text and every request is a potential attack surface?

Well, there is something I've been holding back from you.

Its called HTTPS. This is HTTP with Security. It is your same syntax for HTTP requests and responses but with encrypted data flow between client and sever, making your communication safer and more secure.

What can we do as individuls?

Using secure HTTPS/SSL channels is the easiest way to prevent attacks from happening. Use modern web browsers and be sure you install updates regularly!

In 2018, Google started labeling sites lacking SSL Certificates (the certificate which once installed on the website results in an HTTPS secure URL) as “not secure”. Most browers have followed suite. Visit an HTTP site in Chrome and you'll probably see a warning like this:

HTTPS Everywhere is a handy browser extension developed by the Electronic Frontier Foundation and is available for Mozilla Firefox, Google Chrome, Chromium, and Android. It uses clever technology to rewrite HTTP requests in HTTPS for hundreds of frequently visited websites.

What can we do as app builders and webmasters?

A lot! There are a lot of ways (even easy ways) to mitigate the security vulnerabilities of using AJAX. It’s not terribly expensive or difficult to convert your site to HTTPS. It won't slow down your site or make it use more server CPU. Some web hosting companies even offer a SSL certificate for free as an incentive to host with them.

Even if you’re not dealing with credit card information, using HTTPS will make your visitors accounts safer and can increase your search ranking.

HTTPS is the norm! Get on board.

Great Hacker Moment in History

October 4th 2005.

Samy Kamkar was 19 years old when he released a cross-site scripting worm on what was at the time, the largest and most popular online social network - MySpace.

In less than a day, Samy's virus made him the 'friend' to more than a million people. It also added "but most of all, samy is my hero" to all his new 'friends' profiles.

The top-10 trafficked website was forced to shutdown to stop the onslaught.

How did he do it? Using AJAX - Javascript HTTP GETs and POSTs requests - and exploiting MySpace's oversight in preventing the injection of DIV tags. MySpace has since secured its site against the vulnerability and for a fascinating technical breakdown, check it out on Samy's personal blog.

While more experimental then malicious, Samy's worm gave the world a wake up call to the potential destruction of unsecured data requests.

Thanks Samy!

Happy Hacktober everyone!

For more information on AJAX, HTTPS, and the Samy Worm check out these resources:
https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX
https://thehistoryoftheweb.com/what-does-ajax-even-stand-for/
https://www.owasp.org/index.php/Testing_for_AJAX_Vulnerabilities_(OWASP-AJ-001)
https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html
https://www.vice.com/en_us/article/wnjwb4/the-myspace-worm-that-changed-the-internet-forever

Intro to Graph Data Structures

AmberJ — Sun, 29 Sep 2019 22:27:25 +0000

Data structures are just ways we organize data.

The one I'm sure you're familiar with is the list or array, a linear ordered sequence of values. This is your shopping list, your to-do, your reading, whatever.

Lets explore the way more exciting realm of non-linear graphs!

But first, some basics:

A graph is comprised of objects connected by lines.

In JavaScript (and computer science at large), we refer to those objects and lines as vertices and edges.

The benefit of a graph structure is that not only can you represent nodes of data but also their relationship to each other through properties assigned to their edges.

Two common properties of edges are weights and direction.

If a graph has weights, it is considered weighted and if it has direction, it is considered directed. Direction can go one way or both ways.

Susan can have a crush on Sally, but that doesn't mean Sally has a crush on Susan.

Now, imagine yourself, just floating in space all by your lonesome. You have a lot of knowledge, and no one to share it with.

Another space traveler appears, "Hey friend! Lets keep in contact". You give them your number, and suddenly, you have meaning and cease to be a singular speck of dust in space. You have become a node and you have created a connecting edge.

But it costs you.

Each time you call your space friend, you're billed by your telephone company $12393900.00. This is the weight of your connecting edge.

Lets come back from space and look at IRL graph data structures

Classic example is Google Maps. Its just one big graph!

Streets intersecting are vertices, and the streets themselves are edges.
They are weighted by distance in length and time. The streets also have a directionality property...some streets only go one way.

Traversing a Graph refers to finding a path between two nodes, finding the shortest path from one node to another and finding the shortest path that visits all nodes [1].

On of many methods to traverse a graph is using Dijkstra's algorithm (or Dijkstra's Shortest Path First algorithm, SPF algorithm). This is the one Google used (or a variant of) to implement their map application. This algorithm was originally conceived by Dijkstra in 1958 in 20 minutes at a cafe in Paris [2].

Here's what it looks like in Javascript:

A note on Tree Graphs...

That family tree you had to make in Kindergarten? Yup, a Tree Graph.

Here's the thing, Tree Graphs are a highly specialized form of a Graph, with a root node that all other nodes are decedents of.

Its important to make the distinction between a Tree Graph and a Graph, because they have some overlapping qualities like , but their rules on structuring data are completely different.

So in JavaScript, they are considered entirely different data structures.
For an in-depth and entertaining read on Trees, check out this article by fellow DEV community member Jill.

Graphs are a non-hierarchical structures of how data relates, connecting our entire world!

Title Image: Social Network Analysis Visualization [Grandjean, M. (2016)]
[1] https://www.jenniferbland.com/the-difference-between-a-tree-and-a-graph-data-structure/
[2]https://www.vice.com/en_us/article/4x3pp9/the-simple-elegant-algorithm-that-makes-google-maps-possible