1(this.webpackJsonpblog=this.webpackJsonpblog||[]).push([[0],{35:function(e,t,i){},50:function(e,t,i){},55:function(e,t,i){"use strict";i.r(t);var n=i(1),a=i(2),c=i.n(a),s=i(36),r=(i(50),i(13)),o=i(14),l=i(16),h=i(15),j=(i(8),i(4));var d=function(){return Object(n.jsxs)("nav",{id:"navigation",children:[Object(n.jsx)(j.c,{to:"/",children:Object(n.jsx)("h3",{id:"navTitle",children:"Highway 60"})}),Object(n.jsxs)("ul",{className:"navLinks",children:[Object(n.jsx)(j.c,{to:"/",children:Object(n.jsx)("li",{children:"Home"})}),Object(n.jsx)(j.c,{to:"/articles",children:Object(n.jsx)("li",{children:"Blog"})}),Object(n.jsx)(j.c,{to:"/about",children:Object(n.jsx)("li",{children:"David Ben Horin"})}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)("span",{style:{color:"black",fontSize:"1.25em",fontWeight:"bold"},children:"Tags:"}),Object(n.jsx)(j.c,{to:"/articles-tag-story",children:Object(n.jsx)("li",{children:"Stories"})}),Object(n.jsx)(j.c,{to:"/articles-tag-development",children:Object(n.jsx)("li",{children:"Developer"})}),Object(n.jsx)(j.c,{to:"/articles-tag-published",children:Object(n.jsx)("li",{children:"Articles"})}),Object(n.jsx)(j.c,{to:"/articles-tag-life-charge",children:Object(n.jsx)("li",{children:"Life Charge"})})]})]})},b=i(6),p=i(3),m=i.p+"static/media/daddyAfula.a1a0ddaa.png",x=i(21),g=i(32),O={textDecoration:"none",color:"blue"},u={fontSize:".75em",fontWeight:"bold"},y=function(){return Object(n.jsx)(n.Fragment,{children:Object(n.jsxs)("a",{className:"linkedIn",href:"https://www.linkedin.com/in/davidbenhorin/",target:"_blank",children:[Object(n.jsxs)(p.b.h3,{style:{color:"black"},whileHover:{scale:1.2,transition:{duration:.3}},children:["Let's Connect! ",Object(n.jsx)(x.c,{style:{color:"cornflowerblue",fontSize:"1em"}})]}),Object(n.jsxs)("a",{style:O,href:"mailto:[email protected]",children:[Object(n.jsx)(g.a,{}
1),Object(n.jsx)("span",{style:u,children:" We can also email! "}),Object(n.jsx)(g.a,{})]})]})})},w=i.p+"static/media/dbh.94413def.jpg",f=i(58),v=i(59),k=i(60),I=i(61),L=i(62),S=i(63);var A=function(e){return Object(n.jsxs)(n.Fragment,{children:[Object(n.jsx)(f.a,{url:e.url,quote:e.title,hashtag:e.hashtag,children:Object(n.jsx)(v.a,{round:!0,size:48})}),Object(n.jsx)(k.a,{url:e.url,title:e.title,hashtags:e.hashtagArray,via:e.via,children:Object(n.jsx)(I.a,{round:!0,size:48})}),Object(n.jsx)(L.a,{url:e.url,title:e.title,hashtags:e.hashtagArray,via:e.via,children:Object(n.jsx)(S.a,{round:!0,size:48})})]})},H=i(18);var T=function(e){return Object(n.jsx)(n.Fragment,{children:Object(n.jsxs)(H.a,{children:[Object(n.jsx)("meta",{charset:"utf-8"}),Object(n.jsx)("meta",{name:"google-site-verification",content:"9M5Q-_AQk19k6xQyIohsE70q2rkezqtsaELmvh9OfMs"}),Object(n.jsx)("link",{rel:"icon",type:"image/ico",href:"%PUBLIC_URL%/highway.ico"}),Object(n.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1"}),Object(n.jsx)("meta",{name:"theme-color",content:"#000000"}),Object(n.jsx)("script",{src:"https://use.fontawesome.com/ae82b2007b.js"}),Object(n.jsx)("link",{rel:"apple-touch-icon",href:"%PUBLIC_URL%/logo192.png"}),Object(n.jsx)("link",{rel:"manifest",href:"%PUBLIC_URL%/manifest.json"}),Object(n.jsx)("link",{rel:"preconnect",href:"https://fonts.gstatic.com"}),Object(n.jsx)("link",{href:"https://fonts.googleapis.com/css2?family=Gentium+Book+Basic&family=Yesteryear&display=swap",rel:"stylesheet"}),Object(n.jsx)("title",{children:e.title}),Object(n.jsx)("meta",{name:"description",content:e.desc}),Object(n.jsx)("meta",{name:"author",content:e.author}),Object(n.jsx)("meta",{name:"og:site_name",content:"Highway 60"}),Object(n.jsx)("meta",{name:"og:type",content:"Application"}),Object(n.jsx)("meta",{name:"og:title",content:e.title}),Object(n.jsx)("meta",{name:"og:description",content:e.desc}),Object(n.jsx)("meta",{name:"og:url",content:e.URL}),Object(n.jsx)("meta",{property:"og:image",content:e.imageURL}),Object(n.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),Object(n.jsx)("meta",{name:"twitter:creator",content:"@TheHighway60"}),Object(n.jsx)("meta",{name:"twitter:title",content:e.title}),Object(n.jsx)("meta",{name:"twitter: description",content:e.desc}),Object(n.jsx)("meta",{name:"twitter: url",content:e.URL}),Object(n.jsx)("meta",{property:"twitter:image",content:e.imageURL})]})})};var R=function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"About David Ben Horin",desc:"David Ben Horin is the developer for Highway 60. A marketer for 10 years, he decided to see what the other side of his profession is up to by coding this app.",URL:"https://highway-60.web.app/about",imageURL:w}),Object(n.jsx)("br",{}),Object(n.jsx)("h1",{id:"test",children:"About David Ben Horin"}),Object(n.jsx)("img",{src:w,style:{width:"15%",height:"30%",marginLeft:"42.5%",marginTop:"1.5%",marginBottom:"1.5%"},alt:"David Ben Horin"}),Object(n.jsx)("h2",{children:"Portfolio of Favorite Content"}),Object(n.jsxs)("ul",{children:[Object(n.jsx)("a",{href:"https://ravendb.net/articles/ravendb-wants-to-be-the-most-boring-database-ever",target:"_blank",rel:"noreferrer",children:Object(n.jsx)("li",{children:"The Database that will Transform the Roaring 20s into the Boring 20s"})}),Object(n.jsx)("a",{href:"https://www.youtube.com/watch?v=M574iIvLFDo ",target:"_blank",rel:"noreferrer",children:Object(n.jsx)("li",{children:"Time is Money and We Save You Both (Video Infomercial)"})}),Object(n.jsx)("a",{href:"https://ravendb.net/whitepapers/mongodb-ravendb-best-nosql-open-source-document-database",target:"_blank",rel:"noreferrer",children:Object(n.jsx)("li",{children:"RavenDB vs MongoDB: A NoSQL Database Comparison (White Paper)"})}),Object(n.jsx)("a",{href:"https://www.breslev.co.il/articles/israel_and_society/israel_and_aliyah/yuppie_zionism.aspx?id=28058&language=english",target:"_blank",rel:"noreferrer",children:Object(n.jsx)("li",{children:"Yuppie Zionism"})})]}),Object(n.jsx)("br",{}),Object(n.jsx)("h2",{children:"Work History"}),Object(n.jsx)("a",{href:"https://drive.google.com/file/d/1LD9zIEU-1HeJBoEKjIGH-FxGrpJrf6V_/view?usp=sharing",target:"_blank",children:"Resume of David Ben Horin"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/about",title:"About David Ben Horin",hashtag:"#marketing",hashtagArray:["marketing","writing"],via:"TheHighway60",desc:"David Ben Horin is the developer and writer for Highway 60."}),Object(n.jsx)(y,{})]})},U={borderRadius:"60%",height:"5em"},B={textDecoration:"none"},D={fontSize:"1.6em",marginRight:"75%",paddingBottom:".5%",color:"black"};var C=function(e){return Object(n.jsxs)(n.Fragment,{children:[Object(n.jsx)(j.a,{children:Object(n.jsx)(b.c,{children:Object(n.jsx)(b.a,{path:"/about",exact:!0,component:R})})}),Object(n.jsxs)(j.c,{to:"../about",style:B,children:[Object(n.jsx)("img",{src:m,style:U,alt:"David Ben Horin"}),Object(n.jsx)("p",{style:D,children:"By David Ben Horin"})]})]})},z=i.p+"static/media/planet_img.0c57a281.jpg";var N=function(e){return Object(n.jsxs)("div",{children:[Object(n.jsx)("br",{}),Object(n.jsxs)(j.c,{to:e.prevURL,style:{fontSize:"2em",marginTop:"2px",textDecoration:"none",fontWeight:"bold"},children:[Object(n.jsx)(x.a,{style:{color:"black"}}),"\xa0",Object(n.jsx)("span",{style:{color:"black"},children:"Previous Post"})]}),"\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0",Object(n.jsxs)(j.c,{to:e.nextURL,style:{fontSize:"2em",marginTop:"2px",color:"charcoal",textDecoration:"none",fontWeight:"bold"},children:[Object(n.jsx)("span",{style:{color:"black"},children:"Next Post"}),"\xa0",Object(n.jsx)(x.b,{style:{color:"black"}})]}),Object(n.jsx)("br",{})]})},P=(i.p,{marginLeft:"auto",marginRight:"auto",width:"25em",height:"20em"});var _=function(e){return Object(n.jsx)("img",{src:""+e.picURL,style:P,alt:e.alt})},W=new Date("11, 11, 2020").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var G=function(){return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Let's Go for a Spin",desc:"David Ben Horin is the developer for Highway 60. A marketer for 10 years, he decided to see what the other side of his profession is up to by coding this app.",URL:"https://highway-60.firebaseapp.com/articles/hello-world",imageURL:z}),Object(n.jsx)("h1",{children:"Let's Go for a Spin"}),Object(n.jsx)(_,{picURL:"https://i.imgur.com/SPrG2WA.jpg"}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:W}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/hello-world",title:"Highway 60",hashtag:"#highway60",hashtagArray:["marketing","writing"],via:"TheHighway60",desc:"Hello world from the great Highway 60!"})}),Object(n.jsx)("p",{children:Object(n.jsx)("i",{children:"What came first, the chicken or the egg? The egg, of course. Who eats chicken for breakfast?"})}),Object(n.jsx)("p",{children:"\u201cDavid, it took me 15 minutes to figure out how wrong you were.\u201d"}),Object(n.jsx)("p",{children:"That was the reply my boss gave me right after my first assignment. After working as a marketer in hi-tech, I took a job writing for a database."}),Object(n.jsx)("p",{children:"How hard could it be?"}),Object(n.jsx)("p",{children:"Little did I know that this was one of the most deep level pieces of software out there. In order to talk about it, you really had to know about programming."}),Object(n.jsx)("p",{children:"I thought I did. I coded a website with login authentication, isn\u2019t that enough?"}),Object(n.jsx)("p",{children:"Well, I found out soon enough when I decided to start trying my hand a C#. I programmed in my \u201cHello world\u201d program and the computer just sat there."}),Object(n.jsx)("p",{children:"\u201cHey Iftah, why isn\u2019t the computer rendering my Hello World?\u201d"}),Object(n.jsx)("p",{children:"\u201cDavid, you\u2019re not . . . you are!\u201d"}),Object(n.jsx)("p",{children:"He was biting his lip, trying hard not to laugh."}),Object(n.jsx)("p",{children:"\u201cWe don\u2019t render C# on a notepad file. You need an IDE buddy. This isn\u2019t 1996.\u201d"}),Object(n.jsx)("p",{children:"Well, for me it still is."}),Object(n.jsx)("p",{children:"I decided that as a marketer, if I want to get anywhere in high-tech, I\u2019d better learn how to code."}),Object(n.jsx)("h1",{children:"Here is my site, 1996 is reborn. Hey Macarena!"}),Object(n.jsx)("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/zJ2hqQWIx64",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),Object(n.jsx)("p",{children:"That\u2019s the plan. The guys say in order to code, you have to code. They told me to stop taking too many courses and just dive right in."}),Object(n.jsx)("p",{children:"So here we go. The site looks like it was done right after I watched a live episode of 3rd Rock from the Sun."}),Object(n.jsx)("p",{children:"That\u2019s the way I want it. Here is my ReactJS App, warts and all. I sneaked in a little CSS pizzaz for some spice, and maybe I tried a function here and there."}),Object(n.jsx)("p",{children:"Look at me go!"}),Object(n.jsx)("p",{children:"The plan is to keep coding and slowly improve the quality of my site. As I learn something new, I will incorporate it into what you see and tell you all about it."}),Object(n.jsx)("p",{children:"As a marketer, my perspective on things is unique. I can talk about what I am experiencing for the first time with a new set of eyes."}),Object(n.jsx)("p",{children:"I hope you enjoy it."}),Object(n.jsx)("p",{children:"Now if you will excuse me, I sent my boss a copy of this site and it\u2019s been 15 minutes."}),Object(n.jsx)(N,{prevURL:"../articles",nextURL:"/articles/a-big-decision"}),Object(n.jsx)(y,{})]})},F=i(28),Y=[{link:"/articles/amazon-and-al-capone",title:"Amazon and Al Capone",desc:"Al Capone's booze racket seemed unstoppable in the 1930s. Who would have thought they nailed him with tax evasion? Amazon might be taken down in the same unex
1pected manner.",pic:Object(n.jsx)("img",{src:"https://live.staticflickr.com/65535/50897829381_c8d201a5ee_c.jpg",style:{height:"3em",marginLeft:"40%"},alt:"Car in the 1930s during Prohibition."}),tag:"Published"},{link:"/articles/by-any-other-name",title:"By Any Other Name",desc:"Peace with Israel and the Arab states mean our entire region can coalesce into a huge economic powerhouse, even if, like Europe, we all maintain our unique language, culture, cuisine, and religion. But what will we call it?",pic:Object(n.jsx)("img",{src:"https://live.staticflickr.com/65535/50873725431_488d9d75bf_c.jpg",style:{height:"3em",marginLeft:"40%"}}),tag:"Published"},{link:"/articles/a-state-is-born",title:"A State is Born",desc:"Learning useState() in ReactJS for the first time is like learning how to ride a bike. Next step: Road trip to the ends of the earth and back.",pic:Object(n.jsx)("img",{src:"https://live.staticflickr.com/65535/50870085797_f3589da6f2_c.jpg",style:{height:"3em",marginLeft:"40%"}}),tag:"Development"},{link:"/articles/go-with-God",title:"Go with G-d",desc:"The real outrage didn't occur on January 6 in the American Congress Building. It occured 3 days eariler. All of us must choose which side we are on. Let's go with G-d!",pic:Object(n.jsx)("img",{src:"https://i.imgur.com/g7wB5kI.jpg",style:{height:"3em",marginLeft:"40%"}}),tag:"Published"},{link:"/articles/put-on-your-helmet",title:"Put On Your Helmet",desc:"The evolution of a Helmet component from JSX text to a React Component to using props so I don't have to copy and paste my title 3 times anymore.",pic:Object(n.jsx)(F.a,{style:{color:"green"}}),tag:"Development"},{link:"/articles/the-dating-game",title:"Overcoming My Fear of Dating",desc:"Here is my journey into the dating game, trying to figure out how to use the Date() Object and apply what I want to see onto Highway 60.",pic:Object(n.jsx)(F.c,{style:{color:"red"}}),tag:"Development"},{link:"/articles/a-big-decision",title:"A Big Decision",desc:"Do I render my code or eat a piece of chocolate? To be or not to be.",pic:Object(n.jsx)(F.b,{style:{color:"brown"}}),tag:"Story"},{link:"/articles/hello-world",title:"Welcome to Highway 60",desc:"This is my hello world article. The flagship piece for what Highway 60 is all about.",pic:Object(n.jsx)("img",{src:"https://i.imgur.com/SPrG2WA.jpg",style:{height:"3em",marginLeft:"40%"}}),tag:"Development"}],J=Y.map((function(e){return Object(n.jsxs)("li",{children:[Object(n.jsxs)(j.b,{to:e.link,style:{textDecoration:"none",color:"black"},children:[Object(n.jsx)("h2",{children:e.title}),Object(n.jsx)("div",{style:{fontSize:"4em",marginBottom:"0px"},children:e.pic}),Object(n.jsx)("desc",{children:e.desc})]}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]})})),M=function(){return Object(n.jsxs)("div",{className:"articles",children:[Object(n.jsxs)(p.b.div,{initial:"hidden",animate:"visible",variants:{hidden:{scale:.8,opacity:0}
1,visible:{scale:1.25,opacity:1,paddingBottom:".2em",transition:{delay:.6}}},children:[Object(n.jsx)("h3",{style:{fontSize:"2em"},children:"Highway 60 Posts:"}),Object(n.jsx)("br",{})]}),Object(n.jsx)("ul",{children:J})]})};var E=function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Highway 60 Articles Page",desc:"Highway 60 Stories about the most beautiful stretch of Land on G-d's great earth.",URL:"https://highway-60.web.app/articles/",imageURL:z}),Object(n.jsx)("ul",{id:"articleList",children:Object(n.jsx)(M,{})}),Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/",title:"Highway 60 Articles",hashtag:"#marketing",hashtagArray:["writing","marketing"],via:"TheHighway60",desc:"Articles about coding, marketing, writing, high tech, and stories about the most beautiful stretch of Land on G-d's great earth."}),Object(n.jsx)(y,{})]})},q=Y.filter((function(e){return"Story"===e.tag})).map((function(e){return Object(n.jsxs)("li",{children:[Object(n.jsxs)(j.b,{to:e.link,style:{textDecoration:"none",color:"black"},children:[Object(n.jsx)("h2",{children:e.title}),Object(n.jsx)("div",{style:{fontSize:"4em",marginBottom:"0px"},children:e.pic}),Object(n.jsx)("desc",{children:e.desc})]}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]})})),X=function(){return Object(n.jsxs)("div",{className:"articles",children:[Object(n.jsxs)(p.b.div,{initial:"hidden",animate:"visible",variants:{hidden:{scale:.8,opacity:0}
1,visible:{scale:1.25,opacity:1,paddingBottom:".2em",transition:{delay:.6}}},children:[Object(n.jsx)("h3",{style:{fontSize:"2em"},children:"Highway 60 Stories:"}),Object(n.jsx)("br",{})]}),Object(n.jsx)("ul",{style:{marginTop:"3em"},children:q})]})};var Q=function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Highway 60 Articles Page",desc:"Highway 60 stories about life in the most beautiful stretch of Land on G-d's green earth.",URL:"https://highway-60.web.app/articles-tag-story/",imageURL:z}),Object(n.jsx)("ul",{id:"articleList",children:Object(n.jsx)(X,{})}),Object(n.jsx)(A,{url:"https://highway-60.web.app/articles-tag-story/",title:"Highway 60 Articles",hashtag:"#marketing",hashtagArray:["writing","stories","storytelling"],via:"TheHighway60",desc:"Highway 60 stories about life in the most beautiful stretch of Land on G-d's green earth."}),Object(n.jsx)(y,{})]})},V=Y.filter((function(e){return"Development"===e.tag})).map((function(e){return Object(n.jsxs)("li",{children:[Object(n.jsxs)(j.b,{to:e.link,style:{textDecoration:"none",color:"black"},children:[Object(n.jsx)("h2",{children:e.title}),Object(n.jsx)("div",{style:{fontSize:"4em",marginBottom:"0px"},children:e.pic}),Object(n.jsx)("desc",{children:e.desc})]}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]})})),K=function(){return Object(n.jsxs)("div",{className:"articles",children:[Object(n.jsxs)(p.b.div,{initial:"hidden",animate:"visible",variants:{hidden:{scale:.8,opacity:0}
1,visible:{scale:1.25,opacity:1,paddingBottom:".2em",transition:{delay:.6}}},children:[Object(n.jsx)("h3",{style:{fontSize:"2em"},children:"Highway 60 Developer Articles:"}),Object(n.jsx)("br",{})]}),Object(n.jsx)("ul",{style:{marginTop:"3em"},children:V})]})};var Z=function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Highway 60 Articles Page",desc:"Highway 60 articles about coding web development.",URL:"https://highway-60.web.app/articles-tag-development",imageURL:z}),Object(n.jsx)("ul",{id:"articleList",children:Object(n.jsx)(K,{})}),Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles-tag-development",title:"Highway 60 Articles",hashtag:"#webdevelopment",hashtagArray:["writing","webdevelopment","reactjs"],via:"TheHighway60",desc:"Highway 60 articles about coding web development."}),Object(n.jsx)(y,{})]})},$=Y.filter((function(e){return"Published"===e.tag})).map((function(e){return Object(n.jsxs)("li",{children:[Object(n.jsxs)(j.b,{to:e.link,style:{textDecoration:"none",color:"black"},children:[Object(n.jsx)("h2",{children:e.title}),Object(n.jsx)("div",{style:{fontSize:"4em",marginBottom:"0px"},children:e.pic}),Object(n.jsx)("desc",{children:e.desc})]}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]})})),ee=function(){return Object(n.jsxs)("div",{className:"articles",children:[Object(n.jsxs)(p.b.div,{initial:"hidden",animate:"visible",variants:{hidden:{scale:.8,opacity:0}
1,visible:{scale:1.25,opacity:1,paddingBottom:".2em",transition:{delay:.6}}},children:[Object(n.jsx)("h3",{style:{fontSize:"2em"},children:"Published Articles:"}),Object(n.jsx)("br",{})]}),Object(n.jsx)("ul",{style:{marginTop:"3em"},children:$})]})};var te=function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Highway 60 Articles Page",desc:"Highway 60 articles published in the general media: Israel National News, Times of Israel, Breslov World.",URL:"https://highway-60.web.app/articles-tag-published",imageURL:z}),Object(n.jsx)("ul",{id:"articleList",children:Object(n.jsx)(ee,{})}),Object(n.jsx)(A,{url:"https://highway-60.web.app/articles-tag-published",title:"Highway 60 Articles",hashtag:"#marketing",hashtagArray:["writing","marketing","Israel"],via:"TheHighway60",desc:"Highway 60 articles published in the general media: Israel National News, Times of Israel, Breslov World."}),Object(n.jsx)(y,{})]})},ie=Y.filter((function(e){return"Life Charge"===e.tag})).map((function(e){return Object(n.jsxs)("li",{children:[Object(n.jsxs)(j.b,{to:e.link,style:{textDecoration:"none",color:"black"},children:[Object(n.jsx)("h2",{children:e.title}),Object(n.jsx)("div",{style:{fontSize:"4em",marginBottom:"0px"},children:e.pic}),Object(n.jsx)("desc",{children:e.desc})]}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]})})),ne=function(){return Object(n.jsxs)("div",{className:"articles",children:[Object(n.jsxs)(p.b.div,{initial:"hidden",animate:"visible",variants:{hidden:{scale:.8,opacity:0}
1,visible:{scale:1.25,opacity:1,paddingBottom:".2em",transition:{delay:.6}}},children:[Object(n.jsx)("h3",{style:{fontSize:"2em"},children:"Highway 60 Life Charges:"}),Object(n.jsx)("br",{})]}),Object(n.jsx)("ul",{style:{marginTop:"3em"},children:ie})]})};var ae=function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Highway 60 Articles Page",desc:"Charging your life forward one step at a time. Personal producitivity. Reaching goals. Making dreams come true. Finding happiness. All the good stuff!",URL:"https://highway-60.web.app/articles-tag-life-charge/",imageURL:z}),Object(n.jsx)("ul",{id:"articleList",children:Object(n.jsx)(ne,{})}),Object(n.jsx)(A,{url:"https://highway-60.web.app/articles-tag-life-charge",title:"Highway 60 Articles",hashtag:"#marketing",hashtagArray:["writing","improvement"],via:"TheHighway60",desc:"Charging your life forward one step at a time. Personal producitivity. Reaching goals. Making dreams come true. Finding happiness. All the good stuff!"}),Object(n.jsx)(y,{})]})};i(35);function ce(e){return Object(n.jsx)("div",{className:"Gallery",style:{marginTop:"-20em",marginBottom:"-20em"},children:Object(n.jsxs)("div",{className:"container",children:[Object(n.jsx)("img",{src:e.selectedImg,alt:"selected",className:"selected"}),Object(n.jsx)("div",{className:"imgContainer",children:e.images.map((function(t,i){return Object(n.jsx)("img",{src:t,alt:"contianer",style:{border:e.selectedImg===t?"4px solid gold":""},onClick:function(){return e.setSelectedImg(t)}},i)}))})]})})}var se=function(e){Object(l.a)(i,e);var t=Object(h.a)(i);function i(e){var a;return Object(r.a)(this,i),(a=t.call(this,e)).ArticleList=function(){a.setState({message:"",articles:Object(n.jsx)(M,{})})},a.state={message:"Click here to see the Highway 60 posts",articles:""},a}return Object(o.a)(i,[{key:"render",value:function(){return Object(n.jsxs)(p.b.div,{id:"body",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:1},children:[Object(n.jsx)(T,{title:"Highway 60 Home Page",desc:"Highway 60 is about coding, marketing, writing, high tech, and the people who make up the most beautiful stretch of Land on G-d's green earth.",URL:"https://highway-60.web.app/",imageURL:z}),Object(n.jsx)("div",{id:"thumbsUp",class:"fa fa-road",style:{fontSize:"8em",marginTop:"12px",color:"charcoal"}}),Object(n.jsx)(p.b.h1,{style:{fontFamily:"Yesteryear",fontSize:"3em"},initial:{color:"black"},animate:{color:"blue"},exit:{color:"green"},transition:{duration:2},children:"Highway 60"}),Object(n.jsx)("h2",{style:{fontFamily:"Gentium Book Basic",fontSize:"2em",lineHeight:1.5},children:Object(n.jsxs)("ul",{children:[Object(n.jsx)("li",{children:"Chronicling my journey from marketing to development."}),Object(n.jsx)("li",{children:"Tiptoeing the tightrope of writing and coding. "}),Object(n.jsx)("li",{children:"Making new friends along the highway to heaven."})]})}),Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/",title:"Highway 60",hashtag:"#marketing",hashtagArray:["marketing","writing"],via:"TheHighway60",desc:"This is the home page for Highway 60."}),Object(n.jsx)("br",{}),Object(n.jsxs)("div",{onClick:this.ArticleList,children:[Object(n.jsx)("h1",{style:{fontSize:"3em",textDecoration:"underline"},children:this.state.message}),this.state.articles]}),Object(n.jsx)("br",{}),Object(n.jsx)(y,{}),Object(n.jsx)("script",{src:"https://platform.linkedin.com/in.js",type:"text/javascript",children:"lang: en_US"}),Object(n.jsx)("script",{type:"IN/Share","data-url":"https://www.linkedin.com"})]})}}]),i}(c.a.Component);var re=i(12),oe=i.p+"static/media/choc.e8a0da9b.jpg",le=new Date("12, 29, 2020").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var he=function(){var e=["https://i.imgur.com/g7wB5kI.jpg","https://i.imgur.com/SPrG2WA.jpg","https://cdn.theculturetrip.com/wp-content/uploads/2017/10/north_of_israel_6859671064.jpg",oe],t=Object(a.useState)(0),i=Object(re.a)(t,2),c=i[0],s=i[1],r=Object(a.useState)(1),o=Object(re.a)(r,2),l=o[0],h=o[1],j=Object(a.useState)(20),d=Object(re.a)(j,2),b=d[0],m=d[1],x=Object(a.useState)(""),g=Object(re.a)(x,2),O=g[0],u=g[1],w=Object(a.useState)(""),f=Object(re.a)(w,2),v=f[0],k=f[1];return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"A Big Decision",desc:"Do I see my code render or do I eat a piece of chocolate. To be or not to be?",URL:"https://highway-60.web.app/articles/a-big-decision",imageURL:"/images/choc.jpg"}),Object(n.jsxs)("h1",{id:"top",style:{marginTop:"2em"},children:["A Big Decision ",Object(n.jsx)("br",{}),Object(n.jsx)("button",{style:{fontSize:"1.5em"},onClick:function(){h((function(e){return e+1})),m((function(e){return e+5}))},children:"+"}),l,b,Object(n.jsx)("button",{style:{fontSize:"1.5em"},onClick:function(){h((function(e){return e-1})),m((function(e){return e-5}))},children:"-"})]}),Object(n.jsxs)("div",{children:[Object(n.jsx)("input",{name:"email",value:O,onChange:function(e){return u(e.target.value)}}),Object(n.jsx)("input",{type:"password",name:"password",value:v,onChange:function(e){return k(e.target.value)}})]}),Object(n.jsx)(_,{picURL:e[c],alt:"Do a code or take a chip break?"}),Object(n.jsx)("button",{style:{fontSize:"2em",color:"white",backgroundColor:"teal",borderColor:"white",borderRadius:"10px",marginTop:"5px"},onClick:function(){if(c+1===e.length)return e.length;s((function(e){return e+1}))},children:"\xa0Click for a new Picture\xa0"}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:le}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.web.app/articles/a-big-decision",title:"Highway 60",hashtag:"#highway60",hashtagArray:["coding","writing"],via:"TheHighway60",desc:"Do I see my code render or do I eat a piece of chocolate? To be or not to be."})}),Object(n.jsx)("p",{children:"I am coding something new. It has been about 45 minutes of intense concentration."}),Object(n.jsx)("p",{children:"It\u2019s about to happen. After all this work, and not a small amount of anticipation, I am ready to rumble. It\u2019s time to execute."}),Object(n.jsxs)("p",{children:["Just as I am ready to hit that ",Object(n.jsx)("b",{children:"npm start"}),", my wife surprises me."]}),Object(n.jsx)("p",{children:"She went to Garenei Afula, the local candy store. We are about to go into COVID-19 lockdown so we made sure to have a two weeks supply of sweets for the kids."}),Object(n.jsx)("p",{children:"She got a special stash for the both of us."}),Object(n.jsx)("p",{children:"The kids will be home in 20 minutes, so she breaks out the bag and offers me a little."}),Object(n.jsx)("p",{children:"Now I have a choice to make:"}),Object(n.jsx)("p",{children:"Do I render, or take a piece?"}),Object(n.jsx)("p",{children:"No brainer. I stop, dig my hand in, and take out three pieces."}),Object(n.jsx)("p",{children:"Pecan covered in chocolate. It was a good choice."}),Object(n.jsx)("p",{children:"Liquor in a dark chocolate ball. Still rolling."}),Object(n.jsx)("p",{children:"Then I face the great impasse:"}
1),Object(n.jsx)("p",{children:"The third chocolate falls on the floor."}),Object(n.jsx)("p",{children:"Do I get on the floor to retrieve my delicacy or do I run my latest render?"}),Object(n.jsx)("br",{}),Object(n.jsx)("h1",{children:"Three Second Rule"}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"I gotta see this baby in action."}),Object(n.jsx)("p",{children:"The program renders, the chocolate is sitting right under my hard drive. As long as it doesn\u2019t melt, it can wait."}),Object(n.jsx)("p",{children:"Ugghhhh!"}),Object(n.jsx)("p",{children:"An error."}),Object(n.jsx)("p",{children:"It\u2019s a pretty simple one, I can tackle it within a minute or so."}),Object(n.jsx)("p",{children:"But what about the chocolate?"}),Object(n.jsx)("p",{children:"That\u2019s a tough one: Eat a chocolate or debug something."}),Object(n.jsx)("p",{children:"My boss is a hard-core developer. He would be proud of my next decision."}),Object(n.jsx)("p",{children:"My wife has a sweet tooth. She would kill me."}),Object(n.jsx)("p",{children:"I\u2019ll just work fast."}),Object(n.jsx)("p",{children:"Uy vey, another bug."}),Object(n.jsx)("p",{children:"More debugging or some chocolate?"}),Object(n.jsx)("p",{children:"Finally, I get the thing going. Instead of my standard fist clutch, I get on all fours."}),Object(n.jsx)("p",{children:"\u201cJust what are you doing?\u201d asks my wife."}),Object(n.jsx)("p",{children:"Busted."}),Object(n.jsx)(N,{prevURL:"/articles/hello-world",nextURL:"/articles/the-dating-game"}),Object(n.jsx)(y,{})]})},je=i.p+"static/media/helmet.20ec198e.jpg",de=new Date("12, 31, 2020").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var be=function(){return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Put On Your Helmet",desc:"The evolution of a Helmet component from JSX text to a React Component to using props so I don't have to copy and paste my title 3 times anymore.",URL:"https://highway-60.firebaseapp.com/articles/put-on-your-helmet",imageURL:z,author:"David Ben Horin"}),Object(n.jsx)("h1",{children:"Put On Your Helmet"}),Object(n.jsx)(_,{picURL:je,alt:"Put on Your Helmet"}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:de}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/put-on-your-helmet",title:"Put on Your Helmet",hashtag:"#highway60",hashtagArray:["marketing","writing","coding"],via:"TheHighway60",desc:"The evolution of a Helmet component from JSX text to a React Component to using props so I don't have to copy and paste my title 3 times anymore."})}),Object(n.jsx)("p",{children:"There is this amazing river right by where I live. It is deep in the Jordan Valley, the hottest place in Israel. On a bright spring day, it can be 80 degrees (27 C) outside, but the water is ice cold. "}),Object(n.jsx)("p",{children:"The moment you go from the burn of the sun to the freeze of the cold, your body is flooded with adrenaline. It is a killer rush."}),Object(n.jsx)("p",{children:"I used to be a wuss about it. They have steps into the river. I would timidly put my feet in up to my ankles, then to my knees. Then to my hips."}),Object(n.jsx)("p",{children:"The stomach has more sensitive skin so it takes a little bit of psyching myself up. I\u2019ll dip to my belly button and take a few deep breaths. Then, to get more comfortable, I would dip my arms in, put some water over my shoulders."}),Object(n.jsx)("p",{children:"Then, I would immerse the rest of my body into the water."}),Object(n.jsx)("p",{children:"All in all, it took about 10 minutes."}),Object(n.jsx)("p",{children:"After about a month, I got used to it. When we arrived at the top step, my wife and children would stand next to me and together we would go, \u201c1, 2, 3 \u2026..\u201d"}),Object(n.jsx)("p",{children:"Whoosh! Right into the water."}),Object(n.jsx)("p",{children:"I would love to get to this point with my ReactJS skills, but I am still on my tippy toes at the kiddie end of the pool."}),Object(n.jsx)("p",{children:"That\u2019s how I intend to install, and evolve my <helmet > tags so I can stop seeing \u201cReact\u201d at the top of all my pages."}),Object(n.jsx)("h1",{children:"The First Step"}),Object(n.jsx)("p",{children:"<helmet> is a library you can install to easily tailor everything in your <head> tags to the specific page you are working on."}),Object(n.jsx)("p",{children:"You can make your own <meta> tags, <link> tags, even script tags and <style> elements. Anything you can put inside your <head> tags in html, you can do with <helmet>."}),Object(n.jsx)("p",{children:"This is a pretty big deal because I am messing with my app.js page and the index.html page. It requires making changes to both so if I mess this up, uy vey."}),Object(n.jsx)("p",{children:"Let\u2019s get cooking."}),Object(n.jsx)("p",{children:"I am listening to Chopin for focus right now so this should go smoothly."}),Object(n.jsx)("p",{children:"First step is to install."}),Object(n.jsxs)("p",{children:["Here are the docs:",Object(n.jsx)("a",{href:"https://www.npmjs.com/package/react-helmet",children:"https://www.npmjs.com/package/react-helmet"})]}),Object(n.jsx)("p",{children:"here is my npm command:"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nnpm install --save react-helmet\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Woo hoo!"}),Object(n.jsx)("p",{children:"I am going to start with my articles.js page that shows my articles. Better import this sucker first."}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\nimport {Helmet} from "react-helmet";\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"YEAH BABY."}),Object(n.jsx)("br",{}),Object(n.jsx)("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/JBHKVAs85Ko?start=15",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"Now, let\u2019s do something simple, like a <title> and <desc>"}
1),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n <Helmet>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n <title>Articles for Highway 60</title>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <meta name="description" content="Articles for Highway 60. We talk about coding, marketing, writing, and the people and places that make the greatest land on earth come to life." /> \n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n </Helmet>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Okay. That\u2019s good."}),Object(n.jsx)("p",{children:"Now, the moment of truth."}),Object(n.jsx)("p",{children:"Did it work?"}),Object(n.jsx)("p",{children:"No. I still have the meta data from the index.html page."}),Object(n.jsx)("p",{children:"What if I deleted the title and meta desc info from this page?"}),Object(n.jsx)("p",{children:"Hold this for me a minute, will you?"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n <meta\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\nname="description"\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n content="Web site created using create-react-app"\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n />\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n<title>React Application</title>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"First, let\u2019s check up top:"}),Object(n.jsx)("br",{}),Object(n.jsx)("img",{src:"/images/helmet.png"}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"That\u2019s promising."}),Object(n.jsx)("p",{children:"But when I check my page source, I don\u2019t see the new stuff I added?"}),Object(n.jsx)("p",{children:"That\u2019s okay. Stack Overflow tells me this:"}),Object(n.jsx)("br",{}),Object(n.jsx)("a",{href:"https://stackoverflow.com/questions/60467530/react-helmet-not-showing-meta-tags-in-view-page-source-but-shows-in-element-on-i",children:"https://stackoverflow.com/questions/60467530/react-helmet-not-showing-meta-tags-in-view-page-source-but-shows-in-element-on-i"}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"Since this is a front end solution, and not from the server, it will not register on the page source, but it will be visible to the user, and to the Google SEO bots crawling my app."}),Object(n.jsx)("p",{children:"Double Woo Hoo!"}),Object(n.jsx)("h1",{children:"Doing Something CRAZY!"}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"Now, I would like to replace all my index.html <head> tags with the <Helmet>."}),Object(n.jsx)("p",{children:"Hold this, would you . . ."}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <meta charset="utf-8" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <meta name="viewport" content="width=device-width, initial-scale=1" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <meta name="theme-color" content="#000000" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <script src="https://use.fontawesome.com/ae82b2007b.js"><\/script>\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n \x3c!--\n manifest.json provides metadata used when your web app is installed on a\n user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n --\x3e\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />\n'}
1),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link rel="preconnect" href="https://fonts.gstatic.com">\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link href="https://fonts.googleapis.com/css2?family=Gentium+Book+Basic&family=Yesteryear&display=swap" rel="stylesheet">\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Okay. I had to erase the comments, and I lost my CSS stylings, but the app runs."}),Object(n.jsx)("p",{children:"The problem is that I am running my prototype <Helmet> on my articles.js page. I will have to copy and paste it to my app page to get back the stylings. (yes \u2013 make a component \u2013 but we are still dipping our toe!)"}),Object(n.jsx)("p",{children:"Got it! Styles are back. I have an empty <head> tag in my index.html file, and a full <helmet> in my home page and article page."}),Object(n.jsx)("p",{children:"Heh, heh, heh. I even replace the favicon.ico image to my highway 60."}),Object(n.jsx)("br",{}),Object(n.jsx)("h1",{children:"Let\u2019s Get Wet!"}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"Now it\u2019s time to dive in!"}),Object(n.jsx)("p",{children:"Let\u2019s make a component."}),Object(n.jsx)("p",{children:"I am going to create a MetaTags.js file and put all this goodness into it. Then I will call the component onto my home page and articles page."}),Object(n.jsx)("p",{children:"Yeah!"}),Object(n.jsx)("p",{children:"The only quirk is that I have to import the {Helmet} hook from \u2018react-helmet\u2019 into every page I call my <Helmet>."}),Object(n.jsx)("p",{children:"Good to know."}),Object(n.jsx)("br",{}),Object(n.jsx)("h1",{children:"Dive Deep!"}),Object(n.jsx)("br",{}),Object(n.jsx)("p",{children:"For the main event, we will insert props."}),Object(n.jsx)("p",{children:"Before we do that, I want to list all the meta tags I am used to working with:"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n<title>title</title>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="description" content="desc "/>\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:site_name" content="Highway 60" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:type" content="Application" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:title" content="title " />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:description" content="desc" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:url" content="url" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta property="og:image" content="image"/> \n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter:card" content="summary_large_image" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter:creator" content="@TheHighway60" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter:title" content="title" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter: description" content="desc" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter: url" content="url" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta property="twitter:image" content="image"/>\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"For YEARS! I had to copy and paste my meta info to 2-3 places. This marks the end of a small annoyance. Thank G-d for props!"}),Object(n.jsxs)("p",{children:["Here is the ",Object(n.jsx)("b",{children:"last time"})," I will copy and paste:"]}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nimport React from 'react'; // import the React library\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\nimport {Helmet} from "react-helmet";\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nfunction MetaTags(props) {\n"}
1),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n return (\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n <>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n <Helmet>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta charset="utf-8" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="viewport" content="width=device-width, initial-scale=1" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="theme-color" content="#000000" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<script src="https://use.fontawesome.com/ae82b2007b.js"><\/script>\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link rel="preconnect" href="https://fonts.gstatic.com" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<link href="https://fonts.googleapis.com/css2?family=Gentium+Book+Basic&family=Yesteryear&display=swap" rel="stylesheet" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n<title>{props.title}</title>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="description" content={props.desc}/>\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:site_name" content="Highway 60" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:type" content="Application" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:title" content={props.title} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:description" content={props.desc} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="og:url" content={props.URL} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta property="og:image" content={props.imageURL}/> \n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter:card" content="summary_large_image" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter:creator" content="@TheHighway60" />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter:title" content={props.title} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter: description" content={props.desc} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta name="twitter: url" content={props.URL} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<meta property="twitter:image" content={props.imageURL} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n </Helmet>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n </>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n );\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n }\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nexport default MetaTags;\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Now, let\u2019s go back to the home page and put in our props."}),Object(n.jsx)("p",{children:"But first, I have to import my {Helmet} hook, my MetaTags component, and an image:"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nimport planet from '../pictures/planet_img.jpg';\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nimport MetaTags from './MetaTags';\n"}
1),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Now, let\u2019s call the component and set our props:"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<MetaTags title="Highway 60 Home Page" desc="Highway 60 is about coding, marketing, writing, high tech, and the people who make up the most beautiful stretch of Land on G-d\'s green earth." \nURL="https://highway-60.web.app/" imageURL={planet} />\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Did it work?"}),Object(n.jsx)("p",{children:"For that, I need to upload the latest version of my app and paste it to FaceBook."}),Object(n.jsx)("p",{children:"Why not? Let\u2019s give it a whirl."}),Object(n.jsx)("p",{children:"It didn\u2019t work."}),Object(n.jsx)("p",{children:"I see that the tab up top taking in the <title> element did work. I see that the favicon I set also worked. Let\u2019s do more work:"}),Object(n.jsx)("p",{children:"Okay. The problem is that social media sites look to the server for their meta data and ReactJS is a client-side application. We need to improvise."}),Object(n.jsxs)("p",{children:["One option is to use ",Object(n.jsx)("b",{children:"react-static"}),", but I might have to redo my entire site."]}),Object(n.jsx)("p",{children:"Another option is to start playing with the server side. But I am not ready for that."}),Object(n.jsx)("p",{children:"For now, I will have to be happy with google SERPS and a good title and favicon up top."}),Object(n.jsx)("p",{children:"The rest will have to wait until I can dive deeper."}),Object(n.jsx)("br",{}),Object(n.jsx)("h1",{children:"Happy No Year"}),Object(n.jsx)("div",{id:"thumbsUp",class:"fa fa-road",style:{fontSize:"4em",marginTop:"2px",color:"charcoal"}}),Object(n.jsx)("p",{children:"This morning I take my son to the bus. Ahmed is really cool. He waits patiently as Ari finds his spot and gets comfortable. When my son starts to jump around in his seat, Ahmed even gives him a piece of candy."}),Object(n.jsx)("p",{children:"Lot's of good people in my country."}),Object(n.jsx)("p",{children:'Today, he smiles at me and says "Dave, happy no year!"'}),Object(n.jsx)("p",{children:'"Huh? What\'s no year?"'}),Object(n.jsx)("p",{children:'He asks me, "When was new year for you?"'}),Object(n.jsx)("p",{children:'"Rosh HaShana was three months ago."'}),Object(n.jsx)("p",{children:'"For me, youm-e-ashura was four months ago."'}),Object(n.jsxs)("p",{children:["Ahmed lives about 10km north of us, on the 60. He lives in a huge Arab city of ",Object(n.jsx)("i",{children:"al-Nasrat"}),", what the people of Fon-Du-Lac Wisconsin call Nazareth. There is about a 20% Christian population there so he sees all the decorations for Christmas and New Year's, but as a Muslim, his calendar changes a few months earlier."]}),Object(n.jsx)("p",{children:'"Sounds great. Well, happy no year. See you tomrrow."'}),Object(n.jsx)("div",{id:"thumbsUp",class:"fa fa-road",style:{fontSize:"4em",marginTop:"2px",color:"charcoal"}}),Object(n.jsx)(N,{prevURL:"/articles/the-dating-game",nextURL:"/articles/go-with-God"}),Object(n.jsx)(y,{})]})},pe=i.p+"static/media/a-full-day.cfd4c1d0.jpg",me=new Date("1, 3, 2021").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var xe=function(){return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Overcoming My Fear of Dating",desc:"Here is my journey into the dating game, trying to figure out how to use the Date() Object and apply what I want to see onto Highway 60.",URL:"https://highway-60.firebaseapp.com/articles/the-dating-game",imageURL:pe}),Object(n.jsx)("h1",{children:"Overcoming My Fear of Dating"}),Object(n.jsx)(_,{picURL:pe}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:me}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/the-dating-game",title:"Overcoming My Fear of Dating",hashtag:"#highway60",hashtagArray:["marketing","writing","coding"],via:"TheHighway60",desc:"Here is my journey into the dating game, trying to figure out how to use the Date() Object and apply what I want to see onto Highway 60."})}),Object(n.jsxs)("p",{children:["I saw the most amazing cartoon. It summarizes my path to programming. It is a comic with four boxes. It\u2019s about a programmer. It starts: ",Object(n.jsx)("i",{children:"This is what my friends think I do."})," There is a picture of him designing a rocket ship. "]}),Object(n.jsxs)("p",{children:["The next bx reads: ",Object(n.jsx)("i",{children:"This is what my parents think I do"}),". There is a picture of him designing a submarine. Then, ",Object(n.jsx)("i",{children:"this is what I think I do."})," There is a picture of the universe and him decoding it."]}),Object(n.jsxs)("p",{children:["The final box reads, ",Object(n.jsx)("i",{children:"this is what I actually do"}),"."]}),Object(n.jsx)("p",{children:"Inside the box is a picture of a google search bar with search text that reads:"}),Object(n.jsx)("p",{children:Object(n.jsx)("i",{children:"How to make a date function in JavaScript."})}),Object(n.jsx)("p",{children:"The kicker was that the Date() function was exactly what I was working on and I must have googled something similar about 20 times."}),Object(n.jsx)("h1",{children:"Fifty First Dates"}),Object(n.jsx)("p",{children:"For whatever reason, my fear of dates is that whenever I call the function, the current date appears. This is good for a home page where I can impress my friends with a date that stays current every time they see the page, but what about past blogs?"}),Object(n.jsx)("p",{children:"I have this fear that if I just put a <p>{date()}</p> in my blog page, every single blog post will tell the user that it was done on the same day."}),Object(n.jsx)("p",{children:"Fortunately, googling the Date() function worked."}),Object(n.jsx)("p",{children:"Rabbi Google reintroduced me to parameters."}),Object(n.jsxs)("p",{children:["(Shout out to ",Object(n.jsx)("a",{href:"https://www.youtube.com/user/nissimworld",children:"Nissim Black"})," on that one. He talks about his path to spirituality by learning about religion through Rabbi Google, searching for everything he could find online. I like the term. I think I will use it, but it\u2019s only fair to give credit where it is due.)"]}),Object(n.jsx)("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/NJzEqTD2X7Y?start=20",frameborder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",allowfullscreen:!0}),Object(n.jsx)("p",{children:"Back to our regularly scheduled broadcast."}),Object(n.jsx)("p",{children:"I am pleased to announce that I have dates installed in my blog posts, as you can see up top!"}),Object(n.jsx)("p",{children:"The problem is that it takes about 70 lines of code to make it happen. I have to put a new Date() object into a variable, then set the day, month, and year. Then I need 2 switch() functions to convert the month from a number into a name and the same for a day."}),Object(n.jsx)("p",{children:"This is pure JavaScript. I cannot put it into a component and call it with some props."}),Object(n.jsx)("p",{children:"Someone probably can do this, but he is too busy earning NIS 18,000 ($5,000) a month developing something."}),Object(n.jsx)("h1",{children:"Injecting JavaScript"}),Object(n.jsx)("p",{children:"First things first. After consulting Rabbi Google, I found some really nice code to make my date:"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15%",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nconst today = new Date(\"Dec 3 2020\").toLocaleDateString('en-US', { \n"}
1),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n day: 'numeric',\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n month: 'short',\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n year: 'numeric',\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n weekday: 'long'\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n});\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"This isn\u2019t long, certainly not 70 lines worth."}),Object(n.jsx)("p",{children:"The no-brainer decision is to just use this for every article post."}),Object(n.jsx)("p",{children:"I tried taking this simple task and turning it into a function that I can call at will, but it didn\u2019t work. It will have to wait for another day, G-d willing, in the not too distant future."}),Object(n.jsx)("h1",{children:"While We Are on the Subject of Dating"}),Object(n.jsx)("p",{children:"The other day I forgot to take out the garbage. My wife, already busy with a thousand tasks, now has to lug a 10-kilo bag of stink with her 300 meters to the dumpster."}),Object(n.jsx)("p",{children:"Needless to say, I am gonna get it."}),Object(n.jsx)("p",{children:"Trying to make her feel better, I say to her,"}),Object(n.jsx)("p",{children:"\u201cI love you with all my heart.\u201d"}),Object(n.jsx)("p",{children:"She says, \u201cGood. Now love me with all your brains.\u201d"}),Object(n.jsx)(N,{prevURL:"/articles/a-big-decision",nextURL:"/articles/put-on-your-helmet"}),Object(n.jsx)(y,{})]})},ge=function(e){Object(l.a)(i,e);var t=Object(h.a)(i);function i(){return Object(r.a)(this,i),t.apply(this,arguments)}return Object(o.a)(i,[{key:"componentDidUpdate",value:function(e){this.props.location!==e.location&&window.scrollTo(0,0)}},{key:"render",value:function(){return Object(n.jsx)(c.a.Fragment,{})}}]),i}(a.Component),Oe=Object(b.f)(ge),ue=i.p+"static/media/landscape.50198899.jpg",ye=new Date("1, 10, 2021").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var we=function(){return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Go with G-d",desc:"The real outrage didn't occur on January 6 in the American Congress Building. It occured 3 days eariler. All of us must choose which side we are on. Let's go with G-d!",URL:"https://highway-60.firebaseapp.com/articles/go-with-God",imageURL:ue}),Object(n.jsx)("h1",{children:"Go with G-d"}),Object(n.jsx)(_,{picURL:ue}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:ye}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/go-with-God",title:"Go with G-d",hashtag:"#highway60",hashtagArray:["writing","Israel"],via:"TheHighway60",desc:"The real outrage didn't occur on January 6 in the American Congress Building. It occured 3 days eariler. All of us must choose which side we are on. Let's go with G-d!"})}),Object(n.jsx)("p",{children:"Israel National News just published an article I wrote. A proud resident of Afula in Northern Israel, and a former New Yorker of 28 years, I see both inside and outside the box."}),Object(n.jsx)("p",{children:"I don't pull my punches on this one."}),Object(n.jsxs)("p",{children:["Enjoy. You can view it ",Object(n.jsx)("a",{href:"https://www.israelnationalnews.com/News/News.aspx/294631",target:"_blank",children:"right here"}),"."]}),Object(n.jsx)(N,{prevURL:"/articles/put-on-your-helmet",nextURL:"/articles/a-state-is-born"}),Object(n.jsx)(y,{})]})},fe=i.p+"static/media/state-1.cd68540d.jpg",ve=i.p+"static/media/state-2.aadd0050.jpg",ke=i.p+"static/media/state-3.bf85ae5f.jpg",Ie=new Date("1, 24, 2021").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var Le=function(){var e=["https://live.staticflickr.com/65535/50870085797_f3589da6f2_c.jpg","https://live.staticflickr.com/65535/50870085772_1a85d774a5_c.jpg","https://live.staticflickr.com/65535/50869989791_ef374efee8_c.jpg","https://live.staticflickr.com/65535/50870085732_a06586f412_c.jpg"],t=Object(a.useState)(e[0]),i=Object(re.a)(t,2),c=i[0],s=i[1];return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"A State is Born",desc:"Learning useState() in ReactJS for the first time is like learning how to ride a bike. Next step: Road trip to the ends of the earth and back.",URL:"https://highway-60.web.app/articles/a-state-is-born",imageURL:"/images/a-new-peak.jpg"}),Object(n.jsx)("h1",{id:"top",style:{marginTop:"2em"},children:"A State is Born - Learning useState() in ReactJS"}),Object(n.jsx)(ce,{images:e,selectedImg:c,setSelectedImg:s}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:Ie}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.web.app/articles/a-state-is-born",title:"Highway 60",hashtag:"#highway60",hashtagArray:["coding","writing"],via:"TheHighway60",desc:"Learning useState() in ReactJS for the first time is like learning how to ride a bike. Next step: Road trip to the ends of the earth and back."})}),Object(n.jsxs)("p",{children:["Props and state have been pretty difficult. The first few times I go over them, I just can\u2019t wrap my head around it. Granted, I spent a few months learning to code without actually ",Object(n.jsx)("i",{children:"doing"})," any code. I saw the videos and took lots of notes."]}),Object(n.jsx)("p",{children:"I told a developer at work what I was doing and in a classical developer way said right to my face, without any emotion whatsoever,"}),Object(n.jsx)("p",{children:"\u201cYou are doing nothing.\u201d"}),Object(n.jsxs)("p",{children:["My experience with ",Object(n.jsx)("i",{children:"props"})," and ",Object(n.jsx)("i",{children:"state"})," proves his point. Unless I am actually doing the things I am learning, it is just an intellectual exercise, and a lot of what I should understand I clearly don\u2019t get."]}),Object(n.jsx)("p",{children:"Props came a little bit easier. I have done so many redundant things over the years, creating a template that just needed it\u2019s own unique values was a solution begging to be used."}),Object(n.jsx)("p",{children:"State is a little more complicated."}),Object(n.jsx)("p",{children:"Props is like a little boy running from his room to you in a t-shirt and boxers. Depending on the weather, what he will be doing that day, and what he feels like, you put on the rest of his clothes before he goes to school."}),Object(n.jsx)("p",{children:"setState() is what happens once he gets to school and has to change his shoes and pants for gym class."}),Object(n.jsx)("p",{children:"useState() is what happens when he goes from learning one subject to another and has to replace every book on his desk for each class."}),Object(n.jsx)("p",{children:"Today I started with setState(). After all, it would be pretty embarrassing if I were to attend 5th grade geography in just my boxers, right?"}),Object(n.jsx)("h1",{children:"The Highway 60 Website"}),Object(n.jsxs)("p",{children:[Object(n.jsx)("b",{children:"setState()"})," is a function that performs a shallow merge between the new and the previous state. Set the state to what you want to see ",Object(n.jsx)("i",{children:"after the event that triggers the state change has fired"}),"."]}),Object(n.jsx)("p",{children:"Take a look at the home page of my app:"}),Object(n.jsx)(_,{picURL:fe,alt:"The picture of highway 60 home page pre-useState()"}),Object(n.jsx)("p",{children:"Yes, I know. It needs some serious styling. After I put this state and props to rest, I have a little google analytics and SEO work, then it\u2019s on to CSS and Bootstrap."}),Object(n.jsx)("p",{children:"Then more serious coding, like, ummm, JavaScript."}),Object(n.jsx)("p",{children:"There is no state because I haven\u2019t set it yet."}),Object(n.jsx)("p",{children:"What\u2019s the point of putting all my posts on the home page when there is a menu item called \u201cblog\u201d?"}),Object(n.jsxs)("p",{children:["How about we change the initial state of the home page to an <h1> tag saying ",Object(n.jsx)("u",{children:"Click to see Highway 60 Posts"}),"?"]}),Object(n.jsx)("p",{children:"When the user clicks on the element, the onClick function will mount the <ArticleList />
1 component and you will see the articles."}),Object(n.jsx)("p",{children:"Let\u2019s try."}),Object(n.jsx)("p",{children:"I need the { Component } hook alongside my React when calling \u2018react\u2019"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15px",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nimport React, { Component } from 'react'; \n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Before we touch the component itself, let\u2019s create a style object for the text:"}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15px",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nconst Styles = {\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n fontSize: "3em",\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n fontColor: 'blue'\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n } \n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Inside the JSX text, let\u2019s redo the <h1> title text and insert our style variable object. The <h1> text is still raw, but we will get to that in a minute."}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15px",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n<h1 style={{Styles}}>Click to See Highway 60 Posts</h1> \n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Only after the state changes upon an onClick() event to the <h1> element will we set the setState to <ArticleList />."}),Object(n.jsx)("p",{children:"Let\u2019s code a little bit. Here we are using only setState, so we can go with a Class component."}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15px",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n class Home extends React.Component {\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nconstructor(props){\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n super(props)\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n this.state = {\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\nmessage: "Click here to see the Highway 60 posts",\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\narticles: ""\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n }\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n}\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsxs)("p",{children:[Object(n.jsx)("b",{children:"Remember!!!"})," Since all of the state code and the JSX render code is ",Object(n.jsx)("b",{children:Object(n.jsx)("i",{children:"all in one big class called Home, when you call the method, use this.method to call it!"})})]}),Object(n.jsx)("p",{children:"We set the properties and values for the initialized sate. this.state.message is the <h1> text and this.state.articles is the <div> right under it that starts out empty at \u201c\u201d."}),Object(n.jsx)("p",{children:"Let\u2019s put in these states in the area of our page where all this will happen."}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15px",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n<div onClick={this.ArticleList}>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n<h1 style={{fontSize: "3em", textDecoration: "underline"}}>{this.state.message}</h1> \n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n{this.state.articles}\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n</div>\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"Woa! Where did this.ArticleList come from? Why are the <div> tags wrapped around the <h1> tag?"}),Object(n.jsx)("p",{children:"I wrapped the <div> tags around everything so there would be more space for the user to click to activate the function this.ArticleList."}),Object(n.jsxs)("p",{children:["Inside the <div> tag is an onClick() event handler. It will run this.ArticleList which will ",Object(n.jsx)("b",{children:Object(n.jsx)("i",{children:"change the state of this <div> by removing the <h1> title text and inserting the <ArticleList /> component carrying all of Highway 60\u2019s articles."})})]}),Object(n.jsx)("p",{children:"Yes, once I am done with CSS and Bootstrap, I will have to learn about pagination. In the meantime, here is my onClick() event handler that changes state."}),Object(n.jsxs)("div",{style:{textAlign:"left",marginLeft:"15px",fontSize:"1.25em"},children:[Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\nArticleList = () => {\n"}
1),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n this.setState({\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:'\n message: "",\n'}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n articles: <ArticleList />\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n })\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("code",{children:"\n}\n"}),Object(n.jsx)("br",{}),Object(n.jsx)("br",{})]}),Object(n.jsx)("p",{children:"this.state.message goes empty and this.state.articles becomes the component that has all the articles."}),Object(n.jsx)("p",{children:"To manage issues, I have NPM START running in my CLI terminal below and it says there are no errors so this is working."}),Object(n.jsx)("p",{children:"Here is a peek at the homepage."}),Object(n.jsx)(_,{picURL:ve,alt:"The picture of highway 60 home page with useState()"}),Object(n.jsx)("p",{children:"Just click on the yellow highlight and we will see the next state of the site:"}),Object(n.jsx)(_,{picURL:ke,alt:"The picture of highway 60 home page with useState() and it works!"}),Object(n.jsx)("p",{children:"BUL! (Hebrew for YESH!)"}),Object(n.jsx)("p",{children:"It worked."}),Object(n.jsx)("p",{children:"Since the \u201cHighway 60 Posts:\u201d has a cool animation attached to it, once you click, the animation fires, making a nice effect."}),Object(n.jsx)("p",{children:"It\u2019s good to know that you can change state in two areas, the <h1> tags and the <ArticleList /> component below. The example might be simple, but conceptually it\u2019s good to internalize just how powerful this can be."}),Object(n.jsx)("p",{children:"You can also make multiple setState() functions to handle different events to change the state of any element, property, value you need."}),Object(n.jsx)(N,{prevURL:"/articles/go-with-God",nextURL:"../articles"}),Object(n.jsx)(y,{})]})},Se=i(26),Ae=i(41),He=i.p+"static/media/Ibex.8ad6be90.jpg",Te=new Date("1, 26, 2021").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var Re=function(){var e=Object(a.useState)({firstName:"",lastName:""}),t=Object(re.a)(e,2),i=t[0],c=t[1],s=Object(a.useState)([]),r=Object(re.a)(s,2),o=r[0],l=r[1];return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"By Any Other Name",desc:"Peace with Israel and the Arab states mean our entire region can coalesce into a huge economic powerhouse, even if, like Europe, we all maintain our unique language, culture, cuisine, and religion. But what will we call it?",URL:"https://highway-60.firebaseapp.com/articles/by-any-other-name",imageURL:He}),Object(n.jsx)("h1",{id:"top",style:{marginTop:"2em"},children:"By Any Other Name"}),Object(n.jsx)(_,{picURL:He}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:Te}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/by-any-other-name",title:"By Any Other Name",hashtag:"#highway60",hashtagArray:["writing","Israel"],via:"TheHighway60",desc:"Peace with Israel and the Arab states mean our entire region can coalesce into a huge economic powerhouse, even if, like Europe, we all maintain our unique language, culture, cuisine, and religion. But what will we call it?"})}),Object(n.jsx)("p",{children:'The Times of Israel just published my article about a new name for an old region. The term "The Middle East" comes from the British Colonial office in 1850.'}),Object(n.jsx)("p",{children:"Now that there is peace and economically, we should develop into a regional bloc, we should call ourselves something better than a piece of a World Atlas."}),Object(n.jsxs)("p",{children:["Enjoy. You can view it ",Object(n.jsx)("a",{href:"https://blogs.timesofisrael.com/a-new-name-for-a-new-day/",target:"_blank",children:"right here"}),"."]}),Object(n.jsx)("p",{children:"Form Handling:"}),Object(n.jsx)("p",{children:"This is a class I am taking and I need somewhere to put my form. Here is something that looks pointless, but I did a little state work with forms on it."}),Object(n.jsxs)("form",{children:[Object(n.jsx)("input",{type:"text",value:i.firstName,onChange:function(e){return c(Object(Se.a)(Object(Se.a)({},i),{},{firstName:e.target.value}))}}),Object(n.jsx)("input",{type:"text",value:i.lastName,onChange:function(e){return c(Object(Se.a)(Object(Se.a)({},i),{},{lastName:e.target.value}))}})]}),Object(n.jsxs)("h2",{children:["Your first name is: ",i.firstName]}),Object(n.jsxs)("h2",{children:["Your last name is: ",i.lastName]}),Object(n.jsx)("button",{onClick:function(){l([].concat(Object(Ae.a)(o),[{id:o.length,value:Math.floor(10*Math.random()+1)}]))},children:"Pick a number"}),Object(n.jsx)("ul",{children:o.map((function(e){return Object(n.jsxs)("li",{children:["id: ",e.id," value: ",e.value]},e.id)}))}),Object(n.jsx)("h2",{children:JSON.stringify(o)}),Object(n.jsx)(N,{prevURL:"/articles/a-state-is-born",nextURL:"../articles/amazon-and-al-capone"}),Object(n.jsx)(y,{})]})},Ue=i.p+"static/media/thirties-scene.b7b219a2.jpg",Be=new Date("2, 1, 2021").toLocaleDateString("en-US",{day:"numeric",month:"short",year:"numeric",weekday:"long"});var De=function(){return Object(n.jsxs)(p.b.div,{className:"articleStyle",initial:{opacity:0}
1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.4},children:[Object(n.jsx)(T,{title:"Parler, Amazon, and Al Capone",desc:"Al Capone's booze racket seemed unstoppable in the 1930s. Who would have thought they nailed him with tax evasion? Amazon might be taken down in the same unexpected manner.",URL:"https://highway-60.firebaseapp.com/articles/amazon-and-al-capone",imageURL:Ue}),Object(n.jsx)("h1",{id:"top",style:{marginTop:"2em"},children:"Amazon and Al Capone"}),Object(n.jsx)(_,{picURL:Ue}),Object(n.jsx)(C,{}),Object(n.jsx)("p",{children:Be}),Object(n.jsx)("div",{style:{textAlign:"left",marginTop:"5px",marginBottom:"20px"},children:Object(n.jsx)(A,{url:"https://highway-60.firebaseapp.com/articles/amazon-and-al-capone",title:"Parler, Amazon, and Al Capone",hashtag:"#highway60",hashtagArray:["amazon","freespeech"],via:"TheHighway60",desc:"Al Capone's booze racket seemed unstoppable in the 1930s. Who would have thought they nailed him with tax evasion? Amazon might be taken down in the same unexpected manner."})}),Object(n.jsx)("p",{children:"Israel National News just published my article about a simple way to keep Big Tech from becoming Big Brother."}),Object(n.jsx)("p",{children:"It's a lot of fun if you like Amazon, politics, stocks, DevOps, and dystopia."}),Object(n.jsxs)("p",{children:["Enjoy. You can view it ",Object(n.jsx)("a",{href:"https://www.israelnationalnews.com/News/News.aspx/295932",target:"_blank",children:"right here"}),"."]}),Object(n.jsx)(N,{prevURL:"/articles/by-any-other-name",nextURL:"../articles"}),Object(n.jsx)(y,{})]})},Ce=function(e){Object(l.a)(i,e);var t=Object(h.a)(i);function i(){return Object(r.a)(this,i),t.apply(this,arguments)}return Object(o.a)(i,[{key:"render",value:function(){return Object(n.jsx)("div",{children:Object(n.jsxs)(j.a,{children:[Object(n.jsx)(Oe,{}),Object(n.jsx)(d,{}),Object(n.jsx)(p.a,{children:Object(n.jsx)(b.c,{children:Object(n.jsxs)("div",{className:"App",children:[Object(n.jsx)(b.a,{path:"/",exact:!0,component:se}),Object(n.jsx)(b.a,{path:"/articles",exact:!0,component:E}),Object(n.jsx)(b.a,{path:"/articles-tag-story",exact:!0,component:Q}),Object(n.jsx)(b.a,{path:"/articles-tag-development",exact:!0,component:Z}),Object(n.jsx)(b.a,{path:"/articles-tag-published",exact:!0,component:te}),Object(n.jsx)(b.a,{path:"/articles-tag-life-charge",exact:!0,component:ae}),Object(n.jsx)(b.a,{path:"/about",exact:!0,component:R}),Object(n.jsx)(b.a,{path:"/articles/hello-world",exact:!0,component:G}),Object(n.jsx)(b.a,{path:"/articles/a-big-decision",exact:!0,component:he}),Object(n.jsx)(b.a,{path:"/articles/put-on-your-helmet",exact:!0,component:be}),Object(n.jsx)(b.a,{path:"/articles/the-dating-game",exact:!0,component:xe}),Object(n.jsx)(b.a,{path:"/articles/go-with-God",exact:!0,component:we}),Object(n.jsx)(b.a,{path:"/articles/a-state-is-born",exact:!0,component:Le}),Object(n.jsx)(b.a,{path:"/articles/by-any-other-name",exact:!0,component:Re}),Object(n.jsx)(b.a,{path:"/articles/amazon-and-al-capone",exact:!0,component:De})]})})})]})})}}]),i}(c.a.Component),ze=function(e){Object(l.a)(i,e);var t=Object(h.a)(i);function i(){return Object(r.a)(this,i),t.apply(this,arguments)}return Object(o.a)(i,[{key:"render",value:function(){return Object(n.jsx)("div",{children:Object(n.jsx)(Ce,{})})}}]),i}(c.a.Component),Ne=function(e){e&&e instanceof Function&&i.e(3).then(i.bind(null,64)).then((function(t){var i=t.getCLS,n=t.getFID,a=t.getFCP,c=t.getLCP,s=t.getTTFB;i(e),n(e),a(e),c(e),s(e)}))};Object(s.render)(Object(n.jsx)(j.a,{children:Object(n.jsx)(ze,{})}),document.getElementById("root")),Ne()},8:function(e,t,i){}},[[55,1,2]]]); 2//# sourceMappingURL=main.ae6141d7.chunk.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.