The Web Design & Development Megathread

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

«‹›362 »

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.

Rand Ecliptic posted:

I posted this in the JavaScript thread, but this might be a more appropriate place:

I'm new to programming and for my class we're using Moment.js and Firebase to create a train scheduler (seems to be a fairly common project). The user is supposed to enter data on when the first train departs and the frequency of the train's arrival and Moment.js should calculate when the next train will arrive and how many minutes away it is.

My code isn't working however. The calculated data isn't appending properly into the table. Can anyone take a look and see what the problem is for me? It would be much appreciated.

Link to the GitHub repository: https://github.com/PaulKlein22/train-schedule

Many thanks in advance.

here is a jsfiddle with your code https://jsfiddle.net/njzbghrL/

when in the browser, you have to be careful about variable names. in function(snapshot).., you reference "frequency" without defining it in the scope of the function. in the browser, say you have an element with an id of "element1." If you just type "element1" in the browser, and there is no other variable declared in the scope, the return value is going to be the element! (you don't actually have to do document.getElementById to get an element by id, you can just refer to elements by typing their ids straight up in the console.) since you didn't declare the "frequency" variable, and you have an html control with an id of "frequency" in the dom, instead of the value of the control, it's actually picking up the reference to the input element itself. then when you apply the modulus operator, it turns into not a number, and it all goes to hell.

to fix it, add

code:

var frequency = snapshot.val().frequency;

in the top of that method.

# ? Oct 18, 2018 04:10

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 19:35

Rand Ecliptic: May 23, 2003; Jesus Saves! - And Takes Half Damage!!

Nice! I totally see now that I didn't define frequency within the scope of the function. Doing so basically seems to fix the issues I was having.

Now I just want to make the output for the Next Arrival column prettier, but otherwise it seems to be working. Thanks again!!

# ? Oct 18, 2018 04:41

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

"Hmm, I don't like the way that table header looks - I'll just inspect it and mess with the CSS real quick... gosh that's taking a while to render! Wonder how many elements it's dealing with."

code:

> document.getElementsByTagName('td').length
< 282775

oh... OK then"

# ? Oct 18, 2018 19:35

PT6A: Jan 5, 2006; Public school teachers are callous dictators who won't lift a finger to stop children from peeing in my plane

Munkeymon posted:

"Hmm, I don't like the way that table header looks - I'll just inspect it and mess with the CSS real quick... gosh that's taking a while to render! Wonder how many elements it's dealing with."
code:
> document.getElementsByTagName('td').length
< 282775
" oh... OK then"

If you have a better way of laying out a website than using hundreds of thousands of table cells, I'd like to hear it! :downs:

# ? Oct 19, 2018 20:54

McGlockenshire: Dec 16, 2005; GOLLOCKS!

PT6A posted:

If you have a better way of laying out a website than using hundreds of thousands of table cells, I'd like to hear it!

Hundreds of thousands of divs and the display: table family :colbert:

Related, CSS grids are loving awesome to work with and everyone should check them out. Throw in media selectors and the ability to just put arbitrary grid elements in arbitrary places, and you can almost get away with not using a dedicated mobile-first CSS framework.

# ? Oct 19, 2018 21:05

Tei: Feb 19, 2011; Can't post for 24 hours!

I imagine theres some poor bastard in Google, whos only job is to receive horrible designed pages that don't render correctly in Chrome, and find what changes in the engine would allow the seriously broken page to display correctly.

Because browsers do a amazing job at being able to render the poo poo people thrown at them.

Another job that has to suck, is the work of people programming Google Docs that have to make it render correctly in Edge. Oh boy. Finding new bugs every day, peeling layer per layer the bullshit that is the Trident.

My job suck, but I am not these people, so I am that going for me.

Tei fucked around with this message at 21:20 on Oct 19, 2018

# ? Oct 19, 2018 21:18

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

Tei posted:

I imagine theres some poor bastard in Google, whos only job is to receive horrible designed pages that don't render correctly in Chrome, and find what changes in the engine would allow the seriously broken page to display correctly.

Because browsers do a amazing job at being able to render the poo poo people thrown at them.

Another job that has to suck, is the work of people programming Google Docs that have to make it render correctly in Edge. Oh boy. Finding new bugs every day, peeling layer per layer the bullshit that is the Trident.

My job suck, but I am not these people, so I am that going for me.

Every job that touches Web Development in some way sucks. :smith:

# ? Oct 19, 2018 22:16

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

McGlockenshire posted:

Hundreds of thousands of divs and the display: table family

Related, CSS grids are loving awesome to work with and everyone should check them out. Throw in media selectors and the ability to just put arbitrary grid elements in arbitrary places, and you can almost get away with not using a dedicated mobile-first CSS framework.

I've been developing my own pseudo framework for years, just a base template and responsive stuff. I've been redoing it as a mobile-first template the past few days, and I've been wondering if I should just use Bootstrap. I've been using my own code for three years now (and been in web design for ten) so adjusting to Bootstrap might have more trouble if I'm already familiar with what to do, or no? I like the grid system though, I might adapt that if anything.

I've also been hesitant to try CSS grids, but I guess they have enough support now. I just discovered the wonder of flexbox this year!

# ? Oct 19, 2018 23:12

22 Eargesplitten: Oct 10, 2010

McGlockenshire posted:

Hundreds of thousands of divs and the display: table family

Related, CSS grids are loving awesome to work with and everyone should check them out. Throw in media selectors and the ability to just put arbitrary grid elements in arbitrary places, and you can almost get away with not using a dedicated mobile-first CSS framework.

Actually one question I came here to ask is related to grids: How do you choose between grid and flexbox? I feel like there's a time for one and a time for the other, but I don't know which is which. I know I read that grid is better if you're going to be nesting a lot of stuff rather than making a bunch of flex items their own flex containers, but that's it.

Also, if I've got a banner up top using fixed position so it stays up top when I scroll, is there a way other than just putting in a top margin on the first item in flow or is that it? I feel like that's kind of hacky, but on the other hand it seems like a lot of CSS is still hacky.

Sorry if these are obvious questions, I'm learning as I go and it seems like some of the Lynda videos I watched don't match current best practices.

# ? Oct 20, 2018 21:55

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

22 Eargesplitten posted:

Actually one question I came here to ask is related to grids: How do you choose between grid and flexbox? I feel like there's a time for one and a time for the other, but I don't know which is which. I know I read that grid is better if you're going to be nesting a lot of stuff rather than making a bunch of flex items their own flex containers, but that's it.

Also, if I've got a banner up top using fixed position so it stays up top when I scroll, is there a way other than just putting in a top margin on the first item in flow or is that it? I feel like that's kind of hacky, but on the other hand it seems like a lot of CSS is still hacky.

Sorry if these are obvious questions, I'm learning as I go and it seems like some of the Lynda videos I watched don't match current best practices.

A rough idea would be flexbox for elements in one dimension (either horizontal or vertical, with optional wrapping) and grid is aligning in two dimensions at once.

For the banner, you could try
position:sticky, but its browser support isn't 100% and requires prefixing.

# ? Oct 21, 2018 02:23

McGlockenshire: Dec 16, 2005; GOLLOCKS!

Flexbox is great at juggling around actual content. It's great when you might not be able to predict the contents of your sections.

Grid is great at dividing things into sections and aligning them accordingly. It's great when you know exactly how each piece in the container should go.

If I was going to recreate this forum thread, I'd have each post be a grid (username section on the left, right divided into content on the top and controls on the bottom), but those posts might end up living inside a flexbox at the top level depending on how funny I have to get with mobile layout.

Different tools for different purposes.

McGlockenshire fucked around with this message at 03:49 on Oct 21, 2018

# ? Oct 21, 2018 03:43

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

Flexbox for everything, margin to keep the content from under the fixed header. I have yet to find a use for grids, but that is almost certainly due to the fact that I develop web apps, not content driven sites.

# ? Oct 21, 2018 06:31

kedo: Nov 27, 2007

I�m also still using flexbox for everything. It�s baked into my personal framework and it has fairly good support back to IE10, which is as far back as I go. I imagine I�ll switch to grid at some point in the next year or so.

# ? Oct 21, 2018 14:47

Nude: Nov 16, 2014; I have no idea what I'm doing.

Hello, so I have some confusion on good web practices. Right now I have a layout I like set up (and can be set up) in just html and css. The annoyance I have is if I want to add anything to the layout I have to copy and paste a bunch of divs and update the url/text info.

So I looked into javascript and it seems like it has support for html editing. Great I thought, but then I hear about this "incremental design" theory. I desperately want to avoid tediously editing one huge .html file. One solution I thought of is just creating a shell script that reads from some .json and creates the html file for me. Another was to do the same but in javascript. But I have no clue if this is an "acceptable" way to go about this.

For those curious I'm trying to do something like:

HTML code:

  <div class="leftcolumn">
    <div class="card">
      <img src="./image1.jpg" alt="Image not loaded"">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Image 1 Info</h2>
      <p>Some text about the image 1</p>
    </div>
  </div>
  <div class="leftcolumn">
    <div class="card">
      <img src="./image2.jpg" alt="Image not loaded"">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Image 2 Info</h2>
      <p>Some text about the image 2</p>
    </div>
  </div>

Which in an ideal world would somehow be able to become this:

HTML code:

<div class="foo" url="./image1.jpg" info="Image 1 Info" text="Some text about the Image 1">
<div class="foo" url="./image2.jpg" info="Image 2 Info" text="Some text about the Image 2">

But the only way I can think of achieve the above is through javascript (in which case I would take it a step further and read from a .json), or create the page using a shell script. Just wondering if either of these are acceptable to solutions to the problem (there is a lot of images that will appear on one page, about 30-40).

ps. I'm very new to web programming in general.

# ? Oct 22, 2018 00:05

my bony fealty: Oct 1, 2008

kedo posted:

I’m also still using flexbox for everything. It’s baked into my personal framework and it has fairly good support back to IE10, which is as far back as I go. I imagine I’ll switch to grid at some point in the next year or so.

I was hesitant to switch to grid and used flexbox for everything but then I tried grid and was sold immediately. It's so good and using grid and flexbox together feels like the promised land of CSS layout.

I haven't had the need to use a layout framework/pre-made grid since, it rules. Everything for me now is grid with a flexbox fallback to support IE11.

The only part of grid I've found that isn't as nice as flexbox is reversing order, it's certainly possible but not as obvious as row-reverse. Unless I'm missing something maybe?

I'll say again that grid and flexbox work really well together, can't be overstated.

# ? Oct 22, 2018 00:43

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.

Nude posted:

Hello, so I have some confusion on good web practices. Right now I have a layout I like set up (and can be set up) in just html and css. The annoyance I have is if I want to add anything to the layout I have to copy and paste a bunch of divs and update the url/text info.

So I looked into javascript and it seems like it has support for html editing. Great I thought, but then I hear about this "incremental design" theory. I desperately want to avoid tediously editing one huge .html file. One solution I thought of is just creating a shell script that reads from some .json and creates the html file for me. Another was to do the same but in javascript. But I have no clue if this is an "acceptable" way to go about this.

For those curious I'm trying to do something like:
HTML code:
  <div class="leftcolumn">
    <div class="card">
      <img src="./image1.jpg" alt="Image not loaded"">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Image 1 Info</h2>
      <p>Some text about the image 1</p>
    </div>
  </div>
  <div class="leftcolumn">
    <div class="card">
      <img src="./image2.jpg" alt="Image not loaded"">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Image 2 Info</h2>
      <p>Some text about the image 2</p>
    </div>
  </div>
Which in an ideal world would somehow be able to become this:
HTML code:
<div class="foo" url="./image1.jpg" info="Image 1 Info" text="Some text about the Image 1">
<div class="foo" url="./image2.jpg" info="Image 2 Info" text="Some text about the Image 2">
But the only way I can think of achieve the above is through javascript (in which case I would take it a step further and read from a .json), or create the page using a shell script. Just wondering if either of these are acceptable to solutions to the problem (there is a lot of images that will appear on one page, about 30-40).

ps. I'm very new to web programming in general.

What you're looking for is called a web template engine, which basically lets you manipulate HTML-like views with a little more flexibility in the view end.

Angular, C# Razor, React etc. are all feature templating engines.

e.g.
C# Razor will let you do something like

code:

@model IEnumerable<MyPhotoLibrary.Models.Photo>
<table>
 @foreach (var item in Model) {
 <tr>
    <td>
        <img src="@Url.Content(item.ImageFile)" alt="" />
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Caption)
    </td>
 </tr>
 }
