/wdg/ - Web Development General

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

>Further resources
github.com/iRaul/awesome-portfolios - Portfolio examples
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:

discord.gg/wdg
stackoverflow.com/questions/36444507/how-to-show-save-file-dialog-in-safari
forums.developer.apple.com/thread/11837
github.com/eligrey/FileSaver.js/issues/12
youtube.com/channel/UCYqCZOwHbnPwyjawKfE21wg/playlists
elsajohansson.wordpress.com/2017/09/13/what-does-a-wage-gap-look-like/
youtube.com/watch?v=CM2pK0PE6Zg
jsfiddle.net/kda2rdLy/
en.wikipedia.org/wiki/Single-page_application
discuss.vultr.com/discussion/104/snapshot-image-downloads
whattomine.com/coins.json
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
github.com/BlackrockDigital/startbootstrap-clean-blog
twitter.com/NSFWRedditGif

First for /wdg/ is shit.

>the year is February, 2018
>turn on my Apple non-computer
>open a website, which is itself opened by a single-page-application browser website
>never have to install any browser on my non-computer, nor any other software for that matter
>web developers become the new masterrace as all enterprise software becomes single-page-applications

Doesn't /wdg/ have a gdrive of resources (i.e. Books, pdfs, etc) for people wanting to get ti to /wdg/? Bit odd that /vr/, /fit/, /vg/, and others would do that for their own topics but not Sup Forums

If you need books, links, join the server and check out the pinned messages in the #reading-list channel. You'll find a few google drives full of webdev books in there.

discord.gg/wdg

Begginer here

Is it going to affect us in any way?

those lists with 2000 entries, with 99% of them being shit?
At least, that's what it would be for programming related topics.
If it's older than 2 years, then you are better of looking for something newer and more relevant.

There is a reason why beginners still start with jQuery and develop all kinds of bad habits.
It's because of those old tutorials and guides.

I know it's a meme, that todays tech is already deprecated again tomorrow, but there is a kernel of truth to it. You got to be on your toes or become the webdev dinosa
I FUCKING KNEW IT YOU ARE SO FUCKING TRANSPARENT WITH YOUR SHIT.
Should have figured it out, when I started typing this..
It's literally always the same pattern you use to shill your shit private server.

Open a fucking subreddit where you can register your username and stroke each others ego if you are so desperate for it.

If you're unironically afraid of ever getting replaced by brown people from the third world you were never, are not and will never be a good programmer. Stop falling for Sup Forums memes.

Sup Forums is pretty much the only place on the internet that disregards the importance of modern web development. that's gonna happen sooner or later.

I asked and got a discord link and actual help, better than getting a shit response telling me to fuck off.

Calm down user, Im the one who asked

I'm not the guy who asked for the links. Jeez, pop a pill.

Genuine question: why are developers so afraid of "huge" JavaScript libraries in the 1-20KB range when most images are tens if not hundred times the size of that? I understand that bloat is never good but it seems like people are obsessed with file size to the point where they will pick an inferior library as long as it's a kilobyte or so smaller.

It's not developers it's old fashioned neets who like to larp as programmers.

Can you explain why I dont have to be afraid?

do you think people are that retarded?
You used the same setup now dozens of time.

Never said you were the same person though.

Honestly doubt they're real developers. Probably just kids from the linux world that will laugh at you if your OS has over 50 packages installed.

Because literally every company who has ever outsourced work to slavs, indians or africans have either had to spend twice the amount they paid on it on patching it up to a somewhat functioning product, or been too naive to realize that what they got was utter shit.

If you’re a half decent programmer you will easily find positions where you won’t have to deal with the lowest common denominator mouthbreathers.

The images are a problem too. There are idiots who will scale a tiny image into a larger blurry image that takes up more memory and then they'll use HTML to scale it back down to slightly smaller size.

What if I want to freelance?

> outsourced work to slavs

yeah, you can stop talking shit here.

kek

literally the cheapest workforce in europe

I always thought it was because bloated, complex libraries sped down the page itself, not load times

