The reason I'm not using CanvasTexture (I tried that first) is because of CORS issues. I'm pulling in all the images from the server side, and if I load all the elements into the canvas and then try to map it directly onto the box, I get tainted canvas errors. That doesn't happen if I export it as a dataURL and then map it as an image. Before I woke up and read that last post I was thinking "hmmm what about a separate canvas for each face?" I might try that, especially if I can figure out a) the CORS issues and b) how to map the canvas even if it's off-screen (maybe it doesn't matter in that case, whereas if I do a toDataURL on an invisible canvas the dataURL is also invisible and the image is whatever size the canvas is painted as via CSS; though maybe part of that was because I didn't have my renderAll triggers working at the time). (Either way the updates are infrequent, they're not the source of the performance issues. I've been trying to figure out whether they're resulting from basic vs Phong textures, ambient vs directional lighting, etc. But in general it really seems to stem from manipulating the orbit controls and now that I've cleaned stuff up and have less debugging stuff going it seems to be behaving a bit better anyway.)
|
|
# ? May 31, 2021 12:37 |
|
|
# ? Jun 5, 2024 07:11 |
|
I have a react app that I'm trying to make compatible with IE 11 (hopefully, 9 and 10 too), I've added the following polyfills:code:
|
# ? Jun 1, 2021 09:15 |
|
Tea Bone posted:I have a react app that I'm trying to make compatible with IE 11 (hopefully, 9 and 10 too), I've added the following polyfills: Probably stupid ideas: - Read the source of that dropdown and see what fills you are missing. - Wrap the function that renders it with try catch and log the error manually.
|
# ? Jun 1, 2021 15:00 |
|
Lumpy posted:Probably stupid ideas: Thanks, polyfills are a bit outside of my comfort zone. I've had a peek at the source code of the component, but wouldn't know where to even start looking to identify what polyfills I need. (Or if a missing polyfill is even the problem?) I've tried wrapping it in a try and catch and nothing happens, literally: code:
I get the same issue even if I put the Dropdown in another function that's never called. It's presence in the source code whether called or not seems to be enough to stop the app rendering. Edit: nevermind, there was a spread operator in the library that wasn't getting transpiled. Tea Bone fucked around with this message at 16:40 on Jun 1, 2021 |
# ? Jun 1, 2021 15:31 |
|
Tea Bone posted:but wouldn't know where to even start looking to identify what polyfills I need. (Or if a missing polyfill is even the problem?) A fun thing to do is to load https://polyfill.io/v3/polyfill.js?features=es2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019 from the browser you want to polyfill, and see which it automatically decides to give you
|
# ? Jun 1, 2021 17:44 |
|
I'm a JS novice, and while I feel like this probably has a pretty elementary answer, google is basically telling me "go fish." So, here's what I started today: https://remorsefullustrouscomments.aeoli.repl.co/index2.html It's a B&W background and a color image, plus a bunch of different CSS clip-path classes corresponding to image-map positions, with some JS on mouseover and mouseout to swap between 'em. The one that's different right now is #2, where I'm trying to transition from clip-path, which seems to only admit one shape at a time, to mask-image, which lets me composite multiple SVG masks. The idea is that as different (eventual) conditions are met, some of these visual elements should start to remain lit. Which means I'll need to keep a running list of those and then add that growing pile to each mask update. But I'm hung up on the basic aspects of it. Assigning multiple classes just results in overriding, so this is, I guess, definitely where JS is going to shine. But what JS operation could let me apply multiple comma-separated url() component values to -webkit-mask-image? The pertinent CSS property might look roughly like this, for reference: code:
code:
edit: and of course as soon as I work up the gumption to post, I notice that there was another class interfering with the line above. So. I guess I got it, haha. Never mind! Aeolius fucked around with this message at 19:32 on Jun 2, 2021 |
# ? Jun 2, 2021 05:35 |
|
Aeolius posted:I'm a JS novice, and while I feel like this probably has a pretty elementary answer, google is basically telling me "go fish." .cssText? JavaScript code:
|
# ? Jun 2, 2021 05:42 |
|
Grump posted:.cssText?
|
# ? Jun 2, 2021 06:02 |
|
Posting on behalf of a friend, I hope that's ok.quote:I’m trying to map an array but trying to pass in a variable from outside to use as my . Eg) mappedData.variable. Trouble is it won’t recognise the value in the variable. I have no idea about js myself, but if anyone has any ideas I could pass back to him, that's be super cool.
|
# ? Jun 4, 2021 13:28 |
|
If it's more like const myVar = 'age' (Needs to be a quoted string, otherwise it's assigning the value of variable age to myVar.) then you can access the property of an object with mappedData[myVar] It evaluates to mappedData['age'] which is the same as mappedData.age
|
# ? Jun 4, 2021 13:57 |
|
Thanks very much! I'll pass it on. e: You've made him very happy, thanks again! tight aspirations fucked around with this message at 14:10 on Jun 4, 2021 |
# ? Jun 4, 2021 14:03 |
|
I started messing around with Gatsby, and it's great! I get to have reusable components for things, and SEO seems to be supported pretty well. One thing I'm not too clear on, but it's been a long day: how do I implement things in the virtual DOM that I used to do in the physical DOM? For instance, I had animations triggered with Intersection Observer - what's the React/Gatsby way of doing that? Same with this bit of code that I was using for a mostly-CSS carousel:code:
|
# ? Jun 7, 2021 23:02 |
|
LifeLynx posted:I started messing around with Gatsby, and it's great! I get to have reusable components for things, and SEO seems to be supported pretty well. One thing I'm not too clear on, but it's been a long day: how do I implement things in the virtual DOM that I used to do in the physical DOM? For instance, I had animations triggered with Intersection Observer - what's the React/Gatsby way of doing that? Same with this bit of code that I was using for a mostly-CSS carousel: JavaScript code:
|
# ? Jun 8, 2021 18:27 |
|
Is Typescript stuff allowed here, too? Is it possible to override the constructor of the Date type in Typescript without declaring a derivative type? Because I can just add methods fine like this: code:
The idea is mostly trying to teach the Date constructor about that stupid YYYYMMDD date format used everywhere in our data tables and avoiding to declare a new type. I have plenty of helper functions on Date itself, so it'd be nice to have it parse that format, too, instead of veering off to a derived type. Apparently I need to do something with the DateConstructor interface, but I'm running against a wall.
|
# ? Jun 10, 2021 23:16 |
|
Combat Pretzel posted:Is it possible to override the constructor of the Date type in Typescript without declaring a derivative type? https://stackoverflow.com/questions/46664732/typescript-how-to-add-static-methods-to-built-in-classes suggests something like TypeScript code:
|
# ? Jun 11, 2021 01:41 |
|
Oh, that's how you do it with DateConstructor. Thanks for the solution. That'll work as well, so long it's combined with the other helper functions and not separate.
|
# ? Jun 11, 2021 05:45 |
|
I have a react native app on expo that uses token authentication. Everything seems to work great on ios, but on android even if I don't send any tokens I somehow still get authenticated. I think I've worked out that on android the app is still sending session data. The server endpoint accepts both session and token authentication so when the token fails it falls through to the session which succeeds. I've been going nuts trying to work out what's happening. It's always the same user session that gets sent even after logging in as a different user using a token. I've not touched session authentication at all on the app so I have no idea where it was initially set. Is this something that android does automatically? Is there any way to stop the app sending the session data?
|
# ? Jun 11, 2021 17:17 |
|
Very particular question here, but might as well take a stab at it: has anyone here attempted to implement page transitions in Next.js by using GreenSock? Best I can tell people generally use Framer Motion over GreenSock here (being that the former is declarative), but I already have gsap installed as a dependency for a canvas-based API and I’m trying to assess the feasibility of foregoing adding a second 30+ KB gzipped animation library.
|
# ? Jun 13, 2021 04:01 |
|
Page transitions are in Chome 92, although very basic set.
|
# ? Jun 13, 2021 22:48 |
|
What's the generally preferred YAML package nowadays?
|
# ? Jun 15, 2021 15:54 |
|
I suppose there isn't any intrinsic functionality to Node.js/V8 to get the memory footprint of an object? I just have to iterate through it and estimate? It's for some heuristic deciding when to ditch cached results of database queries. It's the goddamn varchars.
|
# ? Jun 18, 2021 20:41 |
|
Sounds like you want a WeakMap?
|
# ? Jun 19, 2021 04:02 |
|
I'd like a more controlled approach. I want to assign a certain amount of memory to that cache and then jerryrig some tunable garbage collector that decides based on timeouts, hit rate and memory footprint. I suppose counting manually could work, but if there would have been some native method, that I couldn't find a reference to, that'd be nice, because I'd expect it to be faster (especially for larger datasets).
|
# ? Jun 19, 2021 07:46 |
|
Hey dumb question - I just started a job yesterday that uses Angular, which I've never even so much as looked at before yesterday. I'm following along with the shopping cart tutorial on angular.io and on a previous step they had me add:code:
to an anchor tag. On this step I'm up to now, the syntax they tell me to add to a button is: code:
Why the brackets for the attribute / value in the first example and not the second? Does it not really matter and it's smart enough to infer what was meant?
|
# ? Jul 7, 2021 13:09 |
Sab669 posted:Hey dumb question - I just started a job yesterday that uses Angular, which I've never even so much as looked at before yesterday. I'm following along with the shopping cart tutorial on angular.io and on a previous step they had me add:
|
|
# ? Jul 7, 2021 13:42 |
|
Oh OK, so the routerLink "attribute" only needs them if the value justifies it, essentially?
|
# ? Jul 7, 2021 13:54 |
|
Regarding React... or rather running a development server. I've set up a React Typescript project, eventually linked my own libraries, when everything went to poo poo. It primarily got upset at the async keyword being present in my linked Typescript code, yapping something about loaders. Not being evident how to fix it in the template itself, I just upgraded to and set-up Webpack 5 et al from scratch. Now the React Router stuff doesn't entirely work. On the setup of the React template, refreshing the page in the browser, the site picked up where it should, whereas on Webpack's dev server, I just get an "Cannot get /a/b/c" error, if I load into anything other than /. Essentially, clicking my way through React Router links itself works fine, until I want to refresh the page in place. I suppose this is just a configuration problem, since you'd probably want it to always load behind the scenes into / regardless of URL, but I don't see how. The same issue would probably happen on eventual deployment, so it'd be nice to know.
|
# ? Jul 7, 2021 16:39 |
|
Yeah, sounds like it's using relative paths from "directories" at landing, which is not a problem when you start from the root as it just changes the history stack, not the actual directory of the page.
|
# ? Jul 7, 2021 18:35 |
Combat Pretzel posted:Regarding React... or rather running a development server. Not sure about the webpack dev server part, but on a live deployment you just make it so each backend route (outside of whatever custom API routes you have) serves the same SPA bundle, and have the react router handle the rest.
|
|
# ? Jul 7, 2021 19:04 |
|
Thanks. Mentioning the proper term for this all led me to find out that it's just this setting to make it work properly with Webpack dev server:code:
|
# ? Jul 7, 2021 19:10 |
|
Serious recommendation: If you're not doing anything fancy, just use Next.js and its static build support instead of Webpack. It has Typescript, routing, etc out of the box with zero config stuff needed (but you can still inject things into the webpack config it uses if you really need to).
|
# ? Jul 7, 2021 19:23 |
|
Dear god no. Everything related to web applications is getting tiring. Doing the backend stuff in Node.JS seemed pretty easy, so I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy. Yet I lost hours on end today, because for some reason it (well, the template and toolchain, or whatever, it installs) doesn't support some standard loving Typescript feature/keyword, introduced end of 2015 of all things, out of the box. And trying to find a solution, I only chased my tail, because daily reinventions of the wheel litter the web with all sorts of outdated help and advice. I have it working currently with my presumably janky Webpack configuration and I'm not gonna touch it anymore, until that house of cards collapses again. Probably takes just one npm update. --edit: Also, I'm not even sure it was the wisest idea to go fully Typescript. The initial idea was to type everything so that the TS compiler catches random idiocy, but whenever I'm looking up React things related to Typescript, they're all functional with plenty of any-types. Oh the time spent figuring out this React Hooks and classes things being like cats and water. Combat Pretzel fucked around with this message at 19:55 on Jul 7, 2021 |
# ? Jul 7, 2021 19:39 |
|
Combat Pretzel posted:Dear god no. Everything related to web applications is getting tiring. Check your tsconfig.js file to see if it's set to compile a more modern standard. Async/await and such all work fine, but you also need to make sure that you're putting it in something that supports Promises directly, or you have to wrap them in one. Typescript's whole deal is that it helps you keep types correct over time, rather than just catching initial mistakes. Plain JS can absolutely seem like it works fine, but you won't know until it explodes when it's missing a property somewhere. Typescript isn't generally a huge amount of effort on top of regular JS, but the times it's saved my rear end over the last few years is kind of crazy.
|
# ? Jul 7, 2021 20:07 |
|
Combat Pretzel posted:Dear god no. Everything related to web applications is getting tiring. Again, I will point at Next.js, because it does all this stuff for you. You literally just add its dev dependencies and run next dev or next build / next export. No configuration stuff needed, supports a bunch of major build-related libraries out of the box and has literally hundreds of regularly updated working boilerplate examples you can copy-paste for every major case of "how do I use [X] with this".
|
# ? Jul 7, 2021 20:21 |
|
HexiDave posted:Check your tsconfig.js file to see if it's set to compile a more modern standard. Async/await and such all work fine, but you also need to make sure that you're putting it in something that supports Promises directly, or you have to wrap them in one. quote:ERROR in ./foo.js Unexpected token was async. I have all tsconfig.json files set to esnext and es2020 where applicable. Was that wrong? I mean I have it working now, mainly just by switching to custom Webpack, with the same tsconfigs. But it was still unfortunate it didn't work out of the box. --edit: One of the things I had to do was to use that Babel plugin, one of its purposes is to deal/"transform" that async stuff, for reasons: https://babeljs.io/docs/en/babel-plugin-transform-regenerator/ Combat Pretzel fucked around with this message at 20:51 on Jul 7, 2021 |
# ? Jul 7, 2021 20:28 |
|
Combat Pretzel posted:It happened whenever things were compiled. The error message was pretty much this (I just looked up a version of it on the web, project's over at work): One possibility is that your loader is looking for .ts files, and foo.js isn't getting picked up by the loader's regex in webpack's config. There are also different targets (what it's compiling into, e.g. es5) and libs (e.g. es2020). If you try your code in a project started with create-react-app (npx create-react-app my-app --template typescript), does it still throw errors?
|
# ? Jul 7, 2021 20:52 |
|
Combat Pretzel posted:I thought that picking React, backed by some big company, that also comes with Typescript support, would keep things easy. React isn't a complete front-end framework on it's own, as you've found the hard way, but people are recommending Next because it is (meant to be, for most people). I know your project is done, I just wanted to try to help clarify that.
|
# ? Jul 8, 2021 18:40 |
|
Roadie posted:Again, I will point at Next.js, because it does all this stuff for you. You literally just add its dev dependencies and run next dev or next build / next export. No configuration stuff needed, supports a bunch of major build-related libraries out of the box and has literally hundreds of regularly updated working boilerplate examples you can copy-paste for every major case of "how do I use [X] with this". That sounds interesting, I think I'm going to try a Next.js small project. The biggest question I have is: forms? I've relied on Wordpress plugins for contact forms for so long that I don't know how I'd handle validation, submission, etc. for simple contact forms. There's nothing in Next.js's docs about forms, so what's recommended to make one? Netlify's form setup seems simple enough for actually sending the emails, but I don't know if that's the best way.
|
# ? Jul 8, 2021 20:21 |
|
i default to reaching for nextjs for everything now tbh for forms: https://nextjs.org/blog/forms
|
# ? Jul 8, 2021 21:21 |
|
|
# ? Jun 5, 2024 07:11 |
|
I was happily plugging along in Next.js when this error popped up:code:
Hoping that doesn't happen again, but I'd like to know how to fix it if it does. I need advice: say you're creating a five page informational site with Next.js, nothing special, just some content and images and a contact form. What's your process like? Do you use a starter? My process has been to use Wordpress (with Local by Flywheel) and base the site off a custom theme I created that I'd developed over the years. So I want something as smooth as that, even if it takes me a while to learn how to get it that way. It seems like there's so many ways of doing things, so I want to know what you actual goons do, not people trying to convince me to use their Tailwind/Jekyll/etc. starter or buy their udemy course.
|
# ? Jul 9, 2021 22:56 |