Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
yeah i think it's enough to just say "hey you're gonna have to get your own DNS provider. this one is out of my hands."

Adbot
ADBOT LOVES YOU

Impotence
Nov 8, 2010
Lipstick Apathy
"new" web designers if they are trying to be hip and happening a single A record might not actually be enough, to deploy to those cloud paas bullshit that keeps popping up requires CNAME and TXT randomly generated verification records in addition to A/AAAA for the actual site

kedo
Nov 27, 2007

prom candy posted:

I would say "you'll need to provide your own name servers, I don't provide DNS hosting as an a la carte service" and not invoice anything.

Yeah, this is the right answer. If you absolutely must do work you should surely invoice them, but if the client is moving on it's best to just cut ties and be as polite yet firm as you can with setting boundaries. It sounds like the new dev is out of their depth.

Fagtastic
Apr 9, 2009

I may have sucked robodick, fucked a robot in the exhaust, been fucked by robots & enjoy it to the exclusion of human partners; at least I'm not a goddamn :roboluv:
Hey, I hope this is the right place to ask this question.

I've been developing some e-learning stuff, on various crappy content authoring tools my university has inexplicably invested in. They've been basic but fine for things like multiple choice questions and so forth but now I have to make this thing that asks the students likert-scale self assessment things like 'how do you rate yourself at X', and gives them a score at the end. All these tools (H5P, edX, blackboard) are drawing a blank.

Do you people remember all those old internet surveys that were everywhere in the early 2000s? Like, "what kind of tree / gun / sex in the city woman / lawnmower are you"? They were loving everywhere, and it feels like that should be pretty easy to achieve but so far I'm drawing a blank. Something like wordpress doesn't seem to be able to do it, but doing it in dreamweaver or google web designer or something like that seems to be beyond me (I am not a web designer and have no idea what a 'div' is supposed to be).

Every kid and their dog had one of those stupid surveys back in the day so surely it can't be that complicated. Any advice? Or am I in the wrong place.

Leshy
Jun 21, 2004

There are multiple survey tools out there that can easily do these things. Popular ones include SurveyMonkey and LimeSurvey, although there must be a dozen others. Google Forms probably also allows you to do this, although I don't know whether it can do one of these 'result calculations' at the end.

The Dave
Sep 9, 2003

I'd also check out Typeform which is pretty popular.

kedo
Nov 27, 2007

Yeah, agreed that survey tools are your jam here. I’ve used SurveyMonkey in several projects and it’s been easy to work with.

worms butthole guy
Jan 29, 2021

by Fluffdaddy
If you want to use WordPress this is some decent plugins

https://kinsta.com/blog/wordpress-survey-plugins/

Data Graham
Dec 28, 2009

📈📊🍪😋



Someone please send out a message via fwd: fwd: or whatever communications method idiot restaurant website clients read that the word “toggle” does not mean “click on a link to navigate to a different page”

Fagtastic
Apr 9, 2009

I may have sucked robodick, fucked a robot in the exhaust, been fucked by robots & enjoy it to the exclusion of human partners; at least I'm not a goddamn :roboluv:

Fixins posted:

If you want to use WordPress this is some decent plugins

https://kinsta.com/blog/wordpress-survey-plugins/

Oooh. Thanks!

I would use SurveyMonkey or something like that but there doesn't seem to be a way to put it under the hood in the way I need for a universities official crap.

N.Z.'s Champion
Jun 8, 2003

Yam Slacker
the company I work for is making a form builder and it supports likert scales, calculations, but we're not launching it for a few months

Verisimilidude
Dec 20, 2006

Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges



Finally got around to making my personal site. Pretty happy with the end result, and since launching I've received 4 interviews for decent jobs!

https://johnmartinez.dev/

Any comments/critiques would be greatly appreciated.

barkbell
Apr 14, 2006

woof
Looks good. Clean.

prom candy
Dec 16, 2005

Only I may dance
Nice, I like it. Nitpicking here but I might change "1000's of hours" to "Thousands of hours"

fsif
Jul 18, 2003

I'm going to be a bit more critical on your page but I don't want you to get discouraged. I work at a creative agency and recently looked through several dozen applicants' résumés and portfolios and the quality of yours is largely in line with the people who received initial interviews. Your site is performant, fully responsive, and features a competent "clean" design.

That said, since you're looking for critiques and areas of improvement…
  • Your header could use some work. Your name is too small in the logo and I can hardly read it at all on mobile. I don't see the point in having a hamburger menu on mobile, either, since you only have the two links.
  • Lots of the layout and content is kind of trite and won't stand out in a crowded applicant field. I don't know how many times I've seen "Hi, I'm X" or those three columns with ugly SVG graphics atop them.
  • You should choose a typeface that's not just the standard create-react-app font-family.
  • I like the pink, but you need to be more careful with how you use it on the page with the copy; the pink subheads don't pass a color contrast checker.
  • Check your line-spacing consistency; the first block and the second block appear to have different values.
  • Back to the cursed three column layout, I don't think it makes sense for you even from a content perspective. You're presumably applying to be a software developer, so I don't know why hierarchically it makes sense to include "Designer" and "Mentoring" as equally weighted facets of your skillset. And if I'm being brutally honest, those two columns are doing a lot of work to highlight your inexperience. Listing skills like "Pen and paper" and "rubber ducking" just screams to me that you're padding out a page with nonsense because you don't have a large body of work to fall back on.
  • I'd dedicate a lot more real estate towards your portfolio. I don't like having to click in to see your projects. Could you embed images directly on your page? Or better yet, add some write ups about the work you did on them? It doesn't help that it seems like a lot of your projects require me to register to see them. And I don't know why you're linking to a Google Drive file instead of, like, embedding or linking to a YouTube video.
  • As prom candy alluded to, might be worth getting someone to help you with some quick copy editing. No major problems, but I agree with his comment re: "Thousands" and you have a lot of extra/misplaced commas and inconsistent cases.
  • Back to the technical side of things, check your semantic markup more closely. You're leaning on <div>s too much and you have multiple <h1>s on the page.
  • You're missing alt tags on your images.
  • Putzing around in the inspector, it doesn't appear like you leaned too heavily on a CSS framework, which is great! That said—and this is just a personal thing—I hate the Bootstrappy utility classes for responsive columns. If you went full Tailwind or whatever I can see it a bit more, but I really put a premium on people being able to use flexbox and grid well and the .col-lg-4 approach to me just strikes me as sort of a shortcut.
  • Nitpicky-ish, but I don't like to see !important's in your CSS.
  • Again nitpicky-ish (and possibly a dated piece of advice?), but I'm not sure CRA is the right tool for the job here because it won't generate SSR pages. You probably don't need React at all for a site this simple, but if you want to use it, maybe worth giving a glance at a Gatsby or Next.js or something.

Verisimilidude
Dec 20, 2006

Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges



fsif posted:

I'm going to be a bit more critical on your page but I don't want you to get discouraged. I work at a creative agency and recently looked through several dozen applicants' résumés and portfolios and the quality of yours is largely in line with the people who received initial interviews. Your site is performant, fully responsive, and features a competent "clean" design.

That said, since you're looking for critiques and areas of improvement…
  • Your header could use some work. Your name is too small in the logo and I can hardly read it at all on mobile. I don't see the point in having a hamburger menu on mobile, either, since you only have the two links.
  • Lots of the layout and content is kind of trite and won't stand out in a crowded applicant field. I don't know how many times I've seen "Hi, I'm X" or those three columns with ugly SVG graphics atop them.
  • You should choose a typeface that's not just the standard create-react-app font-family.
  • I like the pink, but you need to be more careful with how you use it on the page with the copy; the pink subheads don't pass a color contrast checker.
  • Check your line-spacing consistency; the first block and the second block appear to have different values.
  • Back to the cursed three column layout, I don't think it makes sense for you even from a content perspective. You're presumably applying to be a software developer, so I don't know why hierarchically it makes sense to include "Designer" and "Mentoring" as equally weighted facets of your skillset. And if I'm being brutally honest, those two columns are doing a lot of work to highlight your inexperience. Listing skills like "Pen and paper" and "rubber ducking" just screams to me that you're padding out a page with nonsense because you don't have a large body of work to fall back on.
  • I'd dedicate a lot more real estate towards your portfolio. I don't like having to click in to see your projects. Could you embed images directly on your page? Or better yet, add some write ups about the work you did on them? It doesn't help that it seems like a lot of your projects require me to register to see them. And I don't know why you're linking to a Google Drive file instead of, like, embedding or linking to a YouTube video.
  • As prom candy alluded to, might be worth getting someone to help you with some quick copy editing. No major problems, but I agree with his comment re: "Thousands" and you have a lot of extra/misplaced commas and inconsistent cases.
  • Back to the technical side of things, check your semantic markup more closely. You're leaning on <div>s too much and you have multiple <h1>s on the page.
  • You're missing alt tags on your images.
  • Putzing around in the inspector, it doesn't appear like you leaned too heavily on a CSS framework, which is great! That said—and this is just a personal thing—I hate the Bootstrappy utility classes for responsive columns. If you went full Tailwind or whatever I can see it a bit more, but I really put a premium on people being able to use flexbox and grid well and the .col-lg-4 approach to me just strikes me as sort of a shortcut.
  • Nitpicky-ish, but I don't like to see !important's in your CSS.
  • Again nitpicky-ish (and possibly a dated piece of advice?), but I'm not sure CRA is the right tool for the job here because it won't generate SSR pages. You probably don't need React at all for a site this simple, but if you want to use it, maybe worth giving a glance at a Gatsby or Next.js or something.

I suppose I did ask for critique. I’ll go through this list and apply some of the changes, tune up the grammar and probably get rid of the hamburger button.

The Dave
Sep 9, 2003

That’s a really good list. Granted I hire designers, but when we’re hiring I’m looking at 10-20 resumes / websites during a session and anything that stands out will help. Usually I dive right into their work and get a sense if it’s good or not and what specific things they did (even though everyone lies about that). So some sort of leads into those would be nice.

I looked on my phone, and while most people reviewing your page probably won’t be. I agree the hamburger is unnecessary. You might want to repeat the resume and contact links at the bottom, as they should be the natural conclusion to your content.

I would explore making your navigation bar white and more invisible visually.

Your mentorship section would resonance more with me if you had some quotes from your mentees.

That being said there are so many lovely portfolios out there that I can appreciate the cleanliness of Your’s even if it feels a bit boilerplate-ish.

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes
Anyone use Civic Cookie Control much? I've got it running, put it in the <head> and configured optionalCookies but my SEO guy keeps saying in the GTM preview that cookies are set before being accepted. I've looked at this twice and he can't give me a good precedent so I don't know why this is happening.

fsif
Jul 18, 2003

Verisimilidude posted:

I suppose I did ask for critique. I’ll go through this list and apply some of the changes, tune up the grammar and probably get rid of the hamburger button.

Sorry, I guess seeing a list of perceived deficiencies is a sort of brutal way to receive criticism, so let me just also add…
  • In spite of me calling various parts of your design "trite" or "cursed", The Dave is right in that your portfolio's quiet competence automatically checks boxes maybe half of the applicants' don't. We hired someone recently (who's been great!) with a portfolio that was considerably less attractive than yours. We also had a ton of applicants with no portfolio site at all.
  • One thing I always hone in on is side padding for container elements and I was pleased to see you had those!
  • Outside the accessibility-related concerns I had, your Lighthouse audit score was superb.
  • Too often I see newer developers list 20–30 different techs they claim to have expertise in and it was nice to see you keep your list to six. It's hard to get an accurate picture of an applicants' skillset when they're fresh out of bootcamp and purport to know React, Vue, Svelte, Postgres, MySQL, MongoDB, or when they fill a list up like that with silly things like "AJAX" or "JSON".
  • Similarly, I liked that you listed the techs you used in an organic way in both your portfolio blurbs and in your site's footer.
  • Logo design is totally impossible but I like the bones of yours. I think if you just removed your name and centered and stretched out the remaining elements it could work.
  • Nice to have a contact form directly on your page.
  • A big one: your personal projects look like they're actually personal. Too often people include things that were either obviously their bootcamp assignments or the final result of a coding tutorial. Being able to apply what you've learned to a bespoke project is huge.

fsif fucked around with this message at 15:40 on Dec 5, 2021

Armauk
Jun 23, 2021


Verisimilidude posted:

Finally got around to making my personal site

You're cool with doxxing yourself here?

The Dave
Sep 9, 2003

I really struggle with boot camp designers when that’s the only experience they had. All the outputs are exactly the same and none of it speaks to any actual ability.

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

