The Web Design & Development Megathread

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

«‹›361 »

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Been using react for a few months now and I do love it. I have a best-practices question.

Generally when I am making a controlled element, say some form field or something, and I have an text input field that I need to do some sanity checks on as it is written, I can do it one of two ways, both ways I will have a function called, onTextChanged.

One way I could do it would be this:

code:

<input 
  onChange={onTextChange}
  ref={(ref) => this.text = ref )
>

...

onTextChanged() {
   //do sanity checks for error labelling
   this.setState({myText: this.text.value});
}

Or I could do it like:

code:

<input 
  onChange={(e) => onTextChange(e)}
>

...

onTextChanged(e) {
   //do sanity checks for error labelling
   this.setState({myText: e.target.value});
}

So basically my question is, is it considered better to pass the event to the change handler or pass a ref?

# ? Oct 3, 2016 07:37

Adbot: ADBOT LOVES YOU

# ? May 20, 2024 00:32

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

In the singular case neither is really superior. For a full blown form e.target.value will probably be better because you can then use e.target.name to target the correct state field in a form.

This does get more tricky however if you need to do parsing as you go to some non string format, but if it's just simple text fields, passing e.target.name + e.target.value can be a pretty straightforward way to populate a form component up the chain.

# ? Oct 3, 2016 07:52

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Maluco Marinero posted:

In the singular case neither is really superior. For a full blown form e.target.value will probably be better because you can then use e.target.name to target the correct state field in a form.

This does get more tricky however if you need to do parsing as you go to some non string format, but if it's just simple text fields, passing e.target.name + e.target.value can be a pretty straightforward way to populate a form component up the chain.

Would this be a fairly common form react framework:

code:


function textInputChanged(e) {

   //validation here

   let newState = {};
   newState[e.target.name] = e.target.value;
   this.setState(newState);
}

Writing this has made me want to ask another question I've had for a long time. I know when creating an object with dynamic property names I can use the syntax like above, but is there anyway to declare a new object with a dynamic/variable property name on a single line?

Knifegrab fucked around with this message at 09:20 on Oct 3, 2016

# ? Oct 3, 2016 09:17

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

Yeah, that's pretty much a basic way to update a state object with form text fields. There are more complex things that could be done re validation and processing but obviously in this small case we're not concerned too much with that.

As for building an object literal with keys based on a variable, there is a Babel transform for the feature, and it'll be in ES6 afaik - https://ponyfoo.com/articles/es6-object-literal-features-in-depth#computed-property-names

Easy if you're already using Babel + ES6.

# ? Oct 3, 2016 10:09

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

Knifegrab posted:

Or I could do it like:
code:
<input 
  onChange={(e) => onTextChange(e)} />
So basically my question is, is it considered better to pass the event to the change handler or pass a ref?

FYI for that one you can just write:

code:

<input 
  onChange={onTextChange} />

There is no need to create a function to call a function with the same arguments.

# ? Oct 3, 2016 11:35

huhu: Feb 24, 2006

McGlockenshire posted:

Maybe "fixed background"?

Regardless it's literally one line of CSS to switch how the background image is oriented so you can just do it yourself.

http://www.w3schools.com/cssref/pr_background-attachment.asp

You'll also need to look into child themes which basically boils down to taking your Foo_ Theme folder, creating a Foo_Theme_Child folder alongside it, creating a style.css file inside the child, adding @import to link to the other folder and then you can throw in the link above I mentioned.

Oh and this is all done with an FTP program. I'm not sure if you even get FTP access with WordPress.com but I might be wrong.

# ? Oct 3, 2016 13:41

pipebomb: May 12, 2001; Dear God, what is it like in your funny little brains?
It must be so boring.

Ok, so my issue is twofold. The second part is the quick fix - if someone has an idea for it, I can focus on part one.

1) Drupal 7 - I installed Pathauto and have generated aliases for content, but it is appending /1 to the end of every url. Can't figure out why and it is loving up links because the aliases don't actually go there.

2) What's the best way to use mod rewrite to strip the /1 from the url? Example:
current: http://site.com/path/file_name/1
need: http://site.com/path/file_name

Thanks for any help, all.

# ? Oct 3, 2016 15:36

Gul Banana: Nov 28, 2003

Lumpy posted:

FYI for that one you can just write:
code:
<input 
  onChange={onTextChange} />
There is no need to create a function to call a function with the same arguments.

class this binding

# ? Oct 3, 2016 16:01

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

Gul Banana posted:

class this binding

If you are using it, then yes.

# ? Oct 3, 2016 17:00

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Lumpy posted:

FYI for that one you can just write:
code:
<input 
  onChange={onTextChange} />
There is no need to create a function to call a function with the same arguments.

I've never understood this. Can you call a function callback with however member parameters as you expect in this way instead of using an anonymous function (or arrow expression here to maintain the this scope)?

# ? Oct 3, 2016 17:00

Maleh-Vor: Oct 26, 2003; Artificial difficulty.

ConanThe3rd posted:

W-what? Menus are not supposed to work like that. That's littearly supposed to be one section in the admin (or content) page.

Then again I came across a Wordpress site that used pages and posts the wrong way so maybe the guy who developed it had flippers for hands...

The Nav Menu has different dropdowns for each link, which are formed by a Block and a Menu side by side. They also use Regions for some reason. Each menu needs to have both blocks placed whenever you make a name change, and regions need to be reactivated.

# ? Oct 3, 2016 17:19

the heat goes wrong: Dec 31, 2005; I´m watching you...

huhu posted:

http://www.w3schools.com/cssref/pr_background-attachment.asp

You'll also need to look into child themes which basically boils down to taking your Foo_ Theme folder, creating a Foo_Theme_Child folder alongside it, creating a style.css file inside the child, adding @import to link to the other folder and then you can throw in the link above I mentioned.

Oh and this is all done with an FTP program. I'm not sure if you even get FTP access with WordPress.com but I might be wrong.

No FTP or child themes on WordPress.com. Even for simple CSS edits you have to pay $100/year.

# ? Oct 3, 2016 18:30

Depressing Box: Jun 27, 2010; Half-price sideshow.

Knifegrab posted:

I've never understood this. Can you call a function callback with however member parameters as you expect in this way instead of using an anonymous function (or arrow expression here to maintain the this scope)?

A callback can be any function, anonymous or named. Example:

https://jsbin.com/zeloca/edit?js,console

# ? Oct 3, 2016 18:34

awesomeolion: Nov 5, 2007; "Hi, I'm awesomeolion."

Edit -- once I finished writing this up the dashboard is now lightening fast. Guess it just needed some time and space to sort its life out...

Just installed a fresh install of Wordpress multisite on a client's account with Go Daddy's Ultimate Web Hosting Linux. It works but is remarkably slow. Each action in the dashboard is taking 30s to 1m to load... I currently have the same setup on local and on my site and they're working quite well so I'm thinking there may be some Go Daddy config to do? Maybe I need to disable "Glacial Multisite Mode"?

.htaccess

code:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]
</IfModule>

# END WordPress

wp-config

code:

.. ( database stuff )

/* Multisite */
define( 'WP_ALLOW_MULTISITE', true );

define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'multi.lovelinesonline.com');
define('PATH_CURRENT_SITE', '/');
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

/* That's all, stop editing! Happy blogging. */

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
	define('ABSPATH', dirname(__FILE__) . '/');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

phpinfo

Any ideas would be very much appreciated

So far I tried ending all processes (thinking maybe it was some jank left from installing) but the problem persists...

# ? Oct 3, 2016 18:55

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

Knifegrab posted:

I've never understood this. Can you call a function callback with however member parameters as you expect in this way instead of using an anonymous function (or arrow expression here to maintain the this scope)?

Minor nitpick: when we're talking about arrow functions and this we're talking about context, not scope. I mix them up all the time too but there's a big difference.

In React ES6, the this context is not automatically bound. So the difference between these two things:

pre:

<input onChange={this.onTextChange} />

pre:

<input onChange={(e) => {this.onTextChange(e)}}

Is that the first creates a new context (which is probably undefined) and the second maintains maintains the same this context.

The docs also recommend that you bind all of your handlers in the constructor so that it's only done once:

pre:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);
}

But personally I pretty much ignore that. I have a lot of lines in my code that look variously like this:

pre:

<button onClick={(e) => {this.doFirstThing(e); this.doSecondThing(e);}} >Click Me</button>

pre:

<button onClick={this.doAThing.bind(this)} >No, Click ME</button>

Or even more fancy:

pre:

render() {
  return (
    <div>
      {this.props.children.map((ea, i) => {
        return <div key={"thingy-" + i} onClick={this.handleThingyClick.bind(this, i)}>{ea}</div>
      })
    </div>
  )
}
handleThingyClick(i, e) {
  // now I still have my "this" context, the numerical index of the thingy that was clicked, AND the event. Neat!
}

Circling back to your original question about e.target versus refs, I personally use e.target 95% of the time because I find it easier to manage than juggling refs (which I find pretty awkward.) Using e.target makes the function a bit more agnostic (it's not tied directly to a ref) and there might be lots of useful information in the event object that you can grab.

Anony Mouse fucked around with this message at 01:58 on Oct 4, 2016

# ? Oct 3, 2016 19:03

kedo: Nov 27, 2007

awesomeolion posted:

Go Daddy's Ultimate Web Hosting Linux.

Found the problem.

e: To be more helpful ��GoDaddy is just a terrible, terrible host. It's extremely likely that there's little to nothing you'll be able to do to improve load times without changing hosts. If you really want you can test it out here: https://www.webpagetest.org/ but I guarantee you that you'll see and extremely long time to first byte, and then a reasonably fast page load afterwards. That's just how GoDaddy hosting is.

kedo fucked around with this message at 20:13 on Oct 3, 2016

# ? Oct 3, 2016 20:06

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Thanks for the discussion guys! Every little bit helps me.

# ? Oct 4, 2016 01:42

joebuddah: Jan 30, 2005

I am using plotly.js to graph data from an ms sql database. I can pull and successfully graph the data by itself. However it does not like the date values from the Date column. I used getdate() to auto populate the date values for each entry. How do I format the date value to work?
My code is very similar to the sample from the manual. http://php.net/manual/en/function.mssql-fetch-assoc.php

code:



while ($row = mssql_fetch_assoc($query)) {
        echo $row['date'] . ',';
I have tried 

var xaxis = <php
while ($row = mssql_fetch_assoc($query)) {
         $xaxis = date_format( $row['date'], 'm/d/y;) . ','; ?>

while ($row = mssql_fetch_assoc($query)) {
      $xasix-> date_format( $row['date'],'m/d/y') . ',';

joebuddah fucked around with this message at 04:16 on Oct 5, 2016

# ? Oct 5, 2016 04:08

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

I've got kind of a weird problem.

I have a panel body, that contains a bunch of configuration elements. When those configs are submitted to the server I replace the elements with a single busy spinner that has the same height and size of the original elements.

Checking on the div that contains the spinner vs the div that contains the elements shows that they are indeed the same size with the same margin, padding, and outline (all being zero in this case).

However when I replace my element, the panel body shrinks by 20 px exactly. I don't understand why the hell the panel body would change if the element inside is exactly the same!

# ? Oct 5, 2016 21:12

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

Knifegrab posted:

I've got kind of a weird problem.

I have a panel body, that contains a bunch of configuration elements. When those configs are submitted to the server I replace the elements with a single busy spinner that has the same height and size of the original elements.

Checking on the div that contains the spinner vs the div that contains the elements shows that they are indeed the same size with the same margin, padding, and outline (all being zero in this case).

However when I replace my element, the panel body shrinks by 20 px exactly. I don't understand why the hell the panel body would change if the element inside is exactly the same!

Padding / margins of internal elements pushing it out? Are you using box-sizing: border box and hiding overflow on the containers? Whatever it is, dev tools will learn you!

# ? Oct 5, 2016 21:35

Redrum and Coke: Feb 25, 2006; wAstIng 10 bUcks ON an aVaTar iS StUpid

I'm sorry if this is the wrong thread, but I don't know where else to put it.

I host my site with a goon-run server.
From time to time I get this error, without any changes been made on the site, where cpanel shows this:

Obviously, this makes the site inaccessible.

It's cpanel 58, so I don't see the option to kill processes, and make it work again.

Since this happens without my input, could it be a server issue? I've talked with the host before, but since problems tend to solve themselves on their own, they don't really take any responsibility.

Any ideas?

# ? Oct 6, 2016 16:13

Impotence: Nov 8, 2010; Lipstick Apathy

It's probably cloudlinux ratelimiting you or something because some aggressive crawler has repeatedly tried to hit /search or something

# ? Oct 6, 2016 21:34

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Lumpy posted:

Padding / margins of internal elements pushing it out? Are you using box-sizing: border box and hiding overflow on the containers? Whatever it is, dev tools will learn you!

Yup turned out I was an idiot. I didn't realize padding could extend outside the margins of a parent class!

# ? Oct 7, 2016 06:42

huhu: Feb 24, 2006

I've combined a horizontal scroller Sly(http://darsa.in/sly/) and a filter MixItUp (https://mixitup.kunkalabs.com/) together as seen here: http://travbum.pythonanywhere.com/#filter-page. I can click on the projects and drag them to the left to see more projects off screen to the right. However, when I stop holding the mouse down they snap back. I feel like I'm not sure where to begin searching the internet for this issue so I'm just hoping for a push in the right direction.

# ? Oct 7, 2016 17:24

The T: May 29, 2010; A sufficiently chaotic system is maximally fair.

Well, figured I'd post here and hopefully I won't get laughed out of the forum!

Outside of some HTML courses I took in High School 15 years ago, I haven't touched web design in a long time. I want to make a fairly simple page using mySQL and PHP. Basically, a database system for videos that will list details on them, and I'm thinking the simplest way to do that would just be a "video.php?id=1" type URL, and have that pull from the database. I've read a few very simple PHP/mySQL tutorials, set up a local Apache server with mySQL for playing with, and I understand the basics, but each tutorial one has tended to show me things I didn't think I needed to know and generally confused me, so I'm probably an idiot.

Long story short: is there a simple guide that will walk me through what I specifically want to do, and then I can expand from there? Also, any guides on ideally optimizing the mySQL database(s?), and doing things like interactivity between multiple databases...

I'm totally clueless, so a general nudge in the right direction would be great.

# ? Oct 7, 2016 18:35

McGlockenshire: Dec 16, 2005; GOLLOCKS!

I don't have a guide for your specific task, but I do have guide picking advice. When referencing PHP tutorials look for the published date. Don't trust any tutorial made more than five years ago, period. If there's no publish date, assume it's prehistoric. Make sure you're using the correct way to speak to mysql and only use parameterized queries. If you find yourself doing string concatenation involving user-provided data to build a query, you are doing something wrong and dangerous.

Don't worry about "optimizing" your database. Read up on database normalization and shoot for the third normal form when you can. Make sure that you have indexes on columns in your WHERE clauses and use EXPLAIN to make sure that the indexes are being used if you have any doubt.

Don't sweat the overall design. You're going to make mistakes. This is fine. Make it work first, then figure out what bugs you the most about it and then fix that.

Later on, you'll want to read PHP The Right Way and look through the No Framework tutorial. These resources are designed and intended for somewhat experienced developers and if you look at them right now you will come away confused. Just bookmark them and come back to them later.

# ? Oct 7, 2016 21:00

kedo: Nov 27, 2007

Can anyone recommend some good reading material on responsive ads?

# ? Oct 7, 2016 21:23

darthbob88: Oct 13, 2011; YOSPOS

I'm rewriting this old project to use an Angular2 frontend on an ASP.NET backend, and right now I'm working on adding proper authentication based on this article. The issue is, while I am fully willing to rip out every view and just have Angular handle all the UI, I really like the login handling that ASP.NET generated for me, especially with the easy OAuth integration with other services. Is there a good way to integrate the two? Should I create a register/login page and service, as in that article, and have it call back to the ASP.NET API as normal, or should I just leave the ASP.NET login stuff in place and just have the Angular user service call back for a token? I'm leaning towards the latter right now, as much as it means this isn't going to be a single-page app anymore.

# ? Oct 8, 2016 16:45

awesomeolion: Nov 5, 2007; "Hi, I'm awesomeolion."

Hello y'all,

I'm working on a web-based board game prototype in Elm. I am absolutely terrible at it but starting to get the hang of the basics. I'm thinking it might be fun to make an Elm thread? Any other Elmers out there interested in commiserating?

Although it took all day, I am quite proud that I made a grid... baby steps.

Also this is a p good introduction to elm video https://www.youtube.com/watch?v=zBHB9i8e3Kc

# ? Oct 9, 2016 05:36

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

awesomeolion posted:

Hello y'all,

I'm working on a web-based board game prototype in Elm. I am absolutely terrible at it but starting to get the hang of the basics. I'm thinking it might be fun to make an Elm thread? Any other Elmers out there interested in commiserating?

Although it took all day, I am quite proud that I made a grid... baby steps.

Also this is a p good introduction to elm video https://www.youtube.com/watch?v=zBHB9i8e3Kc

There has been a little discussion in the Functional thread, and many of us have mentioned liking it / wanting to learn it in the Modern Front End Thread. I'd definitely be interested in a thread on it, but I can't say how much traffic it would get. Might just be me asking you dumb questions for a few weeks...

# ? Oct 10, 2016 00:33

Depressing Box: Jun 27, 2010; Half-price sideshow.

awesomeolion posted:

I'm thinking it might be fun to make an Elm thread? Any other Elmers out there interested in commiserating?

I'd be interested too, I've also just started learning Elm.

# ? Oct 10, 2016 01:13

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

Anyone used Affinity Designer? (https://affinity.serif.com/en-us/ui-design-software/) I love me some Sketch, but there's some things I don't like about it, and this seems pretty cool.

# ? Oct 12, 2016 14:20

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

Lumpy posted:

Anyone used Affinity Designer? (https://affinity.serif.com/en-us/ui-design-software/) I love me some Sketch, but there's some things I don't like about it, and this seems pretty cool.

I've played with it, it's pretty nice and it's real fricking fast. It's not like a license for it is particularly expensive either.

# ? Oct 12, 2016 16:12

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

Maluco Marinero posted:

I've played with it, it's pretty nice and it's real fricking fast. It's not like a license for it is particularly expensive either.

Yeah, I think I'll pick it up because worst case, I don't feed my kid for a few days and it's paid for. :v:

# ? Oct 12, 2016 16:31

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

Lumpy posted:

Anyone used Affinity Designer? (https://affinity.serif.com/en-us/ui-design-software/) I love me some Sketch, but there's some things I don't like about it, and this seems pretty cool.

Probably going to check it out, since Sketch is mac only and Adobe is taking forever to port XD to Windows. :sigh:

I've been looking for a tool to do quick prototypes with a little more visual fidelity than prototyping in HTML.

# ? Oct 12, 2016 17:25

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

chami posted:

Probably going to check it out, since Sketch is mac only and Adobe is taking forever to port XD to Windows. I've been looking for a tool to do quick prototypes with a little more visual fidelity than prototyping in HTML.

Same here, been running a mac VM for sketch, but its a pain.

Trying out the Windows beta now though.

# ? Oct 12, 2016 19:55

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

What are the best options for reducing spam on forms generated by third parties/email marketing platforms?

More than once I've had a client use something like this and just say "Here's some HTML for our mailing list, put this on the site".

The problem is these usually never have any measures for handling spam submissions and they are not handled by my server so I don't see the submissions. I could try checking with JS but what if JS is disabled?

# ? Oct 13, 2016 16:33

fuf: Sep 12, 2004; haha

nexus6 posted:

What are the best options for reducing spam on forms generated by third parties/email marketing platforms?

More than once I've had a client use something like this and just say "Here's some HTML for our mailing list, put this on the site".

The problem is these usually never have any measures for handling spam submissions and they are not handled by my server so I don't see the submissions. I could try checking with JS but what if JS is disabled?

Wordpress thread recently reminded me about https://www.google.com/recaptcha

But might be impossible to implement if you can't edit the form.

One thing I noticed with reCAPTCHA is that I was still getting a lot of spam until I went into "Advanced Settings" on the google control panel for each site and changed "Security Preference" to "Most Secure" - easy to miss.

# ? Oct 13, 2016 17:08

Redrum and Coke: Feb 25, 2006; wAstIng 10 bUcks ON an aVaTar iS StUpid

Biowarfare posted:

It's probably cloudlinux ratelimiting you or something because some aggressive crawler has repeatedly tried to hit /search or something

I apologize for the ignorance, but could you elaborate on this a bit? Would there be a way for me to do something to prevent this from happening?

# ? Oct 13, 2016 20:20

Adbot: ADBOT LOVES YOU

# ? May 20, 2024 00:32

fuf: Sep 12, 2004; haha

Anyone know if it's possible to figure out what version of Joomla a site is using without access to the backend or server?

e: found this good post:
https://www.gavick.com/blog/how-to-check-the-version-of-joomla

fuf fucked around with this message at 10:19 on Oct 14, 2016

# ? Oct 14, 2016 09:14

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

«‹›361 »