@home

November 23, 2022 Reading time: ~1 minute

Welcome

You reached a self-hosted website with no ambition except being some kind of a notepad as well as a personal sandbox. But feel free to take away anything you may find useful.

I'm considering publishing here short articles about what I'm learning. I'll avoid hosting images because I don't have much storage available.

Stay tuned!


A tedious go-live

March 26, 2025 Reading time: 5 minutes

Lately I've been working on refreshing les éditions du samedi website - firstly launched with PluXML... 10 years ago. PluXML served us well for quite a time but maintenance became a little difficult from the moment our catalogue began to grow. And I must admit I did not find how to upgrade, I may have missed too much in-between updates and would have to start again from zero.

So I took this opportunity to explore more in depth the possibilities offered by Static Site Generators (SSG), in this case Eleventy with Simple.css. The main problem I was expecting was the ability for user to edit pages - I did not want to force any other member of the association to learn Markdown or to upload files on a server - evenless on GitHub.

This is why I set up an administration interface using Decap CMS. It was rather straightforward eventhough I struggled on understanding that there was no possibility to navigate the media folder through the interface. Now I'm watching the corresponding issue ^^'

The last part that was to set up was the structure to build the site before it is served - and why not, to handle the contact form. It took not much research to find the right candidate: it would be Netlify! So I pushed the local work I've prepared to GitHub and made the connection in Netlify. I started with a pre-prod website with a specific branch for my friends can test in advance and let me know what they think (I had just to make a few CSS changes, otherwise it was fine for them).

The hard (and long) part was to redirect to the Netlify application I created for the prod website. The domain was registered at OVH. So in case you are also struggling to understand what you should do here's the configuration that went well for my case:

Netlify side

In Netlify > Domains > your externally registered domain:

  • Netlify should have automatically provided you with 2 DNS records (type Netlify): keep them
  • copy most of the records you will find in OVH > Domain > DNS Zone such as
    • MX type: all
    • SPF
    • SRV
    • CNAME: all but www
  • create a new A record pointing to 75.2.60.5 (as per this Guide)
  • create a new CNAME record for subdomain www pointing to [sitename].netlify.app (as per same Guide)
  • create a new CAA record with "issue" for tag, "0" for flag and "letsencrypt.org;accounturi=https://acme-v02.api.letsencrypt.org/acme/acct/54403714" for value (as per this Guide)
  • create 4 NS records for the server names indicated just below you DNS record list

OVH side

In OVH > Domain > DNS Servers

  • click on Modify the DNS servers
  • enter the 4 DNS servers provided by Netlify in the same page you edited the DNS records
  • wait 48h for the propagation

In OVH > Host

  • If you have activated it, you may have to delete the SSL certificate (it will be handled by Netlify)

Useful tools for follow-up

https://dnschecker.org

https://www.zonemaster.net/

Side questions

What is les éditions du samedi?

It's a small publishing structure where I'm a volunteer editor as well as... the webmaster ^^

Eleventy notes

I started from scratch with much help from Eleventy recipies, Eleventy rocks and Learn Eleventy - as well as the official website of course. I hope to write a specific note of what I've learned in the Eleventy world building this project - and share solutions for the problems I've faced.

Is it all done?

No! I still have to do some settings in Netlify and verify redirections from the former website. I also have some ideas for improving it. But the major part is done. Hurray!


Goodbye 2024

January 2, 2025 Reading time: 4 minutes

Dear 2025,

Hope you'll be doing well.

2024 was unstoppable. Here's a catch up.

Computers & co

  • I embarked new users on my server, which got a proper domain for the occasion. Main app used is Nextcloud for synchronized agenda. Resolved some errors
  • First steps with site generators, particularly Eleventy
  • My email was blocked because I used a VPN lol
  • Pulled requests for Bludit plugins
  • Old laptop got a new charger and was moved from Manjaro to Linux Mint. We'll use it as a media center (it can read DVDs)

Learning

  • I intensively studied HTML, CSS, JavaScript, PHP, SQL, accessibility and some related topics for 6 months at uni and got my degree (hurray!)
  • I released first version of the Qwixx project and started working on version 2
  • I started the new FreeCodeCamp JavaScript course and read a book about JavaScript (yes I do love JavaScript)

Publishing

Work

  • I went to last step for a new job but never recieved a "no". Frustating
  • My compagny was bought by a right-wing fanatic...
  • Big project kickoff! Happy to be part of it
  • Launched a website for a friend, used Trello

Life

  • Baby project initiated!
  • Wife and I doing our best to help our imprisoned friend
  • Politics in general and French politics in particular go wild
  • Buying our apartment well underway

Conclusion?

Let's have a look at last year ambition list:

  • writing article about jQuery -> done!
  • home server: autosave on dedicated USB key -> still to be done
  • laptop: add memory -> I moved to another computer so it's no more relevant
  • Qwixx project: release v1, work on planning for v2 -> done!
  • obtain my degree

  • home server: autosave on dedicated USB key
  • Qwixx project: get closer on releasing v2
  • learn Vue.js and write an article about it
  • clean up another old laptop
  • keep track of what I watch and read by writing a few words on SensCritique

Wish me luck haha.

See you next year and take care

Love

Julie


Qwixx project - v1 released

December 13, 2024 Reading time: 2 minutes

I'm happy to announce that the first version is available since May! You can play Qwixx here: https://qwixx.jboisseur.xyz

Long story short

I've been working on this project for a long time. It started when I took a few Python lessons a few years ago but I abandonned because I had no clue about how to get an UI. Going back to HTML/CSS and then starting learning JavaScript put me back on tracks.

What I learned

So many things! Particularly in JavaScript where I worked with arrays, listened for events, ran a huge amount of loops, created functions, toggled CSS classes, saved data in the user's browser etc. I also learned about debugging and using the web developer tools on the browser. I had to use some PHP as well, for saving best scores.

This said, I think the biggest take away was to divide the work into achievable challenges and push the harder ones at the end. Keeping this goal in mind: at the end of each step, the full game should be playable. This way, the path was most of the time enjoyable, and having something to share along the way is very rewarding.

What I plan

I already started working on version 2, which is about allowing two persons to play on a same device. I'm experimenting working on cold and old code. It's very time-consuming but I try to refrain from starting all over on a blank project. I try to improve what's already there and implement what's missing to achieve this 2-players goal. One small step at a time.


cosmetic CSS properties

September 8, 2024 Reading time: 4 minutes

The less the better BUT just in case, these CSS properties could be handy for some cosmetic touches (examples available on an ugly CodePen):

Shadowing

Use box-shadow and / or text-shadow property. Values: offsetX offsetY (blurRadius) (spreadRadius) color.

For instance

<p class="shadow">Lorem ipsum</p>

.shadow {
box-shadow: 2px 5px 2px 5px rgba(100, 100, 100, .25);
text-shadow: 2px 5px 2px green;
}

Aligning

last line of text

Use text-align-last property (right or center)

an element vertically

Use vertical-align property (text-top / super ; text-bottom / sub)

Fun with fonts

Decorate

text-decoration shorthand property for: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness

For instance :

text-decoration: underline overline dotted red 5px;

Vary

font-variant property to display text in a small-caps font for instance

Default size

Good to now: 1em corresponds to the current font size (browser default is 16px.

The solution that works in all browsers:

body { font-size: 100%; } 
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
p { font-size: 0.875em; }

a: pseudo classes

/* unvisited link */ 
a:link { color: red; }

/* visited link */ a:visited { color: green; }

/* mouse over link */
a:hover { color: hotpink; }

/* selected link */
a:active { color: blue; }

!important:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Tables

Also use :hover pseuo-class with a background-color property on <tr>!

Zebra-strip table with tr:nth-child(even) { background-color: #f2f2f2; }

That's all... for now.

Prevent textarea resizing

overflow: hidden;
resize: none;

For loop: are you of or in?

July 13, 2024 Reading time: 2 minutes

Aren't you? I'm always struggling to know where to use the for... of loop or the for... in loop.

Let's have here a quick note for reference:

for... of loop

Iterates over an iterable object (object, array, string, map...) and temporarily assign to a variable

const chars = ["Jack", "Daniel", "Sam", "Teal'c"];

for (const char of chars) {
console.log(char); }

Note that you can use const if the variable is not reassigned within the loop.

for... in loop

Loops for properties of an array or object. Not to be used if the order is important.

// array
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];

for (let char in chars) {
console.log(char); // prints the indexes as strings
console.log(chars[char]); // prints the value }

// object
const soldier = {firstname: "Jack", lastname: "O'Neill", team: "SG1"};

for (let key in soldier) {
console.log(key); // prints the key (firstname, lastname, team)
console.log(soldier[key]); // prints the value (Jack, O'Neill, SG1) }

forEach() method

The same result can be obtained using forEach() method (on an array).

const chars = ["Jack", "Daniel", "Sam", "Teal'c"];

chars.forEach(function (char, index) {
console.log(index); // prints the indexes as numbers
console.log(char); // prints the names
});


grid overview

February 19, 2024 Reading time: 4 minutes

Two steps are required when it comes to building grid designs:

  1. slice a container into... a grid
  2. fill the cells or area of cells with elements

Imagine we work with following code:

<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>

The corresponding CodePen is of course available.

Slicing

First, we need our container to display its content as a grid : #container { display: grid; }. After that we need to slice down the container. There's two ways to do that:

Classic way

#container {
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

Here we'll have a grid of 2 columns and 2 rows.

By name

#container {
display: grid;
grid-gap: 1em;
grid-template-areas:
"div1 div2"

"div3 div4"
}

Same here but we use names. In both cases we set up a gap, which is the space between the child element of the container.

Filling

Classic way

#div1 {
grid-column: 1;
grid-row: 1;

}

div1 will go in first column and first row.

By name

#div1 {
grid-area: div1;
}

Here we declare the element's name. As div1 was the first name on the first line, #div1 element will go on first column and first row.

Units and functions

For the slicing part, we can use different units, exclusively or in a combination, such as:

  • fraction (fr) - the browser divides the screen with the all fractions that were specified
  • relative units: %, vw, vh, auto...
  • fixed units: px
  • keywords: min or max-content, auto

We can also use functions, exclusively or in combination, such as:

  • repeat(nbOfTimes, unit)
  • minmax(minSize, maxSize)

Coordinates

For the filling part, we can set up precise coordinates which will be a line or a column line number with the syntax from / to

For instance, if our first div was supposed to fill the entire first line, we could write:

#div1 {
grid-column: 1 / 3;
grid-row: 1;

}

Where we are telling the brower to extend #div1 on column 1 and 2 (column 1 is between number 1 and 2 and column 2 between number 2 and 3).