How I built my résumé app

What are some key concepts for this site?

• Node, Express
• React, Webpack, SCSS
• EC2, Load Balancer, S3, CloudFront
• SSL HTTPS

Accessibility

• W3C - Web Accessibility Initiative

• Font size & Contrast make it easy to read text

  I made sure I had sufficient contrast on the foreground and background on all sections.

  
  

  Header (coral/white) with large text passes WCAG AA checks with 3.06:1.
  The rest of site passes all of the WCAG checks (16.98:1 - 21:1).

  
  

  I originally had a lighter color coral, but adjusted it when I realized it wasn't passing any of the checks.

  
  

  Font-weights are not too thin and all font-sizes are set to at least 16px.

  
  

• Images and links contain alternate text & title attributes

  All anchor and img tags have alt attributes.

  
  

  Anchor tags also have a title attribute.

  
  

• Headings have a meaningful hierarchy

  Paid attention to all the headings used. Each page has an H1, H2, H3, and H4 - and they are structured in a meaningful way.

  
  

• Resizing text does not make the page unusable

  This site is made in a way so that a user can zoom in the text and read clearly. It does not cause any issues in the browser such as text being cut-off.

  
  

Site Performance

• GtMetrix
• Webpack Bundle Analyzer
• CloudFront
• Express

• Server-side rendered content

  Users can browse the site sooner, even while React is making the virtual DOM to make the page interactive.

  I also dont have a giant white screen (or flicker) like many SPA sites do

• Decreasing Page Size

  240kb (as of when I'm typing this). I have added better code splitting, dynamic imports, and an audit of the NPM packages I am using to reduce some bloat.

  
  

• Lazy loading images

  Doesn't load images until visible on screen.

  
  

  On page load, only 2 images are requested totalling ~38kb.

  
  

  As the user scrolls throughout the page, they can expect to download ~338kb of imagery. Much better than requesting that on initial page load.

  
  

• Page speed

  SSR - Server Side Rendered

  
  

  Minified, Cached and Compressed - HTML, JS, CSS and Images.

  
  

  The JS bundles could use a little more work. They are about 94kb. I am going to be adding code-splitting with dynamic imports to achieve smaller bundle sizes.

  
  

  For CSS I am only loading 3.6kb.

  
  

• Disabled Javascript Support

  Site will continue to perform all of its duties

  
  

  I used <noscript/>  for any relevant imagery since they are lazyloaded, the user would never have seen them.
  An example would be the image gallery at the bottom of the page, as well as the Tech Icons under the header. I have replaced those icons with text versions if the user has JS  turned off.

  
  

  In development: Give the site the ability to change locales via the URL - so that I can SSR content with different copy. Right now, this is the only functionality that isn't supported without Javasript.

  
  

Search Engine Optimization (SEO)

• Screaming Frog
• Google Tools

• Meta Tags are present

  
  

  Titles, descriptions, social tags, lang attributes, robots and other tags make it easier for people to get to my site.

  
  

  I am not putting much energy into online marketing at all, but if one day someone finds me organically, thats awesome!

  
  

• Provides a sitemap.xml and robots.txt

  Although this site has static URLs, I thought it would be fun to create a sitemap. Who knows, perhaps one day ill have created 1000 dynamic pages, *chuckle*.

  
  

• Pages are canonicalized

  Made sure to automatically redirect to include trailing slashes and include a canonical link in the head of my pages.

  
  

Just Kinda Cool

• PDFKit
• Node

• My PDF résumé is was generated automagically

  Using the same JSON content I use for the homepage, I generated a PDF vesion of my résumé. I was using  pdfkit however I am not the biggest fan of their limited built-in api, but it was simple to set up and get running, so I kept it. This way I dont have to worry about keeping a current version ready if/when I need one. For fun, I also tied it in with my localization so you can download in English, Spanish or French!
  
  EDIT - I have removed the localization support because it was getting too much to maintain. I also wanted to try a new package, one that was easier with SSR and one that makes it simple to grab translation files from a CDN.

  
  

Code Quality

• Jest
• Enzyme
• Nightwatch

• Clean and Organized

  I always do my best to keep my code clean and organized. I try to keep functions and variable named clearly and easily identifable as possible. This allows for code that can be more easily read without the need for much commenting.

  
  

  Do not repeat yourself (DRY)

  I am positive I had to have repeated myself at least in a few places. It is quite hard to keep your code completely DRY as the projects progress, but as I work I keep that in mind and do my best.

  
  

  Testing with Jest and Nightwatch

  
  View Test Coverage
  (Generated on build)
  

  The code that runs this site is thoroughly tested. I use Jest as my runner and other packages such as Supertest and Enzyme for my testing libraries.

  
  

  I am actively working on increasing my code coverage, specifically end-to-end (E2E) tests using Nightwatch.

  
  

  Although I didn't use it for this site, I am a big fan of  Test Driven Development  (TDD). I have found it to be extremely insightful and helpful while working on new features or projects.

  
  

  Staging Site (https://staging.thewickedweb.dev)

  I made myself a staging website too - so that I ensure a deployment will go smooth and not hurt any users experience while visiting my site.
  
  Note: I have made a custom robots.txt file that blocks search engines from crawling and indexing my staging site.