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 »

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.

geeves posted:

Can anyone explain the benefits of CLI tools for Vue and / or Angular? For someone like me who manages our build process, it's just one more thing that's in the way.

angular-cli is loving boss from a development perspective - i can set up a new angular project and get everything to work with typescript and unit tests etc. in a matter of minutes. a few years ago it could take days of googling and using whatever flavor of the month build tools that existed to get all that poo poo to partially work.

# ? Jan 12, 2019 11:26

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 18:54

my bony fealty: Oct 1, 2008

Bruegels Fuckbooks posted:

angular-cli is loving boss from a development perspective - i can set up a new angular project and get everything to work with typescript and unit tests etc. in a matter of minutes. a few years ago it could take days of googling and using whatever flavor of the month build tools that existed to get all that poo poo to partially work.

yeah vue-cli is the same. Plus you get to choose options when creating a new project (do I want typescript, vuex, testing, scss, etc) and it scaffolds it all out. Saves some time typing npm install and setting up directories and config files. It's a sweet spot between convention and configuration. And you don't have to worry about build tooling at all.

If you have a highly customized tooling setup or build pipeline cli tools might not be helpful but for the majority of smaller projects I do they are great.

# ? Jan 12, 2019 16:56

smackfu: Jun 7, 2004

I mean, the point is that you don�t need someone to manage your build process.

# ? Jan 14, 2019 04:43

my bony fealty: Oct 1, 2008

Yeah, it's especially nice for new front-end folks too because you can tell them to not care about webpack and the like. Parcel is good for this as well. The whole "ahh modern frontend development is too complex ahh" has gotten a lot better in the past year or so.

# ? Jan 15, 2019 00:27

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

For those that work with images a lot, how expensive is it to load a bunch of SVGs from a server? Is it fast enough to the point where you don't have to display a spinner until the asset is finished loading?

Right now, I'm working on displaying a default placeholder SVG until we get the image from the server and can successfully resize it, and then I have a .75s transition to show the image over the placeholder. Is this overkill?

The idea is that we have an API that gives us a link to an image and then we have to go request image asset

# ? Jan 18, 2019 15:02

Volguus: Mar 3, 2009

Grump posted:

For those that work with images a lot, how expensive is it to load a bunch of SVGs from a server? Is it fast enough to the point where you don't have to display a spinner until the asset is finished loading?

Right now, I'm working on displaying a default placeholder SVG until we get the image from the server and can successfully resize it, and then I have a .75s transition to show the image over the placeholder. Is this overkill?

The idea is that we have an API that gives us a link to an image and then we have to go request image asset

I don't work with images a lot (just a little), but i don't see how you can make any assumptions here. It all depends on the connection speed of the client. If all they get is 1 byte per second, well then ... loading that svg will take a while.
While SVGs are text and text compresses well they can still be bigger in some cases than a similar png or jpg (being XML doesn't help).

# ? Jan 18, 2019 15:31

Tei: Feb 19, 2011; Can't post for 3 days!

Grump posted:

For those that work with images a lot, how expensive is it to load a bunch of SVGs from a server? Is it fast enough to the point where you don't have to display a spinner until the asset is finished loading?

I don't work with SVG images, but I don't think the average image will weight more than 50 KB, and is text, if the server is configured to use gzip compression, it will weight even less on transport. For such as small download I would not think about any spinner. If 50KB need more than 90 ms to render, something is very wrong.

I would not use a spinner. But if is already implemented, I would leave it there for people with real bad internet (GPRS)

You can start thinking about a spinner if you are downloading SVG files larger than 500KB that need more than 1 second to download or more than 800ms to render. Maybe maps of regions?

Tei fucked around with this message at 15:49 on Jan 18, 2019

# ? Jan 18, 2019 15:47

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

Thermopyle posted:

Should I use create-react-app nowadays? I remember it was just coming out when I last did frontend work and I didn't like it because as soon as I wanted to do something that they didn't support I had to eject the app and it was all weird and poo poo.

I had some time today, so instead of using CRA, I devoted an hour to reading all the webpack documentation...and it's waaay better than it was back when I was last doing this poo poo.

I would've probably been better off just using CRA, but I had time and my curiosity was nagging me.

# ? Jan 18, 2019 21:27

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

VS Code question: I like that I can launch/debug Javascript apps with a single keyboard shortcut, which starts the Node debugger, brings up the debug console, and switches to the debug view. Is there any way to "go back" with one click or via a keyboard shortcut? By this I mean stop any active debugger, close the console, and return to explorer view. It seems like I have to do all three of these things manually.

# ? Jan 21, 2019 21:10

The Fool: Oct 16, 2003

Use one of these extensions:
https://marketplace.visualstudio.com/items?itemName=geddski.macros
https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command

To create a custom keybinding that runs the following commands:

code:

workbench.view.explorer
workbench.debug.action.toggleRepl
workbench.action.debug.stop

# ? Jan 22, 2019 18:42

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

Serious question: Is it copyright violation to include an ascii version of Shrek in your source code?

# ? Jan 24, 2019 13:33

Tei: Feb 19, 2011; Can't post for 3 days!

Grump posted:

Serious question: Is it copyright violation to include an ascii version of Shrek in your source code?

I am not a lawyer, but... [you must stop reading here]

If that code is not for distribution, just do it. Don't do it for distribution because is a possible violation of trademark (I don't think it would be a copyright violation because the author of that ascii art is okay with that use).

