DEV Community: Julien Landuré

How to celebrate an achievement as an open source developer?

Julien Landuré — Tue, 30 Jun 2020 14:40:05 +0000

✏️ As an open source developer, I've maintained on GitHub a docker image since July 2017: an "Alpine Chrome" and now the image has been pulled more than 🎉 1 000 000 times 🎉 on the Docker Hub.

I wrote about it recently on Dev.to 👇

Crafting the perfect container to play with a Headless Chrome

Julien Landuré for Zenika ・ May 26 '20

#opensource #docker #testing #javascript

🎯 What can I do to celebrate this achievement?

🤔 I do not know what kind of celebration I could do! It's a big achievement from my point of view.
🚀 I've started with a tweet here

// Detect dark theme var iframe = document.getElementById('tweet-1277969952415215617-374'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1277969952415215617&theme=dark" }

😊 Disclaimer: I am not a designer and I've spent too much time designing the arrows to highlight the docker pulls: 1M information. Please do not judge it... and I've successfully added a :rocket: emoji on the screenshot.

🎉 What else?

💚 Do you have any kind of ideas or stories to share about celebrating your open source achievements?

Create a GIF?
Invite my friends to celebrate it in a restaurant?
[your turn]

⏱ 3 minutes to deploy your static Nuxt.js app on AppEngine

Julien Landuré — Tue, 09 Jun 2020 12:53:17 +0000

I’ve been deploying applications on serverless solutions since 2010. Recently, I discovered Nuxt.js and I wanted to create this post on how to quickly set up a static Nuxt.js app on AppEngine, the Google Cloud PaaS.

📝 Getting started with Nuxt.js

Nuxt.js is described as

The Intuitive Vue Framework
Build your next Vue.js application with confidence using NuxtJS.
An open source framework making web development simple and powerful.

It's very powerful! You can use it to create various architectures: SSR, SPA or Static renderings.
For this demo, we will be focused on the static feature using the nuxt generate command.

⚗ Create the project

For the demo, we will use a fresh new project. To do this, execute the npx create-nuxt-app command to create a simple Nuxt.js application.

$ node -v
v12.16.3

$ npx create-nuxt-app

create-nuxt-app v2.15.0
✨  Generating Nuxt.js project in .
? Project name nuxt-static-deploy-appengine
? Project description My glorious Nuxt.js project
? Author name Julien Landuré
? Choose programming language TypeScript
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
? Choose linting tools Prettier
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
...
🎉  Successfully created project nuxt-static-deploy-appengine

✅ Test locally

As described in the command line, run the npm run start script to get your app running on http://localhost:3000/.

Let's edit the index.vue and write this html:

<h2 class="subtitle">Hello Nuxt on AppEngine 🎉</h2>

And it works! Very easy to see our modification instantly.

🏗 Build it

To build the app statically, run the npm run generate command:

$ npm run generate

> nuxt-static-deploy-appengine@1.0.0 generate .../nuxt-static-deploy-appengine
> nuxt generate

ℹ Production build                                                    10:52:36
✔ Builder initialized                                                 10:52:37
✔ Nuxt files generated                                                10:52:37
ℹ Starting type checking service...                   nuxt:typescript 10:52:39

✔ Client
  Compiled successfully in 6.95s

✔ Server
  Compiled successfully in 1.13s


Hash: c5e482cb9772cddb1178
Version: webpack 4.43.0
Time: 6951ms
Built at: 05/27/2020 10:52:46 AM
                         Asset       Size  Chunks                         Chunk Names
../server/client.manifest.json    6.6 KiB          [emitted]              
       98f4a70ff71f0382866c.js   2.31 KiB       3  [emitted] [immutable]  runtime
       9fc3f5e914943c5b3a9b.js   2.97 KiB       2  [emitted] [immutable]  pages/index
                      LICENSES  389 bytes          [emitted]              
       a51444c83f14a6afaeb5.js    153 KiB       1  [emitted] [immutable]  commons.app
       d267ba93006b46dadaa8.js   49.2 KiB       0  [emitted] [immutable]  app
 + 2 hidden assets
