Create your vCard

Data

First name

Last name

Phone (Personal)

Phone (Office)

Text

QR code

Accessibility Driven Development

    

            

Accessibility is the practice of making your websites usable by as many people as possible.

Why Accessibility?

It is important that the Web be accessible to everyone in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can help people with disabilities participate more actively in society.

The impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when web sites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.

Accessibility is essential for developers and organizations that want to create high quality websites and web tools, and not exclude people from using their products and services.

Accessibility Standards

The Web Content Accessibility Guidelines (WCAG) is an internationally recognised standard created by the World Wide Web Consortium (W3C).

The purpose of the WCAG standard is to define how to “… make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general.”.

• Web Content Accessibility Guidelines
• https://www.w3.org/WAI/standards-guidelines/wcag/
• WCAG Checklist from WUHCAG, Web Aim and A11y.
• Websites made for disabilities including visual, auditory, physical, speech, cognitive, language, learning & neurological disabilities.

Accessibility Use cases

• Basic HTML/ HTML5 code is not accessibility enabled.
• Text colour / Contrast should be correct.
• You can check the foreground and background ratio from : https://webaim.org/resources/contrastchecker/
  
• Some libraries like Reactstrap are partially accessibility enabled
• Images should have alternative texts (using alt).
• Form elements should have labels (using for/html-for attributes).
• Links should have a meaning (using aria-labels).
• Page heading should be readable (using correct heading tags)

Converting basic HTML to Accessible element

Generally, a basic HTML element may or may not work well in terms of accessibility. But a little understanding and knowledge on creating accessible elements will work flawlessly. Below is an example of a Select box which is not accessible by default.

Select Box :

                    

Accessible Select Box :

HTML :

                    

JAVASCRIPT :

                        

React Accessibility Architecture

        

  

Things to keep in mind 

Landmarks :

    <header role="banner"> <p>Put company logo, etc. here.</p> </header>

     <nav role="navigation"> <ul> <li>Put navigation here</li> </ul> </nav>

     <main role="main"> <p>Put main content here.</p> </main>

     <footer role="contentinfo"> <p>Put copyright, etc. here.</p> </footer>

Aria Labels :

    It should be used to provide a text alternative to an element that has no visible text on the screen.

    <button> send </button> // accessible name: send

    <button aria-label=“send email”> send </button> 

    // accessible name: send email

    <button aria-label=“menu”> </button> 

Aria Role and Aria Level :

    Aria Role is used for the purpose of identifying group of elements.

    Aria Level is used for defining heading structure.

Role Types :

Comment, Complementary,  list, list item, main, mark, navigation, region, Suggestion, alert, application, article, banner, button, cell, etc…

Accessibility testing addson & Softwares

            

                    

                            

                            

Useful Links :

https://www.w3.org/standards/webdesign/accessibility

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

Unit Testing React Application using Jest and Enzyme

Why Unit Testing

Testing code is probably one of the most important things to do in software engineering. Testing ensures the quality of what we are building. There are many ways to test code, from end-to-end testing (manual testing) to unit testing (component testing in React)

• It makes process Agile
• Improves quality of code
• Issues can be found at early stage
• Facilitates changes and Simplifies Integration
• Provide Documentation
• Debugging Process
• Design
• Reduce the cost

Test Pyramid

In Agile frameworks, automated testing can be grouped into a testing pyramid. A testing pyramid illustrates when we should use one testing method versus another. The pyramid shows that many unit-snapshot tests can be used to validate one integration test, and many integration tests can be used to validate one manual test.

Manual Testing

Manual Testing is a process of finding out the defects or bugs in a software program. In this method the tester plays an important role of end user and verifies that all the features of the application are working correctly.

End-to-end test: manual testing of the whole application. 

The idea of choosing what type of tests should be used is important, as we may be testing the same thing in two or three different levels of the pyramid.

Manual testing is slow and unsustainable. This type of testing works for our front-end applications because it mimics how the user will interact with our application. The problem with this testing is that it is expensive to maintain (any minor UI change may break the tests, because these tests are normally done with Selenium, a web browser emulator) and the time to develop one of this tests may be high. It’s important to note that we don’t usually use this type of testing in front-end applications due to high costs.

Integration Testing

Integration Testing is a level of software testing where individual units are combined and tested as a group. The purpose of this level of testing is to expose faults in the interaction between integrated units.

Integration testing may be good to test connections between components and finding bugs in these connections.The cost of maintaining and doing these tests is not very high and will test parts that we don’t test with unit tests.

          

Unit Testing

Unit Testing is a level of software testing where individual units/ components of a software are tested. The purpose is to validate that each unit of the software performs as designed. A unit is the smallest testable part of any software. It usually has one or a few inputs and usually a single output.

Unit/Snapshot testing is probably the easiest way to test components. It only focuses on one isolated item and its logic. If it follow the presentation-functional components division, it will even be easier to test this. 

For presentational components, it give the props to the component and expect a specific render (could be a good use case for snapshot). 

In functional testing, the tests can be more tricky. We need to mock a redux store to create user actions, and we expect redux actions to be called by the mocked store while we simulate events.

Why Jest

