Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

HaB: Jan 5, 2001; What are the odds?

camoseven posted:

Please, please do not use jquery. Basically everything jquery does is now built in to JS.

If you're going to scrape with Node try something like JSDOM

My bad. I said jquery, but what I used was cheerio - as mentioned below. Same syntax, basically the same functionality. I consider cheerio to just be a server-side implementation of jq. But it's not ACTUAL jq.

kedo posted:

I used cheerio to handle some server-side DOM parsing for a node project recently and it did a great job. I realize you can do 99% of this stuff with vanilla JS these days, but the jQuery syntax and helpers make things a bit quicker.

e: I finished reading the full first question and saw that OP is trying to avoid npm/JS, so

# ? Aug 29, 2022 15:46

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 20:04

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

I would not use JS at all and instead use Python and the https://www.crummy.com/software/BeautifulSoup/bs4/doc/ library.

Get a single endpoint running that returns the scraped data maybe and call it from your JS code.

# ? Aug 29, 2022 16:00

frogbs: May 5, 2004; Well well well

blunt posted:

The once-hourly gathering/processing/saving data sounds like a perfect use case for a lambda/serverless function. Then you can display the data with basic html and as much or little javascript as you fancy. Host the whole thing for free on something like Netlify.

HaB posted:

My bad. I said jquery, but what I used was cheerio - as mentioned below. Same syntax, basically the same functionality. I consider cheerio to just be a server-side implementation of jq. But it's not ACTUAL jq.

Thanks everyone for the info! I've got a Netlify/AWS Lambda function setup using Cheerio. Seems like it'll work great!

# ? Aug 30, 2022 07:33

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

has anyone ever written something like this

HTML code:

<input 
  onChange={updateValueInState} // maybe storing the value in Redux for example??
  value={valueInState}
/>

and then suddenly the QA team tells you the test runner is only able to type 1 character in the field and it turns out it's because the test runner is typing too fast for React to re-render and process the new value? So every time updateValueInState runs, the e.target.value is the character they just typed? Because that's what's happening with our test runner and I don't have a better answer other than "idk the test is flaky you're gonna have to slow down the key presses �\_(ツ)_/�"

e: i'm also 100% positive this is the problem because I console logged the e.target.value in the onChange handler and also logged the place where state is updated in Redux and all the redux updating code gets delayed to after all the keypresses

# ? Aug 30, 2022 23:27

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

teen phone cutie posted:

has anyone ever written something like this
HTML code:
<input 
  onChange={updateValueInState} // maybe storing the value in Redux for example??
  value={valueInState}
/>
and then suddenly the QA team tells you the test runner is only able to type 1 character in the field and it turns out it's because the test runner is typing too fast for React to re-render and process the new value? So every time updateValueInState runs, the e.target.value is the character they just typed? Because that's what's happening with our test runner and I don't have a better answer other than "idk the test is flaky you're gonna have to slow down the key presses �\_(ツ)_/�"

e: i'm also 100% positive this is the problem because I console logged the e.target.value in the onChange handler and also logged the place where state is updated in Redux and all the redux updating code gets delayed to after all the keypresses

Yeah the local copy of the state isn�t going to update until the component re-renders, which isn�t going to be immediately. So if you�re typing faster than react updates, the value in the input isn�t going to change

tldr why the hell are you saving raw input into redux?????

# ? Aug 31, 2022 02:17

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

dupersaurus posted:

tldr why the hell are you saving raw input into redux?????

i just started at this company i'm wondering the same thing actually

# ? Aug 31, 2022 02:47

zokie: Feb 13, 2006; Out of many, Sweden

I don�t remember the exact problem on the top of my head, but I do remember that React does something different with those events and that if using something like playwright you have to apply a small hack to have it behave the way you want.

edit: or maybe it was when we used webdriver.io

zokie fucked around with this message at 09:05 on Aug 31, 2022

# ? Aug 31, 2022 08:56

blunt: Jul 7, 2005

Can't you just debounce the input instead of saving directly?

# ? Aug 31, 2022 10:06

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

blunt posted:

Can't you just debounce the input instead of saving directly?

no it's just a normal text field that takes user input and is sent to the server on submit. i don't think it makes sense to adjust code to fix the test runner when the code actually works 100% correctly when an actual human is typing

# ? Aug 31, 2022 16:12

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

Does it actually work correctly every time when a human is typing, or only when it's a slow one-fingered typist doing the typing?

# ? Aug 31, 2022 17:17

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

Jabor posted:

Does it actually work correctly every time when a human is typing, or only when it's a slow one-fingered typist doing the typing?

