');mask:url('data: image/svg+xml;utf8, ');-webkit-mask-size:cover;mask-size:cover;position:absolute;right:-1rem;top:0;width:2rem}header.header div.flex-container svg#illustration{color:#ffbf00;height:fit-content;max-width:100%}.dark-toggle{color:light-dark(#448,#fff);cursor:pointer;filter:drop-shadow(0 0 .125rem light-dark(hsl(0,0%,100%),hsl(240,33%,30%)));height:2rem;position:fixed;right:1rem;top:1rem;transform:scale(1);transition:all .2s ease-in-out;width:2rem;z-index:9}.dark-toggle.svg-inline--fa{height:2rem!important;width:2rem!important}.dark-toggle:hover{color:light-dark(#66b3ff,#ffc);transform:scale(1.25);transition:all .2s ease-in-out}.blog-post-card{background-color:light-dark(#f2f2f2,#3c3c77);border:1px solid #99c;box-shadow:.25rem .25rem 0 #99c;color:#336;display:flex;flex-flow:column nowrap;transition:box-shadow .2s ease-in-out;width:100%}.blog-post-card:hover{background-color:light-dark(#fff,#336);box-shadow:.125rem .125rem 0 #99c;transition:all .2s ease-in-out}.blog-post-card .gatsby-image-wrapper{aspect-ratio:16/9}.blog-post-card .gatsby-image-wrapper img{aspect-ratio:1;object-fit:cover}.blog-post-card div.title{color:light-dark(#66b3ff,#ffc);font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:700;letter-spacing:0;margin:0;padding:.75rem}.blog-post-card div.title p{color:#99c;font-weight:400}section.blog-post-list{background-attachment:fixed;background-clip:border-box;background-color:transparent;background-image:linear-gradient(to bottom right,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39));background-origin:padding-box;background-position:50%;background-repeat:repeat;background-size:100%;padding:1rem;width:100%}section.blog-post-list div.content{background:light-dark(#fff,#336);container-name:blog-post-list-content;container-type:inline-size;display:flex;flex-flow:column nowrap;gap:1rem;padding:1rem}:root{color-scheme:light dark}.light-mode,[data-theme=light]{color-scheme:light}.dark-mode,[data-theme=dark]{color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#224;font-family:Source Sans Pro,sans-serif;font-size:1rem;font-weight:400;line-height:1.25;overflow-x:hidden;overscroll-behavior-y:none}.container{background:light-dark(#fff,#336);box-shadow:0 .5rem .5rem rgba(22,16,50,.5);height:fit-content;width:100vw;z-index:3}main{background-color:light-dark(#fff,#336);color:light-dark(#448,#fff);margin:0 auto 100vh;overflow-x:hidden;padding:0;position:relative;z-index:4}@media(min-width:1024px){main{width:1024px}}main div.home-page-container{padding-inline:1rem}@media(min-width:1025px){main div.home-page-container{padding:0}}main div.home-page-container div.home-page-organism{margin-bottom:4rem}div.flex-container{display:flex;flex-flow:column nowrap;gap:2rem;margin-bottom:2rem}div.flex-container>*{flex:0 1 50%}@media(min-width:768px){div.flex-container{align-items:center;flex-flow:row nowrap;justify-content:space-between}}div.flex-container.align-to-start{align-items:flex-start}p{margin-bottom:1lh;margin-top:0}p:last-child{margin-bottom:0}hr{border-top:1px solid #99c;margin:1lh 0}blockquote{color:light-dark(#66b3ff,#ffc);margin:1rem auto;padding:1rem;position:relative;width:80%}blockquote:after{background-attachment:fixed;background-clip:border-box;background-color:transparent;background-image:linear-gradient(to bottom right,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39));background-origin:padding-box;background-position:50%;background-repeat:repeat;background-size:100%;content:"";height:100%;left:0;position:absolute;top:0;width:.125rem;z-index:3}blockquote span{font-family:Sacramento,cursive;font-size:2rem}ol,ul{margin:0 auto 1lh;padding-left:1.5rem}ol li,ul li{margin-bottom:1rem}h1,h2{text-fill-color:transparent;-webkit-text-fill-color:transparent;background-attachment:fixed;-webkit-background-clip:text;background-clip:text;background-color:transparent;background-image:linear-gradient(to bottom right,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39));background-origin:padding-box;background-position:50%;background-repeat:repeat;background-size:auto}@supports(-moz-appearance:none){h1,h2{text-fill-color:light-dark(#66b3ff,#ffc);-webkit-text-fill-color:light-dark(#66b3ff,#ffc);background:none}}h1,h2{font-family:Zilla Slab,serif;font-size:2rem;font-weight:700;line-height:1.25}h2{margin:0 0 1rem}h3{color:light-dark(#448,#fff);font-family:Raleway,sans-serif;font-size:1rem;font-weight:400;letter-spacing:.1rem;line-height:1;margin:0 0 1lh;text-transform:uppercase}a{color:light-dark(#66b3ff,#ffc);text-decoration:none}blockquote a,li a,p a{background:linear-gradient(90deg,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39)),linear-gradient(90deg,#c06,#ff6,#6ff,#66b3ff,#99c);background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% .125rem,0 .125rem;transition:background-size .4s}blockquote a:hover,li a:hover,p a:hover{background-size:0 .125rem,100% .125rem}.dates{color:light-dark(#448,#fff);font-family:Raleway,sans-serif;font-size:1rem;font-weight:300;letter-spacing:.125rem;line-height:1}.svg-inline--fa{height:1rem;width:1rem}pre code{background-color:transparent;color:#fff;font-size:1rem;line-height:1.2}pre code span{display:inline-block;overflow-wrap:break-word}pre[class*=language-]{word-wrap:break-word;background-color:#448;border-radius:1rem;color:light-dark(#fff,#336);font-family:Ubuntu Mono,Consolas,Monaco,Andale Mono,monospace;-webkit-hyphens:none;hyphens:none;line-height:1;margin:1rem auto;overflow-x:auto;padding:1rem;tab-size:4;white-space:pre;width:100%;word-break:break-all;word-spacing:normal}@media(min-width:768px){pre[class*=language-]{width:80%}}:not(pre)>code[class*=language-]{background-color:light-dark(#448,#fff);border-radius:.125rem;color:light-dark(#fff,#336);font-size:1rem;line-height:1;padding:.125rem}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog,.token.punctuation{color:#99c}.token.attr-name,.token.constant,.token.deleted,.token.hexcode,.token.namespace,.token.number,.token.symbol,.token.tag,.token.unit{color:#f9c}.token.property,.token.selector{color:#6ff}.token.boolean,.token.entity,.token.function,.token.function-name,.token.operator,.token.selector .token.id,.token.url{color:#9cf}.token.class-name{color:#ff6}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.parameter,.token.selector .token.class{color:#ff6;font-style:italic}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#ff66b3}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:#6ff}.footer{background-color:transparent;bottom:0;color:#fff;color-scheme:dark;display:grid;height:100vh;left:0;padding:1rem;place-items:center;position:fixed;width:calc(100% - 2rem)}.footer div{margin:1rem auto 0;max-width:768px}.footer .signature{font-family:Sacramento,cursive;font-size:2rem;margin:2rem 0 1rem}.most-recent-blog-post{position:relative}.most-recent-blog-post:after{background-color:#ffbf00;content:"";height:2rem;-webkit-mask:url('data: image/svg+xml;utf8, ');mask:url('data: image/svg+xml;utf8, ');-webkit-mask-size:cover;mask-size:cover;position:absolute;right:1.5rem;top:1.5rem;width:2rem}.tag{background-attachment:fixed;background-clip:border-box;background-color:transparent;background-image:linear-gradient(to bottom right,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39));background-origin:padding-box;background-position:50%;background-repeat:repeat;background-size:100%;border-radius:.25rem;color:light-dark(#fff,#336);display:inline-block;font-family:Source Sans Pro,sans-serif;font-size:.75rem;font-weight:400;letter-spacing:.125rem;line-height:1;margin-right:.125rem;overflow:hidden;padding:.125rem .25rem;text-decoration:none;text-transform:uppercase}.tag,.tag:hover{transition:all .25s ease-in}.tag:hover{box-shadow:none;cursor:pointer}.tag .flex{display:flex;flex-flow:row nowrap}.tag .flex span{background:#c06;border-bottom-right-radius:.25rem;border-top-right-radius:.25rem;color:#fff;display:inline-block;height:100%;padding:.25rem}.tag .flex .pad{padding:.25rem}div.portfolio{aspect-ratio:3/2;border:solid light-dark(#448,#fff);border-radius:.25rem;border-width:.5rem .5rem 2rem;box-shadow:1px 1px #99c,2px 2px #99c,3px 3px #99c,4px 4px #99c;max-width:calc(100% - .5rem);overflow-x:hidden;overflow-y:scroll;position:relative;scroll-snap-type:y mandatory;width:fit-content}div.portfolio a.portfolio-item{aspect-ratio:3/2;display:block;position:relative;scroll-snap-align:start;scroll-snap-stop:always}div.portfolio a.portfolio-item div.gatsby-image-wrapper{aspect-ratio:3/2;height:min-content;object-fit:cover;width:100%}div.portfolio a.portfolio-item img,div.portfolio a.portfolio-item picture img{object-fit:cover}div.portfolio a.portfolio-item span.title{background-attachment:fixed;background-clip:border-box;background-color:transparent;background-image:linear-gradient(to bottom right,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39));background-origin:padding-box;background-position:50%;background-repeat:repeat;background-size:100%;color:light-dark(#fff,#336);font-family:Zilla Slab,serif;font-size:1rem;line-height:1;overflow:hidden;padding:.5rem;position:absolute;right:0;text-decoration:none;text-overflow:ellipsis;top:0;transform:scale(1);transition:transform .2s ease-in-out;white-space:nowrap;z-index:99}div.flex-container div.portfolio-container{display:flex;flex-flow:column nowrap;gap:1rem}div.flex-container div.portfolio-container p.mixed-text{text-align:center}section.blog-post{display:flex;flex-flow:column nowrap;gap:1rem;padding-bottom:2rem;position:relative;width:100%}@media(min-width:1025px){section.blog-post{display:grid;gap:2rem;grid-template-columns:70% calc(30% - 2rem);grid-template-rows:repeat(auto,fit-content)}}section.blog-post header{display:grid;grid-column:1/3;height:min-content;max-width:100%;overflow:hidden;place-items:center;position:relative}section.blog-post header .gatsby-image-wrapper{min-width:100%;object-fit:cover}section.blog-post header .gatsby-image-wrapper img,section.blog-post header .gatsby-image-wrapper picture img{object-fit:cover}section.blog-post div.blog-post-content{padding:0 1rem}@media(min-width:1025px){section.blog-post div.blog-post-content{padding:0}}section.blog-post div.blog-post-content h1.blog-post-title{margin:0 0 .75rem;padding:0 0 .75rem;position:relative}section.blog-post div.blog-post-content h1.blog-post-title:after{background-attachment:fixed;background-clip:border-box;background-color:transparent;background-image:linear-gradient(to bottom right,light-dark(#66b3ff,#ffc),light-dark(#f9c,#f39));background-origin:padding-box;background-position:50%;background-repeat:repeat;background-size:100%;bottom:0;content:"";height:.125rem;left:0;position:absolute;width:100%;z-index:3}section.blog-post article{font-size:1rem;line-height:1.5;padding:0}@media(min-width:768px){section.blog-post article{font-size:1.5rem}}section.blog-post article p:first-of-type:first-letter{initial-letter:2;font-family:Zilla Slab,serif;margin-right:.5rem}@supports(-moz-appearance:none){section.blog-post article p:first-of-type:first-letter{all:unset}}section.blog-post article p:first-of-type:has(code):first-letter{initial-letter:1;color:light-dark(#fff,#336);font-family:Ubuntu Mono,Consolas,Monaco,Andale Mono,monospace;font-size:1rem;margin-right:0}section.blog-post article blockquote p:first-of-type:first-letter,section.blog-post article li p:first-of-type:first-letter{initial-letter:1;font-family:inherit;margin-right:.1rem}section.blog-post article ul{list-style:none;margin:0;max-width:100%;padding:0}section.blog-post article ul li:before{content:"» "}section.blog-post p.byline{color:light-dark(#448,#fff);font-family:Sacramento,cursive;font-size:2rem;margin:2rem 0 1rem}section.blog-post aside{align-items:center;display:flex;flex-flow:column nowrap;padding:0 1rem}@media(min-width:1025px){section.blog-post aside{padding:0}}section.blog-post aside section.blog-post-list{width:100%}
Redux for Visual Learners Redux for Visual Learners by Joey Imlay Friday 16th March 2018
I really struggled getting my head around Redux for the longest time, so I created a Prezi that breaks down how each of the different components communicate with each other, with a few memes added in for good measure.
Redux for Visual Learners
thanks for reading! Joey x
back to homepage