callym / callym.com

callym.com

this is the github repo for v2 of my portfolio website.

features

• uses flexbox for the index page and images
• list.js for filtering
• (hopefully!) cross-browser
• uses svgs for loads of cool things!
• PWA!
  • has a dedicated offline page
  • push notifications
    • via AWS Lambda - still a static site!
  • add to home screen

improvements

• moved away from Jekyll
  • Jekyll was super easy to use, but I felt like I was fighting it a lot instead of using it for what it's good for (blogs)
• less hacks!
  • no to -webkit-background-clip: text
  • yes to svg!
• less javascript!
  • can still see portfolio items without javascript on
  • less lazy-loading
    • had loads of issues with css/js not loading and the site being broken, but no more!
  • no hacky background fade animation
    • had this working in CSS but decided to remove it
  • current page link underlining is done at compile time!
• smaller libraries! (file sizes are minified and gzipped)
  • Zepto.js instead of jQuery (~7.9KB vs ~32.5KB)
  • Magnific Popup instead of Colorbox (both roughly the same size)
  • list.js instead of MixItUp (~2.5KB vs ~8KB)
  • cut four unneeded libraries compared to the previous version!
• less CSS! (15KB vs 35KB)

tools used

• Metalsmith for the html generation
• gulp for other tasks
  • image minification
  • javascript transpiling
  • sass compiling
  • cache busting
• s3_website for deploying to Amazon S3

callym.com's Issues

SVG positioning issues with Edge

the top of the header text is cut off, and on hover, the background image moves strangely

probably an issue with the use of tspans?

Move push notifications over to VAPID

Now that Chrome supports VAPID, should switch over to it!

email sending

• AWS Lambda API to add emails to a database
• node script to loop through and send emails to the email addresses through aws ses
  • needs to compile the email templates once
  • and needs to compile once per email (to add unsubscription details)
• AWS Lambda API to remove emails from database
  • should they need a key to unsubscribe? unsubscribing through just an email seems risky?
  • doesn't need to be secure because it's not used for logging in, just needs to be unique
  • and not guessable based on the email?
  • maybe just a b64 of the email + time subscribed saved to the database?
  • am I overthinking this?

comments for "email templating"

blog post

animations reversed on hover in IE

comments for "push notifications without a server"

blog post

SVG foreignObject doesn't work in IE

used for portfolio items without images, and blog posts

email layout(s)

what would I want to email?

• when I post a new portfolio piece
  • needs space for one picture and a call to action link to the page
• or blog post
  • needs space for short excerpt and a cta
• general news/info/updates?
  • needs space for potentially multiple pictures and short text pieces
  • in a traditional newsletter style

these should be constructed in the same way that my site is now, YAML/Markdown + Nunjucks + SASS,
but email layouts aren't as flexible as webpages, so how to convert
this output to the 'table soup' of email html?

would Inky work well in this workflow?

markdown -> inky html -> html + inline (scss -> css)?

need to figure out what the convention is for images, is it okay to b64 inline them?

comments for "rebuilding callym.com"

blog post

SVG scaling issues with Internet Explorer

Internet Explorer doesn't scale the header SVG

email subscription page

need a part of the contact page for an email subscription form

probably just a textbox + button?