<!-- 
Ah nice you've found my little hidden comment. 

@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%####%#####%%%%%###################%@
@#%%%%%%%%%%%%%%%%%%%%%%%%%%%%#########################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#@
%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%######################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*%
@#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%########################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#@
@*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%########################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@
%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%##########################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@
%#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%############%###############%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@
@#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%##################################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@
@#%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#######################################################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#*#################################%######################%%%%%%%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#############################################################%%%%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#*#############################################################%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#*############*#################################################%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%############%%%%%%%##############################%################%####%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#*#############%#############################+#########################%%%%%%%%%%%##%%@
@%%%%%%%%%%%%%%%%%%%%%##%%%%%%%%%%##%%%%%%%%%%%#*#############%##%%%%######################*-###########################%%%%%%%%%#*#%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%################%####%###############*--+######=##########%#######%%#####%%%#*#%%%%%##%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*+*#############%###################*---*######=+#####*##%%%######*++*#####%###%%%%%##%@
@%%%%%%%%%%%%%%%%%%%%%####%%%%%%%%%%%%%%%%%%%#*+*####%%#######%####################+++*######--*###**#+##%#####+***##%##%%%%#%%%%%##%@
@%%%%%%%%%%%%%%%%%%%%#*##%%%%#%%%%%%%%%%%%%#*##*##*#**#%######%##################*+==+###+.-:-=*####+#####**###***+#%%##%%%##*######%@
@%%%%%%%%%%%%%%%%%%%%%%%##%##*#%%%%%%%%%##******##+++=--==-=**#####**=########=::--:-+++*-:-*=*###*##****##*+=-=+*##**#%%######%#%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%###%%%%%%%%%##**###*##*=*+.::-+*:=+*=#####****###+=+*##+:::---==--#**##****#######=--===+***%%%%#%###%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%##%%%%%+-=*%#*##%%%%#-**--=-:=****##*####**###########*-::-:-*+--#*+++*+*#%%####%+-=+*===*%%%%%%%##%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%##%%%%%-=***###%%%%%#-++==+:-+*#*###++***+++#########**-::=:=*==:*+#%#=*##%%**%+==--***+*#%##%%%%%#%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%###%%%%%%++++=*=*#%%%#--+*****##*#*###==###########*****+==++*=+=:+%%%###*%%#=*##=--+##*+#####%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%###%%%%%%#++++=+*#%%%*++*****#**##########*##*###*****+::-:=-=+*=+##%+=++*==+++*#%**##%##%%*###%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%#########++=-=+*##%#**#*##****###############*-===-+::=+*++*+**+####=-+*+=*+=++*#%%%%%%%%%#####%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%#########*++-=+*###%#**#**########********+=--=*#*==+-=+-=--=-+**#=*#==*#+**+++*##%%%%%%%%%####%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%#############+=--+#*%%%%#**+******####*+++===----=*##*-=*-=+-----==+==--::=+=+#++**###%%%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%%%#**++---=*##%%++===*#****#*###+=---===**+----:-=:-.::-+++*###*++=*##+*++**###%%%%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%%%%%%%%**++-+-=-+**#*%*---=*#*****####*-+*####=-====*#+*=+-.-. .:+*#%##++*%#***+*##*##%%%%@%%%%%%%%%%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%%%%%%%%#=+**=+=++=***##*#*+-=*******#####*=+#+##*+*++*####*##*=-+:-+########***#######*##%#%%%%%%%%%%%%%%%%%%%%%%%%@
@%%%%%%%%%%%%%%%%%%%%#**+++++*+=*+**#*#%%#*#*+********######*################*#****++**######**+*#****#*#*%#%%%%%%%%%%%%%%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%%%#+++******#*#+****%%%#+##*#******####*##+#%%#######%%%###*#********#%%%%%++====+++****%###%%@%%%%%%%%%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%%#*######**+**+#+****###+##****#**####**###***#######%%%%%%%#*****####%%%#+++++*+****++###*#%%@@@%%%%%%%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%#**#%%##***###*+#****%%###*******#*#*****##****######%%%%%%%%*****###%%%%+++*+++*##*+*#*********#@@%%%%%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%###%%############*++*%%####*:-****#####*###%%%%%%%%%%%%%%%%%%%#****##%%%#+++*****##+*##%%%%%%%%%%%@@%%@%%%%%%%%%#%#@
@%%%%%%%%%%%%%%%%##%%%%%%############%###*###+..=**#%%%#-:=*%%%%%%%%%%%%%%%%%%%%%%#%%*#%%#+++*+#***#**###%%%%%%%%%%%%%%%%%%%%%%%%%%##@
@%%%%%%%%%%%%%##%%#%%%%%%%#%###########*###%%=:-*###%%%%+=+*%%%%%%%%%%%%%%%%%%%%%%%%#+*%%*+*+####*##**#%#%%%%%%%%%%%%%%%%%%%%%%%%%%%*%
@%%%%%%%%%%#%%##%%%%%%%#%##%###########%%%%%%=-+**##%%%%%*-=#%%%%%%%%%%%%%%%%%%%%%%%**#%#***+*#%%%%%**#%*%%%%%%%##%%%%%%%%%%%%%%%%%%*%
@%%%%%%%%%%%%%%%#%%##%##%%%#####%######%%%%%%--***#####%%%*-*%%%%%%%%%%%%%%%%#**********++*+*##%%%%==##%*##%%%#####%%%%%%%#%%%%%%%%%*%
@%%%%%%%%%%%%%%%%%%%%%%%%%%###**++**########*-+##*#######%#*=##%#%%#%%%%#####*+########==**+******==+*##+#####%##%#%%%%%#%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%%%%%%%%%####*+++*+##***+-:-=*##%##%##*****=*%*****######**********++***++**%**++###########%%%%%#%%%%%%%%%%%%%%%%%#@
@%%%%%%%%%%%%%%%%%%%%%%%%%##########*************************************************++++**++++*++##############%##%%%%%%%%%%%%######@
@#%%%%%%%%%%%%%%%%%%%%%#####*************************************+++*+++++++++++++++++++++++++++++#######%##########%###*************@
@*%%%%%%%%%%%%%%%%%%%#%%#####*******************************++++++++++++++++++++++++++++++++++++++++++=+++++++++++++****************#@
@#%%%%%%%%%%%%%#%%%%########**********************+++++++++++++++++++++*++++++++++++++++++++++++++++======+++++++++++++*************#@
@%%%%%%%%#%%#####################################################******#####**####################################################%%%@

Have fun :) 
-->
<head>
    <script>
        // Immediately set the initial theme to reduce white flash
        (function () {
            const darkMode = localStorage.getItem('darkMode');
            const className = (darkMode === null) ? 'darkMode' : (darkMode === 'true' ? 'darkMode' : 'lightMode');
            document.documentElement.classList.add(className);
        })();
    </script>

    <title>
        My Small Ecofriendly Blog
    </title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Montserrat");
        /* Style the popup background */
        .leaflet-popup-content-wrapper { 
            background: #333 !important; /* Dark background */
        }
        
        /* Style the popup tip */
        .leaflet-popup-tip {
            background: #333 !important;
        }
        
        .enable-transitions {
            transition: background-color 0.3s, color 0.3s;
        }

        .subscribeForm {
            background: whitesmoke;
            color: black;
        }

        .lightMode {
            background: cornflowerblue;
        }

        .darkMode {
            background: black;
        }

        * {
            font-family: 'Montserrat', sans-serif;
            color: whitesmoke;
        }

        .lilPadding {
            padding: .5em
        }

        .profilePhoto {
            max-height: 90%;
            max-width: 20%;
            border-radius: 20%;
        }

        .aboutContainer {
            display: flex;
            justify-content: space-evenly;
        }

        .creationsContainer {
            justify-content: space-around;
            display: flex;
        }

        .resourcesContainer {
            justify-content: space-around;
            display: flex;
            padding: 0.5em;
        }

        
        .somethingCoolContainer {
            justify-content: space-around;
            display: flex;
        }

        body {
            max-width: 100em;
            margin: auto;
            transition: all 2s;
        }

        a {
            color: whitesmoke;
            font-style: italic;
            text-decoration: none;
        }

        a:hover {
            color: lightblue;
        }

        button {
            background: whitesmoke;
            color: black;
        }

        /* specificity is dumb */
        @media (max-width: 1000px) {
            .profilePhoto {
                display: none;
            }

            .aboutContainer {
                display : inline;
            }

            .creationsContainer {
                display : inline; 
            }

            .resourcesContainer {
                display : inline;
            }

                    
            .somethingCoolContainer {
                display : inline;
            }
        }
        /* bonfire.css a little thing GPT and I cooked up to make transitioning between dark and light mode more delightful. */
        .bonfire {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 100px auto;
        }
        
        .flame {
            position: absolute;
            bottom: 40px;
            width: 30px;
            height: 60px;
            background: white;
            border-radius: 50px;
            animation: flicker 0.2s infinite alternate;
        }
        
        .flame:nth-child(2) {
            left: 20px;
            animation-delay: 0.1s;
            background: cornflowerblue;
        }
        
        .flame:nth-child(3) {
            left: 40px;
            background: white;
        }
        
        .logs {
            position: absolute;
            bottom: 0;
            width: 100px;
            height: 40px;
            background: white;
            border-radius: 0 0 20px 20px;
        }
        
        @keyframes flicker {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-10px); }
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <meta property="og:title" content="Chris's Small EcoFriendly Blog"/>
    <meta property="og:description" content="Why are you sharing my blog? lol"/>
    <meta property="og:url" content="https://www.chrisbako.com/"/>
    <meta property="og:image" content="http://chrisbako.com/media/profile_photo.PNG"/>

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZLW7M5WWY0"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'G-ZLW7M5WWY0');
    </script>
