Skip to content

justsml/dans-blog

BranchesTags

Repository files navigation

DanLevy.net

Netlify Status

Dan's Github Stats

TODO

  • Add Emoji/Icons to Quiz Challenges
  • Use Google's Quiz JSON+LD? Maybe just 1-3 questions per page?
  • Add custom image processing service to override resizing images on the fly.
  • Add scripts to support 'local' netlify builds - perhaps even using GitHub Actions...
# To setup in a directory, run:
netlify init

# Deploy a branch:
netlify build && netlify deploy
# Go live:
netlify build && netlify deploy --prod

Design & Improvements

  • Add support for frontmatter configurable redirects / page aliases, autoRegisterRedirects(post)
  • Stop using REM for layout (padding)
  • Use Code Block Line Highlighting
  • Fix the color scheme: make darker.
  • Update style of social media icons in footer.
  • Add LMS-style data fields to <QuizUI> or <Challenge>: Learning Objective(s), Prerequisites, Estimated Time, Difficulty Level, Standards Alignment, Learning Outcomes, etc.
  • Experiment: Use Astro's client:load to lazy load Quiz <Challenge>'s past the first X.
  • Add sign-up form to footer.
  • Animate Nav Link Underline on Hover

Performance & LightHouse Scores

  • Re-organize CSS to reduce initial page load.
  • Minimize JS not needed on load.
  • Revisit lazy-loading nav menu.

Content

Quizzes

  • Add AWS Content

    • events, data streams, and triggers. (Kinesis, SQS, SNS, EventBridge, Lambda)
    • RDS, Aurora, ElastiCache, Redshift, Neptune, DocumentDB, QLDB
    • S3, Glacier, Storage Gateway, Snowball, FSx, EFS, EBS
    • networking, VPC, Direct Connect, Route 53, CloudFront, API Gateway, Transit Gateway
    • security, IAM, Cognito, Secrets Manager, KMS, Shield, WAF, Macie, GuardDuty
    • monitoring, CloudWatch, CloudTrail, X-Ray, Config, Trusted Advisor, Health Dashboard
    • deployment, CloudFormation, CDK, OpsWorks, Elastic Beanstalk, CodeDeploy, CodePipeline
    • management tools, Systems Manager, CloudWatch Logs, CloudWatch Events, Personal Health Dashboard
    • analytics, EMR, Athena, Redshift, QuickSight, Glue, Data Pipeline, Lake Formation
    • machine learning, SageMaker, Comprehend, Polly, Rekognition, Lex, Translate, Transcribe
    • developer tools, CodeCommit, CodeBuild, CodeDeploy, CodePipeline, Cloud9, X-Ray
    • serverless, Lambda, API Gateway, Step Functions, SAM, AppSync, Amplify
    • containers, ECS, EKS, Fargate, ECR, App Runner, Batch

  • Add Terraform Content

    • Concepts, Modules, Providers, State
    • Advanced Topics, Supporting Large Teams, Gotchas, Best Practices
    • Integrations/providers: AWS, Azure, GCP, Kubernetes, LDAP, Docker, GitHub, GitLab, Bitbucket, etc.

  • Add Docker Content

  • Add GCP Content?

  • Add Kubernetes Content

  • Add Git Actions Content

  • Add AI/ML Content

    • NLP (Natural Language Processing)
    • Complex Decision Trees
    • Boost abilities w/ RAG
    • Computer Vision
    • Speech Recognition
    • Reinforcement Learning
    • Generative Adversarial Networks
    • Transfer Learning
    • AutoML
    • Explainable AI
    • Transformers
    • Attention Mechanisms
    • Recurrent Neural Networks
    • Convolutional Neural Networks

  • Math-ey Topics

    • Statistics
    • Linear Algebra
    • Calculus
    • Probability

Features