Jest is a testing framework created by Facebook. Facebook uses it to test JavaScript and React code. It was created under the premise of performance, features and adaptability. Jest provides an integrated “zero-configuration” experience. This is a differentiator from other popular testing frameworks like Mocha. Some of the killer features are:

• Instant Feedback: Immersive Watch mode only runs test files related to changed files.
• Fast and sandboxed: It runs parallel tests across workers, and buffers console messages and prints them together.
• Snapshot Testing: Capture snapshots of React trees or other serializable values to simplify testing and analyze how state changes over time.
• Built-in code coverage reports: Supports coverage for bringing out of the box coverage reports.
• Zero configuration

Why Enzyme

Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. You can also manipulate, traverse, and in some ways simulate runtime given the output.

Enzyme's API is meant to be intuitive and flexible by mimicking jQuery's API for DOM manipulation and traversal.

Convenient utilities to work with shallow rendering, static rendered markup or DOM rendering.

jQuery-like API to find elements, read props, etc.

Enzyme has three methods for rendering React components. These methods give different results and we use them in different cases. 

Shallow: Shallow rendering is useful to constrain yourself to testing a component as a unit, and to ensure that tests aren’t indirectly asserting the behavior of child components. (Recommended)

Mount: Full rendering and it doesn’t need an environment like a “browser”. This is useful when you want to test the children with less overhead than mount.

Render: Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs. Full rendering actually mounts the component in the DOM. This is the only way to test componentDidMount and componentDidUpdate.

Some Code Snippets :

Snapshot Testing

A snapshot test is essentially what the name implies. Jest takes the component that it is testing, renders it, and then takes a snapshot of what the component should look like. Everytime you run the test suite, Jest will do the process over again and compare the old snapshot to a new one. If the snapshots do not match, then they an error message shows in the terminal and highlights the parts that do not match.

snapshot testing is not TDD, it can still be a useful tool for keeping track of your components and making sure they do not change unexpectedly.

When to write a snapshot test

• If a component is not updated often
• If a component is not too complex
• If it is easy to see what you are actually testing

    Async :

    Error Handling :

Jest Command Line

Run all tests : jest

Run Specific test : jest path/to/my-test.js

Run watch mode : jest --watch #runs jest -o by default jest --watchAll #runs all tests

Coverage : jest --collectCoverage jest --collect-coverage

Updating Snapshot : jest --updateSnapshot

Useful Links

https://github.com/sapegin/jest-cheat-sheet

https://apiumhub.com/tech-blog-barcelona/top-benefits-of-unit-testing/

Kivy - a Python based cross-platform framework

Kivy is a python based library for development of mobile apps including the natural user interface (NUI). It is cross platform library that can run on iOS, Android, Linus, Windows, OSX and Raspberry Pi with distribution protocol under free and open source software. It has been developed and is distributed by the Kivy Organisation.

Features :

1. Supports multiple inputs including the mouse, WM_Touch, WN_Pen, Mac OS X Trackpad and Magic Mouse, Mtdev, Linux Kernel HID (Human Interface Device) and TUIO (Tangible User Interface Objects).
2. Powerful, Stable and well documented API with programming guide to get started.
3. It is business friendly, 100% free to use under MIT license
4. Support for lot of widgets.
5. Good Documentation.
6. It is GPU accelerated as the graphics engine is built over OpenGL ES 2, using a modern and fast graphics pipeline.

Installation and Configuration of Kivy

Kivy can be installed on any Operating System without any compatibility issues. It can be downloaded from https://kivy.org/#download, and once it is done, the installation instructions are provided on the download page.

$ python -m pip install kivy

$ python -m pip install ffpyplayer

Configuring Kivy :

MacOS : /Users/Username/.kivy/config.ini

Windows : C:\Users\Username\.kivy\config.ini

Linux: /home/user/.kivy/config.ini


Architecture of Kivy :

1. Core Providers and Inputs This allows user to open a window, displaying images and text, playing audio, getting images from a camera, spelling correction etc
2. Graphics Kivy’s graphics API is our abstraction of OpenGL. Kivy provide the graphics API that lets you draw things using simple metaphors that do not exist as such in OpenGL (e.g. Canvas, Rectangle, etc.).
3. Core The code in the core package provides commonly used features such as Clock : You can use the clock to schedule timer events. Both one-shot timers and periodic timers are supported. Cache : If you need to cache something that you use often, you can use inbuilt class. Gesture Detection : It provides a simple gesture recognizer that you can use to detect various kinds of strokes, such as circles or rectangles. You can train it to detect your own strokes. Kivy Language : The kivy language is used to easily and efficiently describe user interfaces. Properties : Kivy provides property classes that links the widget code with the user interface description.
4. UIX Widget : Widgets are user interface elements that you add to your program to provide some kind of functionality. They may or may not be visible. Eg: Buttons, Label etc Layouts : User can use layouts to arrange the widgets. Eg: Grid layout, Box layout, Relative layout etc
5. Widgets and Event Dispatching In Kivy, a widget is an object that receives input events. It does not necessarily have to have a visible representation on the screen. All widgets are arranged in a widget tree (which is a tree data structure as known from computer science classes). One widget can have any number of child widgets or none.

Kivy App Life Cycle :

Running the Application :

Linux : $ python main.py

Windows :

$ python main.py

or

C:\appdir>kivy.bat main.py

Mac OS X :

$ kivy main.py