Burger art via Midjourney

I was trying to create an eye-catching graphic today for the Gastronomic SLC website. I love the artistic approaches from Midjourney, far more than the attempts to create pseudo real images. After all, I have an infinite library of burger photography from years of food photography work here in Utah.

The following then, some example Midjourney prompts and the associated output, all from version 5.

an abstract picture of a burger, very circular, lots of circular flourishes, warhol –ar 3:2

Midjourney burger art 1
Midjourney burger art 1

an abstract image of a burger, very circular, lots of circular flourishes, warhol, white background, dynamic and strong –ar 3:2

Midjourney burger art 2
Midjourney burger art 2

It’s kinda fun to play with using certain artists names and seeing what Midourney does with the additional input parameter, here’s Piet Mondrian.

an abstract image of a burger, beef patty, brioche, tomato, mustard, ketchup, cheese, onion, very circular, lots of circular flourishes, piet mondrian, white background –ar 3:2

Midjourney Mondrian burger art
Midjourney Mondrian burger art

Then MC Escher.

an abstract image of a hamburger, beef patty, brioche, tomato, mustard, ketchup, cheese, onion, creative flourishes, mc escher, white background –ar 3:2

Midjourney Escher burger art
Midjourney Escher burger art

How about some pop art? Here’s Warhol on the job.

a hamburer painted by andy warhol, very stylistc, strong colors, white background –ar 3:2

Midjourney Warhol burger art
Midjourney Warhol burger art

a hamburer painted by andy warhol, very stylistc, strong colors, white background –ar 3:2

Midjourney Warhol burger 2 art
Midjourney Warhol burger 2 art

Things really only went off the rails when I opted for Picasso. I am sure I could have got better results by emphasizing some of the key words. Here’s the path MJ took with the great Spanish artist at the wheel.

a hamburer painted by picasso, very stylistc, white background –ar 3:2

Midjourney Picasso burger art
Midjourney Picasso burger art

ChatGPT for refining and learning CSS

I wasn’t quite happy with the prior day’s address block. It was fun and all to generate new code for the site from an LLM, but it looked kinda funky. Instead, I decided to take a different tack entirely. Perhaps after a business listing I could use some cool looking buttons to prompt the user for their next action. With that in mind, I started with one, people probably wanted to see a map location for the business. Here’s the basic discourse with ChatGPT4:

Can you make me a very simple button for my website. The button should say Google Maps and open a link to Google maps. The button should have a simple border, and a white background

<html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Google Maps Button</title>
</head>
<body>
    <a href="https://www.google.com/maps" target="_blank" class="google-maps-btn">Google Maps</a>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.google-maps-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background-color: #ffffff;
    padding: 12px 24px;
    text-decoration: none;
    border: 2px solid #333333;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.google-maps-btn:hover {
    color: #ffffff;
    background-color: #333333;
}

This code creates a simple Google Maps button with a border and white background. When you hover over the button, the text and background colors will invert. The button links to Google Maps and opens the link in a new tab. You can modify the styles, colors, and fonts in the CSS file to match your website’s design.

From there, I figured I could use many of the buttons to express different user intents after reading a snippet, so asked, “I want to use many of these buttons, how would I ensure there is an even amount of space between each button”. CGPT went on:

To ensure an even amount of space between multiple buttons, you can use CSS Flexbox or Grid layout. Here’s an example using Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Spaced Buttons</title>
</head>
<body>
    <div class="button-container">
        <a href="#" class="button">Button 1</a>
        <a href="#" class="button">Button 2</a>
        <a href="#" class="button">Button 3</a>
        <a href="#" class="button">Button 4</a>
    </div>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
}

.button {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background-color: #ffffff;
    padding: 12px 24px;
    text-decoration: none;
    border: 2px solid #333333;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.button:hover {
    color: #ffffff;
    background-color: #333333;
}

In this example, we have created a button-container div and added multiple buttons inside it. The container has a Flexbox layout with justify-content set to space-between, which ensures even spacing between the buttons. The max-width and padding properties on the container limit its width and ensure some space is maintained around the buttons on smaller screens.

Before you know it hey presto, a new button setup, but on mobile things looked funky so a little later in the day I returned and asked, “I have a problem with some code on my website. I have some buttons that I want to cascade onto new lines if viewed on mobile. Can I show you my code and you can suggest how to do that?”

