_ __ _ __ __ ____ _ | | / /(_)/ // /____ _ / __ \ (_)_____ ____ _____ __ __ ____ ___ | | / // // // // __ `// /_/ // // ___// __ \ / ___// / / // __ `__ \ | |/ // // // // /_/ // ____// // / / /_/ // / / /_/ // / / / / / |___//_//_//_/ \__,_//_/ /_//_/ \____//_/ \__,_//_/ /_/ /_/
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
----
© Antoine Villepreux 2020-2024
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 "--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
© 2000-2024 - Powered by DOM.PHP v0.8.5 - Built Wed, 17-Apr-2024 07:26:54 GMT
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.
writen by human not by AI