DEV Community: Alexandre Plennevaux

Cache buster chrome extension

Alexandre Plennevaux — Wed, 27 Aug 2025 09:39:49 +0000

You know this situation when your colleagues tell you of a bug on the website and the answer is inevitably "clear up your cache" ?
Which is followed by the equally inevitable "how do I do that?"
I got tired of explaining it so I looked for a Chrome cache cleaner extension that was simple enough to use, not bloated with engagement baits and that did a thorough job of completely clearing the cache, so I made one:

https://chromewebstore.google.com/detail/cachebuster/fnnhibheklokmkpnbdeeiepbhlfapiea

Give it a try and let me know how it works out for you!

How to Create a Beautiful Public Profile Page for Free Without Facebook or Instagram

Alexandre Plennevaux — Wed, 28 May 2025 08:57:52 +0000

I use Google Maps a lot to find local shops and services — cafés, tattoo artists, yoga studios. But too often, their links lead to Instagram or Facebook pages, where I have to accept cookies, dodge login popups, or scroll past ads just to access basic info like opening hours or a portfolio. It’s frustrating. This kind of information should be public by default — not locked behind Meta’s walls.
This Isn’t What the Web Was Meant For.

Small businesses deserve better than to have their storefronts locked behind walled gardens.

And people deserve access to that info without handing over their data to Meta.

They should publish it on a bluesky account instead!

So I built a simple alternative: Hopefully Beautiful

I’m working on hopefully.blue — a new tool that gives small businesses a clean, Bluesky-powered profile page. Think Linktree meets Micro.blog, but for Bluesky.

How does it work ?

Your business posts to Bluesky. We generate a public-facing profile that lives outside Meta/ X (any other big corp). No login needed. No cookies. Just your info, presented beautifully.

Your bio and pinned post become your “About” section.
Your latest photos show up on the side as an image wall.
It's free
It’s fast, privacy-friendly, and 100% public.

Here are a few examples:

It works with any Bluesky account (You can find mine here ) - all the data is loaded behind the scene (thanks to their amazing API) and hydrates a Sveltekit frontend app.

It's available in five languages (using paraglideJS).

Give it a try and let me know how that works for you in the comments below!

Long live the open web!

Hide the 1password button on a form field

Alexandre Plennevaux — Fri, 30 Jun 2023 16:09:48 +0000

As a web developer, I sometimes have a field in a form (e.g. inside a CMS) where it makes no sense for 1Password to pop up.

So, to prevent 1password browser extension from showing the 1Password icon on a form field, simply add this attribute:



data-1p-ignore

Example:



<input type="email" id="email" name="email" autocapitalize="none" autocorrect="off" spellcheck="false" required  placeholder="Enter your email address..." >

source: 1password's (angry) forum.

BTCONF was 🤩🤪🚀 awesome

Alexandre Plennevaux — Sat, 29 Apr 2023 19:42:34 +0000

Last week I attended Beyond Tellerrand, one of the most inspirational and thought-provoking events linking design, art and technology at an affordable price. It left me feeling inspired and energized about my work, design and development practice. I harvested many useful takeaways for my professional but also personal life. Here is a summary if you are interested to find out more.

1/ 🏠 Bring back the personal websites. Make your own, be weird.

Once a very diverse experience built by amateurs and tweakers, browsing the web has become a very uniform and monotonous place. Most online presences are driven by the objective to make money, attract an audience, and success is measured in terms of traffic and quantitative data. Where is the personal website? Sophie Koonin shows us that there are still places where people experiment and find their own interactive tone of voice using their own little knowledge of code to express their personality. A very refreshing and “back to the roots” talk. You can watch it here (and check out my own little personal website).

2/ 🎚️ Achieve a coherent visual hierarchy using typography that scales according to the container.

That talk was mind-blowing but a bit hard to follow for me as it dealt with many typographic concepts that I don’t use very often. Still, it shows that you can now use CSS to scale a headline according to its container’s dimensions and thus have one single css rule that makes all your headlines scale gracefully no matter the device and layout. Watch it here.