Armauk posted:

You're cool with doxxing yourself here?

I've doxxed myself dozens of times on this website and my life is infinitely better for it

fuf
Sep 12, 2004

haha
I have a div with a <video> element in, and the div can change size quite a lot, especially switching from a landscape to a portrait aspect ratio. I don't mind cropping the video a bit to avoid horizontal or vertical black bars, but I want there to be a limit beyond which it will prefer black bars over cropping the video any further.

Any suggestions on how to accomplish this? I can crop the video by setting its width or height to >100%, but I can't figure out how to set like a "max crop".

ynohtna
Feb 16, 2007

backwoods compatible
Illegal Hen
If you're up for wrestling with CSS variables you can probably do it with a clamped calculation.

fuf
Sep 12, 2004

haha
Thanks. I think the main issue is that I'm using things like width / height percentage and transform:scale to crop the video, but of course the same values will crop the video differently depending on the size / aspect ratio of the containing div. I need like an objective way to set the crop limits on the video itself. Basically I'm imagining like a rectangle drawn on to the video that says "crop the video up to the limits of this rectangle but no further".

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Would something like object fit help?
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

fuf
Sep 12, 2004

haha

I've been playing with object-fit:cover and it does the cropping but I still can't figure out how to limit the crop past a certain point.

kedo
Nov 27, 2007

Perhaps I'm not understanding, but if your goal is to avoid cropping could you use the 16:9 aspect ratio trick? Eg.

code:
<style>
.container {
  position: relative;
  width: 100%;
  padding-bottom: 56.2%;
}
.container video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
</style>

<div class="container">
  <video>...</video>
</div>
Is the problem that you can't control the aspect ratio of the containers?

kedo fucked around with this message at 19:47 on Dec 6, 2021

Ima Computer
Oct 28, 2007

Stop all the downloading!

Help computer.

fuf posted:

Any suggestions on how to accomplish this? I can crop the video by setting its width or height to >100%, but I can't figure out how to set like a "max crop".

There's no way to do this with pure CSS... at least not until container queries are a thing.

Use a ResizeObserver to detect when the container <div> changes dimensions. Calculate the aspect ratio of the div, and then toggle a class on the <video> that swaps between object-fit: cover and object-fit: contain based on whether or not the aspect ratio is within a certain range (plus or minus some % of the video's original aspect ratio).

Verisimilidude
Dec 20, 2006

Strike quick and hurry at him,
not caring to hit or miss.
So that you dishonor him before the judges



fsif posted:

Sorry, I guess seeing a list of perceived deficiencies is a sort of brutal way to receive criticism, so let me just also add…
  • In spite of me calling various parts of your design "trite" or "cursed", The Dave is right in that your portfolio's quiet competence automatically checks boxes maybe half of the applicants' don't. We hired someone recently (who's been great!) with a portfolio that was considerably less attractive than yours. We also had a ton of applicants with no portfolio site at all.
  • One thing I always hone in on is side padding for container elements and I was pleased to see you had those!
  • Outside the accessibility-related concerns I had, your Lighthouse audit score was superb.
  • Too often I see newer developers list 20–30 different techs they claim to have expertise in and it was nice to see you keep your list to six. It's hard to get an accurate picture of an applicants' skillset when they're fresh out of bootcamp and purport to know React, Vue, Svelte, Postgres, MySQL, MongoDB, or when they fill a list up like that with silly things like "AJAX" or "JSON".
  • Similarly, I liked that you listed the techs you used in an organic way in both your portfolio blurbs and in your site's footer.
  • Logo design is totally impossible but I like the bones of yours. I think if you just removed your name and centered and stretched out the remaining elements it could work.
  • Nice to have a contact form directly on your page.
  • A big one: your personal projects look like they're actually personal. Too often people include things that were either obviously their bootcamp assignments or the final result of a coding tutorial. Being able to apply what you've learned to a bespoke project is huge.

I appreciate all of this as well! I've gone through and made some of the major changes, but still need more inspiration to make something very different from the original version, so for the meantime it'll remain the same format.

Thanks again for all the critiques people have given! It really has made a huge difference.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
I have a UI/UX question, but I'll preface with saying I'm a developer, not a designer.

