class FlavorForm extends React.Component { constructor(props) {\n super(props);\n this.state = {value: 'coconut'};\n\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n\n handleChange(event) {\n this.setState({value: event.target.value}); }\n\n handleSubmit(event) { alert('Your favorite flavor is: ' + this.state.value); event.preventDefault(); }\n render() {\n return (\n <form onSubmit={this.handleSubmit}> <label>\n Pick your favorite flavor:\n <select value={this.state.value} onChange={this.handleChange}> <option value=\"grapefruit\">Grapefruit</option> <option value=\"lime\">Lime</option> <option value=\"coconut\">Coconut</option> <option value=\"mango\">Mango</option> </select> </label>\n <input type=\"submit\" value=\"Submit\" />\n </form> );\n }\n}// Here is a comment\nfunction $initHighlight(block, cls) {\n try {\n if (cls.search(/\\bno\\-highlight\\b/) != -1)\n return process(block, true, 0x0F) +\n ` class=\"${cls}\"`;\n } catch (e) {\n /* handle exception */\n }\n for (var i = 0 / 2; i < classes.length; i++) {\n if (checkCondition(classes[i]) === undefined) {\n console.log('undefined');\n }\n }\n\n return (\n <div>\n <web-component>{block}</web-component>\n </div>\n )\n}\n\nexport $initHighlight;This is a paragraph.
\nThis is a paragraph.Header 1\n========\n\nHeader 2\n--------@import 'compass/reset';\n\n// variables\n$colorGreen: #008000;\n$colorGreenDark: darken($colorGreen, 10);\n\n@mixin container {\n max-width: 980px;\n}\n\n// mixins with parameters\n@mixin button($color: green) {\n @if ($color == green) {\n background-color: #008000;\n } @else if ($color == red) {\n background-color: #b22222;\n }\n}\n\nbutton {\n @include button(red);\n}\n\ndiv,\n.navbar,\n#header,\ninput[type='input'] {\n font-family: 'Helvetica Neue', Arial, sans-serif;\n width: auto;\n margin: 0 auto;\n display: block;\n}\n\n.row-12 > [class*='spans'] {\n border-left: 1px solid #b5c583;\n}\n\n// nested definitions\nul {\n width: 100%;\n padding: {\n left: 5px;\n right: 5px;\n }\n li {\n float: left;\n margin-right: 10px;\n .home {\n background: url('http://placehold.it/20') scroll no-repeat 0 0;\n }\n }\n}\n\n.banner {\n @extend .container;\n}\n\na {\n color: $colorGreen;\n &:hover {\n color: $colorGreenDark;\n }\n &:visited {\n color: #c458cb;\n }\n}\n\n@for $i from 1 through 5 {\n .span#{$i} {\n width: 20px * $i;\n }\n}\n\n@mixin mobile {\n @media screen and (max-width: 600px) {\n @content;\n }\n}# hello world\n\nyou can write text [with links](http://example.com) inline or [link references][1].\n\n- one _thing_ has *em*phasis\n- two **things** are **bold**\n\n[1]: http://example.com\n\n---\n\n# hello world\n\n<this_is inline=\"xml\"></this_is>\n\n> markdown is so cool\n\n so are code segments\n\n1. one thing (yeah!)\n2. two thing `i can write code`, and `more` wipee!# Header 1\n## Header 2\n### Header 3\n#### Header 4\n##### Header 5\n###### Header 6# Header 1 #\n## Header 2 ##\n### Header 3 ###\n#### Header 4 ####\n##### Header 5 #####\n###### Header 6 ######\n\nLorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
\n
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.\n\nThis is a header
\n\n
\n- This is the first list item.
\n- This is the second list item.
\nHere's some example code:
\n\nMarkdown.generate();
> ## This is a header.\n> 1. This is the first list item.\n> 2. This is the second list item.\n>\n> Here's some example code:\n>\n> Markdown.generate();Red
\nGreen
\nBlue
\nRed
\nGreen
\nBlue
\nRed
\nGreen
\nBlue
\n- Red\n- Green\n- Blue\n\n* Red\n* Green\n* Blue\n\n- Red\n- Green\n- Blue1. Buy flour and salt\n1. Mix together with water\n1. BakeParagraph:
\nCodeParagraph:\n\n Code* * *\n\n***\n\n*****\n\n- - -\n\n---------------------------------------This is an example link.
\nThis link has no title attr.
\nThis is an example reference-style link.
\nThis is [an example](http://example.com \"Example\") link.\n\n[This link](http://example.com) has no title attr.\n\nThis is [an example] [id] reference-style link.\n\n[id]: http://example.com \"Optional Title\"single asterisks
\nsingle underscores
\ndouble asterisks
\ndouble underscores
\n*single asterisks*\n\n_single underscores_\n\n**double asterisks**\n\n__double underscores__This paragraph has some code in it.
This paragraph has some `code` in it.Recently while working on a WordPress project, I encountered a weird error where I wasn't able to update or publish a simple post in my local WP admin.
\nIt looked something like this:
\nSometimes the error message would be slightly more helpful: Publishing failed. Error message: The response is not a valid JSON response.
And if I popped open the console, I saw these errors:
\nSince the error message had to do with a JSON response, I initially thought it was a Gutenberg or ACF issue. But it turned out this was happening because I was on the https WP admin, not the unsecure WP admin.
\nIt was a CORS error!! I was trying to modify a non-https domain from a https domain. Switching to a non-https WP admin allowed me to publish posts with no problem.
"}},{"node":{"frontmatter":{"title":"Checkout Form","description":"Checkout Form with focus on the fields while filling out the form","slug":"/pensieve/checkout-form","date":"2021-04-21T00:00:00.000Z","tags":["Theming","Forms"],"draft":false},"html":"\n<form action=\"\">\n <div class=\"module email\">\n <label>\n <span class=\"number\">1</span>\n <span class=\"text\">Email</span>\n </label>\n <div class=\"module__content\">\n <input type=\"text\" placeholder=\"email\">\n </div>\n </div>\n\n <div class=\"module shipping\">\n <label>\n <span class=\"number\">2</span>\n <span class=\"text\">Shipping</span>\n </label>\n <div class=\"module__content\">\n <div class=\"row\">\n <input type=\"text\" placeholder=\"First\">\n <input type=\"text\" placeholder=\"Last\">\n </div>\n <div class=\"row\">\n <input type=\"text\" placeholder=\"Address Line 1\">\n </div>\n <div class=\"row\">\n <input type=\"text\" placeholder=\"Address Line 2\">\n </div>\n <div class=\"row\">\n <input type=\"text\" placeholder=\"City\">\n <input type=\"text\" placeholder=\"State\">\n <input type=\"text\" placeholder=\"Zip\">\n </div>\n <div class=\"row\">\n <input type=\"text\" placeholder=\"Phone Number\">\n </div>\n </div>\n </div>\n</form>body {\n font-family: sans-serif;\n}\n\n$numSize: 30px;\n$numBorder: 2px;\n\nform {\n .module {\n display: flex;\n flex-direction: column;\n max-width: 400px;\n padding: 20px;\n background: #eee;\n margin-bottom: 20px;\n transition: all 0.25s ease;\n &.active {\n background: lightblue;\n padding: 30px 20px;\n input {\n height: 30px;\n border-color: grey;\n }\n }\n &__content {\n margin-left: calc(#{$numSize} + #{$numBorder} + #{$numBorder} + 10px);\n }\n label {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n font-weight: 700;\n .number {\n width: $numSize;\n height: $numSize;\n border: $numBorder solid black;\n border-radius: 100%;\n display: inline-block;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n font-size: 16px;\n }\n }\n input {\n // width: fit-content;\n width: 100%;\n outline: none;\n border: none;\n background: transparent;\n margin-bottom: 10px;\n font-size: 16px;\n transition: all 0.25s ease;\n border-bottom: 1px solid #ccc;\n &:hover {\n border-color: grey;\n }\n }\n }\n}\n\n.row {\n display: flex;\n & > * {\n margin-right: 10px;\n }\n}\nconst inputs = document.querySelectorAll(\".module input\");\n\ninputs.forEach(input => {\n input.addEventListener(\"focusin\", function() {\n this.closest(\".module\").classList.add(\"active\");\n });\n input.addEventListener(\"focusout\", function() {\n this.closest(\".module\").classList.remove(\"active\");\n });\n});\nDark mode toggle without the flash of default theme. Important bits:
\ndata-theme attribute on <html>, not <body>, so we can run the JS before the DOM finishes rendering<head><!DOCTYPE html>\n<html lang=\"en\" data-theme=\"light\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n ...\n <script>\n // If there's a theme stored in localStorage, use it on the <html>\n const localStorageTheme = localStorage.getItem('theme');\n if (localStorageTheme) {\n document.documentElement.setAttribute('data-theme', localStorageTheme);\n }\n </script>\n </head>\n <body>\n <div class=\"theme-toggle\">\n <button\n class=\"theme-toggle-btn js-theme-toggle\"\n aria-label=\"Activate dark mode\"\n title=\"Activate dark mode\"\n >\n <!--\n <svg class=\"light-mode\">\n <use xlink:href=\"#sun\"></use>\n </svg>\n <svg class=\"dark-mode\">\n <use xlink:href=\"#moon\"></use>\n </svg>\n -->\n </button>\n </div>\n\n <script src=\"app.js\"></script>\n </body>\n</html>:root {\n --bg: #ffffff;\n --text: #000000;\n}\n\n[data-theme='dark'] {\n --bg: #000000;\n --text: #ffffff;\n}const themeToggleBtn = document.querySelector('.js-theme-toggle');\n\nthemeToggleBtn.addEventListener('click', () => onToggleClick());\n\nconst onToggleClick = () => {\n const { theme } = document.documentElement.dataset;\n const themeTo = theme && theme === 'light' ? 'dark' : 'light';\n const label = `Activate ${theme} mode`;\n\n document.documentElement.setAttribute('data-theme', themeTo);\n localStorage.setItem('theme', themeTo);\n\n themeToggleBtn.setAttribute('aria-label', label);\n themeToggleBtn.setAttribute('title', label);\n};.sidebar\n\tul\n\t\tli\n\t\t\ta(href="#") Home\n\t\tli\n\t\t\ta(href="#") About\n\t\tli\n\t\t\ta(href="#") Services\n\t\tli\n\t\t\ta(href="#") Portfolio\n\t\tli\n\t\t\ta(href="#") Contact\n\tbutton.sidebar-btn\n\t\tspanbody{\n\tmargin: 0;\n\tpadding: 0;\n\tfont-family: Lato, sans-serif\n}\n\n.sidebar{\n\tposition: fixed;\n\ttop: 0;\n\tleft: -250px;\n\theight: 100%;\n\twidth: 250px;\n\tbackground: #262626;\n\ttransition: .5s;\n\t\n\t&-btn{\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: -50px;\n\t\twidth: 50px;\n\t\theight: 50px;\n\t\toutline: none;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\t\t\n\t\tspan{\n\t\t\twidth: 35px;\n\t\t\theight: 3px;\n\t\t\tbackground: #262626;\n\t\t\tposition: absolute;\n\t\t\ttop: 20px;\n\t\t\t\n\t\t\t&:before, \n\t\t\t&:after{\n\t\t\t\tcontent: '';\n\t\t\t\twidth: 35px;\n\t\t\t\theight: 3px;\n\t\t\t\tbackground: #262626;\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttransition: .5s;\n\t\t\t}\n\t\t\t\n\t\t\t&:before{\n\t\t\t\ttop: -10px;\n\t\t\t}\n\t\t\t&:after{\n\t\t\t\ttop: 10px;\n\t\t\t}\n\t\t}\n\t}\n}\n\nul{\n\tmargin: 0;\n\tpadding: 20px 0;\n\t\n\tli{\n\t\tlist-style: none;\n\t}\n}\n\na{\n\tcolor: #fff;\n\tfont-size: 1.3em;\n\ttext-decoration: none;\n\tdisplay: block;\n\tpadding: 10px 20px;\n\tborder-bottom: 1px solid rgba(0,0,0, .2);\n\ttransition: .5;\n\t\n\t&:hover{\n\t\ttransition: .3s;\n\t\tcolor: lightblue;\n\t}\n}\n\n.active{\n\ttransition: .5s;\n\tleft: 0;\n}\n\n.toggle span{\n\tbackground: transparent;\n\t\n\t&:before{\n\t\ttop: 0;\n\t\ttransform: rotate(45deg);\n\t\ttransition: .5s;\n\t}\n\t&:after{\n\t\ttop: 0;\n\t\ttransform: rotate(-45deg);\n\t\ttransition: .5s;\n\t}\n}$('.sidebar-btn').click( () => {\n\t$('.sidebar').toggleClass('active');\n\t$('.sidebar-btn').toggleClass('toggle');\n});.splitting .char {\n animation: slide-in 1s cubic-bezier(.3, 0, .3, 1) both;\n animation-delay: calc(60ms * var(--char-index));\n color: saturate(lighten(#182952, 55%), 60%);\n}\n\n@keyframes slide-in { \n from {\n transform: translateY(1em);\n opacity: 0;\n }\n}h1(data-text=\"Loading...\") Loading...body{\n\tfont-family: Lato, sans-serif;\n\t\n}\n\nh1{\n\tmargin: 0;\n\tpadding: 0;\n\ttext-transform: uppercase;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\tfont-size: 5em;\n\tcolor: #f5f5f5;\n\tletter-spacing: 5px;\n\t\n\t&:before{\n\t\tcontent: attr(data-text);\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tcolor: #000;\n\t\toverflow: hidden;\n\t\tanimation: animate 10s linear infinite;\n\t\tborder-right: 3px solid #000;\n\t}\n}\n\n@keyframes animate\n{\n\t0%{\n\t\twidth: 0;\n\t}\n\t50%{\n\t\twidth: 100%;\n\t}\n\t100%{\n\t\twidth: 0;\n\t}\n}