Git Product home page Git Product logo

design's Introduction

Joystream

This is the main code repository for all Joystream software. In this mono-repo you will find all the software required to run a Joystream network: The Joystream full node, runtime and all reusable substrate runtime modules that make up the Joystream runtime. In addition to all front-end apps and infrastructure servers necessary for operating the network.

Overview

The Joystream network builds on the substrate blockchain framework, and adds additional functionality to support the various roles that can be entered into on the platform.

Development

For best results use GNU/Linux with minimum glibc version 2.28 for nodejs v18 to work. So Ubuntu 20.04 or newer.

You can check your version of glibc with ldd --version

The following tools are required for building, testing and contributing to this repo:

  • Rust toolchain - required
  • nodejs >= v14.18.x - required (However volta will try to use v18.6)
  • yarn classic package manager v1.22.x- required
  • docker and docker-compose v2.20.x or higher - required
  • ansible - optional

If you use VSCode as your code editor we recommend using the workspace settings for recommend eslint plugin to function properly.

After cloning the repo run the following to get started:

Install development tools

./setup.sh

If you prefer your own node version manager

Install development tools without Volta version manager.

./setup.sh --no-volta

For older operating systems which don't support node 18

Modify the root package.json and change volta section to use node version 16.20.1 instead of 18.6.0

"volta": {
    "node": "16.20.1",
    "yarn": "1.22.19"
}

Run local development network

# Build local npm packages
yarn build

# Build joystream/node docker testing image
RUNTIME_PROFILE=TESTING yarn build:node:docker

# Start a local development network
yarn start

Software

Substrate blockchain

Server Applications - infrastructure

Front-end Applications

  • Pioneer v2 - Main UI for accessing Joystream community and governance features
  • Atlas - Media Player

Tools and CLI

Testing infrastructure

Running a local full node

git checkout master
WASM_BUILD_TOOLCHAIN=nightly-2022-11-15 cargo build --release
./target/release/joystream-node -- --pruning archive --chain joy-mainnet.json

Learn more about joystream-node.

A step by step guide to setup a full node and validator on the Joystream main network, can be found here.

Pre-built joystream-node binaries

Look under the 'Assets' section:

Mainnet chainspec file

Integration tests

# Make sure yarn packages are built
yarn build

# Build the test joystream-node
RUNTIME_PROFILE=TESTING yarn build:node:docker

# Run tests
yarn test

Contributing

We have lots of good first issues open to help you get started on contributing code. If you are not a developer you can still make valuable contributions by testing our software and providing feedback and opening new issues.

A description of our branching model will help you to understand where work on different software components happens, and consequently where to direct your pull requests.

We rely on eslint for code quality of our JavaScript and TypeScript code and prettier for consistent formatting. For Rust we rely on rustfmt and clippy.

The husky npm package is used to manage the project git-hooks. This is automatically installed and setup when you run yarn install.

When you git commit and git push some scripts will run automatically to ensure committed code passes lint, tests, and code-style checks.

During a rebase/merge you may want to skip all hooks, you can use HUSKY_SKIP_HOOKS environment variable.

HUSKY_SKIP_HOOKS=1 git rebase ...

RLS Extension in VScode or Atom Editors

If you use RLS extension in your IDE, start your editor with the BUILD_DUMMY_WASM_BINARY=1 environment set to workaround a build issue that occurs in the IDE only.

BUILD_DUMMY_WASM_BINARY=1 code ./joystream

Authors

See the list of contributors who participated in this project.

License

All software under this project is licensed as GPLv3 unless otherwise indicated.

Acknowledgments

Thanks to the whole Parity Tech team for making substrate and helping in chat with tips, suggestions, tutorials and answering all our questions during development.

design's People

Contributors

bedeho avatar blrhc avatar bwhm avatar dzhidex avatar toiletgranny avatar tominadratowski avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

design's Issues

My Videos

Estimation: 0,5 Man Day

Video Statuses
Update Tile Design
More Menu
Pagination
All Tabs
Action Bar

Surfaces For New Brand Identity

There are a couple of places on GitHub where we've listed where elements of the old brand identity are shown, but I think a definitive list would be useful to aid the transition.

I'm not completely sure whether the Jsgenesis branding (as opposed to Joystream logos etc.) is included in the rebrand but have included those examples in this list just in case.

Logo Needs Updating

Ticks indicate new asset exists

Joystream Social Media

Jsgenesis Company Profiles

Main Websites

Miscellaneous

Design Elements (Excluding Logo) Need Updating

Cover/Background Images

Joystream Social Media

GitHub

Main Repository README Banners

Role Guide Banners (Helpdesk Repo)

Other Miscellaneous README Banners

Joystream Blog (blog.joystream.org)

Post Featured Images (or should be preserved?)

Post Content Images In Old Style (or should be preserved?)

REMOVED - likely to be out of scope for rebrand

Experimental Expantion of Tesnet Brand Identity

WIP

  • small res icon
  • color for covers on blog and twitter
  • standardised cover backgrounds and covers
    • positioning of motifs on covers, e.g. we have had issues with bad positioning on blog post covers.
    • container or structure around illustrations, they are often floating now.
  • standardised covers
    • role incentives: currently not very well presented - just visual objects hanging on white background, needs to give a proper layout which gives sussinct and compelling information about incentives without having to read all the text.

Using typeface in newsletter

For some reason, we have not been able to use our own proper typeface(s) in our newsletter, this has to be fixed. There may be both a technical and licensing issue preventing us from doing this right now.

Screenshot 2020-05-08 at 16 02 19

This is not a must for Constantinople, but it should be fixed.

Social Media Cards

We need working twitter (and facebook?) cards for:

1️⃣ joystream.org website
This could just be the simple "Joystream" logo, white on black. (.svg and .png in this repo). The code for this should already be there, but I think the image is gone!

2️⃣ blog
This could either be the same logo, with a smaller ".blog" below, or something like what you see on the blog header. (we have an .svg if you need)

3️⃣ pioneer app
Here, we can either use the same as for joystream.org, only with a subtitle like "Join the testnet", or the athens cover with the same subtitle. At some point, we should make a logo for the app, but not the top priority.

Add section on voice

The communication style needs to be constrained better, with guides on what language and image motifs can be used in communication, in particular, blogs.

Finalise Visual Brand Idenity

Notice: This is a very sloppy description of a problem and corresponding project, which may take some time to narrow down. Only take this as a starting point for an iterative process.

Problems

The Joystream visual brand identity is incomplete and undefined, leading to problems in the visual communication with our audience across all of our communication channels, products and messages.

Here is a list of some of our problems currently

Logomark

We literally are using two separate logo marks simultaneously, a "J" and an elephant. We no longer want to use the elephant, as it does not make sense with our current brand identity and vision, and we require a new set of logo marks that work with our existing wordmark.

Trying to avoid using the elephant logo mark has forced us to use the wordmark in places where it does not make sense, such as

Github organization

https://github.com/Joystream

Screenshot 2019-04-19 at 13 42 58

Twitter account logo

https://twitter.com/joystreamapp

Screenshot 2019-04-19 at 11 41 00

blog

https://blog.joystream.org/ Arguably this could have use the textmark, as the website itself does.

Screenshot 2019-04-19 at 14 18 43

Pioneer application

Screenshot 2019-05-10 at 10 55 42

Here are examples of the mixed usage of logomarks.

Polkadot Telemetry

https://telemetry.polkadot.io/#/Joystream%20Testnet%20v2

Screenshot 2019-05-10 at 10 57 00

Rocket.chat

Screenshot 2019-04-20 at 20 19 42

Browser tab

Screenshot 2019-04-19 at 11 42 42

Jsgenesis.com footer

Screenshot 2019-04-19 at 15 10 18

Email newsletter email capture screen

Screenshot 2019-04-19 at 21 10 46

Testnet Faucet

On https://testnet.joystream.org/faucet

Screenshot 2019-05-09 at 20 13 10

Missing social media covers

We are just using random things, such as

Twitter account

Screenshot 2019-04-19 at 11 41 06

Reddit

Screenshot 2019-04-19 at 11 42 19

Twitter post covers

Here there are many problems.

Inconsistency

There is no consistency in the

  • Background color:
    • The background colors are not part of the visual brand identity in any recognizable way
    • Background colors are chosen arbitrarily, without thought of how they work with the content or in the context of a twitter feed.
  • Typography:
    • The typeface is varied
    • Capitalization is arbitrary
    • Styling, such a bold+italix is arbitrary
    • Positioning and line breaks are arbitrary
  • Layout used:
    • Some have just an illustration, others have text+illustration, without any system as to why and when

twitter-coulmn

Low production quality

  • At times a cover has been constructed at one resolution, e.g. originally for the blog, and then been scaled down after being rasterized, leading to very unattractive results.

Screenshot 2019-04-19 at 11 41 41

  • High detail illustrations from one context are simply scaled down, leading to making it hard to understand

Screenshot 2019-05-10 at 09 32 49

Complex imagery

The imagery chosen is too complex, e.g. "From Sparta to Athens" or "The Sack of Sparta". It is not likely that many in the audience are able to decipher how it matches the message of the post. Instead proper usage of text would greatly aid the communication, and lowering requirements on imagery.

Screenshot 2019-05-09 at 20 14 47

Lack of explicit rules for images and photographies

These examples from the blog show that we have good rules on what imagery can be included, which leads to low quality and inconsistent communication.

Screenshot 2019-05-10 at 13 18 43

Screenshot 2019-05-10 at 13 19 22

Screenshot 2019-05-10 at 13 19 59

Blog covers

Blog covers again have complex imagery which does not communicate effectively, and reuses illustratations meant for other purposes. Simply assembling mulitple illustrations is not an effective way of conveying the prupose of a post.

Screenshot 2019-04-19 at 14 20 10

Screenshot 2019-04-19 at 14 21 01

Also, as for the twitter covers, the lack of any system in the background colors degrades clarity.

Screenshot 2019-04-19 at 14 19 02

Blog images

Blog imagery is abstract and unclear, and often just reuses existing assets without much care.

Screenshot 2019-05-10 at 13 23 21

Screenshot 2019-04-19 at 14 20 18

Brand

Please review the new brand profile description here.

Deliverables

Brand style guide

A new complete brand style guide document (in markdown) which covers

  • Logo usage guidelines: positioning, backgrounds, etc.
  • Key colors
  • Additional color palette options
  • Typefaces
  • Typographic treatments
  • Consistent photo style
  • Consistent illustration style
  • Consistent icon style
  • Written voice: We will write this
  • Animation guidelines

We have some old stuff on this on Figma, but its not in the form of a full document, and its also not all worth keeping, e.g. some of the color choices are no longer appropriate. Here are examples of brand style guides we think work well

New logoes

A new set of logoes which work with our word mark is required, along with a description for how placement and usage should be done. There should be multiple versions of the logo for multiple resolutions, perhaps with different levle of detail. Here are the contexts in which it may be used.

  • Website tab icon
  • Email newsletters
  • Slide presentations
  • Twitter icon
  • Twitter cover
  • Facebook icon
  • Rocketchat icon
  • Telegram icon
  • Desktop application icon: (tray, bar, dock)
  • Website
  • Email signature
  • Letterhead
  • Hoodies/tshirts

Again, its critical that there is an explicit usage policy for how they are to be used.

Icon set

We would like a light weight general purpose line icon set which covers lots of general purpose needs, including having icons associated with our roles, networks etc. Icons must be vector format, and must come in two versions

  • line version
  • negative lines on solid background circle

