Web Accessibility

Ever wondered how a person with a impaired sight would be accessing the new era’s human peripherals. Hmmn…Human peripherals…?

Yeah! I am talking about the electronic gadgets most importantly our smartphones and apps on it. Do they have a difficulty in using technology? Does the web or gadget industry consider such special cases and provide features? Web is built and designed to work universally for everyone. Isn’t it? So is the web accessibility.

What is web accessibility?
In simple words, web accessibility is a way to ensure that technology which is available in various forms of tools, websites, apps etc can be accessed universally even by people with disabilities.

Is the world web concerned about this?

Definitely,  yes! To address this, W3C – World Wide Web Consortium considering different technologies and tools involved in building an application has come up with WAI – Web Accessibility Initiative.

WAI develops specifications, guidelines and supporting resources that describe accessibility solutions. These are considered international standards for web accessibility. WAI is an initiative to help people with disabilities that affect access to the Web, including:

• auditory
• cognitive
• neurological
• physical
• speech
• visual

In some nations, web accessibility is compulsory by law. Though this initiative of web accessibility was begun years back and websites/apps are built at a faster rate but somewhere only a minor percentage of the websites and apps have the full web accessibility features. Hopefully, future has more for inclusion!

Because, everybody is good at something. 🙂

Spaghetti code

Imagine a bowl of cooked spaghetti and you manage to take a few of its strands on a fork. Unfortunately, few fall back to bowl. Now, trying to search for which is the longest string or the start point of it. Quite a task. Isn’t it? Analogically, this is what happens when we have a spaghetti code.

What is spaghetti code?

Spaghetti code, as the name says it is an unstructured, complex and tangled nature of  source code which is troublesome to maintain and comprehend for fellow programmers.

How does it get introduced?

Not implying the design patterns expected for a programming language per se.

The code starts simple but as and when new features get appended for the sake of scalability not understanding the existing code can introduce redundant code and looping/jumping of program from one to other, back and forth. Also if multiple developers work simultaneously problem can be worse.

Overuse of workarounds to serve the purpose of functionality for time being and never refactoring it.

Is spaghetti code avoidable?

Yes. It is definitely avoidable if as a code developer we use more readable variables and provide comments to make it comprehensible.

Before beginning writing new feature understand what the existing code does and is it possible to tweak it a little bit to improvise new feature.

If there is a reusable code block its a good practice to isolate it in a function construct and make a call from other code block on need basis.

Boilerplate code

What is a boilerplate code ? 

In computer programming is a section of code that has to be repetitively used with a little or no alteration . This term is interchangeably used with bookkeeping code.

Can we avoid the usage of boilerplate code ?

This seems to be debatable question. We can’t avoid the use of it all the time as not all the programming languages have the the non-verbosity. Other means to avoid its use is application of meta programming concepts, abstraction, inheritance, keeping the business logic in a separate globally accessible module and reusing it on need basis.

Bar Code and QR Code

We see their usage on a day-to-day basis not only in air- conditioned retail stores but also with non-air-conditioned street vendors and hawkers. Yeah! I am talking about how bar code and QR code have digitized our societies, however large scale or small scale the business is. It doesn’t matter at all!

Bar code and QR code in general are digital form of information stored on a label of a product or services which provides the ease of tracking products in an inventory and payment of transactions. These are of great help as they minimize the process of typing to retrieve information.

Bar Code

Bar code visually appears as a combination of zebra stripped, multiple alternate black and white vertical lines which is readable by a machine. It follows a one-dimensional and two-dimensional pattern. The information of a bar code is stored in a simple numeric format with number ranging from 0 to 9, which can be retrieved when scanned by a bar code reader. In a store there are different product items. Each product has a bar code on in it. With this bar code information, the storekeeper can easily check how much stock is available. If an item is sold out, the scanner scans it and the item is deducted from stack and is added to the customer’s bill.

Bar code readers read the encoded information of bar code as input and decoding circuitry present outputs the information to the computer.

Bar code come in two varieties namely linear bar code, matrix(2D) bar code.

You might as well ask, what if the bar code sticker gets cut or blurred out. Yes, quite possible. The information of some part of the code might be lost and as the error correction mechanism is not good in case of bar code it may be difficult to recover the missing information. Additionally, the information that can be stored by bar code is limited when compared to QR code.

QR Code

