The Web Design & Development Megathread

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

«‹›361 »

marumaru: May 20, 2013

MrMoo posted:

I just found NW.js, wow people are masochists. NodeJS running in Chromium.

okay maybe i'm just really loving stupid, but what is the point

# ? May 15, 2020 15:58

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 02:14

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Inacio posted:

okay maybe i'm just really loving stupid, but what is the point

if i had a nickel for every time someone who doesn't know the difference between browser and node.js finds some node module and is like "why can't we use this to solve xxxx" front end problem i'd have a bunch of nickels. explaining what node.js was to people was the bane of my front end existence. granted this idea is stupid and shouldn't exist but i can see the rationale.

# ? May 15, 2020 16:50

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

go play outside Skyler posted:

I don't get the point with deno. NPM is so bad because you just install random packages from Git, so let's make it so that every package is just included by inserting some url directly in the source file? What makes the deno servers more secure than say some other random persons github repository?

Wait, are you saying you think NPM installs from or with git?

# ? May 15, 2020 17:49

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

I haven't really used NodeJS before so I might be wrong here, but I assumed the big deal with Deno was that it's easier to write & distribute server-side JS code. Like, you could build an app with Node, bundle it with webpack, and run it with "deno my_webpacked_bundle.js". So at runtime you don't have to worry about pre-installing a bunch of node_modules or downloading anything from the net, unless you want to. Is that correct?

# ? May 15, 2020 18:26

The Fool: Oct 16, 2003

minato posted:

I haven't really used NodeJS before so I might be wrong here, but I assumed the big deal with Deno was that it's easier to write & distribute server-side JS code. Like, you could build an app with Node, bundle it with webpack, and run it with "deno my_webpacked_bundle.js". So at runtime you don't have to worry about pre-installing a bunch of node_modules or downloading anything from the net, unless you want to. Is that correct?

Deno is supposed to be an alternative to node, it does the same things.

The problem that most people have isn't the Node V8 engine, it's npm

npm is what's responsible for node_modules being what it is

Deno doesn't have a package manager (yet) but has a standard library and allows for 3rd part modules included from repos or cdn

# ? May 15, 2020 18:40

go play outside Skyler: Nov 7, 2005

Thermopyle posted:

Wait, are you saying you think NPM installs from or with git?

I meant GitHub, but yeah, I'm pretty sure a majority of npm packages pull directly from github

E: to be precise, I believe npm publish just points npm to a specific commit on a public github repo when they are hosted there

# ? May 15, 2020 23:10

The Fool: Oct 16, 2003

go play outside Skyler posted:

I meant GitHub, but yeah, I'm pretty sure a majority of npm packages pull directly from github

E: to be precise, I believe npm publish just points npm to a specific commit on a public github repo when they are hosted there

How the author publishes to npm is almost irrelevant. The module itself after being published is hosted by npm and when you do an npm install it gets pulled from the npm servers.

Fe: Unless you explicitly state in your package.json that the module you want is hosted as a git repo, but that is not the normal process

# ? May 15, 2020 23:25

Volguus: Mar 3, 2009

The Fool posted:

Fe: Unless you explicitly state in your package.json that the module you want is hosted as a git repo, but that is not the normal process

The fact that is even a possibility boggles the mind. I get the convenience, but ughh.

# ? May 15, 2020 23:39

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

go play outside Skyler posted:

I meant GitHub, but yeah, I'm pretty sure a majority of npm packages pull directly from github

E: to be precise, I believe npm publish just points npm to a specific commit on a public github repo when they are hosted there

Well, I mean...all code comes from somewhere. Sometimes it comes from github sometimes it comes from your system, but when you npm install it's coming directly from npm's servers.

# ? May 15, 2020 23:40

mobby_6kl: Aug 9, 2009; by Fluffdaddy

The public Youtube api abbreviates the subscriber count in a way that's useless for looking at day to day trends by rounding it up thousands, tens of thousands, etc. Does anyone know if the's a way to get the exact number? I mean other than by scraping it off the youtube page (if they do in fact show the real number). The docs say this:

code:

 "statistics": {
    "viewCount": unsigned long,
    "commentCount": unsigned long,
    "subscriberCount": unsigned long, [b] // this value is rounded to three significant figures[/b]
    "hiddenSubscriberCount": boolean,
    "videoCount": unsigned long
  },

# ? May 16, 2020 19:21

Impotence: Nov 8, 2010; Lipstick Apathy

IIRC, you get the full number via youtube/v3/channels?part=statistics for channels with API key.

Even if you scrape, public interface shows "405K" or "1.9M" or etc.

# ? May 16, 2020 19:39

Tei: Feb 19, 2011

theres no bounds how stupid youtube can be

# ? May 16, 2020 21:42

mobby_6kl: Aug 9, 2009; by Fluffdaddy

code:

{
  "kind": "youtube#channelListResponse",
  "etag": "IIxM6plFqSV58yMrdja4JdlJ6cw",
  "pageInfo": {
    "totalResults": 1,
    "resultsPerPage": 1
  },
  "items": [
    {
      "kind": "youtube#channel",
      "etag": "l9taiSqH8VhDemQcHgLP7cyUvpg",
      "id": "UC5NWqHqR2MvVdOLXD911wZg",
      "statistics": {
        "viewCount": "58",
        "commentCount": "0",
        "subscriberCount": "0",
        "hiddenSubscriberCount": false,
        "videoCount": "1"
      }
    }
  ]
}

I get the abbreviated results even if I don't use my channel id. But looks like it might be possible to get more precise numbers from the analytics API but it requires OAuth

# ? May 17, 2020 11:36

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

mobby_6kl posted:

code:

{
  "kind": "youtube#channelListResponse",
  "etag": "IIxM6plFqSV58yMrdja4JdlJ6cw",
  "pageInfo": {
    "totalResults": 1,
    "resultsPerPage": 1
  },
  "items": [
    {
      "kind": "youtube#channel",
      "etag": "l9taiSqH8VhDemQcHgLP7cyUvpg",
      "id": "UC5NWqHqR2MvVdOLXD911wZg",
      "statistics": {
        "viewCount": "58",
        "commentCount": "0",
        "subscriberCount": "0",
        "hiddenSubscriberCount": false,
        "videoCount": "1"
      }
    }
  ]
}

I get the abbreviated results even if I don't use my channel id. But looks like it might be possible to get more precise numbers from the analytics API but it requires OAuth

If you don�t have a way to get the state and code You can run a little flask server to do that.

# ? May 17, 2020 13:52

Impotence: Nov 8, 2010; Lipstick Apathy

IIRC the intent is that exact sub counts should be private.

# ? May 17, 2020 14:55

mobby_6kl: Aug 9, 2009; by Fluffdaddy

CarForumPoster posted:

If you don�t have a way to get the state and code You can run a little flask server to do that.

I don't know yet if I don't have a way to do that, I'm just lazy. But thanks, I'll check out Flask..

quote:

Welcome to Flask�s documentation. Get started with Installation and then get an overview with the Quickstart. There is also a more detailed Tutorial that shows how to create a small but complete application with Flask. Common patterns are described in the Patterns for Flask section. The rest of the docs describe each component of Flask in detail, with a full reference in the API section.

Ok I still have no idea what it actually does :v:

but I'll have a look at some examples tomorrow. Hopefully I can avoid over-complicating anything, this isn't really a critical part of the project.

Biowarfare posted:

IIRC the intent is that exact sub counts should be private.

Probably (or even more likely, to prevent third parties from getting any useful data from the API) , but all the documentation claims it's to make the numbers "more consistent"

# ? May 18, 2020 00:59

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

Youtube bots that are boosting a particular channel also subscribe to a whole bunch of other channels to try and blend in with legitimate users.

Hence, the approximation is more consistent over time, rather than fluctuating as bots subscribe and are then banned.

# ? May 18, 2020 04:19

Impotence: Nov 8, 2010; Lipstick Apathy

mobby_6kl posted:

Probably (or even more likely, to prevent third parties from getting any useful data from the API) , but all the documentation claims it's to make the numbers "more consistent"

It does actually accomplish the goal of making it more consistent, just like the view counter

# ? May 18, 2020 08:11

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

mobby_6kl posted:

I don't know yet if I don't have a way to do that, I'm just lazy. But thanks, I'll check out Flask..

Ok I still have no idea what it actually does but I'll have a look at some examples tomorrow. Hopefully I can avoid over-complicating anything, this isn't really a critical part of the project.

Probably (or even more likely, to prevent third parties from getting any useful data from the API) , but all the documentation claims it's to make the numbers "more consistent"

I�ll give you some python code in a few hours. I run it from a Jupiter notebook because all I need is the URL that I get as a response with the token and state.

Note that I only need to run this code once per month so it�s done as lazily as possible.

# ? May 18, 2020 13:42

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

This oauth2 code uses a self signed 'adhoc' SSL certificate and runs on localhost to get the stuff you need to connect to an API that requires OAuth. This is not a very secure/production way to do this, but it works for code that I run one time per month to gather some data/stats. For the redirect URL I give it localhost. The tokens it gives you usually expire. This doesnt handle that because for me they expire well past when I finish getting what I want.

You run it, it majkes a webpage with a link you click that redirects you to that app's login page. I login and it redirects me back to this server with the code and state in the redirect URL.

I used this as an example: https://github.com/reddit-archive/reddit/wiki/oauth2-python-example

code:

#  example: [url]https://github.com/reddit-archive/reddit/wiki/oauth2-python-example[/url]

from flask import Flask
from uuid import uuid4
from flask import abort, request
import sys
app = Flask(__name__)
@app.route('/')
def homepage():
    text = '<a href="{}">Authenticate with OAuth</a>'
    return text.format(make_authorization_url())

def make_authorization_url():
    # Generate a random string for the state parameter
    # Save it for use later to prevent xsrf attacks
    REDIRECT_URI = "https://localhost:5010/ppcb/"
    creds = get_secret("[REDACTED]")
    CLIENT_ID = REDACTED
    CLIENT_SECRET = REDACTED
    
    state = str(uuid4())
    save_created_state(state)
    params = {"client_id": CLIENT_ID,
              "response_type": "code",
              "state": state,
              "redirect_uri": REDIRECT_URI,
              "duration": "temporary",
              "scope": "identity"}
    url = f"https://REDACTED.com/oauth/authorize?response_type=code&client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&state={state}"
    return url

@app.route('/ppcb/')
def reddit_callback():
    error = request.args.get('error', '')
    if error:
        return "Error: " + error
    state = request.args.get('state', '')
    if not is_valid_state(state):
        # Uh-oh, this request wasn't started by us!
        abort(403)
    code = request.args.get('code')
    print(f"code = {code}", file=sys.stdout)
    token = get_token(code)
    print(f"token = {token}", file=sys.stdout)
    return f"got a token {token}"

def save_created_state(state):
    pass
def is_valid_state(state):
    return True

def get_token(code):
#     client_auth = requests.auth.HTTPBasicAuth(CLIENT_ID, CLIENT_SECRET)
    post_data = {"grant_type": "authorization_code", 
                 "code": code,
                 "redirect_uri": REDIRECT_URI,
                 "client_id": CLIENT_ID,
                 "client_secret": CLIENT_SECRET
                }
    response = requests.post("https://example.com/oauth/token",
#                              auth=client_auth,
                             data=post_data)
    token_json = response.json()
    return token_json["access_token"]

if __name__ == '__main__':

    app.run(debug=True, port=5010, use_reloader=False, ssl_context='adhoc')

# ? May 18, 2020 15:41

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

Does anyone have an example of a super basic CSS grid that works in IE? I tried the following, but all the cells go on top of each other in IE:

code:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

Any research is like "here's how to do super fancy auto fit template areas and spans and..." and I don't care. I just want a basic grid!

EDIT: Oh wtf, I have to individually place every cell in IE?

code:

