ReactFoo Delhi
ReactFoo For members

ReactFoo Delhi

On React, performance and front-end engineering

Tickets

Loading…

After a successful edition in Delhi in 2018, we are back with the 2019 edition of ReactFoo Delhi.

ReactFoo Delhi features talks and discussions on:

  1. Redux and state management
  2. Performance improvements with React
  3. Modernizing legacy architecture with React
  4. Why choose React Native
  5. GraphQL and front-end development

Product and front-end engineers from Atlassian, Walmart.com, Zomato, Microsoft, HackerRank, Mindtickle and Appbase.io will share insights from practical experiences.

Who should attend:

  1. Front-end engineers
  2. Product engineers
  3. Cross-platform mobile developers

Why attend ReactFoo Delhi:

  1. Learn from and network with peers from the industry.
  2. Improve developer productivity of your front-end teams.
  3. Make your web applications faster and performant.

Date and schedule

16 November 2019
https://hasgeek.com/reactfoo/2019-delhi/schedule

Venue:

C D Deshmukh auditorium, India International Centre (IIC) Main, 40 Max Mueller Marg, Lodhi Gardens, Lodhi Estate, New Delhi - 110003.

##Contact details:
For information about the event, sponsorships, bulk ticket purchases and partnerships, write to info@hasgeek.com or call 7676332020.


Sponsors:

Click here to view the Sponsorship Deck.

Email us sales@hasgeek.com for bulk ticket purchases, and any queries on the sponsorship.


ReactFoo Delhi 2019 sponsors:


#Exhibition Sponsor

Sapient

#Bronze Sponsors

Shuttl

#Community Sponsor

GO-JEK MindTickle
Atlassian
HackerRank Walmart

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more

Vikas Parashar

@vicodin

Building Accessible React apps

Submitted Oct 10, 2019

As web developers, we all have a responsibility to develop accessible sites/apps, but for most of us it’s another checkbox to tick. This talk will be about how accessibility and good user experience goes hand in hand, and are not mutually exclusive.

In this talk, we will talk about what is accessibility and how we raised awareness about it in HackerRank. We will talk about the process to integrate accessibility first mindset and various ways in which we improved accessibility and ingrained it in our development process which helped the company grow.

Key takeaways from case study:

  • Why should we care about accessibility.
  • How to improve accessibility of react apps.
  • How to use test react apps for accessibility(Resources)
    • Unit testing
    • Browser testing
    • Keyboard testing
    • Screen reader testing
    • Linters in code editor

Outline

  1. What is accessibility

    1. General accessibility
    2. Web accessibility
  2. Why we did it(Making HackerRank websites accessible)

    1. Business reasons
      1. UX improvement
      2. Inclusion/Increase in user base(more people can user our site)
      3. Corporate Social Responsibility
      4. More enterprise customer(some customer requires product accessibility compliance in contract)
    2. Legal reasons(accessibility compliance laws in various countries, latest Apple and Dominos fiasco)
    3. Others(Empathy, WCAG, ATAG)
  3. How we did it

    1. Updating existing reusable UI components(will have examples of few major components with code and demo)
    2. Custom components specific to accessibility(HOC to detect keyboard navigation with code and demo)
    3. Showing minimum contrast pass/fail on internal colour library(code and demo)
    4. Setting up Unit testing(code and examples)
    5. Setting up Dev tools warning(code and demo)
    6. Dark mode.(Strategy/code and demo, and screenshots of feature requests from visually impaired users)
    7. eslint-plugin-jsx-a11y to catch issues while coding(screenshots/demo)
    8. ChromeVox/VoiceOver for screen reader testing(demo)
  4. What’s next/We’re still doing it

    1. Accessibility is a process and not a project.
    2. Integrating reach router functionality with react router 5
    3. CI/CD integration.
  5. Impact

    1. Positive and exciting feedback from users on dark mode and on user experience.
    2. As of now, there is no way to track screenreader users or distinguish different users with disabilities from the rest.
    3. Idea of web accessibility is to remove discrimination from web and any attempt towards that helps the cause.
    4. Levelling the field for candidates as now they don’t need to disclose their disability and ask for special treatment. We are closer to make our site accessible for everyone which removes the dependency from customer support team.

Requirements

None

Speaker bio

Vikas Parashar is frontend engineer and web accessibility evangelist at HackerRank. He has also co-organised InOut hackathons in the past.

Slides

https://docs.google.com/presentation/d/11V7cLvC3b367mOWTPfUw7Ki9mksC18LS2o6r6XYHsQo/edit?usp=sharing

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more