DEV Community: Antoine Amara

How I Prepare The Hacktoberfest

Antoine Amara — Wed, 22 Sep 2021 08:00:17 +0000

In this post, we'll see how I prepare and organize my contributions for the Hacktoberfest. Be free to adapt this to your need.

First, What is the Hacktoberfest?

What is the Hacktoberfest

Hacktoberfest is an event for promoting open source. It starts on the 1st of October and finishes on the 30th of October. It encourages the community to contribute to open source by completing pull requests (4 PR at least), participating in events, and make donations. For more info, go on on the Hacktoberfest website.

To participate and complete four pull requests, we have to choose some projects to contribute.

Choose some projects for contributions

One thing to do, especially if it is your first contribution to open source, is to find some projects. In my opinion, it is great to choose some technologies and software you use every day. An example for me is my password manager, Buttercup (buttercup.pw). I love to contribute to it because it is helpful for the community. Moreover, it is a satisfaction to see and use my updates in the product.
So, the first thing to do is to list some projects you like, for example:

    * Buttercup desktop
    * Tldr
    * Github Cli
    * Ghost writer
    * NodeJs
    * Emacs
    * React
    * Redux
    * GraphQL

Note: try to prioritize the list. Here I will choose some issues on buttercup-desktop and tldr-pages first.

Now, it is time to choose some issues and organize them to participate in the Hacktoberfest.

Choose and organize your issues

When you know the projects you want to contribute to, let's search for some issues.

Note: If you don't have any projects, wait 1st of October, go to the Hacktoberfest website, you have a section with a list of available issues you can contribute.

Create a table to organize your work

The first step is to create a Trello (or any project organizer like Github project, Gitlab project, Jira) and create some columns to add your potential contributions like bellow:

I create five columns:

Issues Backlog: the list of potential issues you want to resolve.
In Progress: the in-progress work, you are resolving the issue
PR Open: A pull request is open in the project repository and, the maintainers are reviewing your work.
Done: the maintainers merged the pull request.
Rejected: the issue is not opened for contribution anymore.

The next step is to add some potential issues to your backlog.

Choose some issues

Now, let's choose some issues. Go to Github on a project you choose. If it is your first contribution, choose any issue labeled with Good First Issue or Hacktoberfest (if it exists).

After you choose an issue, create a card in your backlog. Add at least the project name, the title and, a link to the GitHub issue. You can add additional notes if you need them.

Try to find between 8 to 10 issues for your backlog because some issues will not be available when you start the Hacktoberfest.

Now, you are ready to contribute and realize at least 4 PR for the Hacktoberfest event.

The last step is to wait until the 1st of October, register to the Hacktoberfest website with your Github account, and start the challenge.

Note: do not forget to add a comment to the issue when you begin to work on it. It permits the maintainers and other contributors to know if the issue is available.

Conclusion

I love the Hacktoberfest. It is a good event for promoting open source. I participate in it to lock some time at least one month per year for my contributions.

If you never contribute to open source, don't be afraid and go for it. The community will welcome you well and help you to make your first contribution. It was the case for me. My first contribution was on NodeJS and, the maintainers were super great with me.

I love to contribute to projects I use every day, like Buttercup desktop or TLDR pages.

So, Good Hacktoberfest 2021 to everyone. I expect we can help open source again this year ;)

How To Integrate SVG For Website And React App With Webpack

Antoine Amara — Wed, 08 Sep 2021 08:00:15 +0000

In this post, we will see how to use SVG images in a website and React app. We'll learn how to integrate, simplify, optimize and automate the use of SVG with Webpack.

What is SVG

Scalable Vector Graphics is an XML-based vector image format. It's an open format supported by the W3C. All modern browsers (Firefox, Chrome, Opera, Safari, Edge) have SVG rendering support. W3C create this format for websites a few years ago. Let's take a look at some advantages of SVG:

Scalability and resolution: this is the main advantage. It doesn't use pixels but vector computation, so the image is scalable and is adapted to all screen resolutions.
High performance: the SVG format is light and, the browser can render it fast.
DOM styling: the SVG can be inline to the HTML. So, CSS can style it, and javascript can manipulate it as a DOM element.

HTML5 and the SVG format

State of the support of SVG format

SVG stable version is the SVG 1.1-second edition. Almost all browsers have great support for SVG rendering. Note, the specification is not trivial, and browsers don't implement all specs. For more details about SVG 1.1 browser support, see caniuse.com.

After this introduction, let's see how to load SVG.

How to load SVG as an image

The IMG tag can load the SVG as an image. With an IMG tag, the image is not vectorial anymore, and the advantage of scalability is lost.

index.html



<body>
  <img src="img/example.svg" />
</body>

How to inline SVG

Another way to display an SVG is to inline the XML directly into the HTML file. It's the better way to use SVG because the browser will compute the vectors and keep all advantages of it.

index.html



  <body>
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100px 100px">
      <circle r="50px" cx="50px" cy="50px" fill="#08415c" />
    </svg>
  </body>

We have seen how to manually add SVG images into a static website. The aim is now to automate this operation with Webpack.

Website integration through Webpack

