The Web Design & Development Megathread

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

«‹›361 »

kedo: Nov 27, 2007

Amusingly frustrating client story: I freelance for a living, and over the past few weeks I've been working on a proposal for a site redevelopment/content migration for a design firm that was tangentially involved with one of my previous projects. The entire proposal process has been a perfect storm of red flags, replete with all the oldies but goldies, including:

"We're an easy client, everyone loves working with us! Except we have a terrible relationship with our current developer don't understand what they do or why it costs money to touch code."
"Because we're so easy to work with, you can give us a discounted rate, right?"
"We have a very tightly defined scope of work! We don't want anything extra that we haven't explicitly stated! We're very budget conscious!"
"Except there are these two items we forgot to tell you about before you quoted us a price. They're easy, so you don't need to change the price, just add them in."
"How can we be sure you're not trying to cheat us? How can we know you'll actually do the things you promise you'll do in this legally binding contract?!"
"Coronavirus! Times are tough for everyone! So give us a discount."
"Non-refundable deposit to hold the time on your production schedule? Sounds like you're trying to take our money and run!"
"What, you're withdrawing your contract from our consideration?! But why?!"
"You're not firing us, we're firing YOU. We already have another developer and they can start work yesterday!"

I've worked entirely by referral for almost seven years now, and I honestly thought I was past the point of dealing with people like this. Turns out I was wrong, but it at least it makes me appreciate all of my Good Clients.

# ? Dec 11, 2020 19:10

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 07:48

MrMoo: Sep 14, 2000

Idk how you can make those projects work without major problems and charging by the hour.

# ? Dec 11, 2020 19:20

kedo: Nov 27, 2007

Yeah, they just become impossible. Thankfully I was able to learn that lesson t my old job on someone else�s dime.

# ? Dec 11, 2020 21:51

Data Graham: Dec 28, 2009; 📈📊🍪😋

I imagine I will not live long enough to see the day when clients can be made to understand that browser windows can be resized to any dimensions, and their perfectly laid-out Illustrator design will not be possible to implement with all the dimensional constraints they have specified, and will look different if anyone has their browser set to anything but the exact size they mocked it up in

You think you've about got it through their heads and then 2 months later whoops here's a PDF with callouts of all the things they say are laid out wrong all of a sudden because they saw it on someone else's laptop

# ? Dec 12, 2020 06:05

RadiRoot: Feb 3, 2007

kedo posted:

"You're not firing us, we're firing YOU. We already have another developer and they can start work yesterday!"

you would know this already but they're full of poo poo.

# ? Dec 12, 2020 09:00

RadiRoot: Feb 3, 2007

Data Graham posted:

I imagine I will not live long enough to see the day when clients can be made to understand that browser windows can be resized to any dimensions, and their perfectly laid-out Illustrator design will not be possible to implement with all the dimensional constraints they have specified, and will look different if anyone has their browser set to anything but the exact size they mocked it up in

You think you've about got it through their heads and then 2 months later whoops here's a PDF with callouts of all the things they say are laid out wrong all of a sudden because they saw it on someone else's laptop

i think i have this conversation every day.

# ? Dec 12, 2020 09:01

Impotence: Nov 8, 2010; Lipstick Apathy

When I was like, 4, people would just make an entire layout in photoshop then "slice" it into jpgs and arrange them as imagemaps in a table for 1:1 display.

# ? Dec 12, 2020 09:08

CarForumPoster: Jun 26, 2013; â¡POWERâ¡

Biowarfare posted:

When I was like, 4, people would just make an entire layout in photoshop then "slice" it into jpgs and arrange them as imagemaps in a table for 1:1 display.

I remember in ~1998, yahoo.com�s navigation was an imagemap with icons for like News | Games | ???? | otherthing

edit: it�s even better than I remember. Keep in mind this was the most important site on the internet.

It�s:
New | Cool | Today�s News | More Yahoos

https://web.archive.org/web/19980210175524/http://www.yahoo.com/

CarForumPoster fucked around with this message at 10:54 on Dec 12, 2020

# ? Dec 12, 2020 10:51

