VillaPirorum

 _    __ _  __ __        ____   _
| |  / /(_)/ // /____ _ / __ \ (_)_____ ____   _____ __  __ ____ ___
| | / // // // // __ `// /_/ // // ___// __ \ / ___// / / // __ `__ \
| |/ // // // // /_/ // ____// // /   / /_/ // /   / /_/ // / / / / /
|___//_//_//_/ \__,_//_/    /_//_/    \____//_/    \__,_//_/ /_/ /_/

I am probably better at making video games for a living but I love web dev.

Developing this whole website for fun, aiming at making it compliant with web accessibility standards, responsive and mobile friendly, google amp compliant, service-worker compliant and very performant (means green scoring in all google tests), using no high level framework (coders like to code) except my own server-side php html components library (work in progres)!

Tools

A few web tools I am working on

APCA Contrasted colors checker

Check if you text is contrasted enough, depending on color, background color, font size and font weight

Also suggests a few diffent valid colors to use instead

Find the tool here!

CSS Ipsum

A CSS sandbox / showcase

This is a fake/test page meant to test CSS frameworks and styles.

It aggregates several showcase pages (some well known, others that come from the past) presenting all html components into one single page where you can

Toggle preset CSS frameworks (normalize & co)
Add a link to an external stylesheet
Edit existing CSS
Switch between dark and light modes

Also note that ALL CSS of this page can be live edited to see what happens!

Experiment here!

Masonry layout

My take at applying a masonry style to your existing layout.

So let say you have a collection of components. First, if not already done,

apply a grid pattern to it (just setting grid display, gap, and columns template). Then
simply apply this tiny javascript function to your component parent,

and done!

I did a codepen to showcase it: https://codepen.io/villepreux/pen/XWmoOrG

DOM Framework

DOM.PHP

Web **Do**cument PHP **M**arkup & components framework

https://github.com/villepreux/dom
https://villepreux.github.io/dom

Status

Proof Of Concept

Intentions

Goals

Writing web documents/pages quickly.
Using HTML known markup syntax.
Mainly semanticaly
Without having to worry about latest, state of the art, boilerplate code
Automaticaly generating derived content (jsonfeed, RSS, sitemap, favicons, service worker...)
Independently of chooosen component/styling/whatever framework (normalize vs sanitize vs reset, material vs bootstrap vs spectre vs..., react vs 11ty vs..., AMP or not,...)
Having access to comonly used predefined components (videos, social-media cards, maps, ...)
Being able to create and/or compose new components with ease
Compiling into fast code
Compiling into valid markup (HTML, CSS, JSON, AMP...)
Compiling into good SEO
Rendering well without CSS nor JS
Not needed JS at all if wanted or when disabled
Using a single language for everything (templating, css-preprocessing, ...)
While still allowing to inject HTML/CSS/JS anywhere at will

How-to

Use PHP (Deployed everywhere. Easy to learn. Known by many. Capable of generating anything. Modern language in its latest incarnations)
Declarative programming
State of the art defaults
Assumes evergreen browsers

Getting started

Why not start with examples?

The standard [Hello World](../dom/examples/hello-world/) one first, then more complete [examples](../dom/examples).

Known issues

Codebase: It's a proof of concept at this stage. So need to be rewritten. Currently has very long line lengths & extrem single-line functions use: Hard to read.
~~Codebase: Naming conventions: Missing lot of lib prefixes~~ => Now having its namespace
Features: Social networks content scrapping: Broken in many cases => TODO : kill feature or go the API way
Too much default CSS => Needs cleanup while keeping out of the box nice and complete "hello world" or mardown based websites

TODO List

Codebase: Refactoring: WIP: Prefix everything + provide unprefixed facade for components markup
Add options for CSS automatic classes naming conventions
Reduce boilerplate CSS size
Add option for CSS classes prefixing
Optimize server-side performances
Where possible, use sub-components aggregation instead of multiple parameters
Convert default parameters to "auto" parameters where appropriate
Where possible, use named, unordered & optional parameters => Upgrade to php 8 to use native named parameters?
Use heredoc syntax where possible
~~Remove jquery internal usage~~ DONE
Document the code
Remove framework bindings for framework that are no more on top of the frameworks leaderboards
Design a new framework binding mechanism (would markup + classes bindings & transformations be enough?)
Make 11ty sample
Make Material Design v3 sample

----

