Skip to Content

Somewhere down the road less travelled...

I'm just going to put this out there... As a "Software Engineer", I've been looking around at various TOOLs used by websites such as Wix, Squarespace and other more familiar webhosts known for their "Design Tools" and realize that most hosts provide the more "generic" TOOLs to their customers namely Wordpress, Joomla and co.

What is wrong with that?

Well nothing if you plan to use a Cadillac on an off-road excursion camping!

Wordpress is a TOOL of it's own. For content creators that will either have a BLOG or News Articles or things that require "Content Management", it makes perfect sense to use such a tool to design the RIGHT kind of website.

But for MOST people, it's too much. Too much to learn, too much to test and customize. So I decided that for my OWN website, I will use a JSON file to GENERATE the "entire" website using HTML5 only syntax. No JQuery, no Bootstrap, nothing more than "hard core" HTML5 compatible for most devices.

The process will be SIMPLE: all you do is configure the JSON to your liking and upload the required images and VOILA ... Your site EXISTS! No PHP either... I'm going to TRY to keep it as SIMPLE as possible and rely only on Javascript and HTML5.

If I MANAGE to do this... I will make my WEBSITE "code" available to DOWNLOAD FREE and at no cost to anyone. Like I said, you're not building a Cadillac ... You just want a simple website to showoff your Games (or Products) and have some nice-to-have features most of the Cadillacs HAVE but take time to customize and design.

I've already begun looking around today and have found similar features of the Cadillac but a bit different in LOOK but similar in FUNCTIONALITY. It may not be 100% but it might be 75% and maybe take YOU at most 5 minutes to understand the JSON data and 15-30 minutes to personalize it with all your CONTENT (Textual and Images). So about a half-hour of your time!

But you'll have an EXAMPLE that allows you to RAPIDLY customize and EDIT versus starting something from "nothing".

And I'm going to do ALL that work ... Just so that you don't need to!

I hope that I will be successful in DOING THIS. And make it available to use on ANY website that you wish to design. Obviously this will mean "core" Cadillac Functionality and something that just looks RIGHT and is real TIGHT in the JSON data file.

Let's see IF I can build this little website of mine and IF I do... Well then I hope to SHARE it with the people interested in their BUSINESS not editing HTML and Javascript... Cheers!

Comments

Okay ... So I have been testing some things out...

And my first MAJOR "control" would be the "slideshow". This Cadillac feature is on MOST of the current websites and is a nice way to show off some very NICE images.

The sample code I found was 75% of the REAL Cadillac Functionality.

No problemo... I've been searching and VOILA after about 1 hour of looking for a few things here and there... My sample code is 90% of the REAL Functionality.

So what was missing in the 75% code, you ask?

  • The textual label was towards the bottom of the slideshow.

This is usually reserved for the "counter/selection" of the image. I moved it to the TOP of the slideshow. Easy, no problemo.

  • Most modern websites have a TIMER and switch image automatically.

This took about 15 minutes to search and find what I needed to have a timer in standard HTML5 (and Javascript). But it turned out pretty easy and linked it to the slideshow ... And VOILA ... Automated slideshow!

  • The "counter/selection" was below the image.

This took some work and took me for a CSS loop when it took about 20 minutes to work with the code to CENTER the "counter/selection". It was a bit tricky, I needed to set the WIDTH to 100%. But I eventually got it.

  • The current version was using whole circles.

This was changed to EMPTY circles with a border thickness. But because of some overlapping CSS (active and hover), I am finally able make a WHOLE circle for the ACTIVE image in the slideshow. Exactly like the Cadillac.

  • The images fade in instead of slide (from the left or right)

This is another "drawback" from the sample code. The images fade in as opposed to sliding in from the side. Granted it's not EXACT ... Again the Cadillac has unique features to itself but the Functionality is SIMILAR and does the job for about 90% of the Cadillac version.

So far this was relatively easy to work out. And with only a slight difference from the Cadillac ... This will make a GREAT first component to the project! And it took about 1 hour to get it to 90% of the Cadillac code... So far, no need for the Cadillac if we can get our Subaru ready for some off-road action.

Keep you all posted as I advance with this project!

Note #1: One of the issues I was facing was that the timer was NOT reset when you clicked on any of the "counter/selection" and the Right/Left buttons for the slideshow. It took maybe about 10 minutes to figure out that the issue was with the "let" declaration instead of "var". "var" creates a GLOBAL variable ... Whereas "let" create only a LOCAL variable (limited to that particular bit of javascript).

Note #2: I also PREFER the "fade" animation over the scrolling because it's less temperamental. Again it's NOT the Cadillac as being EXACT ... But it is close enough to a nice "slideshow" with all the Functionality of the Cadillac.

More tinkering ... And the report is

So far it's been going pretty decent. Some features like the dropdown menus are currently "unavailable". But there is a navigation bar that looks pretty decent and it allows you to reach the TOP of page very easy (who knew it only takes one hashtag "#")... That wasted about 30 minutes of looking up a custom button to do the EXACT same thing! (Wasted time looking for ways to make it complicated when it can be SIMPLE).

I removed all the unnecessary HTML and Javascript... I need the page to be as LEAN as possible with sufficient functionality.

I've also wasted time looking for ICONS (in the Awesome Font Icon Library) for the navigation bar ... Looks pretty cool now! Must have wasted another 30 minutes looking version 5.0 and seeing that 4.7 is the release used in the samples.

I've spent about 5 hours today... Also checking e-mails and BGDF.com ... In addition to working on the website. By tonight, I should have the "drop-down" menus working too... It should be fairly realistic and I'll see what kind of "effect" I can use on them.

But the point is, this is advancing pretty rapidly. Once I have the HTML and Javascript finalized; then I can move on into breaking down the code into Objects and have them created by the JSON data file. That may take a bit while longer.

This is not my first "Rodeo". I'm very familiar with such rapid prototyping and window generation. Doing it for a website will be a FIRST but it is not like I am NOT aware what needs to be done. Just the EXACT "code" that I don't know... I know that I have things to work off of... But will that be enough IDK.

Keep you all posted as to my progress. TODAY has been FUN. And not too frustrating (usually working with CSS is a real hassle). There was some wasted time while trying to "perfect" what I got so far... But that's to be expected; HTML, CSS and Javascript are relatively OLD technologies... So people have working on similar projects no doubt...

Woah ... I hit the Jackpot with some goodies

So the "dropdown" may be for tomorrow. I've been working on "tweaking" the existing code and HTML in order to have a more "perfected" webpage. I also landed upon some goodies related to allowing the PAGE to scroll to Hashtags. Seriously this feature is amazing: one (1) line of code and AMAZING it works (all anchors now scroll)!

Obviously this is for MODERN browsers ... But it's mainly CSS3 and HTML5.

Added another image to the slideshow ... Just because four (4) images looks a bit better and I am "Designing" the GENERIC version of the webpage.

I wish there was a way that I could post my progress. In any event the whole "package" will be available to DOWNLOAD and customize (once I get the generator written and figure out the details to finalize the page).

As a recap, it's not going to be a "website". That requires multiple pages and loading pages as you visit them, etc. No, instead this will be a "WEBPAGE" with links and details ALL ON ONE HTML PAGE. I'm keeping it SIMPLE, so that it is easier for the generator to work.

Don't worry having a fancy page will still LOOK impressive and will be SUPER "flexible" with the "Raw" Object that allow you to INJECT HTML or script directly into the webpage...

I'm happy to be "coding" a bit again... It's been like 3 years since I stopped. Things have progressed GREATLY making it EASIER to do more with LESS.

Anyhow... Tomorrow I work on those "drop-down" menus! Cheers.

Note #1: Also the "Art Gallery" will be used to display the pictures of the "Team Members" (again generic photos of strangers just for the GENERIC version). Names & Titles will all be fictitious ... Because again, I want to build the webpage with what I NEED and OFFER to the rest of you.

Today was another productive day

On Day #3 (I counted Sunday when I was researching for the project)... I have managed to do quite a bit. I got the profile section done which can allow up to 5 "collaborators" (or a Team of 5 people). This is a restriction based on space... I guess it could be possible to TRIM this a little bit... We'll see.

I also got the "shopping" section completed with a sample image to excite people into going onto the "Shopping Portal" which can be configured as an "external" site (which means it supports any shopping website you may already use for sales purposes).

The contact section also is done. I added by default Facebook, Twitter, LinkedIn, Instagram, E-mail and Phone. I also added a Google Maps to show off the address of the "business" in question.

All that took about 5 hours today ... Some minor delays (with HTML classes) I had to search for that (took about 15 minutes)... Just Googling ... I also used a table and it took another 20 minutes to figure out HOW to remove the "borders".

But yeah ... It was a pretty good day! As I said, I'm working on the Functionality of the "Cadillac" and trying to keep things as simple as possible. Some of the "default" content that I added was for merely actual "business" pages (because I figured as a business some people might like Facebook et al. Or the Google Map, etc.)

I decided to NOT do drop-down menus. It is a bit of a sacrifice... But the page is going to have sufficient content and I find it's not a deterrent. Of course this is for a WEBPAGE (as I explained earlier), it's not a MULTI-PAGE website... Just a sort of BETTER than a Landing Page with information with regards to a business...

The last part remaining is the "Products & Services" section.

I'll maybe THINK about HOW I want to tackle this aspect tomorrow afternoon. Either way, I need to think about it because on a page there is limited space and you actually WANT to be able to showcase your products (and/or services) correctly.

But it's going pretty smoothly... Keep you all posted as to my progress!

I got the "products" section done yesterday afternoon

Another piece done and it looks like the website is "done". Of course like I said, the idea was to "simulate" the Functionality of "Wordpress" and heavier solutions with something ULTRA lite. So what can I say about "Webster" (That's the name of the product)???

Well it's 75% of what you would get from Wordpress. Why 75%? Because one of the NICE to have features is "Newsletters" and submitting your e-mail. The problem is that I would need to ADD PHP support for server-side file generation. With HTML5, CSS3 and Javascript, this is NOT possible. The only files you could "maybe" have are client-side files and that's not what is required for the proper functionality.

Other features that may be nice-to-have is something like NEWS ... Again we are on the client reading the HTML5 page ... And cannot read from a server-side file which could have snippets of articles and such. So maybe that takes my 1 Page effort to 50% Functionality.

But for what I need... I guess 50% should be enough. I've looked over the page and yeah... It'll do what I need it to do. BUT... Now I've got to work on the JSON generator which reads in a JSON datafile and produces the HTML5, CSS3 and Javascript for the client.

I MUST use PHP as a GENERATING app... As this is the ONLY language that allows both Associative Array being indexed by value and keywords. (Ya I know this sounds a bit technical... An important details)

Today I RE-FACTORED some of the Javascript

There was three (3) scripts that had the EXACT same Functionality ... But because of me hacking the code, I created them separately. Today I re-factored the code and now only have one (1) script with an Array and more generic code to do the hiding and displaying of elements in the webpage.

I still need to clean-up the CSS definitions. I declared a bunch of stuff and realized that I should revise all of it to ensure that it is a LEAN as possible. I may add some comments to define which block belongs to which section in the page... IDK. The verdict is still out about the GENERATOR.

As I said, you will need to have PHP. And while I require PHP, it might be a good time to create a newsletter subscription form. I will just think about it for a day and see what my thoughts are.

I dropped the "drop-down" menus. Yeah I COULD add them... But I think the website looks fine without them. Sure some people might want/need them in their webpage... But I'm going for a minimalist webpage which looks presentable and offers the functionality of Wordpress. It doesn't need to be EXACT ...

If I convert to PHP and test on my account, well I should be able to ADD the "newsletter" subscription...

In any event... Tonight, I'll work on the CSS syntax and TRY to make it look correct without any extraneous syntax.

Nice Progress!

You're definitely showing your dedication, quest...! Nice work. :)

Thank you @let-off...

I wish I could share the page. But I'm still working on it. It really does look pretty neat. I will clean-up the CSS syntax tonight. I'm a little bit tired this afternoon. Did the dishes and I'm a bit wiped-out (get it Dishes, Wipe, etc.) LOL!

Enough of my corny humor...

I'd kinda like to ADD the "Subscribe" form and a "Download our Brochure", things that some people may need. Although I doubt that EVEN I will use all the Functionality offered by the webpage, I want to "showcase" a bit just so that you can get a feel for it.

Like I said the more "components" I add to it. The more "flexible" it will be to use. The only down-side is that makes it a bit more complicate to "customize" which is the whole point of this exercise: I just want to put in some image files and some text and the page is GREAT.

Something as easy as this TBH!

Note #1: I managed to get thru the CSS syntax... Which took about 30 minutes only. The webpage looks pretty nice and the code is all TIGHT! I'm going to take a BREAK from it for now... Because I still need to figure out how I can create the "Subscription" PHP code for the webpage.

It's a bit tricky knowing that the CURRENT page requires NO PHP.

That in itself could be COOL. Not sure ... That's why I need to think about it some more.

Without PHP I cannot code the GENERATOR... So I'm figuring it should produce an "index.php" with the "Subscription" component... It's kind of a situation:

1. I would like to keep it HTML5, CSS3 and Javascript.

2. I would also like to allow for people to "subscribe" to the webpage.

#1 is cool and very simple. #2 is a bit more professional and adds on the requirement for PHP. But if I'm going to use PHP for the GENERATOR... Why not for the webpage too. I mean you CAN'T generate nothing without PHP. So making PHP a REQUIREMENT isn't the end of the world IHMO.

I'm sharing the website to get your OPINION

What I want to know is based on the FUNCTIONALITY you SEE... Do you think it should be required to have PHP for "subscriptions" or do you think it is best to have LEANER/Tighter code and only allow for HTML5, CSS3 and Javascript...?

You can DOWNLOAD the sample ZIP. It only has one HTML file and some images for the webpage. Notice this is only a HTML5 webpage... No GENERATOR yet.

https://www.questccg.com/shared_info/Websterwww.zip

Please note that this is a "work-in-progress". But you can all take a look at what I hope to have as a GENERATED webpage ... Granted I'm still thinking about the PHP or not (to subscribe or not to subscribe ... That is THE question...!)

Also feel free to COMMENT on the webpage and share your thoughts...

Cheers.

Bumping this thread...

I'd like to know what you guys think about the USE of PHP for the "Subscribers"??? Do you think it is worthwhile the HASSLE of using PHP or not!?

The DOWNLOAD URL/Link is in the comment above. In case you want to have a look at what the WEBPAGE looks like ATM. Feel free to download, this is just an Alpha of the webpage...

Many thanks for your comments/suggestions/questions! Cheers.

Take a break ... Because I have so much to do!

The Webster WWW initiative needs to take a little bit of a "break"! Why? Well I've got a lot to review for "TradeWorlds" (TW) ... Namely over 1,000 cards to see if they are all OKAY and that there are no typos or errors in numbering (for example) and that the stories are correct, etc. It is going to take three (3) passes to validate ALL of the cards from the sample.

Today I receive my "large squares" for my Investigative game too... Just had about thirty (30) minutes to setup the initial play layout with the locations. Granted there are three (3) locations not in use (at all times) but that's not a problem... Just an interesting coincidence. So I took some time just to "mock-up" a layout just with the twenty-five (25) locations and the three (3) left-over to the side. It looks pretty neat. I know they are only tiles with names. But it gives concreteness to the imaginary design...

I also have to review "Crystal Heroes" (CH) and sit down with that design and start working on the cards. We'll have to see...

TW is the priority and I need to get through all of the cards ASAP. So tonight, I will SORT the cards out... And see if I can prepare for some review tomorrow.

I wish I could work on Webster WWW initiative... To create the newsletter in PHP to connect with Recaptcha 3.0 and a back-end CSV file which can be imported into most "mailing websites"... In any event ... It may be a while before I can get back to the "website". I did do a heck of a good job with the SAMPLE (You can download the HTML and JPG files from the above link) and all of you who are interested can DOWNLOAD the Archive (.ZIP) and just extract the files... The content is pretty basic ATM.

Alright so enough for now... I should get around to SORTING all those 524 cards into the right groups/order for reviewing.

Cheers ... Ugghhh! Such a crappy task to be forced to do (I mean it's my game ... If I don't do it... Who will???)

So far so good

The AI card count of 18 is good... And I've managed to separate "CORE" Acolyte cards against "Expansion" Acolyte cards. Mostly un-sorted. This may take longer than I had initially planned. Tonight what I am committing to is to separate ALL four (4) Factions into "CORE" and "Expansion". Then put away the "Expansion" content for another pass (phase #2) ... And this means that tomorrow, I will probably SORT all of the "CORE" cards and be ready to review them by Day #3. So Separating TONIGHT and SORTING tomorrow the "CORE" cards.

Phase #2 will be sorting of "Expansion" cards and then one last pass (Phase #3) which is the back-sides and ensuring that the stories are all correct. That 3rd phase may take a little longer because that requires a different sorting order (by resource). It take BOTH "CORE" + "Expansion" cards to be put together in the correct order. So I'll do that LAST... And who cares if the cards will no longer be in order (sequential)...

That's enough effort for this SAMPLE. I just don't want it to take TOO LONG to get everything done. So it's 9:00 PM and it took about 1 hour to get all the cards into four (4) Faction Piles + AI Cards (and some other cards that I need to review on their own like the Derelict cards...)

In about 10 minutes, I will head back and continue card separation (which I plan to finish TONIGHT)! Cheers.

Update #1: Okay it took 30 minutes to divide "CORE" from "Expansion" content. I'm pleased with my progress... It's going to RAIN the next two (2) days... So I'm pretty much stuck indoors. My HOPE is to get TWO (2) Faction PROOFED: The Acolytes and the Brethren "CORE". This means SORTING them by number (which is easier during the day when there is more LIGHT) and then going on the computer and seeing if the cards look to be what is to be printed. Obviously looking at the entire FACE of each card... To make sure the flavor text is also good and no typos too...

I know I've only invested about 2 hours tonight. But that's quite a bit of time from 7:00 to 9:00 PM. I also need breaks to preserve my sanity ... because this is an awful task to do. But it has to be done ... so no more whining!

Is the site somewhere online

Is the site somewhere online beside the zip? I make websites for a living (This was my most recent site that I built in 3 days).

I also made https://hoge.report in a few days (primarily for mobile).

Actually no; it is not currently up because...

I used public images and not the images from my own requirements. I just put together the Archive (.ZIP) just to show what can be DONE without the need for Wordpress or Joomla, et al. My goal is to transform it into a PHP generator which will produce the HTML file using a JSON and PHP script that converts the JSON notation into a website.

This is not custom sites... More like cookie-cutter with your own images and text. I'm offering the Webster website site FREE once the generator has been implemented. But of course, that may take a while since I have a lot of things to take care of ATM.

What do you make your sites with? ASP, PHP or Ruby??? In any event I'm glad you make a living designing ... I'm doing it because I'm used to coding generators (I did it for my University project, the professor was shocked). I worked at one place that gave me a lot of inspiration in this direction. I also worked at another place which taught me a lot about dynamic databases, where tables are generic and the data forms the relationship (not the tables themselves). It's a bit counter-intuitive. But it works in specific contexts...

Anyhow ... The goal is to add some images and some text in a JSON file and run the script and the HTML (or PHP) page will get generated. Something really quick and neat... I will use it for my OWN website too... But I was hoping to FINISH the generator script before I do that... Cheers!

Let me know if need any help

Let me know if need any help with the generator script from a json.

No problemo

I was thinking of coding a Python Script (originally) ... Then I did some more research and the ONLY "Language" besides hard-core C/C++/C# or Java... that can allow mixed-parsing of a JSON file is PHP. Hard-core C/C++/C# would require me to use third-party JSON libraries ... And I don't want that. I wanted a language that comes with JSON full support. And so with more investigation (because I thought maybe PERL) ... Other languages ONLY allow "Key-based" interaction with the JSON data.

Like I can say (not a real language) JSON["Image"] = my_image.jpg.

That's GREAT IF the JSON format is STANDARD. Meaning the content of the JSON file follows a specific format. What I need is something like BOTH:

JSON[0] = image
JSON["Image"] = my_image.jpg
JSON["Description"] = "Some Text about this image..."

Again this is NOT real language... It's just showing you what I mean about using BOTH "Indexing" and "Keys" to search and parse the JSON file.

Don't worry a lot will be HIDDEN and the JSON format will be a bit quasi standard and a bit custom. All the header and banner stuff will be in the JSON "Header" and the "Body" will be more flexible with ordering and stuff. I want them to be like "components" almost.

I also plan to have a KEY called "Raw" which is pure 100% HTML injection. The generator will take the "Raw" KEY and just inject the HTML without any pre-processing... This is "sort of" a way to customize the JSON file even further.

But OUT-OF-THE-BOX the only language that supports mixed indexing is PHP. And so I need to have PHP script to parse the JSON file anyways ... Then I could maybe add the "sign-up" for news which REQUIRES PHP code to make that bit work...

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Syndicate content


blog | by Dr. Radut