Coder Social home page Coder Social logo

exercism / website Goto Github PK

View Code? Open in Web Editor NEW
402.0 15.0 116.0 35.99 MB

The codebase for Exercism's website.

Home Page: https://exercism.org

License: GNU Affero General Public License v3.0

Ruby 55.59% JavaScript 1.79% CSS 9.40% HTML 3.71% Shell 0.71% Dockerfile 0.04% Haml 7.94% TypeScript 20.61% Vim Script 0.04% Perl 0.17%
community-contributions-paused

website's Introduction

Please note: This repo is an internal repo. That means the source code is public, but we do not accept Pull Requests, we do not support the app being run locally, and we do not encourage people to fork or reuse this repository.


Exercism

Tests Maintainability View performance data on Skylight

This is the website component of Exercism. It is Ruby on Rails app, backed by various other services.

Setup

These are instructions to get things working locally. While you are welcome to try and follow these instructions and set up this repo on your local machine, we provide no guarantee of things working on your specific local setup.

Prerequistes

You need the following installed:

  • Ruby 3.3.0 (For other Ruby versions, change the version in the Gemfile and the .ruby-version files)
  • MySQL
  • MongoDB
  • Redis
  • AnyCable-Go
  • Docker

Mac-specific

The main dependencies can be installed via homebrew

  • brew install libgit2 cmake pkg-config anycable-go hivemind node yarn

Unix-specific

What dependencies you need to install depends on your Unix distribution.

For example, for Ubuntu you'll need to install:

sudo apt-get install software-properties-common libmariadb-dev cmake ruby-dev ruby-bundler ruby-railties

You'll also need to install nodejs and yarn.

Windows-specific

As we recommend using WSL, see the Unix-specific instructions listed above.

For information on setting up WSL, check the installation instructions.

Configure the database

Running these commands inside a mysql console will get a working database setup:

CREATE USER 'exercism'@'localhost' IDENTIFIED BY 'exercism';
CREATE DATABASE exercism_development;
ALTER DATABASE exercism_development CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
GRANT ALL PRIVILEGES ON exercism_development.* TO 'exercism'@'localhost';

CREATE DATABASE `exercism_test`;
ALTER DATABASE `exercism_test` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
GRANT ALL PRIVILEGES ON `exercism_test`.* TO 'exercism'@'localhost';

Running local AWS

To run the app you must have a local version of AWS running. We use localstack and opensearch, and run them via Docker. Double check versions in .dockerimages.json.

docker run -dp 3042:8080 -p 3040:4566 -p 3041:4566 localstack/localstack:2.3.2
docker run -dp 9200:9200 -e "discovery.type=single-node" opensearchproject/opensearch:2.11.0

Run the setup script

The following scripts configure exercism to work with your setup.

bundle install
EXERCISM_ENV=development bundle exec setup_exercism_config
EXERCISM_ENV=development bundle exec setup_exercism_local_aws

Note: you will need to do this every time you reset dynamodb, which happens when Docker is restarted.

Running the local servers

We have a Procfile which executes the various commands need to run Exercism locally.

Mac-specific

On MacOSX we recommend using hivemind to manage this, which can be installed via brew install hivemind.

To get everything started you can then run:

hivemind -p 3020 Procfile.dev

Unix-specific

On Unix systems we recommend using overmind to manage this, which can be installed using these instructions.

To get everything started you can then run:

overmind start --port 3020 --procfile Procfile.dev

Windows-specific

As we recommend using WSL, see the Unix-specific instructions listed above.

For information on setting up WSL, check the installation instructions.

Rails Console

The Rails 7 console has autocomplete that can be very frustrating. To disable it, do the following:

echo 'IRB.conf[:USE_AUTOCOMPLETE] = false' >> ~/.irbrc

Code Standards

Rubocop is enforced on Pull Requests. To run it locally:

bundle exec rubocop --except Metrics

To autoupdate based on it's suggestions, add the -a flag:

bundle exec rubocop --except Metrics -a

To check the complexity of your code and ensure you're not adding things that are more complex to the codebase, run without the --except flag:

bundle exec rubocop -a

Testing

The tests can be run using:

bundle exec rails test

Running Jest tests

Run tests:
yarn test [path/to/file]

Omit path to run all tests

Update snapshots:
yarn test [path/to/file] -- -u

Omit path to update all snapshots

Git Repos

If you need to create a new Git repo for use in the tests, use the following:

mkdir /Users/iHiD/Code/exercism/website/test/repos/new-repo
cd /Users/iHiD/Code/exercism/website/test/repos/new-repo
git init --bare

