
As a front-end developer, you may have encountered situations where your clients ask you to automate parts of their workflow. Luckily, you don’t need to code solutions yourself as there are many services available that you can easily integrate with your customer’s website to streamline responding to client inquiries, sending out newsletters or managing subscriptions to your marketing communications, all while ensuring you comply with applicable data privacy laws and regulations. 

## Use case background

I recently assisted a colleague in coding a custom intake form for her client’s website as per the designer’s specifications. Since the website is hosted on Netlify, we simply enabled the form detection from the Netlify dashboard to handle the submissions. 

Once we made the form look and function as intended, we also wanted to add an opt-in input of type ‘checkbox’ below the form so that when the user submits the intake form they can also subscribe to the mailing list. 

We wanted to achieve this with minimal to no code, so we looked at an automated tool that we could use with our existing tech stack—enter Zapier. Since the client intended to use MailerLite for sending their monthly newsletters, we took advantage of the easy integration service provided by Zapier and created a Zap that would automate the process for us.

To recap, the three services we used were:  

 - Netlify—a popular platform for building and hosting websites. It also provides a built-in form submission service that allows you to create custom forms for your website and have them delivered to your Netlify dashboard as well as to your email service of choice.
 - MailerLite—a powerful email marketing tool that allows you to create and manage email campaigns.
 - Zapier—a versatile automation tool that allows you to connect different apps and services.

 ## Integration process

 First off, we used the dedicated <a href="https://zapier.com/apps/netlify/integrations/mailerlite" target="_blank" rel="noopener noreferrer" className="text-link">Netlify and MailerLite template</a> as a starting point. To do the same, you only need to create a Zapier account and connect it to your Netlify and MailerLite accounts.

However, this template did not apply to our use case out of the box—it added all new inquirers’ emails to the mailing list. Since we wanted our users to give us explicit consent to also add them to the newsletter group, we created a simple checkbox type input in the frontend like so: 

```
 <input id="newsletter" type="checkbox" name="newsletter" value="newsletter">
 <label for="newsletter"> Please keep me updated with your latest news! Unsubscribe anytime.</label>
```

Then, we added one more step in our Zap—a filter that would check if ‘Data newsletter’ in our Netlify form would have the ‘newsletter’ value and only then add the person’s email to the mailing list. Please note that you can call this value in your form whatever you want as long as it’s relevant to your purpose. 

Netlify would only add the ‘newsletter’ value to the form details if the person has checked the ‘Please keep me updated with your latest news!’ box. If your Zap doesn’t find this value in the Netlify form, the process stops right there and doesn't continue to create a new subscriber in the mailing list. 

To speed up setting up your Zap, feel free to use <a href="https://zapier.com/shared/opt-in-newsletter-signup-trigger-upon-netlify-form-submission/18871f228a32003c7beed7f0b7f777c495f2d6e1" target="_blank" rel="noopener noreferrer" className="text-link"> my template </a>.

This template has three steps: 

1. A ‘Triggers’ section— here, you select the website and Netlify form that you want to use for the integration.
2. A ‘Filters’ section—here you select the ‘newsletter’ value to filter the form submissions that should be added to the MailerLite list.
3. An ‘Actions’ section— where you select the MailerLite list that you want to add new subscribers to.

Assuming you already have a form, please ensure that the data passed in the Zap sections described above is dynamically pulled from your Netlify form. Once you are happy with how it looks, just hit ‘Publish’ located in the top right corner of your Zapier editor and your Zap will become active.

That's it! Your Zap is now enabled and will automatically add new subscribers to your MailerLite list whenever a user submits the form on your Netlify site.

## Side notes

1. If you want to test or use this Zap with data coming from your form submissions, please ensure you do so after you’ve connected your website to a custom domain in your Netlify dashboard and allowed enough time for the DNS records to propagate. The domain that Netlify generates when building your project with the .netlify.app extension will not work.  
2. If you're a first-time user of MailerLite, make sure you verify and authenticate your domain before you test your Zap and implicitly your newsletter signup, otherwise it won't work. Head over to their blog to <a href="https://www.mailerlite.com/help/how-to-verify-and-authenticate-your-domain" target="_blank" rel="noopener noreferrer" className="text-link">read the steps</a> on how you can do that.
3. If you need additional steps or filters, you can click on the ‘+’ button located in your Zap editor, in between the three steps discussed above. 

## Conclusion

In this article, you have learned how quick and easy it is to integrate Netlify forms with MailerLite to automatically add new subscribers to your list. By using Zapier, you can easily connect your Netlify site with MailerLite and streamline your clients’ email marketing efforts without writing additional lines of code.

I hope you'll find this article helpful. If you have any questions please don't hesitate to contact me.




From this article, you'll learn how to quickly integrate Netlify forms with MailerLite using Zapier to create a Zap that will automatically add new form submissions as new subscribers when the users opt-in.

A Super Easy Integration That Streamlines Your Customer’s Marketing Efforts


<small>Last updated: December 10 2023</small>

As a front-end developer, it is crucial to establish secure coding habits early on. In honor of Cybersecurity Awareness Month, this article aims to assist beginner front-end developers in setting security headers for their Jekyll projects. By implementing the recommended security measures, developers can protect their websites from potential threats and ensure a safe browsing experience for their users.

## Importance of Setting Security Headers

Setting security headers is essential for safeguarding your project against various vulnerabilities. However, there is no one-size-fits-all security policy for all projects. To establish an effective security policy, you must consider factors such as the strictness of the policy, the desired resource loading behavior, and other project-specific requirements.

## Common Security Headers

1. **HSTS (HTTP Strict Transport Security):** This header ensures that all communication between the browser and the server occurs over a secure HTTPS connection. Example: `Strict-Transport-Security: max-age=31536000; includeSubDomains; preload`
2. **Content-Security-Policy (CSP):** This header controls the resources that a browser is allowed to load. Example: `Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' https://example.com`
3. **X-Frame-Options:** This header prevents clickjacking attacks by restricting how the page can be displayed in a frame or iframe. Example: `X-Content-Type-Options: SAMEORIGIN`
4. **X-Content-Type-Options:** This header prevents MIME-sniffing. Example value: "nosniff"
5. **Permissions Policy:** This header controls browser features that a webpage can access. Example: `Permissions-Policy: camera=()`. This example specifies that the camera is disallowed on the page and all framed pages.
6. **X-XSS-Protection:** This header is used to help mitigate cross-site scripting attacks. Example: `X-XSS-Protection: 1`. However, modern browsers rely on stronger Content-Security-Policy implemetation to prevent XSS attacks. The current best practice is not to set this header or set it to 0. Read more about this and the other security headers in the <a href="https://infosec.mozilla.org/guidelines/web_security" target="_blank" rel="noopener noreferrer" className="text-link"> MDN docs. </a>

## CSP Complexity and Adjustments

While most security headers are straightforward, the Content-Security-Policy (CSP) requires additional attention. This is because the CSP includes directives specific to the resources your project loads content from and may necessitate constant readjustment. As your project evolves, you may need to modify the CSP to accommodate new resources and functionality.

## Setting Security Headers

Let's assume that you have created a project with Jekyll and you deploy it on Netlify. To set security headers, you can follow these steps:

1. Create a `_headers` file in the project's root directory.
2. Add all the necessary security headers using the appropriate syntax. Example:
``` 
/* 
X-Content-Type-Options: nosniff 
/* 
Referrer-Policy: strict-origin 
```
   
3. In the `_config.yaml` file, add the line `include: ["_headers"]`.
4. Deploy the project on Netlify for the security headers to take effect.

## Setting CSP — Two Ways

So far in my projects, I have experimented with two ways to set the Content-Security-Policy (CSP) for different projects. Please do additional research to ensure you set the CSP that suits your unique project needs. 

### Automatic Approach 

1. Install the `jekyll-content-security-policy-generator` plugin as per the instructions on its <a href="https://github.com/strongscot/jekyll-content-security-policy-generator" target="_blank" rel="noopener noreferrer" className="text-link">GitHub page</a>.
2. The plugin automatically generates hashes for the resources (images, styles, scripts, frames) it finds on your website using the sha-256 cryptographic hash function.
3. The CSP directives will be added to your project's head as a `<meta>` tag upon successful installation.
4. A limitation of this approach I have observed is that not all external resources are added to the CSP.

### Manual Approach

When configuring the directives of the Content Security Policy (CSP) in the `_headers` file, it is important to understand which external resources your website fetches content from and what you want the CSP to allow or block. Here's how you can manually approach this process:

1. Determine the scripts and external resources your project fetches content from. If you only want to load resources from your domain, you need to set directives to `self`. However, if you utilize external resources like a 3rd party animation library, fonts, or images from an external cloud, you must include them in the CSP.
2. Utilize a tool like <a href="https://docs.report-uri.com/setup/wizard/" target="_blank" rel="noopener noreferrer"> Report-URI CSP Wizard </a> to identify the resources that need to be added to your allowlist in the CSP. Create an account with Report-URI and add the provided link to the head of your project. This will enable a read-only CSP that will detect items on your site, which you can then choose to allow or block from the Report-URI dashbord associated with your website. Once you have reviewed and approved these resources, you can add them to your CSP.
3. Define the CSP directives in the `_headers` file alongside other security headers. It is important to note that host whitelists can frequently be bypassed. To mitigate this risk, it is recommended to use the `strict-dynamic` directive along with nonces or hashes for these resources. This ensures that only trusted scripts are executed.
4. If you do not have many 3rd party resources to add to your projects, you can manually handle this process to gain a better understanding of how things work. Most CDNs now come with an integrity attribute, ensuring subresource integrity by running the resources through a security hashing algorithm like sha-512. For instance, if you are using the AOS library, the CDN link will look something like this:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
```
To ensure that the script is loaded from the correct source, you only need to include the integrity value of this script in the CSP. Repeat this process for the remaining resources you have.

## Testing the Security Headers

To verify if the security headers have been applied successfully, follow these steps:

### For the Manual Approach

1. Open the developer tools in your browser.
2. Go to the network tab.
3. Refresh the page.
4. Click on the document's HTML (typically it's the first one listed) and check in the headers section for the headers you've specified. Please note: This step may vary slightly depending on the browser and its version.

### For the Automatic Approach

1. Open the inspector in your browser.
2. Go to the `<head>` tag and expand it.
3. Check for a `<meta`> tag that should look something like this: 

```html 
<meta http-equiv="Content-Security-Policy" content="frame-src 'self'; img-src 'self'; style-src 'self' 'sha256-rMnTUSuxgLddcNlMSx4iCGs5b7ce4g8N27D0OT00AXo=' 'sha256-7wa/lRg6rKXJI6ZdZTVoeayrZYcjHExhkuhlWqZpGrM='; script-src 'self' 'sha256-DpWm0UmsKLVi7t7KXl0EdDnMX7J663y1fPVnT5+8pLI='">
```

## Tools to Test Security Headers

To ensure the strength of your CSP, you can utilize the following tools:

1. **CSP Evaluator:** Paste your CSP into <a href="https://csp-evaluator.withgoogle.com/" target="_blank" rel="noopener noreferrer" className="text-link">the CSP Evaluator tool</a> to receive recommendations for you can improve it.
2. **Security Headers:** After deploying your project on Netlify, use <a href="https://securityheaders.com/" target="_blank" rel="noopener noreferrer" className="text-link">Security Headers by Probely</a> to identify any missing security headers or evaluate your current setup.

## Netlify plugin for setting CSP

If you usually host your projects on Netlify, you can now easily set up your Content Security Policy by enabling the CSP plugin from your project's dashboard. This integration sets a <a href="https://www.netlify.com/blog/general-availability-content-security-policy-csp-nonce-integration/" target="_blank" rel="noopener noreferrer" className="text-link"> dynamic CSP in combination with a nonce </a> through an edge function helping you increase your website's security. Make sure to <a href="https://github.com/netlify/integration-csp" target="_blank" rel="noopener noreferrer" className="text-link"> read the documentation</a> to correctly configure it. The best part is that it's SSG agnostic—I enabled the CSP integration on several Jekyll and Next.js projects more than a month ago and I’ve encountered no inconvenience so far. 

## Conclusion

Establishing good security practices early on is important for front-end developers. By setting security headers, you can protect your projects from potential threats. That's why encourage you to delve deeper into this topic, continuously learn, and stay updated with evolving security measures to ensure the safety of your websites and users.







In this article, I will explore how beginner front-end developers can set security headers in their Jekyll projects and share a few useful tools to make this task easier.

How to Set Security Headers in Your Jekyll Project



In the fast-paced world of software development, staying ahead of the curve is crucial. As a front-end developer, you not only need to build visually appealing and functional websites, but also ensure optimal performance and seamless user experiences. While the mere mention of dev tools may seem intimidating when starting out, embracing them early in your career can be a game-changer. 

In this article, I will explore why as a front-end developer, you should familiarize yourself with dev tools and how different tabs within these tools can simplify your work. From optimizing images to debugging code, let's dive into the power of dev tools!

## 1. Network Tab: Unleashing the Potential of Image Optimization

When it comes to web performance, image optimization plays a vital role. With the network tab in dev tools, you can analyze the performance impact of your images. Take, for example, using Cloudinary for image optimization.

Whether you're using it with the npm package and creating links for custom transformations of your images or simply using it for auto-optimization through the integration available in Netlify's dashboard, you want to make sure that you have configured it correctly before pushing it into production. 

By inspecting the network tab, you can assess the size and loading time of each image. This allows you to fine-tune your image optimization strategies, ensuring faster load times and enhanced user experiences.

## 2. Lighthouse Tab: Elevating Website Performance

Performance is a critical aspect of any website. Dev tools' Lighthouse tab provides you with a comprehensive performance analysis, highlighting areas for improvement. By running Lighthouse audits, you can assess various performance metrics, including page load speeds, accessibility, and SEO. 

Armed with this information, you can optimize your website's performance, boost search engine rankings, and provide an excellent user experience. 

If you want to know more about what key areas you should focus on to ensure the websites you build are easily found, I recommend watching this <a href="https://www.youtube.com/watch?v=BkDH55WDiDU&list=LL&index=12&t=5s" target="_blank" rel="noopener noreferrer" className="text-link"> technical SEO checklist </a> video.

## 3. Inspecting HTML and CSS: Unlocking the Mysteries of Design and Styling

Front-end developers often find themselves troubleshooting issues related to HTML structure, CSS styling, and the integration of third-party libraries. Dev tools' ability to inspect HTML and CSS allows you to identify what isn't working as expected.

By analyzing the structure and styles within the elements, you can pinpoint areas that require attention or override styles from imported libraries. This empowers you to fine-tune your design, enhance user experiences, and ensure consistency across different browsers.

A bonus utility of learning to inspect HTML and CSS is that whenever you find an interesting section on a website that you like, you can inspect it to see how it was built. Afterwards, you can try to recreate it and customize it to fit your aesthetics and functionality. It's important to clarify that this process is about learning from bigger brands and understanding their techniques to enhance your own skills and expand your toolkit, rather than directly copying or stealing their work.

## 4. Console Errors: Debugging Made Easier

Front-end developers know that debugging is an inevitable part of their work. When you're growing, you're bound to make plenty mistakes and it's important to catch errors early on so you can build better coding habits. 

The console tab in dev tools serves as a virtual companion, helping you identify and fix errors efficiently. By monitoring the console, you can quickly detect missing scripts, JavaScript errors, or compatibility issues. Armed with this information, you can tackle bugs head-on, ensuring a smooth and error-free user experience.

You can think of it this way: instead of getting disheartened by the console 'complaining' about your faulty code or integrations, be glad that it's drawing your attention to reasons that, later on, users may leave your website for.

## 5. Local Storage: Ensuring Smooth Cookie Handling

Cookies are essential for storing user data, preferences, and authentication information. Dev tools' local storage feature provides front-end developers with valuable insights into how cookies are being stored and utilized. 

By checking local storage, you can verify if cookies are working as intended or identify any issues if they are not being stored properly. This helps you address any potential cookie-related challenges and ensure seamless functionality.

## Conclusion

In today's competitive digital landscape, as a front-end developer, you must leverage every advantage to deliver exceptional websites. Embracing dev tools and exploring the different tabs within them is a powerful way to simplify your work, optimize website performance, and overcome challenges.

By utilizing features like network analysis, local storage inspection, HTML and CSS inspection, console error monitoring, and Lighthouse audits, you can unlock the full potential of your projects. So, fear not—befriend dev tools and harness their capabilities to take your front-end development skills to new heights!

In this article, I will explore why front-end developers should familiarize themselves with dev tools and how different tabs within these tools can simplify their work.

Curated resources and tips

Progressive Web Application?

A Super Easy Integration That Streamlines Your Customer’s Marketing Efforts

How to Set Security Headers in Your Jekyll Project

Why You Should Befriend Dev Tools Early on as a Front-End Developer