Tony’s Learning Journal for Teaching Code
A dedicated journal for teaching programming and learning teaching fundamentals in general.
Navigation
June 9, 2023
- [Companion article](https://joyofcode.xyz/beautiful-presentations-with-svelte)
No sample code, but the companion article has an excellent breakdown of the project. In fact, I’m not even going to watch the video; hopefully the article is enough?
The project includes TailwindCSS. Normally, I don’t like opinionated dependencies in tutorials, but a utility library is probably the best way to quickly style up something in RevealJS.
Session Notes
pnpm
isn’t installed on this system. That’s embarrassing. It took awhile to decide how to install but went with Brew.
- I stopped mid-session and I’m continuing on a machine that does not have
pnpm
installed. I’ll probably continue using it in the future and found this SO for changing switching versions which suggests installing using Node Corepack.
- Received a 404 error on @fontsource when running this command but it worked with I installed the fonts individually:
pnpm i reveal.js @types/reveal.js @fontsource/manrop @fontsource/jetbrains-mono
- First try at blindly copy/pasting the code in the article created a lot of errors. Namely,
code.svelte
doesn’t exist in his examples and there are multiple versions of presentation.svelte
as the article continues. Going to start over from in initial install and walk through the vide and article side-by-side…
- Following the video was a much better idea. This is a great project that gives me everything I need (?) for my Slides project
- Most exciting is the ability to easily mix and match regular HTML and markdown slides. I can still pound out some quick md-only content and then go back and refactor it into more refined HTML using the fancy Reveal features.
Next steps/questions:
- Create a dynamic
/slides
endpoint(s) for slide content
- Figure out how to organize markdown imports vs HTML content
- Is there a way to generalize content that can is slide vs article agnostic? For example, can I use the same content for my slides that can also feed a finished blog article?
- How do I begin porting my existing content to the new system? Can I build a 5-slide series that can be inserted into a larger slide deck? Can one slide series feed multiple slide decks?
- What’s the best way to build common layout components like side-by-side comparisons (Good/Bad. Before/After, etc)?
May 29, 2023
Source: How to make code more testable, by factoring out and abstracting side effects
Unicorn: a markdown blog that is flexible enough for an educator to throw some code in one component and a relative slide url in another. The wrapper component places them side-by-side.
Slide transitions using Svelte movement?
Could svelte be used as a replacement for slide transitions in ReavealJS?
Slide 1: File access module
Slide 2: Placeholder module
Slide 3: Trololo module
Possible to use Svelte transitions to handle differences in DOM-manipulation triggered by RevealJS?
- list item fades
- diagram (above) swapping
- entire slide swipes
Further nerding
April 7th, 2023
Great reference from Rashid! He says this site was a game changer for learning the basics.
March 7, 2023
Teaching Loops
Teaching loops is very difficult. I found this article by a 40+ year old junior insightful:
He has almost convinced me to teach for...of
instead of forEach
. Almost.
January 12, 2023
Exit Tickets!
December 10 , 2022
Theo - ping.gg
- Top-shelf dev advice
- High-end topics
- Uses Excalidraw as a drawing tool. Seems cool!
- Great Breakdown of databases
- Tailwind as a Design System
December 2, 2022
Full stack documentation
September 29, 2022
I noticed some interesting search results while researching some ideas for having students build a game on the command line:
Search phrase: “best way to teach js”
Top result:
The 5 Best Ways to Learn JavaScript Fast in 2022 (For Beginners)
- Self-Guided Websites and Courses.
- Books.
- Coding Boot Camps.
- Meetups and Networking Events.
- Starting Your Own Projects.
It doesn’t look like there’s a lot of content out there for teachers? Maybe zooming out will lead to better results? Spoiler alert: the answer is a definite yes!
Search phrase: “the best way to teach programming”
Top result:
Ten quick tips for teaching programming
- Remember that there is no geek gene.
Competence at programming is not innate but is rather a learned skill that can be acquired and improved with practice.
- Use peer instruction.
In simplified form, peer instruction proceeds in several phases:
- The instructor gives learners a brief introduction to the topic
- The instructor then gives learners a multiple choice question that probes for misconceptions rather than simple factual recall. The ideal questions are those for which 40%–60% of students are likely to get the right answer the first time.
- Learners then vote on the answer to the question individually, thus formalising their initial prediction.
- Next, learners are given several minutes to discuss those answers with one another in small groups (typically 2–4 students), and they then reconvene and vote again.
- Then, the instructor can act on the latest answers. If all the learners have the right answer, the instructor can move on. If some of the wrong answers remain popular after group discussion, the instructor can address those specific misconceptions directly or engage in class-wide discussion.
- Use live coding.
Rather than using slides, instructors should create programs in front of their learners.
- Don’t go too slowly;
- Start with a partial skeleton that includes the boilerplate (preferred) or having it on hand to copy and paste when needed;
- Instructors may give students starter code that relies solely on concepts they have already mastered and then extend it or modify it with live coding;
- Ensure that learners have reference material available after lectures, such as a textbook, but recognize that students of all ages increasingly turn to question and answer sites such as Stack Overflow for information.
- Have students make predictions.
The key to making demonstrations more effective is to make learners predict the outcome of the demonstration before performing it.
- Crucially, their prediction should be in some way recorded or public, e.g., by a show of hands, by holding up cue cards marked with A, B, C, or D, or by talking to their neighbour;
- Instructors should be careful not to punish or criticise students who predicted wrongly but rather to use those incorrect predictions as a spur to further exploration and explanation.
- Use pair programming.
- One person (called the driver) does the typing, while the other (called the navigator) offers comments and suggestions.
- The two switch roles several times per hour.
- It’s important to put everyone in pairs, not just the learners who may be struggling, so that no one feels singled out.
- Use worked examples with labelled subgoals.
Students perform better when worked examples are broken down into steps (or subgoals) that are given names (or labels):
- Stick to one language.
Courses should stick to one language until learners have progressed far enough with it to be able to distinguish the forest from the trees.
- Use authentic tasks.
Learners find authentic tasks more engaging than abstracted examples. A classic question in computing (and mathematics) education is whether problems are better with context (e.g., find the highest student grade) or without (e.g., find the maximum of a list of numbers). Bouvier et al. examined this with a multiuniversity study and found no difference between the two. They suggest that since it makes no difference, other considerations (such as motivation) should be given priority.
- Remember that novices are not experts
Novices may need to spend time thinking about an algorithm on paper (something expert programmers rarely need, as they have usually memorized most common algorithmic patterns). They may need to construct examples in guided steps. They may struggle to debug. Debugging usually involves contrasting what is happening to what should be happening, but a novice’s grasp on what should be happening is usually fragile.
- Don’t just code.
A growing number of educators are including Parsons Problems in their pedagogic repertoire. Rather than writing programs from scratch, learners are given the lines of code they need to solve a problem, but in jumbled order. Reordering them to solve the problem correctly allows them to concentrate on mastering control flow without having to devote mental energy to recalling syntax or the specifics of library functions.
Probably the best “paper” I’ve found on how to teach code.
July 19, 2022
Some thoughts about Fall semester with two schools. One has traditional assessments and the other definitely not. But what are the common Learning Outcomes?
As a barely junior developer, I want to be able to…
- Follow instructions, so that I can:
- Install third party libraries, packages and frameworks by following the developer documentation.
- Incentivise my employer(s) to write more/better devops guides.
- Effectively perform online searches, so that I can:
- Solve my problem before asking for help.
- Find alternatives to proposed tools.
- To know when to ask for help, so that I can:
- Not get trolled in an online help forum.
- (Be respectful of other people’s time.)
- Show proof of work and receive feedback/street cred.
- Accurately assess my own learning progress.
- Finally crush this nemesis bug!
- Just move on to the next problem (after a break).
July 4, 2022
- How I Would Learn To Code (If I Could Start Over)
- Chapter markers provided(ish)
- This guy’s is great!
- TODO: Explore his other videos
- His list is a great breakdown of the high-level learning outcomes that any curriculum should have.
- Breakdown:
- Mindset
- Adopt a coding mindset.
- How can [some problem] be solved with code?
- Learn humility.
- Learn how to problem solve.
“Coding is just a tool for problem solving. The hard part is problem solving.”
- Coding
- Learn one language deeply.
- Learn scripting.
- Create a personal project.
- Partictpate in a hackathon.
- Practice for interviews.
- Developer environment
- Learn the terminal.
- Learn your way around an editor.
- Learn Git and become familiar with version control.
June 26, 2022
Breakdown: Upgrade Your Stream Deck: 9 Advanced Tips For Streamers by Gaming Careers
- Launching and Arranging Applications
- Audio Routing
- Testing Stream Connection
- Timers and Counters
- Flashback Recording
- “Flashback Recording” Plugin doesn’t seem to exist?
- Raids
- “Live Streamers” Plugin doesn’t seem to exist?
- Camera
- Extra Keys
- Stream Deck has an option to couple a button to a hotkey.
- Multi Actions
- Stream Deck allows you to couple multi-actions to a single button press.
June 25, 2022
New Breakdowns:
June 17, 2022
Going to test some Twitch stream settings today.
- First attempt: copying the settings from Best OBS Studio Settings for M1 Mac Users
- I thought my 1920x1200 Dell monitor would be useful for the extra screen real estate but it’s just as much a pain as I remember from the last time I setup OBS. It reminds me of why I bought the proper 1080p BenQ monitor. I’ll swap those tomorrow.
Installation/configuration Guides
User Story: As new Mac buyer and JAM Stack coder, I want a quick reference for the software I’ll need to install as a developer because I’ve totally forgotten what I did the last time I bought a computer.
Convergent guides for:
- installation
- configuration
- what’s the bare minimum I need to do to not embarrass myself later?
- what are some of the options I need for my current situation?
- quality of life
- I’m starting to feel the grind and it’s getting in the way of coding. Got any tips?
The things:
- Double-click and forget
- Zoom
- Discord
- Firefox
- Chrome
- Dev browsers
- VS Code
- Git?
- homebrew and nvm
- iTerm with Oh My Zsh!
- VS Code config
June 15, 2022
Install log:
- Firefox
- Zoom
- Focusrite Control (Scarlett 2i2)
- LogiTune (Brio camera)
- Might not be the best option? Alternative could be G Hub.
- Tried G Hub but it doesn’t offer any more settings.
- Stream Deck software
- Wacom Desktop Center
Question: Is the current version of OBS (27.2.4) still running in Rosetta?
- According to this video you can tell the difference between ARM64 and Intel using the Activity Monitor
- OBS (27.2.4)
- Does NOT run natively on ARM64. There’s an experimental ARM64 build based on 27.2.0.
- it doesn’t look like the Stream Deck OBS plugin will work with the ARM64 build.
- Streamlabs (1.9.1):
- Does NOT run natively on ARM64. No sign of future support so far.
- Twitch Studio (0.108.12):
- DOES run natively on ARM64! It’s still in beta and I have no idea how it compares.
- Side note: The InceptionU network does 475Mbps up and down!
June 14, 2022
M1 Mac Mini Setup!
Physical setup and peripherals:
- Dell display: 1920 x 1200
- BenQ display: 1440 x 2560 (portrait)
- Logitech Brio webcam
- Elgato Stream Deck
- Focusrite Scarlett 2i2
- Wacom Intuos tablet (7.9” x 6.3”)
Streaming Research
Some questions that need to be answered for the Twitch Stream
Findings
June 12, 2022
Mac Mini Setup for Streaming
Streaming software
Coding Software
- VS Code
- Live Server
- GistPad
- Open in Default Browser
- GitLens
- Code Spell Checker
- iTerm
- Oh My ZSH!
- Homebrew
- nvm
- Git
- Browsers
- Postman
Messaging
Quality of Life
- Rectangle
- Lastpass
- Firefox Extension
- Chrome Extension
May 8, 2022
Assumption: A beginner will need a more convergent learning path until they can use their imagination.
Theory: Providing a list of recommended starter projects will aid in learning.
Questions:
- How do we measure project effectiveness in learning?
- Are projects the best format for early learning?
- Does this apply equally to children vs ya vs adults?
- How small should the projects be?
- When do you introduce fat arrow? Function statements or expressions?
- Refactoring exercises:
- Finished code is given with
function
expressions. Goal: refactor using arrows.
Goal
Create sample projects geared toward board games. Projects that:
- can highlight a core learning topic
- is visual and can naturally introduce design elements
- dice
- html entities
- font icons
- svg
- animation
- could make sense as a component in a larger project
- dice roller: digital dice tower
Project examples
- dice
- roller
- builder
- games/components/apps
- iphone substitute if you forgot your dice
- deck
- shuffler
- builder
- games/components/apps
- memory game
- war
- discards
- a card you stick on your head, game
- counter
- backpack
April 6, 2022
Lean Canvas Ideas
- Potential customer segments
- Students
- Professionals upgrading their skills
- Service industry looking for a new covid-safe career
- Entrepreneurs wanting to build their own app
- Teachers
- Coder who wants a backup career
- Old-school teachers who want to learn new tech
- Potential employers
- Companies looking for cheap devs
- Problems: Professionals upgrading their skills
- Pre-bootcamp: It takes $10,000+ to find out if you even like coding
- Post-bootcamp: Hard to stick with the coding habit
- During-bootcamp: Difficult to find relevant tutorials
- Solution: pre-bootcamp
- Moving to Milanote
April 23, 2022
Research: Game design/development as a tool for teaching programming.
- Most of the “game development javascript” results for articles and videos are unsatisfying. They are either:
- are too advanced for JS beginners (game engines/frameworks)
- focus on video game-like experiences and jump straight to
canvas
(would like to start with node/cli game to start)
- don’t talk about the fundamental mechanics and theory behind games.
- Refining my searches to “game mechanics” helped but results were still more advanced.
- “solo game mechanics” produced the most promising results thus far:
- 10 BEST Solo Board Game MECHANICS in 2021 (from least to best)
- Dice rolling
- Flowcharts or procedural AI
- Dummy Opponents (automa); playing for points
- Tile/Worker placement
- Card drafting
- Event deck (action queue)
- Grid movement
- Puzzle solving and hand management
- Deck, bag and pool building
- The narrative
- The mistake every new game developer makes
- tdlr; start with a prototype to:
- test your game ideas
- generate new ideas
- He used Unity to create quick and buggy prototypes to test variations on a side scroller with a magnetic game character.
Feb 20, 2022
Goal: Research - Syntax highlighting for specific lines in blog posts, lesson plans and slides.
- PrismJS has a line highlighting plugin.
- This probably wouldn’t work with the Content module when using markdown. Probably wouldn’t without some way to add data-attrs. Remark doesn’t seem to want to work so maybe adding
pre
and code
manually to the md would work?
- RevealJS apparently has the ability to highlight lines within a block and also step-thru highlights.
- Again, not sure how this would work with the markdown plugin. Probs just add the
pre
and code
blocks manually. Ugh.
Feb 6, 2022
Feb 5, 2022
Goal: Build a list of Achievement rubrics based on the Outcomes, not the requirements of the assessment.
- Found these two great videos in the last week or so
Feb 3, 2022
Feb 1, 2022
- Compiled a list of my Gists because I’m tired of searching randomly on the website. This way I have a birds-eye view of content I can throw into a lesson at the last minute (with a little refactor, update, cleanup).
- TODO:
- reorder by complexity and category
- find sequences like the github stuff
- R&D: Are Net Ninjas repo branches a good idea?
Rubrics
- How to create rubrics for assignments by the U of A!
- This got me to thinking about formative vs summative assessments
- A Learning journal is definitely a formative assessment
- formative assessments are usually for few or no marks
- for coding courses, I think 20% over the span of the course is fair IF they have to code the journal and push to Git.
Jan 26, 2022
- Breakdowns in prep for incoming Lab Facilitators
Jan 15, 2022
Keeping a learning journal (but for code)
- Currently marking a Git assignment for starting a markdown learning journal and was inspired to create a new journal dedicated to learning how to teach.
- Found some great videos on the subject:
- How learning journals can help students grow
- I found other videos on journaling about learning to code but they’re lock up in the Shield Youtube plugin. I’ll have to find them again. Very irritating.
- Search terms I think I used in Youtube Search on the Shield:
- “programming journal”
- “markdown journal”
- Couldn’t find much so moved on to google search on Morty:
- “keeping a programming journal”
- The power of keeping a coding journal
- from 2014 but it’s still relevant
- great visual hierarchy at the start but it breaks down as it continues.
- TODO: breakdown, visual hierarchy example, prep?
Dated journal entries
Quantifying some objectives and criteria for a Coding Journal
- accepted locations
- As an entry in your dedicated
coding-journal
repo.
- In the README of a remote repo (project, assignment, etc) under the heading “Code Journal”
- General content categories. An entry can contain a combination of the following.
- class notes
- video timestamp markers for important information
- instructor/classmate quotes
- observations
- helpful/useful links pasted in the Chat
- questions for later
- reminders for Lab Time
- TODOs
- self-assessment
- Bring your receipts: What metrics are you basing your performance on?
- the search terms you’re using
- GitHub activity
- number of labs completed in class
- amount of time spent coding
- number of pair-coding sessions attempted
- What concrete and precise goals have you set for yourself?
- “I want to set aside a half-hour every day, dedicated to coding”
- “I want to get a great search result with phrase that’s 3 words or less”
- “I want to push a commit every day”
- “I want to review the Prep before every class”
- “I want to attempt one tutorial every Lab Time this week”
- Are you meeting the expectations you’ve set for yourself?
- What steps can you take to learn more effectively?
- What topics covered in class has interested you the most?
- What are today’s wins?
- Lab/tutorial/exercise attempts
- What’s the objective?
- Does anything need to be planned out?
- Numbered steps you’ve taken to complete the objective
- Observations
- Obstacles encountered
- Links to starting and finishing commits
- Reflection: was the objective achieved? Why or why not?
- Attributions
- Have any classmates helped you?
- Helpful/useful links and resources
- Articles, videos, etc
- Stack Overflow answers
- Documentation references
- What sites and content creators have you found most helpful?
- Research sessions
- What questions do you want to answer?
- What search terms are you using?
Content breakdowns
Not sure if this fits under a coding journal? It definitely doesn’t have to be a dated entry. Might be better off as an assignment or achievement (cleric badge?).
A breakdown is a summary/synopsis of a single article, video, podcast, etc:
- What are the key concepts?
- Useful quotes
- Sample code and snippets
- Video chapter markers and timestamps
- Related and useful links
- Examples: