tag:blogger.com,1999:blog-61035526950180644832024-03-12T23:31:14.745+00:00Mick RedmanSee more code examples on <a href="https://github.com/guitarbeerchocolate" rel="noopener noreferrer">GitHub</a>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.comBlogger339125tag:blogger.com,1999:blog-6103552695018064483.post-911702715490793992023-12-11T14:44:00.000+00:002023-12-11T14:44:14.333+00:00PHP Unit test cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/unit-test-notes/unit-test-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-83729367200201617162023-12-01T11:34:00.005+00:002023-12-01T11:34:56.013+00:00Advanced Brave Search cheat sheet.<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/brave-notes/brave-notes.md" target="_blank"> See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-68407179705374074562023-12-01T11:28:00.005+00:002023-12-01T11:28:50.893+00:00PhpStorm cheat sheet<a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/phpstorm-notes/phpstorm.md" target="_blank">See here</a>.Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-5295877309974367762023-12-01T11:21:00.002+00:002023-12-01T11:21:08.351+00:00composer cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/composer-notes/composer-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-37815339768912843162023-11-28T16:34:00.001+00:002023-11-28T16:34:32.683+00:00Revisit "How to make the entire page fade in on load" using Vue.js<p> index.html</p><p><!DOCTYPE html></p><p><html lang="en"></p><p> <head></p><p> <meta charset="UTF-8" /></p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0" /></p><p> <title>Body Fade In</title></p><p> <link rel="stylesheet" href="./style.css" /></p><p> </head></p><p> <body></p><p> <transition name="fade" appear></p><p> <h1>Hello World!</h1></p><p> </transition></p><p> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></p><p> <script src="./app.js"></script></p><p> </body></p><p></html></p><p>style.css</p><p>.fade-enter-active,</p><p>.fade-leave-active {</p><p> transition: opacity 1s;</p><p>}</p><p>.fade-enter-from,</p><p>.fade-leave-to {</p><p> opacity: 0;</p><p>}</p><p>app.js</p><p>const app = Vue.createApp({});</p><p>app.mount("body");</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-45720974396103440332023-11-28T15:22:00.016+00:002023-11-28T15:39:42.713+00:00Revisit "Simple tab navigation using jQuery" using Vue.jsThis is the first of a series in which I revisit old blog posts which made use of JavaScript and jQuery. I attempt to implement them, this time using <a href="https://vuejs.org/" target="_blank">Vue.js</a> in order to improve my <a href="https://vuejs.org/" target="_blank">Vue.js</a> skills.<div>First up is one from 2010 titled <a href="https://effectivewebdesigns.blogspot.com/2010/08/simple-tab-navigation-using-jquery.html" target="_blank">Simple tab navigation using jQuery</a>.</div><div><br /></div>
index.html<div><div><html lang="en"></div><div> <head></div><div> <meta charset="UTF-8"></meta></div><div> <title>Tabbed Navigation</title></div><div> <style type="text/css"></div><div> body {</div><div> font-family: Sans-serif;</div><div> }</div><div> #subSystem {</div><div> margin: 0 auto;</div><div> width: 400px;</div><div> }</div><div> #subNav a.subMenu {</div><div> display: block;</div><div> text-decoration: none;</div><div> float: left;</div><div> text-align: center;</div><div> width: 5rem;</div><div> height: 2.5rem;</div><div> padding-top: 1rem;</div><div> border-top: 0.0625rem solid #ccc;</div><div> border-left: 0.0625rem solid #ccc;</div><div> border-right: 0.0625rem solid #ccc;</div><div> color: #000;</div><div> }</div><div> #subNav a.subMenu:hover {</div><div> background: #a3a3a3;</div><div> color: #fff;</div><div> }</div><div> .menuSelected {</div><div> background: #ccc;</div><div> color: #fff;</div><div> }</div><div> #subContent {</div><div> clear: left;</div><div> min-height: 25rem;</div><div> height: 25rem;</div><div> border: 0.0625rem solid #ccc;</div><div> }</div><div> </style></div><div> </head></div><div> <body></div><div> <div id="subSystem"></div><div> <div id="subNav"></div><div> <a class="subMenu menuSelected" click="loadContent" href="./subPage1.html">First</a></div><div> <a class="subMenu" click="loadContent" href="./subPage2.html">Second</a></div><div> <a class="subMenu" click="loadContent" href="./subPage3.html">Third</a></div><div> </div></div><div> <div id="subContent"></div></div><div> </div></div><div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></div><div> <script src="./app.js"></script></div><div> </body></div><div></html></div><div><br /></div>
app.js<div><br /></div><div><div>const app = Vue.createApp({</div><div> methods: {</div><div> loadContent(event) {</div><div> event.preventDefault();</div><div> const href = event.target.getAttribute("href");</div><div> fetch(href)</div><div> .then((response) => response.text())</div><div> .then((data) => {</div><div> document.getElementById("subContent").innerHTML = data;</div><div> })</div><div> .catch((error) => {</div><div> console.error("Error loading content:", error);</div><div> });</div><div> },</div><div> },</div><div> mounted() {</div><div> // Simulate a click on the first tab when the page loads</div><div> const firstTab = document.querySelector(".subMenu.menuSelected");</div><div> if (firstTab) {</div><div> firstTab.click();</div><div> }</div><div> },</div><div>});</div><div><br /></div><div>app.mount("#subSystem");</div></div><div><br /></div></div>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-53246992953490336332023-11-23T15:47:00.003+00:002023-11-23T15:47:16.988+00:00Node Package Manager (NPM) Cheat Sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/npm-notes/npm-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-56022243767962809802023-11-23T15:45:00.008+00:002023-11-23T15:47:32.342+00:00Node.js cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/nodejs-notes/nodejs-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-91510676498583656112023-11-23T15:44:00.007+00:002023-11-23T15:44:51.404+00:00Flexbox cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/flexbox-notes/flexbox-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-83240854118584872782023-11-23T15:43:00.006+00:002023-11-23T15:43:47.431+00:00Object-Oriented Programming (OOP) cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/oop-notes/oop-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-54049218619046275942023-11-23T15:42:00.006+00:002023-11-23T15:42:29.622+00:00New stuff on the EWD website<p>Today, I added some content to the <a href="http://effectivewebdesigns.co.uk/" target="_blank">Effective Web Designs (EWD) website</a>.</p><p>I created it as a <a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/laravel-notes/laravel-notes.md" target="_blank">Laravel</a> site.</p><p>The site has a simple search form.</p><p>It pulls content from this blog using the Blogger API.</p><p>It makes suggestions through the blog entry title for the next step, and allows the user to select one of those titles.</p><p>Once a title has been selected, it is used to provide results from the Brave search API.</p><p>The results are also links.</p><p>See the code for this site on <a href="https://github.com/guitarbeerchocolate/ewd-demo" target="_blank">GitHub</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-30281015452510668572023-11-23T15:35:00.003+00:002023-11-23T15:35:20.319+00:00Yii/Yii2 cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/yii2-notes/yii2-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-76562738773293508082023-11-23T15:34:00.004+00:002023-11-23T15:34:15.577+00:00Vue.js cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/view-notes/view-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-26727043551245232912023-11-23T15:32:00.007+00:002023-11-23T15:32:55.658+00:00VS Code cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/vscode-notes/vscode-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-41230984764462878962023-11-23T15:31:00.003+00:002023-11-23T15:31:42.670+00:00User eXperience (UX) cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/ux-notes/ux-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-47723942037865457372023-11-23T15:30:00.003+00:002023-11-23T15:30:25.893+00:00User Interface (UI) cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/ui-notes/ui-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-9353405500438138772023-11-23T15:29:00.003+00:002023-11-23T15:29:22.468+00:00Tailwind CSS cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/tailwindcss-notes/tailwindcss-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-77251863702480201302023-11-23T15:27:00.002+00:002023-11-23T15:27:12.685+00:00Secure Socket Layer (SSL) cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/ssl-notes/ssl-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-77172011342743942012023-11-23T15:25:00.002+00:002023-11-23T15:25:35.617+00:00Search Engine Optimization (SEO) cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/seo-notes/seo-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-69731373727547615752023-11-23T15:23:00.004+00:002023-11-23T15:23:41.425+00:00Software Development Life Cycle (SDLC) cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/sdlc-notes/sdlc-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-55601485803912743672023-11-23T15:21:00.003+00:002023-11-23T15:21:10.841+00:00PHP cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/php-notes/php-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-31819742140560911412023-11-23T15:20:00.003+00:002023-11-23T15:20:20.806+00:00MySQL cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/mysql-notes/mysql-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-49153700504872651432023-11-23T15:19:00.004+00:002023-11-23T15:19:26.524+00:00Moodle cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/moodle-notes/moodle-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-50533196465395692042023-11-23T15:18:00.004+00:002023-11-23T15:18:30.628+00:00Laravel cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/laravel-notes/laravel-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0tag:blogger.com,1999:blog-6103552695018064483.post-74568379938806494462023-11-23T15:17:00.003+00:002023-11-23T15:17:32.278+00:00jQuery cheat sheet<p><a href="https://github.com/guitarbeerchocolate/cheat-sheets/blob/jquery-notes/jquery-notes.md" target="_blank">See here</a>.</p>Mick Redmanhttp://www.blogger.com/profile/08196355359458264920noreply@blogger.com0