Quick Update on UNIX.COM Site Renovation: Bootstrap, Font Awesome and jQuery

Here is an update on the site renovation:

After a lot of analysis and example programming, including testing out a number of Javascript framework and libraries, in the short term, we are getting the most bang-for-the-buck from these three basic, core tech areas:

  • Bootstrap (CSS and Javascript)
  • jQuery (Javascript)
  • Font Awesome (CSS)

The "cool kids on the block" like VueJS, React, or Angular do not provide as much value (at this time) as Bootstrap, jQuery and Font Awesome. This seems to be because all the "new, sexy cool kid's" apps work the best in SPA (single page application) but our site is not set up for SPA from the beginning. This means that it's hard to integrate those frameworks into the site and get as much value in a hurry as working with Bootstrap to modernize the site.

So far, I have had good success with Bootstrap with Buttons, Forms, Options, Textareas, Lists and more. Bootstrap works great and is easy to integrate and looks good too. Recently, I used Bootstrap to polish up the Editors and the Albums . The Editors are looking much better, but I still have work to do with Font Awesome in the toolbars and need to rewrite some very legacy PHP code before I finish that task. Today I did a number on the Albums and they are looking much better, but I need to integrate some new cool gallery at some point. I also added a quick search bar at the top of every page. I tried changing the minimum word full indexing in the DB to two chars, but that change killed DB performance (significantly), so I reverted the min word length back to three characters.

Also, recently I experimented with jQuery-UI integration including draggable and resizeable areas. That experiment did not go very far, but it was useful to learn jQuery-UI and get a feel for how to do these jQuery-UI-ish things. Unfortunately, jQuery-UI was not really very helpful, especially compared to Bootstrap and the jQuery-UI tooltips were difficult to control relative to Bootstrap tooltips. Obviously, I am becoming a big fan of Bootstrap based on my direct experience coding with all these various frameworks.

Now, I plan to continue to integrate more Bootstrap and Font Awesome into the site (as the mood hits me and I have time) and have had some success with Bootstrap modals, but then again, these modals work best in SPA, which we are not. However, if we find some areas which can benefit from Bootstrap modals and also not require SPA, then I will put up a modal, since it's fairly easy with Bootstrap. I have created Bootstrap modals that pull data into the modal from the DB; but have not implemented anything in production yet. Font Awesome is everywhere, and soon will replace most icons in the editors (QRE is close to done. After QRE, will transfer all of that to the other WYSIWYG editors on the site.).

Looking further ahead, I'm still interested to create some new SPA-type progressive web applications with VueJS-Bootstrap. I'm getting closer to being "back in sync" with 2019 web development after falling behind to work on other interests (and some of those distracting interests were not strictly "work" LOL). It's been a long climb back, but I'm getting there and the site is coming along. A new user commented how different our site it that other sites in this genre and how they had never seen a site like this one. I was pleased to hear we are not looking like all the new-generation cookie-cutter sites out there.

Of course, no technology framework, nor icon set is important when compared to you, the users of the site; so I hope you are getting as much value from Bootstrap and the changes it brings as I am. It it the users, long term devoted users and new users, which make the site; and I thank you for your patience and hope you are enjoying the new Bootstrap integration as much as I am.

Also, thank you for your patience with me when I am in hard core developer mode which basically means at that time I am not very interested in the finer aspects of being sociable because of a lack of time. I know I can be a PITA when writing production code. Writing code and developing production features takes a lot of energy and can be stressful at times; so thank you for understanding.

We are lucky to have moderators who are not production coders who are more patient than me. You know who you are. THANK YOU.

Cheers and Best Regards.

4 Likes

Update:

Have Bootstrapified the following pages:

  • Show Thread (Search This Thread, Edit Tags and Moderator Options)
  • Who Is Online
  • What is My IP
  • Whois
  • FAQ
  • Search Results (Moderator Options)

Update:

Have Bootstrap-ified :

  • Most of the moderation menus and inline moderation pages, etc.
  • The UserCP pages to update options, PW, etc.

TODO:

  • Finish "Advanced Search" page
  • Do something with the User Profile pages.
  • Add Bootstrap classes to other pages as they appear...

Otherwise, most of the pages are already Bootstrap-ified and looking good, as far as what gains we can easily get from Bootstrap.

3 Likes