I am one person who is learning to code, but also using a personal website to pactice my skills and share my interests… I have a huge problem when it comes to keeping my cdn’s for things like Bootstrap and particularly FontAwesome updated to the most current version because I have to go through and change the cdn on every page withn my website which means that I am spending more time updating CDN’s than I am actually spending working on the actual site content and such.
I have an idea for something that may be a life saver for me, but I don’t know if it is possible, or even how I would go about it.
My idea is this…
create a single file that holds all my CDN’s for my site
add a single tag pointing to that file on every page that wouldn’t change
the goal being to have the CDN’s load as expected for every page, but I would only need to update a single file in order to update the CDN’s across my entire site which would save me time and allow me more time to work on the rest of the site.
I have no idea if this would be a JS or CSS file or a file of a different name entirely, let alone what I would need to do to make this file work.
I think it is a really cool idea, I just have no clue where to begin with trying to get it to work and am feeling like I might be in over my head with this one.
I picked up PHP early on when studying frontend development which kinda leads me now to a fullstack focus. What have been doing for a little while now is using PHP to setup config files like you’re suggesting. They track the domain, for if I move my project to another host/url. The url, it takes the domain and the project directory, if I happen to sub-directory my project on localhost or such a domain, it then uses this url as a path for local files.
You too could do something similar and store your paths in variables and use them throughout a project, updating them only in one place.
It would be possible to do this in JS, but any script file that you depend on is a bad idea as your page becomes useless if JS is not available for the user, not to mention JS behaves after the page loads, so you would need to load all your assets after the DOM loads.
I think you can use and the JS will execute where you place this, but then you are littering your code and this is a poor HTML structure.
PHP would be a good route. It allows you to do what I described with embedding variables in your page with PHP like <?php echo $someCdnPath; ?>path/to/file. PHP Also allows templating (combining files together into one) which happens before a page loads, so you could have links in a file and include them into your pages.
Last suggestion is if you want to stick to the JS environment, pickup Node and make your personal website a webapp.
last last suggestion, if you have a good text/code editor, you can use advanced search tool to find text across multiple files, and replace them with a single click.
I currently only know HTML and CSS but am starting to learn Javascript… beyond those I haven’t touched anything else.
From the looks of the responses it seems I have bigger ideas than my skill level will allow me to tackle and that PHP seems to be the thing that will help me solve CDN update issues…
what’s a good place to start working on PHP through that doesn’t cost much. I’m permanently disabled and my income per month is about $900 per month so dirt cheap or free is best for me financially … even a good beginner book title would be good I’m pretty adept at tracking down cheap books
This will give you a running virtual Linux server complete with Apache, PHP, mySQL and other packages that you may want to play with like WordPress, shopping carts, wiki, etc.
If you already know JS, this should be quick to pickup. Just some minor changes in syntax, but the programming concepts are the same.
But I’m worried you’d be overwhelmed as a beginner trying to learn JS and PHP (or other scripting languages) at same time. I’d suggest concentrate on JS for now, and don’t sweat too much learning PHP. Once you learn 1 language, it’s easy to learn other languages in the future.
I agree with what you said about only learning one language at a time, the mere thought of learning both PHP and vanilla JS at the same time feels like it would be a monumental task at minimum. I really do want to save myself some time with regards to updating cdn’s though so I think I’ll dabble with PHP just enough to accomplish that goal, but make JS my primary focus. I don’t know enough JS to create what would be needed, but I was thinking that some people (myself included) will turn of JS in their browser for any number of reasons I have a family member who relies on a screen reader for everything computer related and she has said that JS can sometime be a problem for her so rather than risk going to a site that wreaks havoc on her screen reader, she for the most part keeps JS disabled unless she knows she is going to a site to do something and knows it requires JS to be enabled to accomplish what she needs to do. Needless to say I felt like JS was likely the wrong answer, but I was pretty sure that HTML and CSS would be severely limited and likely not be useful in this case.
I have MAMP installed, because some places I go to work on projects and such don’t have internet or the internet is sluggish so I use MAMP to get an idea how my site will behave once it goes live. I just never did anything with PHP, MySQL, or Apache beyond the offline testing of my site.
Do you know how mamp compares to ampps? better? worse? same?
I was poking around on W3Schools lastnight before I read your reply pointing me to it just to see if I could spot something that might help and found the “include” and “require” examples and tutorial for file handling. I may also use it for my footer since it too is the same on every page and W3Schools had footer use as an example for using include or require.
I appreciate your help, I think my big think now is to focus on JS … and dabble with PHP just enough to save myself time updating my CDN’s and possibly my footers if I feel really brave.
One fringe benefit of the cdnsettings.php file is that it should also shrink down my file sizes a bit which is always a good thing since I’ve got a cap on how much bandwidth I am allowed and my updates eat bandwidth that could be used by my visitors.
The MAMP software is just a program that operates the ‘web server’ on your local machine. When I first got started on a Windows computer, I used WAMP (Windows, Apache, MySQL, PHP). After a few months I switched to a Linux installation and installed them all from a tutorial.
When switching from a local environment to a host it’s possible to encounter some errors if you are developing using a different version fro the PHP version your host has. It is also easy to make mistakes which PHP does not forgive, so they become very evident on a hosted page.
MAMPs fine. I have both MAMP Pro and AMPPS – basically does the same job.
Yes, use the include/require technique for page elements that are shared among the whole site. And if I remember, you can even have includes within your includes (a’la Inception). So take advantage of that too.
It sound cool, but what if in new version something is changed of how it works? It could mess up your previous styling and or functionalities It is good idea too have config files, but it is not to update them at every cost. Newer doesn’t always means better. It should be done case by case basis.
I see what you are saying, and for me it isn’t always about the newest thing out there when I update, in this case it is truly about saving time in one area so I can focus more of my limited time on other things like adding or fine-tuning content, fixing bugs, or learning new things. Coding isn’t the only thing I spend my time doing, I also do historical research, and manage a diaper bank on top of managing my disability so my days are pretty full, and anything I can do to save time on something is a good thing with regards to helping me to have time to learn and practice my coding.
I have a lot to learn, I’ve got HTML down pretty good, and know CSS well enough to use it, but even there I feel like I need to learn more, but I do think that this little bit of PHP will go a long way to helping to free up time so I can work on improving my CSS while also trying to wrap my head around JS.
I’ll look into the nesting of php with regards to "include’ and “require” even though I don’t know anything about Php outside of this convo, my gut feeling is that there is likely a way to do it since everything related to building a webpage pretty much requires some form of nesting based on what I’ve learned so far
For example i have couple of php functions that handle connection to database. Should i copy/paste code every time i need connection to it? No, ofcourse. Instead, i made library of my custom made functions and every time i need them in some other php file i just use require “pathToMyPhpFile/MyPhpFile.php”;
Example: require “c:/xampp/htdocs/www/MyFunctions.php”;
And when you call function from included file: $result = myfunk1(par1,par2);
Here’s some additional links to get you started besides those already posted:
And php ain’t that hard. It have similar logic like other programming languages with addition of it’s own quirks.
Also worth considering is xammp web server.
You can also do it all client side in JS. There’s probably several implementations you could find. In essence, what needs to be done somewhere in the code is a createElement for a script tag that points where you want.
There is no need to update your CDN every time the version changes, unless you want to make use of some new functionality.
Also, it sounds like you are creating duplicate head sections for each page in your website. If you use a component based framework, you can just load one single index.html page. This page contains the head, the CDN sources and the navigation for your site, and acts as a layout page. All your other pages can be inserted into and removed from this layout page. If you create this structure on the front end, it is called a Single Page Application (SPA). The easiest way to implement it is probably to learn Vue.js.
On the backend, you can do something similar with PHP / Laravel using layout and partial views - html pages which just represent part of a page. I think you can also do the same thing with a Node backend if you use a templating engine like Handlebars which also supports partials.
Let me once again point out that my skills are limited to HTML and CSS right now… I am just staring out with JavaScript… Secondly I do NOT update my CDNs everytime a new version comes out, but when I decide to update my CDN because I like something about the updated version I really hate having to go through and update the CDN on every single page within my site… it eats up valuable time… so asking if there is a way to simplify the process of updating CDNs was to save me time for those times when I decide I want to update… not everytime someone releases an update, but just in general when I do need to do an update I would rather streamline the process and only need to update the CDN in one spote rather than have to go through every single page of my site to update the cdn or check to besure the find and replace feature didn’t miss something (I’ve had that happen before)
I’m not at a place where I’m ready to delve deep into PHP the only reason I was discussing it with someone was because they offered me a solution that involved it that after looking it up on W3schools seemed like it would do what I was needing it to do… My focus is on wrapping my head around JavaScript at this point and not do much beyond dable with PHP enough to add a bit of a time saver for myself by simplifying any CDN updates I may decide to do.
I got an answer looked it up and it is working for what I need it to do… if we were talking about player levels in World of Warcraft I was be in the noob zones I truly only know HTML, have a decent understanding of CSS, and am probably only in the first 2 hours of the JS section of FCC… so I’m not anywhere near ready to start learning anything like Vue.js, or Node.js … I barely know anything about vanilla js and I want a good foundation in vanilla JS before I start learning Vue or Node… I want to learn, but everyone responding is offering me far too many solutions and its feeling really overwhelming… I got a solution and am testing it within the limitations of my skills it seems to be working well in my testing so it is likely going to go intop the live site.