</table>

Angular will let you do something like:

code:

<div *ngFor="let i of numArr">
  <ngui-in-view>
    <img *ngIf src="https://picsum.photos/800/300?image={{i}}>
  </ngui-in-view>
</div>

They can be implemented server/client side, but they basically deal with a problem like yours with a lot less jiggery-pokery than shell scripts or making everything in client js.

# ? Oct 22, 2018 01:01

Nude: Nov 16, 2014; I have no idea what I'm doing.

Bruegels Fuckbooks posted:

What you're looking for is called a web template engine, which basically lets you manipulate HTML-like views with a little more flexibility in the view end.

Angular, C# Razor, React etc. are all feature templating engines.

They can be implemented server/client side, but they basically deal with a problem like yours with a lot less jiggery-pokery than shell scripts or making everything in client js.

Thank you that's exactly what I was looking for. I knew there had to be something as I couldn't imagine devs manually doing this for large scale projects. Funny enough I was one word off I kept searching how to do templates in html and getting stock html templates :v:

.

My last question is cache wise. As I understand it to "force" reload cache of .css/image files you have to rename the file. But do I have to worry about the possibility of html "tags" caching? Like if I change <p>hi</p> to <p>bye<p>. Or is a good rule of thumb: anything outside a html file will be cache but never the .html file itself?

