PLAYGROUND

📖 SENTENCE_DIV
MDN audio base64 🔊
RTabs playground Google Vim help
a clone of the
dev_log_map panel
EV0_LISTEN EV1_DOWN EV2_MOVE EV3_UP EV4_LONG_PRESS EV5_TOOL_CB EV6_CHANGED EV7_DISPATCH EV8_FLOATLOG S0_PATTERN S1_RANGE S2_SELECT S3_SLOT T0_STORE T1_DOM_LOAD T2_GRID T3_LAYOUT T4_PIVOT T5_SPREAD T6_SLOT T7_SHARE T8_TOOLBAR IPC_LOG

ABOUT_TO_WHITE_BOARD

Windows Terminal

:!explorer file://%USERPROFILE%/AppData/Local/Packages/Microsoft.WindowsTerminalPreview_8wekyb3d8bbwe/LocalState/settings.json
settings.json:
 ...
 ,{    "ECC"     "name"                : "ECC termios"

      , "cursorColor"           : "#FF00FF"
      , "selectionBackground"   : "#404040"
                                                              
      , 1 "black"               : "#E3E3E3"
      , 2 "red"                 : "#8B0000"
      , 3 "cyan"                : "#724A00"
      , 4 "yellow"              : "#9F9F00"
      , 5 "green"               : "#466800"
      , 6 "blue"                : "#002568"
      , 7 "purple"              : "#7E007E"
      , 8 "white"               : "#000000"
      , 9 "         foreground" : "#FFFFFF"
      , 0          "background" : "#000000"
                                               
      , 1 "brightBlack"         : "#964B00"
      , 2 "brightRed"           : "#FF0000"
      , 3 "brightCyan"          : "#FFA500"
      , 4 "brightYellow"        : "#FFFF00"
      , 5 "brightGreen"         : "#9ACD32"
      , 6 "brightBlue"          : "#6495ED"
      , 7 "brightPurple"        : "#EE82EE"
      , 8 "brightWhite"         : "#A0A0A0"
      , 9 "         foreground" : "#FFFFFF"
      , 0          "background" : "#000000"

 }


ABOUT_anchor1_anchor2_Bookmarklet

en

Cette page est faite pour moi.
...de façon à me permettre de bricoller plein de choses bizares avant d'en jetter la plupart.

Ce qui veut dire que vous devriez avoir beaucoup de mal à suivre ce qui se passe lorsqu'on clique sur quelque chose et à quoi ça peut bien servir.

L'essentiel des résultats consiste en des messages affichés par la console .. activés par une des entrées du panneau "dev_log_map".

anchor1 anchor2

RTabs Bookmarklet

  1. dom_find
  2. dom_hide
  3. dom_load
can be dragged into the bookmarks bar

TEXT_NODE

IMPORT CLEAR


 
 
 

 
✘ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

    man rich wife
    daughter God mother
    fell fel grave

    1  2  3  4  5
    6  7  8  9  0

    01 02 03 04 05 00000
    06 07 08 09 10 11111

    Cinderella Fairy tale
    by The Brothers Grimm

    The wife of a rich
    man fell sick,
    and as she felt that
    her end was drawing near
BROKEN JSON
,{"key":"DEV_playground.pat_arr"
,"val":"[\"BROKEN\"]"}}

t_share4_IMPORT_TEXT sticky_1
[{"key":"DEV_playground.sticky_1","val":"{\"xy\":{\"x\":400,\"y\":776},\"msg\":\"MQ==\",\"num\":1,\"pad_H\":85,\"pad_W\":169,\"pinned\":true,\"offset_x\":\"-0.523\",\"offset_y\":\"0.881\",\"pad_flow\":\"ws_pre\",\"dir_class\":\"point_EE\",\"pad_msg_H\":53.921875,\"pad_msg_W\":98.59375,\"msg_fontSize\":\"49.3\",\"anchor_node_path\":\"18 import_grid_container of BODY|4 DIV of import_grid_container|6 PRE of DIV\"}"}]
 
sticky 1 2 3
sticky_1-10
,{"key":"DEV_playground.sticky_1"  ,"val":"{\"xy\":{\"x\":900 ,\"y\": 600} ,\"pinned\":true ,\"msg\":\"MQ==\"}"}
,{"key":"DEV_playground.sticky_2"  ,"val":"{\"xy\":{\"x\":600 ,\"y\": 650} ,\"pinned\":true ,\"msg\":\"Mg==\"}"}
,{"key":"DEV_playground.sticky_3"  ,"val":"{\"xy\":{\"x\":900 ,\"y\": 700} ,\"pinned\":true ,\"msg\":\"Mw==\"}"}
,{"key":"DEV_playground.sticky_4"  ,"val":"{\"xy\":{\"x\":600 ,\"y\": 750} ,\"pinned\":true ,\"msg\":\"NA==\"}"}
,{"key":"DEV_playground.sticky_5"  ,"val":"{\"xy\":{\"x\":900 ,\"y\": 800} ,\"pinned\":true ,\"msg\":\"NQ==\"}"}
,{"key":"DEV_playground.sticky_6"  ,"val":"{\"xy\":{\"x\":600 ,\"y\": 850} ,\"pinned\":true ,\"msg\":\"Ng==\"}"}
,{"key":"DEV_playground.sticky_7"  ,"val":"{\"xy\":{\"x\":900 ,\"y\": 900} ,\"pinned\":true ,\"msg\":\"Nw==\"}"}
,{"key":"DEV_playground.sticky_8"  ,"val":"{\"xy\":{\"x\":600 ,\"y\": 950} ,\"pinned\":true ,\"msg\":\"OA==\"}"}
,{"key":"DEV_playground.sticky_9"  ,"val":"{\"xy\":{\"x\":900 ,\"y\":1000} ,\"pinned\":true ,\"msg\":\"OQ==\"}"}
,{"key":"DEV_playground.sticky_10" ,"val":"{\"xy\":{\"x\":600 ,\"y\":1050} ,\"pinned\":true ,\"msg\":\"MA==\"}"}
  