Communication templates

Our communication happens primarily over

  • Newsletter
  • Blog
  • Twitter

For each, we need a set of well defined templates for the following messages, which address all problems outlined above.

  • General message
  • Announcement of a testnet
  • Announcement of completed specification
  • Announcement of the incentives
  • Announcement of a testnet going live

One idea we would like to be explored is if all communication associated with a givne testnet can include some standard branding for that testnet, e.g. a tiled logomark for that testnet in background surfaces.

Newsletter

Here we need a full layout for each case, which is also responsive.

Blog

Here we need a cover photo (with the correct dimensions) which is compatible with Ghost blog frame, as well as standard ways of doing graphics and illustrations.

Twitter post covers

Must be the right dimensions, and have suitable . Here are some strong examples

Screenshot 2019-04-23 at 08 13 54

Screenshot 2019-04-22 at 06 47 56

Screenshot 2019-04-23 at 08 13 54

Twitter account cover

Here are some nice examples

Reddit branding

  • Color scheme
  • Top cover
  • Backgroudn image

Product subbranding system

We have multiple digital, and in the near future physical, products. We need a system of subbrands for each one, where makes them recognizable parts of the Joystream identity. For example, we currently have

  • Pioneer: This is a web based application for talking to our blockchain
  • Joyful: This is a native application which does the blockchain vlaidation
  • Colossus: This is a native application you run in order to provide storage services

Each one needs proper branding, such as a logo set, etc.

WIP: Asset Checking For New Brand Identity

Asset Checking

Please see latest comments for progress on this issue.

This issue has been created in order to track our final preparations before our new brand identity is launched. I have created some mockups below to test whether we have all of the necessary assets for all of the places we may need to put them.

One thing I noticed during my testing process is that we do not currently have an asset which contains just the name of the project in the new logo font. This might be useful in cases where we are constrained for space (e.g. on the top of the sidebar in Pioneer) and do not want to include the logo icon alongside the logo text.

In other words, I think we should have an asset that is the equivalent of this (a textmark) in the new design style:

Mockups

Favicon

favicon

Repo Cover (Example 1)

repocover

Repo Cover (Example 2)

repocover2

Twitter Logo (all variations)

Twitter Cover

twittercover

I think this is quite a weak asset, it would be much better to have this so that the text is more right-aligned. In the current proposed layout, the twitter profile photo is almost overlapping the cover design text.

Twitter Cover (Mobile)

twittermobile

I think this is quite a weak asset, it would be much better to have this so that the text is more right-aligned. In the current proposed layout, the twitter profile photo is almost overlapping the cover design text.

Reddit Cover

joystreamredditprv

GitHub Organization

githuborg

Telegram Group

joystreameg

Network Faucet

joystreamtestnetfaucet

Mailing List Signup

mailinglist

Joystream Network Portal

network portal

New Brand Identity Deployment TODO

WIP document for everything that must be done to deploy new brand identity.

Launch date

TBD

Surfaces

Identify full list of surfaces that must be updated, and for each, make sure that we have the right asset with suitable dimensions and resolution and have tested the asset live. For ac

  • Reddit cover
    • asset: link
    • tested
  • Github organization logo mark
    • asset: link
    • tested
  • Runtime repo banner
    • asset: link
    • tested
  • All old blog covers
    • asset: link
    • tested
      .... LOTS MORE ...

Design repository

Needs to be updated and reogranized, and the PDF versoin of the brand design guide must be there, very prominently.

What is involved here? add checklist items.

Website

  •  Fully tested responsive version of website ready to go live.
  • Fully tested responsive version of jsgenesis.com ready to go live.

Blog post

Need to make blog post draft: short and sweet: why we did it, origiganl github issues should be good inspiration, and then just link to new brand identity portal

link to PR

Twitter cover

Add rules for repo styling

First we actually need to settle on some rules, perhaps with the help of some assistance from Pawel/Tomasz.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.