Laravel and Chirper

Byrichard
Reading Time: 2 minutes

Today I used Laravel to code a Twitter clone called Chirper via the tutorial you can find here. The tutorial took about two hours before I got the notifications section of the tutorial. The tutorial is easy to follow and with my contextual knowledge I was able to write most of the code with a minimum of errors. The tutorial follows the CRUD model, Create, read, update delete, and adds in notifications for good measure.

I chose to follow the Blade course rather than the React course because at the moment I feel more at ease with PHP thank JavaScript despite spending months on JS courses. What I like about PHP and Laravel is that when there is an error the code will show you the code with an error and you just need to understand what it is.

With JavaScript and especially with typescript the error message provides you with code that is hundreds of lines away from what is causing the code to fail. It takes seconds or minutes rather than hours to debug an issue.

Although building a twitter clone might not sound exciting, it is worth doing. Creating, reading, updating and deleting are key parts of Content Management systems so if you can do it for content with 255 characters you can easily expand it to blog posts, articles and more. It also means that you have a chat app to use within a small group of friends.

The next step, once I finish the course, is to adapt the code to get the content from my website to work via the Laravel framework. For the next step I want to read documentation. Watching video tutotirals is great sometimes, but it’s time consuming. The next step is to read documentation, and understand it. I have spent enough time building context. Now is the time to put this knowledge into practice.

Similar Posts

I Want to Dump WordPress for Laravel
|

I Want to Dump WordPress for Laravel

Byrichard

For at least a year I have been annoyed with WordPress, not because it went from the classic editor to Guthenburg but because it now uses React and I hate the idea of using React because it was a FaceBook project. I don’t trust Facebook and I don’t want to use anything related to them.


I don’t want to use FaceBook because it reminds me of the life I don’t have, Instagram because it switched from being a network of friends to a network of spam, WhatsApp because it’s owned and controlled by FaceBook so privacy is at risk, and finally React because it is part of the FaceBook universe.


I was tempted by the Occulus Quest a few years ago but I didn’t buy it, because it would ingest me into the world of Facebook. If Facebook, now Meta, was caught being unethical and immoral, and said sorry, and did something to fix the situation, then I would rethink how I feel about the company. The reality is that when they’re caught being immoral they just wait until we forget about it. That’s not how a social network should be, especially one that experimented with making us feel negative, and was caught helping with spreading disinformation to the right people to get Brexit to succeed, and Trump to be elected.


But What About PHP?


I know that some of you will ask “But if you refuse to use React, why don’t you feel the same way about PHP? PHP was developed in part by Facebook years ago, but it came of age when I didn’t have a negative opinion of Facebook yet. I don’t want to use React because I don’t want to make it easier for Facebook to have a monopoly on the World Wide Web.


I also feel happier learning to use technology where I am not competing with everyone else. I still studied Vanilla JavaScript via several courses and understand how most functionality works, even if I can’t write the code from scratch without help.


Back in 2004 and earlier I was playing with every framework I could find, installing it, seeing what I could do, and then moving on. I found WordPress and my learning reached a plateau. During the pandemic I started to study how CSS and other technologies worked until I found that PHP and Laravel feel intuitive compared to other technologies. I wanted to use Angular but I got stuck, so I learned Vanilla JavasScript, then Python, and then PHP, and finally laravel. With PHP and Laravel I got things to work without struggling.


I did get stuck with Laravel, with permissions, which is why I studied “Let’s Learn Laravel: A Guided Path for Beginners. I am at section 15, “Deploying To A VPS”. After that the course will be done. I still want to follow courses on how to make Laravel secure. My goal is to make my website a showcase of my understanding of Laravel.


And Finally


Although replacing WordPress with Laravel would be a fun goal to achieve I think that the first step is to turn the static part of my website into a dynamic one. Once that is achieved then I can see whether I want to migrate my WordPress blog to Laravel, or keep things as they are. Security wise it makes sense to stick with WordPress, until I know more.

Learning To Code By Building CMSs
|

Learning To Code By Building CMSs

Byrichard

It’s easy to use Facebook or other CMS every day without thinking about how the code works. This summer I have coded two CMS using Linkedin Learning. One of these CMS was running with PHP and MySQL and the other was running with Ruby On Rails and MySQL.


The PHP CMS


