{"id":240,"date":"2023-12-07T17:04:02","date_gmt":"2023-12-07T17:04:02","guid":{"rendered":"https:\/\/kurtgrung.com\/blog\/?p=240"},"modified":"2024-03-16T13:07:48","modified_gmt":"2024-03-16T13:07:48","slug":"typewriter","status":"publish","type":"post","link":"https:\/\/kurtgrung.com\/blog\/typewriter\/","title":{"rendered":"Typewriter |"},"content":{"rendered":"\n<p><br>Javascript Typewriter Effect \ud83d\udcac<br><br>I wrote this script following a <strong>Open\/Closed Principle (OCP)<\/strong> &#8220;Open for extension but closed for modification.&#8221; that uses <strong>Strategy<\/strong> &amp; <strong>Decorator<\/strong> object-oriented design pattern so I can use it on my new Portfolio (which I will be updating soon). <br><br>Vanilla Javascript Class<br>React component <br>Vue component<br><br>Github repo <a href=\"https:\/\/github.com\/kurtgrung\/Typewriter\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/kurtgrung\/Typewriter<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"332\" src=\"https:\/\/kurtgrung.com\/blog\/wp-content\/uploads\/2023\/12\/Typewriter.gif\" alt=\"\" class=\"wp-image-241\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"OJdXqBv\" data-user=\"kurtgrung\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/kurtgrung\/pen\/OJdXqBv\">\n  Typewriter<\/a> by Kurt Gr\u00fcng (<a href=\"https:\/\/codepen.io\/kurtgrung\">@kurtgrung<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p><br><strong>TL;DR \ud83d\ude42 <\/strong><br><br>* This was an exploration writing and documenting a script to run &#8220;library-agnostic&#8221; code. <br><br>Following an object-oriented programming principle. <br><br>TBA I might just re-write this is a completely in a more simplified way. Just to show there&#8217;s no point in OOP in this context (and I will prove it by including Performance &amp; Unit tests). I have been heavily researching into this for the past few months and stumbled across some alarming findings with &#8220;CLEAN&#8221; code principles (a detailed post coming soon). <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Javascript Typewriter Effect \ud83d\udcac I wrote this script following a Open\/Closed Principle (OCP) &#8220;Open for extension but closed for modification.&#8221; that uses Strategy &amp; Decorator object-oriented design pattern so I can use it on my new Portfolio (which I will be updating soon). Vanilla Javascript ClassReact component Vue component Github repo https:\/\/github.com\/kurtgrung\/Typewriter See the Pen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[81,86,11,85,33,28,84,32,82],"class_list":["post-240","post","type-post","status-publish","format-standard","hentry","category-code","tag-class","tag-design-pattern","tag-javascript","tag-object-oriented","tag-ocp","tag-oop","tag-open-closed","tag-open-closed-principle","tag-typewriter"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/240","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/comments?post=240"}],"version-history":[{"count":24,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/240\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/posts\/240\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/media?parent=240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/categories?post=240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kurtgrung.com\/blog\/wp-json\/wp\/v2\/tags?post=240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}