Tinkering with a Web Page (stellar records, etc)

anikaiful · Mar 31, 2016

Thought to make a 'stellar records' web thingummywut. Take a peek; http://scifi.linkpc.net/sr. It's somewhat in spirit of the http://universalcartographics.org but in very minimalistic/streamlined form.

There's not much of any sort of data around yet in the db, so it's mainly a showcase of appearance and some basic functionality for now.

Ideas and such are welcome - some might be implemented at some point in the future, some might not. But as it stands, speed and minimalism (without compromising amount of data) is the main key and thus there won't be flashy graphics or alike.

One reason for very minimalist approach is that I'm planning the page to be useful with/for small screen mobile devices someday, etc. Another is sheer speed - "need more speed!" - personally I like pages which respond as close to instantly as possible and which don't make me wait for any reason whatsoever.

The page and server-side code is pretty much constant WIP, so anything you see on the page (or in its source .js/.css/.html) is bound to change without notice.

*) posting new entries is not available publicly; I've restricted it to work only locally until I've foolproofed the code.

anikaiful · Apr 1, 2016

And some preliminary tinkering to squeeze stuff into various mobile formats...

I don't have access to other mobile devices than my cellphone (Nokia 320) with a 320x240 screen, so mileage with other mobiles varies for now (a lot).

edit: seriously surprised that my cellphone actually works with jQuery without dying horribly in flames.

edit#2: if someone knows how to do an (almost) exact replica of jQuery's slideToggle(), slideUp(), slideDown() and animate() functions, in what comes to what they do -- in a *portable* manner so that they work with almost anything that can browse web -- throw me a PM (or just reply here) - those functions are the only reasons I use jQuery at all anyway (everything else I can/could and do know how to do without it). I could weasel the code out of jQuery itself, but extracting code like that feels rather "unethical" (and would probably infringe a copyright here or there), so I'm not resorting to such.

Jackie Silver · Apr 1, 2016

My suggestion is to divide all star records into proc-gen stars vs handplaced catalogue stars, and to add in extra categories specifically for the giant stars.

Those are areas where UC (which is otherwise great) is lacking, because it doesn't allow you to look at records as they pertain to e.g. main sequence stars - there's no way to find the largest main sequence K star, you'll get some bloated giant instead. And it'll probably be a hand-placed one that's not representative of anything you'll find away from the Bubble.

(edited to add) If you want raw data, the ship's log in my sig has a bunch, though it's not of record-breakers per se you should be able to find plenty of placeholders. There's a few stars in there which have been pulled directly from UC, I keep meaning to add more.

narheth · Apr 1, 2016

Just a few observations really (only regarding the css)

Using absolutely positioned elements will generally break the experience on a mobile device.

You can also use the web browser to scale the page for specific sizes. Just use the 'inspect element' or whatever it is on the browser you are working with and scale the page until the body is the width you need for that viewport (You will need to use the 'computed' setting in the inspector.

If you are working outwards from a mobile perspective it's best to leave all sizing elements out until you reach that viewport eg...

@media only screen and (min-width: 300px) {
/* phone stuff */
}

@media only screen and (min-width: 480px) {
/* landscape & small tablet stuff */
}

@media only screen and (min-width: 768px) {
/* tablet stuff */
}

@media only screen and (min-width: 1024px) {
/* desktop stuff */
}

If you use min-width this way, all the overrides happen as the viewport is expanded so leave sizes and positioning for the larger viewports and should 'Just Work' (tm). These are also pretty standard viewports. The 480px will cover up to 767 etc...

iain666 · Apr 1, 2016

Alternatively, you can just use bootstrap and let it worry about screen size...

anikaiful · Apr 1, 2016

Jackie Silver said:
My suggestion is to divide all star records into proc-gen stars vs handplaced catalogue stars, and to add in extra categories specifically for the giant stars.

Those are areas where UC (which is otherwise great) is lacking, because it doesn't allow you to look at records as they pertain to e.g. main sequence stars - there's no way to find the largest main sequence K star, you'll get some bloated giant instead. And it'll probably be a hand-placed one that's not representative of anything you'll find away from the Bubble.

(edited to add) If you want raw data, the ship's log in my sig has a bunch, though it's not of record-breakers per se you should be able to find plenty of placeholders. There's a few stars in there which have been pulled directly from UC, I keep meaning to add more.

Well, the DB itself records each and every bit of data there is present - so categorizing isn't a problem. So yes, what you suggest is but a matter of telling the server what sort of data is wanted. The few current test cases are but placeholders to keep functionality in check. With some query formatting I can derive data like 'largest rocky body with exatly one moon (and no more) and at least three rings'.

If you would mind to send me the data in raw format, as PM, I could bolt them in and see how the thing behaves itself.

- - - - - Additional Content Posted / Auto Merge - - - - -

narheth said:
Just a few observations really (only regarding the css)

Using absolutely positioned elements will generally break the experience on a mobile device.

You can also use the web browser to scale the page for specific sizes. Just use the 'inspect element' or whatever it is on the browser you are working with and scale the page until the body is the width you need for that viewport (You will need to use the 'computed' setting in the inspector.

If you are working outwards from a mobile perspective it's best to leave all sizing elements out until you reach that viewport eg...

@media only screen and (min-width: 300px) {
/* phone stuff */
}

@media only screen and (min-width: 480px) {
/* landscape & small tablet stuff */
}

@media only screen and (min-width: 768px) {
/* tablet stuff */
}

@media only screen and (min-width: 1024px) {
/* desktop stuff */
}

If you use min-width this way, all the overrides happen as the viewport is expanded so leave sizes and positioning for the larger viewports and should 'Just Work' (tm). These are also pretty standard viewports. The 480px will cover up to 767 etc...

I'm no master of CSS, but if I understand those right, min-width clause says "if width is less than this, then okay - ignore the higher values"? I used the 'device-width: 320px' in the (so far solo entry) as that's the width of my cellphone's screen.

anikaiful · Apr 1, 2016

iain666 said:
Alternatively, you can just use bootstrap and let it worry about screen size...

Mind to elaborate...?

Boogyman · Apr 1, 2016

This should get you started on the animations. I haven't tested it for browser compatibility, but its a decent starting point:

#box{
display: inline-block;
height: 200px;
width: 200px;
background-color: orange;
transition: all .5s;
}

#box.hidden{
height: 0;
opacity: 0;
transition: all .5s;
}

