Forem: Adam Wojnicki

React

Adam Wojnicki — Thu, 31 Mar 2022 16:22:46 +0000

Hello, DEV community!

Today I was struggling with a video element in a react app. I was trying to insert an video to a website that would play looped in the background.

That would require adding autoPlay, loop and muted attributes to the video tag like here:

// App.jsx //

import mutedVideo from './media/muted_vid.mp4'
import './App.css';

function App() {
  return (
    <div className="App">
      {/* VIDEO */}
      <video autoPlay muted loop>
        <source src={mutedVideo} />
      </video>
      {/* //VIDEO */}
    </div>
  );
}

export default App;

For some reason during source code bundling, React keeps ignoring muted attribute. So the final outcome in production looks like this:

After a while of research and browsing Stack Overflow, I learned that it is a common issue in React that still hasn't been solved for years!

I've also found a workaround solution to overcome this bug. The solution is creating my own Video component:

// components/Video.jsx //

export default class Video extends Component {
  state = {
    html: "",
  };
  componentDidMount() {
    const src = this.props.src;
    const html = `
        <video autoPlay muted loop>
            <source src=${src} />
        </video>
      `;
    this.setState({ html });
  }
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>;
  }
}

This component takse src of a video as a prop and returns a <div> with directly injected <video> tag and it's attributes.

Here's App code with new Video component:

// App.jsx //

import mutedVideo from "./media/muted_vid.mp4";
import Video from "./components/Video";
import "./App.css";

function App() {
  return (
    <div className="App">
      {/* VIDEO */}
      <Video src={mutedVideo} />
      {/* //VIDEO */}
    </div>
  );
}

export default App;

Now this gave me result that I expected in production output:

As an effect, the video can be easily played in the background.

IMPORTANT NOTE! dangerouslySetInnerHTML is not called "dangerous" for no reason. Even though it is safe to use it in this particular case, in many other cases it should not be used unless you really know what you're doing :). Here is more detailed article about this property.

Did you happen to deal with such an issue? Please share your story in the comment section.

Happy coding!

Follow me on Twitter

Importance of frontend performance optimization

Adam Wojnicki — Wed, 30 Mar 2022 14:37:31 +0000

You might have at least once such issue like me. Browsing posts on a social media app (whether it be Facebook, Instagram, Twitter), your eye got caught by a product ad post and you'd like to know something more about it. You click on the 'Learn more' CTA and a website starts loading... and it loads and it loads... seems to be loading forever. You get impatient and decide not to wait for this page to load and loose interest in the product after all.

I had this kind of situation couple of times and it made me think about the importance of well optimized websites.

What does frontend performance optimization mean?

In simple words, it means making a website or app work fast, seamlessly with no stutters giving the best user experience.

Why is it so important?

The example above describes it pretty well. You would not like your clients/users/visitors get impatient while trying to reach you.

Making your potential customers wait for too long makes them less interested in your offer. This article describes well how poor performance can affect your conversion rate.

Poor site's performance can also make it harder to reach through search engines. Slow websites are indexed in lower positions by Google.

How can I measure my websites' performance?

You may of course launch a website in your browser and check loading time with your watch, BUT...

There are professional tools online that will measure websites' performance an will give you important notes and valuable feedback on what can be done in order to make it better and what are potential gains.

Google's PageSpeed Insights for example will give you overall performance and UX ratings. I personally recommend this tool since it can tell a lot about what can be improved to increase pages' performance, accessibility, SEO and best practices.

Common performance issues

Here I'll describe most frequent issues that make your website slow and give you advice how can you address them:

Too large image sizes - Pay attention on images sizes. Sometimes images downloaded from Unsplash or Pexels can be up to 6000px wide or even bigger. This is definitely too much even for a desktop or laptop screen. Reducing image width down (with a graphic editor of your choice) to 1920px will make huge difference in file size. Reducing picture size for mobile devices an using responsive picture tags will increase performance on mobile devices.
Additionally it's worth compressing image file sizes without quality loss. TinyPNG will take care of it for you.

Too many css and script links in HTML file - This may cause too many http requests being made in order to load necessary style sheets and JavaScript code. This can be handled by bundling multiple css files and js files into single ones. Doing it manually might take forever to do. This is why I started to get interested into JavaScript bundlers. The most popular ones are Webpack, Parcel, and my latest favorite pick - Vite.

Website waiting for all images to load - By default an HTML document loads images from entire page. We don't need all images to load right at the start. This can be solved by lazy loading - a technique that makes images load as soon as they appear in the viewport. It is described in detail in an MDN doc here.

Conclusion

In my view, since majority of web traffic is being taken over by mobile devices, frontend optimization is a matter of high importance. Loading speed of a website can have huge impact on conversion rates, sales and customers' interest. Growing variety of tools lake bundlers and image compressors as well as new HTML features make it easier to make your website faster.

In short words - Don't make your visitors wait too long.

Cheers! :)

Follow me on Twitter

Simple Web Development Starter Pack for future projects

Adam Wojnicki — Sat, 25 Jan 2020 17:01:56 +0000

Hello DEV community!

I have created something that may make my (or your) life easier.
It's a simple boilerplate to use for new projects.
It includes basic setup with Parcel bundler, Babel, Sass and recommended ESLint configuration (can be easily configured with your favourite set).

Thanks to it I no longer have to spend time on configuring project from the scratch. I found it a good idea to share GitHub repo here with DEV community.

Here

Some of you may find it useful.
I am also open for any feedback and opinion on this. I would really appreciate it.

For now I wish you peaceful weekend and happy coding! :)

Adam