In the process I learned how to install MySQL, how to get MySQL and PHP to talk to each other. How to organise files between private and public folders on a web server and more. Getting MySQL to talk with the web server was a challenge that took a few days to get right.


With the PHP CMS I learned about arrays, about interacting between PHP and MySQL and I learned to be attentive to using the correct syntax. Sometimes though, a single typo would block my progress for a period of time. It wasn’t rare for me to compare the code I wrote with the code written by the instructor line by line to find my typos.


I could have cut and pasted the code but I found that simply typing the code character by character was enough to force me to read the code carefully. When I made typos it taught me to attentive to details as well as to be more aware of the syntax.


Ruby On Rails


Ruby on Rails was an interesting learning challenge. I got stuck before I even finished setting up the project. As a result of this I went back and followed a course on essential Ruby. This worked as a nice complement to what I learned from that point on.


During the project configuration process I got stuck because I created the project with the wrong database connection type. I left it on the default and when I tried to correct this I failed, and failed, and failed again. Eventually I decided to delete the application and create a new one, with the right database connection and this time it worked well.


The challenges I faced were that the Puma Server wouldn’t start because a gem was missing, that the CMS wouldn’t start because of a mistake in the routing file and more. Eventually I would restart the server but I spent a lot of time debugging.


One of the most persistant problems I had with Ruby on Rails is that it’s hundreds of lines of code across multiple files and although the error messages are obvious you need to learn to read them. For two or three days I couldn’t find what the error was, despite looking through every page and its code. Eventually I found that I had written “visible” and forgotten a “:visible”. That error crashed the Puma server consistently.


With Ruby On Rails, I learned to work within a framework. This knowledge is transferrable to working with other frameworks. I’ve gone from knowing how to install and use a CMS like WordPress, Joomla, and Drupal to learning how to create one and to understand how arrays and functions work. I have also learned how to think about security and how to use blowfish and other encryption technology to keep passwords etc. more secure.


With Ruby Gems I could work on projects of my own and be less reliant on other websites. One project I would like to work on is creating a heatmap of all my walking activities and the easiest way to do this would be to find some code and adapt it to have the functionality I desire.


The Next Step


The next step is to learn to use JavaScript. I will then know how to use HTML/PHP for content, CSS for layout and finally JS for interactivity.



Blogging for Three Hundred and Sixty Six Days in a Row

Blogging for Three Hundred and Sixty Six Days in a Row

Byrichard

For three hundred and sixty six days I have written a blog post daily. In some cases I wrote two posts, and scheduled the post to appear the next day. This is when I was driving for thirteen hours, or if I knew that my morning was busy. In the process I have definitely given myself a writing habit. The question I ask myself now is whether to continue, or whether to change the posting frequency.


Nothing to Say


One of the problems with posting daily is that we sometimes have nothing to say. We sit at the computer and try to find inspiration for an hour, or two, or even three. Eventually we write but is there any value in what we wrote? According to the viewer stats there isn’t. It’s a matter of just writing, for the sake of habit, and experience. It also demonstrates that I have the stamina to write every single day, even if some days are more interesting than others.


Reducing the Frequency


I’m thinking about reducing my writing frequency to once every two days, or once per week. If I write once per week then I might be as uninspired when I write daily, but weekly. In effect I’d be lazier, less disciplined, than I am at the moment. I don’t think that reducing the frequency of writing would be productive, because that would be about laziness, rather than striving.


Consistency


Writing daily, despite having nothing to say is about consistency. A toddler falls up to several hundred times in a single day when learning to walk. An adult walks 23,000 steps without even noticing, in a single day, when hiking. Writing daily might generate a lot of crap, but it also trains us to write, to type, to think, to go back and edit. It trains us to put ideas into writing. We learn to write every single day.


More Productive than Social Media


One of the reasons I decided to blog daily, is that I saw that Facebook and Instagram were making money from the time I spent on their sites and I thought “I should invest that time into my own site”. I did. That’s why I now blog daily, and I’ve had the habit for three hundred and sixty six days in a row. I do feel like changing the rules for myself.


Photographs and Video


At the moment I post written blog posts, but now that I have written blog posts for three hundred and sixty six days I could change it up. On some das I could post a video, and on others I could post photographs. The point of a photograph is that I could spend 30 seconds on a blog post, rather than one to three hours per day. I proved that I could write daily for an entire year. Now I can reward myself, by changing the rules.


The Road that Became a River


Two days ago I ran by a road that became a river, and I should have stopped to take photos or video. If I had then I could show just how heavy the rain had been, over a period of hours and days. High winds are forecast overnight. It could be fun to capture the waves crashing on shore. If the temperature dropped then it could be fun to capture the ice formation.


And Finally


With the change in format I hope to spend less time on blogging. I want to continue blogging but I want to give myself to post an image, rather than write. Writing takes time.

Transitioning from WordPress to Hugo

Transitioning from WordPress to Hugo

Byrichard

Transitioning from WordPress to Hugo is tempting because I don’t need an entire CMS for what I’m doing. What I need is a centralised system that checks for tags, titles and the theme, and updates the navigation as I add new pages. You don’t need a CMS for that.


The Good Old Days


If you go through the meta data for many of my static pages you will see that they were created with dreamweaver, frontpage 2000 and other solutions. The aim of these was to create an application that would prepare the html and navigation for pages, so we could concentrate on content creation. This was before the age of the CMS.


A short Learning Curve


If you want to create a simple blog, without changing much the learning curve for WordPress and Hugo is short, compared to what is required for Laravel, Angular and other solutions. You create content and there are tools that will take care of almost everything else.


With Hugo and WordPress you can, theoretically, start creating content and sharing it within minutes, or even seconds, depending on how many times you have set things up before.


HTML or Markdown


With Hugo if you want to create a simple page you can use markdown and save a lot of time and effort. You focus on headings, images, lists and hyperlinks. If you want to have more flexibility you can generate an HTML page, and with this you can do anything you want, and have the experience, to do.


  • hugo new blogs/big-timber.html


  • hugo new posts/hugo-and-wordpress.md


A Huge Mess


I need to find a solution to a problem. I have a blog with thousands of articles so I have thousands of markdown pages in a single directory. I considered using the creation date with year-m-d-article-title.md but if I do this then Hugo will use that as the headline for new blog posts. I would need to edit the Title of new posts, to remove the date information. For the public folder, once the blog is exported the files are tidy.


Thousands of Files and Directories


Hugo likes to create a folder and file for every single page. The result is that every page has its own folder. That’s fine, when everything is working well, but chaotic every time you make changes. At the moment of writing every change generates 6000 files and folders. That’s 10-20 seconds per export, and this doesn’t include the upload time.


Minor Changes With A Big Cost


When you’re using a CMS like wordpress changing a theme takes seconds. You find a theme, apply it, and a few seconds later you’re ready to role. With Hugo if you change the theme you need to regenerate and then reupload the website in its entirety. Small changes become big changes. Having said this, with a static website, managed by hand, rather than Hugo, this would take hours, rather than seconds.


Very Fast, Flexible


I see that Hugo is fast and flexible. It provides the organisational features of a CMS with the flexibility of HTML pages, when that is desired. This makes it easy to circumvent the limitations that are imposed by markdown, for those that want to embed videos or other features into a specific web page or blog post.


And Finally


Hugo requires no back end. Anywhere that you can upload html, can display a Hugo website, or individual pages. You have the ability to tell Hugo where the files will be on a server, so that links are built to play nicely. Both the static part of my website, and the blog may soon run via Hugo.

Converting This Blog To Hugo
|

Converting This Blog To Hugo

Byrichard

On Saturday I converted my blog from WordPress to Hugo as an experiment and it went quite well. I downloaded the xml file and then I converted that xml with blog2md to go from xml to md pages. A page was created for every single blog post. This took a while. I now have my blog both as static pages, and as a wordpress blog.


Two challenges


There are two challenges. The first is that Hugo has to generate over 5000 pages each time I generate the site, or at least it has to check 5000 pages per change. That’s several minutes of work, every time I tell Hugo to build the site. The next concern is that if I make a change I don’t know whether I need to re-generate the entire site to reflect that change or whether it will just generate one page. I can run tests using Git Version control to see what’s happening.


Is Hugo or WordPress Lighter


I don’t know whether Hugo is heavier, because of every individual file, or whether WordPress is heavier, due to all the functionality that I barely ever use. WordPress often feels bloated and slow, especially in the admin console. It would be nice to play either with markdown, as I’m doing for this post, or html, as I could do, if I want more flexibility


Images Still Load


One of the surprises I came acrosss is that images still load, whether I am in the blog directory I created for testing purposes on the website, or within the wordpress blog folder, as I did by mistake. It’s pretty easy to make the change, as long as you keep the assets where they’re expected. I might consider deleting most of the wordpress install except for the media assets. That will be decided lateri.


What I Like About Hugo


What I like about Hugo is that the blog is generated and links between pages are taken care of automatically. As long as the tags and categories are set ahead of time, the generator will take care of the rest. As I browsed through the blog generated by Hugo I liked the look and feel. That’s before I spend time tweaking the theme and trying to add more.


An Alternative Approach


The blog I use now has been around for 20 years or so. This means that if I make a big change, like migrate from WordPress to Hugo I will kill all the hyperlinks and hierarchy and it will take time for search engines and links to be written to make the new version visible. Having said this the traffic to the site is low and there is a chance that the change will not be noticed. It’s by updating and linking to pages that I will make the entire site more visible.


And Finally


I have written the last two blog posts using VIM and I like the interface. It’s limited in functionality, because I haven’t spent enough time playing with VIM but it feels fast, and effective as a blogging tool. If I use Day One it takes time to load, I theoretically need to pay a subscription and then I need to cut and paste the content from there, to the blog. With this I could press esc, :wq, save, and write hugo and it will upload automatically. My reason for not doing that, for now, is that I don’t want to risk sharing the configuration for connecting to the server. Time will decide.

Updating Old HTML Webpages
|

Updating Old HTML Webpages

Byrichard

Most websites are simple. They have five to ten pages at most but usually a single page is enough. Most pages are about one specific thing, whether it’s a CV inspired page to find new clients or a simple page with a few products. Most are usually about a single topic. 


This makes website maintenance and design simple, because one theme fits every page. My website is different. It has articles about the Romans, Geography, Environmental Studies, old student newspaper articles, Media studies pages and more. In effect it is several websites rolled into one. 


The challenge with updating this website is in the size of the website. Since 1996 I have been adding pages, until about 2003 when I switched to wordpress- The website still has a thousand or more individual pages. Every time I update I have to update hundreds of pages. 


Recently I converted the surfing the World Wide Waves section to PHP, including one php page where I put the articles into arrays, and individual pages that load the title, content, navigation and more. The Surfing the World Wide Waves session is now a simple to edit set of PHP pages, rather than 50 individual pages. I can edit the navigation in a single place, rather than for each article. 


For the sake of consolidating my knowledge I was watching a learning path about HT and I saw that one challenge was to take an old HTML page, and improve it, to be a semantically correct web page. This is a process that I have done several hundred times over the years. 


I created style sheets, one for the Romans section, another for the Surfing The World Wide Waves Section and one or two other CSS files, where one CSS file is used by multiple pages. It helps to make the website uniform. 


Removing Tables and Inline formatting


Front Page 2000 and other website editor software added a lot of code, inline, which, today is not needed. Part of the process of going through the old pages is to strip out old code and replace it with modern code. I replace tables with divs, strong, and other tags with headers and more. I make it so that the website uses less code. 


Old pages sometimes have the font, font size, strong and other tags for each p tag. That’s a lot of code, for a page where CSS does the same thing, just once per tag, header etc. 


A Quick Tip


If and when you’re working on an old page you may find and other tags. In VS Code you can search and find and use find and replace to review every individual use individually and it automatically moves on to the next instance. 


I converted some long blocks of text from html to php within an echo tag and I had to escape a lot of ‘. I did this by selecting “‘“ and using find and replace with “\’” to go through every occurrence individually before moving it to an echo tag. I saved time and effort. 


List Items


If you’re working on a list of items you often have to write the same code for each list item and this takes time. With VS Code you can option select the front to each individual item and type

  • just once. With the closing tag you do the same, except that it will auto-complete the tag so that’s even easier than expected. This saves time. 


    Re-working an entire website is slow and repetitive but that repetition is good for two reasons. The first is that it gives me time to think about what I am doing, and to understand why I am doing it. The second is to develop work flows that increase efficiency. 


    I read, assess, clean up and then re-format individual pages so that they’re template friendly. My Surfing the World Wide Waves section is now like a blog, where I have the bare bones code on each page, and the content in a centralised place. If I took one more step then it would be a one page website. As I gain experience I can take that last step. 


    I am now focused on putting what I have learned to practice. I am consolidating what I have learned and finding solutions to practical challenges I encounter while working on my website. 

    • Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.