# ? Jan 24, 2019 13:41

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

Technically it is, as even a character can be copyrighted. But the existence of fan art shows that copyright holders don't always care, as long as it isn't being sold and is clearly fan art. So use your judgement.

# ? Jan 24, 2019 14:29

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

The Fool posted:

Use one of these extensions:
https://marketplace.visualstudio.com/items?itemName=geddski.macros
https://marketplace.visualstudio.com/items?itemName=ryuta46.multi-command

To create a custom keybinding that runs the following commands:
code:
workbench.view.explorer
workbench.debug.action.toggleRepl
workbench.action.debug.stop

Awesome, thanks.

# ? Jan 24, 2019 19:18

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

HappyHippo posted:

Technically it is, as even a character can be copyrighted. But the existence of fan art shows that copyright holders don't always care, as long as it isn't being sold and is clearly fan art. So use your judgement.

yeah probably a good call.

Unrelated question - is there a way to check if an asset is loaded in memory

Currently I have code that works something like this

code:

if (imageAssetIsStillInFlight) {
  displayLoadingIndicator()
}

but is there a way to say

code:

if (imageAssetIsStillInFlight && imageAssetIsNotStoredInBrowserMemory) {
    displayLoadingIndicator()
}

# ? Jan 24, 2019 21:20

Tei: Feb 19, 2011; Can't post for 3 days!

Grump posted:

Unrelated question - is there a way to check if an asset is loaded in memory

I don't understand the scope of your question, but I will risk it and try to answer anyway.

The age old method to know if a resource is loaded is using the .onload of a resource to track that.

code:

var a = new Image();

var image_loaded = false;
a.onload = function(){
 image_loaded = true;
};

a.src = "http://www.google.com/logo.png";

# ? Jan 24, 2019 22:44

MrMoo: Sep 14, 2000

Grump posted:

but is there a way to say

Basically, no. And in some cases "locally cached" can be worse than loading again over the network. If you want an image fast in memory then you need to manage that yourself. Aside of caching mechanisms the one tool available for performance is data urls, the trade off of additional round trips to transfer size.

For certain scenarios the advanced answer is service workers, but :lol:

what a mess.

MrMoo fucked around with this message at 13:09 on Jan 26, 2019

# ? Jan 26, 2019 13:06

Gildiss: Aug 24, 2010; Grimey Drawer

MrMoo posted:

Basically, no. And in some cases "locally cached" can be worse than loading again over the network. If you want an image fast in memory then you need to manage that yourself. Aside of caching mechanisms the one tool available for performance is data urls, the trade off of additional round trips to transfer size.

For certain scenarios the advanced answer is service workers, but what a mess.

Can confirm service workers are uhhh a bit touchy. My current deployment has a service worker that now just unregisters service workers :lol:

# ? Jan 26, 2019 13:15

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

MrMoo posted:

Basically, no. And in some cases "locally cached" can be worse than loading again over the network. If you want an image fast in memory then you need to manage that yourself. Aside of caching mechanisms the one tool available for performance is data urls, the trade off of additional round trips to transfer size.

For certain scenarios the advanced answer is service workers, but what a mess.

Man that stinks. Right now, I'm using some simple CSS to overlay a "placeholder" image until the source image is finished loading, and then fade it in at .75 seconds. The only issue there is that the CSS transition is totally unnecessary when the images are already loaded in memory, so all it ends up being is an annoying effect after a while.

And preloading the images is out of the question because I have to hit an API to get the img URLs

teen phone cutie fucked around with this message at 01:21 on Jan 27, 2019

# ? Jan 27, 2019 01:18

SpaceAceJase: Nov 8, 2008; and you
have proved
to be...

a real shitty poster,
and a real james

Grump posted:

Serious question: Is it copyright violation to include an ascii version of Shrek in your source code?

Post it here so we can determine the likeness

# ? Jan 27, 2019 05:56

MrMoo: Sep 14, 2000

Grump posted:

Man that stinks. Right now, I'm using some simple CSS to overlay a "placeholder" image until the source image is finished loading, and then fade it in at .75 seconds. The only issue there is that the CSS transition is totally unnecessary when the images are already loaded in memory, so all it ends up being is an annoying effect after a while.

I think the common pattern here is to delay the interstitial animation for 100-500ms, that should cover high speed connections and caching.

# ? Jan 27, 2019 10:55

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

Grump posted:

Serious question: Is it copyright violation to include an ascii version of Shrek in your source code?

Pretty sure that's gonna fall under "Fair Use" of copyrighted material. I am assuming your app has nothing to do with Shrek, and you're not using your ascii Shrek as any sort of selling point for your software. If that's correct, then you're fine.

It could be argued that you'd need permission from the author of the ascii version, but even that's questionable, since the character doesn't belong to that person in the first place. Questionable because copyright applies to an individual work, not a character. The character would be a trademark. So the ascii author has a work of a trademarked character. They wouldn't be allowed to profit materially from that work without permission. If you are receiving no material benefit from using it, you're probably fine. If it's something you found somewhere that has been copy/pasted a million times so that it's impossible to trace it back to the author of the ascii work, then disregard this entire paragraph, as that is likely to fall under "public domain" at that point.

Source: have several registered copyrights, and a slightly-better-than-a-layman-but-less-than-a-paralegal's understanding of copyright law.

# ? Jan 27, 2019 14:59

HappyHippo: Nov 19, 2003; Do you have an Air Miles Card?

HaB posted:

Questionable because copyright applies to an individual work, not a character. The character would be a trademark.

But you can copyright a character: https://en.m.wikipedia.org/wiki/Copyright_protection_for_fictional_characters

# ? Jan 27, 2019 18:04

Clark Nova: Jul 18, 2004

Just put the ascii art there and if you get sued by Shrek's estate replace it with one of those greentext stories

# ? Jan 27, 2019 18:50

Tei: Feb 19, 2011; Can't post for 3 days!

Grump posted:

Man that stinks. Right now, I'm using some simple CSS to overlay a "placeholder" image until the source image is finished loading, and then fade it in at .75 seconds. The only issue there is that the CSS transition is totally unnecessary when the images are already loaded in memory, so all it ends up being is an annoying effect after a while.

And preloading the images is out of the question because I have to hit an API to get the img URLs

I don't think your problem can be solved.

I don't know any source material that can give a insight into it. But I found the documentation from material design to be thoughtful.
https://material.io/design/motion/understanding-motion.html#expressing-continuity

# ? Jan 28, 2019 13:45

duz: Jul 11, 2005; Come on Ilhan, lets go bag us a shitpost

HaB posted:

Pretty sure that's gonna fall under "Fair Use" of copyrighted material. I am assuming your app has nothing to do with Shrek, and you're not using your ascii Shrek as any sort of selling point for your software. If that's correct, then you're fine.

It could be argued that you'd need permission from the author of the ascii version, but even that's questionable, since the character doesn't belong to that person in the first place. Questionable because copyright applies to an individual work, not a character. The character would be a trademark. So the ascii author has a work of a trademarked character. They wouldn't be allowed to profit materially from that work without permission. If you are receiving no material benefit from using it, you're probably fine. If it's something you found somewhere that has been copy/pasted a million times so that it's impossible to trace it back to the author of the ascii work, then disregard this entire paragraph, as that is likely to fall under "public domain" at that point.

Source: have several registered copyrights, and a slightly-better-than-a-layman-but-less-than-a-paralegal's understanding of copyright law.

I think every single thing you said is wrong. Except possibly the part where you've registered some copyrights.

# ? Jan 28, 2019 18:39

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

More to the point: what is the $$$ value of having Shrek in the codebase (or whatever it is) vs the $$$ spent wasted around the watercooler with engineers chiming in with "IANAL but...", and back-and-forthing with Legal to establish whether it's allowable?

Because I'm willing to bet it's not worth anyone's time to even discuss it.

# ? Jan 28, 2019 20:13

my bony fealty: Oct 1, 2008

Mobile Safari is utter garbage

That is all

# ? Jan 28, 2019 20:16

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

minato posted:

More to the point: what is the $$$ value of having Shrek in the codebase (or whatever it is) vs the $$$ spent wasted around the watercooler with engineers chiming in with "IANAL but...", and back-and-forthing with Legal to establish whether it's allowable?

Because I'm willing to bet it's not worth anyone's time to even discuss it.

You�re right..what was I thinking slacking off :doh:

Won�t happen again sir

# ? Jan 28, 2019 21:36

Tei: Feb 19, 2011; Can't post for 3 days!

Just for reference. I usually put a tiny ascii art drawing on some core files on my projects.

I think it is funny for the juniors devs, and show a stance: we want our code to be beatiful, a beatiful workplace.

I would not put a shreck, but I have put things like books, cars, DNA helix..

I don't even know why we are talking about this, of all random things, but he. Guys, live a littel!.

# ? Jan 28, 2019 22:51

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

duz posted:

I think every single thing you said is wrong. Except possibly the part where you've registered some copyrights.

I'm interested to hear how/why. Someone already pointed out you CAN copyright a character if it gets used elsewhere beyond the original work of which it's a part, which I was unaware of, but please, educate me.

# ? Jan 28, 2019 23:16

The Fool: Oct 16, 2003

HaB posted:

I'm interested to hear how/why. Someone already pointed out you CAN copyright a character if it gets used elsewhere beyond the original work of which it's a part, which I was unaware of, but please, educate me.

Mostly because you're also wrong about your application of Fair Use:

quote:

In its most general sense, a fair use is any copying of copyrighted material done for a limited and �transformative� purpose, such as to comment upon, criticize, or parody a copyrighted work.

And your understanding of Public Domain:

quote:

There are four common ways that works arrive in the public domain:

the copyright has expired
the copyright owner failed to follow copyright renewal rules
the copyright owner deliberately places it in the public domain, known as �dedication,� or
copyright law does not protect this type of work.

# ? Jan 28, 2019 23:41

my bony fealty: Oct 1, 2008

Tei posted:

Just for reference. I usually put a tiny ascii art drawing on some core files on my projects.

I think it is funny for the juniors devs, and show a stance: we want our code to be beatiful, a beatiful workplace.

I would not put a shreck, but I have put things like books, cars, DNA helix..

I don't even know why we are talking about this, of all random things, but he. Guys, live a littel!.

Raise up. One of the sadder parts of view source not being useful as much these days...less chance someone will spot the dope ascii skeleton you dropped in there.

# ? Jan 28, 2019 23:43

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

The Fool posted:

Mostly because you're also wrong about your application of Fair Use:

And your understanding of Public Domain:

I would argue that including an ascii drawing of a character in source code for software is the very definition of a "limited purpose." Even better, it's a purpose so far removed from the original purpose of the character that there's practically no way it would be considered an infringement.

I would also argue that it's likely Public Domain because of the 4th rule you have listed there. Pretty sure you won't find a copyright lawyer anywhere who would take a case regarding literally an arrangement of typed characters in the shape of a known- even a copyrighted or trademarked character- unless it was to sue the creator of such a work because they are somehow profiting monetarily off that creation, OR causing confusion between their version and the real thing.

Just like any other law, copyright law open to quite a bit of interpretation.

I assume the reason the OP was asking in the first place was wondering if he's gonna get sued if someone finds the ascii Shrek in his source code, in which case my answer remains the same: good lord, no - ascii Shrek away.

All that being said- is anyone ever going to see it? I assume source code is minified and or obfuscated these days anyway.

# ? Jan 29, 2019 03:44

my bony fealty: Oct 1, 2008

React hooks scheduled to come out for production on Monday. I am excited, I have said "ugh I wish I could just drop some state in this function component" appx 10 times this year.

# ? Jan 29, 2019 22:44

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

Any idea why a basic eventlistener, in js outside an Angular app, is firing twice when clicking on something rendered in Angular? It's not some sort of propagation thing as if I take the end result HTML and copy/paste it to a static document, it only fires once per click as it should.

# ? Jan 29, 2019 23:07

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

https://arxiv.org/abs/1901.09056

quote:

Mind the Gap: Analyzing the Performance of WebAssembly vs. Native Code

Across the SPEC CPU suite of benchmarks, we find a substantial performance gap: applications compiled to WebAssembly run slower by an average of 50% (Firefox) to 89% (Chrome), with peak slowdowns of 2.6x (Firefox) and 3.14x (Chrome). We identify the causes of this performance degradation, some of which are due to missing optimizations and code generation issues, while others are inherent to the WebAssembly platform.

# ? Jan 29, 2019 23:23

MrMoo: Sep 14, 2000

Thermopyle posted:

https://arxiv.org/abs/1901.09056

That is a weird paper, their Browsix shim invented for testing Posix apps in WASM has an overhead. The paper is basically stating that overhead.

# ? Jan 30, 2019 01:44

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

MrMoo posted:

That is a weird paper, their Browsix shim invented for testing Posix apps in WASM has an overhead. The paper is basically stating that overhead.

quote:

On average the
BROWSIX-WASM overhead is only 1.15%. Low overhead of
BROWSIX-WASM shows that execution in BROWSIX-WASM
does not affect the times and performance counter results of
programs executed in WebAssembly.

Is that not what you're talking about?

# ? Jan 30, 2019 02:22

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 18:54

MrMoo: Sep 14, 2000

That's the overhead Browsix is presenting above the WebApis by a browser, which ignores that the apis inherently different concepts.

I'm not buying their rational of WASM is so slow because different IO mechanisms are different. They do seem to acknowledge computation wise the overheads are minimal, the paper is trying to assess the more "real world" performance suites after all.

# ? Jan 30, 2019 03:40

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

«‹›235 »