web-goddess

Category: Computers

  • duckyPad

    duckyPad

    I’ve been a Twitch streamer for six months now. Isn’t that weird? I’ve noticed that a lot of the really fancy streamers use an elgato Stream Deck as part of their setup. This is essentially a “macropad” – a little programmable keyboard that you can set up so that clicking a button kicks off a series of actions. People use them for adding sounds and graphics to their streams, replying to comments, even controlling lighting and cameras. They’re not cheap though, and as much as I coveted one, I didn’t think I’d use it enough to justify the expense.

    Then somehow I found out about the duckyPad. This is an Open Source “do-it-yourself” mechanical macropad, and all up the components come to about half the cost of the Stream Deck. It has a very simple little scripting language you use to program each key, and it has a little screen that shows what each one does. You can have 32 different “profiles” (set of 15 keys), which means up to 480 different key actions. And it also lights up! I decided to order one and explore what I could do with it.

    Here’s what it looks like straight from the box if you order the standard components:

    duckyPad unassembled

    Putting it together was actually very simple following the instructions in the Assembly Guide. Man, those tiny 2mm standoffs are awfully small though, even for my hands! The only difficulty I had was getting the keyboard switches inserted. They required a little more pressure than I expected, and I was really paranoid that I’d break one or bend one of the pins. As it turns out, when I had the thing together and turned it on, one of the keys was indeed dead. I pulled it off and saw that, yep, I’d bent one of the pins flat. Luckily the Snook whipped out a pair of pliers and managed to straighten it out, and once reinserted it worked fine. So yeah, the instructions say over and over to be careful for bent pins, and now I understand why!

    duckyPad

    The duckyPad comes pre-programmed with a couple different profiles, but most of them were Windows-specific. I installed the Configurator app and used the provided USB card reader to plug in the SD card. Then I was able to start creating new profiles and scripts.

    duckyPad configurator

    The duckyPad is literally just sending off key presses, just like you’re typing on your normal keyboard. So anything you can do via keyboard shortcut, you can trigger with the duckyPad. The critical thing for Mac users is invoking Spotlight with “COMMAND SPACE”. That’s what you use to open apps and change focus. I also found that often the duckyPad is too fast and I needed to insert a DELAY before subsequent key presses (like between opening the browser and typing in a URL).

    One annoyance is that some apps’ keyboard shortcuts only work while the app is in focus. If you’re using Windows, there’s an “Auto-switcher app” that will automatically switch profiles based on which app is foregrounded. There’s currently no Mac version (someone is working on it), so I’ve found it helpful to have a dedicated key that switches focus back to the desired app (especially when presenting or streaming).

    I’ve spent a few weeks now tweaking and refining my setup, and I keep finding new things to automate. With some of these, I just cannot remember the keyboard shortcut so having a button helps. With others, I’m finding that I already have the muscle memory for the keyboard shortcut so I may not need the macro. The ones that get the most use by far are volume control (much better than the stupid Touchbar on my Mac) and the “mute” shortcut (used to invoke Mutify and turn on/off my microphone), so I’ve reproduced those as the bottom row of keys across multiple profiles.  But read on to see what I’ve got so far…

    And if you have any suggestions for things to add, please let me know!

    (more…)

  • Building the Oscar Contest entry form

    As always, I like to use the Oscar Contest as a way to try to learn something new. This year I decided to build it using AWS Amplify, a set of tools and services that can be used to quickly build and host mobile and web apps across a range of frameworks. I’ve somehow managed to avoid touching React, so I figured I might as well use that too. Here’s the basic architecture I went with:

    Contest architecture

    I figured it might be fun to walk you through the process I used in case you’d like to try something similar. The first step (if you haven’t already) is to install the AWS CLI and Amplify CLI and get them configured with your AWS account credentials. Then I created the basic React project using this command:

    npx create-react-app oscars2021

    That will download a bunch of stuff and set up the basic project files for you.

    You can then switch into that directory and start the app to verify it’s working.

    cd oscars2021
npm start

    Running React app

    Now it’s time to hook your project up to Amplify, using this command:

    amplify init

    A wizard will walk you through setting up various parameters for your app, including your preferred code editor and the type of app you’re building. Here’s what I selected:

    Amplify configuration

    This will initialise your project in the cloud and set up some resources for you.

    Now it’s time to add storage, which in my case meant an Amazon DynamoDB table. This is where I’d be storing each entry as it came in.

    amplify add storage

    This will again kick off a wizard that will walk you through some configuration options. I selected “NoSQL Database” and then set up the columns that I wanted in the table.

    Database config

    I also selected “id” as the partition key, with no sort key, no secondary indexes, and no Lambda trigger.

    More DB config

    The next step is to add the API and Lambda function that will actually record the user’s entry. This is done with the command:

    amplify add api

    Again, a wizard will walk you through configuration. I created a REST API with the path “/entry” and created a new Lambda function using the Serverless ExpressJS template. I also gave the function permission to Create and Read from the storage (aka DynamoDB table) we just set up. I didn’t restrict access to the API, as I want anyone to be able to enter.

    API configuration

    Time to actually update the Lambda function! I went into my preferred code editor (Atom) and opened the project. The function is located in “amplify/backend/function/oscarsfunction/src/app.js”. There are some commented example methods that I deleted and replaced with the code below. This adds the AWS SDK (so I can save to DynamoDB), a method for generating random IDs, and the actual post method to save the entry. (You can download this code from my Github project here.)

    Function code

    The next step is to use Amplify to push the newly created backend storage, API, and function to the cloud! You can do this with the command:

    amplify push

    Amplify will ask you to confirm which resources you’re deploying, and then it will start the process using AWS CloudFormation. This can take a little while.

    Amplify push

    If you make any changes to the function code later, remember to push the changes to Amplify so they are uploaded to AWS! In the meantime, it’s time to install some dependencies I need for the form frontend.

    npm install aws-amplify @aws-amplify/ui-react
npm install bootstrap
npm install react-bootstrap

    Once all that’s done, you can finally edit the form! The actual React app lives in “src/App.js”. I won’t go through everything I did (you can check the code out yourself), but basically I made sure to include Amplify (so the frontend can talk to the backend) as well as React Bootstrap. I also tweaked the CSS and added a couple images. Each time you save a change, the app will recompile and update in your running browser window. I also opened the “public/index.html” file and changed the title and description of the page.

    Form code

    You can also test out the form in the browser to ensure it’s working. When I opened the AWS Console and looked in DynamoDB, I could see entries being saved correctly into the dev environment table. 🎉

    The final step is to deploy the frontend, and Amplify makes this pretty easy too. I created a new repo at Github and then pushed my code to it.

    Github create repo

    Then I went to the AWS Amplify console and clicked on my app. If you click on the “Frontend environments” tab, you’re presented with a range of options for hosting your app.

    Frontend hosting

    I clicked the one for Github and then went through the process of granting access to my Github account. Then I selected the repo I’d just created with the code for my app, and left the branch set to “master.” On the next screen, I left checked the option to “Deploy updates to backend resources with your frontend on every code commit” and created a new “prod” environment as the target. I also had to create a new IAM role for the deployment process. Once you save and deploy, Amplify will grab your code from Github, run the build script and any tests you’ve configured, and deploy the resources into your account. The build for my app takes less than 4 minutes to complete.

    Completed deployment

    The beauty of the CI/CD pipeline is that whenever I modify the code and push it to Github, the whole process will kick off automatically! The Amplify console also gives me the URL to the hosted app, which is where you can enter the contest. When I check DynamoDB now, I can see entries coming through to the prod environment table. When the contest is finished, I can shut down and remove all the app resources by simply running this command:

    amplify delete

    If you’d like to try out Amplify yourself, I can recommend a couple resources. The AWS website has a very simple, step-by-step tutorial to Build a Basic Web Application that you can work through, but it doesn’t include React or the CI/CD part. If you want to copy what I did, check out my colleague Marcia’s YouTube videos  on  building a Contact form with React and automating your CI/CD deployments, which gave me the basics of everything I needed to build the contest entry form. Thanks Marcia!

  • Photo Post

    The Snook bought me a new mouse as an early birthday present. This sucker is 100% going to give me carpal tunnel, and I don’t even care. 🎮 #nes

    The Snook bought me a new mouse as an early birthday present. This sucker is 100% going to give me carpal tunnel, and I don’t even care. 🎮 #nes

  • A new home for w-g

    Well, that was an ordeal.

    A few weeks ago I got an email that my shared web hosting account (that I use for both this site and RoaldDahlFans) was up for renewal, and it reminded me that I didn’t like the host I was using. I was stuck on PHP5 and they were going to charge me more to move to a server with PHP7, and that pissed me off. So I asked Twitter what to do.

    Wordpress hosting tweet

    I got a lot of different answers, most of which were a LOT more expensive than I was spending. I was okay with going up a little bit, but these are both hobby sites rather than professional so anything over, say, $20/month was too much. A few folks threw out the suggestion to use Amazon Lightsail, which was intriguing. After all, it’s always a good idea to eat your own dog food. (I should also mention that these sites are and have always been hosted and paid for by me personally, so they’re not running on my employee AWS account or anything like that.)

    I thought I’d document the process that I followed for the sites, which was based on this blog post and this AWS tutorial. Truthfully, setting up a new WordPress site on Lightsail is super easy and takes less than hour. All the complexity was because I was migrating two very old and very crufty sites from PHP5 to PHP7 and trying to preserve twenty years’ worth of old URLs. So even though I encountered a few hurdles not described in the tutorials, I wouldn’t let that stop you. Read on for the details…

    (more…)

  • Weekly Meetup Wrap – February 11, 2018

    My attempts to scale back my number of meetups and tech events in 2018 is not exactly going to plan. Six weeks in, I’ve been to 14 different events… which, if I extrapolate, puts me at 120 for the year again. Eeek. But yeah, another four this week!

    The first was React Sydney, kicking off 2018 in the new event space at Domain. Organisers Jed and Jess have done a great job building this community over the years. A large crowd turned up to hear from four different speakers.

    The first speaker was Alex Reardon from Atlassian showing off some of the performance enhancements that have been made to react-beautiful-dnd (a library for making beautiful, accessible drag-and-drop lists with React.js). With really big lists (like, say, 500 items), dragging felt sluggish and janky. Alex showed off a few advanced techniques he and his team used to get it feeling snappy and natural. At it’s core, Alex said, optimisation is “about not doing things you don’t need to do.”

    The second talk was from Ajain Vivek from Yahoo7. Ajain’s fascinating talk was about rethinking how the state of your app stored in an object tree inside a single store can be transformed to memory model. He started off by talking about how human memory works, and how that could translate to a storage model for React. He finished with a demo that earned him applause from the audience.

    The third talk was from Lucas Chen, visiting from Brisbane. Lucas walked us through what’s new in React 16 (aka React Fiber). In a nutshell, there’s been a full rewrite but the API remains the same. Ultimately that means not much has changed in terms of your code, but it got faster! He also gave advice on how you can prepare for future changes.

    The final talk of the night was a last minute addition from another Atlassian speaker – Jamie Kyle. (Coincidentally, Jamie is responsible for at least part of my Twenty addiction because he kept tweeting photos at me of screenshots where he’d scored multiple 20’s. 😂)

    Jamie demoed his new tool Unstated.io (“Because it’s a JavaScript library I had to buy a .io domain. That was a really good use of $65…”), a tool for sharing state between React components. Simple, short, and useful!

    My second event for the week was the Sydney Data Science Breakfast meetup. The theme for this meetup was “AI will take our jobs and that’s ok,” and as you might expect it drew quite a crowd!

    The main speaker was Tomer Garzberg of Gronade, reprising his TED talk from this past December. Tomer began by describing factories in China that are entirely dark with no aircon or running water, and where workers labour 24-7. The catch is that all of the workers are robots. This scenario is becoming more and more common, and soon even white collar jobs will begin to be automated away.

    After his entertaining talk, Tomer joined three others for a panel discussion: Michael Allright from The Minerva Collective, Tim Garnsey from Verge Labs, and Peter Xing from KPMG. The audience peppered them with questions about the ethics of machine learning and AI, the economic impacts of replacing humans with robots, and how individuals and companies should cope with the coming disruption.

    My third event for the week was a brand new meetup: Big Data: Engineers and Scientists. Preact Recruitment are hosting these events and they’ve definitely gotten them off to a good start. It’s always nice to attend a meetup in the beautiful event space at Campaign Monitor!

    The first speaker was Simon Aubury from IAG talking about using Kafka to build streaming data pipelines. This was similar to the talk I heard Matt Howlett give a few weeks back, but Simon included lots of architecture examples that really helped everyone understand why Kafka is so useful. He also mentioned KSQL, which is still in developer preview but has a lot of folks very excited about its potential.

    The second talk of the night was a counterpoint to the first. Raul Beristain from Vocus Communications spoke about SQL on Hadoop using Impala, and what are the pros and cons of this approach. Sometimes the data you’re saving isn’t going to be updated later – like support call logs – so you don’t need a system that supports those transactions.

    The third and final talk was by Campaign Monitor’s own Binzi Cao. Binzo spoke at length about Spark SQL and using it to build a rules engine. He showed off some great examples where Spark SQL can make your life easier, like normalising timestamps from disparate data sources.

    My final event of the week was a hands-on Scala workshop hosted by Women Who Code Sydney at Quantium. I figured after my three-day intensive Haskell workshop, I should keep up my functional programming studies, right? 😜

    There were so many attendees we had to split over two different conference rooms! Marina was our facilitator and walked us through some exercises to build a CLI party planner application. Happily, I found that my experience in the Haskell workshop really helped conceptually with some of the things we did. Where I got hung up was on the particular Scala syntax, and my lack of knowledge around functions available in the core library. (That went for everyone, though.) I did manage to solve the last one entirely on my own, which resulted in a happy dance in my chair! 💃

    Of course, it didn’t help that Quantium’s offices are amazing. They opened the blinds in the conference room during lunch, and WHOA. It’s a good thing I don’t work in this office. I’d stare at that view every day.

    Other Stuff

  • My first overseas meetup! #lifeatpaypal #womenwhocode @wwcsingapore

  • Intro to Ravelry

    Today at the Inner City Knitters Guild meeting, I presented a workshop called “Intro to Ravelry.” It had been specially requested as a topic at the start of the year and the convenors invited me to do it. It was really fun! I ended up nattering on for about an hour, and everybody – even the experienced Ravelry users – found something new. I also had help from Stefanie, one of the other knitters, who covered the section on the Inner City Group’s library and pages. Here are my slides if you’re interested.

  • I just rode Cedar Point’s latest roller coaster via BB-8 Google Cardboard. Sooo tomorrow. (PS I might puke.)

  • New local meetup group

    Sydney Technology Leaders – Meetup – I attended this new-ish meetup group last night at UTS and it was fantastic. There were several speakers talking about challenges with scaling – scaling teams, scaling Agile, and scaling infrastructure. I will definitely be attending again the future. Highly recommended if you’re a local tech leader and want to meet and share ideas with your peers.

  • Ignite Sydney 13

    Tickets are now available for the next iteration of Ignite Sydney. I’m going to be presenting an updated and reworked version of my “Granny was a Hacker” talk, modified to fit the Ignite format: five minutes with slides that auto-advance every 15 seconds. You should come along!