shgysk8zer0/shgysk8zer0.github.io

A responsive, progressive about / portfolio page built using Jekyll

shgysk8zer0.github.io

A responsive, progressive about / portfolio & blog page built using Jekyll

---

Features

• Progressive Web App manifest.json
service-worker.js
• Responsive Design using @media queries, rem / vw units
• Responsive Images using srcset & sizes
• CSS Grid display: grid
• SVG icons using <symbol>s & <use xlink:href="...">
• ECMAScript modules

	// script.js
	import {myClass} from './myClass.js';

	export default class $ {
		constructor(query, base = document) {
			this.els = [...base.querySelectorAll(query)];
		}

		// ... Some more methods here

		animate(keyframes, opts = 600) {
			this.els.forEach(el => el.animate(keyframes, opts));
		}
	};

• CSS custom properties

	@import url("./vars.css");

	:root {--my-var: red;}
	.my-class {color: var(--my-var);}

• CSS animations & JavaScript Animations API

	import {$} from './script.js';

	$('.fade-in').animate([
		{opacity: 0},
		{opacity: 1},
	], {
		duration: 600,
		easing: 'ease-in',
	});

• Content-Security-Policy (CSP)
• SEO via structured data

<address itemprop="homeAddress" itemtype="http://schema.org/PostalAddress" itemscope>
	<!-- Address info here with appropriate `itemprop`s -->
</address>

• Built using Jekyll & GitHub Pages

The links you're looking for

• Issues
• Pull Requests
• Code of Conduct
• Contributing Guidelines

Contact Info

• Email: [email protected]

Donations

https://www.paypal.me/shgysk8zer0

bitcoin:1AdHne5JRY9GxVpYD13KithkNF2WEBbfKf

shgysk8zer0.github.io's Issues

Add 404 page

Steps to reproduce

1. Visit https://shgysk8zer0.github.io/dne

Expected behavior

Tell us what should have happened
A custom themed 404 page should be shown

Actual behavior

Tell us what happened instead
The default, GitHub themed 404 page is shown

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Mobile layout

Steps to reproduce

1. Visit on mobile

Expected behavior

Tell us what should have happened
Should look fairly decent. Long blocks of code are really impossible to get right, but
the site as a whole should look good still

Actual behavior

See below

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Add About Page

My design idea for this is to resemble a dictionary or encyclopedia entry but to have lots of images, different sections, and topical about me content.

Create AMP layout

See AMP docs for more info.

Not quite sure what this will require yet. Working my way though the docs. WIll almost certainly require
a second copy of every article.

Probably won't want anything other than articles though.

Header overflow on mobile

Steps to reproduce

1. Visit site on mobile
2. OR Change to responsive design mode and set small viewport

Expected behavior

Icons should resize. Header should appear in same layout as on desktop

Actual behavior

Content wraps in <header>, making it more than screen width

Screenshots and/or logs (see how to open the developer console in your browser)

Move reusable JavaScript to std-js

Shims & handlers to move:

• Share API
• Handler for data-share
• Service worker registration

Will also want to modify share API shim to pass in configuration for shares

{
     icon: new URL(),
     url: new URL(),
     label: '',
}, {
    /* ... */
}, /* ... */

Update icon

The current icons exist in sizes that are not used and are a bit too simple.

Maybe the current icon, filled with something off-white, in an orange box with round corners.

• Reduce to only used sizes
• Add color / box

Telephone link is not set

Expected behavior

Telephone link should contain tel:{{ site.data.person.telephone }}

Actual behavior

It's just tel:

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Add sitemap

Not sure if this will be so easy to create or if it is typically available using jekyll new.
If not, sitemaps are generally easier to create than feeds, in my experience.

Fix build config

Steps to reproduce

1. Run npm run build:all

Expected behavior

PostCSS & rollup should do their job of transpiling & minifying JS and CSS

Actual behavior

They only partly work, doing little more than concatenating.

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Add social links via `sameAs`

See Social Profile Links and Person.

• Move social links to [itemtype="http://schema.org/Person"]
• Add [itemprop="sameAs"]
• Adjust styles to make look good

Convert portfolio to WebApplication

See WebApplication

Disable Git LFS

GitHub Pages does not support Git LFS, so git lfs untrack

Add content to Portfolio

Not sure what all to put there. I'd really like to make this database driven, but don't want to go through the hassle of setting up database, login, etc.

A staggered grid layout would be nice.

Convert to Jekyll

This will be helpful in learning to really use Jekyll and will make it slightly easier to modify/organize.

Update README

• Add badges, screenshot, etc.
• Remove unused images
• Add links & contact info

Add feeds

Can probably snag this code from something created in jekyll new.

Outdated caches are being preserved

Steps to reproduce

1. Visit https://shgysk8zer0.github.io on v$old
2. Visit again on v$new

Expected behavior

Tell us what should have happened
v$old should be deleted

Actual behavior

Tell us what happened instead
All cache versions are kept

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Implement pagination

Learning this at the moment.

See Pagination | jekyll

Add CSS for Jekyll highlight

This might not be so straightforward, since I am using vanilla CSS instead of SASS.

Maybe find the CSS somewhere & @import it.

Add comments via Disqus

Write own JavaScript to ensure CSP compliance, proper microdata, small size, customization, and usability with <template>s.

See Disqus API docs

Will be writing class & handler for std-js.

Follow what is possible in Front-End Checklist

See Front-End Checklist

Most prominently:

• Set <meta http-equiv="x-ua-compatible" content="ie=edge">
• Add Apple touch icon
• Add Windows tile
• Add Social media <meta>s

There will be a separate issue for image optimization

Add Content-Security-Policy

Since this is currently running on GitHub Pages, I do not think that I can do this via header.

Instead, set via <meta>

Invalid sitemap

Steps to reproduce

1. Inspect sitemap.xml

Expected behavior

Sitemap should be valid

Actual behavior

Sitemap is invalid

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

We were unable to read your Sitemap. It may contain an entry we are unable to recognize. Please validate your Sitemap before resubmitting.

Add technologies/skills/languages to projects

• Find an appropriate property in SoftwareApplication or do not use schema.org at all.

Add fonts to service worker

Add common fonts to service worker list.

Create layout for blog / posts

Need to create a different layout for blog posts. It should be mostly similar to default layout, but not use such a large header (probably different content too), and should include an article template for reading articles.

Will also need a separate layout / template for listing recent posts.

Header background not displaying

Steps to reproduce

1. Visit site on mobile
   a. Or, visit on desktop and resize

Expected behavior

Tell us what should have happened
Header image should be set according to screen size

Actual behavior

Tell us what happened instead
At many sizes, no image is shown

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

<nav> vertical alignment is wrong

<nav> content is aligned to top when it should be centered. Also, icon looks too small, and <nav> itself might be too large.

Failing to register service worker

Steps to reproduce

1. Load page

Expected behavior

Service worker should register

Actual behavior

An error is thrown instead

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Error: Service worker not supported
Stack trace:
registerServiceWorker@https://shgysk8zer0.github.io/js/index.min.js:1532:10
each@https://shgysk8zer0.github.io/js/index.min.js:106:3
readyHandler@https://shgysk8zer0.github.io/js/index.min.js:1556:2
 index.js:25:2

Fix microdata for worksFor/Organization

Currently using the wrong itemtype, and using a second itemtype instead of itemscope

Service worker catching content for other pages

Steps to reproduce

1. Visit https://shgysk8zer0.github.io
2. Visit another GitHub page, such as https://shgysk8zer0.github.io/freecodecamp-twitch

Expected behavior

Tell us what should have happened
Other sites should not be cached by service worker

Actual behavior

Tell us what happened instead
Anything and everything in the domain is

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Set current layout as class

On some element(s) higher in the markup. No deeper than body > *
Add

<element class="layout-{{ page.layout }}...">

Allow posts to set description, keywords, etc

Expected behavior

Tell us what should have happened
Posts should be able to define their own meta data

Actual behavior

Tell us what happened instead
All data is site-wide, pretty much

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

CSS not setting colors on Firefox for Android

Steps to reproduce

1. Load https://shgysk8zer0.github.io

Expected behavior

Should look the same as it does in any other browser. Chrome for Android and Firefox for Desktop

Actual behavior

<nav> and some icons are not being colored correctly, even though it's the exact same HTML & CSS

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Make sitemap urls absolute

Current:

<url>
	<loc>/posts/javascript/2017/10/23/jquery-or-vanilla-javascript/</loc>
	<lastmod>2017-10-23</lastmod>
</url>

Should be:

<url>
	<loc>https://shgysk8zer0.github.io/posts/javascript/2017/10/23/jquery-or-vanilla-javascript/</loc>
	<lastmod>2017-10-23</lastmod>
</url>

No mobile layout for /posts/

Need to add / update @media rules for /posts/ on mobile.

Add about / contact page

As an idea for design, base it off of a contact in Android.

Simplify development

Instead of having two different config files, setup so that variations in data are set by jekyll.environment.
This should be "production" on GitHub Pages and "development" locally.

Fix article structured data

Steps to reproduce

1. View results on Structure Data Testing Tool

Expected behavior

Article/Blog post should be detected and there should be no errors and minimal warnings

Actual behavior

• Blog itemtype is incorrect
• Is using datePosted instead of datePublished
• Has no publisher
• Is not mainEntityOfPage

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Update About content

Probably shouldn't have push "Lorem ipsum" content.

<dialog> partly visible

Steps to reproduce

1. Visit site in a browser that doesn't support <dialog>

Expected behavior

<dialog>s should not be visible until [open]

Actual behavior

They are visible, though not styled

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Horizontal overflow on mobile

Steps to reproduce

1. Visit on mobile

Expected behavior

Everything should fit horizontally

Actual behavior

There is some overflow on the right-hand side

Screenshots and/or logs (see how to open the developer console in your browser)

Drag and drop file to upload and include in bug report

Update Octicons

This may not be up to me, as GitHub Pages errors build if updated Octicons are installed as submodule.
Hopefully, exclude in _config.yml will fix this.

Try it out. If it doesn't work, revert and we'll just be stuck with outdated Octicons.

Implement `navigator.share`

See Share API

• Add an icon to share with
• Make it only visible if navigator.share is supported
• Add click handler

if (navigator.share) {
  navigator.share({
      title: 'Web Fundamentals',
      text: 'Check out Web Fundamentals — it rocks!',
      url: 'https://developers.google.com/web',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}