cd ~
git clone file:///Users/iHiD/Code/exercism/website/test/repos/new-repo exercism-new-git-repo
cd exercism-new-git-repo
echo "{}" > config.json
git add config.json
git commit -m "First commit"
git push origin head

Solargraph

Solargraph allows for code suggestions to appear in your editor.

If you'd like to use solargraph, the gem is in the file. You need to run and set solargraph.useBundler to true in your config. I have this working well with coc-solargraph. This article was helpful for setting it up.

  • bundle exec yard gems
  • solargraph bundle

website's People

Contributors

alexandre-eliot avatar alexmitchelldev avatar andrewda avatar angelikatyborska avatar aretoo avatar bnandras avatar clechasseur avatar dcr8898 avatar dem4ron avatar dependabot[bot] avatar ee7 avatar erikschierboom avatar exercism-bot avatar fernandogmo avatar glennj avatar highb avatar homersimpsons avatar ihid avatar isaacg avatar kntsoriano avatar kotp avatar kytrinyx avatar luilver avatar neenjaw avatar saschamann avatar sevenseacat avatar thelostlambda avatar toy avatar vaeng avatar zacnomore avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

website's Issues

Noisy yarn output

I get this when running yarn test. Things still pass.

  โ— Console

    console.error
      Warning: Each child in a list should have a unique "key" prop.
      
      Check the render method of `List`. See https://fb.me/react-warning-keys for more information.
          in Track (at List.jsx:12)
          in List (at TracksList.jsx:58)
          in section (at TracksList.jsx:49)
          in div (at TracksList.jsx:42)
          in TracksList (at TracksList.test.js:45)

       8 | 
       9 |   return (
    > 10 |     <div className="tracks">
         |     ^
      11 |       {data.tracks.map((track) => {
      12 |         return <Track key={track.id} track={track} />
      13 |       })}

      at printWarning (node_modules/react/cjs/react.development.js:315:30)
      at error (node_modules/react/cjs/react.development.js:287:5)
      at validateExplicitKey (node_modules/react/cjs/react.development.js:1630:5)
      at validateChildKeys (node_modules/react/cjs/react.development.js:1656:9)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:1806:7)
      at List (app/javascript/components/student/tracks-list/List.jsx:10:5)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14803:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17482:13)

 PASS  test/javascript/components/mentoring/Inbox.test.js```

Set up CI and Code Climate

@kntsoriano Could you set this up for me please?

I'm happy to use either GHA or Circle for CI. I believe GHA will be faster but you might want to just go with Circle for now as we have existing config. Your choice :)

This is the Code Climate ID: 7646f68efcfb351226b48cf3e8af112e2c46463de13c80ce513d71cd890f5df6


  • Set up CI
  • Set up Code Climate
  • Get me a CI badge for the README :)

Descope student/TracksList/List/Track.jsx

We currently have app/javascript/components/student/TracksList/List/Track.jsx
I think it could be descoped a level to app/javascript/components/student/TracksList/Track.jsx

student/trackslist/list/track is a loooot of nesting :)

Add notifications React component

  • Add a component which will be the notification icon in the website header. It has two states (representing whether you have new notifications or not, and a number of notifications).
  • Trigger it at the end of the Notification::Create method.

Which font-smoothing to use?

In chrome/firefox, you can set font-smoothing to antialiasing or subpixel antialiasing. Subpixel is more modern and the default. "Standard" antialiasing is the older way, but is often used to make fonts look more like in designs.

There is much debate about this online (e.g. apple.com "downgrades" to standard as do Google Fonts website, whereas many hate it.)


Here's a specific example to discuss:

This is the Figma design. Figma has it as 700 weight:

Screenshot 2020-09-29 at 22 23 27

This is 700 weight with (default) subpixel antialiasing:
Screenshot 2020-09-29 at 22 17 02

This is the weight reduced down to 600, still with with subpixel antialiasing:
Screenshot 2020-09-29 at 22 17 20

This is 700 weight with the change to "standard" antialiasing:
Screenshot 2020-09-29 at 22 17 50

The last looks closet to the design. 600 looks closer if we're using subpixel.

I am generally strong against reducing the font-weight down to look more like figma, as for linux/windows it gets really thin fast. So I'm pro using old-school antialiasing. And the fact that apple.com does it makes me ok with it.

One other option is to use antialiasing for headings and subpixel antialiasing for blocks of texts.

But I also welcome other opinions if anyone has any ๐Ÿ™‚


If you read this and have no opinion (or none you care to share), please give this a ๐Ÿš€ emoji, and I shall take it as a "do whatever you like" prompts ๐Ÿ˜‰

DB not seeding on start

When starting the system via ./bin/start --pull it seems the DB is not seeding properly, so I get an initial error:

Screenshot from 2020-10-08 16-27-30

When I exec into the website container and run:

bundle exec rake db:reset db:migrate db:seed

It goes through the motions, dropping, creating, seeding and then I am able to see the website:

Screenshot from 2020-10-08 16-29-27

(@iHiD can attest to this, he has waited for me several times while I have had to do this)

Is this seeding command being missed in the setup somewhere?

Reimplement cancel functionality

We can consolodate the cancel functionality of tooling jobs into

  • Remove Iteration::Representation::Cancel and Iteration::Analysis::Cancel
  • Remove skipped tests
  • Add a ToolingJob::Cancel command that updates the job_status to cancelled
  • Update the relevant iteration's relevant status (representation_status or analysis_status)
    • (Maybe a cancelled state to the enum and try analysis_cancelled!)
    • (Check out the ToolingJob::Process command for inspiration)
  • Add test coverage (obviously ๐Ÿ˜‰)

Add docker-script for db/seeds

We currently don't have a script for running bundle exec rails db:seed which we should probably have. I think there should be a script in docker/dev which follows the same pattern as the others in there to do this.

(cc @joshgoebel @ErikSchierboom )

Implement Representer commenting flow.

Authoring comments

  • We need a UI where mentors can write comments on exercise-representations.
  • They comment should be on a student's solution

Persisting comments

  • The comments should be persisted with two forms:
    • The actual thing the mentor wrote
    • A parsed version with the placeholders applied to anything written in codeblocks (`)

