User:Kim/Special Issue 26/Inspector Extensions: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 2: Line 2:
=== keys ===
=== keys ===
* '''website is not a sealed off, pure surface''' current web interfaces and focus on 'user experience' hide programmability of the system, to minimize and channel user interacting with it: creates the illusion that there is nothing behind (the user interface)
* '''website is not a sealed off, pure surface''' current web interfaces and focus on 'user experience' hide programmability of the system, to minimize and channel user interacting with it: creates the illusion that there is nothing behind (the user interface)
* Layers  
* '''Browsers (crucial, performative) role as interpreter'''
* Layers (visually but also layers of actors/technologies involved in the process of rendering this website)
* Visibility (transparency, permeability)
* Visibility (transparency, permeability)
* '''Browsers (crucial, performative) role as interpreter'''
* <span style="color: lightgrey;">'''inspection + making structure visible + contamination (on browser level)''' inspection also suggests looking at something that is initially hidden, its intimate and intruding at times</span>
* <span style="color: lightgrey;">'''inspection + making structure visible + contamination (on browser level)''' inspection also suggests looking at something that is initially hidden, its intimate and intruding at times</span>


=== Metaphors / Analogies ===
=== Metaphors / Analogies ===
*looking glass (ofc)
* looking glass or '''microscope''' (with different lenses) [https://commons.wikimedia.org/wiki/File:View_Inside_Microscope.jpg#/media/File:View_Inside_Microscope.jpg] [https://commons.wikimedia.org/wiki/File:Mature_Dicrocoelium_dendriticum.jpg#/media/File:Mature_Dicrocoelium_dendriticum.jpg] [https://commons.wikimedia.org/wiki/File:Bancs%C3%B3_2021_Fig_8-4_Asterococcus_superbus.jpg#/media/File:Bancs%C3%B3_2021_Fig_8-4_Asterococcus_superbus.jpg] [https://commons.wikimedia.org/wiki/File:Celery_Cells_(400x).jpg#/media/File:Celery_Cells_(400x).jpg] [https://commons.wikimedia.org/wiki/File:Geometry_through_microscope.jpg#/media/File:Geometry_through_microscope.jpg]
* what if inspection was less visual and more tactile ? (haptik – surface feel)
* what if inspection was less visual and more tactile ? (haptik – surface feel)
** they have a tactility to them: stickyness, maserung holz
** they have a tactility to them: stickyness, maserung holz
** 'see trough' cameras or scans – let us look behind surfaces (like infra red, x ray or MRI scan (which makes head/ brain visible)) --> play with transparencies
** 'see trough' cameras or scans – let us look behind surfaces (like infra red, x ray or MRI scan (which makes head/ brain visible)) --> play with transparencies
* <span style="color: lightgrey;">looking underneath (like flipping it on its back side)</span>
* '''Topography''' emphasizes web as environment/ spacial, layers "is the study of the forms and features of land surfaces" -> extensions inspect websites on 'surface' level (Graphical interface) to extract information about underlying structure, environment and involved entities [https://cdn.buttercms.com/HCgFcLaS0WeJ590jY3rJ] [https://d2w9rnfcy7mm78.cloudfront.net/2311790/original_b471af19f9692ccb65809512336d9f00.jpg?1528950706?bc=1] [https://d2w9rnfcy7mm78.cloudfront.net/1455130/original_ce7ca0ea6404e2d21317bac6f9fbef85.jpg?1511576659?bc=1] [https://d2w9rnfcy7mm78.cloudfront.net/16059514/original_457bc36d51c7b2b41533a91bd0c81424.jpg?1649948941?bc=0]
* '''Topography''' emphasizes web as environment/ spacial, layers "is the study of the forms and features of land surfaces" -> extensions inspect websites on 'surface' level (Graphical interface) to extract information about underlying structure, environment and involved entities




Line 33: Line 32:
*** What functions does it need?
*** What functions does it need?
** Extension Meta Info: Title(s), Icons ...
** Extension Meta Info: Title(s), Icons ...
* publish (see outlook) print, git, moz extension store?
'''need tech help with:'''
* website age Whois request / API
* bringing extensions together
'''class questions:'''
* how much explanation should there be about what is happening, what this is examining? (source code comments etc are not widely known)


== Elements ==
== Elements ==
Line 52: Line 59:
* refine functionality: maybe rings can build up one after another, maybe there is a way to not let it destroy the interface this much? should the age be displayed somewhere as number?
* refine functionality: maybe rings can build up one after another, maybe there is a way to not let it destroy the interface this much? should the age be displayed somewhere as number?


<nowiki>*</nowiki> is it possible to use a python script for that? specifically to connect .py with browser extension?
<nowiki>*</nowiki> <span style="color:lightgray;">is it possible to use a python script for that? specifically to connect .py with browser extension?
apparently this works see [https://python-forum.io/thread-41455.html] or [https://stackoverflow.com/questions/72212248/how-to-use-python-program-for-a-web-extension] this later one recommends creating my own api with python script and call api inside you javascript file or writing [https://pyscript.net/ Pyscript]
apparently this works see [https://python-forum.io/thread-41455.html] or [https://stackoverflow.com/questions/72212248/how-to-use-python-program-for-a-web-extension] this later one recommends creating my own api with python script and call api inside you javascript file or writing [https://pyscript.net/ Pyscript]</span> <br>
https://stackoverflow.com/questions/6728143/how-do-i-run-a-whois-lookup-with-php-or-python
<br><br>
update: together with Joseph started to write my own API. This lives on Cerealbox and uses php to make a whois request and returns a response in json that I can then fetch in my browser extensions javascript. (not fully running yet but its a good lead how this could work)<br>
https://www.geeksforgeeks.org/php-json-pretty-print/


=== Empty Elements ===
=== Empty Elements ===
Line 76: Line 87:


== Outlook ==
== Outlook ==
I would like to have a way of publishing them other than (just) in the extension store -- could this be a printed zine that contains all the code annotated?
I would like to have a way of publishing them other than (just) in the extension store <br>
-- could this be a printed zine that contains all the code annotated? <br>
-- or some things I found in codes while browsing with extensions? <br>
-- or giving a reading of source code comments

Latest revision as of 10:15, 9 March 2025

Concept

keys

  • website is not a sealed off, pure surface current web interfaces and focus on 'user experience' hide programmability of the system, to minimize and channel user interacting with it: creates the illusion that there is nothing behind (the user interface)
  • Browsers (crucial, performative) role as interpreter
  • Layers (visually but also layers of actors/technologies involved in the process of rendering this website)
  • Visibility (transparency, permeability)
  • inspection + making structure visible + contamination (on browser level) inspection also suggests looking at something that is initially hidden, its intimate and intruding at times

Metaphors / Analogies

  • looking glass or microscope (with different lenses) [1] [2] [3] [4] [5]
  • what if inspection was less visual and more tactile ? (haptik – surface feel)
    • they have a tactility to them: stickyness, maserung holz
    • 'see trough' cameras or scans – let us look behind surfaces (like infra red, x ray or MRI scan (which makes head/ brain visible)) --> play with transparencies
  • Topography emphasizes web as environment/ spacial, layers "is the study of the forms and features of land surfaces" -> extensions inspect websites on 'surface' level (Graphical interface) to extract information about underlying structure, environment and involved entities [6] [7] [8] [9]


contamination --> infectious interfaces --> malware [10] --> website extension ...

  • Malware Museum 1

  • Malware Museum 2

  • Website Age WiP 1

  • Website Age WiP 2

General Tasks

  • look into browser API's (JavaScript can do more on browser level than on website level!)
    • history API allows to see how many times you visited a website (--wear and tear of a website)
  • read MDN Docs
  • bring individual extensions together in a bundle
    • interface that allows to navigate between 4 extensions
      • what does this look like?
      • What functions does it need?
    • Extension Meta Info: Title(s), Icons ...
  • publish (see outlook) print, git, moz extension store?

need tech help with:

  • website age Whois request / API
  • bringing extensions together

class questions:

  • how much explanation should there be about what is happening, what this is examining? (source code comments etc are not widely known)

Elements

Comments

a websites HTML (example for html comments [11]) -- html works but only on some levels yet (not on comments in document head) + CSS + JS Comments visible through browser extension (in three columns)

Do:

  • needs better html parsing (treewalker: [12] [13])
  • append container only when there are comments? (or: add message no comments found)
  • pop up buttons into checkmarks? radio buttons or toggles?

Website Age

This extension asks for the registration date of a websites Domain - and per year the website is old adds a border to every website element (while shrinking the inner content, growing outwards)

Do:

  • find solution for Whois Api: at the moment it has restricted TLD support (see below) *
  • rebuild extension so it also works on request (button) not automatically on every page visited
  • refine functionality: maybe rings can build up one after another, maybe there is a way to not let it destroy the interface this much? should the age be displayed somewhere as number?

* is it possible to use a python script for that? specifically to connect .py with browser extension? apparently this works see [14] or [15] this later one recommends creating my own api with python script and call api inside you javascript file or writing Pyscript
https://stackoverflow.com/questions/6728143/how-do-i-run-a-whois-lookup-with-php-or-python

update: together with Joseph started to write my own API. This lives on Cerealbox and uses php to make a whois request and returns a response in json that I can then fetch in my browser extensions javascript. (not fully running yet but its a good lead how this could work)
https://www.geeksforgeeks.org/php-json-pretty-print/

Empty Elements

this extension comes in two steps:

  1. it allows to log all :empty html elements (with name and attributes) into the inspector console
  2. makes all empty elements visible in the websites interface and creates an inspector cursor which shows :empty elements name on hover

Do:

  • styling
    • how empty elements appear on the page (darker bg color to create empty as 'cut-outs') + console.logs + browser pop up

< head >

reveals meta, script and link tags in the head of a websites source code

Do:
needs: visual appearance (?) styling other than low key techy dark mode * styling idea: everything color bg (like comments, but focussed transparency)

  • tabindex navigation works but should/ can I prevent it from navigating the whole website?
  • Maybe the fact that a head is attached to the top of something could give interesting layout or positioning ideas

this is the etherpad css url: https://pad.xpub.nl/p/css-show-meta

Outlook

I would like to have a way of publishing them other than (just) in the extension store
-- could this be a printed zine that contains all the code annotated?
-- or some things I found in codes while browsing with extensions?
-- or giving a reading of source code comments

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Kim/Special_Issue_26/Inspector_Extensions&oldid=290395"