/wdg/ - Web Development General

>Previous thread
>Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn
freecodecamp.com/
codecademy.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Other urls found in this thread:

stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which/17106702#17106702
developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
en.wikipedia.org/wiki/Catamorphism
headlesscms.org/
github.com/dotnet/cli/blob/2258ab811c0f915851b03e650e3fc12b4c382459/scripts/obtain/dotnet-install.sh#L490
github.com/dotnet/cli/blob/2258ab811c0f915851b03e650e3fc12b4c382459/scripts/obtain/dotnet-install.sh#L825
bpaste.net/show/29590fbbb9ed
webdesign-finder.com/html/clinique/
jsfiddle.net/rzejkgyd/3/
jsfiddle.net/xgnabeug/
isitdownrightnow.com
jsfiddle.net/xgnabeug/2/
twitter.com/AnonBabble

I want to know about laptops but last time I asked you guys, I got a very hostile response.

Can you guys share what kind of laptops or PCs you are using for web dev and what you like about it? I am using a Thinkpad x220 but the display resolution is very small. It is very portable though.

I don't think the hardware matters very much, unless you are really on the ultra-lowend and have to deal with some crazy large projects that have to be transpiled or bundled.
Different if you are also into design and not just code.

The only thing I really have an opinion on is that at least a dual-monitor setup for any kind of frontend work is absolutely worth it.
I don't own a laptop, but can't imagine I would enjoy developing as much on it as on a full scale desktop setup. Unless you have legitimate on-the-go use cases obviously.

[inarticulate yelling at JS]

>try that freecodecamp thingy
>nothing works due to my privacy settings
>one "challenge" wants me to sign up to Facebook
how about fucking no

15" retina MBP

>most starred repo on github
>making starring their repo part of their tutorial

...

how do i actually get experience for jobs like this ?

be a pretty girl with huge knockers

just say you've been a freelancer for the past 3 years and get a junior position where nobody really cares

Hi guys. I am building an app for work - we do carpentry stuff, all custom. I am building a product-configuration / e-commerce app. Reference language for these questions would be angular / typescript. One of my troubles is that the amount of choices that need to be made for a particular product can be very high. For example, a cabinet door may have
>frame wood type
>panel type
>frame style
>outside edge
>frame profile
>panel profile

And these options are branching and conditional depending on state of other options. Additionally, some options will effect the cost while others won't. For cabinet doors, I have nine main 'categories' (three door types each containing the same 3 styles) and some options can be chosen for many or all of the categories but will effect pricing differently. I have decided to try to make a very generic "Option" interface which will be used to house every choice. I have these interfaces nested as such:
"Option"
-optionConfig // this will hold a series of BOOLs to determine if the option is shown at all
-optionSelection // this is an array of individual choices for the option {name, shortname, imgpath, desc. etc.}
----selectionConfig // this has similar config BOOLs to determine if this particular choice for this option shows up
----selectionPrice // variables describing cost depending on category

So, for example - if a customer chooses a door of type Cope and Stick / style Raised Panel - I'll conditionally show only options that have (copeAndStick && raisedPanel) under the option config. Then, for calculating cost, I'll just scoop up only the prices which match my config.
I'm hoping I've explained this well enough for someone to tell me if I am doing it wrong or not. Is it bad to nest interfaces like I have done?

1/2

Also, when it comes to assigning values to objects using these interfaces, how and where is the best way to do this? So far I have just made a new "options component". Under the class declaration I declare my options (myOptionName: OptionInterface;) and then down in the constructor I do
myOptionName.config = [....];
myOptionName.choices = [ {opt1}, {opt2}, etc];
Then, I basically wouldn't have any logic in this component, I'd just be setting up the variables so they can be used elsewhere. Again, is this the right approach? I'd really appreciate some insight, reading recommendations, etc. because this is a can of worms, and I know that doing it right the first time will save me a ton of headache.
thanks in advance
2/2

Are web development jobs any good ? i was planning on going to college for information systems and getting a job as a junior Web Dev

simple question. Using Node, I query a database and get a JSON object. This works fine. But then, I need to send this object to the client (so he can alter index.html using the data). How do I do this?

app.get('/:short', function(req, res, next) {
res.sendFile(__dirname + '/index.html');

dbCon.query("SELECT build FROM build.builds WHERE shortcode = '" + req.params.short + "';", function(err, results) {
console.log(results);
// Send results to client??? Not sure how.
});
});

As a better idea, I think what I need to do is have the client send a request onload, that contains the :short parameter, and then doing the MySQL operations.

I need to separate the MySQL query from the index.html request, basically.

You've sent a response before you query the DB. This is basic async programming, user. Furthermore, once you send a response in a single route, you can no longer send additional responses (try it and you'll just get a "can't set headers after they're sent" error). I think your idea in is right: you want to have a single route ( app.get('/home') ) to get this index.html page, then another to get the JSON. As it is, even if you did something to the effect of 'res.sendFile(myFile.html, {someContentsToInclude})', you would have to resend EVERYthing each time the req is made. Separation of concerns, user.

up thatll work. thanks user

>smaller
>faster
>easier to use
LMAO who are they kidding? angular is a joke. at least react does one thing right.

I got kusaba to work, mostly.

I was a little surprised by the way these image boards are organized.

The following is true for most, if not all, major image board packages:

1. Each board gets its own folder (kusaba/a/ is a folder and a board)
2. Each thread gets its own file (kusaba/a/res/1.html is a file and a thread)
3. Each image is stored as a file, under the board it was posted on. (kusaba\a\src\150960013819.png is a file, and the same URL lets you navigate to the picture.)

In other words, it's all stored in a very straight-forward, intuitive way. There's no deception, where the hierarchy is artificially constructed on the fly from a database.

And if you asked me to design an image board 4 years ago, I would have done it this way, too. But after doing enough SQL, I just imagined EVERYTHING would be stored in the database. I even wrote an image board in Spring where the board ID and thread ID are just parameters. They go to the controllers, and the controller pulls the comments out of a database. Then it generates the web page with ThymeLeaf.

Right now, I'm guessing that's why all this info is stored on the hard drive, instead of generated by a templating engine. It's stored on a hard drive because it's faster to retrieve it, and the server doesn't have to do as much work.

But still, if facebook is generating web pages on the fly, along with (I assume) dozens of other huge websites like amazon, then why is it such a big deal?

>Learning this front-end shit (html,css,javascript, frameworks like Bootstrap) sucks

>Listening to music and creating things afterwards is so fun

Is getting paid to do this for a living really living the dream? What's it like being a front-end developer at a firm? Do you guys put on your headphones, listen to your music and just create?

What's the best laptop you could recommend to venture into this world?

I remember poking around message board software a few years ago after taking some classes in enterprise database design/management and thinking it should all be rewritten with an actual database.

If you'd asked me to do it 8 years ago I probably would've said to throw everything onto a mysql database (probably the InnoDB engine) running on a hard drive with no filesystem and storing images as binary blobs or in a ram directory like /tmp. Of course, I wouldn't do that now.

>It's stored on a hard drive because it's faster to retrieve it, and the server doesn't have to do as much work.
That can depend on how your site is set up. Querying mysql without a filesystem can actually outperform loading files from a filesystem, especially if you've got your indexes properly configured.

Modern systems don't do this though. They use a combination of SQL, NoSQL, (both of which may be distributed) and caching/accelerating stuff. Especially in cases where you only need ballpark values (eg. it doesn't matter if the posts on your Facebook timeline appear out of order or if some people's posts don't always appear) then you can totally get by with simpler NoSQL solutions (4channers on the other hand would shit themselves if post numbers stopped appearing in order or if posts sometimes disappeared).

There's lots of other modern technologies as well.

On another note
>Spring
I don't keep up with frameworks so this is new to me. Why would you go out of your way to code on the jvm? Is someone making you do this?

Can I pay someone on here to help me with my js homework?

That fucking feel when
>Been developing a webstore with a team of 5 for a project course at uni
>Chose reaction commerce since we didin't want to deal with wordpress+woocommerce fees n' shit
>To our grand surprise the whole thing is a fucking mess, supposeably released in the summer
>They're still in process of overhauling the front-end from blaze templates to react
>Documentation is really laughable
>None of lur teammates has extensive/any web dev experience of a project of this size
Kys me pls

> smaller, faster, and easier to use
that's Vue desu

Haskell guy here. Was pleasantly surprised to find out that javascript has some functional capabilities but I recently learned that javascript's recursion capabilities are really slow so even though they're there you really shouldn't use them (at least not the way functional programmers do).

Are there any other big gotchas I should know about when coming into javascript/node.js from a Haskell background?

serve the index statically, and from there use ajax to get the json. so you'll have 2 endpoints

you will not like the weak typing and immutable objects. comparison by value is not as simple as in Haskell.

post it in a creative way and have it solved for free
>if you are a coder you must be able to solve this

I'm just curious though, what is a JS homework?

>functional programmers

are they different from regular programmers?

why don't you use a haskell framework instead of node? I recall there was yesod and scotty and probably others too. Then there's elm for front end

pay like $20 for shopify

>are they different from regular programmers?
yeah they're stupider and more impressionable

Should've for sure. Kinda too late now as we finally after 3/7 sprints in started to understand what the fuck we are supposed to do. Guess we'll just roll with it

why store comments in the first place, they are ephemeral by nature, just shove everything in memory. Sup Forums shows active content as 1400GB right now, one can buy 1000GB ram x1 instance on expensive aws for $6.66/h.

I would probably put everything on a CDN though and be done with it.

sunk cost, never too late to do the right thing, you will have to maintain every line of code you write (which can be a good revenue source but not for a university project I imagine)

Wow, almost had the exact same experience in uni.

Project was online store for local company, 5 people, 4 teammates had no programming experience, 1 teammate at least was majoring in marketing and since I was team leader, I just put him in charge of presentation + all communication between team+client.

Staff suggested looking in to wordpress, I said fuck it and went with Magento instead, went decently.

Every time I see someone use “desu” here I cringe so hard. Can you autistic losers stop?

>you will not like the weak typing
It is weird as fuck. I still haven't really come to terms with it and I'm not sure I ever will. The lack of integers especially is an affront to all things just and good.
Also shit like this
stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which/17106702#17106702

I checked out Typescript's page but it looks like a mainstream OOP version of Javascript more than anything.

>immutable objects
I'm not sure what you mean by this. Everything is immutable in Haskell. Also, from what I've seen some javascript functions are mutable but I haven't seen any rule of thumb for knowing what the case is besides looking it up on Mozilla's website.

>comparison by value is not as simple as in Haskell.
Are you talking about this stuff?
developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