Rendering comments

  • When a comment is rendered it should have the placeholders applied back onto it.

Content jumping around while loading tracks

When searching/filtering etc, there's a lot of flashing happening caused by page elements jumping around:

https://www.loom.com/share/026b7c0909c84fd7a62e9fbf22547138

It feels like the whole page is being rerendered each time, causing everything to jump around, rather than just the parts that actually need to be re-rendered.

If only the relevant bits of content were changing the the page wouldn't be jumping and we wouldn't get this flashing effect.

We should fix this before doing more component stuff.

(cc @SleeplessByte for advice ๐Ÿ™‚)

Discuss: Using Highlight.js for code highlighting on v3

Jeremy asked me about this and I just wanted to brain dump and have some room for discussion or answer questions. I'm the current maintainer of Highlight.js of course. Exercism v2 uses Prism of course. This is a definitely more of a brain dump than a concise argument for or against.

So first a very, very high-level comparison and some quick thoughts off the top of my head of HLJS vs Prism:

  • Prisms tries to be smaller (smaller runtime, smaller grammars), less complex, less context aware. Your download size using HLJS would likely be larger - or you could serve individual files per grammar. (since it's easy to know which pages will contain which languages)
  • Highlight.js tries to be higher fidelity, more complex (but not too complex), and slightly more aware of context.
  • Prism currently highlights some things we don't (punctuation, operators), but I'm more than open to changing that for languages where it's possible to do so easily/correctly. (in the past we've avoided this type of higher fidelity highlighting of punctuation)
  • Prism is open to new grammar contributions (I assume) where-as Highlight.js is closed (not enough core team to maintain them) - though it'd very easy to build and use 3rd party grammars with HLJS - and there is quite a list (in our SUPPORTED_LANGUAGES.md file).
  • Highlight.js does not support IE11 or legacy browsers, I think Prism may still.
  • Prism sometimes adds pure "style" conventions (such as BLAH [uppercase] being a constant) to grammars, where-as this isn't something HLJS encourages (though it hasn't been given much thought). It's very helpful for a site like Exercism though. Of course it wouldn't be super hard to add back manually, but now you're possibly maintaining your own fork of certain grammars or patches that would need to be maintained over time - which is annoying.
  • I'd be open to a discussion about this but off the top of my head it seems an over-reach (I just told someone this regarding this question as it relates to Java and StackOverflow)... something we'd probably encourage by solving with a plug-in or patching the grammars (perhaps there is a way to make such patching less fragile though).

Jeremy also mentioned using a much newer editor and the desire for the editor to match the "viewer"... in which case I suggested it might just be better to figure out how to use the editors syntax highlighting EVERYWHERE. Then you would have 100% consistency. With either Prism or HLJS you're going to be fighting with differences between the grammars, themes, highlighting philosophy (do we consider this a keyword or a built-in, etc). Some of those philosophical differences may possibly not be things we'd desire to "fix" (we might think they aren't broken).

I'd say overall HLJS might be a bit more "fiddly" than Prism. Sometimes our desire to more nicely highlight things can get us into trouble such as trying to highlight functions in C++:

CUrlQuery q(request.GetQuery() ? request.GetQuery() : "");

We think that's a function definition and highlight q as the name of a function (GitHub seems to also)... although it's actually a variable declaration. This is because we're just a fancy pattern matcher, not a full parser. So sometimes things like this just get tagged #cantfix because we'd still rather than the functions highlighted (so nice) even if every once in a while that means a mistake in highlighting a variable definition. Sometimes Prism avoids this by just choosing not to highlight things. For example for some languages Prism won't even try to highlight a regular expressions because it's hard to avoid things like math expressions with division incorrectly flagging as regex. We try our best to get this right (and highlight the regex).

So often our "best effort" grammars get us really close (covering say 99% of common code) but then when someone finds an edge case it can be very apparent (broken highlighting, highlighting just stops half-way thru)... where-as Prism brushes such things off easier by simply doing less. If you don't try to highlight it, you can't get it wrong.


Overall choosing Highlight.js is probably "more effort" than just sticking with Prism. I have a feeling (at least initially) it'd result in more "bugs" with highlighting and programming effort than you would have with Prism - particular since you know Prism works very well from v2, and existing users are accustomed to it's behaviors/quirks.

Honestly finding some way to use the your fancy editors highlighting could be your best best - assuming it works well, is fast enough, has good syntax coverage, etc. And doubly so if "themes editing/viewing must match precisely". That said every large site with discerning users that adopts HLJS typically results in big improvements for HLJS, finding bugs, improving auto-detect, etc... so if Exercism.io choses HLJS it'd probably be of some benefit to us... StackExchange definitely has resulted in all sorts of recent activity (rebooting of a few poor grammars, etc), many bug fixes, etc... :-)

More than happy to answer any questions anyone has about what is or isn't possible and what can or can't be done with HLJS.

How should we structure system tests?

With reference to this discussion: #53 (comment)_

I think we want two different things here. And I think probably we want a test for each.

  • I want something that uses the app as a user does but where we verify that the correct things are happening under the hood. Without this test, there's nothing in our test-suite that actually checks that things work as expected. These are effectively integration tests, but I want them to use the Chrome for the testing, not me manually specifying the routes to traverse (which I find prone to bugs).
  • You want something that tests the flow of the app specifically from how a user is perceiving it. That's really valuable too.

My issue is when we combine the two, making view-level changes, break the "functional" test that I want, which I find really frustrating. And that's even more acute at this early stage, as the actual views are effectively nonsense, but I still want to have proper functional tests that don't then break when we implement the views.


So maybe the key here is to have the tests in two different subdirectories where it's clear what the purpose of each is?

Add a test that compiles the assets

#212 highlighted that sometimes the build can pass, but that the deploy fails, due to application.tsx compile errors.

We should add a test to check this before a PR goes green.

Choose name for the things that are sort of serializers but sort of aren't.

@kntsoriano @ErikSchierboom @SleeplessByte You all raised concerns(?) about my use of the word serializers, and also the way they're structured.

I think I'm ok with having these objects as commands for now, as they're very easy to change from commands to something else later if needed, and as they have only one public interface method I think they make sense. I agree with @kntsoriano's feeling that an object with a to_hash method also makes sense, but as I've done the work to make them commands, let's stick with that for now.

But I would like to feel like we're getting the naming right.

To clarify, the purpose here is to create some sort of arrangement of data that is appropriate to power the React Components and/or respond to CLI requests.

As examples, we currently have two:

  1. In production for the CLI, which returns the info needed for the CLI to utilise a solution
  2. In v3 for the React component to list the correct tracks, with their data and user-specific data.

The first is serializing/formating/representing a solution into some custom JSON object. The second is doing the same with an array of tracks.

What are these doing? Are they serialzing to a custom object? (which was my initial feeling). Are they formatting the object/data? Are they representations of some data?

If we can establish that first, then naming them might become easier ๐Ÿ™‚

Testing CSS

It would be nice to test our CSS configuration to make sure things like auto-prefixes don't silently break in the future.

For example, currently if we write:

::placeholder {
  color:green;
}

we get things like:

::ms-placeholder {
  ... 
}

added for us.

But we could break this and not notice (as we're probably all using something not relying on prefixes).

How could we test this? Grep the generated CSS for something? @neenjaw made a suggestion here

This is meant as an example of a wider question on how we test this sort of potential CSS regression in general - not this specific case.

Fix eslint issues

In #174 support for ESLint was added. That PR doesn't check/update the existing code, which is something that we should be doing.

Add Fast Refresh

Follow these instructions.

Allows for refreshing the react component without having the page to reload. Might not work with our bootloader, but then we can figure that out.

Add another mentoring table

Description

As discussed in our previous meeting, we also want to implement this other mentoring table. We're sticking to the table for now, not including the tabs on the top and the filters on the right side.

Preview

image

Questions

  1. What do we call this component? Is <MentorSolutionsList /> okay?
  2. What are the "badge-like" things on the third column? cc @taiyab

Add mentoring table

Screenshot

Screenshot 2020-09-04 at 13 54 43

Features

  1. User sees all solutions that can be mentored. This should be paginated.
  2. Allow user to filter solutions by student or exercise name.
  3. Allow user to sort solutions, categories to be decided.
  4. Allow user to filter by language. I'm assuming this is the button on the upper left corner.

Questions

  1. What do we call this component?
  2. Near the mentee's name, what does the star and blue dot mean?
  3. What do we call the field that contains "new iteration". Is that a status?

System tests struggle to follow React URLs

An interesting one that I don't have a neat fix for.

This test fails when the React component is used (it passes on master because we're rendering in Rails).

The reason it fails is:

  • The react component is setting the href of the a to be web_url (serialized here.
  • That web_url uses the host of the test environment, which is https://test.exercism.io. So when capybara clicks the link, it redirects to that non-existant URL and breaks.

There are two simple changes that would fix this:

  1. Use a path, not a URL
  2. Change the host to be localhost (or whatever capybara can follow).

I don't want to do (2) because I like that it's a specific test host. I feel it's important that test and development have different hosts, else we could easily hard-code localhost into the code base and see it work in dev, and tests passing, but it fail in production. By having tests.exercism.io as our host, we have an extra line of defense for this.

So then we could do (1). In the serializer, we could use _path in test env, and _url in dev/production. Again, I'm not a massive fan as it means that we are not testing the production code in tests, which could mean we leaked _path into the codebase and wouldn't know until production broke.

Another option would be to have the React component stripe the host in test mode, but this comes with similar issues to above.

Yet another option would be to have web_path and web_url. The React components could use web_path and consumers could use web_url. This might be the most straight-forward option.

Does anyone have any better ideas or any here that they like?

Implement state change in ToolingJob::Process

@ErikSchierboom: Something to get you into the Dynamodb codebase.

Once the processing is done in ToolingJob::Process, we want to update the status of the item to be processed.

This code from tooling invoker will probably be useful to you.

      client.update_item(
        table_name: table_name,
        key: { id: job_id },
        expression_attribute_names: {
          "#JS": "job_status",
          "#LU": "locked_until"
        },
        expression_attribute_values: {
          ":js": "locked",
          ":lu": Time.now.to_i + 15
        },
        update_expression: "SET #JS = :js, #LU = :lu",
        return_values: "ALL_NEW"
      )

Add MathJax / LaTeX support for READMEs

Some of the READMEs, like rational-numbers and complex-numbers, would really benefit from equations that render properly, rather than the ASCII conversion of them. It would be great to have support for LaTeX syntax, e.g. using MathJax.

(cc @miguelraz)

Adding the concepts graph

The "Concepts" tab on an internal track page is going to be made up of a search/filtering bar and then a graph/dependency view of the Concepts, with different states. Along the lines of this:

Screenshot 2020-09-24 at 21 45 55

  • The graph will be rendered once on page load - then static (although it probably needs lines redrawing on window resize etc)
  • The filters will change opacity of the boxes.
  • Hovering on boxes will open a Popper modal, and change the opacity of connecting lines.

There are fundamentally four parts to this:

  1. Implementing searching/filtering (probably best server side but changing the state of elements within the page, rather than replacing the elements)
  2. Generating the graph layout
  3. Drawing the graph and lines
  4. Styling.
  • @neenjaw has done most of the work for (2) already. @ErikSchierboom, @kntsoriano Could you liase with him to work out how best to PR that into the website - and whether it needs converting to JS (it's currently TS).
  • @neenjaw: If you want to do any of the work on doing (3) properly, then I'm sure Erik and Karlo would be happy for the support. You may want to put up an early (saner) POC using React as a basis for discussion. If you don't want to take this on then Erik/Karlo can do it and get you to review it in reverse. Let us know ๐Ÿ™‚
  • @kntsoriano, @ErikSchierboom I think (1) is a relatively straight-forward server integration based on the work so far. Tell me the ideal JSON structure and I'll work exactly what data is going in. Just work on the basis of Concept Name for now.

Also note the awful POC I did for it ๐Ÿ™‚

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.