Web Design Tips and Tricks

On a 2560-pixel monitor, the text column of my blog was 867 pixels wide. Not 33%. Not the result of a media query. Eight hundred and sixty-seven pixels, at every window size, forever. Here is how I found the number, and what a fourteen-year-old Blogger template teaches about how layouts get stuck. The template is Awesome Inc. , designed by Tina Chen and shipped with Blogger since around 2011. If your blog is more than a few years old there is a decent chance you are running it, or one of its siblings, and a decent chance you have already tried to widen it from the Template Designer and failed. The reason you failed is interesting, so let's do the archaeology properly. Finding the number Start by not opening dev tools. Open the template XML and search it for every declaration that sets a width. You are looking for one specific thing: a length that is not a percentage. A fluid layout that feels cramped is a padding problem. A layout that is exactly as wide on a ...

Click to Copy with a Toast Message (No Alert) Here’s how you can display code like the one below: hiSetBindKey("Schematics" " F5" "hiDeiconifyWindow(window(1)) && hiRaiseWindow(window(1))") ...and allow users to: Click the code to copy it to clipboard See a small toast saying Copied! next to the label All without triggering an alert box 🔧 Full HTML + CSS + JS (Paste in a blog post) This version is safe even with quotes and parentheses — it programmatically sets the text to avoid HTML escaping issues. <style> .copy-container { position: relative; margin: 1.5em 0; } .copy-label { font-weight: bold; margin-bottom: 0.4em; } .copy-text { display: inline-block; padding: 0.5em 0.8em; border: 1px solid #ccc; background: #f4f4f4; font-family: monospace; white-space: pre-wrap; cursor: pointer; user-select: none; transition: background 0.2s ease; } .copy-text:h...

Trying to get a handle on how JS meshes with Blogger

Trying to get a handle on how JS meshes with Blogger

https://www.score.org/event/how-use-ai-in-digital-marketing-strategy

Yes.. thank you chat.. Click Me Click Me    Not good enough? Use what Josh Comeau has come up with :  https://www.joshwcomeau.com/animation/3d-button/

General Washington

Who doesn't love chatGPT? Draw on Canvas Width: Height: Color: Brush Size: Clear Canvas Ok, took some doing to get there.. Somehow, the code from the codepen worked right away when pasted into blogger, not so with the code from chatG. Create a web page containing a canvas element whose size comes from the values contained in two input fields labelled "Width" and "Height". The viewer will be able to click and drag to draw on the canvas. The color he draws with can be set by a color selection input. Can you set the background of the canvas to white? Nothing happens when I click and drag on the canvas Actually, the previous JavaScript does work - in CodePen, but not in Blogger (Blogspot). Any idea why? Why is it that the code you gave me doesn't work, but the below code works in Blogger? The code you provided seems to work in Blogger because it's handling mouse events directly on t...

Thank you Taewan Kim . As long as it's an element like a div or a p aragraph or a span , this one is easy. Starting with <p>, just change that to (click below in the colored area to select it) <p  onclick="var range = document.createRange(); range.selectNodeContents(this); window.getSelection().removeAllRanges(); window.getSelection().addRange(range);" > And you're done

Unfortunately, this gets defeated by : Access to fetch at 'https://www.blogger.com/profile/16603721268975096125' from origin 'https://frontendkaizen.blogspot.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. The idea: blogspot (aka Google's blogger platform) gives you a search field per blog that you can use to search that blog. What if you want to give the reader a way to search all your blogs at once? We want a blog post (that we will ensure is at the top) that contains a simple UI that accepts search terms and has two buttons - "This blog" and "All blogs". Getting the link to the "profile" page, that has links to the other blogs is easy, done with chatGPT. See the file get_profile_link.txt. So, the d...

Go