Recursion instead of for loops (specifically tail recursion so it can be tail call optimized). higher order function wizardry (eg. catamorphisms), monads for everything (reading, writing, promises, etc..), category theory (kind of, but not exactly because the category Hask is kind of garbage so really it's more category theory "inspired" than anything), no mutability, lambdas, lazy evaluation, etc... At least that's the sort of stuff common in Haskell, no idea what impure functional programmers (eg. clojure, lisp) do.

en.wikipedia.org/wiki/Catamorphism

>why don't you use a haskell framework instead of node? I recall there was yesod and scotty and probably others too. Then there's elm for front end
Hadn't really crossed my mind. Either way, node isn't too bad. It's pipeline (non-blocking!) and asynchronous capabilities are awesome it's just the random things that catch me by surprise like finding out recursion is possible but it sucks.

You sound like an insecure manlet, desu

Anybody got a Laracasts coupon code?

this regurgitating haskell 101 stuff makes them look like a real underage

>ree, I can't leave without muh precious functional paradigm
>hey plebs, tell me about node

how to charge customers on the site? I;ve read paypal is a disaster so looking at transferwise, but their docs are seriously lacking.

stripe?

How can I bring myself to work in Node or PHP again after learning C# and .Net Core? I am too happy with this

typescript?

Hell no

why not

not available in my country

Seriously though, just checked paypal to confirm my bias. They are offering invoices which looks like a zero effort solution and might be preferable for a b2b saas. I imagine they charge obscene fees, but any other catches to watch out for?

Incorrect, we can just 'deliver' and forget

why would you use node or php anyway if you can use c#

Dependencies

>c#
it's good if you wanna be a microcuck.

Keep complaining then you handicapped fuck

I'd still really appreciate some feedback on this if anyone has a chance.

So guys I have a static website right now and I want to create a database so the content can easily be adjusted.

Are there any online databases I could use to connect to ? for an android app I once used Microsofts Azure Websites Database and I heard Firebase also can do similar tasks. So what would I use as an online database for my website ?

sounds ok
Something like a whitelist/blacklist on each item, listing which other items they are compatible with?
And then you make all the incompatible options greyed out and unselectable?
Maybe a tooltip showing what an unavailable option is incomaptible with on mouse-over as well, so customers can understand the relationship between the options.

headlesscms.org/

In Chrome/Firefox/Whatever developer tools, is there a way to search for a specific string in _all_ responses of _all_ network requests? I'm inspecting a site that makes a gazillion XHR requests to render one page and I need to know which of those returns a response with a specific string. I'd rather not use Wireshark or similar and I sure as hell am not checking them all one by one manually. Wat do?

edge searches all response bodies in its network tab.
firefox and chrome do not, though chrome has an open issue for that.

Hey wdg, I know it's a long shot but here goes.
I need the most lightweight css framework to quickly build up a configuration page for a device that I'm demoing tomorrow.
It needs to be

purecss

Looks like exactly what I was looking for.
thanks user

Anyone here using asp.net core/.net core that knows if there is a environment Variable I can set to change the location of the .dotnet folder that gets generated inside of the %userprofile%? I have my %userprofile% set to disallow creating of new files/folders so I can keep all the .file/.folder cancer out.

You could try DOTNET_INSTALL_DIR
github.com/dotnet/cli/blob/2258ab811c0f915851b03e650e3fc12b4c382459/scripts/obtain/dotnet-install.sh#L490
seems to check for that.

or install it using --install-dir
github.com/dotnet/cli/blob/2258ab811c0f915851b03e650e3fc12b4c382459/scripts/obtain/dotnet-install.sh#L825

I personally run it their docker image, so I don't have to pollute my system with it.

How about Braintree (owned by PayPal, though)

Why does it do this. If you look at my nested loops and the console, you can see every couple of iterations it duplicates the value which is then supposed to be added into the array.

post the entire thing.
seems like you call this method twice somewhere.

it gets called by a qunit test a couple of times but all calls are separate inside the test

Those are not working, they serve a different purpose to what my problem is. I just check the source and they have a hardcoded line to the userprofile somewhere in their code.

what do you think the result of "0 % 3" and "0 % 5" is

then qunit is running them at the same time.
your method does not duplicate the values.

output the result instead and you should see two arrays with each having the correct value.

I don't think we understand OPs problem.
Is it because it outputs 0 0 3 5 6 9 twice or is it because it outputs 0 twice?

Hey. I've been working with purecss, but I can't seem to get the checkbox and radio buttons right.
Can someone help? I'll be eternally grateful.
pic related. source: bpaste.net/show/29590fbbb9ed

because it outputs 0 twice. After everything is put in arrays i am supposed to add up the values and put them in another array.

Whats weird is that it works if the range is 10, but wont work if range is 100, or 1000 like in the picture.

god shout, not much of a difference though, will be kept as a backup option
>us 2.9%
>eu 4.4%
they know we don't really have options

are there any new programs that i can use to copy a site/template with the html and css and js files? tried httrack and it downloaded all the html and css and js files but when i try to open a page its blank so im gussing some js fuckery is going on

site im trying to get is
webdesign-finder.com/html/clinique/

for learning purposes ..

quick question, I'm currently working on a website that is a giant mess. it started as a shopify template that's been modified to hell without proper knowledge, so the CSS is a giant fucking mess.
i proposed a full redesign of the site to my client but they declined because of cost, etc.

now the thing is that my job is to replace a widget that is used so that customers book appointments in their shops with a custom made system that will solve a bunch of problems the commercial system can't deal with. I've done all the backend work and now I want to implement the front end on the site.

My main idea was to just add the appointment booking front end directly into their site, but the CSS is such a big mess that my front end styling gets completely fucked, so I'm thinking about just putting it into an iframe because fixing the spagghetti css is going to take me days

is this what iframes are for? am I being a fool for using an iframe when I could just spend some 20 hours fixing poor css and risking breaking some other BS on the site?

add
.pure-control-group label.pure-radio,
.pure-control-group label.pure-checkbox {
text-align: left;
}
and don't forget to add the pure-radio and pure-checkbox class to your labels containing those.

that sounds like it would just make things even less maintainable in the future
what exactly is the problem? That it runs the whole thing twice or that it outputs the 0 twice during each run. You left that ambiguous,
Post a minimal jsFiddle if you can.

jsfiddle.net/rzejkgyd/3/
Use your browser console to see. For some reason it doesn't return anything to the console but you can see what it's supposed to do if you uncomment console.log(i). I feel like there is an issue with my nested loop. Weird thing is if I specify the range 10 as a parameter to the function rather than 100 like in the fiddle it works fine.

10 and 100 run both correctly. what's the problem you are seeing?

Oh shit! If You run the function with range 10, only "0" is duplicated thus it doesn't fuck up the sum. But if you move to 100 range then you get other duplicate numbers which are higher than 0 so they fuck up the sum. Why do these duplicates occur i dont get it?

Anyone know a good place to get javascript and jquery code challenges or tasks? I haven't used it in several months and I want to refresh myself.

that helped.
thanks user.

I think I finally understand what you're trying to do.

I'd do it like this though instead of two loops.
jsfiddle.net/xgnabeug/
Check for each multiplesArray value if it is modulo to i and store the results in an array.
If the array contains true, then it matched.

This might get a bit inefficient if your multiplesArray gets larger, as it runs modulo for all, even if it found a match already.

it fucking works! But do you think you know why I had those duplicates using the nested for loops? And should I avoid using nested loops in JS? I used them before in Java and Python and I never encountered problems like this. Thanks a lot. I'll try to implement this array.map trick in my other tests.

because 30 % 3 and 30 % 5 both equal 0, so of course you add it twice.
the other solution would be to remove all duplicate values before summing them up or skipping the second check if the first one was true.

post your website ideas. I promise I won't steal

Logically, how does isitdownrightnow.com actually work? Does it just ping the website you type in and see if it gets a response?

I want to make something like this but a little bit differently. I have to do it in PHP for now since I don't have a VPS as yet, so I'm guessing CURL function to ping?

that's exactly what I tried to say here
It's also a good candidate for Array.some() and you can use default parameters in the function as well

jsfiddle.net/xgnabeug/2/

obviously 'arrayOfNumbers' is kind of redundant here. You can just add up the numbers directly in a variable if you want the total and don't care about the array.

they do a http request and check if it responds.
funnily enough their user agent says IE10 and yahoo.com as referrer.

pinging does nothing, as it can be either turned off and not give any indication whatsoever if the server listens to that specific host name.

I just got rid of arrayOfNumbers and used a variable "sum" to keep track of the sum. I imagine using a variable is more efficient right?

yes, more efficient and also makes it easier to grasp, what the code is supposed to do.

How do I do into CORS? This is way beyond me!

So my app shows pics from that are hosted on a different website. User can chose pics. Then I want to put everything in a zipped file on client side, but I can't since the pics are from another site/origin. I, however, don't want to download the pics and serve them on my server, since they are online anyways. I just want to create an interface to easily chose pics. What can I do?

send CORS headers from the other website so you can use them.
or set up a directory as transparent proxy in your webserver if you don't have access to it.

Ah, thanks for the info.

ping uses icmp

if you only want to issue a http request couldn't you theoretically use xmlhttprequest straight outta the browser without any backend?

browsers don't allow cross site ajax requests unless the target allows it.

Thanks for helping me. What do you mean, tho? I don't own the other website?

So I should opt for this, huh?>or set up a directory as transparent proxy in your webserver if you don't have access to it.

Can you expand on this?
>set up a directory as transparent proxy in your webserver
What did he mean by this?