The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

I am a garbage newbie student at web design, and I've having a weird problem that I can't track down...

This is for a class, but, I don't think I'm asking anyone to do anything for me...

Part of my site displays a poem in html that looks something like this

code:

<span class='word' id='firstWord'>ONCE</span> <span class='word'>upon</span> 
<span class='word'>a</span> <span class='word'>midnight</span> <span class='word'>dreary</span>,

and in my js I have

code:

var wordObjects = [];
initWordObjects();

$("#scrambleButton").click(function(){
        wordObjects.forEach(function(obj){
                var word = obj.text().toLowerCase();
                var newWord = getWord(word);
                obj.text(newWord);
        });
        console.log("scramble complete");
});

function initWordObjects(){
        $(".word").each(function(){
                wordObjects.push($(this));
        });
}

the getWord(word) function returns a string.

So, this all works fine in terms of replacing the contents of the spans in the visible html. It's a tiny bit slow, but I'm not super worried about that. The problem that I'm having is that after the scramble is completed, that is, after I see "scramble complete" outputted to the console, my site is frozen for like 30 seconds. The cursor doesn't update as I move it over different elements, and inputs are buffered and will register after the site unfreezes.

Does anyone know what could be causing this? Initially I thought it was related to jquery selection, and originally I didn't use the wordObjects array and instead just used $("#word").each every time scramble was called, but the freezing doesn't seem to be related to that at all.

edit: Oh, I think I may know what it is...
Also in my js is this:

code:

$(".word").click(function({
	//do some stuff
});

What I learned about jQuery in class was kind of vague, but reading about it now, I realize that the above code is assigning an event listener to all elements that meet that selector. Which in retrospect, is obvious. So now I understand that when the contents of each span change, the display size and location chance, so it probably has to update or replace the event listeners for every span. There are like four hundred of them.

Well I can test this theory real quick by commenting out my click even listener.

edit2: no, that's not it. Hmm.

Snak fucked around with this message at 18:31 on May 3, 2017

# ? May 3, 2017 18:15

Adbot: ADBOT LOVES YOU

# ? May 31, 2024 14:28

kedo: Nov 27, 2007

Snak posted:

Does anyone know what could be causing this?

Post all your JS. The freezing makes me think you have an infinite loop in there somewhere.

# ? May 3, 2017 19:19

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

Oh, god, it's so bad...

put it on pastebin. I can post it directly here, but it's ~150 lines so I figured this would be better.

But uh... the freezing went away. I don't know why. So... yeah. Like, between when I started writing this post, and when I checked just now before submitting it, it stopped doing the freeze. So I have no idea what's going on. It was a totally consistent and reproducible issues for like, the last day.

edit: I'm sorry, I have no idea what changed and why it works now... maybe one of my arrays is never getting reset and throughout testing cycles it's persiting and continuing to bloat...

I would still really appreciate it if you looked at my code and pointed out and terrible practices. This is basically the first time I've used js outside of homeworks that are like "implement this one specific thing."

Snak fucked around with this message at 20:13 on May 3, 2017

# ? May 3, 2017 19:52

Rubellavator: Aug 16, 2007

Are you using a debugger? I've found myself forgetting about a breakpoint and thinking my browser crashed before.

# ? May 3, 2017 20:36

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

I'm not using a debugger. I know that I should be, but I'm not really sure how to set one up for a webapp that's using php and js.

# ? May 3, 2017 21:32

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

If you put debugger; at any point in your code, when whatever browser you are viewing it on reaches that point it'll stop processing your JS, allowing you to step through your code.

Look at some videos on Chrome devtools (or whatever browser you are using, all the main ones have debug tools), they'll make your life so much easier.

# ? May 3, 2017 22:46

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

I need some guidance on how I might accomplish some alternative frontend page navigation. Someone I know wants a plus-shaped page, with four pages located to the north, south, east, and west of a central "main" page. They're imaging arrow navigation to navigate between the pages. When they proposed this I instantly thought of Reveal.js and its ability to display full-sized pages with sliding animations in all four directions based on how you arrange your slides.

My main question is, what is the general technique I could use to set up five 100% width, 100% height divs and slide them into and out of view? CSS animations are obviously going to need to be set in place to make things look "pretty" but I'm stuck on how I would actually move the DIVs around. Float everything and adjust left and top?

# ? May 3, 2017 22:50

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

ddiddles posted:

If you put debugger; at any point in your code, when whatever browser you are viewing it on reaches that point it'll stop processing your JS, allowing you to step through your code.

Look at some videos on Chrome devtools (or whatever browser you are using, all the main ones have debug tools), they'll make your life so much easier.

Thanks, I'll check it out. I use debuggers in my java and c work, I'm just not much of a web developer so I'm really unfamiliar with lots of aspects of it.

# ? May 3, 2017 23:14

Kekekela: Oct 28, 2004

Snak posted:

I'm not using a debugger. I know that I should be, but I'm not really sure how to set one up for a webapp that's using php and js.

ctrl+shift+i to bring up devtools in chrome. Go to sources tab and set breakpoints.

Adding debugger and console.log to your code is kind of frowned on these days but will also work. (provided you have devtools or some other debugger open)

# ? May 4, 2017 00:13

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

Yeah, I've been using the devtools panel in chrome, so I can inspect elements and evaluate variables and stuff, I just didn't know I could also use it to set breakpoints.

Yeah, I know console.log and printf and echo and such are really amateur ways of getting debug feedback. I'll play around with the actual debugging tools some.

Thanks guys.

# ? May 4, 2017 00:33

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

IAmKale posted:

I need some guidance on how I might accomplish some alternative frontend page navigation. Someone I know wants a plus-shaped page, with four pages located to the north, south, east, and west of a central "main" page. They're imaging arrow navigation to navigate between the pages. When they proposed this I instantly thought of Reveal.js and its ability to display full-sized pages with sliding animations in all four directions based on how you arrange your slides.

My main question is, what is the general technique I could use to set up five 100% width, 100% height divs and slide them into and out of view? CSS animations are obviously going to need to be set in place to make things look "pretty" but I'm stuck on how I would actually move the DIVs around. Float everything and adjust left and top?

Other than being a UX nightmare, this shouldn't be that hard. Five viewports with 100vh 100vw sizing and set their transforms to the correct spots with CSS (again using vh or vw) then set to zero when someone navigates or whatever.

\/\/ a better answer

Lumpy fucked around with this message at 01:45 on May 4, 2017

# ? May 4, 2017 01:40

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

A better way of accomplishing it would be to sever all ties with whoever thinks that would make a good site.

# ? May 4, 2017 01:43

IAmKale: Jun 7, 2007; やらないか; Fun Shoe

Lumpy posted:

Other than being a UX nightmare, this shouldn't be that hard. Five viewports with 100vh 100vw sizing and set their transforms to the correct spots with CSS (again using vh or vw) then set to zero when someone navigates or whatever.

\/\/ a better answer

ddiddles posted:

A better way of accomplishing it would be to sever all ties with whoever thinks that would make a good site.

All good advice, but I went ahead and tried to figure it out anyway with a friend who helped me finally play around with Animate.CSS:

http://codepen.io/IAmKale/pen/xdLzpE

I'm still not convinced this is the best way to go, either, but hey, at least it's possible.

# ? May 4, 2017 15:15

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

IAmKale posted:

I need some guidance on how I might accomplish some alternative frontend page navigation. Someone I know wants a plus-shaped page, with four pages located to the north, south, east, and west of a central "main" page. They're imaging arrow navigation to navigate between the pages. When they proposed this I instantly thought of Reveal.js and its ability to display full-sized pages with sliding animations in all four directions based on how you arrange your slides.

My main question is, what is the general technique I could use to set up five 100% width, 100% height divs and slide them into and out of view? CSS animations are obviously going to need to be set in place to make things look "pretty" but I'm stuck on how I would actually move the DIVs around. Float everything and adjust left and top?

Not a solution at all, but reading about it makes me think it could be a fun setup for a Dungeon Master/Eye of the Beholder style game in a browser.

# ? May 4, 2017 18:00

Tei: Feb 19, 2011

Hello guys!.

I am making some experiments with HTML.

http://texthacking.com/retaila/pagesbruto2.php

Tell me what you guys think. (is not feature complete, is just a experiment)

Tei fucked around with this message at 22:58 on May 4, 2017

# ? May 4, 2017 19:42

huhu: Feb 24, 2006

Tei posted:

Hello guys!.

I am making some experiments with HTML.

http://texthacking.com/retaila/pagesbruto2.php

Tell me what you guys think. (is not feature complete, is just a experiment)

What are your experiments? It just looks like a wall of text.

# ? May 4, 2017 23:44

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

It looks like a parse of the forums. Making a chat-looking output.

# ? May 5, 2017 03:56

Tei: Feb 19, 2011

I am doing random experiments.

I am using a massive thread with 13000 post, and I testing ways to showing 13000 posts in the screen. I am not even tryiing to find a sane way. I am getting information from how the browser breaks.

Anyway the link I posted was a tamed one, where I experimented testing what I have learned until this point. It shows 1800 posts from a thread of 13000.

I am not happy how the current forum software works. I don't like infinite scroll nonsense. So thats why my choice to make this experiments is a forum thread, but I don't want to create a new forum software or tell people their technological options are wrong.

Is more terrorism than science.

Tei fucked around with this message at 10:54 on May 5, 2017

# ? May 5, 2017 10:45

Data Graham: Dec 28, 2009; 📈📊🍪😋

At last a worthy thread subtitle.

# ? May 5, 2017 10:55

Tei: Feb 19, 2011

Snak posted:

the getWord(word) function returns a string.

So, this all works fine in terms of replacing the contents of the spans in the visible html. It's a tiny bit slow, but I'm not super worried about that. The problem that I'm having is that after the scramble is completed, that is, after I see "scramble complete" outputted to the console, my site is frozen for like 30 seconds. The cursor doesn't update as I move it over different elements, and inputs are buffered and will register after the site unfreezes.

Does anyone know what could be causing this? Initially I thought it was related to jquery selection, and originally I didn't use the wordObjects array and instead just used $("#word").each every time scramble was called, but the freezing doesn't seem to be related to that at all.

I don't know why your code do this.

Things that can cause a browser to go sluggish *after* you finished a heavy operation, with the likeliness:

- (sometimes) You have launched (withouth knowing it) a lot of ajax calls or setTimeout calls, and they need to be executed after you see the message "operation complete". The code you think is running syncronically, is running asyncronically.
- (never) Theres some hellish landscape for the garbage collector and cleaning that mess is hitting bugs in the garbage collector.
- (sometimes) You are (withouth knowing it) adding events to nodes that already have the event. So when you click somewhere,the same even is repeated 9000 times for 9000 nodes. Like running the onclick event 9000 times when you click 1 time.
- (absolutelly never) Theres a horrible bug in the javascript implementation of the browser / the DOM rendered.
- (sometimes) You show the message complete *before* the real work begin, so you think the operation has complete, but is a lie, its heavy and it just started.

You are a smart person, so maybe your bug is actually something unlikelly. Anyway I would check the dumb causes first.

If you hit a unlikelly cause, the solution is : rewrite it other way.

I would just add a console.log to every function in the first line of such function. function foo(){ console.log("[foo] ..."); .... so you immediatelly see some code running when is not supposed to run. I don't think using a line by line debugging is a good idea because I believe in unicorns.

Tei fucked around with this message at 12:47 on May 5, 2017

# ? May 5, 2017 11:10

Kekekela: Oct 28, 2004

e: wrong thread

Kekekela fucked around with this message at 14:24 on May 5, 2017

# ? May 5, 2017 12:30

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

Data Graham posted:

At last a worthy thread subtitle.

No. This should be the thread title:

Tei posted:

I don't know why your code do this.

# ? May 5, 2017 13:03

Tei: Feb 19, 2011

Welp.

I would change this line: wordObjects.push($(this);, instead of storing a reference to the jquery object, I would directly store the word there.

I don't know if thats the cause, and storing a reference to a object is not something that must cause panic for the Javascript engine, but maybe theres some heavy magic involved here...

# ? May 5, 2017 13:22

kedo: Nov 27, 2007

Tei posted:

I am doing random experiments.

I am using a massive thread with 13000 post, and I testing ways to showing 13000 posts in the screen. I am not even tryiing to find a sane way. I am getting information from how the browser breaks.

Anyway the link I posted was a tamed one, where I experimented testing what I have learned until this point. It shows 1800 posts from a thread of 13000.

I am not happy how the current forum software works. I don't like infinite scroll nonsense. So thats why my choice to make this experiments is a forum thread, but I don't want to create a new forum software or tell people their technological options are wrong.

Is more terrorism than science.

So you are a forums terrorist?

:ohdear:

# ? May 5, 2017 15:29

Tei: Feb 19, 2011

kedo posted:

So you are a forums terrorist?

No. I just a joke.

But lets do horrible things to a browser and see how it implodes. Thats my idea of fun

Tei fucked around with this message at 16:17 on May 5, 2017

# ? May 5, 2017 15:47

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

Thanks for the feedback, guys. It ended up being that I had a poor understanding of JS (didn't know about the call stack) and my whole site was basically a pile race conditions. I ended up getting pretty much everything working once I learned some more about JS, though.

# ? May 6, 2017 00:29

Tei: Feb 19, 2011

Snak posted:

Thanks for the feedback, guys. It ended up being that I had a poor understanding of JS (didn't know about the call stack) and my whole site was basically a pile race conditions. I ended up getting pretty much everything working once I learned some more about JS, though.

Thats not a small feat. Congrats. Javascript is a vile language. Kind of fun and wild.

# ? May 6, 2017 01:14

Snak: Oct 10, 2005; I myself will carry you to the Gates of Valhalla...
You will ride eternal,
shiny and chrome.; Grimey Drawer

Tei posted:

Thats not a small feat. Congrats. Javascript is a vile language. Kind of fun and wild.

It was for a school project and the whole design of it was really awkward, since I had to work backwards from the requirements.

Like I had to use php, js, jquery, jqueryUI, ajax, have multiple photos, have embedded video, have a login system, etc.

So rather than starting with a goal of what I wanted to implement and just using what I needed, I had to come up with a goal of what to implement where I could make sure I used all these things, even if I didn't need them.

JS doesn't really seem that bad, and jquery seems pretty useful, but jQuery UI seems like the worst loving thing ever, and despite its complexity, it seems to lack a lot of basic features that it would make sense to have. And it's constantly evolving, so features that used to work or exist no longer exist.

# ? May 6, 2017 01:21

Tei: Feb 19, 2011

jquery is a small piece of art, because it allows to write code that in essence is complex and powerful, but use few lines of code and these lines of code are easy to understand (once you know how to think in a jquery way).

Too bad jquery is in the way out. The future is things like ReactJS and Angular. The futuuuuure.

I don't think anybody uses jquery-ui. To make a datepicker maybe? or if you uses something like jquery-mobile. Is a boring toolset. I don't know, I am not much into that.

Tei fucked around with this message at 01:56 on May 6, 2017

# ? May 6, 2017 01:53

Dominoes: Sep 20, 2007

Tei posted:

I don't think anybody uses jquery-ui. To make a datepicker maybe?

Yep! What I use it for. TBH I'm surprised standard widgets for dates and times aren't common in backend frameworks and browsers.

Snak - congrats! Web programming is challenging because you have to understand many tools, and how they interact.

Dominoes fucked around with this message at 11:11 on May 6, 2017

# ? May 6, 2017 10:39

Dominoes: Sep 20, 2007

Hey - I'm at a loss about how to solve this server/proxy problem. I don't expect anyone to be able to help due to its nature, but worth a shot.

I have a Heroku/Django website I'm trying to get working at work; a very large organisation behind a proxy. The site appears unblocked, and the HTTP/non-secure site works fine at work. The secure site works fine on normal computers (ie not at work). Something is wrong with the way the SSL interacts with the Proxy. The work IT guys are not v technically-savvy, but were able to produce this message when I asked why it wasn't working:

quote:

An error occurred during a connection to scheduletrain.herokuapp.com. SSL received a record that exceeded the maximum permissible length. Error code: SSL_ERROR_RX_RECORD_TOO_LONG. The page you are trying to view cannot be shown because the authenticity of the received data could not be verified. Please contact the website owners to inform them of this problem.

Searching for this error online leads to various issues about server config and proxy problems, but I can't sort out a solution. Based on these results, it sounds like error description is misleading/masking something else. Any idea? HTTPS site works on normal computers, but not behind the work proxy. HTTP site works everywhere. I have two very similar websites that don't trigger this problem, and AFAIK, are configured the same way. Baffled.

Dominoes fucked around with this message at 14:18 on May 6, 2017

# ? May 6, 2017 14:13

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

Dominoes posted:

Yep! What I use it for. TBH I'm surprised standard widgets for dates and times aren't common in backend frameworks and browsers.

With Firefox 57 hopefully they'll be common enough for most people.
macOS Safari :argh:

# ? May 6, 2017 14:28

Dominoes: Sep 20, 2007

I was pleasantly surprised after switching to Chrome,that it has basic built-in time handling, while Firefox treats it as a text field. Gave me a 'WTF Mozilla??' moment.

Dominoes fucked around with this message at 14:48 on May 6, 2017

# ? May 6, 2017 14:45

Tei: Feb 19, 2011

Yea but, until "all" browsers support a feature in the same way, you can't use it.

Good datepickers, phonepickers, emailpickets.... they are going to be everywhere, but at this moment you can't make a datepicker have a style in one browser and a completelly different one in other, so you have to do something like use the jquery-ui datepicker everywhere, even on browsers that have native support for a good datepicker.

# ? May 6, 2017 16:23

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

The date picker situation is ridiculous after all this time.

# ? May 6, 2017 16:36

Dominoes: Sep 20, 2007

Thermopyle posted:

The date picker situation is ridiculous after all this time.

I feel like it should be handled natively by browsers, but Django having date/time pickers on their admin page, but not exposed for general use is another WTF.

# ? May 6, 2017 16:41

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

Dominoes posted:

I feel like it should be handled natively by browsers, but Django having date/time pickers on their admin page, but not exposed for general use is another WTF.

A hearty "yes!" on both of those things.

# ? May 6, 2017 16:43

FAGGY CLAUSE: Apr 9, 2011; by FactsAreUseless

I hope this is a good place to look for a little advice on the direction I'm going in. I'm not a web developer - but I'm a pretty good coder. Typically I do analytics and machine learning applications in R and Python. I'm trying to help out this team at work build a user friendly business case application. Essentially it became too difficult to maintain in Excel, so I thought I'd clean up the interface with some sort of web app and I'd just program up all the calculations (already coded the business logic in Python).

Right now I'm using web2py, just because it looked like it'd be easy to get something up and running, but there's not a lot of people using it and I'm wondering if it's worth using this framework at all (for whatever reason I'm not really liking it so far). My requirements are that I need some sort of built in database (sqlite for the moment), and I'd have to be able to deploy this as a standalone application. I used to be pretty proficient in C/C++ so JavaScript seems pretty easy to pick up.

Can anyone recommend a different approach outside of using a heavy framework like Web2py/Django? I've also started experimenting with different JS libraries, but there are so many directions to go in. Electron looks interesting. I've also been refreshing my HTML and CSS skills (getting comfortable with bootstrap and jQuery, etc.) Most of the calculations I'm doing with the app involve letting the user pick a starting value, and then generating a time series based off of date inputs, then combining these series as different costs, then grouping them together to track benefits over time.

# ? May 6, 2017 16:45

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

FAGGY CLAUSE posted:

Can anyone recommend a different approach outside of using a heavy framework like Web2py/Django?

Maybe Flask will be what you're looking for? Django is what I normally recommend because 90% of the time there's not really any cost to its batteries-included philosophy other than a larger upfront time investment in learning it, which is offset by not having to wire together a dozen different libraries to get your application working like you want.

However, if you're dead-set against Django then Flask is also good.

# ? May 6, 2017 16:50

Adbot: ADBOT LOVES YOU

# ? May 31, 2024 14:28

FAGGY CLAUSE: Apr 9, 2011; by FactsAreUseless

I'll take another look at Django - as long as I can figure out a way to package up my app to run in a standalone fashion, that'd work.

# ? May 6, 2017 16:57

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›362 »