To create a continuous Glowing Text animation using HTML and CSS, follow these steps: Add the following HTML code wherever you want the text to appear: <span class="glow-effect">Glowing Text</span> Add the following CSS code within a <style> tag or in your CSS file: (NOTE: click on code to select) .glow-effect { font-size: 24px; animation: glow 2s infinite; } @keyframes glow { 0% { text-shadow: 0 0 5px #ff0000; } 50% { text-shadow: 0 0 20px #ff0000; } 100% { text-shadow: 0 0 5px #ff0000; } } That's it! The text with the class "glow-effect" will now have a continuous glowing animation, with the glow effect fading in and out every 2 seconds.

To create a beating heart effect in HTML and CSS, follow these steps: Add the following HTML code wherever you want the heart to appear: <span style="font-size: 24px; animation: heartbeat 2s infinite;">❤</span> Copy Code Add the following CSS code within a <style> tag or in your CSS file: (NOTE: click to select) @keyframes heartbeat { 0% { font-size: 24px; } 50% { font-size: 32px; } 100% { font-size: 24px; } } That's it! The heart symbol (<span> with the content ❤ ) will now be displayed with a beating effect, growing and shrinking continuously every 2 seconds.

Per the great bloggers, it helps your cause to put your message in a box But, how? I mean, easily? :) Do it once (use these steps, which I got from chatGPT) and, once you have a blog that you can look at in edit mode, you can always cut and paste. Go into Edit HTML mode. If necessary, use a tool like freeformatter.com to make the HTML that your blogging platform creates for you readable (with indentation, etc). Now, locate the text you want to enclose in a box and surround it with : <div style="border: 2px solid COLOR_OF_CHOICE; padding: 10px;"><p><span style="font-family: FONT_OF_CHOICE;"> and </span></p> </div> NOTE : With very little text, you may benefit from adding : display: inline-block; max-width: max-content; //within the style setting For chatGPT: (click to select) When I say 'FORMAT,COLOR,WIDTH,PAD:', followed by some text, please generate HTML tags that ...

https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Give it a try. If it looks less pretty than it could, it's because I don't know how to hack Blogger well enough 😊 If you Google "decode caesar cipher", you get to : https://www.dcode.fr/caesar-cipher https://www.boxentriq.com/code-breaking/caesar-cipher https://www.thewordfinder.com/caesar-cipher-solver/ All of which are okay for a single key - for encoding. One of them probably does true solving in the sense of finding the best candidate after brute force searching. But none does true code-breaking by looking at character frequency (unless they do😊). But what about two keys?!! There wasn't anything online (for decrypting that is. The dcode site does do encryption, but is really hard to use) Until now :) Give it a try :  https://frontendkaizen.blogspot.com/2022/03/dual-key-caesar-cipher.html Kudos to Tamer Abd Alrazaq for porting the java to javascript and getting it to work in the blink of ...

This one is not as easy as the To Do list exercise. But, boy am I proud. If you want to do even the teeniest bit of web hacking, I'd recommend doing this one every few weeks to maintain your cognitive savvy! I added a feature - adding text to the canvas - all the controls you see to the right of the canvas are my invention :) That was fun :)  https://codepen.io/chipdesigner/pen/oNPEWVZ FYI, the text controls you see on the right of the canvas, I wasn't able to put the other controls - Brush color and size below the canvas without this tip :  html - arranging div one below the other - Stack Overflow . Go figure..

I'd said one should do the Duke University To-Do-List exercise every so often to maintain confidence. I stand by it. It takes about 45 minutes the very first time - following the tutorial. Took me almost 90 minutes today starting from a blank codepen. Try it again with no recourse to a walk-through doc, and you learn so much more - so many new questions come up. In the old implementation, now I realize I have a bug - a task could be "done" or "important", but not both. So, if I had a task that was "done", and now I clicked the "important" button, it's class would change and I would no longer be able to delete it :) Another feature added : return focus to the text field for task-name after adding the task - that's a cool one - probably more useful for testing than anything :) item.classList.contains(name), .add(name), .remove(name) - your best friends. When you call a function, use onclick="funcName(this)" or "funcName...

https://www.dukelearntoprogram.com/course2/doc/javadoc/index.html?course=2 Go there and, if you have OCD like me, you ask this question : And the response  (takeaways : CTRL-SHIFT-C to point and select an element. And you get the element.style {} standing by to let you tweak it! Also, height:75vh; in CSS gives you 75% of the viewport. Thank you Upwork. How to open Chrome dev. Tool :-  CTRL-SHIFT-C How to tweak CSS and change CSS of the page ? ● In the dev tool in the Elements window there is a tab (or section ) named Styles. ● You can add new css rules and remove the old rules i this section ( NOTE: these changes are temporary and will be removed after the page is reloaded ) How to target the section whose style you want to change? ● There is a small arrow key in the top left of the dev. tool.   ● Select that tool or just press CTRL-SHIFT-C again. ● Now hover over to the section you want to modify and click on it.  ● Make sure to select the outermost...

Alright, the description of what they were doing was pretty basic, so I wondered if I should do the exercise - itching to get to Course 2 you see 😊 And, it paid off big time. I would have been happy to do just the hidden image recovery - but, ended up whacking out the encoder and decoder in a decent time. Okay, what is it in a nutshell? Each R,G,B pixel has eight bits. Retain the four MSBs (Most Significant Bits) and use the four LSBs (Least SBs) to store the MSBs of your message. Neat, eh? Of course, you can only store an image of same or smaller size, so the first thing you do is a crop.. So, starting with : hilton.jpg 140x210 As the "cloak" image, you want to hide this one, the "data" : usain.jpg(300x300) Cropping :  function crop( img_cloak, img_data ){ var cropped_data = new SimpleImage(width=Math.min(img_cloak.getWidth(),img_data.getWidth() ), height=Math.min(img_cloak.getHeight(), img_data.getHeight() ) ); var p; for( p of cropped_data.values(...