Screenshots

  • Capture Question 'raw' Text for ALT text. (Save alongside the question's image.)
  • Add "social-banner" scaled output of question cards.
  • Capture Full Home Page screens to compare in a later design article.
  • Investigate recording animated gifs of the quizzes in action.

Misc

  • Add/update ld+json / JSON-LD

  • Add Video page

  • Add comments

  • Fine tune: crank lighthouse score

  • Add Link to Category on Posts

  • Add highlight to apply to all posts from same category when hovering over a an .article-card.

  • Add Mastodon & Bsky links to footer.

  • Support disabling styles in <Gist /> component.

  • Add theme-color meta tag

  • Add CSS Effects:

    • Adjust Quiz box-shadow using scroll position
    • Look into scroll snap for each quiz.

  • Update Quiz UI,

    • Make Question's Linkable
    • Add Group to Question Title/Banner. Auto-count / number.
    • Get rid of cliche icons abuse.

  • Add Quizzes to the Menu

  • Publish next batch of quizzes

    • Add Group to Question Title/Banner. Auto-count / number.

  • Disable posthog locally

  • Add search

  • Publish:

    • Comments Component
    • Free local search
    • Newsletter

  • Add Video page?

  • Add newsletter?

Done

  • Add highlight to apply to all posts from same category when hovering over a an .article-card.
  • Add comments
  • Fine tune: crank lighthouse score
  • Add Link to Category on Posts
  • Add Mastodon & Bsky links to footer.
  • Add LinkedIn link to footer.
  • Support inlining <Gist /> with owned syntax highlighting.
  • Add Scroll CSS Effects:
    • Adjust Quiz box-shadow using scroll position
  • Update Quiz UI
    • Make Question's Linkable
    • Add Group to Question Title/Banner. Auto-count / number.
    • Get rid of cliche icons abuse.
  • Add Quizzes to the Menu
  • Publish next batch of quizzes
    • Add Group to Question Title/Banner. Auto-count / number.
  • Disable posthog locally
  • Add search
  • Add new nav
    • Add tags?
    • Add categories
    • Add Popular/Related posts
  • Convert Quiz UI to MDX/Astro
  • Add favicon
  • Add social media meta tags
  • Add RSS feed
  • Add sitemap
  • Add smart 404 page
  • Add about page
  • Add OSS project list (in menu)
  • Add contact page
  • Add search

Features:

  • ✅ Minimal styling (make it your own!)
  • ✅ 100/100 Lighthouse performance
  • ✅ SEO-friendly with canonical URLs and OpenGraph data
  • ✅ Sitemap support
  • ✅ RSS Feed support
  • ✅ Markdown & MDX support

Helpers

Browser snippets to run in console to better understand the main factors in your generated site's size in bytes.

Screenshot Related Stuff

Resize Thumbnails to 200x200

cwebp -q 90 -resize 300 \
  src/content/posts/2024-10-31--quiz-js-interfaces-symbols-and-enumerables/icon_logan-weaver-lgnwvr-96ES9AOLRzQ-unsplash.webp \
  -o src/content/posts/2024-10-31--quiz-js-interfaces-symbols-and-enumerables/icon_300.webp

cwebp -q 90 -resize 200 200 \
  src/content/posts/2024-12-27--from-zero-to-regex-hero-extract-url-like-strings/regex-url-parsing-square.webp \
  -o src/content/posts/2024-12-27--from-zero-to-regex-hero-extract-url-like-strings/regex-url-parsing-square-200.webp

cwebp -q 90 -resize 200 200 \
  src/content/posts/2024-11-15--quiz-regex-or-wreckage/dan-lounsbury-uHZ2-nzYuIs-unsplash-square.webp \
  -o src/content/posts/2024-11-15--quiz-regex-or-wreckage/dan-lounsbury-uHZ2-nzYuIs-unsplash-square-200.webp

Generate Quiz Question Screenshots

# Generate Screenshots for posts with "Quiz" in the title.
bun run screenshots --filter=Quiz
# All Posts
bun run screenshots
bun run ./screenshotter/basic.ts \
  --output ./.screens \
  --url https://danlevy.net/should-you-use-named-or-default-exports/,https://danlevy.net/protect-your-tokens/,https://danlevy.net/securely-using-environment-variables-in-nodejs/,https://danlevy.net/naming-things-real-good/,https://danlevy.net/amazing-resources/,https://danlevy.net/deathmatch-git-rebase-vs-merge/,https://danlevy.net/guerrilla-types-in-typescript/,https://danlevy.net/you-may-not-need-axios/,https://danlevy.net/docker-server-setup-notes/,https://danlevy.net/javascript-promises-quiz/,https://danlevy.net/js-quiz-14-date-time-questions-test-your-knowledge/

Misc DOM Helpers

const getAttrObject = el => Object.fromEntries(Object.values(el.attributes).map(attr => [attr.name, attr.value]));

Analyze Size of Astro Sites

Array.from(document.querySelectorAll('astro-island'))
.map(island => {
  var url = island.getAttribute('component-url');
  var size = island.outerHTML.length;
  return { url, size };
})
.sort((a, b) => b.size - a.size)
.map(island => `${island.url}: ${(island.size).toLocaleString()}`);

Analyze Size of Key Elements

Get the size of the main elements in your site.

var sections = Array.from(document.querySelectorAll('html, body, head, main, article, aside, nav, header, footer, style, script, astro-root, astro-island'))
.map(element => {
  var tag = element.tagName.toLowerCase();
  var size = element.outerHTML.length;
  return { tag, size, attrs: element.attributes };
})
var sectionSizes = Object.entries(sections.reduce((acc, {tag, size}) => {
  acc[tag] = acc[tag] == null ? size : acc[tag] + size;
  return acc;
}, {}))
.sort((a, b) => b.size - a.size)
// .map(element => `${element.tag}: ${(element.size).toLocaleString()}`);
console.table(sections);
console.table(sectionSizes);

🚀 Project Structure

Inside of your Astro project, you'll see the following folders and files:

├── public/
├── src/
│   ├── components/
│   ├── content/
│   ├── layouts/
│   └── pages/
├── astro.config.mjs
├── README.md
├── package.json
└── tsconfig.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

The src/content/ directory contains "collections" of related Markdown and MDX documents. Use getCollection() to retrieve posts from src/content/blog/, and type-check your frontmatter using an optional schema. See Astro's Content Collections docs to learn more.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
bun run dev Starts local dev server at localhost:4321
bun run build Build your production site to ./dist/
bun run preview Preview your build locally, before deploying
bun run astro ... Run CLI commands like astro add, astro check
bun run astro -- --help Get help using the Astro CLI

👀 Want to learn more?

Check out our documentation or jump into our Discord server.

Credit

This theme is based off of the lovely Bear Blog.

About

the new danlevy.net

danlevy.net

Resources

Readme
Activity

Stars

14 stars

Watchers

2 watching

Forks

4 forks
Report repository

Releases

10 tags

Packages

No packages published

Contributors 11

Languages