Work Diary/Feedback Thread

thedonquixotic · 15 October 2019 23:40

Since I convinced my new job to let me use Frontity for building one of our next projects, I’m going to be spending a lot of time here.
I figured it might be useful for me to make a bucket to kind of live blog all my thoughts about the framework etc as I go through it.

Disclaimer:

I’m hardly a “real dev”. I’m really more of a designer who knows enough to get themselves in trouble. But maybe that means my perspective will be of interest! IDK. I’m coming at this with the fresh eyes of someone who doesn’t know what they’re doing.

I’ve greatly appreciated the responsiveness of the frontity main devs, and I’m offering this thread purely because I hope it can be useful. What isn’t useful please just ignore and take with a grain of salt

I also just find it helpful to journal stuff as I’m working through the problems, so it’s practically just a form of documentation for my own purposes if nothing else

Thoughts in no paricular order:

I find it a little weird that the default theme mars names the archive component “list”. I understand that the purpose is that list is perhaps more general in nature but I think it’s a little confusing and considering the majority of people using this framework are probably coming from a wordpress background it seems to me that keeping the naming consistent would be better.
I’m going to have to break out the featured image into a separate component or something I think. Not sure. I want to eventually create a transition for it between the Archive page and the actual Post page similar to the modal effect you find here: https://tympanus.net/Development/CardExpansion/
other examples https://tympanus.net/Development/ExpandingGridItemAnimation/
That example is all built in one page so it’s cool looking but not actually that practical for building a website and I’m not totally sure how to get a similar effect in Frontity or React. I’ve played with vanilla JS things like BarbaJs that allows for page transition effects but they basically work by fading out the current page and then fading in the new page, and I’d prefer to do some thing which there’s an actual sense of continuitity between the pages. Still trying to grok how to do that though.

Well that’s it for today. I’ll see ya’ll tomorrow hopefully!

luisherranz · 16 October 2019 07:38

That’s awesome, thanks Aslan! We’ll help you out in your journey

Makes sense. I’ve added to the list of improvements of mars-theme: https://github.com/frontity/frontity/issues/223

My recommendation is that you learn react-spring. It is the most powerful react animation library:

It’s hard to understand at first, but once you get the concept you can do amazing things with a few lines of code. And without stepping out of the “React world”.

The most important thing to understand is its transitions.map. In order to do transitions between two or more objects, the transitions.map maintains those objects on the screen until the transition ends.

If you do normal React like this:

{open ? <Open /> : <Close />}

React unmounts the non-used component instantly and you cannot do a transition.

In react-spring, you delegate the open value to useTransition and it controls when the components should appear and disappear with the transitions.map:

const transitions = useTransition(open, null, {
  from: { position: 'absolute', opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 }
});

return transitions.map(({ item, key, props }) =>
  item ? <Open /> : <Close />
);

I don’t recommend you to use old vanilla JS animation libraries. They may seem to work at first but then you’ll get into trouble when the animation and the React virtual-dom get out of sync. Stay in the React world.

thedonquixotic · 19 October 2019 00:42

Thanks I will be sure to start using react-spring soon.

thedonquixotic · 19 October 2019 00:54

Thoughts in no particular order:

I wish there was a clear difference between page and posts in the mars theme. I know that it should be possible for me to make my own “page” component but I’m not quite sure how to do that yet. I’ll get there though.
I changed list to Archive but I’m getting a warning saying that I double named the modules. I shouldn’t be too surprised because I accidentally ran a search and replace when I only mean to do a search. The search and replace ended up breaking the theme for a little bit but I fixed it finally. I need to dig more into the stuff tomorrow and see if I can fix the double module issue that I created for myself.
The lazyloading image settings are really slow. Most lazy image stuff will preload the images a couple of seconds before the image comes into frame which helps to keep the appearance of “pop” in from happening. Is this being done with a js or browser native settings? I know that that lazyloading is coming to browsers soon but wasn’t sure how this was being handled.
I’m eventually planning on adding some webGL canvas effects. Like this: https://tympanus.net/Development/FlowmapDeformation/
How difficult is it to integrate stuff like that into React projects?