</head>
<body x-init="$nextTick(() => {document.documentElement.classList.add('enable-transitions');})">
<div class="lilPadding">
    <div style="display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;">
        <h1>
            Hi! I'm Chris
        </h1>
                    
        <div class="bonfire">
                <div class="flame"></div>
                <div class="flame"></div>
                <div class="flame"></div>
                <div class="logs"></div>
          </div>
        <div x-data="{
      darkMode: localStorage.getItem('darkMode') === 'true',
      // Javascript is epic.
              toggleMode() {
                  this.darkMode = !this.darkMode;
                  localStorage.setItem('darkMode', this.darkMode);
                  this.applyTheme();
              },
              applyTheme() {
                  const docClasses = document.documentElement.classList;
                  docClasses.toggle('lightMode', !this.darkMode);
                  docClasses.toggle('darkMode', this.darkMode);
              }
            }">

            <button x-on:click="toggleMode()" x-text="darkMode ? 'Light Mode' : 'Dark Mode'"></button>
        </div>
    </div>
</div>
<div class="aboutContainer">
    <img class="profilePhoto" src="https://chrisbako.com/media/profile_photo.PNG"
         alt="My sexy profile photo">
    <div class="lilPadding">
        <div>
            <p> Just a simple software engineer in San Francisco. </p>
            <p> I've worked on <a href="https://www.linkedin.com/in/chrisby/">Linkedin's</a> infra, Amazon Alexa, and SIG on
                tools for sysadmins/doing devopsy sysadminny stuff.</p>
            <p> I'm interested in software engineering, computer science, economnics, art and really anything else you might
                be interested in.</p>
            <p> hmu on <a href="https://twitter.com/BakoTac0">twitter/X</a> if you wanna chat! If you're excited about
                something, or know a lot no matter how niche I'd love to hear it.</p>
            <p> I do photography, ride motorcycles, play games, shred, and read too much in my spare time. </p>
        </div>
        <div class="creationsContainer">
            <div class="lilPadding">
                <h2> Posts that are too long for Twitter</h2>
                <ul>
                    
                    <li>
                        <a href="/2024/06/27/letter-to-my-new-grad.html">Letter to my New Grad</a>
                    </li>
                    
                    <li>
                        <a href="/2023/12/20/breakfast.html">there's something sumptious about breakfast</a>
                    </li>
                    
                    <li>
                        <a href="/2023/12/14/airplane-rules.html">Airport rules</a>
                    </li>
                    
                    <li>
                        <a href="/2023/12/07/heyoJustinAreYouSeeingThisBug.html">Hey Justin can you See this Bug?</a>
                    </li>
                    
                    <li>
                        <a href="/2023/12/06/isthisthingonagain.html">is this thing on?</a>
                    </li>
                    
                    <li>
                        <a href="/2023/11/14/willingness.html">DRAFT: Yet Another Jeff Bezosism</a>
                    </li>
                    
                    <li>
                        <a href="/2023/11/09/howdy.html">Howdy</a>
                    </li>
                    
                </ul>
                <h3>Subscribe!</h3>
                <form
                        action="https://buttondown.email/api/emails/embed-subscribe/chrisby"
                        method="post"
                        target="popupwindow"
                        onsubmit="window.open('https://buttondown.email/chrisby', 'popupwindow')"
                        class="embeddable-buttondown-form"
                >
                    <label for="bd-email">Enter your email:</label>
                    <input class="subscribeForm" type="email" name="email" id="bd-email"/>
                    <input class="subscribeForm" type="submit" value="Subscribe"/>
                    <p>
                        <a href="https://buttondown.email/refer/chrisby" target="_blank">Powered by Buttondown.</a>
                    </p>
                </form>
            </div>
            <div class="lilPadding">
                <h2>Things I've built</h2>
                <ul>
                    <li> This website!</li>
                </ul>
            <h2>Things I want</h2>
            <p> If you have these get in touch :)</p>
            <ul>
                <li>
                    Facebook's Red Book
                </li>
                <li>
                    Grace hopper's nanosecond
                </li>
            </ul>
        </div>
         <div class="lilPadding" style="
            display: flex;
            flex-direction: column;
            justify-content: space-around;">
               <fieldset>
                    <legend>2024 Goal List</legend>
                    <div>
                        <span>⬜</span> <!-- Checked emoji -->
                        <label>Make a dollar on the internet</label>
                    </div>
                    <div>
                        <span>⬜</span> <!-- Unchecked emoji -->
                        <label>Start a magazine for my friends</label>
                    </div>
                    <div>
                        <span>⬜</span> <!-- Unchecked emoji -->
                        <label>Write one blog post a month</label>
                    </div>
                    <div>
                        <span>✅</span> <!-- Unchecked emoji -->
                        <label>Go snowboarding 5 times🤙</label>
                    </div>
               </fieldset>
     
                <fieldset>
                    <legend>Photography Journal</legend>
                    
                    <div>
                        <a href="/photography/la-pictures.html">LA 2023</a>
                    </div>
                    
                </fieldset>
            </div>
        </div>
    </div>
</div>
<div class="somethingCoolContainer">
    <div class="lilPadding">
        <h1> Useful Stuff I've collected. </h1>
        <h2> Most important reads for software devs. </h2>
        <p> In the course of my career these are the things I keep fruitlessly recommending people read.</p>
        <ul>
            <li><a href="https://grugbrain.dev">Grug Brained Dev</a></li>
            <li><a href="https://gist.github.com/chitchcock/1281611">Stevey's Google Platform Rant </a></li>
            <li><a href="https://d37ugbyn3rpeym.cloudfront.net/stripe-press/TAODSAE_zine_press.pdf"> You and Your Research </a>
            </li>
            <li><a href="https://www.kalzumeus.com/2012/01/23/salary-negotiation/"> Salary Negotiation: Make More Money, Be More
                Valued. (By patio11)</a></li>
            <li><a href="https://www.levels.fyi/">Levels</a> is the best salary comparison website</li>
            <li><a href="https://www.mit.edu/~xela/tao.html">The Tao of Programming</a></li>
            <li><a href="https://meaningness.com/geeks-mops-sociopaths">Geeks, MOPs, and sociopaths in subculture evolution</a>
            </li>
            <li><a href="https://youtu.be/OTCuYzAw31Y">Google I/O 2012 - The Art of Organizational Manipulation</a></li>
            <li><a href="https://paulgraham.com/submarine.html">Paul Graham: The Submarine (it's about PR firms)</a></li>
            <li><a href="https://sites.google.com/site/forgottenemployee/">Forgotten Employee</a></li>
            <li><a href="https://cses.fi/book/book.pdf">Competative programmers handbook </a></li>
            <li><a href="https://reactionwheel.net/2021/11/your-boards-of-directors-is-probably-going-to-fire-you.html">Your Board of Directors is Probably Going to Fire You</a></li>
            <li><a href="https://techcrunch.com/2014/04/14/sf-housing/">How Burrowing Owls Lead To Vomiting Anarchists (Or SF’s Housing Crisis Explained)</a></li>
            <li><a href="https://stackoverflow.com/questions/130794/what-is-dependency-injection">Stack Overflow: What is dependency injection?</a></li>
            <li><a href="https://youtu.be/dVDkmJuEdDo">Anthony Bourdain, Leadership Lessons From the Kitchen, 2006</a></li>
            <li><a href="https://datatracker.ietf.org/doc/html/rfc2549">IP over Avian Carriers with Quality of Service</a></li>
            <li><a href="https://medium.com/@philipsu/goodbye-microsoft-hello-facebook-94a189d56830">Goodbye Microsoft, Hello Facebook!</a></li>
            <li><a href="https://www.astralcodexten.com/p/every-bay-area-house-party">Every Bay Area House Party</a></li>
        </ul>
    </div>
    <div class="lilPadding">
        <h1> My Map of Interesting Places</h1>
        <div id="mapid" style="width: 600px; height: 400px;"></div>
        <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.39.7/dist/umd/supabase.min.js"></script>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
        <script>
        var mymap = L.map('mapid', {
            center: [37.77, -98.41], // Center of the map
            zoom: 4, // Initial zoom level
            minZoom: 2, // Minimum zoom level
            maxZoom: 16, // Maximum zoom level
            maxBounds: L.latLngBounds(L.latLng(-80, -180), L.latLng(90, 180)), // Setting bounds directly
            maxBoundsViscosity: 1.0 // Optional: Prevents users from panning outside the bounds
        }).setView([37.77, -98.41], 4); // center and pretty zoomed out so you can see the markers easily. 
            
        L.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.{ext}', {
        	attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        	ext: 'png'
        }).addTo(mymap);
    
         const supabaseUrl = 'https://yxvbasplevarpghdjbxw.supabase.co';
        // This is the anon public key, don't be a dickhead. 
         const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl4dmJhc3BsZXZhcnBnaGRqYnh3Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzE5MzkwNjksImV4cCI6MTk4NzUxNTA2OX0.BhLLS5G7R5jda08fTNWEnTF9U9V55UMXS1MN4iAWbpA';
         const supabaseClient =  window.supabase.createClient(supabaseUrl, supabaseKey);
        
        async function fetchPins() {
            let { data: pins, error } = await supabaseClient
                .from('recs')
                .select('*');
        
            if (error) {
                console.error(error);
                return;
            }
            
            // Add pins to map
            pins.forEach(pin => {
                L.marker([pin.point_y, pin.point_x]).addTo(mymap)
                    .bindPopup(pin.title);
            });
        }
        
        fetchPins();
        </script>
    </div>
