Several smaller changes and also have been doing some prep work to hit the requirements for submission to the Microsoft app store on this version.
Read More »Category: Dev
I’ve been making a living as a software/web applications developer for quite a few years now, hopefully I’ve picked up a thing or two.
I’m primarily a front end developer working with the modern web and JavaScript, and make mainly healthcare and financial applications with tools such as Angular (latest), TypeScript, and RxJS – with a particular passion for user interface design and user experience considerations.
I was also forced to grow a beard so as not to feel like the odd one out at conferences and meetups.
DigiChain v1.4.0
v1.4.0 has been pushed to main 
And is the largest update so far with all the OP-1 Field and Octatrack goodies live. I’m working on some short videos to cover specific use-cases as there’s a lot that can be done now beyond just creating Digitakt sample chains.
Read More »DigiChain v1.3.0
DigiChain is a web app made to make the creation of sample chains as easy as possible for use on the Digitakt (and any other sampler that can slice up samples).
https://digichain.brianbar.net/

While originally created as a tool to help make evenly spaced sample chains to use on the Elektron Digitakt’s slice grid machine introduced in the 1.5 firmware update, DigiChain has grown to incorporate other features, many of which were suggested by the good folks over on the Elektronauts forum.
Features
- Import .wav/.syx audio files and converts them to the chosen audio context (e.g. 48k/16bit, 44.1k/24bit etc) – if the chosen context is mono, stereo samples can be processed as the Left, Right, or a Sum of both channels to mono when exporting, the playback preview of the sample will reflect this choice. In a stereo context, mono files stay as mono (unless the sample has been resampled in this context). The audio context can be changed, but sample rate changes require the list to be discarded.
- Batch conversion – importing multiple files, or dropping folders containing files into the list and using the Download All button will output a zip file with the dropped folder structure reflected, but the contained samples will be output in the chosen audio context.
- Master pitch selection allows all exports to be pitched up 1, 2, or 3 octaves – so save precious sample memory space on limited storage devices such as the Digitakt/Model:Samples, or simply to get longer sample lengths loaded into memory by pitching them back down on the device.
- Using the Slice Grid option allows you to create sample chains of the files selected in the list, download with the joined button to get all the files joined together into file(s), each with up to the slice grid amounts number of samples in each file.
- The joined spaced button will pad each sample in the chain to the length of the longest per group of files being joined, so if you choose 16 on the slice grid, you will get 16 per file, with each file padded to that length.
- Holding the Shift key while clicking the joined buttons will add the chain files to the top of the samples list instead of outputting inside a zip file.
- Use the per sample edit panel; to make basic edits to the samples in the list, normalize, trim silence from the end, reverse, half the playback speed, or double the playback speed – all sample edit operations are destructive! If you want to keep the original audio intact, create a duplicate with the sample duplicate icon.
- Use the per sample slice tool to split files into slices, use the even grid options or the transient detection.
- If you drop a .ot file in along with a sample, the slice grid will read this to slice up files prepared in the Octatrack AED, so you quickly convert Octatrack sample chains for use on the Digitakt.
- Split loops into slices, then sort by slice# to quickly create “megabreak” sample chains.
- Use the 120 slices grid option to create chains perfect for the Model:Samples or Analog Rytm.
- Get off-grid by Ctrl+Clicking on the slice grid values to set your own numbers.
- Shift+G to enter the grid view – good for those who don’t like tables (same key combo to toggle back to the list).
- Drop URL links to .wav files to be fetched directly to the list (only works with sites that are open to Cross Origin Resource sharing – a great example is https://citizen-dj.labs.loc.gov/ ).
- Works offline and can be installed as a desktop/mobile app on most operating systems from the browser (install as app / add to home screen).
- All processing is done on your device, and no data is sent anywhere – open source on GitHub under the GPLv3 license.
Python Quick HTTP Server
Re-enable Windows task manager
To fix the no task manager issue go to start then run (windows XP) or in the search line for vista….or just use the shortcut windows key + R. Copy and paste the following into the run command then hit enter: REG add HKCU\Software\Microsoft\Windows\CurrentVersion\Policies\System /v DisableTaskMgr /t REG_DWORD /d 0 /f press crtl+shift+esc……task manager should […]
React / Redux Client
Create new package.json ::: npm init -y
Structure:
- <app_name>
-
- dist
-
- index.html
- {bundle.js} //generated by webpack
- src
-
- index.js //app entry point
Webpack:
npm install –save-dev webpack webpack-dev-server
npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
React:
npm install –save react react-dom
npm install –save-dev react-hot-loader
npm install –save-dev react-addons-test-utils
CSS:
npm install –save classnames
npm install –save-dev css-loader style-loader autoprefixer-loader
Testing:
npm install –save-dev mocha chai
npm install –save-dev jsdom
npm install –save immutable
npm install –save-dev chai-immutable
JavaScript frameworks and the pace of change
Being a front-end software/web/app developer, in 2015, is awesome; we have evergreen browsers from all the major providers, the amount of browser specific hacks we need to use are the fewest. So many things have changed so much for the better. JavaScript as a language is going from strength to strength with the adoption of ES6 and fantastic tools such as babel that let ES5 browsers join the party.
But the rise of JavaScript has felt like a double edged sword of late, and I’m often left feeling like Neo in the Armoury.

lots of npm_modules.
MCR FRED Logo and Background in HTML and CSS
I received and email from McrFRED about a little competition they are running, to enter, I just needed to tweet something McrFRED related.
“It could be a McrFRED sticker, T-shirt, or you could make your own! LEGO? Desktop wallpaper? CodePen?”
CodePen eh? I’ve heard of the site and checked out a few demos but never personally uploaded anything.
So, what to make in as my first pen then? The header image on the email looked like something I could maybe re-create in just HTML and CSS with no images, as is all the rage these days – so that’s what I headed out to do.

The hard part here looked to be that repeating background, but I thought I’d seen something similar done before – which I found on Lea Verou’s CSS Patterns Gallery – but unfortunately, this was a) upside down, b) filled gradients rather than the outlines of the cubes I needed.
So I started to experiment, which is where Codepen really shines with the instant feedback as you change the code; pretty soon I had something resembling the cubes, but I had lines going through the centers of the cubes. More playing with the gradients I got what I was after. I found a guest post by Ana Tudor invaluable for understanding the maths to get the angles correct on the linear-gradients, the 25 minute spent absorbing that tutorial was extremely useful!
The base for the hexagon as grabbed from a jsfiddle by CreativePunch and tweaked to render in the correct orientation, I used a second hexagon slightly larger and below the main one for the border, as borders on the :before and :after elements didn’t render consistently across Firefox, Edge and Chrome.
The closest font I found for the text was Alegreya Sans SC from Google Fonts library. Finally, I added a few CSS animations then fired off the tweet.
All in all, a good bit of fun and a nice change from the current contract work I’m doing through the day.
And the end result:
See the Pen MCR FRED in CSS by Brian Barnett (@brian3kb) on CodePen.
Macaw Missing Tool Icons
Over the past month, I have been trialling Macaw to very quickly mock-up some site and web app designs – its a great tool and helps to greatly reduce the amount of Photoshop slicing I need to do.
I have however noticed that on two of my Windows machines, the tool icons just didn’t appear to be being drawn at all!

Tic Tac React
I’m not going to go into the ‘What is React/Why use it’ – if you need some motivation as to why, read why react? and take 45 minutes to watch Rethinking web app development.
So, for this post, I’m going to walk through building a simple Tic-Tac-Toe (Noughts & Crosses to us Brits) game, no frills or AI.
The “finished” example can be seen here.