# ? Oct 22, 2018 04:00

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.

Nude posted:

Thank you that's exactly what I was looking for. I knew there had to be something as I couldn't imagine devs manually doing this for large scale projects. Funny enough I was one word off I kept searching how to do templates in html and getting stock html templates .

My last question is cache wise. As I understand it to "force" reload cache of .css/image files you have to rename the file. But do I have to worry about the possibility of html "tags" caching? Like if I change <p>hi</p> to <p>bye<p>. Or is a good rule of thumb: anything outside a html file will be cache but never the .html file itself?

Caching behavior with web servers is controlled by the response header. The behavior you are experiencing is what happens with the out-of-the-box cache behavior of whatever you're using as your web server (generally, html pages aren't cached in the web browser using the default settings). You can usually control this with configuration settings for your web server or just writing code to return the appropriate cache control directives.

# ? Oct 22, 2018 04:37

susan b buffering: Nov 14, 2016

Nude posted:

Hello, so I have some confusion on good web practices. Right now I have a layout I like set up (and can be set up) in just html and css. The annoyance I have is if I want to add anything to the layout I have to copy and paste a bunch of divs and update the url/text info.

So I looked into javascript and it seems like it has support for html editing. Great I thought, but then I hear about this "incremental design" theory. I desperately want to avoid tediously editing one huge .html file. One solution I thought of is just creating a shell script that reads from some .json and creates the html file for me. Another was to do the same but in javascript. But I have no clue if this is an "acceptable" way to go about this.

For those curious I'm trying to do something like:
HTML code:
  <div class="leftcolumn">
    <div class="card">
      <img src="./image1.jpg" alt="Image not loaded"">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Image 1 Info</h2>
      <p>Some text about the image 1</p>
    </div>
  </div>
  <div class="leftcolumn">
    <div class="card">
      <img src="./image2.jpg" alt="Image not loaded"">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Image 2 Info</h2>
      <p>Some text about the image 2</p>
    </div>
  </div>
Which in an ideal world would somehow be able to become this:
HTML code:
<div class="foo" url="./image1.jpg" info="Image 1 Info" text="Some text about the Image 1">
<div class="foo" url="./image2.jpg" info="Image 2 Info" text="Some text about the Image 2">
But the only way I can think of achieve the above is through javascript (in which case I would take it a step further and read from a .json), or create the page using a shell script. Just wondering if either of these are acceptable to solutions to the problem (there is a lot of images that will appear on one page, about 30-40).

ps. I'm very new to web programming in general.

Javascript is one way to do this, but if you�re just generating static content then I might recommend Python3.6+ with f-strings. Wrote a small script the other day and it was nice just being able to interpolate variables and functions into a string without having to fuss with a full on templating engine.

# ? Oct 22, 2018 13:46

Tei: Feb 19, 2011; Can't post for 24 hours!

Good practices:

Don't do in HTML what you can do in HTTP.
Don't do in Javascript what you can do in HTML.
Don't make the user do what you can do in Javascript.

Theres a good exception for good reasons. Javascript templates save a lot of effort writing applications. It also result on faster applications. Doing templates clientside actually break the good practices, but I have seen the same poo poo done with other ways, and with clientside templates, and clientside templates are a better way to do it.

If you website is very static, and the dynamic content is something like news. You can get away with templates done serverside, and follow the good practices.
But if you website is some panel control for very dynamic data, client templates are a winner, imho.

If you are using clientside templates, you are also using JSON, so you have separated data and presentation to a great level. And thats a good thing.

# ? Oct 22, 2018 14:21

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

PT6A posted:

If you have a better way of laying out a website than using hundreds of thousands of table cells, I'd like to hear it!

It's legitimately tabular data because it was basically designed by internal users used to doing everything in a spreadsheet. There's just a lot of data and I'm not windowing it in any way yet.

Tei posted:

Another job that has to suck, is the work of people programming Google Docs that have to make it render correctly in Edge. Oh boy. Finding new bugs every day, peeling layer per layer the bullshit that is the Trident.

Edge is not Trident.

# ? Oct 22, 2018 14:36

Tei: Feb 19, 2011; Can't post for 24 hours!

Munkeymon posted:

Edge is not Trident.

Is a fork of Trident.

But you are right that is dishonest on my part to call it trident.

# ? Oct 22, 2018 15:46

Nude: Nov 16, 2014; I have no idea what I'm doing.

Bruegels Fuckbooks posted:

Caching behavior with web servers is controlled by the response header. The behavior you are experiencing is what happens with the out-of-the-box cache behavior of whatever you're using as your web server (generally, html pages aren't cached in the web browser using the default settings). You can usually control this with configuration settings for your web server or just writing code to return the appropriate cache control directives.

Gotcha interesting. I'll read up on this.

Thank you guys for the info, I really appreciate it. It's nice to get some straight answers than bumbling around on google. So I decided on using a template system with python (https://github.com/noahmorrison/chevron) only because setup wise I seem to understand it. So my plan of attack is to follow the format and run the code to generate the html pages. Now while the website isn't static, the dynamic content would be me uploading an image here or there. A quick update to the json file and running the build script doesn't seem too painful. I'm doing this all through my computer and then just transferring the files through ftp.

Tei posted:

Good practices:

Don't do in HTML what you can do in HTTP.
Don't do in Javascript what you can do in HTML.
Don't make the user do what you can do in Javascript.

Theres a good exception for good reasons. Javascript templates save a lot of effort writing applications. It also result on faster applications. Doing templates clientside actually break the good practices, but I have seen the same poo poo done with other ways, and with clientside templates, and clientside templates are a better way to do it.

If you website is very static, and the dynamic content is something like news. You can get away with templates done serverside, and follow the good practices.
But if you website is some panel control for very dynamic data, client templates are a winner, imho.

If you are using clientside templates, you are also using JSON, so you have separated data and presentation to a great level. And thats a good thing.

Clientside template is tempting only because it's a more direct update. I'm not sure how much of a con of having a website require javascript is, seems to be a debated topic. My site fits your description though, it's a static site and the only dynamic part about it is me putting in info (news/images).

Nude fucked around with this message at 18:41 on Oct 22, 2018

# ? Oct 22, 2018 18:39

Tei: Feb 19, 2011; Can't post for 24 hours!

Nude posted:

Clientside template is tempting only because it's a more direct update. I'm not sure how much of a con of having a website require javascript is, seems to be a debated topic. My site fits your description though, it's a static site and the only dynamic part about it is me putting in info (news/images).

I am not sure why you asked for "good practices". The only thing you need to avoid for a personal site is to create a abomination with absurd maintenance cost. Everything else is Ok.

A alternative to create your website is to use a blog software, such has drupal or wordpress. These can be convinced to render something like a "news section". I am not a expert but I offer you a alternative to Write Code. Writing Code is a bad idea when theres Code Already Written around.

# ? Oct 22, 2018 18:59

The Fool: Oct 16, 2003

Tei posted:

Writing Code is a bad idea when theres Code Already Written around.

# ? Oct 22, 2018 19:12

22 Eargesplitten: Oct 10, 2010

Very apropos to this topic: for a new person should I be learning to write my own version of poo poo that�s already in libraries or should I be just using the library functions?

For example, in my CS classes in college we learned how to write a bunch of sorts, and then the teacher told us �there�s a quicksort function in the Java standard library, just use that.� The point was so that we would know how it was working rather than just being a black box.

At this point I know next to no JS and should probably go back through the courses I already took because obviously they didn�t stick. What I�m wondering is if I should learn how to build an email contact form myself or just find a Jquery pre-built option. I feel like I should learn it myself but I don�t know if I�m just making things unnecessarily difficult for myself. That�s something I�m prone to doing unconsciously.

(Yes, The Fool, I�m just doing the MVP right now, which is taking a long time because I�m bad at this).

# ? Oct 22, 2018 20:17

The Fool: Oct 16, 2003

22 Eargesplitten posted:

Very apropos to this topic: for a new person should I be learning to write my own version of poo poo that�s already in libraries or should I be just using the library functions?

For example, in my CS classes in college we learned how to write a bunch of sorts, and then the teacher told us �there�s a quicksort function in the Java standard library, just use that.� The point was so that we would know how it was working rather than just being a black box.

I feel like it is worth knowing the theory behind a thing, but you don't necessarily need to be able to reproduce in on command. Most libraries are used because the library in question has a good enough implementation of a given thing and you would have to be doing something very specific in order for it to be worthwhile to make your own implementation.

quote:

At this point I know next to no JS and should probably go back through the courses I already took because obviously they didn�t stick. What I�m wondering is if I should learn how to build an email contact form myself or just find a Jquery pre-built option. I feel like I should learn it myself but I don�t know if I�m just making things unnecessarily difficult for myself. That�s something I�m prone to doing unconsciously.

I feel like you might benefit from checking out https://www.freecodecamp.com

quote:

(Yes, The Fool, I�m just doing the MVP right now, which is taking a long time because I�m bad at this).

lol

# ? Oct 22, 2018 20:28

22 Eargesplitten: Oct 10, 2010

The code camp thing seems like a good idea. I�ve been doing Lynda videos, but I feel like I end up getting distracted and missing stuff. It�s also hard to go back and find one specific thing sometimes. Having a big community to work with sounds good too. And non-profit work could be good for a resume/portfolio. I mean, on top of being good for the world.

# ? Oct 22, 2018 20:44

The Fool: Oct 16, 2003

I like recommending freecodecamp because all of their courses are interactive and end with a capstone project that you need to be able to complete on your own. They also have a fairly active community that is always willing to critique a project or answer questions.

# ? Oct 22, 2018 20:52

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.

22 Eargesplitten posted:

Very apropos to this topic: for a new person should I be learning to write my own version of poo poo that�s already in libraries or should I be just using the library functions?

For example, in my CS classes in college we learned how to write a bunch of sorts, and then the teacher told us �there�s a quicksort function in the Java standard library, just use that.� The point was so that we would know how it was working rather than just being a black box.

At this point I know next to no JS and should probably go back through the courses I already took because obviously they didn�t stick. What I�m wondering is if I should learn how to build an email contact form myself or just find a Jquery pre-built option. I feel like I should learn it myself but I don�t know if I�m just making things unnecessarily difficult for myself. That�s something I�m prone to doing unconsciously.

(Yes, The Fool, I�m just doing the MVP right now, which is taking a long time because I�m bad at this).

if you use existing libraries, you will find out they suck and don't work as they expect and are buggy as poo poo, and have tons of boilerplate code that is irrelevant to the problem you're trying to solve. people who write libraries also like to make their library depend on other libraries, and eventually you'll end up having to pull in hundreds of projects just to build. you will spend all your time trying to reconcile updated versions of poo poo and debugging other people's code. oh, and then the maintainer of the project will decide that it's boring to maintain and stop doing so, and any new problems are your problem. also, jquery is terrible and everything that uses jquery is also terrible and most web developers suck.

