Git-FTP and Web Development
|

Git-FTP and Web Development

Byrichard

From the way people write about Github you would believe that everything has to pass through it, for anything to work but after some trial and error I found this to be a misconception.

I found that with GIT-FTP on Github I could upload and download files to a website after each git update. I learned this through following instructions for another workflow. I followed these instructions but because I use disroot rather than github the workflow didn’t work for me. I considered migrating my repository to github but chose not to.

Experimenting with Git-FTP

I spent a lot of time experimenting with Git-FTP, not because it’s complicated to use, but because the instructions I had confused me.

When I experiment with Hugo I have a git repository that tracks the changes for everything but the public file, so when I tried to upload the website after telling it not to use public, I then had to delete tens of thousands of files from the FTP site, twice.

The workflow that is mentioned above works well if you’re on github but I am not so it was nice to try, but not that useful. The more interesting option is to use git-FTP directly with the “public” Hugo build directory.

Git, Git FTP and the Public directory

The quickest, smoothest workflow I found is to track changes within the public folder and upload to the ftp server that way.

  • Git init within the public folder and commit the initial version.

The instructions to Install Git FTP

The simplest way to [install git-ftp] on a mac is with Brew. Within a few seconds you’re ready.

The next step:

  1. git config git-ftp.url “ftp://ftp.example.net:21/public_html”
  2. git config git-ftp.user “ftp-user”
  3. git config git-ftp.password “secr3t”

After this you use git ftp init and it will upload all the files.

List of Commands

With this workflow you don’t need github or any other repository. You make your changes locally, update git, and once that is done “push” the files that have been changed. It takes seconds and a few lines of instructions

The Old Method

The old method, that I have been using for decadess, is to work on a file, save it, and then use filezilla, cyberduck or some other client and upload the changed files. This method requires you to keep track of dates, and ensure that all files, from all locations, are uploaded. By using git-ftp you eliminate the need for github and others, and upload files, straight after updating the git repository. I can see myself using this all the time from now on.

While writing this blog post I did come across this command.

-P, –ask-passwd : Ask for FTP password interactively.

If you use a machine that other people use then this command is a better one to use because I noticed that you can see information in clear text in terminal, which is not good. Anyone that has access to the computer can run check the terminal log and find that sensitive information.

In my case, and for my experimenting the ftp account I created only has access to the blog folder, and no others. In this manner only one folder can be compromised so easily.

The Beauty of This Tool

The beauty of this tool, in my eyes, is that I can work on a website and I can track changes with Git but I don’t need to use github pages, netlify or any other tools. I can create full fledged websites and webpages and update the site by updating the git repo and then git ftp push and within seconds the site that I’m working on is up to date, without being locked in to any other site where I am the product.

I like being self-hosted, and I disliked the idea of dumping a website and domain I have used for decades, to take advantage of a simpler workflow.

And Finally

Plenty of instructions and workflows show the benefit of using their products and their workflows, to lock you in to their system. By trial and error I learned that tools exist to streamline the workflow without github. Too much of the web is built around docker, github and other solutions. The result is that you find plenty of instructions for a technique that will trap you, rather than provide you with independence. My blog post is written to help you enjoy greater freedom.

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. 

    • An SVG clock

    An SVG clock

    Byrichard

    Sometimes we experiment and play with technology. The clock below is an SVG clock using SVG and Canvas technology to display local time. Doing it with these two technologies was easier than with JavaScript. The code doesn’t require calculating thousandths of a second like another clock I tried. The tutorial to make this clock is here: W3 Canvas Clock.








    My errors when writing the code were to miss out a zero, hence missing out the central circle, and then adding + instead of * for minutes and seconds, so that the minute and second hands were wrong. When I spotted the typos I corrected them. Now it works.


    I have 45 minutes of course left before I finish this course: Front End Web Development Ultimate Course 2021. Some parts could have been shortened. I find that it is a good course to take you through some of the parts that other courses skip on. I like that it takes time to explore bootstrap in full, jquery, SVG to some degree, and canvas. It showed me tools I either struggled to understand, or others that I didn't know existed. It allowed me to fill in gaps in knowledge that should make follow-up courses more interesting.


    Tomorrow I have to experiment with the game that is included in the course. When I finish this course, I can move on with the next.

    Playing with Fire(fox Developer Edition)

    Playing with Fire(fox Developer Edition)

    Byrichard

    Google Chrome was misbehaving recently so I started to explore other browsers. By explore I mean try browsers that I had used plenty of times in the past. As I did this I came across Firefox Developer Edition.


    Firefox Developer Edition is fun because it allows you to see everything that’s going on. If you’re studying HTTP headers then you can watch that traffic. If you’re trying to evaluate which parts of a page are loading slowly you can see that. If you want to look at media items loading that is possible too.


    Network traffic for Tribune De Genève.


    The advantage of this browser is that it allows you to play around and experiment as you work on your websites and get answers efficiently and effectively. It’s a one stop solution to getting plenty of answers without using a collection of websites and tools. It is now my default browser.


    You can read a more comprehensive description of the browser’s features on their webpage.


    The next step would be to follow a new web development course online, and as I experiment and learn about using frameworks I will be able to determine how useful this tool is.


    So far I like it.

    Web Dev Studies During The Pandemic.

    Web Dev Studies During The Pandemic.

    Byrichard

    During this Pandemic, I have decided to study Web Development and I am slowly making my way through one or two Linkedin Learning Pathways. In the process, I have learned about CSS, PHP, JavaScript ECMAScript2016, Frameworks and more.


    The course I have studied are:


    Angular Essential Training / React.js Essential Training / Git Essential Training / Learning ECMAScript 6 /Node.js Essential Training / Javascript Essential Training / RubyonRails Essential Training / CSS Essential Training / Ruby Essential Training : 1 The Basics / Installing and Running Ruby On Rails 5: Mac / Programming Foundations: Web Security /PHP with MySQL / Essential Training 1 and 2 /PHP Essential Training / Programming Foundations: Databases / Responsive Layout / HTML Essential Training / Introduction to CSS and CSS Essential Training.


    With these studies I am getting a good overall appreciation of the options and solutions available to web developers. When I complete the “Become A full-Stack Developer and Become a Web Developer Courses I want to focus on a single framework and try to do everything from scratch, from setup to deployment, or at least to it being “completed”.


    It’s easy to watch hours of videos and not learn much. It’s for that reason that with these courses I have re-written every line of code and when it did not work I persisted until I resolved the issues.


    With CSS I took the opportunity to re-work the entire website. I made it mobile compliant and more visually appealing. I plan to take the same approach to learn about frameworks, taking my website and its sections, and using a framework as a CMS.


    For now I need to keep progressing with the learning pathway. I have eighteen hours of courses to go but that’s without including the hours of effort put into getting things to work after I’ve written the lines of code.


    At least this is a productive way of taking advantage of being in self-isolation for the foreseeable future.