Freenix
Freenix forum

Home » Community » General Info and Discussion » standalone FXP web site
Re: standalone FXP web site [message #5 is a reply to message #4] Wed, 19 April 2017 22:53 Go to previous messageGo to previous message
KRT1 is currently offline  KRT1
Messages: 24
Registered: March 2017
Location: sol 3
Junior Member
Howdy folks...

Indeed, it's been an interesting learning lesson. I am by no means a professionally trained web-designer, nor a coder, nor a developer. Everything I know about computers in general has come through sheer explorations driven by my own curiosity. I'm lucky enough to have spent my University time in a department that was thoroughly dual-boot, so that by the time I finally wound up with a degree (despite my seeming best efforts not to), I had been bitten by the Linux bug pretty hard. Combine that with the fact that this was also a time before Faceboogle had caught on to the degree it has, so that it was common practice for anyone involved with the department to set up and maintain their own website on the school's servers as a profile page for the department.

Fast forward to now, and I am neck-deep in web-related projects that I never fully intended to take over in the way that I have. My current waking nightmare is WordPress. Not the base code so much, but the edge cases of what can go wrong when you cram 20+ years worth of material into a single MySQL database. The darn thing won't export now.... But that's another project entirely.

As for the freeslack.space site, the goal there was to have something that could run without any javascript whatsoever, and still look good enough for the average person to get a "modern" feel out of it. It's been a project of pure fun and enjoyment for me. And I've learned a lot in the process. To add to what was mentioned in the previous post, I dug into web fonts and icons and such like I've never done before. I had heard about Font Awesome in passing, but I didn't know what it was all about.

A while back on one of the GNU mailing lists (linux-libre perhaps? I forget which one exactly), the PureOS developers had been trying to get their OS to meet the FSDG (of which I am still in the process of groking the finer points). Part of that process was for them to make a standalone website that had no affiliation to the related Librem project selling laptops. I won't go into the politics of all that here, it's a separate discussion entirely. The good thing that came out of it was the PureOS.net website, which was very close to the direction I personally wanted to go in for my own websites. And wouldn't you know it, they released the whole thing under the CC-BY-SA-4.0. Nice. So I just ripped the whole thing with wget, started replacing the bits of code that needed replacing.

Aside from some copy tweaking and image adjusting, there wasn't much to be done in the way of making it work in the way that we had discussed over email. There was the one interesting thing though. With javascript turned completely off at the browser level, the site worked like a charm, as intended. But with NoScript turned on with all the defaults, the icons on the buttons would turn into blocks of crud. After determining that this was not a javascript issue, I was able to determine that NoScript was blocking the web font icons (i.e. Font Awesome), even though they were originating from a local directory (same domain) and being called through the CSS file.

[0]

To see this behavior in action, visit both pureos.net and freeslack.space with NoScript turned on with default options. Where you see ugly blocks of crud on the PureOS.net site, you should see the proper icons in their place on the freeslack.space site.

The solution was simple. I just replaced the CSS class calls with image links to *.png versions of the same icons I was after, using icons found at an MIT-licensed repository for this exact purpose.

[1]

Also, while I was learning about all of this font business for basically the first time, I came across this:

[2]

After reading that and a few more links, I started to wonder why anyone would even bother with Font Awesome. Button images don't seem all that hard to figure out. That's like HTML 101, isn't it?

It makes me pine for the days when we could get away with text-based websites, like my old FreeSlack notes page:

[3]

(grain of salt here, some of that info is outdated, and I plan to update that page when I can create spare time out of thin air, or at least hone the skills of time-control. I digress....)

The point being, when it comes to "web design" I personally tend to Keep It Super Simple, and strive for something that can be rendered on all browsers and platforms (even old dusty outdated stuff in third world countries on horribly slow dial-up). To me, it's a form of net-neturality. If I create a website that requires Flash or tons of javascript from all over the place, or else has hooks into every social network in cyberspace, then I am alienating anyone that has a slow connection, or a less-than ideal browser, or outdated plugins, let alone someone trying to surf the web as "libre" as possible, if that's even a thing.

Plus, it's a standalone site, more or less. You can rip the whole thing in under 5 minutes with wget and host it directly off of your hard drive without any net connection whatsoever. Of course the external links won't work, but everything else should load just fine. That way, it's easy to move around and mirror on other servers with just a simple upload.

Forgive me if I'm making something complicated out of a simple "web font icons" issue. This is how I learn, I guess. And it's been a fun ride so far...

The next step is to clean up the code so that it gets a clean bill of health for HTML and CSS validation. From my previous experience, this can be quite a feat, depending on the original code for the site. As it now stands, I get 15 HTML errors [4] and 28 CSS errors [5]. Compare that with 6 HTML errors and 46 CSS errors for the mother code at pureos.net. I can easily clean up the HTML errors by removing some name attributes and adding alt text to the button images I spliced in there. The CSS errors will take more investigating, it's not my first language.

I think I'll stop here. For now at least.


 
Read Message
Read Message
Read Message
Read Message
Read Message
Read Message icon2.gif
Read Message
Previous Topic: Guide for encrypted install
Next Topic: Freenix GNU SeaBIOS LibreBoot ThinkPads?
Goto Forum:
  


Current Time: Mon Apr 29 12:10:51 EDT 2024

Total time taken to generate the page: 0.01152 seconds