{"id":1494,"date":"2000-07-13T12:52:41","date_gmt":"2000-07-13T09:52:41","guid":{"rendered":"https:\/\/jenniina.fi\/?p=1494"},"modified":"2023-03-26T21:06:41","modified_gmt":"2023-03-26T18:06:41","slug":"web-design-portfolio-jenniina-fi","status":"publish","type":"post","link":"https:\/\/jenniina.fi\/finnish\/web-design-portfolio-jenniina-fi\/","title":{"rendered":"About This Web Design Portfolio Jenniina.fi"},"content":{"rendered":"<section class=\"wp-block-group alignfull is-style-no-margin-vertical shadow-under-nav has-palette-2-color has-palette-1-background-color has-text-color has-background\" style=\"padding-bottom:20px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\"><nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Etusivu<\/span><\/p><\/nav>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h1 class=\"has-text-align-center wp-block-heading\" id=\"about-this-site-jenniina-fi\">About This Site jenniina.fi<\/h1>\n<\/div>\n<\/div>\n<\/div><\/div><\/section>\n\n\n\n<section class=\"wp-block-group alignfull is-style-no-margin-vertical shadow-none has-palette-2-color has-palette-1-background-color has-text-color has-background\" style=\"padding-top:50px;padding-bottom:120px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#about-this-site-jenniina-fi\">About This Site jenniina.fi<\/a><ul><li><a href=\"#my-web-design-portfolio\">My Web Design Portfolio<\/a><\/li><li><a href=\"#development-environment\">Development environment<\/a><\/li><li><a href=\"#jenniina-fi-colors\">Jenniina.fi Colors<\/a><\/li><li><a href=\"#whats-with-all-the-collapsibles\">What&#8217;s with all the collapsibles?<\/a><\/li><li><a href=\"#making-the-menu\">Making the Menu<\/a><\/li><li><a href=\"#making-the-site-bilingual\">Making the Site Bilingual<\/a><\/li><li><a href=\"#code\">Code<\/a><ul><li><a href=\"#adding-dark-mode\">Tumman teeman lis\u00e4ys<\/a><\/li><li><a href=\"#find-and-mark-external-links\">Find and Mark External Links<\/a><\/li><li><a href=\"#entry-animations\">Entry Animations<\/a><\/li><\/ul><\/li><li><a href=\"#content\">Content<\/a><ul><li><a href=\"#websites\">Websites<\/a><\/li><li><a href=\"#java-script-type-script\">JavaScript\/TypeScript<\/a><\/li><\/ul><\/li><li><a href=\"#comments\">Comments?<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"my-web-design-portfolio\">My Web Design Portfolio<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left has-large-font-size\">Some points on the making of this website<\/p>\n\n\n\n<p>It is a WordPress site, with the theme <a href=\"https:\/\/wordpress.org\/themes\/michelle\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Michelle<\/a> by WebMan Design, as I was impressed by its predecessor Reykjavik&#8217;s accessibility.  <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"development-environment\">Development environment<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p>Some of the tools I use<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Windows 10<\/li>\n\n\n\n<li>WordPress 6<\/li>\n\n\n\n<li><s>Local by Flywheel (having issues with speed, might switch back to XAMPP)<\/s> MAMP<\/li>\n\n\n\n<li>VS Code<\/li>\n\n\n\n<li>Browsersync<\/li>\n\n\n\n<li><dfn><abbr title=\"Web Accessibility Evaluation Tool\">WAVE<\/abbr><\/dfn><\/li>\n\n\n\n<li><dfn><abbr title=\"Non-visual Desktop Access\">NVDA <\/abbr><\/dfn> screen reader<\/li>\n\n\n\n<li>Screaming Frog SEO Spider<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div><\/div><\/section>\n\n\n\n<section class=\"wp-block-group alignfull topclip is-style-no-margin-vertical has-palette-2-color has-palette-3-background-color has-text-color has-background\" style=\"padding-top:200px;padding-bottom:120px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"jenniina-fi-colors\">Jenniina.fi Colors<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left has-normal-font-size\">I chose a warm honey yellow to start with and went with a complementary color scheme, keeping accessibility in mind. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"align-horizontal-wrap alignleft size-full\"><a href=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4.png\"><img decoding=\"async\" width=\"950\" height=\"500\" data-src=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4.png\" alt=\"jenniina.fi web design portfolio website colors\" class=\"wp-image-2582 lazyload\" data-srcset=\"https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4.png 950w, https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4-640x337.png 640w, https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4-480x253.png 480w, https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4-768x404.png 768w, https:\/\/jenniina.fi\/wp-content\/uploads\/2000\/07\/website-colors3-4-18x9.png 18w\" data-sizes=\"(max-width: 950px) 100vw, 950px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 950px; --smush-placeholder-aspect-ratio: 950\/500;\" \/><\/a><figcaption class=\"wp-element-caption\">Website color artwork to illustrate which colors can or cannot be used together, according to WCAG 2.1 AA-level guidelines. L is for large text (and graphical\/UI elements).<\/figcaption><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"whats-with-all-the-collapsibles\">What&#8217;s with all the collapsibles?<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left has-large-font-size\">I love collapsible elements<\/p>\n\n\n\n<p>I have a particular love for the <code>details<\/code> element, as it is semantic HTML that is inherently interactive without any javascript, without being a form element. Also, being able to hide elements from view clears up visual clutter. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"making-the-menu\">Making the Menu<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-left has-normal-font-size\">I wanted a main navigation that would pop, and be in a style I had never used before.  Since the contents of the menu wouldn&#8217;t change, as the page is a web design portfolio, I settled on the current style. I used a CSS grid for the navigation items and rotated the center part 45 degrees, placing the site logo on top of it in its own, identical grid. I used an edge clip to create the point at the bottom. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"making-the-site-bilingual\">Making the Site Bilingual<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p>English is the first language I ever spoke, and is still easier to communicate with in some ways, even though I&#8217;m completely Finnish. At least writing in English is easier, which is why I&#8217;m writing this web design portfolio in English first, before translating (most of) it into Finnish. <\/p>\n\n\n\n<p class=\"has-text-align-left has-normal-font-size\">For creating the translated version of the site, I ended up choosing the plugin TranslatePress due to time constraints, though every word is still translated by me. <\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-group alignfull back-to-top-container is-style-default has-accent-color has-text-color\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<a href=\"#top\" class=\"back-to-top\">\n    <svg class=\"svg-icon\" width=\"3em\" aria-hidden=\"true\" version=\"1.1\" \nxmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 16 16\"><polygon points=\"8,4.6 1.3,11.3 2.7,12.7 8,7.4 13.3,12.7 14.7,11.3 \"><\/polygon><\/svg>\n    <span class=\"screen-reader-text\">Back to top of the page<\/span>\n<\/a>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-group alignfull topclip is-style-no-margin-vertical has-palette-1-color has-palette-2-background-color has-text-color has-background\" style=\"padding-top:200px;padding-bottom:120px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"has-text-align-center wp-block-heading\" id=\"code\">Code<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h3 class=\"wp-block-heading\" id=\"adding-dark-mode\">Tumman teeman lis\u00e4ys<\/h3>\n\n\n\n<p class=\"has-text-align-left has-normal-font-size\">I took note of <a href=\"https:\/\/yonkov.github.io\/post\/add-dark-mode-toggle-button-to-wordpress\/\" rel=\"nofollow noopener\">Atanas Yonkov&#8217;s tutorial<\/a> on how to implement dark mode. The code I chose to implement is as follows: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nfunction jla_darkmode_javascript() { ?&gt;\n    &lt;script defer&gt;\n        jQuery(function($) {\n            \/\/Create the cookie object\n            var cookieStorage = {\n                setCookie: function setCookie(key, value, time, path) {\n                    var expires = new Date();\n                    expires.setTime(expires.getTime() + time);\n                    var pathValue = '';\n                    if (typeof path !== 'undefined') {\n                        pathValue = 'path=' + path + ';';\n                    }\n                    document.cookie = key + '=' + value + ';' + pathValue + 'expires=' + expires.toUTCString();\n                },\n                getCookie: function getCookie(key) {\n                    var keyValue = document.cookie.match('(^|;) ?' + key + '=(&#091;^;]*)(;|$)');\n                    return keyValue ? keyValue&#091;2] : null;\n                },\n                removeCookie: function removeCookie(key) {\n                    document.cookie = key + '=; Max-Age=0; path=\/';\n                }\n            };\n            $('.dlt-button').click(function() {\n                \/\/Show either moon or sun\n                $('.dlt-button').toggleClass('active');\n                \/\/If dark mode is selected\n                if ($('.dlt-button').hasClass('active')) {\n                    \/\/Add dark mode class to the body\n                    $('body').addClass('dark-mode');\n                    cookieStorage.setCookie('jlaiNightMode', 'true', 2628000000, '\/');\n                } else {\n                    $('body').removeClass('dark-mode');\n                    setTimeout(function() {\n                        cookieStorage.removeCookie('jlaiNightMode');\n                    }, 100);\n                }\n            })\n            \/\/Check Storage. Display user preference \n            if (cookieStorage.getCookie('jlaiNightMode')) {\n                $('body').addClass('dark-mode');\n                $('.dlt-button').addClass('active');\n            }\n        })\n    &lt;\/script&gt;\n&lt;?php\n}\nadd_action('wp_head', 'jla_darkmode_javascript');<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"wp-block-group alignfull back-to-top-container is-style-default has-accent-color has-text-color\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<a href=\"#top\" class=\"back-to-top\">\n    <svg class=\"svg-icon\" width=\"3em\" aria-hidden=\"true\" version=\"1.1\" \nxmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 16 16\"><polygon points=\"8,4.6 1.3,11.3 2.7,12.7 8,7.4 13.3,12.7 14.7,11.3 \"><\/polygon><\/svg>\n    <span class=\"screen-reader-text\">Back to top of the page<\/span>\n<\/a>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-group alignfull topclip bottomclip is-style-no-margin-vertical has-palette-2-color has-palette-3-background-color has-text-color has-background\" style=\"padding-top:200px;padding-bottom:120px\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\"><\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h3 class=\"wp-block-heading\" id=\"find-and-mark-external-links\">Find and Mark External Links<\/h3>\n\n\n\n<p>This is the snippet I used to check whether a link is external to this web design portfolio and to add a class to it for targeted editing. I first used this technique on my <a href=\"http:\/\/metal2022.org\" rel=\"nofollow noopener\">conference website<\/a>.  I also added an aria-roledescription so that screenreaders will also read the link as external. The parts commented out are for opening the link in a new window, which I decided against doing on this site. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nadd_action('wp_head', function () {\n?&gt;\n&lt;script defer&gt;\n\tdocument.addEventListener(\"DOMContentLoaded\", function() {\n        function linkopener(a) {\n            \/\/let trgt = a ? \"_blank\" : \"_self\";\n            let link = document.links;\n            for (let i = 0; i &lt; link.length; i++) {\n                if (link&#091;i].href.search(\"localhost:8888\/jlai\") == -1) {\n                    \/*  link&#091;i].addEventListener(\"click\", function() {\n                        this.target = trgt;\n                        });\n                        link&#091;i].target = trgt;\n                    *\/\n                    link&#091;i].className += 'link-external ';\n                    link&#091;i].setAttribute('aria-roledescription', 'external link');\n                }\n            }\n        }; \n\t\tlinkopener(true);\n\t});\n&lt;\/script&gt;\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"entry-animations\">Entry Animations<\/h3>\n\n\n\n<p>Fade-in and slide-in animations: I used Intersection Observer to check whether elements with the &#8220;arrive&#8221; class are visible in order to add and remove classes for the animations to run.  Mostly only used in the web design portfolio&#8217;s front page, but I did the same for images in general. The hide class is set here so that the content isn&#8217;t hidden from those without javascript enabled. For this reason I decided against toggle in favor of add and remove.  <\/p>\n\n\n\n<p>I also set a custom property here (&#8211;i), with a an inceasing value for each instance, to set a transition-delay for the animation with transition-delay: calc(100ms * var(&#8211;i)); <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nadd_action('wp_footer', function () { ?&gt;\n\n    &lt;script defer&gt;\n        const observer = new IntersectionObserver((entries) =&gt; {\n            entries.forEach((entry) =&gt; {\n                if (entry.isIntersecting) {\n                    entry.target.classList.remove('unseen');\n                    entry.target.classList.add('visible');\n                }\n            });\n        });\n\n        const hiddenElements = document.querySelectorAll('.arrive');\n        hiddenElements.forEach((e) =&gt; e.classList.add('unseen')); \/\/Is set here so that the content isn't hidden from those without javascript enabled\n        hiddenElements.forEach((e, i) =&gt;  e.style.setProperty('--i', i)); \/\/gives an incrementing custom property for each instance, to calculate delay\n        hiddenElements.forEach((e) =&gt; observer.observe(e));\n\n        const hiddenThumbnails = document.querySelectorAll('.wp-block-image');\n        hiddenThumbnails.forEach((e) =&gt; e.classList.add('unseen'));\n        hiddenThumbnails.forEach((e) =&gt; observer.observe(e));\n    &lt;\/script&gt;\n\n&lt;?php });<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading\" id=\"content\">Content<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<h3 class=\"wp-block-heading\" id=\"websites\">Websites<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/jyvaskylan-salonkiorkesteri-orchestra-website\/\" data-type=\"post\" data-id=\"4767\">Orchestra<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/metal-2022\/\" data-type=\"post\" data-id=\"502\">Conference<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/kannelkeskus\/\" data-type=\"post\" data-id=\"578\">Housing<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/website-of-psychologist\/\" data-type=\"post\" data-id=\"639\">Psychologist<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/react\/\" data-type=\"page\" data-id=\"36\">React Sub-site<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"java-script-type-script\">JavaScript\/TypeScript<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/draggable-blobs\/\">Draggable Blobs App<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/pong\/\" data-type=\"post\" data-id=\"4243\">Pong Game<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jenniina.fi\/finnish\/dogs\/\" data-type=\"post\" data-id=\"2036\">Koirakuvien generaattori roduittain<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<div class=\"alignwide-wrap\" data-block=\"columns\">\n<div class=\"wp-block-columns alignwide\">\n<div class=\"wp-block-column\" style=\"flex-basis:30%\">\n<h2 class=\"wp-block-heading\" id=\"comments\">Comments?<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p>Would you have chosen different methods to achieve the same results? Let me know what you would have done differently for this web design portfolio, I&#8217;d love to hear it! <\/p>\n\n\n\n<p>Thank you for reading!<br><em>Jenniina<\/em><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group alignfull back-to-top-container is-style-default has-accent-color has-text-color\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<a href=\"#top\" class=\"back-to-top\">\n    <svg class=\"svg-icon\" width=\"3em\" aria-hidden=\"true\" version=\"1.1\" \nxmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 16 16\"><polygon points=\"8,4.6 1.3,11.3 2.7,12.7 8,7.4 13.3,12.7 14.7,11.3 \"><\/polygon><\/svg>\n    <span class=\"screen-reader-text\">Back to top of the page<\/span>\n<\/a>\n<\/div><\/div>\n<\/div><\/section>","protected":false},"excerpt":{"rendered":"<div class=\"entry-summary\">\nAbout the creation of the web design portfolio Jenniina.fi\n<\/div>\n<div class=\"link-more-container\"><a href=\"https:\/\/jenniina.fi\/finnish\/web-design-portfolio-jenniina-fi\/\" class=\"link-more\" aria-label=\"Continue reading About This Web Design Portfolio Jenniina.fi\">More &raquo;<\/a><\/div>","protected":false},"author":1,"featured_media":4835,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[6,9,10],"tags":[],"class_list":["post-1494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design","category-javascript","category-website","entry","entry-type-post"],"_links":{"self":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/1494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/comments?post=1494"}],"version-history":[{"count":89,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/1494\/revisions"}],"predecessor-version":[{"id":5840,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/posts\/1494\/revisions\/5840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media\/4835"}],"wp:attachment":[{"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/media?parent=1494"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/categories?post=1494"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jenniina.fi\/finnish\/wp-json\/wp\/v2\/tags?post=1494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}