luisherranz · 19 October 2019 10:38

You can add a <Page> component for pages if you want. Just change this:

<Main>
  {(data.isFetching && <Loading />) ||
   (data.isArchive && <List />) ||
   (data.isPostType && <Post />) ||
   (data.is404 && <Page404 />)}
</Main>

For this:

<Main>
  {(data.isFetching && <Loading />) ||
   (data.isArchive && <List />) ||
   (data.isPost && <Post />) ||
   (data.isPage && <Page />) ||
   (data.is404 && <Page404 />)}
</Main>

What warning is that?

Chrome 76+ includes native lazy loading. Once Chrome controls the lazy loading, there’s no way to change the offset. It’s something built-in and decided by Chrome based on device, connection and so on.

For other browsers, the Intersection Observer is used. Default rootMargin is 0px 0px 0px 0px but you can pass the rootMargin value to the <Image> component. For example:

rootMargin: '300px'

Looks like this!

The guys from Framer have also released another animation library for React:

thedonquixotic · 21 October 2019 18:43

Hey this is dope! But also if I’m not mistaken that’s not using webGL canvas right? It looks like it’s an svg with svg Gaussian blur filters applied, but it’s still in the DOM, and not in a separate canvas element, unless I’m misunderstanding something.

WARNING in ./packages/labs-website/src/components/Archive/archive-item.js
    There are multiple modules with names that only differ in casing.
    This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
    Use equal casing. Compare these module identifiers:
    * /Users/aslan.french/work/labs-website/node_modules/babel-loader/lib/index.js??ref--4!/Users/aslan.french/work/labs-website/packages/labs-website/src/components/Archive/archive-item.js
        Used by 2 module(s), i. e.
        /Users/aslan.french/work/labs-website/node_modules/babel-loader/lib/index.js??ref--4!/Users/aslan.french/work/labs-website/packages/labs-website/src/components/Archive/archive.js
    * /Users/aslan.french/work/labs-website/node_modules/babel-loader/lib/index.js??ref--4!/Users/aslan.french/work/labs-website/packages/labs-website/src/components/archive/archive-item.js
        Used by 2 module(s), i. e.
        /Users/aslan.french/work/labs-website/node_modules/babel-loader/lib/index.js??ref--4!/Users/aslan.french/work/labs-website/packages/labs-website/src/components/archive/archive.js
    [...]

'EDIT: rest of the error message has been abridged as its basically a repetition of the first error message and because I fixed it just now

I have a decent sense of what I did I to screw it up. I just need to sit down and parse through it.

Cool, I have done this and I am currently troubleshooting some presentational issues but otherwise it seems to be working!

Quick question though. how does isPage getting passed? Where is it first defined? I know where to make a new “Page” component, but isPage is a function, so that has to be declared somewhere right? Is that a part of the frontity framework itself?

Let’s say I wanted to make a new component like: Calendar

If I added data.addCalendar && <Calendar/> it wouldn’t know what to do right?

Also I respond with these questions, but I am also looking up stuff in the documentation so I’m trying to find the answers on my own too. Just don’t want you guys thinking I’m just asking questions without reading stuff first. I’m in the process of doing that stuff too.

thedonquixotic · 21 October 2019 23:32

DAILY THOUGHTS CONTINUED:

in nav.js I found a css property applied to const Container called “archive-style:none”. As far as I can tell this isn’t a standard css property? It gets flagged by vscode and I also can’t find any mention on it through google.
I don’t know if this is even possible with server side rendered apps but it would be nice to have some kind of css.maps to more easily track down where a particular piece of css is coming from.
BTW I fixed the issue with the modules having inconsistent casing. The error message was pretty clear it was just a matter of tracking it down.
Also I tracked down that isPage, isArchive method. It’s from wp-source right? I will look at the documentation for that and see what I can learn from the recently addition of custom post types to frontity.

luisherranz · 22 October 2019 14:04

You’re probably right! I don’t know much about animations/CSS/canvas to be honest.

It’s part of the wp-source package. You can take a look at frontity.state.source in your Chrome console. You’ll find a state.source.data object with all the known URLs and information about them.

Each time you move to another URL or manually fetch a URL using actions.source.fetch, wp-source tries to find information about that URL using the REST API and populates state.source.data with the info.

When you use state.source.get() you are actually taking a look at state.source.data. That’s probably the point where it’s not straightforward. Maybe state.source.getData() would have been a better name.

Not, because a calendar is not part of WordPress data.

You could create a calendar custom post type in your WordPress, add it to your wp-source settings and then, yes, you would have calendar URLs in /calendar/my-calendar-slug with data populated like this:

state.source.data["/calendar/my-calendar-slug/"] = {
  type: "calendar",
  id: 123,
  isPostType: true,
  isCalendar: true
  isReady: true
};

Don’t worry. We know our documentation needs to be improved a lot and we are currently looking for a person to work full-time on that. Your questions help us understand what things are not yet clear in the documentation so please continue to do so

I don’t think that ours: https://github.com/frontity/frontity/search?q=archive-style&unscoped_q=archive-style

Emotion has support for source-maps but honestly we couldn’t make them work in Frontity:

I took another good look this morning and I tried many things but I couldn’t make it work. I guess the next step would be to debug the babel emotion plugin code itself.

thedonquixotic · 23 October 2019 01:31

DAILY THOUGHTS CONTINUED:

So a lot of stuff in the mars theme is styled like this: const Content = styled.div
That’s pretty straightforward but it’s also makes it a little heard to read. I’m looking at the emotion js documentation and I can’t find a simple way to target an element by it’s class name. It’s really simple to add a class name to a custom React component. And one advantage of this is that it’s easier to then trouble shoot stuff because instead of just being <div class="css74289478></div> I can instead look for <div class="css236473 page-title></div>. That’s doable within the context of lower level elements because of scss nesting but for wrapper elements it’s a bit harder.
Is there some way of targetting stuff by css class name that I’m missing?

thedonquixotic · 24 October 2019 00:09

DAILY THOUGHTS CONTINUED:

In the Post component I see the following:

<div>
          <Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
          {data.isPost && <div></div>}
        </div>

Why is this set up like this? Why isn’t it just:

<Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} />

?

It just seems weird.

Also as a side note: I changed the names of the components and named in the following way to reflect the CSS classes which are normally output by Wordpress content html:

<Container>
      {state.theme.featured.showOnPost && (
        <FeaturedMedia id={post.featured_media} />
      )}
      <Article className="content-area">
        <Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} />

        <EntryContent className="entry-content  blog-article">
          <libraries.html2react.Component html={post.content.rendered} />
        </EntryContent>
      </Article>
    </Container>

What is the purpose of “dangerslySetInnerHTML”?
Is there a specific reason why the nav bar is divided into “header” which then contains “nav”? Seems it would be easier to just have a single component called “Nav” but maybe this is done for some logic based reason that I am unable to see?

Thanks!

thedonquixotic · 24 October 2019 00:11

Also I’ve actually simplified the post component structure even further:

<Container>
      {state.theme.featured.showOnPost && (
        <FeaturedMedia id={post.featured_media} />
      )}
      <Article className="content-area">
        <Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} />

        <libraries.html2react.Component html={post.content.rendered} />
      </Article>
    </Container>

luisherranz · 24 October 2019 07:53

The original mars-theme is like this:

  <Title dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
  {data.isPost && (
    <div>
      {author && (
        <StyledLink link={author.link}>
           <Author>
              By <b>{author.name}</b>
            </Author>
        </StyledLink>
      )}
       <Fecha>
         {" "}
         on <b>{date.toDateString()}</b>
       </Fecha>
     </div>
  )}