<div><input type="button" value="Vertical Slide & Fade" onClick="document.getElementById('box').classList.toggle('hidden');"/></div>
<div id="box"></div>

anikaiful · Apr 1, 2016

Boogyman said:
This should get you started on the animations. I haven't tested it for browser compatibility, but its a decent starting point:

#box{
display: inline-block;
height: 200px;
width: 200px;
background-color: orange;
transition: all .5s;
}

#box.hidden{
height: 0;
opacity: 0;
transition: all .5s;
}

<div><input type="button" value="Vertical Slide & Fade" onClick="document.getElementById('box').classList.toggle('hidden');"/></div>
<div id="box"></div>

Hmm that does work, to an extent, even with my dinosaur-age cellphone - just that the anim part is missing (toggle is instant) unlike in my Chrome where the transition is smooth. (http://scifi.linkpc.net/slide-test.html)

narheth · Apr 1, 2016

anikaiful said:
I'm no master of CSS, but if I understand those right, min-width clause says "if width is less than this, then okay - ignore the higher values"? I used the 'device-width: 320px' in the (so far solo entry) as that's the width of my cellphone's screen.

Absolutely that! Was just chipping in a little help on the device front to save you worrying about testing and checking all of them

*EDIT!

Fudge! Just spotted a grave error on my part, for the viewport to be recognised correctly you will need this is your <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
should have mentioned that earlier, sorry!

narheth · Apr 1, 2016

I believe what iain666 is referring to is this http://getbootstrap.com it's a pretty robust, but very tag soup framework for creating dynamic-ish web pages. You would have to do everything their way to get your site to work. On paper it's pretty awesome for large web based applications, but it's structure can be very limiting for small scale sites.

iain666 · Apr 1, 2016

Yep - that's the one.

Boogyman · Apr 1, 2016

anikaiful said:
Hmm that does work, to an extent, even with my dinosaur-age cellphone - just that the anim part is missing (toggle is instant) unlike in my Chrome where the transition is smooth. (http://scifi.linkpc.net/slide-test.html)

That is expected. Older browsers do not support the CSS3 Transition attribute. If you want to support older browsers, then the effort of rolling your own animations probably outweighs the value of eliminating the jQuery dependency. Too many browsers and browser versions to test, too difficult to obtain copies of them, etc. For your purposes, it is probably safe to assume that most users will have a modern browser, and to allow those that do not to fall back to the features they do support.

CSS3 Transition support: http://www.w3schools.com/css/css3_transitions.asp
Browser stats: http://www.w3schools.com/browsers/browsers_stats.asp

anikaiful · Apr 2, 2016

narheth said:
Absolutely that! Was just chipping in a little help on the device front to save you worrying about testing and checking all of them

*EDIT!

Fudge! Just spotted a grave error on my part, for the viewport to be recognised correctly you will need this is your <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
should have mentioned that earlier, sorry!

Will see if that works with my cell. If it does, then it likely works with anything.

- - - - - Additional Content Posted / Auto Merge - - - - -

Boogyman said:
That is expected. Older browsers do not support the CSS3 Transition attribute. If you want to support older browsers, then the effort of rolling your own animations probably outweighs the value of eliminating the jQuery dependency. Too many browsers and browser versions to test, too difficult to obtain copies of them, etc. For your purposes, it is probably safe to assume that most users will have a modern browser, and to allow those that do not to fall back to the features they do support.

CSS3 Transition support: http://www.w3schools.com/css/css3_transitions.asp
Browser stats: http://www.w3schools.com/browsers/browsers_stats.asp

Aside of supporting some mobile devices, I'm not terribly interested in supporting old (or non-standard) browsers anyway - if people don't upgrade their stuff it's not my problem, so to speak

Boogyman · Apr 2, 2016

Good luck with the site. Let us know how it turns out, or if you have more questions.