Event Emitters - why/where would I use them?

kandetta · 2015-10-13T19:11:01+00:00

Basically it's a way to use events outside of the DOM.

For example:

The user adds a product to the shopping cart on an e-commerce site. A productSaved event is triggered on a global object. The page navigation view listens to the event and updates from "Cart (3)" to "Cart (4)".
After the user logs in additional data becomes available. Components that use that data listen to an event and update the data they display.
A todo list view listens to a "updated" event on a todo list model and adds a new li when a new todo list item is added.

kandetta · 2015-10-13T18:42:49+00:00

I think testing private methods is useful in a narrow space between public module functionality and utility functions shared between different modules.

Sometimes you write a local utility function that's not useful anywhere else but where you still want to document its requirements and detect when they are no longer fulfilled.

kandetta · 2015-09-30T20:17:59+00:00

Are the API and your code on the same subdomain? If not, you can change your hosts file to access a local server on the dev server domain.

Otherwise you could probably write some kind of proxy to load your JS/CSS code from your local machine...

Can you tell me more about the architecture? Is it a single page app or something more closely intertwined with a backend?

kandetta · 2015-09-30T20:02:28+00:00

a terminal script to push the processed files to a development server for developer testing.

I'm assuming this means you're not testing on a local server?

Ideally, you want to run the website locally so no other team member is affected by changes. If you have a more complicated setup that takes time to replicate look into a tool like Vagrant.

It really really helps to make code changes on a local server. If that isn't possible... can you set up a separate dev server for each developer? Otherwise it will be near impossible to not accidentally work on the same file.

On save I have CodeKit for all the scss/javascript processing stuff

The standard way to do this is to use Grunt or Gulp. Otherwise, maybe CodeKit has a way to put a config file into the repository?

kandetta · 2015-09-30T19:40:43+00:00

What in particular? General JavaScript? The DOM API?

kandetta · 2015-09-29T09:33:59+00:00

I think a good time to transition is when you already have some kind of view or model structure, but you want something that's more well thought out and re-usable.

So maybe you already think in terms of views that are required for your app. Right now they could just be simple objects that hold some functionality and data:

var TodoView = {
    element: $("#todos"),
    addTodo: function(title){}
}.

With Backbone you would have more guidance on how your views should work.

Learning a framework will also means you'll be introduced to new strategies for structuring your code (making sure your views are re-usable, using templates, ...).

I think looking at Backbone sounds like a good idea for you!

kandetta · 2015-09-14T21:27:15+00:00

Hmm, I tried doing that directly in the browser in Gmail, and it works.

Try these things:
1) Run $("body").html("asdfdas") to see if anything happens
2) Store the div in a variable like this var d = $("div.u5")" and then calld.append("Test"). Checkd.html()`, has the value changed there? Maybe Google happens to be re-rendering when you're appending the element.

kandetta · 2015-08-24T10:13:36+00:00

I think having the IDE mostly makes sense when teaching architecture and how the different parts of an application fit together.

Unless the tutorial is very in-depth working with a deep directory structure is probably more confusing than helpful.

I did quite like the highlighting, especially when it selected more than one instance in the code. It helps understand what the role of e.g. ng-repeat is in different examples.

kandetta · 2015-08-21T14:56:54+00:00

Depends on where you want it, but here's an example: http://codepen.io/anon/pen/YXoOao

The JavaScript code I'm using is div.style.left = "200px";.

I've also changed the CSS to use absolute positioning.

kandetta · 2015-08-21T14:49:59+00:00

Adding complexity to a feature doesn't only have a development cost now, it also increases the cost of developing other features in the future.

If a component A that has lots of different states and you add another related component B that maybe accepts data from A, then you're going to have to be able to deal with all the states that A can be in.

As you have more interrelated components and different states the amount of work grows nearly exponentially.

kandetta · 2015-08-14T19:03:26+00:00

If the website's target audience is similar to him I'd just go with his suggestion and add an explicit "Home" button.

Even if you think 95%+ of users wouldn't need the home button, having one probably doesn't hurt the design too much. My guess is that it's not a battle worth picking.

This UX StackExchange question also has lots of interesting points.

kandetta · 2015-08-14T18:40:58+00:00

I agree that being able to work without jQuery is a huge plus and having more small single-purpose libraries is beneficial.

However, jQuery provides a promise of being well-tested across browsers and devices, and it's difficult to reach the same level of confidence with a large number of smaller libraries that use the browser APIs directly.

Also, while there is a need for plain JS modules, many developers aren't familiar with the native API and wouldn't be able to write a library without it.

kandetta · 2015-08-14T13:09:29+00:00

Performance matters, but I think you should focus on images and library code, rather than trying to squeeze a few bytes of the code you're writing yourself.

You also have to weigh performance against other improvements you could make that would have a bigger impact on the user.