So I guess you deleted the Author and Fecha components.

Not really! Feel free to improve Mars Theme.

Awesome.

Would you like to contribute those changes to the official mars-theme? It’d be great!

thedonquixotic · 24 October 2019 16:06

Will do! And thank you for all the responses!

thedonquixotic · 24 October 2019 20:28

DAILY THOUGHTS CONTINUED:

Okay so I’m kinda going through all the components and trying to simplify and reorder things according to the needs of the theme I’m working on, and also as a way of better understanding and learning the specifics of how things work in Frontity.
In the nav the menu links look like this in the mars theme:

<Item key={name} isSelected={state.router.link === link}>
        <Link link={link}>{name}</Link>
</Item>

I decided I wanted to simplify it down to just Link so that I didn’t get unnecessary extra layers. So I try this:

<Link key={name} isSelected={state.router.link === link} link={link}>
        {name}
      </Link>

But it does not work

Not sure why.

When I print {state.router.link} the result I get is “/about-us/” and when I print {link} I get “/about-us”.

I’ve tried to add an extra slash on the end of the {link} in the comparison but that also does not work even though I get identical prints from link and state.router.link when I do that.

-------EDIT:

Okay I’ve tried to simplify it even more. Still isn’t working consistently. When the menu item for the frontpage is selected then it is blue but when the about-us page is selected it remains purple.

const Nav = ({ state }) => (
  <NavList className="nav-list">
    {state.theme.menu.map(([name, link]) => (
      <NavItem key={name} isSelected={state.router.link === link} link={link}>
        {name}
      </NavItem>
    ))}
  </NavList>
);

export default connect(Nav);

const NavList = styled.nav`
  display: flex;
  box-sizing: border-box;
  padding: 0 24px;
  margin: 0;
  overflow-x: auto;
`;

const NavItem = styled(Link)`
  transition: all 0.25s 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  color: ${({ isSelected }) => (isSelected ? "blue" : "purple")} !important;
  border-bottom: 3px solid transparent;
  padding: 0.1em 0.25em 0 0.25em;
  margin: auto 0.25em;
  &:hover {
    border-bottom: 3px solid #1f38c5;
    transition: all 0.25s 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }
`;

luisherranz · 25 October 2019 09:25

Do the links of your state.theme.menu array contains ending slashes? Maybe that’s the problem.

luisherranz · 25 October 2019 13:21

Some good news here. After debugging the emotion library I was able to spot the problem and solve it with a custom babel plugin.

When we release this fix, the React component name will appear in the class name:

And you will be able to open the exact file where the React component is located when clicking on the element:

com-video-to-gif%20(1)

You can follow the progress in this pull request:

thedonquixotic · 25 October 2019 19:52

Awesome this looks great!

(EDIT: be sure to check the EDITS appended to this reply for the latest info)

Also I just started getting these build errors I’m double checking stuff via google and the error message but not sure what the cause is:

┌─    /mnt/c/Users/aslan/home/work/labs-website                                                                                        
└─➤ npx frontity dev 


SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module


webpack built client 9d55189ace16b299fa73 in 13733ms 
ℹ ｢wdm｣: Child client: 
                     Asset      Size        Chunks             Chunk Names
         archive.module.js  23.6 KiB       archive  [emitted]  archive
    labs-website.module.js  3.87 MiB  labs-website  [emitted]  labs-website
     + 1 hidden asset
Child server:
        Asset      Size  Chunks             Chunk Names 
    server.js  6.39 MiB    main  [emitted]  main
