Obfuscation platframe - Revision history

Hd-onions at 16:05, 23 February 2022

2022-02-23T16:05:38Z

← Older revision		Revision as of 18:05, 23 February 2022
Line 111:		Line 111:
	There will be a moment when the chat will be turned off and the videos in the exhibition will be taken offline. This will be approximately one year after the workshop has concluded. This will probably be the ''platframe’s'' last ''lifecyle'' – at least in this context. The ''platframe'' becomes more static, contributions are collected and organized in a manner that makes them accessible for future reference. A workshop report – the postscript of which this document is part of, is published and distributed. The ''platframe'' regions that will stay available are the resources collected in the library, the glossary, the references of the different sessions, notes that can be read back, the readme and of course the code repository.		There will be a moment when the chat will be turned off and the videos in the exhibition will be taken offline. This will be approximately one year after the workshop has concluded. This will probably be the ''platframe’s'' last ''lifecyle'' – at least in this context. The ''platframe'' becomes more static, contributions are collected and organized in a manner that makes them accessible for future reference. A workshop report – the postscript of which this document is part of, is published and distributed. The ''platframe'' regions that will stay available are the resources collected in the library, the glossary, the references of the different sessions, notes that can be read back, the readme and of course the code repository.

			= Repository =





	~~[https://vvvvvvaria.org/~mb/post-script-print-10-12-21.pdf Complete conference post script designed by Varia (Manetta Berends, Cristina Cochior)]~~



	<tool user="hackersanddesigners" repo="obfuscation" file="README.md" />		<tool user="hackersanddesigners" repo="obfuscation" file="README.md" />

Hd-onions at 15:40, 23 February 2022

2022-02-23T15:40:01Z

← Older revision		Revision as of 17:40, 23 February 2022
Line 77:		Line 77:
	* For similar reasons we decided to add the option for website visitors to reduce the colors to black and white, which makes the chat more legible		* For similar reasons we decided to add the option for website visitors to reduce the colors to black and white, which makes the chat more legible
	* We were not able to sufficiently test the site with screen readers. For instance it would have been important to see how the spatially distributed chat could have been displayed and read linearly, making it more screen reader friendly.		* We were not able to sufficiently test the site with screen readers. For instance it would have been important to see how the spatially distributed chat could have been displayed and read linearly, making it more screen reader friendly.
	* Finally, we authored a guided tour of the ''platframe'', – a step by step tutorial		* Finally, we authored a guided tour of the ''platframe'', – a step by step tutorial with instructions on navigation and interaction. https://3rd.obfuscationworkshop.org/readme/tour
	with instructions on navigation and interaction.
	https://3rd.obfuscationworkshop.org/readme/tour

	'''Tools for collective organization: Ethercalc, Etherpad, Jitsi, Freenode.'''		'''Tools for collective organization: Ethercalc, Etherpad, Jitsi, Freenode.'''

Hd-onions at 15:39, 23 February 2022

2022-02-23T15:39:39Z

← Older revision		Revision as of 17:39, 23 February 2022
Line 74:		Line 74:
	* Something we weren’t able to address in the short amount of time was the possibility to tab through and hit enter on the chat component of our website. The rest of the website is navigable with only the tab and enter buttons.		* Something we weren’t able to address in the short amount of time was the possibility to tab through and hit enter on the chat component of our website. The rest of the website is navigable with only the tab and enter buttons.
	* For the Livestream, we could have considered live captioning or offering a transcript after the talks.		* For the Livestream, we could have considered live captioning or offering a transcript after the talks.
	* While we enjoyed exploring ‘obfuscation’ in some aesthetic choices of the website design (textures and the noise font - a font chosen because its illegible to machines – specifically Optical Character Recognition software) we realized that this conceptual and aesthetic choice made it difficult for people with low vision to access the content. To make the site more legible we implemented an option for users to increase contrast and ‘strip’ the css of the website, depending on their needs. A great reference Loren shared for implementing different css options, such as font choices to allow different		* While we enjoyed exploring ‘obfuscation’ in some aesthetic choices of the website design (textures and the noise font - a font chosen because its illegible to machines – specifically Optical Character Recognition software) we realized that this conceptual and aesthetic choice made it difficult for people with low vision to access the content. To make the site more legible we implemented an option for users to increase contrast and ‘strip’ the css of the website, depending on their needs. A great reference Loren shared for implementing different css options, such as font choices to allow different points of access, is queer art collective Coven Berlin: https://www.covenberlin.com/contact/
	points of access, is queer art collective Coven Berlin: https://www.covenberlin.com/contact/
	* For similar reasons we decided to add the option for website visitors to reduce the colors to black and white, which makes the chat more legible		* For similar reasons we decided to add the option for website visitors to reduce the colors to black and white, which makes the chat more legible
	* We were not able to sufficiently test the site with screen readers. For instance it would have been important to see how the spatially distributed chat could have been displayed and read linearly, making it more screen reader friendly.		* We were not able to sufficiently test the site with screen readers. For instance it would have been important to see how the spatially distributed chat could have been displayed and read linearly, making it more screen reader friendly.

Hd-onions at 15:39, 23 February 2022

2022-02-23T15:39:13Z

← Older revision		Revision as of 17:39, 23 February 2022
Line 10:		Line 10:

	==Introduction==		==Introduction==
	The ''platframe'' is a website that converges and frames pre-existing tools, to facilitate online encounters, exchanges and forms of content production. It is a		The ''platframe'' is a website that converges and frames pre-existing tools, to facilitate online encounters, exchanges and forms of content production. It is a''frame'' rather than a ''form'' – as it attempts to sustain a certain legibility of the boundaries and relationships of the many ''different'' tools, softwares, services, frameworks and legacies embedded in the technical object.
	''frame'' rather than a ''form'' – as it attempts to sustain a certain legibility of the
	boundaries and relationships of the many ''different'' tools, softwares, services,
	frameworks and legacies embedded in the technical object.
	We have expanded this readme from the conventional format of a step by step installation manual towards a reflective document that considers the process of the website coming into being, its different ‘lifecycles’, the expectations it created and the conversations it facilitated.		We have expanded this readme from the conventional format of a step by step installation manual towards a reflective document that considers the process of the website coming into being, its different ‘lifecycles’, the expectations it created and the conversations it facilitated.

	==How to preserve a ''platframe''?==		==How to preserve a ''platframe''?==
	While the ''platframe'' is a continuation of pre-existing tools, placing them in a different setting, creating new relations and dependencies, it never solidified nor		While the ''platframe'' is a continuation of pre-existing tools, placing them in a different setting, creating new relations and dependencies, it never solidified nor reached one final state or destiny. The ''platframe'' grew, matured, broke, and continued to evolve. Documenting such a living creature, is in and of itself a challenging project. From what perspective, or at what moment to make the cut?
	reached one final state or destiny. The ''platframe'' grew, matured, broke, and continued to evolve. Documenting such a living creature, is in and of itself a challenging project. From what perspective, or at what moment to make the cut?
	When and how to create the necessary distance to draw together its' many traces, and how to make them available for others in a meaningful way? This readme thus grapples with the issue that comes with documenting something that is constantly changing, emerging and evaporating. We took the approach of structuring the documentation of the ''platframe'' through its different lifecycles, which include the different tools that have been informing the process of making this digital object, whether or not they became explicitly visible. Some screenshots will help to give an indication of how the website was coming to life, how it accommodated different encounters and how it challenged those		When and how to create the necessary distance to draw together its' many traces, and how to make them available for others in a meaningful way? This readme thus grapples with the issue that comes with documenting something that is constantly changing, emerging and evaporating. We took the approach of structuring the documentation of the ''platframe'' through its different lifecycles, which include the different tools that have been informing the process of making this digital object, whether or not they became explicitly visible. Some screenshots will help to give an indication of how the website was coming to life, how it accommodated different encounters and how it challenged those
	encountering it. The most intensive moment of this was the workshop day on May 7, 2021, with around two hundred participants interacting on the ''platframe''.		encountering it. The most intensive moment of this was the workshop day on May 7, 2021, with around two hundred participants interacting on the ''platframe''.
Line 39:		Line 35:
	* '''Collaboration across disciplines:''' The possibility to engage in a collaborative, reflective making process that transgresses solutionist approaches to technological development, disciplinary boundaries and different knowledge domains. The ''platframe'' thus, became a convergence of different tools as well as a convergence of different practices.		* '''Collaboration across disciplines:''' The possibility to engage in a collaborative, reflective making process that transgresses solutionist approaches to technological development, disciplinary boundaries and different knowledge domains. The ''platframe'' thus, became a convergence of different tools as well as a convergence of different practices.
	* '''Digital Discomfort:''' Embarking on this project as ‘non-experts’ in platform development, we had to manage the expectations of everyone, including our selves. This platform would probably challenge us more than the, by now habitual experience, of meeting on Zoom, Teams or Google Hangout. As the Workshop on Obfuscation raised questions about inner workings, ethics, and socio-technological entanglements, the ''platframe'' would therefore ask for more patience and endurance from participants than they were used to. In that context Jara Rocha curated an anti-solutionist collection of formats for digital discomfort.		* '''Digital Discomfort:''' Embarking on this project as ‘non-experts’ in platform development, we had to manage the expectations of everyone, including our selves. This platform would probably challenge us more than the, by now habitual experience, of meeting on Zoom, Teams or Google Hangout. As the Workshop on Obfuscation raised questions about inner workings, ethics, and socio-technological entanglements, the ''platframe'' would therefore ask for more patience and endurance from participants than they were used to. In that context Jara Rocha curated an anti-solutionist collection of formats for digital discomfort.


	'''Map / Navigation'''		'''Map / Navigation'''

Hd-onions at 15:38, 23 February 2022

2022-02-23T15:38:24Z

← Older revision		Revision as of 17:38, 23 February 2022
Line 37:		Line 37:
	* '''Privacy and data security:''' The need for care around privacy and security issues, which seemed to be even more amplified due to the global pandemic and our increasing reliances on online meetings platforms		* '''Privacy and data security:''' The need for care around privacy and security issues, which seemed to be even more amplified due to the global pandemic and our increasing reliances on online meetings platforms
	* '''Welcoming and safe online encounters:''' Writing a code of conduct and a careful and moderation of the chat in order to create and sustain a safe (online) environment that is welcoming to all participants		* '''Welcoming and safe online encounters:''' Writing a code of conduct and a careful and moderation of the chat in order to create and sustain a safe (online) environment that is welcoming to all participants
	* '''Collaboration across disciplines:''' The possibility to engage in a collaborative,		* '''Collaboration across disciplines:''' The possibility to engage in a collaborative, reflective making process that transgresses solutionist approaches to technological development, disciplinary boundaries and different knowledge domains. The ''platframe'' thus, became a convergence of different tools as well as a convergence of different practices.
	reflective making process that transgresses solutionist approaches to technological development, disciplinary boundaries and different knowledge domains. The ''platframe'' thus, became a convergence of different tools as well as a convergence of different practices.		* '''Digital Discomfort:''' Embarking on this project as ‘non-experts’ in platform development, we had to manage the expectations of everyone, including our selves. This platform would probably challenge us more than the, by now habitual experience, of meeting on Zoom, Teams or Google Hangout. As the Workshop on Obfuscation raised questions about inner workings, ethics, and socio-technological entanglements, the ''platframe'' would therefore ask for more patience and endurance from participants than they were used to. In that context Jara Rocha curated an anti-solutionist collection of formats for digital discomfort.
	* '''Digital Discomfort:''' Embarking on this project as ‘non-experts’ in platform development, we had to manage the expectations of everyone, including our selves. This platform would probably challenge us more than the, by now habitual experience, of meeting on Zoom, Teams or Google Hangout. As the Workshop on Obfuscation raised questions about inner workings, ethics, and socio-technological entanglements, the ''platframe'' would therefore ask for more patience and endurance from participants than they were used to. In that context Jara Rocha curated an anti-solutionist collection of formats for
	digital discomfort.

	'''Map / ~~Navigatio~~'''		'''Map / Navigation'''

	The ''platframe'' was not designed to mimic a physical conference but aimed at facilitating the temporalities and collectivities of an online workshop. We worked with the concept of a large canvas, which extends in all directions and can be navigated similarly to how a map is navigated. It contains regions, such as the reception, study room and exhibition space, each with their own respective content. Different regions became more and less relevant in different lifecycles.		The ''platframe'' was not designed to mimic a physical conference but aimed at facilitating the temporalities and collectivities of an online workshop. We worked with the concept of a large canvas, which extends in all directions and can be navigated similarly to how a map is navigated. It contains regions, such as the reception, study room and exhibition space, each with their own respective content. Different regions became more and less relevant in different lifecycles.
Line 55:		Line 53:

	Technically the platframe did not use cookies. However, data submitted by participants, such as their display name, position, cursor’s color and messages were sent to our Hackers & Designers server and to the other participants.		Technically the platframe did not use cookies. However, data submitted by participants, such as their display name, position, cursor’s color and messages were sent to our Hackers & Designers server and to the other participants.
	To remember participants, the server assigns a unique identifier (UID) to their browsers and stores it in the browser’s localStorage, that looks like this: “uid”:		To remember participants, the server assigns a unique identifier (UID) to their browsers and stores it in the browser’s localStorage, that looks like this: “uid”: “266f429f2d4”. When a participant accesses the ''platframe'', the server authenticates their UID against its store of users.
	“266f429f2d4”. When a participant accesses the ''platframe'', the server authenticates their UID against its store of users.
	On a technical level, this was not absolutely necessary and we did explore alternative methods that rely purely on peer-to-peer authentication with no servers involved (see CRDTs). Although this method was worth exploring, it could not ensure full certainty that participants blocked by moderators would not be able to access the website, so we resorted to the current method.		On a technical level, this was not absolutely necessary and we did explore alternative methods that rely purely on peer-to-peer authentication with no servers involved (see CRDTs). Although this method was worth exploring, it could not ensure full certainty that participants blocked by moderators would not be able to access the website, so we resorted to the current method.
	There is always the option for a given participant to delete their user from our server.		There is always the option for a given participant to delete their user from our server.

Hd-onions at 15:36, 23 February 2022

2022-02-23T15:36:51Z

← Older revision		Revision as of 17:36, 23 February 2022
Line 31:		Line 31:
	</gallery>		</gallery>

	==Lifecycle 0: Development===		===Lifecycle 0: Development===
	In December 2020, Hackers & Designers was invited to work with the organizing team of the 3rd Workshop on Obfuscation (Jara Rocha, Seda Gürses, Ero Balsa) to conceptualize, design and develop a digital platform that takes an important part in facilitating an online workshop. The challenge was to develop this digital object while the conference was also still in the process of development. Principles that were important to address from the beginning of the process were:		In December 2020, Hackers & Designers was invited to work with the organizing team of the 3rd Workshop on Obfuscation (Jara Rocha, Seda Gürses, Ero Balsa) to conceptualize, design and develop a digital platform that takes an important part in facilitating an online workshop. The challenge was to develop this digital object while the conference was also still in the process of development. Principles that were important to address from the beginning of the process were:

Line 42:		Line 42:
	digital discomfort.		digital discomfort.

	~~===~~Map / ~~Navigation===~~		'''Map / Navigatio'''

	The ''platframe'' was not designed to mimic a physical conference but aimed at facilitating the temporalities and collectivities of an online workshop. We worked with the concept of a large canvas, which extends in all directions and can be navigated similarly to how a map is navigated. It contains regions, such as the reception, study room and exhibition space, each with their own respective content. Different regions became more and less relevant in different lifecycles.		The ''platframe'' was not designed to mimic a physical conference but aimed at facilitating the temporalities and collectivities of an online workshop. We worked with the concept of a large canvas, which extends in all directions and can be navigated similarly to how a map is navigated. It contains regions, such as the reception, study room and exhibition space, each with their own respective content. Different regions became more and less relevant in different lifecycles.

	~~===~~Chat~~===~~		'''Chat'''

	One of the most distinctive functions of this website is the ‘spatially’ distributed chat. Participants could leave messages anywhere on the canvas and navigate either through the map or the list. As a result, the ''platframe'' is a ‘living’ space: all participants emit their presence through the visibility of their cursors and messages.		One of the most distinctive functions of this website is the ‘spatially’ distributed chat. Participants could leave messages anywhere on the canvas and navigate either through the map or the list. As a result, the ''platframe'' is a ‘living’ space: all participants emit their presence through the visibility of their cursors and messages.
	The discussion around obfuscation demanded a close inspection and consideration of networked privacy practices. Messages dropped on the ''platframe'' are assigned a lifetime by their authors, an enumeration of seconds they are allowed to exist before self-destructing. As they near their expiration dates, visibility decreases until they are deleted.		The discussion around obfuscation demanded a close inspection and consideration of networked privacy practices. Messages dropped on the ''platframe'' are assigned a lifetime by their authors, an enumeration of seconds they are allowed to exist before self-destructing. As they near their expiration dates, visibility decreases until they are deleted.
	An important feature of the chat was the moderator’s role. To create an environment that is safe and free of hostility we created a moderators’ login which would allow a selected group of trusted participants to erase or censor messages, or block access to the ''platframe'' if needed.		An important feature of the chat was the moderator’s role. To create an environment that is safe and free of hostility we created a moderators’ login which would allow a selected group of trusted participants to erase or censor messages, or block access to the ''platframe'' if needed.

	~~===~~Cookies~~===~~		'''Cookies'''

	Technically the platframe did not use cookies. However, data submitted by participants, such as their display name, position, cursor’s color and messages were sent to our Hackers & Designers server and to the other participants.		Technically the platframe did not use cookies. However, data submitted by participants, such as their display name, position, cursor’s color and messages were sent to our Hackers & Designers server and to the other participants.
	To remember participants, the server assigns a unique identifier (UID) to their browsers and stores it in the browser’s localStorage, that looks like this: “uid”:		To remember participants, the server assigns a unique identifier (UID) to their browsers and stores it in the browser’s localStorage, that looks like this: “uid”:
Line 57:		Line 60:
	There is always the option for a given participant to delete their user from our server.		There is always the option for a given participant to delete their user from our server.

	~~===~~Front and back: VueJS and Strapi~~===~~		'''Front and back: VueJS and Strapi'''

	This ''platframe'' was built with two open source web development frameworks:		This ''platframe'' was built with two open source web development frameworks:
	Strapi for the “backend” and VueJS for the “frontend”.		Strapi for the “backend” and VueJS for the “frontend”.
Line 84:		Line 88:
	https://3rd.obfuscationworkshop.org/readme/tour		https://3rd.obfuscationworkshop.org/readme/tour

	~~===~~Tools for collective organization: Ethercalc, Etherpad, Jitsi, Freenode.~~===~~		'''Tools for collective organization: Ethercalc, Etherpad, Jitsi, Freenode.'''

	Much of the preparatory and organizational work for the 3rd Workshop on Obfuscation took place online, but was not convened solely by the platframe. Some other tools that were used for internal communication, budgeting, and responsibility management are worthy mentions. For instance, Jitsi calls were our main sites to regularly meet, discuss, and keep tabs on the different processes. Etherpad instances hosted on the Hackers & Designers and Constant servers, were used for taking notes and drafting documents, while spreadsheets created in Ethercalc were used to mediate task division schedules for moderators as well as convene a bug reporting workflow for the platframe itself. Finally,		Much of the preparatory and organizational work for the 3rd Workshop on Obfuscation took place online, but was not convened solely by the platframe. Some other tools that were used for internal communication, budgeting, and responsibility management are worthy mentions. For instance, Jitsi calls were our main sites to regularly meet, discuss, and keep tabs on the different processes. Etherpad instances hosted on the Hackers & Designers and Constant servers, were used for taking notes and drafting documents, while spreadsheets created in Ethercalc were used to mediate task division schedules for moderators as well as convene a bug reporting workflow for the platframe itself. Finally,
	Freenode (IRC) was used as a temporary communication back-channel for the conference days.		Freenode (IRC) was used as a temporary communication back-channel for the conference days.
Line 95:		Line 100:
	The choice of including introductory videos and explanatory posters by workshop contributors allowed participants to decide when to familiarize themselves with the conference materials. The materials didn’t have to be a viewed simultaneously, but could accommodate the different time zones and availabilities of the participants. The main incentives for this decision were to reduce time spent in video calls and to protect both the participants and servers from		The choice of including introductory videos and explanatory posters by workshop contributors allowed participants to decide when to familiarize themselves with the conference materials. The materials didn’t have to be a viewed simultaneously, but could accommodate the different time zones and availabilities of the participants. The main incentives for this decision were to reduce time spent in video calls and to protect both the participants and servers from
	‘liveness fatigue’.		‘liveness fatigue’.

	Additionally, the entire ''platframe'', including tools such as Etherpad and Ethercalc, and excluding BBB, were hosted on a VPS in Amsterdam that is provided by Greenhost, running on wind-power. Other measures taken to reduce the ecological footprint of the platframe are the shrinking of media such as videos, pdfs, and images into smaller, web-compatible files, as well as the implementation of load-balancing strategies on the server and in the browser to intentionally slow down live-communication processes, and even go offline, when traffic increases. Nonetheless, the ''platframe'' is quite CPU-intensive and was not as accessible in lower bandwidth devices such as mobile phones.		Additionally, the entire ''platframe'', including tools such as Etherpad and Ethercalc, and excluding BBB, were hosted on a VPS in Amsterdam that is provided by Greenhost, running on wind-power. Other measures taken to reduce the ecological footprint of the platframe are the shrinking of media such as videos, pdfs, and images into smaller, web-compatible files, as well as the implementation of load-balancing strategies on the server and in the browser to intentionally slow down live-communication processes, and even go offline, when traffic increases. Nonetheless, the ''platframe'' is quite CPU-intensive and was not as accessible in lower bandwidth devices such as mobile phones.
	The vernissage was also a moment when the ''platframe’s'' capacity to sustain a large number of participants simultaneously, was put into question. With some days remaining until the workshop day, we proceeded to develop testBot, a script intended to choreograph a varying number of visitors arriving to the ''platframe'', interacting with it and then leaving.		The vernissage was also a moment when the ''platframe’s'' capacity to sustain a large number of participants simultaneously, was put into question. With some days remaining until the workshop day, we proceeded to develop testBot, a script intended to choreograph a varying number of visitors arriving to the ''platframe'', interacting with it and then leaving.

Hd-onions at 15:34, 23 February 2022

2022-02-23T15:34:22Z

← Older revision		Revision as of 17:34, 23 February 2022
Line 2:		Line 2:
	\|MainNavigation=No		\|MainNavigation=No
	}}		}}
	==''Platframe'' reflections==		=''Platframe'' reflections=

	by Anja Groten and Karl Moubarak		by Anja Groten and Karl Moubarak
Line 9:		Line 9:
	[[File:platframe01.png]]		[[File:platframe01.png]]

	===Introduction===		==Introduction==
	The ''platframe'' is a website that converges and frames pre-existing tools, to facilitate online encounters, exchanges and forms of content production. It is a		The ''platframe'' is a website that converges and frames pre-existing tools, to facilitate online encounters, exchanges and forms of content production. It is a
	''frame'' rather than a ''form'' – as it attempts to sustain a certain legibility of the		''frame'' rather than a ''form'' – as it attempts to sustain a certain legibility of the
Line 16:		Line 16:
	We have expanded this readme from the conventional format of a step by step installation manual towards a reflective document that considers the process of the website coming into being, its different ‘lifecycles’, the expectations it created and the conversations it facilitated.		We have expanded this readme from the conventional format of a step by step installation manual towards a reflective document that considers the process of the website coming into being, its different ‘lifecycles’, the expectations it created and the conversations it facilitated.

	===How to preserve a ''platframe''?===		==How to preserve a ''platframe''?==
	While the ''platframe'' is a continuation of pre-existing tools, placing them in a different setting, creating new relations and dependencies, it never solidified nor		While the ''platframe'' is a continuation of pre-existing tools, placing them in a different setting, creating new relations and dependencies, it never solidified nor
	reached one final state or destiny. The ''platframe'' grew, matured, broke, and continued to evolve. Documenting such a living creature, is in and of itself a challenging project. From what perspective, or at what moment to make the cut?		reached one final state or destiny. The ''platframe'' grew, matured, broke, and continued to evolve. Documenting such a living creature, is in and of itself a challenging project. From what perspective, or at what moment to make the cut?
Line 22:		Line 22:
	encountering it. The most intensive moment of this was the workshop day on May 7, 2021, with around two hundred participants interacting on the ''platframe''.		encountering it. The most intensive moment of this was the workshop day on May 7, 2021, with around two hundred participants interacting on the ''platframe''.

	===Lifecycles===		==Lifecycles==
	The ''platframe'' went through different stages and states (and continues to do so). It changed its configuration and appearance at different moments in time. We refer to the different states as ''lifecycles''. Each lifecycle facilitated different forms and intensities of interaction of participants with the website and with each other. We also referred to the process of designing the platform as a choreography, due to its spatial and dynamic characteristics, and its relation to temporality.		The ''platframe'' went through different stages and states (and continues to do so). It changed its configuration and appearance at different moments in time. We refer to the different states as ''lifecycles''. Each lifecycle facilitated different forms and intensities of interaction of participants with the website and with each other. We also referred to the process of designing the platform as a choreography, due to its spatial and dynamic characteristics, and its relation to temporality.

Line 31:		Line 31:
	</gallery>		</gallery>

			==Lifecycle 0: Development===
	===Lifecycle 0: Development===
	In December 2020, Hackers & Designers was invited to work with the organizing team of the 3rd Workshop on Obfuscation (Jara Rocha, Seda Gürses, Ero Balsa) to conceptualize, design and develop a digital platform that takes an important part in facilitating an online workshop. The challenge was to develop this digital object while the conference was also still in the process of development. Principles that were important to address from the beginning of the process were:		In December 2020, Hackers & Designers was invited to work with the organizing team of the 3rd Workshop on Obfuscation (Jara Rocha, Seda Gürses, Ero Balsa) to conceptualize, design and develop a digital platform that takes an important part in facilitating an online workshop. The challenge was to develop this digital object while the conference was also still in the process of development. Principles that were important to address from the beginning of the process were:

