code review

src/app.py

@@ -2,23 +2,44 @@ import flask
 from flask_minify import Minify
 import json
 import werkzeug.exceptions as HTTPerror
-import requests
 from config import *
-import os
+
+app = flask.Flask(__name__)
+
+# Add security and caching headers
+@app.after_request
+def add_security_headers(response):
+    """Add security and performance headers to all responses"""
+    # Security headers
+    response.headers['X-Content-Type-Options'] = 'nosniff'
+    response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+    response.headers['X-XSS-Protection'] = '1; mode=block'
+    response.headers['Referrer-Policy'] = 'strict-origin-when-cross-origin'
+
+    # Cache control for static assets
+    if flask.request.path.startswith('/static/'):
+        response.headers['Cache-Control'] = 'public, max-age=31536000, immutable'
+    elif flask.request.path in ['/sitemap.xml', '/robots.txt']:
+        response.headers['Cache-Control'] = 'public, max-age=86400'
+    else:
+        response.headers['Cache-Control'] = 'no-cache, must-revalidate'
+
+    return response
+
+
 
 proj = json.load(open("./static/json/projects.json", "r"))
 books = json.load(open("./static/json/books.json", "r"))
 skillList = json.load(open("./static/json/skills.json", "r"))
 timeline = json.load(open("./static/json/timeline.json", "r"))
 pages = json.load(open("./static/json/pages.json", "r"))
+
 pages['projects']['skillList'] = skillList
 # pages['about']['timeline'] = timeline
 pages['projects']['projects'] = proj
 pages['home']['books'] = books
 pages['books']['books'] = books
 
-app = flask.Flask(__name__)
-
 @app.route('/api/goto/')
 @app.route('/api/goto/<location>')
 def goto(location='home'):
@@ -87,6 +108,6 @@ if __name__ == "__main__":
     # import sass
 
     # sass.compile(dirname=("static/scss", "static/css"), output_style="compressed")
-    app.run()
+    app.run(debug=False)
 else:
     Minify(app=app, html=True, js=True, cssless=True)

src/static/css/App.css

@@ -687,7 +687,6 @@ tr {
   margin: 2em;
   box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff,
     0 0 0.8rem #5271ff, 0 0 2.8rem #5271ff, inset 0 0 1.3rem #5271ff;
-  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thedermacompany.co.uk%2Fwp-content%2Fuploads%2F2020%2F11%2Fblack-brick-scaled.jpg&f=1&nofb=1&ipt=d10be6df79141da1b4ec0c725575cef0f7b67e957e391662226d66cff02d25e6&ipo=images');
   /* background-blend-mode: ; */
   text-align: center;
 }

src/static/js/idler.js

@@ -69,23 +69,39 @@ function windowResized() {
 function draw() {
   background(24);
 
+  // Update all balls
   for (let i = 0; i < balls.length; i++) {
     balls[i].update();
   }
+
+  // Optimize line drawing with early distance checks
+  const maxDist = 150;
+  const maxDistSquared = maxDist * maxDist; // Avoid sqrt in distance calculation
+
   for (let i = 0; i < balls.length - 1; i++) {
+    const ball1 = balls[i];
     for (let j = i + 1; j < balls.length; j++) {
-      let distance = dist(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+      const ball2 = balls[j];
+
+      // Quick rejection test using squared distance (faster than sqrt)
+      const dx = ball2.x - ball1.x;
+      const dy = ball2.y - ball1.y;
+      const distSquared = dx * dx + dy * dy;
+
+      if (distSquared < maxDistSquared) {
+        const distance = Math.sqrt(distSquared); // Only calculate sqrt if needed
+
         if (distance < 100) {
           stroke(150);
-        line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+          line(ball1.x, ball1.y, ball2.x, ball2.y);
-      }
+        } else {
-      else if (distance < 150) {
           stroke(100);
-        let chance = 0.3 ** (((random(0.2) + 0.8) * distance) / 150);
+          const chance = 0.3 ** (((random(0.2) + 0.8) * distance) / 150);
           if (chance < 0.5) {
             stroke(50);
           }
-        line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+          line(ball1.x, ball1.y, ball2.x, ball2.y);
+        }
       }
     }
   }

src/static/js/responsive.js

@@ -29,8 +29,13 @@ async function goto(location, { push = true } = {}) {
   const content = response[1];
   let root = document.getElementById("root");
   root.innerHTML = content;
-  root.querySelectorAll("script").forEach((x) => {
+  root.querySelectorAll("script").forEach((oldScript) => {               
-    eval(x.innerHTML);
+        const newScript = document.createElement("script");                  
+        Array.from(oldScript.attributes).forEach(attr => {                   
+          newScript.setAttribute(attr.name, attr.value);                            
+        });                                                                  
+        newScript.textContent = oldScript.textContent;                              
+        oldScript.parentNode.replaceChild(newScript, oldScript);                  
       });
   toggleMenu(collapse=true);
   document.querySelector("title").textContent = metadata["title"];

src/templates/header.html

@@ -8,6 +8,10 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+
+    <!-- Resource hints for performance -->
+    <link rel="preconnect" href="https://www.googletagmanager.com" />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
     <meta name="description" content="{{ var['description'] }}" />
     <meta property="og:title" content="Andrew Simonson" />
     <meta name="og:description" content="{{ var['description'] }}" />
@@ -28,9 +32,10 @@
     <meta name="twitter:image:alt" content="some example picture idk" />
     <meta name="twitter:site" content="@asimonson1125" />
 
-    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <!-- Global site tag (gtag.js) - Google Analytics (deferred for performance) -->
     <script
       async
+      defer
       src="https://www.googletagmanager.com/gtag/js?id=G-E2V93W9CNV"
     ></script>
     <script>
@@ -39,30 +44,18 @@
         dataLayer.push(arguments);
       }
       gtag("js", new Date());
-
       gtag("config", "G-E2V93W9CNV");
     </script>
     <link
       rel="stylesheet"
       href="{{ url_for('static', filename='css/App.css') }}"
     />
-    <!--
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='css/checkbox.css') }}"
-    />
-    
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='css/head.css') }}"
-    /></!-->
-
     <link rel="canonical" href="{{ var['canonical'] }}" />