Your mathers are the cheapest whores )))

are you using the latest frameworks?

What the fuck is that?

Is it just a router? Can't you do the same just by including a small 5 file php library with some 5 to 10 methods?

Somebody with experience please respond this

You have to be good at selling stuff that doesnt work, imagine a car without motor

>Is it just a router?
No.

>Can't you do the same just by including a small 5 file php library with some 5 to 10 methods?
No.

ding, + more requests made + every leftpad is a new chance for a vulnerability

>selling stuff that doesnt work
I dnt get it
I want that the thigs I develop work well..
I have to know how to sell my services better than indian programers?

I don't have a mac , but how do you download JSON files in Safari?

In my web app, it works in chrome, firefox and opera, but not Safari.

related issues:

>stackoverflow.com/questions/36444507/how-to-show-save-file-dialog-in-safari
>forums.developer.apple.com/thread/11837
>github.com/eligrey/FileSaver.js/issues/12

if anyone could shed a light in this issue, it would be great

as a slav slave the truth in this pains me. I quit my last job because I had to work with mutts (according to their timezone of course) and explain them the most basic shit, while they were busy circlejerking in muh SV office. No lying, it was great how they were sucking my dick because 9 out of 10 had no idea how to get shit done, but when you start asking questions why are you earning a fifth of their salary it can really go only one way. Was literally called on my home phone by the CEO how dare I hand in my resignation and how ungrateful I'm because I don't let them exploit me any further. Murrikunts have really no idea about other parts of the world.

>implying strong engineering worth jack shit
unless you are in the 0.1%, you are in for a nice diverse surprise. We have strong womyn developers changing pronouns in code. Quality has very little to do with financial success, thus people can safely ignore it.

When you connect to a website, and adblock or what have you blocks all those external http requests, are the urls its attempting to connect to inside the actual html for the page? like is ad.doubleclick.com or whatever inside the html?

pls help

>Node """developers"""

>do all the work for me

>working software over comprehensive documentation

that is enterprise development right there

>/wdg/ supports lack of documentation
why am i not surprised

>do all the work for me

Node is a dead end stop-gap web technology, learn web programming in Go, Elixir, Elm (all of which have great documentation):
youtube.com/channel/UCYqCZOwHbnPwyjawKfE21wg/playlists

Good thing that pic was not from node then, eh.

Neither of those have real world use or jobs though, I like Elixir (have done a few things in it) but meme langs dont put food on the table bro

>but meme langs dont put food on the table bro
enjoy your PHP, some people arent afraid to live on the edge

> I quit my last job because I had to work with mutts (according to their timezone of course) and explain them the most basic shit, while they were busy circlejerking in muh SV office.

Same exact thing. Resigning was the best thing I did and I wish I've done it sooner. I earn much more now by selling my own products and services than I ever did with the insane working hours.

I hate the West with passion, I hope to see it burn. When they arrogantly think they're better than anyone else but they're fucking clueless and they're going to pay for it.

he is just typing in tutorials found online and recording it for donations, the language suggestions does not make any sense

On the edge of homelessness? ok
lol

>On the edge of homelessness? ok
>said the slav making $10,000 euros a year doing PHP
whatever makes you feel better

you're making 10 euros a year from your YT donations and Erlang web apps

>elsajohansson.wordpress.com/2017/09/13/what-does-a-wage-gap-look-like/

good for you bro, I'm happy it worked out, being broke sucks
I don't hate them, but agree they are clueless and payback will be a bitch (probably not in our lifetime though)

Thanks, bro. I hope you're doing well yourself. It's difficult to not hate them after having extensive experience with their companies and their laughable wages. Oh well. And that article raises valid points but the greedy west doesn't care and they never will.

How do you differentiate yourself for consulting and freelance gigs when everyone is putting their prices at low quotes?

putting high prices.

the documentation doesn't matter when the technology won't get us a job. thanks for the laugh though with those tutorials.

These are the faces of javascript frameworks.

youtube.com/watch?v=CM2pK0PE6Zg