QR abbreviated as Quick Response code is a pattern of black and white dots bounded on a square boundary. It follows a two-dimensional pattern. QR code can be read by imaging device typically a camera of smartphone and this process is called mobile tagging. The QR code typically detects three distinctive squares at the corners of the QR code image, using a smaller square near the fourth corner to normalize the image for size, orientation, and angle of viewing. The small dots throughout the QR code are then converted to binary numbers and validated with an error-correcting algorithm. This error correction mechanism gives QR code an advantage over barcode as information can be retrieved to some extent even if its spoiled or damaged.

QR codes have varieties namely Micro QR code, Secure QR code, Frame QR code.

QR code can be used to share information like business card, URL, social media profile etc which is also of benefit for lot of commercial markets for campaigning. With QR code one can track as to how many users have scanned your QR code. One disadvantage  a QR code can have is if you happen to scan a malicious QR code then a malicious ware might get into your phone which might hack your data or manipulate apps because we as a human won’t be aware if a correct QR code is being scanned or not.

In the near future, as a next level of evolution we will have 3D QR code. The height factor will give an advantage to store a little more information.

Pug.js

What is pug.js?

Pug.js a HTML template engine for Node.js. You can write a simple pug code which the compiler will compile it to HTML code and later on browser will render it.

How does pug code differ from html code?

Pug code is a crisp piece of code which looks like a paragraph which helps in readability. Pug supports JavaScript, so using JavaScript expressions, we can format HTML code. HTML code is consists of tags and Pug also uses same tags. But pug doesn’t have closing tags.

Some thoughts…

Since pug comes as a npm package we can run using browser or on node.js using cli. One should take care of white space while writing pug code, because it can cost a big time.

 

ECMAScript

What is ECMAScript ?

ECMA is a short form for European Computer Manufacturer’s Association. ECMAScript (ES) defines a standard and contains specifications for scripting languages such as JavaScript (Netscape /Mozilla browser implementation of the ECMA specification)and JScript (Microsoft’s Internet Explorer) developed by Brendan Eich in 1995. Therefore, one can also say that ES is a superset of JS and JScript.

That means it is used for client side scripting such as JavaScript and  for writing server side applications and services using Node.js.

Several editions with new feature support per edition have been published for ECMAScript. It should be noted that with each version release, there were support compatibility issues with some browser’s versions.

Javascript bundling and minification

Bundling is basically concatenating all small or big javascript and or css files into one huge file to minimize the number of requests and hence load on the server.

To speedup loading of a webpage bundling and  minification of the bundled code is necessary. Minification is the process of removing unnecessary characters like whitespace, comments, new line characters etc. from source code to reduce the overall size of the content without changing the functionality of the code.

So, less file size means lesser time to process and download files. Of course, there are various approaches to bundling and minification using bundlers like Webpack,  Browserify, RequireJS etc.

W3.CSS & W3.JS: modern & responsive

W3.CSS is a free to use CSS framework with features of responsiveness whereas W3.JS is a javascript library

W3.CSS is based on standard CSS therefore easier to learn and use. It supports responsiveness and provides CSS equality across all browsers and all devices.

W3.JS is smaller and faster than other JavaScript libraries. It is designed to speed up application development.

W3.CSS classes start with “w3-propertyname” and W3.JS  selects and performs action using “w3.action(selector)”

SVG – Scalable Vector Graphics

What is SVG?

SVG is Scalable Vector Graphics. SVG is a XML based format to represent vector based graphics. It is used to draw two dimensional vector images, which support animation. SVG allows three types of graphic objects: vector graphics, raster graphics, and text

Can SVG be rendered in webpages?

Yes, SVGs can be rendered in webpages using an html tag using attributes like height and width.

Some facts about SVGs

SVG can be created using any text editor.

Since they are XML based, SVG images are searchable, indexable and can be scripted and compressed

SVG is an Open Standard

Being text format,  size is larger as compared to binary formatted graphics.

KnockOut It is

Knockout.js is a javascript library that helps you implement dynamic data hadling with more simplicity and maintainability. Since it’s  a pure javascript library it can work with any client-server technology.

Features:

• Declarative data binding
• Automatic UI refresh
• Can be added on top of your existing web application without requiring major architectural changes
• Very light weight library
• Assists in dependency tracking between HTML element and the underlying data

How KO works?

Instead of manually tracking, each element of the HTML page that rely on the updated data , it will automatically update the DOM when any changes to the data model occurs.

Knockout is not a replacement of jQuery. KO provides a complementary, high-level way to link a data model to a UI. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality. Knockout is focused only on designing scalable and data-driven UI.

MVVM Design Pattern

Knockout uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data and ViewModel acts as the intermediary between the model and the view.

Actually, the ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.