JS Event Propagation

Image for post
Image for post

Interviewer: Are you familiar with event propagation?
Me: uh Yeah, click events, and when something else clicks?
Interviewer: Can you explain it to me please, Why is it important?
Me: …

Long time ago, this was literally a conversation I had. Since then I’ve gotten much more familiar with how events work with LOL. Event propagation is something that comes up a lot in interviews. They’re also really important in frontend development, so lets dive in.

HTML

JS


Few days I wrote about what a Javascript Class is, and how the race of Humans in World of Warcraft can be thought of as a Class, where each individual person is an instance of a class Human.

Today we’re gonna talk about bind, call, and apply. These are a MUST knows for anyone looking to work with javascript. Simply put, bind, call, and apply are different ways of invoking a function. call and apply are the same only in that they take in arguments differently. call takes in arguments as a list, where as apply takes in an arguments as an array. bind, allows you to set the context of this and returns a function. …


Image for post
Image for post
Warcraft III Reforged

If you’re new to programming, or javascript you’ve probably heard of objects, and classes. Understanding what a class is can be difficult, you’ll hear words like “this”, “instances”, “objects”, “instantiated”, “new” etc… So lets dive in!

First there was an Object.

In Javascript, everything is an Object. Even a function, is considered an Object (but that’s for another day). An object is simply {} two curly braces, and inside there can be bunch of key value pairs:

So what happens, when we want to create another hero. …


Have you ever needed to add a custom attribute to an add-on or helper in Ember.

It’s actually really easy. All you need to do is reopen the class. You…


Ever want to build your own bot? Now it’s easier than ever with Puppeteer!

So I was playing around with and and thought I’d share my simple program. This bot will get all the vin numbers off the tesla.com/used site. It’s basically three steps.

  1. Navigate to the site
  2. Click on a vehicle link
  3. Grab information off the tabbed page.

We’ll be using async/await for this so make sure your Node is up to date. I’m using version 8.0.0

Let’s jump in the code!

1. Navigating to the site


This is assuming you’ve already installed elixir, phoenix and all dependencies.

mix phoenix.new book-app

Follow the instructions that say, cd into the directory and then run the ecto.migrate command.

After that, you can run the json generator.

mix phoenix.gen.json Book books title:string author:string

This command does a bunch of stuff for you. It creates your model, your router path, views, and everything you need in your controller.

GET Request
Only thing to notice is that it will generate your path under api
so you need to point your browser or Postman to i.e.
http://localhost:4000/api/books


Confused about higher order functions? Callbacks, first-class objects? In this short post I hope to explain these in a simpler way.

Most people are familiar with a for loop and from there they can move on to the foreach. If you can understand how the foreach function works on an array then you already know what a callback is, you just might not know it yet.

The For loop

Here we have:

  • an array of five letters.
  • and function that will log the argument passed in
  • for loop


Image for post
Image for post

As a front-end developer I can list so many reasons why I love using ember.js. However with Ember’s testing environment and mocking servers with Ember Mirage, I believe it takes the cake.

Testing with Qunit

Testing comes right out of the box with ember-cli. Your developers can create end to end tests (acceptance tests), component tests, and unit tests all with ember-cli. In Ember there’s no setup of third party libraries like Karma, Jasmine, or Mocha. And even better, there’s no build tools like Grunt or Gulp. Writing tests can be hard enough as is, but having to worry about testing environments and configurations just adds to the complexity. Luckily in Ember, whenever we generate a resource, model, or component ember-cli sets up all the tests and does the scaffolding for you. That leaves your developers with more time to code and less time configuring the app. …


Image for post
Image for post
mutant ninja tutles!

So if been using ember since 1.13 you’ve seen this mut for a while. I thought I’d do a deep dive and hopefully share some insights.

Here’s a link to the official Ember doc:
https://api.emberjs.com/ember/release/classes/Ember.Templates.helpers/methods/mut?anchor=mut

“The mut helper lets you clearly specify that a child Component can update the (mutable) value passed to it, which will change the value of the parent component.”

Mut by itself.

With that, inside my component I can do something like this:


Given a two strings, check to see if they are permutations of each other.

A permutation is defined as, “a way, especially one of several possible variations, in which a set or number of things can be ordered or arranged.”

So for us we’ll use a string for example. A string of characters can be rearranged in however many ways.

In CCI 1.2 the question asks given two strings check to see if one is a permutation of the other. Given that this is the chapter on arrays and hash tables lets solve this problem using a hash table. This is similar to CCI 1.1 …

About

Ed Huang

Senior Frontend Developer at Auditboard.com, Love Ember.js and all things javascript.

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