ℹ ｢wdm｣: Compiled successfully.

  TypeError: Cannot read property 'source' of undefined 
      at Theme (webpack-internal:///./packages/labs-website/src/components/index.js:13:42)
      at runAsReaction (webpack-internal:///./packages/labs-website/node_modules/@frontity/connect/src/reactionRunner.js:16:45)
      at reaction (webpack-internal:///./packages/labs-website/node_modules/@frontity/connect/src/observer.js:7:131)
      at props (webpack-internal:///./packages/labs-website/node_modules/@frontity/connect/src/connect.js:18:8)
      at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:482:2385)
      at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:481:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:518:1153)      
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:518:55)
      at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:557:116)
      at app.use (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:47:243)

I tried following the advice in this thread: Cannot read property 'frontity' of undefined

and this guide: https://docs.frontity.org/guides/keep-frontity-updated

and neither of those things ended up fixing the issue.

EDIT1:

Okay so I created a brand new frontity server using the cli create frontity command and I moved over my theme to that new location and got it working there.

I’m not totally clear on what the problem was but I think it was caused by incompatible versions or double installs of react and/or perhaps compatiblity issues between the version of frontity I was using on my work computer versus my home computer (work computer is a mac, home computer is a Windows Subystem Layer install of Ubuntu)

I am still getting the following error results despite the successful build.

Error: post type from endpoints "posts,pages,media" with slug "e3ae9ef6b9b0c063645f.hot-update.json" not found 
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Error: post type from endpoints "posts,pages,media" with slug "e3ae9ef6b9b0c063645f.hot-update.json" not found 
    at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/postType.ts:8:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

EDIT2:

I’m going to continue my work diary below but the follow doesn’t have a whole lot to do with the above problems.

The isSelected issue has cleared up! IDK why exactly, maybe it was an update to Frontity?
I realize that there’s been some additions to mars-theme since I started building my own theme from it. I think I might try to refork mars-theme and migrate my changes over so that I can take advantage of those new features while still maintaining the changes I’ve made structurally.

luisherranz · 28 October 2019 17:18

You are right, it’s a problem with a double install of @frontity/connect.

I think it happens when you have two different versions of the main frontity package in the root and inside a package.

I’m going to move all the frontity dependencies in packages to peerDependencies and I think that should solve this problem for good. I’m sorry about it.

That error is different. It appears when

You run Frontity in dev mode
Localhost is connected to the server for HMR (hot module replacement)
You stop the server.
Localhost tries to reconnect.
You start the server again.
Somehow, the HMR request of the old localhost goes thru webpack-dev-server and ends up in Frontity and it thinks it is trying to fetch a new page.

Long story short, we should filter those URLs

thedonquixotic · 29 October 2019 00:22

DAILY THOUGHTS CONTINUED:

I’m testing the theme now on mobile emulation with chrome dev tools and I’m getting really inconsistent behavior.
I got things working okay with the default frontity test server API but when I try to test stuff with my own website blog at jackalope.tech/blog I get weird stuff like this.

EDIT:

Actually I fixed this. Was a problem with my code blocks not properly wrapping!

I encountered some inconsistencies when I was testing compatibility with my website json api source but the problems have been magnified when I’m trying the chrome device emulation stuff and I can’t actually determine what is causing these problems.

One issue that is relevant to bring up is that it seems the frontity test server posts have all been written in 2016. This is a problem since Gutenberg is now the standard editor and it outputs different HTML than the classic editor did. (some of these issues have popped in my own normal WP development.)

In line with that I would suggest you guys consider creating a new test blog that will have more full compatibility with the Gutenberg editor.

That of course isn’t going to fix this problem for me. I have no clue what’s causing it. I’m going to investigate this the best I can but thought I should drop a note by you guys since I can only see the disjunction between the test wp json and the evolution of the modern default editor growing.

Also I keep having this happen and I have no clue why. The only way to fix it is to go to put a “/” in the url and then it will load the front page correctly. But clicking stuff won’t work.

thedonquixotic · 29 October 2019 00:34

Also a suggestion/request. Would it be possible to not have the babel output generate all the various browser variations when in dev mode? It makes it a lot more tedious to actually look through chrome dev tools when there’s like 4 different variations of the same css property.