The latest articles on DEV Community by Melanie Phillips (@melaniephillips). https://dev.to/melaniephillips https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F205259%2F57532a21-9fb5-4f88-927f-9b496494e3ce.jpg https://dev.to/melaniephillips en Melanie Phillips Sat, 20 Feb 2021 00:47:49 +0000 https://dev.to/melaniephillips/what-s-the-difference-between-a-coupled-decoupled-and-headless-cms-g7a https://dev.to/melaniephillips/what-s-the-difference-between-a-coupled-decoupled-and-headless-cms-g7a <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iXspEgDH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkz22jhk3iphga3f0r3e.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iXspEgDH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkz22jhk3iphga3f0r3e.jpg" alt="Alt" width="600" height="400"></a></p> <p>I was listening to a conference talk recently that started using the term 'decoupled' CMS. I'd only ever heard of traditional and headless, so I did some curiosity research.</p> <p>As usual, this article will serve future me if I forget what the difference is but hopefully it will also help anyone with the same question.</p> <h2> What is a traditional CMS? </h2> <p>A traditional CMS is one where the front-end (presentation) and back-end (database) are stored in the same place and are heavily dependant on each other. An example would be a traditional WordPress site.</p> <h2> What is a decoupled CMS? </h2> <p>It turns out what I thought was a headless CMS is actually a decoupled CMS. A decoupled CMS is when, for example, you have a site where the front-end and back-end are housed separately. The front end uses API calls to get the database information from the back-end and then displays it. </p> <h2> What is a headless CMS? </h2> <p>A headless CMS is a type of decoupled CMS. The main difference is that a decoupled CMS typically has a front-end and a back-end, where a headless CMS is a content-only database with an API that can be called. It should be designed in a way that the content from the database can be ingested and displayed by a variety of methods/technologies (to a website, to an app, etc.) through API calls. </p> <h2> Which one to choose for a project? </h2> <p>For basic sites and blogs, there is nothing wrong with a traditional CMS system. The major downside is that your project is tied to a specific technology and isn't as future-proof as a decoupled CMS could be. Out of the box, a traditional CMS is less work if you know what you're doing, but more work if you have to make major front-end changes in the future. </p> <p>For more complicated sites that need longevity, a decoupled CMS is a good way to go. While it may be more work at the beginning, it's more flexible and easier to adapt in the long-term. This is also a better option if you or your team like to experiment with different technologies.</p> <p>For projects that require information to be ingested by multiple presentation methods, a headless CMS is probably the best route to take. If a website is part of the project, then that can be built and pulled via the API but so can all the other delivery methods your project may require.</p> <p>Photo credit: <span>Photo by <a href="https://unsplash.com/@devano23?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Devon Janse van Rensburg</a> on <a href="https://unsplash.com/s/photos/devices?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span></p> beginners webdev wordpress javascript Melanie Phillips Tue, 18 Aug 2020 11:06:54 +0000 https://dev.to/melaniephillips/tell-me-about-your-personal-dev-site-596c https://dev.to/melaniephillips/tell-me-about-your-personal-dev-site-596c <p>I'm looking to re-work my personal dev site to include a blog. Wondering what stack you're using for yours? </p> <p>At the moment, I'm considering the following options (but am open to others):</p> <ul> <li>Gatsby</li> <li>React</li> <li>Vue</li> <li>Headless CMS</li> </ul> <p>Send me all the advice/opinions/tips you have, please. :)</p> discuss writing webdev Melanie Phillips Sun, 02 Aug 2020 18:48:35 +0000 https://dev.to/melaniephillips/how-to-test-an-invisible-v2-google-recaptcha-by-mimicking-a-bot-in-2020-53hc https://dev.to/melaniephillips/how-to-test-an-invisible-v2-google-recaptcha-by-mimicking-a-bot-in-2020-53hc <p>After implementing an invisible v2 Google reCAPTCHA (the annoying box on a form that asks you to prove your humanity) on a client site, I realized I had no idea how to test it. Like other developers encountering the unfamiliar, I Googled it. </p> <p>I learned that once you've implemented the v2 reCAPTCHA and set it as invisible (the least annoying option), you can use Chrome DevTools to mimic a bot as a device. This is similar to how you would do responsive testing for specific phone/tablet models.</p> <p>Here's how to do it:</p> <ol> <li>Navigate to the form page with the reCAPTCHA and open Chrome DevTools by right-clicking the page and hitting 'inspect' or by typing CMD + OPT + I (Mac).</li> <li>Go to the DevTools Settings (the gears icon close to the top right corner).</li> <li>In the left sidebar, choose Devices.</li> <li>Click the button at the top to 'Add custom device'.</li> <li>You can call the device whatever you want, but it might be helpful for future you to name it something relevant. I called mine 'Bot'.</li> <li>Device size and type don't matter. I left mine at the defaults of 400x700 and 'Mobile'.</li> <li>The user-agent string must be set to 'Googlebot/2.1'. Click 'Add'.</li> <li>Close settings, but stay in DevTools. Select the 'toggle device toolbar' (the responsive icon at the top left of DevTools). In the dropdown, you should see your new device name (ex. Bot). Select it.</li> <li>Complete and submit your form. As long as your 'Bot' device is selected in DevTools, the reCAPTCHA image test will activate.</li> </ol> <p>Good luck!</p> testing devtools webdev