3/ 🤖 ET tu, AI?

Mario Klingemann has been experimenting with AI in his art practice for almost a decade. After some rather humble beginnings, the fast-paced advancements in the field of AI have now become a challenge and opportunity for all of us. In his talk Mario shared his journey, his experiments and reflected on the evolution of AI in the arts. Super interesting and uncanny use of AI in his work. More here.

4/ 🏯 Meditation with calligraphy.

The work of Japanese calligraphy artist Aoi Yamaguchi. Aoi presented her work and her design process, in which meditation is paramount, with a lot of mental and physical preparation. An ode to being in your doing. Watch here.

5/ 👩🏻‍🎤 How to be an ultra artist

A talk about resilience as an artist and designer, by Gemma O’Brien. Main take away - don’t just do client work, keep doing what you love every day or you’ll exhaust yourself. Her graphic design work is really beautiful and impressive - watch it here.

6/ 🐐 Goats and cars: beyond failure

You know how we say learning doesn’t happen without failure ? Over the past decade Thomas Thwaites has created an eclectic range of projects, at the edge of the technologically possible. He talked about some of his work, his narrative design process, his adventures as a goat, and his current project to create a completely Harmless Car, to explore the landscape of guilt. Fun and waaaay outside the box. Really inspiring!

7/ 🤯 Emotionally fit

Perhaps my favourite talk of the conference. The world is beginning to understand that stress, burnout, anxiety – and, let’s face it, the universal pains of adulting – can drastically affect a company’s bottom line. To be successful today, business leaders and employees need to be emotionally and physically healthy. There are plenty of apps and products that claim to help achieve this, but an effective focus on mental and emotional health must be built from the inside out. Emily Anhalt, a renowned psychologist, shared 7 traits of an emotionally fit leader and had us challenge our defensive impulse when interacting with others. She explored the importance of supporting yourself and your team by developing emotional fitness and gave practical, concrete tips for building a true culture of wellness. You can watch the talk here.

8/ 蝾 Typography for the non-latin world

One of the co-founders of Google Fonts and its current Design Lead, Tobias Kunisch showed that open source fonts are an important way in which we can provide access to typography for anyone designing and building things on the internet. Especially in regions of the world that don’t use the latin alphabet. New technologies like variable fonts are changing type to be more like software and open up entirely new possibilities in digital spaces.

9/ 👩🏼‍💻 Modern CSS layout

In this session by CSS Wizard Michelle Barker we saw some real-world use cases for container queries, subgrid, the :has() pseudo class (or parent selector) and much more, to build robust, flexible and creative layouts that respond to both content and context. Read more here.

10/ 🤯 Animating the Impossible

Cassie Evans (Greensock but check her cool website) looked at some “impossible” animation challenges and how to achieve smooth UI animations when dealing with DOM changes, responsive layouts, dynamic content and user interaction. The one trick I took away is to avoid browser repaint by animating from the end state to start, instead of the (more intuitive) start to end state. Watch the talk here

11/ 🌈 Side Quests: Satisfy Your Distracted Self

Random doesn’t need to be intimidating. Sometimes you just need to say “yes” to yourself. Technology artist Hugh Elliott shared how by quickly going from idea to prototype and iterations, he was able to have impact, notably on supporting the LGBTQ+ community in a year-long project involving homemade led devices and photography. One key takeaway is: make things for you, not for likes. A welcome reminder in the age of instagram.

12/ 😒 Past, present and future

I was a bit disappointed with this last talk: usually a last talk leaves us on a high note and energized, but this one felt like watching an old man looking back at his life and rambling about work and the challenges of leading a design studio. Some of his work caught my eyes and interest, but I didn’t really get anything else out of this talk. Well, his interpretation of Radioactivity by Kraftwerk was a nice “blast from the bast” introduction (pun intended).

To sum it up

Once again, the overall atmosphere of the conference sets it apart from other conferences: it’s relaxed, the sponsor booths around the place are interesting, there are people of all genders and many different countries and fields of work: designers, developers, marketing, artists ... The merch is yummy and everyone is super friendly. It feels hand crafted with care so that everyone feels welcome. It brings out the open mindedness and curiosity of looking beyond yourself, into the universe.... beyond the tellerrand.

That's it! Thanks for reading this far, and thank you Marc Thiele for organizing such an inspiring event!

How to use Redis with WordPress (docker-compose)

Alexandre Plennevaux — Fri, 25 Nov 2022 13:14:00 +0000

I'm putting this here because it took me a long while to figure this out.

I wanted to improve WordPress's performance by using Redis object caching. My environment is defined in a docker compose.

version: '3.6'
services:
  redis:
      image: 'redis:alpine'
      ports:
        - '6379:6379'
      restart: always
      expose:
        - '6379'

  wordpress:
      image: 'wordpress:latest'

There is a handy WordPress plugin for that, but of course, it needs redis to be installed and configured properly. That's the part I struggled with as it could not connect to my redis container.

Normally, Redis should work out-of-the-box with WordPress as long as it is accessible via localhost:6379.

The thing is, in a docker setup the redis instance is accessible via its container name.

So in the above example, in order for WordPress to find it, you need to modify the constant WP_REDIS_HOST to "redis" in your wp-config.php file.

define('WP_REDIS_HOST', 'redis');
define('WP_REDIS_PORT', '6379');

Additional constants are available. More information is available here.

That's it, really. I hope this helps someone.

How to deploy a Sapper PWA on GitHub Pages

Alexandre Plennevaux — Sun, 05 Jan 2020 19:30:45 +0000

Here is a quick and easy tutorial on how to deploy a PWA made with Sapper & Svelte on GitHub Pages.

Configure your project's GitHub repository (in the repository /settings) to use the GitHub Pages functionality and choose to publish the content of the gh-pages branch.

Pay extra attention to your repository slug name: it will become the foldername value to use later. In this example, it is "mathr", a personal project of mine (math quizz game for my bored teenage girl 🤓 )

1. Build your SPA

... until the point of readiness (obviously ;-) )

2. Export the code and check if it is good to go

npx sapper export
npx serve __sapper__/export

4. Serving from a subfolder

That's the tricky part. Since as a GitHub Pages, your project will most probably be served in a subfolder (unless you use your own domain name), modify the file src/server.js, to mention your subfolder. It will be used as the base tag href attribute value:

<base href="/yourproject">

polka()
    .use(
        'yourproject', // <-- replace yourproject with your repo name
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

5. Deploy via the Terminal

We want to be able to deploy using a simple command:

npm run deploy

To achieve that, install this npm package: gh-pages - npm

npm install gh-pages --save-dev

Then, in the root of your project folder, create the file /scripts/gh-pages.js with this content:

var ghpages = require('gh-pages');

ghpages.publish(
    '__sapper__/export/yourproject',// <-- replace yourproject with your repo name
    {
        branch: 'gh-pages',
        repo: 'https://github.com/username/yourproject.git',
        user: {
            name: 'Your name',
            email: 'Your Email address'
        }
    },
    () => {
        console.log('Deploy Complete!')
    }
)

Finally, update your package.json project file with the following (again, replace yourproject with your repo name):

"scripts": {
...
    "export": "sapper export --basepath yourproject --legacy",
...
    "deploy": "npm run export && node ./scripts/gh-pages.js"
  },

6. Finally, test it out !

From inside your project folder, launch this command:

bash npm run deploy

Following these steps worked for me 🚀. Do let me know if you run into hiccups ;-)

Gamifying a coding bootcamp: the BeCode LUX

Alexandre Plennevaux — Mon, 16 Dec 2019 20:16:25 +0000

Learning to code is fun (most of the time). Learning to code with the added goal of landing a first job as a Junior Developer after just 7 months of training can be daunting. Gamification is a great way to build self-confidence through this intensive learning period.

At BeCode (the largest network of inclusive coding bootcamps in Belgium), we may have found a way to both gamify our trainings and improve the job marketability of our learners at the same time.

It did not happen overnight. All the pieces fell into place recently, while working on our latest advanced training: DevSecOps. This article explains how we gradually came to design the BeCode Learning User Experience (or LUX, as in Light in Latin).

The bits and pieces of our gamification system

Here is more or less chronologically how the pieces started stacking up, through good old trial and error and iterations over almost 3 years.

0. The ground floor

When we launched BeCode in 2017 we did not want to create just another school. We wanted learning to be fun, collective, positive, healing. We wanted to surround our learners with the comfort, structure, autonomy and kindness needed to dare take risks and embrace failure. After all, learning is about searching and experimenting "until it works". Inspired by Simplon (a huge network of inclusive coding bootcamps in France), we replaced the teachers by coaches and chose active learning techniques, where the learner is in charge and controls its learning experience. We unleashed the beast in 2017 and since then, boy have we experimented.

1. Project-based learning

We organize project-based learning using two types of challenges:

Learning challenges are great to explore, try, experiment. They usually involve a lot of googling, discussing and sharing, trying and failing... When the deadline is reached, what sits on the learner's hard drive is most probably buggy, dirty, dysfunctioning, or completely broken. But they have learned.
Consolidation challenges come after a few learning challenges to re-invest what has been learned/ explored previously. This type of challenges focuses on the quality of result. It can be used to assess whether the target skills involved in the challenge have reached a professional level.

You can find more about our project-based approach on this Slide Deck BeCode LUX: the Learning User Experience.

2. Informal learning is hard to certify

BeCode basically provides the conditions of learning. Trainers do not teach but stimulate learning via group dynamics, individual coaching, instilling into the group a "failing forward" approach to mistakes and of course, real-life challenges. According to European education administration, the type of learning we offer sits somewhere between experiential and non-formal learning, which by definition happens while working on real-life projects. There are no clear, unified certification system for that. And that’s okay… until you need to reassure companies that you are worth being hired, with no diploma to show for it. This has been an ongoing question for us to solve: how to certify skills in a non-formal learning environment ?

3. Open Badges FTW!

In the meanwhile, and pretty much since the first day of the first training, we have been playing around with the Open Badges technology. It's important for the learner's self-confidence to receive gratifications for their achievements, big or small. Positive reinforcement is key to learning and badges felt like a good way to do that.

We started creating and granting badges for every technology we use during the training.

4. How to assess Tech Skills ?

The point of these challenges is to grow the skills enabling the learner to enter the job market, bringing value to companies.

Of course, various degrees of craftsmanship are possible. Again, we need something as simple as possible and easy to understand to maximise adoption by everyone - learners and companies. Through various iterations, we came up with this 4-level grid:

Level 0: Skill is non-existent
Level 1: Skill has been explored - the candidate has interest and motivation to grow the skill.
Level 2: The candidate has been able to use that skill on a professional level.
Level 3: The candidate has acquired enough knowledge and experience and has the teaching skills required to be able to train people on that technical skill
Level 4: The candidate has contributed to the technology source code, aka "Godmode" - it is of course very rare that someone reach that level. We consider this level to be the ceiling.

Practically it means that learners having finished a learning challenge and shown genuine interest and motivation could claim the Technology’s level 1 badge. When finishing a consolidation challenge, they could get the technology’s level 2 badge. If they give a hands-on workshop on the technology, they could claim to have reached level 3. If Linus Torvald ever comes to BeCode (you never know…) we would grant him Linux’s Level 4 badge. (I'm sure he'd be thrilled!)

From a business point of view, a level 1 badge certifies that the candidate has "some exploratory" knowledge and is interested to master that skill but is not autonomous yet nor able to use the technology in a real-life professional scenario - some senior mentoring would be required.

5. LinkedIn <3 open badges !

An important benefit of Open Badges is the fact that they can be embedded on the Learner's LinkedIn profile (here is how). The potential employer, reviewing the profile, can click on the badges and check what it means and more importantly, how it was obtained. In that regard, open badges are much more transparent than diplomas and classic certificates.

They are also very relevant: since every learner is different, the set of badges acquired can more closely represent the strengths of each profile. This is a great way to improve the marketability of our learners and move beyond the "informal" aspect of their training, indeed giving it a recognizable form.

6. Soft skills badges

In the summer of 2019, we undertook an important work synthesizing what soft skills we can observe (and thus certify) during the seven months of the bootcamps. Through a couple of co-creation workshops involving smart people from various disciplines (management, previous learners, trainers, marketing people and an external HR expert) we came up with a vocabulary of 10 Soft Skills badges that enable everyone at BeCode speak the same language about the behaviours expected in a professional environment.

When we introduced the soft skill badges to the learners and fellow trainers from Simplon (our French partner), it brought a lot of enthusiasm as it gamifies the acquisition of soft skills, whereas soft skill training is usually experienced as "condescending" and is generally a hard to tame beast, since it is so subjective. Unwillingly, we had created the embryo of a gamification system.

7. Career paths

Ultimately, badges are a mean to an end: finding a job, starting a career path.

Well, in essence, a career path is a set of tech skills and soft skills to acquire.

If we can describe a career path through the necessary combination of level 1-4 badges, we have a clear way to describe to the learner what path they need to take to achieve their goals. That's exactly what we did, involving company experts in the process of content creation.

To certify that a learner has acquired all the required badges, we need another badge, representing the career: we called them "meta badges". Here is an example of the Secure Developer metabadge, and the badges necessary to earn it.

Conclusion: the LUX

The gamification of the Learning User Experience at BeCode essentially means acquiring skills through challenges, deciding which career path to pursue and when learning goals are achieved, certifying them using open badges. The goal of the game is by the end of the training to obtain the meta badge corresponding to the learner's desired career path. That badge certifies that the learner has the soft and technical skills required to enter the job market in that career, and with enough self-confidence to grow into the position autonomously.

What are the next steps ? Our next trainings will implement it from the starting day. It will be a real life pilot from which I expect to discover a lot of opportunities for improvement. We also need to update our Junior Web Developer training to match this structured gamification approach.

Also, I am eager to see how “open minded” will companies be about these badges as a way to assess a candidate’s skills. They make a lot of sense to us, trainers, but time will tell if it is actually effective in “landing that first job in IT” – the hardest one.

Why I love the word Iteration

Alexandre Plennevaux — Fri, 08 Nov 2019 19:17:16 +0000

I love the word Iteration because... It means I don't need to get it right at the first attempt.
There is nothing more liberating.

Automate deployment using GitHub hooks

Alexandre Plennevaux — Tue, 13 Aug 2019 15:08:29 +0000

The first time I witnessed the cleverness of the deployment using git strategy was with GitHub Pages: simply git push to the master branch of your repository and your static web page is updated. As simple as that.

I wanted to be able to deploy with the same elegance on my own servers and for more complex applications. I thought I understood how it worked but not how to automate it. So I would manually ssh into the server, cd my way into the project folder, then git pull. Every. time. Not really convenient.

When I discovered Trellis I learned to use ansible to be able to deploy by using a oneliner: ./deploy.sh production domain.com)...

But then Ansible is a power tool, which does a lot of other things than just deploy. And I learned the hard way that I should not update my local Ansible version otherwise... All hell break loose.
Also, I would still have to git push to the remote prior to launching the deployment.

One line to rule them all

Working at BeCode is cool because you get to meet dozen of fellow developers, craving to learn and explore. One of our learners pointed me in the direction of using a GitHub Post-Receive hook, thanks to which deployment is a simple : git push production master. The hook launches a local script that git checkout the master branch on the production server, then runs any other custom operations you want (such as composer update for example).

Let's see how to set it up.

1. Setup a bare Git repository on production server

First, create a "bare" repository – one that does not contain the working copy files. It basically is the content of the .git repository folder in a normal working copy. Name it whatever you like (you could also omit the .git part from project.git but I find it best to keep it):

cd /path/to/project/folder/
mkdir project-name.git
cd project-name.git
git init --bare

2. Configure the GitHub hook

Create a post-receive hook at /path/to/project/folder/project-name.git/hooks/post-receive

touch hooks/post-receive

Fill it with your version of the following code (use your specific folder paths) :

#!/bin/sh
NOW=$(date +'%d-%m-%Y_%T')
# check out master branch
GIT_WORK_TREE=/path/to/destination/folder/htdocs git checkout -f master

# custom steps for deployment
# For example, let's execute composer to refresh our dependencies : 
cd /path/to/destination/folder/htdocs
composer update
# backup current version, in case we need to do a rollback
cp -R /path/to/destination/folder/htdocs/. /backups/project-name/$NOW/

Make sure it is executable:

chmod +x post-receive

3. Add the remote-repository to your local system

Let's now add a reference to this bare repository to our local system, as a remote location. Let's call this remote "production". (It could also be called "staging" or "live" or "test"... should you want to deploy to a different system or to multiple systems.)

cd ~/path/to/working-copy/
$ git remote add production ssh://username@myserver.com:22/path/to/project/folder/project-name.git

Check that your new remote is now available, and all the existing ones:

git remote -v

And... that's it!

You can now deploy using this beautiful one liner :

git push production master

Going beyond ? TDD !!

With this, I have the raw basis of a deployment pipeline. The next step would be to add code testing to make sure code updates do not introduce bugs or break anything (regression testing). I assume I should look at how to use Ansible for that.

Since I don't know how to do that yet, I'll leave you to ~~google~~ dev.to/search your way around that one !

Helping your team become more focused

Alexandre Plennevaux — Thu, 05 Apr 2018 17:35:44 +0000

It happens to the best of us.

During the BeCode boot camp, junior developers enjoy a lot of freedom and autonomy so that they can grow the skillset adapted to their personal interests : frontend, backend, fullstack, devOps ...

These are exceptional human beings. Each was selected for the sparks in its eyes when facing a new problem. For their ability to work collaboratively. For their grinta. For being passion-driven and knowledge-hungry.

As their coach, I want to know them better. So I observe them a lot. We talk, in private sessions or in group discussions.

Doing so I realized they often lose energy and time on pointless explorations. Venturing on the pretty much infinite fields of learning resources provided by the internet can be tricky. I know this because I have been there. More often than not, I would start a tutorial, and at the first difficulty, switch to another without finishing the first one. Then again, starting stuff, not finishing. As a result, it often becomes difficult for them to meet deadlines and basically, get things done. Which is frustrating and bad for morale.

When information is cheap, attention becomes expensive.
– James Gleick

What happens is, when we are trapped in the process of exploration, we lose focus on what we were actually trying to get done.

Tick. Tick. Tick.

Part of my job is to remind them that we are on a clock: we have six months to get as far as possible towards their own digital horizon. After that, they have to jump, try to swim the best they can with their new set of skills, or die trying (dramatic pun intended). Every lost second does not come back.

Too much information becomes a distraction that blurs our sense of focus. It happens to all of us. Every day.

It's understandable, but unacceptable given the objective of becoming the best developers they can be in six months.

My answer to that : the pleasure of GTD (Getting Things Done) through self discipline. I want them (and me!) to stay on focus despite the distractions and the fast pace of life at BeCode, where opportunities come by the dozen (Meetups, hackathons, conferences, talks, networking events, customer projects …).

And so I introduced a ritual that I actually discovered a few years ago whilst working with the fine team at Base Design: the "Challenges of the week" ritual.

How to conduct the Challenges of the Week ritual

This is how I roll it with my startup.

Give the team five minutes, plenty of post-its and this instruction: "Using post-its, write down something you would like to have finished by the end of this week. One post-it per objective. Formulate it so that it's actually possible to say *done/not done."*
Allocate an empty spot on the wall where post-it will be placed. Visible, so that it acts as a silent reminder during the week. Have plenty of empty space in front so that the team can gather up.
Each team member comes in turn in front of the team and verbalises his objectives one by one and sticks them on the wall. I like it Popcorn style: whomever wants speaks, as long as everyone does. Do not designate, if possible.

The Challenges of the Week, in action at startup Lovelace.

The next week at the same time, each person publicly reviews its objectives, removes the "done" post-it, and explains what happened with the remaining ones. He or she then adds her new objectives.

As facilitator, allow comments from teammates : if an objective triggers a remark, there might be an opportunity for collaboration. But let's not loose the… focus of the exercice by turning this into a debate. Rythm is everything. This should set everyone into motion and kick off the week. Speaking of rythm: the whole process lasts about 20 minutes.

We perform this ritual each Monday morning. This timing gives us a nice bonus of switching ourselves from "week-end" mode to "work week" mode.

The Challenges of the week has become a cornerstone ritual that sets the mind into motion after the week-end and align each team member to its individual objectives. It indirectly builds motivation and allows everyone knows where each other stands, thus improving the team cohesion.

Here is the pimped-up board of the Swartz startup.

This is a simple ritual. Simple and effective when done seriously. Simple enough that, perhaps, you should try it. Unless you and your team uses another ritual? Feel free to share in the comments.

(Photo credits: Syl / Miloon)

Progressive Enhancement is non-negotiable.

Alexandre Plennevaux — Fri, 09 Feb 2018 11:38:20 +0000

I was drawn to the Internet back in 1997, when I got a proper (ISDN!) connection at my first office position in a large European company. These were the days of MS FrontPage. The websites I built were an horrendous bunch of code, mixture of bastardy html and some proprietary version of a prehistorical version of Javascript by Microsoft.

The browser war was raging and Netscape was the clear leader. There was pretty much one screen standard : 1024x768 resolution replaced the legacy 800x600. It seemed huge! Screens were bulky analog monitors. Of course, we used <table> and loads of 1px-square transparent gif files as spacers to make interfaces, conceived by print(!) designers.

There was no other choice than code like a pyromaniac bastard.

21 years later, this is 2018. We still build static websites (it was almost deemed old-fashioned a few years ago to not have a dynamic website) but also SPA (Single Page Applications), Progressive Web Apps. Virtual Reality is becoming mainstream. Fridges automatically order tomorrows' bottle of milk from an online dairy store. Standards have arisen for html, css and javascript. It's never been easier to build something and put it online.

Yet, turn off javascript and half of the internet breaks. Because of that "cool javascript framework" that allows pretty much anyone build things fast, without even understanding the underlying architecture, or the purpose of JS Frameworks : SPA, not presentational websites.

AS often is the case, "Fast" for the developer means "bad" for the end-user.

As developers, for the sake of keeping the universal access of the information we put online (and the very reason we exist), we need to re-claim the Progressive Enhancement methodology. Here are just a few reasons why:

1. It is good for the user

