Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

huhu posted:

Met a guy at a meetup last night who was building a full stack JavaScript site. He had a chart he wanted to group the data by month and I said just do a SQL query... Pretty straight forward I thought. He wants his database to be "dumb" and just fetch the data from it. So he's using vanilla JS with Moment to write queries. Is this actually a thing now? He was also against stuff like Django with its orm.

You were talking to what is widely known as a Bad Programmer.

Adbot
ADBOT LOVES YOU

Capri Sun Tzu
Oct 24, 2017

by Reene

huhu posted:

Met a guy at a meetup last night who was building a full stack JavaScript site. He had a chart he wanted to group the data by month and I said just do a SQL query... Pretty straight forward I thought. He wants his database to be "dumb" and just fetch the data from it. So he's using vanilla JS with Moment to write queries. Is this actually a thing now? He was also against stuff like Django with its orm.
Is this not just fetching from a json store and then filtering it client-side? That's completely fine for a lot of applications.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Well that's a good point.

I mean, probably most people using a JSON store shouldn't, but if that's what you're using it might not have good query capabilities.

kedo
Nov 27, 2007

In the future there is only one language and that language is Javascript. All y'all just wasting time and energy worrying about snakes and Jamie Foxx.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense

kedo posted:

In the future there is only one language and that language is Javascript. All y'all just wasting time and energy worrying about snakes and Jamie Foxx.

True. But it's rude to point out.

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

Nolgthorn posted:

True. But it's rude to point out.

The language web developers deserve, but not the one they need.

Gmaz
Apr 3, 2011

New DLC for Aoe2 is out: Dynasties of India
Don't we have a saviour in WebAssembly?

Opulent Ceremony
Feb 22, 2012

Capri Sun Tzu posted:

Is this not just fetching from a json store and then filtering it client-side? That's completely fine for a lot of applications.

It's dumb as hell if there's any possibility of data growth. The user wants to know how many entries of this type happened per month in the last 6 months? Let's just ship every single entry from those 6 months from the db to the app server to the client, where we can then perform filtering and aggregating to a final data set that looks like [20000, 12000, 4000, 23000, 50000, 41000].

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Gmaz posted:

Don't we have a saviour in WebAssembly?

Throw it on the pile with all the other saviors.

Capri Sun Tzu
Oct 24, 2017

by Reene

Opulent Ceremony posted:

It's dumb as hell if there's any possibility of data growth. The user wants to know how many entries of this type happened per month in the last 6 months? Let's just ship every single entry from those 6 months from the db to the app server to the client, where we can then perform filtering and aggregating to a final data set that looks like [20000, 12000, 4000, 23000, 50000, 41000].
You're making assumptions about the size of the payload and requirements of the app. Fetching from a noSQL store and then filtering with node or on the client is in many cases faster than querying a traditional relational database.

Obviously not every application should be built this way, but a full stack JavaScript site is definitely doable and increasingly popular.

Opulent Ceremony
Feb 22, 2012

Capri Sun Tzu posted:

You're making assumptions about the size of the payload and requirements of the app.

If you are bringing all of your data from your db to your app, the size of your payload is the size of your db.

Capri Sun Tzu posted:

Fetching from a noSQL store and then filtering with node or on the client is in many cases faster than querying a traditional relational database.

I'd love to understand the mechanics of how bringing all your data from a db into the server or client app layer and filtering there, which precludes the ability to make use of indexes and other supplemental data structures already maintained by your db to make querying faster, can possibly be a better idea than having the db do the filtering. I don't know why you are comparing a noSQL db and relational db, any good noSQL db can do filtering.

Capri Sun Tzu
Oct 24, 2017

by Reene
I don't think the original discussion was about fetching the entire store, and if it was it must've been a pretty small dataset for that to make sense. I'm just responding to the poster saying that yes, full stack JavaScript is a thing.

Tei
Feb 19, 2011

If a database is smaller than 400 KB and I can shape a app like a single page application, the idea to download the whole database dont seems crazy to me.

Skandranon
Sep 6, 2008
fucking stupid, dont listen to me

Tei posted:

If a database is smaller than 400 KB and I can shape a app like a single page application, the idea to download the whole database dont seems crazy to me.

Is it always going to be 400kb? If you are sure about that, fine, but if there's a chance this grows, you have a time limit on how long your app works. If your app becomes harder to fix down the road than the time limit you have, you are screwed. Considering there are already well understood and easy to use technologies to fix this early, why not do it then?

Tei
Feb 19, 2011

Skandranon posted:

