What should I focus on for the next two weeks?

talk random
1

I have some time off for a few weeks, and I was wondering what are some things on the site you all think I should focus on?

Here are some of the items I have tentatively shortlisted:

  1. Videos for the most popular articles on the site that do not have one

  2. Challenges - sample projects that help tie together the basic concepts covered here. I will provide a project brief. I may also provide a sample solution as well. The caesar’s cipher and analog clock tutorials are examples of this.

  3. Revising my JS animation content and creating videos around them.

  4. Continuing to optimize the site’s performance

  5. Move all of the site’s content to Github and create a workflow between Dreamweaver, Git, and FTP.

  6. Create a simple user login/profile to allow someone to favorite articles.

  7. Web Components 101

Are there any topics or ideas you all have that I should add to my pile of work? Is there anything that I have listed that you like or don’t like?

Cheers,
Kirupa :nerd_face:

1 Like
2

WC 101 would be great :slightly_smiling_face: it’s a big topic that might need a few sections. I’ve been playing with it a bit lately and most of the stuff on WC make it seem like shadow DOM and custom-elements have to be used together yet they dont. I built my own basic SSG recently that renders custom elements and outputs HTML.

A <custom-element > HTML tag
will parse (as a div) without any JS all the way back to IE9 and
<custom-element part = 'flex green' >
will also CSS match incl IE (like a class):
[part ~= 'green']{ background-color: green;}
and inside of the shadow dom (not IE) will also match
custom-parent ::part('flex'){ display: flex}

Obviously they new
<template shadowroot = 'open'>
will improve render performance of shadow DOM however the polyfill performance is horrible and the content wont render until DOMContentLoaded.

Even getting an attachShadow → template.content on connectedCallback() fails because the callback fires before the <template> is parsed.

You can use something like this:

class renderComponent extends HTMLElement {
            connectedCallback(){
                let block = this.previousElementSibling; 
                let root = block.attachShadow({mode: 'open'});
                let content = block.firstElementChild.content.firstElementChild;
                root.appendChild(content);
                block.innerHTML = ''; this.remove();
            }
    customElements.define('render-component', renderComponent);

and that will render each template as it is parsed and it hits the render-component:

<custom-element>
<template> <section>**All of the content**  </section></template>
</custom-element>
<!-- renders when render-component parsed   -->
<render-component></render-component>

<custom-element>
<template> <section>**All of the content**  </section></template>
</custom-element>
<!-- renders when render-component parsed   -->
<render-component></render-component>

I’m sure there are other alternatives out there but usually it’s a couple of pages of JS.

Side note: if you wanted to use a render-component like above its easier just to put it immediately after the <template> inside the parent. Then connected callback can be parent not previousElementSibling and the innerHTML = '' will remove the <template> and <render-component> but leave the shadowRoot. I just did it like that above to make it easier to understand.

2 Likes
3

The WC101 would be probably as large as my dedicated Array content. There is so much to cover, but it is definitely worth covering though :stuck_out_tongue: