{"id":169,"date":"2022-08-01T08:44:00","date_gmt":"2022-08-01T07:44:00","guid":{"rendered":"https:\/\/blog.markfoyster.co.uk\/?p=169"},"modified":"2022-09-10T09:35:00","modified_gmt":"2022-09-10T08:35:00","slug":"my-component-library","status":"publish","type":"post","link":"https:\/\/blog.markfoyster.co.uk\/?p=169","title":{"rendered":"My Component Library"},"content":{"rendered":"\n<p>My first stash of code specifically for re-use!<\/p>\n\n\n\n<p>I decided it was time to go back and extract some code from previous projects. I wanted to take various features, widgets etc that could be re-used in future projects and put them into my own component library. Another attraction to this idea is that I felt in a small way it would be a better representation of how things would be done in a commercial setting.<\/p>\n\n\n\n<p>To that end, I started my GitHub repository and began work. A link to the repo on GitHub is below:<\/p>\n\n\n<div class=\"ebg-br-wrapper ebg-br-wrapper-dark-mode-on\">\n\t<div class=\"ebg-br-background-image\"><\/div>\n\t<div class=\"ebg-br-editmode egb-br-darkmode-status\">\n\t\t<span class=\"egb-br-darkmode-status-img\">Dark Mode<\/span>\n\t<\/div>\n\t<div class=\"ebg-br-avatar\">\n\t\t<img loading=\"lazy\" decoding=\"async\" class=\"ebg-br-header-avatar\" src=\"https:\/\/avatars.githubusercontent.com\/u\/18230069?v=4\" alt=\"\" width=\"150\" height=\"150\" \/>\n\t<\/div>\n\t<div class=\"ebg-br-main\">\n\t\t<p class=\"ebg-br-title\">\n\t\t\t<strong>\n\t\t\t\t<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/github.com\/mxfoyster\/componentlibrary1\">\n\t\t\t\t\tcomponentlibrary1\n\t\t\t\t\t<span class=\"screen-reader-text\">(this link opens in a new window)<\/span>\n\t\t\t\t<\/a>\n\t\t\t<\/strong>\n\t\t\t<em>\n\t\t\t\tby<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/github.com\/mxfoyster\">\n\t\t\t\t\tmxfoyster\n\t\t\t\t\t<span class=\"screen-reader-text\">(this link opens in a new window)<\/span>\n\t\t\t\t<\/a>\n\t\t\t<\/em>\n\t\t<\/p>\n\t\t<p class=\"ebg-br-description\">My first JavaScript &#038; CSS component library<\/p>\n\t\t<p class=\"ebg-br-footer\">\n\t\t\t<span class=\"ebg-br-subscribers\">\n\t\t\t\t<span class=\"ebg-br-background-image\"><\/span>\n\t\t\t\t1 Subscriber\t\t\t<\/span>\n\t\t\t<span class=\"ebg-br-watchers\">\n\t\t\t\t<span class=\"ebg-br-background-image\"><\/span>\n\t\t\t\t0 Watchers\t\t\t<\/span>\n\t\t\t<span class=\"ebg-br-forks\">\n\t\t\t\t<span class=\"ebg-br-background-image\"><\/span>\n\t\t\t\t0 Forks\t\t\t<\/span>\n\t\t\t<a target=\"_blank\" rel=\"noopener noreferrer\" class=\"ebg-br-link\" href=\"https:\/\/github.com\/mxfoyster\/componentlibrary1\">\n\t\t\t\tCheck out this repository on GitHub.com\t\t\t\t<span class=\"screen-reader-text\">(this link opens in a new window)<\/span>\n\t\t\t<\/a>\n\t\t<\/p>\n\t<\/div>\n<\/div>\n\n\n<p>There are a number of different examples. Some just use HTML and CSS 3 while others incorporate JavaScript and occasionally PHP. Examples and details of implementation can be found on the website  at <a rel=\"noreferrer noopener\" href=\"https:\/\/first-react.markfoyster.co.uk\/\" target=\"_blank\">https:\/\/first-react.markfoyster.co.uk\/<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Future<\/h2>\n\n\n\n<p>As time goes on, I may add to this project. However, as you will see in a more recent project, I am quite motivated to use React for future components. Maybe I will incorporate some of those into this library?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>My first stash of code specifically for re-use! I decided it was time to go back and extract some code from previous projects. I wanted to take various features, widgets etc that could be re-used in future projects and put them into my own component library. Another attraction to this idea is that I felt &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.markfoyster.co.uk\/?p=169\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;My Component Library&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":170,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding"],"_links":{"self":[{"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=169"}],"version-history":[{"count":5,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions\/178"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=\/wp\/v2\/media\/170"}],"wp:attachment":[{"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.markfoyster.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}