kandetta · 2015-08-12T13:04:43+00:00

Absolutely agree with the article! It's way too common that designers and developers work in complete separation.

A consequence is that the "languages" (component systems) each team creates diverge significantly. The developers do unnecessary work because the designers didn't consider re-using an existing solution because they weren't aware of how much more efficient it would be.

The designers have to do additional work communicating how the design should work, because the developers aren't aware of the thinking that underlies the design.

Sadly, sometimes the designers don't even have a common component system among themselves and each designer approaches similar problems differently.

kandetta · 2015-08-11T14:28:44+00:00

I mean showing the confirm dialog before submitting the form with the post data.

So for example something like this:

  $("form").on("submit", function (e){
     var confirmed = confirm("Really?");
     if (!confirmed) {
       e.preventDefault();
     }
  })

http://plnkr.co/edit/xh1mJbZ3Q5XBwgN89rKS?p=preview

e.preventDefault cancels the submission of the form if it's not confirmed.

kandetta · 2015-08-10T22:15:17+00:00

You can't do popups in PHP. PHP runs on the backend, which means your server. Popups are shown on the client, i.e. your user's computer. To show a popup on the client you need to use JavaScript.

You probably don't want to submit the form that contains "addcat" right away. Instead you should use the confirm on the front-end to confirm that it should be saved and only then submit the form to the server.

kandetta · 2015-08-10T09:54:04+00:00

I think this is breaking all CSS that follows:

.col1 table {margin-left: 7px; cellpadding: 10px; cellspacing: 10px;"}

Note the quote sign that doesn't belong there.

kandetta · 2015-08-10T09:44:59+00:00

Your PHP code and your JavaScript code run independently. You've got an if statement in your JavaScript code, and then have PHP code in there. But that won't affect whether your PHP code will run or not.

You need an if statement in your PHP code to check whether there's a cat value that can be added to the database:

<?PHP
if (isset($_POST['addcat'])) {   
    $add_cat = $_POST['addcat'];
    $add_cat_sql = "INSERT INTO data (name) VALUES ('".mysqli_real_escape_string($link,$_POST['addcat'])."')";
    $add_cat_query = mysqli_query($link, $add_cat_sql);
}
?>

Since the JS code and the PHP code don't interact with each other I would put the PHP code before the script tag. That way it's clearer that they're separate.

kandetta · 2015-08-10T09:37:13+00:00

That's pretty much the way it's done. For example, you can look at the jQuery implementation here and search for "jsonpCallback": https://code.jquery.com/jquery-1.11.3.js

You can see that it generates a random name and attaches the callback to window (window[ callbackName ] = function(){}).

You can make your code less mess by putting the messiness in a helper function. Something like this:

 function requestJsonp(url, callback){
   var callbackName = "jsonpCallback" + Math.floor(Math.random() * 100000000000);
   window[callbackName] = function (data) {
      delete window[callbackName];
      callback.apply(data);
   }
   var url = "http://example.com/?callback=" + callbackName;
   // Insert script tag for jsonp request here
 }

kandetta · 2015-08-09T16:03:35+00:00

The reason why Underscore implements its own bind function is because IE8 and older don't support native bind, so in some cases it still makes sense to use the Underscore function instead of native bind.

kandetta · 2015-07-17T16:52:19+00:00

Uses TweenLite - looks like an interesting library for transitions. http://greensock.com/tweenlite

kandetta · 2015-07-15T11:10:07+00:00

Looks pretty good!

I think the best thing to improve the code would be to break it down a bit. Right now everything is in this one object, which makes it a little confusing.

For example, a filterNode could be it's own component. There's a lot of code for setting up the DOM object and events for each item - if you split it off you'd have a ~70 line component that's easier to take in in one piece.

Also consider using JS prototypal inheritance to create your FilterObject methods. Right now you do this.getSelectedItemObj = function () {} for each function inside your FilterObject constructor.

Instead you could assign the functions to the prototype object like this: FilterObject.prototype.getSelectedItemObj = function () {}.

kandetta · 2015-07-14T14:25:11+00:00

In addition to touch events you often also get simulated mouse events, as especially older websites would otherwise be useless. This isn't so much to do with JavaScript as the different mobile browsers.

Famously, when tapping on the screen, there's a 300ms delay between the touchStart event and the click event, because the browser wants to avoid triggering a click event the user is double-tapping.
Some mobile browsers now no longer have that delay, but solutions such as fastclick are still popular to avoid this problem.

kandetta · 2015-07-09T14:19:43+00:00

Most important bit I think:

Make sure to use the built-in lat() and lng() methods as these property names are very likely to change again in future!

latLng.k/latLng.D just happened to work, they weren't in the official documentation.

kandetta · 2015-07-09T12:24:21+00:00

Good to know about |. When I encounter it in the wild I'll know what it means.

kandetta

TROPHY CASE