The skeleton is in place, but now something more than a chiropractor is required, perhaps a couple hip replacements? Basically, if you look at the site code, it’s a bit of a mess. The surface looks basically how I want it, below the surface is a bit yucky. I won't bore you here with that below surface stuff any more; I've got my dev blog for that stuff.
I had another duh moment with the site page names. On tumblr, my on boarding ramp to basic html, I experimented a lot with themes and styling. I eventually settled on three containers for things: percolate - current events, the world, ideas; chips - technology, analytics, business; unlinear - art, pop culture, high brow and low brow. Nothing revolutionary, but after many many hours, it just made the most sense; if you want to keep things simple at the high level.
Percolate makes me think of drinking coffee or water bubbling up in the office water cooler as people talk about the news of the day or issues. An earlier version was called “deep dives,” but sometimes the news isn’t very deep, just watch the Daily Show.
Chips, previously was tech, but there are so many places called tech online. So then I thought of microchips in everything and even did a cheesy thing with potato chip bags for different subcategories. And of course it overlaps with business “blue chips” so it has multiple meanings. And other technology stuff can go here, like all the cool data visualization, data analytics and data science things that power all the data driven decision making now a days.
Unlinear, it kinda is Lynchian (David) inspired. Connecting things in a nonlinear way. I summed it up a couple years ago speaking into the void of Tumblr “The best ideas come together in a blender of neurons. Reflecting on the seemingly unrelated, new connections are formed and unexpected conjurings emerge into the spectral realm.” Yeah, I know, weird. But unlinear also is how tv is evolving, Netflix on demand, “nonlinear tv,” so it can mean that too if you prefer. A weird blender of art, mindfulness, neuroscience, tv, movies, pop, books.
So piece by piece I’ll be building out the surface. Mostly links for now, I think I’ll start with AI. I have a bunch of lists on X with lots of great sources, but who looks at X lists?
Got rid of the hamburger menu, but still working on my navigation. During my experimenting last year with layouts, I really liked just using the three o's in toronto as navigation buttons. But how do you make people realize the o's are buttons? I just implemented some neon colour glow fade in and fade out effects for the portions of the header that are links. Next I think I'll make some type of hover effect for the os so it tells you where it will take you before clicking and my name will just take you back to the site homepage.
So next up is figuring out what the three landing pages will be, the chiclet button pages and what to name them: Tech stuff, ideas/current events, and pop/art stuff most likely. They overlap, but all lists and categories are artificial constructs, so whatever.
I also set up a react environment for javascript stuff. Still don't really understand what I did there. But some websites with cool animations use it, and its opensource so I thought I'd give it a try. I got one animation working briefly on my PC in a browser, with a local instance of a webpage, but still having some issues using it on the live site. React wasn't fully ported over cause I needed to add a file called .nojekyll to my site root directory. The names of these things are hilarious. I have no idea what I'm doing half the time, but I end up knowing more than when I started.
Oh and my fonts are now locally saved, which was super easy. Google's font site is really cool, just download the fonts and drop them in your folder and update your HTML to reference the appropriate font for your page.
Claude.ai redid a few of my site pages in a 1970s retro futuristic style yesterday and it looks really cool. But upon closer inspection I realized the changes rely on an external Google api stylesheet. Why should that be a concern?
In memoriam: (1) Google Reader (2005–2013), (2) Google Wave (2009–2012), (3) Google+ (2011–2019), (4) Google Hangouts (2013–2022), (5) Inbox by Gmail (2014–2019), (6) Picasa (2002–2016), (7) Google Talk (2005–2017), (8) Google Allo (2016–2019), (9) Google Buzz (2010–2011), (10) Google Code (2006–2016), (11) Google Play Music (2011–2020), (12) Google Daydream (2016–2019), (13) Project Ara (2013–2016), (14) Google Glass (2013–2015), (15) Google Nexus (2010–2015), (16) Google URL Shortener (2009–2019), (17) Google Notebook (2006–2011), (18) Google Answers (2002–2006), (19) Orkut (2004–2014), (20) Google Hire (2017–2020), (21) Google Health (2008–2012), (22) Google Notebook (2006–2011), (23) Google Latitude (2009–2013), (24) Google Play Newsstand (2013–2018), (25) YouTube Gaming (2015–2019), (26) Google Currents (2011–2013, 2020–2023).
To future proof the future theme, Claude advised to make a fonts folder on my site root and download the fonts used on the new pages fonts(dot)google(dot)com, and update the index.html file to point to the new folder. Then it's all local and no worry about an API URL breaking in the future. Lesson learned.
Got the remaining pages migrated over from the other platform, so now it's all on github. The library page is still a bit boring, I need to restyle it, but Claude.ai in half a second took my prompt, "This webpage is super dull, can you jazz it up and make it look, using like retro futuristic 1970s vibe? This should be the main color to play with rgba(0, 255, 0, 0.7) and use some fun retro futiristic 1970s fonts. It's a page to provide links to artificial intelligence tools:" And then it whipped up a fun page for links, it's on the chiclets page. I liked the Logan's Run aesthetic, so I used it on the data tools page, as well as the updated second and third "o" links in toronto in the header.
Next up I may make the chiclets a little more 3-D, but not too much, I like the minimalist aesthetic. And I think I'll dive more into javascript next week. Claude in half a second made an amazing javascript animation based on this prompt, "I want to make a cool java script animation with text in color rgba(0, 255, 0, 0.7) in Comfortaa style font. Make it look really crisp and advanced with the text connecting and disconnecting like neurons firing in the brain."
The friction, the learning curves to use tools to make things in javascript and other languages are disappearing, now you can describe what you are thinking, the more descriptive the better and out comes a close approximation of what you were thinking of. And you then iterate, perfecting through natural language what your idea is to make it become real in the code. It's really really cool. It's like next level storyboarding. Then a more seasoned human coder can take what you've visualized in detail and clean up the code.
Pretty incredible, and these are all free tools, and they are exponentially (no pun intended) improving, next year things will be more than twice as powerful than they were a few months ago. Small business owners should all have amazing websites soon. You can make one yourself, all you pay is the hosting fee, the domain name registration, and your time designing a site.
If you were a kid that used a word processor in the 1980s, then you can learn HTML and CSS easily. The java part you hand off to the AI and plug in the code to the HMTL. There's tons of cool opensource javascript animations on codepen.io and of course github.io. On my list eventually is to update my menu with a JavaScript animation.
P.S. I learned that Google's iframe coding doesn't like external links, so I decided to create a separate blog page and embed that html blog as an iframe here. For some odd reason, google docs kept showing vertical lines between paragraphs, during my frustration I just decided to do the blog this way.
Today, I'm gonna share some screenshots with ChatGPT 4o of this i-frame embedded on the DEV homepage on mobile and desktop and see if it can then figure out what needs to be tweaked with the coding (along with the index.hmtl and styles.css files). My site is starting to use a lot of CSS containers, something I hadn't used before, I just used to include the styling on the same page using simpler 1990s HTML tags and coding. The containers can conflict with each other and I'm sure if someone more seasoned looked at my CSS page they probably would get the giggles. But I'm gonna keep building things this way, with fresh eyes and then do the cleanup later. The end state of the template will ideally be very easy to read with simplified CSS containering; I want to include detailed comments within the code like "See xyz in the CSS", or "if you want to change this colour, don't do it in the CSS, add some customized styles in the header," but that will take a while. For now I'm gonna keep being tutored by my buddies Claude, ChatGPT, Copilot, Mistral and Perplexity.
My two goals for this hobby project today are to (1) fix the width for mobile of this i-frame, and (2) move the remaining pages that aren't yet hosted on github over to github - thankfully there aren't too many of those left. Also, I started to add some TXT notes in the backup folder of DEV when I make "major" changes, major for a newby.
I got (1) done, lots of frustrating back and forth with ChatGPT and Claude. Copilot took a look at all the revisions which looked perfect except Xponential's attribution text was pushed off the left of his gif. Copilot updated the