SVGcode
astexplorer
SVGcode | astexplorer | |
---|---|---|
7 | 43 | |
664 | 5,953 | |
- | - | |
6.3 | 6.0 | |
2 months ago | 10 days ago | |
JavaScript | JavaScript | |
GNU General Public License v3.0 only | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
SVGcode
-
200 Web-Based, Must-Try Web Design and Development Tools
Raster Image to SVG Converter
-
How to generate these kinda images ?
here are some options -- potrace is free, or https://svgco.de/... there's also this extension that puts them in an a1111 extension. Illustrator also has a function for it, if you have access
-
Vectorgraphics Extension: Interactive vectorizing of single images added (SVGCode for Auto1111)
Thanks to SVGCode (https://github.com/tomayac/SVGcode) which did already my idea to compile POTRACE into WebASM/JS so to get rid of exectuables and faster inbrowser-vectorizing (the guy in the input example image is Richard Feynman)
-
Years of academic training prepared me for this moment
Oh op use this for png to svg conversion if you do not have better Ai or pro design tools. https://svgco.de
-
Finishing Up Release 0.4
This issue was about experimenting with SVGCode to see if it could be used to convert raster images to SVGs. I blogged about this process in my last post. I created a pull request which demoed the results of my research by including several SVGs that I created using SVGCode, Adobe Illustrator and Inkscape. Overall, I think that Inkscape produced the most consistent results for coloured and black and white images compared to other tools I tried, which I mentioned in my PR.
-
Converting Raster Images to SVGs
In a previous post, I mentioned working on an issue for converting raster images to SVGs. This week, I did some research on the tool recommended in the issue, SVGCode, as well as other popular tools and in this post I will be discussing some of what I learned after trying them out. For the tools that I tried, I wanted to find something that is free and easy to use, while still creating high quality SVGs, as there are a lot of images to convert. (Disclaimer: I'm pretty new to working with images and image editing software so I'm probably not using all the right terminology here, but I'm trying to learn!)
-
SVGcode – Convert raster images to SVG vector graphics
Thanks for the kind words! The documentation is still missing (tracked in part as https://github.com/tomayac/SVGcode/issues/19), but Potrace, the library SVGcode is based upon, has detailed information in a PDF on all parameters: http://potrace.sourceforge.net/potracelib.pdf.
astexplorer
-
Understanding Code Structure: A Beginner's Guide to Tree-sitter
You can play with your code here, and visualise ASTs for the same.
-
What is an Abstract Syntax Tree in Programming?
Website
-
How to create your own Eslint rule with tests, boosting the DX, and code-review
To understand this syntax, I recommend exploring AST Explorer. You will have a better view of how the AST of JavaScript works and how to correlate it with the Eslint syntaxy:
-
Programming from Top to Bottom - Parsing
You can never mistake type_declaration with an identifier, otherwise the program will not work. Aside from that constraint, you are free to name them whatever you like, there is no one standard, and each parser has it own naming conventions, unless you are planning to use something like LLVM. If you are interested, you can see examples of naming in different language parsers in the AST Explorer.
-
ESLint: under the hood
The rule that I want to write will be called not-allows-underscore: the idea is to abolish the use of underscores when declaring variables or functions. It's a real dummy rule, but it should be enough to see in action the concepts that we have discussed earlier. The first thing that I would do is to go to AST Explorer, write down a code that declares variables and functions (both standard and arrows one) and take a look at what type of node is the one that encodes the identifier. Doing that, I found out that the node type of my interest is Identifier, what a surprise! 🤣. In particular, the structure of the node holds the string used as identifier in the name property.
-
😱 ESlint over Conventions - You have Not unlocked the power of ESlint 😱
All the information about the API, AST node names, AST Explorer, etc. you can read in the official documentation. I’m just going to show examples of how to automate the check-up of our created conventions.
- AST Exploret
-
200 Web-Based, Must-Try Web Design and Development Tools
AST Viewer
-
Building a JSON Parser from scratch with JS 🤯
If you want to see how the AST of popular languages looks, I recommend the AST Explorer. It supports various languages, and you can view the complete AST and navigate through the nodes. If you want to go further, you can try to copy some logic from an existing parser and implement it in your own, such as calculating an expression according to precedence order, for example: 1 + 2 * 3 (which is 7, not 9).
-
Creating my own typescript compiler
https://astexplorer.net/ is a good resource/playground for understanding ASTs and transpilers.
What are some alternatives?
svgo - ⚙️ Node.js tool for optimizing SVG files
deno_swc - The SWC compiler for Deno.
IPC144 - Seneca College IPC144 Course Notes
gogocode - GoGoCode is a transformer for JavaScript/Typescript/HTML based on AST but providing a more intuitive API.
pev2 - Postgres Explain Visualizer 2
vscode-language-tree - VSCode tree format support
feather - Simply beautiful open-source icons
ChakraCore - ChakraCore is an open source Javascript engine with a C API.
shields - Concise, consistent, and legible badges in SVG and raster format
Acorn - A small, fast, JavaScript-based JavaScript parser
d3 - Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
proposal-type-annotations - ECMAScript proposal for type syntax that is erased - Stage 1