DEV Community: ruthmoog

Book Club: Eloquent JavaScript. 4 Data Structures: Objects and Arrays

ruthmoog — Tue, 28 May 2024 16:46:09 +0000

Eloquent JavaScript A Modern Introduction to Programming, by Marijn Haverbeke

Part i: Language

Chapter 4: Data Structures: Objects and Arrays

If you read any of this chapter, please go ahead and discuss what you thought in the comments!

📝 I'll add my notes here when I've read the chapter.

📆 9th May 2024.

📚 On Storygraph? Join the Readalong!

Hidden Figures: disguising images from machines

ruthmoog — Fri, 26 Apr 2024 10:51:08 +0000

Artists who share their work online are frustrated by the theft of their style and content by machine learning (ML) tools. It's possible for artworks to be used for training of generative artificial intelligence (AI) without permission, and without guidance or accountability, tech giants have investigated buying publishing houses to access non-public content.

There is potential in these fashionable technologies as a force for good, but we don't have established ethical policies in place to make them fair - so artists and developers are finding ways to disrupt malpractice and artwork theft.

Poison attacks

Enter Glaze and Nightshade, tools which can manipulate content so it will disrupt or poison ML training data.

Nightshade can help deter model trainers who disregard copyrights, opt-out lists, and do-not-scrape/robots.txt directives
- What is Nightshade? The Glaze Project Team

Glaze works by making changes in the digital image file, which are not obvious to the human eye, but are significant enough to distort the input to an AI training model. That can result in a picture in one style being interpreted as a differently style. e.g. you see a painting in the style of Van Gogh, but the AI 'sees' a picture in the style of Man Ray.
This works (for now!) on artificial neural networks which use a variational autoencoder (VAE) architecture, but it doesn't work on networks that don't rely on VAE.

Nightshade works in a similar way to Glaze - they're from the same team - but it essentially gaslights the AI model into learning misinformation, and this is a deterrent for training on private content.
But, it does affect the lightness of the original image to the human eye. e.g. you see a 'shaded' photograph of a sunflower, but the AI could 'see' a photograph of a sunflower alarm clock, and with enough data could learn that sunflowers have clock hands and bells.

Nightshade's goal is not to break models, but to increase the cost of training on unlicensed data, such that licensing images from their creators becomes a viable alternative.
- What is Nightshade? The Glaze Project Team

Is it worth it?

Keep in mind you're fighting fire with fire in terms of compute:

Glaze uses around 5 Gb of memory and a substantial amount of CPU computing. We are working on reducing these numbers.
- User guide The Glaze Project Team

Ultimately it depends how ignoble and determined the party is that is trying to crawl the artwork. Nightshade will be most effective against large volumes, and Glaze is a temporary measure which could become ineffective long-term. But there's nothing to stop users applying both measures, and yet little else to do without keeping content off the web (and good luck with that). If the content is there, it cannot also not be there.

Resources

Book Club: Eloquent JavaScript. 5 Functions

ruthmoog — Sun, 10 Mar 2024 16:55:15 +0000

Eloquent JavaScript A Modern Introduction to Programming, by Marijn Haverbeke

Part i: Language

Have you noticed https://eloquentjavascript.net/ has made a 4th edition (2024) available?

4th Edition cover illustration by Péchane Sumi-e

Chapter 3: Functions

If you read any of this chapter, please go ahead and discuss what you thought in the comments!

📝 I'll add my notes here when I've read the chapter.

📆 End of March 2024.

📚 On Storygraph? Join the Readalong!

My Notes

Wow I took a lot of time to get through this chapter - have just been busy.

This chapter has some nice and simple exercises to play with functions, and it explains about scope, ways to define your functions and, understanding the call stack.

The optional and default arguments were an interesting reminder for me that was useful for the exercises, plus there is an example purely for playing with recursion.

We_Coded 2024

ruthmoog — Fri, 08 Mar 2024 18:13:00 +0000

Another year in tech and I (she/her) have so far stuck it out beyond the 3 year drop-off for women. It ain't no thing!

How can we actively embrace equality in the tech industry?

I was fortunate to be invited to a talk by intersex activist Valentino Vecchietti (she/they), focusing on intersex inclusion in science and scientific publishing for this years international Women's Day.

This day can be full of cringe to be honest, as people awkwardly try to be inclusive of women and overtly recognise women's gender it's just a bit strange.
Making sure to include trans women and non-binary and intersex people into the fold goes a long way for inclusivity. Be it a pride flag emoji reaction, using your pronouns, or making sure that we talk about women and gender minorities instead of just women or only females... this goes a long way to showing simply that you care about others.

If you'd like to use the global inclusive pride flag it's freely available with usage support at https://www.globalinclusiveprideflag.com/

Happy International Women's Day

If you're not sure you're feeling the Women's Day vibes, try wishing your virtual interactive assistant a happy international Women's Day. I'm sure your robot will be ready to tell you about a historical figure worth raising a toast for.

Book Club: Eloquent JavaScript. 4 Programme Structure

ruthmoog — Wed, 31 Jan 2024 16:10:29 +0000

Eloquent JavaScript A Modern Introduction to Programming, by Marijn Haverbeke

Part i: Language

Sorry that this next chapter is later than expected, I had a lot going on at the end of last year including a new job as a Frontend Dev. But I will try to stay on track, please feel welcome to join in!

Illustration by Madalina Tantareanu

Chapter 2: Programme Structure

If you read any of this chapter, please go ahead and discuss what you thought in the comments!

📝 I've removed chapter 3 from this post (because I forgot there are exercises too!) and I've added my notes below.

📆 End of Feb 2024.

📚 On Storygraph? Join the Readalong!

Who should read this chapter?

This chapter is a general and basic overview of the terminology and syntax used in JS. So it will be useful to read carefully if you're new to programming, otherwise skim it. I find it difficult to use the terms in the book (e.g. 'binding' because I would usually say var or constant) but it's good to be aware of the vocab.

What do we learn?

In a nutshell, here we learn that programs are made of statements, which can contain statements including expressions, which can be made of expressions! Loops and conditions can interrupt the top-to-bottom control flow, with bindings for tracking state and filing data under a name. Functions are like blocks of program, where a function call is an expression which can produce a value.

Exercises

There are three fairly simple programming logic exercises at the end of the chapter, which are worth doing to practise loops - especially the classic FizzBuzz.
The hints provide a couple of solutions, so if you didn't need to use the hint, do read it after writing your solution.

Book Club: Eloquent JavaScript. 3 Intro + Values, Types, and Operators

ruthmoog — Thu, 12 Oct 2023 10:43:42 +0000

Eloquent JavaScript A Modern Introduction to Programming, by Marijn Haverbeke

Introduction

Chapter 1: Values, Types, and Operators

If you read any of this chapter, please go ahead and discuss what you thought in the comments!

📝 my notes from these chapters are below.

📆 End of October 2023.

📚 On Storygraph? Join the Readalong!

Chapter 1 is very high level overview of the syntax used in JS, I think for readers with some experience of JS already this content won't be new info and could be skipped - but the introduction might be worth reading or skimming as it's got some context behind the language that many JS developers might not know.

Book Club: Eloquent JavaScript. 2 Discussion Qs

ruthmoog — Thu, 12 Oct 2023 10:13:30 +0000

I'll answer these questions when I've finished the book, but feel free to answer these here or to use them for your own book club.

Eloquent JavaScript A Modern Introduction to Programming, by Marijn Haverbeke

Discussion Questions

Do you have a favourite project from the book? If so, why? What did you like about it?
The book uses examples in a sandbox in the browser. Did you use the sandbox? If so, how did it help your understanding? If not, did you follow the examples another way?
Did you have an opinion about JavaScript before reading this book? Did the book make you think differently about the language?
Were any of the chapters or topics frustrating for you? Is there anything you still don't understand?
One of the book's aims is to explain how to organize and clarify your code. How has your coding style improved from reading this book? Did you learn anything new about how to write code?
Had you written a programming language before? If not, did this exercise help you see how other programming languages might work?
Is there anything you'll learn more about after reading this book?
Would you recommend this book? Who would enjoy reading it?

Book Club: Eloquent JavaScript. 1 Welcome

ruthmoog — Thu, 12 Oct 2023 09:55:50 +0000

Welcome to this tech book club! I'd love for you to join me reading this title. I've chosen this book after it was suggested by Chris, who thought it would be a good topic for me as I move into more front-end development.

Eloquent JavaScript A Modern Introduction to Programming, by Marijn Haverbeke

Illustration by Madalina Tantareanu

About the book

Eloquent JavaScript dives deep into the JavaScript language to show you how to write beautiful, effective code.
...

You start by learning the basic structure of the JavaScript language as well as control structures, functions, and data structures to help you write basic programs. Then you’ll learn about error handling and bug fixing, modularity, and asynchronous programming before moving on to web browsers and how JavaScript is used to program them.

Published by no starch press where you can buy the book in paperback.
Or read for free online at eloquentjavascript.net.

About the Author

Marijn Haverbeke is a programming language enthusiast and polyglot. He's worked on a wide range of software systems, from databases to compilers to editors. He runs a small business around his open source projects.

Reading Information

The book has 21 chapters and approx 481 pages.
My copy is the online 3rd edition.
The book is divided into 3 parts (language, browser, node) and an introduction

All source code is available online in an interactive sandbox, where you can edit the code, run it, and see its output instantly.

The code examples and sandbox are at eloquentjavascript.net/code/.

Some translations are available at eloquentjavascript.net

Book Club: Grokking Algorithms. 7: Where to go next and Final Discussion

ruthmoog — Thu, 12 Oct 2023 08:58:09 +0000

Grokking Algorithms An illustrated guide for programmers and other curious people, by Aditya Y. Bhargava

Chapter 11: Where to go next

If you read this chapter, please go ahead and discuss what you thought in the comments!

📝 This is the last chapter in the book, and is a summary of 10 algorithms for further optional reading. You can read my notes below.

Where to go Next

key topics covered: suggestions, binary search tree, The Fourier Transform, Parallel algorithms, MapReduce, Bloom Filters, HyperLogLog, SHA, Diffie-Hellman, key exchange, locality-sensitive, hashing, linear programming

Binary Search Tree

Good for learning about databases and data structures

A binary search tree is faster for insertions and deletions than a sorted array in average, because a binary search tree allows you to find or insert in a more granular but sorted way. They don't allow random access, and the good performance times are based on a balanced tree (too many nodes on one side will be imbalanced, and performance will be affected - red-black trees are self-balancing so that might be a good option).

^{copyright Manning Publications, drawn by adit.io}

Inverted Indexes

Good for learning about search

This data structur is a hash that maps words to places where they appear, and is commonly used in search engines.

The Fourier Transform

Good for compression and formats like MP3 or JPG, and music tech

This algorithm can take a digital music signal & break it into individual frequencies so that the file can be reduced (like in MP3) or frequecies can be boosted or reduced in music production. It also works for images in the same way, and can be used in applications like earthquake prediction and DNA analysis, with those digital signals.

Parallel algorithms

Good for speed optimisation

These allow you to spread work out in parallel so that it can be completed sooner. But they're hard to design, test, and predict the cost benefit of as the time gains aren't linear.

MapReduce

Good for speed and load balancing

This is a popular distributed algorithm (a subtype of parralel algorithm). Distributed algos are useful when you have a lot of work to do as they will cut out a lot of time to do it by spreading work across multiple machines. an example is Apache Hadoop.

Bloom filters

Good for quick approximations

These are probabilistic data structures (they give you a likely correct answer but it could be a false positive). This is an alternative to a hash (which will give you the correct answer) but for a large hash index might not be practical, and a bloom filter approximation might be good enough.

HyperLogLog

Good for quick approximations

A similar probabilistic algorithm that approximates the number of unique elements in a set.

SHA algorithms

Good for unbiased comparison
This is a secure hash algorithm (a SHA is a hash function, which generates a string in this context called a hash). Unlike has functions which goes from (e.g.) string to array index, SHA goes from string to string. You can use the SHA to tell if objects, files or strings (like passwords) are the same without revealing the original content. [note: this is not the gold-standard for password-hashing]

Localilty-sensitive hashing

Good for biased comparison

SHA is locality insensitive - similar starting strings will not have similar hashes. A locality-sensitive hash such as Simhash will generate a string that is similarly represented so that you can compare two hashes for similarity of content - e.g. for plagiarism checks.

Diffie-Hellman key exchange

Good for cryptography

The Diffie-Hellman algorithm is used for message encryption. It has a public key for sharing which is used to encrypt a message, and a private key which can decode the message and is 'owned' by one person. It's hard to decode without the private key and the cipher does not need to be communicated so it is still used in practise alongside RSA.

Linear programming

Good for optimization
Graph algorithms in the book are a subset of linear programming, which uses the complex Simplex algorithm.

Discussion for this chapter

Are there any algorithms you're going to investigate that aren't recommended in this list or in the book?
Have you used any of these 10 algorithms? Or, did you consider any of these but opted for a different algorithm instead?

Discussion for the entire book

Please visit the discussion questions post to reflect on the book, and add your answers to the comments along wit any of your own questions or reflections you have.

Book Club: Grokking Algorithms. 6: Dynamic programming and k-nearest neighbours

ruthmoog — Wed, 13 Sep 2023 14:42:06 +0000

Grokking Algorithms An illustrated guide for programmers and other curious people, by Aditya Y. Bhargava

Chapter 9: Dynamic Programming

Chapter 10: K-nearest Neighbours

If you read any of these chapters, please go ahead and discuss what you thought in the comments!

📝 you can read my notes below.

📆 The next post will be on the final chapter, chapter 11. I'll aim for end of September 2023.
If you're on Storygraph and want to join me, say hi and I'll start a Buddy Read.

Dynamic Programming

Key topics covered prioritisation, Levenshtein distance ...

Solve sub-problems to solve bigger problems with dynamic programming (not to be confused with dynamic programming language). Start by using a grid of sub-problems x scenarios. Always start with a grid, and the cells are usually filled with what you're trying to optimise. Each cell will be a sub-problem.

The order of the rows doesn't matter, but the column vs row axes can matter. Adding another item to your grid might mean you have to recalculate at a finer granularity e.g. size in .5lb increments.

There is no solution in dynamic programming for splitting the existing items - you would use a greedy algorithm for that.
Dynamic programming only works when each sub-problem is discrete (doesn't depend on other problems), but it's possible for sub-problems to have their own sub-problems.

K-nearest Neighbors

Key topics covered feature extraction, regression, prediction, use cases, limitations, classification, normalization / normalisation, weighting, machine learning, pythagorean formula, OCR, optical character recognition, Naive Bayes classifyer ...

The K-nearest neighbor (KNN) algorithm is simple and the first choice if you want to classify something. It depends on feature extraction; you have to think about many different considerations to pick the right features. You should choose,

features that correlate to what you're trying to classify or regress
features that don't have a bias (e.g if you ask a group how much they like cats, you won't know how much they like dogs

Use the chosen features to plot items on a graph, so you can find the distance between then using the Pythagorean formula a2 + b2 = c2, or for an x-y graph, distance = √(x1-x2)² + (y1-y2)².
The same formula can be used to calculate the distance in several dimensions.

^{copyright Manning Publications, drawn by adit.io}

Normalisation allows you to compare ratings at the same scale, by adjusting the overall average ratings to be comparable.
Weighting lets you prioritise particular given points as more influential in your calculation. It's like giving special points an extra vote.
Regression is when you use the k-nearest neighbours to forecast or predict an outcome, by taking the average of the k-nearest neighbours.
Naive Bayes classifier spam filters use this algorithm which is similar to KNN; you train your classifier on some data (e.g. "legit email subject" = not spam / "you won $ sign up now!!1" = spam). Naive Bayes figures out the probability that each word would show up in a spam email. This wouldn't work well for something like predicting the stock market, because there are no good features to use for regression.
OCR (Optical Character Recognition) Is when you take a photo of text and the computer can automatically read or digitise the text for you - 1. Learn on a bunch of images the features of a text character (this is called training), then 2. when you have a new image, extract the features and see what it's nearest neighbours are. Generally, OCR algorithms measure lines, points and curves. The same ideas are used for speech or face recognition.

Key Takeaways

Dynamic programming is useful when you want to optimise given a constraint (e.g. the max value of goods you can fit in a bag). Use it when,

the problem can be broken into smaller problems
the smaller problems don't depend on each other

The values in the cells are (usually) what you want to optimise
Theres no single formula for calculating a dynamic programming solution
KNN is used for classification (categorising things into groups) and regression (predicting a response).
Feature extraction means converting an item into a comparable like a number.
Picking good features is important for KNN to be successful.

Discussion

Can you think of any other real-world examples that might use dynamic programming to find a longest common sub-string? The examples in the chapter were DNA sequence alignment, word wrap in word processing, git diff, spell check, and plagiarism detection
Have you written a program using a dynamic programming formula - what did you learn when applying the formula in code? Did you use a grid?
Have you worked on feature extraction? How were the features chosen? Were they the right features?

🩰 Schedule automated tests; become premier ballet artiste

ruthmoog — Fri, 01 Sep 2023 08:52:08 +0000

I've been checking this page of the Royal Opera House website everyday lately:

^{The website shows three sold-out workshops with The Royal Ballet.}

There's three sold out events and I want to go to any one of them, so I am keeping an eye out for return tickets going on resale. But wait! Computers can help automate this...

1. Write a test to check the page automatically

I am not sure how the page will look when a ticket goes back on sale, but I am confident that the page will change so that the header with the words "Sold out" do not appear 3 times. (I expect this will also decrease by 1 after any of the dates have passed - but I haven't written this into my test yet).

I created an empty Vue.js project - I don't need a UI, I just want to use tests, so Vue will create a dummy project for me.

Playwright

I am going to use a browser based testing tool called Playwright (But you could use Capybara, or Selenium WebDriver etc.).

First I'm going to write a 'Hello World' style test to make sure I am on the correct page. When I navigate to the url, do I see the title I expect?

test('a hello world check that we have the right page', async ({ page }) => {
  await page.goto('https://www.roh.org.uk/tickets-and-events/dance-with-the-royal-ballet-dates');
  await expect(page).toHaveTitle(/Dance with The Royal Ballet/);
});

Then, I'll write my useful test. I want the headless browser to go to the webpage at the given URL. I'm using JavaScript, so I am going to make my test method async and use await for actions that will create a Promise which needs to be fulfilled.

I used the Chrome DevTools to investigate what elements are used for the "Sold out" text. The Inspect tool tells me this is a h4 and therefore it has the heading Role.

^{The element has a 'heading' Role.}

I use Playwright's getByRole method with arguments describing that the role I want is a heading, with the exact text "Sold out".
Then I can add an assertion that I expect there to be three sold out items on the page - I made sure to break my assertion to check that the test can fail, before using the correct assertion.

test('check for sold out items', async ({ page }) => {
  await page.goto('https://www.roh.org.uk/tickets-and-events/dance-with-the-royal-ballet-dates');
  const soldOutItems = await page.getByRole('heading', { name: 'Sold out' });

  // Expects page to have three Sold out items.
  // If there are not 3 sold out items, there may be returns for sale!
  await expect(soldOutItems).toHaveCount(3);
});

The test file on GitHub

2. Trigger the test workflows on automated schedule

I've pushed my changes to my GitHub repo, and use Actions to set up an automatic test run.

The playwright.yml file is automatically configured to run when code is pushed or a pull-request is merged, and it will run the browser tests:

name: Playwright Tests
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    ...
    - name: Run Playwright tests
      run: npx playwright test

To run these tests on a schedule, I need to add another item within the on section:

  schedule:
    - cron:  '1 1,10,15 * * *'

This uses the POSIX cron syntax to add a schedule event. The example above will schedule the tests to run at 1 minute past 2am, 11am and 4pm local time (or, 01:01, 10:01, 15:01 UTC).

The GitHub Actions docs explain how to use schedule events to trigger workflows, including how the cron syntax works.

For the time being, I have guessed which intervals to use - but I have contacted the box office about when tickets are released on the website, so that I can run the tests as few times as possible.

Workflow configuration YAML on GitHub

And with that, my alerts (ballerts...) are done. GitHub will run my tests at the given times (deferring for heavy usage times) and their email notifications will let me know if there is a test failure and therefore that I should jump over to the website to try and buy a ticket (or update my test!).

^{｡･:*:･ﾟ☆Graceful curtsy☆･ﾟ:*:･｡}

Book Club: Grokking Algorithms. 5: Dijkstra's algorithm, greedy algorithms

ruthmoog — Tue, 29 Aug 2023 16:23:52 +0000

Grokking Algorithms An illustrated guide for programmers and other curious people, by Aditya Y. Bhargava

Chapter 7: Dijkstra's algorithm

Chapter 8: Greedy algorithms

If you read any of these chapters, please go ahead and discuss what you thought in the comments!

📝 you can read my notes below.

📆 The next post will be on chapters 9 - 10. I'll aim for September 2023.
If you're on Storygraph and want to join me, say hi and I'll start a Buddy Read.

Dijkstra's algorithm

key topics in this chapter: weighted graphs, unweighted graphs, Dijstra's algorithm, cycles, positive and negative weighting ...

The shortest path from A to B is not always the fastest path. Dijkstra's algo finds the fastest path, by assigning weight to the edges

Cycles

A cycle means you can loop back to the same node.

Following the cycle never gives you the shortest path.
An undirected graph is a cycle
Dijkstra's algorithm only works on
- graphs with no cycles
- graphs with a positive weight cycle (if the weight of a cycle is negative when looking for the shortest path, you'll be stuck in an infinite loop calculating around the ever decrementing cycle)

Path found with Breadth-first search:

Path found with Dijkstra's algorithm:

Greedy algorithms

Key topics covered Impossible problems, NP-complete problems, approximation algorithms, greedy strategy, sets, union, difference, intersection, fractorial function...

This chapter covers a few scenarios where writing accurate algorithms is difficult. I found this the hardest to get my head around, because the example algorithms are not smart my mind was automatically trying to optimise the behaviour without realising it.

Think I might need to revisit this chapter!

The classroom scheduling problem: Find the most classes that can be held in the classroom by selecting whichever class ends first, then repeat starting after the previous classes end.

The knapsack problem: If you use the process above to steal expensive items that weigh a lot for your knapsack, it won't give you the optimal solution ... but you'll get pretty close, and sometimes that's good enough.

The set-covering problem: Make a power set (calculate everything), then choose the best answer. It takes a long time to do this... O(2^{^n})

The travelling salesperson: Find the most efficient route between x calling points. The number of possible routes becomes very big, very fast (fractorial function)

NP-completeness

To figure if a problem is NP-complete, look for...

Algorithm runs quickly with a few items but slowly with a lot of items
"All combinations of x" usually suggests NP-completeness, combinations can't be broken into smaller solvable sub-problems
Involves a set and is hard to solve
You can restate the problem as the set-covering problem or the travelling salesperson problem

Key Takeaways

Use Breadth-first search for the cheapest path in an unweighted graph, and Dijkstra's algorithm for the cheapest path in a weighted graph
If you have negative weights use Bellman-Ford algorithm and not Dijkstra's algorithm
Sets have some cool behaviours
- Intersection (select items in BOTH sets)
- Union (select all items)
- Difference (select items NOT in both sets)
NP-complete problems are when you calculate all scenarios to figure out the shortest/smallest one
- e.g. the travelling salesperson, set-coverage problem
- they have no known fast solution at scale
- it's best to use an approximation algorithm instead
Greedy algorithms hope to end up with a global optimum, but optimising locally
- they're easy to write and fast to run so they make good approximation algorithms
- Greedy algorithms: at each step, pick the optimal move