The Dave: Sep 9, 2003

We were still doing that in 2007 when I worked at an adtech firm making landing pages.

# ? Dec 12, 2020 12:39

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

I still remember one of the first designs I did when I worked for an agency. The client came in and sat down with me and broke out a ruler and painstakingly measured out every element on the screen. Of course everything had to fit in one vertical screen height as I was working. My boss was okay with this somehow, but not okay when the guy got home and complained that it didn't look the same on his computer.

# ? Dec 12, 2020 15:12

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

I just moved a image sliced website to netlify last week lol. They where still paying $20 month to host the one page site

# ? Dec 12, 2020 15:18

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

Data Graham posted:

I imagine I will not live long enough to see the day when clients can be made to understand that browser windows can be resized to any dimensions, and their perfectly laid-out Illustrator design will not be possible to implement with all the dimensional constraints they have specified, and will look different if anyone has their browser set to anything but the exact size they mocked it up in

You think you've about got it through their heads and then 2 months later whoops here's a PDF with callouts of all the things they say are laid out wrong all of a sudden because they saw it on someone else's laptop

There�s css that helps with that. Just set fixed width and height so it�s the same size on every screen and browser size.

# ? Dec 12, 2020 20:13

marumaru: May 20, 2013

scrollbars exist for a reason. don't be lazy and put this on your clients!

# ? Dec 12, 2020 23:01

Violator: May 15, 2003

Any suggestion for a simple animation framework? I don't need anything super complex, just the usual animate in on scroll points, etc. I don't need anything like greensock with crazy complex animations. I'm trying out Tailwind as a CSS framework and would like something a bit more than that offers out of the box.

# ? Dec 13, 2020 03:59

fsif: Jul 18, 2003

Violator posted:

Any suggestion for a simple animation framework? I don't need anything super complex, just the usual animate in on scroll points, etc. I don't need anything like greensock with crazy complex animations. I'm trying out Tailwind as a CSS framework and would like something a bit more than that offers out of the box.

Animating on scroll points tends to be a little trickier than one would think, but AOS is a good, dead simple library if you just want to get something rolling quickly.

If that's too basic, I think GreenSock's ScrollTrigger plugin is the gold standard for scroll animations, but yeah, I know you explicitly asked for solutions simpler than gsap. Not really aware of any libraries that split the difference in complexity, unfortunately.

fsif fucked around with this message at 04:24 on Dec 13, 2020

# ? Dec 13, 2020 04:22

frogbs: May 5, 2004; Well well well

Data Graham posted:

I imagine I will not live long enough to see the day when clients can be made to understand that browser windows can be resized to any dimensions, and their perfectly laid-out Illustrator design will not be possible to implement with all the dimensional constraints they have specified, and will look different if anyone has their browser set to anything but the exact size they mocked it up in

You think you've about got it through their heads and then 2 months later whoops here's a PDF with callouts of all the things they say are laid out wrong all of a sudden because they saw it on someone else's laptop

I just got a "but I can't see the candles in this photo on mobile" this week. It kills me.

Biowarfare posted:

When I was like, 4, people would just make an entire layout in photoshop then "slice" it into jpgs and arrange them as imagemaps in a table for 1:1 display.

Ugh, those were the days!

# ? Dec 13, 2020 04:38

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

Violator posted:

Any suggestion for a simple animation framework? I don't need anything super complex, just the usual animate in on scroll points, etc. I don't need anything like greensock with crazy complex animations. I'm trying out Tailwind as a CSS framework and would like something a bit more than that offers out of the box.

Are you just looking to trigger CSS transitions/animations at scroll points or do you need more complex animation than what you can get with CSS? Are you using a javascript framework/UI library already?

# ? Dec 13, 2020 15:46

Violator: May 15, 2003

fsif posted:

Animating on scroll points tends to be a little trickier than one would think, but AOS is a good, dead simple library if you just want to get something rolling quickly.

If that's too basic, I think GreenSock's ScrollTrigger plugin is the gold standard for scroll animations, but yeah, I know you explicitly asked for solutions simpler than gsap. Not really aware of any libraries that split the difference in complexity, unfortunately.

Ah, I've actually used AOS recently so glad that's still a good option. I'm not against gsap, just I remember it being super complicated last time I used it but it could have been I didn't have my head screwed on right at the time. I remember when it used to be an Actionscript tool. :O

prom candy posted:

Are you just looking to trigger CSS transitions/animations at scroll points or do you need more complex animation than what you can get with CSS? Are you using a javascript framework/UI library already?

Yeah, just trigger transitions/animations at scroll points for some simple effects to jazz things up. I haven't gotten any requests for anything more complex than that yet. No JS or UI library right now, I'm just trying out tailwind and seeing how that works for me by itself. I've been in my own little bubble working with bootstrap/jQuery for so long that I'm kind of starting over.

# ? Dec 13, 2020 19:11

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

Violator posted:

Yeah, just trigger transitions/animations at scroll points for some simple effects to jazz things up. I haven't gotten any requests for anything more complex than that yet. No JS or UI library right now, I'm just trying out tailwind and seeing how that works for me by itself. I've been in my own little bubble working with bootstrap/jQuery for so long that I'm kind of starting over.

I've used this library before: http://imakewebthings.com/waypoints/

Basically just use the callbacks to add/remove classes to your elements that will trigger CSS transitions or animations. There might be a newer/better library for doing this kind of thing but I know Waypoints works with just vanilla JS.

# ? Dec 13, 2020 22:34

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

prom candy posted:

I've used this library before: http://imakewebthings.com/waypoints/

Basically just use the callbacks to add/remove classes to your elements that will trigger CSS transitions or animations. There might be a newer/better library for doing this kind of thing but I know Waypoints works with just vanilla JS.

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.

# ? Dec 13, 2020 23:30

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

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.

# ? Dec 14, 2020 04:59

Tei: Feb 19, 2011

Bootstrap is for people that don't know or don't want to deal with writing their own rules

# ? Dec 14, 2020 14:02

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

I�ve just started messing with React, TypeScript and Material UI. Coming from a bit of traditional desktop app programming, trying to get simple things to work (e.g. right now changing a button text during runtime) makes me feel like someone took a poo poo into my brain.

Obviously all this stuff is somehow usable, given there�s plenty of apps using it, but it sure is pretty insanely structured. :psypop:

# ? Dec 14, 2020 14:50

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Data Graham posted:

I imagine I will not live long enough to see the day when clients can be made to understand that browser windows can be resized to any dimensions, and their perfectly laid-out Illustrator design will not be possible to implement with all the dimensional constraints they have specified, and will look different if anyone has their browser set to anything but the exact size they mocked it up in

You think you've about got it through their heads and then 2 months later whoops here's a PDF with callouts of all the things they say are laid out wrong all of a sudden because they saw it on someone else's laptop

lol, same but with content:

me: here's a layout from the designs with Example Text in, go ahead and add your own content

client proceeds to add entries with 100 word titles and super narrow 20MB jpgs

client: Why does the design look so messed up?

# ? Dec 14, 2020 17:43

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

Do any of you use Ruby on Rails for servers anymore? I've been bored and wanted to learn something besides Node and wanted some thoughts that aren't just "learn python"

# ? Dec 14, 2020 17:56

The Fool: Oct 16, 2003

Empress Brosephine posted:

Do any of you use Ruby on Rails for servers anymore? I've been bored and wanted to learn something besides Node and wanted some thoughts that aren't just "learn python"

I�d be hard pressed to recommend Ruby on Rails to anyone these days.

Django would be a viable option, but you could also do .NET Core MVC

# ? Dec 14, 2020 18:00

marumaru: May 20, 2013

Empress Brosephine posted:

Do any of you use Ruby on Rails for servers anymore? I've been bored and wanted to learn something besides Node and wanted some thoughts that aren't just "learn python"

https://actix.rs/

# ? Dec 14, 2020 18:35

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

That looks cool I'll check it out

# ? Dec 14, 2020 18:40

lunar detritus: May 6, 2009

Empress Brosephine posted:

Do any of you use Ruby on Rails for servers anymore? I've been bored and wanted to learn something besides Node and wanted some thoughts that aren't just "learn python"

We use it almost exclusively and it's still incredibly good for hitting the ground running. It's "boring" but that's pretty good for development. I wouldn't learn it if your objective is to get a job though.

# ? Dec 14, 2020 18:56

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

Combat Pretzel posted:

I�ve just started messing with React, TypeScript and Material UI. Coming from a bit of traditional desktop app programming, trying to get simple things to work (e.g. right now changing a button text during runtime) makes me feel like someone took a poo poo into my brain.

Obviously all this stuff is somehow usable, given there�s plenty of apps using it, but it sure is pretty insanely structured.

Ha, I've been working on iOS applications recently so I'm having the exact opposite experience! You need to change your entire mindset when you make this shift. In React, the view is always a pure function of state, and state is the only thing you can change. So with a traditional app programming environment you might have something like

code:

async function loadData() {
  button.text = "Loading..."
  button.disabled = true
  let data = await api.loadData()
  button.disabled = false
  if data.success {
    button.text = "Done"
  } else {
    button.text = "Oops, try again?"
  }
}

In React you only control the state, and then change the output based on that state.

code:

const [networkState, setNetworkState] = useState<'ready' | 'loading' | 'error' | 'success'>('ready');

async function loadData() {
  setNetworkState('loading');
  let data = await api.loadData()
  setNetworkState(data.success ? 'success' : 'error');
}

const buttonTextForState = {
  ready: 'Load that Data',
  loading: 'Loading...',
  error: 'Oops!  Try again!'
  success: 'Done'
}

return (
  <button disabled={networkStatus === 'loading'}>{buttonTextForState[networkState]}</button>
)

(Note I'm only using local component state here, but when I talk about "the state" I also mean any state that's passed in from props or any special hooks that manage state like Redux or Apollo)

The nice thing about coding this way is that your view theoretically becomes a pure* function of state, so given that your networkState is set to loading you can always be sure that your button will say "Loading..." In iOS I struggled quite a bit because if you're not careful your UI can easily get out of sync with your state. For example if you have two separate network calls and you want both of them to set the button text to "Loading" and disable the button you need to make sure you manage that in both of those functions, whereas in the React code above you can see that you can just set the attribute based on state.

*For a variety of reasons React components are not actually pure functions

Empress Brosephine posted:

Do any of you use Ruby on Rails for servers anymore? I've been bored and wanted to learn something besides Node and wanted some thoughts that aren't just "learn python"

Yes but not because I want to. Ruby on Rails was the first language and framework that I really loved, and there are certain language features of Ruby that I still really love, but maintaining a monolith web back-end that doesn't have a type system is hell. I would learn something else.

# ? Dec 14, 2020 19:01

Impotence: Nov 8, 2010; Lipstick Apathy

Combat Pretzel posted:

I�ve just started messing with React, TypeScript and Material UI. Coming from a bit of traditional desktop app programming, trying to get simple things to work (e.g. right now changing a button text during runtime) makes me feel like someone took a poo poo into my brain.

Obviously all this stuff is somehow usable, given there�s plenty of apps using it, but it sure is pretty insanely structured.

With create-react-app or any of the other boilerplates, it should just be "change text" and hit save, and hot reload takes over, no?

# ? Dec 14, 2020 19:33

Dominoes: Sep 20, 2007

Combat Pretzel posted:

I�ve just started messing with React, TypeScript and Material UI. Coming from a bit of traditional desktop app programming, trying to get simple things to work (e.g. right now changing a button text during runtime) makes me feel like someone took a poo poo into my brain.

Obviously all this stuff is somehow usable, given there�s plenty of apps using it, but it sure is pretty insanely structured.

The JS-framework ecosystem, and its orbit of supporting articles and tutorials, is a hot mess.

Inacio posted:

https://actix.rs/

Empress Brosephine posted:

That looks cool I'll check it out

Actix isn't a full framework; it's a microframework that makes it easy to set up a server that handles basic page serves and API calls, but you're on your own for things most websites use like auth, admin, email, DB migrations etc. The 'Hello world' in that link is elegant, but it doesn't scale. It might fit the job for your experimentation. Rocket is similar. These are more like Flask than Rails or Django, without the benefit of Flask's add-on ecosystem.

I'm using Rocket for an app that connects to a sensor device I'm working on; You plug it in over USB, run the program (which launches a Rocket server), then go to http://localhost/port on your computer, phone etc and it shows your sensor readings. It was easy to learn and setup, and gets the job done, but I wouldn't use it for a website.

To tie into the ecosystem chat, Rust's, including for web, is perhaps the nicest of any language. (tools, docs, build system etc) This includes both official, and third-party.

Dominoes fucked around with this message at 20:24 on Dec 14, 2020

# ? Dec 14, 2020 19:59

marumaru: May 20, 2013

Combat Pretzel posted:

I�ve just started messing with React, TypeScript and Material UI. Coming from a bit of traditional desktop app programming, trying to get simple things to work (e.g. right now changing a button text during runtime) makes me feel like someone took a poo poo into my brain.

Obviously all this stuff is somehow usable, given there�s plenty of apps using it, but it sure is pretty insanely structured.

how much previous javascript/typescript experience did you have? that is not a very complex task, you might just be doing something a bit outside your comfort zone?

# ? Dec 14, 2020 20:26

Dominoes: Sep 20, 2007

You could have the MDN docs memorized and still have the :psypop:

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.

Dominoes fucked around with this message at 21:00 on Dec 14, 2020

# ? Dec 14, 2020 20:28

marumaru: May 20, 2013

Dominoes posted:

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

or you could be experienced in basic JS/TS and only have to learn react itself?

# ? Dec 14, 2020 20:30

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

Inacio posted:

how much previous javascript/typescript experience did you have? that is not a very complex task, you might just be doing something a bit outside your comfort zone?

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.

Dominoes posted:

The JS-framework ecosystem, and its orbit of supporting articles and tutorials, is a hot mess.

Yeah definitely. Even React's Getting Started examples doesn't really work out of the box. The typescript compiler was whining about missing props, that I had to eventually add myself to that drat example.

Combat Pretzel fucked around with this message at 20:35 on Dec 14, 2020

# ? Dec 14, 2020 20:32

go play outside Skyler: Nov 7, 2005

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.

Yeah definitely. Even React's Getting Started examples doesn't really work out of the box. The typescript compiler was whining about missing props, that I had to eventually add myself to that drat example.

Please go on about how your failure to learn the basics of a framework make that framework bad.

# ? Dec 14, 2020 20:44

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

I set aside learning React only because it wasn't helping me in my day-to-day jobs, which involves making websites that anyone can go in and make changes on the fly and can be heavily SEO'd. React-based sites don't seem to lend themselves to that because they have to be recompiled, right? I definitely remember changing text and stuff and being amazed how I could change things without using either a page reload or directly manipulating the DOM. If I remember correctly it was by using state changes with React Hooks? Does that sound right?

The company I work for is obsessed with getting great scores on Google's PageSpeed Insights, as I think I've mentioned. I've gotten pretty good with lazy-loading, gzip, compressing everything I can, etc., but I think I'd like to really WOW them with a near-perfect score. They (and myself) are mostly familiar with Wordpress. Would a Gatsby site using headless Wordpress with Yoast SEO be good for that? Is there anyone here who's set up something like that who could give me advice? Being able to heavily control the SEO on a site is really important to them, and last I checked (from a glance, I admit) it was somewhat difficult to do that.

# ? Dec 14, 2020 21:16

Dominoes: Sep 20, 2007

LifeLynx posted:

I definitely remember changing text and stuff [with React]and being amazed how I could change things without using either a page reload or directly manipulating the DOM. If I remember correctly it was by using state changes with React Hooks? Does that sound right?

React is a JS lib that makes DOM manipulations. Its API is an abstraction, but JS DOM-manipulation calls are being executed, even though the React user doesn't write them directly.

# ? Dec 14, 2020 21:27

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 07:48

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

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.

# ? Dec 14, 2020 21:59

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

«‹›361 »