<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: James Ah Yong</title>
    <description>The latest articles on DEV Community by James Ah Yong (@retrocraft).</description>
    <link>https://dev.to/retrocraft</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F259383%2F3094dafb-c36b-43a5-83b2-a72c91d3e589.png</url>
      <title>DEV Community: James Ah Yong</title>
      <link>https://dev.to/retrocraft</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/retrocraft"/>
    <language>en</language>
    <item>
      <title>Student Council Elections in the Age of COVID</title>
      <dc:creator>James Ah Yong</dc:creator>
      <pubDate>Sun, 24 May 2020 06:01:14 +0000</pubDate>
      <link>https://dev.to/retrocraft/student-council-elections-in-the-age-of-covid-4akh</link>
      <guid>https://dev.to/retrocraft/student-council-elections-in-the-age-of-covid-4akh</guid>
      <description>&lt;p&gt;On May 22, 2020, the 1,600 students of John Fraser Secondary School would have lined up in the atrium to cast their ballots for next year’s Student Activity Council (SAC) executives. In previous years, it was a crowded affair. This year, crowds are illegal.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MZ9cM9ui--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wqxoqawvxkvb1gfd9z6d.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MZ9cM9ui--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/wqxoqawvxkvb1gfd9z6d.png" alt="Fraser Votes website mockup"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Fraser Votes was initially conceived in late 2019 as part of the school’s effort to transition to digital infrastructure. JFSS had already rolled out digital timetables, obsoleting the thousands of printed timetables distributed at the start of every term. We created the system with our values in mind: democracy and student's voice.&lt;/p&gt;

&lt;p&gt;As a novel student-built election management solution, there were challenges. Nevertheless, 44% of the student population successfully cast their digital vote — a 165% year-over-year increase.&lt;/p&gt;

&lt;h2&gt;
  
  
  Technicals
&lt;/h2&gt;

&lt;p&gt;Fraser Votes is a React/Gatsby-based webapp hosted on Google’s &lt;a href="https://firebase.google.com/"&gt;Firebase platform&lt;/a&gt;. Candidate information, voter rolls, and ballots were stored in Firestore. Google’s Canadian northamerica-northeast1 location allowed us to be compliant with local government data location policies.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--n167jRuR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0gn15cxtk139yu7jao5k.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--n167jRuR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/0gn15cxtk139yu7jao5k.png" alt="Vote securely with Fraser Votes"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The most important aspect of every election is ensuring the security of voters. End-to-end PGP encryption was used to ensure data security. Ballots were encrypted in-browser by voters and decrypted in-browser by an administrator. As key-holders are the only people able to read ballots, this proved to be more secure than paper ballots, where multiple students tally votes by hand.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://plausible.io"&gt;Plausible&lt;/a&gt; and &lt;a href="https://sentry.io"&gt;Sentry&lt;/a&gt; were used to monitor the election in real-time. We avoided using Firebase/Google Analytics due to privacy concerns. Plausible reported 1,400 unique visitors over the voting period and 48.3% of those voters casting their ballots.&lt;/p&gt;

&lt;p&gt;Using Sentry for error monitoring proved extremely useful during the voting period. Our team pushed a number of small but significant hotfixes due to reported errors from Sentry.&lt;/p&gt;

&lt;h2&gt;
  
  
  Turnout and Promotion
&lt;/h2&gt;

&lt;p&gt;Our goal was to hear the voice of students. The 2020 SAC election had the highest recorded turnout and it wasn’t even close. Fraser Votes recorded 717 ballots representing 43.8% of the student electorate. For context, the 2019 federal election had 66% voter turnout. However, Mississauga is known for a lack of civic engagement. The last municipal election had a 27% turnout.&lt;/p&gt;

&lt;p&gt;The 2019 SAC election, held on paper, recorded 271 votes (17% turnout). Digital voting enabled 2.6 times as many students to have their voices heard. We achieved our goal and moved the bar for student voting from below the abysmal city trends towards the national civic participation level.&lt;/p&gt;

&lt;p&gt;In a community with data-proven civic apathy, it is imperative to encourage the next generation to vote.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--1SrzX3aC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hgcc6ar7lszzao4gl8mg.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--1SrzX3aC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hgcc6ar7lszzao4gl8mg.png" alt="Sample promotional material"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Leading up to election day, we ran promotional campaigns on social media alongside the candidates and the council. We also had the school administration ask teachers to promote Fraser Votes on their respective online learning pages like Google Classroom and D2L. Instagram (14%) and Google (8%) were the two most common referrers reported to analytics. These numbers should be taken with a grain of salt; much of the promotional material used verbiage like “go to fraservotes.com” leading to a disproportionate amount of non-referred users.&lt;/p&gt;