On building internal tools, the moment there is a list of anything, it seems the idea is "put it in a table". However this list of things could have all sorts of functionality, like links, buttons, check boxes, and it creates so many columns that it's difficult to read on any screen.

So it got me thinking "should this even be a table?"

Problem is, I don't know how to go answering this question.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

The Merkinman posted:

I have a UI/UX question, but I'll preface with saying I'm a developer, not a designer.

On building internal tools, the moment there is a list of anything, it seems the idea is "put it in a table". However this list of things could have all sorts of functionality, like links, buttons, check boxes, and it creates so many columns that it's difficult to read on any screen.

So it got me thinking "should this even be a table?"

Problem is, I don't know how to go answering this question.

It's a list, not a table. A table has a consistent layout of information with columns that relate to one another.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

It's a list, not a table. A table has a consistent layout of information with columns that relate to one another.
What do you mean by "columns that relate to each other"?
Thinking on the flip side, ecommerce you could have a list of products and throw it in a table with columns for "image" "name" "size" "price" "rating" etc, but websites don't do that because...?

So am I on the right track in thinking it probably shouldn't be a table?

kedo
Nov 27, 2007

The only thing that should ever be in a table is tabular data. That means data that very precisely adheres to strict types and lends itself to being displayed in a big grid. In my experience, there are actually very few things that should be displayed as tables, but there are plenty of ways to display content in an organized manner in a list.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

The Merkinman posted:

What do you mean by "columns that relate to each other"?
Thinking on the flip side, ecommerce you could have a list of products and throw it in a table with columns for "image" "name" "size" "price" "rating" etc, but websites don't do that because...?

So am I on the right track in thinking it probably shouldn't be a table?

I mean "columns that relate to one another"

code:
name, batting average, slugging percentage, hr
moe, .220, .550, 14
larry, .330,  .265, 2
curly, .280, .360, 6
Every row is a set of things that related to other rows, so this would be a good fit for a table. Does it have to be? No, but a table makes sense here. Your example of the ecommerce thing: a table could be appropriate for one scenario, and would make sense (like an admin tool, inventory view, whatever) if you need to see the data as it relates to the other things because they have related columns. In the context where the user doesn't care about viewing values related to the other values per se, some other way of displaying the data might be more appropriate.

code:
moe, .220, .550, 14
Pop Songs, 12, blue, cowbell
4.8 stars, picture of a cat, $39.95
These rows have nothing to do with one another so a table is very likely not an appropriate choice, since as humans we expect content in a table to related to other rows in the table.

Clark Nova
Jul 18, 2004

tables were frequently used in the Bad Old Days, as one of the only (or at least easiest) ways to get poo poo to line up properly, so if you're doing HTML archeology or reading old guides you're likely to encounter them used inappropriately.

barkbell
Apr 14, 2006

woof
if you have a list of items to sell, use a unordered list probably.

if you have a selections of items with two columns that could be labeled "key" and "value" or something like that, use a description list

tables are for tabular data only imo. if you can name the columns and it makes sense that you could add stuff like sorting on columns thats a good use case for a table

prom candy
Dec 16, 2005

Only I may dance
Part of the reason you don't see tables as much anymore unless the data really calls for it is because they don't collapse easily on mobile. A lot of the time you might have a big wide list on desktop but it still needs to be a tall narrow list on mobile.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Yeah a lot of the table stuff seems to be "well it was always this way". A user browsing products would be imagined in a CSS grid sort of layout, but internally managing those same products and suddenly it's pictured as a table.

Adbot
ADBOT LOVES YOU

fuf
Sep 12, 2004

haha

Ima Computer posted:

There's no way to do this with pure CSS... at least not until container queries are a thing.

Use a ResizeObserver to detect when the container <div> changes dimensions. Calculate the aspect ratio of the div, and then toggle a class on the <video> that swaps between object-fit: cover and object-fit: contain based on whether or not the aspect ratio is within a certain range (plus or minus some % of the video's original aspect ratio).

This absolutely fried my brain but I think I've got something kind of working.

I work out the difference between the aspect ratio of the container and the video to figure out if there are horizontal or vertical black bars. Then I work out if I can crop the video to fill that free space without exceeding the maximum vertical or horizontal crop limits I've placed on the video. Then I use transform: scale to zoom the video to the max allowed. It sounds simple when I write it down but woooo boy.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply