<?php
require_once(__DIR__."/../villapirorum.php");
use function dom\{set,markdown,include_file,path,init,output,user_codepen,html,style,main,header,footer,anchor,article,h2,h3,ul,li,a,p,strong,img,gif};
use function dom\{grid,card,card_title,card_properties,card_text,card_media,card_action};
set("title", "Web - Villapirorum");
set("description", "Villapirorum webdev page");
set("mastodon-post", "111954786154809891");
set("unsplash", "DuHKoV44prg, ffstop");
villa_init();
villa_output(villa_header("Web").villa_main(
header(
p("I am probably better at ".a("making video games for a living", "../pro")." but I love web dev.").
grid(
p(
"Developing this ".a("whole website", "#ilovemywebsite")." for fun, ".
"aiming at making it compliant with web accessibility standards, ".
"responsive and mobile friendly<del>, google amp compliant</del>, ".
"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 ".a("library", "#domphp")." (work in progres)!", "lspan-2").
gif("img/lighthouse.gif"), [ "style" => "--grid-cell-min-width: 200px; align-items: center;" ])).
article(
header(h2("Tools").p("A few web tools I am working on")).
grid(
card(
card_title(h3("APCA Contrasted colors checker")).
card_properties("2024-02-01", "https://villapirorum.netlify.app/web/contrasted-colors", "accessibility").
card_text(
p("Check if you text is contrasted enough, ".
"depending on color, background color, font size and font weight").
p("Also suggests a few diffent valid colors to use instead").
p("Why ?").
p("I personaly found that APCA's maths are way closer to my perception of color accessibility than WCAG ('AAA' score for black on #EA7439, really ?)").
p("At least it takes font size & weight into account, and differenciates front color from background color.").
"").
card_action(p(a("Find the tool here!", "contrasted-colors")))).
card(
card_title(h3("CSS Ipsum")).
card_properties("2024-02-01", "https://villapirorum.netlify.app/css-ipsum", "css").
card_text(
p(strong("A CSS sandbox / showcase")).
p("This is a fake/test page meant to test CSS frameworks and styles.").
p("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").
ul(
li("Toggle preset CSS frameworks (normalize & co)").
li("Add a link to an external stylesheet").
li("Edit existing CSS").
li("Switch between dark and light modes")).
p("Also note that ALL CSS of this page can be live edited to see what happens!").
p("Also serves as a Styleguide for this site!")).
card_action(p(a("Experiment here!", "./css-ipsum"))))).
grid(
card(
card_title(h3("Masonry layout")).
card_properties("2024-02-01", "https://codepen.io/villepreux/pen/XWmoOrG").
card_text(
p("My take at applying a masonry style to your existing layout.").
p("So let say you have a collection of components. First, if not already done,").
ul(
li("apply a grid pattern to it (just setting grid display, gap, and columns template). Then").
li("simply apply this tiny javascript function to your component parent,")).
p("and done!").
p("I did a codepen to showcase it: ".a("https://codepen.io/villepreux/pen/XWmoOrG"))).
card_media(
user_codepen("XWmoOrG", "Mansonry layout", 800, 600)
),
"span-3"))).
article(card(
card_title(h2("DOM Framework")).
card_properties("2024-02-01", "https://villapirorum.netlify.app/dom", "web").
style('
.dom-readme img[alt] { height: 20px; }
.dom-readme img[alt="Build"] { width: 105px; }
.dom-readme img[alt="justforfunnoreally.dev badge"] { width: 136px; }
').
card_text(markdown(
str_replace("20XX", date("Y"),
str_replace("https://github.com/villepreux/dom/tree/master/", "../dom/",
include_file(path("../dom/README.md")))),
false, 2), "dom-readme").
footer(p("DOM is provided for free (like free beer). Use at your own risk")))).
article(
header(anchor("i-love-my-website").h2("This site").p("I love my website!")).
main(
p("I love my website! Digital garden is the right description").
p("That includes all my webdev experiements. Some of the features:").ul(
li("Uses ".a("DOM", "#domphp")." homemade framework (See this page ".a("source", "#source")." code below to see how it looks like)").
li("Web-mentions support").
li("Commenting (via mastodon) support").
li("'Level 3' ".a("IndieWeb'ified", "https://indiewebify.me")).
li(a("RelMeAuth", "https://microformats.org/wiki/RelMeAuth"). " support").
li("JSON-RPC is automatically generated").
li("RSS is automatically generated").
li("Dark mode support with toogle button (in the footer)").
li("No-JS support (with toogle in the footer to test it)").
li("No-CSS support (with toogle in the footer to test it)").
"").
p("Some stuff").ul(
li(a("Some web-art", "art")." (I use those as my living room TV 'screen-savers')").
li(a("Bookmarks section", "../web-feed")." that is automatically augmented with followed site RSS feeds. As this triggers some ethical questions I wrote ".a("a blogpost about it.", "web-feed")).
li("And since web should be more open, your can find the ".a("source code", "#source-code")." of each page just before the footer! (the real source code, the backend one, before static site compilation! ".a("Read more here", "source-code").")").
"")
)
).
article(
header(h2("Misc. tests")).
ul(
li(a("CSS Ipsum Test page", "./css-ipsum" )).
li(a("Hello world!", "./hello-world" )).
li(a("Vanilla test page", "./vanilla" )).
li(a("Style Stage CSS Theme contribution", "./stylestage" )).
li(a("Some more tests", "../test" )))).
""));
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!