Of course! Please go ahead and share your code, and I’ll be happy to help you achieve the desired behavior for your buttons on mobile devices.

After pasting in the button code I got:

I see that you have provided the HTML code for the buttons. To achieve the desired behavior, you’ll need to add some CSS for responsive design. You can use media queries to apply different styles depending on the screen size. Here’s an example of how you could modify your code:

First, wrap your buttons in a container div:

<div class="button-container">
  <span class="checkemout">More info</span>

  <a href="https://goo.gl/maps/pofpxtqsLBjGLP1U6" target="_blank" class="info-buttons" rel="noopener">Map</a>

  <a href="https://bgrtheburgerjoint.com" target="_blank" class="info-buttons" rel="noopener">Website</a>

  <a href="https://www.instagram.com/bgrsugarhouse/?hl=en" target="_blank" class="info-buttons" rel="noopener">Instagram</a>
</div>

Next, add the following CSS to your stylesheet or within <style> tags in the <head> section of your HTML document:


button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.info-buttons {
  flex: 1;
  min-width: calc(50% - 4px);
  max-width: 100%;
  text-align: center;
  /* Add any other button styles here */
}

@media (min-width: 768px) {
  .info-buttons {
    max-width: none;
  }
}

This CSS code uses flexbox to create a responsive layout for the buttons. The flex-wrap: wrap property makes the buttons wrap onto new lines if they don’t fit in the available space. The gap property is used to add space between the buttons.

The min-width and max-width properties of the .info-buttons class are set so that each button takes up 50% of the available space on small screens (with 4px gap compensation), allowing two buttons per line. The max-width is set to 100% to ensure the buttons take the full available width on larger screens. The media query at the end ensures that the max-width constraint is removed for screens wider than 768px, which would typically be tablets and desktop devices.

Feel free to adjust the values as needed to better suit your design.

While this was great, I had a slight issue, so went on, “That works great, however when the buttons cascade onto a new line the vertical space between each button is too close, how can I make a uniform vertical space when the buttons cascade to a new line”

You can control the vertical spacing between buttons by updating the gap property in the .button-container class. The gap property sets both the horizontal and vertical spacing between the items inside the flex container. Here’s the updated CSS code:


.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px; /* Adjust the second value to control the vertical space between buttons */
}

.info-buttons {
  flex: 1;
  min-width: calc(50% - 4px);
  max-width: 100%;
  text-align: center;
  /* Add any other button styles here */
}

@media (min-width: 768px) {
  .info-buttons {
    max-width: none;
  }
}

In the gap property, I’ve set the first value to 8px for horizontal spacing and the second value to 16px for vertical spacing. You can adjust the second value to increase or decrease the vertical space between the buttons when they wrap onto a new line.

This still posed some problems, CGPT went onto suggest I use row-gap in conjunction with column-gap but that too failed. I pointed this out to CGPT who rather than belabor the point, simply suggested a different tack entirely:

I apologize for the confusion earlier. Let’s try another approach to add vertical spacing between the buttons when they wrap onto a new line.

Instead of using row-gap and column-gap, we can add margin to the buttons. Here’s the updated CSS:

.button-container {
  display: flex;
  flex-wrap: wrap;
}

.info-buttons {
  flex: 1;
  min-width: calc(50% - 4px);
  max-width: 100%;
  text-align: center;
  margin-bottom: 16px; /* Add margin to the bottom of each button */
  /* Add any other button styles here */
}

@media (min-width: 768px) {
  .info-buttons {
    max-width: none;
    margin-bottom: 0; /* Remove the bottom margin for larger screens if desired */
  }
}

In this version, I’ve removed the row-gap and column-gap properties and added a margin-bottom property to the .info-buttons class. This will create a uniform 16px vertical space between buttons when they wrap onto a new line. Adjust the margin value as needed to achieve the desired vertical spacing.

I think this last bit is what really had the lightbulb go off over my head. I expected the model to keep rehashing CSS code that (from what I could see on Google) didn’t really work, but instead, it did why I would do with enough time – look for a workaround. Mind. Blown.

This back and forth with the model, refining my core idea, improving, pivoting – a fabulous experience and one that took just minutes. A year ago I would have sunk a whole Saturday afternoon into trying to cobble together suspect CSS; and probably then throw it in the trash.

Instead, ChatGPT let me take a nebulous idea, explore the basics, suggest improvements, refine them, and by the end I’d learnt entirely new things (the flex CSS in this instance) that I’ll no doubt use again.

“A little bit of knowledge is a dangerous thing?” In ChatGPT world, this phrase is about to need a rewrite – it’s all you *really* need frankly, to jump in an execute an idea.

Featured image, Midjourney: a room full of books, and documents, there is a robot that is stood pointing to a specific book, drawing the viewers attention to the book –ar 3:2 –v 5

Using ChatGPT for custom HTML – business info box

Could ChatGPT (version four) make me a quick add-on for a website? Lets see. I asked:

“I want some HTML for a a block component on a WordPress website. I would like the block to be used after information about a business, to list the address, phone number and website. I would like the boxed element to have rounded corners and be visually appealing”

It came back as follows:

I understand that you would like a visually appealing block component with rounded corners for your WordPress website to display address, phone number, and website information. Here’s an example of HTML and CSS code that you can use:

First, create a new Custom HTML block in your WordPress editor and paste the following code:

<div class="contact-info-box">
    <h3>Contact Information</h3>
    <ul>
        <li><strong>Address:</strong> 123 Main St, City, State, Zip Code</li>
        <li><strong>Phone:</strong> (123) 456-7890</li>
        <li><strong>Website:</strong> <a href="https://www.example.com" target="_blank">www.example.com</a></li>
    </ul>
</div>

Next, to style the block component, add the following CSS code to your WordPress theme’s custom CSS section or child theme’s style.css file:





.contact-info-box {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    max-width: 500px;
}

.contact-info-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.contact-info-box ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.contact-info-box li {
    margin-bottom: 5px;
}

.contact-info-box a {
    color: #007bff;
    text-decoration: none;
}

.contact-info-box a:hover {
    text-decoration: underline;
}

This code will create a block component with rounded corners, a light gray background, and a drop shadow to make it visually appealing. The contact information will be displayed in an unordered list, and the website link will be underlined when hovered over. You can adjust the colors, padding, and other styling properties to match your website’s design.


Here’s how that looks in usage:

Contact Information

  • Address: 123 Main St, City, State, Zip Code
  • Phone: (123) 456-7890
  • Website: www.example.com

Not bad, not bad at all huh.

Featured image: a robot sat at desk working on designing a website using a laptop computer, a vintage style photograph, 4k –ar 3:2 –v 5

Parasite – worth the hype

Admittedly, I’ve only see a couple of Bong Joon-ho movies; but every one I love to bits. Since Danny Boyle went completely off the err, boil, Joon-ho is now THE name I take as a guarantee for a fun movie.

Snowpierecer is an awesomely fun take on class struggle and Okja is the only super-pig movie I’ve ever seen; and a damned dark one at that. I always intend to make my way through his back catalogue but keep forgetting.

When I heard Joon-ho’s latest Parasite had won the Oscars, I’ll admit to thinking it might be a step in the other direction; after all, Oscars…

Boy was I wrong. What an awesome movie. I won’t spoil it, just watch it, it’s worth the hype. Good pacing, a couple of twists that I didn’t seem coming (though I try hard to just sit back and let a movie wash over me). I’m excited to watch it all over again.

Fun fact. When I started the movie I went in really lazy. Flipping through the Netflix options, looking for the dubbing. I know, I know. Thankfully no such option existed. You either speak Korean or you read the subtitles. I am sure this is not be accident, this was undoubted design. Had I enabled dubbing, I’d probably have second screened it and enjoyed it far less. With 15 minutes into the movie I’d forgot I was even reading subtitles (don’t judge me film snob) and was all the more engaged for it.

I had the Moderna vaccine – here’s what to expect

I was beyond thankful and grateful when I got the call to come get the Moderna jab – RIGHT NOW. As a forty something, I’m not particularly in any major risk group (beyond being a modest smoker), but I did get the nod from medical friends.

“We have a certain amount leftover each day from no shows at schedule appointments. We’d rather not throw this precious resource away., It’s either your arm or the garbage can, but you have to come when we tell you. Like, you get the call and you need to be here in 20 mins”.

I was in. After two weeks on tenterhooks, waiting each night for a call, it finally came.

