The Web Design & Development Megathread

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

«‹›362 »

Impotence: Nov 8, 2010; Lipstick Apathy

marumaru posted:

isn't it illegal (?) for kids under a certain age to have emails

no.

assuming usa: they mention high school students, and coppa only applies to under-13, and is fine for under-13 as long as parents allow (and in the case of a school, this has happened already)

that being said i had an email when i was like 5 so i find it hard to believe anyone actually respects this

# ? Mar 9, 2021 23:54

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 14:34

Null of Undefined: Aug 4, 2010; I have used 41 of 300 characters allowed.

Biowarfare posted:

no.

assuming usa: they mention high school students, and coppa only applies to under-13, and is fine for under-13 as long as parents allow (and in the case of a school, this has happened already)

that being said i had an email when i was like 5 so i find it hard to believe anyone actually respects this

True but this program sounds like it's a third party, not the school itself, which might break coppa without parental consent

# ? Mar 10, 2021 00:07

Riven: Apr 22, 2002

Yes we�re third party and high school subjects only, specifically to avoid COPPA. We do have school partnerships but students can also sign up independently with their personal emails. We already use Twilio to notify volunteers when students are waiting for a volunteer to pick up their session so I think we might use their Verify product. Every kid has a phone with SMS pretty much so that will probably be the least friction way to manage it and then we can set the phone number to be unique in our DB.

# ? Mar 10, 2021 01:37

Null of Undefined: Aug 4, 2010; I have used 41 of 300 characters allowed.

Riven posted:

Yes we�re third party and high school subjects only, specifically to avoid COPPA. We do have school partnerships but students can also sign up independently with their personal emails. We already use Twilio to notify volunteers when students are waiting for a volunteer to pick up their session so I think we might use their Verify product. Every kid has a phone with SMS pretty much so that will probably be the least friction way to manage it and then we can set the phone number to be unique in our DB.

that's probably your best option

# ? Mar 10, 2021 02:15

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

Given the target audience is low income high school students, I don't know if assuming they have SMS access is a great idea. Even if they or a parent do have a phone, it might be a prepaid without any minutes on it.

# ? Mar 10, 2021 02:41

Impotence: Nov 8, 2010; Lipstick Apathy

Receiving SMS is usually free.

# ? Mar 10, 2021 02:57

Null of Undefined: Aug 4, 2010; I have used 41 of 300 characters allowed.

It's always free that's why you can't just text someone a bunch to eat up their minutes, the sender is charged (if they aren't on a free plan) but you do make a good point about phone ownership. If the concern that they don't have access to SMS is real, you could always have it trigger only for logins from IPs that have been caught shitposting. Like instead of IP banning you could soft block and require sms verification to complete login, and then ban the phone number if they keep trolling.

# ? Mar 10, 2021 08:43

take boat: Jul 8, 2006; boat: TAKEN

hello web dev/design thread, I'm developing a mobile app for which I'll need to send out user emails, and host some dynamic website content. currently I'm looking to find some html/css templates to use as a starting point, either for free or for up to a few hundred $.

I'm working with a designer who has some HTML/CSS experience but isn't an expert, she primarily does interface design. the hope is once we find a good template, she/I can modify it to fit the designs she comes up with.

I'm sure there's an almost infinite number of email and website templates out there ��any suggestions of good places to look? any specific packages folks would recommend?

I was thinking of using Bootstrap for the website, which would narrow things down on the web side. is that recommended these days? (I haven't done much web development for a decade now)

# ? Mar 20, 2021 21:21

fsif: Jul 18, 2003

Can't really speak on the email template front, but nah I wouldn't say Bootstrap is recommended much these days. New CSS specs in flexbox and CSS grid have kind of rendered the old way of doing things obsolete.

But you know, if it's what you know and you're not planning on doing much more front end-y stuff in the future, it will still work.

# ? Mar 21, 2021 01:38

Impotence: Nov 8, 2010; Lipstick Apathy

fsif posted:

Can't really speak on the email template front, but nah I wouldn't say Bootstrap is recommended much these days. New CSS specs in flexbox and CSS grid have kind of rendered the old way of doing things obsolete.

But you know, if it's what you know and you're not planning on doing much more front end-y stuff in the future, it will still work.

I still see Bootstrap frequently, including used in conjunction with React. It uses flexbox, CSS variables/custom properties/etc anyway (and BS5 is doing CSS grid soon)

# ? Mar 21, 2021 01:53

fsif: Jul 18, 2003

I mean I see a lot of jQuery too but I wouldn't say it's generally recommended in 2021.

They're both fine if they're what you know (or even just what you like!) and you want to get something up, but each have drawbacks that have caused developers to move away from them.

# ? Mar 21, 2021 02:39

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

What do you guys use for image compressing?

# ? Mar 21, 2021 23:38

Impotence: Nov 8, 2010; Lipstick Apathy

pngquant/mozjpeg?

# ? Mar 21, 2021 23:42

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

Ooo those look good. I've been using tinypng but not having the best of luck.

# ? Mar 21, 2021 23:54

lunar detritus: May 6, 2009

take boat posted:

hello web dev/design thread, I'm developing a mobile app for which I'll need to send out user emails, and host some dynamic website content. currently I'm looking to find some html/css templates to use as a starting point, either for free or for up to a few hundred $.

I'm working with a designer who has some HTML/CSS experience but isn't an expert, she primarily does interface design. the hope is once we find a good template, she/I can modify it to fit the designs she comes up with.

I'm sure there's an almost infinite number of email and website templates out there ��any suggestions of good places to look? any specific packages folks would recommend?

I was thinking of using Bootstrap for the website, which would narrow things down on the web side. is that recommended these days? (I haven't done much web development for a decade now)

https://mjml.io/ is a lifesaver for email templates. You don't even need to install anything, the live preview is made to copy and paste the results.

# ? Mar 22, 2021 00:06

take boat: Jul 8, 2006; boat: TAKEN

lunar detritus posted:

https://mjml.io/ is a lifesaver for email templates. You don't even need to install anything, the live preview is made to copy and paste the results.

nice, thanks for the tip! based on research I was planning to check out mjml, Foundation for Emails, and Bootstrap Email, so I'll put mjml at the top of the list

fsif posted:

Can't really speak on the email template front, but nah I wouldn't say Bootstrap is recommended much these days. New CSS specs in flexbox and CSS grid have kind of rendered the old way of doing things obsolete.

But you know, if it's what you know and you're not planning on doing much more front end-y stuff in the future, it will still work.

thanks, that's helpful and makes sense. I'm not planning to become a frontend expert but I do want to catch up on it

one reason I had for Bootstrap is that I'm hoping to find existing templates and styled components I can repurpose without a lot of work on the frontend. not sure how realistic that is. I'm sure it depends on the specifics of what I'll need to implement, which is also TBD

# ? Mar 22, 2021 07:20

The Dave: Sep 9, 2003

I�ve been out of the front end game for awhile but it seems like tailwind has a lot of love.

# ? Mar 22, 2021 11:31

BonerKid: Jan 3, 2002; Chill

take boat posted:

one reason I had for Bootstrap is that I'm hoping to find existing templates and styled components I can repurpose without a lot of work on the frontend. not sure how realistic that is. I'm sure it depends on the specifics of what I'll need to implement, which is also TBD

I've primarily been using Angular at work so we decided on Material Design to save us time on styling components. I really like how they look and the Angular version makes it really easy to focus on making the site work instead of fixing bugs with input components etc. Depending on what framework you choose there might be a Material package for it, I know there is one for React and I believe a Bootstrap one as well.

# ? Mar 23, 2021 17:33

Good Sphere: Jun 16, 2018

Sorry if this is the wrong place to ask. I�m trying to find the product or service that lets you implement a Google and Facebook login for your website. Along with the users logging in, can you associate database information with them? For example, they log in using their Google account, and I can also store MySQL data associated with them when they�re authenticated.

# ? Mar 23, 2021 18:11

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

Here's a CSS question. Say you have a blog that contains some links in the text. You want to be dinosaur friendly, so you add URLs to the print styles like so:

code:

a:link:after, a:visited:after { content:" [" attr(href) "] "; }

Suppose you also have some tables, and some of the data points in the table include links to sources. Displaying these URLs inline breaks the formatting of the tables.

Is there a way, in CSS, to add the URLs after the table itself, rather than after the `a` elements? Something like:

code:

table:after a {
  content:" [ content " attr(href) "] ";
}

... but working? I have no idea whether it's possible to 'access' the child `a` element here.

# ? Mar 23, 2021 18:11

BonerKid: Jan 3, 2002; Chill

Good Sphere posted:

Sorry if this is the wrong place to ask. I�m trying to find the product or service that lets you implement a Google and Facebook login for your website. Along with the users logging in, can you associate database information with them? For example, they log in using their Google account, and I can also store MySQL data associated with them when they�re authenticated.

You're looking for OAUTH for whatever platform. I have very little experience with it but each platform will have their own API/SDK for it.

For example here is the one for Facebook: https://developers.facebook.com/docs/facebook-login/web/

# ? Mar 23, 2021 18:18

BonerKid: Jan 3, 2002; Chill

Newf posted:

Is there a way, in CSS, to add the URLs after the table itself, rather than after the `a` elements? Something like:

Have to tried playing around with the position property? position: absolute might work, but you might also have to wrap that in an element with 0 width and height.

# ? Mar 23, 2021 18:28

kedo: Nov 27, 2007

Newf posted:

Here's a CSS question. Say you have a blog that contains some links in the text. You want to be dinosaur friendly, so you add URLs to the print styles like so:
code:
a:link:after, a:visited:after { content:" [" attr(href) "] "; }
Suppose you also have some tables, and some of the data points in the table include links to sources. Displaying these URLs inline breaks the formatting of the tables.

Is there a way, in CSS, to add the URLs after the table itself, rather than after the `a` elements? Something like:
code:
table:after a {
  content:" [ content " attr(href) "] ";
}
... but working? I have no idea whether it's possible to 'access' the child `a` element here.

You could use absolute positioning to move the links after the table, but that would create issues if there�s more than one link. Otherwise no, what you�re asking probably isn�t possible with CSS. It would be trivial with JS, tho.

# ? Mar 23, 2021 18:32

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Good Sphere posted:

Sorry if this is the wrong place to ask. I�m trying to find the product or service that lets you implement a Google and Facebook login for your website. Along with the users logging in, can you associate database information with them? For example, they log in using their Google account, and I can also store MySQL data associated with them when they�re authenticated.

It is possible and depending what framework you're using it can be fairly painless to do. For example in the Django world, Python Social Auth makes it super easy to do this.

# ? Mar 23, 2021 18:33

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

Newf posted:

Here's a CSS question. Say you have a blog that contains some links in the text. You want to be dinosaur friendly, so you add URLs to the print styles like so:
code:
a:link:after, a:visited:after { content:" [" attr(href) "] "; }
Suppose you also have some tables, and some of the data points in the table include links to sources. Displaying these URLs inline breaks the formatting of the tables.

Is there a way, in CSS, to add the URLs after the table itself, rather than after the `a` elements? Something like:
code:
table:after a {
  content:" [ content " attr(href) "] ";
}
... but working? I have no idea whether it's possible to 'access' the child `a` element here.

Generate a section with a second table with | link text | URL | at the bottom of the page and hide it for all non-print media.

# ? Mar 23, 2021 18:34

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

The Dave posted:

I�ve been out of the front end game for awhile but it seems like tailwind has a lot of love.

Tailwind is great yeah, big fan

# ? Mar 24, 2021 00:04

Good Sphere: Jun 16, 2018

BonerKid posted:

You're looking for OAUTH for whatever platform. I have very little experience with it but each platform will have their own API/SDK for it.

For example here is the one for Facebook: https://developers.facebook.com/docs/facebook-login/web/

Thanks! I had no idea it was called OAUTH.

fletcher posted:

It is possible and depending what framework you're using it can be fairly painless to do. For example in the Django world, Python Social Auth makes it super easy to do this.

Thank you. I�m not using any particular framework. Just my own Javascript and PHP.

# ? Mar 24, 2021 00:12

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

Does passportjs work in vanilla j's?

# ? Mar 24, 2021 00:16

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

Good Sphere posted:

Sorry if this is the wrong place to ask. I�m trying to find the product or service that lets you implement a Google and Facebook login for your website. Along with the users logging in, can you associate database information with them? For example, they log in using their Google account, and I can also store MySQL data associated with them when they�re authenticated.

Firebase does this very seamlessly. But you generally would have to use their real-time database as a result if you want to associate user accounts with database storage. For small projects though it�s a dream.

# ? Mar 24, 2021 02:43

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

Good Sphere posted:

Thanks! I had no idea it was called OAUTH.

Thank you. I�m not using any particular framework. Just my own Javascript and PHP.

You'll probably want to use an existing library and save yourself some work, then https://oauth.net/code/php/

Unless you really want to learn how OAuth works, in which case goonspeed to you

# ? Mar 24, 2021 14:49

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

Good Sphere posted:

Along with the users logging in, can you associate database information with them? For example, they log in using their Google account, and I can also store MySQL data associated with them when they�re authenticated.

It's expected that your webapp will have its own user database, and that you'll copy info from Google/FB into that database. Let's say each user has fields like:
- real name
- email address [let's say this is the primary key]
- password
- last login time
...

All the FB / Google systems do is verify that a user is who they say they are, and then send your webapp a bundle of info (via the OAuth protocol) that contains limited information about that user: typically their name and email address, and perhaps some unique-to-Google or unique-to-FB identifier. Your app is supposed to receive that and follow this algorithm:

code:

Input: Google/FB OAuth bundle: {
   'real name': 'John Smith',
   'email': 'jsmith@example.com',
   'unique-id': '<some Google or FB-specific UUID>',
}

# Search your local user database for this user
user = search_for_user_by_email(userinfo.email)
if not found:
   # they've never been to your site before
   user = create_new_user_record(userinfo.email, userinfo.realname)
else:
   # They already have an account.
   # Check if the user updated any Google/FB account details since their
   # last login (like their real name), and if so, update those changes locally.
   update_user_record(user, userinfo)

session = login_user(user)  # Create a session
send_session_cookies_and_redirect_to_home_page(session)

For users that come to you via Google/FB, your new user's "password" field will be empty because Google/FB will never send you the user's Google/FB password. (As a consequence, the user must use Google/FB to login in the future).

Some websites try to steer all users to use some IDP like Google/FB, because it means they can avoid writing all the horrible code related to storing and resetting user passwords. But most will still have a some form of regular user/password login system anyway so that administrators can log in if the IDP is down/offline, or for testing.

But to get to your question: you're copying Google/FB's data into your own local database, so you're in control of what you do there, and you can decorate it with whatever other fields you want to store about the user.

# ? Mar 24, 2021 15:52

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

Caldera Forms for Wordpress is sunsetting at the end of this year. No more support, but they're going to be providing a free transition to Ninja Forms. It's really not much of a difference, except that the free version of Ninja Forms is missing some features such as a file upload field. So I want to take a crack at coding forms myself in PHP. The only hesitancy I have is that forms, especially with file upload fields, have the potential to be exploited. I used to want to integrate it with Wordpress, but I don't really care about that. I just want to create some simple contact forms and have them send. Is there a guide on how to create an iron-clad (or as much as humanly possible) form in PHP? I'd use wp_mail. These forms are usually generic Contact Us forms with just first name, last name, email, phone number, message. The only reason I haven't looked into this myself is that I don't want to be blamed for some security exploit I overlooked or emails not sending, but I'm tired of fighting with Wordpress plugins for forms.

# ? Mar 24, 2021 22:01

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

Just use Contact Form 7 if you're not doing anything too crazy or personal data wise imho.

It's weird how forms are still kinda antiquated web tschnogy.

# ? Mar 24, 2021 22:11

Good Sphere: Jun 16, 2018

Excellent info. Thank you for the help all of you.

# ? Mar 24, 2021 22:11

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

Also check out this article, Kinsta knows their stuff:

https://kinsta.com/blog/wordpress-contact-form-plugins/

# ? Mar 24, 2021 22:12

frogbs: May 5, 2004; Well well well

Empress Brosephine posted:

Just use Contact Form 7 if you're not doing anything too crazy or personal data wise imho.

It's weird how forms are still kinda antiquated web tschnogy.

Also, you probably already know this, but i'd recommend getting setup with SendGrid, Mailgun, or some other transactional email vendor. Deliverability from Wordpress can be a complete crapshoot even with a good form plugin, so it helps if things are coming from a sender with a good reputation (and the proper records are added at your domain).

Also, from what I remember Contact Form 7 requires a separate plugin to save submissions to the database (Flamingo?). I'd definitely reccomend installing that too, plan on reviewing submissions periodically to make sure you don't miss any.

# ? Mar 24, 2021 22:23

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

Empress Brosephine posted:

Just use Contact Form 7 if you're not doing anything too crazy or personal data wise imho.

It's weird how forms are still kinda antiquated web tschnogy.

Contact Form 7 is horrible. The company I work for had trouble with an outdated version that took down a bunch of sites last week, so I can't recommend it to them. It also just like... never sends emails from their servers, and I haven't been able to figure out why. So I also can't recommend it to them after a few years of bashing it. That Kinsta list I've seen before, and the free versions of most of those are great until someone says "Hey can we add a phone number/address/file upload field?" and I have to tell them the only way is to redo the form in another plugin, because that field type is locked behind a paywall. Also they're all reliant on jQuery and other bloat. Happy Forms was great until one day the developers decided they want to charge for a phone number field, and suddenly two dozen sites I had the plugin on had to have their forms redone.

# ? Mar 24, 2021 23:46

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

Is the problem with validation? Contact form 7 just uses html forms for it's actual forms

edit: i'm also interested in any resources you get for makign custom ones. I've been wanting to make one too just to compare.

Empress Brosephine fucked around with this message at 00:14 on Mar 25, 2021

# ? Mar 25, 2021 00:05

Violator: May 15, 2003

LifeLynx posted:

Contact Form 7 is horrible. The company I work for had trouble with an outdated version that took down a bunch of sites last week, so I can't recommend it to them. It also just like... never sends emails from their servers, and I haven't been able to figure out why. So I also can't recommend it to them after a few years of bashing it. That Kinsta list I've seen before, and the free versions of most of those are great until someone says "Hey can we add a phone number/address/file upload field?" and I have to tell them the only way is to redo the form in another plugin, because that field type is locked behind a paywall. Also they're all reliant on jQuery and other bloat. Happy Forms was great until one day the developers decided they want to charge for a phone number field, and suddenly two dozen sites I had the plugin on had to have their forms redone.

If a form field is critical, isn't it worth paying to have that field supported instead of redoing everything for a free plugin that you might have redo again in a few months?

Edit: Nevermind, I misread and now see that already deployed installations got messed up. That's a pain in the rear end.

frogbs posted:

Also, you probably already know this, but i'd recommend getting setup with SendGrid, Mailgun, or some other transactional email vendor. Deliverability from Wordpress can be a complete crapshoot even with a good form plugin, so it helps if things are coming from a sender with a good reputation (and the proper records are added at your domain).

Also, from what I remember Contact Form 7 requires a separate plugin to save submissions to the database (Flamingo?). I'd definitely reccomend installing that too, plan on reviewing submissions periodically to make sure you don't miss any.

All true. I had a new client where I'm taking over the WP that was having terrible deliverability, so I got them setup with Mailgun and Flamingo and they're good. They fought the transactional email service until it was the last option but that solved the issue right away.

Violator fucked around with this message at 00:24 on Mar 25, 2021

# ? Mar 25, 2021 00:21

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 14:34

bigperm: Jul 10, 2001; some obscure reference

I've been banging my head trying to figure out forms in Django for the last three days and today I realized that the CSS framework I was using was setting all of the input boxes as display: none because each one needs to be wrapped in a div with an 'input-something' class. Took it out and they were all working the whole time. :goose:

# ? Mar 25, 2021 00:22

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

«‹›362 »