My personal blog site

👨‍👩‍👧‍👦 Community 🎬 Showcases
1

Hey there, here’s my personal blog (with not too much content but I hope that will change shortly)

It’s a quite simple but effective one. I will write about the process very soon but as I don’t have too much time to spend on side projects, there are things that can be improved a lot but at least I made use of:

  • Code Splitting
  • Processors (to make highlight.js work)

Vercel is an absolute delight to work with: Easy, fast and free!

By the way, my site runs on WordPress.com. I redirected the domain and had to use some imagination for some parts but it runs smooth.

I also enjoyed a lot working with Frontity, it’s a quite effective piece of software with an easy install and quite simple extensible system. I still consider that there are areas that need improvement:

  • Server extensibility: I know you are working on that, that’s cool. It would be interesting to process forms or any other kind of requests by extending the server. RSS is another use case, as I run the site on WordPress.com, I cannot use the wordpress.com RSS link as the domain is redirected.
  • More guides for code splitting. I’ve struggled myself to realize that some components need a fallback component to load them by using import() function. I still don’t understand this 100% but I’m on my way.
  • Guide for authentication, if that’s possible without server extension.
  • There’s no mention about language and localization.
  • The processors doc page isn’t clear enough and feels more difficult than it is, I think it needs some rework and more examples.
  • Some guide to manage cookies?
  • A guide to make your own theme/package extensible and follow Frontity standards would be superb.
  • Bug: If you define a processor without processor function, you’ll end up in a white screen of death without too much information.
  • Bug: Go to https://igmoweb.com/. Then click on the post whose title is Operadores interesantes en JavaScript. See the list of categories, only one appears. Refresh, now two appear, I don’t know why but I haven’t investigated too much yet.
  • Bug: http://igmoweb.com/category/ooo/musicote/ returns a 500 while it should return a 404. Here’s the full error:
TypeError: Cannot read property 'split' of undefined
      at __webpack_exports__.default.str (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/utils/capitalize.ts:2:73)
      at Object.eval (webpack-internal:///./node_modules/@frontity/wp-source/src/libraries/handlers/taxonomy.ts:14:400)
      at process._tickCallback (internal/process/next_tick.js:68:7)
  • Have you seen that if you search something in your docs page, you cannot click a result? It doesn’t work.
  • Managing local packages is a total pain. Needs a better solution or a way to include them form the frontity settings without having them in the package.json declared as dependencies.

I hope it helps to improve the project. Keep the great work!

Here’s the repository for my blog: https://github.com/igmoweb/igmoweb.com

6 Likes
2

@igmoweb it looks great! I’m really happy to have you as a member of this community!

And I can’t thank you enough for this valuable feedback. It helps us a lot to understand the areas where we have to improve. We will do our best to solve everything that you mention!

1 Like
3

Really nice work, @igmoweb. Your site looks great! :rocket:

Thanks again for taking the time to share all this feedback, we really appreciate it!

6

Hi @igmoweb

Thanks a lot for your feedback and your showcase :blush:
Let me add some info over your feedback

Frontity actually uses Loadable Components to offer Code Spliting so all the specific uses of loadable are documented in their docs page → I’ve created a Pull Request in our docs repository to try to explain this better

These are generic needs of an isomorphic app like the one you’re creating with Frontity, this is, an app that returns HTML from the server but then hydrates the React App so it can take control of the app from there (until a new page reload is done)

We haven’t worked all the uses cases but here you have some threads that may help you to understand better the possibilities with a Frontity project:

One key idea that I think we need to explain better in the docs (although is briefly explained here) is that npx frontity build produces basically:

  • server.js file
  • static folder w/ static assets

This server.js is the one launched with the command npx frontity serve
But this server.js is really a middleware that (in theory) could be connected to any Node Web Server, adding logic before the requests are responded with the HTML

This architecture will allow to “extend” the server part to add things such as authentication

This is another feature that is is not really related to a Frontity project but to a generic Isomorphic React App. There are several techniques you could use to achieve this:

We’re a small team trying to push forward this Open Source project, so there are still a lot of things to be done in terms of documentation and demos.

But we’ll be happy to support any Frontity project through this Community Forum, so feel free to continue using it to share any doubts or feedback about Frontity

Hope this helps.

2 Likes
9

This was an issue with Gitbook. It’s already fixed. Thanks for pointing this out

1 Like
10

Can you elaborate this a bit more? We’re interested in knowing the developer experience regarding packages. Which “pains” have found when working with packages? Is there a specific “better solution” you have in mind?

Thanks for your feedback

13

Awesome feedback, thanks @igmoweb :slightly_smiling_face:

We are throwing an error when that happens: https://github.com/frontity/frontity/blob/dev/packages/html2react/src/libraries/component.tsx#L27-L32

Can’t you see that error in the console? Maybe we need to show the server errors in the browser as well.

What is the second category? After refreshing I still see only one: Operadores.

This is expected to be solved by https://github.com/frontity/frontity/issues/366

Great processor by the way :smile:

14

Other comments about your site :slightly_smiling_face:

Bundle size

  • If you run npx frontity dev --production you can take a look at the /build/analyze folder and see the modules included in your bundle. For what I see, the biggest modules you have are moment and fortawesome.

    • moment: This is usually a really bad library for the front-end because by default it includes all possible languages in the bundle, which are +500Kbs. It can be configured through webpack to reduce the bundle size, but it requires additional complexity that is not usually worth. More info and alternate libraries at https://github.com/you-dont-need/You-Dont-Need-Momentjs
    • fortawesome: It seems like you’re adding all possible icons, which is ~500Kbs. We are still in the early days of tree shaking and we still have to be careful with the libraries we add. For tree shaking to work, they have to export ES6 modules instead of commonjs and they need to have sideEffects: false in their package.json file. Not all packages have both. A sometimes better alternative is to do the import of the final file.
import faGithub from "@fortawesome/free-brands-svg-icons/faGithub.js";

Instead of:

import { faGithub } from "@fortawesome/free-brands-svg-icons";

Fetching TopBanner before Server-Side Rendering

I see you are using a top banner for the home. You can do the fetch in the beforeSSR action of your theme to include it on the HTML and avoid the loader in the client:

export default {
  state: {
    //...
  },
  actions: {
    theme: {
      beforeSSR: async ({ state, actions }) => {
        if (state.router.link === "/") {
          await acions.source.fetch(state.theme.topBannerPage);
        }
      },
    },
  },
};

It will also improve your First Contentful Paint because LightHouse won’t wait until React has loaded and the fetch of that content has returned.

In the future, it’ll be easier to add this to the Home handler so it works seamessly in both the client and the server at the same time.

Dependencies: Frontity Project vs Frontity packages

I see your theme has some dependencies, but you added them to the root package.json, which belongs to your Frontity project, not to your theme. It works on your poject, but if you want to use the theme somewhere else, it will fail because it won’t have those dependencies.

I know the difference between the Frontity project (root) and a Frontity package (/package/xxx) may be difficult to understand at first. We need to improve our docs about that.

Fonts: Avoiding blocking resources

LightHouse complains that you have render-blocking resources because of the fonts CSS: https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap

I know it’s Google complaining about itself, but you can add the @font-faces directly to Frontity using <Global> to avoid that blocking resource and improve the first contentful paint a little bit.

15

Thanks for the answers :slight_smile:

Frontity actually uses Loadable Components to offer Code Spliting so all the specific uses of loadable are documented in their docs page → I’ve created a Pull Request in our docs repository to try to explain this better

Thanks! The thing is that you only need a few basic examples/concepts to learn to start code splitting. I know you can read the docs but having those examples in the Frontity docs site is also helpful to speed up development, at least when you’re starting with Frontity.

Those are really helpful guides. Thanks for that. I’d like to try some authentication from the server and use native WP comments and that will probably help.

Although they are concepts that don’t belong to Frontity, as I said in my previous answer, having guides about all this is important to understand Frontity better. Some users like me aren’t coming from a strong understanding of node servers and I used Frontity because it abstracts all that part for me and makes things very easy to setup. Having at least some basic guides would help a lot.

moment : This is usually a really bad library for the front-end because by default it includes all possible languages in the bundle, which are +500Kbs. It can be configured through webpack to reduce the bundle size, but it requires additional complexity that is not usually worth. More info and alternate libraries at https://github.com/you-dont-need/You-Dont-Need-Momentjs

This is because I was using @wordpress/date package that includes Moment. I’ve removed it and use vanilla JS instead. Thanks for the recommendation.

I’m aware of the analyze files and I check them from time to time but the target of the website was to be launched and iterate on it after the launch so thanks for te suggestion. I’m already creating a PR for that.

fortawesome : It seems like you’re adding all possible icons, which is ~500Kbs. We are still in the early days of tree shaking and we still have to be careful with the libraries we add. For tree shaking to work, they have to export ES6 modules instead of commonjs and they need to have sideEffects: false in their package.json file. Not all packages have both. A sometimes better alternative is to do the import of the final file.

It seems that importing the components separate didn’t reduce the bundle size. It seems that the package imports the core and this is the one that increases the size of it. Apart from that, thanks for the great lesson about exports and so, I had a slight idea but not too much.

Fetching TopBanner before Server-Side Rendering

Very cool one! I implemented it and worked like a charm!

Dependencies: Frontity Project vs Frontity packages

I know, I just feel lazy now. I was installing things without caring too much where I was so that’s the result. I’ll dedicate some time to it sooner or later.

Fonts: Avoiding blocking resources

That’s another thing I wanted to try so I took the chance now to implement it. Thanks for all the valuable content here, Luis.

No, I still get a 500 error. If you try my code.js processor and remove the processor function, you’ll see it ReferenceError: name is not defined at applyProcessors (webpack-internal:///./node_modules/@frontity/html2react/src/libraries/component.tsx:13:99)

I tried to link packages locally using npm link with not too much luck. My intention was to have the package in packages folder, link it and install then as an npm dependency but for some reason it doesn’t work. I haven’t explored too many ways and in your docs say that you are working on an easier API for this so I can wait for that instead.

The second category should be “What is code”. Sometimes appear, sometimes not.

Thanks for everything. I don’t have currently time enough to debug deeply and prepare some PRs for Frontity but I hope to do it at some point.

19

Thanks for you detailed answer Ignacio :slightly_smiling_face:

Thanks, we’ll take a look.

You shouldn’t need to use any other tool than npm install and then npx frontity dev/build.

Local packages are properly linked when you have them installed with a local folder instead of a version in your package.json:

"dependencies": {
  "your-package": "./packages/your-package",
  "other-package": "./packages/other-package"
}

I see that you created another Frontity package in https://github.com/igmoweb/frontity-social-previews

NPM and GitHub don’t need to have the same content, so our recommendation is to develop your Frontity packages/themes inside a Frontity project and then publish them in npm with:

> cd packages/your-package
> npm publish
> cd ../other-package
> npm publish
> ...

That way, you avoid the need for tools like npm link (which is horrible) and people willing to contribute to your package can easily clone your repo, run npx frontity dev and start making changes.

My recommendation would be to move your frontity-social-previews plugin to the same repo than your theme or move it inside a Frontity project with just the minimum amount of things to showcase the package.

@juanma explained a while ago how to work with packages in a Frontity project on this topic: I made a theme from scratch and it's called Gaunt. Sorry it’s not in the docs yet.

22

Hey @igmoweb :wave: Just to let you know, this issue should now be fixed in: https://github.com/frontity/frontity/pull/506

23

Excellent! @mmczaplinski I’ve been trying but how can I use the development version in my site? I think that the bug is not released yet and I’d like to use the Frontity dev branch instead.

24

You’re right @igmoweb it’s not been released yet :slight_smile: We’ll push a release this week with this fix included. Will update you when that happens!