Shaking off the Rust is a series of exercises and projects with the Rust programing language. I've really enjoyed creating this, and the response from readers has exceeded my expectations. 7 posts and counting!


Shaking off the Rust

Sketching out finite state machines is quite time-consuming. This web app speeds up the process with a UI that’s easy and enjoyable to use. I had a lot of fun making this. 

Finite State Machine Designer

To allow users to easily customize their profiles, I implemented drag and droppable UI components.<br/><br/>Upon dropping a component, a request to the server is made where the new arrangement of components is updated and stored. Additionally, users can hide components from their profile.
<br/><br/>
This made for some very complex state management and a lot of finite state machine sketches.

Drag and drop UI components with Persistant Positioning

<div class="page-body"><p id="24d8e88e-f534-4e30-8432-0ba1222b610b" class="">The app allows users to embed links to images, videos, and web pages. Since React does not sanitize URLs, I had to be vigilant about defending against cross-site scripting. <br/><br/>I sanitized user generated URLs by adapting AngularJs's built in URL sanitizer:</p><pre id="df47b787-2661-401e-8641-aa8646982f76" class="code code-wrap"><code>const SAFE_URL_PATTERN = /^(?:(?:https?|mailto|ftp|tel|file|sms):|[^&amp;:/?#]*(?:[/?#]|$))/gi;
const DATA_URL_PATTERN = /^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+\/]+=*$/i;

function _sanitizeUrl(url) {
  url = String(url);
  if (url === &quot;null&quot; || url.length === 0 || url === &quot;about:blank&quot;)
    return &quot;about:blank&quot;;
  if (url.match(SAFE_URL_PATTERN) || url.match(DATA_URL_PATTERN)) return url;

  return `unsafe:${url}`;
}

export default function sanitizeUrl(url = &quot;about:blank&quot;) {
  return _sanitizeUrl(String(url).trim());
}</code></pre><p id="2170b6dc-81db-4dbd-a19a-61f455eb1bfd" class="">To further protect against other cross-site scripting attacks, I used the <code>DOMpurify</code> library on all user data that had a possibility of being interpreted by the browser as code.</p><p id="6e83e906-df53-417b-b31d-517e0e28e012" class="">
</p></div>

Cross-site Scripting Defence

<div class="page-body"><p id="2245a1f5-5272-4792-bed7-c2c1278830cd" class="">The app allows users to upload images. To accomplish this, I created an AWS S3 bucket and used <code>multer</code> to upload the file:</p><p id="35343bb8-a248-4324-852b-34d060fdffaf" class="">
</p><pre id="3c6ad3c3-2e26-4c04-82fa-ff5ea9ce0b87" class="code"><code>import multer from &quot;multer&quot;;

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

router
  .route(&quot;/image/upload&quot;)
  .post(protect, upload.single(&quot;file&quot;), saveImageToTranscript);</code></pre><p id="cdad3471-3d2d-48e9-95da-af38acdb5b3c" class="">
</p><pre id="832c2201-0a38-4326-8f18-9c3cc0ef9b19" class="code"><code>import AWS from &quot;aws-sdk&quot;;

const uploadImage = async (file, imageKey) =&gt; {
  let s3bucket = new AWS.S3({
    accessKeyId: process.env.AWS_Access_Key_Id,
    secretAccessKey: process.env.AWS_Secret_Key,
    region: process.env.AWS_REGION,
  });

  cons params = {
    Bucket: process.env.AWS_BUCKET_NAME,
    Key: imageKey,
    Body: file.buffer,
    ContentType: file.mimetype,
    ACL: &quot;public-read&quot;,
  };

  await s3bucket.upload(params);

};

const storeImage = (imageKey, userId, subjectId) =&gt; {
	const image = await EditableElement.create({
    userId,
    subjectId,
    url: process.env.S3_BUCKET_PATH + file.imageKey
  });

	return image;
}

const saveImageToTranscript = asyncHandler(async (req, res) =&gt; {
	try {
	  const file = req.file;
	  let imageKey = mongoose.Types.ObjectId().toString();
	  await uploadImage(file, imageKey);

		const image = await storeImage(file.imageKey, req.user._id, req.headers.subject)
  
	  await Transcript.updateOne(
	    { _id: req.headers.transcript },
		  { $push: { images: image } }
	  );

	  res.status(201).json(image);
	} catch (err) {
		res.status(400).json(err)
	}
});</code></pre></div>

Image uploads with Express and AWS

To help users plan their goals and track their progress, I implemented dynamic calendars.

Dynamic Calendars

<div class="page-body"><p id="4e5c26ef-eb09-45e0-bfe7-53878f60f673" class="">I Used <a href="https://en.wikipedia.org/wiki/Bcrypt">bcrypt</a>, <a href="https://auth0.com/docs/protocols/protocol-oauth2">OAuth2.0</a>, and <a href="https://auth0.com/docs/tokens/json-web-tokens">Json Web Tokens</a> to allow users to sign up with either their Google account or their email and a password.</p><p id="06eff501-c2ef-471a-9724-38ea2d440eca" class="">
</p><p id="e4c43191-9671-41c2-a5bc-e7f556ead03f" class="">Here&#x27;s the code for encrypting passwords with <a href="https://en.wikipedia.org/wiki/Bcrypt">bcrypt</a>:</p><pre id="06a30279-f882-4e09-9fda-7f5ab2802712" class="code"><code>import bcrypt from &quot;bcryptjs&quot;;

const userSchema = mongoose.Schema(
  {
    /*...*/
    password: {
      type: String,
      required: false,
    },
		/*...*/
  },
  {
    timestamps: true,
  }
);

userSchema.methods.matchPassword = async function (enteredPassword) {
  return await bcrypt.compare(enteredPassword, this.password);
};

userSchema.pre(&quot;save&quot;, async function (next) {
  if (!this.isModified(&quot;password&quot;)) {
    next();
  }

  const salt = await bcrypt.genSalt(10);
  this.password = await bcrypt.hash(this.password, salt);
});</code></pre><p id="edd72817-c755-491a-9b4a-78ff6d35dd42" class="">
</p><p id="2abde3ae-0a8d-4f50-9e8c-fa515839539e" class="">Here&#x27;s the main piece of the code behind my implementation of authentication with Google using <a href="https://auth0.com/docs/protocols/protocol-oauth2">OAuth 2.0</a> and <a href="http://www.passportjs.org/">passport</a>:</p><pre id="e6dc0b84-5419-4c32-aa9e-d64c8e63894d" class="code"><code>import passport from &quot;passport&quot;;
import googlePassport from &quot;passport-google-oauth20&quot;;
import User from &quot;../models/userModel.js&quot;;
import generateToken from &quot;../utils/generateToken.js&quot;;

const GoogleStrategy = googlePassport.Strategy;

const handleUserExists = (user) =&gt; {
  done(null, {
    _id: user._id,
    name: user.name,
    email: user.email,
    subjects: user.subjects,
    currentSubject: user.currentSubject,
    token: generateToken(user._id),
  });
};

const createUser = () =&gt; {
  user = await User.create({
    name: profile.displayName,
    email: profile.emails[0].value,
    googleId: profile.id,
    isMember: true,
  });

  if (user) {
    const newUser = {
      _id: user._id,
      name: user.name,
      email: user.email,
      subjects: user.subjects,
      token: generateToken(user._id),
    };

    done(null, newUser);
  }
};

const passportConfig = (passport) =&gt; {
  passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: &quot;https://autodidactica.app/auth/google/callback&quot;,
      },
      async (accessToken, refreshToken, profile, done) =&gt; {
        let user = await User.findOne({ googleId: profile.id });

        if (user) {
          handleUserExists(user);
        } else {
          createUser(profile);
        }
      }
    )
  );
};

passport.serializeUser((user, done) =&gt; done(null, user._id));

passport.deserializeUser((id, done) =&gt; {
  User.findById(id, (err, user) =&gt; done(err, user));
});

export default passportConfig;</code></pre><p id="4a3b0f1d-db3b-45e3-a9ff-2f68e9e2debf" class="">
</p><p id="48916975-3180-4394-828b-0ef3de13bab7" class="">Finally, here&#x27;s the main function behind my implementation of user authorization with <a href="https://auth0.com/docs/tokens/json-web-tokens">Json Web Tokens</a>:</p><pre id="e9798fdd-4ff3-47f7-9b28-ca77fecd9aeb" class="code"><code>import jwt from &quot;jsonwebtoken&quot;;
import asyncHandler from &quot;express-async-handler&quot;;
import User from &quot;../models/userModel.js&quot;;

const authorize = asyncHandler(async (req, res, next) =&gt; {
  let token;

  if (
    req.headers.authorization &amp;&amp;
    req.headers.authorization.startsWith(&quot;Bearer&quot;)
  ) {
    try {
      token = req.headers.authorization.split(&quot; &quot;)[1];
      const decoded = jwt.verify(token, process.env.JWT_SECRET);
      req.user = await User.findById(decoded.id).select(&quot;-password&quot;);
      next();
    } catch (error) {
      res.status(401);
      throw new Error(&quot;Not authorized, token failed&quot;);
    }
  }

  if (!token) {
    res.status(401);
    throw new Error(&quot;Not authorized, no token&quot;);
  }
});

export { authorize };</code></pre><p id="6b3035b4-4001-4283-94bc-6af3defc32c2" class="">
</p></div>

User Authentication and Authorization

Autodidactica is my greatest technical achievment. It is a web application where users who are studying a new subject or skill can plan, track, and share their progress. I built the app from scratch and could not be more proud with where it's at.

Autodidactica

<div class="page-body"><p id="2dbbe8d2-d58a-4903-b0cc-d4cc85764ee0" class="">I used the <a href="https://ggplot2.tidyverse.org/">GGplot2 R package</a> heavily in this app. It allowed me to give users a high-level snapshot of the relationships between words within their text-based data. I use this feature on all my blog posts to improve my writing.</p><img src="https://cdn-images-1.medium.com/max/800/1*GHAYxlchIyFNlVAw-YJ7mA.png"/><p id="0326172c-2a02-457a-ac79-521a8918884a" class="">
</p></div>

Data Visualization with ggplot2

<div class="page-body"><p id="4f337a70-ef12-4311-b603-a92674309516" class="">Users can quickly see the prevalence of several emotions within their text documents, as well as the words that convey these emotions. </p><p id="76dfa2f5-e81e-4516-9f71-341db3880d39" class="">Here are a few of the results from applying this feature  to Jane Austen&#x27;s <em>Pride and Prejudice.</em></p><a href="https://cdn-images-1.medium.com/max/800/1*t4WCc9Wzv5vexyWHbsVX_A.png"><img src="https://cdn-images-1.medium.com/max/800/1*t4WCc9Wzv5vexyWHbsVX_A.png"/></a><p id="10657966-d584-4653-b6fe-369d7c6ad664" class="">
</p><a href="https://cdn-images-1.medium.com/max/800/1*HSjcvv5rEajzDyAMFzQTog.png"><img src="https://cdn-images-1.medium.com/max/800/1*HSjcvv5rEajzDyAMFzQTog.png"/></a><a href="https://cdn-images-1.medium.com/max/800/1*CvDhLzs-pGUCDKTFyumI0A.png"><img src="https://cdn-images-1.medium.com/max/800/1*CvDhLzs-pGUCDKTFyumI0A.png"/></a><a href="https://cdn-images-1.medium.com/max/800/1*WnxCVoA73eXwyprq3baNIw.png"><img src="https://cdn-images-1.medium.com/max/800/1*WnxCVoA73eXwyprq3baNIw.png"/></a><p id="2aefa083-303f-4cfc-8250-ea190e23c735" class="">
</p></div>

Automated Sentiment Analysis

<div class="page-body"><p id="9b0e4289-a07a-41e9-8b67-b2f726ee55af" class="">To give users insights into the relationships among words in their text documents, I arranged the words into a network, showing which words appear together. </p><p id="c6d76de7-fe10-4c7f-a68a-01b869e3528c" class="">To implement this, I used the <a href="https://igraph.org/">igraph</a> and <a href="https://ggplot2.tidyverse.org/">GGplot2</a> packages.</p><p id="39ed9719-8f7a-448a-a628-20e027ffd422" class="">Again using <em>Pride and Prejudice </em>as an example, this feature produced the following network:</p><figure id="cfd8e847-b132-4854-9838-46847377e598" class="image"><a href="https://cdn-images-1.medium.com/max/800/1*rsIOeil6gBmMLOY4kR1_jg.png"><img style="width:432px" src="https://cdn-images-1.medium.com/max/800/1*rsIOeil6gBmMLOY4kR1_jg.png"/></a></figure><p id="161e3c58-4521-4d65-91dd-b406d79e921e" class="">
</p></div>

Visualiztion of Relationships among Words

Pocket Language Processor is a web app that makes the tools of natural language processing accessible to non-technical users.

Joshua Taylor

Home

Articles

Book Notes

Portfolio

Hello, I'm Joshua Taylor.

Fullstack Engineer and Ultramarathon Runner.

Portfolio Contents:

About Me and Skills

My Projects

Contact

About Me

I'm 23. Right now I'm developing software at Pivot Subscriptions Technologies. I have a degree in mathematics and computer science from Simon Fraser University.

I love expanding my skills as a developer. Through working with other developers and building my own applications, I'm continually improving my programming technique and care for the craft.

When I'm not writing code, I spend my time training for and competing in ultramarathons, reading, and cooking big dinners with friends (especially on Sundays).

Skills

JavaScript

Typescript

React

NodeJs

NextJs

Rust

Go

Postgres

MongoDB

GraphQl

Hasura

Redux

CSS

SASS

Git

LaTeX

My Projects

Shaking off the Rust

Finite State Machine Designer

Autodidactica

Pocket Language Processor

Contact

If you have any questions or just want to chat, feel free to drop me a line!

Or connect with me on one of these fine sites: