The Web Design & Development Megathread

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

«‹›361 »

Impotence: Nov 8, 2010; Lipstick Apathy

Yoast is hot garbage, not to mention the ad injections, takeover of the entire wp-admin console for advertising, and intentionally disabling wordpress sitemaps permanently, including after you uninstall yoast, just to gently caress you so you have to reinstall it (or figure out how to reenable wp-sitemap natively via DB or PHP calls). Avoid anything by them. Scum.

Though that is pretty much par for the course for anything in the SEO industry, it's 99% snake oil and rubbish fire piles like this.

# ? Dec 14, 2020 22:07

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 19:13

Tei: Feb 19, 2011

Dominoes posted:

You could have the MDN docs memorized and still have the reaction.

Simplest approach:
- Install the latest version of Webpack
- Install the latest version of Typescript

Make a `tsconfig.json` file in the root that looks somewhat like this:
JSON code:
{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./main/static/dist",
    "lib": ["es2017", "dom"],
    "module": "esnext",
    "target": "es6",
    "experimentalDecorators": true,
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": false,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": false,
    "allowSyntheticDefaultImports": false,
    "declaration": true
  },
  "include": [
    "./frontend_ts/**/*"
    ],
  "exclude": [
    "node_modules",
    "build",
    "dist"
  ]
}
Make a `webpack.config.js` in the root that looks somewhat like this:
JavaScript code:
const webpack = require('webpack');

module.exports = {
    entry: {
        my_page_1: "./frontend_ts/page1.tsx",
        my_page_2: "./frontend_ts/page2.tsx",
        // ... etc
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/main/static/dist"
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            }
        ]

    },

    resolve: {
        extensions: [".tsx", ".ts", ".js", ".wasm"]
    },
    mode: "development",

    devtool: "source-map"
}
- Run webpack --watch

This will #1: Convert TS to JS. #2: Convert React's JSX syntax to JS. In the example above, the built files will be placed in `/static/dist`. Whenever you change one of the relevant files, it will be rebuilt, as long as the `webpack` process is running.

Somebody write a article with this!

# ? Dec 14, 2020 22:15

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Empress Brosephine posted:

From what I've read, gatsbyjs is not very good for SEO either. I'm in the exact same situation as you, although they're not obsessed with google page speed. I just stick to wordpress. I've thought about a headless wordpress but clients like being able to go in and make changes in their own.

It sucks being stuck in the PHP era because its tools have the most user-friendly stuff, i.e. Wordpress.

Biowarfare posted:

Yoast is hot garbage, not to mention the ad injections, takeover of the entire wp-admin console for advertising, and intentionally disabling wordpress sitemaps permanently, including after you uninstall yoast, just to gently caress you so you have to reinstall it (or figure out how to reenable wp-sitemap natively via DB or PHP calls). Avoid anything by them. Scum.

Though that is pretty much par for the course for anything in the SEO industry, it's 99% snake oil and rubbish fire piles like this.

Any alternatives? They like SEO and I could probably get them to switch if I could provide a reason and alternative. I just focus on making the site look good when I hand it off, anything extra they do such as installing Yoast or who even knows what else is on them.

# ? Dec 14, 2020 22:52

prom candy: Dec 16, 2005; Only I may dance

Combat Pretzel posted:

It's more of a thing, where on a traditional desktop UI framework, you go about button1.Text = "foo" whereas whatever I tried earlier, I either have to jump through weird design hoops as suggested by prom candy earlier, at least with React and Material UI, anyway, or just go "gently caress you" and bypass everything by setting innerHTML via DOM.

"Weird design hoops?" Did you actually read my post or just glance at the code example and go "oh no i'm much too smart for this."

# ? Dec 14, 2020 22:54

Empress Brosephine: Mar 31, 2012; by Jeffrey of YOSPOS

I've been using RankMath instead of yeost but they just implemented a paid version so I guess we'll see

# ? Dec 14, 2020 22:57

Tei: Feb 19, 2011

I got a job to force a wp plugin to encrypt his data, that I did. The customer made me available a copy of his wp installation that I rehydrated.

Of gently caress me!, that thing had like 15 plugins, the control panel was a bazaar of stuff.

I understod enough about how data was stored for posts and metaposts to encrypt the data has I was requested, but my impression of both WP and PHP is that are enabled, enablers of some terrible computer habits (vice's?)

# ? Dec 14, 2020 23:07

Impotence: Nov 8, 2010; Lipstick Apathy

Tei posted:

I got a job to force a wp plugin to encrypt his data, that I did. The customer made me available a copy of his wp installation that I rehydrated.

Of gently caress me!, that thing had like 15 plugins, the control panel was a bazaar of stuff.

I understod enough about how data was stored for posts and metaposts to encrypt the data has I was requested, but my impression of both WP and PHP is that are enabled, enablers of some terrible computer habits (vice's?)

Yeah you can hand over a perfect composer.json-driven roots/bedrock project for WP and they'll go ahead and install every lovely SEO plugin that adds hilarious vulnerabilities and every single plugin injects its own obfuscated malicious ad-packed casino backlink into the footer

# ? Dec 14, 2020 23:37

Opulent Ceremony: Feb 22, 2012

Hoping this is the most appropriate thread for this question: Is anyone here familiar with modern Smart TV app development? My company had me make an app for the Amazon app store (specifically for Fire TV and Fire TV Stick) and wants to branch out into different Smart TV app stores, Samsung, Vizio, LG etc.

Making the Amazon one was simple since they have the concept of a store app that simply points to a url for the content, so I made a regular web app, did some platform-specific customization with their js SDK and pointed the store app at my page. I suppose I'm hoping there is something similar for these other app stores, but if not it's at least easy to find each individual Smart TV app store's development documentation.

Since I knew I wanted to develop for more than one platform, I started looking around for cross-platform solutions, and found things like https://github.com/Samsung/cordova-plugin-toast, https://github.com/mautilus/sdk, and https://github.com/interfaced/zombiebox. It isn't currently clear to me how some of these tools help the cross-platform development process (I see build tools for individual platforms with most of them, so I suppose it might convert some of their generic API stuff into something useful for the platform and create an appropriate package for uploading maybe?), and most seem like they haven't been updated in quite some time.

I was hoping there was someone doing multi-platform Smart TV app development in here that could give me a good idea of where to start, given my situation.

# ? Dec 14, 2020 23:43

RadiRoot: Feb 3, 2007

LifeLynx posted:

I do the same with Intersection Observer and data attributes. It needs a polyfill for IE 11, but that might be more lightweight than Waypoints, I'm not sure.

Intersection Observer is the poo poo.

code:

const options = {
    root: null,
    rootMargin: '0% 0% 0% 0%',
    threshold: 0
};

const handleIntersect = (entries, observer) => {
    for (const entry of entries) {
        if (entry.isIntersecting) {
            setTimeout(() => {
                // function here
            }, 1);
        } else {
            setTimeout(() => {
                // function here
            }, 1);
        }
    }
};

const observer = new IntersectionObserver(handleIntersect, options);

observer.observe(section);

RadiRoot fucked around with this message at 07:21 on Dec 15, 2020

# ? Dec 15, 2020 07:18

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

prom candy posted:

"Weird design hoops?" Did you actually read my post or just glance at the code example and go "oh no i'm much too smart for this."

I�ve read it. I just find it weird on the first glance, because of years doing it differently/seemingly easier.

�edit: I guess it�s similar to data binding I�ve done in the past on WPF/UWP.

Combat Pretzel fucked around with this message at 09:17 on Dec 15, 2020

# ? Dec 15, 2020 09:12

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

In JSX/TSX, is it possible to give components, that are created globally, names to address them with later in JavaScript/TypeScript? �edit: Those are refs apparently?

Also, on the same notion, is it possible to make something like this work:

let x: SomeComponent = <SomeComponent />;

Typed variable to be able to access functions.

Combat Pretzel fucked around with this message at 14:22 on Dec 15, 2020

# ? Dec 15, 2020 14:09

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

Combat Pretzel posted:

In JSX/TSX, is it possible to give components, that are created globally, names to address them with later in JavaScript/TypeScript? �edit: Those are refs apparently?

Also, on the same notion, is it possible to make something like this work:

let x: SomeComponent = <SomeComponent />;

Typed variable to be able to access functions.

Sort of, and Yes. For the latter you just need to make sure the variable name starts with a capital letter. You can't "access functions" inside it though.

Refs are not global in scope unless you create them at the root of the app, but having a bunch global components you reference elsewhere seems very much like a bad idea, and I'd evaluate if you are forcing a pattern onto React it is not suited for. React is a way to render application state. It should not be much more than that.

Lumpy fucked around with this message at 14:38 on Dec 15, 2020

# ? Dec 15, 2020 14:33

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Whoops, by global I meant accessible within the page. It's mostly my olden ways trying to figure out a way to drop a new React component into a container element, e.g. press button, drop <MakeAList /> into some place. To have the ability to call a setContent function, you'd need to address the object. I've yet to understand all the state stuff and getting it to update.

Lumpy posted:

You can't "access functions" inside it though.

Oh, well then.

Combat Pretzel fucked around with this message at 17:15 on Dec 15, 2020

# ? Dec 15, 2020 17:10

Impotence: Nov 8, 2010; Lipstick Apathy

Combat Pretzel posted:

Whoops, by global I meant accessible within the page. It's mostly my olden ways trying to figure out a way to drop a new React component into a container element, e.g. press button, drop <MakeAList /> into some place. To have the ability to call a setContent function, you'd need to address the object. I've yet to understand all the state stuff and getting it to update.

Oh, well then.

No idea if it's the best as I don't react often, but the way I usually do this is similar to:
- Pre-init state containing an empty array
- A map/foreach on that empty array to render a list where it should be. This would be blank, since it's iterating on 0 items. You can return a <Something x=y /> from a {.map}
- Button press pushes a new object/array into the aforementioned state

# ? Dec 15, 2020 17:31

marumaru: May 20, 2013

Combat Pretzel posted:

To have the ability to call a setContent function, you'd need to address the object. I've yet to understand all the state stuff and getting it to update.

could you maybe pass the content as a prop?

# ? Dec 15, 2020 17:42

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

Combat Pretzel posted:

Whoops, by global I meant accessible within the page. It's mostly my olden ways trying to figure out a way to drop a new React component into a container element, e.g. press button, drop <MakeAList /> into some place. To have the ability to call a setContent function, you'd need to address the object. I've yet to understand all the state stuff and getting it to update.

Oh, well then.

Combat Pretzel posted:

Whoops, by global I meant accessible within the page. It's mostly my olden ways trying to figure out a way to drop a new React component into a container element, e.g. press button, drop <MakeAList /> into some place. To have the ability to call a setContent function, you'd need to address the object. I've yet to understand all the state stuff and getting it to update.

Oh, well then.

I think you are very much trying to use React like Some Other Thing� (which is what most people who start learning React coming from another world do!). Your state should know if you need to MakeAList or not. Where this state is stored will depend on a lot of things. The simplest case is local state, stored in a component itself. The most basic example of this looks something like:

JavaScript code:


import React, { useState } from 'react';
import MakeAList from "path/to/MakeAList";

const App () => {
  const [showList, setShowList] = useState(false);
  const toggleList = setShowList(!showList);
 return (
    <div>
	<button onClick={toggleList}>Toggle List</button>
	{showList && <MakeAList />}
    </div>
  )

}

So there is some state in "showList" and based on that state, we render MakeAList or not. That's it. If the value of "showList" is set in one part of the app and used in another, you'll have to determine how best to manage that state (i.e. React.Context or a state management solution like Redux) but in the end it is no different. You don't create a MakeAList and store it in a var and then use that instance in many places. Sorry if this is too basic or whatever; not trying to be condescending or anything, but in some way React is so simple it seems harder than it is.

EDIT: I can put the code back in there!!

Lumpy fucked around with this message at 14:04 on Dec 16, 2020

# ? Dec 15, 2020 17:54

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

JavaScript code:

/// SA Is blocking my ability to put the tags in here =)
   // but imagine there is a DIV with a BUTTON in there 
    // button has an onClick of 'toggleList' and then 
   // based on showList you render MakeAList
  )

}

lmao

# ? Dec 15, 2020 18:22

prom candy: Dec 16, 2005; Only I may dance

Generally you don't want to be changing the DOM "outside" of React. Your view represents your state, so if you want to change your view you need to change your state. If you start changing the DOM by grabbing a ref to something and setting innerHTML or whatever React will no longer be able to properly do its vdom diffing and at that point you're basically just not using React anymore.

React is declarative. Your job is to tell it "if my state is this, then it should look like this. if my state is that, then it should look like that." React takes care of actually mutating the DOM to reflect the new state. React does give you refs because sometimes you do need to interact with the actual elements, but you shouldn't need to use them very often.

# ? Dec 15, 2020 18:26

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

Grump posted:

lmao

Yeah, at first I thought I got banned or something, but if I post HTML tags in any way shape or form I get a YOU HAVE BEEN BLOCKED message. Which is odd since I could do it yesterday! I made a thread in the tech support forum, so maybe it will get fixed at some point...

# ? Dec 15, 2020 18:26

marumaru: May 20, 2013

Lumpy posted:

Yeah, at first I thought I got banned or something, but if I post HTML tags in any way shape or form I get a YOU HAVE BEEN BLOCKED message. Which is odd since I could do it yesterday! I made a thread in the tech support forum, so maybe it will get fixed at some point...

heh i got the same thing yesterday and thought i'd been banned in some way as well

# ? Dec 15, 2020 18:46

frogbs: May 5, 2004; Well well well

This might be a really dumb question but...

How common is it to have a staging/development install on the same server as production? I raised this as an issue years ago, but the powers that be didn't want to pay for a separate MSSQL and Kentico license, so our vendors set everything up on the same VM's. Now we're running into resource issues and i'm afraid testing on the dev sites could impact the production sites, which are somewhat high traffic (5 million pageviews/month).

Thoughts from more competent people welcome. Thank you!

# ? Dec 15, 2020 19:23

spiritual bypass: Feb 19, 2008; Grimey Drawer

frogbs posted:

This might be a really dumb question but...

How common is it to have a staging/development install on the same server as production? I raised this as an issue years ago, but the powers that be didn't want to pay for a separate MSSQL and Kentico license, so our vendors set everything up on the same VM's. Now we're running into resource issues and i'm afraid testing on the dev sites could impact the production sites, which are somewhat high traffic (5 million pageviews/month).

Thoughts from more competent people welcome. Thank you!

Just like what you're experiencing, it's fine to run multiple applications (or environments) on one host until resources become a problem. Naturally it's better to migrate into separate hosts before resource contention comes into play. You should ask the people making the money decisions whether it's better to spend money on licenses and hardware or if it's better to experience unpredictable, uncontrollable downtime.

# ? Dec 15, 2020 19:50

frogbs: May 5, 2004; Well well well

rt4 posted:

Just like what you're experiencing, it's fine to run multiple applications (or environments) on one host until resources become a problem. Naturally it's better to migrate into separate hosts before resource contention comes into play. You should ask the people making the money decisions whether it's better to spend money on licenses and hardware or if it's better to experience unpredictable, uncontrollable downtime.

Thanks, that was my take too, just wanted to make sure I wasn't crazy.

We're also running into issues when publishing new articles, the CMS has been starting to deadlock (CPU/RAM usage actually looks OK though), which will make the site inaccessible momentarily from the public facing side if enough articles are being published at the same time. The CMS vendor doesn't really seem to care, so now it's on me to make them pay attention I guess. Seeing as how we're a publishing company, this is very troubling.

# ? Dec 15, 2020 20:03

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Say you have a site that has over a thousand pages/URLs. You launch a new site on the same URL with three pages, like Home / About Us / Contact. Also for the sake of argument, you don't want to spend hours scrolling through every broken link and redirecting them to the appropriate page with 301 redirects in .htaccess. How do you find a list of all the pages Google has indexed (other than searching for "site:domainname.com") and what's the best way to go about this? Usually the sites I'm porting from/to are pretty simple, but I've got some complex ones in the works.

PT6A posted:

I really did try to love Bootstrap, but I've since grown to hate it and now I've taken the concepts I like and adapted them into writing CSS from scratch, because god knows it's easier to debug CSS when you don't also have to determine what the gently caress Bootstrap is doing at any given time.

css-frameworks.txt. There's some really good ideas in CSS frameworks, but they come with a lot of bloat. So I've also taken some of those concepts and adapted them into my own CSS/SASS writing so there's no extra classes in the CSS I'm not using, like you said. Like Bulma's spacing SASS classes are really useful. Writing class="px-2 px-0-at-wide" for things I want left and right padding on mobile but not on wider screens is so useful. I don't have to give individual elements those padding rules anymore. But I definitely don't need all the other stuff it shoves in there with !important rules.

LifeLynx fucked around with this message at 20:18 on Dec 15, 2020

# ? Dec 15, 2020 20:09

spiritual bypass: Feb 19, 2008; Grimey Drawer

frogbs posted:

Thanks, that was my take too, just wanted to make sure I wasn't crazy.

We're also running into issues when publishing new articles, the CMS has been starting to deadlock (CPU/RAM usage actually looks OK though), which will make the site inaccessible momentarily from the public facing side if enough articles are being published at the same time. The CMS vendor doesn't really seem to care, so now it's on me to make them pay attention I guess. Seeing as how we're a publishing company, this is very troubling.

You mean the database is deadlocked or the application is just bogged down?

# ? Dec 15, 2020 20:23

frogbs: May 5, 2004; Well well well

rt4 posted:

You mean the database is deadlocked or the application is just bogged down?

The database is actually deadlocking when publishing (we have thousands of log entries to prove it).

# ? Dec 15, 2020 20:32

prom candy: Dec 16, 2005; Only I may dance

LifeLynx posted:

css-frameworks.txt. There's some really good ideas in CSS frameworks, but they come with a lot of bloat. So I've also taken some of those concepts and adapted them into my own CSS/SASS writing so there's no extra classes in the CSS I'm not using, like you said. Like Bulma's spacing SASS classes are really useful. Writing class="px-2 px-0-at-wide" for things I want left and right padding on mobile but not on wider screens is so useful. I don't have to give individual elements those padding rules anymore. But I definitely don't need all the other stuff it shoves in there with !important rules.

Check out Tailwind if you haven't already

# ? Dec 15, 2020 21:17

minato: Jun 7, 2004; cutty cain't hang, say 7-up.; Taco Defender

frogbs posted:

How common is it to have a staging/development install on the same server as production? I raised this as an issue years ago, but the powers that be didn't want to pay for a separate MSSQL and Kentico license, so our vendors set everything up on the same VM's. Now we're running into resource issues and i'm afraid testing on the dev sites could impact the production sites, which are somewhat high traffic (5 million pageviews/month).

It's not common, in my experience. But there's a sliding scale depending on your budget, your rate of change, your security posture, isolation between environments, your SLAs, etc. I don't know how much a license is these days, but I bet it's cheaper and gives more peace of mind than dealing with "Bobby took down production by deploying a messed up change to dev".

# ? Dec 15, 2020 22:12

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

Inacio posted:

heh i got the same thing yesterday and thought i'd been banned in some way as well

So it turns out if you have �onClick� and an equals sign near each other now, you cannot post. Even if you have a space between the on and the click.

# ? Dec 16, 2020 01:16

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

you should tell jeff, so he quits loving around with the forum css and fixes this kinda stuff instead

# ? Dec 16, 2020 01:25

prom candy: Dec 16, 2005; Only I may dance

We'll just have to get fancy and use onClique events

# ? Dec 16, 2020 02:22

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

My post in the technical problems thread worked, and all is well again apparently!

# ? Dec 16, 2020 03:12

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Nah I tried to post a button html with onClick console logging butt and it didn�t work

<button type=�BUTTon� onClique={() => { console.log(�mybutt�); }}>click 2 fart</button>

# ? Dec 16, 2020 05:35

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

onClique works fine... can someone pls write a webpack plugin for this please

# ? Dec 16, 2020 05:36

Tei: Feb 19, 2011

browsers have mastered the art of getting wrong input and giving correct results

# ? Dec 16, 2020 08:44

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

Tei posted:

browsers have mastered the art of getting wrong input and giving correct results

Currently it works fine in browsers, but not in the Awful App I guess? The important thing is we can post lovely code again!

# ? Dec 16, 2020 14:02

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

Yea I guess cloudflare is sending the app a captcha which it doesn�t know how to handle.

# ? Dec 17, 2020 05:08

frogbs: May 5, 2004; Well well well

frogbs posted:

This might be a really dumb question but...

How common is it to have a staging/development install on the same server as production? I raised this as an issue years ago, but the powers that be didn't want to pay for a separate MSSQL and Kentico license, so our vendors set everything up on the same VM's. Now we're running into resource issues and i'm afraid testing on the dev sites could impact the production sites, which are somewhat high traffic (5 million pageviews/month).

Thoughts from more competent people welcome. Thank you!

Following up on this whole situation, we're thinking about adding a CDN infront of our Kentico sites to at least even things out a bit. Reduce requests from the public, while reducing the likeliehood that the sites go down/deadlock while we're publishing. We're at about 5 million pageviews per month. We contract our AWS setup to a vendor, so they're more comfortable with CloudFront, but Cloudflare looks like it might be cheaper and offer some things CloudFront doesn't. Anyone have experience with both and can offer any advice?

# ? Dec 17, 2020 22:53

spiritual bypass: Feb 19, 2008; Grimey Drawer

Cloudfront is simple and dumb. If you want any kind of advanced features like an automatic per page purge integration or edge logic, go with Cloudflare or Fastly.

# ? Dec 17, 2020 23:38

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 19:13

frogbs: May 5, 2004; Well well well

rt4 posted:

Cloudfront is simple and dumb. If you want any kind of advanced features like an automatic per page purge integration or edge logic, go with Cloudflare or Fastly.

I thought Cloudflare was the simpler, dumber option? CloudFront = AWS, Cloudflare = it's own thing. right? Who named these things!?

I found out that you can't really use Cloudlfare on a root domain without switching to their nameservers, which is a no-go for us, so I think it's either CloudFront or Fastly for us.

# ? Dec 18, 2020 01:16

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

«‹›361 »