nik-graf

2 lata temudiscuss

Last week I published Automerge Jumpstart https://www.automerge-jumpstart.com/

A boilerplate including user authentication & authorization

Tech: Automerge, tRPC, Prisma and deployment on fly.io and vercel.com Bonus: includes explanation videos on the website

nik-graf

9 lat temudiscuss

Thanks for the hint. We forgot about it and I just added it.

nik-graf

10 lat temudiscuss

I believe so too. From my experience it's hard to make money on a meetup. Still there are people who actually make a living out of it :)

nik-graf

10 lat temudiscuss

I have met skidding last February when this was project was in its early stages. We walked through Cosmos and it definitely was an inspiration to Carte blanche. Skidding even helped us to design the initial props form: https://github.com/carteb/carte-blanche/issues/47

Cosmos in my opinion is a fantastic tool and covers even some areas we haven't touch yet, but planning to do soon like injecting/manipulating the internal state of a component.

While there a many more differences these are probably the most interesting ones:

- The core of Carte blanche is a Webpack plugin. By hooking into the main compilation of Webpack Carte blanche can identify your components and list them in an application living within your running server on different URL path. The coolest part from my perspective is that we inherit all your webpack settings by default. No need to configure your loaders. Cosmos in comparison is a separate app.

- In Cosmos your need to write your examples by hand. Carte blanche reads out your propTypes/Flow types and allows us to generate a form input for each of your properties including nested structures like a person object containing an avatarUrl, firstName & lastName. This approach allowed us to create some kind of UI fuzz-testing feature in the interface. While I believe that it's important to focus your efforts designing/developing for the most likely cases it's also relevant to cover edge-cases. Fuzz-testing is a great way to discover them.

I hope this help. Let me know if you any other questions :)

nik-graf

11 lat temudiscuss

Why would you want to delete your tweets? :)

nik-graf

11 lat temudiscuss

Does it also work with immutable data-structures?

nik-graf

11 lat temudiscuss

Thank you very much. Glad you like it :)

nik-graf

11 lat temudiscuss

Thanks for your feedback technic. All of them are definitely on our list of components we want to do :)

Have you ever checked out: https://github.com/rackt/react-modal

Seems to be pretty solid implementation.

nik-graf

11 lat temudiscuss

Thanks Sebastian :)

nik-graf

11 lat temudiscuss

Hey Iwein, there are couple fundamental issue with the way we style HTML elements today. CSS is exposing every declaration into a global namespace. This makes it to eliminate dead code as it is hard to figure out where it is used. Many techniques like BEM were invented and declared as "the right way" to do styling.

I don't know if inline-styles defined in JS are the end-game, but working with it in combination with building components turned out to be working way better for us than using CSS.

If you want to know more about it I highly recommend this slidedeck: https://speakerdeck.com/vjeux/react-css-in-js

nik-graf

11 lat temudiscuss

Hey, I'm one of the creators of Belle. Feel free to reach out in this thread in case you have any questions :)

nik-graf

12 lat temudiscuss

Good Job Ryan :)

nik-graf

13 lat temudiscuss

Sorry for the late reply.

Right now there is a lot of stuff happening to simulate Web Components. Going forward they will become a W3C Standard and we can reduce the complexity. You might want to look at the current Draft https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/...

What’s happening at the moment is that the output for <x-loading></x-loading> is:

    <span is="x-loading">
      <style>
        @-webkit-keyframes x-loading-dot {
          0% {
          opacity: 1;
          }
          50% {
          opacity: 0;
          }
          100% {
          opacity: 1;
          }
        }
        .x-loading-one {
          opacity: 1;
          -webkit-animation: x-loading-dot 1.3s infinite;
          -webkit-animation-delay: 0.0s;
        }
        .x-loading-two {
          opacity: 1;
          -webkit-animation: x-loading-dot 1.3s infinite;
          -webkit-animation-delay: 0.2s;
        }
        .x-loading-three {
          opacity: 1;
          -webkit-animation: x-loading-dot 1.3s infinite;
          -webkit-animation-delay: 0.3s;
        }
      </style>
      <span class="q-x-loading" style="color: rgb(80, 80, 80);">
        <span class="x-loading-one">.</span><span class="x-loading-two">.</span><span class="x-loading-three">.</span>
      </span>
    </span>

If a component like the overlay also contains logic the code will be added to your compiled and minified JavaScript output.

For blossom.io/bee you can find the compiled output here https://www.blossom.io/bee_documentation.html_bootstrap.dart...

nik-graf

13 lat temudiscuss

Great stuff

nik-graf

13 lat temudiscuss

Here you can find the open sourced JavaScript lib https://github.com/getsentry/raven-js

nik-graf

13 lat temudiscuss

Yes it does as far as I know. Really an awesome lib.

nik-graf

14 lat temudiscuss

Thanks for sharing your experiences and insights!

Universities do a great job teaching abstract concepts and doing research. Web became a great and wide spread platform. Sadly they often dictate students not to work with web-technologies. It's possible to teach the concepts and at the same time use state of the art technologies.

I believe there is plenty of room for improvments in universities. I would love to see distributed revision control systems as a standard for student projects.

It's great to see people like you challanging the status quo and try improve the environment.

Submissions

Show HN: End-to-end encrypted notes app

Show HN: GraphiQL Spark – allowing you to demo a schema without an endpoint

Leverage New Features of React 16 – free 17min Egghead video course

Show HN: Star Wars opening craw built with React VR

Serverless private npm registry using AWS Lambda and S3

A collection of ReactVR experiments

How to run a Meetup – Lessons learned running React Vienna for a year

You Can’t Make a Billion Dollars with Your Startup (Kent Beck)

Show HN: DraftJS Plugins: Slack-Like Emojis, FB-Like Mentions and Stickers (Web)

Show HN: Belle – Configurable React Components with Great UX

Stories and lessons learned from Partners and Founders at YC (Startup School Europe)

How to re-issue a SSL Certificate for App Engine (with RapidSSL)

App Engine and Heartbleed

How to speed up your Development Process with Minimum Marketable Features

Event: Hacking with Dart Experts in SF on tomorrow

Announcing Dart 1.0

Getting Started with Polymer.dart

How to Retinafy Your Websites

JavaScript Error Logging in Minutes

comments