The Web Design & Development Megathread

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

«‹›362 »

Dominoes: Sep 20, 2007

I added this to settings.py:

Python code:


LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'filters': {
        'require_debug_false': {
            '()': 'django.utils.log.RequireDebugFalse',
        },
        'require_debug_true': {
            '()': 'django.utils.log.RequireDebugTrue',
        },
    },
    'formatters': {
        'django.server': {
            '()': 'django.utils.log.ServerFormatter',
            'format': '[%(server_time)s] %(message)s',
        }
    },
    'handlers': {
        'console': {
            'level': 'INFO',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
        },
        'console_debug_false': {
            'level': 'ERROR',
            'filters': ['require_debug_false'],
            'class': 'logging.StreamHandler',
        },
        'django.server': {
            'level': 'INFO',
            'class': 'logging.StreamHandler',
            'formatter': 'django.server',
        },
        'mail_admins': {
            'level': 'ERROR',
            'filters': ['require_debug_false'],
            'class': 'django.utils.log.AdminEmailHandler'
        },
    },
    'loggers': {
        'django': {
            'handlers': ['console', 'mail_admins'],
            'level': 'INFO',
        },
        'django.server': {
            'handlers': ['django.server'],
            'level': 'INFO',
            'propagate': False,
        },
    }
}

# Attempt to use Gmail account for password resets
EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
EMAIL_HOST = "smtp.gmail.com"
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = "myemail@gmail.com"
EMAIL_HOST_PASSWORD = os.environ['EMAIL_PASSWORD']

DEFAULT_FROM_EMAIL = "myemail@gmail.com"
SERVER_EMAIL = "myemail@gmail.com"

And still don't get logs or emails. Did I type something wrong?

# ? Feb 26, 2020 22:24

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 10:44

Tei: Feb 19, 2011; Can't post for 33 hours!

maybe theres a setting to login-before-send-emails? smtp server defend their service fiercely

if you can force the whatever to log the submit message attemp can get, or maybe check /var/mail/log? , or try to send a email from the same host and details to see if they are valid

# ? Feb 27, 2020 00:21

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

Try ./manage.py sendtestemail user@host.com

# ? Feb 27, 2020 01:26

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

Dominoes posted:

I added this to settings.py:

And still don't get logs or emails. Did I type something wrong?

You checked spam yea?

# ? Feb 27, 2020 02:02

Dominoes: Sep 20, 2007

Much thanks dudes. The test email worked. I think this implies the error isn't a python exception with my app. Switched from gunicorn to uwsgi; optimistic.

Can I say here how much I love Django? I've been looking at using Rust on the back end so I can share code with a wasm frontend, but it has nothing this sophisticated. Seems like a lot of people use it, but I can't get a straight answer on how they handle auth, email, accounts, changing db schema etc. I bring this up, since I somehow don't know what wsgi is, since it's been abstracted away by Django.

Dominoes fucked around with this message at 19:21 on Feb 29, 2020

# ? Feb 29, 2020 18:29

Grimes: Nov 12, 2005

I'm going to a hackathon and I'm in charge of the front-end and I'm not really that experienced :downs:

. Any suggestions for a front-end stack that will help get a thrown-together project up and running as fast as possible?

# ? Feb 29, 2020 20:14

Dominoes: Sep 20, 2007

React, Typescript, Wevpack. Don't use those official quickstart repos; they turn into config he'll once you want to do something out of their pattern. Or use the super-awesome Rust framework I made!

Dominoes fucked around with this message at 20:49 on Feb 29, 2020

# ? Feb 29, 2020 20:37

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

Grimes posted:

I'm going to a hackathon and I'm in charge of the front-end and I'm not really that experienced . Any suggestions for a front-end stack that will help get a thrown-together project up and running as fast as possible?

https://github.com/facebook/create-react-app

Your call on typescript. If you have never used it, it will add a lot of time to get going to start, which may or may not pay off with saving later debugging.

# ? Feb 29, 2020 20:51

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Dominoes posted:

I bring this up, since I somehow don't know what wsgi is, since it's been abstracted away by Django.

FYI, Django doesn't really abstract away wsgi. It's more like Django just includes the file necessary to make wsgi work. wsgi is the abstraction.

You may have understood this, but it wasn't entirely clear.

# ? Feb 29, 2020 21:36

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

Grimes posted:

I'm going to a hackathon and I'm in charge of the front-end and I'm not really that experienced . Any suggestions for a front-end stack that will help get a thrown-together project up and running as fast as possible?

If you happen to be coding in python for the rest of the project, plotly�s Dash +Dash Bootstrap Components is excellent at getting a pretty thing up and running right away.

E.g. It�s prob the absolute fastest way to get a locally running ML model to show an output based on an input taken from the web app.

# ? Feb 29, 2020 22:27

Grimes: Nov 12, 2005

Thanks for the feedback and suggestions! Regarding Typescript: My background is more in Java than Javascript. I'm basically just flying by the seat of my pants anyway, so would Typescript be more or less familiar for me?

# ? Feb 29, 2020 23:53

Dominoes: Sep 20, 2007

TS's type checking will make debugging etc easier; your IDE and transpiler will help catch a common class of errors, and dramatically improve refactoring.

Dominoes fucked around with this message at 18:20 on Mar 1, 2020

# ? Feb 29, 2020 23:55

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

lol do not use typescript for a hackathon you'll spend most of the time figuring out why typescript is throwing errors.

Learn it on your own time when you're not coding in a stressful environment.

# ? Feb 29, 2020 23:58

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

Grump posted:

lol do not use typescript for a hackathon you'll spend most of the time figuring out why typescript is throwing errors.

Learn it on your own time when you're not coding in a stressful environment.

I tried not to say it, but yeah, this. 90% of your first 20 hours using typescript is getting the first two lines you wrote to stop giving you typescript errors.

# ? Mar 1, 2020 00:25

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Grump posted:

lol do not use typescript for a hackathon you'll spend most of the time figuring out why typescript is throwing errors.

Learn it on your own time when you're not coding in a stressful environment.

This is a good take.

TS is absolutely worth the initial time investment, but it doesn't sound like this is a good time to make that investment.

# ? Mar 1, 2020 17:57

Grimes: Nov 12, 2005

I'll mess with TypeScript on my own during the week and if it's too much I'll just use JS. I'm a second-year CS student so I'm not "good" at anything but I can probably wander my way through it.

# ? Mar 1, 2020 18:07

fsif: Jul 18, 2003

Yeah I don't think there's that much value in TypeScript unless you're already proficient in JavaScript, at least right now. It's not like jumping ahead using a framework/library where you would at least get a lot of user-facing functionality immediately out of the box. You'll likely just end up confusing yourself later for potential vanilla JS projects.

There might be a time in the next several years where TS is so ubiquitous that it's almost pointless to learn JS without it, but we're not there yet and there's no guarantee we ever will be.

# ? Mar 1, 2020 18:35

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

fsif posted:

Yeah I don't think there's that much value in TypeScript unless you're already proficient in JavaScript, at least right now. It's not like jumping ahead using a framework/library where you would at least get a lot of user-facing functionality immediately out of the box. You'll likely just end up confusing yourself later for potential vanilla JS projects.

There might be a time in the next several years where TS is so ubiquitous that it's almost pointless to learn JS without it, but we're not there yet and there's no guarantee we ever will be.

Same but literally everything in web development.

# ? Mar 1, 2020 19:38

Dominoes: Sep 20, 2007

Thermopyle posted:

FYI, Django doesn't really abstract away wsgi. It's more like Django just includes the file necessary to make wsgi work. wsgi is the abstraction.

You may have understood this, but it wasn't entirely clear.

Nope - definitely didn't know that.

