I have a quite simple question, does anybody know if there is some library out there for JS that could take in Sketch json output and give me back html in a form that I could render directly in browser (so not in form of html/css files but rather as code)?
There is https://www.animaapp.com/ but as far as I understand they export html and css in form of files.
I believe Figma or Zeplin both allow to import Sketch files so I wonder is there something open source out there that I could also use to render our Sketch file/json?
It requires efforts to write a program to convert Sketch into HTML/CSS, we have implemented our own one in our solution.
But the code of direct conversion is unstructural and not responsive, only works for fixed layout.
You can start from the repo below
https://github.com/mludowise/Sketch-HTML-Export
It takes us around 2 months to write a new one for a better quality of conversion.
You can use Desech Studio to import Sketch and then export as React.
The Sketch import will not be 100%. Here's a youtube video that gives more details, but they key things are:
html is positioned relatively with grids
imports all the css
imports images and svgs marked for export
As for React, it uses Facebook's create-react-app as a base. This is the github repo for the Desech Studio react plugin. Ultimately you can fork the react plugin repo and add your own code base and use that instead of the official react plugin.
But I agree with #pxCode This is not a 2 clicks import/export process. It will involve some work from your end too.
Related
I'm fairly new on the React scene and just finished a few small react applications. I deployed two of these applications to Github Pages, and they both function perfectly.
However, I noticed that the files in my repository are minified. Not only that, but the language meter shows it as 100% html. It's nitpicky, but I'd like for it to display JavaScript/CSS too. I would greatly prefer my files be visible, just in case anyone wanted to look at how my application was built (mainly recruiters).
Is there some way to make these files visible/UNminified without sacrificing performance?
Is there any reason I wouldn't necessarily need to undertake this? --> (would employers care?)
You're committing your built project, but you should upload the source code!
To expose your github pages you have to build the project inside the docs folder, so you can have source code and build on the same branch!
This is my first time building a web app, and one of the members of my team used Adobe XD to wireframe what the website and what it should look like. It turns out that you can export that to html, css, and some javascript (thousands on thousands of lines of code) but it's missing a lot of it's intended functionality. I was wondering if it'd be better for me to start from scratch with what little React I know and build it from the ground up and copy paste useful stuff over or if I should just try to tweak the code Adobe XD spat out. Thanks!
In my opinion you should create the React app from scratch and copy paste some markup and styling from generated file. That way it will be easier to think in React way and will break down the app in smaller components and define the data state accordingly.
really appreciate some help for this one.
I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:
Interactive Mouse Effects with Three.js
Just after the "var animate" part I receive an error of "cube not defined"
So I was wordering if there is a missing part for this tutorial??
Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?
Thank you thank you soooo very much!!
I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.
I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.
Is there important information due to this library use, that I need to know so I can upload it online?
I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.
I am trying to get more experience by implementing various web visual effects that I've seen online. The one I'm working on is to create a 'cursor trail' effect where the cursor trail is used to reveal a background image. For more context, you can find the inspiration for this effect here.
The CodePen that I have linked above contains an HTML file, a CSS file, and a JS file. For starters, I am trying to transfer this functionality into a simple React app. To do this, I first initialized a basic/vanilla react app:
npx create-react-app cursor_trails_effect
I'm having trouble incorporating this cursor trails effect into my React app. From the CodePen, I'm easily able to integrate the HTML and CSS parts into my React app, but am unsure how to connect to and execute the JS script that is part. Yet it makes me wonder, in general, how someone should go about integrating such a JS script into the React framework of web development?
Prior to posting this question, I conducted considerable research to understand how to execute scripts from external (.js) files, or use the <script> tag in React, and have tried to use a number of packages that claim to accomplish this (such as 'react-load-script', 'react-render-html', 'react-script-tag', 'dangerously-set-inner-html', 'react-helmet') but to no success.
I need to create a documentation component that renders .md files.
I have a collection of .md files (that could potentially be stored in a DB instead of having files) and I would like to allow users do navigate the documentation and see articles.
About rendering the files I've tried most of the stuff the Google has listed am currently, I am experimenting with the component react-markdown.
I'm having trouble figuring out the code highlight peace and I was wondering if there is a component out there, that does that out of the box or that have it as a straight boolean option.
<ReactMarkdown source={file}/>
note: I've checked the answer in How do I render Markdown from a React component? and couldn't find a good one.
I solved the issue by using React Syntax Highlighter and passing it into React Markdown's renderers attribute. It has a support for Prism.js and Highlight.js syntax highlighter libraries.
Have been searching for the solution for a while, and wrote a blog post on solving the particular problem. Check it out!