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

«‹›2 »

MrMoo: Sep 14, 2000

Lumpy posted:

Semi-relevant to is thread: React Native is public: http://facebook.github.io/react-native/

I for one, am giddy with excitement.

Facebook also released a modified version of Atom.io supporting React and React Native, http://nuclide.io.

# ¿ Mar 27, 2015 21:27

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 16:38

MrMoo: Sep 14, 2000

Suspicious Dish posted:

We got an Angular site shipped from some external contractor. I've been trying to hack on it to add simple functionality and it's the most insane thing I've ever done.

Angular is an incomprehensible mess and I can't figure out how to do anything in it.

They all are, here is hoping the next generation fairs better. TodoMVC is pretty good at showing what a mess the situation is.

# ¿ Apr 10, 2015 02:01

MrMoo: Sep 14, 2000

Dangerllama posted:

Is there a way to cache certain API requests in Angular?

The sledgehammer approach would be to use HTML5 service workers which pretty much replaces HTML5 appcache because that was rather cumbersome to utilize.

MrMoo fucked around with this message at 22:38 on May 12, 2015

# ¿ May 12, 2015 22:34

MrMoo: Sep 14, 2000

Gildiss posted:

Everything I've read about angular 2 sounds like a stability nightmare.

Isn't that just JS frameworks in general? They don't exactly have a long shelf life.

Meanwhile looks like Polymer 2 is starting to ship and defaulting to ES6 classes to define web components.

# ¿ Mar 10, 2017 16:25

MrMoo: Sep 14, 2000

COOL CORN posted:

What are thoughts on Polymer? With Google, Youtube, ING, Bloomberg, etc. using it, I'm intrigued.

The dogs balls. I really love it, waiting for 2.0 to get out of RC for that ECMAScripr 6 class goodness.

# ¿ Apr 8, 2017 02:49

MrMoo: Sep 14, 2000

Skandranon posted:

Socket.io is a good candidate for handling push notifications. Your current solution is awful, even just using raw Websockets would be better.

SSE is there for push but there is almost no way it is less work than implementing in WebSockets and it comes with more overhead too, pretty much a DoA technology.

# ¿ May 30, 2017 16:47

MrMoo: Sep 14, 2000

Can Winston or Bunyan logging work in a browser with LogStash? I'm surprised how few articles there are on ELK integration with client side logging. Do frameworks hide this or punt it all serverside themselves? Do you batch dump entries over XHR or just use WebSockets for convenience?

# ¿ Jun 6, 2017 11:46

MrMoo: Sep 14, 2000

Has there been any significant attempts on improving things since Google Wave or Vanilla?

The same forum but slightly less annoying is what many would probably be happy with but that doesn't really exist either.

# ¿ Jun 16, 2017 18:46

MrMoo: Sep 14, 2000

an skeleton posted:

Anyone have any suggestions or good experiences with trying to share CSS/whatever your styling language is across multiple projects for consistency? We're a react shop if it matters.

Build a style book and create Polymer elements for absolutely everything with shared CSS inside the elements only. Make sure CSS variables are used. It looks like Polymer 2 mixins may be very useful too.

Gildiss posted:

Make a general theme and style guide and documentation with examples and explanations of common components, very similar to Bootstrap. This gives people no excuse to not follow that common set of rules for components.

Oh yes, examples for everything should be a minimum requirement.

# ¿ Jun 20, 2017 00:53

MrMoo: Sep 14, 2000

It's a bit fruity if you are used to CSS Grid, which pretty much everything supports now.

# ¿ Jul 20, 2017 22:04

MrMoo: Sep 14, 2000

Thermopyle posted:

Luckily, I just came across this article that summarizes all the talks and the summit as a whole.

Can someone translate that article as it is a bit :goatsecx:

quote:

WCs have another big problem: there�s no good server-side rendering strategy for Shadow DOM, and especially no efficient way to �rehydrate� WCs on the client side from server-rendered non-WC output.

Also no idea what this is supposed to mean:
https://twitter.com/samccone/status/914524326145208320

# ¿ Nov 6, 2017 23:26

MrMoo: Sep 14, 2000

piratepilates posted:

Apparently there isn't a good way of rendering html from web component codes on servers (like you can with React et al)