Is it always going to be 400kb? If you are sure about that, fine, but if there's a chance this grows, you have a time limit on how long your app works. If your app becomes harder to fix down the road than the time limit you have, you are screwed. Considering there are already well understood and easy to use technologies to fix this early, why not do it then?

If theres a probability that the database will quickly grown to 14 MB, I may not do it. If the database grows to 8 MB in 5 years, then they have our phone, they can call us and we can talk. Is always nice to see the face of old customers and maybe take a beer and ask about their family.

Main Paineframe
Oct 27, 2010

huhu posted:

Met a guy at a meetup last night who was building a full stack JavaScript site. He had a chart he wanted to group the data by month and I said just do a SQL query... Pretty straight forward I thought. He wants his database to be "dumb" and just fetch the data from it. So he's using vanilla JS with Moment to write queries. Is this actually a thing now? He was also against stuff like Django with its orm.

When the only thing you know how to use is a hammer and you're not interested in learning any other tools, the whole world looks like it's made of nails.

I mean, it's not impossible to find a use case where that works acceptably, but it's unlikely to be the best or easiest or most reliable solution.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
I've got a sweet web based email reader.

It loads the html email client side, parses it, traverses everything to ensure scripts are stripped out/links are `target="_blank"` stuff like that. Inserts some default styles into the top of the thing, then dumps it all into an iframe. I'm wondering if there's no better way than this:

code:
const source = new DOMParser().parseFromString(myHtml.trim(), 'text/html');
myCleanupMethod(source);

const doc = myIframe.contentWindow.document;

doc.open();
doc.write(source.documentElement.outerHTML);
doc.close();
The issue I have is just that I am working with two `document` instances, rendering one to html just to dump it into the other.

I've looked all over the place and can't figure out how to say "hey iframe, use this document instance." I could dump the html into the iframe directly and mess around with it there but I can't have it load until I've finished sanitizing. I could use `createElement('iframe')` I think and then insert that element onto the page.

But I'm using some fancy client side framework called Vue and I think using `appendChild` to dump something into the DOM myself would be frowned on.

Tei
Feb 19, 2011


Maybe I misunderstood your post because I am dumb.

Edit:
old post content
Stripping HTML so is safe is not a trivial task. I would not write my own code to do it, and would use a very good library for it.

Consider that maybe the browser see <sc ript> alert("foo"); </sc ript> and execute it like javascript, but a dompaser may see it as node(sc) with attribute ript="" and ignore ir skip it. Even if you are overzealous and work under a "everything not recognized in a whitelist is removed included all attributes" you could end hacked by somebody that find a way to exploit it somewhere.

Tei fucked around with this message at 12:47 on Feb 2, 2018

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense

Tei posted:

Stripping HTML so is safe is not a trivial task. I would not write my own code to do it, and would use a very good library for it.

Consider that maybe the browser see <sc ript> alert("foo"); </sc ript> and execute it like javascript, but a dompaser may see it as node(sc) with attribute ript="" and ignore ir skip it. Even if you are overzealous and work under a "everything not recognized in a whitelist is removed included all attributes" you could end hacked by somebody that find a way to exploit it somewhere.

It's cool to do it if you have a dom parser turn it into element nodes, then you can traverse the element nodes and know exactly how everything will render. Especially if you're doing it in the browser where it is rendered. So it's no problem.

If you're doing it server side then you should also pay attention to comment nodes, because there are some browser tricks that can hide stuff in them, mostly for ie6.

Nolgthorn fucked around with this message at 13:38 on Feb 2, 2018

TheCog
Jul 30, 2012

I AM ZEPA AND I CLAIM THESE LANDS BY RIGHT OF CONQUEST
Can anyone suggest a good place to start learning how not to write utterly terrible UI?

I realized recently that i have no idea how to make an intuitive interface.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

TheCog posted:

Can anyone suggest a good place to start learning how not to write utterly terrible UI?

I realized recently that i have no idea how to make an intuitive interface.

Read the book "Don't Make Me Think" by Steve Krug

EDIT: and probably "The Design of Everyday Things" by Don [ last name purged from memory ]

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
Best piece of advice I heard for UI was carefully consider or research exactly what the user wants to do and make it basically the absolute only thing on the page.

The Dave
Sep 9, 2003

Nolgthorn posted:

Best piece of advice I heard for UI was carefully consider or research exactly what the user wants to do and make it basically the absolute only thing on the page.

Ehhhhhhhhhh sounds a little too extreme for me, but yes, research based design is always better. If you can pull off research > design discovery > design validation you're in really good shape. It's really hard to get support for all of that though.

The books already mentioned are solid, I've also heard really good things about this: https://www.amazon.com/gp/product/1592535879/ref=ox_sc_act_title_2?smid=ATVPDKIKX0DER&psc=1

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
I had experience trying to put something out on the open market, and I way way way way way overestimated both the visual comprehension skills of the average user and their resolve to figure anything out. After several revisions the final product was literally one button and that helped a lot.

I'm not sure how websites that even force users to 'sign in' make it anymore. Probably helped a lot by single sign on. I'd be curious to find out the stats regarding how many users sign in with single sign on vs how many create an account using email. For websites that offer both.

Nolgthorn fucked around with this message at 19:02 on Feb 2, 2018

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

I don't even know what "interface design" is any more, since it seems to be a catch-all term for front-end Javascript monkey (sorry if I sound bitter, been reading a lot of job postings lately). But a good interface for a mobile app is different from a good interface for desktop software is different from good interface for an informational site (which just seems to be scrolling vertically through lazy-loaded slides now) is different from good interface for a utility site (which just seems to be CRUD using Ajax).

The Dave
Sep 9, 2003

Sure those are differnet, but in my opinion that's not so different than asking a developer to code in html, css, php, js, etc. etc.

Being a good ux/ui designer is about being able to audit what should be on a page, prioritize / hierarchy, and then your bag of tricks of components to handle those interactions. While there are definitely people that just suck at say mobile design, it's pretty typical for someone to be able to handle all.

kedo
Nov 27, 2007

However being a good designer !== being a good coder. I'm very much in the camp of expecting interactive designers to know at least some code, but this:

Scaramouche posted:

I don't even know what "interface design" is any more, since it seems to be a catch-all term for front-end Javascript monkey (sorry if I sound bitter, been reading a lot of job postings lately).

is an issue that's not new, but increasingly pervasive in the industry. It's not alarming to me if small companies are looking for employees to fill multiple roles, I understand they don't have huge hiring budgets, but the way front-end dev is moving it's becoming increasingly difficult for a single person to be effective at both design and development. Heck, half of UX these days is in no way recognizable as "design" as the word was used over the past half century. If your goal is to become an interface or UX designer you'd be better off taking psychology and statistics classes than you would design classes. And to be an effective front-end developer you have to have an incredibly deep understanding of at least three or four languages, know how browsers work and in which ways they're all different, how to create and interact with databases even though that's classically backend, how to use a new package manager every month, etc. etc.

I'm not going anywhere with this, I'm also just a little bitter.

Capri Sun Tzu
Oct 24, 2017

by Reene
UX and programming are entirely different skillsets and I've always found it weird that a lot of places expect a good user experience to come out of a programming team. The difference in usability when you have a dedicated UI/UX guy on board is night and day.

UX is more closely related to design than to coding and all of the UX guys I've worked also put in a lot of design work.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
It's mainly that layout design and programming are very different skills, one being purely logical and the other purely artistic/creative. There are people out there who can do both though it's rare and those people should be hired immediately. Also someone please hire me.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

The Dave posted:

Sure those are differnet, but in my opinion that's not so different than asking a developer to code in html, css, php, js, etc. etc.

Being a good ux/ui designer is about being able to audit what should be on a page, prioritize / hierarchy, and then your bag of tricks of components to handle those interactions. While there are definitely people that just suck at say mobile design, it's pretty typical for someone to be able to handle all.

Yeah, I'm raising more the issue is that employers seem to think these are somehow the same thing, and that because someone knows React that they are now qualified for a UX/UI design position, which is kind of the point kedo addresses.

Different field but I remember when I worked in games and they had hired this guy who did production design for the original star wars movies to do look and feel on the game world and wow was that something. The guy could barely use a computer but he could paint like a mofo, these like 6 foot high paintings that the map artists had to work from.

Capri Sun Tzu
Oct 24, 2017

by Reene
It's like expecting an electrician to also do interior decorating.

bobua
Mar 23, 2003
I'd trade it all for just a little more.

Lumpy posted:

Read the book "Don't Make Me Think" by Steve Krug

EDIT: and probably "The Design of Everyday Things" by Don [ last name purged from memory ]

The design of everyday things is great. It absolutely will not teach you to design anything, but it will teach you to appreciate the importance of design and how to think about it.

Once a month for the past 5 years or so I've been going to the same building. There is a side door that opens outward, and I never think about it on the way in, I just pull it open, but on the way out I almost always pulled it first, realized my mistake, kicked myself, and pushed it open. It hurt even more that on multiple occasions I've seen a maintenance guy there fixing the door from where it's been pulled on from so many people that its constantly wearing down and being damaged. In my time, they've even added a tiny, nice, metal sign that says push. Pulling on the door even though that push sign is there really makes you feel dumb, but you do it anyway.

After reading that book, I realized that I am not dumb. The guy that put the pull handle on a door that only needs a push plate is dumb. The guy that went to the trouble of buying and placing a push sign, instead of a push plate, is dumb.

Now when someone uses something that I make, and they have any trouble figuring it out, I blame myself for not doing better, instead of rolling my eyes at computer illiterate people. Well, actually, I just tend to think more about design than I ever did.

Data Graham
Dec 28, 2009

📈📊🍪😋



bobua posted:

Now when someone uses something that I make, and they have any trouble figuring it out, I blame myself for not doing better, instead of rolling my eyes at computer illiterate people. Well, actually, I just tend to think more about design than I ever did.

A tough lesson to learn but a valuable one. As designers do we really want to be Skinner going "no, it's the children who are wrong"?

Tei
Feb 19, 2011

Programmers have a developed taste for complexity and for learning complexity. But they have little patience for "wasted space". So UI's made by programmers will have many buttons crammed in a small space, without much information of what button do or don't do.




Most other type of users are task oriented, they see a button that do a advanced but rare option has a negative. They want less power and more safeguards. They don't want to learn. Give me a simple "on and off" button if possible, with pretty colors.



So there are very different people with different expectations.

Tei fucked around with this message at 09:45 on Feb 3, 2018

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
That’s the wrong way to think about design I think. Average users expect interfaces that help them learn the right way. When interfaces lead them to the wrong thing, they rightly think of this as a flaw.

In designing a product I thought kind of derisively about the ‘grab bag’ options, you know the ones, the dots or menu bars that hides a comprehensive set of actions. I’ve sort of come around on that though, mainly cause the alternative is having to juggle every feature on the screen, often forced to give screen position to something that doesn’t really form part of the main line of interaction. Consequently, users get lost on the wrong complexity.

Revealing complexity progressively is the only way a product can hope to teach its user in a way that doesn’t expect external learning (ie reference manual, training video, etc).

Tei
Feb 19, 2011

Maluco Marinero posted:

That’s the wrong way to think about design I think. Average users expect interfaces that help them learn the right way. When interfaces lead them to the wrong thing, they rightly think of this as a flaw.

I agree.

Boris Galerkin
Dec 17, 2011

I don't understand why I can't harass people online. Seriously, somebody please explain why I shouldn't be allowed to stalk others on social media!
I'm trying to make a splash page for my personal site and I'm trying to just learn the greatest and latest modern features, so right now I'm using just css grid. Is there a setting in firefox/chrome/safari that I can enable to to draw all the lines for me? I'm getting really confused keeping track of which blank spaces are margins, which blank spaces are empty grid columns, and so on.

(I don't really know what I'm doing by the way. I downloaded WebStorm and normalize.css and grabbed some fonts from Google Fonts and that's it.)

e: I want to use variables in my css (i.e, let blue1 = #whatever and then using $blue1 in the rest of the css) so I guess I need a pre-processor? Which one is "better"? I'm vaguely aware of something called less and sass.

e2: One last thing. I thought that with html5 (and my knowledge of this is like, 7 years old) you weren't suppose to use elements like <div> anymore but instead prefer more semantic elements. But every single css grid tutorial (from the past year even) all use <div>s everywhere, like

https://mozilladevelopers.github.io/playground/css-grid/07-basic-layout
code:
<div class="container">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content-1">Content-1</div>
  <div class="content-2">Content-2</div>
  <div class="content-3">Content-3</div>
  <div class="footer">footer</div>
</div>
Why doesn't this example use <header>, <footer>, <section>, and <nav> tags? Did they fall out of favor?

e3: Huh, variables are built into css now? Also, math (via “calc()”)? I didn’t know that. That’s cool.

Boris Galerkin fucked around with this message at 15:18 on Feb 4, 2018

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
Everyone stopped using them to avoid arguments with their coworkers about where they're appropriate to use.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Boris Galerkin posted:

e3: Huh, variables are built into css now? Also, math (via “calc()”)? I didn’t know that. That’s cool.
It might not be of concern to you, but when using new features, be aware of browser support.

Adbot
ADBOT LOVES YOU

duz
Jul 11, 2005

Come on Ilhan, lets go bag us a shitpost


Boris Galerkin posted:

I'm trying to make a splash page for my personal site and I'm trying to just learn the greatest and latest modern features, so right now I'm using just css grid. Is there a setting in firefox/chrome/safari that I can enable to to draw all the lines for me? I'm getting really confused keeping track of which blank spaces are margins, which blank spaces are empty grid columns, and so on.

The Firefox console has a grid layout panel now when you're on a page using a css grid. That should let you inspect pretty much everything about it.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply