The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »

Kekekela: Oct 28, 2004

Sab669 posted:

It lists "-webkit-device-pixel-ratio" however my CSS file uses "-webkit-min-device-pixel-ratio".

So why/how does that work?

From the MDN entry:

# ? May 25, 2017 13:56

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 04:07

Space Kablooey: May 6, 2009

Sab669 posted:

I have limited Design knowledge and found myself working on some CSS-related issues on my web application when I came across a lot of syntax I've never seen in CSS before.

I looked it up and found they're called "At-rules". Seem pretty cool/powerful, but I'm a little confused on some stuff. For example, here's the @media at-home.

It lists "-webkit-device-pixel-ratio" however my CSS file uses "-webkit-min-device-pixel-ratio".

So why/how does that work?

And furthermore, on that page below the list of Media Features they provide some examples, one of which is for the min device pixel ratio. But it's also colored in green on their example which typically implies a comment, although I'm going to assume it's just an issue with how they mark up code blocks.

Lastly, is there somewhere better than MDN for JavaScript and CSS APIs? Like I said I generally don't do much design work -- and while I do use JS plenty I don't often "do new things" that require much more of me than a cursory search of StackOverflow. Any time I do use their site I'm typically happy with the information but the CSS stuff seems to be lacking a lot of Browser Support/Compatibility information.

1) I think most, if not every, entry there has a "min" and a "max" variant, meaning that "-webkit-device-pixel-ratio" applies the media query (that is, it turns true) when the value reported by the browser is equal to whatever the value on the file. The min and max correspond to the ">" and "<" operators IIRC.

2) That's just an issue with the doc formatting I guess. It also doesn't help that the "-webkit-device-pixel-ratio" is nonstandard.

3) Welcome to Web Dev. I think MDN is still the better place for JS and CSS documentation, though.

Maybe this article can explain media queries better than the @media documentation.

Space Kablooey fucked around with this message at 14:05 on May 25, 2017

# ? May 25, 2017 14:03

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

http://kangax.github.io/compat-table/es6/ is good for checking JS feature availability and http://caniuse.com/ is good for CSS (it's less accurate/granular for JS, which is why I prefer kangax's table)

# ? May 25, 2017 14:19

Space Kablooey: May 6, 2009

Speaking of, I have some JS code that runs on Chrome, and I have to port it to run in the IE8 :negative:

runtime. I have a few function calls where I call functions while binding an object (something like this: function(){}.bind(thing)). Is there an equivalent way of calling the the bind on the functions that works in both browsers? Or at least something where the semantics are the same, so I can just do a specific branch to the IE runtime?

Space Kablooey fucked around with this message at 14:31 on May 25, 2017

# ? May 25, 2017 14:27

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

HardDiskD posted:

Speaking of, I have some JS code that runs on Chrome, and I have to port it to run in the IE8 runtime. I have a few function calls where I call functions while binding an object (something like this: function(){}.bind(thing)). Is there an equivalent way of calling the the bind on the functions that works in both browsers? Or at least something where the semantics are the same, so I can just do a specific branch to the IE runtime?

I'd just shim it because gently caress supporting that dinosaur with my own spaghetti mess

# ? May 25, 2017 14:40

Space Kablooey: May 6, 2009

It worked, thanks!

# ? May 25, 2017 15:37

huhu: Feb 24, 2006

I am working on a page where the entire contents of a table are generated on page load with a list of dictionaries in Flask/Jinja2. What is the most common way people apply CSS in this situation? My thought is to use jQuery to colorize cells based on their contents.

# ? May 25, 2017 17:32

The Fool: Oct 16, 2003

huhu posted:

I am working on a page where the entire contents of a table are generated on page load with a list of dictionaries in Flask/Jinja2. What is the most common way people apply CSS in this situation? My thought is to use jQuery to colorize cells based on their contents.

Why wouldn't you use CSS classes and/or id's as you generate the HTML.

I see literally no need for JavaScript in the example you're describing.

# ? May 25, 2017 17:35

huhu: Feb 24, 2006

The Fool posted:

Why wouldn't you use CSS classes and/or id's as you generate the HTML.

I see literally no need for JavaScript in the example you're describing.

Specific columns need different background colors and specific cells are colored based on their value. I am already using just CSS to set a base color for all TH and then alternating background colors for odd/even rows.

# ? May 25, 2017 17:44

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

huhu posted:

Specific columns need different background colors and specific cells are colored based on their value. I am already using just CSS to set a base color for all TH and then alternating background colors for odd/even rows.

I'm still unclear why you can't do it while you're generating the HTML. You know what the value of the cells are when you're "in" the template, so create the styles/classes/ids while you're generating the rest of the HTML.

# ? May 25, 2017 18:12

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

huhu posted:

Specific columns need different background colors and specific cells are colored based on their value. I am already using just CSS to set a base color for all TH and then alternating background colors for odd/even rows.

What they are saying is that using jQuery to select cells by value is an extra step, because you've already iterated through each cell and had its value in-hand when you were generating the html. You can put whatever logic you would apply with jQuery into you html generation process.

Otherwise you're essentially writing everything, forgetting what you wrote, and goingnback through it again. And jQuery is powerful, but a large number of class selectors is much slower than... not doing that.

# ? May 25, 2017 18:19

huhu: Feb 24, 2006

Snak posted:

What they are saying is that using jQuery to select cells by value is an extra step, because you've already iterated through each cell and had its value in-hand when you were generating the html. You can put whatever logic you would apply with jQuery into you html generation process.

Otherwise you're essentially writing everything, forgetting what you wrote, and goingnback through it again. And jQuery is powerful, but a large number of class selectors is much slower than... not doing that.

Ah ok, I see now. Thanks.

# ? May 25, 2017 19:14

Dominoes: Sep 20, 2007

I don't know much about Jinja, but if it were Django, I'd consider the Javascript approach; a way you could do it on the backend in Django's rigid template system is to pass a separate dict with keys associated with your table cell, and CSS classes, or style strings as their values; or mesh it into your existing data structure. The javascript approach would iterate through the cells, perhaps with something like this; The backend solution I described can be more confusing, since it may involve passing an additional data structure to the template, or altering an abstract data structure with UI-specific code.

JavaScript code:

const styleClasses = {
                                          'possibleVal1': 'green-and-fancy',
                                          'possibleVal2': 'moon-light',
                                          'possibleVal3': 'malibu-barbi'
                                      }

for (let cell of document.getElementsByClassName('table-cell')) {
    cell.classList.append(styleClasses[cell.value]) 
}

that example uses CSS classes, but it might be simpler to just use style directly, so you're not flipping back and forth between code and stylesheets:

JavaScript code:

const styleClasses = {
                                          'possibleVal1': 'green',
                                          'possibleVal2': 'white',
                                          'possibleVal3': 'pink'
                                      }

for (let cell of document.getElementsByClassName('table-cell')) {
    cell.style.backgroundColor = styleClasses[cell.value]
}

Dominoes fucked around with this message at 20:14 on May 25, 2017

# ? May 25, 2017 20:09

Tei: Feb 19, 2011

var tbody = document.createElement("tbody");

tbody.innerHTML = "<tr class='odd'></></tr><tr class='nod'></></tr><tr class='odd'></></tr><tr class='nod'></></tr>";

document.getElementById("mytable").appendChild(tbody);

# ? May 25, 2017 20:14

ModeSix: Mar 14, 2009

I'm working on an app in React-Native and I am trying to render a component with children. If I use the component directly it functions 100% as expected, but if I return it from a condition statement it doesn't render children.

Can someone please tell me what is wrong.

I've omitted styling, because it's not part of the problem.

Button.js

code:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ onPress, children }) => {
    const { buttonStyle, textStyle } = styles;
    
    return (
        <TouchableOpacity onPress={onPress}>
            <Text style={textStyle}>
                {children}
            </Text>
        </TouchableOpacity>
    );
};

It renders 100% properly when I call it like this:
App.js

code:

	render() {
        return (
            <View>
                <Header headerText="Authentication" />
                [Button]Log Out[/Button]
            </View>
        );
    }
}

But if I call it from a conditional statement it doesn't function:
App.js

code:

renderContent() {
        switch (this.state.loggedIn) {
            case true:
                return <Button>Log in</Button>;
            case false:
                return <LoginForm />;
            default:
                return <Spinner size="large" />;
        }
    }

    render() {
        return (
            <View>
                <Header headerText="Authentication" />
                {this.renderContent()}
            </View>
        );
    }
}

I have it working 100% properly via conditional usage in another component, but it won't work in this particular case. It's imported correctly because the button renders, but without the child text inside of it, thus displaying as simple a line with no label text, that is however clickable :v:

Am I doing something wrong?

ModeSix fucked around with this message at 20:52 on May 25, 2017

# ? May 25, 2017 20:48

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

ModeSix posted:

I'm working on an app in React-Native and I am trying to render a component with children. If I use the component directly it functions 100% as expected, but if I return it from a condition statement it doesn't render children.

Can someone please tell me what is wrong.

I've omitted styling, because it's not part of the problem.

I have it working 100% properly via conditional usage in another component, but it won't work in this particular case. It's imported correctly because the button renders, but without the child text inside of it, thus displaying as simple a line with no label text.

Am I doing something wrong?

A quick glance looks fine, but maybe it's something somewhere else in the code you've omitted? The only possibility I see from what you have is the binding of this, but that shouldn't be a problem there.

# ? May 25, 2017 20:53

ModeSix: Mar 14, 2009

Lumpy posted:

A quick glance looks fine, but maybe it's something somewhere else in the code you've omitted? The only possibility I see from what you have is the binding of this, but that shouldn't be a problem there.

Alright, here's the whole thing:

App.js - https://pastebin.com/PqKnTxjK

Button.js - https://pastebin.com/EnXG9cJv

I assume you don't need to see everything else such as the login form and spinner components. :v:

ModeSix fucked around with this message at 20:59 on May 25, 2017

# ? May 25, 2017 20:56

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Try this:

JavaScript code:

    renderContent(loggedInState) {
        switch (loggedInState) {
            case true:
                return <Button>Log in</Button>;
            case false:
                return <LoginForm />;
            default:
                return <Spinner size="large" />;
        }
    }

    render() {
        return (
            <View>
                <Header headerText="Authentication" />
                {this.renderContent(this.state.loggedIn)}
            </View>
        );
    }

And then read up on binding ES class methods to instances.

(Also have a think about whether the boolean logic in renderContent suits a switch statement.)

# ? May 25, 2017 21:48

ModeSix: Mar 14, 2009

The logic is working fine. It switches correctly it's just not rendering the children in the button.

Ie: Log out doesn't display inside the button. The children are empty.

ModeSix fucked around with this message at 13:22 on May 26, 2017

# ? May 26, 2017 00:41

ROFLburger: Jan 12, 2006

modesix, your example works just fine for me, but I'm not using react native. :shrug:

ynohtna posted:

Try this:

JavaScript code:

    renderContent(loggedInState) {
        switch (loggedInState) {
            case true:
                return <Button>Log in</Button>;
            case false:
                return <LoginForm />;
            default:
                return <Spinner size="large" />;
        }
    }

    render() {
        return (
            <View>
                <Header headerText="Authentication" />
                {this.renderContent(this.state.loggedIn)}
            </View>
        );
    }

And then read up on binding ES class methods to instances.

(Also have a think about whether the boolean logic in renderContent suits a switch statement.)

You may want to follow your own advice, and then have a think about how this post is entirely unhelpful

# ? May 26, 2017 17:00

Tei: Feb 19, 2011

Tei posted:

var tbody = document.createElement("tbody");

tbody.innerHTML = "<tr class='odd'></></tr><tr class='nod'></></tr><tr class='odd'></></tr><tr class='nod'></></tr>";

document.getElementById("mytable").appendChild(tbody);

I am going to quote me, because this humble post contains many hours of experience in it.

If you are creating some sort of single page web app, and when the users open the page you generated a lot of HTML and then insert in the page. DON'T directly change the DOM tree in small incremental changes, like most code examples do on the Internet, or seems the straightforward way.

Every change to the DOM tree is a very heavy weight operation. Multiple changes to it will result on some superslughish reaction times. If is truly a massive table you are inserting, it may be 12 long seconds where the whole browser/tab is completely frozen and to the user will appear exactly like a crashed tab/browser.

Instead of doing changes to the tree. You can do changes to a tree in memory. It can be a simple node. It can be a clone'd version of the stuff in the page. Then insert / replace this node to what is on the page.

So if you are using jquery or vanilla js, do things the way I describe.

Edit:
Of course, those clever kids and their angular and react frameworks don't need to care about any of this. They framework use other and smart strategies for working with the DOM tree.

Tei fucked around with this message at 17:14 on May 26, 2017

# ? May 26, 2017 17:11

Space Kablooey: May 6, 2009

Tei posted:

This is true, but the OP mentioned that the table is being generated server-side.

# ? May 26, 2017 19:31

ModeSix: Mar 14, 2009

ROFLburger posted:

modesix, your example works just fine for me, but I'm not using react native.

Something odd is happening with my reusable components.

I've noticed they work sometimes and not others and they are being implemented in exactly the same way each time.

Even when copying components to a new project they function sometimes and not others.

I think there may be some underlying problem in my development environment, though god knows what because I've never had a problem with anything else like this, except when using react-native.

For example my header component works fine in one project but not in another. If I rewrite it from scratch the exact same way it was originally written it will function (usually).

# ? May 27, 2017 14:41

LP0 ON FIRE: Jan 25, 2006; _{beep boop}

My page's body has a whole bunch of extra flab on the right side if viewed portrait on mobile. I just want it to zoom to the content's width automatically, and not scroll horizontally. All my script is on the front page: http://www.mysterysystem.com

Many thanks

edit: I edited the view port:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

In portrait now on my iPhone 6s plus the content goes beyond the screen width. Doesn't seem to do what it's told there..

edit 2! Looks like it is working better for mobile. It was the canvas and controls that was a problem.

LP0 ON FIRE fucked around with this message at 23:20 on May 27, 2017

# ? May 27, 2017 17:01

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

We've been discussing something in the the coding horrors thread starting here which is apropos to this thread: How Medical Tech Gave a Patient a Massive Overdose

# ? May 29, 2017 17:41

Janitor Prime: Jan 22, 2004; PC LOAD LETTER

What da fuck does that mean; Fun Shoe

Thermopyle posted:

We've been discussing something in the the coding horrors thread starting here which is apropos to this thread: How Medical Tech Gave a Patient a Massive Overdose

Such a good read. Thanks for that

# ? May 31, 2017 05:55

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

So, this is a really noob question I'm sure.

I don't know anything at all about animation and transformation. I mean, I've used jquerys fadein/out and thats about it.

I have a small form that I'd like to animate and transform into a plain card presenting its info when its filled out. If possible, what do I need to do to animate/transition from a smattering of various <input> types to some styled HTML...maybe some <li> elements or whatever with some styling on them?

I'm not only interested in learning an easy way to do this task, but I'd also like to learn more about the subject in general...

# ? Jun 1, 2017 00:59

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

One of the key things to understand about animating in websites is there's no one way to do it.

- CSS transitions
- CSS animations
- JavaScript driven animations of CSS properties
- SVG animations (also usually driven by CSS & JS)

When you animate, usually the first thing you determine your main states, so say you know your start state, and your end state. Can you style both those states using pure CSS? Well then you're in CSS transition town most likely. All you need is a container class that switches between the two states, and then you can put transition rules on all the properties you want to animate.

From there it gets more complicated, you may have to calculate animations using JavaScript, there are good tools out there like Velocity js. Going from there though, you have green sock animation platform, which is best suited for big set piece animations but I've never really used it.

Regardless of the method used though, I think it always comes back to understanding your 'keyframes' of state, what it looks like and what CSS/HTML was required to make it look like that, and then efficiently coding the animation between those states.

Efficient means preferring non layout transitions. Opacity and transforms are 'layer' based and that means hardware can do a great job with them. Colour operations are 'paint' and are a shade more expensive. Height, width, fonts, etc are all 'layout' based and are the most expensive transitions to execute, and as such should be limited where possible, but it depends on the context.

Desktops can hold their frames way better than mobile devices, so you should really limit mobile stuff to 'layer' operations as far as practicable if you want to hold your 60 fps or whatever. This also means understanding where your animation falls in relationship to the app 'thinking', maybe you defer the actual 'post' until the animation is done, it always depends on circumstance. Or progressive animation can hide bits of your app that are slow because an Ajax request is behind it.

I guess I'm saying there's lots to learn but the important thing is to start with some basics I think, like the aforementioned CSS transitions, because there is no silver bullet animation technique.

Maluco Marinero fucked around with this message at 07:20 on Jun 1, 2017

# ? Jun 1, 2017 03:38

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

Thermopyle posted:

So, this is a really noob question I'm sure.

I don't know anything at all about animation and transformation. I mean, I've used jquerys fadein/out and thats about it.

I have a small form that I'd like to animate and transform into a plain card presenting its info when its filled out. If possible, what do I need to do to animate/transition from a smattering of various <input> types to some styled HTML...maybe some <li> elements or whatever with some styling on them?

I'm not only interested in learning an easy way to do this task, but I'd also like to learn more about the subject in general...

CSS Transforms and Animations don't allow you to change one set of markup into another. That would be way outside the scope of CSS. It just lets you change the appearance of your markup. You'll need to use some really nasty JS, probably something like React, to do what you're suggesting here.

Saying that, if it's really just a different look=-and-feel you're going for, you could keep the markup as-is and use CSS to make it look like a card with a list of items on it.

# ? Jun 1, 2017 09:26

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

This is on a business partner's site, not ours, but I was still curious what you guys think.

Their server basically serves everything up as a GUID named jpg, regardless of what format the file actually. I downloaded some product photos to edit, and I couldn't open them in Photoshop until I changed the extension to PNG (I double checked the file header to figure this out). The browser seems to know what to do regardless, but the actual mime type being passed is image/jpeg instead of image/png. Is this going to cause problems for them? I'm not sure if it's something I should warn them about or not.

# ? Jun 1, 2017 23:39

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Scaramouche posted:

This is on a business partner's site, not ours, but I was still curious what you guys think.

Their server basically serves everything up as a GUID named jpg, regardless of what format the file actually. I downloaded some product photos to edit, and I couldn't open them in Photoshop until I changed the extension to PNG (I double checked the file header to figure this out). The browser seems to know what to do regardless, but the actual mime type being passed is image/jpeg instead of image/png. Is this going to cause problems for them? I'm not sure if it's something I should warn them about or not.

As I've written something that does basically this, they probably did not think to store the mimetype in the database they serve the images up from, and so their API just uses a fixed image/jpeg. Might be worth mentioning if it was truly overlooked.

# ? Jun 2, 2017 01:35

fsif: Jul 18, 2003

I hope this isn't an inappropriate request here, but I'm having trouble with my simple jQuery script running on my iOS devices (both Chrome and Safari).

The script controls the behavior of a navbar (#traveler) that appears when a user begins to scroll up when they are far down the page, but disappears when a user continues to scroll down, or when the original navbar at the top of the page is visible.

code:

var previousScroll = 0;

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > 200 ) {
        if (currentScroll > previousScroll) {
            $('#traveler').fadeOut(100);
        } else {
            $('#traveler').fadeIn(200);
        }
    } 

 //ensure my animations finish
    setTimeout( function() { previousScroll = currentScroll}, 200);
 
 //vanish if user scrolls to top
    if (currentScroll < 200) {
        $('#traveler').slideUp(100);
    }
});

Works perfectly on desktop, but I don't know what's getting lost on mobile devices. I'm *guessing* the issue is with the selector? But I haven't seen anything about using window causing issues when I do a Google search.

(Also, I can link to my codepen if that's easier.)

# ? Jun 3, 2017 17:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

fsif posted:

I hope this isn't an inappropriate request here, but I'm having trouble with my simple jQuery script running on my iOS devices (both Chrome and Safari).

The script controls the behavior of a navbar (#traveler) that appears when a user begins to scroll up when they are far down the page, but disappears when a user continues to scroll down, or when the original navbar at the top of the page is visible.
code:
var previousScroll = 0;

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > 200 ) {
        if (currentScroll > previousScroll) {
            $('#traveler').fadeOut(100);
        } else {
            $('#traveler').fadeIn(200);
        }
    } 

 //ensure my animations finish
    setTimeout( function() { previousScroll = currentScroll}, 200);
 
 //vanish if user scrolls to top
    if (currentScroll < 200) {
        $('#traveler').slideUp(100);
    }
});
Works perfectly on desktop, but I don't know what's getting lost on mobile devices. I'm *guessing* the issue is with the selector? But I haven't seen anything about using window causing issues when I do a Google search.

(Also, I can link to my codepen if that's easier.)

Googling "iOS window scroll jQuery" showed me many solutions to this common problem. Here's a couple:

https://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad
https://stackoverflow.com/questions/18753367/jquery-live-scroll-event-on-mobile-work-around

# ? Jun 3, 2017 21:23

fsif: Jul 18, 2003

God, thank you! Everything I found was talking about problems when using body as a selector, so I was on the wrong track.

# ? Jun 3, 2017 21:39

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

fsif posted:

God, thank you! Everything I found was talking about problems when using body as a selector, so I was on the wrong track.

No worries! I have that happen all the time, I find 293812321 solutions for a slightly similar but not quite my problem, then someone else says "why didn't you google X?" It's like seeing typos... you can never find your own, but a second set of eyes can do it instantly.

# ? Jun 3, 2017 21:49

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Haha yeah sometimes the solution is just in knowing what to Google.

# ? Jun 5, 2017 08:45

Tei: Feb 19, 2011

I wonder if theres a pure CSS solution to what you want to do. Considering mobile devices are mentioned, they usually hate anything Jquery + scroll related with a passion of 1000 suns.

You can do this:
Check a website that have this effect, inspect the code to see how is called. Then use that term to google "<foo> pure CSS solution" that foo thing.

# ? Jun 5, 2017 13:28

Honest Thief: Jan 11, 2009

I need to find some lightweight solution to implement a sort of CSM that non-tech people can easily edit content on multiple static websites and then push onto S3.
Basically, right now the whole workflow is a bit daft and slow, sometime ago someone decided to use jekylll as a quick static site generator and the content changes would be requested to anyone with time and some kownledge of the hellish folder structure and update it; so yeah, I want to change that into something more lean and efficient.
Any suggestions?

I've been looking into keystone.js but it might be overkill.

# ? Jun 5, 2017 16:35

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Honest Thief posted:

I need to find some lightweight solution to implement a sort of CSM that non-tech people can easily edit content on multiple static websites and then push onto S3.
Basically, right now the whole workflow is a bit daft and slow, sometime ago someone decided to use jekylll as a quick static site generator and the content changes would be requested to anyone with time and some kownledge of the hellish folder structure and update it; so yeah, I want to change that into something more lean and efficient.
Any suggestions?

I've been looking into keystone.js but it might be overkill.

I was just headed down this path a few months ago, but unfortunately nothing really compelling came up. The candidate with the most potential for "a CMS but for a static site" was https://www.siteleaf.com/, but it's not the most intuitive setup. That said, it does support deploying to S3 (among others) so it might actually work for what you need.

# ? Jun 5, 2017 16:41

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 04:07

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Maluco Marinero posted:

animation stuff

Thanks for this high level overview, it's helpful!

Sergeant Rock posted:

CSS Transforms and Animations don't allow you to change one set of markup into another. That would be way outside the scope of CSS. It just lets you change the appearance of your markup. You'll need to use some really nasty JS, probably something like React, to do what you're suggesting here.

Saying that, if it's really just a different look=-and-feel you're going for, you could keep the markup as-is and use CSS to make it look like a card with a list of items on it.

Yeah, just to be clear I'm not so clueless that I thought CSS could change markup! I know how to change markup in a dozen different ways...it's really making that change look good that I'm thinking about. It's a pretty harsh experience for the user for the markup to just change in like 0 ms.

In the ideal world I'd have the knowledge and skills to implement this idea that I have in my head: When user clicked "add" button on form, the data on the form would animate/move from the form over into a card located in a tray-like area on the side of the page while leaving the form in-place for adding a new item. Kind of like how in several operating systems when you minimize/restore a window it animates into/out-of its icon the dock/taskbar.

Currently I fade the form data out, and fade the card in. I'd really like to make the connection between the form and the card more explicit with the effect I describe above...

Also, when I asked in this thread about alternatives to bootstrap someone recommended SemanticUI. Thanks for that recommendation. This is nice and already has a decent React implementation...and its maintained by the SemanticUI project itself unlike the various React/Bootstrap integrations out there.

Thermopyle fucked around with this message at 17:43 on Jun 5, 2017

# ? Jun 5, 2017 17:41

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›361 »