![Build](https://github.com/villepreux/dom/workflows/Build/badge.svg)

DOM is provided for free (like free beer). Use at your own risk

This site

I love my website!

I love my website! Digital garden is the right description

That includes all my webdev experiements. This is this website features' list:

Uses DOM homemade framework (See this page source code below to see how it looks like)
Web-mentions support
Commenting (via mastodon) support
'Level 3' IndieWeb'ified
RelMeAuth support
JSON-RPC is automatically generated
RSS is automatically generated
Dark mode support with toogle button (in the footer)
No-JS support (with toogle in the footer to test it)
No-CSS support (with toogle in the footer to test it)

Misc. tests

CSS Ipsum Test page
Hello world!
Vanilla test page
Style Stage CSS Theme contribution
Some more tests

Source code of this web page

001 <?php002 003 require_once(__DIR__."/../villapirorum.php");004 use function dom\{set,markdown,include_file,path,user_codepen,style,main,header,footer,anchor,article,h2,h3,ul,li,a,p,strong,img};005 use function dom\{grid,card,card_title,card_properties,card_text,card_media,card_action};006 007 set("title",            "Web - Villapirorum");008 set("description",      "Villapirorum webdev page");009 set("mastodon-post",    "111954786154809891");010 set("unsplash",         "DuHKoV44prg, ffstop");011 012 villa_init();013 014 villa_output(villa_header("Web").villa_main(015   header(016     p("I am probably better at ".a("making video games for a living", "../pro")." but I love web dev.").017     grid(018       p(019         "Developing this ".a("whole website", "#ilovemywebsite")." for fun, ".020         "aiming at making it compliant with web accessibility standards, ".021         "responsive and mobile friendly, google amp compliant, ".022         "service-worker compliant and very performant ".023         "(means green scoring in all google tests), ".024         "using no high level framework (coders like to code) ".025         "except my own server-side php html components ".a("library", "#domphp")." (work in progres)!", "lspan-2").026       img("img/lighthouse.gif"), [ "style" => "--grid-cell-min-width: 200px" ])).027   article(028     header(h2("Tools").p("A few web tools I am working on")).029     grid(030       card(031         card_title(h3("APCA Contrasted colors checker")).032         card_properties("2024-02-01", "https://villapirorum.netlify.app/web/contrasted-colors", "accessibility").033         card_text(034           p("Check if you text is contrasted enough, ".035           "depending on color, background color, font size and font weight").036           p("Also suggests a few diffent valid colors to use instead")).037         card_action(p(a("Find the tool here!", "contrasted-colors")))).038       card(039         card_title(h3("CSS Ipsum")).040         card_properties("2024-02-01", "https://villapirorum.netlify.app/css-ipsum", "css").041         card_text(042           p(strong("A CSS sandbox / showcase")).043           p("This is a fake/test page meant to test CSS frameworks and styles.").044           p("It aggregates several showcase pages (some well known, others that come from the past) ".045           "presenting all html components into one single page where you can").046           ul(047             li("Toggle preset CSS frameworks (normalize & co)").048             li("Add a link to an external stylesheet").049             li("Edit existing CSS").050             li("Switch between dark and light modes")).051           p("Also note that ALL CSS of this page can be live edited to see what happens!")).052         card_action(p(a("Experiment here!", "./css-ipsum"))))).053     grid(054       card(055         card_title(h3("Masonry layout")).056         card_properties("2024-02-01", "https://codepen.io/villepreux/pen/XWmoOrG").057         card_text(058           p("My take at applying a masonry style to your existing layout.").059           p("So let say you have a collection of components. First, if not already done,").060           ul(061             li("apply a grid pattern to it (just setting grid display, gap, and columns template). Then").062             li("simply apply this tiny javascript function to your component parent,")).063           p("and done!").064           p("I did a codepen to showcase it: ".a("https://codepen.io/villepreux/pen/XWmoOrG"))).065         card_media(066           user_codepen("XWmoOrG", "Mansonry layout", 800, 600)067           ),068         "span-3"))).069   card(070     card_title(h2("DOM Framework")).071     card_properties("2024-02-01", "https://villapirorum.netlify.app/dom", "web").072     style('img[alt="Build"] { width: 105px; height: 20px }'). // Github build badge special style073     card_text(markdown(074       str_replace("20XX", date("Y"),075       str_replace("https://github.com/villepreux/dom/tree/master/", "../dom/",076         include_file(path("../dom/README.md")))),077       false, 2)).078     footer(p("DOM is provided for free (like free beer). Use at your own risk"))).079   article(080     header(anchor("i-love-my-website").h2("This site").p("I love my website!")).081     main(082       p("I love my website! Digital garden is the right description").083       p("That includes all my webdev experiements. This is this website features' list:").ul(084         li("Uses ".a("DOM", "#domphp")." homemade framework (See this page ".a("source", "#source")." code below to see how it looks like)").085         li("Web-mentions support").086         li("Commenting (via mastodon) support").087         li("'Level 3' ".a("IndieWeb'ified", "https://indiewebify.me")).088         li(a("RelMeAuth", "https://microformats.org/wiki/RelMeAuth"). " support").089         li("JSON-RPC is automatically generated").090         li("RSS is automatically generated").091         li("Dark mode support with toogle button (in the footer)").092         li("No-JS support (with toogle in the footer to test it)").093         li("No-CSS support (with toogle in the footer to test it)").094         "")095       )096   ).097   article(098     header(h2("Misc. tests")).099     ul(100       li(a("CSS Ipsum Test page",                "./css-ipsum"   )).101       li(a("Hello world!",                       "./hello-world" )).102       li(a("Vanilla test page",                  "./vanilla"     )).103       li(a("Style Stage CSS Theme contribution", "./stylestage"  )).104       li(a("Some more tests",                    "../test"       )))).105   article(106     header(anchor("source").p("Source code of this web page")).107     this()).108   ""));109

Mastodon comments

Comment on this blog post by publicly replying to this Mastodon post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.

No known comments, yet. Reply to this Mastodon post to add your own!

Loading comments relies on JavaScript. Try enabling JavaScript and reloading, or visit the original post on Mastodon.

Web mentions

These are webmentions via the IndieWeb and webmention.io

No known mention, yet

Loading web mentions relies on JavaScript. Try enabling JavaScript and reloading.

URL of your site:

No-JS No-CSS Share

Web-Mention(s): ⧗

Fediring 🕸💍︎ previous next random

Courtesy of Unsplash (Photo #1 by @ffstop)

Since there are no cookies there do you wanna pay me a coffee?

We do not collect information from visitors of our site, or other details to help you with your experience.

We do not use cookies for tracking purposes.

We do not sell, trade, or otherwise transfer to outside parties any Personally Identifiable Information.

Gemini capsule version of this page

This website has undergone colour contrast checks using the APCA guidelines for determining text contrast.

The APCA guidelines improve upon the accessibility colour contrast checks under WCAG 2, and is therefore compliant with the ADA.

writen by human not by AI