-- Leo's gemini proxy
-- Connecting to villapirorum.flounder.online:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini; charset=utf-8
THIS PAGE IS WORK IN PROGRESS
[About]
[Now]
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
[Find the tool here!]
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!]
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]
Web **Do**cument PHP **M**arkup & components framework
https://github.com/villepreux/dom
https://villepreux.github.io/dom
Proof Of Concept
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
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
Why not start with examples?
The standard [Hello World](../dom/examples/hello-world/) one first, then more complete [examples](../dom/examples).
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
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
----
© Antoine Villepreux 2020-2024
DOM is provided for free (like free beer). Use at your own risk
[CSS Ipsum Test page]
[Hello world!]
[Vanilla test page]
[Style Stage CSS Theme contribution]
[Some more tests]
Source code of this web page
001 <?php
002
003 require_once(__DIR__."/../villapirorum.php");
004 use function dom\{at,set,style,main,header,footer,article,h2,h3,ul,li,a,p,strong,iframe,markdown,include_file,path,user_codepen,script,script_lazy_load};
005 use function dom\{grid,card,card_title,card_properties,card_text,card_media,card_action};
006
007 require_once(__DIR__."/../dom/plugins/mastodon.php");
008
009 set("unsplash", "DuHKoV44prg, ffstop");
010
011 villa_init();
012
013 villa_output("Web", main(
014 header(
015 p("I am probably better at ".a("making video games for a living", "../pro")." but I love web dev.").
016 p("Developing this ".a("whole website", "..")." for fun, ".
017 "aiming at making it compliant with web accessibility standards, ".
018 "responsive and mobile friendly, google amp compliant, ".
019 "service-worker compliant and very performant ".
020 "(means green scoring in all google tests), ".
021 "using no high level framework (coders like to code) ".
022 "except my own server-side php html components ".a("library", "#domphp")." (work in progres)!")).
023 article(
024 header(h2("Tools").p("A few web tools I am working on")).
025 grid(
026 card(
027 card_title(h3("APCA Contrasted colors checker")).
028 card_properties("2024-02-01", "https://villapirorum.netlify.app/web/contrasted-colors", "accessibility").
029 card_text(
030 p("Check if you text is contrasted enough, ".
031 "depending on color, background color, font size and font weight").
032 p("Also suggests a few diffent valid colors to use instead")).
033 card_action(p(a("Find the tool here!", "contrasted-colors")))).
034 card(
035 card_title(h3("CSS Ipsum")).
036 card_properties("2024-02-01", "https://villapirorum.netlify.app/css-ipsum", "css").
037 card_text(
038 p(strong("A CSS sandbox / showcase")).
039 p("This is a fake/test page meant to test CSS frameworks and styles.").
040 p("It aggregates several showcase pages (some well known, others that come from the past) ".
041 "presenting all html components into one single page where you can").
042 ul(li("Toggle preset CSS frameworks (normalize & co)").
043 li("Add a link to an external stylesheet").
044 li("Edit existing CSS").
045 li("Switch between dark and light modes")).
046 p("Also note that ALL CSS of this page can be live edited to see what happens!")).
047 card_action(p(a("Experiment here!", "./css-ipsum"))))).
048 grid(
049 card(
050 card_title(h3("Masonry layout")).
051 card_properties("2024-02-01", "https://codepen.io/villepreux/pen/XWmoOrG").
052 card_text(
053 p("My take at applying a masonry style to your existing layout.").
054 p("So let say you have a collection of components. First, if not already done,").
055 ul(li("apply a grid pattern to it (just setting grid display, gap, and columns template). Then").
056 li("simply apply this tiny javascript function to your component parent,")).
057 p("and done!").
058 p("I did a codepen to showcase it: ".a("https://codepen.io/villepreux/pen/XWmoOrG"))).
059 card_media(
060 user_codepen("XWmoOrG", "Mansonry layout", 800, 600)
061 ),
062 "span-3"))).
063 card(
064 card_title(h2("DOM Framework")).
065 card_properties("2024-02-01", "https://villapirorum.netlify.app/dom", "web").
066 style('img[alt="Build"] { width: 105px; height: 20px }'). // Github build badge special style
067 card_text(markdown(
068 str_replace("20XX", date("Y"),
069 str_replace("https://github.com/villepreux/dom/tree/master/", "../dom/",
070 include_file(path("../dom/README.md")))),
071 false, 2)).
072 footer(p("DOM is provided for free (like free beer). Use at your own risk"))).
073 article(
074 header(h2("Misc. tests")).
075 ul(li(a("CSS Ipsum Test page", "./css-ipsum" )).
076 li(a("Hello world!", "./hello-world" )).
077 li(a("Vanilla test page", "./vanilla" )).
078 li(a("Style Stage CSS Theme contribution", "./stylestage" )).
079 li(a("Some more tests", "../test" )))).
080 article(
081 header(p("Source code of this web page")).
082 this()).
083 article(
084 header(p("Comments")).
085 dom\mastodon\section_comments(111954786154809891) // Just for the contrasted-colors post for now
086 )));
087
Comments
[writen by human not by AI]
© 2000-2024 - Powered by [DOM.PHP] v0.8.2 - ? 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.
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].
-- Response ended
-- Page fetched on Sun May 12 05:09:20 2024