Make Your Own AngularJS, Part 1: Scopes And Digest

Don’t quite grasp AngularJS dirty checking? Walk through creating a clone of AngularJS step by step with Tero Parviainen

 

Tero Parviainen, Independent Software Maker, walks through creating an AngularJS clone one function at a time.

This part 1 article covers $eval, $digest, and $apply and how the digest cycle works and how it handles watchers.

From the article:

While the Angular documentation is getting very good, and there’s an increasing number of third-party resources, there’s really no better way to really learn a technology than to take it apart and see what makes it tick.

In this article series, I’m going to build an implementation of AngularJS from the ground up. As I take you through it step by step, you’ll gain a deep understanding of exactly how Angular works.

Read more at teropa.info

Sketch 3: Unleash your imagination.

Move over Adobe… try out this replacement for web design in Illustrator & Photoshop

 

I haven’t tried it, but it’s got some amazing features.

Their subtext reads “We created Sketch specifically for designing interfaces, websites, icons… whatever is in your head. And here’s what we came up with.”

- It bridges the gap between vector and pixel design.

- You can define styles and fonts that apply to multiple elements.

- It has reusable elements to cut down on copy-pasting from multiple documents.

- It exports to CSS and pngs.

- Sketch has a built-in live preview for iOS devices

On the Mac App Store for $79

Read about all the features at intridea.com

How Tall is Yoda? At UtahJS on 8/19/2014 I gave this Star Wars themed presentation that compares different types of loops

Learn ES5 Array methods and lodash with my walkthrough that shows side-by-side comparisons of practical examples

 

We’ve come a long way from 2005. PrototypeJS brought us many Array.prototype methods such as #each, #filter, #pluck, #invoke, #any that have inspired ES5 Array methods and lodash methods.

Given an array of objects that you might receive from a database, what do different tasks look like with a regular for loop, jQuery.each, ES5 Array methods and lodash?

Review and try out the code and you’ll learn something about ES5 and lodash–and maybe even Star Wars.

View Presentation

Speeding up AngularJS apps with simple optimizations

What you should know when encountering performance problems in AngularJS

 

From the article: “AngularJS is a huge framework with that already has many performance enhancements built in, but they can’t solve all our problems. No matter how fast the framework, we can all create sluggish code through bad practices and not understanding key concepts that help it perform well. The following performance pointers are some of the things I’ve learned from developing Angular applications that will hopefully enable you to keep building fast applications.”

Some highlights:

- The latest beta of 1.3 allows one-time binding syntax: {{ ::value }}

- Use $scope.$apply correctly

- Be careful with ng-repeat

- Be frugal with filter expressions

Read more from the source: Binpress

Styleguide Driven Development

Take your styleguide to the next level: mock up all the possible scenarios

 

You might think, do we need another *DD acronym? Maybe not, but hear this out.

From the article: “Styleguide Driven Development is a practice that encourages the separation of UX, Design & Frontend from Backend concerns. This is achieved by developing the UI separately in a styleguide.”

Some of the pros:

1) You spend a lot of time on the style guide so that designers can answer questions up front. E.g. What should this look like with no items? With more than 25 items? When the user is logged out?

2) UI and Development teams can work together better

3) testers can easily compare the functionality with the intended design.

Read more from the source: envato.com

Where and when did the [x] first enter into the UI lexicon?

Why do we use an “X” symbol to close or exit? Lauren Archer takes us down memory lane and traces the history of [x] to Close

 

X’s are everywhere in user interface (UI) design. A powerful symbol, [x] is capable of closing windows and popups, toolbars and tabs and anything else that might otherwise be cluttering up your screen.

Clicking on [x] to close a feature has become an instinctual part of using a computer and a standard in web and software design. Although it may seem like the ubiquitous [x] has always been a part of Graphical User Interfaces (GUI), a quick jaunt through the history of GUIs reveals that this actually isn’t the case.

Read more from the source: Medium