sticky_1
,{"key":"DEV_playground.sticky_1"
,"val":"{\"xy\":{\"x\":800
,\"y\":700}
,\"pinned\":true
,\"dir_class\":\"point_SE\"
,\"date_MS\":1561852640994
,\"msg\":\"LINE 1\\nLINE 2\\nLINE 3\\nLINE 4\\nLINE 5\"}"}

sticky_2
,{"key":"DEV_playground.sticky_2"
,"val":"{\"xy\":{\"x\":800
,\"y\":800}
,\"pinned\":true
,\"dir_class\":\"point_SE\"
,\"date_MS\":1561852640994
,\"msg\":\"WORD 1, WORD 2, WORD 3, WORD 4, WORD 5\"}"}
sticky 4 5 6
sticky_4 RESISTORS
,{"key":"WindowOrWorkerGlobalScope_btoa.sticky_4"
,"val":"{\"xy\":{\"x\":350,\"y\":1100}
,\"pinned\":true
,\"dir_class\":\"point_NE\"
,\"date_MS\":1563149076857
,\"msg\":\"PGltZyBzdHlsZT0iLXdlYmtpdC11c2VyLXNlbGVjdDogbm9uZTttYXJnaW46IGF1dG87IiBzcmM9Imh0dHBzOi8vdXBsb2FkLndpa2ltZWRpYS5vcmcvd2lraXBlZGlhL2NvbW1vbnMvdGh1bWIvNy83NS9FbGVjdHJvbmljLUF4aWFsLUxlYWQtUmVzaXN0b3JzLUFycmF5LmpwZy8zMjBweC1FbGVjdHJvbmljLUF4aWFsLUxlYWQtUmVzaXN0b3JzLUFycmF5LmpwZyI+\"
,\"anchor_node_path\":\"22 DIV of BODY|5 DIV of DIV|4 PRE of DIV\"
,\"offset_x\":0.56
,\"offset_y\":0}"}
sticky_5 Global
,{"key":"WindowOrWorkerGlobalScope_btoa.sticky_5"
,"val":"{\"xy\":{\"x\":350,\"y\":1200}
,\"pinned\":true
,\"dir_class\":\"point_EE\"
,\"date_MS\":1563149058590
,\"msg\":\"R2xvYmFs\"
,\"anchor_node_path\":\"22 DIV of BODY|5 DIV of DIV|6 PRE of DIV\"
,\"offset_x\":0.5
,\"offset_y\":0}"}
sticky_6 Google
,{"key":"DEV_playground.sticky_6"
,"val":"{\"xy\":{\"x\":470
,\"y\":346}
,\"msg\":\"PGltZyBzcmM9J2h0dHBzOi8vd3d3Lmdvb2dsZS5jb20vaW1hZ2VzL2JyYW5kaW5nL2dvb2dsZWxvZ28vMXgvZ29vZ2xlbG9nb19jb2xvcl8yNzJ4OTJkcC5wbmcnPg==\"
,\"num\":1
,\"pad_H\":141
,\"pad_W\":384
,\"pinned\":true
,\"date_MS\":1563295825456
,\"offset_x\":\"-0.111\"
,\"offset_y\":\"1.000\"
,\"pad_flow\":\"ws_pre_wrap\"
,\"dir_class\":\"point_SE\"
,\"pad_msg_H\":99
,\"pad_msg_W\":314
,\"anchor_node_path\":\"9 about_div of BODY|2 about_en of about_div|4 P of about_en\"}"}
pat_arr
,{"key":"DEV_playground.pat_arr"
,"val":"[\"01|E\"
,\"02|H\"
,\"03|E\"
,\"04|H\"
,\"05|E\"]"}

,{"key":"DEV_playground.pat_arr"
,"val":"[\"06|H\"
,\"07|E\"
,\"08|H\"
,\"09|E\"
,\"10\"]"}

,{"key":"DEV_playground.pat_arr"
,"val":"[\"man\"
,\"rich|E\"
,\"wife|E\"]"}
alt_arr
,{"key":"DEV_playground.alt_arr"
,"val":"[\"daughter\"
,\"God|E\"
,\"mother|E\"]"}
bak_arr
,{"key":"DEV_playground.bak_arr"
,"val":"[\"Cinderella\"
,\"Brothers\"
,\"Grimm\"
,\"Fairy\"]"}
BAGS
headsup
,{"key":"DEV_playground.headsup"
,"val":"{\"selected\":true
,\"pinned\":true
,\"xy\":{\"x\":229
,\"y\":0}
,\"magnified\":false}"}
test_panel
,{"key":"DEV_playground.test_panel"
,"val":"{\"selected\":true
,\"pinned\":true
,\"xy\":{\"x\":599
,\"y\":0}
,\"magnified\":false}"}
pat_bag
,{"key":"DEV_playground.pat_bag"
,"val":"{\"selected\":true
,\"pinned\":false
,\"xy\":{\"x\":150
,\"y\":500}
,\"magnified\":false}"}
sel_bag
,{"key":"DEV_playground.sel_bag"
,"val":"{\"selected\":true
,\"pinned\":false
,\"xy\":{\"x\":-54
,\"y\":69}
,\"magnified\":false}"}

white-space

o-------------------------o--------------------------o
| 1.pre                   | 3.break-spaces           |
|   Sequences of white    |   The behavior is        |
|   space are preserved.  |   identical to that of   |
|   Lines are only        |   pre-wrap, except       |
|   broken at newline     |   that:                  |
|   characters in the     |   - Any sequence of      |
|   source and at         |   preserved white        |
|   BR elements.          |   space always takes     |
o-------------------------o   up space, including    |
| 2.pre-wrap              |   at the end of the      |
|   Sequences of white    |   line.                  |
|   space are preserved.  |   - A line breaking      |
|   Lines are broken at   |   opportunity exists     |
|   newline characters,   |   after every            |
|   at BR and             |   preserved white        |
|   as necessary to fill  |   space character,       |
|   line boxes.           |   including between      |
o-------------------------o   white space            |
| 4.pre-line              |   characters.            |
|    Sequences of white   |   - Such preserved       |
|    space are collapsed. |   spaces take up space   |
|    Lines are broken at  |   and do not hang, and   |
|    newline characters,  |   thus affect the        |
|    at BR and            |   box's intrinsic        |
|    as necessary to fill |   sizes (min-content     |
|    line boxes.          |   size and max-content   |
o-------------------------o--------------------------o
| 5.normal                | 6.nowrap                 |
|   Sequences of white    |   Collapses white        |
|   space are collapsed.  |   space as for normal,   |
|   Newline characters    |   but suppresses line    |
|   in the source are     |   breaks (text           |
|   handled the same as   |   wrapping) within the   |
|   other white space.    |   source.                |
|   Lines are broken as   |                          |
|   necessary to fill     |                          |
|   line boxes.           |                          |
o-------------------------o--------------------------o

VIM_HELP


        
usr_42.txt    For Vim version 8.2.  Last change: 2008 May 05

                     VIM USER MANUAL - by Bram Moolenaar

                              Add new menus


By now you know that Vim is very flexible.  This includes the menus used in   {{{
the GUI.  You can define your own menu entries to make certain commands easily
accessible.  This is for mouse-happy users only.
}}}
42.1  Introduction    {{{
42.2  Menu commands
42.3  Various
42.4  Toolbar and popup menus

}}}
     Next chapter: usr_43.txt  Using filetypes   {{{
 Previous chapter: usr_41.txt  Write a Vim script
Table of contents: usr_toc.txt

==============================================================================
42.1  Introduction {{{

The menus that Vim uses are defined in the file "$VIMRUNTIME/menu.vim".  If
you want to write your own menus, you might first want to look through that
file.
   To define a menu item, use the ":menu" command.  The basic form of this
command is as follows:

        :menu {menu-item} {keys}

The {menu-item} describes where on the menu to put the item.  A typical
{menu-item} is "File.Save", which represents the item "Save" under the
"File" menu.  A dot is used to separate the names.  Example:

        :menu File.Save  :update<CR>

The ":update" command writes the file when it was modified.
   You can add another level: "Edit.Settings.Shiftwidth" defines a submenu
"Settings" under the "Edit" menu, with an item "Shiftwidth".  You could use
even deeper levels.  Don't use this too much, you need to move the mouse quite
a bit to use such an item.
   The ":menu" command is very similar to the ":map" command: the left side
specifies how the item is triggered and the right hand side defines the
characters that are executed.  {keys} are characters, they are used just like
you would have typed them.  Thus in Insert mode, when {keys} is plain text,
that text is inserted.

}}}
ACCELERATORS {{{

The ampersand character (&) is used to indicate an accelerator.  For instance,
you can use Alt-F to select "File" and S to select "Save".  (The 'winaltkeys'
option may disable this though!).  Therefore, the {menu-item} looks like
"&File.&Save".  The accelerator characters will be underlined in the menu.
   You must take care that each key is used only once in each menu.  Otherwise
you will not know which of the two will actually be used.  Vim doesn't warn
you for this.

}}}
PRIORITIES {{{

The actual definition of the File.Save menu item is as follows:

        :menu 10.340 &File.&Save<Tab>:w  :confirm w<CR>

The number 10.340 is called the priority number.  It is used by the editor to
decide where it places the menu item.  The first number (10) indicates the
position on the menu bar.  Lower numbered menus are positioned to the left,
higher numbers to the right.
   These are the priorities used for the standard menus:

          10    20     40     50      60       70               9999

        +------------------------------------------------------------+
        | File  Edit  Tools  Syntax  Buffers  Window            Help |
        +------------------------------------------------------------+
}}}

TEXT_NODE

-- loadPresetSlots_checkSlotItemTable {{{
function loadPresetSlots_checkSlotItemTable(log_this)
if(log_this) then c(COLOR_4.."LOADING "..QSB.Settings.PresetName.." SLOTS") end

    if(QSB.Settings.SlotItemTable == nil) then

if(log_this) then c(COLOR_2.." nothing to load|r") end

        return false
    end

    if is_SlotItemTable_empty() then

if(log_this) then c(COLOR_8.." preset is empty|r") end

    end

    return true
end
--}}}
/*_ f_name {{{*/
let f_name = function(e)
{
    /* commented block {{{*/
    if( f2_name() )
        f3_name("argument string");

    /*}}}*/

    /* Second comment */
    if(!seeker_move_grab_done)
    {
        if     ( condition  == one) { var = true; }
        else if( condition  == 2  ) { var = true; }
    }

/*{{{
log("%c var=["+ format(var)    +"]", lbb+lf5);
log("%c var=["+ format(var)    +"]", lbb+lf5);
log("%c var=["+ format(var)    +"]", lbb+lf5);
log("%c var=["+ var.toString() +"]", lbb+lf5);

LINE 1
LINE 2
LINE 3
LINE 4
LINE 5
}}}*/

};
/*}}}*/

numbers affix mask clearpin gutter scalepin

numbers 1234567890
affix .. word words .. wording
...accentuation & quotes
Le papillon qui est la forme 'adulte' de la chenille, éclos
durant l'été entre juin et septembre selon le climat.

  1. 181025
  2. mask on t_dom_edit_or_stage_start
  3. clearpin turned into a working closepin
  4. gutter viewport confinement improved
  5. scalepin layout …TODO magnification
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
123456789_123456789_123456
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

div1..div3

div1
div1_1
div1_1_1
pre1
pre2
pre3
div2
div2_1
pre1
pre2
pre3
div3
div4
div5

The assignment statement (token '=', the equals sign). This operates differently than in traditional imperative programming languages, and this fundamental mechanism (including the nature of Python's version of variables) illuminates many other features of the language. Assignment in C , e.g., x = 2 , translates to "typed variable name x receives a copy of numeric value 2". The (right-hand) value is copied into an allocated storage location for which the (left-hand) variable name is the symbolic address. The memory allocated to the variable is large enough (potentially quite large) for the declared type . In the simplest case of Python assignment, using the same example, x = 2 , translates to "(generic) name x receives a reference to a separate, dynamically allocated object of numeric (int) type of value 2." This is termed binding the name to the object. Since the name's storage location doesn't contain the indicated value, it is improper to call it a variable . Names may be subsequently rebound at any time to objects of greatly varying types, including strings, procedures, complex objects with data and methods, etc. Successive assignments of a common value to multiple names, e.g., x = 2 ; y = 2 ; z = 2 result in allocating storage to (at most) three names and one numeric object, to which all three names are bound. Since a name is a generic reference holder it is unreasonable to associate a fixed data type with it. However at a given time a name will be bound to some object, which will have a type; thus there is dynamic typing.

GOOGLE_KEEP_TO_GRID

Google Keep — dom_load (180906:15h)

  1. dom_load
  2. seeker123-OR- seekarea + lightweight seeker
  3. glow onWork_EL
  4. scroll-after-select issue
  5. fade-in-css with ::before fade-out
  6. show misclick with a glow
  7. solve misclick+move issue
  8. sel_bag: truncate pattern with ellipsis
  9. add and copy buttons on first containers clipboard button
  10. node_to_hide: add display:none after masked-invisible states
  11. overlap quadrant layout while moving pannels
  12. doc-select: discard short-lived select-unselect .. instead of…
  13. get_word_start_end: words_drop_s "s" termination… do not mess with button press pressing

Google Keep — Android (180706)

  1. postpone-toast (new node) — rephrase: node-label first
  2. Find a substitute to e.shift for move_cooldown_short
  3. toast .. no RTabs label when app is the active one
  4. Cart add-del ..bacground click should exit edit-mode
  5. allow finger lift then resume ... within some delai
  6. edit cart red-green label: copy-paste instead of add-extract

OVERFLOWWALL OF TEXT
• However, The rules above it win, because IDs/class selectors have higher specificity than element selectors (you'll learn more about this in the next section).
• Both elements have a class of better, but the 2nd one has an id of winning too. Since IDs have an even higher specificity than classes (you can only have one element with each unique ID on a page, but many elements with the same class — ID selectors are very specific in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.
OVERFLOWLONG LINE
• The 2nd element does get the red background color, but no border. Why? Because of the !important declaration in the second rule — including this after border: none means that this declaration will win over the border value in the previous rule, even though the ID has higher specificity.

WOT_1_align_contents {
        -_1_------------wall of text ------------------
        -_1_------------wall of text ------------------
        -_1_------------wall of text ------------------
}
WOT_2_align_manual {
        -_2_------------wall of text ------------------
        -_2_------------wall of text ------------------
        -_2_------------wall of text ------------------
        -_2_------------wall of text ------------------
}
WOT_3_ align_usage
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
function XXX{
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
}
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
        -_3_ ------------wall of text ------------------
WOT_4_align_maps {
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
}
        /*{{{*/
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        /*}}}*/
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
WOT_5_align_history
{
        -_4_------------wall of text ------------------
        -_4_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
        -_5_------------wall of text ------------------
}

#region MEMBERS {{{

#endregion }}}
#region LOG {{{

#endregion }}}
#region PROFILE {{{

#endregion }}}

/*_ node_has_some_text {{{*/
let node_has_some_text = function(node)
{
    return node.nodeValue
        && node.textContent
        && (trim_alNum_lines(node.textContent).length > 0)
    ;
};
/*}}}*/


const RE_PASV = /([-\d]+,[-\d]+,[-\d]+,[-\d]+),([-\d]+),([-\d]+)/;
const FTP_NEWLINE = /\r\n|\n/;
/* XXX */
/* XXX */
/* XXX */
/* XXX */
/* XXX */
/* XXX */
/* XXX */
/* XXX */
function runCmd(name, ...params) {
  let callback = NOOP;
  let completeCmd = name + " ";

  if (typeof params[params.length - 1] === "function") {
    callback = params.pop();
  }

  completeCmd += params.join(" ");
  this.execute(completeCmd.trim(), callback);
}

function Ftp(cfg) {
  this.host = cfg.host || FTP_HOST;
  this.port = cfg.port || FTP_PORT;
  this.user = cfg.user || "anonymous";
  this.pass = cfg.pass || "@anonymous";
  this.createSocket = cfg.createSocket;
  // True if the server doesn't support the `stat` command. Since listing a
  // directory or retrieving file properties is quite a common operation, it is
  // more efficient to avoid the round-trip to the server.
  this.useList = cfg.useList || false;
  this.commandQueue = [];

  EventEmitter.call(this);
  this.on("data", dbgResponse);
  this.on("error", dbgResponse);
  this._createSocket(this.port, this.host);
}

escapeXXX(`
`

dom_view


escapeXXX(`
`

dom_prop


escapeXXX(`
`

escapeXXX(`
`
checkbox_css_tag

playground_css_tag

data_image

transcript doc_log_div doc_evt_div

checkbox_div


B
Y
R

traces

0 1 2 3 4 5 6 7 8 9 A B
rotate3d(2 , 0.1 ,-0.3 , 20deg);
rotateY(50deg) translateZ(50px);
pat_sort

h2

nested_div_parent_TEXT
nested_div_3_TEXT

100037 TOP HOLD-0200URF 0102

sample_div

sample_div
cc1 TEXT SEGMENTS:
cc2 12345678901234
cc3 1234567890 1234567890
cc4 123 456 7890
cc5 ABCDEFGHIJKLMNOPQRSTUVWXYZ
cc6 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ cc7 a .. def (__) klmno ;:''"" vwxyz
cc8 a bc def ghij klmno pqrstu vwxyz

cc9 Next line contains no word

--- !! @@ ## $$ %% ~~ ^^ ** (( ))
   pre 2 id="bom"
   html
   .head
   .body
   ..title h1 h2 h3 h4
   ..sample_div
   ...parent
   ....child
   .....kid
   ..note1
   ..domtree
   ...dom_tree_link
   ...firstHeader
   ...secondHeader
   ...lastParagraph
   ...div_ul
   ...div_table
   ...myDiagramDiv
   ...otherInfo
   ..ul li
   
   pre 3 id="small"
   html
   .head
   .body
   ..title h1 h2 h3 h4
   ..sample_div
   ...parent
   ....child
   .....kid
   ..note1
   ..domtree
   ...dom_tree_link
   ...firstHeader
   ...secondHeader
   ...lastParagraph
   ...div_ul
   ...div_table
   ...myDiagramDiv
   ...otherInfo
   ..ul li
   

parent
-child1
--kid

--kid --kid_sep

--kid_p2 // single-line comment
/* multi-line comment line2 */

--kid_sep --kid_s1 --kid_sep --kid_s2 --kid_end
-child1_end
parent_sep
-child2
-child2

-child2_p1

-child2_s1-child2_s2-child2_end
parent_end
pre 1 id="note1"
If the startContainer is a Node of type Text,
Comment, or CDATASection, then startOffset
is the number of characters from the start of the startContainer
to the boundary point of the Range.
For other Node types , it is the number of child nodes
between the start of the startContainer
and the boundary point of the Range.
   
class className classList
Class ClassName ClassList
CLASS CLASSNAME CLASSLIST
csv1,csv2,_,csv3
sel1 213 sel2 435 sel3 213 sel4 435 sel6 213 546
123456789 123456789 123456789 123456789
123456789_123456789_123456
hotspot.html
index.html
playground.html
script/dom_grid.html

|          dom_data.js
|          dom_grid.js
|          dom_load.js
|          dom_log.js
|          dom_util.js
|          dom_i18n.js
|          dom_slot.js
|          dom_select.js
|          dom_wot.js
|          dom_hide.js
|          dom_store.js
|          dom_share.js
|          dom_tools.html
|          dom_tools.js
|_________ dom_wording.js

stylesheet/dom_host.css
|__________dom_tools.css

   

SYMBOLS





🔍
🔎

























26A0 WARNING
25CF BLACK CIRCLE
26AB MEDIUM BLACK CIRCLE
26AA MEDIUM WHITE CIRCLE
2B55 HEAVY LARGE CIRCLE
2718 HEAVY BALLOT X
270D WRITING HAND
261A BLACK_L HAND
261B BLACK_R HAND
261C WHITE_L HAND
26A0
26AB
23E9
23EA
2590
25B6
25BA
25FE
👽 1F47D
2714
  1 - Tangled Up In Blue
  2 - Simple Twist Of Fate
  3 - You're A Big Girl Now
  4 - Idiot Wind
  5 - You're Gonna Make Me Lonesome When You Go
  6 - Meet Me In The Morning
  7 - Lily, Rosemary And The Jack Of Hearts
  8 - If You See Her, Say Hello
  9 - Shelter From The Storm
 10 - Buckets Of Rain
   
     &comma;   , 
     &apos;    '  
   

WORDS


div_if_url
✔ in iframe ✔ taller ✔ smaller
dom_seek seektool_set6_onSticky t_set_onWork_EL ( sticky ) seektool_set5_onSeeker t_set_onWork_EL ( seeker_PU ) seektool_set4_onJumpEL t_seeker_SELECT_EL( onWork_EL ) slot num container highlight seektool_set3_onTOOL nothing to do seektool_set2_onSlotEL SEEK slot seektool_set1_onResume RESUME (same slot) seektool_set0_onDOC t_seeker_clr_TOOL dom_seek
  1. words_1
  2. o___1_E
  3. oo__1_S
  4. ooo_1_H
  5. v___2_E
  6. vv__2_S
  7. vvv_2_H
  8. x___3_E
  9. xx__3_S
  10. xxx_3_H
  1. words_2
  2. words_2
  1. words_3
  2. words_3
  3. words_3
  1. words_4
  2. words_4
  3. words_4
  4. words_4
  1. words_5
  2. words_5
  3. words_5
  4. words_5
  5. words_5
  1. words_6
  2. words_6
  3. words_6
  4. words_6
  5. words_6
  6. words_6
  1. words_7
  2. words_7
  3. words_7
  4. words_7
  5. words_7
  6. words_7
  7. words_7
  1. words_8
  2. words_8
  3. words_8
  4. words_8
  5. words_8
  6. words_8
  7. words_8
  8. words_8
  1. words_9
  2. words_9
  3. words_9
  4. words_9
  5. words_9
  6. words_9
  7. words_9
  8. words_9
  9. words_9
  1. words_A
  2. words_A
  3. words_A
  4. words_A
  5. words_A
  6. words_A
  7. words_A
  8. words_A
  9. words_A
  10. words_A
  1. words_1
  1. words_2
  2. words_2
  1. words_3
  2. words_3
  3. words_3
  1. words_4
  2. words_4
  3. words_4
  4. words_4
  1. words_5
  2. words_5
  3. words_5
  4. words_5
  5. words_5
  1. words_6
  2. words_6
  3. words_6
  4. words_6
  5. words_6
  6. words_6
  1. words_7
  2. words_7
  3. words_7
  4. words_7
  5. words_7
  6. words_7
  7. words_7
  1. words_8
  2. words_8
  3. words_8
  4. words_8
  5. words_8
  6. words_8
  7. words_8
  8. words_8
  1. words_9
  2. words_9
  3. words_9
  4. words_9
  5. words_9
  6. words_9
  7. words_9
  8. words_9
  9. words_9
  1. words_A
  2. words_A
  3. words_A
  4. words_A
  5. words_A
  6. words_A
  7. words_A
  8. words_A
  9. words_A
  10. words_A
words_[0-9] words_[0-A] word[^ ]+
_words words words_
hidden
pre display:none:
hidden
hidden

📌 P_START
CODE 1 (short) not a code_container
CODE 2 (short) not a code_container
CODE 3 (long)
is code_container
123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789
123456789 123456789 123456789 123456789 123456789
Operations at L3 level(Incident / Problem / Change)
P_END <= "&" >= 1 23 456 7890

cc[0-3]
cc[4-5]
cc[6-9]
  • cc1
  • cc2
  • cc3
  • cc4
  • cc5
  • cc6
  • cc7
  • cc8
  • cc9
  • cc0
pattern_1
pattern_2
pattern_3
pattern_4
pattern_5

pattern_6
pattern_7
pattern_8
pattern_9
pattern_A
pattern_B
pattern_C
pattern_D
pattern_E
pattern_F
pat1 toggle_innerText
pat2 toggle_innerText
pat3 toggle_innerText
pat4 toggle_innerText
pat5 toggle_innerText


pat6 toggle_innerText
pat7 toggle_innerText
pat8 toggle_innerText
pat9 toggle_innerText
patA toggle_innerText
patB toggle_innerText


t_sticky_LOG

t_sticky_LOG
TD_LEFT
  • A positioned element is an element whose
  • computed position value
  • ...is either:
  • relative
  • absolute
  • fixed or:
  • sticky
  • In other words, it's anything except:
  • static
TD_CENTER
  • CLICK t_sticky_CLICK_CB
  • PRESS onLong_press3_TOOL_EL_CB
TD_RIGHT
t_sticky_LOG CLEAR get_node_path

 

feedback_tree


 

dom_details


 



SENTENCE_DIV 📖

P1: Sentence 1, clause 2, last clause.

P2: Sentence 1, clause 2, last clause. Sentence 2, clause 2, last clause.

P3: Sentence 1, clause 2, last clause. Sentence 2, clause 2, last clause. Sentence 3, clause 2, last clause.

M. Monsieur.
Mme. Madame.
Mgnr. Monseigneur_has_underscrore_characters

Longtemps, les États ont toléré toutes les infractions des industries numériques, qu’il s’agisse de fiscalité, de propriété intellectuelle ou de vie privée.
Il fallait « agir vite et casser des choses », selon le mot de M. Mark Zuckerberg.
Mais le rapport de forces avec les puissances publiques bascule.
La question n’est plus de savoir si l’activité de ces groupes sera réglementée, mais comment et au profit de qui.
M. Monsieur.
Mme. Madame.
Mgnr. Monseigneur_has_underscrore_characters

Longtemps, les États ont toléré toutes les infractions des industries numériques, qu’il s’agisse de fiscalité, de propriété intellectuelle ou de vie privée.
Il fallait « agir vite et casser des choses », selon le mot de M. Mark Zuckerberg.
Mais le rapport de forces avec les puissances publiques bascule.
La question n’est plus de savoir si l’activité de ces groupes sera réglementée, mais comment et au profit de qui.
 

    La vie de Mme Catherine Taylor a basculé le jour où un courtier en données personnelles
    a inscrit par erreur dans son dossier : « Tentative de vendre et de fabriquer des méthamphétamines ».
    Cette fausse accusation s’est répandue comme une traînée de poudre, par le truchement 
    des ventes effrénées d’informations relatives aux consommateurs.
    Lorsqu’elle postulait à un emploi, ce stigmate numérique lui collait à la peau et faisait fuir les recruteurs.
    Elle ne pouvait même pas s’acheter un lave-vaisselle à crédit.

 
Que cherche t'on... à dévaloriser ses recherches...
quel intérêt financier pour nos chers laboratoires
un médicament aussi accessible ?

h3

La chloroquine commercialisée sous le nom de nivaquine est un anti paludéen (j'ai moi même pris ce médicament pendant des années en afrique). Next sentence start, prev_end, next_start, last_word. Another sentence.


onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}

  console.log('XXX');
CSP - Writing a policy - MDN
    A policy is described using a series of policy directives
    , each of which describes the policy for a certain resource type or policy area.
    Your policy should include a default-src policy directive,
    which is a fallback for other resource types when they don't have policies of their own (for a complete list,
    see the description of the default-src directive).
    A policy needs to include a default-src or script-src directive to prevent inline scripts from running,
    as well as blocking the use of eval().
    A policy needs to include a default-src or style-src directive to restrict inline styles from being applied from a <style> element or a style attribute.
    There are specific directives for a wide variety of types of items,
    so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.
Privacy, permissions, and information security
Web technologies and features used to enforce security and privacy
Technology or feature Description
Certificate Transparency An open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates
Content Security Policy Provides the ability to define the extent to which a document's content can be accessed by other devices over the web; used in particular to prevent or mitigate attacks on the server
Feature Policy Lets web developers selectively enable, disable, and modify the behavior of certain features and APIs both for a document and for subdocuments loaded in <iframe>s
<iframe>'s allow attribute Technically part of Feature Policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be allowed to access
HTTP Public Key Pinning (HPKP) HPKP is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks
HTTP Strict Transport Security (HSTS) HSTS is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they can only use HTTPS to communicate with the server
HTTP/2 While HTTP/2 technically does not have to use encryption, most browser developers are only supporting it when used with HTTPS, so it can be thought of in that regard as being security-related
Permissions API Provides a way to determine the status of permissions for the current browser context
Transport Layer Security (TLS); formerly known as Secure Sockets Layer (SSL) TLS provides security and privacy by encrypting data during transport over the network. This is the technology behind the HTTPS (HyperText Transport Protocol Secured) protocol


    Bonjour Francis,
    Bonjour Amaël,

    Mon rapport d'avancement sur l'étude pour une extension destinée à analyser et communiquer le contenu d'une page Internet visitée par un navigateur.

    LES DIFFÉRENTS POINTS À CONSIDÉRER:

        1. SOLUTIONS TECHNIQUES - AVEC DES RÉSULTATS POSITIFS:
         - j'ai pu adapter un module open-source de Google pour la transmission du DOM basé sur MutationObserver

        2. DUPLICAT5ION DES PAGES VISITÉES:

        - [pagemirror]

            ... démontre la duplication du DOM
            ... par transmission des constituants de la page
            ... et de l'évolution des attributs en temps réel


        - [screen_sharing_extension]

            ... mêmes mécanismes concernant le DOM
            ... communication WebSocket
            ... pour l'instant: sur la MÊME MACHINE QUE CELLE DU NAVIGATEUR
            ... SUBMIT MODE POST à étudier avec la PERSONNE EN CHARGE DU SERVEUR


        3. DES PROBLÈMES À CREUSER:

         - Les shadowRoot en mode closed .. ils sont inaccessibles au JavaScript

             ... les pubs sont-elles concernées ?


         - Les CSP (Content-Security-Policy) qui peuvent bloquer javascript:

             ... script-src, connect-src, frame-src, plungin-type, worker-src, ...


        4. DES QUESTIONS À ÉCLAIRCIR:

         - architecture du serveur CXUnified à alimenter:

             ... y a-t'il un INTERLOCUTEUR TECHNIQUE sur le sujet ?
             ... le PROTOCOLE à utiliser pour cette transmission
             ... disponibilité d'un SERVEUR DE TEST
             ... POSSIBILITÉS DE SIMULATION pendant le développement


        5. DÉVELOPPEMENT À PARTIR DE LÀ:

            ... communication HTTPRequest mode POST
            ... besoin de COMPÉTENCES ET DE RESSOURCES complémentaires pour avancer


    J'ai des choses à vous montrer en partage d'écran,
    mais j'ai des besoins de collaboration pour rester
    efficace concernant les aspects en marge de mes compétences.

    J'attends de vos nouvelles...
    A bientôt,
    Ivan




    iwintoo/browser-extension
         < a href="https://gitlab.com/cxunified/browser-extension/-/tree/develop">https://gitlab.com/cxunified/browser-extension/-/tree/develop
        ivanwfr izZ

    README.md

    Requirements

    Docker
        https://www.docker.com/

    docker-compose
        https://docs.docker.com/compose/

    OpenSSL (development)
        OpenSSL development package is libssl-dev.
        "SSL development libraries
        , header files and documentation"
        (from libssl-dev package description).

    Update hostfile (/etc/hosts) with:

    Local server (development)

    127.0.0.1       api.one2one.digital
    Usage
    Handling serv
    Generate cert files

    bash nginx/generate_cert.sh

    Build config

    Dev

    cp config/docker-compose.dev.yml docker-compose.yml
    cp nginx/conf/dev.conf nginx/default.conf
    Prod

    cp config/docker-compose.prod.yml docker-compose.yml
    cp nginx/conf/prod.conf nginx/default.conf
    Lauch containers

    docker-compose up -d

    To get webapp logs :

    docker container logs webapp -f
    Visit https://api.one2one.digital to validate certificates once at least

    Extension
    yarn
        https://yarnpkg.com/

    yarn build
    You can now load the extension/build/ folder in chrome://extension

grep(1) - Linux man page
<DETAILS closed>
<summary> Matcher Selection </summary> <dl>
-E, -- extended -regexp
Interpret PATTERN as an extended regular expression (ERE, see below). (-E is specified by POSIX.)
-F, --fixed-strings
Interpret PATTERN as a list of fixed strings, separated by newlines, any of which is to be matched. ( -F is specified by POSIX .)
-G , --basic-regexp
Interpret PATTERN as a basic regular expression (BRE, see below). This is the default.
-P, --perl-regexp
Interpret PATTERN as a Perl regular expression. This is highly experimental and grep -P may warn of unimplemented features.
</dl>
</DETAILS>

WHITE BOARD


.. .. ..

pre contenteditable

🔍
3 📋 "dc:creator" #3 and 4 of 6
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
    "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:foaf="http://xmlns.com/foaf/0.1/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    version="XHTML+RDFa 1.0" xml:lang="en">
  <head>
    <title>John's Home Page</title>
    <base href="http://example.org/john-d/" />
    <meta property="dc:creator" content="Jonathan Doe" />
    <link rel="foaf:primaryTopic" href="http://example.org/john-d/#me" />
  </head>
  <body about="http://example.org/john-d/#me">
    <h1>John's Home Page</h1>
    <p>My name is <span property="foaf:nick">John D</span> and I like
      <a href="http://www.neubauten.org/" rel="foaf:interest"
        xml:lang="de">Einstürzende Neubauten</a>.
    </p>
    <p>
      My <span rel="foaf:interest" resource="urn:ISBN:0752820907">favorite
      book is the inspiring <span about="urn:ISBN:0752820907"><cite
      property="dc:title">Weaving the Web</cite> by
      <span property="dc:creator">Tim Berners-Lee</span></span></span>.
    </p>
  </body>
</html>

#words‍_1 #fold‍_5 ∋ WOT #SYMBOLS 📖 SENTENCE_DIV
Page end left
Page end right

Same as"*",but search backward.
cursor = "url('stylesheet/svg_32.svg') 16 16, pointer"


FOLD_PRE

last body node containing a overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child
overflowing child