if you write code from scratch, you won't have considered all the corner cases. it'll be vulnerable to xss scripting, css injection exploits, it'll gently caress up http/https - and it'll be all your fault. there are problems that you haven't even considered or don't even know exist yet that angular and react solve.

i think the key is to
a) get good at looking at libraries and figuring out if they're any good.
b) don't just slam a library into a project to solve a problem, make a small project that uses it and test it out to see if it's good.
c) don't be afraid of angular/react/typescript/all the new poo poo - if you're going to start from scratch, you might as well learn the new things first and work back to the old terrible poo poo.

# ? Oct 22, 2018 21:05

Tei: Feb 19, 2011; Can't post for 24 hours!

22 Eargesplitten posted:

Very apropos to this topic: for a new person should I be learning to write my own version of poo poo that�s already in libraries or should I be just using the library functions?

For example, in my CS classes in college we learned how to write a bunch of sorts, and then the teacher told us �there�s a quicksort function in the Java standard library, just use that.� The point was so that we would know how it was working rather than just being a black box.

Any opinion I may have is rendered moot point, since if they are asking for it, you must follow.

I do think is useful. But not the way you think. And maybe even different than many people here.

I think quicksort itself is unimportant, but may help to understand system programming. System programing teach lessons on building architecture. And the bigger you design software systems, the more you have to think about the architecture, and choose a good architecture. One day you become a software architect.

# ? Oct 22, 2018 21:15

Tei: Feb 19, 2011; Can't post for 24 hours!

[check notes] fat building blocks

# ? Oct 22, 2018 21:16

22 Eargesplitten: Oct 10, 2010

Bruegels Fuckbooks posted:

if you use existing libraries, you will find out they suck and don't work as they expect and are buggy as poo poo, and have tons of boilerplate code that is irrelevant to the problem you're trying to solve. people who write libraries also like to make their library depend on other libraries, and eventually you'll end up having to pull in hundreds of projects just to build. you will spend all your time trying to reconcile updated versions of poo poo and debugging other people's code. oh, and then the maintainer of the project will decide that it's boring to maintain and stop doing so, and any new problems are your problem. also, jquery is terrible and everything that uses jquery is also terrible and most web developers suck.

if you write code from scratch, you won't have considered all the corner cases. it'll be vulnerable to xss scripting, css injection exploits, it'll gently caress up http/https - and it'll be all your fault. there are problems that you haven't even considered or don't even know exist yet that angular and react solve.

i think the key is to
a) get good at looking at libraries and figuring out if they're any good.
b) don't just slam a library into a project to solve a problem, make a small project that uses it and test it out to see if it's good.
c) don't be afraid of angular/react/typescript/all the new poo poo - if you're going to start from scratch, you might as well learn the new things first and work back to the old terrible poo poo.

Thanks, I am interested in Angular but I feel like I don�t know enough to understand it yet. Like I need to know more about how JS works to know how Angular and Typescript work.

I want to learn about Node and Angular and Express and MongoDB and all that but I feel like I don�t have the foundational knowledge to do anything but cargo cult it right now.

E: the teacher thing was years ago, it was an example of how I learned in school.

# ? Oct 22, 2018 23:07

my bony fealty: Oct 1, 2008

22 Eargesplitten posted:

Thanks, I am interested in Angular but I feel like I don’t know enough to understand it yet. Like I need to know more about how JS works to know how Angular and Typescript work.

I want to learn about Node and Angular and Express and MongoDB and all that but I feel like I don’t have the foundational knowledge to do anything but cargo cult it right now.

E: the teacher thing was years ago, it was an example of how I learned in school.

You have the right attitude (learn JS good before dipping into big complicated frameworks) and I would strongly suggest you check out React first when you feel you're ready.

Almost everything you do in React is just JS plus JSX. Writing good React code will make you a better JS developer and vise-versa.

On the backend don't be afraid to do some Node and Express tutorials, it ain't bad to get a simple server up and running and will help you understand the HTTP cycle and such.

# ? Oct 23, 2018 01:11

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

22 Eargesplitten posted:

Thanks, I am interested in Angular but I feel like I don�t know enough to understand it yet. Like I need to know more about how JS works to know how Angular and Typescript work.

I want to learn about Node and Angular and Express and MongoDB and all that but I feel like I don�t have the foundational knowledge to do anything but cargo cult it right now.