</div>

<div class="resourcesContainer">
    <div>
        <h2> Favorite tools </h2>
        <h3> Browsers</h3>
        <p> There are a bunch of interesting browser projects recently. More interesting than Chrome or Firefox. :)</p>
        <ul>
            <li><a href="https://arc.net/">Arc Browser</a> is the one I currently use.</li>
            <li><a href="https://github.com/bonsai-desk/bonsai-browser">Bonsai Browser </a> really enjoyed this project
                but it
                got killed off.
            </li>
        </ul>
        <h3> Notetaking </h3>
        <ul>
            <li><a href="https://obsidian.md/"> Obsidian </a></li>
        </ul>
        <h3>Vim Resources</h3>
        <p>
            I've vimified like 90% of my workflows. Worth learning just for the fun of it, but it does have a high
            learning
            curve.
        </p>
        <ul>
            <li><a href="https://vim-adventures.com/"> Vim Adventures </a></li>
        </ul>
    </div>
    <div>
        <h2> Lectures and courses </h2>
        <h3> AI </h3>
        <ul>
            <li><a href="https://www.youtube.com/watch?v=zjkBMFhNj_g"> Intro to Large Language Models </a> by Andrej
                Karpathy
                (worked at OpenAI, Tesla AI, etc.)
            </li>
            <li><a href="https://www.buzzfeednews.com/article/tedchiang/the-real-danger-to-civilization-isnt-ai-its-runaway#.vp1ylDRDR">Silicon Valley Is Turning Into Its Own Worst Fear</a></li>
        </ul>
        <h3> Security + Hacker Culture </h3>
        <ul>
            <li><a href="https://web.stanford.edu/class/cs81n/command.txt"> In the Beginning was the Command Line</a></li>
            <li><a href="https://darknetdiaries.com/transcript/45/"> EP 45: XBOX UNDERGROUND (PART 1) </a></li>
            <li><a href="https://youtu.be/OAI8S2houW4"> DEFCON 18: Pwned By The Owner: What Happens When You Steal a Hackers Computer</a></li>
            <li><a href="https://en.wikipedia.org/wiki/Hackers_(film)"> Hackers (film)</a></li>
        </ul>
        <h3> Programming Languages </h3>
        <ul>
            <li><a href="https://www.amazon.com/Effective-Java-Joshua-Bloch/dp/0134685997"> Effective Java (the best intermediate Java book I've found.)</a></li>
            <li><a href="https://brandonspark.github.io/150/"> functional programming course from CMU </a></li>
            <li><a href="https://teachyourselfcs.com/"> Self taught CS resources. Read these books. </a></li>
            <li><a href="https://docs.oracle.com/javase/8/docs/api/java/net/URL.html#equals-java.lang.Object-"> Chaotic Programming Facts </a></li>
        </ul>
    </div>
    <div>
        <h2> Good Reads </h2>
        <h3> Favorite Books/Essays/Articles </h3>
        <ul>
            <li><a href="https://en.wikipedia.org/wiki/Snow_Crash"> Snow Crash </a></li>
            <li><a herf="https://harpers.org/wp-content/uploads/2008/09/HarpersMagazine-1996-01-0007859.pdf">On the (nearly lethal) comforts of a luxury cruise</a></li>
            <li><a href="https://www.newyorker.com/magazine/1940/04/13/the-old-house-at-home">The old house at home</a></li>
            <li><a href="https://slatestarcodex.com/2018/10/30/sort-by-controversial/">Sort By Controversial</li>
        </ul>
        <h4>Economics/Investing</h4>
        <h4>Beginner friendly resources</h4>
        <ul>
            <li><a href="https://youtu.be/PHe0bXAIuk0?si=WhWumT5rT-cyJQIS"> Ray Dalio's explaination of how the economy
                works</a></li>
            <li><a href="https://youtu.be/rf_f8GV0yYM?si=Gl83VsiicAwXSZAP"> Peter Lynch lecture on investing</a></li>
            <li><a href="https://youtu.be/VI_riscmviI?si=fYfzNocF7lYJHOTE"> Intor to finance by Martin Shkreli</a> his
                valuing
                things from scratch series is pretty good too.
            </li>
            <li><a href="https://a.co/d/hJGRXZj"> Market Wizards + Unknown Market Wizards </a></li>
            <li><a href="https://www.bitsaboutmoney.com/"> Bits about money </a></li>
            <li><a href="https://www.bloomberg.com/opinion/authors/ARbTQlRLRjE/matthew-s-levine">Everything Matt Levine
                Writes</a></li>
        </ul>
    </div>
</div>
</body>