Learn in Public

This is my To-Learn list. I was inspired to put it here for everyone to see after reading about the idea of learning in public on Tania Rascia's website, where she links to the original article at swyx.io. Right now I'm focused building this website and some software to help me at work, so this list will focus on those two areas for now.

When I learn something on this list, I will write a blog post about it. The idea is write the article I wish I had found when I was learning. This is guaranteed to help at least one person (me!), and hopefully will help others coming after me as well.

jeffschoonover.dev

I'm making this website with the Angular web framework and Scully. I'm using Angular for my Routernote software project and it makes sense to get more practice with it by using it for my website. Scully is a Static Site Generator for Angular. Static sites are more secure and load faster.

• Using the Tailwind CSS library. Tailwind is an easier way to have consistent styling on your website or app. I have already found with this small site that the CSS is getting unwieldy so would love to convert over to Tailwind. Plus it is very modern - with even a built-in dark mode so people aren't blinded by your site at 2am.
• Using more advanced features of Github. The Github website is the most popular place to upload and share software code. I use it to host the code for this website for Netlify to go get every time it gets updated, but my knowledge is limited to this simple use case. Github is used to collaborate on software development, and there are Git commands to safely do that but the learning curve is steep. There is a shell for Github designed by Daniel Jackson's MIT group called Gitless that makes using Github much more understandable, and I want to figure it out and start using it.
• Search Engine Optimization with Angular/Scully project. I want to make sure that Google can properly crawl and index the site.
  • Automatically add an H1 header to every page of your Scully/Angular website for improved SEO
• Website performance. High speed and low size. A never-ending rabbit hole, I know, but I want to be competent.
  • Improve your website's performance by embedding SVG icons
  • Measure the performance of your website with Lighthouse
  • Decrease your website's initial load size by lazy loading modules
  • Get much faster load times on your Scully static website with the Scully Plugin Disable Angular
• Website security. Especially understanding what cross-site-scripting (XSS) attacks are and how to guard against them.
  • Improve your website's security by implementing a content security policy
  • Implementing a Content Security Policy on Netlify
  • More headers for website security
• Markdown: extra formatting, and how to get that into Scully (for example, footnote support, smileys). Accurate Markdown preview in VS Code.
  • Code block syntax highlighting in Markdown files with Scully
• Have a responsive layout that looks good on desktop or mobile.
  • Control the way your website looks on mobile with CSS grid layout
• Tags: add them to posts, add capability to sort and group and organize and search by tags
  • Filter blog posts by tag using Scully
• Make and add a custom Angular Material theme for the website
  • Give your website modern styling with Angular Material
  • Adding a responsive Angular Material toolbar to your website
• I really want to learn and understand Scully, since it is a tool I'm using a lot.
  • Use Scully Transfer State to transition between the static and Angular versions of your website
  • Removing unneeded Scully scripts after disabling Angular with a custom plugin

Routernote project

• How to structure the data. Data modeling, database structure, what database to use and how to hook it up. Conceptual modeling. I know I want a database that stores data by objects and is not rigid - I do not want a SQL or relational database, rather something like MongoDB or even just json files. But how to keep that data organized properly is the first task before I start any coding.
• Resizable layout windows. If I have columns in my app for different areas of the screen, the user should be able to move their mouse to the column border and move the border to resize a given column.
• Dynamically sizing D3 graphs based on window size - from pixels to percentage
• Writing reusable, testable D3 charts in Typescript. Usually D3 is written in Javascript and is hard to reuse and test when written the way most of the examples on the web are written.
• Tags: add them to tasks, add capability to sort and group and organize and search by tags (repeat from website)
• Add a fast, comprehensive search bar, that starts returning results as you type, similar to Joplin's
• Electron integration with Angular. Electron is a platform that lets you take a web app made with HTML, CSS and Javascript, and port it to the desktop as a Windows or Mac OS native program.
• Angular Modules, Components, Services, Directives, and any other major construct I missed. Especially I'd like to learn when I should use a module vs a component.
• Drag-and-drop capability for files to be associated with a particular step or task.
• View picture files directly in the app, view other files with their icons.
• Best way to manage state for this app. Maybe NgRx, maybe services? The state is all the data that can change how your app is displayed and works. So if you have a recipe book app, the current master list of recipes and ingredients as well as the current user's culinary preferences and what they just searched for would all be in the state. Seems important to have a good handle on!
• using surge or netlify to host demo of angular stuff on github
• Testing and debugging angular projects. That is a huge topic, but I want to learn the best and most important ways to debug my small, humble project.
• Angular: Event-Emitter vs Subject. Both of these are ways for certain parts or functions in your software to subscribe to events, i.e. be informed when a user clicks a button or something changes in a database. But when should I use one vs the other?
• Angular: Class vs Interface. What exactly are they and when should I use one vs the other?

Other

• VS Code customization. Things like shortcuts, using Github in VS Code, etc. There is way more here than I am using
• Functional vs object oriented programming: I've heard these terms thrown around a lot and want to make sure I understand the difference between them
• Harvard Intro to Computer Science lectures (on YouTube)
• Eloquent Javascript is a free book by Marijn Haverbeke
• The entire freecodecamp.org curriculum (I've just done their HTML, CSS and Javascript sections so far)
• Dynamic dashboards with D3 and Angular. D3 is a visualization library I'm learning for my software, but it does a lot more than I'm using it for. In particular people use it to show all on one page data that can change dynamically as the database gets updated, for example financial or manufacturing data in a plant, schedule estimates, quality metrics, and so forth.
• Docker - I've heard that Docker is a very common way to play with code in a "sandbox" on your computer, so in case something goes wrong your computer doesn't get messed up. Sounds like a good idea!