Duncan McClean's Blog http://duncan.mcclean.co.uk I'm a web developer with a love of Laravel, Statamic, Vue and Tailwind CSS. http://duncan.mcclean.co.uk//articles/setting-up-laravel-forge-hosting-for-a-statamic-site/index.html Setting up Laravel Forge for a Statamic site http://duncan.mcclean.co.uk//articles/setting-up-laravel-forge-hosting-for-a-statamic-site/index.html <p>If you're trying to setup hosting for <a href="https://statamic.com">Statamic</a>, the recommended solution is to use a combination of <a href="https://forge.laravel.com">Laravel Forge</a> and <a href="https://digitalocean.com">Digital Ocean</a> to provision your server &amp; deploy your code. This is the setup I use but I've become aware that not all people know how to get going with Forge, Digital Ocean and Statamic, so I thought I would write a little something to lighten the learning curve.</p><p>First things first, let me set out a few things:</p><ul><li>Laravel Forge is the tool you'll use to provision the server (install all the things) and to deploy your code.</li><li>Digital Ocean is the hosting provider, they actually provide the server for your site.</li></ul><p>Now that we know what each of the things are, let's get started with the setup process.</p><h2 id="digital-ocean-setup">Digital Ocean Setup</h2><p>First thing is to setup your Digital Ocean account. All you need to do is create an account, fill in your bank information and that's that (for now)!</p><h2 id="setting-up-your-forge-account">Setting up your Forge account</h2><p>You'll also need a Forge account, which you can sign up for on forge.laravel.com. After you've entered all your details, you will be prompted to connect with Github and to connect with your server provider which is Digital Ocean in our case.</p><p>Forge will ask for a Digital Ocean token. You can find this by logging into your Digital Ocean account, going to the API section and creating a token with Read &amp; Write access. Copy the token it gives you into Forge and hey-presto!</p><p>You will now be on the servers screen where you'll be able to create your first server. It'll give you some options towards how you want the server to be setup and configured.</p><p><strong>A wee word for you: unless you're going to be serving loads of users and loads of storage then you don't really need to go any higher than the minimum $5 Digital Ocean droplet. If you ever decide you do need to go higher, it's not a big deal, you can resize your droplet from within Digital Ocean.</strong></p><p>Once you've got all the things setup, Forge will create your server in your Digital Ocean account. It'll usually take anywhere from 5 to 10 minutes for Forge to provision a new server, so you might want to find a good YouTube video to watch in that time.</p><h2 id="your-first-forge-site">Your first Forge site</h2><p>When the server is ready - you'll be able to click on the name of the server, and you'll get the option to create your first site.</p><p>You can obviously fill the domain with whatever you want, and the alias as well if you need one. For a Statamic site, I'd normally just leave it as the 'General PHP / Laravel` type. You'll also want to change the web directory from <code>/public</code> to <code>/</code> (that is if you're using the default Statamic directory structure).</p><p>Then you'll be asked if you want to setup the site from a Git repo or as a fresh WordPress site, I'm guessing you're using Statamic for a reason so pick Git repo 😆. And you'll need to enter the repo author followed by the repo name, so it would be formatted like this: <code>damcclean/awesome-statamic.com</code>. </p><p>You will be given the option if you want to install Composer dependencies at deployment, you can just untick that box.</p><p>Then Forge will do some quick stuff to create your site, like Nginx configs and a bunch of other stuff I don't need to understand.</p><p>And after that your site should be created. </p><p>There is one more thing I'd generally do: make some changes to the default deploy script. This is what one of mine usually looks like:</p><!--kg-card-begin: code--><pre><code class="language-bash">cd /home/forge/awesomes-statamic.com git pull origin master echo "" | sudo -S service php7.3-fpm reload php please clear:cache php please clear:stache php please clear:static</code></pre><!--kg-card-end: code--><h2 id="pointing-your-domain-to-forge">Pointing your domain to Forge</h2><p>This will be different depending on who your domain is purchased through and where your DNS is managed from (could be the same place). I can't really help with this part, but I can say you'll need the IP address to do anything. </p><p>You can find your IP address to the right beside your domain name on your Site page on Forge.</p><p>I'm guessing that if you're reading this, you know how DNS works and how you point a domain to an IP address so I'm not going to cover that.</p><h2 id="getting-into-your-server">Getting into your server</h2><p>There may be times when you need to remote into your server to look at log files or access some system configuration. </p><p>Unlike some other VPSs, you can't just put in a username and password to SSH into your server. You need a username and an SSH key.</p><p>If you haven't already created an SSH key for yourself, you can do it by running these commands (if you're on Windows, look up how you do it because I don't know)</p><!--kg-card-begin: code--><pre><code class="language-bash">ssh-keychain -t rsa pbcopy &lt; ~/.ssh/id_rsa.pub</code></pre><!--kg-card-end: code--><p>The first command there will create your key, the second will copy the contents of the public version of that key to your clipboard.</p><p>Now you can visit your user settings in Forge, go to the SSH Keys tab and copy in the contents of your key.</p><p>After it's on your account, click on the 'Add to Servers' button next to the key and check the servers where you want your key to be installed.</p><p>Now when you want to SSH into your server, you can simply do this (please replace with your servers IP):</p><!--kg-card-begin: code--><pre><code class="language-bash">ssh forge@127.0.0.1</code></pre><!--kg-card-end: code--><p>Then you'll have control of your server.</p><h2 id="a-few-quick-things">A few quick things</h2><ul><li>If you want your site to be auto-deployed when you push to your Git repo, you need to enable Quick Deploy on the Site page in Forge.</li><li>If you want to keep every change you make to your site from the Control Panel in your Git repo, I recommend installing + configuring <a href="https://statamic.com/marketplace/addons/spock">Spock</a>, which is an official addon by the gents at Statamic. Ben Fufie has a tutorial <a href="https://www.youtube.com/watch?v=H5xvl7m7tm4">on that here</a>.</li><li>I would recommend that you should have SSL installed on your site, to do that, go to the SSL tab on the left-hand side Forge menu, click on Lets Encrypt and then click 'Obtain Certificate;. A fresh certificate will then be created and installed for you.</li></ul>... http://duncan.mcclean.co.uk//articles/finding-an-idea-can-be-hard/index.html Finding an idea can be hard... http://duncan.mcclean.co.uk//articles/finding-an-idea-can-be-hard/index.html <p>I'm getting to that point with ReadCast where it's starting to be pretty stable and the features are pretty much what I wanted them to be when I initially started.</p><p>This is leading me to think about starting another side project. The only thing is: I want to do it for real this time.</p><p>Before I put my time and effort into creating a project, I want to know for sure that it's something developers (my chosen audience) will use. Rather than spending lots of time on a product only to launch it and find out no one ever needed it and that I had wasted my time.</p><p>I've actually tried to keep a list in Todoist every time I came up with a possible business idea, these are a few of the things I came up with.</p><ul><li>App that provides consistency for open-source repositories created by an organisation - keeping <code>README.md</code>'s, <code>.gitignore</code> etc the same style and in sync</li><li>App that PRs all the time to make sure you are following JavaScript, PHP, CSS best practises.</li><li>Clean live chats for small and medium Saas companies</li><li>Single app for messaging with others</li></ul><p>I tried making a few of them and a few of them I just decided would just be too complicated or is just not technically possible (the last one).</p><p>I think what I'm going to do over the next few days is study a few different developers I know and find their pain points of doing everyday work and see if there's a common issue in there that could be solved by a software product.</p><p>If I remember correctly, that's what Justin Jackson said to do in one of his Laracon talks.</p>... http://duncan.mcclean.co.uk//articles/getting-started-with-testing-laravel-apps/index.html Getting Started with testing Laravel Apps http://duncan.mcclean.co.uk//articles/getting-started-with-testing-laravel-apps/index.html <p>Recently I've started to write tests in my Laravel applications. Tests are useful because they allow you to make sure important parts of your application are working, things like registration or subscriptions. Things that could be easily missed and could cause uproar if they broke.</p><p>When I started building ReadCast, about a month ago I created it as a prototype and missed out on writing tests. Now that the application is stable and has a few users, I think it's about time to write some tests.</p><p>In a standard Laravel install, PHPUnit is already installed for you and so are a few example tests.</p><p>In this tutorial I'm going to go through:</p><ul><li>Setting up your tests</li><li>Creating database seeds</li><li>Writing tests</li></ul><h1 id="setting-up-your-tests">Setting up your tests</h1><p>In Laravel, your tests belong inside the <code>tests</code> directory. In there you have two directories. One for your feature tests and one for your unit tests. I should probably know the difference between this but I don't, so go elsewhere if you want to know the meaning.</p><p>Most applications will talk to a database when doing anything. When testing, there are two types of databases that people will likely use. They will either use a SQLite database or a MySQL database.</p><p>If you don't know, a SQLite database is pretty much a lightweight SQL database that's stored in a single file.</p><p>I tend to create a separate MySQL database for running my tests. Why? Because last time I tried to use SQLite I managed to break some dependency that every programming language needed which meant I had to rebuild my Mac, not a fun time. However, feel free to use whatever you like best.</p><p>If you like using MySQL like me, this is how I tend to configure it.</p><p>First, I create my testing database, usually called something like <code>app_testing</code>.</p><p>The next thing I do is go to my <code>database.php</code> configuration file and setup a new <code>testing</code> database connection. It looks like this:</p><!--kg-card-begin: html--><script src="https://gist.github.com/a9e2a72ad497686e9af4e58ec24b8191.js"></script><!--kg-card-end: html--><p>The values rely on some environment variables so you'll need to add these env variables to your <code>.env</code> and <code>.env.example</code> files.</p><!--kg-card-begin: html--><script src="https://gist.github.com/9d9470f11a72049d68d84de6d07a79f0.js"></script><!--kg-card-end: html--><p>Now there's one more thing you need to do before being fully setup. You'll need to specific the type of database you wish to use when testing. We can do this in PHPUnit's configuration file, <code>phpunit.xml</code>.</p><p>In the bottom <code>&lt;php&gt;</code> part, make it look like below, where we add the <code>DB_CONNECTION</code> rule and specify the <code>testing</code> database connection we just created.</p><!--kg-card-begin: html--><script src="https://gist.github.com/a1bb6424e5fcd0bef425845e35ec3166.js"></script><!--kg-card-end: html--><p>That should be us done with the setup.</p><h1 id="setting-up-factories">Setting up factories</h1><p>Factories allow you to you to generate database records. Laravel comes with a package called Faker which makes it easy to create factories with fake information. Things like names, emails, passwords, that sort of thing.</p><p>You can find your factories in the <code>database/factories</code> directory. If you need to create your own factory, you can do so with a simple artisan command: <code>php artisan make:factory ArticleFactory</code></p><p>Laravel comes with a User Factory, so we'll just use that one. The user factory looks like this:</p><!--kg-card-begin: html--><script src="https://gist.github.com/39acfc0776a6e6ea4360b1023eeab896.js"></script><!--kg-card-end: html--><p>The information in the sample user factory is fine for me but you might want to change it, depending on what fields you have in models.</p><h1 id="writing-tests">Writing tests</h1><p>Laravel gives you a pretty basic test which visits a page and the test passes if the status of the page request is 200 (that means its OK).</p><!--kg-card-begin: html--><script src="https://gist.github.com/3d71a4cf2f75def27f56e2e5874d58a9.js"></script><!--kg-card-end: html--><p>Now that we know what tests look like, let's delete the example test and create our own. To create our example test, run this command:</p><!--kg-card-begin: code--><pre><code>php artisan make:test LoginTest</code></pre><!--kg-card-end: code--><p>In the test I'm going to write, I'm going to create a user, login to my application, submit my email and password then the test will pass if we get status code 200.</p><p>Just a heads up, when writing test, make sure to start the method with <code>test</code> so PHPUnit knows which methods are actually tests.</p><p>In our test, we need to specify that we want to use the <code>RefreshDatabase</code> trait. This will allow us to have a clean database for every test meaning results won't be messed up with those from other tests, You can add trait like this:</p><!--kg-card-begin: html--><script src="https://gist.github.com/82dd2c03629b3e71661e0255665ca929.js"></script><!--kg-card-end: html--><p>Now let's write the test. The first thing I said we would do in the test would be to create the user we want to login. We can use Factories to do this. In the code sample below, we're creating a user and storing it's information in the <code>user</code> variable.</p><!--kg-card-begin: code--><pre><code>$user = factory(\App\User::class)-&gt;create();</code></pre><!--kg-card-end: code--><p>Now we have created the user, we need to send a POST request to my login endpoint with my email and password.</p><p>The below code will find the input with the name of <code>email</code> and will fill it with the email of the user we created and will find the input with the name <code>password</code>and will fill it with the password of the user (by default, Laravel's user factory password is 'secret'). It will then find the button with the text that says 'Login' which submits the form. Then it checks to make sure we're redirected successfully to the <code>/articles</code> url.</p><!--kg-card-begin: html--><script src="https://gist.github.com/59cd9be4b9ea5423704f24002da87adc.js"></script><!--kg-card-end: html--><p>You should now have something that looks a little like this:</p><!--kg-card-begin: html--><script src="https://gist.github.com/7722e6434a61c1cb4ecaffd09dc1e435.js"></script><!--kg-card-end: html--><p>If you've done everything correctly, you should be able to run your tests and see them all pass.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://damcclean-ghost.herokuapp.com/content/images/2019/07/happy-times.png" class="kg-image"></figure><!--kg-card-end: image--><p>And that's it, we've got Laravel setup and we've written tests to make sure logins to our application are working.</p>... http://duncan.mcclean.co.uk//articles/update-customer-laravel-cashier-stripe/index.html Update Customer in Stripe using Laravel Cashier http://duncan.mcclean.co.uk//articles/update-customer-laravel-cashier-stripe/index.html <p>I've just had the situation where I needed to setup my Laravel app to update my customer's information in Stripe when they change it in my app.</p><p>The method I used to do this is actually undocumented on the official Laravel Cashier documentation, I found it while I was looking through the Cashier code.</p><p>In my Settings controller I used the following code to update the customer's name and email when they resubmit the settings form.</p><!--kg-card-begin: code--><pre><code>$stripeData = array( 'name' =&gt; $user-&gt;first_name . ' ' . $user-&gt;last_name, 'email' =&gt; $user-&gt;email ); $user-&gt;updateStripeCustomer($stripeData);</code></pre><!--kg-card-end: code--><p>That code should work as long as the User model has the <code>Billable</code> trait.</p>... http://duncan.mcclean.co.uk//articles/bin-web-scraper/index.html How I built a Web Scraper to create a Bin Collection API http://duncan.mcclean.co.uk//articles/bin-web-scraper/index.html <p>A few months back I wrote some code that would go to my local council's website, search for a street name, open the link, get the bins for that week. When I got it working I was amazed at how easy it was. I was able to just take out content from another site and present it however I wanted.</p><p>I wrote this project with the end goal of turning it into Voice skills for Alexa and Google Assistant, which I will do, just in a few weeks when I have some spare time.</p><!--kg-card-begin: image--><figure class="kg-card kg-image-card"><img src="https://damcclean-ghost.herokuapp.com/content/images/2019/07/bin-scraper.png" class="kg-image"></figure><!--kg-card-end: image--><p>Above is the PHP function I wrote to serve the API request. I'm just going to walk you through the code.</p><p>So the first thing it does is sets up three arrays, the <code>binArray</code>, the <code>timeArray</code> and the <code>locationArray</code>. These will be used later to store data we capture during our scraping.</p><p>The next two variables hold the two URL parameters required for the request. So the API request URL would look like this. <code>https://bin-collections.herokuapp.com/api/bin?street=Calderwood%20Road&amp;area=camglen</code></p><p>We then get have four if statements. Each of the if statements check if the <code>$area</code> parameter equals to one of the areas. It then sets the base URL for the search results on the local council's website.</p><p>The next thing we do is to setup Goutte, which is a PHP web scraper library. I used a Laravel wrapper for Goutte in this project. We send Goutte to the base URL, the one we set in the last bit.</p><p>On the page we then go ahead and find the result links and we click on the first one we find and we grab the URL from that and store that in the <code>$link</code>variable.</p><p>Now we go to the street page we found in the search results.</p><p>The next part of the code, we find parts in the web page and take out the text of it and we store it in the arrays we created a minute ago.</p><p>So for example, we store the location in the <code>locationArray</code> and so on.</p><p>Then we go ahead and send a JSON response with the content of each of the arrays.</p><p>On the frontend of my bin collection site, I'm using a Vue component that makes HTTP requests to the API I built.</p><p>I'm pretty proud of the whole thing. It could probably be simplified quite a bit but at least it works.</p>... http://duncan.mcclean.co.uk//articles/vuex-authentication/index.html Using Vuex to store authentication in Local Storage http://duncan.mcclean.co.uk//articles/vuex-authentication/index.html <p>I'm currently Rebuilding <a href="https://bibliospot.com/"><strong>BiblioSpot</strong></a> as a standalone Vue app which fetches data from our private API. At the start of the project, I was wondering, how I should go about handling Authentication? I tried out a few different solutions but this one seems to work, so I'm going to go along with it.</p><p>The first thing I did was obviously create a new Vue app so I did <code>vue create app-name</code>. I chose Vue router, Vuex and some other stuff that was there that looked like a good option. I also installed Axios for the HTTP request stuff. Yes I know Vue has their own package for this and there is a similar function built into Javascript, but who cares.</p><p>Now, the first thing that we should do is to write code to allow the user to actually login. I'm using Laravel Passport for API auth and it gives us the <code>/oauth/token</code> route which we can send a payload to and it will give us our access token. A simple bit of code like this should do the jiffy.</p><!--kg-card-begin: html--><script src="https://gist.github.com/31b08670959d877080fa0d5e408a940c.js"></script><!--kg-card-end: html--><p>Once you've got your HTTP requests to work, you can create your Vuex store. This is a simplified version of my <code>store.js</code> file.</p><!--kg-card-begin: html--><script src="https://gist.github.com/7afaab35ab9341cb481e182f7147768a.js"></script><!--kg-card-end: html--><p>Basically what I've done in my Vuex store is set it up so that you can change and view the bearer/access token.</p><p>Now that we've got this in place, when you login your token should be set in your Vuex store and you should be directed to <code>/</code>. (you can change this route in the success part of the Axios request in the <code>Login.vue</code> component)</p><p>However, if you refresh the page, your bearer token is no longer in the Vuex store. This is where local storage comes in. It can store data that can be used even if you close the browser entirely.</p><p>The way I stored my state in local storage was by using the vuex-persistedstate npm package. You just need to install it and import it into your store, like so.</p><!--kg-card-begin: html--><script src="https://gist.github.com/41c61ae1ca444fa6c73ad98f0c0aad54.js"></script><!--kg-card-end: html--><p>Now you should be able to login and refresh your page and your bearer token will still be in your store.</p><p>Now you've pretty much got everything working. However, if you need to check within views/components of your application if the user is logged in or out for that matter I've devised a little component that you can use that will detect such things and will redirect the user to the login page. (If you need to check that the user is logged out you can place the redirect at the other side of the if statement)</p><!--kg-card-begin: html--><script src="https://gist.github.com/8ee863c16828e507cba2d2bf6d4f3938.js"></script><!--kg-card-end: html--><p>That's us done!</p>... http://duncan.mcclean.co.uk//articles/favourite-podcasts-videos-web-developers/index.html My Favourite Podcasts, Video tutorials, Newsletters and Blogs for Web Developers http://duncan.mcclean.co.uk//articles/favourite-podcasts-videos-web-developers/index.html <!--kg-card-begin: markdown--><p><img src="https://damcclean-blog.s3.amazonaws.com/css-code.jpeg" alt="https://damcclean-blog.s3.amazonaws.com/css-code.jpeg"></p> <!--kg-card-end: markdown--><p>You can often find me reading web development articles or listening to podcasts. I’ve collected some of my personal favourites resources that I think might be useful for other web developers, like myself.</p><!--kg-card-begin: markdown--><h1 id="podcasts">Podcasts</h1> <li><a href="https://blog.codepen.io/Radio/" rel="nofollow noopener" target="_blank">CodePen Radio</a> — The CodePen Team run a weekly podcast where they chat about all things running a web business.</li> <li><a href="http://www.fullstackradio.com/" rel="nofollow noopener" target="_blank">Full Stack Radio</a> — Full Stack Radio is run by Adam Wathan, a well-respected figure in the Laravel community. He talks to others about product design, user experience, unit testing and more.</li> <li><a href="https://shoptalkshow.com/" rel="nofollow noopener" target="_blank">ShopTalk</a> — Chris Coyier and Dave Rupert run Shop Talk show.</li> <li><a href="https://syntax.fm/" rel="nofollow noopener" target="_blank">SyntaxFM</a> — Wes Bos and Scott Tolinski record two episodes of Syntax a week. One episode is around 15 minutes long and they talk about a specific topic. And the other episode is longer, around an hour and talks about multiple topics.</li> <li><a href="http://www.laravelpodcast.com/" rel="nofollow noopener" target="_blank">Laravel Podcast</a> — This podcast talks about news and in the Laravel community and they often interview people in the Laravel community.</li> <li><a href="http://www.dadsindev.com/" rel="nofollow noopener" target="_blank">Dads in Development </a>— The Dads in Dev podcast talks about being dads and being geeks. It’s hosted by David Hemphill and Andrew Del Prete.</li> <li><a href="https://www.northmeetssouth.audio/" rel="nofollow noopener" target="_blank">North Meets South Web Podcast</a> — This podcast is hosted by Michael Dyrynda and Jacob Bennett. Michael and Jacob talk about life as web developers while battling a 14 hour time difference.</li> <h1 id="videotutorials">Video Tutorials</h1> <li><a href="https://codecourse.com/" rel="nofollow noopener" target="_blank">Codecourse </a>— I first learned about Laravel through some videos on Codecourse. The videos are very well planned and are simple. Codecourse also provides various other subjects which you can learn about like Nodejs and Socket.io.</li> <li><a href="https://laracasts.com/" rel="nofollow noopener" target="_blank">Laracasts </a>— Laracasts is a great website with lots of tutorials on Laravel and Vue. I would recommend it to anyone getting started with Laravel. “It’s like Netflix for your career”</li> <li><a href="https://vueschool.io/" rel="nofollow noopener" target="_blank">Vue School</a> — If you’re looking to dig into Vue, then Vue School is for you. There are new videos being added every week. The website is run by Alex Kyriakidis (who is also a member of the Vue Core Team) and Rolf Haug.</li> <h1 id="newsletters">Newsletters</h1> <li><a href="https://codepen.io/spark/" rel="nofollow noopener" target="_blank">CodePen Spark</a> — CodePen produces a weekly newsletter with links to various things in the front-end web development world.</li> <li><a href="https://justinjackson.ca/" rel="nofollow noopener" target="_blank">Justin Jackson</a> — Justin sends out frequent emails with startup advice, lessons and tips for growing your business. I find that it’s one of the only emails that I actually read.</li> <li><a href="https://premium.wpmudev.org/blog/get-the-whip/" rel="nofollow noopener" target="_blank">WPMUDev WHIP</a> — The WHIP newsletter has links to news articles across the WordPress community.</li> <li><a href="https://murze.be/newsletter" rel="nofollow noopener" target="_blank">Freek’s newsletter </a>— Freek Van der Herten, who is very well known in the Laravel community, sends out an email every two weeks with interesting links for modern PHP Developers</li> <h1 id="blogs">Blogs</h1> <li><a href="https://laravel-news.com/" rel="nofollow noopener" target="_blank">Laravel News</a> — Laravel News is a Laravel focused blog sharing tools and packages to help you with your Laravel apps.</li> <li><a href="https://mattstauffer.com/blog/" rel="nofollow noopener" target="_blank">Matt Stauffer</a> — Matt Stauffer who works for Tighten blogs every so often on Laravel related topics.</li> <li><a href="https://www.smashingmagazine.com/articles/" rel="nofollow noopener" target="_blank">Smashing Magazine</a> — an Overall great blog for front-end web developers.</li> <li><a href="https://css-tricks.com/" rel="nofollow noopener" target="_blank">CSS Tricks</a> — Everyone knows what CSS Tricks is</li> <li><a href="http://www.bbc.co.uk/blogs/internet" rel="nofollow noopener" target="_blank">BBC Internet Blog</a> — The BBC run a blog on what goes on behind the scenes of BBC Online. The&nbsp;<a href="https://www.bbc.co.uk/gel/" rel="nofollow noopener" target="_blank">BBC Gel site</a>&nbsp;is also a good read.</li><!--kg-card-end: markdown-->... http://duncan.mcclean.co.uk//articles/dream-web-dev-stack/index.html The Dream Web Development Stack: Statamic, Laravel, TailwindCSS and VueJS http://duncan.mcclean.co.uk//articles/dream-web-dev-stack/index.html <p>For the past few years I’ve been a hobbyist web developer, making websites for friends and family. During this time, I’ve used all sorts of stuff to build my websites. Bootstrap, WordPress and jQuery.</p><p>However, most of the stuff I was using felt clunky and I didn’t 100% understand it.</p><p>Now in 2018, I think I may have found my dream web development stack. It consists of Statamic, Laravel, TailwindCSS and VueJS.</p><!--kg-card-begin: markdown--><p><img src="https://damcclean-blog.s3.amazonaws.com/statamic-homepage.png" alt="https://damcclean-blog.s3.amazonaws.com/statamic-homepage.png"></p> <!--kg-card-end: markdown--><h1 id="statamic"><a href="https://statamic.com/"><strong>Statamic</strong></a></h1><p>Statamic is a flat-file content management system which means that all of your data is stored in markdown files. This <a href="https://statamic.com/why"><strong>is great</strong></a> because it means that there is no MySQL database to worry about.</p><p>Previously I was working with WordPress to built sites which meant having to write ugly PHP loops every time I wanted to display content. Whereas with Statamic, you can use something like this to display the latest posts.</p><!--kg-card-begin: markdown--><p><img src="https://damcclean-blog.s3.amazonaws.com/laravel-homepage.png" alt="https://damcclean-blog.s3.amazonaws.com/laravel-homepage.png"></p> <!--kg-card-end: markdown--><h1 id="laravel"><a href="https://laravel.com/"><strong>Laravel</strong></a></h1><p><a href="https://laravel.com/"><strong>Laravel</strong></a> is a PHP framework for web artisans. It’s easy to learn and it makes building web applications fast.</p><p>If you would like to check out what a Laravel project looks like, check out one I’ve <a href="https://github.com/damcclean/laravel-licenses"><strong>created here</strong></a>.</p><!--kg-card-begin: markdown--><p><img src="https://damcclean-blog.s3.amazonaws.com/tailwindcss-homepage.png" alt="https://damcclean-blog.s3.amazonaws.com/tailwindcss-homepage.png"></p> <!--kg-card-end: markdown--><h1 id="tailwindcss">TailwindCSS</h1><p><a href="https://tailwindcss.com/"><strong>TailwindCSS</strong></a> is a CSS framework like no other. It’s a utility first framework that allows for quick development.</p><p>For example if you want a div with 2rem of padding, a background of black and flexbox, the code would look like this.</p><!--kg-card-begin: html--><script src="https://gist.github.com/8af206b0b5bc6c2d055b120b158aa437.js"></script><!--kg-card-end: html--><p>It feels a bit strange at first as you’re adding tones of classes, but you’ll get used to it and wonder why you did it any other way.</p><!--kg-card-begin: markdown--><p><img src="https://damcclean-blog.s3.amazonaws.com/vuejs-homepage.png" alt="https://damcclean-blog.s3.amazonaws.com/vuejs-homepage.png"></p> <!--kg-card-end: markdown--><h1 id="vue-js">Vue.js</h1><p>You’ve probably used jQuery or some other Javascript library before. Personally, I had used jQuery and I hadn’t really got the hang of it. I was always coping and pasting code and when things broke I had absolutely no idea what happened. However, then I stumbled upon <a href="https://vuejs.org/"><strong>VueJS</strong></a> and gave it a try and I loved it. It’s so easy to write. One of the first things I built with Vue was a postcode locator that hooks into an API and grabs information about a certain UK postcode. I’ve embedded it below.</p><!--kg-card-begin: html--><div class="cp_embed_wrapper"><iframe name="cp_embed_1" src="https://codepen.io/damcclean/embed/Jvyqwb?height=265&amp;theme-id=0&amp;slug-hash=Jvyqwb&amp;default-tab=html%2Cresult&amp;user=damcclean&amp;pen-title=Postcodes.io%20API&amp;name=cp_embed_1" scrolling="no" frameborder="0" height="265" allowtransparency="true" allowfullscreen="true" allowpaymentrequest="true" title="Postcodes.io API" class="cp_embed_iframe " style="width: 100%; overflow:hidden; display:block;" id="cp_embed_Jvyqwb"></iframe></div><!--kg-card-end: html-->... http://duncan.mcclean.co.uk//articles/statamic-rss-sitemaps/index.html RSS Feeds and Sitemaps in Statamic http://duncan.mcclean.co.uk//articles/statamic-rss-sitemaps/index.html <p><a href="https://statamic.com/"><strong>Statamic</strong></a> is a flat-file content management system built on the Laravel framework.</p><p>If you've built a website with Statamic, you'll know that by default, Statamic does not automatically come with RSS feeds or Sitemaps. In this article I will show you how to setup a simple RSS feed and a simple sitemap for your Statamic website.</p><p>The first thing you will need is a Statamic site and a theme. Which you'll most likly have if you're reading this article.</p><p>First things first, create a new layout, I called mine xml.html, you can call it whatever you like. In that file, just copy and paste the following:</p><!--kg-card-begin: html--><script src="https://gist.github.com/cb2c6a5cf944d04f30d92403b78f7c02.js"></script><!--kg-card-end: html--><p>Now we can create two new templates. One for your sitemap and one for your RSS feed.</p><h1 id="rss-feed">RSS Feed</h1><p>This is the code I use for my RSS Feed on my site. You can fill it out with more details if you need to. It's just a really simple template.</p><!--kg-card-begin: html--><script src="https://gist.github.com/681b74bff93c79b6ad3a3e09c9f7d510.js"></script><!--kg-card-end: html--><h1 id="sitemap">Sitemap</h1><p>Below is what I use for the sitemap on this site. Again, it's all really basic. All the below sitemap does is get the latest from the blog collection and loops them.</p><!--kg-card-begin: html--><script src="https://gist.github.com/b25dcacd6bc9276941feffc721d615c2.js"></script><!--kg-card-end: html--><p>After you have created the two files, you need to add them to your <code>site/settings/routes.yaml</code> file so they can actually be used. Copy and paste the following into your routes file.</p><!--kg-card-begin: html--><script src="https://gist.github.com/afa058dc8bef4384d459865a8f6120c2.js"></script><!--kg-card-end: html--><p>After you have copied it into your routes file, it should look something like this.</p><!--kg-card-begin: html--><script src="https://gist.github.com/7fe1299bedf1d1ab6c0640faac482cb6.js"></script><!--kg-card-end: html--><p>You should now be able to view your RSS feed and sitemap at the following URLs.</p><ul><li>RSS Feed: <code>https://your-site.com/feed</code></li><li>Sitemap: <code>https://your-site.com/sitemap.xml</code></li></ul>... http://duncan.mcclean.co.uk//articles/coderdojo-bridgeton/index.html CoderDojo Bridgeton Website http://duncan.mcclean.co.uk//articles/coderdojo-bridgeton/index.html <!--kg-card-begin: html--><img src="https://damcclean-blog.s3.amazonaws.com/coderdojo-wip.jpg"><!--kg-card-end: html--><p>For the last year and a half I have been building the <a href="https://www.coderdojobridgeton.co.uk/"><strong>CoderDojo Bridgeton</strong></a> website. A large portion of that time was spent creating a static prototype with HTML and CSS.</p><h1 id="what-is-coderdojo">What is CoderDojo?</h1><p>"The CoderDojo movement believes that an understanding of programming languages is increasingly important in the modern world, that it's both better and easier to learn these skills early, and that nobody should be denied the opportunity to do so. To that end, we've built a global network of free, volunteer-led, community-based programming clubs for young people. Anyone aged seven to seventeen can visit a Dojo where they can learn to code, build a website, create an app or a game, and explore technology in an informal, creative, and social environment." - <a href="https://coderdojo.com/about/"><strong>About CoderDojo</strong></a></p><h1 id="wireframes-and-planning">Wireframes and Planning</h1><p>Before we could get started with anything, We needed to plan out the website and create wireframes of the design. The below images are wireframes of the Homepage and the Blog Archive.</p><!--kg-card-begin: html--><img src="https://damcclean-blog.s3.amazonaws.com/coderdojo-wireframe-01.jpg"><!--kg-card-end: html--><!--kg-card-begin: html--><img src="https://damcclean-blog.s3.amazonaws.com/coderdojo-wireframe-02.jpg"><!--kg-card-end: html--><h1 id="prototypes">Prototypes</h1><p>As I said at the start of this post, Prototyping took up most of the time in this project (over a year). The prototype was created using plain HTML and CSS. Later on I converted all of the CSS to SASS so it's easier to maintain.</p><p>I learnt a lot whilst I was creating this project thanks to my mentors.</p><h1 id="the-end-product">The End Product</h1><p>After the prototype, I built the site using <a href="https://jekyllrb.com/"><strong>Jekyll</strong></a> and I am hosting it with <a href="https://pages.github.com/"><strong>https://pages.github.com/</strong></a>. I also made use of <a href="http://cloudflare.com/"><strong>Cloudflare</strong></a> because it gives us a free SSL certificate and a bunch of other benefits.</p><p>The website is live! Please <a href="https://www.coderdojobridgeton.co.uk/"><strong>check it out</strong></a>.</p>...