/wdg/ - Web Development General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Everything PHP

>Asking questions
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
3v4l.org/ - Use this and post a link, if you need help with PHP/HackLang

Attached: who.png (1280x720, 652K)

Other urls found in this thread:

youtube.com/watch?v=wFCO__0prCM
developer.mozilla.org/en-US/docs/Web/Guide/AJAX
w3schools.com/css/tryit.asp?filename=trycss_dropdown_image
flask.pocoo.org/
youtube.com/watch?v=D1sXuHnf_lo
npmjs.com/package/async-request
undraw.co/illustrations
djangoproject.com/weblog/2019/apr/24/internship-opportunity-dsf-app/
twitter.com/NSFWRedditVideo

why should I invest time into learning and configuring vim when VS code is good enough out of the box?

just install vim emulation in vscode

I Am not a developer but I want to be a concept of website to see if there is interest. I made the backend in python and for front end I started customizing a pre made template (horrible but I don't want to put too much effort until I see interest). How do I merge the two together?

are you implying memes aren't real?

Attached: 9dc03a46ea6663c2a7e3bbf74a855347a445c3df[1].png (1470x745, 77K)

so this is the power of emacs?
youtube.com/watch?v=wFCO__0prCM

use the browsers native fetch() function or a library like axios to communicate with the backend via AJAX

You don't get what I mean.
I want to do a search page, with a search bar, when the user presses search it will call a certain python script passing the search text as argument, which will return some values. The python script is in my hosting, I just don't know how to call it and to return the values in a table shape

exactly as he said, use ajax.
developer.mozilla.org/en-US/docs/Web/Guide/AJAX

You press search, you connect to your python script back end and wait for a result, then do something with that result on the page.

Your python script can either return a html table itself (don't) or some other serialized data like JSON/XML.

Whats the correct HTTP status to return when a user registring or creating a post,thread,etc. because of, for example, the thread title being too short or the post body being empty?

Ok so I've dabbled in all sorts of frameworks and languages, but I just want basic simplicity for a few small freelance gigs and personal projects.
I'm a sysadmin by trade, but I do a bit of minor scripting etc stuff so I have a broad but shallow understanding of basically anything you throw at me.
What kind of stack should I dive into? I currently host a couple static sites with just Nginx and html, and have dealt with apache php and postgresql in school. I don't like php. Is node a meme of I'm not making "apps"? I'm lacking contextual knowledge and don't really know if there's a good resource for it other than trying things out

Like a validation error? I like to return 400.

Node is the easiest way out. Like, it couldn't get simpler since it's all JavaScript, front and back

Learning one of the frontend frameworks should be a good use of your time, if you haven't done so yet.
You can make backend a concern after that imo.
That's without knowing any details of what you want to do.

Alright, I'll start with that then.

I'm mostly interested in hosting simple websites (prob at most a blog or something) but I want to learn technologies that are simple but able at the same time leave options open for me down the road.

Cause you'll probably spend a lot of your lifetime typing user, you'd better invest in a powerful text editor like Vim or Emacs cause the ROI will be huge in the long run.
Plus, you won't fuck your wrist by grabbing the mouse thousands of time until you are retired.

400

PHP is unironically your best choice most of the time for webdev. Don't fall for the hype train meme.

Also, PHP pro here guys
Ask me questions.

Attached: php_pro.jpg (400x528, 50K)

Is it possible to have a dropdown list with images in it without using javascript?
A country list, for example.

>dropdown list with images
Not in plain HTML and CSS, or it will be hacky and won't work most of the time.
You'll have to use Javascript, sorry :/

w3schools.com/css/tryit.asp?filename=trycss_dropdown_image

Thanks a lot mate.
Other stupid question: will this work when more than one people are searching at the same time? Does Apache or similar allow a certain "multithreading"?
Also, if in the future I would like to implement user personal areas, how can I do it?

your memes are supreme, sir

for the tag specifically
unless there is another form input that does the exact same thing

Attached: become_a_redditor.png (1289x141, 72K)

kek

I don't know python, but you probably want to look into a web oriented framework.
Flask seems to be popular flask.pocoo.org/

I assume it works like a dotnet api application, you run the flask app on some other port (or in a docker container) and then reverse proxy it in your webserver.
This seems to be the cleanest setup without having to configure the web server much or have it run python itself.

Thanks mate but I already made the python side, using libraries and frameworks python specific so I don't think to switch, at least right now. I would like to make something very basic but that works, see if someone uses and then do things properly. This is a kind of side project for me

The hosting I use supports python so what is the big deal about it? Yes it is slow but it's basically a scraper so the real bottleneck is not the code but the web part and there is little I can do with it

Flask and Django are the most popular ones afaik.

Did you implement your own HTTP server?

your own API rather, well you know what I meant.
I guess Python comes with its own HTTP module already or something like that?

I really want to get a Vue job but all the job listings, if they require knowledge of a js framework, ask for React.
I haven't even once seen a vue post and I've been searching all over EU.

Also, I already have in my portfolio mostly vue projects, fugg.

There were vue jobs in barcelona/spain last time I checked

on a quick search I found 41 vuejs job listings here.

Alright, I'm going to give it another go. But the react positions definitely dominate the job boards.

That's what you'd expect but I found Vue to be even more prominent in Barcelona than React.

I guess I better review my Spanish lessons then.

They're probably pretty hipster-tier so maybe you could get away with speaking english. The pay is supposed to not be so good here though ;_;

That's no issue, I just really like working with vue and Spain seems like a nice place. I'm not sure how my pasty white self would fare in the Sun but I'll cross that bridge when I get to it.

this kraut Max guy seems nice, feel like this React course is going to be enjoyable

Attached: 1539280732874.jpg (90x94, 5K)

naah this is the real power of emacs
youtube.com/watch?v=D1sXuHnf_lo

so i wanna put breadcrumbs but i have no idea what's less bad.

this is how the user navigates:
0. pick a state in the index page
1. pick a month/year in the next page
2. search for stuff (no stuff-specific pages for now)

should i use:
a. "States / / Months / " and have States and Months clickable?
b. " / " and have both clickable

What if I didn't know what you meant? The python code is going to be on the same machine then the html part of the site so it will just call it locally. Is this wrong?

Yes it should. I checked out that ajax will do the thing as it will get the values via JSON

this dude is a fucking legend

Attached: manwith3women2.png (320x274, 39K)

indeed he/sh/xi/they is

Just set up some A/B testing and see which one is more successful

>The python code is going to be on the same machine then the html part of the site so it will just call it locally. Is this wrong?
yeah, it won't work that way. You can't just call Python functions from the browser.
What you can do is communicate with other webservers. That's where the AJAX part comes in.
So your Python backend needs to accept HTTP connection on some port, hence the mention of the web-framework or webserver module.
Then from the browser you can send a request to the servers address. The server then does its searching thing and once it's done, you send the reply formatted as JSON back to the client.

Thanks a lot mate. So I need to setup a server that upon a certain request to a certain port will launch the python script that will return the json values. Is this how an API works?
Other question, not necessarily related: if one day I would like to set up a personal area for each user, which are the big steps to do it?

It doesn't need to launch a python script with every request.
You launch your Python webserver once, which imports all your server-side code (searching functions, DB stuff, etc). Then when a request comes in, the Python server would call the appropriate function with some arguments, depending on what a user wants to search for.
>if one day I would like to set up a personal area for each user, which are the big steps to do it?
that's a bit broad of a question and I don't really know my way around Python enough.
There are many good libraries to handle user authentication like Passport, if that's what you are looking for. Combined with some database, that should let you build something useful.

Someone else can maybe talk about how to build Python apps with user signups.

Scan someone fill me on on react native? How does it compare to phonegap/webview etc? Is it actually native?

Thanks a lot really mate, I owe you a beer at least.
I'm not going to do everything in python, if this thing gets used I will switch to an sql database and more serious stuff, and maybe ask someone who knows better than me, but I like to learn new things every day.

It's mostly native. You still write JavaScript, which runs as JavaScript on the device. And it basically uses the same stuff as React, except instead of interacting with HTML, you interact with an XML layer that translates to actual components native to the OS. And a given element in React's XML layer (e.g. ) translates into whatever the platform's implementation is (e.g. Android's basic text box vs iOS's basic text box).

PhoneGap, or the open-source version Cordova, basically just provides you with a webview. In there, you can pretty much just have a normal site built with HTML, CSS, and JS.

Each solution has its own set of plugins (some provided by default, many others available via NPM) which let you access native device APIs, like the camera. You can also build your own if you need something specific. I don't know the details, but you basically have an iOS implementation in Objective-C/Swift, and an Android implementation in Java/Kotlin, and they both conform to the same access API provided to your JavaScript code.

tl;dr React Native uses the built-in components of the OS and your code runs via the system's JS interpreter, whereas Cordova just runs a webview to render HTML, and both have a channel to call platform-specific code.

>adsense/analytics doesn't work with turbolinks
where do i sign up for the rope?

How the fuck do you go about getting freelance jobs? Every client with a shitty website doesn't want to pay money to have it fixed. I was talking to this rich lady who tries running a business with a website that looks like it was made in 2000. She was all for it until I told her a flat rate price of $500, which is cheap as fuck compared to what agencies pay me. She wrote back and said "oh I already got someone working on it now", and she doesn't.

Where the fuck do you find individual clients?

Your best bet for errors where the client fucked up is generally a 400 status. You MIGHT think 411 (length required) would work, but this seems to more be for the client being like "get ready for my 12MB, bby"

do i have to parse it manually or what?

Attached: Captura de tela de 2019-04-29 20-46-46.png (492x356, 22K)

the ! had to come first.
also look at pic related, what the fuck phpdevs

Attached: Captura de tela de 2019-04-29 20-52-27.png (853x588, 43K)

What are some simple stuff i could put in my portfolio as a trainee in web development?
So far i just made an ASP.Net page where you can upload an user's data to a database, which can be checked in a gridview in another page.
I'd like to make some other simple stuff like that.

Attached: 1495484250788.jpg (1200x395, 60K)

brainlet here trying to install laravel on my desktop. I have php and composer already installed and am reading the documentation but I am little confused on this part:

Make sure to place composer's system-wide vendor bin directory in your $PATH so the >laravel executable can be located by your system. This directory exists in different locations based on your operating system; however, some common locations include:

I'm considering building a site to host some stat tracking for a game like player statistics etc. My buddy knows HTML and I know python. What are some of the simplest options we have to accomplish this?

So when I put a mouseover listener on an element, it gets applied to all sub elements(yes?).

Then when I call event.target.id for example - it gives me the id of the specific sub element, if I'm over one.

I want the id of the original element no matter which sub element i'm hovering over.

This makes even less sense since if you go over a sub element then mouseout function is called. What if you want to simply consider a single element regardless of what's over it?

What OS are you installing on?

When you put a mouseover event on an element, it gets applied to only that element. However, in general, when an event fires on an element, it calls any listeners the element has for this event, then it moves up to the parent element and calls any listeners the parent has, and so on until it reaches the root. This behavior is called event bubbling.

In your case, when you mouseover a sub element, it looks for listeners, finds none, and moves on to the parent, which does have an event listener. And the mouseover event fires every time the element under your mouse changes.

>I want the id of the original element no matter which sub element i'm hovering over.
What do you mean by the original element? If you mean the element that you registered the event to, you can use event.currentTarget.

This is OT but the /dpt/ pedophiles are making that general unbearable.

>Where the fuck do you find individual clients?
that's the problem with doing freelance. Companies are usually not cheap and pay extra, but they want another competent company, not some student etc.

She was probably a bad client user, she wasn't worth it anyway.
The trick is to keep going until your find your first real clients

perhaps you should try reddit

I realized why I fucking hate Reddit. One of the biggest circlejerks I've seen. Even just asking a fucking question will get you downvoted.

Attached: 1505434176033.jpg (658x658, 73K)

Windows 10

How many hours a day do you guys spend doing Web Dev stuff not including work? Curious because I'm in a bootcamp (part-time) and it's still taking all of my time watching additional video lectures and reading extra material outside of class. I'm fucking swamped, we literally went from http and html to ERB and SQL in 3 weeks

Are there any recommended books on learning web development and node for someone who is already professional programmer?
I prefer reading books to web pages.

Attached: 1AFD13AF-ED67-48A3-953F-890BCA975F74.png (1278x720, 493K)

For my webdev CV should i just link my projects there (all are on Netlify and Heroku) or should i make a personal website about myself that will contain link to those projects and link that website only instead?

Is it weird that I'm the only EU flag on freelancer.com? Literally everyone else is from India, China, Pakistan, or whatever.

where the fuck do westerners freelance on?

Arent there more popular sites like Upwork and such? Also how do i into freelancing?

Is there any virtualbox for testing and inline editing CSS styles?

I have a theme and it doesn't show lines. I would like to have a program that shows any class how it would look on the website and allows inline editing of colors and saving them into the existing CSS file.

Attached: sss.jpg (1002x907, 95K)

I'm interested too

I'm freeenom and digital ocean for my server. I want to set up bitwarden. I have to create a subdomain for bitwarden (bitwarden.mywebsite.com).

Is this right?

In freenom website I added an A Record for bitwarden to redirect to my server's IP and I did the same in Digital Ocean's manage domain.

dunno man, I'm just starting out. I'll tell you when I make it. I've got wordpress and chrome/firefox extension dev skills, but that's it. I hope I make it

Does anybody know if putting loadable content (like a stylesheet from another domain) into a element will make it fetch it or not?

I'm fetching a web-page, putting it into a like template.innerHTML = fetchedHTMLContent and then grabbing a few elements with template.content.querySelector, but if that makes it load all the google analytics junk et cetera, then fuck that. I'm hoping it doesn't.

depends, it probably only fetches the raw html, unless you are using pupeteer or phantomjs

it will fetch inline styles and inline scripts, but it won't load external CSS/scripts

but just test it out for yourself and see what gets fetched.

if you are using node, this is a good lib npmjs.com/package/async-request

for windows there is something like laragon i guess

Since JS still has no observer functionality, is it pretty much a given that larger-scale projects need rxjs (or similar)? I mean a lot of large projects like vs code don't seem to use the pattern much, but it just seems like jumping through hoops to avoid it when it makes so much sense once you are above a certain complexity.

>allows inline editing of colors and saving them into the existing CSS file.
I think I have seen something like that once, but can't remember what it was called.
If you have a dev server running with hot reloading, that should be equally as good though. Then instead of live editing the styles in the browser you can live edit in your editor and see the changes immediately.

React is really making me hate functional programming. Debugging without a state to manipulate is a major pain in the ass.

If you're a proponent of this garbage paradigm I fucking hate you.

What are the differences between cookies and sessions other than the fact that the former are stored on clients machines and the latter on servers?
When would you use one over the other?

>Debugging without a state to manipulate
aren't the react dev tools for that?

Sessions are more secure, since the only data visible to the client is a cookie pointing to the session. For example if you want an an id to a database row to be persistant it's better to do it with a session. It wouldn't be a security flaw per se to do it with a cookie, but it's good practice to be obscure with the data.

Also cookies have a maxium number of character of 4096 (I think). Sessions can store however much data the filesystem on the server supports.

Both cookies and sessions fill a similair roll, but I'd say sessions are the way to go most of the time.

Just console.log everything and i am saying this unironically

yeah, it's a zoomer mess

I thought I was done with that shit when I dropped PHP. I sure am going to miss having an actual debugging workflow.

>Just install more software!!!
Chromium dev tools are extremely powerful and well designed. I shouldn't have to install an entirely new debug environment to get around arbitrary impositions like
>Unexpected use of 'top' no-restricted-globals

Attached: 1554863749.jpg (604x453, 89K)

>wants to debug react
>doesn't want to use react dev tools

Do you enjoy being a retard that makes it unnecessarily hard for himself?
Just install Reacts fucking dev tools extension in your browser.
Literally wtf was even your original plan here?

What kind of retard defends a framework that requires it's own debug tools?

Sorry, I expected better. The state of web development is dogshit.

You want debug tools
But don't want to install them

Okie dokie

to be fair user its just a simple browser extension,its not like the other anons are telling you to configure Microcucks azure

I am making a site that lets you discuss things and i have a little proble, how is the part of a thread/post where you write the most text called? You know the one after a title to explain something in detail Body? Description?

That is a fair enough point. I'm just not particularly partial to installing a bunch of bloat in my computer.

Is there a name for this style of image?
undraw.co/illustrations
I am seeing it more frequently on various sites.

hm, Jow Forums calls it message.
Pick what you like. Body, message, content, etc.

Attached: undraw_creative_team_r90h.png (1362x859, 85K)

>What kind of retard defends a framework that requires it's own debug tools?
React extends the syntax of JavaScript somewhat (technically JSX does, but that's generally assumed with React), plus there are abstractions with the classes. So it's not that weird that the plain JavaScript browser debug tools aren't sufficient to debug React (or at least debug it well).

Django's offering a paid web dev internship.

djangoproject.com/weblog/2019/apr/24/internship-opportunity-dsf-app/

flat vector illustration

thanks

Facebook redesign looks very Twitter like.
It's ok, but can see that style going out of fashion soon.
Assuming it's a PWA

Attached: D5bGEQUW0AEVf47.jpg (588x1200, 116K)