Switching from gunicorn to uwsgi appears to have fixed it. I now get a Server request interrupted error every other hour which I wasn't getting before, and memory use is 2-3x as high, but the app doesn't break anymore, so calling this a big win.

How-to: Set Procfile to read: web: uwsgi uwsgi.ini. Make that file, and place it in top proj folder:

INI code:

[uwsgi]
http-socket = :$(PORT)
master = true
processes = 4
die-on-term = true
module = django_app_name.wsgi
memory-report = true

Add `uwsgi` to `requirements.txt`.

The email's working great for app bugs too.

Dominoes fucked around with this message at 13:33 on Mar 3, 2020

# ? Mar 3, 2020 13:20

huhu: Feb 24, 2006

I've got a React app being deployed by Firebase hosting.

Here's my config:

code:

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Every time I enter huhu.com the url ends up becoming huhu.com/#/

This breaks all links to my site. For example, if I had huhu.com/blog/1, the url is now huhu.com/#/blog/1 and visiting huhu.com/blog/1 returns index.html

Thoughts?

# ? Mar 4, 2020 01:02

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

huhu posted:

I've got a React app being deployed by Firebase hosting.

Here's my config:
code:
{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
Every time I enter huhu.com the url ends up becoming huhu.com/#/

This breaks all links to my site. For example, if I had huhu.com/blog/1, the url is now huhu.com/#/blog/1 and visiting huhu.com/blog/1 returns index.html

Thoughts?

What are you using for routing in your front end project? I'll bet it's using a "hash strategy" for routing. Depending on which router package you're using, see if it supports a "HTML5 history" mode that'll help you get away from that (see React Router's "BrowserRouter" vs its "HashRouter": https://reacttraining.com/react-router/web/api/BrowserRouter)

# ? Mar 4, 2020 01:58

Dominoes: Sep 20, 2007

Agree on that line of investigation. What about on the dev server? Does it do it there too, or just deployed?

The History API is straightfwd. Like so many JS libs, I think RR makes things more complicated, not less.

As another Pileon to IAmKale, Hash routing is effectively obsolete, so go with History for new projects.

Dominoes fucked around with this message at 02:39 on Mar 4, 2020

# ? Mar 4, 2020 02:22

huhu: Feb 24, 2006

IAmKale posted:

What are you using for routing in your front end project? I'll bet it's using a "hash strategy" for routing. Depending on which router package you're using, see if it supports a "HTML5 history" mode that'll help you get away from that (see React Router's "BrowserRouter" vs its "HashRouter": https://reacttraining.com/react-router/web/api/BrowserRouter)

Hah yup. Changed it over to HashRouter to try something out - forgot to change it back. Thanks!

# ? Mar 4, 2020 13:51

Love Stole the Day: Nov 4, 2012; Please give me free quality professional advice so I can be a baby about it and insult you

I am dumb and bad and posted this in the wrong thread. Sorry!

# ? Mar 9, 2020 22:52

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

There�s an API I want to connect to using python. It requires oAuth 2 and thus supplying a redirect uri. I know nothing about this all the other APIs I use just use keys or secrets.

I just wanna get this stupid thing going and don�t want to spend a few hours reading docs. How can I get a redirect uri to supply it?

EDIT:This worked https://github.com/reddit-archive/reddit/wiki/oauth2-python-example

Had to set flask to accept adhoc HTTPS

Is that hilariously insecure for getting data from this API to be used on my local machine?

CarForumPoster fucked around with this message at 03:15 on Mar 12, 2020

# ? Mar 12, 2020 01:26

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

If this is just something for personal use you could use the cut-and-paste flow (where after the user signs in and approves the request, they manually copy the oauth token into your app).

# ? Mar 12, 2020 02:08

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

Jabor posted:

If this is just something for personal use you could use the cut-and-paste flow (where after the user signs in and approves the request, they manually copy the oauth token into your app).

Yes this is how I prototyped. If I end up talking to this API a lot I�ll figure out the right way to do things.

Anything wrong with an adhoc SSL connection for talking to it locally and not sharing with others?

# ? Mar 12, 2020 03:40

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

So the Google developer docs lay out your options pretty nicely: https://developers.google.com/identity/protocols/OAuth2InstalledApp

Essentially you have two choices:
- Run a web server on localhost that you can use to catch the oauth response.
- Install a handler for a custom URI scheme and use that scheme to catch the oauth response.

# ? Mar 12, 2020 05:23

GenJoe: Sep 15, 2010; Rehabilitated?

That's just a bullshit word.

Does anyone know if there are services or libraries that can vend logos or other relevant assets for common companies? Ideally I want to be able to convert a string into a logo, or something or other, in order to display a user's financial account information with UI that's a little more personalized.

I'm wondering if the best thing to do here is to manually add assets for a limited subset of institutions, and then fall back to a generic logo for institutions that we don't have any assets for.

# ? Mar 15, 2020 20:56

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

GenJoe posted:

Does anyone know if there are services or libraries that can vend logos or other relevant assets for common companies? Ideally I want to be able to convert a string into a logo, or something or other, in order to display a user's financial account information with UI that's a little more personalized.

I'm wondering if the best thing to do here is to manually add assets for a limited subset of institutions, and then fall back to a generic logo for institutions that we don't have any assets for.

I don't have one and did no checking but if you already have a list of strings and theres less than ~1000 of them, just first up selenium and run a bunch of google images searches for "{company_name} logo" and take the first result, checking them manually based on file name.

# ? Mar 15, 2020 21:52

MrMoo: Sep 14, 2000

I found one a while ago, but really small images. Generally a legal minefield as companies get really pissy about how their logos are abused.

There are random things like https://www.brandsoftheworld.com

MrMoo fucked around with this message at 17:53 on Mar 16, 2020

# ? Mar 16, 2020 17:51

bigmandan: Sep 11, 2001; lol internet; College Slice

NPM is being acquired by GitHub and indirectly Microsoft.

# ? Mar 16, 2020 21:13

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

bigmandan posted:

NPM is being acquired by GitHub and indirectly Microsoft.

So they decided to make it occasionally unavailable on top of all its other problems?

# ? Mar 16, 2020 23:35

Tortilla Maker: Dec 13, 2005; Un Desmadre A Toda Madre

I'm converting .docx documents to HTML.

The current MS Word styles allow for lettered paragraphs:

code:

(a) blah blah blah
(b) blah blah blah
(c) blah blah blah

I'm trying to create a CSS stylesheet to mimic the appearance of the source .docx file.

Is there a way to do add this list-style property to a paragraph class? I'd hate to have to convert all of these paragraph styles in MS Word to Lists.

# ? Mar 20, 2020 13:57

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Tortilla Maker posted:

Is there a way to do add this list-style property to a paragraph class? I'd hate to have to convert all of these paragraph styles in MS Word to Lists.

I've achieved this in the past with a p::before style that references a CSS counter which auto-increments per paragraph.

e: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

# ? Mar 20, 2020 14:06

Tortilla Maker: Dec 13, 2005; Un Desmadre A Toda Madre

ynohtna posted:

I've achieved this in the past with a p::before style that references a CSS counter which auto-increments per paragraph.

e: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Fantastic! Thank you!

# ? Mar 20, 2020 14:47

Grimes: Nov 12, 2005

Hey goons. I'm a CS student in a full-stack web development course, and due to COVID-19, everything is being delivered online and it's a bit more watered down. I'm working on a project that's worth 20% of my final grade, and it requires the use of AJAX to dynamically load content. We haven't really had the opportunity to properly learn AJAX, so I'm struggling a little bit with how to conceptually structure my code.

My goal is to have an index.php main page and have dynamic content load into a div that represents the main viewing-port of the browser. So if someone clicks 'Search', the div will show a search bar + results, or if they click 'Contact', it'll display the contact form. I'm confused about how I should actually proceed to load this content. My idea right now is to have a script on my index.php which will do an 'include' with the relevant php when the user requests different pages, and then use AJAX within that php to load things like search results, but I'm hazy about how I should handle the javascript associated with those individual php pages. Should I load them all into index.php, or open a <script> tag and use $.getScript within each individual php I'm including? Please verbally abuse me and enlighten me on how to properly handle this super basic poo poo :pray:

# ? Apr 11, 2020 21:45

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

Grimes posted:

Hey goons. I'm a CS student in a full-stack web development course, and due to COVID-19, everything is being delivered online and it's a bit more watered down. I'm working on a project that's worth 20% of my final grade, and it requires the use of AJAX to dynamically load content. We haven't really had the opportunity to properly learn AJAX, so I'm struggling a little bit with how to conceptually structure my code.

My goal is to have an index.php main page and have dynamic content load into a div that represents the main viewing-port of the browser. So if someone clicks 'Search', the div will show a search bar + results, or if they click 'Contact', it'll display the contact form. I'm confused about how I should actually proceed to load this content. My idea right now is to have a script on my index.php which will do an 'include' with the relevant php when the user requests different pages, and then use AJAX within that php to load things like search results, but I'm hazy about how I should handle the javascript associated with those individual php pages. Should I load them all into index.php, or open a <script> tag and use $.getScript within each individual php I'm including? Please verbally abuse me and enlighten me on how to properly handle this super basic poo poo .

Ajax is requesting data from inside an already delivered page via javascript. So, index.php serves up a page, and as part of that page there is:

code:

<script src="myAwesomeScript.js" />

That script handles the user's search, but instead of requesting a whole new page from the server, it makes a fetch to search.php on the server, and that PHP script returns JSON to so the javascript parses that and makes new elements or whatnot. The PHP could return HTML fragments as well I guess, but JSON is more common.

tl:dr;

index.php script serves up a full HTML page, which includes your javascript.
Javascript uses fetch to request data from a different PHP script which returns JSON or HTML fragments
Javascript sticks new content into the page that was originally served up by index.php.

# ? Apr 12, 2020 00:47

Roadie: Jun 30, 2013

To add to this, in modern browser versions there's a dead simple method now built in called fetch that's intended as the standard for the future.

JavaScript code:

function getServerResponseAndDoThing(inputText) {
  // This avoids having to manually escape text for a query param
  const urlParams = new URLSearchParams()
  urlParams.append("input", inputText);

  // This uses the browser builtin fetch, which works in everything but IE
  // [url]https://caniuse.com/#search=fetch[/url]
  fetch('/a-script-on-the-server.php?' + urlParams.toString())
    .then((response) => {
      if (!response.ok) {
        // This goes to the .catch below
        throw response;
      }

      // This is a promise, and its resolved value goes to the .then below
      return response.text();
    })
    .then((htmlFragment) => {
      // Write the returned raw text into the page as an HTML fragment
      document.querySelector('#id-of-a-div-on-the-page').innerHTML =
        '<p>' + htmlFragment + '</p>';
    })
    .catch((error) => {
      console.error('Attempt to fetch script response from server failed:', error);
    });
}

(Disclaimer: This is is all off the top of my head, may not work as exactly as written.)

The magic here is that whatever you're requesting from the server can itself be a PHP script or other dynamic thing that returns JSON data, formatted text, a fragment of HTML, or whatever that you can then manipulate and inject into the page. The "right" way to do this long term would be to look at JSON or XML data (which you can validate and parse for safety, handle error cases by using dummy data instead on the client side, etc) but for something like this a simple PHP script that returns an HTML partial should be fine.

You can pass input using basically anything a form would do, but for search bar style stuff query params like this are the simplest (PHP would just use $_GET for those, the same as a form post).

# ? Apr 12, 2020 02:03

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 10:44

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

quote:

which works in everything but IE

Fuckin .,, if you�d told me in 1999 we would still be saying this in 2020

# ? Apr 12, 2020 02:59

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

«‹›362 »