Giter VIP home page Giter VIP logo

dots-website's Introduction

Decentral Patterns Website

This repository holds the sources for the decentpatterns.xyz website. It's built using the static site generator Eleventy, the tailwindcss framework and Javascript.

Installation and development

First, make sure that you have initialized and updated the dots-patterns submodule.

git submodule update --init

The site is developed for Node v12, you can use nvm use to load the specific version from .nvmrc or install it yourselves. Now you can pull the dependencies.

npm install

To start the development server, run the npm start command in terminal and open localhost:3000. The development server is configured to automatically reload when you make changes.

We use prettier and eslint to maintain a consistent and maintainable code style. Use the npm commands npm run lint to validate sources and npm run prettier to reformat sources on disk.

Folder Structure

Content

The site folder contains all the templates, partials and content - which Eleventy will parse into HTML for us. Within our site folder, lives a globals folder. Here you'll find a site.json file - for general config stuff e.g site name, author, email, social media links etc. You'll also find a navigation.json file, which we use to loop over in our nav partial to generate our navigation. It's possible to hide navigation entries from the production deployment by setting "draft": true on them. There's also a helpers.js file, which just contains a simple environment helper.

The repository dots-patterns contains markdown-formatted patterns that are included in the site. The repository contents are symlinked into the folders site/library and site/topics.

Assets

Some of the assets are bundled using Webpack. This includes client-side Javascript, which you can find in the scripts folder and SCSS stylesheets, which are in the styles folder.

Other assets are copied as-is for deployment. This includes fonts in styles/fonts, images in images and downloadable files in the public folder.

Tooling

The repository root contains configuration files for the various tools we use. In addition, you will find the more elaborate config for 11ty in the 11ty folder.

Ready to deploy?

Type the npm run build command to minify scripts, styles and run Purgecss.

Purge will cross reference your templates/HTML with all those Tailwind classes and will remove any classes you haven't used - pretty cool huh?

dots-website's People

Contributors

cafca avatar bumbleblue avatar okdistribute avatar dependabot[bot] avatar dependabot-preview[bot] avatar shibacomputer avatar mrchrisadams avatar

Stargazers

Henry Wilkinson avatar Gianni Hong avatar Nikita avatar 6un9-h0_D@n avatar  avatar Marty McGuire avatar jon ⚝ avatar link2xt avatar Tasmo avatar Mitar avatar  avatar Matthew Linares avatar DAR avatar  avatar adz avatar  avatar

Watchers

 avatar  avatar  avatar James Cloos avatar georgia bullen avatar  avatar

dots-website's Issues

Add pattern library index page

  • add front matter
  • source patterns
  • grid component for individual patterns
  • filter bar
    • key word search
    • alphabetical sort
    • recency sort

Our networks proposal

Towards A Common Glossary for Decentralized Technologies

https://github.com/ournetworks/2020-submissions/issues/new

Description

Type: virtual workshop
Length: 2 hours
Date: between August 7-9
Duration: once
Language: English

Objectives

  • Learn about the 7 key challenges that hinder the adoption of decentralized applications
  • Deep-dive into design and developer onboarding & naming. How do we name things across the ecosystem? Where does terminology help or hinder understanding across different protocols and applications? What are appropriate metaphors and descriptions for different user groups?
  • Where can we converge on particular names for key concepts? How would we go about creating a common glossary?
  • This work is part of DOTS: Decentralization, off the shelf. [launching early June]

Material and Technical Requirements

Platform: video conferencing
Technical considerations: We want to hear questions and comments from audience throughout the workshop; we will need a remote facilitation / canvas tool (e.g. Miro, Pushpin).
Additional considerations: Max number of participants: 20 (speaking), 50 (live chat)

Presenters

Name: Eileen Wagner, Program Manager at Simply Secure
Email: [email protected]
Url(s): decentpatterns.xyz
Twitter: @bumblblu
GitHub: @bumbleblue

Eileen advises teams and organizations on UX design and research at Simply Secure. Her focus is on information architecture, content strategy, and interaction design--or anything that helps people make sense of complex technologies. She works with numerous projects in decentralization and security, and enjoys facilitating relationships between the builders and users of technology. Her background is in analytic philosophy and mathematical logic, and she won’t stop talking about demoing barbershop music.

Name: Karissa McKelvey, Technology & Partnerships at Digital Democracy and Research Fellow at Simply Secure
Twitter: @okdistribute
GitHub: @okdistribute

Karissa researches technical architecture design and its impact on usability, safety, and resilience. Her contributions to decentralized applications are depended upon by at-risk users including human rights defenders, journalists, and civil society activists living within repressive environments. Previously, she led user and developer experience for dat and hypercore, a decentralized data sharing tool and peer-to-peer hypermedia protocol. Her background is in political sociology and data science, and she loves making weird musical art that touches your funny bone.

Bump font size across the site

The 15px base font size from the original site layout turned out to be too small for reading long-form content. The page's base font size should be bumped to 18px with everything else updated accordingly.

Website copy updates

Pattern Library page description

Every piece of software needs some amount of interface, content, and service design. This is no different in decentralization. What is different, however, is that decentralization introduces concepts and scenarios that are diverging from today’s dominant, centralized paradigms. These design patterns are generalizable to protocols, applications, and the user interfaces of decentralized applications.

See something missing? Please propose a new pattern.

Pattern Index page description

(same as above!)

Glossary description

Decentralization introduces a wealth of new concepts, many of which are named and described in different ways across many projects. This causes confusion among early adopters as well as barriers in onboarding new users. We've attempted to capture many of decentralization concepts in this glossary. If you see a term missing or incorrect, please propose a change.

About DOTS

DOTS, short for Decentralization Off The Shelf, is a design project supporting practitioners in decentralization with interface, content, and service design. Our main resource is a library of tried-and-tested design patterns, along with a glossary of terms and a research report detailing the needs and gaps we see in this space.

DOTS is hosted by Simply Secure, a US-based nonprofit supporting the usability of safety and privacy tools. It aligns with Simply Secure's overall mission of creating open design resources for the community. We are actively seeking funding for the development of further resources. You can support us by backing DOTS.

Vision & Mission

Decentralized technologies enable alternative applications that challenge the traditional models: where government and corporate control are causing harm, decentralized technologies have the potential to bring about autonomy, resilience, and equity.

However, there is a significant gap between the protocols that define the decentralization space and the applications that users want to adopt. One of the missing aspects is UX design and testing that could bring decentralized protocols and applications to the next level of adoption.

Our mission is to develop UX components and tools that developers and designers can use to build better user-facing applications backed by decentralized architectures. We do this by producing a library of resources, assets, and design patterns with the help and input of the larger community.

Why Design?

Designers aren't people with special powers to intuit what users want and need. If anything, designers know that they don't know what users want and need, and will go out to investigate. This is how we approach design in decentralization: through a series of hands-on research and testing, we have compiled ideas and best practices for decentralization design.

Add category page

  • add front matter
  • add filter bar
  • source all patterns from a category
  • add grid view of patterns

Update pattern page

  • add main image
  • add side bar
  • add tags to side bar
    - [ ] add glossary links

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.