Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Darek Kay
    @darekkay
    :D
    Darek Kay
    @darekkay
    @faboo03 Could you please double check those translations as well?
    "github-stats": {
      "name": "GitHub Stats",
      "headline": "{{name}}",
      "stars": "stars",
      "subscribers": "subscribers",
      "followers": "followers",
      "forks": "forks",
      "openIssues": "open issues",
      "configuration": {
        "query": "GitHub username or repository"
      },
      "error": {
        "404": "Unknown username or repository"
      }
    
    "github-stats": {
      "name": "GitHub Stats",
      "headline": "{{name}}",
      "stars": "stars",
      "subscribers": "subscribers",
      "followers": "followers",
      "forks": "forks",
      "openIssues": "problèmes ouverts",
      "configuration": {
        "query": "GitHub nom d’utilisateur ou référentiel"
      },
      "error": {
        "404": "Nom d’utilisateur ou référentiel inconnu"
      }
    github-stats.png
    I'm not sure if it makes sense to translate some rather technical labels like "forks".
    Fabien Rondeau
    @faboo03
    i agree, don’t need to translate
    "github-stats": {
      "name": "GitHub Stats",
      "headline": "{{name}}",
      "stars": "Etoiles",
      "subscribers":  "Abonnés",
      "followers": "Follower",
      "forks": "forks",
      "openIssues": "Tickets ouverts",
      "configuration": {
        "query": "Pseudo ou repos Github"
      },
      "error": {
        "404": "Pseudo ou repos Github inconnu"
      }
    Darek Kay
    @darekkay
    Thanks a lot! I know how bad translations by non-natives (like me for French) sometimes sound :sweat_smile:
    Darek Kay
    @darekkay
    I've pushed some changes to production today 🎉
    https://dashboard.darekkay.com/docs/blog/2020-04-22.html
    Fabien Rondeau
    @faboo03
    Good :)
    Fabien Rondeau
    @faboo03
    Hello I started to make the todoist component .. I am not very familiar with React Tests, i guess i am going to need a bit of help …
    About the Connexion, we should talk about it to, I am not sure we need to go througt the node serve as long as todoist is handling the CORS well
    Darek Kay
    @darekkay
    As commented, you can ignore the tests for now. I've created a separate task: darekkay/dashboard#9
    CORS might not be an issue here, but the other two points are (caching + developer key leakage). I don't even think OAuth2 is possible (or practical) without a redirect server:
    Ole S.
    @syentix
    I just tried creating a new Widget without your generate command and it ended with my laptop exploding. I should read the docs before doing something
    Ole S.
    @syentix
    How can I use an API_KEY for unsplash in an .env in this project, I don't see dotenv in here? I wanted to use it in an .env.local file
    Darek Kay
    @darekkay
    Yeah, I've tried to simplify as much boilerplate as possible. Dotenv is being used under the hood (via create react app for frontend and directly for backend). A local env file should work just fine (just notice the required CRA prefix, otherwise it won't work)
    Also keep in mind to route it via the server module to not leak the API key in FE
    See the weather module for example
    Ole S.
    @syentix
    Ok I'll check that out :) Thanks for the quick answer!
    Darek Kay
    @darekkay

    Now that I'm back home, here's some more information. So far, all 3rd party calls are going through the server module. There are several reasons for that:

    • Some 3rd party services cannot be called directly from the frontend because of CORS.
    • When using services that require API keys, the API key will be leaked when it's part of the frontend module.
    • Routing the request through the server module enables caching, so the 3rd party service doesn't get as many duplicate requests.

    So it's a good idea to add a new server route /image/random or /unsplash/random or similar for requesting random images. You can check the Twitter route as an example. Unfortunately, there's no "route" file generator, yet. I hope this helps you to start out - I'll try to include all this information in the docs soon :)

    Ole S.
    @syentix
    One question, how do I make a widget updateable?
    Darek Kay
    @darekkay
    Are you working on the standalone random image widget now? Or is it the addition to the existing Image widget?
    Ole S.
    @syentix
    Standalone
    I regenerated it and connecting everything and tried to connect the dots through the other widgets. But it always logs "Widget random-image-xx does not support updates."
    Darek Kay
    @darekkay

    I'm in the middle of the documentation update, but this is the relevant part:

    Auto-updating data

    Many widgets depend on external data. To keep this data up-to-date, each widget defines an update cycle in its properties.ts file:

    export const initialMeta = {
      updateCycle: { hours: 24 },
      updateStatus: "idle",
    };

    When creating a new widget (using yarn generate), make sure to choose the option to "use sagas". This will set up much of the necessary boilerplate. The core update logic is implemented in useTriggerUpdate. An update will be automatically triggered:

    • After each update cycle (per widget type)
    • Whenever a dependent prop changes (e.g. when adjusting the settings)
    • On page reload
    TL;DR: You'll need to define the updateCycle and updateStatus as above (I think 24 hours for a daily random image should be fine). After this, please re-run yarn scan-widgets.
    Ole S.
    @syentix
    weirdly enough I did all that and I still get the same output in the console after scaning the widgets again and again
    Darek Kay
    @darekkay
    It's hard to debug remotely. Did you remove the widget and replace in on the board? The changes will only apply to new widget instances. If nothing helps, clearing the localstorage might. Otherwise, you can push your WIP state to your fork repository and I can have a look
    Ole S.
    @syentix
    I tried all that :/ I pushed my WIP state to my fork here
    Darek Kay
    @darekkay
    You've got a typo there :see_no_evil:
    It's updateCycle instead of updateCyle - after changing this, it works :)
    I might add some automatic safeguard here, e.g. validate the properties file, to catch such issues.
    Darek Kay
    @darekkay

    Now that this endpoint is only used for the standalone widget, we might want to update the server TTL (time to live):

    This will make sure that an image is being cached for the amount of the widget's updateCycle on the server side

    For #10 , we might instead use a fixed list of random images.

    Ole S.
    @syentix
    Well it could be a daily new random image, it would be a call a day for one user. I‘ll change those properties though and push it
    Ole S.
    @syentix
    I'm trying to find out where to put the reference to the the Unsplash Image :D If i just put above the picture the widget looks akward, I am really not good with all this styling stuff
    Ole S.
    @syentix
    Is there a way to add a headline to widgets?
    Darek Kay
    @darekkay

    Well it could be a daily new random image, it would be a call a day for one user. I‘ll change those properties though and push it

    That's a fair point. On the other hand, people might not want an image to change after reloading the page. I'd say let's stick to the daily change for now and maybe improve it later to include a "reload" button or something.

    I'm trying to find out where to put the reference to the the Unsplash Image :D If i just put above the picture the widget looks akward, I am really not good with all this styling stuff

    Maybe a really small (.text-1) footer below the image (or "above" it)? To make it look good, we might try using some overlay just for the footer, similar to the hover effect in the Medium example. I can have a look at this if you want :)

    Is there a way to add a headline to widgets?

    Yes, look into app/src/common/translations/en.json and edit the widget.random-image.headline value.
    The question is, whether a headline is really required for an image widget. I've tried not to use any unnecessary headlines so far. For this, you could leave the mentioned label empty ("").

    Ole S.
    @syentix
    I‘ll set up a pull request to dev branch? Because I tried putting captions on it when it hovers over, but they all reference the full picture and not the little cut out for the widget
    Putting it above or under the picture won‘t show up in the widget
    Darek Kay
    @darekkay
    Sure, I've created a develop branch which you can open the PR for
    Darek Kay
    @darekkay
    widget.jpg
    @syentix I've done the attribution part for the random image and force-pushed the changes to develop (see link above)
    Darek Kay
    @darekkay
    BTW - let me know if you're planning to contribute more than just for hacktoberfest, so I could give you rights to push branches in the main repository - then we wouldn't really need the develop branch anymore.
    Ole S.
    @syentix
    I would definitely be interested. It's been fun so far and I think I'm almost getting the hang of it.
    Darek Kay
    @darekkay
    Invitation sent :) After accepting, you can create and push branches directly to the repository
    Darek Kay
    @darekkay

    I'd like to debug your ESLint issues, so you and other contributors can check the issues locally without Travis CI. I am wondering why ESLint only checks internals/**/*.tsx, as the pattern is defined differently in package.json.

    Can you please run yarn lint:fix --version and yarn lint:fix --no-error-on-unmatched-pattern and paste the input? (yarn can be replaced with npm run if you're not using yarn)

    Lawrence Lagerlof
    @llagerlof
    Hi Darek. I saw your project and I think it's very nice. Can I contribute translating it to pt-br ?
    Darek Kay
    @darekkay

    Hey @llagerlof , sure! Here's the documentation: https://dashboard.darekkay.com/docs/development/#internationalization
    And here's the past PR for the French translation as reference: https://github.com/darekkay/dashboard/commit/a6193c798d0f704be58b58570b10e023f2718236#diff-7f51d9b6af750cac2b3a1f2621f2feb95666759c7f44987e57b95f9d6713a816

    (you can ignore the icon part from the PR, as I have removed language icons completely later on)

    Ole S.
    @syentix
    Hey @darekkay, sorry for the really late response
    image.png
    -> yarn lint:fix --no-error-on-unmatched-pattern
    yarn run v1.22.10
    $ eslint --fix {internals,src}/**/*.{ts,tsx,js} --no-error-on-unmatched-pattern
    ✨  Done in 10.74s.
    Works, I guess ;D