Giter VIP home page Giter VIP logo

hello's Introduction

Hello

Sample project with a simple implementation of the webxdc read and write APIs.

Demo (no server or installation required)

  1. Open index.html in your web browser
  2. Click 'Add Peer' to open as many peers as you like
  3. Type a message and press 'Send' to see the update in each peer. (For Safari you might need to check the setting under Develop > Disable Local File Restrictions.)

Developing webxdc apps

Simply copy webxdc.js from this repo beside your index.html and you are ready to go to develop and test your app in most browsers.

Bundle your app using ./create-xdc.sh your-app-name and send it to your friends ๐Ÿ™‚

Screenshot 2023-02-10 at 20 40 22

Further Hints and Troubleshooting

Limitations

Due to the nature of most browsers and how they scope localStorage, each emulated peer will get the same localStorage.

To really test the storage usage of your Webxdc, bundle the app and test it in Delta Chat directly where all peers get their own localStorage. Alternatively, use the more advanced webxdc-dev tool.

Type-checking and completion

If you are using VSCode you can have autocompletion and type-checking even without using TypeScript by adding these two lines to your JavaScript source files:

//@ts-check
/** @typedef {import('./webxdc').Webxdc} Webxdc */

Without VSCode you need to install TypeScript and then run the check manually.

npm -g typescript
tsc --noEmit --allowJs --lib es2016,dom webxdc.js # to check if types and simulator are in sync
tsc --noEmit --allowJs --lib es2016,dom your_js_file.js

Developing in Safari

To use the devtool in safari you need to disable the local file restrictions under Develop -> Disable Local File Restrictions.

After doing this you can use the dev tool simulator.

Make sure to reload (Cmd + R) all simulator tabs/windows to apply this setting. Without this option Add Peer seems to work (it opens a new instance), but the instances will not be able to communicate.

Developing on Android

  • install Termux
  • install Python and Git in Termux
  • git clone the devtool repo or your fork of it
  • use python -m http.server to serve it for development using nano/vim
  • when you are done, use ./create-xdc.sh for bundling
  • copy the created .xdc file to a location from where you can access and send it via Delta Chat
  • pro tip: you can create symbolic link to a folder in the external storage

hello's People

Contributors

adbenitez avatar davidsm100 avatar hpk42 avatar link2xt avatar r10s avatar rosano avatar septias avatar simon-laux avatar wofwca 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

Watchers

 avatar  avatar  avatar  avatar

hello's Issues

add LICENSE file

and also skip that from .xdc created by ./create-xdc.sh - otherwise that may sneak unwantedly to created xdc.

images directory gets included

Archive:  hello.xdc
  Length      Date    Time    Name
---------  ---------- -----   ----
    22699  11-08-2022 18:53   icon.png
        0  11-08-2022 18:43   images/
    34668  11-08-2022 18:43   images/dev_tool_settings_safari.png
      869  11-08-2022 18:53   index.html
       26  11-08-2022 18:51   manifest.toml
---------                     -------
    58262                     5 files

use a different icon that does not just repeat the name

while maybe stylish, set in context where the icon is usually used, this looks repetitive and a bit weird, esp. as the icon has also white background:

Screenshot 2023-01-19 at 13 59 20

if course, this is not "wrong" and other apps can pick up this style, but we should not use that as a pattern we provide.

as an alternative, i suggest to use a waving hand as the icon, with a non-white background. ๐Ÿ‘‹

once this is done here, we should also adapt corkboard and checklist that also repeat the name in the icons.

Is this a sample project or a dev tool?

The first couple of lines of README say

Sample project with a simple implementation of the webxdc read and write APIs.

  • the repo is marked as "template"

But for a sample project this looks a little too convoluted, e.g. the "Limitations" section in README looks unnecessary for a sample project, this sounds more like it applies to the webxdc.js stub dev tool. This makes it look like it's required reading to know how this sample project works, which it isn't.
I think sample project must be as short and easy to swallow as possible. We have this in https://docs.webxdc.org/get_started.html#a-simple-example, but I don't know, it looks like we're saying that this is the repo of that simple example.

If it's a dev tool, we shouldn't be regarding it as a sample project in https://docs.webxdc.org/.

I think we need to clearly separate the stub webxdc.js and the sample index.html into different projects (also see "Stop the copy-paste of create-xdc.sh, webxdc.js").

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.