Disabled people, for whom static rendering and full-page reloads are typically still more (not exclusively, but more, and more easily) accessible.
Search engine spiders (it is being said the GoogleBot parse javascript, but how well exactly ? Google does not recommend js-only interfaces, so, that's that)

2. It is good for the developer

It's not hard : the html.js trick enables writing CSS only applying to javascript-enabled contexts. Javascript framework ? Use the <noscript> tag, at the very least, so that everyone (including the GoogleBot) gets access to your content.
It's not expensive, on the contrary : you gain time because your code is more maintainable and easier to debug. Thank you miss Separation of Concern.
you have no idea what devices your code will run on in two years. Build "future-proof" digital products, not sand castles, crushed by the next wave.

3. This is why the Internet was built for.

4. It takes but a few minutes to grasp.

Here is a presentation I did for my bad-ass junior developers at BeCode. Have a browse.

Stil not convinced ? Head over this Reddit thread.

I leave the final word to Tiffany Tse (Shopify) (source)

Considering how quickly things change, and how many new devices there are every year, it’s imperative that we continue to build websites and applications that can scale, change, and employ new features as they become available. To do this, and continue to make sure that the web is accessible for all, we need to ensure progressive enhancement is at the heart of everything we do.

The easy way to turn a website into a Progressive Web App

Alexandre Plennevaux — Tue, 21 Nov 2017 09:26:41 +0000

What is a Progressive Web App?

Basically, a PWA is a website that can be saved on the user's device (desktop, tablet or smartphone) and thus feels and behaves much like a Native application: loading screen, removing the browser's interface clutter to enhance user focus, and, should the connection drop, it still displays (cached) content, enabling the user to continue working offline.

Why is it important?

It tends to boost user engagement: if Android's Chrome browser (not sure about other mobile browsers) detects that the website is a PWA, it prompts the user to save it on its device's homescreen using the icon of your choice.

Compared to a mobile application, it simplifies the end-user setup process, breaking free from app stores.

PWA are good for your client's business. Alibaba, the Chinese Amazon, notices a 48% increase in user engagement thanks to the browser's prompt to "install" the website (source).

This makes the effort totally worth fighting for!

This bounty is possible thanks to a technology called Service Workers that allows you to save static assets in the user system (html, css, javascript, json...), alongside a manifest.json that specifies how the website should behave as an installed application. Service workers can do much much more, like polling user actions while offline, and syncing them in the background when back online.

Examples

Famous PWAs are Slack, Spotify, Starbucks, the NY Times, and many more...

Here are a couple PWAs made by myself using the same technique described here.

plancomptablebelge.be (a single-page website)
mathr.app (a game to practice calculous, made using Sveltekit)

Setup

Turning a website into a PWA may sound complicated (Service workers whaaaat ?), but it's not that difficult. Follow my lead and you'll have one by the end of this article !

1. requirement: https instead of http

PWA only work on a website running on a secure domain (behind https:// instead of http://).
These are usually very hard to set up manually, but thanksfully, if you have your own server, you can use letsencrypt to make that super easy and automatic. And... FREE.

2. Tools

2.1 lighthouse test

the lighthouse test is an automated test created and maintained by Google that test websites against three criteria : Progressive, Performance, Accessibility. It gives a score in percent for each, and advises on how to solve each issue. It's a great learning tool.
realfavicongenerator.net
the UpUp.js library

2.2 realfavicongenerator.net

realfavicongenerator.net takes care of the visual layer of your PWA. It generates the manifest.json file mentioned above, alongside all the versions of your icons necessary when saving the website onto any mobile device, and an html snippet to add to your page's <head> tag.

2.3 service workers, via upup.js

Service Workers is a javascript technology. I found it hard to grasp for my tired and impatient brain, but luckily, a smart girl from Germany pointed me to a javascript library by Tal Atler, that makes it über easy to make your website behave nicely when the connexion drops. danke schön, Ola Gasidlo !

Just do the quick UpUp tutorial and you're good to go.

2.4 The Manifest

Edit the manifest.json file that RFG generated for you. It should contain at minimum these entries: "scope", "start_url", "short_name", "display". Here is a working sample:

{
    "name": "My PWA Sample App",
    "short_name" : "PWA",
    "start_url": "index.html?utm_source=homescreen",
    "scope" : "./",
    "icons": [
        {
            "src": "./android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffee00",
    "background_color": "#ffee00",
    "display": "standalone"
}

More information is available at developers.google.com.

3. Methodology

Use Realfavicongenerator and generate the html and image code. Add them to your website code.
Publish on your https domain.
Do the lighthouse test.
Analyse results.
Fix each issue one by one.
Go back to 3, rince and repeat.
Iterate until you get as close to 100 everywhere, and 100 in "Progressive".
Test on your mobile phone and see what happens. With chance, on Android you'll see a popup at the bottom, inviting you to save the website onto your phone homescreen!

Deeper into the rabbit hole...

Here is a sample PWA project I made using a Github Page, live coded for my juniors at BeCode : visit its Github Page with your mobile phone to test it. Visit its repository to inspect the code.

You can find all the information you need on PWA in this book:

That's it! Happy PWA-ing!

Your PWA is ready: how about you learn how to automate its deployment using Git ?