DEV Community: nh2_amine

Why and how I created and published my first browser extension

nh2_amine — Sun, 31 May 2020 17:15:55 +0000

Intro

In this article, I will tell you the story of how I came across a trivial development tooling problem, how I build a simple tool that solved this problem for me and the process I followed to publish this tool for others.

The problem

As a web developer that really suck at design, I am often inspiring myself from other websites designs that I find beautiful.
Most of the time I have to use the dev tools to inspect CSS to fin witch color code and/or font is used on the websites that pleased me.

In the past, I used Browser extension that tells you the color code of the element you'll be pointing at.

These two methods are pretty handy if you want the colors used on a page one at time.

But what if you wanted all the color palette and/or all the fonts that are used on a page. After a quick unsuccessful research, I decided to build that tool myself.

The solution

basic functionality

As I told you earlier, I am web developer so the most obvious choice for me was a Browser extension.

Now that the platform was chosen, I had to find the programmatic solution to solve my problem. After some googling around I found a javascript function that did exactly what i wanted:

getComputedStyle(elem)

With the result of this function I could access any css property I wanted such as color, backgrounColor, font-family \o/

Now all I had to do to get all the colors of all the elements was to loop over all the elements in the page and store the properties I was interested in.

The product

Now that I had solved the basic part of my tool. I had to find how to bundle this into a Browser Extension. Luckily now Chrome and Firefox extension share almost the same architecture for their extension. So building for these two platforms was really simple.

But first things first, How to build a browser extension ?

The recipe is pretty simple.

Create a manifest.json file This file has to look something like the following

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {
    "96": "icon_96.png",
    "128": "icon_128.png"
  },
  // We want to access the active tab and to write css variables to the clipboard
  "permissions": ["activeTab", "clipboardWrite"],
  "browser_action": {
      "default_icon": {                   
           "96": "icon_96.png",
           "128": "icon_128.png"
       },
       "default_title": "My custom tooltip",      // optional; shown in tooltip
       "default_popup": "popup.html"  // The html page that will contain the extension popup
  },
  "content_scripts": [ // the content that will be injected in all the page that matches the "matches" directives
   {
     "matches": ["<all_urls>"],
     "css": ["myStyles.css"], // optional
     "js": ["contentScript.js"]
   }
 ],
}

After creating a manifest.json file looks like the one above

Create the following files that will contain the business part of your extension:

contentScript.js: The js file that will be injected in every page and that contains the function that extracts all colors and fonts using getComputedStyle() function
popup.html: the extension popup content
popup.js: The js that will be loaded in the popup.html file and that will trigger the actions to retrieve contentScript.js functions results.

Testing In order to play around with your extension during development you have to load it locally using one of these methods.

If you use Google Chrome:

Open the Extension Management page by navigating to chrome://extensions.
The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
Enable Developer Mode by clicking the toggle switch next to Developer mode.
Click the LOAD UNPACKED button and select the extension directory. Load Extension

If you use Mozilla Firefox:

open Firefox
enter “about:debugging” in the URL bar
click “This Firefox”
click “Load Temporary Add-on”
open the extension’s directory and select any file inside the extension. The extension installs and remains installed until you remove it or restart Firefox.

And that's it! You can now use, test and debug your web extension.

When everything works as intended, It finally time to publish it for others to use.

Publishing

The are two main extensions store where can publish your web extension

The Chrome Webstore: There is a one time fee of 5$ to be able to submit web extension.
Add-on Developer Hub: It's free to sign-up and submit

After submitting my extension on both store, I am very glad that it has already been approved within an hour on the Mozilla add-on platform but it's still under review on the Chrome Webstore.

Thank for reading me! I hope you found this article interesting.

For those of you that are interested in using my extension here are the links:

Any feedback will be more than welcome!

(Edit)
June 2, 2020: Added the Chrome Web Store link

Adding a contact form to a Gridsome static website using FlexyForm

nh2_amine — Sat, 25 Jan 2020 15:47:32 +0000

Intro

For those of you who don't know about Gridsome, it's an open source static site generator based on Vue.js. If you want to learn more about Gridsome take a look at their official website and doc here

Pre-requisite

To follow this tutorial, you must:

Have basic knowledge of Vue
Install Node.js and npm ou yarn package manager.
Install gridsome CLI Tool

Create a Gridsome project

First of all we are going to create a Gridsome project using the following command line

gridsome create my-gridsome-site

After that go into the folder than we start the local development server

cd my-gridsome-site
gridsome develop

Once you get the build success message navigate to http://localhost:8000/

Now you should get you landing page up an running and it should look like the screenshot below

Adding a contact form

Now that we have our project up and running. It come's with a Home page and an About page. We are going to add a Contact page.
In order to do that, we are going to create a ContactForm component and a Contact page.

Creating the Contact component

First of all we create a new file named ContactForm.vue in the src/components folder. It's a really simple Vue component that should look like the following

<template>
    <form method="post" :action=action>
        <div>
            <label>Full name</label>
            <input type="text" name="fullname" />
        </div>
        <div>
            <label>Email</label>
            <input type="email" name="email" />
        </div>
        <div>
            <label>Message</label>
            <textarea name="message" rows="5"></textarea>
        </div>
        <button type="submit">
            Send
        </button>
    </form>
</template>

<script>
export default {
    name: 'ContactForm',
    props: ['action']
};
</script>

<style>
form {
  width: 100%;
}
form label {
  display: block;
  font-weight: bold;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

form input, form textarea {
  display: block;
  width: 100%;
  border-radius: 5px;
  font-size: 1.2rem;
  box-shadow: none ! important;
  outline: none ! important;
  border-style: none;
  background-color: lightgrey;
  -webkit-appearance: none;
}
form input {
  height: 2rem;
}
form button {
  background: none;
  box-shadow: none;
  border: 0;
  font-size: 1.2rem;
  border-radius: 5px;
  background-color: #00a672;
  padding: 10px;
  color: #fff;
  display: block;
  min-width: 100px;
  margin:5px 0;
}
</style>

Creating the Contact page

In order to display our contact form, We are going to create a contact page.
So we are going to create the following file _src/pages/Contact.vue that will intergrate our freshly created component

<template>
  <Layout>
        <h1>Contact US</h1>
        <p>If you have any question or request please fill in the form below</p>
        <ContactForm action="#"></ContactForm>
  </Layout>
</template>

<script>
import ContactForm from '~/components/ContactForm.vue'

export default {
  components: {
    ContactForm
  }
}
</script>

We can now navigate to our newly created using this url http://localhost:8080/contact

It should look like the screenshot below

And finally we'll add a new entry in the navigation menu to link to our contact page.
To do so, we just have to edit template in the src/layouts/Default.vue file to make it look like bellow

<template>
  <div class="layout">
    <header class="header">
      <strong>
        <g-link to="/">{{ $static.metadata.siteName }}</g-link>
      </strong>
      <nav class="nav">
        <g-link class="nav__link" to="/">Home</g-link>
        <g-link class="nav__link" to="/about/">About</g-link>
        <g-link class="nav__link" to="/contact/">Contact us</g-link>
      </nav>
    </header>
    <slot/>
  </div>
</template>

The top navigation menu is now ready

Handling the form submission

Now that we have this magnificent contact form. We must handle the form submission.

As Gridsome is static form generator we don't have any backend service and we have to connect it to an API or some backend service.

For this tutorial we are going to use FlexyForm. It's a service that provide form submission endpoints.

You just have to fill the "action" attribute of any form with the URL the service provides and you will receive an email for each submission.
They also provide you with a backend where you can see all your forms submissions.
You can check it out here if you don't want to bother creating and hosting an API for simple forms => FlexyForm

Once you are registered, you can create a form.
You can configure the email address you want to notify and the return URL.
Each form has a unique "form key".
This is the key that you can use in the submission URL below

<!-- Replace [YourFormKey] by the form key you get from FlexyForm-->
https://www.flexyform.com/f/[YourFormKey]

Once you have this URL we can set it as the action property of the ContactForm component in the src/pages/Contact.vue file:

<ContactForm action="https://www.flexyform.com/f/YouFormKey"></ContactForm>

And That's it! We have been able to create a contact form with fom submission handling on a static website without a line of backend code. All of that in less than 10 minutes of actual coding.

Thank you for reading me until the end. I hope you find it useful.

Cheers!!!

Adding a contact form to a Gatsby.js landing page using FlexyForm

nh2_amine — Fri, 24 Jan 2020 15:18:35 +0000

Intro

For those of you who don't know about Gatsby.js, it's an open source static site generator based on react. If you want to learn more about Gatsby take a look at their website and doc here

Pre-requisite

To follow this tutorial, you must:

Have basic Knowledge of React
Install Node.js and npm ou yarn package manager.
Install Git (as it used behind the scene by gastby-cli)
Install gatsby-cli installed

Using a Starter

With Gatsby and Git we have the possibility to start new projects using templates. In the Gatsby world they are referred to as starters. You can find all of them here.

For our demo project, I chose to use gatbsby-starter-sellar.

So here's the command to create the folder containing all the code to start our landing page

gatsby new gatsby-starter-stellar https://github.com/codebushi/gatsby-starter-stellar

After that go into the folder than we start the development server locally

cd gatsby-starter-stellar
gatsby develop

Once you get the build success message navigate to http://localhost:8000/

Now you should get you landing page up an running and it should look like the screenshot below

Adding a contact form

Now that we have fully functioning landing page. Let's add a contact form.
In order to do that, we are going to create a ContactForm component that we are going to add to our page.

Creating the ContactForm component

First of all we create a new file name ContactForm.js in the src/components folder. It's a really simple React component that should look like the following

import React from 'react'

class ContactForm extends React.Component {

  render() {
    const formStyle = {
      textAlign: 'left'
    }
    const buttonsStyle = {
      margin: '1rem',
      textAlign: 'center',
    }
    return (
      <form style={formStyle} className="form" action={this.props.action} method="post">
        <div>
          <label>Full name</label>
          <input type="text" name="fullname"/>
        </div>
        <div>
          <label>Email</label>
          <input type="email" name="email"/>
        </div>
        <div>
          <label>Message</label>
          <textarea name="message" rows="5"></textarea>
        </div>
        <ul className="actions" style={buttonsStyle}>
            <li>
              <button type="submit"  className="button special">Send</button>
            </li>
        </ul>
      </form>
    );
  }
}

export default ContactForm

Adding the ContactForm component to the landing page

Now that we have our component, let's append it to our landing page.
To do so we'll have to import our component into src/pages/index.js

import ContactForm from '../components/ContactForm'

Then we append a new section in the bottom of our Layout

<section id="contactUs" className="main special">
    <header className="major">
        <h2>Contact Us</h2>
        <ContactForm></ContactForm>
    </header>
</section>

And finally we'll add a new entry in the nav bar to ease the navigation.
To do so, we just have to edit _src/componenents/Nav.js file to make it look like this

import React from 'react'
import Scrollspy from 'react-scrollspy'
import Scroll from './Scroll'

const Nav = (props) => (
    <nav id="nav" className={props.sticky ? 'alt' : ''}>
        <Scrollspy items={ ['intro', 'first', 'second', 'cta', 'contactUs'] } 
currentClassName="is-active" offset={-300}>
            <li>
                <Scroll type="id" element="intro">
                    <a href="#">Introduction</a>
                </Scroll>
            </li>
            <li>
                <Scroll type="id" element="first">
                    <a href="#">First Section</a>
                </Scroll>
            </li>
            <li>
                <Scroll type="id" element="second">
                    <a href="#">Second Section</a>
                </Scroll>
            </li>
            <li>
                <Scroll type="id" element="cta">
                    <a href="#">Get Started</a>
                </Scroll>
            </li>
            <li>
                <Scroll type="id" element="contactUs">
                    <a href="#">Contact Us</a>
                </Scroll>
            </li>
        </Scrollspy>
    </nav>
)

export default Nav

Now we should have a wonderful contact form that looks like the this

Handling the form submission

Now that we have this magnificent contact form. We must handle the form submission.

As Gatsby is static form generator we don't have any backend service and we have to connect it to an API or some backend service.

For this tutorial we are going to use FlexyForm. It's a service that provide form submission endpoints.

<!-- Replace [YourFormKey] by the form key you get from FlexyForm-->
https://www.flexyform.com/f/[YourFormKey]

Once you have this URL we can set it as the action property of the ContactForm component in the src/pages/index.js file:

<ContactForm action="https://www.flexyform.com/f/YouFormKey"></ContactForm>

Now when I submit the form, I get the following Email

Tada! We have been able to create a contact form with form submission handling on a static website without a line of backend code. All of that in less than 10 minutes of actual coding.

Thank you for reading me until the end. I hope you find it useful.

Cheers!!!

I created and published my first SaaS! Here's the story

nh2_amine — Tue, 14 Jan 2020 19:56:06 +0000

The problem

If you are, like me, a web developer. I'm sure it already happened more than once that one of your relatives asked you "Hey, I need a quick, simple website for my business/project/hobby..." (you name it)

After the usual "Oh, not again..." that goes through your head, you decide to say "OK! Let's do this", then most of the time you build a simple static website with 2 or 3 pages and some contact infos or a contact form.

Now you have to build a script (PHP or Node.js depending on the hosting) to handle the form submission with the mail transfer. And of course you have to set or use an SMTP gateway or sometimes you have to create an account on one of the transactionnal email services and wire your script the service.

So the last that this happened to me. I've had enough and thought to myself:
"Wouldn't it be great if I could just plug an endpoint to all these forms and it would handle the submission for me then redirect to the page I choose".

The Search

So I started to look for a similar service and I stumbled upon Netlify Form and Formspree

The service I was really looking for was Formspree. As it provided me with a URL endpoint to set as the action attribute of any form and set the method to post and that was it. I would receive and email with the submitted data and I could also view all the form submissions.

The decision

I tested out Formspree and was pretty happy with it.
But as a developer, I thought that I could also build one by myself and it could be a good practice for my skills

There was already a validation for the idea as there was at least 2 (paying) services. So maybe It could also be a nice revenue source if it took off.

I let the idea sink a little bit, then I decided to give it a try.

The making

I decided to work on it on nights and weekends as I am currently working full-time. I built it with the stack I'm most comfortable with PHP/Symfony for the backend. I grabbed a free HTML/CSS template for the front and went with MariaDB as it handles JSON fields for the elastic part of the form submission handling.

It took me about a weekend to have a working backend and nice looking front-end.

It took me another weekend to integrate with Stripe to add recurring billing using the PHP SDK.

I also added a free tier to let small websites, as the ones I was mostly building for my relatives, use my service without worrying about free usage limit.

Now all that was left on my to-do list was "Find a name". I came with serveral names, but they were all already taken domain names. So the first name that I came with and that was available was FlexyForm.
So that was how FlexyForm.com was born.

Now What?

I am a real techie at the core. So I built a decent (in my opinion) service that I will be using for sure for my own needs. But now comes the most difficult part, spread the word about my SaaS. As I was a long time member, rather passive, of IndieHackers and Dev.to communities. For the first time, I got passed about my writer's block and found the courage to write about my project. Since it's the first time I think I have built something worth sharing. I hope it will inspire at least one person.

If you want to help me and test out Flexyform or maybe you find service helpful (who knows...), I will be more than happy to get feedback from you.

Thank you for reading me. I hope to be able to write again about the evolution of this project.