>A poo-in-loo with a California accent
The future is horrible

>huur erlang server systems experts only make money on jewtube

>I hate the West with passion, I hope to see it burn. When they arrogantly think they're better than anyone else but they're fucking clueless and they're going to pay for it.

t. eurotrash PHP experts

The hell is wrong here?

Why can't safari download this file in this fiddle?

Works in firefox, chrome,..

jsfiddle.net/kda2rdLy/

saf
What version of safari are you using? Works for me on Safari version 11.0.1 on MacOS Sierra.

Angular, React or Vue?????

thanks for the feedback

i'm this guy over here and there seems to be a problem in safari where you can't download some times of files, and safari just opens a tab

my mate tested this on his macbook and didn't work

not sure about the version, though

for what?

Maybe try setting the mime type to "application/octet-stream" instead of "application/json".

Octet-stream means a binary file, and generally browsers will download a file based on that mime-type being present.

Hello guys anyone need free javascript programer?

Where did you learn Javascript? I don't know how to develop my skills

new guy here.
why should one use rails? why not? does rails replace javascrpt?

Rails is a backend web framework for Ruby. It basically helps you generate dynamic pages using data from requests and data from a database. There are other backend web frameworks like Django (which uses Python), Node (which uses JavaScript), and PHP. (PHP is actually a whole language, but it has a lot of builtin stuff for serving dynamic web pages. There are also frameworks on top of PHP to provide extra functionality.)

So if you use Rails, all your backend, server-side code will be in Ruby.

However, you'll probably still need JavaScript in order to do client-side scripting. This means code that runs in the user's browser. JavaScript is the only language that runs in the browser*, so if you want to add extra functionality or interactivity to your web page, or fetch extra data without fully reloading the page, you need JavaScript, in addition to whatever you use on the backend.

*[Ignoring WebAssembly, which is too new to have much stable browser support, and Flash, which is old and deprecated. You don't really need to know either of these.]

>as a slav slave
>We have strong womyn developers changing pronouns in code.
Yeah, um... somehow I doubt your story now.

That pic is from BitcoinJS, which appears to be mainly a frontend library. What does it have to do with Node developers?

Here's my experience with them;

>AngularJS;
It's great once you understand how everything works. Can become a pain in the ass when you're trying to add animation effects and whatnot, directives don't all behave the same and have different priorities. If you enable animations, it's enabled for everything and angular "guesses" how long the transition lasts.
Communicating between modules is annoying as fuck, lots of pitfalls like binding to hierarchy waiting for you. Forms are a mess, workarounds are needed and lots of different ways around doing simple data-binding.

+can support old ass IE 7 or 8 with old versions if you really need to
+don't need npm
+good for full SPA and implemented at the start of a project

-hard to implement in the middle of a project, you can't really just hotswap it in, all your shit will break
-takes over your DOM, and if you modify your DOM outside your app, it won't know about it
-basically need to wrap all your jquery plugins inside angular for them to work

>Angular 4 (aka new angular)
Not alot of experience with it, I just know it forces a bunch of meme technology on you, like babel, typescript and npm. Has a command line that apparently does alot.

+they fixed forms apparently
+easier time adding authentication

- everything's in typescript and ES6 syntax, can be a good thing

>Vue
I used it a few times and so far, it's my favorite. Really easy to use, doesn't force anything on you and can be dropped in any project on a whim and it's just gonna work. I haven't tried it as a full SPA yet, but on smaller projects, where having some data-binding can save you alot of time, it's godlike.

+works great with jquery and anything else because it doesn't hijack your DOM, allows you full access to your app data globally if you want to
+does most things you would need angular for

-not as widespread as angular or react, so your colleagues might not know about it

>React
Super memey, never used it. All I know is everything's a script

>everything's in typescript and ES6 syntax, can be a good thing
it is. they make your code much more maintainable. they're a must for big projects even if there's no angular.

I think angular's true problem is the HUGE runtime.
Even with AOT compilation, hello world in angular is absurdly huge. It's not like 500KB of JavaScript is quick to download, parse and execute, especially not by mobile phones.

And then if you add more libraries like a material design library or moment.js, you get something that wouldn't possibly work outside of an SPA because every page reload would just be painfully slow.

fuck mobile phones and capped internet anyway

I tend to choose the not minified version of any cdn just to fuck with these subhuman scums who forced me to go muh responsive

SO I STARTED TRYING TO LEARN TO CODE IN POLYMER TODAY CAN ANYONE HELP ME BIND A BUTTON TO A FUNCTION? HOW DO YOU MAKE A PAPER-TOGGLE-BUTTON CHANGE THE CLASS NAME OF ITS HOST CONTAINER ELEMENT?

It's honestly a Unix thing more than just Linux. Hop on over to /bsd/ if you wanna know what I mean.

you missed the part where I was working for a sv startup.

nevertheless liberalism and feminism is not endemic to merika

>I tend to choose the not minified version of any cdn just to fuck with these subhuman scums who forced me to go muh responsive

why not just server them more ads or a miner? mobile browsers tend to not have content blockers

>can support old ass IE 7 or 8 with old versions if you really need to

jquery dropped like a third of its size just by dropping IE < 9 support. I'm looking forward to more of these bloated frameworks doing that.

Redmeme me on SPAs, my current understanding is they abstract away the concept of page to be a in a template

en.wikipedia.org/wiki/Single-page_application
the wiki page lists this only this dubious claim as advantage
>This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application.

Disadvantages:
breaks native web navigation, forward/back buttons, URLs and bookmarks
breaks seo
breaks analytics
higher initial load times

>breaks native web navigation, forward/back buttons, URLs and bookmarks
you can fix these by using the history api
>breaks seo
at least google can index pages that require scripts for putting text on the screen
>breaks analytics
you can still call google analytics of whatever from js
>higher initial load times
maybe the first page load (which can be optimized) but the rest should be faster if it just calls some api instead of requesting whole pages

yes, I understand you can workaround most of the barriers you erect for yourself (not bookmarks though and initial load time is more important than amortized) but what for exactly? What are the gains? UX is subjective (and imo worse). Performance is worse. More maintainable code perhaps? Faster development? I don't think so, managing state at runtime are probably worse than clearly defined boundaries on pages.

Whats the best solution for production server backup? Im thinking not only about the database but also for the actual server itself. Im hosting a smaller web service on a VPS. If it goes down, i would like to point my domain to a "backup VPS" (preferably on another hosting service) that is more or less exactly the same as the production server. What methods/services do people usually use to "mirror" both VPS's? Or am i talking out of my ass right now?

Also, is it possible to "clone" my production server to an image file, so that i can simply start a new VPS that image where everything is already configured and good to go?

>vue is bad -> vue might be useful -> no, vue is definitely bad

I think I come a full circle. At one point I thought reactivity might be interesting, but it was more smoke than fire.

Some pointers why should I consider using it again?

(mostly) stateless apps with containers? I keep a dockerfile in the root of the repo, deploying is >docker build app; docker run
I don't really care if it pollutes the server a bit, managing a docker repo is more work imo

>Also, is it possible to "clone" my production server to an image file

you will most probably depend on the 'cloning' tech then
there is snapshotting capabilities for most providers, maybe there is a way to download and migrate them?
>discuss.vultr.com/discussion/104/snapshot-image-downloads

Depends on the application. All this new HTML5 crap like history API, offline pages, web-db, etc, aren't meant for traditional webpages and most people will agree it's stupid when junior devs go gung-ho overusing these features. They are there to enable application development closer to what you can find on a desktop, such as for enterprise applications that want the benefit of running on a server (nowdays cloud service) so the users don't need to worry about managing an installation themselves, and the devs get access to statistics, easier fixes, yada yada.

In short, SPA is a meme for myblog.com, but has a large place in modern app dev.

can somebody explain to me how to parse a json file like this, where i don't necessarily know the name of the item i want to parse?

whattomine.com/coins.json

let's say i want to get the tag of what ever coin happens to be at the top of the list. how exactly would i do that?

i've already done this of course.

var response = JSON.parse(body);

no idea where to go from here.

you can access elements in JSON like


var coins = response.coins;

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
var response = JSON.parse(body);
var coins = response.coins;

// to get the first one:
var coinNames = Object.keys(coins);
var firstCoinName = coinNames[0];
var firstCoinObject = coins[firstCoinName];
console.log("%s: %o", firstCoinName, firstCoinObject);

// to loop over all of them:
for (var coinName in coins) {
var coinObject = coins[coinName];
console.log("%s: %o", coinName, coinObject);
}

What should I use to make a decent web UI without messing with shit-tier languages?

I'm new to browser front-end development and I really want to avoid php, node.js, react, and javascript in general if possible.

html + css. oh wait, they're shit languages and are bloated as fuck, maybe you should just go with plain text.

saas != spa, how is that an advantage?

Asked in the wrong thread because I'm retarded but yeah, would love a little help if someone could be so kind

what's the question, be specific. You are doing what webdevs are supposed to do. If you want post a link to you website

I don't know what else to say but "because it's useful".
Declarative rendering is just a different approach of getting your data on the screen.
You define the template of any components you are using and then have the render functions fill them in according to the state.
It's nothing you could not do without it, but the concept of template+state and components, makes it much nicer to structure and work with, at least in my opinion.

>I'm new to browser front-end development and I really want to avoid php, node.js, react, and javascript in general if possible.
You are better off doing something else then. Wanting to get into webdev, but not wanting to use *any* of the common webdev technologies.
For backend you at least have a choice. Trying so hard to not use JS for frontend is just making it harder on yourself and any 'visitors' of whatever you put online.
JS is part of every browser. It's as bloated/fast/good/bad as the code you put into your .js files. Nothing to do with languages itself.

I sort of don't know where to start I guess?

All I want to do is make a simple little website that has a header, footer and like a scrollable three column 'grid' where each part would be a thumbnail and a title which links to a .html of an analysis I've done. Maybe work on a little dropdown which could filter the results by data; and a search box which could match keywords in the title/tags.

I know a bit of Python, sort of understand how Django works. But am really shit when it comes to actually designing the website (html/css/jscript). And I really want to understand how the front end interacts with the database for the most part.

You don't need to learn a framework to showcase one analysis, you can do that with one webpage. You don't need a framework or a database for this task. Just learn how to do data visualizations with d3.js

but you described your approach and it is 90% there already. If you drop in bootstrap and use its classes it will look good enough. You don't need to start from scartch, download a template and edit it to your taste. Easier if you start from a less bloated one.
If you don't enjoy the work, just ask someone and will make it for you.

>And I really want to understand how the front end interacts with the database for the most part.

the browsers request a URL, the backend has a handler for that URL. In the handler you will execute a query to a database. You format the data and the server sends the response (json, or parsed into html or whatever) and the client does what it want, most probably displays it.

Nonono, I was thinking more of a blog type website which was an archive of each one analysis showcase if that makes sense.

Although d3.js is DEFINITELY something I need to look into; how much js do I need to know to know my way around that out of curiosity - because I know little to none atm

Know of any decent templates to start of with? What I was trying was just grabbing like the most bare and then copying snippets from bootstrap and sort of trying to piece something together; but it barely worked how I wanted it and seemed to look like shit. So yeah, grabbing an okay template with a bit of bootstrap already in it and working from that would probably be a much better idea!

Is there any way I can sort of easily manage a website and its database on my own computer as I learn how all this shit works? I found a tutorial which used XAMPP but trying to figure that out sort of confused me a lot more.

Managed to just download mySQL for my mac, switch that on, and then managed to connect it to django pretty simply; that's about as far as I got though

Found one that looks pretty good, would probably just have to change the home page to maybe be infinitely scrollable and have small thumbnails under the title; could set up a bit of a grid like in the sketchup if it's not too hard

github.com/BlackrockDigital/startbootstrap-clean-blog

forgot link