Live data from Hacker News

Painting with Code: Introducing our new open source library React Sketch.app

airbnb.design

71–80 of 100 posts

Re: Painting with Code: Introducing our new open source library React Sketch.app

#71
post #18

Earlier quoted context omitted.

Sounds intriguing, but I'm also a little confused about the flow of "code that generates sketch files"... what is the purpose of Sketch in all this? I would think programs like Sketch are useful in general because they give designers a nice way to design things without adding the extra layers of abstraction that code brings (i.e. they can just draw things with a mouse instead of writing instructions that tell the com…

To go the other way -- generating React code from Sketch -- you can use React Studio: https://reactstudio.com It has a Sketch plugin that does a rather competent job of converting Sketch layers/groups into components. (For example, you can prefix a Sketch group with "c:", and React Studio will interpret it as a component.) Here is a live video demonstrating the Sketch -> React Studio -> React code workflow: https://w…

If reactstudio could support loading in react form, components, color themes etc al from the hundreds of react themes sold from places like envato, themeforest, etc. then a whole class of UI mock ups could be built. Example themes:

https://themeforest.net/item/material-design-reactjs-admin-w...

or

https://genesisui.com/demo/?theme=prime&version=react

Re: Painting with Code: Introducing our new open source library React Sketch.app

#72
post #70

Basically, people: • Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product • The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild • This tool now lets them re-create the Sketch file from the components as the look in the wil…

to complete the explanation, sketch is a vector-based design tool that has an api for scriptable generation of components. this library lets you generate sketch widgets from react code; i presume that those widgets are then higher-level shapes stored as single entitles in sketch, so that when you update the react code, sketch files that use those components now use the updated versions. also, from their faq, there is…

Thanks, that helped :)

I think this is pretty cool. I might even update my React install and check it out properly

Re: Painting with Code: Introducing our new open source library React Sketch.app

#73
post #31

Would it be possible to use this on the server to create complicated PDF files for download (react -> sketch -> pdf), without using something like this current process (react dom -> html, css -> phantomjs -> pdf)?

+1 for this idea!

Re: Painting with Code: Introducing our new open source library React Sketch.app

#74
This looks great. And Sketch is incredible. I wish there was something like it available on Linux, or I could run it on Linux somehow. Seeing how important a tool it's becoming to web design makes me uneasy as it's shutting out my ability to do anything design related :/

Re: Painting with Code: Introducing our new open source library React Sketch.app

#75

This looks great. And Sketch is incredible. I wish there was something like it available on Linux, or I could run it on Linux somehow. Seeing how important a tool it's becoming to web design makes me uneasy as it's shutting out my ability to do anything design related :/

I keep an old Mac around for exactly this reason. However since version 43 they've switched to a new file format offering "more powerful integrations for third-party developers".

The new format is a ZIP containing a bunch of JSON files per page, so maybe someone will come up with a cross-platform viewer or similar.

Edit: I found this which works with basic Sketch files: https://animaapp.github.io/sketch-web-viewer/

Re: Painting with Code: Introducing our new open source library React Sketch.app

#76
post #70

Basically, people: • Design a set of re-usable components in Sketch that get turned into JavaScript widgets and used in a product • The JavaScript widgets are are modified, extended, and changed. Maybe a line here, a color here. Designers now sometimes have component designs don’t quite match what they look like in the wild • This tool now lets them re-create the Sketch file from the components as the look in the wil…

to complete the explanation, sketch is a vector-based design tool that has an api for scriptable generation of components. this library lets you generate sketch widgets from react code; i presume that those widgets are then higher-level shapes stored as single entitles in sketch, so that when you update the react code, sketch files that use those components now use the updated versions. also, from their faq, there is…

Can someone elaborate on the programmer's perspective? I understood the first and second paragraph (super helpful thanks!) but the exploratory, reloading repl escaped me.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#77
post #76
post #70

Earlier quoted context omitted.

to complete the explanation, sketch is a vector-based design tool that has an api for scriptable generation of components. this library lets you generate sketch widgets from react code; i presume that those widgets are then higher-level shapes stored as single entitles in sketch, so that when you update the react code, sketch files that use those components now use the updated versions. also, from their faq, there is…

Can someone elaborate on the programmer's perspective? I understood the first and second paragraph (super helpful thanks!) but the exploratory, reloading repl escaped me.

let's take a concrete example. say you want to write a ruby program to scrape some information off a website (e.g. crawl imdb and get a list of the top 100 movies and their stars). so, how would you go about it?

well, first of all you want to download a page. you haven't done in a while, so you google up the relevant ruby library (open-uri) and install it. then you load it up in a repl, like so

irb> require 'open-uri'

=> true

irb> url = 'http://www.imdb.com/title/tt0093779/'

=> "http://www.imdb.com/title/tt0093779/"

irb> page = open(url).read

# lots of html

now that you have confirmed it works, you paste it into your program

require 'open-uri'

def get_movie_html(id)

  url = "http://www.imdb.com/title/#{id}"

  open(url).read
end

then just to confirm it, you go back to your repl, load your file and try

irb> page = get_movie_html('tt0093779')

you have now not only written the first part of your program, but it is available for you to use in your repl as you figure out the other bits. as you get each part working properly, extract it into a function and add it to your source code, then reload the source in your repl and continue working.

the main idea is you get very fast feedback about the specific bit of the program you are working on; the repl maintains the state of the data for you, so you can probe at it till you have ironed out the issues, and then once it is in its final form you add it to your concrete code and use it as a building block in the repl.

here's another blog post about it: http://www.davidtanzer.net/rdd_and_tests

the analogy with sketch and react is that similarly, you can design a component (say a top navigation bar) in sketch with a very fast feedback loop, and once you are satisfied with it, you reproduce it in react and then reload your sketch environment from the react file, so that from now on the navigation bar you see in sketch is the exact one you have built in code, and you can use it as a building block for the next part of the site.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#78
The classic way for reusing style and layout in web development is to have the style in CSS-files. CSS-files have a URL, so you can include CSS across web pages and take advantage of CDN's and browser caching. CSS have it's problems, but CSS is far superior to in-lining the style al la components. It's good practice to use the native browser components, the component might work very different on a smart-watch, vs a big screen PC, native HTML component will work on both devices! And native HTML components also work with JavaScript turned off! and for visually impaired people using different kinds of screen readers.

Re: Painting with Code: Introducing our new open source library React Sketch.app

#79

This looks great. And Sketch is incredible. I wish there was something like it available on Linux, or I could run it on Linux somehow. Seeing how important a tool it's becoming to web design makes me uneasy as it's shutting out my ability to do anything design related :/

I keep an old Mac around for exactly this reason. However since version 43 they've switched to a new file format offering "more powerful integrations for third-party developers". The new format is a ZIP containing a bunch of JSON files per page, so maybe someone will come up with a cross-platform viewer or similar. Edit: I found this which works with basic Sketch files: https://animaapp.github.io/sketch-web-viewer/

Oh that's excellent to hear. Openly usable formats are great.

Most of the slickness of Sketch is in its UI though, it'll be tough to replicate. Do you know of any project attempting to do so?

Re: Painting with Code: Introducing our new open source library React Sketch.app

#80
post #76
post #70

Earlier quoted context omitted.

to complete the explanation, sketch is a vector-based design tool that has an api for scriptable generation of components. this library lets you generate sketch widgets from react code; i presume that those widgets are then higher-level shapes stored as single entitles in sketch, so that when you update the react code, sketch files that use those components now use the updated versions. also, from their faq, there is…

Can someone elaborate on the programmer's perspective? I understood the first and second paragraph (super helpful thanks!) but the exploratory, reloading repl escaped me.

REPL (Read-Eval-Print Loop) is an interactive way to program. You feed bits of the program line by line, in contrast to compiling a bunch of files. This is kinda like giving instructions live vs writing down a list beforehand.

When solving some problems, it's easier and quicker to use a REPL to get something that more or less works, and then to copy the working bits over to a proper source file to reuse. Before this React Sketch, Sketch.app was just the equivalent of the REPL, where you'd only store the result of your work, and not the process. Now you have a way to, as soon as you're happy with a design you drew by hand, write the code to generate it in order to reuse it in the future.

Post reply on HN