.grid > div:nth-of-type(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.grid > div:nth-of-type(2){
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

The Merkinman fucked around with this message at 14:38 on May 19, 2020

# ? May 19, 2020 14:30

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

The Merkinman posted:

Does anyone have an example of a super basic CSS grid that works in IE? I tried the following, but all the cells go on top of each other in IE:
code:
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}
Any research is like "here's how to do super fancy auto fit template areas and spans and..." and I don't care. I just want a basic grid!

EDIT: Oh wtf, I have to individually place every cell in IE?
code:
.grid > div:nth-of-type(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.grid > div:nth-of-type(2){
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

These were very helpful when I had to do grid with ie11 support

https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66

# ? May 19, 2020 17:11

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:

These were very helpful when I had to do grid with ie11 support

https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66

Right but that first link about explicit/implicit grid shows that I'd have to place every single item, and given this was for a product grid with up 120 items (and 3 different grids differing on screen size!). It feels like a non-starter.

# ? May 19, 2020 20:28

kedo: Nov 27, 2007

e: nm!

# ? May 19, 2020 20:34

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

The Merkinman posted:

Right but that first link about explicit/implicit grid shows that I'd have to place every single item, and given this was for a product grid with up 120 items (and 3 different grids differing on screen size!). It feels like a non-starter.

Well if it tells you it would be too much of a pain in the rear end to do, it was helpful, right? :v:

# ? May 19, 2020 21:19

Dominoes: Sep 20, 2007

I'm making a website and don't want to use Javascript/WASM etc. It's for displaying info, not an app. To make it render diff on mobile, do I need to detect it on the server, or is there a way to quickly inject javascript? Pseudocode:

HTML code:

<script>
    let onMobile = window.innerWidth < 800

    let flexDir = onMobile ? "row" : "column"
</script>

<div style="text-align: <script>flexDir</script>">
    ...
 </div>

I could render it as desktop, then muck with it using DOM manipulation JS after, but something like the pseudocode above would be the cleanest. Maybe this approach wouldn't be too bad though.

I'm using 0 frameworks etc.

# ? May 21, 2020 03:46

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

You do that with CSS media queries.

# ? May 21, 2020 03:53

Dominoes: Sep 20, 2007

Oh poo poo that looks like the soln.

edit - works. You da man.

Dominoes fucked around with this message at 03:59 on May 21, 2020

# ? May 21, 2020 03:56

Dominoes: Sep 20, 2007

Got another - what's the best way to keep track of a shopping cart that's not associated with a database user? Cookies? localStorage? I think this page might be what I want.

# ? Jun 5, 2020 02:47

Volguus: Mar 3, 2009

Dominoes posted:

Got another - what's the best way to keep track of a shopping cart that's not associated with a database user? Cookies? localStorage? I think this page might be what I want.

With HTML5 on a competent browser local storage seems the best way to go. There's no reason to go back to the old cookie method, unless you wanna track the users serverside (for your own nefarious purposes unrelated to the shopping cart itself).

# ? Jun 5, 2020 02:51

marumaru: May 20, 2013

Dominoes posted:

Got another - what's the best way to keep track of a shopping cart that's not associated with a database user? Cookies? localStorage? I think this page might be what I want.

localStorage is trivial, should be good. just a simple json and you're done.

e: could also do sessionStorage if you want it to go away

# ? Jun 5, 2020 13:32

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

Be aware that localStorage sessionStorage may not work on browsers running in private/incognito etc modes.

# ? Jun 5, 2020 14:07

go play outside Skyler: Nov 7, 2005

The Merkinman posted:

Be aware that localStorage sessionStorage may not work on browsers running in private/incognito etc modes.

Yep, been down that road. Had to implement a small polyfill for browsers that threw an exception. Safari was one of them.

Hell, I remember even one time having users report issues with a web app running on IE on Windows Phone because it threw an exception on console.log. Like, the console object was literally not there.

Welcome to the world of mobile browser compatibility I guess. I could write an entire thread on that topic. Thank god for webpack.

# ? Jun 5, 2020 16:25

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

go play outside Skyler posted:

Hell, I remember even one time having users report issues with a web app running on IE on Windows Phone because it threw an exception on console.log. Like, the console object was literally not there.

In IE 9 and before, console.log would always throw an exception if the browser F12 debugger console window was not open, because opening the debugger would make that object exist.

# ? Jun 5, 2020 16:41

marumaru: May 20, 2013

in theory (very relevant when talking about crossbrowser compatibility), private and incognito should only clear on close:

MDN posted:

Data in a localStorage object created in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed

# ? Jun 5, 2020 16:55

fsif: Jul 18, 2003

Quick CSS grid question: I feel like there should be an easy way to do this without using JavaScript, but I haven't been able to crack it. My guess is that it's a limitation in the grid spec, but I want to confirm before I start giving spiels about this taking more dev hours.

I have two columns that need to house a variable number of items. It's pretty easy to just have things go from left to right. However, if I want items to first populate the left column and then once they reach the halfway point to begin populating the right column, is there an easy CSS way to do it?

Right now, I set `grid-auto-flow:` to `column` and I have to know the number of items ahead of time and manually set the grid-template-rows (e.g., if I have 7 items, I need to set `grid-template-rows:` to `repeat(4, 100px)`). Is there a better way, or am I just going to run some extra JS every time the number of items in my grid changes?

# ? Jun 5, 2020 19:38

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

fsif posted:

Quick CSS grid question: I feel like there should be an easy way to do this without using JavaScript, but I haven't been able to crack it. My guess is that it's a limitation in the grid spec, but I want to confirm before I start giving spiels about this taking more dev hours.

I have two columns that need to house a variable number of items. It's pretty easy to just have things go from left to right. However, if I want items to first populate the left column and then once they reach the halfway point to begin populating the right column, is there an easy CSS way to do it?

Right now, I set `grid-auto-flow:` to `column` and I have to know the number of items ahead of time and manually set the grid-template-rows (e.g., if I have 7 items, I need to set `grid-template-rows:` to `repeat(4, 100px)`). Is there a better way, or am I just going to run some extra JS every time the number of items in my grid changes?

Use flexbox instead of grid in there?

# ? Jun 5, 2020 20:01

fsif: Jul 18, 2003

Lumpy posted:

Use flexbox instead of grid in there?

I'll run into the same problem there, though, no? I'll either need to set a fixed height (which is effectively the same issue I'm having with grid-template-rows) or I'll risk the content spilling over to more columns than just the two I want.

# ? Jun 5, 2020 20:14

Mr. Angry: Jan 20, 2012

CSS multi column layout would work if you don't mind different sized items not lining up. You might have to set a few more properties for blocks to play nice with the columns as they're intended for inline content.

# ? Jun 5, 2020 20:25

Adbot: ADBOT LOVES YOU

# ? May 18, 2024 02:14

Dominoes: Sep 20, 2007

Thanks dudes - localStorage works good, and has good API.

# ? Jun 6, 2020 01:23

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

«‹›361 »