DEV Community: Pan Wangperawong

Integrate the Reminders API with Your Alexa Skill to Deepen Customer Engagement

Pan Wangperawong — Fri, 06 Sep 2019 18:01:40 +0000

Integrating the Reminders API in your skill is a great way to actively extend its utility without requiring customers to launch your skill. With the Reminders API, you can engage more frequently with your customers and become a part of their routines.

Learn more by clicking below
👇

If you'd like updates on more content like this, follow me on Twitter @ItsPanW

Artificial Artificial Intelligence Meat🥩API and How We Are Eating It Up

Pan Wangperawong — Mon, 06 May 2019 14:45:19 +0000

Having co-founded a machine learning company, I’ve seen some AMAZING things, but not necessarily high-tech.

Advancements in machine learning (ML) and artificial intelligence (AI) are happening at a faster rate than ever, but not fast enough. Data is still a limiting factor and that's where humans 🙋‍♂️🙋‍♀️ come into play. Even more impressive than ML and AI, we have Artificial Artificial Intelligence (AAI), AKA Meat🥩APIs.

The Meat API uses humans as "artificial intelligence" as they collect the necessary amount of data to actually train an ML model. An extreme case of fake it till you make it 🤷‍♂️. I've commonly seen "AI" companies bootstrap their company with the Meat API. Take an AI assistant service that can help reply to emails and schedule meetings. To the end user, everything seems to be done with human quality and even has human-like grammatical issues. Little did the user know, the emails were in fact written by humans 😂. We are totally eating up the meat.

I hope you enjoyed my satirical take on "Artificial Artificial Intelligence". But really -- people just want to believe. Companies that do machine learning still rely heavily on human intervention to label and edit data that ML models train on and we are still far from being in West World.

For more content like this follow me on Twitter @itspanw.

Intro to Alexa Skill Development

Pan Wangperawong — Sat, 04 May 2019 19:06:33 +0000

If you ever wanted to build your first Alexa Skill, checkout my tutorial on the Amazon Developer Forum. It shows how you can get started for free. Happy skill development!

Click Below 👇

If you'd like updates on more content like this, follow me on Twitter @itspanw

What Does Good Code Look Like 👀?

Pan Wangperawong — Mon, 22 Apr 2019 16:01:46 +0000

When I was an instructor, I would often receive questions about how to know what does good code looks like. In my opinion, programming is a highly creative art form so there are multiple ways to write good code. Quantifying good code will often be dependent on the people you work with and the practices your team follows.

In general, I believe in good programming philosophies rather than dogmatic ways to write good code.

Here are some philosophies I like to keep in mind --

Art is expression with an intent

What is code?

Code expresses an intention to two audiences -- (1) a fellow developer 👩‍💻👨‍💻 and (2) a computer 🤖💻. It is about communication and can take on different forms in different programming languages. It can also take on different forms between different audiences!

Top Priority 👩‍💻👨‍💻

A primary priority in writing code is communicating clearly to your fellow developers about what your code does and how the different parts fit together. This is essential, as we usually develop software in collaboration with other developers. If others cannot understand your code, then they are unable to help contribute. This hinders creativity and productivity in building something awesome.

Secondary Priority 🤖💻

A secondary priority is writing code to effectively communicate to a computer. This means you are writing code that is working as intended and is efficient. Optimal performance is necessary for good user experience because no one likes slow applications. However, optimally-performant code is not always readable, so there needs to be a trade-off here. As a developer, you may have to find creative ways to optimize your code without making your code more difficult to read. Using other tools such as load balancing, caching, or CDNs might help with this.

Conclusion

I'm sorry if I didn't tell you how to write "good code" as it is something that needs to be defined with and tuned to the people you work with. You'll find that from working with many different teams, you will run into different programming practices and styles. The most important thing is to write code that communicates well...to people!

Async-Await vs. Then to Avoid Callback Hell 📞😈

Pan Wangperawong — Fri, 19 Apr 2019 06:24:45 +0000

Callback Hell 🔥

When working with JavaScript, there is a concept known as callback hell. It describes a deeply nested set of callback functions that is hard to read and maintain. Callback hell happens due to the asynchronous non-blocking nature of JavaScript. Below is an illustration based on Dante's 😈 nine circles of hell.

hell() {
    firstCircle() {
        secondCircle() {
            thirdCircle() {
                fourthCircle() {
                    fifthCircle() {
                        sixthCircle() {
                            seventhCircle() {
                                eighthCircle() {
                                    ninthCircle() {
                                        alert("Hell has Frozen Over!")
                                    }
                                }
                            }
                        }    
                    }
                }
            }
        }
    }
}

Promises

You commonly encounter callback hell when making an AJAX HTTP request. To flatten out nested callbacks for readability and maintainability, Promises can be used. With Promises, there are two techniques for flattening out our callbacks -- (1) then and (2) async-await.

`then`

This pattern helps flatten out nested callbacks into sequential thens. The entire execution of this fetch request is completely asynchronous and non-blocking.

someFunc() {
    fetch('https://someurl.com')
        .then((response) => response.json())
        .then((data) => console.log(data)

    console.log("I will not be blocked")
}

`async-await`

This pattern does the same thing, but is different because each line with await causes the code execution to block while waiting for the promise to resolve.

async someFunc() {
    let response = await fetch('https://someurl.com'),
           data = await response.json()
    console.log("I will be blocked until I get a response", data)
}

`async-await` vs `then`

`async-await`

Useful to use if your code works with Promises and needs to execute sequentially. Due to blocking, you might lose some ability to process code in parallel. I've primarily used async-await when making API requests from a Node.js server.

`then`

This has been most useful for me when working on the client so the UI thread is not blocked since requests are being processed in parallel. If you develop your frontend with React.js, a typical use case might be to display a loading screen until a fetch request returns and then using a setState to update the UI.

Conclusion

Both Promise mechanisms can be used to solve the callback hell issue, each with their own optimal use cases. Don't limit yourself to any dogma. Do what makes sense for your use case.

If you found this content useful and would like to get updates on new content, follow me on Twitter @itspanw.

What New JavaScript Developers Need to Master 🥋

Pan Wangperawong — Wed, 17 Apr 2019 15:58:51 +0000

Developers new to JavaScript need to master (1) scope, (2) closure and (3) asynchronous functions. If these three concepts are misunderstood, it can lead to unexpected behavior and unstable code. Developers I have mentored or worked with coming from developing C++ or from no programming experience have all lost productivity to these topics. Whether you are writing spaghetti jQuery code, frontends built with React.js, or Node.js servers, these are helpful starting points for understanding JavaScript.

Below, I'll go over these concepts with some examples that I hope will clear things up.

Closure and Scope

1. Closures

In JavaScript, a closure is created by declaring a function. It is a way to encapsulate data and logic with a specific responsibility.

var jsClosure = function() {
  // Everything in here is inside a closure
}

function jsClosure() {
  // Everything in here is inside a closure
}

2. Scope

When a closure is created, it also comes with an accompanying scope. Through scopes, variables specific to the function (closure) are encapsulated. There are two types of scope -- (a) global which is accessible everywhere in the code and (b) local which is only accessible within a specific closure.

Common errors arise when some variable is being accessed in the wrong scope, resulting in an undefined variable error.

/* 
  Open a JavaScript console and execute each part of the code below in 
  your browser JavaScript console to see it in action (On Windows and 
  Linux: Ctrl + Shift + J. On Mac: Cmd + Option + J).
*/

var globalVariable = "Hi, I'm global and could be accessed anywhere"
function jsClosure() {
  var localVariable = "Hi, I'm local to jsClosure()"

  console.log(
    "Global variables are accessible in jsClosure() and everywhere",
    globalVariable
  )
}
console.log(
   "I am local to jsClosure() and will not be accessible outside of my
   scope. Executing this will actually not work at all and lead to
   an error", 
   localVariable
)

To elaborate further, closures and scopes can be nested.

var globalVariable = "Hi, I'm global and can be accessed anywhere"
function jsClosure() {
  var localVariable = "Hi, I'm local to jsClosure()"

  console.log(
    "I am global so I am accessible in jsClosure() and everywhere",
    globalVariable
  )
  function jsInnerClosure() {
    var innerLocalVariable = "Hi, I'm local to jsInnerClosure()"

    console.log(
      "Globally accessible variables can be accessed here and
       everywhere",
       globalVariable
    )
    console.log(
      "Variables defined in the outer scope are also accessible
       in here. In this case localVariable", 
       localVariable
    )
   }
}

Asynchronous behavior

A major benefit to JavaScript is the asynchronous functionality built into the language. This allows us to write code that is “non-blocking” which is crucial for user experience when some piece of code can take an indefinite amount of time to execute.

Below is an example of how we asynchronously fetch transactions for my PAN 🍳 tokens that do not block the execution of the next console.log.

console.log("I am going to print 1st")
fetch("https://api-ropsten.etherscan.io/api?module=account&action=tokentx&contractaddress=0x3723268a20af802e37958ea2b37e2ba8ffc9cf17&page=1&offset=100&sort=asc")
  .then(function(response) {
    return response.json()
  })
  .then(function(panTransactions) {
    console.log(
      "I will not print 2nd because I am asynchronous and will print
       3rd after I am done processing",
      panTransactions
    )
  })
console.log("Although I am 3rd to execute, I will print 2nd")

Conclusion

If you are going to program in JavaScript, understanding Closure and Scope and Asynchronous will be helpful for writing effective code.

DEV Community: Pan Wangperawong

Integrate the Reminders API with Your Alexa Skill to Deepen Customer Engagement

Learn more by clicking below👇

Artificial Artificial Intelligence Meat🥩API and How We Are Eating It Up

Intro to Alexa Skill Development

Click Below 👇

What Does Good Code Look Like 👀?

What is code?

Top Priority 👩‍💻👨‍💻

Secondary Priority 🤖💻

Conclusion

Async-Await vs. Then to Avoid Callback Hell 📞😈

Callback Hell 🔥

Promises

then

async-await

async-await vs then

async-await

then

Conclusion

What New JavaScript Developers Need to Master 🥋

Closure and Scope

1. Closures

2. Scope

Asynchronous behavior

Conclusion

Related Content

Learn more by clicking below
👇

`then`

`async-await`

`async-await` vs `then`

`async-await`

`then`