as far as i can tell. I mean i get it, storing form state in a state management lib is stupid, but the pattern of passing a value and an onChange handler isn't such an outlandish pattern that it should start causing issues :shrug:

.

We actually have 2 different test frameworks and one runner fills the form out fine, while the other one struggles.

# ? Aug 31, 2022 18:27

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

zokie posted:

I don�t remember the exact problem on the top of my head, but I do remember that React does something different with those events and that if using something like playwright you have to apply a small hack to have it behave the way you want.

edit: or maybe it was when we used webdriver.io

playwright is actually the framework that handles the input fine, but we're also using another one that's built ontop of selenium that can't fill out the field

# ? Aug 31, 2022 18:30

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

So something I worked on a while ago isn't good enough because it's not instantaneous...
I have an SPA built in Angular. It has a page with a list of products pulled from a 3rd party API.
The ask is when a user scrolls down the page, and clicks on a product, then clicks back, that the page immediately scrolls down to exactly where they were before.

What I currently do:
On Product Click:
Save the Scroll Position, and the whole JSON list of products, both via Observables.
On Subsequent Back Click
Load all the products from Observable rather than the API call, scroll down via saved value

This still takes some non-zero amount of time, and I should "look at Walmart" to see what they do, as if that means anything.

# ? Aug 31, 2022 19:47

novamute: Jul 5, 2006; o o o

Can you SSR the page with the API items in it?

# ? Aug 31, 2022 20:12

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

novamute posted:

Can you SSR the page with the API items in it?

Just so I'm understanding... When back is pressed to instead call a server side rendered version of the page?

# ? Aug 31, 2022 20:25

frogbs: May 5, 2004; Well well well

frogbs posted:

Thanks everyone for the info! I've got a Netlify/AWS Lambda function setup using Cheerio. Seems like it'll work great!

So this is actually working pretty well, but it seems like Lambda/Netlify functions are really meant to be triggered on demand/at runtime. Even if I can trigger the function on a schedule/cron I still can't persist that response anywhere, right?

Right now all I have is the function (just cheerio that grabs some json from a url) and an index page that parses the json and displays some stuff. Is there an easy way I could trigger the whole site to be built on a schedule? Run the function, grab the json, build the index page and then push the static files to Netlify?

# ? Sep 1, 2022 04:52

novamute: Jul 5, 2006; o o o

The Merkinman posted:

Just so I'm understanding... When back is pressed to instead call a server side rendered version of the page?

Yeah, and if you need direct links to particular items or places in the page you can render them with anchors or just use your scroll position now that the page is static. Whether that's reasonable kind of depends on the size of the response from the API and whether you can work an SSR page into your existing SPA architecture.

# ? Sep 1, 2022 05:12

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

Is it common practice for a "library" to only contain one component??
I've been building Component Libraries (with multiple components?!), one in Vue and one in Angular.
Trouble is, in Angular I can't figure out how to have a component in the library that is both something than can be used on its own, and also is part of a different component in the library.
Something like a <special-button> component, that can be used on its own, but is also part of <larger-widget> componet in the same library.

Vue handles it fine, but Angular says (line breaks for clarity):

code:

Unable to write a reference to SpecialButtonComponent 
in /some-file-path/projects/my-lib/src/lib/special-button/special-button.component.ts 
from /some-file-path/projects/my-lib/src/lib/special-button/special-button.module.ts

The very frustrating part is if I copy/paste the special-button and larger-widget folders out of the library and into a 'normal' Angular app, everything works fine.

I wanted to just find the source of a library that actually has a shared component like that, so I could reverse engineer it, but I can't find any so maybe this whole idea is bad practice because such a thing doesn't exist???

# ? Sep 2, 2022 21:17

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

The Merkinman posted:

in Angular I can't figure out how to have a component in the library that is both something than can be used on its own, and also is part of a different component in the library.
Something like a <special-button> component, that can be used on its own, but is also part of <larger-widget> componet in the same library.

I must be misunderstanding the context because it sounds like you're essentially asking if you have have a library that exports module A and also a module B that composes module A, which is very possible in javascript. Are Angular modules funky or something?

code:

// 'foo.mjs'
export function a() {
  return 'foo';
}

code:

// 'bar.mjs'
import {a} from './foo';

export function b() {
  return a() + 'bar';
}

# ? Sep 3, 2022 00:07

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

Chenghiz posted:

I must be misunderstanding the context because it sounds like you're essentially asking if you have have a library that exports module A and also a module B that composes module A, which is very possible in javascript. Are Angular modules funky or something?
code:
// 'foo.mjs'
export function a() {
  return 'foo';
}
code:
// 'bar.mjs'
import {a} from './foo';

export function b() {
  return a() + 'bar';
}

That's exactly what I'm asking and why I'm so confused/frustrated that Angular, but only in a library, is being so difficult about it.

# ? Sep 3, 2022 00:50

Oysters Autobio: Mar 13, 2017

I figured this would be the closest thread for this type of question.

Is there any other similar apps or frameworks to Kibana Canvas? Basically an infographic WYSIWYG that also lets you put in variables (Canvas uses handlebars for example)?

Also seperate question: as a data analyst most of my day to day is building out Tableau dashboards. I use python data science libraries for any sort of data wrangling and such.

I really hate Tableau's UX/UI for some inexplicable reason and find it to be really annoying. No idea how to describe it but it automatically selects the viz you want based off combos of variables, so instead of being able to select a bar graph you need to memorize the right combo to drag and drop your variables. Terrible in my opinion, totally find it unintuitive and much prefer the Power BI among others style where you select the viz, then drag and drop into rows and columns and can modify how it looks from a menu.

I've been really enjoying learning Python pandas to do data prep compared to using GUIs like PowerQuery or Tableau Prep. But, other than learning d3.js and React, is there any dashboarding frameworks that would let me build out visualizations declaratively but isn't like a full on custom JavaScript app? I've only just scratched the surface of Python libraries like Plotly Dash, Streamline, Voilà and Panel so I know that would be one avenue to go for, but I'm curious if there's other options from the front end world. Use case here is pushing out interactive dashboards for business users that connects to datamarts or other data warehouse objects.

Don't know if I'm describing this well but like I guess a BI like framework that is based on command line interfaces or a high level language so you get the efficiency of CLIs but you're also not spending days for a dashboard because you end up building a React app (though correct me if my understanding of React or other JS frameworks here is wrong and there is a good combo of libraries for that sort of thing).

Oysters Autobio fucked around with this message at 12:45 on Sep 3, 2022

# ? Sep 3, 2022 12:40

frogbs: May 5, 2004; Well well well

frogbs posted:

So this is actually working pretty well, but it seems like Lambda/Netlify functions are really meant to be triggered on demand/at runtime. Even if I can trigger the function on a schedule/cron I still can't persist that response anywhere, right?

Right now all I have is the function (just cheerio that grabs some json from a url) and an index page that parses the json and displays some stuff. Is there an easy way I could trigger the whole site to be built on a schedule? Run the function, grab the json, build the index page and then push the static files to Netlify?

The more I've looked into this, the more I think it's crazy that places like Netlify don't have a super cheap/simple way to store some text or an API response, even for a short amount of time. Something almost like an S3 bucket but for key pairs or little bits of data. All the external NoSQL or DB service providers i've looked at are relatively expensive, making the whole 'jamstack' thing a non-starter if you need to persist some data for a little bit without rebuilding the entire site or spending more per month than it would cost to spin up a Digital Ocean droplet..

Am I missing an obvious option for something like this, or is there some other way to store/cache a response for us in a static site?

Edit: Ok, this is almost exactly what I was looking for, but who would pay $20/month for it? https://kvdb.io

frogbs fucked around with this message at 02:05 on Sep 7, 2022

# ? Sep 7, 2022 01:59

The Fool: Oct 16, 2003

azure table storage seems reasonably priced for small scale projects

# ? Sep 7, 2022 02:46

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

TIL aria-modal=true treats every parent and sibling node on the page as hidden to screen readers so if you're trying to add an arbitrary element to read aloud some text with aria-live, you need to mount it inside the modal

please learn from my 2 day suffering over figuring this out

teen phone cutie fucked around with this message at 07:15 on Sep 15, 2022

# ? Sep 15, 2022 07:12

bvj191jgl7bBsqF5m: Apr 16, 2017; IÍÌÌ° ÍÌ¯ÌÌ«Ì¹Ì¯Ì¤AÒmÍÌºÌ© ÍÌ¬AÌ¡Ì®ÌÌ ÍÍÌ±Ì« KÌ¶eÍgÍ.ÌÌ»Ì±ÌªÍÌ¹Ì

We all agree that Angular sucks, but not enough people are talking about how Vue also sucks

# ? Sep 15, 2022 16:49

fsif: Jul 18, 2003

teen phone cutie posted:

TIL aria-modal=true treats every parent and sibling node on the page as hidden to screen readers so if you're trying to add an arbitrary element to read aloud some text with aria-live, you need to mount it inside the modal

please learn from my 2 day suffering over figuring this out

I didn't know about aria-modal and that actually sounds outrageously useful. No more focus traps?

# ? Sep 15, 2022 17:10

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

fsif posted:

I didn't know about aria-modal and that actually sounds outrageously useful. No more focus traps?

support looks good on everything but firefox. the @reach package modal sets aria-modal but also manually sets aria-hidden on all other elements as a failsafe, but yeah more-or-less that's what aria-modal is supposed to do

# ? Sep 15, 2022 17:52

Lonely Wolf: Jan 20, 2003; Will hawk false idols for heaps and heaps of dough.

I thought aria stuff didn't do anything other than add hints to the AT and it was up to you to actually do everything to make it work like you've promised by using them? Is this a bug from browsers supporting native dialog elements?

Also, you probably want the inert attribute.

# ? Sep 15, 2022 18:07

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

bvj191jgl7bBsqF5m posted:

We all agree that Angular sucks, but not enough people are talking about how Vue also sucks

Aren't they the same library?

# ? Sep 15, 2022 18:12

Macichne Leainig: Jul 26, 2012; by VG

bvj191jgl7bBsqF5m posted:

We all agree that Angular sucks, but not enough people are talking about how Vue also sucks

Everything sucks, it's just a matter of what sucks the least right now

# ? Sep 15, 2022 18:17

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

Macichne Leainig posted:

Everything sucks, it's just a matter of what sucks the least right now

Until everything sucks so much you make your own.
Then it gets popular.
Then it gets more features and complicated.
Then it sucks.

# ? Sep 15, 2022 18:24

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

Lonely Wolf posted:

I thought aria stuff didn't do anything other than add hints to the AT and it was up to you to actually do everything to make it work like you've promised by using them? Is this a bug from browsers supporting native dialog elements?

Also, you probably want the inert attribute.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal

MDN does talk about making all other elements inert along with using aria-modal. We're using the reach modal, so it's all library code :shrug:

but my problem specifically was I was trying to get the AT to read out text that I was mounting outside of the modal and pulling my hair out all day yesterday trying to figure out why it wouldn't read.

# ? Sep 15, 2022 18:36

lunar detritus: May 6, 2009

bvj191jgl7bBsqF5m posted:

We all agree that Angular sucks, but not enough people are talking about how Vue also sucks

vue has the best of both worlds.

Vue 3 is so good (and that typescript support :kiss:

), I'm glad that the ecosystem is finally catching up to it

# ? Sep 15, 2022 19:06

HaB: Jan 5, 2001; What are the odds?

lunar detritus posted:

vue has the best of both worlds.

Vue 3 is so good (and that typescript support ), I'm glad that the ecosystem is finally catching up to it

God Vue 3 is so good.

# ? Sep 15, 2022 19:28

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

bvj191jgl7bBsqF5m posted:

We all agree that Angular sucks

God I hate Angular, I spent the entire day today figuring out this poo poo which obviously isn't documented anywhere and produces totally incomprehensible error messages. How can it be so loving hard to make a dynamic form that is configurable at runtime? Isn't that why we have all this frontend poo poo in the first place? And let's not even talk about splitting a form in two or more components, I don't even know if that is theoretically possible. Angular is just a horrid pile of complexity piled on top of complexity, and there's no reward to any of it.

# ? Sep 15, 2022 19:44

Macichne Leainig: Jul 26, 2012; by VG

HaB posted:

God Vue 3 is so good.

Honestly Vue 1/2 got me really started on the web dev journey so I should really give 3 a shot one of these days.

# ? Sep 15, 2022 19:46

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

I will never use a library with HTML directives. This is my solemn promise.

# ? Sep 15, 2022 20:02

HaB: Jan 5, 2001; What are the odds?

Macichne Leainig posted:

Honestly Vue 1/2 got me really started on the web dev journey so I should really give 3 a shot one of these days.

Every time you don't have to type

code:

this.

your soul will SING.

# ? Sep 15, 2022 20:10

Splinter: Jul 4, 2003; Cowabunga!

prom candy posted:

I will never use a library with HTML directives. This is my solemn promise.

^ This. Even with templating languages from the MVC web-dev days, I vastly preferred non-directive languages like Twig/Pebble over directive approaches like Thymeleaf.

# ? Sep 15, 2022 20:15

Adbot: ADBOT LOVES YOU

# ? Jun 4, 2024 20:04

Jimlit: Jun 30, 2005

Obfuscation posted:

God I hate Angular, I spent the entire day today figuring out this poo poo which obviously isn't documented anywhere and produces totally incomprehensible error messages. How can it be so loving hard to make a dynamic form that is configurable at runtime? Isn't that why we have all this frontend poo poo in the first place? And let's not even talk about splitting a form in two or more components, I don't even know if that is theoretically possible. Angular is just a horrid pile of complexity piled on top of complexity, and there's no reward to any of it.

Big razor html helper energy.

# ? Sep 15, 2022 20:19

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »