<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
	<id>https://wiki.expertiza.ncsu.edu/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Psingh25</id>
	<title>Expertiza_Wiki - User contributions [en]</title>
	<link rel="self" type="application/atom+xml" href="https://wiki.expertiza.ncsu.edu/api.php?action=feedcontributions&amp;feedformat=atom&amp;user=Psingh25"/>
	<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Special:Contributions/Psingh25"/>
	<updated>2026-05-26T05:47:19Z</updated>
	<subtitle>User contributions</subtitle>
	<generator>MediaWiki 1.41.0</generator>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125029</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125029"/>
		<updated>2019-05-08T14:39:05Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[ Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made a new Heroku account with the following credentails:&lt;br /&gt;
   Email: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
===Deploy Errbit on Heroku===&lt;br /&gt;
To deploy Errbit on Heroku, so that we could configure it to catch errors for Expertiza, the following steps were taken:&lt;br /&gt;
&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[[File:Build.png|frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png|frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png|frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[[File:ErrorDetls.png|frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[[File:ErrorsGroup.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125028</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125028"/>
		<updated>2019-05-08T14:38:10Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[ Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made a new Heroku account with the following credentails:&lt;br /&gt;
   Email: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
===Deploy Errbit on Heroku===&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[[File:Build.png|frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png|frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png|frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[[File:ErrorDetls.png|frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[[File:ErrorsGroup.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125027</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125027"/>
		<updated>2019-05-08T14:37:41Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[ Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made a new Heroku account with the following credentails:&lt;br /&gt;
   Email: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[[File:Build.png|frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png|frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png|frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[[File:ErrorDetls.png|frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[[File:ErrorsGroup.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125026</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125026"/>
		<updated>2019-05-08T14:36:54Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[ Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[[File:Build.png|frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png|frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png|frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[[File:ErrorDetls.png|frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[[File:ErrorsGroup.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125025</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125025"/>
		<updated>2019-05-08T14:35:58Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[[File:Build.png|frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png|frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png|frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[[File:ErrorDetls.png|frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[[File:ErrorsGroup.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125024</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125024"/>
		<updated>2019-05-08T14:32:23Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[[File:Build.png||frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png||frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png||frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[[File:ErrorDetls.png||frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[[File:ErrorsGroup.png||frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125023</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125023"/>
		<updated>2019-05-08T14:31:50Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;br /&gt;
*Deployment of Errbit on Heroku, showing successful build.&lt;br /&gt;
[File:Build.png||frame|upright|center]]&lt;br /&gt;
*Login to Errbit using the admin credentials we specified.&lt;br /&gt;
[[File:ErrbitLogin.png||frame|upright|center]]&lt;br /&gt;
*Create a new App on Errbit to catch Errors for Expertiza&lt;br /&gt;
[[File:ExpertizaApp.png||frame|upright|center]]&lt;br /&gt;
*Errors from Expertiza are caught in this manner and displayed.&lt;br /&gt;
[File:ErrorDetls.png||frame|upright|center]]&lt;br /&gt;
*Similar errors are grouped together.&lt;br /&gt;
[File:ErrorsGroup.png||frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrorsGroup.png&amp;diff=125022</id>
		<title>File:ErrorsGroup.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrorsGroup.png&amp;diff=125022"/>
		<updated>2019-05-08T14:25:22Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrorDetls.png&amp;diff=125021</id>
		<title>File:ErrorDetls.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrorDetls.png&amp;diff=125021"/>
		<updated>2019-05-08T14:24:43Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrbitLogin.png&amp;diff=125020</id>
		<title>File:ErrbitLogin.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrbitLogin.png&amp;diff=125020"/>
		<updated>2019-05-08T14:23:54Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: uploaded a new version of &amp;amp;quot;File:ErrbitLogin.png&amp;amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:Build.png&amp;diff=125019</id>
		<title>File:Build.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:Build.png&amp;diff=125019"/>
		<updated>2019-05-08T14:23:15Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:ExpertizaApp.png&amp;diff=125018</id>
		<title>File:ExpertizaApp.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:ExpertizaApp.png&amp;diff=125018"/>
		<updated>2019-05-08T14:21:49Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125017</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125017"/>
		<updated>2019-05-08T14:19:19Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
===Errbit Interface===&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrbitLogin.png&amp;diff=125016</id>
		<title>File:ErrbitLogin.png</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=File:ErrbitLogin.png&amp;diff=125016"/>
		<updated>2019-05-08T14:18:01Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125015</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125015"/>
		<updated>2019-05-08T14:16:17Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
*Errbit&lt;br /&gt;
*Expertiza&lt;br /&gt;
*MongoDB&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku and named it errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following to deploy.&lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit named Expertiza&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
On starting the server, the errors would now be caught by Errbit.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;br /&gt;
&lt;br /&gt;
You could access the app using:&lt;br /&gt;
   https://errbit-expertiza2019.herokuapp.com/&lt;br /&gt;
   UserName: expertiza-support@lists.ncsu.edu&lt;br /&gt;
   Password: errbit&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125014</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=125014"/>
		<updated>2019-05-08T13:22:29Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following &lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;br /&gt;
*Setup tasks to fetch from upstream and rebase and then push to Heroku.&lt;br /&gt;
*Task to migrate the database into production&lt;br /&gt;
*To deploy using these tasks, run:&lt;br /&gt;
   rake deploy:production DEPLOY_BRANCH=production&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124995</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124995"/>
		<updated>2019-05-08T08:02:26Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following &lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124994</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124994"/>
		<updated>2019-05-08T07:20:02Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following &lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy its configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from upstream/master into the forked repository and deploy on Heroku.'''&lt;br /&gt;
*Add the original GitHub repository as a &amp;quot;remote&amp;quot; called upstream to [https://github.com/errbit/errbit Errbit]&lt;br /&gt;
*Add the empty Git repository made during app creation on Heroku as a &amp;quot;remote&amp;quot; called &amp;quot;production&amp;quot;.&lt;br /&gt;
 In the .git/config, add:&lt;br /&gt;
   &lt;br /&gt;
    [remote &amp;quot;upstream&amp;quot;]¬&lt;br /&gt;
      url = https://github.com/errbit/errbit.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/upstream/*¬&lt;br /&gt;
    [remote &amp;quot;production&amp;quot;]¬&lt;br /&gt;
      url = https://git.heroku.com/errbit-expertiza2019.git¬&lt;br /&gt;
      fetch = +refs/heads/*:refs/remotes/heroku/*¬&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124993</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124993"/>
		<updated>2019-05-08T07:00:04Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create an addon.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
To periodically clear resolved errors to free up space, With the cron add-on:Install the heroku cron addon, to clear resolved errors daily:&lt;br /&gt;
   heroku addons:add cron:daily&lt;br /&gt;
&lt;br /&gt;
Run the following &lt;br /&gt;
   git add . &lt;br /&gt;
   git commit -m “new creds” &lt;br /&gt;
   git push heroku master &lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124990</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124990"/>
		<updated>2019-05-08T06:17:34Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
   def admin_email&lt;br /&gt;
      return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
&lt;br /&gt;
     &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
   def admin_pass&lt;br /&gt;
    return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
    @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
   end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create addon one.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
   git add . &amp;lt;/br&amp;gt;&lt;br /&gt;
   git commit -m “new creds” &amp;lt;/br&amp;gt;&lt;br /&gt;
   git push heroku master &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124989</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124989"/>
		<updated>2019-05-08T06:16:17Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run &amp;quot;rake db:seed&amp;quot; it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file. Eg:&lt;br /&gt;
&lt;br /&gt;
def admin_email&lt;br /&gt;
   return 'expertiza-support@lists.ncsu.edu' if heroku_pr_review_app?&lt;br /&gt;
&lt;br /&gt;
  &amp;quot;expertiza-support@lists.ncsu.edu&amp;quot;&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
def admin_pass&lt;br /&gt;
  return 'errbit' if heroku_pr_review_app?&lt;br /&gt;
&lt;br /&gt;
  @admin_pass ||= &amp;quot;errbit&amp;quot;&lt;br /&gt;
end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
*Seed the DB (NOTE: No bootstrap task is used on Heroku!).&lt;br /&gt;
  heroku run rake db:seed&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from your console&lt;br /&gt;
   heroku login&lt;br /&gt;
*Added remote&lt;br /&gt;
   heroku git:remote -a  errbit-expertiza2019&lt;br /&gt;
*As errbit needs MongoDB database backend so need to install MongoDB addon in Heroku. We can use heroku command to create addon one.&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
   git add . &amp;lt;/br&amp;gt;&lt;br /&gt;
   git commit -m “new creds” &amp;lt;/br&amp;gt;&lt;br /&gt;
   git push heroku master &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124988</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124988"/>
		<updated>2019-05-08T05:49:19Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run rake errbit:bootsrap or rake db:seed it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file.&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from console using `heroku login`&lt;br /&gt;
*Added remote using `heroku git:remote -a  errbit-expertiza2019`&lt;br /&gt;
&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku addons:add sendgrid:starter &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
   git add . &amp;lt;/br&amp;gt;&lt;br /&gt;
   git commit -m “new creds” &amp;lt;/br&amp;gt;&lt;br /&gt;
   git push heroku master &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to point to our deployed Errbit application&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in the expertiza/config/initializers/airbrake.rb file.&lt;br /&gt;
   Airbrake.configure do |config|&lt;br /&gt;
  config.host = 'https://errbit-expertiza2019.herokuapp.com'&lt;br /&gt;
  config.project_id = 1 # required, but any positive integer works&lt;br /&gt;
  config.project_key = '64ed97f0c8e628acefb3a7f63308a11c'&lt;br /&gt;
  # Uncomment for Rails apps&lt;br /&gt;
   config.environment = Rails.env&lt;br /&gt;
   config.ignore_environments = %w(test)&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
   &lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124977</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124977"/>
		<updated>2019-05-07T21:29:59Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run rake errbit:bootsrap or rake db:seed it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file.&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from console using `heroku login`&lt;br /&gt;
*Added remote using `heroku git:remote -a  errbit-expertiza2019`&lt;br /&gt;
&lt;br /&gt;
   heroku addons:add mongolab:sandbox &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku addons:add sendgrid:starter &amp;lt;/br&amp;gt;&lt;br /&gt;
   heroku config:add HEROKU=true &amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;gt; git add .&lt;br /&gt;
&amp;gt; git commit -m “new creds”&lt;br /&gt;
&amp;gt; git push heroku master&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to send errors to the deployed Errbit&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in Expertiza&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124976</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124976"/>
		<updated>2019-05-07T21:12:03Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run rake errbit:bootsrap or rake db:seed it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file.&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from console using `heroku login`&lt;br /&gt;
*Added remote using `heroku git:remote -a  errbit-expertiza2019`&lt;br /&gt;
```&lt;br /&gt;
heroku addons:add mongolab:sandbox&lt;br /&gt;
heroku addons:add sendgrid:starter&lt;br /&gt;
heroku config:add HEROKU=true&lt;br /&gt;
```&lt;br /&gt;
&amp;gt; git add .&lt;br /&gt;
&amp;gt; git commit -m “new creds”&lt;br /&gt;
&amp;gt; git push heroku master&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to send errors to the deployed Errbit&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in Expertiza&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124975</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124975"/>
		<updated>2019-05-07T21:10:38Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run rake errbit:bootsrap or rake db:seed it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file.&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, named errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
&lt;br /&gt;
Took the following steps in the /errbit repository on local machine:&lt;br /&gt;
&lt;br /&gt;
*Login to Heroku using Herkou CLI from console using `heroku login`&lt;br /&gt;
*Added remote using `heroku git:remote -a  errbit-expertiza2019`&lt;br /&gt;
```&lt;br /&gt;
heroku addons:add mongolab:sandbox&lt;br /&gt;
heroku addons:add sendgrid:starter&lt;br /&gt;
heroku config:add HEROKU=true&lt;br /&gt;
```&lt;br /&gt;
&amp;gt; git add .&lt;br /&gt;
&amp;gt; git commit -m “new creds”&lt;br /&gt;
&amp;gt; git push heroku master&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to send errors to the deployed Errbit&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in Expertiza&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
==Log files==&lt;br /&gt;
For different log levels, log messages are written in different files named expertiza_&amp;lt;log_level&amp;gt;.log&lt;br /&gt;
&lt;br /&gt;
Currently, expertiza provides the capability of writing logs into 5 different custom log files.&lt;br /&gt;
&lt;br /&gt;
For eg, &lt;br /&gt;
&lt;br /&gt;
*expertiza_info.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_warn.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_error.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_fatal.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_debug.log&lt;br /&gt;
&lt;br /&gt;
Apart from above files, &amp;lt;environment&amp;gt;.log file is used for logging messages which could not be logged by ExpertizaLogger, like, page load messages or certain load time exceptions.&lt;br /&gt;
&lt;br /&gt;
Since Rails logger provides writing into a specific log file, to restrict least file switch, ExpertizaLogger holds different log level loggers in separate instance variables. A new logger instance is created and assigned whenever Rails removes the link to manage memory consumption.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
===ExpertizaLogger===&lt;br /&gt;
&lt;br /&gt;
This class provides the logger needed for logging messages for different log levels.&lt;br /&gt;
It provides 5 different static methods namely '''info''', '''warn''', '''error''', '''fatal''' and '''debug''' which could be called as follows:&lt;br /&gt;
&lt;br /&gt;
'''ExpertizaLogger.info ''message'''''&lt;br /&gt;
&lt;br /&gt;
where ''message'' could be an instance of '''LoggerMessage''' or a string.&lt;br /&gt;
&lt;br /&gt;
===Custom LoggerMessage===&lt;br /&gt;
&lt;br /&gt;
A LoggerMessage instance could be created as follows:&lt;br /&gt;
&lt;br /&gt;
'''LoggerMessage.new(&amp;lt;controller_name&amp;gt;, &amp;lt;user_id&amp;gt;, &amp;lt;message&amp;gt;, &amp;lt;request object&amp;gt;)'''&lt;br /&gt;
&lt;br /&gt;
Fourth parameter i.e &amp;lt;request object&amp;gt; is an optional parameter. &lt;br /&gt;
&lt;br /&gt;
Whenever a request is made, the request object is injected into the controller and is available in the controller as &amp;quot;request&amp;quot;.&lt;br /&gt;
Similarly, &amp;lt;controller_name&amp;gt; is available in &amp;quot;controller_name&amp;quot; inside controller. For other trigger points, file name could be passed as a string.&lt;br /&gt;
&lt;br /&gt;
Since the request object holds the ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'', it is used to capture and log both into the log message.&lt;br /&gt;
&lt;br /&gt;
===ExpertizaLogFormatter===&lt;br /&gt;
&lt;br /&gt;
It captures the message and determines if the message is an instance of LoggerMessage or not. Based on that, it creates a message by populating message placeholders as below:&lt;br /&gt;
&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
&lt;br /&gt;
All the exceptions are preprocessed to remove newline characters so that it could fit in a single line as a message.&lt;br /&gt;
&lt;br /&gt;
All the messages that are not logged by ExpertizaLogger, there is a separate logger definition provided in config/environments/&amp;lt;environment&amp;gt;.rb as:&lt;br /&gt;
&lt;br /&gt;
  config.log_formatter = proc do |s, ts, pg, msg|&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
===Environment config===&lt;br /&gt;
config.log_tags = [ :remote_ip, :uuid ]&lt;br /&gt;
&lt;br /&gt;
These config.log_tags entries make sure that &amp;lt;origin_ip&amp;gt; and &amp;lt;request_id&amp;gt; are prepended to messages. These are for messages which are not logged by ExpertizaLogger but by the Rails default logger.&lt;br /&gt;
These messages go in &amp;lt;environment&amp;gt;.log file.&lt;br /&gt;
&lt;br /&gt;
==Restrictions==&lt;br /&gt;
The request object is not available beyond the controllers. Hence, ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'' remains uncaptured if messages are logged from somewhere other than controllers.&lt;br /&gt;
&lt;br /&gt;
==Visualization through ELK stack==&lt;br /&gt;
===Configuration===&lt;br /&gt;
&lt;br /&gt;
Filebeat (filebeat.yml)&lt;br /&gt;
&lt;br /&gt;
Changes:&lt;br /&gt;
&lt;br /&gt;
- type: log&lt;br /&gt;
&lt;br /&gt;
  # Change to true to enable this prospector configuration.&lt;br /&gt;
  enabled: true&lt;br /&gt;
&lt;br /&gt;
  # Paths that should be crawled and fetched. Glob based paths.&lt;br /&gt;
  paths:&lt;br /&gt;
    - &amp;lt;path to log files&amp;gt;*.log&lt;br /&gt;
&lt;br /&gt;
output.logstash:&lt;br /&gt;
  # The Logstash hosts&lt;br /&gt;
  hosts: [&amp;quot;&amp;lt;ip&amp;gt;:&amp;lt;5044:port of logstash&amp;gt;&amp;quot;]&lt;br /&gt;
&lt;br /&gt;
Filebeat sends all log files to logstash.&lt;br /&gt;
&lt;br /&gt;
Logstash (expertiza-logstash.conf)&lt;br /&gt;
&lt;br /&gt;
   input { &lt;br /&gt;
        beats {&lt;br /&gt;
            port =&amp;gt; &amp;quot;5044&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
   }&lt;br /&gt;
   filter {&lt;br /&gt;
    grok {&lt;br /&gt;
    	match =&amp;gt; { &amp;quot;message&amp;quot; =&amp;gt; &amp;quot;TST=\[%{DATA:timestamp}\] SVT=\[%{DATA:sev}\] PNM=\[%{DATA:pgnm}\] OIP=\[%{DATA:originip}\] RID=\[%{DATA:requestid}\] CTR=\[%{DATA:generatedby}\] UID=\[% &lt;br /&gt;
   {DATA:unityid}\] MSG=\[%{GREEDYDATA:message}\]&amp;quot; }&lt;br /&gt;
    	overwrite =&amp;gt; [ &amp;quot;message&amp;quot;, &amp;quot;timestamp&amp;quot; ]&lt;br /&gt;
  	}&lt;br /&gt;
  	date {&lt;br /&gt;
    	match =&amp;gt; [&amp;quot;timestamp&amp;quot;, &amp;quot;ISO8601&amp;quot;]&lt;br /&gt;
  	}&lt;br /&gt;
  	&lt;br /&gt;
    }&lt;br /&gt;
    output {&lt;br /&gt;
      elasticsearch {&lt;br /&gt;
        hosts =&amp;gt; [ &amp;quot;localhost:9200&amp;quot; ]&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
Logstash reads each line from the log file and parses it based on the template provided in grok match above. It then sends each message entry into Elastic search.&lt;br /&gt;
&lt;br /&gt;
Kibana (config/kibana.yml)&lt;br /&gt;
&lt;br /&gt;
    elasticsearch.url: &amp;quot;http://localhost:9200&amp;quot;&lt;br /&gt;
&lt;br /&gt;
Kibana picks each entry from Elastic search and provides into the web interface.&lt;br /&gt;
&lt;br /&gt;
===Setup===&lt;br /&gt;
ELK stack could be set up to visualize and analyze the messages from the log files.&lt;br /&gt;
&lt;br /&gt;
Once ELK is installed, below commands could be used to run each server:&lt;br /&gt;
&lt;br /&gt;
'''Clear Elastic search cache'''&lt;br /&gt;
&lt;br /&gt;
curl -X DELETE 'http://localhost:9200/_all'&lt;br /&gt;
&lt;br /&gt;
'''Filebeat'''&lt;br /&gt;
&lt;br /&gt;
sudo rm data/registry&lt;br /&gt;
&lt;br /&gt;
sudo ./filebeat -e -c filebeat.yml -d &amp;quot;publish&amp;quot;&lt;br /&gt;
&lt;br /&gt;
'''Logstash'''&lt;br /&gt;
&lt;br /&gt;
bin/logstash -f expertiza-logstash.conf --config.reload.automatic&lt;br /&gt;
&lt;br /&gt;
'''Kibana'''&lt;br /&gt;
&lt;br /&gt;
bin/kibana&lt;br /&gt;
&lt;br /&gt;
===Kibana Interface===&lt;br /&gt;
&lt;br /&gt;
Success message in Kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_success_msg.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Exception in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_exception.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Tracing error in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_tracing_error.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Search records using request ID in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_req_id.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Searching records using unity id in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_using_unityid.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124974</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124974"/>
		<updated>2019-05-07T21:00:15Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with Email: expertiza-support@lists.ncsu.edu and Password: expertiza2019@&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit and follow the steps mentioned on [https://github.com/errbit/errbit/blob/master/README.md README.md]&lt;br /&gt;
*When we run rake errbit:bootsrap or rake db:seed it will create an admin user with a random password. We can see these login credential in the console log. But instead, we can provide this username and password explicitly by just making some changes in errbit/db/seed.rb file.&lt;br /&gt;
&lt;br /&gt;
'''Deploy Errbit on Heroku'''&lt;br /&gt;
*Created a new empty application on Heroku, namely errbit-expertiza2019&lt;br /&gt;
*The app will have an associated empty git repository https://git.heroku.com/errbit-expertiza2019.git&lt;br /&gt;
*Login to Heroku using Herkou CLI&lt;br /&gt;
*&lt;br /&gt;
&lt;br /&gt;
'''Configure Expertiza to send errors to the deployed Errbit&lt;br /&gt;
*Create a new app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in Expertiza&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.'''&lt;br /&gt;
&lt;br /&gt;
==Log files==&lt;br /&gt;
For different log levels, log messages are written in different files named expertiza_&amp;lt;log_level&amp;gt;.log&lt;br /&gt;
&lt;br /&gt;
Currently, expertiza provides the capability of writing logs into 5 different custom log files.&lt;br /&gt;
&lt;br /&gt;
For eg, &lt;br /&gt;
&lt;br /&gt;
*expertiza_info.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_warn.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_error.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_fatal.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_debug.log&lt;br /&gt;
&lt;br /&gt;
Apart from above files, &amp;lt;environment&amp;gt;.log file is used for logging messages which could not be logged by ExpertizaLogger, like, page load messages or certain load time exceptions.&lt;br /&gt;
&lt;br /&gt;
Since Rails logger provides writing into a specific log file, to restrict least file switch, ExpertizaLogger holds different log level loggers in separate instance variables. A new logger instance is created and assigned whenever Rails removes the link to manage memory consumption.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
===ExpertizaLogger===&lt;br /&gt;
&lt;br /&gt;
This class provides the logger needed for logging messages for different log levels.&lt;br /&gt;
It provides 5 different static methods namely '''info''', '''warn''', '''error''', '''fatal''' and '''debug''' which could be called as follows:&lt;br /&gt;
&lt;br /&gt;
'''ExpertizaLogger.info ''message'''''&lt;br /&gt;
&lt;br /&gt;
where ''message'' could be an instance of '''LoggerMessage''' or a string.&lt;br /&gt;
&lt;br /&gt;
===Custom LoggerMessage===&lt;br /&gt;
&lt;br /&gt;
A LoggerMessage instance could be created as follows:&lt;br /&gt;
&lt;br /&gt;
'''LoggerMessage.new(&amp;lt;controller_name&amp;gt;, &amp;lt;user_id&amp;gt;, &amp;lt;message&amp;gt;, &amp;lt;request object&amp;gt;)'''&lt;br /&gt;
&lt;br /&gt;
Fourth parameter i.e &amp;lt;request object&amp;gt; is an optional parameter. &lt;br /&gt;
&lt;br /&gt;
Whenever a request is made, the request object is injected into the controller and is available in the controller as &amp;quot;request&amp;quot;.&lt;br /&gt;
Similarly, &amp;lt;controller_name&amp;gt; is available in &amp;quot;controller_name&amp;quot; inside controller. For other trigger points, file name could be passed as a string.&lt;br /&gt;
&lt;br /&gt;
Since the request object holds the ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'', it is used to capture and log both into the log message.&lt;br /&gt;
&lt;br /&gt;
===ExpertizaLogFormatter===&lt;br /&gt;
&lt;br /&gt;
It captures the message and determines if the message is an instance of LoggerMessage or not. Based on that, it creates a message by populating message placeholders as below:&lt;br /&gt;
&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
&lt;br /&gt;
All the exceptions are preprocessed to remove newline characters so that it could fit in a single line as a message.&lt;br /&gt;
&lt;br /&gt;
All the messages that are not logged by ExpertizaLogger, there is a separate logger definition provided in config/environments/&amp;lt;environment&amp;gt;.rb as:&lt;br /&gt;
&lt;br /&gt;
  config.log_formatter = proc do |s, ts, pg, msg|&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
===Environment config===&lt;br /&gt;
config.log_tags = [ :remote_ip, :uuid ]&lt;br /&gt;
&lt;br /&gt;
These config.log_tags entries make sure that &amp;lt;origin_ip&amp;gt; and &amp;lt;request_id&amp;gt; are prepended to messages. These are for messages which are not logged by ExpertizaLogger but by the Rails default logger.&lt;br /&gt;
These messages go in &amp;lt;environment&amp;gt;.log file.&lt;br /&gt;
&lt;br /&gt;
==Restrictions==&lt;br /&gt;
The request object is not available beyond the controllers. Hence, ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'' remains uncaptured if messages are logged from somewhere other than controllers.&lt;br /&gt;
&lt;br /&gt;
==Visualization through ELK stack==&lt;br /&gt;
===Configuration===&lt;br /&gt;
&lt;br /&gt;
Filebeat (filebeat.yml)&lt;br /&gt;
&lt;br /&gt;
Changes:&lt;br /&gt;
&lt;br /&gt;
- type: log&lt;br /&gt;
&lt;br /&gt;
  # Change to true to enable this prospector configuration.&lt;br /&gt;
  enabled: true&lt;br /&gt;
&lt;br /&gt;
  # Paths that should be crawled and fetched. Glob based paths.&lt;br /&gt;
  paths:&lt;br /&gt;
    - &amp;lt;path to log files&amp;gt;*.log&lt;br /&gt;
&lt;br /&gt;
output.logstash:&lt;br /&gt;
  # The Logstash hosts&lt;br /&gt;
  hosts: [&amp;quot;&amp;lt;ip&amp;gt;:&amp;lt;5044:port of logstash&amp;gt;&amp;quot;]&lt;br /&gt;
&lt;br /&gt;
Filebeat sends all log files to logstash.&lt;br /&gt;
&lt;br /&gt;
Logstash (expertiza-logstash.conf)&lt;br /&gt;
&lt;br /&gt;
   input { &lt;br /&gt;
        beats {&lt;br /&gt;
            port =&amp;gt; &amp;quot;5044&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
   }&lt;br /&gt;
   filter {&lt;br /&gt;
    grok {&lt;br /&gt;
    	match =&amp;gt; { &amp;quot;message&amp;quot; =&amp;gt; &amp;quot;TST=\[%{DATA:timestamp}\] SVT=\[%{DATA:sev}\] PNM=\[%{DATA:pgnm}\] OIP=\[%{DATA:originip}\] RID=\[%{DATA:requestid}\] CTR=\[%{DATA:generatedby}\] UID=\[% &lt;br /&gt;
   {DATA:unityid}\] MSG=\[%{GREEDYDATA:message}\]&amp;quot; }&lt;br /&gt;
    	overwrite =&amp;gt; [ &amp;quot;message&amp;quot;, &amp;quot;timestamp&amp;quot; ]&lt;br /&gt;
  	}&lt;br /&gt;
  	date {&lt;br /&gt;
    	match =&amp;gt; [&amp;quot;timestamp&amp;quot;, &amp;quot;ISO8601&amp;quot;]&lt;br /&gt;
  	}&lt;br /&gt;
  	&lt;br /&gt;
    }&lt;br /&gt;
    output {&lt;br /&gt;
      elasticsearch {&lt;br /&gt;
        hosts =&amp;gt; [ &amp;quot;localhost:9200&amp;quot; ]&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
Logstash reads each line from the log file and parses it based on the template provided in grok match above. It then sends each message entry into Elastic search.&lt;br /&gt;
&lt;br /&gt;
Kibana (config/kibana.yml)&lt;br /&gt;
&lt;br /&gt;
    elasticsearch.url: &amp;quot;http://localhost:9200&amp;quot;&lt;br /&gt;
&lt;br /&gt;
Kibana picks each entry from Elastic search and provides into the web interface.&lt;br /&gt;
&lt;br /&gt;
===Setup===&lt;br /&gt;
ELK stack could be set up to visualize and analyze the messages from the log files.&lt;br /&gt;
&lt;br /&gt;
Once ELK is installed, below commands could be used to run each server:&lt;br /&gt;
&lt;br /&gt;
'''Clear Elastic search cache'''&lt;br /&gt;
&lt;br /&gt;
curl -X DELETE 'http://localhost:9200/_all'&lt;br /&gt;
&lt;br /&gt;
'''Filebeat'''&lt;br /&gt;
&lt;br /&gt;
sudo rm data/registry&lt;br /&gt;
&lt;br /&gt;
sudo ./filebeat -e -c filebeat.yml -d &amp;quot;publish&amp;quot;&lt;br /&gt;
&lt;br /&gt;
'''Logstash'''&lt;br /&gt;
&lt;br /&gt;
bin/logstash -f expertiza-logstash.conf --config.reload.automatic&lt;br /&gt;
&lt;br /&gt;
'''Kibana'''&lt;br /&gt;
&lt;br /&gt;
bin/kibana&lt;br /&gt;
&lt;br /&gt;
===Kibana Interface===&lt;br /&gt;
&lt;br /&gt;
Success message in Kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_success_msg.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Exception in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_exception.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Tracing error in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_tracing_error.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Search records using request ID in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_req_id.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Searching records using unity id in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_using_unityid.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124973</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124973"/>
		<updated>2019-05-07T20:24:16Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with email: expertiza-support@lists.ncsu.edu and password: expertiza2019@&lt;br /&gt;
*&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit from https://github.com/errbit/errbit&lt;br /&gt;
*Make changes to login using own creds&lt;br /&gt;
*Make an app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in Expertiza&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.&lt;br /&gt;
==Log files==&lt;br /&gt;
For different log levels, log messages are written in different files named expertiza_&amp;lt;log_level&amp;gt;.log&lt;br /&gt;
&lt;br /&gt;
Currently, expertiza provides the capability of writing logs into 5 different custom log files.&lt;br /&gt;
&lt;br /&gt;
For eg, &lt;br /&gt;
&lt;br /&gt;
*expertiza_info.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_warn.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_error.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_fatal.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_debug.log&lt;br /&gt;
&lt;br /&gt;
Apart from above files, &amp;lt;environment&amp;gt;.log file is used for logging messages which could not be logged by ExpertizaLogger, like, page load messages or certain load time exceptions.&lt;br /&gt;
&lt;br /&gt;
Since Rails logger provides writing into a specific log file, to restrict least file switch, ExpertizaLogger holds different log level loggers in separate instance variables. A new logger instance is created and assigned whenever Rails removes the link to manage memory consumption.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
===ExpertizaLogger===&lt;br /&gt;
&lt;br /&gt;
This class provides the logger needed for logging messages for different log levels.&lt;br /&gt;
It provides 5 different static methods namely '''info''', '''warn''', '''error''', '''fatal''' and '''debug''' which could be called as follows:&lt;br /&gt;
&lt;br /&gt;
'''ExpertizaLogger.info ''message'''''&lt;br /&gt;
&lt;br /&gt;
where ''message'' could be an instance of '''LoggerMessage''' or a string.&lt;br /&gt;
&lt;br /&gt;
===Custom LoggerMessage===&lt;br /&gt;
&lt;br /&gt;
A LoggerMessage instance could be created as follows:&lt;br /&gt;
&lt;br /&gt;
'''LoggerMessage.new(&amp;lt;controller_name&amp;gt;, &amp;lt;user_id&amp;gt;, &amp;lt;message&amp;gt;, &amp;lt;request object&amp;gt;)'''&lt;br /&gt;
&lt;br /&gt;
Fourth parameter i.e &amp;lt;request object&amp;gt; is an optional parameter. &lt;br /&gt;
&lt;br /&gt;
Whenever a request is made, the request object is injected into the controller and is available in the controller as &amp;quot;request&amp;quot;.&lt;br /&gt;
Similarly, &amp;lt;controller_name&amp;gt; is available in &amp;quot;controller_name&amp;quot; inside controller. For other trigger points, file name could be passed as a string.&lt;br /&gt;
&lt;br /&gt;
Since the request object holds the ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'', it is used to capture and log both into the log message.&lt;br /&gt;
&lt;br /&gt;
===ExpertizaLogFormatter===&lt;br /&gt;
&lt;br /&gt;
It captures the message and determines if the message is an instance of LoggerMessage or not. Based on that, it creates a message by populating message placeholders as below:&lt;br /&gt;
&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
&lt;br /&gt;
All the exceptions are preprocessed to remove newline characters so that it could fit in a single line as a message.&lt;br /&gt;
&lt;br /&gt;
All the messages that are not logged by ExpertizaLogger, there is a separate logger definition provided in config/environments/&amp;lt;environment&amp;gt;.rb as:&lt;br /&gt;
&lt;br /&gt;
  config.log_formatter = proc do |s, ts, pg, msg|&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
===Environment config===&lt;br /&gt;
config.log_tags = [ :remote_ip, :uuid ]&lt;br /&gt;
&lt;br /&gt;
These config.log_tags entries make sure that &amp;lt;origin_ip&amp;gt; and &amp;lt;request_id&amp;gt; are prepended to messages. These are for messages which are not logged by ExpertizaLogger but by the Rails default logger.&lt;br /&gt;
These messages go in &amp;lt;environment&amp;gt;.log file.&lt;br /&gt;
&lt;br /&gt;
==Restrictions==&lt;br /&gt;
The request object is not available beyond the controllers. Hence, ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'' remains uncaptured if messages are logged from somewhere other than controllers.&lt;br /&gt;
&lt;br /&gt;
==Visualization through ELK stack==&lt;br /&gt;
===Configuration===&lt;br /&gt;
&lt;br /&gt;
Filebeat (filebeat.yml)&lt;br /&gt;
&lt;br /&gt;
Changes:&lt;br /&gt;
&lt;br /&gt;
- type: log&lt;br /&gt;
&lt;br /&gt;
  # Change to true to enable this prospector configuration.&lt;br /&gt;
  enabled: true&lt;br /&gt;
&lt;br /&gt;
  # Paths that should be crawled and fetched. Glob based paths.&lt;br /&gt;
  paths:&lt;br /&gt;
    - &amp;lt;path to log files&amp;gt;*.log&lt;br /&gt;
&lt;br /&gt;
output.logstash:&lt;br /&gt;
  # The Logstash hosts&lt;br /&gt;
  hosts: [&amp;quot;&amp;lt;ip&amp;gt;:&amp;lt;5044:port of logstash&amp;gt;&amp;quot;]&lt;br /&gt;
&lt;br /&gt;
Filebeat sends all log files to logstash.&lt;br /&gt;
&lt;br /&gt;
Logstash (expertiza-logstash.conf)&lt;br /&gt;
&lt;br /&gt;
   input { &lt;br /&gt;
        beats {&lt;br /&gt;
            port =&amp;gt; &amp;quot;5044&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
   }&lt;br /&gt;
   filter {&lt;br /&gt;
    grok {&lt;br /&gt;
    	match =&amp;gt; { &amp;quot;message&amp;quot; =&amp;gt; &amp;quot;TST=\[%{DATA:timestamp}\] SVT=\[%{DATA:sev}\] PNM=\[%{DATA:pgnm}\] OIP=\[%{DATA:originip}\] RID=\[%{DATA:requestid}\] CTR=\[%{DATA:generatedby}\] UID=\[% &lt;br /&gt;
   {DATA:unityid}\] MSG=\[%{GREEDYDATA:message}\]&amp;quot; }&lt;br /&gt;
    	overwrite =&amp;gt; [ &amp;quot;message&amp;quot;, &amp;quot;timestamp&amp;quot; ]&lt;br /&gt;
  	}&lt;br /&gt;
  	date {&lt;br /&gt;
    	match =&amp;gt; [&amp;quot;timestamp&amp;quot;, &amp;quot;ISO8601&amp;quot;]&lt;br /&gt;
  	}&lt;br /&gt;
  	&lt;br /&gt;
    }&lt;br /&gt;
    output {&lt;br /&gt;
      elasticsearch {&lt;br /&gt;
        hosts =&amp;gt; [ &amp;quot;localhost:9200&amp;quot; ]&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
Logstash reads each line from the log file and parses it based on the template provided in grok match above. It then sends each message entry into Elastic search.&lt;br /&gt;
&lt;br /&gt;
Kibana (config/kibana.yml)&lt;br /&gt;
&lt;br /&gt;
    elasticsearch.url: &amp;quot;http://localhost:9200&amp;quot;&lt;br /&gt;
&lt;br /&gt;
Kibana picks each entry from Elastic search and provides into the web interface.&lt;br /&gt;
&lt;br /&gt;
===Setup===&lt;br /&gt;
ELK stack could be set up to visualize and analyze the messages from the log files.&lt;br /&gt;
&lt;br /&gt;
Once ELK is installed, below commands could be used to run each server:&lt;br /&gt;
&lt;br /&gt;
'''Clear Elastic search cache'''&lt;br /&gt;
&lt;br /&gt;
curl -X DELETE 'http://localhost:9200/_all'&lt;br /&gt;
&lt;br /&gt;
'''Filebeat'''&lt;br /&gt;
&lt;br /&gt;
sudo rm data/registry&lt;br /&gt;
&lt;br /&gt;
sudo ./filebeat -e -c filebeat.yml -d &amp;quot;publish&amp;quot;&lt;br /&gt;
&lt;br /&gt;
'''Logstash'''&lt;br /&gt;
&lt;br /&gt;
bin/logstash -f expertiza-logstash.conf --config.reload.automatic&lt;br /&gt;
&lt;br /&gt;
'''Kibana'''&lt;br /&gt;
&lt;br /&gt;
bin/kibana&lt;br /&gt;
&lt;br /&gt;
===Kibana Interface===&lt;br /&gt;
&lt;br /&gt;
Success message in Kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_success_msg.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Exception in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_exception.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Tracing error in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_tracing_error.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Search records using request ID in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_req_id.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Searching records using unity id in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_using_unityid.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124972</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124972"/>
		<updated>2019-05-07T20:11:49Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Errbit has been set-up, replacing the already existing Airbrake API to serve several purposes like :&lt;br /&gt;
*Errbit is a much more powerful monitoring tool&lt;br /&gt;
*Errbit is Airbrake API compliant&lt;br /&gt;
*Store unresolved errors indefinitely without any extra cost.&lt;br /&gt;
&lt;br /&gt;
==The Steps taken for the setup==&lt;br /&gt;
There were several steps taken to set-up Errbit for Expertiza and schedule it to automatically pull changed from its forked branch and deploy:&lt;br /&gt;
&lt;br /&gt;
'''Setup Heroku'''&lt;br /&gt;
*Made an account with email: and password:&lt;br /&gt;
*&lt;br /&gt;
&lt;br /&gt;
'''Setup Errbit'''&lt;br /&gt;
*Fork Errbit&lt;br /&gt;
*Make changes to login using own creds&lt;br /&gt;
*Make an app on Errbit&lt;br /&gt;
*Copy it's configuration and place it in Expertiza&lt;br /&gt;
&lt;br /&gt;
'''Set up Cron job to regularly pull changes from Forked repository and deploy on Heroku.&lt;br /&gt;
==Log files==&lt;br /&gt;
For different log levels, log messages are written in different files named expertiza_&amp;lt;log_level&amp;gt;.log&lt;br /&gt;
&lt;br /&gt;
Currently, expertiza provides the capability of writing logs into 5 different custom log files.&lt;br /&gt;
&lt;br /&gt;
For eg, &lt;br /&gt;
&lt;br /&gt;
*expertiza_info.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_warn.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_error.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_fatal.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_debug.log&lt;br /&gt;
&lt;br /&gt;
Apart from above files, &amp;lt;environment&amp;gt;.log file is used for logging messages which could not be logged by ExpertizaLogger, like, page load messages or certain load time exceptions.&lt;br /&gt;
&lt;br /&gt;
Since Rails logger provides writing into a specific log file, to restrict least file switch, ExpertizaLogger holds different log level loggers in separate instance variables. A new logger instance is created and assigned whenever Rails removes the link to manage memory consumption.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
===ExpertizaLogger===&lt;br /&gt;
&lt;br /&gt;
This class provides the logger needed for logging messages for different log levels.&lt;br /&gt;
It provides 5 different static methods namely '''info''', '''warn''', '''error''', '''fatal''' and '''debug''' which could be called as follows:&lt;br /&gt;
&lt;br /&gt;
'''ExpertizaLogger.info ''message'''''&lt;br /&gt;
&lt;br /&gt;
where ''message'' could be an instance of '''LoggerMessage''' or a string.&lt;br /&gt;
&lt;br /&gt;
===Custom LoggerMessage===&lt;br /&gt;
&lt;br /&gt;
A LoggerMessage instance could be created as follows:&lt;br /&gt;
&lt;br /&gt;
'''LoggerMessage.new(&amp;lt;controller_name&amp;gt;, &amp;lt;user_id&amp;gt;, &amp;lt;message&amp;gt;, &amp;lt;request object&amp;gt;)'''&lt;br /&gt;
&lt;br /&gt;
Fourth parameter i.e &amp;lt;request object&amp;gt; is an optional parameter. &lt;br /&gt;
&lt;br /&gt;
Whenever a request is made, the request object is injected into the controller and is available in the controller as &amp;quot;request&amp;quot;.&lt;br /&gt;
Similarly, &amp;lt;controller_name&amp;gt; is available in &amp;quot;controller_name&amp;quot; inside controller. For other trigger points, file name could be passed as a string.&lt;br /&gt;
&lt;br /&gt;
Since the request object holds the ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'', it is used to capture and log both into the log message.&lt;br /&gt;
&lt;br /&gt;
===ExpertizaLogFormatter===&lt;br /&gt;
&lt;br /&gt;
It captures the message and determines if the message is an instance of LoggerMessage or not. Based on that, it creates a message by populating message placeholders as below:&lt;br /&gt;
&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
&lt;br /&gt;
All the exceptions are preprocessed to remove newline characters so that it could fit in a single line as a message.&lt;br /&gt;
&lt;br /&gt;
All the messages that are not logged by ExpertizaLogger, there is a separate logger definition provided in config/environments/&amp;lt;environment&amp;gt;.rb as:&lt;br /&gt;
&lt;br /&gt;
  config.log_formatter = proc do |s, ts, pg, msg|&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
===Environment config===&lt;br /&gt;
config.log_tags = [ :remote_ip, :uuid ]&lt;br /&gt;
&lt;br /&gt;
These config.log_tags entries make sure that &amp;lt;origin_ip&amp;gt; and &amp;lt;request_id&amp;gt; are prepended to messages. These are for messages which are not logged by ExpertizaLogger but by the Rails default logger.&lt;br /&gt;
These messages go in &amp;lt;environment&amp;gt;.log file.&lt;br /&gt;
&lt;br /&gt;
==Restrictions==&lt;br /&gt;
The request object is not available beyond the controllers. Hence, ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'' remains uncaptured if messages are logged from somewhere other than controllers.&lt;br /&gt;
&lt;br /&gt;
==Visualization through ELK stack==&lt;br /&gt;
===Configuration===&lt;br /&gt;
&lt;br /&gt;
Filebeat (filebeat.yml)&lt;br /&gt;
&lt;br /&gt;
Changes:&lt;br /&gt;
&lt;br /&gt;
- type: log&lt;br /&gt;
&lt;br /&gt;
  # Change to true to enable this prospector configuration.&lt;br /&gt;
  enabled: true&lt;br /&gt;
&lt;br /&gt;
  # Paths that should be crawled and fetched. Glob based paths.&lt;br /&gt;
  paths:&lt;br /&gt;
    - &amp;lt;path to log files&amp;gt;*.log&lt;br /&gt;
&lt;br /&gt;
output.logstash:&lt;br /&gt;
  # The Logstash hosts&lt;br /&gt;
  hosts: [&amp;quot;&amp;lt;ip&amp;gt;:&amp;lt;5044:port of logstash&amp;gt;&amp;quot;]&lt;br /&gt;
&lt;br /&gt;
Filebeat sends all log files to logstash.&lt;br /&gt;
&lt;br /&gt;
Logstash (expertiza-logstash.conf)&lt;br /&gt;
&lt;br /&gt;
   input { &lt;br /&gt;
        beats {&lt;br /&gt;
            port =&amp;gt; &amp;quot;5044&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
   }&lt;br /&gt;
   filter {&lt;br /&gt;
    grok {&lt;br /&gt;
    	match =&amp;gt; { &amp;quot;message&amp;quot; =&amp;gt; &amp;quot;TST=\[%{DATA:timestamp}\] SVT=\[%{DATA:sev}\] PNM=\[%{DATA:pgnm}\] OIP=\[%{DATA:originip}\] RID=\[%{DATA:requestid}\] CTR=\[%{DATA:generatedby}\] UID=\[% &lt;br /&gt;
   {DATA:unityid}\] MSG=\[%{GREEDYDATA:message}\]&amp;quot; }&lt;br /&gt;
    	overwrite =&amp;gt; [ &amp;quot;message&amp;quot;, &amp;quot;timestamp&amp;quot; ]&lt;br /&gt;
  	}&lt;br /&gt;
  	date {&lt;br /&gt;
    	match =&amp;gt; [&amp;quot;timestamp&amp;quot;, &amp;quot;ISO8601&amp;quot;]&lt;br /&gt;
  	}&lt;br /&gt;
  	&lt;br /&gt;
    }&lt;br /&gt;
    output {&lt;br /&gt;
      elasticsearch {&lt;br /&gt;
        hosts =&amp;gt; [ &amp;quot;localhost:9200&amp;quot; ]&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
Logstash reads each line from the log file and parses it based on the template provided in grok match above. It then sends each message entry into Elastic search.&lt;br /&gt;
&lt;br /&gt;
Kibana (config/kibana.yml)&lt;br /&gt;
&lt;br /&gt;
    elasticsearch.url: &amp;quot;http://localhost:9200&amp;quot;&lt;br /&gt;
&lt;br /&gt;
Kibana picks each entry from Elastic search and provides into the web interface.&lt;br /&gt;
&lt;br /&gt;
===Setup===&lt;br /&gt;
ELK stack could be set up to visualize and analyze the messages from the log files.&lt;br /&gt;
&lt;br /&gt;
Once ELK is installed, below commands could be used to run each server:&lt;br /&gt;
&lt;br /&gt;
'''Clear Elastic search cache'''&lt;br /&gt;
&lt;br /&gt;
curl -X DELETE 'http://localhost:9200/_all'&lt;br /&gt;
&lt;br /&gt;
'''Filebeat'''&lt;br /&gt;
&lt;br /&gt;
sudo rm data/registry&lt;br /&gt;
&lt;br /&gt;
sudo ./filebeat -e -c filebeat.yml -d &amp;quot;publish&amp;quot;&lt;br /&gt;
&lt;br /&gt;
'''Logstash'''&lt;br /&gt;
&lt;br /&gt;
bin/logstash -f expertiza-logstash.conf --config.reload.automatic&lt;br /&gt;
&lt;br /&gt;
'''Kibana'''&lt;br /&gt;
&lt;br /&gt;
bin/kibana&lt;br /&gt;
&lt;br /&gt;
===Kibana Interface===&lt;br /&gt;
&lt;br /&gt;
Success message in Kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_success_msg.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Exception in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_exception.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Tracing error in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_tracing_error.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Search records using request ID in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_req_id.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Searching records using unity id in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_using_unityid.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124971</id>
		<title>Independent Study Spring 2019/Errbit</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=Independent_Study_Spring_2019/Errbit&amp;diff=124971"/>
		<updated>2019-05-07T19:59:40Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: Created page with &amp;quot;=Set up an open-source error monitoring tool instead of Airbrake= ==Useful links== [https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]  [https://github.com/err...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;=Set up an open-source error monitoring tool instead of Airbrake=&lt;br /&gt;
==Useful links==&lt;br /&gt;
[https://github.com/expertiza/expertiza/pull/1148 Github Pull Request]&lt;br /&gt;
&lt;br /&gt;
[https://github.com/errbit/errbit Errbit]&lt;br /&gt;
&lt;br /&gt;
==Purpose==&lt;br /&gt;
Logging feature has been added to Expertiza through a custom logging module written uniquely to serve several purposes such as:&lt;br /&gt;
*Tracing application failure&lt;br /&gt;
*Analysing user request flow&lt;br /&gt;
*Managing different logging level&lt;br /&gt;
&lt;br /&gt;
==Message Format==&lt;br /&gt;
All the messages are logged in either of the below formats:&lt;br /&gt;
&lt;br /&gt;
'''TST=[2018-03-10 00:50:18 -0500] SVT=[&amp;lt;''log_level''&amp;gt;] PNM=[&amp;lt;''program_name''&amp;gt;] OIP=[&amp;lt;''origin_ip''&amp;gt;] RID=[&amp;lt;''request_id''&amp;gt;] CTR=[&amp;lt;''controller_name''&amp;gt;] UID=[&amp;lt;''user_id''&amp;gt;] MSG=[''Message'']'''&lt;br /&gt;
&lt;br /&gt;
or&lt;br /&gt;
&lt;br /&gt;
'''TST=[2018-03-10 00:50:18 -0500] SVT=[&amp;lt;''log_level''&amp;gt;] PNM=[&amp;lt;''program_name''&amp;gt;] OIP=[] RID=[] CTR=[&amp;lt;''controller_name''&amp;gt;] UID=[&amp;lt;''user_id''&amp;gt;] MSG=[[''origin_ip''] [''request_id''] ''Message'']'''&lt;br /&gt;
&lt;br /&gt;
Above variation is because when certain messages are logged, ExpertizaLogger is unaware of origin_ip and request_ip and thus it is appended to the message instead of their respective placeholders.&lt;br /&gt;
&lt;br /&gt;
===Meaning of each placeholder===&lt;br /&gt;
'''SVT''' - It denotes the severity level of the log. For eg, if the logging is done by calling logger.info, the severity level is &amp;quot;INFO&amp;quot;.&lt;br /&gt;
&lt;br /&gt;
'''PNM''' - It's the program name and is same as provided by default Rails logger.&lt;br /&gt;
&lt;br /&gt;
'''OIP''' - It denotes the IP address of the system from where the request has been made. &lt;br /&gt;
&lt;br /&gt;
'''RID''' - It's the ID of the request. All subsequent calls made by the client till the actual response is returned will have same request ID. For eg, when a page is first requested, all smaller page template fetched, all method flow will have same request ID. This field can be used to understand how a certain request was served.&lt;br /&gt;
&lt;br /&gt;
'''CTR''' - It is the controller name from where the logging happened.&lt;br /&gt;
&lt;br /&gt;
'''UID''' - It is the unity id/user id of the user making requests. This field could also be used in identifying the cause of an error.&lt;br /&gt;
&lt;br /&gt;
'''Message''' - It is the actual message logged.&lt;br /&gt;
&lt;br /&gt;
==Log files==&lt;br /&gt;
For different log levels, log messages are written in different files named expertiza_&amp;lt;log_level&amp;gt;.log&lt;br /&gt;
&lt;br /&gt;
Currently, expertiza provides the capability of writing logs into 5 different custom log files.&lt;br /&gt;
&lt;br /&gt;
For eg, &lt;br /&gt;
&lt;br /&gt;
*expertiza_info.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_warn.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_error.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_fatal.log&lt;br /&gt;
&lt;br /&gt;
*expertiza_debug.log&lt;br /&gt;
&lt;br /&gt;
Apart from above files, &amp;lt;environment&amp;gt;.log file is used for logging messages which could not be logged by ExpertizaLogger, like, page load messages or certain load time exceptions.&lt;br /&gt;
&lt;br /&gt;
Since Rails logger provides writing into a specific log file, to restrict least file switch, ExpertizaLogger holds different log level loggers in separate instance variables. A new logger instance is created and assigned whenever Rails removes the link to manage memory consumption.&lt;br /&gt;
&lt;br /&gt;
==Components==&lt;br /&gt;
===ExpertizaLogger===&lt;br /&gt;
&lt;br /&gt;
This class provides the logger needed for logging messages for different log levels.&lt;br /&gt;
It provides 5 different static methods namely '''info''', '''warn''', '''error''', '''fatal''' and '''debug''' which could be called as follows:&lt;br /&gt;
&lt;br /&gt;
'''ExpertizaLogger.info ''message'''''&lt;br /&gt;
&lt;br /&gt;
where ''message'' could be an instance of '''LoggerMessage''' or a string.&lt;br /&gt;
&lt;br /&gt;
===Custom LoggerMessage===&lt;br /&gt;
&lt;br /&gt;
A LoggerMessage instance could be created as follows:&lt;br /&gt;
&lt;br /&gt;
'''LoggerMessage.new(&amp;lt;controller_name&amp;gt;, &amp;lt;user_id&amp;gt;, &amp;lt;message&amp;gt;, &amp;lt;request object&amp;gt;)'''&lt;br /&gt;
&lt;br /&gt;
Fourth parameter i.e &amp;lt;request object&amp;gt; is an optional parameter. &lt;br /&gt;
&lt;br /&gt;
Whenever a request is made, the request object is injected into the controller and is available in the controller as &amp;quot;request&amp;quot;.&lt;br /&gt;
Similarly, &amp;lt;controller_name&amp;gt; is available in &amp;quot;controller_name&amp;quot; inside controller. For other trigger points, file name could be passed as a string.&lt;br /&gt;
&lt;br /&gt;
Since the request object holds the ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'', it is used to capture and log both into the log message.&lt;br /&gt;
&lt;br /&gt;
===ExpertizaLogFormatter===&lt;br /&gt;
&lt;br /&gt;
It captures the message and determines if the message is an instance of LoggerMessage or not. Based on that, it creates a message by populating message placeholders as below:&lt;br /&gt;
&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
&lt;br /&gt;
All the exceptions are preprocessed to remove newline characters so that it could fit in a single line as a message.&lt;br /&gt;
&lt;br /&gt;
All the messages that are not logged by ExpertizaLogger, there is a separate logger definition provided in config/environments/&amp;lt;environment&amp;gt;.rb as:&lt;br /&gt;
&lt;br /&gt;
  config.log_formatter = proc do |s, ts, pg, msg|&lt;br /&gt;
    if msg.is_a?(LoggerMessage)&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[#{msg.oip}] RID=[#{msg.req_id}] CTR=[#{msg.generator}] UID=[#{msg.unity_id}] MSG=[#{filter(msg.message)}]\n&amp;quot;&lt;br /&gt;
    else&lt;br /&gt;
      &amp;quot;TST=[#{ts}] SVT=[#{s}] PNM=[#{pg}] OIP=[] RID=[] CTR=[] UID=[] MSG=[#{filter(msg)}]\n&amp;quot;&lt;br /&gt;
    end&lt;br /&gt;
  end&lt;br /&gt;
&lt;br /&gt;
===Environment config===&lt;br /&gt;
config.log_tags = [ :remote_ip, :uuid ]&lt;br /&gt;
&lt;br /&gt;
These config.log_tags entries make sure that &amp;lt;origin_ip&amp;gt; and &amp;lt;request_id&amp;gt; are prepended to messages. These are for messages which are not logged by ExpertizaLogger but by the Rails default logger.&lt;br /&gt;
These messages go in &amp;lt;environment&amp;gt;.log file.&lt;br /&gt;
&lt;br /&gt;
==Restrictions==&lt;br /&gt;
The request object is not available beyond the controllers. Hence, ''&amp;lt;origin_ip&amp;gt;'' and ''&amp;lt;request_id&amp;gt;'' remains uncaptured if messages are logged from somewhere other than controllers.&lt;br /&gt;
&lt;br /&gt;
==Visualization through ELK stack==&lt;br /&gt;
===Configuration===&lt;br /&gt;
&lt;br /&gt;
Filebeat (filebeat.yml)&lt;br /&gt;
&lt;br /&gt;
Changes:&lt;br /&gt;
&lt;br /&gt;
- type: log&lt;br /&gt;
&lt;br /&gt;
  # Change to true to enable this prospector configuration.&lt;br /&gt;
  enabled: true&lt;br /&gt;
&lt;br /&gt;
  # Paths that should be crawled and fetched. Glob based paths.&lt;br /&gt;
  paths:&lt;br /&gt;
    - &amp;lt;path to log files&amp;gt;*.log&lt;br /&gt;
&lt;br /&gt;
output.logstash:&lt;br /&gt;
  # The Logstash hosts&lt;br /&gt;
  hosts: [&amp;quot;&amp;lt;ip&amp;gt;:&amp;lt;5044:port of logstash&amp;gt;&amp;quot;]&lt;br /&gt;
&lt;br /&gt;
Filebeat sends all log files to logstash.&lt;br /&gt;
&lt;br /&gt;
Logstash (expertiza-logstash.conf)&lt;br /&gt;
&lt;br /&gt;
   input { &lt;br /&gt;
        beats {&lt;br /&gt;
            port =&amp;gt; &amp;quot;5044&amp;quot;&lt;br /&gt;
        }&lt;br /&gt;
   }&lt;br /&gt;
   filter {&lt;br /&gt;
    grok {&lt;br /&gt;
    	match =&amp;gt; { &amp;quot;message&amp;quot; =&amp;gt; &amp;quot;TST=\[%{DATA:timestamp}\] SVT=\[%{DATA:sev}\] PNM=\[%{DATA:pgnm}\] OIP=\[%{DATA:originip}\] RID=\[%{DATA:requestid}\] CTR=\[%{DATA:generatedby}\] UID=\[% &lt;br /&gt;
   {DATA:unityid}\] MSG=\[%{GREEDYDATA:message}\]&amp;quot; }&lt;br /&gt;
    	overwrite =&amp;gt; [ &amp;quot;message&amp;quot;, &amp;quot;timestamp&amp;quot; ]&lt;br /&gt;
  	}&lt;br /&gt;
  	date {&lt;br /&gt;
    	match =&amp;gt; [&amp;quot;timestamp&amp;quot;, &amp;quot;ISO8601&amp;quot;]&lt;br /&gt;
  	}&lt;br /&gt;
  	&lt;br /&gt;
    }&lt;br /&gt;
    output {&lt;br /&gt;
      elasticsearch {&lt;br /&gt;
        hosts =&amp;gt; [ &amp;quot;localhost:9200&amp;quot; ]&lt;br /&gt;
      }&lt;br /&gt;
    }&lt;br /&gt;
&lt;br /&gt;
Logstash reads each line from the log file and parses it based on the template provided in grok match above. It then sends each message entry into Elastic search.&lt;br /&gt;
&lt;br /&gt;
Kibana (config/kibana.yml)&lt;br /&gt;
&lt;br /&gt;
    elasticsearch.url: &amp;quot;http://localhost:9200&amp;quot;&lt;br /&gt;
&lt;br /&gt;
Kibana picks each entry from Elastic search and provides into the web interface.&lt;br /&gt;
&lt;br /&gt;
===Setup===&lt;br /&gt;
ELK stack could be set up to visualize and analyze the messages from the log files.&lt;br /&gt;
&lt;br /&gt;
Once ELK is installed, below commands could be used to run each server:&lt;br /&gt;
&lt;br /&gt;
'''Clear Elastic search cache'''&lt;br /&gt;
&lt;br /&gt;
curl -X DELETE 'http://localhost:9200/_all'&lt;br /&gt;
&lt;br /&gt;
'''Filebeat'''&lt;br /&gt;
&lt;br /&gt;
sudo rm data/registry&lt;br /&gt;
&lt;br /&gt;
sudo ./filebeat -e -c filebeat.yml -d &amp;quot;publish&amp;quot;&lt;br /&gt;
&lt;br /&gt;
'''Logstash'''&lt;br /&gt;
&lt;br /&gt;
bin/logstash -f expertiza-logstash.conf --config.reload.automatic&lt;br /&gt;
&lt;br /&gt;
'''Kibana'''&lt;br /&gt;
&lt;br /&gt;
bin/kibana&lt;br /&gt;
&lt;br /&gt;
===Kibana Interface===&lt;br /&gt;
&lt;br /&gt;
Success message in Kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_success_msg.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Exception in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_exception.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Tracing error in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_tracing_error.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Search records using request ID in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_req_id.png|frame|upright|center]]&lt;br /&gt;
&lt;br /&gt;
Searching records using unity id in kibana&lt;br /&gt;
&lt;br /&gt;
[[File:kibana_search_using_unityid.png|frame|upright|center]]&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=User:Psingh25&amp;diff=124860</id>
		<title>User:Psingh25</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=User:Psingh25&amp;diff=124860"/>
		<updated>2019-05-05T19:41:06Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;h1&amp;gt; Independent Study Wiki &amp;lt;/h1&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=User:Psingh25&amp;diff=124859</id>
		<title>User:Psingh25</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=User:Psingh25&amp;diff=124859"/>
		<updated>2019-05-05T19:40:54Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: Created page with &amp;quot;&amp;lt;h1&amp;gt; Independent Study Wiki &amp;lt;h1/&amp;gt;&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;&amp;lt;h1&amp;gt; Independent Study Wiki &amp;lt;h1/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120846</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120846"/>
		<updated>2018-11-23T22:56:00Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== For reviewers ==&lt;br /&gt;
&lt;br /&gt;
Please go through the following wiki page first, since this project is a continuation of [http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo this] one.&lt;br /&gt;
&lt;br /&gt;
== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Verifying Build ==&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
=== What we've done ===&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
=== Proposed Design ===&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed and to-be changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120845</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120845"/>
		<updated>2018-11-23T22:54:19Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== For reviewers ==&lt;br /&gt;
&lt;br /&gt;
Please go through the following wiki page first, since this project is in continuation with [http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo this] previous one.&lt;br /&gt;
&lt;br /&gt;
== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Verifying Build ==&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
=== What we've done ===&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
=== Proposed Design ===&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed and to-be changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120033</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120033"/>
		<updated>2018-11-14T04:16:07Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* What we've done */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Verifying Build ==&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
=== What we've done ===&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
=== Proposed Design ===&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed and to-be changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120032</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120032"/>
		<updated>2018-11-14T04:15:51Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Files we've changed */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Verifying Build ==&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
=== Proposed Design ===&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed and to-be changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120031</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120031"/>
		<updated>2018-11-14T04:15:01Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Proposed Design */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Verifying Build ==&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
=== Proposed Design ===&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120030</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120030"/>
		<updated>2018-11-14T04:14:49Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Verifying Build */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Verifying Build ==&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120029</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120029"/>
		<updated>2018-11-14T04:14:36Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Building Servo */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
== Building Servo ==&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120028</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120028"/>
		<updated>2018-11-14T04:14:02Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Files we've changed */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120027</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120027"/>
		<updated>2018-11-14T04:13:44Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Files we've changed */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120026</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120026"/>
		<updated>2018-11-14T04:12:05Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* What you've done */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120025</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120025"/>
		<updated>2018-11-14T04:10:37Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Before you get started */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before we get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What you've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120022</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120022"/>
		<updated>2018-11-14T04:09:15Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* What we've planned to do */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What you've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== Proposed Design ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120013</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120013"/>
		<updated>2018-11-14T04:05:22Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What you've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== What we've planned to do ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
2. OffscreenCanvas.rs&amp;lt;br/&amp;gt;&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl &amp;lt;br/&amp;gt;&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs &amp;lt;br/&amp;gt;&lt;br /&gt;
5. resources/prefs.json &amp;lt;br/&amp;gt;&lt;br /&gt;
6. tests/wpt/include.ini &amp;lt;br/&amp;gt;&lt;br /&gt;
7. ___dir___.ini &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120010</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=120010"/>
		<updated>2018-11-14T04:04:16Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: &lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Problem Statement: == &lt;br /&gt;
&lt;br /&gt;
This document describes the final project of CSC 517 course, that involves merging a few changes into&lt;br /&gt;
servo, a parallel web browser engine developed by Mozilla. This project builds upon the previous&lt;br /&gt;
project under CSC, which was also to merge a few changes into servo. For further a detailed&lt;br /&gt;
information regarding the previous project, please visit:&lt;br /&gt;
http://wiki.expertiza.ncsu.edu/index.php/CSC517_OffScreenCanvas_Servo.&lt;br /&gt;
&lt;br /&gt;
OffscreenCanvas API is an API which enables the rendering of canvas elements outside the current&lt;br /&gt;
thread of browser engine or webpage execution. OffscreenCanvas is exactly similar to HTML Canvas,&lt;br /&gt;
except the fact that it does not have access to DOM and window elements, and it is rendered on a&lt;br /&gt;
thread completely independent of the main web-page execution. Our task is to implement two&lt;br /&gt;
interfaces, OffscreenCanvas &amp;amp; OffscreenCanvasContextRendering2D, which would enable this&lt;br /&gt;
functionality. Then, if the changes made by us are successfully built, the next task is to enable&lt;br /&gt;
automated tests to check for the accuracy of the code. Finally, we’ll test our code by enabling the blob&lt;br /&gt;
API.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What you've done ==&lt;br /&gt;
&lt;br /&gt;
As a part of the third project, we’ve already done with the implementation of OffscreenCanvas&lt;br /&gt;
interface. We’ve made the corresponding implementation of the webidl file using a rust file, and have&lt;br /&gt;
also enabled and passed the automated tests. We’ve also made the interface for&lt;br /&gt;
OffscreenCanvasContextRendering2D.&lt;br /&gt;
&lt;br /&gt;
== What we've planned to do ==&lt;br /&gt;
&lt;br /&gt;
As a part of the fourth project, we’ve planned to first make an implementation for the&lt;br /&gt;
OffscreenCanvasContextRendering2D file that we’ve created. This the the file which would perform all&lt;br /&gt;
the rendering in the back-end. Since OffscreenCanvas is very similar to HTML canvas, we’ll first copy&lt;br /&gt;
the code from HTMLCanvasContextRendering2D, and paste it into our implementation. We would&lt;br /&gt;
then filter out the code which is not a part of the OffscreenCanvasContextRendering2D, and then add&lt;br /&gt;
the functionalities that should be present. Finally, we would implement the blob API, which would&lt;br /&gt;
enable us to test the contents of the canvas. Then, similarly, we would support webgl contexts, in a&lt;br /&gt;
manner similar to the 2D context, by sharing relevant code between&lt;br /&gt;
OffscreenCanvasRenderingContext2D and WebGLRenderingContext.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
== Files we've changed ==&lt;br /&gt;
&lt;br /&gt;
1. OffscreenCanvas.webidl&lt;br /&gt;
2. OffscreenCanvas.rs&lt;br /&gt;
3. OffscreenCanvasContextRendering2D.webidl&lt;br /&gt;
4. OffscreenCanvasCOntextRendering2D.rs&lt;br /&gt;
5. resources/prefs.json&lt;br /&gt;
6. tests/wpt/include.ini&lt;br /&gt;
7. ___dir___.ini&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=119949</id>
		<title>CSC517 OffScreenCanvasContext2D</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvasContext2D&amp;diff=119949"/>
		<updated>2018-11-14T02:56:13Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: Created page with &amp;quot;== About Servo: ==  Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse...&amp;quot;&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Scope: == &lt;br /&gt;
&lt;br /&gt;
The scope of the project included:&lt;br /&gt;
&lt;br /&gt;
* Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.&lt;br /&gt;
&lt;br /&gt;
* Implementing the OffscreenCanvas Constructor [https://html.spec.whatwg.org/multipage/scripting.html#dom-offscreencanvas] that creates a new canvas.&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119391</id>
		<title>CSC517 OffScreenCanvas Servo</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119391"/>
		<updated>2018-11-11T01:38:20Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Under the hood */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Scope: == &lt;br /&gt;
&lt;br /&gt;
The scope of the project included:&lt;br /&gt;
&lt;br /&gt;
* Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.&lt;br /&gt;
&lt;br /&gt;
* Implementing the OffscreenCanvas Constructor [https://html.spec.whatwg.org/multipage/scripting.html#dom-offscreencanvas] that creates a new canvas.&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we did ==&lt;br /&gt;
&lt;br /&gt;
=== Overview ===&lt;br /&gt;
* Our task was to implement the functionality of OffscreenCanvas. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Now, since OffscreenCanvas objects are declared and used in JavaScript, but the rendering happens outside the domain of JavaScript, we would need two different objects, one to interact with JavaScript, and the other to handle the rendering, independent of JavaScript.&amp;lt;br/&amp;gt;&lt;br /&gt;
* The object to interact with JavaScript is OffscreenCanvas, whereas the object which handles rendering is OffscreenCanvasRenderingContext2D.&amp;lt;br/&amp;gt;&lt;br /&gt;
* To implement a functionality, first we created the webIDL files, which contains interfaces of the functionalities we need to implement.&amp;lt;br/&amp;gt;&lt;br /&gt;
* After creating the interfaces, the next step was to implement them. The implementation of the webIDL files is written in the rust file (.rs) with the same name. (For example, OffscreenCanvas.webidl -&amp;gt; offscreencanvas.rs)&amp;lt;br/&amp;gt;&lt;br /&gt;
* The webIDL files contains the constructor as well as all the methods which were supposed to be implemented as specified in the webIDL files. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Testing the implemented code is discussed in further sections.&lt;br /&gt;
&lt;br /&gt;
=== Code Flow ===&lt;br /&gt;
[[File:Workflow2108.png]]&lt;br /&gt;
&lt;br /&gt;
=== Under the hood ===&lt;br /&gt;
* '''OffscreenCanvas.webidl:''' This is an interface, which defines what the implementation of the OffscreenCanvas should contain. As it directly interacts with JavaScript, hence it should have a constructor, with two arguments height and width, just like a regular HTMLCanvas element. The code for the same is shown in the implementation. Also, it contains the ''getContext'' method, which specifies the type of context: 2d, webgl or webgl2. &amp;lt;br/&amp;gt;&lt;br /&gt;
* '''OffscreenCanvasRenderingContext2D.webidl:''' This is also an interface file, which defines what the implementation of OffscreenCanvasRenderingContext2D should look like. As it does not interacts directly with javascript, but interacts with the OffscreenCanvas object that we created, it contains a back reference to the same. It also defines the functionalities which its implementation class should follow.&lt;br /&gt;
* '''offscreencanvas.rs:''' This file is responsible for implementing OffscreenCanvas.webidl. It has a constructor, which is implemented as per the requirements of the webIDL, posted in the section below (implementation). When a new instance of offscreencanvas is created, it calls the constructor, which in turn calls the new method in the interface,\ which ultimately calls the new method defined in this file. The arguments of the constructor, namely height, width and (weak reference) options, are stored in the new object which is created. It also contains a ''reflector'' object, which tells the JavaScript garbage collector to ignore the canvas object while clearing memory. The implementation for the method ''getContext()'', returns a weak reference to the OffscreenCanvasRenderingContext2d, which is responsible to perform all the tasks in the backend.&lt;br /&gt;
* '''offscreenrenderingcontext2d.rs:''' : This file contains the implementation for OffscreenCanvasRenderingContext2D. Since it does not interact directly with JavaScript, neither does it have a constructor, nor does it have a reflector object. The functionalities mentioned in the interface for this file have to be implemented here. But that is beyond the scope of our current project. As of now, this file only contains the code to help successfully build an offscreencanvas object. The functionalities of this file are likely to be implemented in our subsequent project.&lt;br /&gt;
&lt;br /&gt;
== Implementation ==&lt;br /&gt;
&lt;br /&gt;
=== NOTE ===&lt;br /&gt;
The elements of the code added here has been explained in detail in the section: What we did -&amp;gt; under the hood.&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvas.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
typedef (OffscreenCanvasRenderingContext2D or WebGLRenderingContext or WebGL2RenderingContext) OffscreenRenderingContext;&lt;br /&gt;
&lt;br /&gt;
dictionary ImageEncodeOptions {&lt;br /&gt;
  DOMString type = &amp;quot;image/png&amp;quot;;&lt;br /&gt;
  unrestricted double quality = 1.0;&lt;br /&gt;
};&lt;br /&gt;
&lt;br /&gt;
enum OffscreenRenderingContextId { &amp;quot;2d&amp;quot;, &amp;quot;webgl&amp;quot;, &amp;quot;webgl2&amp;quot; };&lt;br /&gt;
&lt;br /&gt;
[Constructor([EnforceRange] unsigned long long width, [EnforceRange] unsigned long long height), Exposed=(Window,Worker), Transferable]&lt;br /&gt;
interface OffscreenCanvas : EventTarget {&lt;br /&gt;
  attribute [EnforceRange] unsigned long long width;&lt;br /&gt;
  attribute [EnforceRange] unsigned long long height;&lt;br /&gt;
&lt;br /&gt;
  OffscreenRenderingContext? getContext(OffscreenRenderingContextId contextId, optional any options = null);&lt;br /&gt;
  ImageBitmap transferToImageBitmap();&lt;br /&gt;
  Promise&amp;lt;Blob&amp;gt; convertToBlob(optional ImageEncodeOptions options);&lt;br /&gt;
};&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvasRenderingContext2D.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[Exposed=Window]&lt;br /&gt;
interface CanvasRenderingContext2D {&lt;br /&gt;
  // back-reference to the canvas&lt;br /&gt;
  readonly attribute HTMLCanvasElement canvas;&lt;br /&gt;
};&lt;br /&gt;
CanvasRenderingContext2D implements CanvasState;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTransform;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasCompositing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageSmoothing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFillStrokeStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasShadowStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFilters;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasRect;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawPath;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasUserInterface;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasText;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawImage;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageData;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPathDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTextDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPath;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvasrenderingcontext2d.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvasRenderingContext2D{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     canvas: Option&amp;lt;Dom&amp;lt;OffscreenCanvas&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasRenderingContext2D {&lt;br /&gt;
     pub fn new_inherited(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; OffscreenCanvasRenderingContext2D {&lt;br /&gt;
         OffscreenCanvasRenderingContext2D {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             canvas: canvas.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvasRenderingContext2D::new_inherited(canvas)), OffscreenCanvasRenderingContext2DWrap)&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvas.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
pub enum OffscreenRenderingContext {&lt;br /&gt;
     Context2D(Dom&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;),&lt;br /&gt;
     WebGL(Dom&amp;lt;WebGLRenderingContext&amp;gt;),&lt;br /&gt;
     WebGL2(Dom&amp;lt;WebGL2RenderingContext&amp;gt;),&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 #[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvas{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     height: u64,&lt;br /&gt;
     width: u64,&lt;br /&gt;
     context: DomRefCell&amp;lt;Option&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt;,&lt;br /&gt;
     placeholder: Option&amp;lt;Dom&amp;lt;HTMLCanvasElement&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvas{&lt;br /&gt;
     pub fn new_inherited(height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; OffscreenCanvas {&lt;br /&gt;
         OffscreenCanvas {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             height: height,&lt;br /&gt;
             width: width,&lt;br /&gt;
             context: DomRefCell::new(None),&lt;br /&gt;
             placeholder: placeholder.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(global: &amp;amp;GlobalScope, height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvas&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvas::new_inherited(height,width,placeholder)), global, OffscreenCanvasWrap)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn Constructor (global: &amp;amp;GlobalScope, height: u64, width: u64) -&amp;gt; Fallible&amp;lt;DomRoot&amp;lt;OffscreenCanvas&amp;gt;&amp;gt; {&lt;br /&gt;
         //step 1&lt;br /&gt;
         let offscreencanvas = OffscreenCanvas::new(global,height,width,None);&lt;br /&gt;
         //step 2&lt;br /&gt;
&lt;br /&gt;
         if offscreencanvas.context.borrow().is_some() {&lt;br /&gt;
             return Err(Error::InvalidState);&lt;br /&gt;
         }&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.height = height;&lt;br /&gt;
         offscreencanvas.width = width;&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.placeholder = None;&lt;br /&gt;
&lt;br /&gt;
         //step 3&lt;br /&gt;
         Ok(offscreencanvas)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn context(&amp;amp;self) -&amp;gt; Option&amp;lt;Ref&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt; {&lt;br /&gt;
         ref_filter_map::ref_filter_map(self.context.borrow(), |ctx| ctx.as_ref())&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     fn get_or_init_2d_context(&amp;amp;self) -&amp;gt; Option&amp;lt;DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;&amp;gt; {&lt;br /&gt;
         if let Some(ctx) = self.context() {&lt;br /&gt;
             return match *ctx {&lt;br /&gt;
                 OffscreenRenderingContext::Context2D(ref ctx) =&amp;gt; Some(DomRoot::from_ref(ctx)),&lt;br /&gt;
                 _ =&amp;gt; None,&lt;br /&gt;
             };&lt;br /&gt;
         }&lt;br /&gt;
         //let window = window_from_node(self);&lt;br /&gt;
         //let size = self.get_size();&lt;br /&gt;
         let context = OffscreenCanvasRenderingContext2D::new(self);&lt;br /&gt;
         *self.context.borrow_mut() = Some(OffscreenRenderingContext::Context2D(Dom::from_ref(&amp;amp;*context)));&lt;br /&gt;
         Some(context)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasMethods for OffscreenCanvas{&lt;br /&gt;
     #[allow(unsafe_code)]&lt;br /&gt;
     unsafe fn GetContext(&amp;amp;self,cx: *mut JSContext, contextID: DOMString, options: HandleValue) -&amp;gt; Option&amp;lt;OffscreenCanvasRenderingContext2DOrWebGLRenderingContextOrWebGL2RenderingContext&amp;gt; {&lt;br /&gt;
&lt;br /&gt;
        &lt;br /&gt;
             if contextID == &amp;quot;2d&amp;quot;&lt;br /&gt;
             {&lt;br /&gt;
                 self.get_or_init_2d_context();&lt;br /&gt;
             }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
     fn Width(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.width;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetWidth(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.width = value;&lt;br /&gt;
     }&lt;br /&gt;
     fn Height(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.height;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetHeight(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.height = value;&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
 The changes we introduced could be tested using two ways.&lt;br /&gt;
&lt;br /&gt;
* The first and recommended approach is to enable the existing automated tests for the OffScreenCanvas feature. We have enabled this by the following steps:&amp;lt;br&amp;gt;        1. Added the offscreen-canvas directory to tests/wpt/include.ini &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;        2. Added a __dir__.ini file to tests/wpt/metadata/offscreen-canvas which enables the new preference &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;This, followed by updating the expected test results gave us the desired results.&amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* The second approach can be by writing your own test-cases. A sample HTML code to successfully test a rendered OffscreenCanvas is given below:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&amp;quot;testCanvas&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	var testCanvas = document.getElementById(&amp;quot;testCanvas&amp;quot;).getContext(&amp;quot;bitmaprenderer&amp;quot;);&lt;br /&gt;
	var offscreen = new OffscreenCanvas(256,256);&lt;br /&gt;
	var gl = offscreen.getContext('2d');&lt;br /&gt;
	&lt;br /&gt;
	// any custom commands to draw something on the canvas (or leave it as it it for the sake of testing)&lt;br /&gt;
	&lt;br /&gt;
	var bitmapOne = offscreen.transferToImageBitmap();&lt;br /&gt;
	testCanvas.transferImageBitmap(bitmapOne);&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
We have followed the first procedure where we plan to test the rendering of OffScreen canvas with the help of existing test cases already provided to us.&lt;br /&gt;
&lt;br /&gt;
=== Pull Request ===&lt;br /&gt;
&amp;lt;/strong&amp;gt;&lt;br /&gt;
The pull request used to incorporate our changes upstream is available here [https://github.com/servo/servo/pull/22168].&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119390</id>
		<title>CSC517 OffScreenCanvas Servo</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119390"/>
		<updated>2018-11-11T01:32:48Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Overview */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Scope: == &lt;br /&gt;
&lt;br /&gt;
The scope of the project included:&lt;br /&gt;
&lt;br /&gt;
* Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.&lt;br /&gt;
&lt;br /&gt;
* Implementing the OffscreenCanvas Constructor [https://html.spec.whatwg.org/multipage/scripting.html#dom-offscreencanvas] that creates a new canvas.&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we did ==&lt;br /&gt;
&lt;br /&gt;
=== Overview ===&lt;br /&gt;
* Our task was to implement the functionality of OffscreenCanvas. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Now, since OffscreenCanvas objects are declared and used in JavaScript, but the rendering happens outside the domain of JavaScript, we would need two different objects, one to interact with JavaScript, and the other to handle the rendering, independent of JavaScript.&amp;lt;br/&amp;gt;&lt;br /&gt;
* The object to interact with JavaScript is OffscreenCanvas, whereas the object which handles rendering is OffscreenCanvasRenderingContext2D.&amp;lt;br/&amp;gt;&lt;br /&gt;
* To implement a functionality, first we created the webIDL files, which contains interfaces of the functionalities we need to implement.&amp;lt;br/&amp;gt;&lt;br /&gt;
* After creating the interfaces, the next step was to implement them. The implementation of the webIDL files is written in the rust file (.rs) with the same name. (For example, OffscreenCanvas.webidl -&amp;gt; offscreencanvas.rs)&amp;lt;br/&amp;gt;&lt;br /&gt;
* The webIDL files contains the constructor as well as all the methods which were supposed to be implemented as specified in the webIDL files. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Testing the implemented code is discussed in further sections.&lt;br /&gt;
&lt;br /&gt;
=== Code Flow ===&lt;br /&gt;
[[File:Workflow2108.png]]&lt;br /&gt;
&lt;br /&gt;
=== Under the hood ===&lt;br /&gt;
* '''OffscreenCanvas.webidl:''' This is an interface, which defines what the implementation of the OffscreenCanvas should contain. As it directly interacts with JavaScript, hence it should have a constructor, with two arguments height and width, just like a regular HTMLCanvas element. The code for the same is shown in the implementation. Also, it contains the ''getContext'' method, which specifies the type of context: 2d, webgl or webgl2. &amp;lt;br/&amp;gt;&lt;br /&gt;
* '''OffscreenCanvasRenderingContext2D.webidl:''' This is also an interface file, which defines what the implementation of OffscreenCanvasRenderingContext2D should look like. As it does not interacts directly with javascript, but interacts with the OffscreenCanvas object we created previously, it contains a back reference to the same. It also defines the functionalities which its implementation class should follow.&lt;br /&gt;
* '''offscreencanvas.rs:''' This file is responsible for implementing OffscreenCanvas.webidl. It must have a constructor, which is implemented as per the requirements of the webidl, posted in the section below (implementation). When a new instance of offscreencanvas is created, it calls the constructor, which in turn calls the new method, which ultimately calls the new method defined in this file. The arguments of the constructor, namely height, width and (weak reference) options, are stored in the new object which is created. It also contains a ''reflector'' object, which tells the JavaScript garbage collector to ignore the canvas object while clearing memory. It also has the implementation for the method ''getcontext()'', which is returns a weak reference to the OffscreenCanvasRenderingContext2d, which is responsible to perform all the tasks in the backend.&lt;br /&gt;
* '''offscreenrenderingcontext2d.rs:''' : This file contains the implementation for OffscreenCanvasRenderingContext2D. Since it does not interact directly with JavaScript, neither does it has a constructor, nor does it have a reflector object. The various functionalities mentioned in the interface are to be implemented with this file. But as of now, this file only contains the code to help successfully build an offscreencanvas object. The functionalities of this file would be implemented in the next project.&lt;br /&gt;
&lt;br /&gt;
== Implementation ==&lt;br /&gt;
&lt;br /&gt;
=== NOTE ===&lt;br /&gt;
The elements of the code added here has been explained in detail in the section: What we did -&amp;gt; under the hood.&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvas.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
typedef (OffscreenCanvasRenderingContext2D or WebGLRenderingContext or WebGL2RenderingContext) OffscreenRenderingContext;&lt;br /&gt;
&lt;br /&gt;
dictionary ImageEncodeOptions {&lt;br /&gt;
  DOMString type = &amp;quot;image/png&amp;quot;;&lt;br /&gt;
  unrestricted double quality = 1.0;&lt;br /&gt;
};&lt;br /&gt;
&lt;br /&gt;
enum OffscreenRenderingContextId { &amp;quot;2d&amp;quot;, &amp;quot;webgl&amp;quot;, &amp;quot;webgl2&amp;quot; };&lt;br /&gt;
&lt;br /&gt;
[Constructor([EnforceRange] unsigned long long width, [EnforceRange] unsigned long long height), Exposed=(Window,Worker), Transferable]&lt;br /&gt;
interface OffscreenCanvas : EventTarget {&lt;br /&gt;
  attribute [EnforceRange] unsigned long long width;&lt;br /&gt;
  attribute [EnforceRange] unsigned long long height;&lt;br /&gt;
&lt;br /&gt;
  OffscreenRenderingContext? getContext(OffscreenRenderingContextId contextId, optional any options = null);&lt;br /&gt;
  ImageBitmap transferToImageBitmap();&lt;br /&gt;
  Promise&amp;lt;Blob&amp;gt; convertToBlob(optional ImageEncodeOptions options);&lt;br /&gt;
};&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvasRenderingContext2D.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[Exposed=Window]&lt;br /&gt;
interface CanvasRenderingContext2D {&lt;br /&gt;
  // back-reference to the canvas&lt;br /&gt;
  readonly attribute HTMLCanvasElement canvas;&lt;br /&gt;
};&lt;br /&gt;
CanvasRenderingContext2D implements CanvasState;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTransform;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasCompositing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageSmoothing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFillStrokeStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasShadowStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFilters;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasRect;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawPath;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasUserInterface;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasText;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawImage;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageData;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPathDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTextDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPath;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvasrenderingcontext2d.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvasRenderingContext2D{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     canvas: Option&amp;lt;Dom&amp;lt;OffscreenCanvas&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasRenderingContext2D {&lt;br /&gt;
     pub fn new_inherited(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; OffscreenCanvasRenderingContext2D {&lt;br /&gt;
         OffscreenCanvasRenderingContext2D {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             canvas: canvas.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvasRenderingContext2D::new_inherited(canvas)), OffscreenCanvasRenderingContext2DWrap)&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvas.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
pub enum OffscreenRenderingContext {&lt;br /&gt;
     Context2D(Dom&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;),&lt;br /&gt;
     WebGL(Dom&amp;lt;WebGLRenderingContext&amp;gt;),&lt;br /&gt;
     WebGL2(Dom&amp;lt;WebGL2RenderingContext&amp;gt;),&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 #[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvas{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     height: u64,&lt;br /&gt;
     width: u64,&lt;br /&gt;
     context: DomRefCell&amp;lt;Option&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt;,&lt;br /&gt;
     placeholder: Option&amp;lt;Dom&amp;lt;HTMLCanvasElement&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvas{&lt;br /&gt;
     pub fn new_inherited(height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; OffscreenCanvas {&lt;br /&gt;
         OffscreenCanvas {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             height: height,&lt;br /&gt;
             width: width,&lt;br /&gt;
             context: DomRefCell::new(None),&lt;br /&gt;
             placeholder: placeholder.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(global: &amp;amp;GlobalScope, height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvas&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvas::new_inherited(height,width,placeholder)), global, OffscreenCanvasWrap)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn Constructor (global: &amp;amp;GlobalScope, height: u64, width: u64) -&amp;gt; Fallible&amp;lt;DomRoot&amp;lt;OffscreenCanvas&amp;gt;&amp;gt; {&lt;br /&gt;
         //step 1&lt;br /&gt;
         let offscreencanvas = OffscreenCanvas::new(global,height,width,None);&lt;br /&gt;
         //step 2&lt;br /&gt;
&lt;br /&gt;
         if offscreencanvas.context.borrow().is_some() {&lt;br /&gt;
             return Err(Error::InvalidState);&lt;br /&gt;
         }&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.height = height;&lt;br /&gt;
         offscreencanvas.width = width;&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.placeholder = None;&lt;br /&gt;
&lt;br /&gt;
         //step 3&lt;br /&gt;
         Ok(offscreencanvas)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn context(&amp;amp;self) -&amp;gt; Option&amp;lt;Ref&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt; {&lt;br /&gt;
         ref_filter_map::ref_filter_map(self.context.borrow(), |ctx| ctx.as_ref())&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     fn get_or_init_2d_context(&amp;amp;self) -&amp;gt; Option&amp;lt;DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;&amp;gt; {&lt;br /&gt;
         if let Some(ctx) = self.context() {&lt;br /&gt;
             return match *ctx {&lt;br /&gt;
                 OffscreenRenderingContext::Context2D(ref ctx) =&amp;gt; Some(DomRoot::from_ref(ctx)),&lt;br /&gt;
                 _ =&amp;gt; None,&lt;br /&gt;
             };&lt;br /&gt;
         }&lt;br /&gt;
         //let window = window_from_node(self);&lt;br /&gt;
         //let size = self.get_size();&lt;br /&gt;
         let context = OffscreenCanvasRenderingContext2D::new(self);&lt;br /&gt;
         *self.context.borrow_mut() = Some(OffscreenRenderingContext::Context2D(Dom::from_ref(&amp;amp;*context)));&lt;br /&gt;
         Some(context)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasMethods for OffscreenCanvas{&lt;br /&gt;
     #[allow(unsafe_code)]&lt;br /&gt;
     unsafe fn GetContext(&amp;amp;self,cx: *mut JSContext, contextID: DOMString, options: HandleValue) -&amp;gt; Option&amp;lt;OffscreenCanvasRenderingContext2DOrWebGLRenderingContextOrWebGL2RenderingContext&amp;gt; {&lt;br /&gt;
&lt;br /&gt;
        &lt;br /&gt;
             if contextID == &amp;quot;2d&amp;quot;&lt;br /&gt;
             {&lt;br /&gt;
                 self.get_or_init_2d_context();&lt;br /&gt;
             }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
     fn Width(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.width;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetWidth(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.width = value;&lt;br /&gt;
     }&lt;br /&gt;
     fn Height(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.height;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetHeight(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.height = value;&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
 The changes we introduced could be tested using two ways.&lt;br /&gt;
&lt;br /&gt;
* The first and recommended approach is to enable the existing automated tests for the OffScreenCanvas feature. We have enabled this by the following steps:&amp;lt;br&amp;gt;        1. Added the offscreen-canvas directory to tests/wpt/include.ini &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;        2. Added a __dir__.ini file to tests/wpt/metadata/offscreen-canvas which enables the new preference &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;This, followed by updating the expected test results gave us the desired results.&amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* The second approach can be by writing your own test-cases. A sample HTML code to successfully test a rendered OffscreenCanvas is given below:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&amp;quot;testCanvas&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	var testCanvas = document.getElementById(&amp;quot;testCanvas&amp;quot;).getContext(&amp;quot;bitmaprenderer&amp;quot;);&lt;br /&gt;
	var offscreen = new OffscreenCanvas(256,256);&lt;br /&gt;
	var gl = offscreen.getContext('2d');&lt;br /&gt;
	&lt;br /&gt;
	// any custom commands to draw something on the canvas (or leave it as it it for the sake of testing)&lt;br /&gt;
	&lt;br /&gt;
	var bitmapOne = offscreen.transferToImageBitmap();&lt;br /&gt;
	testCanvas.transferImageBitmap(bitmapOne);&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
We have followed the first procedure where we plan to test the rendering of OffScreen canvas with the help of existing test cases already provided to us.&lt;br /&gt;
&lt;br /&gt;
=== Pull Request ===&lt;br /&gt;
&amp;lt;/strong&amp;gt;&lt;br /&gt;
The pull request used to incorporate our changes upstream is available here [https://github.com/servo/servo/pull/22168].&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119389</id>
		<title>CSC517 OffScreenCanvas Servo</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119389"/>
		<updated>2018-11-11T01:30:15Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Test Plan */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Scope: == &lt;br /&gt;
&lt;br /&gt;
The scope of the project included:&lt;br /&gt;
&lt;br /&gt;
* Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.&lt;br /&gt;
&lt;br /&gt;
* Implementing the OffscreenCanvas Constructor [https://html.spec.whatwg.org/multipage/scripting.html#dom-offscreencanvas] that creates a new canvas.&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we did ==&lt;br /&gt;
&lt;br /&gt;
=== Overview ===&lt;br /&gt;
* Our task was to implement the functionality of OffscreenCanvas. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Now, since OffscreenCanvas objects are declared and used in JavaScript, but the rendering happens outside the domain of JavaScript, we would need two different objects, one to interact with JavaScript, and the other to handle the rendering, independent of JavaScript.&amp;lt;br/&amp;gt;&lt;br /&gt;
* The object to interact with JavaScript is OffscreenCanvas, whereas the object which handles rendering is OffscreenCanvasRenderingContext2D.&amp;lt;br/&amp;gt;&lt;br /&gt;
* To implement a functionality, first we made the 'web-idl' files, which contains interfaces of the functionalities we need to implement.&amp;lt;br/&amp;gt;&lt;br /&gt;
* After making the interfaces, the next step is to implement them. The implementation of the web-idl files are written in the rust file (.rs) with the same name. (For example, OffscreenCanvas.webidl -&amp;gt; offscreencanvas.rs)&amp;lt;br/&amp;gt;&lt;br /&gt;
* The webidl files contains the constructor as well as all the methods which were supposed to be implemented as specified in the webidl files. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Testing the implemented code is discussed in further sections.&lt;br /&gt;
&lt;br /&gt;
=== Code Flow ===&lt;br /&gt;
[[File:Workflow2108.png]]&lt;br /&gt;
&lt;br /&gt;
=== Under the hood ===&lt;br /&gt;
* '''OffscreenCanvas.webidl:''' This is an interface, which defines what the implementation of the OffscreenCanvas should contain. As it directly interacts with JavaScript, hence it should have a constructor, with two arguments height and width, just like a regular HTMLCanvas element. The code for the same is shown in the implementation. Also, it contains the ''getContext'' method, which specifies the type of context: 2d, webgl or webgl2. &amp;lt;br/&amp;gt;&lt;br /&gt;
* '''OffscreenCanvasRenderingContext2D.webidl:''' This is also an interface file, which defines what the implementation of OffscreenCanvasRenderingContext2D should look like. As it does not interacts directly with javascript, but interacts with the OffscreenCanvas object we created previously, it contains a back reference to the same. It also defines the functionalities which its implementation class should follow.&lt;br /&gt;
* '''offscreencanvas.rs:''' This file is responsible for implementing OffscreenCanvas.webidl. It must have a constructor, which is implemented as per the requirements of the webidl, posted in the section below (implementation). When a new instance of offscreencanvas is created, it calls the constructor, which in turn calls the new method, which ultimately calls the new method defined in this file. The arguments of the constructor, namely height, width and (weak reference) options, are stored in the new object which is created. It also contains a ''reflector'' object, which tells the JavaScript garbage collector to ignore the canvas object while clearing memory. It also has the implementation for the method ''getcontext()'', which is returns a weak reference to the OffscreenCanvasRenderingContext2d, which is responsible to perform all the tasks in the backend.&lt;br /&gt;
* '''offscreenrenderingcontext2d.rs:''' : This file contains the implementation for OffscreenCanvasRenderingContext2D. Since it does not interact directly with JavaScript, neither does it has a constructor, nor does it have a reflector object. The various functionalities mentioned in the interface are to be implemented with this file. But as of now, this file only contains the code to help successfully build an offscreencanvas object. The functionalities of this file would be implemented in the next project.&lt;br /&gt;
&lt;br /&gt;
== Implementation ==&lt;br /&gt;
&lt;br /&gt;
=== NOTE ===&lt;br /&gt;
The elements of the code added here has been explained in detail in the section: What we did -&amp;gt; under the hood.&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvas.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
typedef (OffscreenCanvasRenderingContext2D or WebGLRenderingContext or WebGL2RenderingContext) OffscreenRenderingContext;&lt;br /&gt;
&lt;br /&gt;
dictionary ImageEncodeOptions {&lt;br /&gt;
  DOMString type = &amp;quot;image/png&amp;quot;;&lt;br /&gt;
  unrestricted double quality = 1.0;&lt;br /&gt;
};&lt;br /&gt;
&lt;br /&gt;
enum OffscreenRenderingContextId { &amp;quot;2d&amp;quot;, &amp;quot;webgl&amp;quot;, &amp;quot;webgl2&amp;quot; };&lt;br /&gt;
&lt;br /&gt;
[Constructor([EnforceRange] unsigned long long width, [EnforceRange] unsigned long long height), Exposed=(Window,Worker), Transferable]&lt;br /&gt;
interface OffscreenCanvas : EventTarget {&lt;br /&gt;
  attribute [EnforceRange] unsigned long long width;&lt;br /&gt;
  attribute [EnforceRange] unsigned long long height;&lt;br /&gt;
&lt;br /&gt;
  OffscreenRenderingContext? getContext(OffscreenRenderingContextId contextId, optional any options = null);&lt;br /&gt;
  ImageBitmap transferToImageBitmap();&lt;br /&gt;
  Promise&amp;lt;Blob&amp;gt; convertToBlob(optional ImageEncodeOptions options);&lt;br /&gt;
};&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvasRenderingContext2D.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[Exposed=Window]&lt;br /&gt;
interface CanvasRenderingContext2D {&lt;br /&gt;
  // back-reference to the canvas&lt;br /&gt;
  readonly attribute HTMLCanvasElement canvas;&lt;br /&gt;
};&lt;br /&gt;
CanvasRenderingContext2D implements CanvasState;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTransform;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasCompositing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageSmoothing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFillStrokeStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasShadowStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFilters;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasRect;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawPath;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasUserInterface;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasText;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawImage;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageData;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPathDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTextDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPath;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvasrenderingcontext2d.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvasRenderingContext2D{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     canvas: Option&amp;lt;Dom&amp;lt;OffscreenCanvas&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasRenderingContext2D {&lt;br /&gt;
     pub fn new_inherited(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; OffscreenCanvasRenderingContext2D {&lt;br /&gt;
         OffscreenCanvasRenderingContext2D {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             canvas: canvas.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvasRenderingContext2D::new_inherited(canvas)), OffscreenCanvasRenderingContext2DWrap)&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvas.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
pub enum OffscreenRenderingContext {&lt;br /&gt;
     Context2D(Dom&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;),&lt;br /&gt;
     WebGL(Dom&amp;lt;WebGLRenderingContext&amp;gt;),&lt;br /&gt;
     WebGL2(Dom&amp;lt;WebGL2RenderingContext&amp;gt;),&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 #[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvas{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     height: u64,&lt;br /&gt;
     width: u64,&lt;br /&gt;
     context: DomRefCell&amp;lt;Option&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt;,&lt;br /&gt;
     placeholder: Option&amp;lt;Dom&amp;lt;HTMLCanvasElement&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvas{&lt;br /&gt;
     pub fn new_inherited(height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; OffscreenCanvas {&lt;br /&gt;
         OffscreenCanvas {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             height: height,&lt;br /&gt;
             width: width,&lt;br /&gt;
             context: DomRefCell::new(None),&lt;br /&gt;
             placeholder: placeholder.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(global: &amp;amp;GlobalScope, height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvas&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvas::new_inherited(height,width,placeholder)), global, OffscreenCanvasWrap)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn Constructor (global: &amp;amp;GlobalScope, height: u64, width: u64) -&amp;gt; Fallible&amp;lt;DomRoot&amp;lt;OffscreenCanvas&amp;gt;&amp;gt; {&lt;br /&gt;
         //step 1&lt;br /&gt;
         let offscreencanvas = OffscreenCanvas::new(global,height,width,None);&lt;br /&gt;
         //step 2&lt;br /&gt;
&lt;br /&gt;
         if offscreencanvas.context.borrow().is_some() {&lt;br /&gt;
             return Err(Error::InvalidState);&lt;br /&gt;
         }&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.height = height;&lt;br /&gt;
         offscreencanvas.width = width;&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.placeholder = None;&lt;br /&gt;
&lt;br /&gt;
         //step 3&lt;br /&gt;
         Ok(offscreencanvas)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn context(&amp;amp;self) -&amp;gt; Option&amp;lt;Ref&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt; {&lt;br /&gt;
         ref_filter_map::ref_filter_map(self.context.borrow(), |ctx| ctx.as_ref())&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     fn get_or_init_2d_context(&amp;amp;self) -&amp;gt; Option&amp;lt;DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;&amp;gt; {&lt;br /&gt;
         if let Some(ctx) = self.context() {&lt;br /&gt;
             return match *ctx {&lt;br /&gt;
                 OffscreenRenderingContext::Context2D(ref ctx) =&amp;gt; Some(DomRoot::from_ref(ctx)),&lt;br /&gt;
                 _ =&amp;gt; None,&lt;br /&gt;
             };&lt;br /&gt;
         }&lt;br /&gt;
         //let window = window_from_node(self);&lt;br /&gt;
         //let size = self.get_size();&lt;br /&gt;
         let context = OffscreenCanvasRenderingContext2D::new(self);&lt;br /&gt;
         *self.context.borrow_mut() = Some(OffscreenRenderingContext::Context2D(Dom::from_ref(&amp;amp;*context)));&lt;br /&gt;
         Some(context)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasMethods for OffscreenCanvas{&lt;br /&gt;
     #[allow(unsafe_code)]&lt;br /&gt;
     unsafe fn GetContext(&amp;amp;self,cx: *mut JSContext, contextID: DOMString, options: HandleValue) -&amp;gt; Option&amp;lt;OffscreenCanvasRenderingContext2DOrWebGLRenderingContextOrWebGL2RenderingContext&amp;gt; {&lt;br /&gt;
&lt;br /&gt;
        &lt;br /&gt;
             if contextID == &amp;quot;2d&amp;quot;&lt;br /&gt;
             {&lt;br /&gt;
                 self.get_or_init_2d_context();&lt;br /&gt;
             }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
     fn Width(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.width;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetWidth(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.width = value;&lt;br /&gt;
     }&lt;br /&gt;
     fn Height(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.height;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetHeight(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.height = value;&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
 The changes we introduced could be tested using two ways.&lt;br /&gt;
&lt;br /&gt;
* The first and recommended approach is to enable the existing automated tests for the OffScreenCanvas feature. We have enabled this by the following steps:&amp;lt;br&amp;gt;        1. Added the offscreen-canvas directory to tests/wpt/include.ini &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;        2. Added a __dir__.ini file to tests/wpt/metadata/offscreen-canvas which enables the new preference &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;This, followed by updating the expected test results gave us the desired results.&amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* The second approach can be by writing your own test-cases. A sample HTML code to successfully test a rendered OffscreenCanvas is given below:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&amp;quot;testCanvas&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	var testCanvas = document.getElementById(&amp;quot;testCanvas&amp;quot;).getContext(&amp;quot;bitmaprenderer&amp;quot;);&lt;br /&gt;
	var offscreen = new OffscreenCanvas(256,256);&lt;br /&gt;
	var gl = offscreen.getContext('2d');&lt;br /&gt;
	&lt;br /&gt;
	// any custom commands to draw something on the canvas (or leave it as it it for the sake of testing)&lt;br /&gt;
	&lt;br /&gt;
	var bitmapOne = offscreen.transferToImageBitmap();&lt;br /&gt;
	testCanvas.transferImageBitmap(bitmapOne);&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
We have followed the first procedure where we plan to test the rendering of OffScreen canvas with the help of existing test cases already provided to us.&lt;br /&gt;
&lt;br /&gt;
=== Pull Request ===&lt;br /&gt;
&amp;lt;/strong&amp;gt;&lt;br /&gt;
The pull request used to incorporate our changes upstream is available here [https://github.com/servo/servo/pull/22168].&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
	<entry>
		<id>https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119388</id>
		<title>CSC517 OffScreenCanvas Servo</title>
		<link rel="alternate" type="text/html" href="https://wiki.expertiza.ncsu.edu/index.php?title=CSC517_OffScreenCanvas_Servo&amp;diff=119388"/>
		<updated>2018-11-11T01:30:05Z</updated>

		<summary type="html">&lt;p&gt;Psingh25: /* Pull Request */&lt;/p&gt;
&lt;hr /&gt;
&lt;div&gt;== About Servo: ==&lt;br /&gt;
&lt;br /&gt;
Servo is a parallel web-engine project under Mozilla, which aims to develop a web engine to better utilize the potential of multiple processing units to parse and display web-pages faster than conventional browser engines. Servo is implemented using Rust programming language, which is similar to C, except for the fact that it is specially tuned for better memory safety and concurrency features.&lt;br /&gt;
&lt;br /&gt;
Servo makes web-page rendering faster by using parallel layout, styling, web-renders, and constellation. Since, when a thread or javascript of a particular section of the webpage fails, it doesn't affect other tabs, browser or even other elements of the same web-page. So, in a way, Rust lets the browser to &amp;quot;fail better&amp;quot; than other browsers.&lt;br /&gt;
&lt;br /&gt;
''Why use rust ?''&lt;br /&gt;
&lt;br /&gt;
Algorithms which deal with multiple threads running in parallel are inherently difficult, due to synchronization, data sharing and other typical issues which arise while designing parallel algorithms. C++ makes this process even harder as it does not have efficient mechanisms to deal with this. So, the idea behind rust and servo is to rewrite C++ (and create rust) and use that to rewrite a browser.&lt;br /&gt;
&lt;br /&gt;
== Before you get started ==&lt;br /&gt;
=== Off Screen Canvas: ===&lt;br /&gt;
&lt;br /&gt;
Canvas is a popular way of drawing all kinds of graphics on the screen and an entry point to the world of WebGL. It can be used to draw shapes, images, run animations, or even display and process video content. It is often used to create beautiful user experiences in media-rich web applications and online games. Because canvas logic and rendering happens on the same thread as user interaction, the (sometimes heavy) computations involved in animations can harm the app’s real and perceived performance.&lt;br /&gt;
&lt;br /&gt;
Until now, canvas drawing capabilities were tied to the &amp;lt;canvas&amp;gt; element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name suggests, decouples the DOM and the Canvas API by moving it off-screen. Due to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two.&lt;br /&gt;
&lt;br /&gt;
===Web workers and Offscreen Canvas===&lt;br /&gt;
&lt;br /&gt;
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down. So, JavaScript could run in the background without affecting the performance of the webpage, independent of other scripts. But, web-workers are treated as external files, which makes it impossible for them to access window object, document object and the parent object. Hence, web-workers can only communicate with the rendering-engine by passing messages.&lt;br /&gt;
''But, how is OffscreenCanvas rendered using web-workers?:'' Suppose the task is to render an image in the canvas. The rendering engine creates a web-worker, and sends it the image data that it needs to process. The web-worker does the required processing, and returns the resultant image back to the rendering-engine. In this way, an image is rendered using an entirely independent process from the webpage.&lt;br /&gt;
&lt;br /&gt;
=== Web IDL ===&lt;br /&gt;
Web IDL is an interface definition language that can be used to describe interfaces that are intended to be implemented in web browsers. It is an [[IDL specification language|IDL]] variant with:&lt;br /&gt;
&lt;br /&gt;
* A number of features that allow one to more easily describe the behavior of common script objects in a web context.&lt;br /&gt;
&lt;br /&gt;
* A mapping of how interfaces described with Web IDL correspond to language constructs within an [[ECMAScript]] execution environment.&lt;br /&gt;
&lt;br /&gt;
== Scope: == &lt;br /&gt;
&lt;br /&gt;
The scope of the project included:&lt;br /&gt;
&lt;br /&gt;
* Creating the OffscreenCanvas and OffscreenCanvasRenderingContext2d interfaces with stub method implementations.&lt;br /&gt;
&lt;br /&gt;
* Implementing the OffscreenCanvas Constructor [https://html.spec.whatwg.org/multipage/scripting.html#dom-offscreencanvas] that creates a new canvas.&lt;br /&gt;
&lt;br /&gt;
== Getting Started ==&lt;br /&gt;
&lt;br /&gt;
=== Building Servo ===&lt;br /&gt;
* Testing servo requires it to build it locally, or using a cloud service like [http://janitor.technology Janitor]. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Building servo locally would take approximately 30mins - 1 hour depending upon your computer. &amp;lt;br/&amp;gt;&lt;br /&gt;
* For further steps regarding building servo locally, please visit [https://github.com/servo/servo this]. &amp;lt;br/&amp;gt;&lt;br /&gt;
&lt;br /&gt;
=== Verifying Build ===&lt;br /&gt;
* We can verify whether servo has been built by running the following command: ./mach run http://www.google.com &amp;lt;br/&amp;gt;&lt;br /&gt;
* This command will render the homepage of google in a new browser instance of servo. If this executes correctly, then the build is fine. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Specific functionalities could be tested by writing a custom html file and then running it the similar way. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Note: the following command won't work if you're on Janitor.&lt;br /&gt;
&lt;br /&gt;
== What we did ==&lt;br /&gt;
&lt;br /&gt;
=== Overview ===&lt;br /&gt;
* Our task was to implement the functionality of OffscreenCanvas. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Now, since OffscreenCanvas objects are declared and used in JavaScript, but the rendering happens outside the domain of JavaScript, we would need two different objects, one to interact with JavaScript, and the other to handle the rendering, independent of JavaScript.&amp;lt;br/&amp;gt;&lt;br /&gt;
* The object to interact with JavaScript is OffscreenCanvas, whereas the object which handles rendering is OffscreenCanvasRenderingContext2D.&amp;lt;br/&amp;gt;&lt;br /&gt;
* To implement a functionality, first we made the 'web-idl' files, which contains interfaces of the functionalities we need to implement.&amp;lt;br/&amp;gt;&lt;br /&gt;
* After making the interfaces, the next step is to implement them. The implementation of the web-idl files are written in the rust file (.rs) with the same name. (For example, OffscreenCanvas.webidl -&amp;gt; offscreencanvas.rs)&amp;lt;br/&amp;gt;&lt;br /&gt;
* The webidl files contains the constructor as well as all the methods which were supposed to be implemented as specified in the webidl files. &amp;lt;br/&amp;gt;&lt;br /&gt;
* Testing the implemented code is discussed in further sections.&lt;br /&gt;
&lt;br /&gt;
=== Code Flow ===&lt;br /&gt;
[[File:Workflow2108.png]]&lt;br /&gt;
&lt;br /&gt;
=== Under the hood ===&lt;br /&gt;
* '''OffscreenCanvas.webidl:''' This is an interface, which defines what the implementation of the OffscreenCanvas should contain. As it directly interacts with JavaScript, hence it should have a constructor, with two arguments height and width, just like a regular HTMLCanvas element. The code for the same is shown in the implementation. Also, it contains the ''getContext'' method, which specifies the type of context: 2d, webgl or webgl2. &amp;lt;br/&amp;gt;&lt;br /&gt;
* '''OffscreenCanvasRenderingContext2D.webidl:''' This is also an interface file, which defines what the implementation of OffscreenCanvasRenderingContext2D should look like. As it does not interacts directly with javascript, but interacts with the OffscreenCanvas object we created previously, it contains a back reference to the same. It also defines the functionalities which its implementation class should follow.&lt;br /&gt;
* '''offscreencanvas.rs:''' This file is responsible for implementing OffscreenCanvas.webidl. It must have a constructor, which is implemented as per the requirements of the webidl, posted in the section below (implementation). When a new instance of offscreencanvas is created, it calls the constructor, which in turn calls the new method, which ultimately calls the new method defined in this file. The arguments of the constructor, namely height, width and (weak reference) options, are stored in the new object which is created. It also contains a ''reflector'' object, which tells the JavaScript garbage collector to ignore the canvas object while clearing memory. It also has the implementation for the method ''getcontext()'', which is returns a weak reference to the OffscreenCanvasRenderingContext2d, which is responsible to perform all the tasks in the backend.&lt;br /&gt;
* '''offscreenrenderingcontext2d.rs:''' : This file contains the implementation for OffscreenCanvasRenderingContext2D. Since it does not interact directly with JavaScript, neither does it has a constructor, nor does it have a reflector object. The various functionalities mentioned in the interface are to be implemented with this file. But as of now, this file only contains the code to help successfully build an offscreencanvas object. The functionalities of this file would be implemented in the next project.&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
 The changes we introduced could be tested using two ways.&lt;br /&gt;
&lt;br /&gt;
* The first and recommended approach is to enable the existing automated tests for the OffScreenCanvas feature. We have enabled this by the following steps:&amp;lt;br&amp;gt;        1. Added the offscreen-canvas directory to tests/wpt/include.ini &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;        2. Added a __dir__.ini file to tests/wpt/metadata/offscreen-canvas which enables the new preference &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;This, followed by updating the expected test results gave us the desired results.&amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* The second approach can be by writing your own test-cases. A sample HTML code to successfully test a rendered OffscreenCanvas is given below:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&amp;quot;testCanvas&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	var testCanvas = document.getElementById(&amp;quot;testCanvas&amp;quot;).getContext(&amp;quot;bitmaprenderer&amp;quot;);&lt;br /&gt;
	var offscreen = new OffscreenCanvas(256,256);&lt;br /&gt;
	var gl = offscreen.getContext('2d');&lt;br /&gt;
	&lt;br /&gt;
	// any custom commands to draw something on the canvas (or leave it as it it for the sake of testing)&lt;br /&gt;
	&lt;br /&gt;
	var bitmapOne = offscreen.transferToImageBitmap();&lt;br /&gt;
	testCanvas.transferImageBitmap(bitmapOne);&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
We have followed the first procedure where we plan to test the rendering of OffScreen canvas with the help of existing test cases already provided to us.&lt;br /&gt;
&lt;br /&gt;
== Implementation ==&lt;br /&gt;
&lt;br /&gt;
=== NOTE ===&lt;br /&gt;
The elements of the code added here has been explained in detail in the section: What we did -&amp;gt; under the hood.&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvas.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
typedef (OffscreenCanvasRenderingContext2D or WebGLRenderingContext or WebGL2RenderingContext) OffscreenRenderingContext;&lt;br /&gt;
&lt;br /&gt;
dictionary ImageEncodeOptions {&lt;br /&gt;
  DOMString type = &amp;quot;image/png&amp;quot;;&lt;br /&gt;
  unrestricted double quality = 1.0;&lt;br /&gt;
};&lt;br /&gt;
&lt;br /&gt;
enum OffscreenRenderingContextId { &amp;quot;2d&amp;quot;, &amp;quot;webgl&amp;quot;, &amp;quot;webgl2&amp;quot; };&lt;br /&gt;
&lt;br /&gt;
[Constructor([EnforceRange] unsigned long long width, [EnforceRange] unsigned long long height), Exposed=(Window,Worker), Transferable]&lt;br /&gt;
interface OffscreenCanvas : EventTarget {&lt;br /&gt;
  attribute [EnforceRange] unsigned long long width;&lt;br /&gt;
  attribute [EnforceRange] unsigned long long height;&lt;br /&gt;
&lt;br /&gt;
  OffscreenRenderingContext? getContext(OffscreenRenderingContextId contextId, optional any options = null);&lt;br /&gt;
  ImageBitmap transferToImageBitmap();&lt;br /&gt;
  Promise&amp;lt;Blob&amp;gt; convertToBlob(optional ImageEncodeOptions options);&lt;br /&gt;
};&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== OffScreenCanvasRenderingContext2D.webidl ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
[Exposed=Window]&lt;br /&gt;
interface CanvasRenderingContext2D {&lt;br /&gt;
  // back-reference to the canvas&lt;br /&gt;
  readonly attribute HTMLCanvasElement canvas;&lt;br /&gt;
};&lt;br /&gt;
CanvasRenderingContext2D implements CanvasState;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTransform;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasCompositing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageSmoothing;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFillStrokeStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasShadowStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasFilters;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasRect;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawPath;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasUserInterface;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasText;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasDrawImage;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasImageData;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPathDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasTextDrawingStyles;&lt;br /&gt;
CanvasRenderingContext2D implements CanvasPath;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvasrenderingcontext2d.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
#[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvasRenderingContext2D{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     canvas: Option&amp;lt;Dom&amp;lt;OffscreenCanvas&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasRenderingContext2D {&lt;br /&gt;
     pub fn new_inherited(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; OffscreenCanvasRenderingContext2D {&lt;br /&gt;
         OffscreenCanvasRenderingContext2D {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             canvas: canvas.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(canvas: Option&amp;lt;&amp;amp;OffscreenCanvas&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvasRenderingContext2D::new_inherited(canvas)), OffscreenCanvasRenderingContext2DWrap)&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
=== offscreencanvas.rs ===&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
pub enum OffscreenRenderingContext {&lt;br /&gt;
     Context2D(Dom&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;),&lt;br /&gt;
     WebGL(Dom&amp;lt;WebGLRenderingContext&amp;gt;),&lt;br /&gt;
     WebGL2(Dom&amp;lt;WebGL2RenderingContext&amp;gt;),&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 #[dom_struct]&lt;br /&gt;
 pub struct OffscreenCanvas{&lt;br /&gt;
     reflector_: Reflector,&lt;br /&gt;
     height: u64,&lt;br /&gt;
     width: u64,&lt;br /&gt;
     context: DomRefCell&amp;lt;Option&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt;,&lt;br /&gt;
     placeholder: Option&amp;lt;Dom&amp;lt;HTMLCanvasElement&amp;gt;&amp;gt;,&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvas{&lt;br /&gt;
     pub fn new_inherited(height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; OffscreenCanvas {&lt;br /&gt;
         OffscreenCanvas {&lt;br /&gt;
             reflector_: Reflector::new(),&lt;br /&gt;
             height: height,&lt;br /&gt;
             width: width,&lt;br /&gt;
             context: DomRefCell::new(None),&lt;br /&gt;
             placeholder: placeholder.map(Dom::from_ref),&lt;br /&gt;
         }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn new(global: &amp;amp;GlobalScope, height: u64, width: u64, placeholder: Option&amp;lt;&amp;amp;HTMLCanvasElement&amp;gt;) -&amp;gt; DomRoot&amp;lt;OffscreenCanvas&amp;gt; {&lt;br /&gt;
         reflect_dom_object(Box::new(OffscreenCanvas::new_inherited(height,width,placeholder)), global, OffscreenCanvasWrap)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn Constructor (global: &amp;amp;GlobalScope, height: u64, width: u64) -&amp;gt; Fallible&amp;lt;DomRoot&amp;lt;OffscreenCanvas&amp;gt;&amp;gt; {&lt;br /&gt;
         //step 1&lt;br /&gt;
         let offscreencanvas = OffscreenCanvas::new(global,height,width,None);&lt;br /&gt;
         //step 2&lt;br /&gt;
&lt;br /&gt;
         if offscreencanvas.context.borrow().is_some() {&lt;br /&gt;
             return Err(Error::InvalidState);&lt;br /&gt;
         }&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.height = height;&lt;br /&gt;
         offscreencanvas.width = width;&lt;br /&gt;
&lt;br /&gt;
         offscreencanvas.placeholder = None;&lt;br /&gt;
&lt;br /&gt;
         //step 3&lt;br /&gt;
         Ok(offscreencanvas)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     pub fn context(&amp;amp;self) -&amp;gt; Option&amp;lt;Ref&amp;lt;OffscreenRenderingContext&amp;gt;&amp;gt; {&lt;br /&gt;
         ref_filter_map::ref_filter_map(self.context.borrow(), |ctx| ctx.as_ref())&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
     fn get_or_init_2d_context(&amp;amp;self) -&amp;gt; Option&amp;lt;DomRoot&amp;lt;OffscreenCanvasRenderingContext2D&amp;gt;&amp;gt; {&lt;br /&gt;
         if let Some(ctx) = self.context() {&lt;br /&gt;
             return match *ctx {&lt;br /&gt;
                 OffscreenRenderingContext::Context2D(ref ctx) =&amp;gt; Some(DomRoot::from_ref(ctx)),&lt;br /&gt;
                 _ =&amp;gt; None,&lt;br /&gt;
             };&lt;br /&gt;
         }&lt;br /&gt;
         //let window = window_from_node(self);&lt;br /&gt;
         //let size = self.get_size();&lt;br /&gt;
         let context = OffscreenCanvasRenderingContext2D::new(self);&lt;br /&gt;
         *self.context.borrow_mut() = Some(OffscreenRenderingContext::Context2D(Dom::from_ref(&amp;amp;*context)));&lt;br /&gt;
         Some(context)&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
 impl OffscreenCanvasMethods for OffscreenCanvas{&lt;br /&gt;
     #[allow(unsafe_code)]&lt;br /&gt;
     unsafe fn GetContext(&amp;amp;self,cx: *mut JSContext, contextID: DOMString, options: HandleValue) -&amp;gt; Option&amp;lt;OffscreenCanvasRenderingContext2DOrWebGLRenderingContextOrWebGL2RenderingContext&amp;gt; {&lt;br /&gt;
&lt;br /&gt;
        &lt;br /&gt;
             if contextID == &amp;quot;2d&amp;quot;&lt;br /&gt;
             {&lt;br /&gt;
                 self.get_or_init_2d_context();&lt;br /&gt;
             }&lt;br /&gt;
     }&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
     fn Width(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.width;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetWidth(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.width = value;&lt;br /&gt;
     }&lt;br /&gt;
     fn Height(&amp;amp;self) -&amp;gt; u64 {&lt;br /&gt;
         return self.height;&lt;br /&gt;
     }&lt;br /&gt;
     fn SetHeight(&amp;amp;self, value: u64) -&amp;gt; () {&lt;br /&gt;
         self.height = value;&lt;br /&gt;
     }&lt;br /&gt;
 }&lt;br /&gt;
&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
&lt;br /&gt;
== Test Plan ==&lt;br /&gt;
&lt;br /&gt;
 The changes we introduced could be tested using two ways.&lt;br /&gt;
&lt;br /&gt;
* The first and recommended approach is to enable the existing automated tests for the OffScreenCanvas feature. We have enabled this by the following steps:&amp;lt;br&amp;gt;        1. Added the offscreen-canvas directory to tests/wpt/include.ini &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;        2. Added a __dir__.ini file to tests/wpt/metadata/offscreen-canvas which enables the new preference &amp;lt;/br&amp;gt;&amp;lt;br&amp;gt;This, followed by updating the expected test results gave us the desired results.&amp;lt;/br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
* The second approach can be by writing your own test-cases. A sample HTML code to successfully test a rendered OffscreenCanvas is given below:&lt;br /&gt;
&lt;br /&gt;
&amp;lt;pre&amp;gt;&lt;br /&gt;
&amp;lt;canvas id=&amp;quot;testCanvas&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;&lt;br /&gt;
&amp;lt;script&amp;gt;&lt;br /&gt;
	var testCanvas = document.getElementById(&amp;quot;testCanvas&amp;quot;).getContext(&amp;quot;bitmaprenderer&amp;quot;);&lt;br /&gt;
	var offscreen = new OffscreenCanvas(256,256);&lt;br /&gt;
	var gl = offscreen.getContext('2d');&lt;br /&gt;
	&lt;br /&gt;
	// any custom commands to draw something on the canvas (or leave it as it it for the sake of testing)&lt;br /&gt;
	&lt;br /&gt;
	var bitmapOne = offscreen.transferToImageBitmap();&lt;br /&gt;
	testCanvas.transferImageBitmap(bitmapOne);&lt;br /&gt;
&amp;lt;/script&amp;gt;&lt;br /&gt;
&amp;lt;/pre&amp;gt;&lt;br /&gt;
We have followed the first procedure where we plan to test the rendering of OffScreen canvas with the help of existing test cases already provided to us.&lt;br /&gt;
&lt;br /&gt;
=== Pull Request ===&lt;br /&gt;
&amp;lt;/strong&amp;gt;&lt;br /&gt;
The pull request used to incorporate our changes upstream is available here [https://github.com/servo/servo/pull/22168].&lt;br /&gt;
&lt;br /&gt;
== References: ==&lt;br /&gt;
&lt;br /&gt;
1. https://research.mozilla.org/servo-engines/ &amp;lt;br/&amp;gt;&lt;br /&gt;
2. https://research.mozilla.org/rust/ &amp;lt;br/&amp;gt;&lt;br /&gt;
3. https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/ &amp;lt;br/&amp;gt;&lt;/div&gt;</summary>
		<author><name>Psingh25</name></author>
	</entry>
</feed>