The Web Design & Development Megathread

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

«‹›361 »

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

Alpha Mayo posted:

Weird question. Haven't done web development in years, used to write PHP but that language got some problems and I want to get away from it. But I feel lost, so many different languages these days and not sure where to begin. I learned a lot of the front-end stuff last year, but back-end is a mystery to me and I haven't written anything in years. I learned some MVC frameworks with PHP but it just sounds gross to me now and I want something modern.

Someone mentioned Heroku in another thread, which looks interesting (and a lot to learn itself), but not sure what language to pair with it. Kind of leaning towards Python or Go, any thoughts?

And my project is mainly an educational one for me, I have an idea in mind of what I want to create (it's going to sound silly, but a simulated cryptocurrency, with a virtual PoW system - not real though). One thing is I actually want a process that runs 24/7 to simulate block discovery, with inputs from the web interface. Just sounds fun to me to learn cryptography and some other ideas I have. Have no idea what language is suited to something like this though.

If you still want to stay in the Web dev field, you should pick up some JavaScript. You can do your FakeCoin project in Node.js, and the experience will be unconditionally positive towards your resume. If you only want to focus on back, what Thermopyle said.

# ? Jan 25, 2018 16:58

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 13:11

grenada: Apr 20, 2013; Relax.

I didn't spend much time with Flask beyond the assignments in CS50, but as a beginner, I found Django to be very beginner friendly. You have to put in more time up front to learn the basics, but it pays dividends very quickly. The Mozilla Django tutorial is very, very good and breaks everything down into a logical progression.

# ? Jan 25, 2018 18:30

Alpha Mayo: Jan 15, 2007; hi how are you?
there was this racist piece of shit in your av so I fixed it
you're welcome
pay it forward~

Quite a few votes for Python, which I've always been interested in but never took the time to learn. I'll look into both Flask and Django and see what they both offer, thanks for the advice.

And yeah Node.js is on the list too, someday. If I could ever get into this full-time it would be high priority. But none of this is for resume building. I have no clue how to break into the field, my resume is 100% IT Support/computer toucher poo poo. And I am terrible with web design on the art/creativity side so can't really build much of a portfolio.

# ? Jan 25, 2018 21:55

Tei: Feb 19, 2011

I am writting a resource loader for modern websites.

This resource loader would create a method "requirejs" that I pass a file and it is queued to be loaded.

requirejs("js/file1.js");
requirejs("js/file2.js");
requirejs("js/file3.js");

This will load and execute file1, then file2, then file3.

My first version used localstorage. It looked good enough, but after reading some documentation about serviceWorkers I have read that how localstorage works, apparently reading from it is a heavy operation for the browser. Then on the same documents theres some talk about a cacheStorage object that most browsers support.

I am adapting my code to use cacheStorage instead of localstorage. The smart kids that push this technology, want to use it on serviceworkers, to be initiated by events.

Heres the experiment:
https://9lands.com/tk/loader.html

Something that I have found while building this experiment, is that I have two ways to force the browser to execute some code in the main scope. I could add a script and in this script node add a textnode with the code I want to execute. Or I could create a Blob object with the code, obtain the blob url, and use a script with this blob url has url. I don't see clear advantage to the Blob method. Maybe I should just eval(code) instead of adding it direcctly to the page. But that may break code designed to run in the window scope, maybe.

Anyway once my loader is finished. It will load and cache JS and CSS resources, and these will be available from disc instead of the network.

# ? Jan 26, 2018 14:20

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

Tei posted:

I am writting a resource loader for modern websites.

This resource loader would create a method "requirejs" that I pass a file and it is queued to be loaded.

requirejs("js/file1.js");
requirejs("js/file2.js");
requirejs("js/file3.js");

This will load and execute file1, then file2, then file3.

My first version used localstorage. It looked good enough, but after reading some documentation about serviceWorkers I have read that how localstorage works, apparently reading from it is a heavy operation for the browser. Then on the same documents theres some talk about a cacheStorage object that most browsers support.

I am adapting my code to use cacheStorage instead of localstorage. The smart kids that push this technology, want to use it on serviceworkers, to be initiated by events.

Heres the experiment:
https://9lands.com/tk/loader.html

Something that I have found while building this experiment, is that I have two ways to force the browser to execute some code in the main scope. I could add a script and in this script node add a textnode with the code I want to execute. Or I could create a Blob object with the code, obtain the blob url, and use a script with this blob url has url. I don't see clear advantage to the Blob method. Maybe I should just eval(code) instead of adding it direcctly to the page. But that may break code designed to run in the window scope, maybe.

Anyway once my loader is finished. It will load and cache JS and CSS resources, and these will be available from disc instead of the network.

You do know there is a fairly OLD loader called RequireJS, right?

# ? Jan 26, 2018 15:36

Main Paineframe: Oct 27, 2010

Thanks for the suggestions, but I guess I wasn't clear about my question. It wasn't Jasmine that I wanted to replace, it's Karma, a test server. I'm trying to configure it to monitor my files and automatically run Jasmine tests when the source files change, but I can't get it to run my Jasmine tests at all right now. Though I guess that might be more of a continuous integration question? My problem is that doing anything useful with Karma seems to require messing with a whole pile of barely-documented plugins, and either it's loading them in the wrong order or one of them flat-out isn't loading right. I don't know who the hell thought that "npm install karma jasmine-core karma-jasmine karma-jquery karma-jasmine-jquery" was the starting point for a good idea.

# ? Jan 26, 2018 18:48

Alpha Mayo: Jan 15, 2007; hi how are you?
there was this racist piece of shit in your av so I fixed it
you're welcome
pay it forward~

Also should I stick to learning Python fundamentals first or can I jump right in to frameworks? Sometimes that can be bad practice with other languages.

# ? Jan 27, 2018 05:43

PantsBandit: Oct 26, 2007; it is both a monkey and a boombox

Hey guys, I am VERY fresh with html, but I find it really fascinating so far.

I was looking at the source for a webpage and noticed a link to a jquery script. The script in question was extremely complex, so I'm assuming the web dev didn't put it together.

So I guess my question is: where did he find that script and how are scripts like that implemented?

# ? Jan 27, 2018 06:46

Duct Tape: Sep 30, 2004; Huh?

Posted this on StackOverflow the other day and haven't gotten a response. Anyone have any clue how to solve this: Using (column-span:all) after (break-after:always) introduces huge gap. Why? and the associated jsfiddle https://jsfiddle.net/1jtogaLg/.
Note that the only browser I care about is Chrome. If it works in other browsers that's nice, but Chrome is the target.

Screenshot of the jsfiddle. Note that the first box is using column-count:2, and the second box is using column-count:3 (higher column count causes smaller gap for whatever reason). The third box is what I'm trying to do, but I want to be able to do it without using any absolute positioning, since the content I'm rendering is dynamic.

As I mention in the StackOverflow, the code boils down to this:

code:

<div class="page">
  <p>a</p>
  <div class="break"></div>
  <p>b</p>
  <p class="stretch">Why is this so far down</p>
</div>
<style>
  .page {
    width: 200px;
    height: 200px;
    background-color: #FFF8DC;
    border: 1px solid #E0DCBF;
    margin-right: 5px;
    column-count: 3;
    -webkit-column-count: 3;
    column-fill:auto;
  }
  .page * {
    margin:0;
  }  
  .stretch {
    column-span: all;
  }
  .break {
    -webkit-column-break-after: always;
    break-after: always;
  }
</style>

If anyone knows what's going on, how to resolve it, or even has a hunch, I'd love the assistance.

# ? Jan 27, 2018 11:24

Gmaz: Apr 3, 2011; New DLC for Aoe2 is out: Dynasties of India

Alpha Mayo posted:

Also should I stick to learning Python fundamentals first or can I jump right in to frameworks? Sometimes that can be bad practice with other languages.

I'd say both fundamentals and learning how to write idiomatic code. I have seen plenty of bad code where someone who uses language x primarily decided/was forced to write something in language y as a one off. The end result is usually pretty bad.

# ? Jan 27, 2018 13:06

Cirofren: Jun 13, 2005; Pillbug

PantsBandit posted:

Hey guys, I am VERY fresh with html, but I find it really fascinating so far.

I was looking at the source for a webpage and noticed a link to a jquery script. The script in question was extremely complex, so I'm assuming the web dev didn't put it together.

So I guess my question is: where did he find that script and how are scripts like that implemented?

Human authored scripts can get pretty complex depending on what they do and how they do it. Depending on what you mean by complex.

A lot of code gets minified for live deployment, which strips out whitespace and compresses some syntax. That might have been what you were looking at.

# ? Jan 27, 2018 13:54

PantsBandit: Oct 26, 2007; it is both a monkey and a boombox

Cirofren posted:

Human authored scripts can get pretty complex depending on what they do and how they do it. Depending on what you mean by complex.

A lot of code gets minified for live deployment, which strips out whitespace and compresses some syntax. That might have been what you were looking at.

I'm talking about what looked like thousands of lines of code for one script, I wish I'd saved it so I could go take another look.

I guess I figured it is human-authored, just not by that particular human. Is there a way to draw on someone else's script if you know it fulfills a function that you need?

# ? Jan 27, 2018 17:09

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

PantsBandit posted:

Hey guys, I am VERY fresh with html, but I find it really fascinating so far.

I was looking at the source for a webpage and noticed a link to a jquery script. The script in question was extremely complex, so I'm assuming the web dev didn't put it together.

So I guess my question is: where did he find that script and how are scripts like that implemented?

I think your question is about bundled javascript, which can look more complicated in its final form than it is in the source code. There are many bundlers, they are synonymous with writing client side javascript these days. Popular ones include Webpack, Browserify, and (my personal pick) Rollup. Jquery is very outdated and should almost be considered an antipattern at this point. It was from a time when Javascript was a lot harder to write and ran a lot less reliably across browsers than it does now.

Most javascript libraries can be found on https://www.npmjs.com/ though technically mostly it's for server side Javascript instead of client side. There's a lot that build their own webpages or just host their code on Github. So it's best to use web search and read stackoverflow if you're looking for something.

On second thought; Jquery might be awesome if all you want is to plug and play something because there is a hell ton of Jquery plugins out there, way too many.

Nolgthorn fucked around with this message at 17:27 on Jan 27, 2018

# ? Jan 27, 2018 17:22

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

And if you want to copy/paste code to see what it does, go for it.

You can use tools like codepen.io for that

# ? Jan 27, 2018 18:28

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

I love it when you walk in on someone else's gigantic minified CSS file and the original unminified version is long gone.

# ? Jan 28, 2018 14:35

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

Ape Fist posted:

I love it when you walk in on someone else's gigantic minified CSS file and the original unminified version is long gone.

code:

/([{|}])/\1\n/g
/;/;\n/g

# ? Jan 28, 2018 16:07

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

Ape Fist posted:

I love it when you walk in on someone else's gigantic minified CSS file and the original unminified version is long gone.

Also when it's like 1MB even with minification and you're like "what the gently caress have you done here???"

lovely wordpress themes, I'm looking your way...

# ? Jan 28, 2018 16:44

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

PT6A posted:

Also when it's like 1MB even with minification and you're like "what the gently caress have you done here???"

lovely wordpress themes, I'm looking your way...

The nasty secret of CSS minification is it does gently caress all anyway, gzip is far more important for bringing down CSS size. Unlike Javascript there are no variables through which you can cut characters, so the only things you can minify (if you don't have control to minify the HTML side of the classnames) is a piddling amount of whitespace, which Lumpy demonstrates replacing with like two commands, and with an indenter you're all done.

Of course, minified or unminified a 1MB CSS file is why people hate CSS.

# ? Jan 28, 2018 21:14

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

minifying your CSS is also a way of preventing other devs from seeing your horrific work.

# ? Jan 28, 2018 21:38

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

At least as far as I know no CSS ever shipped with massive security flaws. We should probably be glad CSS is merely a set of declarative rules and not a programming language.

# ? Jan 28, 2018 21:46

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I like CSS. I can't imagine what could be done to make it a lot better, 'less' is better, but it's awful when you try and set up a watcher on it, or use middleware to render it live which causes all kinds of complications once you want to go to production. 'sass' isn't any good when used in node because it doesn't have a javascript implementation. People complain about CSS but I can't figure out what they want instead. Variables and some sort of modular architecture is all I need.

You don't need BEM, you don't need computed namespaces. The language itself is built on namespaces.

# ? Jan 28, 2018 22:29

The Fool: Oct 16, 2003

Maluco Marinero posted:

At least as far as I know no CSS ever shipped with massive security flaws. We should probably be glad CSS is merely a set of declarative rules and not a programming language.

https://github.com/jbtronics/CrookedStyleSheets

# ? Jan 28, 2018 22:35

ynohtna: Feb 16, 2007; backwoods compatible; Illegal Hen

Ape Fist posted:

minifying your CSS is also a way of preventing other devs from seeing your horrific work.

Ah, yes. The neurotic cat what buries its poops under cow pats approach.

# ? Jan 28, 2018 23:13

life is a joke: Mar 7, 2016

CSS minification gets lumped in with other things that actually do make a performance difference in all the ULTIMATE OPTIMIZATION CHECKLIST FOR YOUR WEBSITE lists out there. I'd rather take the 10kb hit and be able to skim it later if i need to.

We make products that get handed off to teams we don't work with again, scary looking minified css in those instances is supposed to be an extra indicator that they should take the 5 minutes to figure out how to edit the scss partials and run grunt/gulp/whatever. Doesn't matter tho, they usually still just add a bunch of !important stuff to the bottom of the compiled style.css and overwrite the old one via FTP anyway v

# ? Jan 28, 2018 23:29

Ape Fist: Feb 23, 2007; Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Nolgthorn posted:

I like CSS. I can't imagine what could be done to make it a lot better, 'less' is better, but it's awful when you try and set up a watcher on it, or use middleware to render it live which causes all kinds of complications once you want to go to production. 'sass' isn't any good when used in node because it doesn't have a javascript implementation. People complain about CSS but I can't figure out what they want instead. Variables and some sort of modular architecture is all I need.

You don't need BEM, you don't need computed namespaces. The language itself is built on namespaces.

I think some very basic variables and if statements would really help a lot tbh.

# ? Jan 28, 2018 23:33

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Ape Fist posted:

I think some very basic variables and if statements would really help a lot tbh.

CSS variables are here and there's a really really awesome calc function. I'm just not sure how backwards compatible those things are... not at all I suspect. Probably have to continue compiling less for a while.

Less isn't as good you can't do `width: calc(100% - 100px);` for example.

I've been thinking about trying http://www.myth.io/ instead of less.

# ? Jan 28, 2018 23:52

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

What are you talking about? Less is fine, just turn on strict math so that it�s more conservative in parsing expressions like that.

Search for �Strict Math�
http://lesscss.org/usage/
It�s controversial apparently which is why it isn�t the default, but it really should be to make stuff like calc and what not more usable.

Calc is super usable nowadays if you only target modern and supported internet explorer. If you�re still asked to support IE9/8 well, sucks to be you I guess. CSS variables not so much, and honestly preprocessors do the job fine, runtime variables are not something I hit a need for that can�t be dealt with by HTML styling instead.

Maluco Marinero fucked around with this message at 08:31 on Jan 29, 2018

# ? Jan 29, 2018 08:25

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

What makes me feel like I can't live without less is nested styles.

# ? Jan 29, 2018 12:31

MrMoo: Sep 14, 2000

Mixins are coming to CSS to you soon.

# ? Jan 30, 2018 06:22

Sergeant Rock: Apr 28, 2002; "... call the expert at kissing and stuff..."

MrMoo posted:

Mixins are coming to CSS to you soon.

I thought that work had been abandoned?

https://www.xanthir.com/b4o00

Sergeant Rock fucked around with this message at 13:19 on Jan 30, 2018

# ? Jan 30, 2018 13:17

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

Nolgthorn posted:

What makes me feel like I can't live without less is nested styles.

BEM makes me not miss nested styles at all. Well, except this:

CSS code:

Thing__SubThing {
    color: #006600;
    &:hover {
        color: #118811;
    }
}

# ? Jan 30, 2018 14:52

Tei: Feb 19, 2011

Skandranon posted:

You do know there is a fairly OLD loader called RequireJS, right?

What do you mean? If you mean the name is already taken. Is not a problem for me, what I am building is for internal use, not distribution. And kind of solve a similar problem, so I doubt I will need to use both tools and the same time. And even if that where the case, I would probably find a way to support a nocollision mechanism.

If you mean is a solved problem, then not... RequireJS is highly opinionated, getting too much in the way to how modules are actually written. And don't leverage any existing cache technology or cache idea. localStorage, cacheStorage,...

# ? Jan 30, 2018 16:12

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

Tei posted:

What do you mean? If you mean the name is already taken. Is not a problem for me, what I am building is for internal use, not distribution. And kind of solve a similar problem, so I doubt I will need to use both tools and the same time. And even if that where the case, I would probably find a way to support a nocollision mechanism.

If you mean is a solved problem, then not... RequireJS is highly opinionated, getting too much in the way to how modules are actually written. And don't leverage any existing cache technology or cache idea. localStorage, cacheStorage,...

I guess I was mainly meaning the name is taken and will be confusing when talking about this piece with most JavaScript developers. I would still try to change the name just for this reason, even if it is internal use only.

# ? Jan 30, 2018 17:20

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Having the same name as a totally different product in the same space seems like an awful idea for a whole lot of reasons.

Like, what do you think's going to happen the first time someone else on your company does a search on the name of this tool they've been told to use, and they find a whole lot of public documentation describing a tool that solves the problem they have?

# ? Jan 31, 2018 08:39

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!

Yeah I learned that the hard way. I had/have to distribute and maintain a library internally to colleagues that is a recompiled version of an the existing library, and I decided the easiest way was to manage it through a custom Anaconda Cloud channel/repository. I wrote very clear instructions on how to install this version of the library, including adding a small FAQ tidbit with the most common problem i expected to be encountered (them downloading the official package, instead of our custom package).

Nonetheless I spent parts of the next days explaining to people that they installed the wrong version (�no I didn�t, I installed libwhatever like it says, and it�s the same version number�), explaining why they need our custom version (�why doesn�t the official one just work, it should just work�), and one person actually told me he spent about a week researching the hell out of compiling this library because he installed the (wrong) version and just kept going down the rabbit hole copying and pasting error messages into google before eventually realizing that it shouldn�t be that difficult and something must be wrong.

I�ve renamed this package to [org]-[packagename] and there is no more confusion.

# ? Jan 31, 2018 11:38

huhu: Feb 24, 2006

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.

# ? Jan 31, 2018 17:04

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

Love too implement the entire site code *including full data dumps* in front end code that can�t be protected via authentication

# ? Jan 31, 2018 17:15

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

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.

Sounds like you met a dumb guy. Source: I'm a dumb guy.

# ? Jan 31, 2018 17:19

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

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.

Tell him he should make the data grouping into a microservice with an API.

# ? Jan 31, 2018 19:28

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 13:11

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

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.

Lol, the guy�s an idiot. There are statement mappers even for JavaScript. Nothing screams long term toy like writing every single thing yourself in a language ill suited to bulletproof large scale applications.

# ? Jan 31, 2018 21:34

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

«‹›361 »