Rehydration is when you take the data sent from the server that was used to render the server-rendered html, and load it in to ~~web-component~~react on the client after the page is loaded.

You render components on the server as html, send the html as a response to a request from the browser, and then on the client side when the javascript has been received, parsed, and evaluated, your framework loads up again and control of the dom/html is turned back over to the client-side framework.

Why would you do any of this, it sounds as dumb as balls?

# ¿ Nov 7, 2017 03:00

MrMoo: Sep 14, 2000

The goal is worthy but aside of absurdity of Netflix bikeshedding on this, it's their own fault to introducing such a gigantic library already, the target market of cheap Android phones on sub-par 3G connections is wholly assuming the browser can multitask efficiently. I can see something like Snackoverflow trying to implement this but they push such a gigantic piece of HTML and CSS up front that it still appears a net loss in UX. Cheap Android phones are made to only just about work, everything is slow and terrible which is why you end up with native apps. I think the developers have a gigantic misunderstanding on bandwidth here, I have tmo with 128KB international data roaming, almost every website is utterly awful and that's a lot faster than beep beep boop modem days of yore.

# ¿ Nov 7, 2017 15:48

MrMoo: Sep 14, 2000

If one is targeting cheap phones I would assume there is little to no cache at all which is when the technique would be highly counterproductive. It's highly subject to what the determination of that base is. If you take China, a lot of factory workers have pretty drat powerful fancy phones and update frequently. There are definitely many bargain bucket phones hitting the news for India, for example $3.60 smartphone.

I'm coming at this from the odd angle of working on a high profile but niche Web Components project. Initial load over HTTP/2 and everything else over WebSockets, I don't care about initial load but it happens to be pretty good but the pages are simple. I have users accessing over WLAN on a wide variety of devices and even stuff for gigantic wallboards works well on Android, only awkward part is trying to pull in literally hundreds of large graphics, but that's not surprising.

My understanding of WC is that you would never render them server side as they should be treated like any other HTML tag, in fact you can now replace standard tags. It would thus be perfectly fine to wrap WC tags with React or Angular for the higher level functionality of creating complex pages and forms.

MrMoo fucked around with this message at 19:08 on Nov 7, 2017

# ¿ Nov 7, 2017 18:49

MrMoo: Sep 14, 2000

Yes, all assets over WebSockets. The reasons are that assets are actually live: they can update at any time and so every asset request is actually a subscription, I have no concept of one-off snapshots, the larger reason is to simplify the entire mess that is connectivity, fault-tolerance and load sharing. WebSockets allow me to manage that connection and so if an error occurs I can fallover to another endpoint and resync the entire asset list and the consuming WC entities are none the wiser. Really simplifies things a lot. It is literally impossible to get stale data from infrastructure issues which is my big win, diagnosing those is a PITA.

Subscribing to new assets:

JavaScript code:

this._esignal_handle = subscribe({ service_name: "ESIGNAL", key: newValue });
this._esignal_handle.addEventListener("refresh", this._on_esignal_refresh_bound);
this._esignal_handle.addEventListener("update", this._on_esignal_update_bound);

WIth matching handlers:

JavaScript code:

_on_esignal_refresh: function(e) {
        this._clear_esignal();
        this._on_esignal_update(e);
},               
_on_esignal_update: function(e) {
        const json = e.data;
        if(typeof json.data.listexg !== "undefined") {
                const listexg = json.data.listexg === "ARCX" ? "PSE" : json.data.listexg;
                this.set('primaryExchange', listexg);
        }   
        ...
}

MrMoo fucked around with this message at 20:48 on Nov 7, 2017

# ¿ Nov 7, 2017 20:45

MrMoo: Sep 14, 2000

Cantonese means Traditional Chinese which is a gigantic glyph set, your primary option is basically images. Most of the characters are for names though.

Generally there are not many Chinese fonts in popular use and styling makes them unreadable. Interesting challenge.

# ¿ Dec 14, 2017 15:47

MrMoo: Sep 14, 2000

MingLiU is only ~20KB as WOFF2 on Linotype so I would investigate that.

# ¿ Dec 14, 2017 20:50

MrMoo: Sep 14, 2000

