So now I have a smattering of components that have cost me less than a tenner, the question is what I can do with them in the form of a project. Immediately I go searching the internet for massive and complex projects, such as weather systems and security keypads, but it is only right that I start somewhere simple. You can get much simpler than a blinking light, so this is the way I go.

Of course, it would help to know much more about how electronics work. While I feel I already have a rudimentary understanding of electronics, it never hurts to have a recap. I’ll be paraphrasing some of my findings as i go along, but 

Intructables have a great blog post here to get anyone started

The Arduino site has a wealth of tutorials, so I’ll be following the 

first of these tutorials, which is the ‘blink’ lesson

. The only difference is that I am using a breadboard and extra leads to make the process a little more clear and easier.

To make a blinking LED, you don’t even need anything other than the Arduino itself, as the Arduino has a number of LED status light that can be controlled. However, as I wanted to create my own closed circuit, I opted to get this code working with an external LED.

To make a closed circuit, I attach a lead to the ground port of the Arduino to position a1 of my breadboard. The LED is straddled across position b1 and b2, with the resister straddled across position c2 and c15. Another lead is put in position c15 and put into pin 13 of the Arduino board. The setup looks like this:


What this means now is that we have a closed circuit from the Arduino, linking the resistor and the led in the process, to pin 13. We can then use a small program to program pin 13 and therefore control the circuit.

/*
Blink
Turns on an LED on for one second, then off for one second, repeatedly.

Most Arduinos have an on-board LED you can control. On the Uno and
Leonardo, it is attached to digital pin 13. If you’re unsure what
pin the on-board LED is connected to on your Arduino model, check
the documentation at http://www.arduino.cc

This example code is in the public domain.

modified 8 May 2014
by Scott Fitzgerald
*/

// the setup function runs once when you press reset or power the board
void setup() {
// initialize digital pin 13 as an output.
pinMode(13, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
digitalWrite(13, HIGH); // turn the LED on (HIGH is the voltage level)
delay(1000); // wait for a second
digitalWrite(13, LOW); // turn the LED off by making the voltage LOW
delay(1000); // wait for a second
}

My first Arduino project

Modern Frontends Live talks about the Web, Web apps, Native apps as well as all THE FRAMEWORKS, LIBRARIES, BROWSERS, TOOLS, PLATFORMS, DATABASES, APIs and EVERYTHING ELSE that powers them up behind the scenes! Sorry about the shouting, but that’s how they sell the conference in the blurb. Will all the speakers scheduled on the website, once couldn't help but be initially impressed. I met up with my fellow UI enthusiast Mike R, and we proceeded to geek out in East London for a few days. Would I still be impressed after that? We shall see.

I don't need much of an excuse to go down to the big smoke, but if I'm going to, you have to live like a king and represent Nimble, then so be it.

Finding the Modern Frontends Live location was the first task, and quite a task it was. Not having been to the Excel centre before, I was unsure of the layout and where the ICC suite was. “Not a problem”, I thought, I'm sure everything will be signposted as expected. However, Any directions to the ICC suit itself were vague and the actual event that was festooned on any electronic boards was for a previous date and showing a show that was on previously. No, not one mention of the “Modern Frontends Live” title anywhere.

Eventually having to walk about 10 minutes along the entire length of the Excel, I eventually got to the event, grabbed my lanyard easily enough, and walked into the foyer that was betwixt the set of rooms that held the talks.

The first talk was about AG grid, one of the main sponsors, and how they tried to use native

Rendering. It was interesting how noticeably slower the native react component was slower. The profiler showed just how many individual elements had to re-render each time the table was resized. Native JavaScript was kicking arse. Of course, I'd seen such issues before, and they were no surprise to me at all. Going through the case study of how the company reached such conclusions was interesting. Actually seeing lines of code that were changed and moved (albeit I'm sure they were simplified for clarity) showed me that such development issues were not just the preserve of hacks like me, but actually real, living breathing developers too!

AG grid had not also one premium talk, but another one the following day. I noted that there were several ‘tiers’ of advertisers, from platinum to bronze. I'm not sure what you got extra for such banding and what price you paid, but understanding that these guys had a strong connection with React table, the free component that I use already use, I know they have to get their revenue from somewhere.

I was very impressed by the level of professionalism, level of detail and clarity that Jason Mayes delivered his keynote speech was inspiring and accessible. Talking about how to use TensorFlow and its data modelling to leverage AI in a syntax I can use was most empowering. I immediately wanted to use TensorFlow and do some stuff with it when I got back in front of a computer. What stuff that might be I don't know, but it certainly looked impressive.

Using a client's machine and the speed of the modern browser and the processing power of modern computers means that was can do a lot of AI stuff that we do today but with a fraction of the latency, as we are using local machines and JavaScript to do some fancy stuff. Image processing and visual effects are the most striking example I can recall.

I was rather excited to join the talk by Bolaji Ayodeji about building reusable UI components, but while it was a clever and coincide speech, I found that it was a little bit too much like teaching grandmother to suck eggs, in that I got the feeling that a lot of people knew the concepts in the room already and that the talk was probably set at a bit too low a level for some of us. Touching on their use with doesn't systems, MonoRepos and micro frontends, it was useful to get a refresher on such things at the very least.

Well, DevOps is not dead, of course, but that was the deliberately contentious title to the talk by Liam Hampton in what was his brief but important talk that helped anyone who had not joined the serverless revolution. He talks about how with the ability to create low-cost lambda-based websites versus on promise severe, a startup can now cost as little as £50k to startup compare top a cost of £5m before that.

There were some great talks that covered everything from new tooling such as LightFS, to the proper use of GraphQL. However, It was fascinating to watch the talk about the mass migration of the codebase at Stripe, a company specializing in their payment processing platform, when they decided to move from Flow to Typescript. A task that is impressive when you understand they did it with zero downtime. Effectively they created their own tooling, available to use on public platforms, that transferred code from flow to typescript. As a tongue-in-cheek example, they took a chunk of source code from Facebook, the creators of Flow, and transformed it into typescript with their configurable too. Very impressive.

Have you ever tried to scoop up crisps with a flat ladle? Well, you’re in for a treat here!

Jessica Sachs was a great personality to listen to when she talked not only about Cypress and Component testing, but also gave us a snippet of insight into her career. Some of the shonky code, the shenanigans into prod fixes and the failings on how code was structured. All very familiar, but in giving the talk, she managed to convey the play of cypress with jest and where component testing can help. She also reinforced the use of jest to still have a place for business logic, whereas cypress is god for component interaction testing and visual regression. We are of the same mind!

Ben Lesh, the primary contributor to Rxjs, gave a very detailed talk about the async await issues that plague developers and how we cannot trust the promise-based system that some more simple requests rely on. While he did provide some admittedly contrived examples, the point was to show how the library of observables was the one secure way in which to ensure that the single thread of an event loop is processed in the right way. JavaScript has had a proposal going on for several years for native observables. What about if you want just not observable without the whole RXJS? Async iterates are the best native thing we have but don't do the entire job. Luckily, Ben let us into the fact that Observables will be available as a tree-shakable as separate library in 2023.

So what did I take from the two days? I thought there were a lot of talks that were a bit too high level for my liking. Other talks I felt were very informative and gave me a few avenues of discovery that I was very keen to undertake when I got back to my development time. Hopefully, I can take some of the collective hum of creativity and programming that this event gave me and use it to do something new, different and exciting.

Mark Thomson - really energising talking about native apps and web

Supposedly there were supposed to be 3000+ attendees at the conference, and I can certainly tell you this was not the case. I don't think the rooms could have physically held that many people. It was the right amount of people for the space. But I know some speakers were oversold on this promise, and that a raft of expensive coding sessions on the day before were cancelled due to lack of take-up.

I do think overall it was a useful event to attend, but some elements were not so good, such as the catering (I do think I ate the blandest and underwhelming Coronation Bean sandwich), and I think the amount for money some of the later tickets were far too high. I got some useful insights into new and existing tool sets, and while the swag was disappointing, I found the Postman guys to be friendly, useful and providing a nice set of socks that I brought home.

Furthermore, I also got to speak to Kent C Dodds for a good while, and while I didn't completely geek out with him, there was some amount of starry eyes going on around him.

So will I go again? Sure, but only if I get the cheap early bird prices this time.

Modern Frontends Live 17-18th Nov 2022

So, being a geek interested in retro gaming, I've always fancied trying my hand at coding an old 8-bit game. The idea that you can create a piece of entertainment with such limited resources always made me want to try it. I consider myself a fairly bright chap, but the idea of coding in assembly or machine guide just beguiles me, and even basic seemed to be a bit of a leap. Still, If I'm going to try anything, I may as well start with some Basic.

So I dusted off my old spectrum and try to type in my first ever program that I learned to code:

10 PRINT "HELLO FROM JAMES"
20 GO TO 10
RUN

Christ, that was hard work. Have you ever tried to type in one of these?


It's nigh on impossible. Those little spongy keys that, while iconic and retro looking, are just utter rubbish to type on.

But hey, there are emulators, let's try that. There are emulators for the Mac such as Fuse (

) and even JavaScript-based ones like JssSpeccy (

) that you can try on, but then I realised that even then, editing a spectrum Basic screen and trying to save it through some clunky tape recording was going to be hard work too. I thought to myself, there has to be a better way!

And there is! We can use a VS Code combination to save basic *.bas files. We even have a plugin called ZX Basic (

https://marketplace.visualstudio.com/items?itemName=jsjlogin.zxbasic

), which is an extension that helps us format and check the basic file format. Ok, so far so good. But how do we get a bas file from a pc onto the spectrum? The secret sauce is the Boriel ZX Basic compiler (

https://www.boriel.com/pages/the-zx-basic-compiler.html

) which is based in Python. It can turn a basic *.bas file into a spectrum tape, all compiled and read to go as a bin, tzx or tap file and in machine code. Yes, it can take that slow-as-heck basic and turn it into something fast and wondrous. OK, there is more to being a spectrum programmer than writing in basic, but needless to say, I'm excited about what I can achieve.

The great thing about using the ZX Basic extension for vs code is that not only do you get code syntax highlighting and auto-complete, but also it has support for the Boriel extended basic language so that you can actually do a lot more with basic code than you can do with ordinally basic. This means I can possibly hook into more powerful commands and really leverage that machine code power! Or at least that's the theory.

So far, I have created this example hosted in Vercel (

https://github.com/jayjaybeeuk/spectrum-game

). I'm hoping to add some more interesting games to this stack, but for 30 mins to set up a quick pipeline it was relatively easy. In my next article, I'll go into more detail about how I set up the pipeline.

https://richhewlett.com/2021/06/12/coding-in-spectrum-basic-again/

) which led me down this path of discovery!

Blog.

Coding with a ZX Spectrum with VS Code - Part 1

More Stories

My first Arduino project

Modern Frontends Live 17-18th Nov 2022