About this project
100% Funded, Stretch goal time!
It's exciting to see such enthusiastic support for this project, we reached 100% in the first 24 hours!
✔ Stretch Goal 150% - $4500
Side-by-side editing UI: The blocks UI is great for presenting your example, but when you are editing you might want to see your code next to your output. This will include a bit of extra design work to not take away from the core experience while providing an intuitive editing experience.
✔ Stretch Goal 200% - $6000
Thumbnail editing function: Taking a screenshot, resizing it (remembering the dimensions it should be) and committing it to your gist's repo is quite a bit of friction for something that every block should have. We can use the HTML5 file API as well as canvas to make this an interactive in-browser experience!
✔ Final Stretch Goal - $10,000
Writer's Bl.ock: This project has blown past my expectations in terms of money, support and ideas. There are a number of really interesting things (example searching, drag-and-drop data loading, social features, commenting and more) that can be built on top of this platform. Reaching this goal will buy me the time to clearly document and outline the features and learnings of this project for others to pick up. I'll also host a hackathon in San Francisco where we can work on them together!
it currently takes 10 steps to create a bl.ock:
It doesn't have to be this way!
One of the brilliant things about bl.ocks is that they are actually saved as GitHub gists, which are like mini git repositories that are cheap and easy to create. All we need is to use the GitHub API to allow users to create, fork or modify gists from a web interface. If we make the web interface look very similar to the bl.ocks interface and add a live code editor, everybody will be only one click away from creating or editing a bl.ock!
proposed 1 click to create a bl.ock:
Fortunately I've already built web apps using the GitHub API to save and edit gists for my project Tributary ( you can even see the code ). I also have a long history of using CodeMirror to create live editing environments in Tributary and with friends for projects like @vicapow's recent d3 workshop.
Minimum Viable Product
The goal of this kickstarter is to support the launch of a "Minimum Viable Product" with the most important features that will allow people to create, edit and share bl.ocks with ease.
These features include:
- optionally login with GitHub to create and edit gists
- 1 click to create a new block (anonymous or authenticated)
- edit the index.html file of any block right in the browser
- 1 click to save your edits to a new block
- matching url scheme with bl.ocks.org for easy navigation
The editing of the bl.ocks will initially be limited to the "index.html" file which is the only requirement for a block to work (it is possible to include other files in a bl.ock, which will not be editable in the MVP).
All development will take place in the open in this GitHub repository: https://github.com/enjalot/building-blocks
To get a working and usable version of the app online should not take longer than a month of full time work. When the kickstarter ends the timer starts and I'll be able to put aside any other paid work to focus!
D3.js has become an incredibly popular library with a vibrant community, no doubt in part because of the amazing examples available. Mike Bostock, the creator of d3 has a very well thought out essay which highlights the importance of examples for both personal growth and supporting the community.
5$: High Five
Thanks for believing in this project and chipping in to make it possible!
Keep up with the progress as it happens! Project updates will include code samples and exclusive videos about how it's built.
Have your name and a link to your social media profile of choice listed under the BACKERS section of the About page of the website.
A solid contribution to help build the building blocks. Choose your favorite block (yours or otherwise) and we will feature it in a gallery page that recognizes your contribution.
Includes all lower tier rewards.
$250: DO IT LIVE
If you support the project this much, you must be an interesting person to talk to!
I'll do a 1 hour video session (public or private) to discuss the d3 or data visualization topic of your choice. Some things we could do are code together, philosophize or bemoan SVG performance. It's really up to you though!
Includes all lower tier rewards.
1000$: Patron of the Blocks
At this level you are supporting not just the project but the whole d3.js community. Your contribution will be recognized with the logo or name of your choice on the "About" page of the website as well as in the README of the repository.
This reward includes all the other rewards.
Links from the video
This is a list of the links shown in the video in order of their appearance.
Of course I have to thank Mike Bostock and the rest of the d3 community for making so many awesome examples to learn from.
Risks and challenges
Software time estimates are notoriously optimistic, so it's entirely possible that things take longer than we hope. With that said, I've already written all the code needed for this in other projects, so it's more of a chance to refactor that code into the specific functionality we want to see here.
One potential hurdle will be hosting and maintenance. I've been maintaining http://tributary.io personally for a couple years, and it gets a steady average of 300 users per day which is not much by internet standards. If this project proves more useful (which I expect) we may face some scaling issues. Luckily by using gists as the database we offload the biggest scaling issue to GitHub. There are very standard solutions including caching and load balancing to help scale the minimal amount of work the servers will be doing.
Since this is also 100% open source, I look forward to community support and the generous help from friends who are both engineers and designers.Learn about accountability on Kickstarter
Support this project
- (30 days)