Personal blog

👨‍👩‍👧‍👦 Community 🎬 Showcases
11

Thank you for collaborating and your advice is always very useful.

It would be extraordinary if it is loaded only if you are in the post, please help me with it

2 Likes
12

Hi @jesus.designer!

I’ve just opened a Pull Request with the changes needed for the code-splitting, so it just loads when a pre tag is present.

I’ll try to explain it better on Monday and work on the documentation for this, but if you have any questions don’t hesitate to tell us :blush:

1 Like
13

Actually it only loads that code when the React component is included, so only when the post has a <pre> tag.

Mario will prepare the guide next week :slight_smile:

1 Like
14

By the way, are you using Gutenberg code blocks? Why the brush: class?

15

It´s the way of WordPress .com has mark the language.
I have used Syntaxhighlighter Code block, but soon I will change to own WordPress .org

16

Ohh, I see. I didn’t know that block, only the regular Code one.

So this one outputs:

<pre class="brush: jscript;" title=""> var a = "A"; </pre>
17

Yes!

18

Oh Thx! I’m learning a lot

19

I have created a proper builder for Now. That means the npx frontity build happens on the cloud, not on your computer and you can put the build folder in your gitignore file.

I have not published it yet to npm but I’ll try to do it as soon as possible :slight_smile:

This is the repo:

20

I’ve published the version 1.0.0 of the builder: https://github.com/frontity/now-builder

Docs are updated as well: https://docs.frontity.org/installation-and-deploy/deploy-on-now

You should be able to remove all the files of your /build folder, add build to the .gitignore file so they don’t get committed to github, change the now.json file, and get new deploys each time you push code to github.

Let us know if everything works as expected.

21

I have already updated the blog and it is working :+1:
I change the API server to my own WordPress, next steps Yoast API and Gutenberg blocks

2 Likes
22

Awesome!

@david is working on the yoast plugin and @SantosGuillamot is investigating the best way to support Gutenberg, probably with a package :slight_smile:

1 Like
23

Oh, and I saw you’ve added disqus comments! That’s great. We had a package in the past for disqus-comments and we’ll migrate it to the new framework as well in the coming months.

1 Like
24

Hey @jesus.designer, I’ve been taking a look at your site again. I think you can improve the LightHouse score if:

  1. You can update to the latest version of Frontity (which fixes a problem with the lazy loading of images).
  2. Disqus is loading a lot of JS/CSS files, so you could use our useInView hook to lazy load the it when the user scrolls down. Something like this (I’m doing this from memory, I haven’t tested it):
const Comments = () => {
  // It appears 600px before this div enters the viewport.
  const [isVisible, ref] = useInView({ rootMargin: "-600px" });
  return (
    <div ref={ref}>
      {isVisible && <Disqus />}
    </div>
}
  1. Instead of using a CSS request to load the fonts, you can include them in your Frontity project and embed them in the HTML. That way you save a blocking CSS request and several Font requests.

What do you think? Do you want to try? :slight_smile:

25

@luisherranz Are these update instructions up to date?

https://docs.frontity.org/guides/keep-frontity-updated

26

Oh! Thank you, I get to work
:white_check_mark: Updated dependencies and fixed lazy loading of images
:white_check_mark: Implemented useInView
:white_check_mark: Embed fonts

But, I have a feeling that the rootMargin parameter is not working, can you help me?

27

I think so, it worked perfectly for me

28

Uh, maybe it’s rootMargin: "600px". Did you try?

29

Hey, awesome. The blog post went from 43 to 86 with just those changes :slight_smile:

40
40945×171 13.8 KB

We will add a Performance section in our docs to teach about all these small optimizations.

2 Likes
30

Simple and powerful tips, Thx :clap: