update avatar links on playproject

`@todo`

ninabreznik ???
rangermauve ???
fionataeyang ???
serapath http://2.gravatar.com/avatar/f69609584169c54475af0b69e2b36b21
joshua https://s.gravatar.com/avatar/320c50f69cfe9569efd6690794502c8f

add custom domain

`@todo`

link on playproject.io for editor takes you to ethereum-play.github.io/editor-solidity
play.ethereum.org/editor-solidity, workshop-solidity etc. are not working
Website play.ethereum.org => playproject.io
make http and https work

package manager input field & related

`@todo`

specifytechnical infrastructure for settings/import/export mechanisms
describe usage scenarios in OS for package manager input field
make abstract UI/UX concept for how to show those in the app
- derive/decide for all features
- how to export/import/backup/add one or multiple links?
- what about the supply tree of package manager regarding uninstallable packages?
  - should e.g. codingame or packman be listed?
  - is package manager the only software/package with that kind of extra dependencies?
  - if a user install 1000 packages, will the list of extra dependencies be 1000?
  - if a user installs an image gallery? and downloads 1000 pictures - will they show up like that?

about
import/export/copy/paste package manager addresses + settings

technical infrastructure

...

usage scenarios

...

UI/UX concept

...

add social media preview (twitter, facebook, ...)

`@todo`

when somebody pastes a link to our page on twitter or facebook or somewhere, we need to show a preview
check:
- https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fsmartcontract.codes
- https://stackoverflow.com/a/26537086
use maybe:
- http://www.page2images.com/
- to get something like: http://api.page2images.com/ccimages/b6/f8/n6ckdxRiD0E7rQOP.png
research twitter card options
research facebook card options
research others (e.g. instagram, tiktok?, snapchat?, ...)
make concept for preview card for different play apps
implement facebook card
implement twitter card

reading materials:

clickjacking protection misconfiguration

Just got this email

Hi team,

While performing security testing of your website i have found the vulnerability called Clickjacking.
Many URLS are in scope and vulnerable to Clickjacking.

What is Clickjacking ?
Clickjacking (User Interface redress attack, UI redress attack, UI redressing) is a malicious technique of tricking a Web user into clicking on something different from what the user perceives they are clicking on, thus potentially revealing confidential information or taking control of their computer while clicking on seemingly innocuous web pages.
The server didn't return an X-Frame-Options header which means that this website could be at risk of a clickjacking attack. The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a or <iframe>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.
This vulnerability affects Web Server.

Steps to Reproduce / POC

Vulnerable Urls:https://playproject.io/
Put every above url one by one in the code of iframe, which is given below

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://playproject.io/">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

By hasan khan
hasankhan222424@gmail. Com

Notice that site is visible in the Iframe

POC is in the attachments. Thanks, waiting for your response.

Impact

Using a similar technique, keystrokes can also be hijacked. With a carefully crafted combination of stylesheets, iframes, and text boxes, a user can be led to believe they are typing in the password to their email or bank account, but are instead typing into an invisible frame controlled by the attacker

website improvements

`@todo`

fix open pull request to resolve rebase merge conflict #10

`@later`

maybe make menu bar item texts a bit more visible?
- also: add contact item to scroll to the bottom of the page
make project description texts a bit bigger/bolder and maybe color white
add social media icons to profiles and read links from profile json files
- what about just contact: '...' or website: '...' instead of contact: { website, github, twitter}

roadmapping

`@todo`

implement modules necessary to put together the page concept as a landingpage
- playproject-io/brand#2
figure out logo and use it in the landingpage
- playproject-io/brand#3
change requests
- change "our team" to contributors
playproject-io.github.io#13 clickjacking protection misconfiguration
playproject.github.io#15 update avatar links on playproject
a mechanism to quickly go back up or to have the menu bar move along, so that i don't have to scroll up to get to a different area
move the links github/twitter/gitter/etc... icons into the menu bar. They seem a bit hidden at the bottom or allow a menu bar link to jump down to them
add language selector to menubar or social media

`@later`

playproject-io.github.io#9 website improvements
playproject-io.github.io#4 add social media preview (twitter, facebook, ...)
playproject-io.github.io#6 Translation issue
playproject-io.github.io#7 Browser support list
datdot-ify landing page so org-page can take over from github slowly
playproject-io.github.io#1 org-page concept & updates
playproject-io.github.io#2 Play brand book / design guide
playproject-io.github.io#3 add custom domain

org-page concept & updates

`@todo`

link play.ethereum.org (update DNS) to github "playproject.io" static website
concept (wireframes?, style?, content?, sections?)
roadmap section
team section
about section
portfolio section
brainstorm about other sections
org-page#4: add social media preview (twitter, facebook, ...)
- use it for all relevant link shareable pages in the playproject portfolio

Link http://play.ethereum.org/ to https://playproject-io.github.io/
see: https://github.com/ethereum/devops/issues/111

more resources

Adapt text for smaller screens

My resolution is: 1920 x 1080, Screen 14 inch

Create - theme_widget

Todo

Create - theme_widget
- Implemented communication
- Implemented theme widget
- @output 📦 theme_widget_v0.0.1 from comment

Update - theme_widget_v0.0.1
- @output 📦 theme_widget_v0.0.1 from comment
- index.js cleanup
- Load operation
- Add operation
- Save operation
- Debugging
- @output 📦 theme_widget_v0.0.2 from comment

Update - theme_widget_v0.0.2
- @input 📦 theme_widget_v0.0.2 from comment
- Enabled IDs for components
- Converted theme_widget list into tree
- Enabled jumping to a section
- Style adjustments
- @output 📦 theme_widget_v0.0.3 from comment

Update - theme_widget_v0.0.3
- @input 📦 theme_widget_v0.0.3 from comment
- Enabled autosave
- Added theme control for all components
- Debugging
- @output 📦 theme_widget_v0.0.4 from comment

Refactor - playproject

Todo

Refactor - playproject
- @input 📦 playproject_old
- Inspected whole project
- Research about modules
- @output 📦 playproject_v0.0.1 from comment

Update - playproject_v0.0.1
- @input 📦 playproject_v0.0.1 from comment
- Identifying and removing useless hard code in our_contributors.js
- Research and find how to repeat the patterns
- Change footer's year to dynamic current year
- Add the new code and test
- @output 📦 playproject_v0.0.2 from comment

Update - playproject_v0.0.2
- @input 📦 playproject_v0.0.2 from comment
- Identifying and removing useless hard code in supporters.js
- Finding the patterns
- Add new dynamic code
- Styling and debugging
- @output 📦 playproject_v0.0.3 from comment

Update - playproject_v0.0.3
- @input 📦 playproject_v0.0.3 from comment
- Mobile version for supporters and contributors section
- Making sub-components' CSS independent of their supers
- Shadow encapsulation of the components
- Handling the logic change
- Debugging
- @output 📦 playproject_v0.0.4 from comment

improve logo

`TODO`

input: https://github.com/playproject-io/playproject-io.github.io/blob/main/src/node_modules/assets/svg/logo.svg
improve logo
output 🏭 logo in color and b&w, just squirrel and one version with playproject name

Play brand book / design guide

`@todo`

collaborators photos

`TODO`

@ input:
- new contributors (photos that need to be adjusted): https://wormhole.app/rjZdJ#RarmgKdl67xWCAj-CNQ7uw
- reference photo (avatar-fiona): https://wormhole.app/Nz7J4#YqVc70ZtbwTXeFonECOOQA
- this is the webpage where photos will be used (bottom): https://playproject.io
make hexagone photos (made by Kayla)
see avatar-fiona for the reference and adjust other photos to be the same size and shape
adjust avatar-santies to show the face only, not the full body
- make avatar-santis close up of his face, not the full body
@output 🏭 hexagon shaped photos of the new contributors in the right size and format

Update - Playproject Improvements

`@todo`

Update - Playproject Improvements
- @input 📦
  - Playproject.io
  - Improvements for Playproject from comment

Design - big project island for a project called "Wizard Amigos"
@input 📦
Rough Sketch of Island
Outline the sketch on Illustrator
Adding details on the island
refining and finalizing the island
output: 📦 wizard-amigos Island v2 from comment

Design - big project island for a project called "data shell"
@input 📦 playproject.io

Design - a project island for the "task messenger app"
@input 📦 playproject.io

Design - a night theme for playproject
@input 📦 playproject.io
a background with different night gradient
stars in the sky
even planets
@output 📦 playproject-night theme v1 from comment

Design - a variety for team islands
@input 📦 playproject.io
sponsor islands are already different in style same thing for team island
@ouput 📦 team islands from comment

Update - add more animation effect for top main island
@input 📦 playproject.io
rotating windmills
animals moving around
a waterfall that animated where some drops drop from the island above onto the next.
if islands in general very subtly float and move up and down by themselves... like a boat on a sea with some calm waves

Design - logo for Data Shell
@input 📦 data-shell server
Designed two version of logo for data shell
@output 📦 data-shell v1 from comment
@output 📦 data-shell v2 from comment

Design - logo for Task management app

Browser support list

`@todo`

support no browser with less than 2% usage unless a user opens an issue
- https://caniuse.com/usage-table
additionally support dat friendly browsers
decide for a method and use it to check it all works
update brand repository with official statement about
- general browser support expectations for all our projects

Translation issue

`@todo`

Need to make a calculate function to fit the contents when loading the texts on the landing page
- The different language is appearing different length with the characters.
- Thus, every translation needs to calculate by individually.
add language parameter to the URL

e.g. https://playproject-io.github.io/?lang=<value> where <value> can be en or de or zh or zh-tw? ...etc...

const params = new URL(location.href).searchParams
const lang = params.get('lang')
console.log(lang) // e.g. => "en"

;(async filepath => {
  const json = await fetch(filepath).then(response => response.text())
  console.log(json)
})(new URL(`data.${lang}.json`, location.href).href)

// make english default
// => remove param if it's english

const params = new URL(location.href).searchParams
if (params.get('lang') === 'en') {
  params.delete('lang')
  location.search = params
}

playproject-io / playproject-io.github.io Goto Github PK

playproject-io.github.io's Introduction

playproject-io.github.io

playproject-io.github.io's People

Contributors

Stargazers

Watchers

Forkers

playproject-io.github.io's Issues

@todo

@todo

@todo

technical infrastructure

usage scenarios

UI/UX concept

@todo

@todo

@later

@todo

@later

@todo

Todo

Todo

TODO

@todo

TODO

@todo

@todo

@todo

Recommend Projects

Recommend Topics

Recommend Org

`@todo`

`@todo`

`@todo`

`@todo`

`@todo`

`@later`

`@todo`

`@later`

`@todo`

`TODO`

`@todo`

`TODO`

`@todo`

`@todo`

`@todo`