💾 Archived View for unbon.cafe › villapirorum › web captured on 2024-03-21 at 16:20:45. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
_ __ _ __ __ ____ _ | | / /(_)/ // /____ _ / __ \ (_)_____ ____ _____ __ __ ____ ___ | | / // // // // __ `// /_/ // // ___// __ \ / ___// / / // __ `__ \ | |/ // // // // /_/ // ____// // / / /_/ // / / /_/ // / / / / / |___//_//_//_/ \__,_//_/ /_//_/ \____//_/ \__,_//_/ /_/ /_/
THIS PAGE IS WORK IN PROGRESS!
(Pages are generated from DOM.PHP lib. And hosting disk space is very limited here)
I am probably better at making video games for a living but I love web dev.
making video games for a living
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)!
A few web tools I am working on
Check if you text is contrasted enough, depending on color, background color, font size and font weight
https://villapirorum.netlify.app/web/contrasted-colors
Also suggests a few diffent valid colors to use instead
Find the tool here!
A CSS sandbox / showcase
https://villapirorum.netlify.app/css-ipsum
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
Also note that ALL CSS of this page can be live edited to see what happens!
Experiment here!
My take at applying a masonry style to your existing layout.
https://codepen.io/villepreux/pen/XWmoOrG
So let say you have a collection of components. First, if not already done,
and done!
I did a codepen to showcase it: https://codepen.io/villepreux/pen/XWmoOrG
https://codepen.io/villepreux/pen/XWmoOrG
Web **Do**cument PHP **M**arkup & components framework
Proof Of Concept
Why not start with examples?
The standard [Hello World](../dom/examples/hello-world/) one first, then more complete [examples](../dom/examples).
----
© Antoine Villepreux 2020-2024
https://villapirorum.netlify.app/dom
DOM is provided for free (like free beer). Use at your own risk
Style Stage CSS Theme contribution
Source code of this web page
001 <?php
002
003 require_once(__DIR__."/../villapirorum.php");
004 use function dom\{set,style,header,footer,article,h2,h3,ul,li,a,p,strong,markdown,include_file,path,user_codepen,T};
005 use function dom\{grid,card,card_title,card_properties,card_text,card_media,card_action,img};
006
007 require_once(__DIR__."/../dom/plugins/mastodon.php");
008 use function dom\mastodon\{section_comments_cards};
009
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", "..")." 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 style
073 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(h2("Misc. tests")).
081 ul(
082 li(a("CSS Ipsum Test page", "./css-ipsum" )).
083 li(a("Hello world!", "./hello-world" )).
084 li(a("Vanilla test page", "./vanilla" )).
085 li(a("Style Stage CSS Theme contribution", "./stylestage" )).
086 li(a("Some more tests", "../test" )))).
087 article(
088 header(p("Source code of this web page")).
089 this()).
090 article(
091 header(p("Comments")).
092 section_comments_cards(111954786154809891) // Just for the contrasted-colors post for now
093 )));
094
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.
writen by human not by AI
© 2000-2024 - Powered by DOM.PHP v0.8.3 - ? mentions
CSS Joy Webring - Previous Random Next
Fediring - Previous Random Next
Courtesy of Unsplash (Photo #1 by @ffstop)
Since there are no cookies there do you wanna pay me a coffee?
PRIVACY POLICY
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.