Dave Ceddia

<!doctype html>     <html lang="en"> <head> <meta charset="utf-8"> <title>Dave Ceddia</title> <meta name="description" content="Articles to help you learn and master frontend development with React."> <meta name="keywords" content="react, redux, javascript, frontend, learn react, learn redux">  <meta name="twitter:title" content="Dave Ceddia"> <meta name="twitter:description" content="Articles to help you learn and master frontend development with React."> <meta name="twitter:site" content="@dceddia"> <meta name="twitter:creator" content="@dceddia">  <meta property="og:locale" content="en_US"> <meta property="og:type" content="article"> <meta property="og:title" content="Dave Ceddia"> <meta property="og:description" content="Articles to help you learn and master frontend development with React."> <meta property="og:url" content="https://daveceddia.com/"> <meta property="og:site_name" content="Dave Ceddia"> <link rel="canonical" href="https://daveceddia.com/"> <link href="https://daveceddia.com/feed.xml" type="application/atom+xml" rel="alternate" title="Dave Ceddia Feed">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta property="fb:admins" content="50205984" /> <meta property="dc:page_id" content="home">  <link rel="stylesheet" type="text/css" href="https://daveceddia.com/assets/css/site.min.css?v=5">   <meta http-equiv="cleartype" content="on">     <link rel="shortcut icon" href="https://daveceddia.com/favicon.ico?v=2">  <link rel="shortcut icon" href="https://daveceddia.com/favicon.png?v=2">  <link rel="apple-touch-icon-precomposed" href="https://daveceddia.com/images/apple-touch-icon-precomposed.png">  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://daveceddia.com/images/apple-touch-icon-72x72-precomposed.png">  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://daveceddia.com/images/apple-touch-icon-114x114-precomposed.png">  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://daveceddia.com/images/apple-touch-icon-144x144-precomposed.png"> <script async defer data-domain="daveceddia.com" src="/scripts.js"></script> <link href="https://github.com/dceddia" rel="me"> </head> <body id="page"> <nav role="navigation" id="site-nav"> <header> <a href="https://daveceddia.com/" class="site-logo" rel="home" title="Dave Ceddia"> <img src="https://daveceddia.com/images/logo.png" srcset="https://daveceddia.com/images/logo@2x.png 2x" alt="Dave Ceddia logo"/> </a> <h2 class="site-title"><a href="https://daveceddia.com/">Dave Ceddia</a></h1> <h3 class="site-description" itemprop="description">Articles to help you learn and master frontend development with React.</h2> </header> <ul> <li> <a href="https://daveceddia.com/archives/" >All Posts</a> </li> <li> <a href="https://daveceddia.com/about/" >About</a> </li> </ul> </nav> <div id="home" role="main"> <style> #home .welcome { font-size: 3rem; max-width: 700px; margin: 0 auto; font-weight: normal; color: #555; margin-bottom: 1em; } .book-cover { width: 170px; } .products { display: flex; max-width: 600px; flex-wrap: wrap; margin: 0 auto; align-items: flex-end; font-size: 16px; font-family: "Source Sans Pro", Helvetica, sans-serif; } .product-link { border: 0; flex: 1; color: #333; min-width: 215px; transition: 0.1s all; position: relative; } .product-link:hover { transform: scale(1.05); color: #111; } .product-link:hover .halo { opacity: 1; } .product-link img { margin-bottom: 5px; } .product-link:last-child { margin-top: 28px; } .halo { width: 140px; height: 160px; border-radius: 50%; box-shadow: 1px 1px 90px #5e9cd6; position: absolute; top: 32px; left: 50%; z-index: -1; opacity: 0; transition: 0.5s all; transform: translateX(-50%); } .halo.redux { top: 16px; height: 140px; box-shadow: 1px 1px 90px #6e34dc; transition: 0.3s all; } .lup { display: inline-block; animation: levelup 3s ease-in 2s 1 forwards; } .lup-fixed { position: absolute; left: 0; opacity: 1; } .lup-wrap { display: inline-block; position: relative; } @keyframes levelup { 0% { transform: translateY(0px); opacity: 1; } 70% { opacity: 0; } 100% { transform: translateY(-100%); opacity: 0; } } </style> <div style="max-width: 600px; margin: 0 auto; text-align: left;"> <p>From 2015 through 2020 I was writing regularly on React and web development topics here.</p> <p>In 2021 I built a video editor called <a href="https://getrecut.com">Recut</a>, and my focus began to shift. As I used React less in my day-to-day, my writing slowed to a halt. After spending a lot of time writing words, I realized I missed writing <em>real code</em>.</p> <p>You can still find all my old articles in the <a href="/archives">archives</a>.</p> <p>There's some good evergreen stuff in there too, like the <a href="/javascript-references/">Visual Guide to JS References</a> and <a href="/linked-lists-javascript/">Linked Lists for JS devs</a>. I'm still proud of those little animations.</p> <p>And hey, the future is hard to predict! Maybe I'll return to writing here, about React or whatever it happens to be.</p> <p>For now though, feel free to follow me on X/Twitter <a href="https://twitter.com/dceddia">@dceddia</a> and I'll see you around the internet!</p> </div> </div> <div class="footer-wrapper muted-centered"> <footer role="contentinfo"> <span>© 2024 Dave Ceddia.</span> </footer> </div> <script type="text/javascript"> window.BASE_URL = 'https://daveceddia.com'; </script> <script type="text/javascript"> var loadGA; var loadCommento; function loadJS() { var element = document.createElement("script"); element.src = "https://daveceddia.com/assets/js/scripts.min.js"; document.body.appendChild(element); if(loadGA) loadGA(); if(loadCommento) loadCommento(); } if (window.addEventListener) { window.addEventListener("load", loadJS, false); } else if (window.attachEvent) { window.attachEvent("onload", loadJS); } else { window.onload = loadJS; } </script> </body> </html>

CINXE.COM

Dave Ceddia