Hd-onions at 15:33, 23 February 2022

2022-02-23T15:33:02Z

Show changes

Hd-onions at 15:06, 23 February 2022

2022-02-23T15:06:15Z

← Older revision		Revision as of 17:06, 23 February 2022
Line 17:		Line 17:
	process of the website coming into being, its different ‘lifecycles’, the expecta‐		process of the website coming into being, its different ‘lifecycles’, the expecta‐
	tions it created and the conversations it facilitated.		tions it created and the conversations it facilitated.


	===How to preserve a platframe?===		===How to preserve a platframe?===
Line 36:		Line 35:
	encountering it. The most intensive moment of this was the workshop day on		encountering it. The most intensive moment of this was the workshop day on
	May 7, 2021, with around two hundred participants interacting on the ''platframe''.		May 7, 2021, with around two hundred participants interacting on the ''platframe''.


	===Lifecycles===		===Lifecycles===
Line 56:		Line 54:
	were:		were:

	~~F/OSS: The extensibility and adaptability of everything we were developing~~

	Privacy and data security: The need for care around privacy and security		* '''F/OSS:''' The extensibility and adaptability of everything we were developing
			* '''Privacy and data security:''' The need for care around privacy and security
	issues, which seemed to be even more amplified due to the global pandemic		issues, which seemed to be even more amplified due to the global pandemic
	and our increasing reliances on online meetings platforms		and our increasing reliances on online meetings platforms
			* '''Welcoming and safe online encounters:''' Writing a code of conduct and a
	Welcoming and safe online encounters: Writing a code of conduct and a
	careful and moderation of the chat in order to create and sustain a safe		careful and moderation of the chat in order to create and sustain a safe
	(online) environment that is welcoming to all participants		(online) environment that is welcoming to all participants
			* '''Collaboration across disciplines:''' The possibility to engage in a collaborative,
	Collaboration across disciplines: The possibility to engage in a collaborative,
	reflective making process that transgresses solutionist approaches to tech‐		reflective making process that transgresses solutionist approaches to tech‐
	nological development, disciplinary boundaries and different knowledge		nological development, disciplinary boundaries and different knowledge
	domains. The platframe thus, became a convergence of different tools as		domains. The platframe thus, became a convergence of different tools as
	well as a convergence of different practices.		well as a convergence of different practices.
			* '''Digital Discomfort:''' Embarking on this project as ‘nonexperts’ in platform
	Digital Discomfort: Embarking on this project as ‘nonexperts’ in platform
	development, we had to manage the expectations of everyone, including our‐		development, we had to manage the expectations of everyone, including our‐
	selves. This platform would probably challenge us more than the, by now		selves. This platform would probably challenge us more than the, by now
Line 82:		Line 77:
	digital discomfort.		digital discomfort.

			===Map / Navigation===

	~~===Map / Navigation===~~

	The platframe was not designed to mimic a physical conference but aimed at		The ''platframe'' was not designed to mimic a physical conference but aimed at
	facilitating the temporalities and collectivities of an online workshop. We worked		facilitating the temporalities and collectivities of an online workshop. We worked
	with the concept of a large canvas, which extends in all directions and can be		with the concept of a large canvas, which extends in all directions and can be
Line 91:		Line 86:
	reception, study room and exhibition space, each with their own respective		reception, study room and exhibition space, each with their own respective
	content. Different regions became more and less relevant in different lifecycles.		content. Different regions became more and less relevant in different lifecycles.


	===Chat===		===Chat===
Line 108:		Line 102:

	===Front and back: VueJS and Strapi===		===Front and back: VueJS and Strapi===
	This platframe was built with two ~~opensource~~ web development frameworks:		This ''platframe'' was built with two open source web development frameworks:
	Strapi for the “backend” and VueJS for the “frontend”.		Strapi for the “backend” and VueJS for the “frontend”.
	Strapi is a content management system that is installed and configured on our server to manage all static content on this platform. It produces a framework agnostic public API that enabled us to define the so-called regions, write texts using a draft/publish system, manage the schedule, receive glossary submissions and host the videos presented in the exhibition area.		Strapi is a content management system that is installed and configured on our server to manage all static content on this platform. It produces a framework agnostic public API that enabled us to define the so-called regions, write texts using a draft/publish system, manage the schedule, receive glossary submissions and host the videos presented in the exhibition area.
	Vue is a front-end Javascript framework with a templating oriented approach. It enabled us to design reusable (yet customizable) HTML templates to wrap the data that is produced in Strapi.		Vue is a front-end Javascript framework with a templating oriented approach. It enabled us to design reusable (yet customizable) HTML templates to wrap the data that is produced in Strapi.
	The API created by the backend in the server is ‘consumed’ by the webpages created by the frontend in the browser. To see the raw output of the API for the Schedule, for example, go to: [https://api.obfuscation.karls.computer/sessions]		The API created by the backend in the server is ‘consumed’ by the webpages created by the frontend in the browser. To see the raw output of the API for the Schedule, for example, go to: https://api.obfuscation.karls.computer/sessions
	And to see the template for the Schedule go to: [https://github.com/hackersanddesigners/obfuscation/blob/master/dev/front/src/components/Userland/Territory/Timetable/index.vue]		And to see the template for the Schedule go to: https://github.com/hackersanddesigners/obfuscation/blob/master/dev/front/src/components/Userland/Territory/Timetable/index.vue

Hd-onions at 15:04, 23 February 2022

2022-02-23T15:04:07Z

← Older revision	Revision as of 17:04, 23 February 2022
Line 19:	Line 19:


		===How to preserve a platframe?===
		While the ''platframe'' is a continuation of pre-existing tools, placing them in a dif‐
		ferent setting, creating new relations and dependencies, it never solidified nor
		reached one final state or destiny. The ''platframe'' grew, matured, broke, and con‐
		tinued to evolve. Documenting such a living creature, is in and of itself a chal‐
		lenging project. From what perspective, or at what moment to make the cut?
		When and how to create the necessary distance to draw together its many
		traces, and how to make them available for others in a meaningful way?
		This readme thus grapples with the issue that comes with documenting
		something that is constantly changing, emerging and evaporating. We took the
		approach of structuring the documentation of the ''platframe'' through its different
		lifecycles, which include the different tools that have been informing the process
		of making this digital object, whether or not they became explicitly visible. Some
		screenshots will help to give an indication of how the website was coming to
		life, how it accommodated different encounters and how it challenged those
		encountering it. The most intensive moment of this was the workshop day on
		May 7, 2021, with around two hundred participants interacting on the ''platframe''.


		===Lifecycles===
		The ''platframe'' went through different stages and states (and continues to do
		so). It changed its configuration and appearance at different moments in time.
		We refer to the different states as ''lifecycles''. Each lifecycle facilitated different
		forms and intensities of interaction of participants with the website and with
		each other. We also referred to the process of designing the platform as a
		choreography, due to its spatial and dynamic characteristics, and its relation to
		temporality.

		===Lifecycle 0: Development===
		In December 2020, Hackers & Designers was invited to work with the organizing
		team of the 3rd Workshop on Obfuscation (Jara Rocha, Seda Gürses, Ero Balsa)
		to conceptualize, design and develop a digital platform that takes an important
		part in facilitating an online workshop. The challenge was to develop this digital
		object while the conference was also still in the process of development.
		Principles that were important to address from the beginning of the process
		were:

		F/OSS: The extensibility and adaptability of everything we were developing

		Privacy and data security: The need for care around privacy and security
		issues, which seemed to be even more amplified due to the global pandemic
		and our increasing reliances on online meetings platforms

		Welcoming and safe online encounters: Writing a code of conduct and a
		careful and moderation of the chat in order to create and sustain a safe
		(online) environment that is welcoming to all participants

		Collaboration across disciplines: The possibility to engage in a collaborative,
		reflective making process that transgresses solutionist approaches to tech‐
		nological development, disciplinary boundaries and different knowledge
		domains. The platframe thus, became a convergence of different tools as
		well as a convergence of different practices.

		Digital Discomfort: Embarking on this project as ‘nonexperts’ in platform
		development, we had to manage the expectations of everyone, including our‐
		selves. This platform would probably challenge us more than the, by now
		habitual experience, of meeting on Zoom, Teams or Google Hangout. As the
		Workshop on Obfuscation raised questions about inner workings, ethics, and
		socio-technological entanglements, the platframe would therefore ask for
		more patience and endurance from participants than they were used to. In
		that context Jara Rocha curated an anti-solutionist collection of formats for
		digital discomfort.


		===Map / Navigation===

		The platframe was not designed to mimic a physical conference but aimed at
		facilitating the temporalities and collectivities of an online workshop. We worked
		with the concept of a large canvas, which extends in all directions and can be
		navigated similarly to how a map is navigated. It contains regions, such as the
		reception, study room and exhibition space, each with their own respective
		content. Different regions became more and less relevant in different lifecycles.


		===Chat===
		One of the most distinctive functions of this website is the ‘spatially’ distributed chat. Participants could leave messages anywhere on the canvas and navigate
		either through the map or the list. As a result, the platframe is a ‘living’ space: all
		participants emit their presence through the visibility of their cursors and messages.
		The discussion around obfuscation demanded a close inspection and consideration of networked privacy practices. Messages dropped on the platframe are assigned a lifetime by their authors, an enumeration of seconds they are allowed to exist before self-destructing. As they near their expiration dates, their visibility decreases until they are deleted.
		An important feature of the chat was the moderator’s role. To create an environment that is safe and free of hostility we created a moderators’ login which would allow a selected group of trusted participants to erase or censor messages, or block access to the platframe if needed.

		===Cookies===
		Technically the platframe did not use cookies. However, data submitted by participants, such as their display name, position, cursor’s color and messages were sent to our Hackers & Designers server and to the other participants.
		To remember participants, the server assigns a unique identifier (UID) to their browsers and stores it in the browser’s localStorage, that looks like this: “uid”:
		“266f429f2d4”. When a participant accesses the platframe, the server authenticates their UID against its store of users.
		On a technical level, this was not absolutely necessary and we did explore alternative methods that rely purely on peer-to-peer authentication with no servers involved (see CRDTs). Although this method was worth exploring, it could not ensure full certainty that participants blocked by moderators would not be able to access the website, so we resorted to the current method.
		There is always the option for a given participant to delete their user from our server.

		===Front and back: VueJS and Strapi===
		This platframe was built with two opensource web development frameworks:
		Strapi for the “backend” and VueJS for the “frontend”.
		Strapi is a content management system that is installed and configured on our server to manage all static content on this platform. It produces a framework agnostic public API that enabled us to define the so-called regions, write texts using a draft/publish system, manage the schedule, receive glossary submissions and host the videos presented in the exhibition area.
		Vue is a front-end Javascript framework with a templating oriented approach. It enabled us to design reusable (yet customizable) HTML templates to wrap the data that is produced in Strapi.
		The API created by the backend in the server is ‘consumed’ by the webpages created by the frontend in the browser. To see the raw output of the API for the Schedule, for example, go to: [https://api.obfuscation.karls.computer/sessions]
		And to see the template for the Schedule go to: [https://github.com/hackersanddesigners/obfuscation/blob/master/dev/front/src/components/Userland/Territory/Timetable/index.vue]