-    <!-- <script src="{{ url_for('static', filename='js/checkbox.js') }}"></script> !-->
+    <script defer src="{{ url_for('static', filename='js/checkbox.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/responsive.js') }}"></script>
+    <script defer src="{{ url_for('static', filename='js/responsive.js') }}"></script>
     <script src="{{ url_for('static', filename='js/chessbed.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/idler.js') }}"></script>
+    <script defer src="{{ url_for('static', filename='js/idler.js') }}"></script>
-    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
     <title>{{ var['title'] }}</title>
   </head>
   {% block header %}

src/templates/home.html

@@ -20,12 +20,12 @@
     <!--<INSERT SMALL BANNER HERE FOR PROJECT IMAGECARD CAROUSEL>-->
     <div id="desktopSpacer"></div>
     <div class="homeSubContent">
-      <img class='blinkies' alt='My Brain is Glowing' src="{{ url_for('static', filename='photos/blinkies/brainglow.gif') }}" />
+      <img class='blinkies' alt='My Brain is Glowing' src="{{ url_for('static', filename='photos/blinkies/brainglow.gif') }}" loading="lazy" />
-      <img class='blinkies' alt='Pepsi Addict' src="{{ url_for('static', filename='photos/blinkies/pepsiaddict.gif') }}" />
+      <img class='blinkies' alt='Pepsi Addict' src="{{ url_for('static', filename='photos/blinkies/pepsiaddict.gif') }}" loading="lazy" />
-      <img class='blinkies' alt='I Fear No Beer' src="{{ url_for('static', filename='photos/blinkies/fearnobeer.gif') }}" />
+      <img class='blinkies' alt='I Fear No Beer' src="{{ url_for('static', filename='photos/blinkies/fearnobeer.gif') }}" loading="lazy" />
-      <img class='blinkies' alt='Secret Message' src="{{ url_for('static', filename='photos/blinkies/tooclose.gif') }}" />
+      <img class='blinkies' alt='Secret Message' src="{{ url_for('static', filename='photos/blinkies/tooclose.gif') }}" loading="lazy" />
-      <img class='blinkies' alt="They took my blood but it wasn't DNA, it was USA" src="{{ url_for('static', filename='photos/blinkies/usa.gif') }}" />
+      <img class='blinkies' alt="They took my blood but it wasn't DNA, it was USA" src="{{ url_for('static', filename='photos/blinkies/usa.gif') }}" loading="lazy" />
-      <img class='blinkies' alt='Bob the Builder gif' src="{{ url_for('static', filename='photos/blinkies/bobthebuilder.gif') }}" />
+      <img class='blinkies' alt='Bob the Builder gif' src="{{ url_for('static', filename='photos/blinkies/bobthebuilder.gif') }}" loading="lazy" />
         <div>
             <br />
             <strong> You've reached the website for Andrew Simonson's personal online shenanigans.</strong>
@@ -42,30 +42,6 @@
             </ul>
         </div>
         <br />
-        {# <div class="flex">
-            <div class="pointer selfcenter" onClick="goto('duck')">
-                <img
-                    alt="duck spinning"
-                    src="{{ url_for('static', filename='photos/gifs/duck-spinning.gif') }}"
-                    class="smallImg"
-                />
-            </div>
-            <div class="selfcenter">
-                <img
-                    src="{{ url_for('static', filename='photos/electricityStabby.png') }}"
-                    alt="memes, idk."
-                    class="smallImg"
-                />
-            </div>
-            <div class="selfcenter">
-                <img
-                    src="{{ url_for('static', filename='photos/gifs/tflame.gif') }}"
-                    alt="memes, idk."
-                    class="smallImg"
-                />
-            </div>
-        </div> #}
-        <br />
         <div id="aboutCards" class="flex">
             <div class="chess">
                 {% from 'partials/chess.html' import chess %} {{
@@ -73,19 +49,7 @@
             </div>
             <br />
             <div>
-                {# {% from 'partials/bookshelf.html' import bookshelf %} {{
+                <img height='150px' alt='stabby' src="{{ url_for('static', filename='photos/electricityStabby.png') }}" loading="lazy" />
-                bookshelf(var.books) }} #}
-            </div>
-            <br />
-            <div>
-                <iframe
-                    height="200"
-                    max-width="360"
-                    frameborder="0"
-                    allowtransparency="true"
-                    scrolling="yes"
-                    src="https://www.strava.com/athletes/139855203/latest-rides/95b8e0be96e32b8de82254d1c6627723a35eea6f"
-                ></iframe>
             </div>
             <br />
         </div>