&lt;p&gt;Unfortunately, some students complained that social media blasting was excessive. A balance must be met next year to encourage voting without turning away potential voters in frustration.&lt;/p&gt;

&lt;h2&gt;
  
  
  Surprises and Next Steps
&lt;/h2&gt;

&lt;p&gt;The deployment of Fraser Votes went smoothly, especially considering that serious development started around six weeks before the election (once we realized COVID lockdowns meant we had to use Fraser Votes).&lt;/p&gt;

&lt;p&gt;A minor issue we encountered was an incompatibility with IE11 resulting in a SyntaxError. This only affected eight users and we notified voters on social media to use other browsers. For the future, legacy browser compatibility could be more heavily considered.&lt;/p&gt;

&lt;p&gt;We also encountered a weird issue with YouTube, where we hosted candidates’ personal statement videos. A minority of the videos were stuck at 144p and would not play in higher quality. This can be solved by reuploading the videos using a different user account but requires further research to identify the root cause for future elections.&lt;/p&gt;

&lt;p&gt;The importance of democratic participation cannot be understated. We are proud to have been able to facilitate an opportunity for students to have their voices heard and experience civic participation. The coronavirus pandemic has led to drastic changes in the way schools operate, in many ways detrimental to students’ learning. But some changes, once in a while, are for good.&lt;/p&gt;

&lt;p&gt;We hope that the progress made with this year’s election is the beginning of a trend towards civic engagement for John Fraser and the community at large.&lt;/p&gt;




&lt;p&gt;Fraser Votes is open-source on GitHub and supported by the generous support of &lt;a href="https://www.risingyouth.ca/"&gt;#RisingYouth&lt;/a&gt;, a project by &lt;a href="https://www.tigweb.org/"&gt;TakingITGlobal&lt;/a&gt; and funded by the &lt;a href="https://www.canada.ca/en/services/youth/canada-service-corps.html"&gt;Canadian government&lt;/a&gt;. If you’d like to use Fraser Votes in your student body election, contact us at &lt;a href="//mailto:hello@fraservotes.com"&gt;hello@fraservotes.com&lt;/a&gt; or on Instagram &lt;a href="https://instagram.com/fraservotes"&gt;@fraservotes&lt;/a&gt;.&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vJ70wriM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-ba8488d21cd8ee1fee097b8410db9deaa41d0ca30b004c0c63de0a479114156f.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/Fraser-Votes"&gt;
        Fraser-Votes
      &lt;/a&gt; / &lt;a href="https://github.com/Fraser-Votes/client"&gt;
        client
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Fraser Votes web app. 
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1&gt;
Fraser Votes&lt;/h1&gt;
&lt;p&gt;&lt;a rel="noopener noreferrer" href="https://github.com/Fraser-Votes/client/workflows/Gatsby%20Build%20and%20Firebase%20Deploy/badge.svg?branch=master"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--y_mjI8zq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/Fraser-Votes/client/workflows/Gatsby%2520Build%2520and%2520Firebase%2520Deploy/badge.svg%3Fbranch%3Dmaster" alt="Gatsby Build and Firebase Deploy"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Web app to facilitate Student Elections. More secure than American voting machines!&lt;/p&gt;
&lt;h3&gt;
Features&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;PGP Encrypted Voting&lt;/li&gt;
&lt;li&gt;Customize electable positions with drag + drop courtesty of react-beautiful-dnd&lt;/li&gt;
&lt;li&gt;Candidate management (add, remove, and edit candidates with ease)&lt;/li&gt;
&lt;li&gt;Custom dashboard with key analytics&lt;/li&gt;
&lt;li&gt;Ballots are counted locally, your private key never touches our servers once!&lt;/li&gt;
&lt;li&gt;Scalable and extensible: Fraser Votes uses Firebase Firestore&lt;/li&gt;
&lt;li&gt;Fully mobile responsive&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/Fraser-Votes/client"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;





&lt;p&gt;I originally published this article on &lt;a href="https://medium.com/@retrocraft"&gt;Medium&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>octograd2020</category>
      <category>education</category>
      <category>student</category>
    </item>
    <item>
      <title>The time I was bored in English</title>
      <dc:creator>James Ah Yong</dc:creator>
      <pubDate>Wed, 20 May 2020 21:19:31 +0000</pubDate>
      <link>https://dev.to/retrocraft/the-time-i-was-bored-in-english-3g4p</link>
      <guid>https://dev.to/retrocraft/the-time-i-was-bored-in-english-3g4p</guid>
      <description>&lt;p&gt;Volunteering Peel is a non-profit student-run organization that connects high school students with community involvement opportunities. We need 40 hours here in Ontario to graduate. For the past decade or so, it's been a place for students to sign up for volunteer events.&lt;/p&gt;

&lt;p&gt;Enter my boredom in AP English class. The site was poorly designed – I'd later learn it hadn't been substantially updated since around 2010 – and not responsive on mobile at all. I was a beginner at React at the time so I thought I'd whip up a quick wireframe for a replacement before I doze off during another lecture.&lt;/p&gt;

&lt;p&gt;Fast-forward a few years and I have a team of my own to maintain the site and add features. It was a learning experience to create the new site, especially considering what kinds of features were requested like WebSockets-based real-time editing of attendance lists.&lt;/p&gt;

&lt;p&gt;The creation of the new site wouldn't've been possible without Github Education Pack tools. Prototyping on AWS or DigitalOcean without having to worry about paying out of a broke high school student's pocket is a lifesaver.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo Link
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://volutneeringpeel.org"&gt;Volunteering Peel&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Link to Code
&lt;/h2&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vJ70wriM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/github-logo-ba8488d21cd8ee1fee097b8410db9deaa41d0ca30b004c0c63de0a479114156f.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/volunteeringpeel"&gt;
        volunteeringpeel
      &lt;/a&gt; / &lt;a href="https://github.com/volunteeringpeel/volunteeringpeel"&gt;
        volunteeringpeel
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Volunteering Peel website
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1&gt;
volunteeringpeel&lt;/h1&gt;
&lt;p&gt;&lt;a href="https://circleci.com/gh/volunteeringpeel/volunteeringpeel/tree/master" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/cf44ff6df40d322b571ac5e6a638cfbde50694c7abb8396b0a9319ff342591fe/68747470733a2f2f636972636c6563692e636f6d2f67682f766f6c756e74656572696e677065656c2f766f6c756e74656572696e677065656c2f747265652f6d61737465722e7376673f7374796c653d737667" alt="CircleCI"&gt;&lt;/a&gt;
&lt;a href="https://david-dm.org/volunteeringpeel/volunteeringpeel" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/f57761b68e2cefc5b8299b0d4099dc2d89ffaabd75bfec6ccfc578aaf76e2f3a/68747470733a2f2f64617669642d646d2e6f72672f766f6c756e74656572696e677065656c2f766f6c756e74656572696e677065656c2f7374617475732e737667" alt="dependencies Status"&gt;&lt;/a&gt;
&lt;a href="https://david-dm.org/volunteeringpeel/volunteeringpeel?type=dev" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/a5c78eeaa0fdbcf2958b49dc26916230045b037210a23158f9771e1a897842c5/68747470733a2f2f64617669642d646d2e6f72672f766f6c756e74656572696e677065656c2f766f6c756e74656572696e677065656c2f6465762d7374617475732e737667" alt="devDependencies Status"&gt;&lt;/a&gt;
&lt;a href="https://waffle.io/volunteeringpeel/volunteeringpeel" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/2c8ac874818b327cd14807817312f84da18ad84d73302a7cdcb55711c620ea0a/68747470733a2f2f62616467652e776166666c652e696f2f766f6c756e74656572696e677065656c2f766f6c756e74656572696e677065656c2e7376673f636f6c756d6e733d616c6c" alt="Waffle.io - Columns and their card count"&gt;&lt;/a&gt;
&lt;a href="https://lgtm.com/projects/g/volunteeringpeel/volunteeringpeel/alerts/" rel="nofollow"&gt;&lt;img src="https://camo.githubusercontent.com/77db4074a19508d7611d2a02b19cc74697e03a24fce34a7444d916b1dc5cb81d/68747470733a2f2f696d672e736869656c64732e696f2f6c67746d2f616c657274732f672f766f6c756e74656572696e677065656c2f766f6c756e74656572696e677065656c2e7376673f6c6f676f3d6c67746d266c6f676f57696474683d3138" alt="Total alerts"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Volunteering Peel Beta site (WIP)&lt;/p&gt;
&lt;p&gt;Redesign of the &lt;a href="http://volunteeringpeel.org" rel="nofollow"&gt;current Volunteering Peel site&lt;/a&gt; with a Node.JS-MySQL-React stack.&lt;/p&gt;
&lt;p&gt;Will be properly documented eventually. Eventually.
For now rely on comments and on the Markdown documents in &lt;code&gt;docs&lt;/code&gt;.&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/volunteeringpeel/volunteeringpeel"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


</description>
      <category>octograd2020</category>
      <category>githubsdp</category>
    </item>
  </channel>
</rss>