Almost every website and web app use Webpack as a bundler to apply some operations on the assets. An easy way to make the SVG integration is to use a Webpack plugin to automatically inline the SVG files' content to the bundled HTML.

Let's use html-webpack-plugin to manage the HTML files as a template with Webpack. We can use html-webpack-inline-svg-plugin in addition to this one to manage SVG into our HTML template. This plugin can easily inline some SVG's to HTML files by simply using an IMG tag with an "inline" attribute.

Let's install these plugins:

shell



# NPM
npm install --save-dev html-webpack-plugin html-webpack-inline-svg-plugin
# Or Yarn
yarn add -D html-webpack-plugin html-webpack-inline-svg-plugin

Now, add some configurations to manage HTML and SVG, add it to webpack.js (or webpack.comon.js if you split the configurations into multiple files).

webpack.common.js



...otherImports
import HtmlWebpackPlugin from "html-webpack-plugin";
import HtmlWebpackInlineSVGPlugin from "html-webpack-inline-svg-plugin";

module.exports = {
  ...otherWebpackConfigs,
  plugins: {
    ...otherPluginsConfigs,
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "src/index.html",
      chunks: ["main"]
    }),
    new HtmlWebpackInlineSVGPlugin({
      runPreEmit: true,
    }),
  },
};

To inline an SVG, you have to use the IMG HTML tag and add an inline attribute. Webpack will replace the tag and inline the XML from the file.

index.html



<body>
  <img inline src="src/img/logo.svg">
</body>

Note: the image path is a relative path from the project root. It's because I add src/img/ and not img/.

We know how to integrate SVG into a static website. Now, let's see what to do if we use React to construct the frontend.

React app integration

How to integrate SVG with create-react-app

create-react-app is the easiest way to init a React application. It comes with some Webpack configurations.
The first way to load an SVG is to import the file to your component and load it as an image.

App.js



import logo from "./img/logo.svg";

const App = () => {
  return <div>
    <img src={logo} alt="Logo" />
  </div>
}

Or to directly inline the XML into the JSX:

App.js



const App = () => {
  return <div>
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 100px 100px">
      <circle r="50px" cx="50px" cy="50px" fill="#08415c" />
    </svg>
  </div>
}

But, react-script (the component used by create-react-app) can use the Svgr plugin to convert the imported SVG as a component. The created React component will inline the XML from the SVG file inside the DOM.

App.js



import { ReactComponent as Circle } from "./img/circle.svg";

const App = () => {
  return <div>
    <Circle />
  </div>
}

Now, we can use SVG with create-react-app, but it is interesting to know more about the configuration of Webpack to convert an SVG image to React component.
Let's see how to integrate SVG with a custom Webpack configuration for React application.

How to integrate SVG with a custom webpack configuration

We have seen react-scripts use the Svgr plugin to create React component for inlining SGVs in the DOM.
Let's deep dive into the Svgr configuration with Webpack:

First, install the Svgr webpack plugin:

shell



# npm
npm install --dev @svgr/webpack
# or with yarn
yarn add -D @svgr/webpack

Next, let's configure Webpack:

webpack.common.js



module.exports = {
  ...otherWebpackConfigs,
  module: {
    rules: [
      ...otherAssetsRules,
      // intercept images format
      {
        test: /\.(png|jp(e*)g)$/,
        use: [{
          loader: "url-loader",
          options: { ...loaderOptions  }
        }]
      },
      // intercept svg and use svgr to convert them to React Components
      {
        test: /\.svg/',
        use: ["@svgr/webpack"],
      },
    ],
  },
};

Finally, let's import and easily inline an SVG into a component:

App.js



import Circle from "./img/circle.svg";

const App = () => {
    return <div>
      <Circle />
    </div>
}

Now, we can use SVG in a website and React app. The last step is to optimize SVG to load it quickly.

How to optimize SVG contents

SVG files can contain redundant and useless information, especially when they are created with an editor. We can safely remove the useless information from the XML. SVGO (SVG Optimizer) is here to automate these operations.

Note: the html-inline-svg-plugin already uses SVGO to optimize SVG before inlining them into the HTML.

Install SVGO cli:

shell



# NPM
npm install -g svgo
# Or Yarn
yarn global add svgo

To optimize one SVG:

shell



svgo img/test.svg

To optimize all SVG files within a directory:

shell



svgo -f ./img

Automate SVG optimization with webpack

Webpack can use SVGO with svgo-loader:

Install the loader:

shell



# NPM
npm install -D svgo-loader
# Or Yarn
yarn add -D svgo-loader

Add the loader to Webpack configurations:

webpack.comon.js



module.exports = {

  ...otherWebpackConfigs,

  module: {

    rules: [

      ...otherAssetsRules

      {

        test: /.svg/,

        use: [...otherLoadersForSVG, 'svgo-loader'],

      },

    ],

  },

}

Conclusion

W3C creates SVG for the web and, it is good to display a logo, to use some icons or illustrations for a website or a web application. Webpack can easily handle SVG optimization and inlining for complete integration to web apps.

Finally, this article presents the integration for Webpack but, some alternative exists for other bundlers (parcel, ...) and other UI frameworks (VueJS, AngularJS, ...).