HNHacker News
TopNewBestAskShowJobs

jpochtar

584 karma · joined October 10, 2013

I'm https://jpochtar.me/ and I like devtools

https://calendly.com/jpochtar

submissionscomments
jpochtar··on Companies from the YC Summer 2018 Batch
why not just

    function baz(modifier) {
       let foo = do_a();
       let bar = modifier(foo);
       return do_b(bar);
    }

    Example 1: baz((foo) => foo);
    Example 2: baz((foo) => do_z(foo));
    Example 3: baz((foo) => foo + 10);
which lets you be more concise with

    baz = (modifier) => do_b(modifier(do_a()))
jpochtar··on Vue CLI 3: A Game Changer for Front End Development?
Pagedraw's working on it! First a UI builder where you draw in position:absolute and get clean flexbox React out, later an integrated platform with answers all the way to the backend
jpochtar··on I created the exact same app in React and Vue
Vue seems to have a lower learning curve for people with a background in webdev, because it's more relatable to the old school way of doing things. React seems better coming from other areas of programming, especially functional. React is also better considered "infrastructural": every React app needs to piece together a framework (router, "state management", forms, etc), whereas Vue has community enforced norms & standards that can answer those questions for you. Personally I use React.

Good luck!

jpochtar··on I created the exact same app in React and Vue
If your designers aren't programming, they probably don't need to write HTML/CSS either.

Full disclosure: I'm a founder of Pagedraw, which lets designers make UIs as easily as they draw them in a design tool, but are production ready. The designers don't need any code, but programmers can connect it to Javascript data bindings/event handlers as needed.

No one has to write HTML/CSS by hand any more.

jpochtar··on I created the exact same app in React and Vue
yes, this is exactly what I meant. Thank you!
jpochtar··on I created the exact same app in React and Vue
Do note that you can use React with much less boilerplate! The nice thing about React is it's very easy to write abstractions on top of it, since it's just a small JS library. For example, instead of writing value/onChange/setState, you can use valueLink={linkState()}. (Note valueLink and linkState were both formerly shipped with React and since deprecated, but it's easy to write them yourself.)
jpochtar··on ESLint compromised, may have stolen your credentials
I shouldn't have used the word 'certified'— I just meant the package version should have an associated commit hash. There has to be a relationship between the hash and the published code in some way, unlike eg. the "homepage" field people use to link to Github which can just be an outright lie.

My goal is for readers to match the hash to one on Github so they know the code they're reading there to vet the package is what's on npm. For OSS maintainers, it's an immediate red flag to see a package version published with a hash that was never in the public repo.

This won't certify that the version is blessed by a legitimate author. It just delegates the problem to Github (or their competitors). It doesn't solve the problem of preventing all OSS library-based attacks, but plugs one of the leaks in trust that caused today's failure: that Github->NPM is not checked in any way.

jpochtar··on ESLint compromised, may have stolen your credentials
Removing eval wouldn't help— you could always just write a tiny interpreter to do the same thing. This is a problem in any Turing complete programming language (with Reflection), although JS makes it easier.
jpochtar··on ESLint compromised, may have stolen your credentials
Each version of an npm package needs a certified git commit hash.

Otherwise when vetting an npm package, you have no idea if the code you're reading on Github is actually what you're going to download or not. In scenarios like this one, package publishers could easily configure getting an alert that someone tried to push to npm a hash for which no commit exists in Github.

For packages with a build step this would likely mean npm would have to run the build step on their servers. Hopefully there's a way they won't have to eat that cost, but I believe publishing linking package versions to specific git hashes is the only way to prevent an attack like this.

jpochtar··on Ask HN: What's your favorite way of getting a web app up quickly in 2018?
Not trying to be snarky but... how is it cheaper to hire a freelance IT person to set up something for you, and help you when it breaks/changes, than $7/mo for Heroku?
jpochtar··on Web Code is a solved Problem – how about fixing Web UI next?
We're trying to solve exactly this problem with Pagedraw! Check out https://pagedraw.io/
jpochtar··on My favorite principle for code quality
I believe the code presented would have benefited from a lambda-based API approach instead of an object-oriented one. In Javascript:

  // global, since the cached values were apparently global in the original
  let cache = {};
  let lastCachedTime = 0;

  // Utility for fetching potentially cached values, or computing them 
  // if there's no valid cache entry.
  let cached = (id, recompute) => {
    // I don't love this policy, but thankfully it's all in one place.  
    if (lastCachedTime <= lastMidnight() || lastCachedTime <= lastNoon() {
      cache = {};
      lastCachedTime = Time.now();
    }
    if (!(id in cache)) {
      cache[id] = recompute();
    }
    return cache[id];
  };

  // now we get to have a nicely factored, simple, conceptually independent, 
  // declarative code for the dashboard.
  function displayDashboard() {
    print("Total Users: " + cached("numContent", => countUsers());
    print("Articles written: " + cached("numArticles", => countArticles());
    print("Words written: " + cached("numWords", => countWords());
  }
This achieves the same "Embedded Design" goal. If you squint, it's actually virtually the same as the DashboardStatComputation/DashboardStat/Dashboard the author comes up with, where each lambda in the displayDashboard function is corresponds to a DashboardStatComputation.

I prefer this lambda-based design because it reifies the "form" into a single, callable, function: cached(). If you want to use the idea of cached(), you don't have to subclass anything or know about its implementation details— just call it.

(PS. the code's even nicer in CoffeeScript)

jpochtar··on Proton Native – React Native for the desktop
It turns out it's really hard to get a UI Builder right with HTML/CSS. In particular, layout is tricky because DOM trees imply both bottom-up and top-down constraints. For example, text getting longer pushes down content beneath it, while at the same time, the text might be 50% of it's parent node's width. The first constraint is bottom-up: the text node influences it's parent and sibling DOM node's geometry, while the second constraint is top-down.

I'm working at Pagedraw (https://pagedraw.io/) which attempts to solve this problem. We make a UI builder for web. It pretty much works like all the UI builders of the past, but translates constraints into divs, flexbox, and other web standard html/css. We don't have the benefit other UI builders in the past have had of compiling into our own layout system, because we refuse to force our users to use a js-based layout library or take extra dependencies which could increase bundle size.

It's only available for React Web for now, but we look forward to supporting React Native, and maybe even Proton Native in the future!

Lastly to matchbok's point:

> NIBs in macOS/iOS are horrible for development and code review.

We hope that this is a problem with NIBs, and not with UI builders in general. We believe that it's because there are no NIB diff/merge tools, so we're building branch/diff/merge into Pagedraw as a first-class feature.

jpochtar··on Gradual Programming
pagedraw.io is working on fixing html/css(/but not js) in a web browser by giving programmers a better tool, and compiling into html/css standards (since we're stuck with them)
jpochtar··on Ask HN: What are you working on and why is it cool?
https://pagedraw.io/ — keeps me from ever having to write HTML and CSS for web apps again. Enables solo developers to do more by letting us design UIs in a visual tool and not have to re-code them later. Enables developers on teams import their designer's Sketch or Figma files into code, skipping the tiresome designer-developer handoff full of tediously re-doing their design in JSX/CSS.
jpochtar··on Figma Platform
This is really amazing for the design tooling ecosystem. Sketch opened their file format, but Figma's APIs are actually a pleasure to work with. It was super easy for us to add a Figma importing to our design-to-React platform (Pagedraw), so you can now your draw your React UIs with Figma and ship them right to production.

disclaimer: I'm with https://pagedraw.io/, one of the integrations mentioned in the post

jpochtar··on Launch HN: Airship (YC W18) – Controlled rollouts of new features
Sales can use feature flags to enable secret features for a customer they’re talking to. For example to demo a not-yet-shipped feature. They can use a feature flag to mark a customer as “enterprise” so they get a different version of the product. Overall, I’ve found it useful for customizing my product for the person I’m in person or on the phone with, without touching code or affecting all users.
jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
Have you checked out StackBlitz (https://stackblitz.com/)? They can get you a full, sharable React or Angular environment in one click. Full disclaimer, we're partnering with them to bring you some of Pagedraw, but I just really like their stuff!

As a beginner programmer back in the day, setting up my tools was way harder than actually writing code. Setting up tools isn't programming! Don't think you're not a programmer because you don't want to deal with it— no one does. I hope StackBlitz can save a generation of potential programmers from being scared away because installing tools is gross.

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
Love the recursive self-hosting! Where can I read more?
jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
That's awesome! We might be interested in doing something together with a react conference— how do we get in touch? Can you shoot me an email?
jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
It's best for developers working together with designers. If you're a solo designer, you don't need to push an app to production (or I'd consider you a developer), so you're probably perfectly happy staying in Sketch or Figma. As a developer, I really don't like having to translate my designers' work into JSX and CSS, so Pagedraw can do it for me!

If you're doing both the code and the design, and you like to design via the inspect element tab, then Pagedraw may not be for you.

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
Thanks! We'll always be free for students and for making projects that are open source, and we'll have a subscription plan for teams at companies.
jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
Sign up and tell your friends about it! We'll email you product updates :)

We haven't thought too far beyond HN + word of mouth. How would you do distribution?

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
- until recently, there wasn't a universal cross-browser API for pinch zoom support. Not sure if that's still the case.

- we do a lot of work with the selection/focus browser API, which doesn't always work the same / have the same APIs

- until recently, Firefox had a different opinion about where an outline should go wrt positon:absolute children

...and what seems like a million more little things. We decided it was more practical to do Chrome + Electron (basically the same) than try to cover every browser where the standards don't exist or aren't met, since we're touching a lot of surface area and weird corners of the browser.

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
You can draw components and re-use them in Pagedraw today! It's what Pagedraw's all about (despite the name :P)

https://documentation.pagedraw.io/components/ and https://pagedraw.io/tutorials/components

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
coming soon! We're just putting our pants on one leg at a time :)
jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
For sure, thanks for pointing this out. We have https://documentation.pagedraw.io/why-not/, but we're trying to be clearer about how exactly our layout system works with https://documentation.pagedraw.io/layout/.

We give you controls to annotate your design with layout behaviors. The css we generate is 100% accurate to the constraints you specify, but our constraint system doesn't capture 100% of desired layouts (yet!)

We have 2 ways for you to control responsiveness: A flexbox-y constraint system, and media queries (Screen Size Groups). They're roughly the same controls html/css give you, though hopefully presented in a cleaner manner.

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
Definitely! I'm glad to see this is on other people's minds :)

We're huge on backwards compatibility (and think everyone should be), which is why we don't want to expose something we haven't stabilized yet. We'll have a way to export our just-before-codegen internal representation (shame on me for forgetting the PL term) once it settles down a bit. It's very much like a DOM, so there's not too much craziness there.

We'll be launching a bunch more backends in the coming weeks, so there's a good chance we'll have first-party support for your favorite framework anyway :)

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
We had a good conversation about this before down at https://news.ycombinator.com/item?id=16468276.

tl;dr: would you like the Electron app instead? It's available at https://documentation.pagedraw.io/electron/

It was tough for us, because we're big believers in the standards-based web. We 100% promise that all the code we generate works across all browsers.

Our editor was almost electron-only, but felt it was better to launch with Chrome + Electron than just Electron. Our editor isn't a normal webpage; it's doing all kinds of crazy nonstandard things webpages shouldn't do. It's only in the browser at all so we can re-use a web engine as our editor's rendering engine, since we occasionally show you snippets of compiled code.

I'm personally really sorry as an engineer that we don't support Firefox, Safari, and other browsers yet. It's on our roadmap :)

jpochtar··on Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code
Hah! I didn't even know we had Terminator quotes in there. Our adorable little Pagedog's inspired by a different... uh... buuuurp.. uh, high concept, sci-fi comedy universe ;)

Did you get to https://pagedraw.io/tutorials/basics? It's the button in the first section that says "Continue to demo"

← PreviousPage 4 of 5Next →