Entrypoint app = 98f4a70ff71f0382866c.js a51444c83f14a6afaeb5.js d267ba93006b46dadaa8.js

Hash: fbd0c6af7579246a49e7
Version: webpack 4.43.0
Time: 1127ms
Built at: 05/27/2020 10:52:47 AM
                  Asset       Size  Chunks                         Chunk Names
818a9680ee5eeafdfb4b.js   3.05 KiB       1  [emitted] [immutable]  pages/index
              server.js   26.7 KiB       0  [emitted]              app
   server.manifest.json  145 bytes          [emitted]              
Entrypoint app = server.js
ℹ Generating pages                                                    
✔ Generated /

✨ Congratulations, we built our first Nuxt.js application!

ProTips: We can check the files in the dist folder or run it with npx http-server dist.

☁️ Deploy it on AppEngine

Then, to share the project with the rest of the world, we can deploy it on AppEngine. Appengine comes with a lot of features and quotas.

It is free for a basic usage thanks to its quotas BUT we have to enable billing to enjoy it. As a new customer, we get $300 to spend on Google Cloud Platform products during your free trial.

🛒 Create a project

Go to console.cloud.google.com and create a new Google Cloud Platform project.
Please save the [PROJECT_ID] of the project: you have to replace the nuxt-static-deploy with your [PROJECT_ID] for the rest of the post.

ProTips: we can retrieve the [PROJECT_ID] in the url of the web console like https://console.cloud.google.com/appengine/start?project=nuxt-static-deploy where nuxt-static-deploy is my [PROJECT_ID].

ProTips: To create a project to host your app, we can also use the gcloud projects create command. we need to enter a [PROJECT_ID], nuxt-static-deploy for example.