It's not even that simple, aside of the basics of common usage, 5,000 vs 8,000 characters, and 2,000 if we bring in Japanese. An interesting point is that Windows XP fonts for Traditional Chinese are actually insufficient to cover the Cantonese vernacular and is common to use the letter "o" as an extra radical :lol:

# ¿ Dec 25, 2017 00:39

MrMoo: Sep 14, 2000

Has anyone worked with inline cross-domain login mechanisms? It seems to need the wonderful world of MessagePort which isn't too popular. I've prototyped two implementations and it seems to work, albeit slightly cumbersome.

I'm trying to add a login page to the steaming 💩 that is Tizen TV. Apps on Tizen run on a file:// URL so you're not going to have much fun with redirects, and forget popups. Google recommends authenticating with a separate mobile device, because hey we need things to be more complicated, and confuse the hell out of everyone.

# ¿ Jun 9, 2018 04:22

MrMoo: Sep 14, 2000

Also consider that this brand new TV that is a 2016 model has browser software equivalent to Safari 6 from 2012. Thankfully you can throw polyfills and Babel at it to cover most of the warts. The biggest issue has been that it doesn't support setting multiple cookies in one response header, and I guess no one has noticed.

Some amazingly dumb design though, like you can launch a Chrome developer tools session but you cannot catch the console log of page startup. So, yes, setup a 20s setTimeout to delay the page from starting to execute. They did add a "deviceready" event to Tizen 3 but as Samsung is a hardware company only bug fixes get applied to any released software, you will never see a version bump.

Surprisingly there is a Samsung TV Bounty program, but if Google are pushing out fixes every two weeks how does Samsung think they can get away with a browser on new hardware that is 6 years old?

:lol:

look how broken that site is in pretty much anything:

MrMoo fucked around with this message at 03:51 on Jun 10, 2018

# ¿ Jun 10, 2018 03:41

MrMoo: Sep 14, 2000

Really? I just punt that stuff in a WebComponent.

New toy for the week, if you are using Canvas and custom fonts use Google's WebFont loader and something like this: (because font monitoring is rear end)

JavaScript code:

if(document.documentElement.classList.contains("wf-active")) {
        requestAnimationFrame(paint);
}
else
{       
        let observer = new MutationObserver(e => {
                observer.disconnect();
                setTimeout(() => {
                        this.set('observation_count', this.observation_count + 1);
                }, 1 * 1000);
        });
        observer.observe(document.documentElement, {
                attributes: true,
                attributeFilter: ['class'],
        });
}

I'm using observation_count to trigger repeated calls of the enclosing function.

Here's what using WebFont loader looks like, with the weird looking Font Variation Descriptor

JavaScript code:

WebFont.load({
	custom: {
		families: [
			  'Gotham:n7,n5,n3', 'Gotham Narrow:n5', 'Gotham XNarrow:n5'
			, 'Gotham Narrow Book:n4'
		]
	}
});

# ¿ Jun 12, 2018 01:49

MrMoo: Sep 14, 2000

Making a webapp with no logs, no log server, and no window scrolling or pretty much any useful input device, what to do with fatal errors?

I stick an ErrorStackTrace into the QR code that you can easily look at with an iPhone.

I pinched the HTML/CSS from a Codepen, although that is a bit broken. QR Code from kjua.

😜

# ¿ Jun 14, 2018 02:14

MrMoo: Sep 14, 2000

a hot gujju bhabhi posted:

Why are there no logs? How do you look at historical events?

Usually via Chinese whispers. It's character building or something like that. In reality there are only a finite number of events and usually you will see the same problem happen again on another day that you can run in parallel with a system that has logging or a debugger attached.

This isn't a NYSE project although they have asked about using similar TVs before, these are incredibly underpowered devices:

Samsung posted:

Expected performance

2017 Premium TV: 30~33fps
2016 Premium TV: 8~9fps

The NYSE devices run 1080p at 60fps, with 12 monitors hanging off a single PC. I have a dev server running in parallel so I can sometimes track issues live, but yes live streaming on TV helps.

# ¿ Jun 14, 2018 14:41

MrMoo: Sep 14, 2000

💩 I'll credit you in the commit log.

# ¿ Jun 15, 2018 16:39

MrMoo: Sep 14, 2000

