# [Web] THIS PAGE IS WORK IN PROGRESS => https://source.unsplash.com/DuHKoV44prg/1200x800?.jpg Hero Banner => .. .. * [About] * [Now] => ../about About => ../now Now => .. .. I am probably better at [making video games for a living] but I love web dev. => https://source.unsplash.com/DuHKoV44prg/1200x800?.jpg Hero Banner => ../pro 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)! => .. whole website ## 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 => https://villepreux.net/gemini/web accessibility => https://villapirorum.netlify.app/web/contrasted-colors https://villapirorum.netlify.app/web/contrasted-colors Also suggests a few diffent valid colors to use instead [Find the tool here!] => contrasted-colors Find the tool here! ### CSS Ipsum A CSS sandbox / showcase => https://villepreux.net/gemini/web css => https://villapirorum.netlify.app/css-ipsum 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 * 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!] => ./css-ipsum Experiment here! ### Masonry layout My take at applying a masonry style to your existing layout. => https://codepen.io/villepreux/pen/XWmoOrG https://codepen.io/villepreux/pen/XWmoOrG 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] => https://codepen.io/villepreux/pen/XWmoOrG 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 ---- ![Build](https://github.com/villepreux/dom/workflows/Build/badge.svg) © Antoine Villepreux 2020-2024 => https://villepreux.net/gemini/web web => https://villapirorum.netlify.app/dom https://villapirorum.netlify.app/dom DOM is provided for free (like free beer). Use at your own risk ## Misc. tests * [CSS Ipsum Test page] * [Hello world!] * [Vanilla test page] * [Style Stage CSS Theme contribution] * [Some more tests] => ./css-ipsum CSS Ipsum Test page => ./hello-world Hello world! => ./vanilla Vanilla test page => ./stylestage Style Stage CSS Theme contribution => ../test Some more tests Source code of this web page ``` 001 https://www.pinterest.com/CMTourisme/royan-côte-de-beauté/ www.pinterest.com => https://www.facebook.com/SaintPalaisSurMerTourisme www.facebook.com => https://www.instagram.com/villapirorum/ www.instagram.com => https://www.linkedin.com/in/villepreux www.linkedin.com => https://github.com/villepreux/dom#readme github.com => https://www.flickr.com/photos/saintpalaissurmer-tourisme/ www.flickr.com => https://m.me/villepreux m.me => https://www.500px.com/villepreux/ www.500px.com => https://twitter.com/villepreux twitter.com => https://mastodon.social/@villepreux/ mastodon.social => https://pixelfed.social/villepreux/ pixelfed.social => amp.html amp.html => rss/ rss => https://notbyai.fyi/#why-should-i-use-not-by-ai-badge writen by human not by AI © 2000-2024 - Powered by [DOM.PHP] v0.8.2 - ? mentions => https://github.com/villepreux/dom DOM.PHP [CSS Joy Webring] - [Previous] [Random] [Next] => https://cs.sjoy.lol CSS Joy Webring => https://webri.ng/webring/cssjoy/previous?via=https%3A%2F%2Fvillepreux.net%2Fgemini%2Fweb Previous => https://webri.ng/webring/cssjoy/random?via=https%3A%2F%2Fvillepreux.net%2Fgemini%2Fweb Random => https://webri.ng/webring/cssjoy/next?via=https%3A%2F%2Fvillepreux.net%2Fgemini%2Fweb Next [Fediring] - [Previous] [Random] [Next] => https://fediring.net Fediring => https://fediring.net/previous?host=https%3A%2F%2Fvillepreux.net%2Fgemini%2Fweb Previous => https://fediring.net/random?host=https%3A%2F%2Fvillepreux.net%2Fgemini%2Fweb Random => https://fediring.net/next?host=https%3A%2F%2Fvillepreux.net%2Fgemini%2Fweb Next Courtesy of [Unsplash] ([Photo #1] by [@ffstop]) => https://unsplash.com/photos/DuHKoV44prg Photo #1 => https://unsplash.com/@ffstop @ffstop => https://unsplash.com Unsplash Since there are no cookies there [do you wanna pay me a coffee?] => https://ko-fi.com/villapirorum 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]. => https://github.com/Myndex/apca-w3/ APCA => https://www.w3.org/TR/WCAG20/ WCAG 2 => https://www.ada.gov/ ADA => https://pixelfed.social/villepreux/ Pixelfed => https://mastodon.social/@villepreux/ Mastodon => https://github.com/villepreux Github => https://pixelfed.social/villepreux/ Pixelfed => https://mastodon.social/@villepreux/ Mastodon => https://github.com/villepreux Github => https://pixelfed.social/villepreux/ Pixelfed => https://mastodon.social/@villepreux/ Mastodon => https://github.com/villepreux Github