E: the teacher thing was years ago, it was an example of how I learned in school.

Seconding not going to Angular first. You'll be learning Angular, not javascript. React is a great first go as mentioned, as it's on a little bit of framework and mostly JS.

# ? Oct 23, 2018 14:22

22 Eargesplitten: Oct 10, 2010

Thanks, I�ll keep that in mind.

I�ve been loving this free code camp thing, but the listed hours kind of intimate me. I�ve gotten through the first two sections of the first course in five hours, including some flipping between a game and coding, is 300 hours for each of ten courses realistic if I have some coding background? That would take an extremely long time to get through, and that�s even with how excited I�ve been.

# ? Oct 23, 2018 16:24

The Fool: Oct 16, 2003

22 Eargesplitten posted:

Thanks, I’ll keep that in mind.

I’ve been loving this free code camp thing, but the listed hours kind of intimate me. I’ve gotten through the first two sections of the first course in five hours, including some flipping between a game and coding, is 300 hours for each of ten courses realistic if I have some coding background? That would take an extremely long time to get through, and that’s even with how excited I’ve been.

IIRC, if you are going to go for the certificate, you only need to complete the projects.

If if you are not, you can look at the projects for each section and make a judgment call as to whether or not you feel confident about it. Be aware, the difficulty and complexity ramps up pretty quickly.

# ? Oct 23, 2018 18:14

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

Anyone use Gatsby? If so, if I do a gatsby site, can I just add a /someOther directory to it with completely separate html and css or will gatsby try to mess with it?

EDIT (many days later): The answer is you absolutely can add arbitrary directories and files as long as there is no name collisions with what gatsby produces.

Lumpy fucked around with this message at 16:19 on Oct 25, 2018

# ? Oct 24, 2018 18:52

LLSix: Jan 20, 2010; The real power behind countless overlords

code:

//helper function to return all the elements that permit user input
//will be used to automatically set focus on the first user input element for accessibility reasons 
function DF_getUserInputElements( source )
{
    return source.querySelectorAll(' \
    button:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , input:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , select:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , textarea:not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) \
    , [tabindex]:not([tabindex="-1"]):not([disabled]):not([readonly]):not([hidden]):not([type="hidden"])');
}

It really annoys me that I have to copy attribute filters to every element type I want querySelectorAll to return. There should be a way to tell vanilla Javascript to just use the same filter for all elements. Something like

code:

	return source.querySelectorAll(' \
		button, input, select, textarea, [tabindex]:not([tabindex="-1"], \
 		{ :not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) }');

# ? Oct 25, 2018 16:58

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 19:35

Tei: Feb 19, 2011; Can't post for 24 hours!

LLSix posted:

..
It really annoys me that I have to copy attribute filters to every element type I want querySelectorAll to return. There should be a way to tell vanilla Javascript to just use the same filter for all elements. Something like
code:
	return source.querySelectorAll(' \
		button, input, select, textarea, [tabindex]:not([tabindex="-1"], \
 		{ :not([disabled]):not([readonly]):not([hidden]):not([type="hidden"]) }');	

Could something like this be done with XPath?

( I don't know how XPath works, pretend the next code is the same thing you need )

code:

//input[(@type='text' or @type='password' or @type='file') and (@id='XXXX' or (not(@id) and @name='XXXX'))]

Maybe what is horrible of the original code is that is written by a human, and is not machine generated code. Look like a regex.
What if you don't have to look at it, because you hide it behind a string concatenation?, it may even make updating it easier if is changed often.

quote:

var filters = []
var enabled = "not([disabled]):not([readonly]):not([hidden]):not([type="hidden"])";
filters.push ( "button:" + enabled ).push(", ");
filters.push ( "select:" + enabled ).push(",");
filters.push ( "textarea:" + enabled ).push(",");
filters.push ( "button:" + enabled ).push(",");
");
filters.push ( '[tabindex]:not([tabindex="-1"]:' + enabled );

return source.querySelectorAll( filters.join() );

For such a tiny function, I would not change the code. But I am replying for the fun of it.

Tei fucked around with this message at 17:21 on Oct 25, 2018

# ? Oct 25, 2018 17:15

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

«‹›362 »