Designing Software and UX

UX Design is something that we engineers are not taught. We get by with whatever we pick up, from our experiences and inspirations. For me design has been a reactive thought. When the UI is ready, I start to notice the icon or color or transition (or lack thereof), that doesn’t feel right. I then do my best to “fix” it, with whatever design experience I have, but it never feels just right.

Lately I’ve been reading on design, both from the Software (design patterns) and the UX perspective, and trying to understand the underlying principles and goals that justify the use of a particular pattern in code and a particular layout in the site.

As developers, we all work with Software Design Patterns. Here are some thought provoking articles on UX design:

  1. Smart Transitions In User Experience Design
  2. What Screens Want

 

Advertisements

Chrome Inspector Audit

 

I’ve been using Chrome Inspector for so long, but it was only today that I tried out the amazing AUDIT tab….

The suggestions given by it are awesome and reader friendly and not garbled like I’ve seen in other optimizers.

Do check it out….

I was amazed to see that for all public web pages that I Audited, over 90% of the CSS was always unused.

There is this amazing tool : grunt-uncss that removes the unused css at build…awesome.

 

How should modules interact in a MC* application

How should modules interact in a MC* application

 

How they shouldn’t: Slide 56,57 of https://speakerdeck.com/ammeep/unsuck-your-backbone

How they should: Slide 61 of https://speakerdeck.com/ammeep/unsuck-your-backbone

 

This is the way to do the slide 56 thing in Angular:

Create a svc. and inject in both the modules, 1 and 2

Code in Module 2: Service1.module2.proxy.function = myFunction

Code in Svc.: var module2 = {proxy : myfunction :{}}

Code in Module 1 when the event occurs, which it wants to propogate to Module 2: Service1.module2.proxy.function()

This is the way to do the slide 61 thing in Angular:

The Module 1 should Emit the event and the Application (underlying page that hosts all the modules)  should catch that event and Broadcast the event which will then be caught by Module 2

 

HTML5 Features

Cross-Document Messaging

Cross-Document Messaging is a method of sending information from a page on one domain to a page on a different domain using the postMessage method.

The HTML5 standard supports cross-document messaging via the window.postMessage method.

  1. A JavaScript function calls the postMessage method against the exampleWindow, the window object of the http://www.example.com iframe. The postMessage method requires the message and origin parameters to be populated.
  2. The message is transmitted to the iframe containing the exampleWindow object after verification of the origin.

Cross-Origin Resource Sharing

Cross-Origin Resource Sharing is a method of sending XMLHttpRequests across domains.

Its functionality is similar to cross-document messaging, using a different method of communication.

 

Geolocation

The HTML5 standard enables user-agents to transmit geolocation data for devices which support this functionality.

 

Web Storage

The Web Storage API allows for persistent data storage of key-value pair data in web browsers.

Web Workers

Web Workers enable scripts to run in sthe background, isolated from the webpage. Messages are used to communicate to event handlers managing the worker processes.

Drag and Drop

The Drag and Drop API provides ways for an application developer to allow HTML elements to be dragged out of the web page and dropped elsewhere. This allows users to copy elements between frames, browser tabs, browser windows and other applications. The “drop” API also allows users to drop in files directly into the browser window, which the application can process in some way (e.g. uploading a document). This API allows application developers to emulate the behavior of native applications like text or image editors that allow seamless inter-application drag/drop behavior.

Video & Audio

Allows video or audio content to be added to the page without the need for a browser plug in such as Flash.

Camera and Microphone

Allow the web page to capture input from a camera and microphone attached to the device. This is of particular relevance to mobile devices.

IndexedDB and WebSQL

Alternatives to Web Storage for persisting data on the client. IndexedDB allows for storage of large amounts of structured data in the browser using a key-value mapping. WebSQL allows applications designers to store data on the client side and access it using SQL queries.

File API

The File API allows web applications to access files from the underlying system.

App Cache

Allows a web site/app to work offline by defining a manifest of all the resources the page requires which the browser will download and make available even if when it isn’t connected to a network.

Server Send Events

Allows the server to push messages to the client. Likely to be used for similar reasons to WebSockets, but doesn’t provide the bi-directional socket.

Content Security Policy

A Content-Security-Policy header defines a whitelist of trusted script locations such that browsers that support CSP will not run script loaded from other locations. This allows inline and evaled script to be blocked which addresses many cross site scripting attack vectors.

 

Perl 5.18 Learn

Perl 5.18

Setup on Windows: http://www.perl.org/get.html

  1. 1.       ActiveState Perl:  has binary distributions of Perl for Win32 (and Perl for Win64). http://www.activestate.com/activeperl/downloads
  2. 2.       Strawberry Perl: A 100% Open Source Perl for Windows that is exactly the same as Perl everywhere else; this includes using modules from CPAN, without the need for binary packages. Help is available from other Windows Perl developers on the #win32 irc channel on irc.perl.org
  3. 3.       DWIM Perl for Windows: A 100% Open Source Perl for Windows, based on Strawberry Perl. It aims to include as many useful CPAN modules as possible. It even comes with Padre, the Perl IDEexternal link.

Learning

  1. 1.       http://learn.perl.org/
  2. 2.       http://perlmaven.com/perl-tutorial

IDE For Development

  1. 1.       http://padre.perlide.org/  (dwim perl)
  2. 2.       Sublime Text
    1. a.       ModernPerl
    2. b.      PerlTidy

                                                              i.      To reformat Perl source code with PerlTidy, open your Perl file of choice and hit `Control+Shift+t`.

  1. 3.       http://www.perl-express.com/
  2. 4.       http://open-perl-ide.sourceforge.net/
  3. 5.       People who are already Eclipse users might want to know that there is a Perl plug-in for Eclipse called EPIC. There is also a project called Perlipse. : http://www.epic-ide.org/
  4. 6.       http://www.activestate.com/komodo-ide

 

 

Training TO DO

 

 

Perl Advanced

Topics :

 

  • How Perl supports OO Programming techniques;
  • How to write and use classes;
  • Advanced usage of regular expressions, including non-capturing groups, global (multi-line) matching, lookahead and lookbehind, and building readable regular expressions;
  • Working with persistent data using tie variables and DBI;
  • The eval function and its use in runtime exception handling;
  • Unix signal handling;
  • Testing strategies and supporting modules;
  • Producing and reading diagnostics from Perl programs;
  • Debugging techniques for Perl