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