# Create a project 
$ gcloud projects create nuxt-static-deploy 
Create in progress for [https://cloudresourcemanager.googleapis.com/v1/projects/nuxt-static-deploy].
Waiting for [operations/cp.4929250122387435991] to finish...done.              
Enabling service [cloudapis.googleapis.com] on project [nuxt-static-deploy]...
Operation "operations/acf.803672e3-74b0-43e1-8a6b-3d37a4a0975b" finished successfully.

# List the billing accounts
$ gcloud beta billing accounts list
ACCOUNT_ID            NAME                                          OPEN
00ADEE-870384-XXXXXX  my_account                                    True

# Link the billing account to my project
$ gcloud beta billing projects link nuxt-static-deploy --billing-account=00ADEE-870384-XXXXXX
billingAccountName: billingAccounts/00ADEE-870384-XXXXXX
billingEnabled: true
name: projects/nuxt-static-deploy/billingInfo
projectId: nuxt-static-deploy

# Enable Cloud Build API
$ gcloud --project nuxt-static-deploy services enable cloudbuild.googleapis.com

✏️ Write the descriptor `app.yaml`

AppEngine supports various programming languages: python, go, java, php, nodejs etc.
To deploy static files, the best practice is to use the python37 runtime.

Let's create a file in .appengine/app.yaml

runtime: python37

handlers:
- url: /
  static_files: index.html
  upload: index.html
  secure: always
- url: /(.*)
  static_files: \1
  upload: (.*)
  secure: always

For more information on the descriptor file, please read this doc.

Don't forget to copy the file in our dist folder using this command cp .appengine/app.yaml dist/.

ProTips: We can add it to the build script in your package.json file.

🚀 Deploy your app

If this is the first you are using the Google Cloud Platform, you have to install the gcloud command line utility following the official page or using Homebrew.

Deploy our app using the gcloud app deploy command:

$ gcloud app deploy --project nuxt-static-deploy dist 

You are creating an app for project nuxt-static-deploy.
WARNING: Creating an App Engine application for a project is irreversible and the region
cannot be changed. More information about regions is at
<https://cloud.google.com/appengine/docs/locations>.

Please choose the region where you want your App Engine application 
located:

 [1] asia-east2    (supports standard and flexible)
 [2] asia-northeast1 (supports standard and flexible)
 [3] asia-northeast2 (supports standard and flexible)
 [4] asia-northeast3 (supports standard and flexible)
 [5] asia-south1   (supports standard and flexible)
 [6] australia-southeast1 (supports standard and flexible)
 [7] europe-west   (supports standard and flexible)
 [8] europe-west2  (supports standard and flexible)
 [9] europe-west3  (supports standard and flexible)
 [10] europe-west6  (supports standard and flexible)
 [11] northamerica-northeast1 (supports standard and flexible)
 [12] southamerica-east1 (supports standard and flexible)
 [13] us-central    (supports standard and flexible)
 [14] us-east1      (supports standard and flexible)
 [15] us-east4      (supports standard and flexible)
 [16] us-west2      (supports standard and flexible)
 [17] us-west3      (supports standard and flexible)
 [18] us-west4      (supports standard and flexible)
 [19] cancel
Please enter your numeric choice:  7

Creating App Engine application in project nuxt-static-deploy and region [
europe-west]....done.                                                          
Services to deploy:

descriptor:      [.../nuxt-static-deploy-appengine/dist/app.yaml]
source:          [.../nuxt-static-deploy-appengine/dist]
target project:  [nuxt-static-deploy]
target service:  [default]
target version:  [20200602t094056]
target url:      [https://20200602t094056-dot-nuxt-static-deploy.ew.r.appspot.com]


     (add --promote if you also want to make this service available from
     [https://nuxt-static-deploy.ew.r.appspot.com])

Do you want to continue (Y/n)?   

Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 12 files to Google Cloud Storage               ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.                                             
Deployed service [default] to [https://20200602t094056-dot-nuxt-static-deploy.ew.r.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse

🎉 Enjoy

Go here at https://nuxt-static-deploy.appspot.com/ to see our first Nuxt.js app deployed with AppEngine.

🔍 Conclusion

Nuxt.js is a cool technology to create Vue.js app and is trending with the release of @nuxt/content

// Detect dark theme var iframe = document.getElementById('tweet-1263795755954909184-839'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1263795755954909184&theme=dark" }

AppEngine comes with a lot of features:

🔁 Multiple versions available to do A/B testing or Traffic Splitting (each version has a different timestamp on the Versions Page on Appengine)
🔐 Custom Domain Mapping & auto-renew, free, managed SSL certificates
💸 Free quota (1 GB bandwidth)
⭐️ No instance used with Python37 runtime and our configuration because we have only static content
🌐 Static content available through Google CDN and its Edge Network
⚡️ Managed network: Surprise 🎉 our project uses the http3 procotol h3-Q050.

Feel free to contact me on Twitter if you have questions!

NB: You can find another guide on Nuxt.js with AppEngine here in the official documentation.

Crafting the perfect container to play with a Headless Chrome

Julien Landuré — Tue, 26 May 2020 06:19:17 +0000

Since July 30th 2017, I have been contributing to a side project: the idea from the beginning was the ability to use Chrome to make some tests in headless mode and avoid a long queue of CI builds using a tiny Docker image.

🤔 Why use a Headless Chrome

In the world of webdev, the ability to run quickly end-to-end tests are important. Popular technologies like Puppeteer enable developers to make fun things like testing, automating forms, crawling, generating screenshots, capturing timeline... And there is a secret: some of these features are directly available on Chrome! 🙌

For more information on why headless mode is a cool feature, please read a good example on what you can achieve here:

Create PDFs with Node.js and Puppeteer

David Neal ・ Feb 6 '20

#node

💡 Crafting the perfect container

With 28 contributors, I have been working on this project to create the perfect image to run Chromium in Headless mode:

📦 Tiniest Headless Chrome (393 MB)
🐳 Easy to use, ephemeral and reproducible Headless Chrome with Docker
📝 Doc-friendly with examples for printing the DOM, generating an image with a mobile ratio or generating a PDF.
👷‍♂️ Autobuild with the Docker Hub to sync the project and ship the images with confidence
📌 Up-to-date with Chromium 81 (81.0.4044.138) and tags available to test different versions of Chromium
🔐 Secure with the best way to use Chrome and Docker - See "3 ways to securely use Chrome Headless" section
🌐 Ready for internationalisation use: support for asian characters - See "screenshot-asia.js" file
💄 Ready for design use: support for WebGL - See "How to use with WebGL" section
📄 Open Source with an Apache2 licence
👥 Community-built with 28 contributors - See "✨ Contributors" section
💚 Dev-friendly with examples using NodeJS, Puppeteer, docker-compose and also a test with a X11 display - See "Run examples" section

💚 Open Source & Fun

Some open source & fun projects have been set up and used for this open source side project. I want to share it with you: it adds value and confidence to maintain a GitHub repository. 👌

Updates to follow the recommended community standards from the GitHub community profile
Gitmoji for commit messages where I have contributed in the past 😊
All Contributors to thanks everyone who contributes to the project
Inspiration from readme-md-generator made by my friend Franck Abgrall
Inspiration from this cheatsheet on "How to promote your open-source project?"
Renovate for dependency updates
Many reads on dev.to to know what web developers are doing with Chrome and Puppeteer

🚀 Reaching a point

Here is the most interesting insight for a tool: to be used and useful! In almost two weeks, this image will be pulled on the Docker Hub...

🎉 a million times! 🎉

there is currently ~922k downloads and it grows ~6k by day
On GitHub, the repository gets ~3000 views, ~1000 unique visitors every two weeks and ~464 stars.

After 3 years maintaining it, I cannot thank everyone using this container. This is the first time a side project has become so popular.

🗓 The Future

✨ Here is some features in the roadmap:

with-playwright version with Playwright to reuse the installed headless Chromium (PR in draft)
with-deno version with Deno to create a useful and fun things to do with deno
with-lighthouse version with Lighthouse to be able to monitor your website performance in CI builds
Create a dedicated homepage and documentation website: the README.md begins to be complicated to navigate and update
Create a gallery with the name of the project or product using this container

📣 Please test this container or play with it!
💻 If you are interested to help me maintain this image, we are welcome! There is some "Good first issue" labelled issue on the repository.

Disclaimer: these terms in this post are synonyms: "Chrome" vs "Chromium" and "image" vs "container".

State of Cloud Communities in France

Julien Landuré — Tue, 14 Apr 2020 06:52:54 +0000

Karen Tamrazyan wrote a good article that analyzes local communities of 3 major public cloud providers AWS, Azure and Google Cloud in Germany, Austria and Switzerland (German-speaking countries) here:
https://www.tamrazyan.com/state-of-cloud-communities-in-german-speaking-countries/

His article made me think about France. He helped me to create a similar sheet to superficially compare regional communities behind the three major public cloud providers: Amazon Web Services (aka AWS), Microsoft Azure and Google Cloud.

Comparison

The top right quadrant from the latest Gartner cloud market analysis clearly indicates three global cloud leaders: Amazon Web Services, Microsoft Azure, Google Cloud.

How are we going to compare the communities with each other? As Karen did in his article, we will compare them by the amount of registered members or the group size in other words. It is obvious that the group size is just one metric of many, like e.g. the activity rate (how often do events take place), the average number of participants, the date of the last event and so on… The members count should serve as a simplified way of measurement of a group success or importance.

The internet is big. What kind of groups are we going to count? Indeed, there are cloud communities as Facebook groups, on different messenger networks like e.g. Telegram, independently hosted forums and so on. In this work we will count only the communities, which are hosted on the Meetup.com platform. Meetup is at the moment a de facto most popular community platform in those 3 countries.

We will only consider active groups. It means that a group should have at least 1 registered past or upcoming event. In the locations where multiple communities dedicated to the same cloud technology are present, only the biggest one will be considered because of the very high probability of members overlap between those groups.

The article gives only a snapshot of the situation as of April 12, 2020. The author doesn’t intend to update it as the situation changes. It’s a photo, not a video.

Cloud communities in France

France has a population of over 67 million people. It is one of the most important technological hubs of Europe (competing with Germany and England). Plenty of universities, industrial and service companies belong to the landscape of most of the cities in this country. Even small places can often have lively user groups here like in Brest, Tours or Cannes.

Analysis of Cloud Impact

As we can clearly see from the table, AWS has far away the biggest communities in France : it demonstrates a tendency to go on this Cloud Provider. This popularity is clearly brought from the location of one datacenter in Paris, France at the end of 2017.

Azure have broad community networks that cover the top 5 most populated cities. Azure is never the biggest community in the city.

Google Cloud groups (aka “GDG Cloud” chapters) have the weakest cloud community network in France among the 3 contenders. However, one should not forget the much wider network of general Google Developer Groups (abbreviated “GDG”), which also on occasions run Google Cloud themed meetups.

We can observe that Paris, Lyon and Nantes are the top 3 cities where the aws, azure and google cloud communities can enjoy events and meet together.

Lyon is quite particular : it’s the only city where Google Cloud has more members than the others Cloud communities.

This article highlights that cloud communities don’t match the top “La French Tech” cities. However, many cloud providers provide Cloud credits for Startups like this GCP initiative: check this page to redeem it.

There are some large cities in the country like Montpellier, Bordeaux or Lille and a couple more, where none of Azure or Google Cloud have community footprints. These are opportunities for the future to grow.

What about GDGs?

GDGs, Google Developer Groups, are too general to be studied in this article but GDGs bring together tons of passionate developers in France : 4134 members for GDG Paris, 2360 for GDG Nantes, 2213 for GDG Lille and 2133 for GDG Toulouse.

These numbers are boosted by the organization of a DevFest each year, a day or 2-days conference dedicated to share about the technology and its impact. And GDGs run some Cloud events sometimes, please check out the listing of GDGs here.

Disclaimer

Author of this article runs voluntarily the Google Cloud developer group in Nantes (France) and also the GDG Cloud Nantes.

He’s also a GDE Cloud, a community reward from Google Cloud. His opinions were intended to be honest and unbiased. Apart from this research, the following official sources were used: AWS, Azure & Google Cloud.

Thanks to Karen Tamrazyan & Charles-Henri Guérin for the review of the article.

Awesome Remote Work

Julien Landuré — Tue, 17 Mar 2020 14:45:07 +0000

I discovered the book "Remote" written by David Heinemeier Hansson and Jason Fried in 2014 when I joined Zenika.

Since then, I love to read books on the basecamp culture like "Rework" or "It Doesn't Have to Be Crazy at Work".

With the arrival of COVID-19, I decided to create a list of relevant links to share the culture from "remote" companies to everyone.

☁️ Company Culture

Since the beginning of Zenika, there is a "Cloud-first" culture:

Gsuite for collaboration
GitHub for code
Slack for 1-to-1 communication
Workplace for streamline communication
SaaS tools for HR, for Sales

All of these tools seem to be "normal" to be used inside our company and every employee has the right to be in remote when they wish (and notify your manager).

🏠 The path to become a remote company

We are an IT Services company so we share our people skills to our customers to build and deliver software.
To keep our own culture safe, my manager has found a cool way to make people work all together: everyone on Friday will not stay in the customer office. He encourages employees to stay remote (from our own office or from their home).

First reaction from our customers: they were not able to work remotely. So we helped some of them to adopt a remote culture with the associated tools.

⏰ The "COVID-19" effect

With the arrival of the Coronavirus disease, some of them didn't take the right patterns and even worse, a few of them panics.

To empower the remote culture, I just compiled a list of great articles on "How to remote work?" creating an awesome repository on GitHub.

// Detect dark theme var iframe = document.getElementById('tweet-1239515937193238528-84'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1239515937193238528&theme=dark" }

💚 Open source

The repository is open-source and inspired by the awesome lists from sindresorhus.
I've added a specific README for 🇫🇷 french advices and links.
If you wish to contribute for your own country, you're welcome! 🙌

🚀 Feel free to share your links!

How to backup your Firestore data automatically

Julien Landuré — Thu, 01 Aug 2019 16:15:03 +0000

With my team, we use a lot of Firebase features like Firestore.

But there is no simple way to backup the data regularly.

We created a tiny Docker image zenika/alpine-firestore-backup and this simple tutorial to perform backups automatically on the Google Cloud Platform with Serverless services like Cloud Run and Cloud Scheduler.

Step1: Create a bucket on GCP

Create a GCP coldline bucket and save the name of your bucket.

Step2: Create a service account

Create a GCP Service account with the following rights:

Owner
Cloud Datastore Owner
Cloud Datastore Import Export Admin
Storage Admin

Then, download the JSON private key file.

Step3: Create your env variables for Cloud Run

Please fill in the following information:

GCLOUD_PROJECT_ID
GCLOUD_BUCKET_NAME
GCLOUD_SERVICE_KEY

For the GCLOUD_SERVICE_KEY, make a base64 encoded string using this command:

cat key.json | base64

Step4: Set up Cloud Run

Cloud Run is a serverless service to automatically serve your containers using http.

Create a Cloud Run service using the public image gcr.io/zenika-hub/alpine-firestore-backup.

Be careful to:

Choose your newly image in latest
Choose "Cloud Run (fully managed)" and a location
Enter a service name
Select "Allow unauthenticated invocations"
In the "Show optional settings / Environment variables", set the 3 environment variables seen in the previous section

You can test the service using your browser: https://alpine-firestore-backup-XXX-run.app/

Save the url created to call your Cloud Run Service.
For example: https://alpine-firestore-backup-XXX-run.app/backup

Step5: Launch with Cloud Scheduler

Cloud Scheduler allow you to schedule a cronjob in order to call a https endpoint at regular intervals.

Prepare a Cloud Scheduler to send a request to your Cloud Run Service every time you need.

For example, every Monday at 3:00am 0 3 * * 1 a backup will be done and stored in your bucket.

Step6: Monitor the backup operations

You can also check the current status of each backup operation using the following url https://alpine-firestore-backup-XXX-run.app/list

Conclusion

Feel free to have a look at the Docker image we created for this operation here on github or here on dockerhub.

We also have others images we maintained like a popular and small Chromium Headless image called zenika/alpine-chrome.

DEV Community: Julien Landuré

How to celebrate an achievement as an open source developer?

Crafting the perfect container to play with a Headless Chrome

Julien Landuré for Zenika ・ May 26 '20

🎯 What can I do to celebrate this achievement?

🎉 What else?

⏱ 3 minutes to deploy your static Nuxt.js app on AppEngine

📝 Getting started with Nuxt.js

⚗ Create the project

✅ Test locally

🏗 Build it

☁️ Deploy it on AppEngine

🛒 Create a project

✏️ Write the descriptor app.yaml

🚀 Deploy your app

🎉 Enjoy

🔍 Conclusion

Crafting the perfect container to play with a Headless Chrome

🤔 Why use a Headless Chrome

Create PDFs with Node.js and Puppeteer

David Neal ・ Feb 6 '20

💡 Crafting the perfect container

💚 Open Source & Fun

🚀 Reaching a point

🗓 The Future

State of Cloud Communities in France

Comparison

Cloud communities in France

Analysis of Cloud Impact

What about GDGs?

Disclaimer

Awesome Remote Work

☁️ Company Culture

🏠 The path to become a remote company

⏰ The "COVID-19" effect

💚 Open source

How to backup your Firestore data automatically

Step1: Create a bucket on GCP

Step2: Create a service account

Step3: Create your env variables for Cloud Run

Step4: Set up Cloud Run

Step5: Launch with Cloud Scheduler

Step6: Monitor the backup operations

Conclusion

✏️ Write the descriptor `app.yaml`