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
Social Sharing Preview 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é
iswas generated automagicallyData from Web App Generated PDF 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.