Said friends gave me various anecdotes about what to expect with the vaccine side effects, but being so early in the roll out, there was little official documentation out there as to what to expect. This, that and maybe some other stuff.

In case it’s of help, here’s what I experienced from the Moderna jab. For reference, I’m a relatively healthy middle aged man, I don’t really like shots (who does) and as much as I want to say I have a good pain tolerance, I bet I’m pretty average. I’m probably the definition of an average middle aged guy.

The first Modern shot

Day 0 – I received the shot in the early evening. The shot itself was a cinch. A quick brush with an alcohol swab, started and finished in barely more than a second. I could barely feel the jab itself, or the Moderna vaccine going in. I started to feel some slight soreness around the injection site within a couple hours of the shot. I went to bed at 11.30 p.m.

Day 1 – I woke at 3.30am with awful arm pain. Lets be clear, I *never* wake during the night. I sleep like a log thats been buried in cement. But this pain woke me up like a shot. A good solid, “take notice of me” pain. At first I thought I had fallen asleep in a weird position so tried to move and flex my arm – the pain got worse. After much tossing and turning I discovered I needed to keep my arm straight or bent – but whatever the choice – keep it there. Any movement would increase the pain. While discovering this, I also experienced some on and off chills through my upper torso. I finally fell asleep after 90 minutes or so.

By the morning I felt pretty rough from head to toe. Body aches, lethargy and a general meh attitude. An Amazon package arrived to the sound of the doorbell. It felt like it took aeons to walk the barely 20ft to the front door to collect it. The arm felt like a write off for any real amount of lifting or movement. The chills intensified, I noticed a decent neck pain and by mid afternoon I took to bed for an afternoon nap. I probably slept a couple hours.

I woke around 6 p.m. and felt orders of magnitude better. By 8 p.m. I felt improved enough to crack a couple of beers. Clearly the tide had turned.

Day 2 – I slept soundly through to the morning and found that the arm pain had lessened, and certainly was not constant anymore. There was no pain when lifting or with most movement. Some pain with raising the arm aloft, and extending the arm outwards away from my body. A decent level of pain remained from pressing on the injection site. Chills and general aches were now completely vanished, though neck pain and stiffness remained present.

Day 3 – Pain was almost gone in the arm by morning and practically vanished by the evening. A firm press on the arm resulted in a minor sensation, not unlike accidentally bumping the arm. Neck pain almost gone.

Day 4 – Some pressing around the injection site produced a very mild pain in the morning, but by evening it was completely gone. Effectively no more traces of vaccine. I started to get a mild pain in my armpit – on the same arm of the vaccine. I didn’t think much of it at first, but…

Day 5 – The armpit pain persisted and increased – enough for me to note it as pretty unusual. The pain remained prominent through the day.

Day 6 – The armpit pain was still present, and also back with it, the day one lethargy, aches, pains and general malaise. Certainly not as bad as day one, but I needed to take a late afternoon nap. Very low energy, and overall, feeling kinda sorry for myself.

Day 7 – With another day of armpit pain, I took some Ibuprofen, which largely resolved the pain. Lethargy and general meh continued, as did some fuzzy brain which made focusing hard. Certainly I wasn’t up to much in the way of productive work and took another late afternoon nap. As a sidetone – I never ever take naps – so this was really unusual for me.

The second Moderna shot

I’ve heard in advance from medical friends that the worst side effects come with the second shot. That leaves me pretty intrigued with what’s coming. I’ll update the post when that happens…

Day 0 – Well a full month has passed shot number two beckoned. This time around I had the shot relatively early in the morning, around 10.30 a.m.

As we drove home I started to develop a mild headache but nothing too serious. Much like the first shot, after a couple hours my arm pain was pretty intense, well beyond the ‘dead arm’ many talk about.

As the day wore on I felt increasingly fatigued and drained. Like last time I took a nap mid afternoon. We had grand plans to order food in if we felt too bad, but I felt just about upto cooking a simple dinner.

Throughout the rest of the evening my energy levels continued to drop and I felt ‘stuck’ on the sofa. As long as I didn’t move, feet up, scrolling through Netflix all was well. Anything more was an absolutely hassle though.

I dragged myself to bed, and a rough night ensued. Arm pain, constant fevered sweats and pretty much waking up every hour. I finally got out of bed at 6 a.m., throughourly dehfryated and I think I downed two points of water in quick succession before headed back to bed for a few more hours.

Day 1 – I had expected things to get worse, but my initial feelings on tentatively opening my eyes was, “hey this might not be too bad”. I was still pretty fevered, head to toe in sweat. But the fatigue and muscle pain had massively subsided. My arm still was crazy sore though, so I made some breakfast and took ibuprofen. By noon, and after a shower, I was starting to feel pretty ok. Still quite sweaty mind you, but whole new levels of energy had returned.

End of post thematic video

A full month later

We were a little ahead of most when it came to self isolating and locking down. We saw the winds a blowin’ and were settled in earlier than most. It’s been a full month in this household of battening down the hatches and watching on aghast at seemingly smart types proudly posting a picture of their latest IKEA haul. Hey the state hasn’t locked us down yet right?

Today’s April 11th, the last I left the house in any shape or form, other than to walk the dog or pull up weeds, was March 11th, a fun meal out with a friend. I ate this burger that night…

Thankfully life on lockdown has been just as delicious. I’ve been surprised at how much less food stuff I waste. With the prospect of limited re-supply, there’s more creativity in using leftovers or random cans and jars. I like this.

I’ve continued to lose a little weight, more than likely from adjusting to non drinking every can of beer under the sun, and just having a nightly wine hour or four.

The last month has passed in the bat of an eyelid for me personally. I could do another, I could probably do three or six easily enough. I often thought I’d do well on a remote research station like the Antarctic or even Mars.

All that said, I completely understand I have an incredibly privileged lifestyle. I’m very lucky, stupidly lucky. I can still get the odd food delivery, my real job continues apace and thank god, unaffected for now. I have a garden I can relax in. I have stockpiles of wine and Marlboro and sausage and rice.

Random video for no reason

Getting back to normal

Amidst all the current talk of flattening the curve, there’s increased talk of getting back to normality. Getting back to a life that’s not sequestered. Living large, not living locked.

It all strikes me as rather misguided though. After all this, what exactly will normal be? Do people really expect to wake up one day, as if this was all a fevered dream, pun intended. Do we really expect sports stadiums to be packed shoulder to shoulder again in the same fashion, conferences stacked 1000 people deep? I can’t see it myself.

Indeed it doesn’t seem likely Covid-19, or any future strain therein, will ever truly leave us. From here on out this is increasingly looking like being endemically part of life. Much like the flu, a cold, taxes and death. Part of the day to day.

It will wax and wane, there will be vaccines, boosters and immunization shots. People will still get sick, people will still die, most will be o.k. But life will have changed.

Already, after barely two or three weeks locked indoors, people talk about recoiling when they see a hug, handshake or crowd on TV. Imagine after a couple months of this. The idea of large crowds and high density commutes will be looked on in as much the same way as a smoker stood on the street corner; I know this look first hand by the way, it’s pretty disdainful bordering on the mildly psychopathic.

For sure there will be plenty that thumb their noses, and will be eager to return to normality. “It won’t change my way of life”, they’ll snortily protest. But that’s besides the point, most people are generally fearful, most people will change. In small ways, in making different choices. Maybe I won’t dine out tonight, maybe I won’t attend that conference, maybe I’ll see if I can work remotely more often.

These small changes will ripple and churn and it won’t matter if you’re one of the naysayers, the herd mentality will simply alter life, economies and social interaction for good. You can wave your fist at change, but that’s about it.

I’ve been thinking about this a lot the past few weeks. Not in a negative or positive way. The sky isn’t falling, it’s merely changing a little bit. I’m eager to try and get ahead of what color that new sky might look like. It’s already here, it just needs looking at a bit more.

I knew I was abnormal but damn

As I write, I’m officially on lockdown day 28. Unofficially even before that I’d barely left the house in forever. It’s actually day 56 of barely leaving the house for me. In pretty much 60 days I only left three times – two meals at restaurants and one night out watching a show – before lockdown officially began.

Some of the locked in hyperbole I’m seeing right now is fascinating. Supposedly intelligent people slowly losing their minds, one I read today predicting impending social anarchy and riots if we go on much longer; simply because they can’t stay indoors and watch a little extra Netflix. Madness.

I mean, I haven’t even started on HBO yet…