Public Lab Research note


Outreachy Proposal: Optimize Performance and Accessibility of Public Lab Content.

by itm2017004 new contributor | March 12, 2020 18:01 12 Mar 18:01 | #23130 | #23130

About me

Name: Sneha Mishra

Affiliation Indian Institute Of Information Technology, Allahabad (India)

Location: India

Project description

Optimize Performance and Accessibility of Public Lab Content.

Problem

The project aims to improve the performance and accessibility of Public Lab Content. In the current scenario, the performance of the public lab website is a bit slow due to multiple javascript files and third party code blockage. The accessibility needs to be improved upon using WAI-ARIA standards. Apart from this, some of public lab users reference content made through our community while they're offline or away from computer devices. This requires us to introduce print styles and optimisations allowing the wiki pages and other website posts to be printed well. The project is divided into three phases-

  • Analysing and improving current performance: The goal of this phase is to analyse current website performance through WebpageTest and Google PageSpeedInsight by studying waterfalls.This current performance will then be optimized using techniques like compression of js files, removing unused css and text visibility during webfont load.
  • Printability of Wiki Pages and posts and accessibility: The goal of this phase is to introduce print specific stylesheets and optimizations such that the Wiki Pages and other website posts are printed in a beautiful manner. The accessibility can be improved by studying the semantic structure of the webpage and adopting WAI-ARIA standards.
  • Documentation of Accessibility Guide: The goal of this phase is to create an accessibility guide which would go along with existing style guide thus ensuring further code maintainability.

Phase 1: Analysing and improving current performance and accessibility:

On testing the Publiclab.org website using PageSpeedInsight, here are the results-

image description

According to PageSpeedInsight, the page has a slow speed as compared to other pages. On further investigation done by PageSpeedInsight, these were the suggestions -

Eliminate Render Blocking resources: Resources like the css and js files which were not critical can be deferred. All critical files can be unified into one to reduce network requests.

On checking the coverage tab of developer tools in Google Chrome, I noticed that the font awesome script was called twice and only a section of the code was used which can be combined in the normal stylesheet to prevent loading unused css code. Apart from this, many of the files had many unused bytes which can be considered non-critical. Optimizing the application.js file can help in reducing the time for loading by 6 seconds (precisely 6030 ms).

Minify JS: The next way for Optimizing involves minifying the existing javascript files. This can save up to 2.7 seconds.

On further investigation, I found out that the gem 'uglifier' which is used for minifying js is present in the gem file but is not used for compression by using it in the config/production.rb file as documented here. For minifying css, the sassc-rails gem can be upgraded to sass-rails 6 which wraps sassc-rails under its hood as mentioned here.

Video formats for animated content: Large GIFs are inefficient for delivering animated content. By converting the jewelry_district-loop.gif to video, we can save 2.7 seconds. We can add the following code to the video to mimic gif behaviour which implies that it will play in a loop, automatically and the video is silent.

<video autoplay loop muted playsinline> 
 <source src="my-animation.webm" type="video/webm"> 
 <source src="my-animation.mp4" type="video/mp4"> 
</video> 

Next-gen Image formats: Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. So some images like gowanus.jpg can be converted to these formats to save up to a second.

Phase 2: Printability of posts and wiki pages and accessibility:

Accessibility: On testing the accessibility of the website using Wave from webaim, here are the results.

Following are some techniques that might help with accessibility.

Alternative text for image and linked images: Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable. For example, the image in the card of note lacks alt-text. This can be added as a model field for the users to fill while publishing the note.

app/views/notes/_card.html.erb

```

<% if node.main_image %> @widget %>target="_blank"<% end %> href="<%= node.path %>"> "
style="width:100%;"/> ```

Form labels: If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. For example in the /questions route the ask your question form lacks the label which can be fixed by adding it as follows.

app/views/questions/_index.html.erb

<form id="questions\_searchform" role="search" autocomplete="off"   
action="/post"\>  
<div class="input-group"\>  
<input tabindex="1" id="questions\_searchform\_input" type="text" name="title" class="  
<%= "disabled " if !current\_user %\>form-control search-query typeahead"   
qryType="questions" placeholder="type your question"\>  
<label class="questions\_searchform\_label"   
for="questions\_searchform\_input"\>Ask question</label\>

ARIA Elements: Add proper aria labels and descriptions wherever possible. If for the above example we don't want to add any form label but still want it to be accessible , we can add ARIA labels as follows.

app/views/questions/_index.html.erb


<form id="questions\_searchform" role="search" autocomplete="off" action="/post"\>  
<div class="input-group"\>  
<input tabindex="1" id="questions\_searchform\_input" type="text" name="title" aria-label="Ask your question" class="<%= "disabled " if !current\_user %\>form-control search-query typeahead" qryType="questions" placeholder="type your question"\>

Text Resizability: For users who might want to zoom the text for reading, proper text resizability has to be maintained. Here is a screenshot of 200% text zoom on publiclab.org. The join button and description of Publiclab are not visible here.

Printability:

While checking out the print view, these are some of the observations -

Design/Results :

On testing the printability, the best way to incorporate was to have a separate pdf view for the html page. After looking for resources, one of the solutions was to incorporate the wicked_pdf and wkhtmltopdf gems for rendering html to pdf format. Details of this can be found here. On testing wkhtmltopdf on Public Lab here are the results-

Currently the pdf documents all the sections of html code but we can specify our stylesheet for the particular view to only show sections that are relevant for printing.

Implementation :

Setting up wkhtmltopdf: For this we have to add the following ruby gems-

# Gemfile
# rails-generate-pdf/Gemfile
gem 'jquery-rails'
gem 'bootstrap', '~> 4.1.3'
gem 'wicked_pdf'
gem 'wkhtmltopdf-binary'

For the pages that we need to add this we need to modify the controller by adding this method - ``` def show @post = scope.find(params[:id])

    respond_to do |format|
        format.html
        format.pdf do
            render pdf: "Post No. #{@post.id}",
            page_size: 'A4',
            template: "post/show.html.erb",
            layout: "pdf.html",
            orientation: "Landscape",
            lowquality: true,
            zoom: 1,
            dpi: 75
        end
    end
end

private
    def scope
        ::Post.all.includes(:post_items)
    end

Now in the html template , we can add the stylesheet by using the helper from wicked\_pdf to reference stylesheet like this where the name of the css file is 'post\_pdf' (app/assets/stylesheets/post\_pdf.scss)  - 

<%= wicked_pdf_stylesheet_link_tag "post_pdf" %> ``` Now the stylesheet can be modified to set the following properties to ensure that the pdf layout is printed beautifully and only relevant content is printed.

Topics section at Bottom: This section can be removed by applying a css class to it and setting the display to none.

Links: The links are now visible just as they would be rendered in the html page. A better approach would be to make the links a bit more contrasting by having a darker color for the same.

|

a:link, a:visited {color: #781351}|

Footnotes: A footnotes section can be added at the bottom of the page providing all the links given in the wiki page.

Image Transformations: Images can be scaled down to a certain width to promote uniformity throughout the printed material by applying css transformations.For example-

|

.image-50 {
width: 50%
}

img {
display: block;
margin-bottom: 1em;
}|

Tables: In the current scenario, Tables are rendered as they are in the printed document with the scrollbar hiding content.CSS can be modified to print it in a proper tabular format.

Color Contrast: Currently the color contrast is poor and a new color scheme needs to be adopted for achieving the background and content ratio of 4.5:1.

Phase 3: Documentation of Accessibility Guide:

This involves documentation of all features implemented for accessibility and ensuring that these features are safeguarded on the further development of the project. Some of the features are as follows

  • Making sure the semantic structure remains in order.
  • Navigation is consistent throughout the website and can be accessed through the keyboard.
  • Text resizing is possible up to 200% without loss of function or content.
  • Color contrast ratio between text and background is 4.5:1.
  • ARIA roles such as labels and descriptions used wherever possible

Timeline/milestones

This project starts on May 20, 2020, and ends August 20 2020. The following table has the tasks to be completed laid down by the weeks.

Tasks Weeks
Detailed Analysis of Current website performance through Pagespeed insight, webpage test and other tools May 19-27
Improvement of Current Performance : Eliminating third party code blockage. May 27- June 10
Improvement of Current Performance : CSS and JS minification and elimination of unused code. June 10-17
Improvement of Current Performance : Converting gifs and images into webm and next-gen image formats respectively. June 17-24
Accessibility tests using WAVE and printability test through inbuilt firefox print test on all webpages. June 24- July 1
Improving Accessibility : Adding form labels and adding alt text for Images. July 1-8
Improving Accessibility : Adding ARIA roles (labels, descriptions, alert) wherever possible. July 8-15
Improving Accessibility : Checking text resizability on all pages and ensuring no content is hidden. July 15-22
Printability : Removing topics section and improving links color. July 22-29
Printability : Footnotes section and image transformations July 29-Aug 5
Printability : Table rendering and color contrast discussion. Aug 5-12
Documentation of Accessibility Guide Aug 12-16
Finishing up: Creating FTOs, Getting pull requests reviewed and merged Aug 16-18

Needs

  • Guidance from the mentors on the pull requests and how to approach the problem.
  • Documentation will be available online.
  • No other requirements.

First-time contribution

I have been contributing to Public lab since January and these are some of my contributions.

Pull Requests :- I have opened 19 pull requests in Plots 2 repository out of which 9 are merged, 4 are approved and 5 are open. Here is some of my work-

https://github.com/publiclab/plots2/pull/7609

https://github.com/publiclab/plots2/pull/7609

https://github.com/publiclab/plots2/pull/7572

https://github.com/publiclab/plots2/pull/7286

Issues created:- I have opened 28 issues in the plots2 repository. Out of these there are 11 ftos to help fellow newcomers in Opensource to contribute easily to Public Lab.Here are some of those issues-

https://github.com/publiclab/plots2/issues/7591

https://github.com/publiclab/plots2/issues/7590

https://github.com/publiclab/plots2/issues/7529

https://github.com/publiclab/plots2/issues/7567


Experience

I am a third year student pursuing B.Tech in Information Technology + MBA(IT) from Indian Institute Of Information Technology, Allahabad, India.

I have a knack for building products that help empower people. Below are some of the projects that I have worked on :-

Care-An NLP based chatbot that through intents help ease the lives of elderly people and people with disabilities by allowing them to :-

  • Buy prescription drugs online through blockchain thus ensuring trustless and secure payments.
  • Facial recognition allows them to remember their fellow caregivers.
  • Object detection that allows them to find objects around them.
  • News and weather updates on their request.

BabySteps- Built for SheHacks 16 hr hackathon held at IIIT Allahabad -BabySteps is a platform that aims to help pregnant women find timely treatment and explore curated content during their months of pregnancy. It has an api built with drf, a portal made to communicate between doctors and patients and a frontend website in react. The USP of the project is a chatbot made with dialogue flow with webhooks configured in Node Js and can comprehend Hindi as well as English and also book appointments, yield dietary information and answer general queries. The project is currently in ongoing progress and was built for shehacks 2019,IIITA.

SheSafe- Runners Up in Prototype Hackathon held at IIITA - project aims to provide a platform for women safety. It has a react frontend and a chatbot for reporting harassment of any kind, an android app that allows SOS feature to emergency contacts in case of emergency, and a js webscript built using google maps api that aims to find the safest path between two points using k-means clustering.

Here is the link to my Github profile:

@Tlazypanda

Below is shown my skillset:

Skills

Languages:

C, Go, Java, Ruby, Javascript, Python, C++

Web Technology:

Django, Flask, Ruby on Rails

Other Technologies:

AWS, Blockchain, ML


Teamwork

I am the Chapter Leader for Pyladies in Allahabad. I have also organized Djangogirls Allahabad to teach underprivileged women how to code. Apart from this, I am a technical writer for Code Like A Girl Community.

Apart from this, I have been a part of Girlscript Community, which is a Non Profit Organization helping women pursue careers in tech by organizing free workshops across India. I have also mentored in Google Code-In for Systers, Anita Borg Organization.

I have also participated in hackathons with my team for building products empowering people. I have also worked in remote teams before as an intern.

As for Publiclab , I have had an amazing experience contributing here. The community members have been extremely helpful and have guided and mentored me in my journey of Open Source. Special thanks to @VladmirMikulic,@jywarren,@SidharthBansal,@cesswairaimu,@gauravno and @nstjean who have taken time to guide and mentor me.Looking forward to more amazing contributions ahead.


Passion

Publiclab is an organization that spreads knowledge and addresses the current environmental issues through this massive userbase who together bring change and promote sustainability.

I have teamed up with a lot of nonprofit organizations like Lean In India, Djangogirls, Pyladies and Girlscript to bring change wherever possible. I have always been passionate about making sure our environment is sustainable and spreading the message so that our future generations can see Earth for what it really is and not the polluted mess that we are making out of it. I am an avid lover of nature and animals and with pollution affecting these animals natural habitats, it is high time all of us join hands and genuinely do whatever we can to help. For this, it is extremely important that people across the globe are aware of and acknowledge the importance of this. Publiclab has done an exceptional job in making all this information accessible and at the touch of a button.

As for my project, I hope the project allows people with slow net speeds, specially-abled people across the globe access the website with ease.

Audience

This project aims to help people who are specially-abled to access the website in a more friendly and easier manner. This would also help people in rural areas with slow net connectivity better access the website on improving the current performance of the website. Lastly, for people who want to spread knowledge among their peers this project will allow them to print media properly. All-in-all, I most sincerely hope that this project brings some change and promotes inclusion.


9 Comments

Great work! I can't wait for the optimizations to be implemented.

Reply to this comment...


Great work!!! Glad to see your enthu at PL!

Please separate the design details from the implementation details. Example: Bulk Moderation is a high-level design while the Daily Digest is fine grain implementation. Solution: Divide it into 2 parts - Design and implementation. Write just the approach which you want to discuss in the design with er diagram/flow chart/dfd/ui/ux/mock ups etc. While in the implementation details write the core implementation details. Reason for this type of categorical arrangement: Many folks at PL are non-coders so they will be willing to help you, the design part is for them. Developers look at both.

@bansal_sidharth2996 not really sure I understand in this context....can you elaborate a bit on this catered to my proposal 😅


Reply to this comment...


Best part of your proposal is you tested pl website to draw conclusions for optimization

Yes i love that this proposal uses a lot of analytic tools. Great!


Reply to this comment...


Sure. Phase 1 design and implementation should come under two different categories. Similarly for other phases.

@bansal_sidharth2996 Thanks ✌️


Reply to this comment...


Hi @itm2017004 ! Thanks for a great proposal! Love your use of Wave and the recommendations, esp. for screen readers (aria).

Would you be willing to expand a bit on the "for printability" part? We had thought perhaps a separate template that's stripped down for print would be better than extensive CSS mods to the existing page. What do you think about that idea? It would still use custom print CSS but we wouldn't have to do as much hiding of non-print-relevant content, we could just have a simple page layout specifically for print. Thanks!

Also:

By converting the jewelry_district-loop.gif to video

I did want to note this is user-generated content, so perhaps it's harder to enforce this kind of thing for assets/images that are not part of our core site code. But it's a good suggestion nonetheless!

Is this a question? Click here to post it to the Questions page.

@warren Thanks so much for your feedback ✌️ Have modifed the printability sections for a separate print view please ignore the formatting it shows different on the preview and after publishing. Please have a look whenever you are free. Thanks 😃


Reply to this comment...


Login to comment.