Interested here too, jQuery's main problem is that HTML5 provides the same features although slightly prosaic in form, the libraries end up gigantic for all the crud they grew.

# ¿ Jun 20, 2018 01:03

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

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

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

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

MrMoo: Sep 14, 2000

WebGPU is the new upcoming graphics API du jour. Also check some other Google IO 2019 videos for some interesting tidbits, particularly with their game demo, take away is basically get everything off the renderer thread.

https://www.youtube.com/watch?v=K2JzIUIHIhc

https://www.youtube.com/watch?v=w8P5HLxcIO4

I've recently bumped my ticker work to WebGL2 courtesy of PixiJS v5. It uses more GPU memory and CPU is about all I can say about it. There's a 3 min default GPU old texture purge timer I've noted to disable. Also weird stuff like defaulting to 32 max textures but now in v5 dropping that if the hardware supports less - so you need to set a high default (?)

Some pretty demo, but I hate pages that break vertical scrolling, like the Apple Mac Pro page.

On my todo list is the following:

"Upgrade" things to Lit-HTML, i.e. 4th generation WebComponents.
Work out a mechanism of using Lit-HTML in the rendered thread but backed by business logic ES6 classes in WebWorkers.
OffscreenCanvas based real time graphing.

# ¿ May 20, 2019 04:45

MrMoo: Sep 14, 2000

Still waiting for Chrome to fix whatever year+ long issue that WebWorkers do not support modules. After that pops out I hope to see more realistic versions of React and whatever that offload everything from the renderer thread. Comlink makes that really quite nice, but wanting supporting multiple threading models still becomes a bit ugly: (1) process in the renderer, (2) process in a WebWorker or SharedWorker, and (3) work in a nested WebWorker. I've given up on #1 and work with combinations of #2 or #3 depending how many cores the browser reports the platform supports.

# ¿ Aug 16, 2019 19:56

MrMoo: Sep 14, 2000

It�s a nice idea but you�re probably better off going with Elm over ImmutableJS. JS isn�t really the right platform for efficient FP.

# ¿ Sep 14, 2019 14:12

MrMoo: Sep 14, 2000

You probably want Plotly that sits above d3.js, good luck!

# ¿ Nov 27, 2019 18:38

MrMoo: Sep 14, 2000

The Merkinman posted:

What's wrong with moment now? Is Luxon ok?

I use this, recommended here by someone before. It works, kind of annoying to inspect a value when debugging is about my only gripe. It is spawned from the Moment team.

# ¿ Dec 29, 2019 00:52

MrMoo: Sep 14, 2000

PlaneGuy posted:

so, because i'm an old, what's your definition of the "css-in-js debate"? like is it that the style of a component is in the component itself or specifically that you're using js to write your css?

Is this completely ignoring mixins and CSS variables? This stuff has developed to cover these issues: how to have global consistency but permit tweaking at the element level.

# ¿ Feb 3, 2020 16:28

MrMoo: Sep 14, 2000

Lumpy posted:

Seconding CSS animation / keyframes.

WebAnimations is actually designed for this, basically CPU governed GPU animation. A lot of Apple�s website uses this tech now. Tends to be smoother than pure CSS animation.

# ¿ Apr 3, 2020 22:00

MrMoo: Sep 14, 2000

Start looking at Widevine? :lol:

at the ask: I want a Netflix.

# ¿ Apr 3, 2020 22:31

MrMoo: Sep 14, 2000

I�ve used it since 2014 when it was only a polyfill, and still works better than CSS animations. iOS includes native support according to the feature tests: and I highly doubt Apple would be using it so much if it were otherwise. What support are you looking for?

ha, did Apple just add support for it?

https://caniuse.com/#feat=web-animation

MrMoo fucked around with this message at 19:33 on Apr 4, 2020

# ¿ Apr 4, 2020 16:47

MrMoo: Sep 14, 2000

Edit: wrong thread, editor chat in YOSPOS too.

MrMoo fucked around with this message at 02:37 on Apr 27, 2020

# ¿ Apr 27, 2020 02:13

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 16:38

MrMoo: Sep 14, 2000

MySQL docs have a section on pronunciation, explicitly My-S-Q-L.

# ¿ May 7, 2020 18:54

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

«‹›2 »