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 »

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

Look into some of the other headless CMS options like contentful or netlifyCMS or something someone else recommends, they might have pricing tiers that easier to swallow

# ? Jan 24, 2022 04:27

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 01:40

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Storyblok is a relatively easy headless CMS with a React SDK.

# ? Jan 24, 2022 14:44

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

I have an issue that's been in a pain in my side for a while and I'm hoping this thread might be able to help out.

What I have is a feature where I need to create some JavaScript that takes dynamic HTML from a backend API and paints it to the browser DOM in an iframe. The catch is that I need to set the iframe height to whatever the content takes up inside.

So I have this to start:

HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <scrip>
    (() => {
      const iframe = document.createElement('iframe');

      const html = `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
          </head>
          <body style="margin: 0; background-color: green; box-sizing: border-box; padding: 30px;">
            <div class="wrapper" style="margin: 0 auto;">
              <div>
                <h1 tabindex="-1" style="margin: 0;">hello everybody!!
                </h1>
                <p style="margin: 0;">This modal has widths This modal has widths This modal has widths
                </p>
              </div>
              <a href="#">link 1</a>
              <div style="margin-top:20px;">
                <a target="_blank" href="#">link 2</a>
              </div>
              <div style="margin-top:20px;">
                <a href="#">link 3</a>
              </div>
              <div style="margin-top:20px;">
                <a href="#">link 4</a>
              </div>
            </div>
          </body>
        </html>
      `;

      /* paint the ifrmae and HTML */
      document.body.appendChild(iframe);
      iframe.contentWindow?.document?.open();
      iframe.contentWindow?.document?.write(html);
      iframe.contentWindow?.document?.close();

      iframe.style.cssText = `
        position: fixed;
        border: none;
        max-width: 100%;
        z-index: 9999;
        width: 50%;
        height: ${iframe.style.height};
        margin: auto;
        top: 0%;
        left: 0%;
        bottom: 0%;
        right: 0%;
      `

      /* set the height to the content inside */
      iframe.style.height =
        (iframe.contentWindow?.document?.body?.scrollHeight || 0) + 'px';
    })();
  </scrip>
</body>

</html>

which ends up having a scrollbar on my screen where the iframe height is .5px smaller than the document inside. (screen is 1194px wide here):

edit: also it seems like it's only happening on my mac screen and not my actual monitor at the same screen size. I suspect it's something do with the fixed positioning

teen phone cutie fucked around with this message at 04:17 on Feb 16, 2022

# ? Feb 16, 2022 04:00

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

teen phone cutie posted:

edit: also it seems like it's only happening on my mac screen and not my actual monitor at the same screen size. I suspect it's something do with the fixed positioning

I've tried this in firefox and safari, and it renders without the scroll. Both external and builtin screen.

Probably unrelated, but our designers once complained about "empty scrollbars" on website on their macs. It took as a while to realize it was their Logitech mice causing this, because for some reason when they are plugged in the newfangled hideable scroll gets disabled, and the scroll bars revert to the old-timey "always visible" version. They would lack the scrollable/grabable part that yours does have, thus as I said probably unrelated.

btw, you're missing a t in <scrip>. I know. found out the hard way, lol

# ? Feb 16, 2022 05:39

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

gbut posted:

I've tried this in firefox and safari, and it renders without the scroll. Both external and builtin screen.

Probably unrelated, but our designers once complained about "empty scrollbars" on website on their macs. It took as a while to realize it was their Logitech mice causing this, because for some reason when they are plugged in the newfangled hideable scroll gets disabled, and the scroll bars revert to the old-timey "always visible" version. They would lack the scrollable/grabable part that yours does have, thus as I said probably unrelated.

btw, you're missing a t in <scrip>. I know. found out the hard way, lol

huh that's interesting - it _is_ only happening on Chrome. I just tried on another Mac and it seems like I can't replicate so maybe it does have to do with my settings.

Also couldn't do "script" because of Cloudflare blocking me :qq:

# ? Feb 16, 2022 06:22

M31: Jun 12, 2012

If it's just .5px it's probably because scrollHeight is an integer, you can try using getBoundingClientRect to get a more precise value, or just adding .5/1px to the height.

# ? Feb 16, 2022 12:44

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

That would make sense, especially if the external monitor is not HiDPI.

# ? Feb 16, 2022 13:24

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

My iframe resizing method might not be best but I had to do it. Extracted from a vue app but it's essentially:

code:

        <iframe v-if="html" ref="iframe" frameborder="0" @load="resizeIframe" />

// ...

    methods: {
        populateIframe () {
            if (this.html) {
                const output = htmlCleanup(this.html, {
                    attachments: this.attachments
                });
                const doc = this.$refs.iframe.contentWindow.document;
                doc.open();
                doc.write(output.html);
                doc.close();
            }
        },
        resizeIframe () {
            setTimeout(() => { setIframeHeight(this.$refs.iframe); }, 0);
        }
    }

// ...

function setIframeHeight (iframe) {
    iframe.style.visibility = 'hidden';
    iframe.style.height = 0;
    const documentElement = iframe.contentWindow.document.documentElement;
    iframe.style.height = documentElement.getBoundingClientRect().height + 'px';
    iframe.style.visibility = 'visible';
}

/// ...

.message .content {
    overflow-x: auto;
    overflow-y: hidden;

    background-color: #fff;
    > * {
        background-color: #fff;
    }

    > div {
        padding: @n-message-padding;
    }

    iframe {
        width: 100%;
        margin: 0;
        border: 0;
        padding: 0;
        overflow: hidden;
    }
}

# ? Feb 17, 2022 16:17

barkbell: Apr 14, 2006; woof

Anyone use solid.js yet? Opinions?

# ? Mar 1, 2022 16:30

Sagacity: May 2, 2003; Hopefully my epitaph will be funnier than my custom title.

barkbell posted:

Anyone use solid.js yet? Opinions?

Has it been six months already? I didn't realize we were due for another new frontend framework!

Seriously though, it feels like it's just moving the neverending cycle of frameworks back closer to something like KnockoutJS. So, components don't re-render, but in order to achieve that templates need to be written in a special templating syntax which ofcourse has its own set of quirks. React Hooks are back, but subtly different and with other gotchas. It's fine, I guess, but why not just keep using something like React so you can actually leverage that ecosystem instead?

But this is just a mostly uninformed hot take, so feel free to counter this with solid (ha!) arguments.

Sagacity fucked around with this message at 17:12 on Mar 1, 2022

# ? Mar 1, 2022 16:53

Chas McGill: Oct 29, 2010; loves Fat Philippe

I'll pay attention to solid when recruiters start mentioning it in stacks. Same attitude I have toward svelte, really.

# ? Mar 1, 2022 17:00

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

Chas McGill posted:

I'll pay attention to solid when recruiters start mentioning it in stacks. Same attitude I have toward svelte, really.

See also: pretty much anything that isn't React, Angular or Vue at this point. New frameworks are nifty and I take a look at every one of them, but until I can get paid writing it, I don't generally take a deep dive.

Took at look at Solid. It's JSX friendly, which means it is me-UN-friendly.

# ? Mar 1, 2022 20:13

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

barkbell posted:

Anyone use solid.js yet? Opinions?

So is this like Svelte but with JSX?

# ? Mar 1, 2022 20:27

Roadie: Jun 30, 2013

SolidJS seems to mostly exist to squeak out performance gains you don't actually need as long as you're writing a React or Vue app correctly in the first place, and the trade-off is that you need special component wrappers and handling for simple JSX use cases like if/else and maps (and even that depending on if something is referencing state or not, which seems like it's begging for more errors than hooks have ever caused).

I feel like if you're going that far you might as well look at something like LiveView instead, which gives you a new paradigm to work with that could enable new and interesting functionality.

# ? Mar 1, 2022 20:57

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

Don't suppose anyone has any experience testing Vue 3 components with jest/vue-test-utils do they?

I am mocking a service for an API call, then trying to ensure the component is displaying the data it got from the service call.

My component seems to be getting the data just fine (can console.log it in the function which gets the data), but when I check the dom the same way I see examples doing, my values are not there.

Have tried both

code:

import { nextTick } from 'vue';
await nextTick();

// and

import { flushPromises } from '@vue/test-utils';
await flushPromises();

which are the solutions I see recommended for this issue, but so far - poo poo aint be workin.

# ? Mar 2, 2022 14:38

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

I've been using Remix and it's pretty slick. I can see this taking off.

# ? Mar 6, 2022 06:12

Summit: Mar 6, 2004; David wanted you to have this.

I was recently shown https://github.com/pmndrs/jotai

I haven�t used it enough to form an opinion beyond the docs make it look like the perfect solution to shared states for simpler apps where full blown redux feels like overkill.

# ? Mar 6, 2022 15:21

Macichne Leainig: Jul 26, 2012; by VG

Ever since context was released that has been my perfect non-Redux shared state management solution.

Stick the shared state calls in the shared context, consume the context as needed. Easy peasy.

# ? Mar 6, 2022 16:33

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

Just learned about partytown. Interested concept. Has anyone tried it yet?

quote:

Partytown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.

# ? Mar 13, 2022 04:49

M31: Jun 12, 2012

I love the idea and tried it but it broke some our trackers. Didn't see any noticeable performance changes in the synthetic tests either (YMMV)

The broken scripts could probably be fixed, but since the tracking is managed by another team I didn't want to bother with it.

# ? Mar 13, 2022 07:58

Cheston: Jul 17, 2012; (he's got a good thing going)

Can OAuth come with content restrictions? I'm making a site that will have adult content (though not an outright porn site), and I don't want to let users log in through Apple or Twitch and then have that rescinded. At a glance it looks like porn sites only use email auth, but I can't find a concrete reason for that.
** the answer is absolutely and that you are entirely at each oauth provider's mercy

neurotech posted:

I'm looking for suggestions on ways to keep on top of what's happening in the front end space in terms of new tools, industry news, interesting articles, that sort of thing.

How do you all keep your finger on the pulse of this stuff?

JavaScript Weekly. There's also a companion newsletter, Node Weekly, for backend JS.

Cheston fucked around with this message at 23:26 on Mar 18, 2022

# ? Mar 18, 2022 20:45

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

Anyone familiar with VeeValidate? Specifically version 4 and using the Composition API?
I have custom input working using this as a base. What I'd like is if that custom input/label would display differently based on the form-level validation. For instance, putting * after the label for a required field. I see a bunch of options for useField but nothing that seems to address my case.

# ? May 3, 2022 18:52

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

So I'm interviewing with a prominent tech company (not faang) and part of the process is a pull request code review of some React code and I've been loving with Angular for the last 2 years so I wanna know of there is a big list of react conventions and antipatterns I should know about before I do this exercise?

Last time I worked seriously with React was before hooks, and I would like to work with React again, preferably for a company that will pay me a lot of money

# ? May 4, 2022 14:48

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

Oh sjitthis whole thread is just people asking others for resources and opinions we are too lazy to google, isnt it?

# ? May 4, 2022 14:50

Chas McGill: Oct 29, 2010; loves Fat Philippe

React conventions and antipatterns are always changing so it's tricky to point to a canonical resource. I'd approach it from the usual PR review standpoint - look for consistency, possible bugs, possible refactors, does it do what it's meant to etc? If you can pull it and look at it in vscode you might be able to see any obvious errors/mistypings etc.

The useEffect hook is a common source of bugs and unnecessary rerenders, so pay close attention to those to ensure the dependencies are correct etc.

Here's my own google-able question - Heroku has shat the bed and netlify is becoming more expensive. What's the current best solution for serving a js frontend and backend (with postgres) with minimal faff? We've been looking at Render

# ? May 4, 2022 15:00

mitztronic: Jun 17, 2005; mixcloud.com/mitztronic

bvj191jgl7bBsqF5m posted:

So I'm interviewing with a prominent tech company (not faang) and part of the process is a pull request code review of some React code and I've been loving with Angular for the last 2 years so I wanna know of there is a big list of react conventions and antipatterns I should know about before I do this exercise?

Last time I worked seriously with React was before hooks, and I would like to work with React again, preferably for a company that will pay me a lot of money

All the frontend frameworks are similar. I just went from Marko (lol) to react no problem. If you�re an ace at angular you are going to find you�ll be alright. also I�m not sure how to answer your question . React has the best user base so you can get answers on google for just about anything you run into.

bvj191jgl7bBsqF5m posted:

Oh sjitthis whole thread is just people asking others for resources and opinions we are too lazy to google, isnt it?

This thread is just a giant rubber duck

# ? May 4, 2022 15:42

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

Chas McGill posted:

React conventions and antipatterns are always changing so it's tricky to point to a canonical resource. I'd approach it from the usual PR review standpoint - look for consistency, possible bugs, possible refactors, does it do what it's meant to etc? If you can pull it and look at it in vscode you might be able to see any obvious errors/mistypings etc.

The useEffect hook is a common source of bugs and unnecessary rerenders, so pay close attention to those to ensure the dependencies are correct etc.

Here's my own google-able question - Heroku has shat the bed and netlify is becoming more expensive. What's the current best solution for serving a js frontend and backend (with postgres) with minimal faff? We've been looking at Render

I haven't used it but I've heard good things about fly.io

# ? May 4, 2022 16:00

canoshiz: Nov 6, 2005; THANK GOD FOR THE SMOKE MACHINE!

bvj191jgl7bBsqF5m posted:

So I'm interviewing with a prominent tech company (not faang) and part of the process is a pull request code review of some React code and I've been loving with Angular for the last 2 years so I wanna know of there is a big list of react conventions and antipatterns I should know about before I do this exercise?

Last time I worked seriously with React was before hooks, and I would like to work with React again, preferably for a company that will pay me a lot of money

Can you PM me which company this is? I'm interested in doing interview loops that don't have live coding nonsense. (This specific interview you're doing actually sounds suspiciously similar to the one where I currently work, actually)

# ? May 4, 2022 19:52

lunar detritus: May 6, 2009

The Merkinman posted:

Anyone familiar with VeeValidate? Specifically version 4 and using the Composition API?
I have custom input working using this as a base. What I'd like is if that custom input/label would display differently based on the form-level validation. For instance, putting * after the label for a required field. I see a bunch of options for useField but nothing that seems to address my case.

I'm pretty sure it can't be done without access to the form variable. Maybe you could get access to it using inject/provide?

I wish there was a simpler/better way to do form validation, vee-validate gets more complex every version they release.

# ? May 4, 2022 20:12

camoseven: Dec 30, 2005; RODOLPHONE RINGIN'

canoshiz posted:

Can you PM me which company this is? I'm interested in doing interview loops that don't have live coding nonsense. (This specific interview you're doing actually sounds suspiciously similar to the one where I currently work, actually)

When I went job hunting last year I did a couple live coding things and had actual panic attacks both times (I had to close the window five minutes into the second one and go lie down for an hour lol). I started telling recruiters I wouldn't do them, and didn't have any problems.

# ? May 4, 2022 20:19

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

canoshiz posted:

Can you PM me which company this is? I'm interested in doing interview loops that don't have live coding nonsense. (This specific interview you're doing actually sounds suspiciously similar to the one where I currently work, actually)

sounds like gitlab based on this blog post that i adore:

https://about.gitlab.com/blog/2020/03/19/the-trouble-with-technical-interviews/

# ? May 4, 2022 20:23

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

teen phone cutie posted:

sounds like gitlab based on this blog post that i adore:

https://about.gitlab.com/blog/2020/03/19/the-trouble-with-technical-interviews/

After much cajoling at them, I have finally gotten the place I work to start interviewing devs this way.

Create a project using the SAME tech stack you actually use. Break it in a few places. Have them fix it.

For bonus points, have them add a new feature. Google, and any other tool they deem useful is allowed, just like the job.

Have them submit their work as a PR against the repo, and review it with them.

THAT is the JOB.

So it gives us a much better indicator of who can actually DO the job.

Let me put it this way:

I have been a dev for 21 years now. Frontend, backend, full stack. Worked on drat near everything you can think of: Perl, PHP, Tcl/Tk (lol), C#, Java, Node, JS, TS, Angular, Vue, etc. etc. etc. But know what I have never ONCE had to do for any reason? Write a linked list, or a binary sort, or any of that other poo poo they want ppl to do on algo tests. I'm sure there are problems out there which are solved that way, but as a web developer for 21 years? Never seen one myself.

I never learned algos because I am self-taught, so never took a class on them. And more importantly: because I have never had a need to.

# ? May 5, 2022 13:20

canoshiz posted:

Can you PM me which company this is? I'm interested in doing interview loops that don't have live coding nonsense. (This specific interview you're doing actually sounds suspiciously similar to the one where I currently work, actually)

I don't have plat if I get it to let you know will you promise to not tell anybody at your company about my horrible posts?

bvj191jgl7bBsqF5m fucked around with this message at 16:04 on May 5, 2022

# ? May 5, 2022 15:57

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

HaB posted:

Have them submit their work as a PR against the repo, and review it with them.

That's pretty cool. Does this mean other candidates can see the other submissions? Or is there something special you're doing?

# ? May 5, 2022 22:14

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

teen phone cutie posted:

That's pretty cool. Does this mean other candidates can see the other submissions? Or is there something special you're doing?

Hmm. Honestly never thought about it. I don�t handle the git perms, so I can�t say for sure.

# ? May 6, 2022 00:55

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

Help computer.

Fork a new copy of the repository for every candidate?

# ? May 6, 2022 02:09

worms butthole guy: Jan 29, 2021; by Fluffdaddy

Hey all, I have a couple Vue / CSS related questions that I was hoping you kind goons can take a stab at

1. Is it possible to have Vue refetch its pre-load data every x minutes?
2. Is there a way to apply CSS animations or JS animations for that data that changes? So say I have a background image from the first preloaded data, and I want to change it to a new background image on the next data call. My goal would be to either do some kind of animation transition to the new image or maybe have the screen "wipe" to the left and bring up a new screen? My thought was to have this be a component that just rerenders on data sent but not sure the best way.

Thank you all!

# ? May 6, 2022 14:42

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

worms butthole guy posted:

Hey all, I have a couple Vue / CSS related questions that I was hoping you kind goons can take a stab at

1. Is it possible to have Vue refetch its pre-load data every x minutes?
2. Is there a way to apply CSS animations or JS animations for that data that changes? So say I have a background image from the first preloaded data, and I want to change it to a new background image on the next data call. My goal would be to either do some kind of animation transition to the new image or maybe have the screen "wipe" to the left and bring up a new screen? My thought was to have this be a component that just rerenders on data sent but not sure the best way.

Thank you all!

Not sure about 1, but for 2, I'd write a component that renders based on a reactive property, then fire the animation when it changes.

# ? May 6, 2022 15:06

worms butthole guy: Jan 29, 2021; by Fluffdaddy

That's a good idea for #2, thank you. I'm guessing for the best results it might be best to just re-render the component on variable change and trigger the CSS animation also.

# ? May 6, 2022 15:18

Adbot: ADBOT LOVES YOU

# ? Jun 7, 2024 01:40

kedo: Nov 27, 2007

Two questions for the thread at large:

First, does anyone have opinions/suggestions for a headless CMS targeted towards building ecommerce sites? There seem to be a bunch out there, but I haven't used any of them before so I'm looking for a bit of help narrowing down the field to a few reliable options.

Second (and not actually related though it seems related), I'm starting to work with KeystoneJS as the backend on a personal project � this is the first time I've worked with a headless CMS to create a backend like this and so far it's going fairly well. My previous backend experience is mostly in Drupal and WP, so this is dramatically different and overall a very pleasant experience so far. I'm thinking about using Vue for the frontend because I'm first and foremost a lazy frontend dev, and Vue seems to be easier to wrap my brain around than React which I've worked with but haven't really enjoyed in the past.

Ultimately when I need to host this thing somewhere, what's the standard/right way for the two to communicate? Would I have Keystone running on one server (say a DO droplet), and my Vue client running on another and sending queries to the first? Keystone has some documentation about how to embed it into a Next.js app, but I'm new enough at this that I'm not sure how/if this would translate to Vue.

My experience here is somewhat limited, so I'm interested in any advice about how to approach this in an intelligent manner.

# ? May 11, 2022 16:53

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

«‹›235 »