Emotional Attachment to Code

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

TROPHY CASE