DEV Community

Cover image for I Coded My Personal Site With Web Components

I Coded My Personal Site With Web Components

Stephen Belovarich on May 06, 2020

Ugh. The chore of refactoring a personal site. We all should do it but who has the time? This is the seventh iteration of my personal site, so I wa...
Collapse
 
raghavmisra profile image
Raghav Misra • Edited

Hey Steve! This is really cool, I actually am developing my portfolio this way too! My goal is to make a mobile-friendly aesthetic website with no frameworks, CSS or JS. It is still in the making, but would love you could check it out here: github.com/raghav-misra/oblivionte...

Collapse
 
steveblue profile image
Stephen Belovarich • Edited

Looking through your code I think it’s fairly well organized.

One of the biggest pain points for me working with custom elements was event handling. I don’t particularly like calling addEventListener all over the place, which is why I made a Decorator in Readymade that makes for cleaner code. That’s just preference though. It doesn’t hurt to use a library for web components to abstract things like this into a mixin, decorator, or other form of reusable logic. I do like how you’ve gone down a path implementing things from scratch. It means you’ll learn a lot more.

A note about the polyfills: import them from npm packages instead of static code in your repo that way you pick up bugfixes and improvements. Make a polyfill file, import each polyfill from npm packages then load the file in the head of the website.

Collapse
 
raghavmisra profile image
Raghav Misra

Oh, the polyfill predicament. I am using Netlify to host my site and I am unable to access node_modules in my published directory. I was thinking of using cdnjs to serve the polyfill but wasn't sure.

Also, what you said is precisely the reason I reinvented every wheel possible lol. I wanted to learn the internals. Even my crappy SPA router! To alleviate some pain to no frameworks, I wrote some JSX factory function to build DOM nodes. But honestly, something like Readymade, even though it's so small of an abstraction, would ease development a lot.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
steveblue profile image
Stephen Belovarich • Edited

What issues are you experiencing? AFAIK the only view in need of a perf boost is the blog, which could use some lazy loading for the images.

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
steveblue profile image
Stephen Belovarich

Ah, I think that’s a work in progress!

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

It looks amazing 👌😍

Collapse
 
steveblue profile image
Stephen Belovarich • Edited

Sorry about that. It seems Russia federal censor blocks DigitalOcean I.P. as well.

Collapse
 
blanchloe profile image
Seonyoung Chloe (she/they)

What a cool interaction!

Collapse
 
steveblue profile image
Stephen Belovarich

Thank you!

Collapse
 
hyderly profile image
Haider

Steve, Your portfolio is very good, don't you think the hamburger size is huge?

Collapse
 
steveblue profile image
Stephen Belovarich

Could be. Maybe to keep the recommended 44 x 44px hit area I should add some padding.

Collapse
 
ronakjethwa profile image
Ronak Jethwa

Looks neat. that visible scrollbar could be hidden though, while still keep it scrollable?

Collapse
 
bryanprimus profile image
Bryan Primus Lumbantobing

Bookmark this

Collapse
 
catalinradoi profile image
CatalinRadoi

Hi! "The two sides of the brain..." is just a myth, please stop using this.