Skip to content
BranchesTags

Latest commit

History

3 Commits

Folders and files

NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md

Repository files navigation

Interactive experience interface about cookies and personal data

🇬🇧 English | 🇫🇷 Français

LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn

Interactive Experiences

A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.

The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.

No specific technical knowledge is required, a few clicks are enough to follow the journey.

This repository is a technical presentation and documentation repository.
It does not contain downloadable source code or production files.

Why these experiences?

An interface usually shows a result, but rarely everything required to make that result happen.

Automating a single task may require business rules, validation, error handling, and multiple controls.

Connecting two systems through an API involves much more than simply exchanging data.

User authentication can trigger several security mechanisms that remain completely invisible to the user.

A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.

These experiences were created to make this hidden side of technology visible, quickly and interactively.

Structure

interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences

Systems & Architecture

  • From Scratch or Prebuilt
    One requirement, two ways to build it, with different trade-offs.

  • API & Integration
    Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.

  • Automation
    Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.

Security & Data

  • Application Security
    Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.

  • Cookies & Personal Data
    Follow what may happen after accepting a cookie, from data collection to analysis and profiling.

Electronic Invoicing

  • Factur-X
    Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.

Technologies

The experiences intentionally rely on a lightweight architecture:

  • HTML
  • CSS
  • JavaScript
  • No frontend framework

The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.

Try the Experiences

The live versions are available on Palks Studio:

Explore the interactive experiences

Evolution

The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.

© Palks Studio — see LICENSE.md
https://palks-studio.com

About

🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.

palks-studio.com/en/interactive-experiences

Topics

apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - Palks-Studio/interactive-experiences: 🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch. · GitHub
Skip to content
BranchesTags
Latest commit
History
3 Commits
Folders and files
NameName
Last commit message
Last commit date
docs/images
docs/images
LICENSE.md
LICENSE.md
README.md
README.md
README_FR.md
README_FR.md
Repository files navigation
Interactive experience interface about cookies and personal data
🇬🇧 English | 🇫🇷 Français
LicenseHTMLCSSJavaScriptNo FrameworkBilingualYouTubeLinkedIn
Interactive Experiences
A collection of lightweight interactive experiences designed to make technical mechanisms easier to understand.
The idea is simple: start with an action that looks straightforward from the user's perspective, then progressively reveal what may actually be happening behind the scenes.
No specific technical knowledge is required, a few clicks are enough to follow the journey.
This repository is a technical presentation and documentation repository.

It does not contain downloadable source code or production files.
Why these experiences?
An interface usually shows a result, but rarely everything required to make that result happen.
Automating a single task may require business rules, validation, error handling, and multiple controls.
Connecting two systems through an API involves much more than simply exchanging data.
User authentication can trigger several security mechanisms that remain completely invisible to the user.
A Factur-X invoice is not limited to the visible PDF, it also contains structured data that must remain consistent with the document.
These experiences were created to make this hidden side of technology visible, quickly and interactively.
Structure
interactive-experiences/
│
├── README.md
│
├── LICENSE
│
├── assets/
│ └── interactive.css
│
├── fr/
│ ├── cookies.html
│ ├── automatisation.html
│ ├── securite.html
│ ├── facturx.html
│ ├── from-scratch.html
│ └── api-interactive.html
│
└── en/
├── cookies.html
├── automation.html
├── security.html
├── facturx.html
├── from-scratch.html
└── api-interactive.html

Experiences
Systems & Architecture
  • From Scratch or Prebuilt
    
One requirement, two ways to build it, with different trade-offs.
  • API & Integration
    
Follow an API request and discover the exchanges, validation, processing, and errors that may occur between two systems.
  • Automation
    
Discover what a seemingly simple task can actually involve when it needs to be integrated and automated within a system.
Security & Data
  • Application Security
    
Discover the controls and mechanisms that can operate behind a seemingly simple authentication process.
  • Cookies & Personal Data
    
Follow what may happen after accepting a cookie, from data collection to analysis and profiling.
Electronic Invoicing
  • Factur-X
    
Step inside a Factur-X invoice and discover why the PDF and structured XML data must remain consistent.
Technologies
The experiences intentionally rely on a lightweight architecture:
  • HTML
  • CSS
  • JavaScript
  • No frontend framework
The same visual foundation can be adapted to different subjects without introducing unnecessary dependencies.
Try the Experiences
The live versions are available on Palks Studio:
Explore the interactive experiences
Evolution
The collection will continue to grow with new interactive experiences around backend development, business systems, security, data, APIs, and automation.
© Palks Studio — see LICENSE.md
https://palks-studio.com
About
🇬🇧 Lightweight interactive experiences revealing what happens behind technical mechanisms: APIs, automation, security, Factur-X, and from-scratch development. 🇫🇷 Expériences interactives légères pour découvrir l'envers du décor de mécanismes techniques : API, automatisation, sécurité, Factur-X et développement from scratch.
palks-studio.com/en/interactive-experiences
Topics
apiapplication-securityautomationcssdata-privacyeducationalelectronic-invoicingfactur-xfrom-scratchfrontendhtmlinteractiveinteractive-experiencesjavascriptno-frameworkvanilla-javascriptvisual-learningweb-animationweb-designweb-development
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Contributors