Last week I did a jigsaw puzzle, I'm not into jigsaw puzzles, but someone lent me a 1000 piece and I thought I would give it a go. Seemed lockdown appropriate. I ended up being pretty obsessed with finishing it - I'm not sure if that's because I wanted to or because it was taking up my entire kitchen table. But suffice to say it got me thinking about making jigsaw puzzles. I really like the idea of an abstract design.

So I thought I would use the hackday to try the POC (Proof Of Concept) - is this viable? Could I laser cut a generative jigsaw?

My generative SVG software was fired up. Someone asked if I could share it later, but honestly it doesn't work how I intended at the moment and is very finicky. I need to go down the SVG v1 vs v2 rabbit hole a bit more. Browsers are really good at rendering SVGs - my laser cutter software, not so much.

I had found a jigsaw piece generator on the Glowforge forums (Glowforge is my laser cutter) and although part of me thinks programming jigsaws is probably a very interesting activity, I am happy at this time just to grab an SVG for the cut.

Anyway, I made an SVG with the image from my software and the found generated cut path:

I used corrugated cardboard as the trial. It's great that you can both cut this material and engrave it as it means you can prototype really easily and cheaply. I actually took a delivery for my neighbour a couple of days ago and when she came round to collect it, I was a bit 'can I have the box for this weird thing I want to do at the weekend?'.

Here's video of the cut [I AM SORRY IT IS 35MB]:

Anyway... doing the jigsaw was a pain in the arse. Card did not work for this 🙈. However the jigsaw bit was great. I then set about making a couple more with more substantial materials. Here's a couple of pics:

The first was made with MDF, this worked really well. The second I made with perspex, which is amazingly tactile, it just feels lovely, but the engrave doesn't work as well as the MDF so you may as well be doing a one colour jigsaw.

Both of them suffered from quite a wobble when the jigsaw pieces were together. Where the laser cuts gives you about a gap of 0.25mm, which isn't noticeable on most things, but actually is on a jigsaw.

But having said that, they work so well as a nice 'cup of tea and jigsaw activity'. Especially considering there's not much else to do at the moment ☺️

I've been thinking about dedicating some time to writing each week, we'll see how it goes. Most of the time I have loads of things I want to write about, but don't feel confident about sharing, what is, by and large, my opinion. I think I should address this.

As it's customary on personal blog sites to write a year in review, I wrote an absurdly long post about last year. It would seem a lot happened even though it actually didn't 🤷🏻‍♀️. Rather than subject you, dear reader, to ramblings, here are some bullet points:

• Prominent year in modern history
• Started like any other, helped out on a project; Stupid Cities created by Joseph Wilk
• Started showing covid symptoms on 22nd March, one week before the UK entered it's first lockdown
• Got very sick for a very long time (still have long covid symptoms almost a year later)
• June onwards started a contract with Google DevRel team, to help them with the backlog of MDN docs that needed writing for new Web APIs: This was wonderful and I will do a proper run down in a separate post
• Pushed myself hard over the summer health wise. Big shout out to the ladies; Michelle, Tash and Amanda. Who not only supported me when I was super ill (thanks for the deliveries 💜), but also knew how important it was to be there socially too.
• Mozilla got in contact seeing if I could come on board and help with MDN tasks: Obviously a big yes, I love writing for MDN and long may it continue!
• Ran two 20hr week contracts from October until Christmas, which honestly was a lot considering my health, but also amazing so...
• Live JS is very much alive and well. They all made some great things in lockdown and it's one of my fav monthly catch ups. I took a big ol' backseat and want to say thank you to all of them for being so understanding.
• Tim H was incredibly supportive considering recording podcast episodes became difficult with my health. He released a couple we thankfully had in the drawer and was super patient and now we're recording regularly again 🙌
• My sister had a baby girl and although I couldn't go and see them and it was difficult, they are both beautiful and healthy and send me pictures every 5 minutes 😆

One of the most important things to present itself to me over the past few weeks (and pushed me to finally write) was I am not alone. Maybe the world wasn't aware of the post covid complications, maybe WHO kept it quiet to avoid more panic, maybe focussing on the current, still very dangerous situation, we find ourselves all in is more the priority (btw it is, wear a mask). But covid is not a two week illness like the flu. Sure everybody's experience with it is somewhat unique, but the growing number of people that are just not well after having it is finally being exposed. They call it long-tail covid, when you're not infectious anymore, but are still undergoing a plethora of health related issues, which last for months.

I personally thought my ongoing post experience of organs not feeling quite right and severe lack of energy could have been related to something underlying which explained why I had it so bad to start with. I experienced brain fog regularly because of my migraines so assumed I was getting auras in my sleep again. I can feel my heavy lungs when I breath, I can't digest food and my heart has weird sporadic episodes of not pumping, or pumping hard.

I didn't talk about it to a great number of people, those around me were so grateful I was ok, I was grateful for that and grateful I was ok, my GP was grateful I was ok, but a quick mention in a slack channel gave me a link to a great twitter thread (thank you Kelly!) which then fortunately opened a world I didn't realise I needed.

Here's that thread:

Hey, so, I got #Covid19 in March. I’ve been sick for over 3 months w/ severe respiratory, cardiovascular & neurological symptoms. I still have a fever. I’ve been incapacitated for nearly a season of my life. It's not enough to not die. You don’t want to live thru this, either. 1/

— Dani Oliver (@DaniOliver) July 3, 2020

From this I found some other useful articles. By now everyone knows someone who has been affected by this in one way or another. If you, or someone you know, has had covid and is struggling, you/they are not alone. Maybe you need this to explain to your doctor, employer, close ones. This is all new to all of us and they won't know yet. People struggle to believe you've even had it, our hypernormalised world means if they don't read it on a screen and it doesn't confirm their bias "it's just not real". So here is the screen:

• A brilliant (short) podcast interviewing a Guardian journalist who explains the experience extremely well
• An early article from the Professor at the Liverpool School of Tropical Medicine
• An article from The Atlantic
• An article from the BBC
• A first hand account from the Guardian

[23.09.20] EDIT: A couple more useful links

• Body Politic - an online support group
• Citizen Scientists Take on the Challenge of Long-Haul COVID-19

I'm personally positive about the future, at the moment now one knows what the long term side affects are. Yeh it sucked to be so ill and it continues to suck, but if I think about how it's better than a month ago, and a month before that surely that's a good thing 🙏.

My symptoms started last week - a week ago last Sunday, when a sudden feeling of utter exhaustion came over me in the evening and I woke up on the Monday with a fever and very painful lungs. This subsided a bit by the Tuesday and I just felt tired for a couple more days and things seemed to improve. I thought the same as most, was that corona? Most of the cases apparently are mild and with such varying symptoms was I just confirming a bias?

