Forem: Abdessalam Benharira

Protect access to a Netlify site via GitHub Actions

Abdessalam Benharira — Mon, 17 Aug 2020 06:51:00 +0000

Recently I’ve published an article on how to set up CI/CD with GitHub Actions and Netlify. When working on my last project I needed to password protect develop and staging sites. Netlify already has solutions for access control like OAuth or password/JWT secret restriction or even through _headers file with basic authentication. But what I wanted was to password protect my sites at the beginning with a single access and then add other accesses on need and maybe only for some routes, all managed through GitHub actions and deployed for each site.

Password protection only works with the paid Netlify plans

Selective protection with basic authentication met my needs very well. The only problem is that at the beginning I had to push _headers file on GitHub with credentials, which did not seem very clean to me. So I thought it would be better to use GitHub environment variables in _headers file. The idea is to push this file without any credentials but simply a string that will be replaced. Here are some steps

1- Push _headers file with Basic-Auth followed by a string that will be replaced.

/* 
 Basic-Auth: SITE_ACCESS_USER:SITE_ACCESS_PASSWORD 
    X-Frame-Options: DENY 
    X-XSS-Protection: 1; mode=block 
    Referrer-Policy: no-referrer 
    X-Content-Type-Options: nosniff

What will interest us is Basic-Auth: SITE_ACCESS_USER:SITE_ACCESS_PASSWORD. You can also notice that with /* we will password protect all website routes. We could also set it only for specific routes and this is the advantage of this solution.

2- In your Github secrets add SITE_ACCESS_USER and SITE_ACCESS_PASSWORD

3- In your workflow add a Setup Netlify access step in which we have to retrieve SITE_ACCESS_USER and SITE_ACCESS_PASSWORD variables through GitHub secrets. Then we try to find SITE_ACCESS_USER:SITE_ACCESS_PASSWORD matching pattern and replace it with our credentials with sed command.

- name: Setup Netlify access
  env:
    SITE_ACCESS_USER: ${{ secrets.SITE_ACCESS_USER }}
    SITE_ACCESS_PASSWORD: ${{ secrets.SITE_ACCESS_PASSWORD }}
  shell: bash
  run: sed -i.bak "s/SITE_ACCESS_USER:SITE_ACCESS_PASSWORD/$SITE_ACCESS_USER:$SITE_ACCESS_PASSWORD/g" $(pwd)/public/_headers && rm $(pwd)/public/_headers.bak

Voilà 🎉

Here is the full code for the GitHub workflow: https://gist.github.com/itsabdessalam/ee5dfe83d832bf5015b096016cc923f4

GitHub Actions deploy preview

Live password protected site

Useful links

Before you leave…
Thanks for reading! 😊

Get current device type with JavaScript

Abdessalam Benharira — Wed, 22 Apr 2020 06:35:55 +0000

When setting up some scripts, we need to know the current device type. Just take the example of analytics scripts or scripts that need to be loaded depending on the device. We will see through this article how to get the current device type with JavaScript using userAgent.

userAgent

userAgent is a property of the navigator object that indicates the user agent which the browser provides in HTTP headers.

With the value of this property we can test with a Regex if it contains some elements or not and then get the type of the device, tablet, mobile otherwise desktop. We can combine this test with the width of the current window.

Here is a function to get the device type

const getDeviceType = () => {
  const ua = navigator.userAgent;
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  if (
    /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
      ua
    )
  ) {
    return "mobile";
  }
  return "desktop";
};

userAgent cannot always give us the real device because it can be replaced easily, for example when we use bots the real device can be completely different from what is provided. And the same thing for browser infos. In this case, it will be better to check the availability or unavailability of some methods.

Let's try this function

desktop

tablet

mobile

Useful links

Before you leave…
Thanks for reading! 😊

Work on your personal branding as a developer

Abdessalam Benharira — Wed, 08 Apr 2020 07:16:00 +0000

Personal branding has become very important both personally and professionally in order to highlight your personality, your values and your skills. This approach seems very important to recruiters since it allows them to differentiate you from your competitors. We will see through this article "What is personal branding and how to work on it as a developer?"

What is personal branding?

Personal branding or personal marketing is an approach which consists in enhancing your image and skills through the marketing techniques usually used to promote a brand. Your reputation, your credibility, your career, your professionalism are all part of personal branding. To summarize well and take up what Jeff Bezos, the CEO of Amazon says:

Your brand is what people say about you when you’re not in the room

Build your personal branding

I will list some points that I think are important in the development of personal branding as a developer.

Develop your brand identity around a field that you master

The main idea is to position yourself in a field, but above all it is a question of defining what you like to do the most and what you are good at. As an expert in your field, you will be able to advise and provide your opinion on the various subjects.

Write some content on a blog

In my opinion, every developer should have a blog. There are several reasons for this. A blog can be a source of leads and the place where you will have an audience interested in your content. A blog allows you to express your ideas, to show your work, your discoveries and your expertise. It also allows you to gain visibility by appearing in the first google results if the content is relevant and responds to a certain request.

Be present on social networks

When we want to learn more about a person, a company or a brand, the first thing that we do spontaneously is to go on the Internet and try to find informations, we talk about e-reputation. The e-reputation brings together several points, we will mainly focus in social networks. In personal branding, it is important to consider social networks, it is through this that you publish content every week, every month or simply on a regular rhythm. In addition, by subscribing to some accounts, you will always be aware of news related to your field (technology watch). Also a detail and not the least, it is thanks to social networks that you convey the image you want and therefore have an effect on the way you are perceived by others. To be as close as possible to your community, it is really important to focus on sharing, answering questions and comments, in other words, interacting with others.

The main networks I use for example are Twitter, LinkedIn, Medium, Stack Overflow, Instagram, DEV Community, Product Hunt.

Attend talks and meetups

Whether it is talks or meetups on soft skills, good practices, new framework... These events are very interesting since they are a very good opportunity to learn about different subjects and get to know people with the same interest as you and with different technical backgrounds. A very good opportunity to develop your personal or professional network.

Promote and discuss about your work

You have to try to be as active as possible on GitHub, CodePen, Dribbble or even your own portfolio by working on side projects, which will be useful for yourself and for others. The idea is to see new concepts and the constraints that a project can impose during its development. You can also contribute to open source projects and help other developers by sharing your knowledge. We must not forget that teaching others is an effective learning strategy to strengthen or deepen some acquired knowledges or even new things.

Do hackathons and code challenges

A hackathon is an event that brings together teams (developers, UI/UX designers, marketers...) where the goal is to develop a project, which is generally an application, a software, a platform answering a specific problem... This project must be developed over a given period, a day, a night or a weekend. For code challenges, it is the same principle but the idea is most often to solve exercises online. These two types of challenge are a good way to learn, to make yourself known to other developers and to establish again a personal or professional network with which you will maybe work with in the future.

Be a brand or company ambassador

To make it simple, in marketing, an ambassador is a person who promotes a brand, a product or a company spontaneously. For my part, I was ambassador for Orange Start-up/Viva Technology for two years and this allowed me to have open doors to several opportunities. Being an ambassador is a real plus that clearly boosts your CV. This shows that you have taken the time for these types of initiatives and acquired some soft skills. An important element to stand out during a job interview.

Before you leave…
Thanks for reading! 😊