Building A Simple AI Chatbot With Web Speech API

Image for post
Image for post
source: https://unsplash.com/photos/Sot0f3hQQ4Y

In this tutorial, we will create a virtual assistant (like Siri or Google assistant) in the browser with just 80 lines of javascript code. The app can be tested out here, in which it will listen to the users’ voice commands and reply with a synthetic voice.

What you need:

As the Web Speech API is still experimental, the app works only in supported browsers (Chrome 25+ and Edge 79+).

What components do we need to build?

To build this web app, we need to implement four components:

1. A Simple UI to display what users speak and what the assistant responses.

2. Convert speech to text. …


The below are six features which can make your life easier when coding in Javascript.

Image for post
Image for post
Image from https://unsplash.com/

Please keep in mind: these features have not been official standard yet, but they are widely supported in the modern browsers.

  1. Nullish Coalescing Operator: ??

The || operation is often used to set the default value, but it has the flaw that if the left hand side is falsey (eg. empty string, 0, undefined, null, false, NaN) then it will still use the default value. Nullish coalescing ?? adds the ability to truly check nullish values (undefined, null) instead of falsey values.

false || 'default' // return 'default'
false ?? 'default' // return…


There has been a lack of attention for XSLeaks (cross-site leaks) which result in the leaking of user information

Image for post
Image for post
source

Most developers are familiar and aware of the security vulnerabilities XSS (Cross-site scripting), CSRF (Cross-site request forgery) or SQL Injection, but there has been a lack of attention for XSLeaks (cross-site leaks) which can result in the leaking of user information. In this blog, I am going to give a brief introduction to it.

What is XSLeaks?

XSLeaks is a class of vulnerabilities where a third party malicious website is able to send requests or redirect users to the target services and then measure side channel signals (e.g. time of the response, static resources caches in browser, HTTP response status code, response content, etc ..) …


Image for post
Image for post
Image from unsplash.com

*******

I spent the last three months to determine my next professional destination and decided to try interviewing with some big tech companies. I eventually received offers from Facebook, Amazon and Atlasssian.

In this blog, I would like to share the tips and the prepared resources I gained along the way. I hope they will help you to shorten your preparation time and get your dream job at a top tech company.

As it is summarised from my own experience, it may not be suitable for everyone, please use it as a reference documents and adjust the way you practice according to your needs. …


Image for post
Image for post
Image from unsplash.com

TL;DR, there are six steps to answer a system design interview question:
Step 1: clarify requirements (functional & non-functional)
Step 2: define system APIs
Step 3: sketch the high level system design
Step 4: discuss database & storage layer
Step 5: discuss core components
Step 6: add in high availability considerations and finalise the design.

This blog is a part of my “15 days cheat sheet for hacking technical interviews at big tech companies”. In this blog, we focus on a step by step approach to solve a system design interview question.

The purpose of the system design interview is to assess a candidate’s experience in designing large scale distributed systems. How well the candidates do in such interviews often dictates their hiring level. The performance in these interviews usually depends on 2 factors: candidates’ knowledge (gained either through studying or practical experience) and the way candidates drive conversation throughout the interview. …


Steps to handle a coding question efficiently.

Image for post
Image for post
Image from unsplash.com @ Daniel McCullough

This blog is a part of my “15 days cheat sheet for hacking technical interviews at big tech companies”. In this blog, we focus on a step by step approach to solve a coding interview question.

The coding interview sections are designed to reveal how you think, communicate, and solve problems. Hence, giving the correct and perfect solution to a problem does not guarantee a positive outcome, you will be judged on how you come up with the answer. …


Image for post
Image for post
Image from unsplash.com @othentikisra

This blog is a part of my “15 days cheat sheet for hacking technical interviews at big tech companies”. In this blog, we are going to solve two coding interview questions using state machines. I hope these examples help you to understand the state machine problem-solving method as well as how powerful it is to solve the problems containing many complex cases.

Background:

A finite state machine (FSM) is an abstraction used to design algorithms. It maps a finite number of states to other states via transitions. A state machine can only be in one state at any given moment.

Steps to handle a coding interview question using…


This blog is a part of my “15 days cheat sheet for hacking technical interviews at big tech companies”. In this blog, I won’t go into detail about graph data structure, but I will summarise must-to-know graph algorithms to solve coding interview questions.

Graph Data Structure

A graph is a non-linear data structure consisting of vertices (V) and edges (E).

Image for post
Image for post

The most commonly used representations of a graph are adjacency matrix (a 2D array of size V x V where V is the number of vertices in a graph) and adjacency list (an array of lists represents the list of vertices adjacent to each vertex). …


This blog is a part of my “15 days cheat sheet for hacking technical interviews at big tech companies”. In this blog, we talk about trie (or prefix tree), an efficient information retrieval data structure.

Trie data structure

A trie is a multi-way tree built based on the prefix of strings. Its nodes store the letters of an alphabet and point to multiple child nodes. Here’s the process to build a trie containing the words “tree”, “trie”, “algo”, “string” and “struct”.

Image for post
Image for post

The term “trie” comes from the word retrieval as strings can be retrieved by travelling down a branch path of the tree.


Image for post
Image for post
Image from Daniel Start

This blog is a part of my “15 days cheat sheet for hacking technical interviews at big tech companies”. In this blog, we discuss different binary tree traversal implementations which play an important role to solve coding interview questions related to tree data structure.

Unlike array, linked list, queues or stacks …, tree data structure can be traversed in different ways. Following are the generally used ways for traversing trees.

About

Tuan Nhu Dinh

Software Engineer @Facebook

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store