Throne of JS: Eight JavaScript MV* Libraries Compared - <AUTHOR> http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012 <comment><USER2> I attended the conference, and the topic (framework vs. framework vs. library) was definitely timely. There are strong points of contention between the major competing frameworks/libraries right now, and this was reflected in the panel discussions.

What struck me about the talks I saw was the degree to which each project strongly reflects the personalities of its authors; Jeremy Ashkenas was indeed (as the article says) the calm zen master of the panels, taking a minimally- prescriptive stance on how his code should shape your code.

Tom Dale and Yehuda Katz, on the other hand, came in with passionate arguments for the idea that JS frameworks should have strong opinions and exert a great deal of influence on your code and the outcome of your solutions. Katz's central thesis seemed to be that for highly common problems for which Ember would be used, extremely similar (if not identical) solutions should emerge.

All in all a good conference, and very differently-flavoured from JSConf.

</comment><comment><USER3> <http://tjholowaychuk.com/post/27984551477/components>

Those frameworks are great, but they all fail to take advantage of a key advance in software development: the widget.

Reusable, composable GUI components that package front end and back end files together and can be distributed easily as plugins are the next step up in abstraction and superior from a software engineering perspective.

The reason many web developers aren't able to either grasp or accept that is because A) understanding and building those types of components that are truly generic enough to be applicable to a wide variety of applications as well as reusable, has a significant learning curve and is time consuming and B) the better you are at it, the less likely you are to get credit for your programming skills, because unfortunately if you can build an application without typing colorful ASCII text, then you didn't do any programming and aren't a programmer.

To get past B) we just need to redefine what programming is, and also grow up a little. Also realize that even if you are programming with GUI components, you still have to create new components sometimes, so you are still programming and still a programmer.

I have a very early rough draft system that I am throwing together on my own, mostly because very few people seem to be able to appreciate these concepts. Or the ones that do are happy to use existing systems like ASP.NET or WordPress.

<https://github.com/ithkuil/cureblog>

<https://vimeo.com/43784316> Note that I have modernized the interface somewhat since I made that video.

<comment><USER4> Agree on widgets. Have you seen the Web Components effort? [http://dvcs.w3.org/hg/webcomponents/raw- file/tip/explainer/i...](http://dvcs.w3.org/hg/webcomponents/raw- file/tip/explainer/index.html)

It's an attempt to standardize widgets at the browser level. Really cool stuff.

It's based on ShadowDOM, which is an encapsulation notion: [https://dvcs.w3.org/hg/webcomponents/raw- file/tip/spec/shado...](https://dvcs.w3.org/hg/webcomponents/raw- file/tip/spec/shadow/index.html)

There are a few polyfills for playing with web components, such as Mozilla's <http://x-tags.org/> and [http://html5engineers.com/projects/playing-with-web- componen...](http://html5engineers.com/projects/playing-with-web-components)

Also some of the frameworks do have a "widget" or "component" notion. For example, see "Create Components" at <http://angularjs.org>.

<comment><USER3> Right, web components and angular js components are an improvement, but they still emphasize manual ASCII coding, which defeats one of the main advantages of GUI components.

Also the strong separation and lack of cohesion between the front and back end systems is a severe limitation.

<comment><USER5> Is it? One could argue that divorcing widgets from backend infrastructure so thoroughly is an asset.

<comment><USER3> Almost everyone does argue that.. sort of.. only there usually is no argument. Its taken as a given in most cases.

That belief is more a result of where we have been than on a logical assessment of where we are now.

If your back end team is separate from your front end team, programming in a different language, building a codebase to support multiple departments or multiple third-party integrators with a single web API for a one-of-a-kind world changing application running primarily in HTML browsers, then it may not make a lot of sense to try to package together the back end and front end code the way I am suggesting.

However, if your goal is to create an easy to use desktop-like website/web application building/editing experience that maximizes code reuse across applications (built on the same framework) on a Node.js/WebSocket/MongoDB/HTML5 stack, however, then my approach with packaging the back end code along with the front end code makes more sense. Yes, you may need to add a REST API on top of the back end if you need that.

</comment></comment></comment></comment></comment><comment><USER6> I wish he'd touched on testability. I chose Angular for my project because it is dependency injected by default and includes mocks for common tasks. This makes is possible to do the majority of my UI testing in unit testing which is much faster and easier than using something like Selenium.

<comment> steve-sanderson Unit testing your viewmodels/scopes is great, but it's a totally different kind of activity to end-to-end testing via browser automation, isn't it? Unit testing will help with design, but end-to-end tests will catch an entirely different (and bigger) set of bugs. So don't you need both?

<comment><USER7> Most frameworks it is not possible to do proper unit test. With Angular, you can actually do it. As the controller is totally separate from the view (html/dom).

<comment> steve-sanderson OK. I was just taking it for granted that it was easy, because the same is true in Knockout (viewmodels are entirely independent of views, and so are trivial to unit test with QUnit or whatever else).

<comment><USER7> Pretty much only Angular and KnockOut and maybe 1 other js framework can do real unit test

</comment></comment></comment></comment></comment><comment><USER8> I recently had to choose between client-side frameworks for a fairly complicated browser-based application.

I had no real requirements, except that I really preferred easily using CoffeeScript. Obviously all of them can be used with CoffeeScript, but some easier than others.

I embraced and evaluated Batman. This was before they updated their documentation a couple months ago. Their docs were so brief that I had to consult the (partially annotated) source for basic things like bindings, routings, etc.

I built a little example in about 5 days and called it quits. When it gets to 1.0 I'll take another look. Their new documentation looks promising.

I then went pursuing frameworks with automatic 2-way binding like Knockout (and batman). I really didn't want to go w/ Backbone because it doesn't provide that feature. But what I ended up finding is that implicit 2-way bindings like that are more of a performance blackbox. Not altogether bad, but that they have enough downside that they're not an absolute must-have.

I ended up choosing Backbone flavor Chaplin.

Chaplin is an opinionated implementation of Backbone written in CoffeeScript. It implements a Pub/Sub message bus using Backbone Events. It gives you defined structure that makes it easier to get started. And it provides garbage collection which can be super helpful. When a controller (and its models) is swapped out there are a lot of circular references that have to be manually broken for it to be garbage collected. Chaplin takes care of that for us.

And Brunch.io includes Chaplin now in its default recipe, which is also super helpful.

</comment><comment><USER9> "Agreement: Progressive enhancement isn't for building real apps. All the technologies follow from the view that serious JavaScript applications require proper data models and ability to do client-side rendering, not just server rendering plus some Ajax and jQuery code. Quote from Jeremy Ashkenas, the Backbone creator: "At this point, saying 'single-page application' is like saying 'horseless carriage'" (i.e., it's not even a novelty any more)."

I really don't understand this. While I get WAI-ARIA for accessability, Google still depends on static content for indexing, last I checked. Are we just stuck doing two separate page flows? If that's the case, why bother with the framework at all if it's just doubling the workload?

(Note: I'm looking at a way to allow the initial rendering of the page statically, then using backbone to attach to events after the fact and use as a single page application after the fact. Handlebars and Hogan handle the templating on client and server side, and both client and server models are extending a common model shared with both.

It will be great if it all works. ;)

<comment><USER10> There are two answers here.

If your page is a content page, you should follow the pattern that YUI's MVC uses, which is to hydrate your model objects by scraping the html on the page. So you need templates shared (or similar) on back-end and front-end, you render them on the back-end with initial content, when dom ready happens you create models instances with the data that you grep out of that markup, and then as soon as the user does something you re-render that data with the client-side templates. Needless to say, this is less than fun. (Especially if you do i18n and need templates that can do so on both front- and back-end.)

The second answer is: web apps usually aren't for searchable content. Let's say you're a startup with information about local restaurants, and you add a Backbone app for finding things nearby and filtering by type. Google should crawl your external site (home page, marketing pages, etc.) as well as your data pages (one page per restaurant, one per type per city, etc.). And all those pages link to or include your shiny new restaurant-finder Backbone app/widget. But Google doesn't need to crawl that app.

For most users of Backbone, where their app sits behind a login wall anyway, worrying about search engines is irrelevant.

</comment></comment><comment><USER11> Knockout is awsome. Check it out. You can grasp it over the afternoon and examples of advanced ui-s are interesting and concise.

<comment><USER12> And then you try to use it for more complicated cases, run into limitations and switch to backbone.

<comment><USER13> I take issue with this kind of generalisation. I don't think these problems are inherent to knockout, but I do think there is a lack of architectural guidance on building large apps with it.

That said, building a maintainable, extensible knockout app is the same as building any other object-oriented system. First, decompose your app into multiple view models (a single view model doesn't have to be bound to the entire page) with clearly defined responsibilities. Combine that with a good Pub/Sub system [1] and you're most of the way there.

That said, it would be nice to see some examples of large-scale knockout apps, as there doesn't seem to be much discussion out in the open in this area. A perfect candidate (in my mind) would be for Steve to release the source code for the knockout tutorial site since that is fairly complex.

[1] <https://github.com/rniemeyer/knockout-postbox>

</comment></comment></comment><comment><USER14> The one thing i'm missing most in all these frameworks is proper data access, _offline_

I agree that it's an awesome time we live in with an mv* framework coming out every day, but where's the love for offline apps? None of the frameworks seem to support grabbing data from SQLite in a proper way without including hundreds of extra kb's of js.

How about a real world scenario where you store products, and categories and prices in an sqlite database, and want to access and filter those, especially offline? There's no use in using a REST service, and you'd have to implement Sqlite Support yourself in all of them. (and no, compiling from coffeescript or depending on Nodejs doesnt count)

Building a (properly performing!) CRUD system for a tablet that works offline is still a hassle. That's why i'm currently working on CreateReadUpdateDelete.js, a project that aims to solve this by bringing my tiny ORM to JS.

Check it out if you're interested in a WIP, there will be a post here soon.

<http://goo.gl/avnzk>

<comment><USER14> [edit]whoops, wrong link: <http://goo.gl/gz7zo> [/edit]

</comment></comment><comment><USER15> "It's not just you! <http://blog.stevensanderson.com> looks down from here."

[http://www.downforeveryoneorjustme.com/http://blog.stevensan...](http://www.downforeveryoneorjustme.com/http://blog.stevensanderson.com/2012/08/01/rich- javascript-applications-the-seven-frameworks-throne-of-js-2012)

<comment> steve-sanderson Sorry, looks like I need to rebuild my Linode instance. It's back now.

<comment><USER16> It looks to be down again.

<comment><USER17> Now up - all works.

<comment><USER18> Down again.

</comment></comment></comment></comment></comment><comment><USER19> Why are people so quick to dismiss Yahoo Mojito? All these frameworks only run inside the browser. A little ehh to me, nothing revolutionizing. Yahoo's Mojito is a game changer. It can run in the browser and on the server. And it's SEO friendly!

Really wish Yahoo does a better job at marketing their own framework.

</comment><comment><USER20> "In my view, the strongest argument here came from the Angular guys who stated that in the near future, they expect DOM-based templating will be native in browsers, so we'll best prepare ourselves for the future by adopting it now. "

Would love to know where this was discussed in more detail.

<comment><USER7> Angular meetup.

</comment></comment><comment><USER21> If meteor is included, I would say enyojs and derby (linked in his meteor's overview) should be too.

<comment><USER22> They weren't there:

 _The premise was to take the seven top JavaScript frameworks/libraries for single-page and rich JavaScript applications — Angular, Backbone, Batman, CanJS, Ember, Meteor, Knockout, Spine — get the creators of all of them in one location, and compare the technologies head to head._

<comment><USER23> We had two Enyo engineers up there to talk to attendees, but we weren't able to get a speaking slot due to being a bit late to the event.

</comment></comment></comment><comment><USER24> "The only stalwarts here appear to be Backbone (other than its default routing feature, it works on IE6) and Knockout (which for now at least insists on total IE6 support)."

IE6 support is a must-have for me (corporate clients).

<comment><USER25> Is the ie6 support accidental or do the devs sacrifice maintainability, readability or performance to specifically support it?

It seems to me that since it is so small, and doesn't really _do_ much, they'd have to go out of their way _not_ to support ie6.

<comment> steve-sanderson > they'd have to go out of their way not to support ie6

Oh, how I wish! Try searching the Knockout source code for "IE" and see how many special-case rendering and event bugs it has to work around. For sure, getting 90% IE6/7 support might be quite easy, but that last 10% is a real pain and that's the value of using a mature framework where someone else has already debugged the heck out of it.

</comment></comment></comment><comment><USER26> For what it's worth, I've been playing around with making a really tiny MV* library called Ivy (<http://adamsanderson.github.com/ivy/>).

It's similar to Knockout with data binding, dom templating, and some nice debugging tricks.

The entire thing clocks in around 900 lines with comments, and has no dependencies so if you're curious, have a look.

<comment> steve-sanderson Nice one! It's cool to see these ideas expressed in such minimal code.

</comment></comment><comment><USER27> Incomplete without including YUI3 App framework.

<comment><USER28> Yup. Oddly enough, YUI had a core team member (Eric Ferraiuolo) at Throne of JS to talk about Y.App, but apparently didn't get a mention in the linked blog post. _shrugs_

<comment> steve-sanderson Eric's talk was more about general web development principles than about any YUI technologies specifically.

</comment></comment></comment><comment><USER29> For those that are using AngularJS, the frontend guys over at Duolingo gave a great talk about using browserify to perform dependency injection into angular so it feels like you are using angular as a library instead of a framework. It was some really cool stuff.

</comment><comment><USER30> Knockout is pretty good. Simple to use and get the job done.</comment>


Internet blackouts in Zimbabwe, the DRC, and Gabon are a sign of what's to come - <AUTHOR> https://slate.com/technology/2019/01/internet-blackouts-government-drc-zimbabwe-gabon.html <comment><USER2> I think we'll see more government caused internet blackouts than hacker caused internet blackouts. Even in 2018, this was the case, and I expect the gap to grow wider even.</comment>


Ask HN: Free or cheap advanced programming classes for an experienced developer? - <AUTHOR> Somehow, I became a developer. I didn't really intend to at any point (I majored in Marketing in college), but I am now. I've spent the last few years writing Python, PHP, Go, and an awful lot of Javascript.
But I never studied programming in school.
I've learned programming concepts on my own ever since I was 11, and have worked in quite a few languages. I spend a lot of time reading articles online, and trying to improve my code via StackOverflow and code reviews.
I'm working full-time and supporting a family. My wife is in Grad School. I can't really afford to go study at a University now, but I feel like I'm missing some foundational concepts that Computer Science majors would have learned.
For a guy on a budget with only 5 - 10 hours a week free, are there any good advanced programming courses out there? Because of my experience level, I'm not interested in a lot of the stuff I've been finding (geared toward people with no programming knowledge). <comment><USER2> Hi there,

These days, one doesn't need to go to Uni. I am like you and I love this, take your pick - [https://www.coursera.org/browse/computer- science?languages=e...](https://www.coursera.org/browse/computer- science?languages=en)

All the best!</comment>


Show HN: Monthly Readers Club – Develop your soft skills through reading - <AUTHOR> http://monthlyreadersclub.com

<comment><AUTHOR> Hey HN. I built this to help people read more. Talking with friends and coworkers, I kept hearing about how they use to read all the time, but stopped. I definitely wasn't reading as much as I wanted either. Making time to read is hard after work, other commitments, and trying to have a social life.

To make things easier, I made Monthly Readers Club. You sign up for either a monthly subscription or a "business course" and get delivered a book that fits your genre or topic each month. Spacing a book out over a month is pretty easy and knowing another book is coming next month motivates you to read the current one.

That's the idea anyway. The cool thing about subscription "boxes" is that they have low overhead. If you consider this my MVP, it probably cost me $200-300 and most of that was the LLC registration. My plan is to market to business schools and businesses because books are still one of the best ways to learn soft skills. Any feedback would be appreciated!</comment>


Crash-Resilient Wayland Compositing - <AUTHOR> https://arcan-fe.com/2017/12/24/crash-resilient-wayland-compositing/ <comment><USER2> I think the problem is complexity. A compositing window manager should not be terribly complex and it should be reasonably possible to get all the bugs out over time. One problem is feature creep. Features that were not part of wayland due to security concerns are being implemented anyway - warp pointer, color picker, etc.

<comment> yjftsjthsd-h > Features that were not part of wayland due to security concerns are being > implemented anyway

Yes, because without those features it was secure _and useless_.

</comment></comment><comment><USER3> How do Windows and MacOSX go about this? Do they get it correct? If yes, how? If no, what are the workarounds they use?

<comment><USER4> Windows manages just fine, symptoms of crashed GPU driver are black screen for couple of seconds until you get your desktop back.</comment></comment>


Chartist – Simple responsive charts - <AUTHOR> http://gionkunz.github.io/chartist-js/ <comment><USER2> Looks very pretty, but doesn't seem to offer hover states or actions / tooltips. I think this is a dealbreaker for a lot of users who wish to add contextual information to their charts.

<comment><USER3> When I think responsive it's in a mobile first paradigm. There is no hover on mobile.

<comment><USER4> There is no hover on mobile, but in this context, touch/press works as an analog for hover. In other words, you want more information/detail on a particular data point, on desktop you hover, on mobile you press.

<comment><USER3> which is essentially on click. You don't want the details to only show up while your big fat index finger is in the way.

</comment></comment></comment></comment><comment><USER5> XSLT can create client-side charts without JavaScript. For example:

[http://davidjarvis.ca/world- politics/xml/resources.xml](http://davidjarvis.ca/world- politics/xml/resources.xml)

The source code is hosted on BitBucket:

[https://bitbucket.org/djarvis/world- politics/src/master/xml/](https://bitbucket.org/djarvis/world- politics/src/master/xml/)

Without JavaScript, the interactivity of the charts is limited.

<comment><USER6> Are people still adopting XSLT for new projects? It seems it has fallen out of favor.

<comment><USER5> I use XML/XSLT to transform data into multiple output formats (currently XHTML and ConTeXT/PDF):

[https://recipefiddle.com/recipe/15316/truffles](https://recipefiddle.com/recipe/15316/truffles) (web page)

[http://i.imgur.com/T71WhDJ.png](http://i.imgur.com/T71WhDJ.png) (editor)

[https://recipefiddle.com/book/examples/recipefiddle_sweet_tr...](https://recipefiddle.com/book/examples/recipefiddle_sweet_treats_ebook.pdf) (printable ebook)

[https://recipefiddle.com/book/examples/recipefiddle_sweet_tr...](https://recipefiddle.com/book/examples/recipefiddle_sweet_treats_cards.pdf) (recipe cards)

Each recipe was created from the same XML recipe data, transformed using two different templates. To my knowledge, JSON cannot be directly transformed into *TeX, but XML can.

To achieve the similar results with JSON, you'd have to first transform it to YAML, then Pandoc, then LaTeX, then finally PDF. Then you'd have to use a different infrastructure to render JSON as XHTML.

Architecturally, in this case, XML/XSLT is the simpler solution. If you only care about mobile apps, and don't need to create beautiful ebooks, then XML/XSLT is not a good choice.

</comment></comment></comment><comment><USER7> As somebody who has worked a lot with many javascript charting libraries over the years, one important lesson we have learned is to "never roll your own charting library" and accept the feature set of the library. Too much customization will lead you down a windy path that can lead to nowhere. Pick your library first and keep that library's limitations in mind during the design process to save yourself a world of hurt

This library looks to appease a lot of the design customization so far though, great job and kudos to the author for what looks like a really good start.

<comment><USER8> Sounds like a nice business opportunity: a chart library that is as easy to use as it is to customize.

</comment></comment><comment><USER9> Looks great. I use Highcharts.js responsively by simply setting the chart width to % rather than pixels. After all, scalable is a key part of SVG.

Noting that Chartist is much leaner than Highcharts, how do you envision differntiating this project and avoid feature creep to make it like Highcharts.js 2.0?

<comment><USER10> good question

</comment></comment><comment><USER11> Given that this doesn't work on Android 2.* stock browser (and I assume IE8), it would be good to see some kind of fallback - preferably canvas and if that's not supported then a table of the raw data, which would be better than the current blank space.

<comment><USER12> I bet that not supporting those are intended. I don't get why there is always this need to support old tech. Can't we not just move forward?

<comment><USER13> Both my android devices run 2.3 and I'm using highcharts without problems on both. Which is why I won't probably be using this.

<comment><USER14> Why? You're like one of those people who still uses Windows XP. Spend $100 and get a device that runs something released in the last SIX years.

<comment><USER15> But 2.3 (Gingerbread) was released in December 2010, so his device indeed runs something released in the last six years.

In an ideal world (for software and hardware vendors, at least) we would be replacing devices with their latest versions as soon as they come out and backward compatibility wouldn't be a problem. However, I can imagine a situation where spending $100 on a new phone is a luxury and not everyone can afford it. If a phone makes calls, sends text messages, and connects to the Internet, it's still usable.

<comment><USER14> You're right about the release date. Not sure why I thought 2008.

Like XP, Gingerbread has unpatched security vulnerabilities. Having a mobile phone with up-to-date security is well worth spending $99 (for a Moto G, for example).

I get that not everyone can afford something like that, but it's like car insurance. You absolutely can't afford to have your identity stolen.

<comment><USER15> I think it's more like an old car versus a new car. Having a new one is a better choice since it has more features, it's safer, it's more fuel- efficient, it pollutes less. Yet there are consumers who consciously choose older cars because in their mind lower price outweighs potential benefits of a new car.

I agree that having your identity stolen is something you cannot afford. But then again we are both frequenting Hacker News so we are aware of how technology works and how damaging compromised security can be. An average user however might not realize that an outdated Android version has unpatched vulnerabilities. They are just happy that they can send Snapchat messages to their friends and can watch Youtube videos when they are waiting for a bus.

Also, how long before Moto G stops being supported with updates and becomes vulnerable as well? What should happen next?

</comment></comment></comment></comment></comment></comment></comment><comment><USER16> Very pretty, but doesn't seem to be able to match the functionality of dygraphs, or the number of chart types in the google chart library (or similar).

I will definitely keep an eye on this project though.

</comment><comment><USER17> I rarely have a need to display static charts. My common use when I reach for a chart is to display live streaming data. Usually doing so involves accessing a points list directly and managing the addition/deletion/updating myself.

Is there any chart system that is made with live updating in mind?

<comment><USER18> Yes, rickshaw.js: [http://code.shutterstock.com/rickshaw/](http://code.shutterstock.com/rickshaw/)

And it's built on top of d3, so the possibilities for customization are almost limitless (as another commenter has said).

</comment></comment><comment><USER19> This website is using SVG graphics, very nicely. Is there a tool (GUI) that does that? Is it an export from a program like Illustrator, or is there something easier --and cheaper-- to do this?

<comment><USER20> XaraXtreme - [http://www.xaraxtreme.org/](http://www.xaraxtreme.org/)

InkScape - [http://www.inkscape.org/en/](http://www.inkscape.org/en/)

Karbon - [https://userbase.kde.org/Karbon](https://userbase.kde.org/Karbon)

<comment><USER19> Thank you.

</comment></comment></comment><comment><USER21> Why prefer this over Chart.js [1] which is responsive as well?

[1] [https://github.com/nnnick/Chart.js/](https://github.com/nnnick/Chart.js/)

<comment><USER22> I've run into some serious performance issues with chart.js on Firefox with moderately sized datasets.

<comment><USER2> SVG in general falls over with very large datasets, I find html canvas based libraries such as maybe Flot better for thousands upon thousands of datapoints. I love d3 as much as anyone and all of it's offspring, but SVG is too slow in most browsers (especially Firefox) for lots of datapoints.

<comment><USER23> It is interesting that you cannot copy SVG out of your browser. When I visit the page in Chrome, mouse over the graph and "copy," it doesn't copy either the BMP buffer OR the raw SVG (XML).

I was going to try and copy/paste into Outlook, but that's obviously no-go if you cannot copy at all. Interesting limitation of SVG that I wasn't aware existed until now.

<comment><USER2> Yet another bonus of canvas, something vaguely akin to:

var canvas = document.getElementById("canvasElement");

var image = canvas.toDataURL("image/png");

document.write('<img src="' \+ img + '">');

</comment></comment></comment></comment></comment><comment><USER24> Looks interesting - does this library do animation of states from old to new (e.g. adding new data) in the same vein as, for example, c3.js?

</comment><comment><USER25> Can I send these charts as images in emails? Google Charts is killing that features and we use it at work. SendGrid does the same thing.

<comment><USER26> It's generating SVG charts, which would probably work, but it uses JS to generate them, which certainly won't.

If you pre-generated them with something like node.js, you might be able to.

</comment></comment><comment><USER27> Are bar value labels supported?

</comment><comment><USER28> labelInterpolationFnc? Really? :P

Looks cool though.</comment>


Development with the iPhone SDK - Initial Observations - <AUTHOR> http://experimentgarden.blogspot.com/2009/06/development-with-iphone-sdk-first.html <comment><USER2> Doesn't really say a lot.

Xcode is nice, there's a simulator, Interface Builder has lots of windows, and you need to program in Objective C. Nothing very insightful.

<comment><AUTHOR> These are initial observations from the first day of using the iPhone SDK. Basically, I'm just sharing my first thoughts and impressions on the tools involved and how they work and appear.

I'll share some insight later, after I explore the SDK and Objective C code interfaces in more detail.

</comment></comment><comment><USER3> I always dislike "initial observation" posts because everyone seems to see things through rose-tinted glasses when they first come upon a new programming toy (or new programming tool).

Its always more interesting to see the blog posts making observations after a person/company has released a serious project. This way, these people have been using the tools in their daily workflow for weeks/months and know most of the ins and outs of it.

<comment><USER4> Plus, with a free download like the iPhone SDK, it's more fun to get one's own first impressions than to read somebody else's.

</comment></comment><comment><USER5> I tried to comment on the story but it is broken.

To the author:

I think where you say "require that I learn an entirely new language" and go on to mention interfaces and handlers, you mean instead Cocoa (Cocoa Touch in this case)

Nice write up and good luck

</comment><comment><USER6> from the article: "The only shortcomings that I have noticed so far is that the simulator doesn't seem to respond to orientation changes of the iPhone simulator. There is a menu option to rotate the iPhone, but the orientation of the programs, even the built-in ones, doesn't change when the simulator rotates."

I just tried this on my own iPhone simulator, and it's not true. The simulator's version of Safari does indeed rotate sideways when the simulator does.

<comment><AUTHOR> You are correct.

Safari does indeed rotate, but other applications such as Photo Album, etc don't. And it doesn't work on other Apple sample code programs either. Safari and Contacts seem to be the only two apps that rotate.

Perhaps I just need to add the right code to my apps to make them rotate, but even the sample code applications from Apple don't rotate.

I'm still looking into this issue. There has to be something that I'm missing.

<comment><USER6> as for "photo album:" are you sure that app rotates? My guess is that it doesn't, so obviously it won't on the simulator. Not every app rotates, remember. Until very recently, the only one of Apple's apps that did is Safari.

I have gotten my own apps to rotate in the simulator just fine. You have to make that decision at the view controller level. Investigate the UIViewController method shouldAutorotateToInterfaceOrientation:

<comment><USER7> In addition, there's a Info.plist key/value, UIInterfaceOrientation with the value UIInterfaceOrientationLandscapeRight or UIInterfaceOrientationLandscapeLeft, that lets you set the default rotation level and the simulator will start the app in the correct rotation.

EDIT: Also the autorotation only works on ViewControllers. If you only have Views without ViewControllers, (such as the default OpenGL app from the wizard) they will not rotate.

<comment><AUTHOR> Would I have to set up two views within Interface Builder, one for landscape and one for portrait, or do I use the one single view and rotate it using code?

<comment><USER6> you just use one view. implement that view controller method i mentioned, and always return TRUE. you must do this for every view in your app, if you want them to all work in landscape modes.

that's all you have to do, as far as the iphone is concerned. of course you'll have to draw the view contents differently, when you're in landscape mode.</comment></comment></comment></comment></comment></comment>


The Lofstrom Loop - <AUTHOR> https://en.wikipedia.org/wiki/Launch_loop <comment><USER2> It's frustrating that many of these alternative approaches to accessing space (e.g. the space elevator) are "all or nothing", i.e. they require a massive investment just for performing preliminary experiments. Rockets (and to some extent space guns) can be built up incrementally, in range and capacity, which is probably a major reason they're so far ahead.

I'm not sure if miniature launch loops would be viable (i.e. self-supporting), but it should certainly be possible to build a space fountain up from the ground, at a very small scale. I'm still waiting to see it done though :(

<comment><USER3> Maybe this would be a project Gulf countries could blow their money on rather than supertall buildings.

<comment><USER4> Maybe the supertall buildings are designed to be adapted into space elevators? See also: Empire state building as dirigible mooring station.

<comment><USER5> If they want to go higher they'll have to do something brave at some point: [https://en.wikipedia.org/wiki/Space_fountain](https://en.wikipedia.org/wiki/Space_fountain)

</comment></comment></comment></comment><comment><USER6> I can't help to think that given the size of the structure it would be almost impossible to guard, and would be highly susceptible to sabotage. (by groups against space colonization ?)

</comment><comment><USER7> I like this list:

[https://en.wikipedia.org/wiki/Non- rocket_spacelaunch](https://en.wikipedia.org/wiki/Non-rocket_spacelaunch)

Some ideas seem rather sci-fi :D

<comment><USER8> Back when the web was relatively new (say 1998), NASA's Institute for Advanced Concepts (NIAC) had a great page that enumerated most of the exotic alternative launch ideas and presented simple graphics and short formulas on what their problems were.

It was back when a much higher portion of people browsing the net could be expected to be relatively technically competent and to care about content and not gloss. Maybe it was removed since it didn't come up to some visual standard. Sadly I haven't been able to find it on archive.org

</comment></comment><comment><USER9> Cool idea... though, along with the space fountain, it seems to have no non- cataclysmic failure modes. Though, there are proposed safety features to dump the cataclysm somewhere relatively safe.

</comment><comment><USER10> How big and powerful would a catapult have to be to shoot several tons into orbit?

A catapult might be a more compact solution :)

<comment><USER6> Here is a list of space launcher design :

[https://en.wikipedia.org/wiki/Non- rocket_spacelaunch#Project...](https://en.wikipedia.org/wiki/Non- rocket_spacelaunch#Projectile_launchers)

</comment></comment><comment><USER5> Are there any small scale working models of Lofstrom loop, space fountain or even maglev trains?

<comment><USER11> its an old idea and until my last search around two years ago I've found almost nothing.

In my infinite spare time (in retirement or something) I plan to build one of a scale large enough to launch something like a water balloon or maybe paintball payload a couple feet. I'm well aware there are simpler and more efficient ways to toss a water balloon ten or twenty feet, but its unlike there exist any cooler ways to do it. I would take it to the local maker faire and set it up next to the guy with the pumpkin trebuchet (every faire seems to have one of those guys).

It turns out that shock loads can be significant and dynamic stability is not exactly guaranteed, which makes it a cool engineering project. Also for small ones either the payload has to be extremely small (resulting in the paintball payload) or the loop has to be extremely heavy (probably not insurance approved, although it would be cool to spin up a length of hoist cable).

The one thing I have found is a cat or kid toy implementation radius about one foot. Its moderately cool. In order to eliminate or cut down on medical bills it has some elaborate and extremely fast motor current monitoring, which is usually the downfall of the toy.

If you're thinking the same thing I'm thinking, I wish you good luck. Its a cool project idea.

This topic comes up almost like clockwork on HN every couple years. Eventually I'll have something cool to demo.

<comment><USER12> "The one thing I have found is a cat or kid toy implementation radius about one foot."

\- Citation please :)

<comment><USER11> I am unsuccessful at finding the kids toy. I owned one, maybe ten years ago. Hand held, black plastic...

An artist named Paolo Salvagione made an arduino controlled "string fountain" a bit less than a year ago on this principle. It would have to be dramatically up scaled to launch a paintball or similar. His artistic interpretation was the vibration modes of the string look nice and artsy, whereas the engineering launch device I'm thinking of would be a perfectly non-vibrating circle.

<comment><USER5> Awesome. Putting something on this string that tries to passively slightly bend the string while allowing the string to pass through should be enough to have it lifted and kept up.</comment></comment></comment></comment></comment>


Ask HN: Do you get tired of using your personal laptop sometimes? - <AUTHOR> Do you guys also just get tired of using your personal laptop after x months and find your self just wanting to buy a different model or is it just me? <comment><USER2> I do. Then I recognize that the feeling is symptomatic of just being tired of computers in general and that a new laptop won't fix that. In some ways I suspect it will make it worse because a new laptop comes with a sense of obligation to spend more time at the computer even though spending time at the computer is the root cause of my ennui.

To be more specific, I've recently had new computer fever for a laptop with pen support because I imagine myself creating computer art. But the reality is that if I give myself permission to make art, I'd rather be making physical art not spending additional time sitting at the computer...and spend some meaningful fraction of a thousand bucks toward doing so.

To put it another way, shopping for the props of an activity is more socially acceptable than doing the activity. A large part of the social acceptability is how efficient shopping for a new computer is relative to the tasks that a person does on the computer. A few minutes ordering online versus days, weeks, months and years writing a program. "I bought a new computer" is an excuse for not using the one I have. I can spend my time setting the new computer up instead of creating something and setting up the new computer is _arguably_ "meaningful progress" though in reality it's make-work.

</comment><comment><USER3> I'm still on my Retina Macbook Pro late 2012, so not really...

<comment><USER4> Same story here, kind of. I still use and enjoy my Macbook Air from 2013. It also beats all the Windows laptops I've been using at work during that time.

</comment></comment><comment><USER5> I do get that urge sometime. I use Debian with gnome3. When I get that urge, I go find a good looking theme. The new theme makes it feel like I have a something different. This used to happen quite a lot when I was in my 20s and early 30s. Not so much anymore. I guess I have many things that need to care about other than my computer. I haven't changed my theme in two years, not even the background.

</comment><comment><USER6> actually no. in the past it used to be exciting to set up a new laptop and find out the subtle differences to the previous model. Now I am already content if everything stays the same for many years (yes, I run debian).</comment>


World's first programmable nanoprocessor - <AUTHOR> http://www.seas.harvard.edu/news-events/press-releases/nanoprocessor

<comment><USER2> > _"This work represents a quantum jump forward in the complexity and function > of circuits built from the bottom up, and thus demonstrates that this > bottom-up paradigm, which is distinct from the way commercial circuits are > built today, can yield nanoprocessors and other integrated systems of the > future,"_

 _Define_ "bottom up", please. I highly doubt that chip manufacturers haven't been trying extremely hard to make smaller chips, so I'm forced to assume they mean something else. In the meantime, of course chip manufacturers are focusing on increasing macro-complexity, because that's where the major speed increases have been for quite a while (SSE, predictive branching, hyperthreading, multi-processor, etc)

<comment><USER3> <http://en.wikipedia.org/wiki/Top-down_and_bottom-up_design>

<comment><USER2> > _Bottom-up approaches seek to have smaller (usually molecular) components > built up into more complex assemblies, while top-down approaches seek to > create nanoscale devices by using larger, externally-controlled ones to > direct their assembly._

Absolutely perfect, thanks :) I never knew there were precise uses of these terms, they've always seemed overly-general to me.

</comment></comment></comment><comment><USER4> So it's not clear just what the advance here actually _is_. Just how is this new technique different from the old ones? Could we at least get a size comparison against current processors?

</comment><comment><USER5> Yes, but can they _replicate_? If so, we're doomed! <http://en.wikipedia.org/wiki/Gray_goo>

</comment><comment><USER6> Related: <http://news.ycombinator.com/item?id=2206087></comment>


The Revenue Limits of Tax and Spend - <AUTHOR> http://online.wsj.com/article/SB10001424052748704608104575217870728420184.html

<comment><AUTHOR> Post-WWII, " _Whether rates are high or low, evidence shows our tax system won't collect more than 20% of GDP._ "

Which suggests that an increase in tax revenues will require a change in the post-WWII system, e.g. a VAT tax.</comment>


Playstation 5 DualSense Controller - <AUTHOR> https://blog.us.playstation.com/2020/04/07/introducing-dualsense-the-new-wireless-game-controller-for-playstation-5/ <comment><USER2> While far from aesthetically-pleasing, and generally a downgrade in every way as far as looks go, this has some really (surprisingly) interesting features.

I'm not 100% on this, but I'd be _very_ surprised if SONY isn't going to make a huge VR bet with this system (PSVR doesn't count). Pretty much all of what I'd consider the compromises of this controller seem to be in an attempt to make it better for that purpose.

</comment><comment><AUTHOR> I personally thought the PS4 controller was near perfect. They made them slightly bigger, and got rid of the mushroom top of the sticks, and switched to a style where your thumb can sit comfortably and in control. This looks like they're trying to jump ahead 100 years in time.

But hey, I'm judging it on one camera angle. Maybe I'll bust a nut as soon as I hold it in my hands for the first time.</comment>


The Bézier Game - <AUTHOR> http://bezier.method.ac/ <comment><USER2> When you pull out the first point of a curve, it's oriented backwards. Here's what I see when I click on the left point of the circle, drag the curve handle upwards, release, and move the cursor to the second point: [http://imgur.com/zw20Ig4](http://imgur.com/zw20Ig4)

I get the same behavior on the next exercise (the heart), as well.

Also I feel that you are giving exactly enough points to do a nicely editable shape, and then asking them to do it in _less_ by having the score mechanic. I'm at the face now, and every preceding image has been done with exactly the amount of points allocated when I follow my usual rules of point placement. I feel like you're teaching people to make hard-to-edit images by asking them to use less points.

(Said rules: 1\. Pull curve handles out to about 1/3 of the length of the line they control. 2\. Never turn more than 90º between two control points. 3\. Avoid S-curves between two points.)

OSX 10.9.4, Safari. And fourteen years using Illustrator as my main artistic medium.

Edit. I stopped at the swooshy S when you asked me to try and make it with about 3/4 as many points as I would consider to be the minimum for a nice, controllable path. I feel you are teaching people bad form.

(To make a programming analogy: think of the difference between ultra-compact, hyper-idiomatic Perl code with single-letter variables and nicely-commented code with informative variable names - the Perl may be smaller, but it takes a _lot_ more effort to go back and read when you need to change something.)

</comment><comment><USER3> I could not even get through the first tutorial stage. What did any of the cursor things mean? I kept clicking , but the colors turned from peach to green to purple only, nothing else happened. What is this supposed to teach again? A better tutorial is needed for sure. This was 'clever' but too clever for me to use.

<comment><USER4> Same here! So frustrating. Edit: ok got it.. just follow the animation exactly but just click once at each point, don't drag a line out..

</comment></comment><comment><USER5> Not sure if considered bug or "feature" but after first level, on levels that require you to go to your starting point, i.e.: draw a heart or circle, you can click on your starting point again, winning the level with all your nodes remaining. This can be used to skip levels.

<comment><USER6> This is a bug indeed, thanks for the notice. (changed the way this was detected and I accidentally the whole thing, sigh).

<comment><USER7> "I accidentally the whole thing" ... best typo ever, given the bug. :D Is there such a thing as a typo pun?

<comment><USER8> Yup! This one's been around for a while:

[http://knowyourmeme.com/memes/i-accidentally](http://knowyourmeme.com/memes/i-accidentally)

</comment></comment></comment></comment><comment><USER9> Solid game, I got 11. I just wish there was a way to edit nodes - it's really annoying to try to guess what the curve will look like when moving an unlinked node (like in the heart example). I can see that being part of the game though, I definitely got better at it by the end.

<comment><USER6> Key in getting adept at bézier curves is guessing the form of the curve in advance, this is why curves can't be modified (otherwise it's just better to practice tracing in your favorite design tool).

</comment></comment><comment><USER10> All these years of tinkering in fireworks and I never learned about using the alt key to break control points. Thank you!

<comment><USER11> Yep, that's something that's always frustrated me using the pen tool and I had no idea about the Alt thing either.

Great stuff. I've taught and watched people struggle to learn how to use the pen tool… it seems to be very unintuitive at first. A walkthrough using something like this would be a great tool for learning.

Also, I wouldn't have known to try that Alt trick had it not been for this parent comment. I'd recommend words instead of symbols for Alt and Shift at the top, and probably written instructions for the tutorial levels.

</comment></comment><comment><USER12> Having never used a "pen tool" and having no idea how it works, I have no idea how to get past the bottom point of the heart.

<comment><USER12> Upon reflection, I think the issue is that I can't hit the OS X "alt" key on my traditional keyboard. I can't risk changing the mapping in software though, because then some other shortcut in another program will break.

</comment></comment><comment><USER13> Is there ay way to jump to levels or replay the demo on the tutorial pages?

<comment><USER14> Yes, this would be nice since I couldn't figure out the heart in the demo.

<comment><USER15> CTRL + X will re-display the tutorial animation.

</comment></comment></comment><comment><USER16> Great game!

For me, the issue is this: the direction that you drag when you're doing your first anchor point is the opposite of the direction that it should be. You're dragging away from the direction you want it to curve, rather than towards it. But for every anchor point other than the first one, you're dragging towards it.

<comment><USER6> Author here. That's the way Adobe Illustrator thinks Bézier curves should work, unfortunately. I have no idea why,I chose to follow their lead because the purpose is learning how to use a tool. Still on the fence on this one, I even had to go out of my way to implement it.

<comment><USER17> No, for the first point, you are doing it exactly the opposite of the way Illustrator does it. In Illustrator, you click for your starting point, and you drag in the direction you want the curve to go. In yours, you click for your starting point, and drag in the opposite direction.

</comment></comment></comment><comment><USER18> Awesome idea, but unfortunately unplayable. The first point is oriented backwards, as many pointed out here. Pressing Alt is constantly popping/hiding Firefox's main menu, shifting the display up and down.

</comment><comment><USER19> Seems on the loop levels that clicking once or twice on the start position clears the level, or I don't understand what is happening (which is possible...)

</comment><comment><USER20> Wow for some reason I let that tool dominate my subconscious, now I feel like I have skills to do basic lines & shapes! Thank you!

</comment><comment><USER21> This is great. I've always wanted to learn Bezier curve drawing. Now I know how. Thanks!

</comment><comment><USER22> Never used the "Pen Tool" before. Got 28 nodes to spare on first try :)

</comment><comment><USER23> 34 spare nodes. I tried to be true to the shape and not cut any corners.

</comment><comment><USER24> Took me a while to get a hang of things... nice work !!

</comment><comment><USER25> One word. Thank you.

<comment><AUTHOR> Umm... that's two words.

</comment></comment><comment><USER26> This game was awesome. I had 24 points to spare :)

</comment><comment><USER27> If it is a closed figure ... Just double click :)

</comment><comment><USER28> very helpful, finally an excuse to start using my copy of Sketch ;)</comment>


SVG can do that? - <AUTHOR> http://slides.com/sdrasner/svg-can-do-that#/ <comment><USER2> One of funnest projects I worked on at Corel was called "Smart Graphics Studio" (I'm guessing most of the people who worked on it also read HN, so "Hi!"). It was an absolutely _stupid_ idea: Some insane PGM read that XSLT could transform any XML into any other XML. Then they read that SVG was XML. They put 2 and 2 together and got a billion: You could draw a picture in SVG and then modify it intelligently (through XSLT) using some XML data set.

Of course the opposite is actually a brilliant idea (at least at a time when XML was still popular): Take an XML dataset and visualise it in SVG using XSLT transformations (well... yeah... doing it all in XSLT is still insane, but you get the idea).

Anyway, we built a very high performance SVG viewer (for the time, anyway) from scratch. We built an SVG/Javascript widget library. We built an incredibly impressive data manipulation library in XSLT (ok... yeah... insane).

Fun times. And all nearly 20 years ago. It really was ahead of its time. Of course the end finally had to come. The PGMs sold this thing to a certain aviation company with the promise that it would automatically build circuit diagrams from their XML chipset database (because.... XSLT!)

When Vector took over Corel, they very rightly dropped our division like a hot potato (we had something like 3 PGMs per developer). It was quite unfortunate because the developers and QA people I worked with there were some of the best I've every had the pleasure of working with. I've always waited for something to come of SVG and really wish we had been able to release something that wasn't crazy so that people could see what the potential was.

Edit: In my old age I'm losing track of time. It seems that Vector acquired Corel in 2003, so that's only 15 years ago :-)

<comment><USER3> It's such a shame that XSLT has such a poor image - v1.0 was troublesome for sure, but the modern language is remarkably flexible, expressive and elegant, as long as you leave your procedural baggage at the door.

It's not without its wobbly bits, but show me a language that isn't.

<comment><USER4> SOAP, RDF and the semantic web clique, and other monstruosities of the 2000s gave XML a bad name but XSLT is nice. Indeed it would have been a nicer solution than responsive css to tackle the challenges of mobile devices.

<comment><USER5> Amen. And while we're at it, let's throw some of the credit to XPath. Wouldn't you like concise, declarative traversal for your data structures? (Yeah, I'm sure somebody's already built it.)

I don't think I agree about responsive css, but that's another discussion.

<comment><USER6> I experiment with using XPath selectors to apply styling :D Can reach many things CSS selectors arent designed to reach!

</comment></comment></comment></comment></comment><comment><USER7> This showcases what's wrong with SVG: It does way too much!

To be useful as a vector image format, there should be strict rules (and less cruft). Why is there no libsvg like libjpeg or libpng? Why have interaction as part of an image format?

SVG lives in an uncanny valley between jpeg and flash/js.

I think there is still a big need for a real vector interchange and display format. Right now people pick a "good" subset of SVG. Or even fallback to fonts.

My dream vector format:

\- Pixel perfect across implementations at 50%,100%,200% renderings. At least grid aligned lines.

\- Lossless roundtrip across apps. Start in Illustrator, edit parts in Inkscape, other parts in Animate, untouched things stay exactly the same.

\- Standard zero dependency C reference implementation: Stream in, bitmap out.

<comment><USER8> > It does way too much!

And even so, it still has no hairline. All line widths are finite and change when zooming.

<comment><USER9> It does, well, if following SVG 1.2 Tiny it does, at least. As far as I know it's implemented in Opera, FF, Chrome and Safari. Not sure about IE.

It's implemented as vector-effect: _vector-effect= "non-scaling-stroke"_

There's an example here [https://gist.github.com/lightjs/5372867](https://gist.github.com/lightjs/5372867)

</comment></comment></comment><comment><USER10> It's always been a curiosity of mine why SVG didn't get more attention from browsers through the years to solve the performance issues. It's open source, cross platform, "dynamic" in a sense AKA no compiling needed, light weight, supports shapes and text, offers immediate responsiveness, etc. Why the lack of love while we pour ever increasing energy into mangling HTML and CSS and every six months a new JS framework/module/whatever to try to make it work?

<comment><USER11> >>offers immediate responsiveness

does it? Any examples of responsive grid system on SVG? What would be interesting.

<comment><USER12> I think GP was referring to the fact that you don't need to generate SVG assets at multiple sizes for size/picture clarity balance, as you do with popular raster formats.

<comment><USER11> But GP was asking : "Why the lack of love while we pour ever increasing energy into mangling HTML and CSS"

SVG can't be, shouldn't be and never will be the replacement for HTML/CSS/JS.

<comment><USER13> But GP's point is the opposite, that HTML/CSS/JS is being used too often for tasks that could be much more simply solved by SVG. I can think of a couple just in my current project.

<comment><USER11> Cool, could you please explain what are they? To me, personally, SVG is the last resort.

<comment><USER13> In brief, our product includes a web-based process flow component, typical nodes-and-edges kind of thing. Much better done with SVG IMHO, with first- class support for box & line modelling and styling. But the powers-that-be decreed we'd do it all in HTML & CSS.

<comment><USER11> nodes-and-edges thing is the classic problem that is perfectly solved by SVG. Other than that it's quite useless though IMHO.

<comment><USER13> Well, I'll happily agree that SVG is a perfect fit for data-driven graphics, but that represents are reasonably large set of solutions, so I'd not say "useless" at all.

</comment></comment></comment></comment></comment></comment></comment></comment></comment><comment><USER14> SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time.

Shameless plug, one of my first experiments with SVG+react (+cljs): [https://polymeris.github.io/carlos/](https://polymeris.github.io/carlos/) Done in one day, without knowing the tech.

<comment><USER15> When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony.

[http://celtic-knotwork.online](http://celtic-knotwork.online)

<comment><USER16> Pardon my ignorance, but aren't these patterns just composed of certain tiles in rows and columns? This is something you can do equally well with raster graphics, so what's the gain of using SVG here?

<comment><USER15> I tried that on an earlier version, but there's complications ;)

The "double corded" style paints one side of a cord red and the other blue. The problem comes when the pattern changes what side is which. You can play around with it to see - put in some breakpoints and you'll see the "sides" switch on some cells. This can't be done with tiles.

The tile manipulation is actually no simpler than drawing SVG, because the hard bit is calculating the entry and exit points for each tertiary cell. And SVG produces better results :)

I also plan on doing some more stuff with it someday - like deforming the grid by moving the corners. This is pretty simple with SVG but would be really hard with tiles.

</comment></comment></comment></comment><comment><USER17> Shameless plug:

ImageTracer is a simple raster image tracer and vectorizer that outputs SVG, 100% free, Public Domain.

Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java:

[https://github.com/jankovicsandras/imagetracerjs](https://github.com/jankovicsandras/imagetracerjs)

[https://github.com/jankovicsandras/imagetracerjava](https://github.com/jankovicsandras/imagetracerjava)

[https://github.com/jankovicsandras/imagetracerandroid](https://github.com/jankovicsandras/imagetracerandroid)

<comment><USER18> Wow, this is cool. It looks like an API capable of things that Vector Magic[1] can do, but FOSS. Vector Magic has been excellent for some occasions where you have a rasterized clipart, but need it as a vector.

[1][https://vectormagic.com/](https://vectormagic.com/)

<comment><USER19> Inkscape does have such a feature too. While importing a bitmap image, you can specifically "convert" it to vector graphic. Works fairly well.

<comment><USER18> I love and use Inkscape exclusively for any SVG editing, but this particular feature in Inkscape is woefully under anything I've seen vector magic provides.

<comment><USER20> The trick is to make sure the raster image is as clean as possible. But yeah I agree, this is not its best feature.

</comment></comment></comment></comment></comment><comment><USER21> It's nice that we've got the most valuable part of Flash: a vector rendering engine. I do miss Flash's editor for these types of content, though.

<comment><USER22> I just spent all day trying to manually wrangle SVG in the browser. I'd be happy with a good static SVG editor to be honest.

<comment><USER23> Inkscape is OK, but a little rough. Take a look at Affinity Designer. It is very polished and has a feature set approaching Adobe illustrator at a very reasonable price. It's also well supported by the publisher.

<comment><USER24> I've been using both recently. Affinity Designer has a much, much better interface but I keep finding features and options missing that make it frustrating for coding projects. You can't easily open an SVG file, edit it and quickly save to the same SVG file without going through several clicks and setting options to export ("save" will save in a proprietary format). There isn't a command line interface for exporting either. I can't see a way to edit the SVG XML either (you can do that in Inkscape) which is important when you're wanting to script it later.

For previous projects, I've had workflows where images were extracted from one place, added into existing SVG files and Inkscape was scripted to slice up and export sections into PNG files. I can't see a way to do anything similar with Affinity Designer.

</comment></comment></comment></comment><comment><USER25> SVG has the opposite performance profile of Canvas.

SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements.

However as Canvas dimension increase, it will hit a performance ceiling.

<comment><USER26> In my experience, canvas 2D also has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose.

For example, try drawing hundreds of coloured rectangles per frame. Easy, right? If you're using WebGL, or any sensible graphics API, yes. If you're using canvas, the web-browser will parse and re-parse your colour expression CSS n times per frame. Enjoy your 100% CPU usage.

<comment><USER25> > has a number-of-elements performance ceiling if you're drawing things rather > than using images, which feels like it defeats the purpose.

Well you can generate your imagery programmatically and then render it to canvas as a raster image. Canvas is not purely for implementing a web based drawing app.

<comment><USER27> But you can also embed a raster image in SVG.

<comment><USER25> The context of the discussion is to leverage SVG's DOM based approach to render on screen elements

</comment></comment></comment></comment></comment><comment><USER28> coming soon, full SVG websites featuring:

\- loading bar until website is fully loaded

\- animated buttons that bounce and flash

\- full screen 2 second transitions from page to page

\- all in one page, no urls!

feels like 2010 again : ]

</comment><comment><USER29> While SVG can do a lot, there are certain things that it isn't optimized for. In particular animating lots of shapes simultaneously. The animation of the globe exploding into a bunch of triangles from the slides is a good (bad?) example of this. Also, there can also be inconsistencies is in the rendering of SVGs between browsers.

<comment><USER30> That's not really SVG that's being bad there - it's that browsers haven't optimized for it.

They will if more people use it.

SVG in Chrome can be particularly painful due to their mediocre support of some things (sometimes outright contradicting the spec).

That's a vendor issue tho, nothing intrinsic to the format.

<comment><USER31> Ironically we found that IE had the best SVG performance for quite a while (by now the others have mostly caught up). And then they broke a lot of things behaviour-wise in Edge again for quite some time. Performance was still great, but if your image doesn't look like it should it doesn't help.

<comment><USER30> True, though I've often found you have to be doing some rather obscure or strange things to screw up basic display

Or advanced CSS.

</comment></comment></comment></comment><comment><USER32> I use svg all the time to make tiny web interfaces for embedded systems. When the entire web app has to fit in 350k, you don't have space for gif's or jpg's.

<comment><USER33> If your embedded system only has 350 kB of space for your app how on earth do you fit a browser in there? Or do you only use the 'static' features of SVG?

<comment><USER34> Usually this is done in a 'Bring Your Own Device' scenario, where the user has a standard mobile/tablet that the UI is shown on. Using a webapp served by the embedded device allows a zero-install workflow, and zero-config (assuming network connectivity is taken care of).

<comment><USER33> Ah I see. I was imagining something with its own display, like a meeting room screen.

</comment></comment></comment></comment><comment><USER35> SVG is good as long as it's not abused.

All the kb saving are meaningless with performance issues caused by lots of nodes, gradients, etc.

It's great for responsive icons, but for a full interactive UI with illustrations bitmaps are the better choice IMO unless you _really_ need dynamic scaling.

Just because you can do it doesn't mean you should.

<comment><USER36> Beware of using it for responsive icons. Popular browsers render SVG icons orders of magnitude slower than fonts, with the same vector content and scalability.

I recently had to convert an entire UI from SVG icons to fonts + bitmaps because the performance had gone down the drain, with just a few dozen different icons.

</comment></comment><comment><USER37> It's awesome. last time, I using SVG to import image to pdf files (using TCPDF). The quality is clearly & beautiful. Now, Thank you for your introduction about another things SVG can do on the website.

</comment><comment><USER38> Her talk on the topic at vueconf was pretty good too [https://youtu.be/gJDyhmL9O_E](https://youtu.be/gJDyhmL9O_E)

</comment><comment><USER39> I've used SVG to design custom PCBs using traces as magnetic coils, something that, surprisingly, doesn't have a good industrial software package for. Everything in PCB design software is geared toward routing wires conveniently between components, but if you try to actually use the wires as actual components, it's almost impossible to freely design. And even regular PCB design software feels almost unchanged since the 1980s or 1990s. Incredibly clunky.

Here's a good Hackaday article on converting SVG to PCB file formats: [http://hackaday.com/2016/01/28/beautiful-and-bizarre- boards/](http://hackaday.com/2016/01/28/beautiful-and-bizarre-boards/) PCBModE is one package I tried for a while: [http://pcbmode.com/](http://pcbmode.com/) Boldport uses this toolchain to make beautiful PCBs relying heavily on SVG: [https://www.boldport.com/](https://www.boldport.com/)

I had a hard time with all these packages, however, and ended up just hacking it together by hand with python code and outputting in KiCAD format. I wasn't even able to get KiCAD to read/render it properly (too many weird elements), but since OSH Park (where I got my PCBs from) takes KiCAD format directly and gives you a preview, that all worked fine, and when I ordered my PCBs, they arrived in working condition just fine the first time.

[https://oshpark.com/](https://oshpark.com/)

So yeah, SVG can do a lot, including make funky PCBs.

<comment><USER40> Altium can do that sort of thing fairly easily. We use it for boards with waveguide filters, couplers, etc. (usually the geometry is designed and simulated in a field solver first, and then imported in, but you can do it straight in the software if you want).

The easiest way is to design the coil as a part, but you can use traces and arcs and stuff like normal in that.

<comment><USER39> That works well if your coil component is small and is just acting as a microwave RF component or something, but in my case I had a pretty complicated coil design (although simple conceptually) that spanned the entire PCB and interwove with other coils and wasn't arranged in a simple rectilinear manner. My original plan was to design the whole thing in Solidworks, which I did (and it was pretty easy to do), but there was simply no easy way to convert that into an actual PCB for manufacture (there is a Circuitworks module, but it's designed only for importing circuits to design around in Solidworks, not the other direction). Sitting there and manually making arcs and such in the PCB design software was just a non-starter. There are no parametric modeling features to speak of, and it's actually way easier to do what I did.

I think I used OpenSCAD to export to SVG.

</comment></comment></comment><comment><USER41> It has been almost 12 years, and we still don't have working word wrap with svg

<comment><USER42> You can embed HTML within SVG via SVG's foreignObject, and use HTML/CSS text flow layout within embedded HTML. But it works only on rectangular shapes, and not on IE.

<comment><USER43> You can also just absolutely position an HTML element on top of the SVG.

</comment></comment></comment><comment><USER44> I wonder if we should encourage print designers to switch to svg (that is, if they don't already... it's not a world I know much).

I have in mind all those concerts or various events' png/jpeg files that are dropped on the web here and there. If they were svg files, it would be made easier for search engines to index their content.

Even without that, svg totally rocks. About a decade ago, I played with SVGWeb and made a showcase carousel presenting screenshots of projets with automated reflection on them (like it was common back then, a reverse image on bottom of actual image with a gradient from transparency to white to make an effect like if the ground was a mirror). I just had to upload a plain screenshot and everything was automated, I was mind blown, and surprised we seemed to go the canvas way instead (not so much, in retrospect).

Nowadays, I often make my icons as svg react components. It makes it so much easier to change their color or saturation on hover, this is very cool. We probably still have a long way to go to exploit all of svg potential.

<comment><USER45> If they're designing in Illustrator as most are they're usually working with vectors and have to use export to create their PNG/JPEG; SVG is right there as an export option. In my experience there's heavy inertia in the world of print though.

</comment></comment><comment><USER46> The SVGO-GUI has not been updated since 2015. I added out-of-the-box SVG optimization to my Optimage [1]. Fun fact: Node.js binary can be _just_ 3MB compressed. ImageOptim [2] handles SVGs as well if Node.js is installed.

The transparent JPEG-in-SVG files can also be made with nothing but ImageMagick and Bash [3].

[1] [http://getoptimage.com](http://getoptimage.com)

[2] [https://imageoptim.com/mac](https://imageoptim.com/mac)

[3] [https://github.com/vmdanilov/svgize](https://github.com/vmdanilov/svgize)

</comment><comment><USER47> I'm trying to rewrite the good plugins of svgo into [https://github.com/caub/svgz](https://github.com/caub/svgz), something more flexible based on jsdom

</comment><comment><USER48> Have not seen anyone mention it, but does it make sense to do Web Game development using SVG's with JavaScript? Has anyone tried this? Is it as fun as these slides make it seem or are there downsides to that approach?

<comment><USER45> I think you'd want to combine it with canvas to replicate Flash's cacheAsBitmap. As others have mentioned here though the decisions on where to use it (raster vs vector) and where not to use it need to be made carefully as your map of bits uses memory [(width x height x 3 or 4 for RGB/RGBA) bytes - soon adds up but maybe browser renderers optimise this somehow] in exchange for what you save on drawing calculations.

cacheAsBitmap brought a major performance boost to Flash when used wisely though. Maybe some libraries can handle this for you nowadays?

</comment></comment><comment><USER49> By "SVG can do that?", it appears they actually just meant "JavaScript can do that?", as all the cool animations and stuff are all just JS-driven.

Unless I misread it?

<comment><USER50> This. Had a lengthy discussion exactly on this point in context of this very article couple of days back in office :)

Totally agree with you!

</comment></comment><comment><USER51> We attempted to do a complex animation in SVG and the primary complaint was that it killed the browser in terms of CPU and memory usage. Are we doing something wrong?

<comment><USER52> I had the same experience using SVG to render music notation. We hit a performance issue - high CPU usage, skips/stutters - with several hundred to a thousand nodes, some animated. Switching to canvas increased that limit, in that we were able to keep smooth rendering with larger documents.

<comment><USER34> Did you render a whole document as one SVG, or do tricks like one SVG per line or sheet?

<comment><USER52> The whole score was rendered as one SVG element, until we hit the performance limit. Now we're rendering each row of measures (a stack of staves) as a canvas element, and it performs much better for our purposes.

</comment></comment></comment></comment><comment><USER53> I pray for screen readers.

<comment><USER54> What image format do you recommend that would work better on a screen reader?

<comment><USER55> The article is proposing SVG for rendering responsive text for articles. So the screen reader comment is valid.

<comment><USER56> It is not, <text> is picked up by screen-readers without any issue.

<comment><USER57> In what order?

Have you ever looked at a text dump of a PDF?

Assuming it's a text-PDF in the first place, there's no guarantee that it's in _any_ sensible order.

Of course, most Web writing is pastiche anyway.

</comment></comment></comment></comment></comment><comment><USER58> This talk was one of the highlights of Develop Denver 2017 for me. Glad to see it getting some more traction.

<comment><USER59> Thanks for the conference name. Were the talks videoed? If so, did they say when they'll be uploaded?

</comment></comment><comment><USER60> Very cool. SVGs can be very sensible choice for certain applications that canvas doesn't cover well.

</comment><comment><USER61> Ok great now that we know SVG is awesome, where do we begin learning how to use it like a pro?

<comment><USER62> She also wrote a book: [http://shop.oreilly.com/product/0636920045335.do](http://shop.oreilly.com/product/0636920045335.do)

</comment></comment><comment><USER63> This is a very inspirational presentation. I'm blown away. SVG can be the solution our next wave of interaction now that Flash has almost completely died.

</comment><comment><USER64> So, how crazy to use SVG for a cross-platform UI?

<comment><USER43> I did that. It works ok.

Some gotchas:

1\. SVG has all these seemingly useful features that have non-obvious gotchas. Example: you can give rendering hints for svg or any child shape nodes, like "crispEdges" so that straight lines are aligned to the pixel grid (plus it might turn off anti-aliasing, but that's another matter). Great-- I've got boxes with 1-pixel borders that should always be pixel aligned to look sharp, so I choose that.

Then I notice that when I drag one of my "crispEdges" boxes to the right with the mouse, I get this weird flickering due to the "crisping" algorithm aliasing the sides of the box to the pixel grid in a way that changes the width of the visible box. (I.e., if I move the box 1 pixel to the right, the left side might align to the grid that is greater than xpos, while the right side might choose the grid that is floor(xpos).) As a result it looks like the box is "crawling" across the screen, or up the screen if you drag it vertically.

So I went back to manually aligning those boxes to the pixel grid to guarantee consistent box size.

2\. The "paint server" concept is an over-engineered mess. It's incompatible with CSS gradient spec which makes it a pain to figure out how to make CSS and future of SVG play well. Sane frameworks like Snap.svg abstract away that and anything else you'd likely find inside <defs> tags. (Also, someone here on HN mentioned that <defs> junk depends on the id to reference content, which easily creates nameclashes if you use multiple inline svgs.)

3\. There's some churn in the DOM interface for SVG-related utils. For example, at some point I wanted to get access to normalized path instructions for a given SVG path. But Chrome recently deprecated the old way of doing that and is in the midst of replacing it with a new geometry interface.

4\. The syntax for specifying an arc inside an SVG path is weird. Like, so weird that code in an SVG library I read obviously just went straight through the instructions listed in F.6.4/F.6.5 of the SVG spec (using the exact same variable names) to simply hand off the values to Cairo, and the library _still_ had a bug somewhere. That one isn't really a big deal-- I'm just fascinated by how the spec writers favored endpoint parameterization consistency over the user's ability to draw a pie chart without having to ask questions on StackOverflow.

5\. The complexity of the spec and its interaction with the other HTML5 specs is obviously a pain point for browser devs. Sometimes I use devTools to make a quick-and-dirty realtime codepen inside about:blank which just parses a contentEditable div and injects it as innerHTML of an SVG. It's nice because you can prototype things with patterns and gradients quite easily this way. Except you can't reference gradients/patterns/etc. in Firefox this way because of god-knows-what-conflict between about:blank's baseURL and SVG's funcIRI. (Although you can base64-encode the data and inject it as the src of an img under Firefox.)

You see things like that all over. For example, the burgeoning web animations API looks really nice and works with SVG. But it works on CSS properties and not SVG attributes.

<comment><USER64> Exist a SVG rendered that is not web browser? ie: truly independent? maybe portable?

</comment></comment></comment><comment><USER65> Welp, time to learn SVG! So much more functionality than CSS. Gorgeous examples. I wonder if it's much slower to load though?

</comment><comment><USER66> Wow, svg sits there and does mostly nothing on my phone. Just like Flash! Can't pinch to zoom to read the text that was too small, just like Flash! Half the supposedly neat interactive gewgaws like "turn this gear" didn't react to any presses or gestures at all. Just like Flash!

<comment><USER67> Are you clicking on the animated gif of the demo or did you follow the link to the demo?

</comment></comment><comment><USER68> Cool, but they're still not really supported by Safari

</comment><comment><USER69> Shame Flexbox can't be used with SVG

</comment><comment><USER70> Flash has the "advantage" that it's used almost exclusively for advertisments. Mostly pretentious people (artists, photographers etc) have websites made of flash. So, by turning off Flash, you block the bulk of annoying ads. And you lose little by disabling Flash.

Would the same be true for SVG ? Would it be used mostly for ads, too ? Or even, can you selectively block only the SVG used for advertisments ?

<comment><USER57> Unfortunately, that seems to be one of the bigger hazards for SVG.

It really _is_ an amazing graphical tool. David Dailey has been posting some amazing stuff on Ello: [https://ello.co/ddailey](https://ello.co/ddailey)

(Which also uses SVG for most of its icons and buttons.)

But ... the potential for advertising/marketing abuse (or just sheer bad design / misuse) is so high. Unless there's a way to quash it....

Sigh. This is why we can't have nice things.</comment></comment>