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


 
Thread Tools Search this Thread
The Lounge What is on Your Mind? Quick Update on UNIX.COM Site Renovation: Bootstrap, Font Awesome and jQuery
# 1  
Old 12-08-2018
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.
These 4 Users Gave Thanks to Neo For This Post:
# 2  
Old 12-09-2018
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)
# 3  
Old 12-15-2018
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.
These 3 Users Gave Thanks to Neo For This Post:
Login or Register to Ask a Question

Previous Thread | Next Thread

8 More Discussions You Might Find Interesting

1. What is on Your Mind?

Quick Bootstrap Reformat of Forum Staff Page

This page still needs work (complete redesign), but in the meantime, I quickly added some Bootstrap classes to "pretty it up": https://www.unix.com/staff.php https://www.unix.com/staff.php (0 Replies)
Discussion started by: Neo
0 Replies

2. Web Development

New Font Awesome Icons in Quick Reply Editor

Working on the Quick Reply Editor, I have replaced a number of icons (see image below) with Font Awesome Icons. Was planning to replace all of them, but for some reason, replacing a few of them causes the script / template to break (which is odd) so I left them for now. ... (6 Replies)
Discussion started by: Neo
6 Replies

3. What is on Your Mind?

New Mobile Navbar Icons from Font Awesome

Just changed the mobile site to use Font Awesome icons. Here is the new top navbar view (unregistered users) https://www.unix.com/members/1-albums214-picture903.jpeg (2 Replies)
Discussion started by: Neo
2 Replies

4. What is on Your Mind?

Update on UNIX.COM Site Upgrades (Desktop)

This post is about the "Desktop" view, not "Mobile' ... First of all, I want to thank everyone for all the great comments, error checking and feature suggestions as we modernize the site, step-by-step. Also, thank you for your patience with me when as we make the site better. So far, we... (1 Reply)
Discussion started by: Neo
1 Replies

5. What is on Your Mind?

New Icons Coming from Font Awesome

Finally making some progress on getting rid of the 10 year old buttons with modern day fonts and icons thanks to a responsive web design tutorial by Brad Traversy who's video pointed me to Font Awesome. The buttons and icons were pretty easy to implement but it too me a number of hours... (39 Replies)
Discussion started by: Neo
39 Replies

6. What is on Your Mind?

Man Page Repositories - Added jQuery and Bootstrap

I added both jQuery and Bootstrap Javacript libs to all man page repository pages. TODO: I need to add pagination to these repos because most are very large and load to slow on a single page. For the first upgrade, I manually added one new CSS Class (repository) to the main repo tables and... (0 Replies)
Discussion started by: Neo
0 Replies

7. Shell Programming and Scripting

Site update

Hi All, I have to go to some particular website for every day in backend, so i have created some script to pick that values, Is there any way to know the website updating, Because if site has mod. then my script is not giving proper data, so i need to check once in a day whether the site has... (1 Reply)
Discussion started by: Shenbaga.d
1 Replies

8. UNIX for Advanced & Expert Users

How to fix bootstrap failure in unix V4.0D?

hi! my computer is... system: Digital Personal Workstation 433a Processor: Digital Alpha 21164, 433 MHz Memory: 64 MB Operating System: Digital Unix Console(SRM), Digital Unix V4.0D That computer is used for radar display. Application run on Unix. I have a problem now. I can't boot dkc0... (2 Replies)
Discussion started by: akz
2 Replies
Login or Register to Ask a Question