Mike Cousins has been working hard on pcb-stackup, the Gerber to board-view renderer that we use. I recently pulled in the latest changes which gives us an improved rendering of the Bus Pirate (pictured) and many other enhancements.

The upgrade was a bit daunting at first as the whole API had changed so we had a lot of discussion and worked out a simpler API. I went ahead and worked on a implementation that should be merged pretty soon. Hopefully this will give us some level of stability but still allow free reign to make improvements to the back-end.

Along with some added matching to whats-that-gerber, the Gerber layer type guesser and tweaks to some troublesome Gerbers we now have perfect rendering of all the projects currently on Kitnic!

Just a quick update. I recently added the ability to select quantities for purchasing parts.

I chose to provide a multiplier and an additional field for added percentage. This way you can easily get the right amount of components if you want to build multiples and also account for wastage. The numbers are always rounded up so the default, which is currently at "x 1 + 10%" will likely give you at least two of all the components required. Is this a sensible default or should it just be "x 1"?

This will be the first proper live log entry as all the previous ones where really playing catch-up.

The site is currently in a minimal viable form. It's far from perfect but I am trying to resist the urge to work on it and instead focus on trying to get the word out. The site is only as good as the users and the content they post so the goal now is to try and help people get their open source project registered. There are over 100 forks of OSHW projects on our GitHub and counting and we would like to get these to a point where they can be easily purchased and built and then send pull-requests back to the creators and have them registered.

We'd really like to get to the point where Kitnic is the place you search for an open source hardware solution to a problem you are facing: "I need an ideal diode, let's check Kitnic" or "I need a 6 stepper motor driver with a USB HID interface, let's check Kitnic".

I have been posting on the Eeevblog forum, Reddit, Hacker News, and set up a new Twitter account and Facebook page for the site and it's been working!

We got a lot of traffic from the posts and only good reactions in comments which is very reassuring. So far we have had only had one new registered project though and that was here through Hackaday (Jarrett registered their USBvil project, thanks Jarrett!).

Clearly we need to improve on getting people to put in the work to make their project easily re-buildable. We have some plans that we will be announcing in the coming weeks. Keep up with how we are tackling this by following this project here on Hackaday or through other social media.

I want to use this project log to explain a bit more about the infrastructure behind the Kitnic site and how it is deployed and hosted.

Kitnic.it is a proof of concept site. I want to prove that there is a need for it, that it will foster collaboration and that people will use it. For this I wanted to build the minimum viable site. I wanted to not spend very much on hosting it and I wanted it to be low maintenance in case it gets to the point of being useful but not worth investing a whole lot of time in to.

When sketching out the minimum functionality of the site I realized that I could leverage existing services to host the site, deploy improvements and even allow people to add their projects without investing any money into hosting infrastructure.

The site is built statically which means there is no server-side process reacting to user requests. A static site can be hosted on GitHub for free using what they call GitHub Pages. To make use of this you create a branch on your GitHub repo called "gh-pages" and push any static files you would like hosted to it. GitHub has much more in-depth instructions on how to do this.

Making the build make sense

Our site is build using Javascript and React. I tried a whole range of Javascript build systems and task runners to try and build the site but coming from the embedded systems of C, C++ and Makefiles none of them seemed to make a whole lot of sense to me. They all seemed to miss the essence of Make, where you describe inputs and outputs in terms of the file-system and it takes care of tracking dependencies and hence only re-builds things that need to be re-built.

On the other hand my Makefiles do tend to get a bit out of hand and the syntax isn't the nicest. I also didn't want to scare of potential Javascript hipster contributers by saying "Hey we use this build system from the 80s to build the site".

I settled on a modern re-thinking of Make that, in my opinion gets it right : Ninja. Ninja focuses on the bare minimum of make-like syntax and is intended to be generated from a script. We use Coffeescript as a scripting language and the npm library ninja-build-gen to generate a build.ninja which is then parsed by Ninja to run all our build tasks. This does an excellent job of tracking what needs to be re-built when you change a file.

The registry

Users can register their project with Kitnic by simply appending their git URL to our boards.txt file. This way we can leverage GitHub's collaboration tools to do manage contributions. When the file is edited GitHub creates a fork of the project and the user can then send a pull-request to our repository where we have an opportunity to discuss any issues with it and make sure they are happy with the resulting page.

We use a free service called Travis CI to automatically build anything that is pushed to our GitHub repo:

1. Changes pushed to the master branch are deployed to kitnic.it if the build succeeds
2. Other branches are deployed to *.preview.kitnic.it, so for instance the "issue-31" branch is previewed at http://issue-31.preview.kitnic.it/
3. Pull-requests are built but not deployed right away. Travis does not allow this as secret deployment login information could be leaked by anyone making a pull-request. If the build succeeds and there are no issues with it a Kitnic member creates a branch for it so it can be previewed.

The build scripts will automatically get the latest version of the git repository and put it into the registry.json file. This file is used to checkout a specific version of a project and that is used that to make the page.

We will periodically update the registry with the latest versions and make sure the build is still successful (and fall back to the last version if not). In the future we would like to be able to provide multiple versions of the same project and allow for tagging a release, so you can tell people this is v1.0 of the project and this is v2.0 and let them download the files for each.

Accessibility

Hello, I'm Adrian, a web developer helping on the Kitnic project. We have been working hard to ensure the platform is accessible, some of the aspects I want to talk about are:

• Responsive design for mobile clients
  • Ensuring the platform caters to smart phones and tablets
• Accessible content even with JavaScript disabled
  • This is useful for services like the Internet Archive, Google Translate and more
• Simple glance-able information
  • Helping users make informed decisions without feeling swamped

Responsive design for mobile clients

We still have some work to do here, but as a user of the Kitnic platform you would currently be treated to an experience where elements are correctly laid out to make better use of the available space, elements can even change position within the layout, to achieve this we have been using flexbox and media query technologies.

One of the challenges we have been facing is when you look at the site on a mobile device everything looks tiny and in-accessible so we have been creating media queries that detect mobile and then increase the size of things to look comfortable for users.

The challenges have been mostly in testing mobile vs non mobile since pixel ratio needs to change before we as developers can see the differences to help tackle this we have been using https://saucelabs.com/features and Google Chrome's Developer Tools.

In the future we can force an initial scale of 1 by width and then scale the content according to the viewport https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en This would allow us to stop making a mobile version of the site and non mobile, it can be one continuous experience.

Accessible content even with JavaScript disabled

Kitnic is powered by JavaScript, JavaScript is a technology found in web browsers which allows programmatic access to a web page, however not every web client will execute JavaScript, the challenge becomes how do you render a web site built in JavaScript in a context where JavaScript is not accessible?

Kitnic uses a compilation step, using an engine capable of understanding JavaScript to render the client code server side down to a template which can be sent to the client, this is executed a head of time and given to the server side ready for client requests.

The Kitnic platform works with other services by default because of this process, known as server side rendering (or SSR), some of which include:

• Non JavaScript enabled browsers, like Lynx
• The internet archive
• Google Translate
• Search Engine Crawlers
• Screen Readers
• Opera Mini

While not all these clients will receive the fully intended functionality of the site they will definitely be able to access the content and in some cases achieve basic functionality, rendering ahead of time also gives allows clients to render their pages immediately.

The challenges I personally faced here are occasionally forgetting the code that I write operates in both the server and client contexts, some things such as timers are impossible to achieve server side and can create problems on a remote build

Another challenge can be development performance, particularly when trying to build client and server at the same time, to save time we have switched to client side building most of the time, but that means needing to be mindful of when the server build may need to be updated manually

Simple glance-able information

For us at Kitnic this is something we revised a lot, how do you display a large table and allow mobile users to use and compare it?

We tried:

• Vertical table information for mobile
  • This broke the comparison aspect and was not recognisable as tabular data
• Squashing the table as hard as possible with ellipsis and then allowing users to click to expand
  • Data was not accessible when it was so squished and the solution was JavaScript dependant

After several revisions we settled on normal scroll bars but with the added feature that the user would get a second scrollbar this telegraphs to our users to let them know they can scroll the table as soon as it comes into their view-port. so we have one on the bottom (as is default) and a custom one at the top.

This solution was a lot simpler and effective in the end, in the technical aspect we were lucky to find a react component already had the functionality we were looking for, it just needed small adjustments to work in our set-up because it made certain assumptions about the page, for example it would not work underneath a flex element.

Resources

If you would like to learn more about designing an accessible website take a look at these resources:

1. http://webaim.org/intro/#principles
2. https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

Over the years of developing the 1-click BOM (bill of materials) extension and starting out with the Kitnic.it site I have spent a lot of time thinking about the ideal format for the BOM of a project.

BOMs can have different purposes and our focus here is prototype and hobby projects. While it's important to think about what is needed on the BOM when something goes to manufacture (like Bunnie Huang does in this excellent blog post) we also want to keep things as simple and flexible as possible as we are still amending and adding to our BOM. We want a strong informative core of our BOM that can be used to expand upon later.

Ours is an electronics parts BOM, so no plastics or PCBs will be included. The bare minimum BOM needs just 3 columns really:

The references and quantity fields tie your parts to the project. The references are the references used in the schematic and can tell you at any point what this parts purpose is in your project. Quantity could technically be derived from the reference but let's keep things simple (sometimes you could have multiple references for a single package like a dual transistor for instance could be labelled Q1 and Q2).

The description field could tell you everything else but sometimes it makes more sense just to name the manufacturer part number as this will tell you a lot more and much more precisely.

The 1-click BOM extension can help you expand upon a minimal BOM like above turning it into a more complete BOM.

If you run the above through 1-click BOM's auto-complete feature, it will currently search Octopart and Findchips for you and give you something like below.

Pretty neat, huh? Now this won't always work as well as that, and all these parts do need to be checked over but we have a lot of plans to help improve the results of this feature and take the chore out of making a "complete" BOM.

The "complete" BOM not only allows others to buy parts from their preferred retailers but will also help you in the future if a part you need is out of stock on at your retailer. Filling in the manufacturer and manufacturer part number (MPN) fields makes this BOM future proof and clearly defines the component you want to use without tying it to any retailer stock number.

If a BOM is complete and has parts for all retailers the project's Kitnic page will be adorned with some lovely green buttons like below.

If not all parts are specified for a retailer the button will use a warning red color or, if no parts are specified, it will even disable itself greying itself out.

On hover a red button will show you tooltip telling you how many parts are missing if you go for this retailer. You can check the BOM below these buttons on the page to see exactly which part, the missing fields will are also marked red.

There is a lot I still want to cover regarding BOMs and the conventions people use, how we decided on tabs vs comma (surely, the flame-war fodder of the data science world) and how to better incorporate generic parts and multiple sources into a BOM format. and I could talk about BOMs for days but I will stop with this entry here. To be continued for sure.

If you have strong opinions with sound reasons on BOM conventions please let us know. We are happy to discuss issues and develop and adapt our formats accordingly. There is already some lively discussion on a GitHub issue on this very matter.

This project really started over a year ago, scratching my own itch. I work as an electronic design engineer and purchasing the parts for my designs seemed to be one of the most tedious tasks. I thought to myself: "That should be fairly easy to automate. These are all web-requests after all."

Some retailers do have their quick-paste forms and sharing BOM features but they all use different formats and conventions. Moreover, sometimes you have some parts you can only get from certain places and others only from others, all for the same project.

I wanted to be able to store a single file in my project directory with which I can easily purchase all the necessary parts. A file I could also send my friend or colleague or someone across the world and they could purchase the same parts, no matter what. I wanted a 1-click BOM.

I decided I would make a browser extension to drive the sites, how hard could it be? Well when dealing with ASP retailer sites the question should really be: How ugly can it get?

curl 'http://uk.mouser.com/ProductDetail/Cree-Inc/CGHV96100F2/?Cree-Inc%2fCGHV96100F2%2f&qs=sGAEpiMZZMvplms98TlKY6zbNRoARcUg8gg333Al67kStE%252bN8N0%2fKg%3d%3d'-H 'Cookie: g11n=Up9NRXFGLVs=;ME_Main=&ME_DSN=kJ0slznDUsNJMyNjQRiw8Q==&ME_DSU=YyaQEeoCnLc=;ASP.NET_SessionId=zxtlgy45oobekaaphyv5n0z1;_op_aixPageId=a2_60d31424-8123-4e84-b3f9-a18a6f8bfc3d-3648-87767;CARTCOOKIEUUID=c46df9ef-39bb-4ada-bfcd-2452ed49bc8a; _gat=1;__ar_v4=5UM3NRP3LFFG5JUPQ2VEXA%3A20150203%3A12%7CVPQ73SPSLBEPXM7QJ2MJRL%3A20150203%3A12%7CA463QQQT6VDSDG1=12; SDG2=40; SDG3=0; preferences=ps=gb&pl=en-GB&pc_gb=GBP;_ga=GA1.2.91020740.1409853093;__utma=261309969.91020740.1409853093.1417720020.1422769855.8;__utmb=261309969.15.10.1422769855; __utmc=261309969;__utmz=261309969.1409853093.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none);__utmv=261309969.|14=MYM=1638924=1^16=UV=5423887=1^18=Sub=1795089=1^19=PCAT=5367B8=1;__atuvc=1%7C5; __atuvs=54cdc5eabb3480fd000; __utmli=ctl00_ContentMain_btnBuy2'-H 'Origin: http://uk.mouser.com' -H 'Accept-Encoding: gzip, deflate' -H'Accept-Language: en-GB,en-US;q=0.8,en;q=0.6' -H 'User-Agent: Mozilla/5.0 (X11;Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/39.0.2171.65Chrome/39.0.2171.65 Safari/537.36' -H 'Content-Type:application/x-www-form-urlencoded' -H 'Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H'Cache-Control: max-age=0' -H 'Referer:http://uk.mouser.com/ProductDetail/Cree-Inc/CGHV96100F2/?qs=sGAEpiMZZMvplms98TlKY6zbNRoARcUg8gg333Al6-H 'Connection: keep-alive' --data'__EVENTTARGET=&__EVENTARGUMENT=&__VIEWSTATE=skTHKc%2BTu8q1ptksBWazoqW1jH%2F9s30wKeqLaG6vPBO92Ae4BJFGniiNMJOdrxMC0BKNq0OgMPn9jzXyEnh%2BhZElrKrDDEwTj6wDz%2BB5Mc8596z13lM4bwTtSkhsckjY87ZWffCEhuwhyb5YCmSMivmI453lwnERDa8eObcoNnPPaM0TNaN0oX6eY%2FQ0eiyT%2FJsDR6vWe4u1sV0sPkLebGRRWfI4chXx3bL9X0CXPlXzEjYBjSMVFvahuPicHdxN4QG31f8teVRA4a6JqwXeveNQi8J4yp2Euq3lgQnEjPAWpjeUEq5tXJbII8qczxQBrYBFu7ebLbylPNsPfrOeY6REXhUiEV1...

That's how ugly. Those ellipses (...) stand for 5000 characters of ASP __VIEWSTATE parameter omitted. What ungodly process would result in something like this being sent from my browser? Oh it's just the Mouser site. But none of the other sites are much better in that regard.

Much of my time was spent in the Chrome and Firefox debugging tools figuring out what convoluted requests I needed to construct to make the sites do what I wanted.

My most advanced weapon was the Tamper Data extension which allows you to intercept all the requests your browser sends, modify any of their data and then send them on their way again. This way I could find out, yes I need all those 5000 characters in the ASP __VIEWSTATE parameter or the requests would fail.

These demons aside I managed to successfully figure out how to add items to Mouser, Digikey, Farnell, Newark and RS Components. I thought that it's a start at least. If you use Chrome or Firefox, you can download and install the latest version of these efforts here.

If you are interested more in the development of the extension you should check out this short presentation from FOSDEM and of course peruse the source-code at your leisure.