I seemed ok at the weekend until again Sunday night I just started to feel exhausted again, this time things were worse. I woke up with painful lungs, was alternating quite rapidly between very hot and very cold, and by Tuesday could barely stay on my feet, I went to bed at 7pm that day and slept for 16 straight hours. When I woke I felt pretty ok again, not well, but I could move. I had been awake for a couple of hours when I suddenly felt even worse intense stabbing pains in my chest and had to go lie down. I was freezing, I had the heat on in my room and it must've been near 30 degrees and I was shivering. I considered the whole time whether this was the point at which I should be calling for help (I live by myself). I woke up a few hours later ate something, checked in with people and again went straight back to sleep. It was all I could manage.

Yesterday I woke up and seemingly felt better. Friends had wisely advised to call 111 (NHS helpline), even if I didn't need immediate help it would be good to get any information. I was on hold for nearly an hour waiting to talk to someone, but, I was glad I did. I had a consultation with a nurse who called the paramedics after I had been through my symptoms.

Within an hour I was having another consultation with the paramedics. Everyone who I spoke to thought it best to assume I was on day ten of the timeline and the worst was over. Should symptoms worsen again I now had a case with emergency services and they know my situation.

Now, without doubt, I am extremely glad I didn't take up a hospital bed, but I will tell you this, this week was bad, it wasn't a mild anything. It wasn't like the flu, it wasn't like anything I had experienced before. Sure I'm not in the youngest bracket here, but I'm not in the oldest and I'm in good health, I have no afflictions associated with either my respiratory or immune systems.

Please, if you feel bad, even for just a couple of days, rest. Just stop everything and rest. I realise how difficult this must be for some, but I didn't rest, I felt better, had gone about things normally and the second time it was bad. (My personal reason was I only have work until the end of next week with everything that is going on and as it stands I've lost three days, which is a fortune considering I don't know how long this deadlock will last.)

Also don't be afraid to call in the professionals. I specifically didn't want to be a burden on a health service which didn't have resources even before any of this happened, but I am extremely glad I did. (NB worth a side note that I couldn't call my doctor, my surgery is not accepting corona related calls).

Anyway, I'm writing this to let you know my symptoms, they are different for everyone, but if it might help one person...

• Fever and chills. Lots of very hot and then very cold, probably because I was very hot.
• Painful lungs and stabbing chest pains, right down in the murky depths of my chest and rising further up as time went on.
• Difficulty breathing
• Exhaustion
• Dry sinuses
• I did not get a cough. I still don't have one really, I cough a couple of times a day but to me that seems like a normal rate. It hurts too much to cough anyway, it hurts to laugh.

This is the cumulative advice I was given by both medical professionals I spoke to:

• Breathing exercises, try to stretch your chest and take a few slow deep breaths every hour
• Prop yourself up when you rest/sleep (in a sitting position)
• If you start coughing up any phlegm that isn't clear or beige call us back
• Drink lots of fluids, preferably warm
• Make sure you eat and eat as healthily as you can (NB I had no loss of appetite but was slightly nauseous after eating sometimes)
• Keep yourself and your surroundings clean/be mindful about your hygiene levels
• Self isolate for minimum 7 days after symptoms have subsided

Honestly I think this is probably common advise for respiratory ailments, but also I don't believe any will hurt.

I know the situation is difficult and scary and if we're not seeing it either, it makes it harder to understand some of the rules we now have to abide by. But I would not wish this on anyone and I am up and walking around today, it could have been much much worse! I know there'll be plenty more people having this experience over the next couple of months and really all I hope for now is a vaccine for the vulnerable because gosh do we need one (yes I am also aware it's estimated 6-12 months away).

Also (personal plea) check in with those people who are by themselves, I had an incredible amount of support, I wouldn't have called 111 if it wasn't for my friends and wow am I glad I did.

Oh and if you're a company who thinks this is a brief and not a crisis, can you fuck off? Your emails are appalling. Every. Single. One.

Yes I know.

Yes I have watched it.

Yes people have asked me what I think.

There's a small child inside me which is glowing with pride that people have asked my opinion on such important matters, there is also the near 40 year old who wonders if she should be more concerned about earth's matters and not Etheria's...

I do have opinions on the latest series of serious issues of Earth too if you want to hear about those.

But, back to Shera. Bypassing the replacement of the best opening theme tune for the worst opening theme tune... here are some points:

Characters

I like how they have pretty much kept and developed most of the original characters, without feeling the need to add any to the mix, just shuffle it around a little. The baddies are the best. Shadow Weaver is excellent, she already was, but I am glad she's more of a focus and has stayed truly dark. Catra is interesting and I am missing Scorpia, hopefully she will be bought in in later episodes. More Hordak is needed.

The goodies I am less excited by. Bow wasn't apparently straight in the original and although it was mostly assumed, this was cool. There was also a lot on innuendo around relations between the female characters, I hope this is bought in. My main grievance is that Shera herself was a woman, one that, as a child, you would look up to. Aspire to be. She is more of a developing teenager now and added to this the focus on princesses I got nothing. Sure she was a princess, but more importantly she was a warrior. A strong, sure leader.

Story

This leads into how the story changes affect this. They absolutely did not need to move away from the Heman universe, the story was solid and they already had a remake. Shera herself chose not to go back to Eternia and stay in the castle with her regal parents, but to stay and fight on Etheria, where she evidently had very little. The rebels didn't live in a kushty castle, they lived in Whispering Woods, amongst nature. They took back Bright Moon, but it wasn't a capitalist heaven, where if you fight for the "right" side you get a comfy bed.

They are also going to have a whole lot of holes to fill and I feel it's going to cause some weak back story. It's Hordak and Skeletor's history that causes the invasion in the first place and yes yes I see princesses ... Not every freakin female aspires to be a god damn princess!

Shera forego her princessdom, to fight for her life, her world. This was inspiring.

Style

OK I am grumpy. Which is weird because I will keep on watching it. I actually still watch the original, and I enjoy it! For Every. Single. Remake. can we think of something a little more original than just mangafying it? Thundercats, yeh sure, it was already there, the first Heman remake, ok it was cool back then, but it's been going on for 20 years now. Don't get me wrong, I like manga, I still pull out clips of the original Aeon Flux - oh holy crap, they shoulda done it in that style...

Conclusion

Yeh I don't like it very much do I? Despite all of this is could be worse, I do thinks the baddies are tonnes better. Thing is there is one clincher: We're now missing the Sorceress, who really represented true, strong, powerful femininity.

But having said all of this, I am already designing a Shadow Weaver top, so there's that.

I took extreme action and popped it off and sticky taped it back on, with a new improved Ruth Crafted Button™

Problem. Solved.

Anyway, without going on a rant about Apple turning a blind eye, I was in no position to afford repairs. The Genius' were no help and I had not budgeted for a new laptop for at least another 12-18 months. I expect Apple hardware to last a good 24-36 months, really. I dunno maybe I'm optimistic.

People came to my aid. Which was amazing. I was offered a pretty hefty discount on a Google Pixelbook. This is Google's own top of the range Chromebook. I could not refuse. After a battle with customs because the discount was only only valid in the States, it finally arrived on my doorstep last week.

Holy baps!

For those of you that are slamming mac keyboards as if your life depended on winning that game of wack-a-mole, revert, run, get the crap out! WORKING KEYBOARDS ARE JOYOUS. So so joyous.

Some setup stuff

The first thing, and possibly the thing with the least amount of up to date information out there, was enabling Crostini. This runs Linux in a container on the Chromebook, something you pretty much want straight away after spending 15 minutes on it.

I have the most recent Pixel, the 256GB version. Here's what you do.

• Go to settings.
• Click on the hamburger menu (top left) - right at the bottom it says 'About Chrome OS'
• Open this and there's an option to put your machine into dev mode
• It'll restart and you'll be in dev mode - this is much like running Canary over Chrome and possibly turning on a couple of flags. It may crash, but what the hell you'll have Linux capabilities 😃
• Now you can go back into Settings and in regular settings there's a 'Linux apps' option. Turn this on. It'll install Linux.

Once this is complete you'll have a terminal open for you. Perfect

Now you have to remember all those terminal commands you never use because you've been installing .dmg files for like ever!

apt-get is the biggy. I found this link to be really helpful. My main aim was to set it up so I could develop on it. I really only build things on node now and I will be running my mac alongside this machine for Adobe Creative Suite reasons (I have an old purchased copy), so I could be pretty minimal about my approach. Should I have to cope with an old ruby build for instance (or a new one) I'll just switch to the mac.

I use Sublime as my editor 😱 Please I run a MacBook, a book - not a pro. It just didn't handle vscode and there was no real estate with the 12" screen size. So I tried and I am fine with Sublime.

This installed perfectly well. There's some descrepencies with screen resolution when running Linux applications on Chromebooks. It's apparent in Sublime, but there's also a couple of settings you can play with dpi_scale and ui_scale. I set my ui_scale to 1.6 and it's fine.

I also revised my vim commands and know now I am running Debian v 9.4 Stretch (command for this is lsb_release -a btw). Useful information at these times.

One other thing that stumbled me was serving an app within the Debian container and accessing it from regular Chrome on ChromeOS (and if you are reading this with a haughty taughty how do you not know this Ruth, remember some of us hold other knowledge :rolling_eyes_right:).

What you are looking for is ip address; ifconfig is depreciated. Bang that in your terminal. The ip of your container is the one after inet. Shout out to my safe place JSOxford for this one. Replace localhost with that (remember your port) and you're O K. Also if anyone knows of a better way of doing this lmk and I'll update, I saw some threads talking about using dev.local or such things in place of this.

Phew :sweat_face: this also actually took me a million years, so I am just gonna run and wash, brb.

Pretty much everything else is 'in the cloud' already for me. Notion, IA Writer, Slack, 1password, Spotify. All available either via the browser or play store. So far, so got a working machine.

Problems

The only problem I personally ecountered was file sharing. Which may sound a little silly in 2018, but hear me out. I'm not a big fan of Drive, the UX isn't amazing. It's good for docs with other people, but not for my files. However I did discover Backup & Sync which seemed pretty cool. Anything that wasn't in anything else and I needed to share between computers, could just be shared.

Problem is, you can't access that on a Chromebook. It's for Windows and Mac only. Yeh mad huh. Something to do with Chromebooks not being geared as working computers and file storage and something something. I'm hoping this will change in the future.

Dropbox is an option here, but I don't have an amazing amount of space and I'm wary of monthly subscriptions as I very much live on the breadline every month. Plus the big deal here is I couldn't get Dropbox working on my Chromebook. I did all the Linux install things. It did this thing one time I tried, where it went to run and just didn't. Now it goes to open and just hangs :rolling_eyes_and_shrug: If anyone can help with this I would be very grateful.

A couple of other things I've noticed were Slack is very different and possibly hard to use. I assume because I'm running the android version and it's not geared towards desktop. I can't easily reply to threads and I can't share snippets :sad_face:

You also can't set files to open by default in an app you've installed on Linux... I hope that makes sense. So I can't make HTML files open in Sublime for instance. It's not a biggy as I usually open files from Sublime, but it could possibly get annoying in the future.

Also if you are an emoji fan then you are going to have a :sad_face: :flustered_face: time of it. There's not even a close to complete set. Plus the only way I've found to bring up emojis is via the keyboard link in the toolbar at the bottom. Which only works well if you touch the screen. It's a bit of a broken UX process. I hope this is improved in the future. Even a keyboard shortcut would help.

Hardware

As I write this the battery is decreasing quite rapidly. Although I suppose I have had it off mains all day, so in reality that's pretty good. I would like it to last until I go to bed in a couple of hours tho... will report back. (Back report: I'm going to get the charger - I've got a lot to do tonight).

It's nice and fast for what I use it for, although I haven't done anything particularly heavy yet. I'll whip up twenty thousand animated svgs in a minute yar.

It's as small and lightweight as my macbook AND THE KEYBOARD IS A DELIGHT. It flips to a tablet, but I never find myself doing that. Maybe over time.

Now I have two, yes two, usb-c ports :winky: I had already dealt with this and have adaptors, so it's kinda nice this is the same as the mac tbh.

Conclude the things!

Overall it's been a good exercise in making sure all my important things are accessible from everywhere. I was almost there but not quite. Apart from designing, where files are big and software locked down (yes - there are good alternatives, but I still get the odd bit of print work and Illustrator is just my fav).

Would I pay full price for it? I'm not sure I would pay full price for anything on the market right now. Point me in the direction of a system that will run my graphics software and makes a good dev machine (with minimal setup) and lasts more than 18 months, point me in the direction of a worthy investment and I will pay the money.

But actually this is a pretty good option 😃

So what about the mac?

Well I took it into the Apple store. Massive props to Sam who made me aware they were allowing us the possibility of fixing the keyboards should they think there may be a problem.

This time I got to talk to a technician :posh_face:. He was really nice, he said he would replace the keyboard, and the battery, and the screen! (The work came in at 200 english pounds less than a new machine... :shrug: go figure). He also wrote a long paragraph about the Ruth Crafted Button™ for his technician friends, he thought it was very clever and thought they would as well.

I got it back today, less than a week, I am glad, now if one computer breaks/gets lost/falls off a cliff, I have the other and they will both work good.

A big thank you to everyone who helped or offered up their spare machines. A working machine is so important and can easily be taken for granted. I'm feeling a lot calmer about my hardware situation right about now!

Now this was a couple of years ago, and I was pretty chill about not getting it right away. But then, welp it pretty much just landed on my doorstep a few weeks ago. The delivery person was all a bit 'what is this' (that was a conversation). And tbh I actually don't support projects like this anymore because they do finally come I'm just not interested anymore.

But not this time.

You know when you were a kid and you didn't have Sonic the Hedgehog, but your friend did and you'd go for a sleepover and stay up really really late playing because you wouldn't have it in the morning and it was loads of fun and you just wanted to play some more.

It's. Like. That.

But this time: It's THERE IN THE MORNING!!

It's SO COOL. I'm having the best time. I keep thinking it's going to 'run out' like ink on a printer, or pen on a plotter, but it's not going to do that.

Oh I need sleep.

What can you cut with it Ruth?

So it came with some maple hardwood 3mm, some draftboard 3mm (we call this MDF in the UK), some clear acrylic (I will refer to this as perspex) and some leather.

All of these have settings already set up on the cutter, so cutter and engraving them is pretty straight forward.

However, you can set up the cutter with custom settings (I'll get to this hang on), so I have also tried to cut; other leather, leatherette, lots of different perspex, cardboard (correlated and craft), acetate, cotton.

I am a laser cutting 🙈 #omg #socool #laser #lasers #lasercutter #glowforge

A post shared by Rumyra Skutchi (@rumyra) on Apr 4, 2018 at 1:19pm PDT

It won't cut metal, you need a super powerful industrial laser for that. It will engrave glass apparently. And I haven't tried rubber, cork and denim yet, which I would like to.

Most of them have been successful, the acetate melts very quickly as you'd expect, so small shapes are a big no no. The leather I tried was real leather (some scraps I found on ebay) and burnt straight away, like literally caught alight. The cutter keeps this all enclosed so it wasn't dangerous. However the Rumyra Studio™ stank for like a week!

I've made an airtable to keep track of settings of different materials. It's very much a work in progress and I'm constantly tweaking, but it's here if you're interested:

How does it work Ruth?

You plug it in and switch it on. Open the lid and pop in your material.

It hooks up to my wifi and there's a browser based piece of software you run where you upload SVGs - oh yes the best format of shapes! Once you've uploaded the SVG you can 'place' it where you want it cut on the bed and just click 'print'.

The cutter has a camera at the top of the bed and does a little scan so you know where to place your shape.

The software allows you to move, rotate and transform the shape to place it. It also allows lots of different settings for cutting and engraving. Mostly based on speed and power. Modifying these for custom materials should get the desired result (or set things alight, depending on your goals). There's not a great deal of information about this yet. There are some forums, however I've found trial and error is the best as every material is different.

Measure twice, cut once

In this instance, trial cut like 10 times on a new material!

Where did you get it from Ruth?

It's called a Glowforge. Dubbed as 'desktop' which it sort of is. It's smaller than the ones I've seen at hackerspaces and it does fit on my table (there's no stand). However, I did think it was going to be a teeny bit smaller but :shrug" whatevs. It's cool. It's neat. It's about one meter by 1/2 meter.

It has a 30cm x 50cm area to put something (flat) in, and I would say cuts 25cm x 45cm. There are different models. I have the basic which means my extractor is a big metal tube which I pipe out into my garden through my big studio doors. You can get models with air filters and one comes with a feed through for the material, so you can do much bigger sizes. However what I have is amazing and I absolutely don't miss these extra filters.

Why this one? I had been looking at laser cutters for a few years actually. You could get cheap ones from China for about £500, but the reviews weren't great. Or hackerspace ones starting at about £3,500, but that was a little pricey and also those ones do take up a lot of room. When this came out it was somewhere in-between (bear in mind this was before Brexit and the fall of the pound).

Now I don't use this blog for advertising or sponsorship in anyway, and this post isn't either. However if you are interested, this link will get you a discount on one should you feel like you need lasers in your life https://glowforge.us/4sNRHd

What do you know about lasers now Ruth?

I can cut fabric, well I knew I could, but it hadn't really crossed my mind. I had considered wood, perspex and leather, possibly cardboard & paper. But it's cool it cuts cotton, I make a lot of clothes, so I feel this could be great. Apparently you can engrave denim as well, this excites me.

It smells a lot. It has an exhaust and my studio has double doors which I open when I use it, so I have loads of ventilation. But a few hours of laser cutting and I have a sore throat. I've been considering one of those masks cyclists wear. (You can buy each model with an air filter for extra monies).

Materials are expensive, but you can buy bits off eBay quite reasonably. So far I've bought a small amount of leather scraps and perspex to play with, neither of which have broken the bank, but at some point I would really like to get some merchandise on my Etsy shop. I'm designing so watch this space. Bulk is going to be a big payout. The cheapest thing is old cardboard boxes, next up would be draftboard/MDF from the diy store. This would be another thing to note, if you're prototyping or trying something, try it in MDF first 😃

Big designs take time. Especially if you are engraving. DON'T LEAVE IT! It's really safe as it stands, but you just don't want to leave the room whilst it's cutting and some cuts can take hours, so be aware of that.

I don't regret my life choices. It's one of the nicest bits of kit I own and I have a studio, with a wide variety of bits of kit in! One day I'll give you a tour...

Can you cut me some laser cut goodies Ruth?

Yes I most surely can! As it's very much a bespoke process. You're looking at design time, cutting time and material costs. But I am happy to work out a quote with you based on your needs. And as I've mentioned watch this space, I'll be putting things on my Etsy shop soon.

Can I come and use it myself Ruth?

For sure, pop over! I also serve tea. Again we can work out costs on what you're wanting to do 😃

Have you had any problems Ruth?

Not any big ones no. I'm pretty happy. However it's still a relatively new product, so there's a few niggles for sure.

If you use one of Glowforge's own materials there's no indication of the power and speed settings. Which makes it really tricky if you were to pick up some draftboard/mdf and go for it yourself. You just have to select the predefined settings and hope for the best. So far this has never gone wrong, but it would be good to know what settings these actually are.

The software for placing the svg and cutting is definitely in early stages. I really hope they spend more time on it. I am impressed with how robust it is (it's never crashed or failed to cut) however it's clunky from a usability perspective.

The camera has misaligned recently (there's one just under the hood which allows you to see what's on the bed for svg placement), but looking at the forums allowed me to take tips to clean the bed itself and that seemed to put the problem right.

Would you advise getting one Ruth?

No! Damn I want to be the only laser cutter in the world!

Really tho it's awesome. I've made presents galore, a pretty cool lampshade, a pen holder for my studio, pot holders for my garden. There's no more buying new jewellery, heck I just laser the crap outta that now! I usually post lots of photos of my stuff on Instagram if that takes your fancy.

And no it's not cheap, it's worth more in dollar than my laptop, my car, my surfboard (ok not hard 🏄🏻‍♀️) but here's that link again if you are interested https://glowforge.us/4sNRHd

Oli and Pete this post is for you, neither of you could possibly know where I was in my life when you rescued me. You do so much to keep things diverse for our students that I think you forget that it means so much to me too, as a developer, a teacher and a woman in tech. To have somewhere comfortable and enjoyable to go to work. To have you listen and trust me, for however small you think that is, that is all I have been searching for. Heck it's only taken 15 years! But you helped make it. Thank you 💚

So it rolls around again, it's like a birthday. It's exciting, in a way it's your special day, but you're also reminded of the years going past, or in this case another year of general crap you had to endure through no fault of your own: Happy International Women's Day.

Aaannnyway... today I would like to talk about something that in the past couple of years has meant a lot to me, maybe as a way of saying thank you to the people involved.

Eighteen months ago I started working for a company teaching adults how to code. I'm not a full time employee there, I contract for this company, it's only a couple of weeks every few months, however it's the closest thing I have to a permanent position and over the course of the eighteen months I have got to know the company, the founders, their views, outlook and the work they put back into the community.

The company is called DevelopMe_ and is situated in Bristol, UK. We make sure everyone who comes and learns to code with us is supported throughout the entire process. Oli and Pete, who co-founded and run the company, interview everyone who applies personally to make sure it's the right decision for them, and each student has a personal mentor through the three months (and usually beyond). They also work with companies within the local area to place each student in a three month internship after they have completed our training.

It is by far and away the best job I have ever had. Not just because I found I really really enjoy teaching, but because both founders treat me with respect and trust me to lead both my syllabus and my class the way I see fit. They encourage me beyond just the two weeks I teach for the full time course we run and recently started an evening course purely lead by myself with my own syllabus.

But it's not just the trust and respect they give me, which I have never experience in a work place before (not including contracts, I have worked in five permanent positions over my career). They have a diversity fund.

It took me a while before I even knew about this fund, but they put money aside to help people who want to come and learn how to code, who may not be able to financially or otherwise due to circumstances. They have a big push to bring women back into the workforce after having children, which I am a big fan of, especially in our industry where even 6-12 months out can make you feel like you've missed too much to come back.

One third of all the students we've ever had have been female and today there's always around 40-50% females in the classes (of which max size is 12) and on my first evening course the entire class was female!

And the best thing: It made me feel better, it made me feel comfortable and welcome and like I belonged.

Lots of the students quietly thanked me for teaching, which is lovely and thank you also for being students, because I really enjoy sharing all this knowledge I've accumulated over the years. Quite a few of them also mentioned it made them feel better to see a female, not only teach but have been a living breathing developer and have that experience and to show it is possible (albeit the dry comments I drop in about how it's not all roses).

I am genuinely bursting with pleasure I am helping more women into our industry.

But don't forget, the more diverse we can become, the more it helps those of us already here.

Full Disclaimer: I actually recommend you don't do this. It's explained below, but in short snowboarding is an extreme sport, the jacket makes it more dangerous and Keir who wore it is a trained professional

I actually created this project a year ago, but silly me I lost the video along the way and I didn't want to publish this post without it. So it just took a little longer to get out 🙃

But here it is! Much better late than never, because it is totally rad and cool 🕶

This time last year, I was describing to my class some of the things I did in my previous role in R&D. The jacket you control with your mobile phone came up. I never really wanted to revisit the project if I'm honest, it involved native iOS apps, flaky bluetooth arduino boards and a cheap 'melty' jacket.

That was until one of my students showed me this video of a professionally made LED ski suit

I couldn't help it. The reason I had left my job was to make more things, so I did.

How to

Step 1: Get a jacket

This was relatively straight forward. Some eBay searching was all I needed. My only requirement was to not spend any money, as this was only an experiment. Second hand male medium jacket plus postage came in under £20, the only thing I may have over looked is I know nothing about male sizing. Medium for males is not average, that would be Large. (omg you are not your user!) Let's just hope it fits!

Step 2: LEDs

Now I needed a suitable LED strip - there are so many out there! Different amounts of LEDs, different power levels. I wanted it long enough and with loads of LEDs, and waterproof, and 5V so it could be battery powered. Not too many requirements then! Luckily Gordon, (who helped me loads with this project, thank you!), had pretty much ordered the same thing and so linked me up - phew! The item isn't available anymore but the description on eBay was "WS2812B 5M 5050 SMD Digital 300 LED Strip Light Addressable Color DC5V LE".

Step 3: Get the LEDs on the jacket

So I thought about this... a lot. My original plan was to weave them in a pattern around the jacket and arms and stitch them on, but once I had the jacket and LEDs I realised there wasn't enough length for this and to have them detachable from the jacket would be useful. I did have to fly with all the components, and a jacket with electrics attached to it doesn't really make for calm airport security 🤔

So I found some LED clips. The kind you nail to exteriors and thread the strip through. I ended up hand sewing 25 of these on the jacket where I wanted to string the strip around, to hold it in place. It meant Keir could put the jacket on and then we could weave the LEDs through these clips.

This worked with the length too as I could just circle the LEDs around the body, like an LED body warmer.

Step 4: Power

We used 4 mobile phone lithium ion 3v batteries. I could test the circuit with two quite happily. Batteries of this size are amazing, (and my best tip for wearables), light weight, rechargeable and pocketable.

Step 5: The circuit

The LEDs are controlled by an Espruino controller board. This is my controller board of choice as it has all the functionality you'd need from one, it's small (like really small) and you can run JavaScript on it, that's what it runs, no extra charge 👍🏻

Again a big thanks to Gordon here. We hooked up all the batteries together, added clips to them, the LED strip and a piece of extra wire that could be strung all the way down the back of the lining of the jacket, to connect the whole circuit together. From where the LED strip ended up at the top collar, all the way to the pocket where the batteries would be held.

This allowed really easy assembly when we went to put the jacket , everything could just be clipped together.

Step 6: Assembly

I had to take it apart to pack it for a trip to Andorra. This is where it would be worn. Props here to Rob for helping with my 'batteries through security anxiety'. The whole thing could be taken apart and then reassembled at the other end, so transporting it actually wasn't too difficult.

Wiring it whilst on however was another matter. Keir was the nominated snowboarder and a disclosure here: Keir is a qualified snowboard instructor - please please do not try this at home, it is actually quite dangerous. Not only is snowboarding an extreme sport (yes really), but I had to strap Keir into the jacket once the circuit was on, he could not easily get out.

As well as this, it wasn't until he had gone to do a run in the dark did we realise, he couldn't see. The glare from the LEDs was really strong. Now Keir knew where he was going and was familiar with the landscape, but like I said before please do not try this at home!

Anyhow, apart from all of this, Keir does look like a super hero (of sorts) and it was hilarious and loads of fun. Even just editing the video and looking back on it now I'm like, yeh we put LEDs on a snowboard jacket and took it up a mountain and then made a video and that was totally cool 🕶

Iterations

This was a proof of concept (POC). A POC is something you build to see if it will work, it's like a test iteration. You would do this before a minimal viable product (MVP) for instance. So my learnings moving forward would be thus:

• Hook up a mobile phone and use the data to send to the Espruino, so you could easily change light on movement for instance. When the phone accelerometer picks up on a sudden height change, the LEDs could get brighter, when the boarder rides left change the colour to blue and right to red. That would open up a whole heap of very cool possibilities.
• Get more LEDs
  • Either use a wax covered strip, cos they are thinner and generally nicer... or
  • Individually sew the LEDs on and cover the entire jacket with wax. There are a few reasons I didn't do this, cost is one, but I have used conductive thread before and it's not great, I would have had to use uncoated wire and time would have been longer as well
• Use one rechargeable battery pack: Replace all the phone batteries with a more easily rechargeable power pack. The mobile batteries were a good choice for this project because they are cheap and accessible.
• Consider tailoring the whole jacket, although to be honest it worked pretty well modifying an existing one. If budget wasn't an issue I would definitely consider a more integrated circuit to jacket, rather than just running it through the back lining.
• Find a way to stop the LED glare. Keir suggested an extendable collar, which is a great idea. Something the wearer could easily still see over, but stop the light coming from beneath.

This was such a fun and very crazy project to work on, thanks to everyone for their help, inspiration and making it happen!

It's ok I know what you're thinking and I'm already planning something audio reactive 🎶

Needless to say the blog has had a refresh. It's not 100% complete, but then if I strived to get things 100% done I would never launch anything ever.

What did you do Ruth?

Well the main shift was away from Middleman and on to Metalsmith. I'd been choosing Metalsmith as a static site generator for a while now, since I left my last permanent role I wasn't tied to a Ruby stack so much anymore. Don't get me wrong, I have no qualms with Ruby, it's totally cool. But I'm a client side developer, so if I can use JavaScript for something I'm going to, it helps me learn more JavaScript and that helps me be a better client side developer.

How did you set it up?

Well I didn't want to spend all the time setting it up if I'm honest. I've made some peace with myself recently which is not to start absolutely everything from scratch. I'm a nightmare for it sometimes. I make that choice for learning, but it takes me longer and right now I want to be building more things.

So I spoke to Marcus, who already had his Metalsmith powered blog all up and running. He kindly just said his was open on GitHub so if I wanted to fork his code I could. And I did. And it was great. All the infrastructure was there and all it took was a little configuring, high five for blog posts in markdown... I had something resembling my data and not his up and running in an evening.

There was still a whole heap to do, I edited all the markup, styling and config to suit my needs. I wanted a fresh look which took a while. But I don't regret my life choices. Marcus is a great JavaScript developer and I learnt a bunch just sifting through his code.

Eighty percent done

Like I mentioned this isn't complete and there's a few tasks still remaining, but if I strive for 100% with all my personal work I won't release it. So here it is. Feedback is always welcome 🤓

Everything is more expensive when you are by yourself. I tried to enlist the help of friends, but they said yes, and then later said no due to their own circumstance. All of this took up precious time and as it got to about October there was nothing left to book. Suffice to say it was one of those things where trying didn't make a difference, it was like banging my head against a brick wall. Thinking I had somewhere and then having the rug pulled from under me, it was very frustrating.

Then this year happened, it really didn't start well for me, so with a bit of determination and all my savings I rage quit the UK for a month. I really wish it were longer, but at the same time it's amazing, to have the space both mentally and physically to just do what I want for a bit. I quit my job to have time for the things I want to concentrate on, and the last year hasn't been bad, but this year I really need to focus on that and I'm hoping this trip will help to kick start that. Maybe my change in situation will change my habits. Then if some adulting does need to be done when I get back I just won't do it and do the things I want to do instead 🤷🏻‍♀️

Sub Header

Small caps

This is a regular text size paragraph. Skate ipsum dolor sit amet, judo air boned out Christ air ollie impossible locals. Salad grind masonite indy grab bearings cess slide slappy. Dudesblood smith grind axle hang ten rail slide coper downhill. Tail boneless slide Omar Hassan coping chicken wing axle set.

This is a reading paragraph. Hang up rocket air hand rail Kevin Harris kick-nose dude grab. Powerslide opposite footed alley oop air nose-bump Kien Lieu Saran Wrap hip. No comply Neal Hendrix front foot impossible rocket air 1080 downhill hanger stoked.

Another reading paragraph, with link, bold/strong, italic/em etc... Pop shove-it powerslide nosegrind drop in gnar bucket. Hand rail impossible hard flip skater Jeremy Klein Kevin Harris. Shoveit crailtap grind pressure flip nosegrind. Andrew Reynolds hurricane sketchy layback full-cab bearings. Pump nose camel back alley oop chicken wing.

Feature image

Regular image

Tweets

Code

// set up audio context
var audioContext = (window.AudioContext || window.webkitAudioContext);
// create audio class
if (audioContext) {
  // Web Audio API is available.
  var audioAPI = new audioContext();
  } else {
  // Web Audio API is not available. Ask the user to use a supported browser.
  alert("Oh nos! It appears your browser does not support the Web Audio API, please upgrade or use a different browser");
}

// variables
var analyserNode,
  frequencyData = new Uint8Array(256);
const screen = document.querySelector('#screen'),
  allRepeatedEls = document.querySelectorAll('#screen section'),
  totalEls = allRepeatedEls.length;

Blockquotes

You're decision might be 'Should I use SASS' well the answer to that one is yes but…

Lists

• This is a learning experience for me too, so things may stay quite basic. The code will probably be basic, however this does mean it won’t be too complicated for entry level coders.
• I’ll be analysing audio from the microphone, which means I’ll be using the Media Streams API, which only works over https, you’ll need to view the pens over https://codepen.io
• Things work best in Canary so I’ve noticed, please don’t expect pens to work cross browser. The main end game for me is to integrate them into my VJ software, which I run in a sandboxed environment (my machine, my choice of browser) sux I know!
• I’ll be cross posting all these articles to both my Codepen Blog and my personal blog.
• There's a high chance I won't make every single day, but I will try 🙃

1. Raspberry
2. Rambutan
3. Redcurrant
4. Salak
5. Satsuma
6. Soursop
7. Star fruit

It's Sapphire subject today so here's a little audio vis instead of a grid practice, as it seemed to fit a little betterer.

See the Pen Codevember Hash 2 by Rumyra (@Rumyra) on CodePen.

The biggest change I've made to the audio-vis software I'm building (Vizra) is to move the visuals to a canvas element to help performance. Drawing (& re-drawing) a butt ton of SVGs wasn't working too well. So the audio vis you'll see this Codevember are all going to be on canvas - not too much change to the actual visuals from last year. But most of work this year has been around the nuts and bolts of the software rather than the vis themselves.

Weirdly I have run into more performance problems recently, but that's a whole other blog post, in fact a whole series!

Wow I almost wrote 2018 then! It's here CODEVEMBER!! ALL THE EMOJIS

tl:dr;

• It's Codevember
• Gonna do some CSS Grid
• Probably not every day
• Got a book for inspiration
• Will write notes

I haven't written much this year, it's been pretty busy... I think I'll make it more of a focus next year, there's so much I want to learn and then hopefully write about. This year has very much been about sharing my thus far found knowledge. Which I will continue to do, but there's so many things which have taken a back seat and I need to sit and learn.

Which is where this Codevember comes in. I need to get more practise with grid layout. I'll be teaching it in January to my bootcamp students as I'm revising my part of the course and I really want to stretch myself with it. Get it into muscle memory, and hopefully do a bit more flexbox as well. I've done a fair bit now, but I still feel like there's a lot of trial and error with both when I use them. I'm not use to this, other methods just fall off the finger tips. It'd be great to learn these inside out too.

I know already I can't do every day this month. I'm on a project as I write this and have 3 conferences lined up... Also I really want to buy a Nintendo Switch.

Don't worry, I have done some more visuals this year I want to share, so expect some of them mixed in too 😄

Hash 1

INSPIRATION Y'ALL 😄 You know how much I luv inspiration. Check out this book

I totally borrowed this from a work place years and years ago, then I forgot and then I left the job (:embarrassed_face:) but we had a googles today and you can get it for £16, so if anyone is missing it and needs reimbursing hit me up (soz).

I mean the title says it all really. It's got loads and loads of layouts based on different grids all the way through it. See those sticky tabs? I went through it last night and highlighted what I thought to be easy -> harder layouts through the use of colour. We'll see how I get on.

The exercise here is not to copy them directly...

I have complete artist control, they are inpiration. What I want is to practise using CSS Grid, if there's part of a layout I want to change to practise something I will most likely do this.

So to start simple here's the first day.

See the Pen CSS Grid #1 : Codevember '17 by Rumyra (@Rumyra) on CodePen.

Inspired by this lovely image:

Thankfully gettin my hair sorted out after I CAUGHT IT ON FIRE in Vienna (ask @csswizardry )

Expect totally on fire short haired Ruth 🔥

— Ruth John (@Rumyra) May 15, 2017

Anyway, thanks very much for everyone's concern and questions. I thought it probably deserved a little more explanation.

I set my hair on fire, well I say I it was completely by accident and totally random.

I had just met up with Harry for a natter and a couple of drinks. We found a lovely bar to sit down in, ordered a couple of glasses of local viennese wine and with that Harry takes one look at me, eyes widening with what I can only describe as fear and the unfortunate words 'Ruth, I think your hair is on fire'.

Behind my seat was a little ledge, with a little row of candles. I hadn't thought anything of it and pulled my hair up into a pony tail. But by doing so had completely endangered myself. Sure enough my hair was in fact on fire.

Without even thinking, well ok I was thinking, I was thinking I needed to snuff the flames out, with my hand, which I infact did. But by doing so a big chunk of hair came with it, as did a ton of ash which fell all over the table.

Poor Harry. There I was still not quite sure what had happened, and here he was, with what I can only describe as a desecrated hair mess on the table.

Still, I wasn't injured, the flames were out and like he re-assured me throughout my paranoid mumblings through the night, 'you can't even tell'. I am 100% sure he was ready to pour a glass of water over me like a true hero!

Anyway, all is well that ends well and I visited my babe of a hairdresser yesterday. By the time I'd explained the events of the evening she had rightfully sorted out the escapade. And really I think I quite like the new hair length ☺️

Firstly let's go over the last few - here's the inspiration:

Concentric Circles

See the Pen AudioVis Codevember #16 by Rumyra (@Rumyra) on CodePen.

This was an extension of the sunburst really, it's just the shapes are being extended around rather than out. Super luv this (see what I did there)

Just Circles

See the Pen AudioVis Codevember #17 by Rumyra (@Rumyra) on CodePen.

It seems simple but you can have fun with this, lots of size and distribution fun.

Custom SVGs

This is Takashi Murakami. He's a crazy artist, I found this book at a random second hand sale at my mums old school:

Then he had an exhibition when I was in London and I spot his work regularly at other exhibition. Suffice to say it's pretty awesome. Anyway super uber great for playing with a custom SVG:

See the Pen Codevember AudioVis #19 by Rumyra (@Rumyra) on CodePen.

All using the d3 technique, which I'm super enjoying for a number of reasons:

• Perfomance
• SVGs
• Can also be used with Canvas and DOM elements
• I haven't even begun with other methods which I'm super excited about
• Within the final software I just have to set some params and call a function to create the vis - this integrates really well within the eco system

Retrospective

Things I learnt/enjoyed

• That trying to code a pen every single day is hard - especially if you are learning new techniques and writing blog posts
• Inspiration is cool, it gives you some boundaries. I luv making vis the sky is the limit, but this can be intimidating some times and you need a thread to start
• Some d3, which makes me happy
• Which techniques worked the best for visuals in a browser, or rather which ones worked better than others
• It really made me think about integration into the vis software

Things I didn't/would do different next time

• I was also travelling throughout November and didn't take that into account, although I didn't think I'd hit 30 pens, I thought I would do better than 19
• I really wanted to try canvas and webGL and didn't get that far
• I would load music, rather than using the mic so it would work over http, I think people are confused by the https link

Summary

I actually think this is the start of something. I've been meaning to release audio-vis into the wild for a while and it was a great excuse to get started.

My VJ software Vizra has also got off the ground. There's an original hack version of the software which I've been experimenting with, performing with and generally messing around with for the past 18 months or so - but it's great to get a proper build off the ground.

Note from December

I'm taking a break for the rest of December - I'm in Australia for JSconfAU and will be travelling around once this is over, until Christmas. But there will be more, I can guarantee that, so just follow me to keep up to date 😃

Note from now

This work made a big part of my talk for JSConfAU which was actually one of my favourtie talks from last year. I've also started other work in different areas of the vis, like the analysis part started in this article for 12 Devs of Xmas.

Basically it's all go and super cool and Codevember was awesome 🕶

Today's inspiration is:

Today's is a little bit trickier as we have to create arc elements drawn in a circle that increase their outer arc with our data. But otherwise the code goes much the same as the previous days.

Sorry this isn't more insightful, but I am on a train on the way to the airport! Hopefully I'll be making more on the plane ✈️

See the Pen AudioVis Codevember #15 by Rumyra (@Rumyra) on CodePen.

Before I start I want to give a big shout out to Ben (@benjaminbenben) who was helping me with some performance stuff I having trouble with. In doing so he really opened my eyes to how powerful d3 is and actually how suited a library it is to help with what we are doing here.

It’s dubbed a ‘visualisation library’, however I think it’s relationship with data has given it a reputation that makes people who haven't discovered it, assume it’s just for pie charts. That’s changing now, and don’t get me wrong it’s good for displaying data, but that’s just it it’s good with displaying and it’s good with data. So anything you want to do with the DOM or anything you want to do with data and d3 has you covered.

I’ve noticed a lot of the things I’m building use a great deal of DOM manipulation and data manipulation, so it felt like a great thing to start playing with. It’s also worth noting here I’m using version 3, version 4 was recently released with a great deal of updates and changes, but as I’m learning and pretty much all the tutorials still use version 3, I’m going to stick with that. When I’m more comfortable with the library I can start to look at the update documentation.

Just have a glance down the API reference and we can see some totally useful data functions, array methods, thing’s for colour, layout, timing… well loads of stuff which is great for what I’m doing here. Not just with creating, but keeping and manipulating, which is easier than me writing it all out manually, and will be much better performance wise as well.

Ok, ok, enough evangelising. Let’s get using.

We need data to get d3 to really do anything, but we have that, we have this array of velocity values from our frequency; frequencyData. We can get d3 to create an element for each item in the array, attach the relative data to each element and then start to use it to manipulate the DOM element, whether that be change it’s size, position, colour of whatever.

Number Thirteen: Super Chart

My inspiration for this series is from the book Super Graphic by Tim Leong. It's a bunch of data visualisations from and about comic books. Check it out it's pretty sweet. Perfect for inspiration for audio vis!

So let’s start with this example:

At the moment we have 256 items in our frequency array, piping that into d3 would mean it would create 256 elements, one for each frequency (unless we did some array manipulation, but for simplicities sake, let’s just reduce the number of elements).

So let’s change it to less: frequencyData = new Uint8Array(16); Remembering to change our fft size as well as we don't need it to be as big: analyserNode.fftSize = 32;

Now all we need is a little d3 “enter and exit” pattern. This is where we take the data and create a new element for each item, bind the data item to said element and add some params using said data.

// enter and exit
var svg = d3.select('svg');
var circle = svg.selectAll('circle'),
  radius = window.innerHeight/2.5-50;

function drawCircles() {

  requestAnimationFrame(drawCircles);
  analyserNode.getByteFrequencyData(frequencyData);

  circle = circle.data(frequencyData);

  circle
    .enter().append('circle')
    .attr("cy", function(d, i) {
      return Math.round(window.innerHeight/2 + (radius*Math.sin((2*i*Math.PI)/16)) );
    })
    .attr("cx", function(d, i) {
      return Math.round(window.innerWidth/2 + (radius*Math.cos((2*i*Math.PI)/16)) );
    });

  circle
    .attr("r", function(d) { return d/2; })
    .attr("fill", "hsla(200,50%,80%,0.7)")
    .exit().remove();
}

Here we’re creating a circle for each item in the frequencyData array, then positioning them in a circle with a bit of maths. The params d and i being passed into the function are the data itself and the item number. So further below when we set the radius of the circle we can use the data, which as we know is the frequency velocity.

This all seems a little more succinct than how we were going about it before. In the final example I’m also creating a line, just to add a bit more 🤗

See the Pen Codevember AudioVis #13 by Rumyra (@Rumyra) on CodePen.

You can already see the difference in performance compared to previous days. I’m from the "apprehensive to use a library unless I need/know etc…"" camp of JS, but in this instance it’s really helping. Most of the rest of the example are probably going to incorporate it I can imagine. So as we go through the next few days we can see what else d3 has to offer.

Number Fourteen: Super Colours

What can I say - this one is probably the most me so far!

The technique is much the same as the previous example, just this time we’re creating SVG rect elements and doing some maths to position and colour them. The data is being used to adjust the brightness of the squares, although we could use it for anything. Another good example that would be good to live code at a gig.

See the Pen mOWKdL by Rumyra (@Rumyra) on CodePen.

See the Pen Codevember AudioVis #11 by Rumyra (@Rumyra) on CodePen.

The original idea is a function that would take whatever was in the DOM and reflect and repeat it around so it would automatically make it look awesome.

It's kinda there - it needs some tweaking depending on whether we have an animation or gif/video that's needing the effect. Something that take some params depending on whether we want it rotated or reflected would be the best final solution me thinks.

See the Pen Codevember AudioVis #12 by Rumyra (@Rumyra) on CodePen.

Let's see how that goes 🤓

AudioVis #9

NB This one comes with a warning. The way I coded this is highly UNRECOMMENDED. Not only was it a total ball ache, it doesn’t perform well and there are work arounds. It took what felt like days and the result is not amazing. If you’re wondering, I would probably use canvas for an audio vis of this nature in future. Hashtag learning, amiright?

So today I’m going to expand a little on yesterday and take influence from this crazy gif

But in my version, I want a shape for each of the low frequencies, the mid frequencies and the high frequencies, that change depending on the level we get back from the analysis.

I'm setting a load more custom properties than the previous codevember, so I'm looping over them in the JS. Things I learnt include:

• We actually don’t need to set those properties in the root block at the top of our CSS if we’re setting them within our JavaScript. They’re set there, so they get passed into the CSS regardless... nuice!
• Maths in CSS is hard, even with nice things like a calc function and shiny extras preprocessors like Sass give us. JavaScript is much better as maths, so I found keeping number crunching there is a lot better. Just pass the value you want in the CSS into the custom property.

See the Pen Codevember AudioVis #9 by Rumyra (@Rumyra) on CodePen.

This one was a great learning experience and great experiment, even if the final result wasn't ideally what I was after at the start. I would keep using custom properties to do things like filter effects and glitch's for final VJing rather than modifying multiple DOM elements with them in the future.

AudioVis #10: Blend Modes 😎

Inspiration:

I've actually written about using blend modes for this audio vis before. The make up of the visual itself isn't too different code wise to previous ones. I have some DOM elements, I am positioing them, I am animating them, the only extra feature I am encorporating is blend modes on the elements to see what effect that has.

It looks super nice, but with all the DOM elements I have with this one performance isn't so great. I can up it by making sure I add the will-change property in the CSS to any elements that have any other properties that are to change.

However I think we should probably move into a better, more performant way of creating and manipulating DOM els for audio vis, don't you?

See the Pen Codevember AudioVis #10 by Rumyra (@Rumyra) on CodePen.