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)!

lighthouse

Tools

A few web tools I am working on

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 Document PHP Markup & components framework

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 one first, then more complete 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

© Antoine Villepreux 2020-2024

DOM is provided for free (like free beer). Use at your own risk

Misc. tests

Source code of this web page

001
<?php 
002
003
require_once(__DIR__."/../villapirorum.php");
004
use function dom\{set,style,main,header,footer,article,h2,h3,ul,li,a,p,strong,markdown,include_file,path,user_codepen,T};
005
use function dom\{grid,flex,card,card_title,card_properties,card_text,card_media,card_action,img};
006
use function dom\{toolbar,toolbar_nav_menu,ul_menu_auto,toolbar_nav_title,toolbar_nav_toolbar};
007
008
require_once(__DIR__."/../dom/plugins/mastodon.php");
009
010
set("unsplash""DuHKoV44prg, ffstop");
011
012
villa_init();
013
014
villa_output("Web"main(
015
  header(
016
    p("I am probably better at ".a("making video games for a living""../pro")." but I love web dev.").
017
    grid(
018
      p(  
019
        "Developing this ".a("whole website""..")." 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").
026
      img("img/lighthouse.gif"), [ "style" => "--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"800600)
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 style
073
    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
      false2)).
078
    footer(p("DOM is provided for free (like free beer). Use at your own risk"))).
079
  article(
080
    header(h2("Misc. tests")).
081
    ul
082
      li(a("CSS Ipsum Test page",                "./css-ipsum"   )).
083
      li(a("Hello world!",                       "./hello-world" )).
084
      li(a("Vanilla test page",                  "./vanilla"     )).
085
      li(a("Style Stage CSS Theme contribution""./stylestage"  )).
086
      li(a("Some more tests",                    "../test"       )))).
087
  article(
088
    header(p("Source code of this web page")).
089
    this()).
090
  article(
091
    header(p("Comments")).
092
    dom\mastodon\section_comments(111954786154809891// Just for the contrasted-colors post for now
093
    )));
094

Comments